From 9e592b2aca074c6025792e8050ab1bee4af2c014 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 11 Sep 2025 10:29:34 +0700
Subject: [PATCH] fix: render new line for user message

---
 web-app/package.json                      |  1 +
 web-app/src/containers/RenderMarkdown.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/web-app/package.json b/web-app/package.json
index 2d080d0e6..d280fdf74 100644
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -74,6 +74,7 @@
     "react-textarea-autosize": "^8.5.9",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
+    "remark-breaks": "^4.0.0",
     "remark-emoji": "^5.0.1",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
diff --git a/web-app/src/containers/RenderMarkdown.tsx b/web-app/src/containers/RenderMarkdown.tsx
index 125994eab..27bec0ea2 100644
--- a/web-app/src/containers/RenderMarkdown.tsx
+++ b/web-app/src/containers/RenderMarkdown.tsx
@@ -3,6 +3,7 @@ import ReactMarkdown, { Components } from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkEmoji from 'remark-emoji'
 import remarkMath from 'remark-math'
+import remarkBreaks from 'remark-breaks'
 import rehypeKatex from 'rehype-katex'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import * as prismStyles from 'react-syntax-highlighter/dist/cjs/styles/prism'
@@ -162,8 +163,13 @@ function RenderMarkdownComponent({
   // Memoize the remarkPlugins to prevent unnecessary re-renders
   const remarkPlugins = useMemo(() => {
     // Using a simpler configuration to avoid TypeScript errors
-    return [remarkGfm, remarkMath, remarkEmoji]
-  }, [])
+    const basePlugins = [remarkGfm, remarkMath, remarkEmoji]
+    // Add remark-breaks for user messages to handle single newlines as line breaks
+    if (isUser) {
+      basePlugins.push(remarkBreaks)
+    }
+    return basePlugins
+  }, [isUser])
 
   // Memoize the rehypePlugins to prevent unnecessary re-renders
   const rehypePlugins = useMemo(() => {