From a8cd9724ef07f9add359d60906f6f7ca4f76c6f4 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 6 Feb 2024 22:46:48 +0700
Subject: [PATCH] fix: markdown render for chat completion role user (#1944)

---
 web/screens/Chat/SimpleTextMessage/index.tsx | 56 +++++++++++++++-----
 1 file changed, 42 insertions(+), 14 deletions(-)

diff --git a/web/screens/Chat/SimpleTextMessage/index.tsx b/web/screens/Chat/SimpleTextMessage/index.tsx
index 261bb3497..9be45e7e6 100644
--- a/web/screens/Chat/SimpleTextMessage/index.tsx
+++ b/web/screens/Chat/SimpleTextMessage/index.tsx
@@ -18,7 +18,7 @@ import hljs from 'highlight.js'
 
 import { useAtomValue } from 'jotai'
 import { FolderOpenIcon } from 'lucide-react'
-import { Marked, Renderer } from 'marked'
+import { Marked, Renderer, marked as markedDefault } from 'marked'
 
 import { markedHighlight } from 'marked-highlight'
 
@@ -37,13 +37,29 @@ import MessageToolbar from '../MessageToolbar'
 
 import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
 
+function isMarkdownValue(value: string): boolean {
+  const tokenTypes: string[] = []
+  markedDefault(value, {
+    walkTokens: (token) => {
+      tokenTypes.push(token.type)
+    },
+  })
+  const isMarkdown = ['code', 'codespan'].some((tokenType) => {
+    return tokenTypes.includes(tokenType)
+  })
+  return isMarkdown
+}
+
 const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
   let text = ''
+  const isUser = props.role === ChatCompletionRole.User
+  const isSystem = props.role === ChatCompletionRole.System
+
   if (props.content && props.content.length > 0) {
     text = props.content[0]?.text?.value ?? ''
   }
+
   const clipboard = useClipboard({ timeout: 1000 })
-  const { onViewFile, onViewFileContainer } = usePath()
 
   const marked: Marked = new Marked(
     markedHighlight({
@@ -88,9 +104,8 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
     }
   )
 
+  const { onViewFile, onViewFileContainer } = usePath()
   const parsedText = marked.parse(text)
-  const isUser = props.role === ChatCompletionRole.User
-  const isSystem = props.role === ChatCompletionRole.System
   const [tokenCount, setTokenCount] = useState(0)
   const [lastTimestamp, setLastTimestamp] = useState<number | undefined>()
   const [tokenSpeed, setTokenSpeed] = useState(0)
@@ -260,16 +275,29 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
             </div>
           )}
 
-          <div
-            className={twMerge(
-              'message flex flex-grow flex-col gap-y-2 text-[15px] font-normal leading-relaxed',
-              isUser
-                ? 'whitespace-pre-wrap break-words'
-                : 'rounded-xl bg-secondary p-4'
-            )}
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            dangerouslySetInnerHTML={{ __html: parsedText }}
-          />
+          {isUser && !isMarkdownValue(text) ? (
+            <div
+              className={twMerge(
+                'message flex flex-grow flex-col gap-y-2 text-[15px] font-normal leading-relaxed',
+                isUser
+                  ? 'whitespace-pre-wrap break-words'
+                  : 'rounded-xl bg-secondary p-4'
+              )}
+            >
+              {text}
+            </div>
+          ) : (
+            <div
+              className={twMerge(
+                'message flex flex-grow flex-col gap-y-2 text-[15px] font-normal leading-relaxed',
+                isUser
+                  ? 'whitespace-pre-wrap break-words'
+                  : 'rounded-xl bg-secondary p-4'
+              )}
+              // eslint-disable-next-line @typescript-eslint/naming-convention
+              dangerouslySetInnerHTML={{ __html: parsedText }}
+            />
+          )}
         </>
       </div>
     </div>