fix: render user chat input as plain text

Author: mturac

eslint-suppressions.json

@@ -1236,11 +1236,6 @@
       "count": 1
     }
   },
-  "web/app/components/base/chat/chat/question.tsx": {
-    "jsx-a11y/no-autofocus": {
-      "count": 1
-    }
-  },
   "web/app/components/base/chat/chat/type.ts": {
     "ts/no-explicit-any": {
       "count": 5

web/app/components/base/chat/chat/__tests__/question.spec.tsx

@@ -2,7 +2,7 @@ import type { Theme } from '../../embedded-chatbot/theme/theme-context'
 import type { ChatConfig, ChatItem, OnRegenerate } from '../../types'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import { toast } from '@langgenius/dify-ui/toast'
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import copy from 'copy-to-clipboard'
 import * as React from 'react'
@@ -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,23 @@ 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 supplied HTML as plain text', () => {
+    const content = '<button class="primary-button">Confirm</button>'
+    renderWithProvider(makeItem({ content }))
+
+    const contentContainer = screen.getByTestId('question-content')
+
+    expect(contentContainer).toHaveTextContent(content)
+    expect(within(contentContainer).queryByRole('button', { name: 'Confirm' })).not.toBeInTheDocument()
+    expect(contentContainer.querySelector('.primary-button')).not.toBeInTheDocument()
+  })
+
   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 +230,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 +246,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')
     })
   })
 

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'
@@ -59,6 +58,7 @@ const Question: FC<QuestionProps> = ({
   const [editedContent, setEditedContent] = useState(content)
   const [contentWidth, setContentWidth] = useState(0)
   const contentRef = useRef<HTMLDivElement>(null)
+  const editInputRef = useRef<HTMLTextAreaElement>(null)
   const isComposingRef = useRef(false)
   const compositionEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
@@ -160,6 +160,11 @@ const Question: FC<QuestionProps> = ({
     }
   }, [clearCompositionEndTimer])
 
+  useEffect(() => {
+    if (isEditing)
+      editInputRef.current?.focus()
+  }, [isEditing])
+
   return (
     <div className="mb-2 flex justify-end last:mb-0">
       <div className={cn('group relative mr-4 flex max-w-full items-start overflow-x-hidden pl-14', isEditing && 'flex-1')}>
@@ -206,15 +211,15 @@ const Question: FC<QuestionProps> = ({
             )
           }
           {!isEditing
-            ? <Markdown content={content} />
+            ? <div className="break-words whitespace-pre-wrap">{content}</div>
             : (
                 <div className="flex flex-col gap-4">
                   <div className="max-h-[158px] overflow-x-hidden overflow-y-auto pr-1">
                     <Textarea
+                      ref={editInputRef}
                       className={cn(
                         'w-full resize-none bg-transparent p-0 body-lg-regular leading-7 text-text-primary outline-hidden',
                       )}
-                      autoFocus
                       minRows={1}
                       value={editedContent}
                       onChange={e => setEditedContent(e.target.value)}