chore: render markdown on user message (#5146)

web-app/src/containers/RenderMarkdown.tsx

@@ -21,12 +21,14 @@ interface MarkdownProps {
   className?: string
   components?: Components
   enableRawHtml?: boolean
+  isUser?: boolean
 }
 
 function RenderMarkdownComponent({
   content,
   enableRawHtml,
   className,
+  isUser,
   components,
 }: MarkdownProps) {
   const { codeBlockStyle, showLineNumbers } = useCodeblock()
@@ -71,7 +73,7 @@ function RenderMarkdownComponent({
 
         const shouldVirtualize = code.split('\n').length > 300
 
-        return !isInline ? (
+        return !isInline && !isUser ? (
           <div className="relative overflow-hidden border rounded-md border-main-view-fg/2">
             <div className="flex items-center justify-between px-4 py-2 bg-main-view/10">
               <span className="font-medium text-xs font-sans">
@@ -135,9 +137,7 @@ function RenderMarkdownComponent({
             </SyntaxHighlighter>
           </div>
         ) : (
-          <code className={className} {...props}>
+          <code className={cn(className)}>{children}</code>
-            {children}
-          </code>
         )
       },
     }),

web-app/src/containers/ThreadContent.tsx

@@ -185,10 +185,14 @@ export const ThreadContent = memo(
       <Fragment>
         {item.content?.[0]?.text && item.role === 'user' && (
           <div className="w-full">
-            <div className="flex justify-end w-full text-start break-words whitespace-normal">
+            <div className="flex justify-end w-full h-full text-start break-words whitespace-normal">
-              <div className="bg-main-view-fg/4 relative text-main-view-fg p-2 rounded-md inline-block max-w-[70%]">
+              <div className="bg-main-view-fg/4 relative text-main-view-fg p-2 rounded-md inline-block max-w-[80%] ">
-                <div className="whitespace-pre-wrap select-text">
+                <div className="select-text">
-                  {item.content?.[0].text.value}
+                  <RenderMarkdown
+                    content={item.content?.[0].text.value}
+                    components={linkComponents}
+                    isUser
+                  />
                 </div>
               </div>
             </div>
@@ -274,7 +278,6 @@ export const ThreadContent = memo(
                 <div className="flex items-center gap-2 size-8 rounded-md justify-center border border-main-view-fg/10 bg-main-view-fg/5 p-1">
                   <AvatarEmoji
                     avatar={assistant?.avatar}
-                    fallback="👋"
                     imageClassName="w-6 h-6 object-contain"
                     textClassName="text-base"
                   />

web-app/src/styles/markdown.css

@@ -41,6 +41,10 @@
   p {
     line-height: 1.6;
     margin-bottom: 1em;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   strong {
@@ -103,17 +107,17 @@
   /* Code */
   code {
     font-family: monospace;
-    @apply bg-main-view-fg/10 text-main-view-fg;
+    @apply bg-main-view-fg/6 text-main-view-fg;
     padding: 0.2em 0.4em;
     border-radius: 3px;
   }
 
   pre {
     font-family: monospace;
-    @apply bg-main-view-fg/10 text-main-view-fg;
+    @apply bg-main-view-fg/6 text-main-view-fg;
     overflow-x: auto;
     border-radius: 8px;
-    margin-bottom: 1em;
+    margin-bottom: 8px;
   }
 
   pre code {