Feat/web markdown UI updates

web/package.json

@@ -124,6 +124,7 @@
     "recharts": "^2.12.4",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "sonner": "^1.7.4",

web/src/components/document-preview/md/index.tsx

@@ -1,10 +1,10 @@
 import { Authorization } from '@/constants/authorization';
+import { MarkdownRemarkPluginsLite } from '@/constants/markdown-remark-plugins';
 import { cn } from '@/lib/utils';
 import FileError from '@/pages/document-viewer/file-error';
 import { getAuthorization } from '@/utils/authorization-util';
 import React, { useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
 
 interface MdProps {
   // filePath: string;
@@ -34,7 +34,9 @@ export const Md: React.FC<MdProps> = ({ url, className }) => {
       style={{ padding: 4, overflow: 'scroll' }}
       className={cn(className, 'markdown-body h-[calc(100vh - 200px)]')}
     >
-      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+      <ReactMarkdown remarkPlugins={MarkdownRemarkPluginsLite}>
+        {content}
+      </ReactMarkdown>
     </div>
   );
 };

web/src/components/floating-chat-widget-markdown.tsx

@@ -35,8 +35,7 @@ import {
 } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-import remarkMath from 'remark-math';
+import { MarkdownRemarkPlugins } from '@/constants/markdown-remark-plugins';
 import { visitParents } from 'unist-util-visit-parents';
 import styles from './floating-chat-widget-markdown.module.less';
 import { useIsDarkTheme } from './theme-provider';
@@ -291,7 +290,7 @@ const FloatingChatWidgetMarkdown = ({
     <div className="floating-chat-widget" dir={dir}>
       <Markdown
         rehypePlugins={[rehypeWrapReference, rehypeKatex, rehypeRaw]}
-        remarkPlugins={[remarkGfm, remarkMath]}
+        remarkPlugins={MarkdownRemarkPlugins}
         className="text-sm leading-relaxed space-y-2 prose-sm max-w-full"
         components={
           {

web/src/components/highlight-markdown/index.tsx

@@ -7,8 +7,7 @@ import {
 } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-import remarkMath from 'remark-math';
+import { MarkdownRemarkPlugins } from '@/constants/markdown-remark-plugins';
 
 import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you
 
@@ -33,7 +32,7 @@ const HighLightMarkdown = ({
   return (
     <div dir={dir} className={classNames(styles.text)}>
       <Markdown
-        remarkPlugins={[remarkGfm, remarkMath]}
+        remarkPlugins={MarkdownRemarkPlugins}
         rehypePlugins={[rehypeRaw, rehypeKatex]}
         components={
           {

web/src/components/markdown-content/index.module.less

@@ -1,4 +1,46 @@
 .markdownContentWrapper {
+  /* Heading / list rhythm for streamed assistant Markdown (GFM + breaks) */
+  :global(h1) {
+    font-size: 1.25em;
+    font-weight: 600;
+    margin: 0.65em 0 0.4em;
+    line-height: 1.35;
+  }
+  :global(h2) {
+    font-size: 1.15em;
+    font-weight: 600;
+    margin: 0.55em 0 0.35em;
+    line-height: 1.35;
+  }
+  :global(h3) {
+    font-size: 1.08em;
+    font-weight: 600;
+    margin: 0.5em 0 0.3em;
+    line-height: 1.35;
+  }
+  :global(h4),
+  :global(h5),
+  :global(h6) {
+    font-size: 1em;
+    font-weight: 600;
+    margin: 0.45em 0 0.25em;
+    line-height: 1.35;
+  }
+  :global(p) {
+    margin: 0.35em 0;
+  }
+  :global(ul),
+  :global(ol) {
+    margin: 0.35em 0;
+    padding-inline-start: 1.25em;
+  }
+  :global(li) {
+    margin: 0.15em 0;
+  }
+  :global(table) {
+    margin: 0.5em 0;
+  }
+
   :global(section.think) {
     padding-inline-start: 10px;
     color: #8b8b8b;

web/src/components/markdown-content/index.tsx

@@ -10,8 +10,7 @@ import Markdown from 'react-markdown';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-import remarkMath from 'remark-math';
+import { MarkdownRemarkPlugins } from '@/constants/markdown-remark-plugins';
 import { visitParents } from 'unist-util-visit-parents';
 
 import { useTranslation } from 'react-i18next';
@@ -239,7 +238,7 @@ const MarkdownContent = ({
     <div dir={dir} className={styles.markdownContentWrapper}>
       <Markdown
         rehypePlugins={[rehypeWrapReference, rehypeKatex, rehypeRaw]}
-        remarkPlugins={[remarkGfm, remarkMath]}
+        remarkPlugins={MarkdownRemarkPlugins}
         components={
           {
             p: ({ children, ...props }: any) => <p {...props}>{children}</p>,

web/src/components/next-markdown-content/index.module.less

@@ -1,4 +1,45 @@
 .markdownContentWrapper {
+  :global(h1) {
+    font-size: 1.25em;
+    font-weight: 600;
+    margin: 0.65em 0 0.4em;
+    line-height: 1.35;
+  }
+  :global(h2) {
+    font-size: 1.15em;
+    font-weight: 600;
+    margin: 0.55em 0 0.35em;
+    line-height: 1.35;
+  }
+  :global(h3) {
+    font-size: 1.08em;
+    font-weight: 600;
+    margin: 0.5em 0 0.3em;
+    line-height: 1.35;
+  }
+  :global(h4),
+  :global(h5),
+  :global(h6) {
+    font-size: 1em;
+    font-weight: 600;
+    margin: 0.45em 0 0.25em;
+    line-height: 1.35;
+  }
+  :global(p) {
+    margin: 0.35em 0;
+  }
+  :global(ul),
+  :global(ol) {
+    margin: 0.35em 0;
+    padding-inline-start: 1.25em;
+  }
+  :global(li) {
+    margin: 0.15em 0;
+  }
+  :global(table) {
+    margin: 0.5em 0;
+  }
+
   :global(section.think) {
     padding-inline-start: 10px;
     color: #8b8b8b;

web/src/components/next-markdown-content/index.tsx

@@ -10,8 +10,7 @@ import Markdown from 'react-markdown';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-import remarkMath from 'remark-math';
+import { MarkdownRemarkPlugins } from '@/constants/markdown-remark-plugins';
 import { visitParents } from 'unist-util-visit-parents';
 
 import { useTranslation } from 'react-i18next';
@@ -354,7 +353,7 @@ function MarkdownContent({
     <div dir={dir} className={styles.markdownContentWrapper}>
       <Markdown
         rehypePlugins={[rehypeWrapReference, rehypeKatex, rehypeRaw]}
-        remarkPlugins={[remarkGfm, remarkMath]}
+        remarkPlugins={MarkdownRemarkPlugins}
         components={
           {
             p: ({ children, ...props }: any) => <p {...props}>{children}</p>,

web/src/constants/markdown-remark-plugins.ts

@@ -0,0 +1,17 @@
+import remarkBreaks from 'remark-breaks';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+
+/**
+ * GFM + line breaks only (no TeX). For surfaces that do not wire rehype-katex
+ * (e.g. uploaded document preview).
+ */
+export const MarkdownRemarkPluginsLite = [remarkGfm, remarkBreaks];
+
+/**
+ * Shared Markdown pipeline for assistant-style content:
+ * - remark-gfm: GFM tables, task lists, strikethrough, autolinks, etc.
+ * - remark-math: TeX ($...$ / $$...$$); pair with rehype-katex on render.
+ * - remark-breaks: treat single newlines as hard breaks (common in LLM chat).
+ */
+export const MarkdownRemarkPlugins = [remarkGfm, remarkMath, remarkBreaks];

web/src/pages/next-search/markdown-content/index.tsx

@@ -8,8 +8,7 @@ import Markdown from 'react-markdown';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-import remarkMath from 'remark-math';
+import { MarkdownRemarkPlugins } from '@/constants/markdown-remark-plugins';
 import { visitParents } from 'unist-util-visit-parents';
 
 import { useTranslation } from 'react-i18next';
@@ -246,7 +245,7 @@ const MarkdownContent = ({
     >
       <Markdown
         rehypePlugins={[rehypeWrapReference, rehypeKatex, rehypeRaw]}
-        remarkPlugins={[remarkGfm, remarkMath]}
+        remarkPlugins={MarkdownRemarkPlugins}
         components={
           {
             p: ({ children, node, ...props }: any) => (