wip

QuivrHQ · Jan 27, 2024 · 1128d36 · 1128d36
1 parent 30c5f27
commit 1128d36
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 98 deletions.
diff --git a/...components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss b/...components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss
@@ -4,30 +4,51 @@
 .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);
     }
   }
 
   &.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/...gueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx b/...gueArea/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/...ponents/ChatDialogue/components/QADisplay/components/MessageRow/components/CopyButton.tsx b/...ponents/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/...onents/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss b/...onents/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/...s/MessageRow/components/QuestionBrain.tsx → ...omponents/QuestionBrain/QuestionBrain.tsx b/...s/MessageRow/components/QuestionBrain.tsx → ...omponents/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/...nents/QADisplay/components/MessageRow/components/QuestionPrompt/QuestionPompt.module.scss b/...nents/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/.../MessageRow/components/QuestionPrompt.tsx → ...ponents/QuestionPrompt/QuestionPrompt.tsx b/.../MessageRow/components/QuestionPrompt.tsx → ...ponents/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/...ents/ChatDialogue/components/QADisplay/components/MessageRow/components/SourcesButton.tsx b/...ents/ChatDialogue/components/QADisplay/components/MessageRow/components/SourcesButton.tsx
diff --git 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
@@ -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
@@ -1 +1 @@
-export type Color = "black" | "primary" | "accent" | "white";
+export type Color = "black" | "dark-grey" | "primary" | "accent" | "white";
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export type Color = "black" \| "primary" \| "accent" \| "white";
		export type Color = "black" \| "dark-grey" \| "primary" \| "accent" \| "white";