From 17d5f8f473207a516273b92f580b4b77b5df6135 Mon Sep 17 00:00:00 2001
From: Zewed <dewez.antoine2@gmail.com>
Date: Fri, 26 Jan 2024 23:24:31 -0800
Subject: [PATCH 01/11] wip

---
 .../components/QADisplay/QADisplay.tsx        |  1 -
 .../MessageRow/MessageRow.module.scss         | 24 +++++++++
 .../components/MessageRow/MessageRow.tsx      | 51 +++++++++----------
 .../MessageRow/hooks/useMessageRow.ts         | 13 -----
 4 files changed, 48 insertions(+), 41 deletions(-)
 create mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss

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/QADisplay/QADisplay.tsx
index c4f2f4ac2f8b..2079c87f0170 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/QADisplay.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/QADisplay.tsx
@@ -23,7 +23,6 @@ export const QADisplay = ({ content }: QADisplayProps): JSX.Element => {
         speaker={"user"}
         text={user_message}
         promptName={prompt_title}
-        brainName={brain_name}
         metadata={metadata} // eslint-disable-line @typescript-eslint/no-unsafe-assignment
       />
       <MessageRow
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/QADisplay/components/MessageRow/MessageRow.module.scss
new file mode 100644
index 000000000000..0ed2da2f8872
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss
@@ -0,0 +1,24 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Spacings.module.scss";
+
+.message_row_container {
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  width: fit-content;
+  padding-block: Spacings.$spacing03;
+  padding-inline: Spacings.$spacing05;
+  margin-inline: Spacings.$spacing01;
+
+  &.user {
+    align-self: flex-end;
+    background-color: Colors.$highlight;
+    box-shadow: 1px 1px rgba(0, 0, 0, 0.25);
+  }
+
+  &.brain {
+    align-self: flex-start;
+    background-color: Colors.$black;
+    margin-left: 1px;
+  }
+}
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/QADisplay/components/MessageRow/MessageRow.tsx
index 189638341b78..aafdb0322bb8 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/QADisplay/components/MessageRow/MessageRow.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 
+import styles from "./MessageRow.module.scss";
 import { CopyButton } from "./components/CopyButton";
 import { MessageContent } from "./components/MessageContent";
 import { QuestionBrain } from "./components/QuestionBrain";
@@ -22,45 +23,41 @@ export const MessageRow = React.forwardRef(
     { speaker, text, brainName, promptName, children }: MessageRowProps,
     ref: React.Ref<HTMLDivElement>
   ) => {
-    const {
-      containerClasses,
-      containerWrapperClasses,
-      handleCopy,
-      isCopied,
-      isUserSpeaker,
-      markdownClasses,
-    } = useMessageRow({
-      speaker,
-      text,
-    });
+    const { handleCopy, isCopied, isUserSpeaker, markdownClasses } =
+      useMessageRow({
+        speaker,
+        text,
+      });
 
     const messageContent = text ?? "";
 
     return (
-      <div className={containerWrapperClasses}>
-        <div ref={ref} className={containerClasses}>
+      <div
+        ref={ref}
+        className={`
+      ${styles.message_row_container ?? ""} 
+      ${isUserSpeaker ? styles.user ?? "" : styles.brain ?? ""}
+      `}
+      >
+        {!isUserSpeaker && (
           <div className="flex justify-between items-start w-full">
-            {/* Left section for the question and prompt */}
             <div className="flex gap-1">
               <QuestionBrain brainName={brainName} />
               <QuestionPrompt promptName={promptName} />
             </div>
-            {/* Right section for buttons */}
             <div className="flex items-center gap-2">
-              {!isUserSpeaker && (
-                <>
-                  <CopyButton handleCopy={handleCopy} isCopied={isCopied} />
-                </>
-              )}
+              <>
+                <CopyButton handleCopy={handleCopy} isCopied={isCopied} />
+              </>
             </div>
           </div>
-          {children ?? (
-            <MessageContent
-              text={messageContent}
-              markdownClasses={markdownClasses}
-            />
-          )}
-        </div>
+        )}
+        {children ?? (
+          <MessageContent
+            text={messageContent}
+            markdownClasses={markdownClasses}
+          />
+        )}
       </div>
     );
   }
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/QADisplay/components/MessageRow/hooks/useMessageRow.ts
index e7dcb907b5c2..79dcf41e7038 100644
--- 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/QADisplay/components/MessageRow/hooks/useMessageRow.ts
@@ -23,25 +23,12 @@ export const useMessageRow = ({ speaker, text }: UseMessageRowProps) => {
     setTimeout(() => setIsCopied(false), 2000); // Reset after 2 seconds
   };
 
-  const containerClasses = cn(
-    "py-3 px-5 w-fit",
-    isUserSpeaker ? "bg-msg-gray bg-opacity-10" : "bg-msg-purple bg-opacity-40",
-    "dark:bg-gray-800 rounded-3xl flex flex-col overflow-hidden scroll-pb-32"
-  );
-
-  const containerWrapperClasses = cn(
-    "flex flex-col",
-    isUserSpeaker ? "items-end" : "items-start"
-  );
-
   const markdownClasses = cn("prose", "dark:prose-invert");
 
   return {
     isUserSpeaker,
     isCopied,
     handleCopy,
-    containerClasses,
-    containerWrapperClasses,
     markdownClasses,
   };
 };

From bcb9a694d0d221a31515ecd962951e6f13d322f6 Mon Sep 17 00:00:00 2001
From: Zewed <dewez.antoine2@gmail.com>
Date: Fri, 26 Jan 2024 23:29:35 -0800
Subject: [PATCH 02/11] wip

