From 8784a194db17a730d7dd4b02db33832540513d36 Mon Sep 17 00:00:00 2001 From: Zewed Date: Sat, 27 Jan 2024 14:13:25 -0800 Subject: [PATCH] wip --- .../MessageRow/MessageRow.module.scss | 2 +- .../components/MessageRow/MessageRow.tsx | 17 +++++-------- .../MessageContent/MessageContent.module.scss | 25 +++++++++++++++++++ .../{ => MessageContent}/MessageContent.tsx | 10 +++++--- .../MessageRow/hooks/useMessageRow.ts | 5 ---- 5 files changed, 39 insertions(+), 20 deletions(-) create mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss rename frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/{ => MessageContent}/MessageContent.tsx (87%) 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 index 6de43cb974fb..53ef7e6a31f3 100644 --- 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 @@ -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/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 58dc86614324..4dcceebdc5b3 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 @@ -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 ) => { - 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( )} {children ?? ( - + )} ); diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.module.scss new file mode 100644 index 000000000000..53ab91168cc1 --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/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/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx similarity index 87% rename from frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx rename to frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent/MessageContent.tsx index 89e64b23a311..e0da810a53ac 100644 --- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/MessageContent.tsx +++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/QADisplay/components/MessageRow/components/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 (
{isLog && showLog && logs.length > 0 && ( @@ -49,7 +51,9 @@ export const MessageContent = ({
)} {cleanedText} 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 79dcf41e7038..1c6e34c02bfb 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 @@ -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, }; };