wip

QuivrHQ · Jan 27, 2024 · 30c5f27 · 30c5f27
1 parent 8784a19
commit 30c5f27
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 28 deletions.
diff --git a/...components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss b/...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/...gueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx b/...gueArea/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>
     );
   }