---
 .../QADisplay/components/MessageRow/MessageRow.module.scss | 2 +-
 .../QADisplay/components/MessageRow/MessageRow.tsx         | 1 +
 .../components/MessageRow/components/MessageContent.tsx    | 7 +++++--
 3 files changed, 7 insertions(+), 3 deletions(-)

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/QADisplay/components/MessageRow/MessageRow.module.scss
index 0ed2da2f8872..7b678e081f17 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/QADisplay/components/MessageRow/MessageRow.module.scss
@@ -13,7 +13,7 @@
   &.user {
     align-self: flex-end;
     background-color: Colors.$highlight;
-    box-shadow: 1px 1px rgba(0, 0, 0, 0.25);
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
   }
 
   &.brain {
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/QADisplay/components/MessageRow/MessageRow.tsx
index aafdb0322bb8..58dc86614324 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/QADisplay/components/MessageRow/MessageRow.tsx
@@ -55,6 +55,7 @@ export const MessageRow = React.forwardRef(
         {children ?? (
           <MessageContent
             text={messageContent}
+            isUser={isUserSpeaker}
             markdownClasses={markdownClasses}
           />
         )}
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx
index 232736c542c2..9afa3c6f0d6f 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx
@@ -3,9 +3,11 @@ import ReactMarkdown from "react-markdown";
 
 export const MessageContent = ({
   text,
+  isUser,
   markdownClasses,
 }: {
   text: string;
+  isUser: boolean;
   markdownClasses: string;
 }): JSX.Element => {
   const [showLog] = useState(true);
@@ -34,14 +36,15 @@ export const MessageContent = ({
     } else {
       setIsLog(false);
     }
+    console.info(isUser);
   }, [text]);
 
   const { logs, cleanedText } = extractLog(text);
 
   return (
-    <div data-testid="chat-message-text" className="mt-2">
+    <div data-testid="chat-message-text">
       {isLog && showLog && logs.length > 0 && (
-        <div className="text-xs text-gray-600 bg-gray-100 p-2 rounded">
+        <div className="text-xs text-white-600 p-2 rounded">
           <ReactMarkdown>{logs}</ReactMarkdown>
         </div>
       )}

From 7a18b8cac86ea6be9b30cff3eca7278ff18a79cc Mon Sep 17 00:00:00 2001
From: Zewed <dewez.antoine2@gmail.com>
Date: Sat, 27 Jan 2024 09:34:53 -0800
Subject: [PATCH 03/11] wip

---
 .../QADisplay/components/MessageRow/MessageRow.module.scss  | 2 +-
 .../components/MessageRow/components/MessageContent.tsx     | 6 ++++--
 .../components/MessageRow/components/QuestionBrain.tsx      | 5 +----
 .../components/MessageRow/components/QuestionPrompt.tsx     | 5 +----
 4 files changed, 7 insertions(+), 11 deletions(-)

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/QADisplay/components/MessageRow/MessageRow.module.scss
index 7b678e081f17..6de43cb974fb 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/QADisplay/components/MessageRow/MessageRow.module.scss
@@ -18,7 +18,7 @@
 
   &.brain {
     align-self: flex-start;
-    background-color: Colors.$black;
+    background-color: rgba(Colors.$black, 0.9);
     margin-left: 1px;
   }
 }
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx
index 9afa3c6f0d6f..89e64b23a311 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx
@@ -44,11 +44,13 @@ export const MessageContent = ({
   return (
     <div data-testid="chat-message-text">
       {isLog && showLog && logs.length > 0 && (
-        <div className="text-xs text-white-600 p-2 rounded">
+        <div className="text-xs text-white p-2 rounded">
           <ReactMarkdown>{logs}</ReactMarkdown>
         </div>
       )}
-      <ReactMarkdown className={`text-base ${markdownClasses}`}>
+      <ReactMarkdown
+        className={`${isUser ? "text-black" : "text-ivory"} ${markdownClasses}`}
+      >
         {cleanedText}
       </ReactMarkdown>
     </div>
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain.tsx
index e8ed11b2d30a..cf2dc8f6593a 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain.tsx
@@ -11,10 +11,7 @@ export const QuestionBrain = ({
   }
 
   return (
-    <span
-      data-testid="brain-tags"
-      className="text-msg-header-gray mb-1 text-xs"
-    >
+    <span data-testid="brain-tags" className="text-highlight mb-1 text-xs">
       @{brainName}
     </span>
   );
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt.tsx
index ccc6d5776c88..2b824ba0eb6f 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt.tsx
@@ -11,10 +11,7 @@ export const QuestionPrompt = ({
   }
 
   return (
-    <span
-      data-testid="prompt-tags"
-      className="text-msg-header-gray mb-1 text-xs"
-    >
+    <span data-testid="prompt-tags" className="text-highlight mb-1 text-xs">
       #{promptName}
     </span>
   );

From 8784a194db17a730d7dd4b02db33832540513d36 Mon Sep 17 00:00:00 2001
From: Zewed <dewez.antoine2@gmail.com>
Date: Sat, 27 Jan 2024 14:13:25 -0800
Subject: [PATCH 04/11] wip

---
 .../MessageRow/MessageRow.module.scss         |  2 +-
 .../components/MessageRow/MessageRow.tsx      | 17 +++++--------
 .../MessageContent/MessageContent.module.scss | 25 +++++++++++++++++++
 .../{ => MessageContent}/MessageContent.tsx   | 10 +++++---
 .../MessageRow/hooks/useMessageRow.ts         |  5 ----
 5 files changed, 39 insertions(+), 20 deletions(-)
 create mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/{ => MessageContent}/MessageContent.tsx (87%)

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/QADisplay/components/MessageRow/MessageRow.module.scss
index 6de43cb974fb..53ef7e6a31f3 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/QADisplay/components/MessageRow/MessageRow.module.scss
@@ -18,7 +18,7 @@
 
   &.brain {
     align-self: flex-start;
-    background-color: rgba(Colors.$black, 0.9);
+    background-color: rgba(Colors.$black, 0.8);
     margin-left: 1px;
   }
 }
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/QADisplay/components/MessageRow/MessageRow.tsx
index 58dc86614324..4dcceebdc5b3 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/QADisplay/components/MessageRow/MessageRow.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import styles from "./MessageRow.module.scss";
 import { CopyButton } from "./components/CopyButton";
-import { MessageContent } from "./components/MessageContent";
+import { MessageContent } from "./components/MessageContent/MessageContent";
 import { QuestionBrain } from "./components/QuestionBrain";
 import { QuestionPrompt } from "./components/QuestionPrompt";
 import { useMessageRow } from "./hooks/useMessageRow";
@@ -23,11 +23,10 @@ export const MessageRow = React.forwardRef(
     { speaker, text, brainName, promptName, children }: MessageRowProps,
     ref: React.Ref<HTMLDivElement>
   ) => {
-    const { handleCopy, isCopied, isUserSpeaker, markdownClasses } =
-      useMessageRow({
-        speaker,
-        text,
-      });
+    const { handleCopy, isCopied, isUserSpeaker } = useMessageRow({
+      speaker,
+      text,
+    });
 
     const messageContent = text ?? "";
 
@@ -53,11 +52,7 @@ export const MessageRow = React.forwardRef(
           </div>
         )}
         {children ?? (
-          <MessageContent
-            text={messageContent}
-            isUser={isUserSpeaker}
-            markdownClasses={markdownClasses}
-          />
+          <MessageContent text={messageContent} isUser={isUserSpeaker} />
         )}
       </div>
     );
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/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss
new file mode 100644
index 000000000000..53ab91168cc1
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss
@@ -0,0 +1,25 @@
+@use "@/styles/Spacings.module.scss";
+
+.markdown {
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+  ul {
+    list-style-type: disc;
+    margin-top: 0;
+    padding: 0;
+    margin-left: Spacings.$spacing05;
+  }
+
+  ol {
+    list-style-type: decimal;
+    padding-left: Spacings.$spacing05;
+    list-style-position: outside;
+
+    li {
+      white-space-collapse: collapse;
+    }
+  }
+}
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx
similarity index 87%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx
index 89e64b23a311..e0da810a53ac 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx
@@ -1,14 +1,14 @@
 import { useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 
+import styles from "./MessageContent.module.scss";
+
 export const MessageContent = ({
   text,
   isUser,
-  markdownClasses,
 }: {
   text: string;
   isUser: boolean;
-  markdownClasses: string;
 }): JSX.Element => {
   const [showLog] = useState(true);
   const [isLog, setIsLog] = useState(true);
@@ -41,6 +41,8 @@ export const MessageContent = ({
 
   const { logs, cleanedText } = extractLog(text);
 
+  console.info(cleanedText);
+
   return (
     <div data-testid="chat-message-text">
       {isLog && showLog && logs.length > 0 && (
@@ -49,7 +51,9 @@ export const MessageContent = ({
         </div>
       )}
       <ReactMarkdown
-        className={`${isUser ? "text-black" : "text-ivory"} ${markdownClasses}`}
+        className={`${styles.markdown ?? ""} ${
+          isUser ? "text-black" : "text-white"
+        } `}
       >
         {cleanedText}
       </ReactMarkdown>
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/QADisplay/components/MessageRow/hooks/useMessageRow.ts
index 79dcf41e7038..1c6e34c02bfb 100644
--- 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/QADisplay/components/MessageRow/hooks/useMessageRow.ts
@@ -1,7 +1,5 @@
 import { useState } from "react";
 
-import { cn } from "@/lib/utils";
-
 type UseMessageRowProps = {
   speaker: "user" | "assistant";
   text?: string;
@@ -23,12 +21,9 @@ export const useMessageRow = ({ speaker, text }: UseMessageRowProps) => {
     setTimeout(() => setIsCopied(false), 2000); // Reset after 2 seconds
   };
 
-  const markdownClasses = cn("prose", "dark:prose-invert");
-
   return {
     isUserSpeaker,
     isCopied,
     handleCopy,
-    markdownClasses,
   };
 };

From 30c5f27a3da5712d8539f3a3d7d7b96b47c2703e Mon Sep 17 00:00:00 2001
From: Zewed <dewez.antoine2@gmail.com>
Date: Sat, 27 Jan 2024 15:01:48 -0800
Subject: [PATCH 05/11] wip

---
 .../MessageRow/MessageRow.module.scss         | 37 +++++++++++++------
 .../components/MessageRow/MessageRow.tsx      | 27 +++++---------
 2 files changed, 36 insertions(+), 28 deletions(-)

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/QADisplay/components/MessageRow/MessageRow.module.scss
index 53ef7e6a31f3..69970bb17953 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/QADisplay/components/MessageRow/MessageRow.module.scss
@@ -4,21 +4,36 @@
 .message_row_container {
   display: flex;
   flex-direction: column;
-  border-radius: 12px;
-  width: fit-content;
-  padding-block: Spacings.$spacing03;
-  padding-inline: Spacings.$spacing05;
-  margin-inline: Spacings.$spacing01;
+
+  .message_row_content {
+    border-radius: 12px;
+    width: fit-content;
+    padding-block: Spacings.$spacing03;
+    padding-inline: Spacings.$spacing05;
+    margin-inline: Spacings.$spacing01;
+  }
 
   &.user {
-    align-self: flex-end;
-    background-color: Colors.$highlight;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    .message_header {
+      align-self: flex-end;
+    }
+
+    .message_row_content {
+      align-self: flex-end;
+      background-color: Colors.$highlight;
+      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    }
   }
 
   &.brain {
-    align-self: flex-start;
-    background-color: rgba(Colors.$black, 0.8);
-    margin-left: 1px;
+    .message_header {
+      align-self: flex-start;
+    }
+
+    .message_row_content {
+      align-self: flex-start;
+      background-color: rgba(Colors.$black, 0.85);
+      margin-left: 1px;
+    }
   }
 }
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/QADisplay/components/MessageRow/MessageRow.tsx
index 4dcceebdc5b3..6fc5cbebb398 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/QADisplay/components/MessageRow/MessageRow.tsx
@@ -32,28 +32,21 @@ export const MessageRow = React.forwardRef(
 
     return (
       <div
-        ref={ref}
         className={`
       ${styles.message_row_container ?? ""} 
       ${isUserSpeaker ? styles.user ?? "" : styles.brain ?? ""}
       `}
       >
-        {!isUserSpeaker && (
-          <div className="flex justify-between items-start w-full">
-            <div className="flex gap-1">
-              <QuestionBrain brainName={brainName} />
-              <QuestionPrompt promptName={promptName} />
-            </div>
-            <div className="flex items-center gap-2">
-              <>
-                <CopyButton handleCopy={handleCopy} isCopied={isCopied} />
-              </>
-            </div>
-          </div>
-        )}
-        {children ?? (
-          <MessageContent text={messageContent} isUser={isUserSpeaker} />
-        )}
+        <div className={styles.message_header}>
+          <QuestionBrain brainName={brainName} />
+          <QuestionPrompt promptName={promptName} />
+          <CopyButton handleCopy={handleCopy} isCopied={isCopied} />
+        </div>
+        <div ref={ref} className={styles.message_row_content}>
+          {children ?? (
+            <MessageContent text={messageContent} isUser={isUserSpeaker} />
+          )}
+        </div>
       </div>
     );
   }

From 1128d362e9363158d9eb17917f5029ae60dc1fb0 Mon Sep 17 00:00:00 2001
From: Zewed <dewez.antoine2@gmail.com>
Date: Sat, 27 Jan 2024 15:46:23 -0800
Subject: [PATCH 06/11] wip

---
 .../MessageRow/MessageRow.module.scss         | 35 +++++++-
 .../components/MessageRow/MessageRow.tsx      | 28 +++++--
 .../MessageRow/components/CopyButton.tsx      |  9 ++-
 .../QuestionBrain/QuestionBrain.module.scss   |  9 +++
 .../{ => QuestionBrain}/QuestionBrain.tsx     | 11 ++-
 .../QuestionPrompt/QuestionPompt.module.scss  |  8 ++
 .../{ => QuestionPrompt}/QuestionPrompt.tsx   | 11 ++-
 .../MessageRow/components/SourcesButton.tsx   | 79 -------------------
 .../lib/components/ui/Icon/Icon.module.scss   |  4 +
 frontend/lib/helpers/iconList.ts              |  5 ++
 frontend/lib/types/Colors.ts                  |  2 +-
 11 files changed, 103 insertions(+), 98 deletions(-)
 create mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/{ => QuestionBrain}/QuestionBrain.tsx (50%)
 create mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPompt.module.scss
 rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/{ => QuestionPrompt}/QuestionPrompt.tsx (50%)
 delete mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/SourcesButton.tsx

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/QADisplay/components/MessageRow/MessageRow.module.scss
index 69970bb17953..d089d5c27240 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/QADisplay/components/MessageRow/MessageRow.module.scss
@@ -4,22 +4,31 @@
 .message_row_container {
   display: flex;
   flex-direction: column;
+  padding-right: Spacings.$spacing05;
 
   .message_row_content {
     border-radius: 12px;
     width: fit-content;
     padding-block: Spacings.$spacing03;
     padding-inline: Spacings.$spacing05;
-    margin-inline: Spacings.$spacing01;
+  }
+
+  .message_header {
+    padding: Spacings.$spacing02;
   }
 
   &.user {
+    align-self: flex-end;
+
     .message_header {
       align-self: flex-end;
+      display: flex;
+      gap: Spacings.$spacing02;
+      align-items: center;
+      color: Colors.$dark-grey;
     }
 
     .message_row_content {
-      align-self: flex-end;
       background-color: Colors.$highlight;
       box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
     }
@@ -27,7 +36,19 @@
 
   &.brain {
     .message_header {
-      align-self: flex-start;
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      .left_wrapper {
+        display: flex;
+        gap: Spacings.$spacing05;
+        align-items: center;
+      }
+
+      .copy_button {
+        visibility: hidden;
+      }
     }
 
     .message_row_content {
@@ -36,4 +57,12 @@
       margin-left: 1px;
     }
   }
+
+  &:hover {
+    .message_header {
+      .copy_button {
+        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/QADisplay/components/MessageRow/MessageRow.tsx
index 6fc5cbebb398..43780029e200 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/QADisplay/components/MessageRow/MessageRow.tsx
@@ -1,10 +1,12 @@
 import React from "react";
 
+import Icon from "@/lib/components/ui/Icon/Icon";
+
 import styles from "./MessageRow.module.scss";
 import { CopyButton } from "./components/CopyButton";
 import { MessageContent } from "./components/MessageContent/MessageContent";
-import { QuestionBrain } from "./components/QuestionBrain";
-import { QuestionPrompt } from "./components/QuestionPrompt";
+import { QuestionBrain } from "./components/QuestionBrain/QuestionBrain";
+import { QuestionPrompt } from "./components/QuestionPrompt/QuestionPrompt";
 import { useMessageRow } from "./hooks/useMessageRow";
 
 type MessageRowProps = {
@@ -37,11 +39,23 @@ export const MessageRow = React.forwardRef(
       ${isUserSpeaker ? styles.user ?? "" : styles.brain ?? ""}
       `}
       >
-        <div className={styles.message_header}>
-          <QuestionBrain brainName={brainName} />
-          <QuestionPrompt promptName={promptName} />
-          <CopyButton handleCopy={handleCopy} isCopied={isCopied} />
-        </div>
+        {!isUserSpeaker ? (
+          <div className={styles.message_header}>
+            <div className={styles.left_wrapper}>
+              <QuestionBrain brainName={brainName} />
+              <QuestionPrompt promptName={promptName} />
+            </div>
+            <div className={styles.copy_button}>
+              <CopyButton handleCopy={handleCopy} isCopied={isCopied} />
+            </div>
+          </div>
+        ) : (
+          <div className={styles.message_header}>
+            <Icon name="user" color="dark-grey" size="normal" />
+            <span className={styles.me}>Me</span>
+          </div>
+        )}
+        {}
         <div ref={ref} className={styles.message_row_content}>
           {children ?? (
             <MessageContent text={messageContent} isUser={isUserSpeaker} />
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/CopyButton.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/CopyButton.tsx
index 2810d0072511..1b4f843c15f7 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/CopyButton.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/CopyButton.tsx
@@ -1,4 +1,4 @@
-import { FaCheckCircle, FaCopy } from "react-icons/fa";
+import Icon from "@/lib/components/ui/Icon/Icon";
 
 type CopyButtonProps = {
   handleCopy: () => void;
@@ -14,6 +14,11 @@ export const CopyButton = ({
     onClick={handleCopy}
     title={isCopied ? "Copied!" : "Copy to clipboard"}
   >
-    {isCopied ? <FaCheckCircle /> : <FaCopy />}
+    <Icon
+      name={isCopied ? "checkCircle" : "copy"}
+      color={isCopied ? "primary" : "black"}
+      size="normal"
+      handleHover={true}
+    />
   </button>
 );
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/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss
new file mode 100644
index 000000000000..136bde1993e1
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss
@@ -0,0 +1,9 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Spacings.module.scss";
+
+.brain_name_wrapper {
+  display: flex;
+  align-items: center;
+  gap: Spacings.$spacing02;
+  color: Colors.$primary;
+}
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx
similarity index 50%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain.tsx
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx
index cf2dc8f6593a..58d8217e0d7b 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx
@@ -1,5 +1,9 @@
 import { Fragment } from "react";
 
+import Icon from "@/lib/components/ui/Icon/Icon";
+
+import styles from "./QuestionBrain.module.scss";
+
 type QuestionBrainProps = {
   brainName?: string | null;
 };
@@ -11,8 +15,9 @@ export const QuestionBrain = ({
   }
 
   return (
-    <span data-testid="brain-tags" className="text-highlight mb-1 text-xs">
-      @{brainName}
-    </span>
+    <div data-testid="brain-tags" className={styles.brain_name_wrapper}>
+      <Icon name="brain" color="primary" size="normal" />
+      <span>{brainName}</span>
+    </div>
   );
 };
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/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPompt.module.scss
new file mode 100644
index 000000000000..1322b5de9687
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPompt.module.scss
@@ -0,0 +1,8 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Spacings.module.scss";
+
+.prompt_name_wrapper {
+  display: flex;
+  align-items: center;
+  color: Colors.$primary;
+}
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPrompt.tsx
similarity index 50%
rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt.tsx
rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPrompt.tsx
index 2b824ba0eb6f..411907d37710 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPrompt.tsx
@@ -1,5 +1,9 @@
 import { Fragment } from "react";
 
+import Icon from "@/lib/components/ui/Icon/Icon";
+
+import styles from "./QuestionPompt.module.scss";
+
 type QuestionProptProps = {
   promptName?: string | null;
 };
@@ -11,8 +15,9 @@ export const QuestionPrompt = ({
   }
 
   return (
-    <span data-testid="prompt-tags" className="text-highlight mb-1 text-xs">
-      #{promptName}
-    </span>
+    <div data-testid="prompt-tags" className={styles.prompt_name_wrapper}>
+      <Icon name="hastag" color="primary" size="normal" />
+      <span>{promptName}</span>
+    </div>
   );
 };
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/SourcesButton.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/SourcesButton.tsx
deleted file mode 100644
index 54146151d1ef..000000000000
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/SourcesButton.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import ReactDOM from "react-dom";
-import { FaQuestionCircle } from "react-icons/fa";
-
-import { useEventTracking } from "@/services/analytics/june/useEventTracking";
-
-type SourcesButtonProps = {
-  sources: [string] | [];
-};
-
-export const SourcesButton = ({ sources }: SourcesButtonProps): JSX.Element => {
-  const [showSources, setShowSources] = useState(false);
-  const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0 });
-  const { track } = useEventTracking();
-  // Specify the type of element the ref will be attached to
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  const updatePopupPosition = () => {
-    // Use the 'current' property of the ref with the correct type
-    if (buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect();
-      setPopupPosition({
-        top: rect.bottom + window.scrollY,
-        left: rect.left + window.scrollX,
-      });
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener("scroll", updatePopupPosition);
-
-    // Remove the event listener when the component is unmounted
-    return () => {
-      window.removeEventListener("scroll", updatePopupPosition);
-    };
-  }, []);
-
-  const sourcesList = (
-    <ul className="list-disc list-inside">
-      {sources.map((source, index) => (
-        <li key={index} className="truncate">
-          {source.trim()}
-        </li>
-      ))}
-    </ul>
-  );
-
-  return (
-    <div className="relative inline-block">
-      <button
-        ref={buttonRef} // Attach the ref to the button
-        onMouseEnter={() => {
-          setShowSources(true);
-          updatePopupPosition();
-          void track("SOURCE_CHECKED");
-        }}
-        onMouseLeave={() => setShowSources(false)}
-        className="text-gray-500 hover:text-gray-700 transition p-1"
-        title="View sources"
-      >
-        <FaQuestionCircle />
-      </button>
-      {showSources &&
-        ReactDOM.createPortal(
-          <div
-            className="absolute z-50 min-w-max p-2 bg-white shadow-lg rounded-md border border-gray-200"
-            style={{
-              top: `${popupPosition.top}px`,
-              left: `${popupPosition.left}px`,
-            }}
-          >
-            {/* Display the sources list here */}
-            {sourcesList}
-          </div>,
-          document.body // Render the popup to the body element
-        )}
-    </div>
-  );
-};
diff --git a/frontend/lib/components/ui/Icon/Icon.module.scss b/frontend/lib/components/ui/Icon/Icon.module.scss
index 46cd8a093488..efa567d60ab8 100644
--- a/frontend/lib/components/ui/Icon/Icon.module.scss
+++ b/frontend/lib/components/ui/Icon/Icon.module.scss
@@ -29,6 +29,10 @@
   }
 }
 
+.dark-grey {
+  color: Colors.$dark-grey;
+}
+
 .primary {
   color: Colors.$primary;
 }
diff --git a/frontend/lib/helpers/iconList.ts b/frontend/lib/helpers/iconList.ts
index 0a04ccfbc054..ec320051dc2c 100644
--- a/frontend/lib/helpers/iconList.ts
+++ b/frontend/lib/helpers/iconList.ts
@@ -1,4 +1,5 @@
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
+import { FaCheckCircle, FaRegUserCircle } from "react-icons/fa";
 import { IconType } from "react-icons/lib";
 import {
   LuBrain,
@@ -8,13 +9,17 @@ import {
   LuPlusCircle,
   LuSearch,
 } from "react-icons/lu";
+import { RiHashtag } from "react-icons/ri";
 
 export const iconList: { [name: string]: IconType } = {
   add: LuPlusCircle,
   brain: LuBrain,
+  checkCircle: FaCheckCircle,
   chevronDown: LuChevronDown,
   chevronRight: LuChevronRight,
   copy: LuCopy,
+  hastag: RiHashtag,
   loader: AiOutlineLoading3Quarters,
   search: LuSearch,
+  user: FaRegUserCircle,
 };
diff --git a/frontend/lib/types/Colors.ts b/frontend/lib/types/Colors.ts
index 6afa9fc0a093..b6108d5c2fa2 100644
--- a/frontend/lib/types/Colors.ts
+++ b/frontend/lib/types/Colors.ts
@@ -1 +1 @@
-export type Color = "black" | "primary" | "accent" | "white";
+export type Color = "black" | "dark-grey" | "primary" | "accent" | "white";

From 7617be99d2769c8a3e9fa71aef8607b8a676131d Mon Sep 17 00:00:00 2001
From: Zewed <dewez.antoine2@gmail.com>
Date: Sat, 27 Jan 2024 16:37:32 -0800
Subject: [PATCH 07/11] wip

---
 .../QADisplay/components/MessageRow/MessageRow.module.scss   | 5 ++++-
 .../components/QuestionBrain/QuestionBrain.module.scss       | 2 +-
 .../MessageRow/components/QuestionBrain/QuestionBrain.tsx    | 2 +-
 .../components/QuestionPrompt/QuestionPompt.module.scss      | 2 +-
 .../MessageRow/components/QuestionPrompt/QuestionPrompt.tsx  | 2 +-
 5 files changed, 8 insertions(+), 5 deletions(-)

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/QADisplay/components/MessageRow/MessageRow.module.scss
index d089d5c27240..647a9b2d42fd 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/QADisplay/components/MessageRow/MessageRow.module.scss
@@ -5,8 +5,11 @@
   display: flex;
   flex-direction: column;
   padding-right: Spacings.$spacing05;
+  width: 85%;
+  padding-block: Spacings.$spacing03;
 
   .message_row_content {
+    align-self: flex-end;
     border-radius: 12px;
     width: fit-content;
     padding-block: Spacings.$spacing03;
@@ -53,7 +56,7 @@
 
     .message_row_content {
       align-self: flex-start;
-      background-color: rgba(Colors.$black, 0.85);
+      background-color: rgba(Colors.$black, 0.8);
       margin-left: 1px;
     }
   }
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/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss
index 136bde1993e1..cc815cada395 100644
--- 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/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss
@@ -5,5 +5,5 @@
   display: flex;
   align-items: center;
   gap: Spacings.$spacing02;
-  color: Colors.$primary;
+  color: Colors.$black;
 }
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/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx
index 58d8217e0d7b..cc3b5b1d3bf4 100644
--- 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/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx
@@ -16,7 +16,7 @@ export const QuestionBrain = ({
 
   return (
     <div data-testid="brain-tags" className={styles.brain_name_wrapper}>
-      <Icon name="brain" color="primary" size="normal" />
+      <Icon name="brain" color="black" size="normal" />
       <span>{brainName}</span>
     </div>
   );
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/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPompt.module.scss
index 1322b5de9687..2903ec0411f5 100644
--- 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/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPompt.module.scss
@@ -4,5 +4,5 @@
 .prompt_name_wrapper {
   display: flex;
   align-items: center;
-  color: Colors.$primary;
+  color: Colors.$black;
 }
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/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPrompt.tsx
index 411907d37710..29699cdaf4bc 100644
--- 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/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPrompt.tsx
@@ -16,7 +16,7 @@ export const QuestionPrompt = ({
 
   return (
     <div data-testid="prompt-tags" className={styles.prompt_name_wrapper}>
-      <Icon name="hastag" color="primary" size="normal" />
+      <Icon name="hastag" color="black" size="normal" />
       <span>{promptName}</span>
     </div>
   );

From 21f45de57b2a383e549c5bf9c91941433011ee06 Mon Sep 17 00:00:00 2001
From: Zewed <dewez.antoine2@gmail.com>
Date: Sat, 27 Jan 2024 17:18:00 -0800
Subject: [PATCH 08/11] fix

---
 frontend/.eslintrc.js                         |  8 +----
 .../MessageContent/MessageContent.module.scss | 30 +++++++++++++++++++
 .../MessageContent/MessageContent.tsx         | 11 ++++---
 .../utils/generatePlaceHolderMessage.ts       |  6 ++--
 4 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index df7ac4aec7d6..ebcf346802a0 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -170,13 +170,7 @@ module.exports = {
         "@typescript-eslint/no-unnecessary-type-arguments": "error",
         "@typescript-eslint/prefer-string-starts-ends-with": "error",
         "@typescript-eslint/switch-exhaustiveness-check": "error",
-        "@typescript-eslint/restrict-template-expressions": [
-          "error",
-          {
-            allowNumber: true,
-            allowBoolean: true,
-          },
-        ],
+        "@typescript-eslint/restrict-template-expressions": "off",
       },
     },
   ],
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/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss
index 53ab91168cc1..b92a9657830d 100644
--- 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/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss
@@ -1,3 +1,4 @@
+@use "@/styles/Colors.module.scss";
 @use "@/styles/Spacings.module.scss";
 
 .markdown {
@@ -23,3 +24,32 @@
     }
   }
 }
+
+.user {
+  color: Colors.$black;
+}
+
+.brain {
+  color: Colors.$white;
+}
+
+.thinking {
+  animation: pulse 1s infinite;
+  font-size: 2px;
+  line-height: 16px;
+  width: 16px;
+  display: flex;
+  justify-content: center;
+}
+
+@keyframes pulse {
+  0% {
+    font-size: 6px;
+  }
+  50% {
+    font-size: 16px;
+  }
+  100% {
+    font-size: 6px;
+  }
+}
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/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx
index e0da810a53ac..749075384c24 100644
--- 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/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx
@@ -36,13 +36,10 @@ export const MessageContent = ({
     } else {
       setIsLog(false);
     }
-    console.info(isUser);
   }, [text]);
 
   const { logs, cleanedText } = extractLog(text);
 
-  console.info(cleanedText);
-
   return (
     <div data-testid="chat-message-text">
       {isLog && showLog && logs.length > 0 && (
@@ -51,9 +48,11 @@ export const MessageContent = ({
         </div>
       )}
       <ReactMarkdown
-        className={`${styles.markdown ?? ""} ${
-          isUser ? "text-black" : "text-white"
-        } `}
+        className={`
+        ${styles.markdown} 
+        ${isUser ? styles.user : styles.brain}
+        ${cleanedText === "🧠" ? styles.thinking : ""} 
+        `}
       >
         {cleanedText}
       </ReactMarkdown>
diff --git a/frontend/app/chat/[chatId]/utils/generatePlaceHolderMessage.ts b/frontend/app/chat/[chatId]/utils/generatePlaceHolderMessage.ts
index 955ecad079e8..601ade7d0974 100644
--- a/frontend/app/chat/[chatId]/utils/generatePlaceHolderMessage.ts
+++ b/frontend/app/chat/[chatId]/utils/generatePlaceHolderMessage.ts
@@ -11,8 +11,10 @@ export const generatePlaceHolderMessage = ({
 }: GeneratePlaceHolderMessageProps): ChatMessage => {
   return {
     message_id: new Date().getTime().toString(),
-    message_time: new Date(new Date().setDate(new Date().getDate() + 1)).toISOString(),
-    assistant: 'Thinking..',
+    message_time: new Date(
+      new Date().setDate(new Date().getDate() + 1)
+    ).toISOString(),
+    assistant: "🧠",
     chat_id,
     user_message,
   };

From 0ca00ff18d0c05d6a700650aa59e9a6fea77508c Mon Sep 17 00:00:00 2001
From: Zewed <dewez.antoine2@gmail.com>
Date: Sat, 27 Jan 2024 17:38:59 -0800
Subject: [PATCH 09/11] fix

---
 .../ActionsBar/components/ChatInput/index.tsx | 37 ++++++++++---------
 .../lib/components/ui/Icon/Icon.module.scss   |  1 +
 frontend/lib/helpers/iconList.ts              |  2 +
 3 files changed, 22 insertions(+), 18 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 55fb7d5e88c8..772a7f3fc151 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
@@ -1,7 +1,7 @@
 "use client";
-import { useTranslation } from "react-i18next";
 
-import Button from "@/lib/components/ui/Button";
+import Icon from "@/lib/components/ui/Icon/Icon";
+import { LoaderIcon } from "@/lib/components/ui/LoaderIcon/LoaderIcon";
 
 import { OnboardingQuestions } from "./components";
 import { ChatEditor } from "./components/ChatEditor/ChatEditor";
@@ -11,7 +11,11 @@ export const ChatInput = (): JSX.Element => {
   const { setMessage, submitQuestion, generatingAnswer, message } =
     useChatInput();
 
-  const { t } = useTranslation(["chat"]);
+  const handleSubmitQuestion = () => {
+    if (message.trim() !== "") {
+      submitQuestion();
+    }
+  };
 
   return (
     <>
@@ -21,7 +25,7 @@ export const ChatInput = (): JSX.Element => {
           data-testid="chat-input-form"
           onSubmit={(e) => {
             e.preventDefault();
-            submitQuestion();
+            handleSubmitQuestion();
           }}
           className="sticky bottom-0 bg-white dark:bg-black w-full flex items-center gap-2 z-20 p-2"
         >
@@ -29,22 +33,19 @@ export const ChatInput = (): JSX.Element => {
             <ChatEditor
               message={message}
               setMessage={setMessage}
-              onSubmit={submitQuestion}
+              onSubmit={handleSubmitQuestion}
             />
           </div>
-
-          <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"
-              isLoading={generatingAnswer}
-              data-testid="submit-button"
-            >
-              {generatingAnswer
-                ? t("thinking", { ns: "chat" })
-                : t("chat", { ns: "chat" })}
-            </Button>
-          </div>
+          {generatingAnswer ? (
+            <LoaderIcon size="large" color="accent" />
+          ) : (
+            <Icon
+              name="followUp"
+              size="large"
+              color="accent"
+              disabled={!message}
+            />
+          )}
         </form>
       </div>
     </>
diff --git a/frontend/lib/components/ui/Icon/Icon.module.scss b/frontend/lib/components/ui/Icon/Icon.module.scss
index efa567d60ab8..fe7dbaa89e8c 100644
--- a/frontend/lib/components/ui/Icon/Icon.module.scss
+++ b/frontend/lib/components/ui/Icon/Icon.module.scss
@@ -46,5 +46,6 @@
 }
 
 .disabled {
+  color: Colors.$black;
   opacity: 0.2;
 }
diff --git a/frontend/lib/helpers/iconList.ts b/frontend/lib/helpers/iconList.ts
index ec320051dc2c..5a5228a5c8a6 100644
--- a/frontend/lib/helpers/iconList.ts
+++ b/frontend/lib/helpers/iconList.ts
@@ -1,5 +1,6 @@
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 import { FaCheckCircle, FaRegUserCircle } from "react-icons/fa";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
 import { IconType } from "react-icons/lib";
 import {
   LuBrain,
@@ -18,6 +19,7 @@ export const iconList: { [name: string]: IconType } = {
   chevronDown: LuChevronDown,
   chevronRight: LuChevronRight,
   copy: LuCopy,
+  followUp: FaArrowUpFromBracket,
   hastag: RiHashtag,
   loader: AiOutlineLoading3Quarters,
   search: LuSearch,

From 04d3b23aa2d5b9eb6a984dee41eb461bdacae125 Mon Sep 17 00:00:00 2001
From: Zewed <dewez.antoine2@gmail.com>
Date: Sun, 28 Jan 2024 00:14:43 -0800
Subject: [PATCH 10/11] some markdown fixes

---
 .../MessageContent/MessageContent.module.scss | 13 ++++++++++++
 frontend/app/search/page.module.scss          |  2 +-
 frontend/styles/_Typography.module.scss       | 21 ++++++++++++++++---
 3 files changed, 32 insertions(+), 4 deletions(-)

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/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss
index b92a9657830d..30ab6d5645e5 100644
--- 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/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss
@@ -1,5 +1,6 @@
 @use "@/styles/Colors.module.scss";
 @use "@/styles/Spacings.module.scss";
+@use "@/styles/Typography.module.scss";
 
 .markdown {
   p {
@@ -23,6 +24,18 @@
       white-space-collapse: collapse;
     }
   }
+
+  h1 {
+    @include Typography.H1;
+  }
+
+  h2 {
+    @include Typography.H2;
+  }
+
+  h3 {
+    @include Typography.H3;
+  }
 }
 
 .user {
diff --git a/frontend/app/search/page.module.scss b/frontend/app/search/page.module.scss
index 2fdef462a2b4..f315552ea1c7 100644
--- a/frontend/app/search/page.module.scss
+++ b/frontend/app/search/page.module.scss
@@ -34,7 +34,7 @@
       align-items: center;
 
       .quivr_text {
-        @include Typography.H1;
+        @include Typography.Big;
 
         .quivr_text_primary {
           color: Colors.$primary;
diff --git a/frontend/styles/_Typography.module.scss b/frontend/styles/_Typography.module.scss
index 72ab2abef0ea..e90da26d814e 100644
--- a/frontend/styles/_Typography.module.scss
+++ b/frontend/styles/_Typography.module.scss
@@ -1,4 +1,19 @@
+@mixin Big {
+  font-weight: 500;
+  font-size: 36px;
+}
+
 @mixin H1 {
-    font-weight: 500;
-    font-size: 36px;
-}
\ No newline at end of file
+  font-weight: 600;
+  font-size: 20px;
+}
+
+@mixin H2 {
+  font-weight: 600;
+  font-size: 18px;
+}
+
+@mixin H3 {
+  font-weight: 500;
+  font-size: 16px;
+}

From 98d9c7ba63bf83635f7948c96c29caf1c0e3023f Mon Sep 17 00:00:00 2001
From: Zewed <dewez.antoine2@gmail.com>
Date: Sun, 28 Jan 2024 00:35:32 -0800
Subject: [PATCH 11/11] works

---
 .../components/ActionsBar/components/ChatInput/index.tsx     | 2 ++
 .../QADisplay/components/MessageRow/MessageRow.module.scss   | 2 +-
 frontend/lib/components/ui/Icon/Icon.module.scss             | 5 +++++
 frontend/styles/_Colors.module.scss                          | 1 +
 4 files changed, 9 insertions(+), 1 deletion(-)

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 772a7f3fc151..22dd6bd6d82d 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
@@ -44,6 +44,8 @@ export const ChatInput = (): JSX.Element => {
               size="large"
               color="accent"
               disabled={!message}
+              handleHover={true}
+              onClick={handleSubmitQuestion}
             />
           )}
         </form>
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/QADisplay/components/MessageRow/MessageRow.module.scss
index 647a9b2d42fd..046bfa986150 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/QADisplay/components/MessageRow/MessageRow.module.scss
@@ -56,7 +56,7 @@
 
     .message_row_content {
       align-self: flex-start;
-      background-color: rgba(Colors.$black, 0.8);
+      background-color: Colors.$light-black;
       margin-left: 1px;
     }
   }
diff --git a/frontend/lib/components/ui/Icon/Icon.module.scss b/frontend/lib/components/ui/Icon/Icon.module.scss
index fe7dbaa89e8c..5ea013ec6aa2 100644
--- a/frontend/lib/components/ui/Icon/Icon.module.scss
+++ b/frontend/lib/components/ui/Icon/Icon.module.scss
@@ -47,5 +47,10 @@
 
 .disabled {
   color: Colors.$black;
+  pointer-events: none;
   opacity: 0.2;
 }
+
+.hovered {
+  cursor: pointer;
+}
diff --git a/frontend/styles/_Colors.module.scss b/frontend/styles/_Colors.module.scss
index 9ebfd04bfe09..443d164f33f6 100644
--- a/frontend/styles/_Colors.module.scss
+++ b/frontend/styles/_Colors.module.scss
@@ -3,6 +3,7 @@ $lightest-grey: #f5f5f5;
 $light-grey: #d3d3d3;
 $normal-grey: #c8c8c8;
 $dark-grey: #707070;
+$light-black: #415065;
 $black: #11243e;
 $dark-black: #081621;
 $primary: #6142d4;