From 42d85096ccb565dfaa045935112a398bc3a831cc Mon Sep 17 00:00:00 2001
From: mamadoudicko <mamadoudicko100@gmail.com>
Date: Mon, 11 Dec 2023 17:48:12 +0100
Subject: [PATCH 1/7] style : update colors

---
 frontend/tailwind.config.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 7ee29d0d91da..cc43b5c67491 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -16,7 +16,8 @@ module.exports = {
       },
       colors: {
         black: "#11243E",
-        primary: "#7A27FD",
+        primary: "#6142D4",
+        accent: "#13ABBA",
         "chat-bg-gray": "#D9D9D9",
         "msg-gray": "#9B9B9B",
         "msg-header-gray": "#8F8F8F",

From 9e7122503dcd7649fe36712af06228e61437ea33 Mon Sep 17 00:00:00 2001
From: mamadoudicko <mamadoudicko100@gmail.com>
Date: Mon, 11 Dec 2023 17:48:28 +0100
Subject: [PATCH 2/7] feat: update chat button

---
 .../components/ActionsBar/components/ChatInput/index.tsx        | 2 +-
 frontend/lib/components/ui/Button.tsx                           | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
index 078e72cc23bc..da4ab08ddf22 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
@@ -60,7 +60,7 @@ export const ChatInput = ({
 
           <div className="flex flex-row items-end">
             <Button
-              className="px-3 py-2 sm:px-4 sm:py-2"
+              className="px-3 py-2 sm:px-4 sm:py-2 bg-primary border-0"
               type="submit"
               isLoading={generatingAnswer}
               data-testid="submit-button"
diff --git a/frontend/lib/components/ui/Button.tsx b/frontend/lib/components/ui/Button.tsx
index 6bb0f9899bfa..1fbc7e2de882 100644
--- a/frontend/lib/components/ui/Button.tsx
+++ b/frontend/lib/components/ui/Button.tsx
@@ -68,7 +68,6 @@ const Button = forwardRef(
         {children} {isLoading && <FaSpinner className="animate-spin" />}
       </>
     );
-    const buttonElement = <button {...buttonProps}>buttonChildren</button>;
 
     if (tooltip !== undefined) {
       return (

From 3cb49093bac0cba61745c425db6fe9e08994693e Mon Sep 17 00:00:00 2001
From: mamadoudicko <mamadoudicko100@gmail.com>
Date: Tue, 12 Dec 2023 09:40:55 +0100
Subject: [PATCH 3/7] feat: add chat options popover

---
 .../components/ActionsModal/ActionsModal.tsx  | 42 ++++++++++
 .../ActionsModal/components/Button.tsx        | 42 ++++++++++
 .../components/ConfigModal/ConfigModal.tsx    | 82 +++++++++++++++++++
 .../ConfigModal/hooks/useConfigModal.ts       | 78 ++++++++++++++++++
 .../components/ConfigModal/index.ts           |  1 +
 .../ActionsBar/components/ChatInput/index.tsx |  8 +-
 6 files changed, 248 insertions(+), 5 deletions(-)
 create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/ActionsModal.tsx
 create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/Button.tsx
 create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/ConfigModal.tsx
 create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/hooks/useConfigModal.ts
 create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/index.ts

diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/ActionsModal.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/ActionsModal.tsx
new file mode 100644
index 000000000000..0742ef086527
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/ActionsModal.tsx
@@ -0,0 +1,42 @@
+import { PopoverAnchor } from "@radix-ui/react-popover";
+import { useState } from "react";
+import { LuPlusCircle, LuXCircle } from "react-icons/lu";
+
+import Button from "@/lib/components/ui/Button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/lib/components/ui/Popover";
+
+import { ConfigModal } from "./components/ConfigModal";
+
+export const ActionsModal = (): JSX.Element => {
+  const [isActionsModalOpened, setIsActionsModalOpened] = useState(false);
+
+  const Icon = isActionsModalOpened ? LuXCircle : LuPlusCircle;
+
+  return (
+    <div className="flex items-center">
+      <Popover
+        open={isActionsModalOpened}
+        onOpenChange={(isOpened) => setIsActionsModalOpened(isOpened)}
+      >
+        <PopoverTrigger>
+          <PopoverAnchor asChild>
+            <Button variant="tertiary" type="button" className="p-0">
+              <Icon className="text-accent font-bold" size={30} />
+            </Button>
+          </PopoverAnchor>
+        </PopoverTrigger>
+        <PopoverContent
+          align="end"
+          sideOffset={15}
+          className="min-h-[200px] w-[200px]"
+        >
+          <ConfigModal />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/Button.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/Button.tsx
new file mode 100644
index 000000000000..87f73f38a3bc
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/Button.tsx
@@ -0,0 +1,42 @@
+import { forwardRef } from "react";
+
+import CoreButton, {
+  ButtonProps as CoreButtonProps,
+} from "@/lib/components/ui/Button";
+import { cn } from "@/lib/utils";
+
+type ButtonProps = CoreButtonProps & {
+  onClick?: () => void;
+  className?: string;
+  label?: string;
+  startIcon?: JSX.Element;
+  endIcon?: JSX.Element;
+};
+
+export const Button = forwardRef(
+  (
+    { onClick, className, label, startIcon, endIcon, ...props }: ButtonProps,
+    forwardedRef
+  ): JSX.Element => {
+    return (
+      <CoreButton
+        className={cn("p-2 sm:px-3 text-primary focus:ring-0 ", className)}
+        variant={"tertiary"}
+        data-testid="config-button"
+        ref={forwardedRef}
+        onClick={onClick}
+        {...props}
+      >
+        <div className="flex flex-row justify-between w-full items-center">
+          <div className="flex flex-row gap-2 items-center">
+            {startIcon}
+            <span className="hidden sm:block">{label}</span>
+          </div>
+          {endIcon}
+        </div>
+      </CoreButton>
+    );
+  }
+);
+
+Button.displayName = CoreButton.displayName;
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/ConfigModal.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/ConfigModal.tsx
new file mode 100644
index 000000000000..82ddd0bd81f1
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/ConfigModal.tsx
@@ -0,0 +1,82 @@
+import { useTranslation } from "react-i18next";
+import { LuChevronRight, LuSettings } from "react-icons/lu";
+import { MdCheck } from "react-icons/md";
+
+import { Modal } from "@/lib/components/ui/Modal";
+import { defineMaxTokens } from "@/lib/helpers/defineMaxTokens";
+
+import { useConfigModal } from "./hooks/useConfigModal";
+import { Button } from "../Button";
+
+export const ConfigModal = (): JSX.Element => {
+  const {
+    handleSubmit,
+    isConfigModalOpen,
+    setIsConfigModalOpen,
+    register,
+    maxTokens,
+    model,
+    accessibleModels,
+  } = useConfigModal();
+  const { t } = useTranslation("config");
+
+  return (
+    <Modal
+      Trigger={
+        <Button
+          label={"Parametres"}
+          startIcon={<LuSettings size={18} />}
+          endIcon={<LuChevronRight size={18} />}
+        />
+      }
+      title="Chat configuration"
+      desc="Adjust your chat settings"
+      isOpen={isConfigModalOpen}
+      setOpen={setIsConfigModalOpen}
+      CloseTrigger={<div />}
+    >
+      <form className="mt-10 flex flex-col items-center gap-2">
+        <fieldset className="w-full flex flex-col">
+          <label className="flex-1 text-sm" htmlFor="model">
+            {t("modelLabel")}
+          </label>
+          <select
+            {...register("model")}
+            className="px-5 py-2 dark:bg-gray-700 bg-gray-200 rounded-md"
+          >
+            <option value="">{t("modelLabel")}</option>
+            {accessibleModels.map((availableModel) => (
+              <option value={availableModel} key={availableModel}>
+                {availableModel}
+              </option>
+            ))}
+          </select>
+        </fieldset>
+        <fieldset className="w-full flex mt-4">
+          <label className="flex-1" htmlFor="tokens">
+            Max tokens: {maxTokens}
+          </label>
+          <input
+            type="range"
+            min="10"
+            max={defineMaxTokens(model)}
+            value={maxTokens}
+            {...register("maxTokens")}
+          />
+        </fieldset>
+
+        <Button
+          className="mt-12 self-end text-white"
+          type="button"
+          onClick={() => {
+            handleSubmit();
+            setIsConfigModalOpen(false);
+          }}
+          variant={"primary"}
+          label="Save"
+          endIcon={<MdCheck className="text-xl" />}
+        />
+      </form>
+    </Modal>
+  );
+};
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/hooks/useConfigModal.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/hooks/useConfigModal.ts
new file mode 100644
index 000000000000..176bcef2c975
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/hooks/useConfigModal.ts
@@ -0,0 +1,78 @@
+/* eslint-disable max-lines */
+import { useCallback, useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+
+import { useLocalStorageChatConfig } from "@/app/chat/[chatId]/hooks/useLocalStorageChatConfig";
+import { saveChatsConfigInLocalStorage } from "@/lib/api/chat/chat.local";
+import { ChatConfig } from "@/lib/context/ChatProvider/types";
+import { getAccessibleModels } from "@/lib/helpers/getAccessibleModels";
+import { useToast } from "@/lib/hooks";
+import { useUserData } from "@/lib/hooks/useUserData";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useConfigModal = () => {
+  const { publish } = useToast();
+  const [isConfigModalOpen, setIsConfigModalOpen] = useState(false);
+  const { chatConfig } = useLocalStorageChatConfig();
+  const { userData } = useUserData();
+
+  const { register, watch, setValue } = useForm<ChatConfig>({
+    defaultValues: {
+      model: chatConfig.model,
+      temperature: chatConfig.temperature ?? 0,
+      maxTokens: chatConfig.maxTokens ?? 3000,
+    },
+  });
+
+  const model = watch("model");
+
+  const temperature = watch("temperature");
+  const maxTokens = watch("maxTokens");
+
+  const accessibleModels = getAccessibleModels({
+    userData,
+  });
+
+  useEffect(() => {
+    if (chatConfig.model !== undefined) {
+      setValue("model", chatConfig.model);
+    }
+    if (chatConfig.temperature !== undefined) {
+      setValue("temperature", chatConfig.temperature);
+    }
+    if (chatConfig.maxTokens !== undefined) {
+      setValue("maxTokens", chatConfig.maxTokens);
+    }
+  }, [chatConfig.maxTokens, chatConfig.model, chatConfig.temperature]);
+
+  const handleSubmit = useCallback(() => {
+    try {
+      saveChatsConfigInLocalStorage({
+        maxTokens,
+        model: model.length > 0 ? model : undefined,
+        temperature,
+      });
+
+      publish({
+        variant: "success",
+        text: "Chat config successfully updated",
+      });
+    } catch (err) {
+      publish({
+        variant: "danger",
+        text: "An error occurred while updating chat config",
+      });
+    }
+  }, [maxTokens, model, publish, temperature]);
+
+  return {
+    isConfigModalOpen,
+    setIsConfigModalOpen,
+    handleSubmit,
+    register,
+    model,
+    temperature,
+    maxTokens,
+    accessibleModels,
+  };
+};
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/index.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/index.ts
new file mode 100644
index 000000000000..4c07388b515b
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/index.ts
@@ -0,0 +1 @@
+export * from "./ConfigModal";
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
index da4ab08ddf22..4619e6eeb3a8 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
@@ -7,8 +7,8 @@ import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider
 import { getBrainIconFromBrainType } from "@/lib/helpers/getBrainIconFromBrainType";
 
 import { OnboardingQuestions } from "./components";
+import { ActionsModal } from "./components/ActionsModal/ActionsModal";
 import { ChatEditor } from "./components/ChatEditor/ChatEditor";
-import { ConfigModal } from "./components/ConfigModal";
 import { useChatInput } from "./hooks/useChatInput";
 
 type ChatInputProps = {
@@ -58,7 +58,7 @@ export const ChatInput = ({
             />
           </div>
 
-          <div className="flex flex-row items-end">
+          <div className="flex flex-row items-center gap-4">
             <Button
               className="px-3 py-2 sm:px-4 sm:py-2 bg-primary border-0"
               type="submit"
@@ -69,9 +69,7 @@ export const ChatInput = ({
                 ? t("thinking", { ns: "chat" })
                 : t("chat", { ns: "chat" })}
             </Button>
-            <div className="hidden md:flex items-center">
-              <ConfigModal />
-            </div>
+            <ActionsModal />
           </div>
         </form>
       </div>

From 475f5e83a0068c80e15273994c928e228282f407 Mon Sep 17 00:00:00 2001
From: mamadoudicko <mamadoudicko100@gmail.com>
Date: Tue, 12 Dec 2023 09:41:17 +0100
Subject: [PATCH 4/7] feat: move chat config to chat options popover

---
 .../components/ConfigModal/ConfigModal.tsx    |  1 +
 .../components/ConfigModal/ConfigModal.tsx    | 84 -------------------
 .../ConfigModal/hooks/useConfigModal.ts       | 78 -----------------
 .../ChatInput/components/ConfigModal/index.ts |  1 -
 .../components/ChatInput/components/index.ts  |  1 -
 5 files changed, 1 insertion(+), 164 deletions(-)
 delete mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/ConfigModal.tsx
 delete mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/hooks/useConfigModal.ts
 delete mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/index.ts

diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/ConfigModal.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/ConfigModal.tsx
index 82ddd0bd81f1..bbe66c11097e 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/ConfigModal.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ConfigModal/ConfigModal.tsx
@@ -27,6 +27,7 @@ export const ConfigModal = (): JSX.Element => {
           label={"Parametres"}
           startIcon={<LuSettings size={18} />}
           endIcon={<LuChevronRight size={18} />}
+          className="w-full"
         />
       }
       title="Chat configuration"
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/ConfigModal.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/ConfigModal.tsx
deleted file mode 100644
index 7d1406c4f229..000000000000
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/ConfigModal.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/* eslint-disable max-lines */
-import { useTranslation } from "react-i18next";
-import { MdCheck, MdSettings } from "react-icons/md";
-
-import Button from "@/lib/components/ui/Button";
-import { Modal } from "@/lib/components/ui/Modal";
-import { defineMaxTokens } from "@/lib/helpers/defineMaxTokens";
-
-import { useConfigModal } from "./hooks/useConfigModal";
-
-export const ConfigModal = (): JSX.Element => {
-  const {
-    handleSubmit,
-    isConfigModalOpen,
-    setIsConfigModalOpen,
-    register,
-    maxTokens,
-    model,
-    accessibleModels,
-  } = useConfigModal();
-  const { t } = useTranslation("config");
-
-  return (
-    <Modal
-      Trigger={
-        <Button
-          className="p-2 sm:px-3"
-          variant={"tertiary"}
-          data-testid="config-button"
-        >
-          <MdSettings className="text-lg sm:text-xl lg:text-2xl" />
-        </Button>
-      }
-      title="Chat configuration"
-      desc="Adjust your chat settings"
-      isOpen={isConfigModalOpen}
-      setOpen={setIsConfigModalOpen}
-      CloseTrigger={<div />}
-    >
-      <form className="mt-10 flex flex-col items-center gap-2">
-        <fieldset className="w-full flex flex-col">
-          <label className="flex-1 text-sm" htmlFor="model">
-            {t("modelLabel")}
-          </label>
-          <select
-            {...register("model")}
-            className="px-5 py-2 dark:bg-gray-700 bg-gray-200 rounded-md"
-          >
-            <option value="">{t("modelLabel")}</option>
-            {accessibleModels.map((availableModel) => (
-              <option value={availableModel} key={availableModel}>
-                {availableModel}
-              </option>
-            ))}
-          </select>
-        </fieldset>
-        <fieldset className="w-full flex mt-4">
-          <label className="flex-1" htmlFor="tokens">
-            Max tokens: {maxTokens}
-          </label>
-          <input
-            type="range"
-            min="10"
-            max={defineMaxTokens(model)}
-            value={maxTokens}
-            {...register("maxTokens")}
-          />
-        </fieldset>
-
-        <Button
-          className="mt-12 self-end"
-          type="button"
-          onClick={() => {
-            handleSubmit();
-            setIsConfigModalOpen(false);
-          }}
-        >
-          Save
-          <MdCheck className="text-xl" />
-        </Button>
-      </form>
-    </Modal>
-  );
-};
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/hooks/useConfigModal.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/hooks/useConfigModal.ts
deleted file mode 100644
index 176bcef2c975..000000000000
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/hooks/useConfigModal.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/* eslint-disable max-lines */
-import { useCallback, useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-
-import { useLocalStorageChatConfig } from "@/app/chat/[chatId]/hooks/useLocalStorageChatConfig";
-import { saveChatsConfigInLocalStorage } from "@/lib/api/chat/chat.local";
-import { ChatConfig } from "@/lib/context/ChatProvider/types";
-import { getAccessibleModels } from "@/lib/helpers/getAccessibleModels";
-import { useToast } from "@/lib/hooks";
-import { useUserData } from "@/lib/hooks/useUserData";
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const useConfigModal = () => {
-  const { publish } = useToast();
-  const [isConfigModalOpen, setIsConfigModalOpen] = useState(false);
-  const { chatConfig } = useLocalStorageChatConfig();
-  const { userData } = useUserData();
-
-  const { register, watch, setValue } = useForm<ChatConfig>({
-    defaultValues: {
-      model: chatConfig.model,
-      temperature: chatConfig.temperature ?? 0,
-      maxTokens: chatConfig.maxTokens ?? 3000,
-    },
-  });
-
-  const model = watch("model");
-
-  const temperature = watch("temperature");
-  const maxTokens = watch("maxTokens");
-
-  const accessibleModels = getAccessibleModels({
-    userData,
-  });
-
-  useEffect(() => {
-    if (chatConfig.model !== undefined) {
-      setValue("model", chatConfig.model);
-    }
-    if (chatConfig.temperature !== undefined) {
-      setValue("temperature", chatConfig.temperature);
-    }
-    if (chatConfig.maxTokens !== undefined) {
-      setValue("maxTokens", chatConfig.maxTokens);
-    }
-  }, [chatConfig.maxTokens, chatConfig.model, chatConfig.temperature]);
-
-  const handleSubmit = useCallback(() => {
-    try {
-      saveChatsConfigInLocalStorage({
-        maxTokens,
-        model: model.length > 0 ? model : undefined,
-        temperature,
-      });
-
-      publish({
-        variant: "success",
-        text: "Chat config successfully updated",
-      });
-    } catch (err) {
-      publish({
-        variant: "danger",
-        text: "An error occurred while updating chat config",
-      });
-    }
-  }, [maxTokens, model, publish, temperature]);
-
-  return {
-    isConfigModalOpen,
-    setIsConfigModalOpen,
-    handleSubmit,
-    register,
-    model,
-    temperature,
-    maxTokens,
-    accessibleModels,
-  };
-};
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/index.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/index.ts
deleted file mode 100644
index 4c07388b515b..000000000000
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./ConfigModal";
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/index.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/index.ts
index 07a86bb961d0..319b800a7e1e 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/index.ts
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/index.ts
@@ -1,2 +1 @@
-export * from "./ConfigModal";
 export * from "./OnboardingQuestions";

From 62b46e80f1af0681fd953756cc7c91363b256904 Mon Sep 17 00:00:00 2001
From: mamadoudicko <mamadoudicko100@gmail.com>
Date: Tue, 12 Dec 2023 09:42:40 +0100
Subject: [PATCH 5/7] feat: update popover component

---
 frontend/lib/components/UserToInvite.tsx |  2 +
 frontend/lib/components/ui/Popover.tsx   | 88 +++++++-----------------
 frontend/lib/components/ui/Select.tsx    | 65 ++++++++++-------
 3 files changed, 64 insertions(+), 91 deletions(-)

diff --git a/frontend/lib/components/UserToInvite.tsx b/frontend/lib/components/UserToInvite.tsx
index adfe9b2d1396..045bad91da6b 100644
--- a/frontend/lib/components/UserToInvite.tsx
+++ b/frontend/lib/components/UserToInvite.tsx
@@ -70,6 +70,8 @@ export const UserToInvite = ({
         onChange={setSelectedRole}
         value={selectedRole}
         options={translatedOptions}
+        popoverSide="bottom"
+        popoverClassName="w-36"
       />
     </div>
   );
diff --git a/frontend/lib/components/ui/Popover.tsx b/frontend/lib/components/ui/Popover.tsx
index 36563953476b..98ee59d9e3b2 100644
--- a/frontend/lib/components/ui/Popover.tsx
+++ b/frontend/lib/components/ui/Popover.tsx
@@ -1,71 +1,29 @@
-"use client";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { AnimatePresence, motion } from "framer-motion";
-import { ReactNode, useState } from "react";
+import * as React from "react";
 
-import Button from "./Button";
+import { cn } from "@/lib/utils";
 
-interface PopoverProps {
-  children?: ReactNode;
-  Trigger: ReactNode;
-  ActionTrigger?: ReactNode;
-  CloseTrigger?: ReactNode;
-}
+const Popover = PopoverPrimitive.Root;
 
-const Popover = ({
-  children,
-  Trigger,
-  ActionTrigger,
-  CloseTrigger,
-}: PopoverProps): JSX.Element => {
-  const [open, setOpen] = useState(false);
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
-  return (
-    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
-      <PopoverPrimitive.Trigger asChild>{Trigger}</PopoverPrimitive.Trigger>
-      <AnimatePresence>
-        {open && (
-          <PopoverPrimitive.Portal forceMount>
-            <PopoverPrimitive.Content forceMount asChild sideOffset={5}>
-              <motion.div
-                initial={{ opacity: 0, y: -32 }}
-                animate={{
-                  opacity: 1,
-                  y: 0,
-                }}
-                exit={{ opacity: 0, y: -32 }}
-                transition={{ duration: 0.2, ease: "easeInOut" }}
-                className="relative flex flex-col p-4 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg z-50 md:z-40"
-              >
-                <div className="flex-1">{children}</div>
-                <div className="mt-4 self-end flex gap-4">
-                  {ActionTrigger !== undefined && (
-                    <PopoverPrimitive.Close asChild>
-                      {ActionTrigger}
-                    </PopoverPrimitive.Close>
-                  )}
-                  <PopoverPrimitive.Close asChild>
-                    {CloseTrigger === undefined ? (
-                      <Button
-                        variant={"secondary"}
-                        className="px-3 py-2"
-                        aria-label="Close"
-                      >
-                        Close
-                      </Button>
-                    ) : (
-                      CloseTrigger
-                    )}
-                  </PopoverPrimitive.Close>
-                </div>
-                <PopoverPrimitive.Arrow className="fill-white stroke-gray-300 stroke-2" />
-              </motion.div>
-            </PopoverPrimitive.Content>
-          </PopoverPrimitive.Portal>
-        )}
-      </AnimatePresence>
-    </PopoverPrimitive.Root>
-  );
-};
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-white p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export default Popover;
+export { Popover, PopoverContent, PopoverTrigger };
diff --git a/frontend/lib/components/ui/Select.tsx b/frontend/lib/components/ui/Select.tsx
index 901d19863b3c..9926c7e01038 100644
--- a/frontend/lib/components/ui/Select.tsx
+++ b/frontend/lib/components/ui/Select.tsx
@@ -1,7 +1,13 @@
+/*eslint complexity: ["error", 10]*/
+
 /* eslint-disable max-lines */
 import { BsCheckCircleFill } from "react-icons/bs";
 
-import Popover from "@/lib/components/ui/Popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/lib/components/ui/Popover";
 import { cn } from "@/lib/utils";
 
 export type SelectOptionProps<T> = {
@@ -17,6 +23,8 @@ type SelectProps<T> = {
   readOnly?: boolean;
   className?: string;
   emptyLabel?: string;
+  popoverClassName?: string;
+  popoverSide?: "top" | "bottom" | "left" | "right" | undefined;
 };
 
 const selectedStyle = "rounded-lg bg-black text-white";
@@ -29,6 +37,8 @@ export const Select = <T extends string | number>({
   readOnly = false,
   className,
   emptyLabel,
+  popoverClassName,
+  popoverSide,
 }: SelectProps<T>): JSX.Element => {
   const selectedValueLabel = options.find(
     (option) => option.value === value
@@ -74,8 +84,8 @@ export const Select = <T extends string | number>({
         </label>
       )}
       <div className="relative">
-        <Popover
-          Trigger={
+        <Popover>
+          <PopoverTrigger>
             <button
               type="button"
               className="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm sm:leading-6"
@@ -101,30 +111,33 @@ export const Select = <T extends string | number>({
                 </svg>
               </span>
             </button>
-          }
-          CloseTrigger={<div />}
-        >
-          <ul role="listbox">
-            {options.map((option) => (
-              <li
-                className="text-gray-900 relative cursor-pointer select-none py-2"
-                id="listbox-option-0"
-                key={option.value}
-                onClick={() => onChange(option.value)}
-              >
-                <div
-                  className={`flex items-center px-3 py-2 ${
-                    value === option.value && selectedStyle
-                  }`}
+          </PopoverTrigger>
+          <PopoverContent
+            className={cn("max-h-[200px] overflow-scroll", popoverClassName)}
+            side={popoverSide ?? "top"}
+          >
+            <ul role="listbox">
+              {options.map((option) => (
+                <li
+                  className="text-gray-900 relative cursor-pointer select-none py-0"
+                  id="listbox-option-0"
+                  key={option.value}
+                  onClick={() => onChange(option.value)}
                 >
-                  <span className="font-bold block truncate mr-2">
-                    {option.label}
-                  </span>
-                  {value === option.value && <BsCheckCircleFill />}
-                </div>
-              </li>
-            ))}
-          </ul>
+                  <div
+                    className={`flex items-center px-3 py-2 ${
+                      value === option.value && selectedStyle
+                    }`}
+                  >
+                    <span className="font-bold block truncate mr-2">
+                      {option.label}
+                    </span>
+                    {value === option.value && <BsCheckCircleFill />}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </PopoverContent>
         </Popover>
       </div>
     </div>

From 8818dc41cebf202be5a5aa2481d3cabc0557c765 Mon Sep 17 00:00:00 2001
From: mamadoudicko <mamadoudicko100@gmail.com>
Date: Tue, 12 Dec 2023 09:44:20 +0100
Subject: [PATCH 6/7] feat: remove unused components

---
 .../LanguageDropDown/LanguageDropDown.tsx     | 59 -------------------
 .../user/components/LanguageDropDown/index.ts |  1 -
 .../LanguageSelect.tsx                        |  0
 .../__tests__/LanguageSelect.test.tsx         |  0
 .../hooks/useLanguageHook.ts                  |  0
 frontend/app/user/page.tsx                    |  2 +-
 6 files changed, 1 insertion(+), 61 deletions(-)
 delete mode 100644 frontend/app/user/components/LanguageDropDown/LanguageDropDown.tsx
 delete mode 100644 frontend/app/user/components/LanguageDropDown/index.ts
 rename frontend/app/user/components/{LanguageDropDown => LanguageSelect}/LanguageSelect.tsx (100%)
 rename frontend/app/user/components/{LanguageDropDown => LanguageSelect}/__tests__/LanguageSelect.test.tsx (100%)
 rename frontend/app/user/components/{LanguageDropDown => LanguageSelect}/hooks/useLanguageHook.ts (100%)

diff --git a/frontend/app/user/components/LanguageDropDown/LanguageDropDown.tsx b/frontend/app/user/components/LanguageDropDown/LanguageDropDown.tsx
deleted file mode 100644
index 592039294bd3..000000000000
--- a/frontend/app/user/components/LanguageDropDown/LanguageDropDown.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { FaLanguage } from "react-icons/fa";
-import { MdCheck } from "react-icons/md";
-
-import Popover from "@/lib/components/ui/Popover";
-
-import { useLanguageHook } from "./hooks/useLanguageHook";
-
-export const LanguageDropDown = (): JSX.Element => {
-  const { allLanguages, currentLanguage, change } = useLanguageHook();
-
-  return (
-    <>
-      {/* Add the brain icon and dropdown */}
-      <div className="focus:outline-none text-3xl">
-        <Popover
-          Trigger={
-            <button
-              type="button"
-              className="flex items-center focus:outline-none"
-            >
-              <FaLanguage className="w-6 h-6" />
-            </button>
-          }
-          CloseTrigger={false}
-        >
-          <div>
-            <div className="overflow-auto scrollbar flex flex-col h-48 mt-5">
-              {Object.keys(allLanguages).map((lang) => {
-                return (
-                  <div key={lang} className="relative flex group items-center">
-                    <button
-                      type="button"
-                      className={`flex flex-1 items-center gap-2 w-full text-left px-4 py-2 text-sm leading-5 text-gray-900 dark:text-gray-300 group-hover:bg-gray-100 dark:group-hover:bg-gray-700 group-focus:bg-gray-100 dark:group-focus:bg-gray-700 group-focus:outline-none transition-colors`}
-                      onClick={() => {
-                        change(lang);
-                      }}
-                    >
-                      <span>
-                        <MdCheck
-                          style={{
-                            opacity: currentLanguage === lang ? 1 : 0,
-                          }}
-                          className="text-xl transition-opacity"
-                          width={32}
-                          height={32}
-                        />
-                      </span>
-                      <span className="flex-1">{allLanguages[lang].label}</span>
-                    </button>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        </Popover>
-      </div>
-    </>
-  );
-};
diff --git a/frontend/app/user/components/LanguageDropDown/index.ts b/frontend/app/user/components/LanguageDropDown/index.ts
deleted file mode 100644
index 6d219232313f..000000000000
--- a/frontend/app/user/components/LanguageDropDown/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./LanguageDropDown";
diff --git a/frontend/app/user/components/LanguageDropDown/LanguageSelect.tsx b/frontend/app/user/components/LanguageSelect/LanguageSelect.tsx
similarity index 100%
rename from frontend/app/user/components/LanguageDropDown/LanguageSelect.tsx
rename to frontend/app/user/components/LanguageSelect/LanguageSelect.tsx
diff --git a/frontend/app/user/components/LanguageDropDown/__tests__/LanguageSelect.test.tsx b/frontend/app/user/components/LanguageSelect/__tests__/LanguageSelect.test.tsx
similarity index 100%
rename from frontend/app/user/components/LanguageDropDown/__tests__/LanguageSelect.test.tsx
rename to frontend/app/user/components/LanguageSelect/__tests__/LanguageSelect.test.tsx
diff --git a/frontend/app/user/components/LanguageDropDown/hooks/useLanguageHook.ts b/frontend/app/user/components/LanguageSelect/hooks/useLanguageHook.ts
similarity index 100%
rename from frontend/app/user/components/LanguageDropDown/hooks/useLanguageHook.ts
rename to frontend/app/user/components/LanguageSelect/hooks/useLanguageHook.ts
diff --git a/frontend/app/user/page.tsx b/frontend/app/user/page.tsx
index 42cf2a0a49a3..2ba9e2dcd938 100644
--- a/frontend/app/user/page.tsx
+++ b/frontend/app/user/page.tsx
@@ -9,7 +9,7 @@ import { redirectToLogin } from "@/lib/router/redirectToLogin";
 
 import { StripePricingOrManageButton, UserStatistics } from "./components";
 import { ApiKeyConfig } from "./components/ApiKeyConfig";
-import LanguageSelect from "./components/LanguageDropDown/LanguageSelect";
+import LanguageSelect from "./components/LanguageSelect/LanguageSelect";
 import { LogoutModal } from "./components/LogoutCard/LogoutModal";
 import ThemeSelect from "./components/ThemeSelect/ThemeSelect";
 

From 182286321d8be72211aa386b166d2bd12ad6c087 Mon Sep 17 00:00:00 2001
From: mamadoudicko <mamadoudicko100@gmail.com>
Date: Tue, 12 Dec 2023 12:33:19 +0100
Subject: [PATCH 7/7] style: update Quivr font

---
 frontend/app/layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index b43a7174ff40..6a632711074e 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,6 +1,6 @@
 import { createServerComponentSupabaseClient } from "@supabase/auth-helpers-nextjs";
 import { Analytics as VercelAnalytics } from "@vercel/analytics/react";
-import { Inter } from "next/font/google";
+import { Outfit } from "next/font/google";
 import { cookies, headers } from "next/headers";
 
 import { ToastProvider } from "@/lib/components/ui/Toast";
@@ -10,7 +10,7 @@ import { SupabaseProvider } from "@/lib/context/SupabaseProvider";
 import { App } from "./App";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Outfit({ subsets: ["latin"], weight: "400" });
 
 export const metadata = {
   title: "Quivr - Get a Second Brain with Generative AI",