fix(web): hide divider-only Markdown content (#42860)

web/app/components/base/markdown/__tests__/index.spec.tsx

@@ -45,6 +45,26 @@ describe('Markdown', () => {
     expect(screen.getByTestId('react-markdown-wrapper'))!.toHaveTextContent('Hello World')
   })
 
+  it.each(['', ' \n ', '---', ' *** ', '___', '- - -'])(
+    'should leave empty or divider-only Markdown unrendered (%s)',
+    (content) => {
+      render(<Markdown content={content} />)
+
+      expect(screen.getByTestId('markdown-body')).toBeEmptyDOMElement()
+      expect(screen.queryByTestId('react-markdown-wrapper')).not.toBeInTheDocument()
+    },
+  )
+
+  it.each(['First\n\n---\n\nSecond', '    ---'])(
+    'should preserve meaningful Markdown containing divider characters (%s)',
+    (content) => {
+      render(<Markdown content={content} />)
+
+      expect(screen.getByTestId('react-markdown-wrapper')).toBeInTheDocument()
+      expect(getLastWrapperProps().latexContent).toBe(content)
+    },
+  )
+
   it('should preprocess think tags', () => {
     render(<Markdown content="<think>Thought</think>" />)
     const props = getLastWrapperProps()

web/app/components/base/markdown/index.tsx

@@ -10,6 +10,8 @@ const StreamdownWrapper = dynamic(() => import('./streamdown-wrapper'), { ssr: f
 const preprocess = flow([preprocessThinkTag, preprocessLaTeX])
 
 const EMPTY_COMPONENTS = {} as const
+const MARKDOWN_DIVIDER_ONLY_RE =
+  /^(?:[ \t]*\r?\n)*[ \t]{0,3}(?:(?:-[ \t]*){3,}|(?:\*[ \t]*){3,}|(?:_[ \t]*){3,})(?:\r?\n[ \t]*)*$/
 
 /**
  * @fileoverview Main Markdown rendering component.
@@ -45,22 +47,25 @@ export const Markdown = memo((props: MarkdownProps) => {
     className,
   } = props
   const latexContent = useMemo(() => preprocess(content), [content])
+  const hasContent = !!latexContent.trim() && !MARKDOWN_DIVIDER_ONLY_RE.test(latexContent)
 
   return (
     <div
       className={cn('markdown-body', 'text-text-primary!', className)}
       data-testid="markdown-body"
     >
-      <StreamdownWrapper
-        pluginInfo={pluginInfo}
-        latexContent={latexContent}
-        customComponents={customComponents}
-        customDisallowedElements={customDisallowedElements}
-        remarkPlugins={remarkPlugins}
-        rehypePlugins={rehypePlugins}
-        isAnimating={isAnimating}
-        mode={mode}
-      />
+      {hasContent && (
+        <StreamdownWrapper
+          pluginInfo={pluginInfo}
+          latexContent={latexContent}
+          customComponents={customComponents}
+          customDisallowedElements={customDisallowedElements}
+          remarkPlugins={remarkPlugins}
+          rehypePlugins={rehypePlugins}
+          isAnimating={isAnimating}
+          mode={mode}
+        />
+      )}
     </div>
   )
 })