wip

QuivrHQ · Jan 27, 2024 · 8784a19 · 8784a19
1 parent 7a18b8c
commit 8784a19
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 20 deletions.
diff --git a/...components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss b/...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/...gueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.tsx b/...gueArea/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/...ents/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss b/...ents/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/.../MessageRow/components/MessageContent.tsx → ...ponents/MessageContent/MessageContent.tsx b/.../MessageRow/components/MessageContent.tsx → ...ponents/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/...components/ChatDialogue/components/QADisplay/components/MessageRow/hooks/useMessageRow.ts b/...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,
   };
 };