From 672c9052b4b11217036ffdeb6b52e72a0a3080a9 Mon Sep 17 00:00:00 2001
From: Yufeng He <40085740+he-yufeng@users.noreply.github.com>
Date: Mon, 15 Jun 2026 03:45:44 +0800
Subject: [PATCH] fix: render user questions as plain text

---
 .../chat/chat/__tests__/question.spec.tsx     | 21 +++++++++++--------
 .../components/base/chat/chat/question.tsx    |  3 +--
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/web/app/components/base/chat/chat/__tests__/question.spec.tsx b/web/app/components/base/chat/chat/__tests__/question.spec.tsx
index 5c18ac96ba3..523eebea53c 100644
--- a/web/app/components/base/chat/chat/__tests__/question.spec.tsx
+++ b/web/app/components/base/chat/chat/__tests__/question.spec.tsx
@@ -48,9 +48,6 @@ vi.mock('../content-switch', () => ({
   },
 }))
 vi.mock('copy-to-clipboard', () => ({ default: vi.fn() }))
-vi.mock('@/app/components/base/markdown', () => ({
-  Markdown: ({ content }: { content: string }) => <div className="markdown-body">{content}</div>,
-}))
 
 // Mock ResizeObserver and capture lifecycle for targeted coverage
 const observeMock = vi.fn()
@@ -132,13 +129,20 @@ describe('Question component', () => {
   it('should render the question content container and default avatar when hideAvatar is false', () => {
     const { container } = renderWithProvider(makeItem())
 
-    const markdown = container.querySelector('.markdown-body')
-    expect(markdown).toBeInTheDocument()
+    expect(screen.getByTestId('question-content')).toHaveTextContent('This is the question content')
 
     const avatar = container.querySelector('.size-10') || container.querySelector('.size-10.shrink-0')
     expect(avatar).toBeTruthy()
   })
 
+  it('should render user-entered HTML as plain text', () => {
+    renderWithProvider(makeItem({ content: '<button class="primary-button">Confirm</button>' }))
+
+    const content = screen.getByTestId('question-content')
+    expect(content).toHaveTextContent('<button class="primary-button">Confirm</button>')
+    expect(content.querySelector('button.primary-button')).toBeNull()
+  })
+
   it('should hide avatar when hideAvatar is true', () => {
     const { container } = renderWithProvider(makeItem(), vi.fn() as unknown as OnRegenerate, { hideAvatar: true })
     const avatar = container.querySelector('.size-10')
@@ -223,9 +227,9 @@ describe('Question component', () => {
     })
   })
 
-  it('should cancel editing and revert to original markdown when cancel is clicked', async () => {
+  it('should cancel editing and revert to original text when cancel is clicked', async () => {
     const user = userEvent.setup()
-    const { container } = renderWithProvider(makeItem())
+    renderWithProvider(makeItem())
 
     const editBtn = screen.getByRole('button', { name: 'common.operation.edit' })
     await user.click(editBtn)
@@ -239,8 +243,7 @@ describe('Question component', () => {
 
     await waitFor(() => {
       expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
-      const md = container.querySelector('.markdown-body')
-      expect(md).toBeInTheDocument()
+      expect(screen.getByTestId('question-content')).toHaveTextContent('This is the question content')
     })
   })
 
diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index 4c323dde521..f8772f8d59d 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -19,7 +19,6 @@ import { useTranslation } from 'react-i18next'
 import Textarea from 'react-textarea-autosize'
 import { FileList } from '@/app/components/base/file-uploader'
 import { User } from '@/app/components/base/icons/src/public/avatar'
-import { Markdown } from '@/app/components/base/markdown'
 import ActionButton from '../../action-button'
 import { CssTransform } from '../embedded-chatbot/theme/utils'
 import ContentSwitch from './content-switch'
@@ -206,7 +205,7 @@ const Question: FC<QuestionProps> = ({
             )
           }
           {!isEditing
-            ? <Markdown content={content} />
+            ? <div className="whitespace-pre-wrap break-words">{content}</div>
             : (
                 <div className="flex flex-col gap-4">
                   <div className="max-h-[158px] overflow-x-hidden overflow-y-auto pr-1">