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] 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 c4f2f4ac2f8..2079c87f017 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 00000000000..0ed2da2f887
--- /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 189638341b7..aafdb0322bb 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 e7dcb907b5c..79dcf41e703 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,
   };
 };