perf(flowchat): Keep long thinking lightweight

src/web-ui/package.json

@@ -64,6 +64,7 @@
     "jszip": "^3.10.1",
     "katex": "^0.16.25",
     "lucide-react": "^0.541.0",
+    "markstream-react": "2.0.13",
     "mermaid": "^11.10.1",
     "modern-screenshot": "^4.7.0",
     "monaco-editor": "^0.52.2",
@@ -89,6 +90,7 @@
     "remark-rehype": "^11.1.2",
     "remark-stringify": "^11.0.0",
     "semver": "7.7.4",
+    "stream-markdown-parser": "1.2.16",
     "tabbable": "^6.5.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",

src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.test.tsx

@@ -45,7 +45,7 @@ vi.mock('./useToolCardHeightContract', () => ({
 }));
 
 vi.mock('@/infrastructure/markdown', () => ({
-  MarkdownRenderer: ({ content }: { content: string }) => {
+  ThinkingMarkdownRenderer: ({ content }: { content: string }) => {
     markdownRender(content);
     return <div data-testid="thinking-markdown">{content}</div>;
   },

src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.tsx

@@ -25,7 +25,7 @@ import {
   noteTailFollowStep,
 } from '@/infrastructure/diagnostics/flowChatTailFollowDiagnostics';
 import { latestReasoningSummaryPreview } from '../utils/reasoningSummaryPresentation';
-import { MarkdownRenderer } from '@/infrastructure/markdown';
+import { ThinkingMarkdownRenderer } from '@/infrastructure/markdown';
 import './ModelThinkingDisplay.scss';
 
 interface ModelThinkingDisplayProps {
@@ -455,7 +455,7 @@ export const ModelThinkingDisplay: React.FC<ModelThinkingDisplayProps> = ({
             onTouchEnd={handleContentTouchEnd}
             onKeyDown={handleContentKeyDown}
           >
-            <MarkdownRenderer
+            <ThinkingMarkdownRenderer
               content={renderedContent}
               isStreaming={isVisuallyStreaming}
               className="thinking-markdown"

src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.typewriter.test.tsx

@@ -12,7 +12,7 @@ vi.mock('@openbitfun/ui', () => ({
   Icon: () => null,
 }));
 vi.mock('@/infrastructure/markdown', () => ({
-  MarkdownRenderer: ({ content }: { content: string }) => <div data-testid="body">{content}</div>,
+  ThinkingMarkdownRenderer: ({ content }: { content: string }) => <div data-testid="body">{content}</div>,
 }));
 vi.mock('./useToolCardHeightContract', () => ({
   useToolCardHeightContract: () => ({

src/web-ui/src/infrastructure/markdown/MarkdownMathRenderer.tsx

@@ -21,6 +21,7 @@ interface MarkdownMathRendererProps {
   remarkAutolinkComputerFileLinks: Pluggable;
   urlTransform: (value: string) => string;
   sourceRange?: MarkdownSourceRange;
+  inline?: boolean;
 }
 
 export const MarkdownMathRenderer: React.FC<MarkdownMathRendererProps> = ({
@@ -31,8 +32,9 @@ export const MarkdownMathRenderer: React.FC<MarkdownMathRendererProps> = ({
   remarkAutolinkComputerFileLinks,
   urlTransform,
   sourceRange,
-}) => (
-  <div data-openbitfun-component="markdown" data-openbitfun-part="math">
+  inline = false,
+}) => {
+  const content = (
     <ReactMarkdown
       remarkPlugins={[remarkGfm, remarkMath, [remarkStreamingTableLinks, { isStreaming }], remarkAutolinkBoundaries, remarkAutolinkComputerFileLinks]}
       rehypePlugins={[rehypeRaw, [rehypeSanitize, sanitizeSchema], [rehypeSourceRange, sourceRange], rehypeKatex]}
@@ -41,7 +43,10 @@ export const MarkdownMathRenderer: React.FC<MarkdownMathRendererProps> = ({
     >
       {markdownContent}
     </ReactMarkdown>
-  </div>
-);
+  );
+  return inline
+    ? <span data-openbitfun-component="markdown" data-openbitfun-part="math">{content}</span>
+    : <div data-openbitfun-component="markdown" data-openbitfun-part="math">{content}</div>;
+};
 
 export default MarkdownMathRenderer;