From c89d5969900da2ede8a28ff3cc70e10b64aa30ab Mon Sep 17 00:00:00 2001
From: Antoine Dewez <44063631+Zewed@users.noreply.github.com>
Date: Wed, 27 Mar 2024 14:52:42 -0700
Subject: [PATCH 1/3] fix(frontend): dark mode issues (#2382)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):
---
 .../EmailLogin/components/EmailInput.tsx      | 28 ++++------
 .../PasswordLogin/PasswordLogin.tsx           | 25 +++++----
 frontend/app/(auth)/login/page.module.scss    | 46 ++++++++++++++++
 frontend/app/(auth)/login/page.tsx            | 50 ++++++++---------
 frontend/app/(home)/page.tsx                  | 55 ++-----------------
 .../BrainCatalogue/BrainCatalogue.module.scss |  6 +-
 .../lib/components/ui/Tag/Tag.module.scss     |  2 +-
 .../lib/components/ui/TextInput/TextInput.tsx |  4 +-
 .../User-settings.provider.tsx                |  6 +-
 9 files changed, 112 insertions(+), 110 deletions(-)
 create mode 100644 frontend/app/(auth)/login/page.module.scss

diff --git a/frontend/app/(auth)/login/components/EmailLogin/components/EmailInput.tsx b/frontend/app/(auth)/login/components/EmailLogin/components/EmailInput.tsx
index 929a8004d..2d71f0c15 100644
--- a/frontend/app/(auth)/login/components/EmailLogin/components/EmailInput.tsx
+++ b/frontend/app/(auth)/login/components/EmailLogin/components/EmailInput.tsx
@@ -1,30 +1,26 @@
 import { Fragment } from "react";
-import { useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
+import { Controller } from "react-hook-form";
 
-import Field from "@/lib/components/ui/Field";
-import { emailPattern } from "@/lib/config/patterns";
+import { TextInput } from "@/lib/components/ui/TextInput/TextInput";
 import { useAuthModes } from "@/lib/hooks/useAuthModes";
 
-import { EmailAuthContextType } from "../../../types";
-
 export const EmailInput = (): JSX.Element => {
-  const { register } = useFormContext<EmailAuthContextType>();
-  const { t } = useTranslation();
   const { password, magicLink } = useAuthModes();
   if (!password && !magicLink) {
     return <Fragment />;
   }
 
   return (
-    <Field
-      {...register("email", {
-        required: true,
-        pattern: emailPattern,
-      })}
-      placeholder={t("email", { ns: "login" })}
-      label={t("email", { ns: "translation" })}
-      inputClassName="py-1 mt-1 mb-3"
+    <Controller
+      name="email"
+      defaultValue=""
+      render={({ field }) => (
+        <TextInput
+          label="Email"
+          inputValue={field.value as string}
+          setInputValue={field.onChange}
+        />
+      )}
     />
   );
 };
diff --git a/frontend/app/(auth)/login/components/EmailLogin/components/PasswordLogin/PasswordLogin.tsx b/frontend/app/(auth)/login/components/EmailLogin/components/PasswordLogin/PasswordLogin.tsx
index 65cbff5a2..a0f5ee514 100644
--- a/frontend/app/(auth)/login/components/EmailLogin/components/PasswordLogin/PasswordLogin.tsx
+++ b/frontend/app/(auth)/login/components/EmailLogin/components/PasswordLogin/PasswordLogin.tsx
@@ -1,10 +1,10 @@
 import { Fragment } from "react";
-import { useFormContext } from "react-hook-form";
+import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
 import { EmailAuthContextType } from "@/app/(auth)/login/types";
 import Button from "@/lib/components/ui/Button";
-import Field from "@/lib/components/ui/Field";
+import { TextInput } from "@/lib/components/ui/TextInput/TextInput";
 import { useAuthModes } from "@/lib/hooks/useAuthModes";
 
 import { usePasswordLogin } from "./hooks/usePasswordLogin";
@@ -13,7 +13,7 @@ export const PasswordLogin = (): JSX.Element => {
   const { t } = useTranslation(["login"]);
   const { password } = useAuthModes();
   const { handlePasswordLogin } = usePasswordLogin();
-  const { register, watch } = useFormContext<EmailAuthContextType>();
+  const { watch } = useFormContext<EmailAuthContextType>();
 
   if (!password) {
     return <Fragment />;
@@ -21,17 +21,22 @@ export const PasswordLogin = (): JSX.Element => {
 
   return (
     <div>
-      <Field
-        {...register("password", { required: true })}
-        placeholder={t("password", { ns: "login" })}
-        label={t("password", { ns: "login" })}
-        inputClassName="py-1 mt-1 mb-3"
-        type="password"
+      <Controller
+        name="password"
+        defaultValue=""
+        render={({ field }) => (
+          <TextInput
+            label="Password"
+            inputValue={field.value as string}
+            setInputValue={field.onChange}
+            crypted={true}
+          />
+        )}
       />
       <Button
         isLoading={watch("isPasswordSubmitting")}
         variant="secondary"
-        className="py-2 font-normal w-full mb-1"
+        className="py-2 font-normal w-full mb-1 mt-2"
         onClick={() => void handlePasswordLogin()}
       >
         {t("login")}
diff --git a/frontend/app/(auth)/login/page.module.scss b/frontend/app/(auth)/login/page.module.scss
new file mode 100644
index 000000000..259d4b505
--- /dev/null
+++ b/frontend/app/(auth)/login/page.module.scss
@@ -0,0 +1,46 @@
+@use "@/styles/Spacings.module.scss";
+@use "@/styles/Typography.module.scss";
+
+.login_page_wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .section {
+    max-width: 500px;
+    display: flex;
+    flex-direction: column;
+    row-gap: Spacings.$spacing03;
+
+    .logo_link {
+      display: flex;
+      justify-content: center;
+    }
+
+    .title {
+      @include Typography.Big;
+      text-align: center;
+
+      .primary_text {
+        color: var(--primary);
+      }
+    }
+
+    .form_container {
+      display: flex;
+      flex-direction: column;
+      gap: Spacings.$spacing03;
+    }
+
+    .divider {
+      text-transform: uppercase;
+    }
+
+    .restriction_message {
+      text-align: center;
+      font-size: Typography.$tiny;
+    }
+  }
+}
diff --git a/frontend/app/(auth)/login/page.tsx b/frontend/app/(auth)/login/page.tsx
index f07e71798..75f0e7e43 100644
--- a/frontend/app/(auth)/login/page.tsx
+++ b/frontend/app/(auth)/login/page.tsx
@@ -5,17 +5,19 @@ import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
 import { QuivrLogo } from "@/lib/assets/QuivrLogo";
-import { Divider } from "@/lib/components/ui/Divider";
+import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks/useUserSettingsContext";
 import { useAuthModes } from "@/lib/hooks/useAuthModes";
 
 import { EmailLogin } from "./components/EmailLogin";
 import { GoogleLoginButton } from "./components/GoogleLogin";
 import { useLogin } from "./hooks/useLogin";
+import styles from "./page.module.scss";
 import { EmailAuthContextType } from "./types";
 
 const Main = (): JSX.Element => {
   useLogin();
-  const { googleSso, password, magicLink } = useAuthModes();
+  const { googleSso } = useAuthModes();
+  const { isDarkMode } = useUserSettingsContext();
 
   const methods = useForm<EmailAuthContextType>({
     defaultValues: {
@@ -26,30 +28,26 @@ const Main = (): JSX.Element => {
   const { t } = useTranslation(["translation", "login"]);
 
   return (
-    <div className="w-screen h-screen bg-ivory" data-testid="sign-in-card">
-      <main className="h-full flex flex-col items-center justify-center">
-        <section className="w-full md:w-1/2 lg:w-1/3 flex flex-col gap-2">
-          <Link href="/" className="flex justify-center">
-            <QuivrLogo size={80} color="black" />
-          </Link>
-          <p className="text-center text-4xl font-medium">
-            {t("talk_to", { ns: "login" })}{" "}
-            <span className="text-primary">Quivr</span>
-          </p>
-          <div className="mt-5 flex flex-col">
-            <FormProvider {...methods}>
-              <EmailLogin />
-            </FormProvider>
-            {googleSso && (password || magicLink) && (
-              <Divider text={t("or")} className="my-3 uppercase" />
-            )}
-            {googleSso && <GoogleLoginButton />}
-          </div>
-          <p className="text-[10px] text-center">
-            {t("restriction_message", { ns: "login" })}
-          </p>
-        </section>
-      </main>
+    <div className={styles.login_page_wrapper}>
+      <section className={styles.section}>
+        <Link href="/" className={styles.logo_link}>
+          <QuivrLogo size={80} color={isDarkMode ? "white" : "black"} />
+        </Link>
+        <p className={styles.title}>
+          {t("talk_to", { ns: "login" })}{" "}
+          <span className={styles.primary_text}>Quivr</span>
+        </p>
+        <div className={styles.form_container}>
+          <FormProvider {...methods}>
+            <EmailLogin />
+          </FormProvider>
+
+          {googleSso && <GoogleLoginButton />}
+        </div>
+        <p className={styles.restriction_message}>
+          {t("restriction_message", { ns: "login" })}
+        </p>
+      </section>
     </div>
   );
 };
diff --git a/frontend/app/(home)/page.tsx b/frontend/app/(home)/page.tsx
index 9d8cf5cef..cbcdaff4d 100644
--- a/frontend/app/(home)/page.tsx
+++ b/frontend/app/(home)/page.tsx
@@ -1,60 +1,13 @@
 "use client";
-import Link from "next/link";
 import { Suspense } from "react";
-import { FormProvider, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
-import { QuivrLogo } from "@/lib/assets/QuivrLogo";
-import { Divider } from "@/lib/components/ui/Divider";
-import { useAuthModes } from "@/lib/hooks/useAuthModes";
-
-import { EmailLogin } from "../(auth)/login/components/EmailLogin";
-import { GoogleLoginButton } from "../(auth)/login/components/GoogleLogin";
-import { useLogin } from "../(auth)/login/hooks/useLogin";
-import { EmailAuthContextType } from "../(auth)/login/types";
+import Login from "../(auth)/login/page";
 
 const Main = (): JSX.Element => {
-  useLogin();
-  const { googleSso, password, magicLink } = useAuthModes();
-
-  const methods = useForm<EmailAuthContextType>({
-    defaultValues: {
-      email: "",
-      password: "",
-    },
-  });
-  const { t } = useTranslation(["translation", "login"]);
-
-  return (
-    <div className="w-screen h-screen bg-ivory" data-testid="sign-in-card">
-      <main className="h-full flex flex-col items-center justify-center">
-        <section className="w-full md:w-1/2 lg:w-1/3 flex flex-col gap-2">
-          <Link href="/" className="flex justify-center">
-            <QuivrLogo size={80} color="black" />
-          </Link>
-          <p className="text-center text-4xl font-medium">
-            {t("talk_to", { ns: "login" })}{" "}
-            <span className="text-primary">Quivr</span>
-          </p>
-          <div className="mt-5 flex flex-col">
-            <FormProvider {...methods}>
-              <EmailLogin />
-            </FormProvider>
-            {googleSso && (password || magicLink) && (
-              <Divider text={t("or")} className="my-3 uppercase" />
-            )}
-            {googleSso && <GoogleLoginButton />}
-          </div>
-          <p className="text-[10px] text-center">
-            {t("restriction_message", { ns: "login" })}
-          </p>
-        </section>
-      </main>
-    </div>
-  );
+  return <Login />;
 };
 
-const Login = (): JSX.Element => {
+const Home = (): JSX.Element => {
   return (
     <Suspense fallback="Loading...">
       <Main />
@@ -62,4 +15,4 @@ const Login = (): JSX.Element => {
   );
 };
 
-export default Login;
+export default Home;
diff --git a/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainCatalogue/BrainCatalogue.module.scss b/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainCatalogue/BrainCatalogue.module.scss
index 6552cb9c3..0a5ed9e5d 100644
--- a/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainCatalogue/BrainCatalogue.module.scss
+++ b/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainCatalogue/BrainCatalogue.module.scss
@@ -44,8 +44,12 @@
         }
 
         .brain_title {
-          font-size: Typography.$medium;
+          @include Typography.EllipsisOverflow;
+          font-size: Typography.$small;
           font-weight: 500;
+          width: 100%;
+          display: flex;
+          justify-content: center;
         }
 
         &:hover,
diff --git a/frontend/lib/components/ui/Tag/Tag.module.scss b/frontend/lib/components/ui/Tag/Tag.module.scss
index 0d8a15fef..3e973468e 100644
--- a/frontend/lib/components/ui/Tag/Tag.module.scss
+++ b/frontend/lib/components/ui/Tag/Tag.module.scss
@@ -10,7 +10,7 @@
   font-size: Typography.$tiny;
 
   &.primary {
-    background-color: var(--primary-1);
+    background-color: var(--background-special-1);
   }
 
   &.gold {
diff --git a/frontend/lib/components/ui/TextInput/TextInput.tsx b/frontend/lib/components/ui/TextInput/TextInput.tsx
index e4bfbcd6b..400a5b587 100644
--- a/frontend/lib/components/ui/TextInput/TextInput.tsx
+++ b/frontend/lib/components/ui/TextInput/TextInput.tsx
@@ -10,6 +10,7 @@ type TextInputProps = {
   simple?: boolean;
   onSubmit?: () => void;
   disabled?: boolean;
+  crypted?: boolean;
 };
 
 export const TextInput = ({
@@ -20,6 +21,7 @@ export const TextInput = ({
   simple,
   onSubmit,
   disabled,
+  crypted,
 }: TextInputProps): JSX.Element => {
   return (
     <div
@@ -31,7 +33,7 @@ export const TextInput = ({
     >
       <input
         className={styles.text_input}
-        type="text"
+        type={crypted ? "password" : "text"}
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
         placeholder={label}
diff --git a/frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx b/frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx
index d0798f154..1baa4fdac 100644
--- a/frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx
+++ b/frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx
@@ -18,12 +18,10 @@ export const UserSettingsProvider = ({
 }): JSX.Element => {
   const [isDarkMode, setIsDarkMode] = useState<boolean>(() => {
     if (typeof window !== "undefined") {
-      const localIsDarkMode = localStorage.getItem("isDarkMode");
-
-      return parseBoolean(localIsDarkMode);
+      return true;
     }
 
-    return false;
+    return true;
   });
 
   useEffect(() => {

From 1e92e2a1e0bbe0c44cc34206a43d5e07226c3e3f Mon Sep 17 00:00:00 2001
From: Antoine Dewez <44063631+Zewed@users.noreply.github.com>
Date: Wed, 27 Mar 2024 19:59:55 -0700
Subject: [PATCH 2/3] feat(frontend): show icons only on hover except for last
 message (#2377)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):
---
 .../components/ChatItem/ChatItem.tsx          | 20 ++++-
 .../ChatNotification/ChatNotification.tsx     |  0
 .../NotificationDisplayer.tsx                 |  0
 .../components/NotificationDisplayer/types.ts |  0
 .../ChatNotification/components/index.ts      |  0
 .../{ => ChatItem}/QADisplay/QADisplay.tsx    |  8 +-
 .../MessageRow/MessageRow.module.scss         | 13 +++
 .../components/MessageRow/MessageRow.tsx      |  8 +-
 .../MessageContent/MessageContent.module.scss |  0
 .../MessageContent/MessageContent.tsx         |  0
 .../QuestionBrain/QuestionBrain.module.scss   |  0
 .../QuestionBrain/QuestionBrain.tsx           |  0
 .../QuestionPrompt/QuestionPompt.module.scss  |  0
 .../QuestionPrompt/QuestionPrompt.tsx         |  0
 .../MessageRow/hooks/useMessageRow.ts         |  0
 .../QADisplay/components/MessageRow/index.ts  |  0
 .../QADisplay/components/index.ts             |  0
 .../{ => ChatItem}/QADisplay/index.ts         |  0
 .../{ => ChatItem}/QADisplay/styles.css       |  0
 .../components/Onboarding/Onboarding.tsx      | 81 -------------------
 .../components/Onboarding/styles/index.ts     |  1 -
 .../components/Onboarding/types.ts            |  0
 .../ChatDialogue/components/index.ts          |  2 +-
 .../components/ChatDialogue/index.tsx         |  3 +-
 24 files changed, 45 insertions(+), 91 deletions(-)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/ChatNotification/ChatNotification.tsx (100%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/ChatNotification/components/NotificationDisplayer/NotificationDisplayer.tsx (100%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/ChatNotification/components/NotificationDisplayer/types.ts (100%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/ChatNotification/components/index.ts (100%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/QADisplay/QADisplay.tsx (86%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/QADisplay/components/MessageRow/MessageRow.module.scss (86%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/QADisplay/components/MessageRow/MessageRow.tsx (96%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss (100%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx (100%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss (100%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx (100%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPompt.module.scss (100%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPrompt.tsx (100%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/QADisplay/components/MessageRow/hooks/useMessageRow.ts (100%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/QADisplay/components/MessageRow/index.ts (100%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/QADisplay/components/index.ts (100%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/QADisplay/index.ts (100%)
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/{ => ChatItem}/QADisplay/styles.css (100%)
 delete mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/Onboarding.tsx
 delete mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/styles/index.ts
 delete mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/types.ts

diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/ChatItem.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/ChatItem.tsx
index 20a7f5734..31ebf20f1 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/ChatItem.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/ChatItem.tsx
@@ -1,14 +1,26 @@
+import { ChatNotification } from "./ChatNotification/ChatNotification";
+import { QADisplay } from "./QADisplay";
+
 import { ChatItemWithGroupedNotifications } from "../../../../types";
-import { ChatNotification } from "../ChatNotification/ChatNotification";
-import { QADisplay } from "../QADisplay";
 
 type ChatItemProps = {
   content: ChatItemWithGroupedNotifications;
   index: number;
+  lastMessage?: boolean;
 };
-export const ChatItem = ({ content, index }: ChatItemProps): JSX.Element => {
+export const ChatItem = ({
+  content,
+  index,
+  lastMessage,
+}: ChatItemProps): JSX.Element => {
   if (content.item_type === "MESSAGE") {
-    return <QADisplay content={content.body} index={index} />;
+    return (
+      <QADisplay
+        content={content.body}
+        index={index}
+        lastMessage={lastMessage}
+      />
+    );
   }
 
   return <ChatNotification content={content.body} />;
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatNotification/ChatNotification.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/ChatNotification/ChatNotification.tsx
similarity index 100%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatNotification/ChatNotification.tsx
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/ChatNotification/ChatNotification.tsx
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatNotification/components/NotificationDisplayer/NotificationDisplayer.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/ChatNotification/components/NotificationDisplayer/NotificationDisplayer.tsx
similarity index 100%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatNotification/components/NotificationDisplayer/NotificationDisplayer.tsx
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/ChatNotification/components/NotificationDisplayer/NotificationDisplayer.tsx
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatNotification/components/NotificationDisplayer/types.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/ChatNotification/components/NotificationDisplayer/types.ts
similarity index 100%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatNotification/components/NotificationDisplayer/types.ts
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/ChatNotification/components/NotificationDisplayer/types.ts
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatNotification/components/index.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/ChatNotification/components/index.ts
similarity index 100%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatNotification/components/index.ts
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/ChatNotification/components/index.ts
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/QADisplay.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/QADisplay.tsx
similarity index 86%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/QADisplay.tsx
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/QADisplay.tsx
index 596f0208d..5cf2d5ec6 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/QADisplay.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/QADisplay.tsx
@@ -6,8 +6,13 @@ import "./styles.css";
 type QADisplayProps = {
   content: ChatMessage;
   index: number;
+  lastMessage?: boolean;
 };
-export const QADisplay = ({ content, index }: QADisplayProps): JSX.Element => {
+export const QADisplay = ({
+  content,
+  index,
+  lastMessage,
+}: QADisplayProps): JSX.Element => {
   const {
     assistant,
     message_id,
@@ -39,6 +44,7 @@ export const QADisplay = ({ content, index }: QADisplayProps): JSX.Element => {
         metadata={metadata} // eslint-disable-line @typescript-eslint/no-unsafe-assignment
         messageId={message_id}
         thumbs={thumbs}
+        lastMessage={lastMessage}
       />
     </>
   );
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/MessageRow.module.scss
similarity index 86%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/MessageRow.module.scss
index fc6357af6..3cc9792af 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/MessageRow.module.scss
@@ -51,6 +51,7 @@
       position: relative;
 
       .icons_wrapper {
+        visibility: hidden;
         position: absolute;
         display: flex;
         gap: Spacings.$spacing03;
@@ -60,6 +61,18 @@
         .sources_icon_wrapper {
           cursor: pointer;
         }
+
+        &.sticky {
+          visibility: visible;
+        }
+      }
+    }
+
+    &:hover {
+      .message_row_content {
+        .icons_wrapper {
+          visibility: visible;
+        }
       }
     }
   }
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/MessageRow.tsx
similarity index 96%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/MessageRow.tsx
index ca050a8d4..78e749782 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/MessageRow.tsx
@@ -27,6 +27,7 @@ type MessageRowProps = {
   index?: number;
   messageId?: string;
   thumbs?: boolean;
+  lastMessage?: boolean;
 };
 
 export const MessageRow = React.forwardRef(
@@ -41,6 +42,7 @@ export const MessageRow = React.forwardRef(
       index,
       messageId,
       thumbs: initialThumbs,
+      lastMessage,
     }: MessageRowProps,
     ref: React.Ref<HTMLDivElement>
   ) => {
@@ -101,7 +103,11 @@ export const MessageRow = React.forwardRef(
     const renderIcons = () => {
       if (!isUserSpeaker && messageContent !== "🧠") {
         return (
-          <div className={styles.icons_wrapper}>
+          <div
+            className={`${styles.icons_wrapper} ${
+              lastMessage ? styles.sticky : ""
+            }`}
+          >
             <CopyButton handleCopy={handleCopy} size="normal" />
             {!isMobile && (
               <div className={styles.sources_icon_wrapper}>
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss
similarity index 100%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx
similarity index 100%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss
similarity index 100%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx
similarity index 100%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPompt.module.scss b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPompt.module.scss
similarity index 100%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPompt.module.scss
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPompt.module.scss
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPrompt.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPrompt.tsx
similarity index 100%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPrompt.tsx
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPrompt.tsx
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/hooks/useMessageRow.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/hooks/useMessageRow.ts
similarity index 100%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/hooks/useMessageRow.ts
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/hooks/useMessageRow.ts
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/index.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/index.ts
similarity index 100%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/index.ts
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/index.ts
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/index.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/index.ts
similarity index 100%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/index.ts
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/index.ts
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/index.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/index.ts
similarity index 100%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/index.ts
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/index.ts
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/styles.css b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/styles.css
similarity index 100%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/styles.css
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/styles.css
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/Onboarding.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/Onboarding.tsx
deleted file mode 100644
index da6743a97..000000000
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/Onboarding.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import Link from "next/link";
-import { useTranslation } from "react-i18next";
-import { RiDownloadLine } from "react-icons/ri";
-
-import Button from "@/lib/components/ui/Button";
-import { useOnboardingTracker } from "@/lib/hooks/useOnboardingTracker";
-import { useStreamText } from "@/lib/hooks/useStreamText";
-
-import { stepsContainerStyle } from "./styles";
-
-import { MessageRow } from "../QADisplay";
-
-export const Onboarding = (): JSX.Element => {
-  const { t } = useTranslation(["chat"]);
-  const title = t("onboarding.title");
-  const step1 = t("onboarding.step_1_1");
-  const step1Details = t("onboarding.step_1_2");
-  const step2 = t("onboarding.step_2");
-  const step3 = t("onboarding.step_3");
-
-  const { trackOnboardingEvent } = useOnboardingTracker();
-
-  const { streamingText: titleStream, isDone: isTitleDisplayed } =
-    useStreamText({
-      text: title,
-    });
-  const { streamingText: firstStepStream, isDone: isStep1Done } = useStreamText(
-    {
-      text: step1,
-      enabled: isTitleDisplayed,
-    }
-  );
-  const { streamingText: firstStepDetailsStream, isDone: isStep1DetailsDone } =
-    useStreamText({
-      text: step1Details,
-      enabled: isStep1Done,
-    });
-
-  const { streamingText: secondStepStream, isDone: isStep2Done } =
-    useStreamText({
-      text: step2,
-      enabled: isStep1DetailsDone,
-    });
-  const { streamingText: thirdStepStream } = useStreamText({
-    text: step3,
-    enabled: isStep2Done,
-  });
-
-  return (
-    <div className="flex flex-col gap-2 mb-3">
-      <MessageRow speaker={"assistant"} brainName={"Quivr"}>
-        <div className={stepsContainerStyle}>
-          <p>{titleStream}</p>
-          <div>
-            <p>{firstStepStream}</p>
-            <div>
-              {firstStepDetailsStream}
-              {isStep1DetailsDone && (
-                <Link
-                  href="/documents/quivr_documentation.pdf"
-                  download
-                  target="_blank"
-                  referrerPolicy="no-referrer"
-                  onClick={() => {
-                    trackOnboardingEvent("QUIVR_DOCUMENTATION_DOWNLOADED");
-                  }}
-                >
-                  <Button className="bg-black p-2 ml-2 rounded-full inline-flex">
-                    <RiDownloadLine />
-                  </Button>
-                </Link>
-              )}
-            </div>
-          </div>
-          <p>{secondStepStream}</p>
-          <p>{thirdStepStream}</p>
-        </div>
-      </MessageRow>
-    </div>
-  );
-};
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/styles/index.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/styles/index.ts
deleted file mode 100644
index afa34804a..000000000
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/styles/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const stepsContainerStyle = "flex flex-col gap-2";
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/types.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/types.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/index.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/index.ts
index 4edc9ed64..40b1b0ddc 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/index.ts
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/index.ts
@@ -1,2 +1,2 @@
 export * from "./ChatItem";
-export * from "./QADisplay";
+export * from "./ChatItem/QADisplay";
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/index.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/index.tsx
index 979189799..bc67ad0ea 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/index.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/index.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import { useOnboarding } from "@/lib/hooks/useOnboarding";
 
 import { ChatItem } from "./components";
-import { Onboarding } from "./components/Onboarding/Onboarding";
 import { useChatDialogue } from "./hooks/useChatDialogue";
 import {
   chatDialogueContainerClassName,
@@ -28,7 +27,6 @@ export const ChatDialogue = ({
   if (shouldDisplayOnboardingAInstructions) {
     return (
       <div className={chatDialogueContainerClassName} ref={chatListRef}>
-        <Onboarding />
         <div className={chatItemContainerClassName}>
           {chatItems.map((chatItem, index) => (
             <ChatItem
@@ -58,6 +56,7 @@ export const ChatDialogue = ({
               key={getKeyFromChatItem(chatItem)}
               content={chatItem}
               index={index}
+              lastMessage={index === chatItems.length - 1}
             />
           ))}
         </div>

From 07f9078cb31d60df5f7b3c8e2635e11f30e754fe Mon Sep 17 00:00:00 2001
From: Stan Girard <girard.stanislas@gmail.com>
Date: Wed, 27 Mar 2024 20:08:05 -0700
Subject: [PATCH 3/3] chore(main): release 0.0.227 (#2379)

:robot: I have created a release *beep* *boop*
---


## 0.0.227 (2024-03-28)

## What's Changed
* fix(backend): invitation with new brains did not work by @Zewed in
https://github.com/QuivrHQ/quivr/pull/2378
* fix(backend): invitation brain bugs by @Zewed in
https://github.com/QuivrHQ/quivr/pull/2380
* fix(frontend): disable knowledge tab by @Zewed in
https://github.com/QuivrHQ/quivr/pull/2381
* fix(frontend): dark mode issues by @Zewed in
https://github.com/QuivrHQ/quivr/pull/2382
* feat(frontend): show icons only on hover except for last message by
@Zewed in https://github.com/QuivrHQ/quivr/pull/2377


**Full Changelog**:
https://github.com/QuivrHQ/quivr/compare/v0.0.226...v0.0.227

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).
---
 CHANGELOG.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 51f8410a2..ab744e68f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.0.227 (2024-03-28)
+
+## What's Changed
+* fix(backend): invitation with new brains did not work by @Zewed in https://github.com/QuivrHQ/quivr/pull/2378
+* fix(backend): invitation brain bugs by @Zewed in https://github.com/QuivrHQ/quivr/pull/2380
+* fix(frontend): disable knowledge tab by @Zewed in https://github.com/QuivrHQ/quivr/pull/2381
+* fix(frontend): dark mode issues by @Zewed in https://github.com/QuivrHQ/quivr/pull/2382
+* feat(frontend): show icons only on hover except for last message by @Zewed in https://github.com/QuivrHQ/quivr/pull/2377
+
+
+**Full Changelog**: https://github.com/QuivrHQ/quivr/compare/v0.0.226...v0.0.227
+
 ## 0.0.226 (2024-03-21)
 
 ## What's Changed