wip

QuivrHQ · Jan 27, 2024 · 17d5f8f · 17d5f8f
1 parent 3fcdd01
commit 17d5f8f
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 41 deletions.
diff --git a/...d]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/QADisplay.tsx b/...d]/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/...components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss b/...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/...gueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx b/...gueArea/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/...components/ChatDialogue/components/QADisplay/components/MessageRow/hooks/useMessageRow.ts b/...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,
   };
 };