refactor: markdown split form agent

2026-03-12 20:37:16 +01:00
parent 35b2e9d538
commit fb1df18256
8 changed files with 204 additions and 80 deletions
--- a/frontend/src/components/nodes/render/views/StaticMarkdownHtmlView.tsx
+++ b/frontend/src/components/nodes/render/views/StaticMarkdownHtmlView.tsx
@@ -0,0 +1,57 @@
+/**
+ * Renders final (non-streaming) markdown as HTML: reasoning + think collapsibles + main.
+ * Used for agent final output and any other source that uses the marked → HTML pipeline.
+ */
+
+import React from 'react'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { ChevronDown } from 'lucide-react'
+import type { RenderingNodeState } from '../useRenderingNodeState'
+
+const MARKDOWN_CLASS =
+  'rendering-markdown p-3 text-sm [&_h1]:text-lg [&_h2]:text-base [&_h3]:text-sm [&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-5 [&_ol]:pl-5 [&_p]:my-1.5 [&_pre]:bg-muted [&_pre]:p-2 [&_pre]:rounded text-muted-foreground'
+const MARKDOWN_MAIN_CLASS =
+  'rendering-markdown min-h-0 flex-1 w-full overflow-auto p-3 text-sm [&_h1]:text-xl [&_h2]:text-lg [&_h3]:text-base [&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-5 [&_ol]:pl-5 [&_p]:my-2 [&_pre]:bg-muted [&_pre]:p-2 [&_pre]:rounded'
+
+export type StaticMarkdownHtmlViewProps = {
+  state: RenderingNodeState
+}
+
+export function StaticMarkdownHtmlView({ state }: StaticMarkdownHtmlViewProps) {
+  return (
+    <div className="min-h-0 flex-1 flex flex-col overflow-hidden">
+      {state.reasoningHtml ? (
+        <Collapsible defaultOpen={false} className="group shrink-0 border-b border-border">
+          <CollapsibleTrigger className="flex w-full items-center justify-between px-3 py-2 text-left text-xs font-medium text-muted-foreground hover:bg-muted/50 nodrag nopan">
+            Reasoning
+            <ChevronDown className="size-3.5 shrink-0 transition-transform group-data-[state=open]:rotate-180" />
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div
+              className={MARKDOWN_CLASS + ' max-h-48 overflow-auto'}
+              dangerouslySetInnerHTML={{ __html: state.reasoningHtml }}
+            />
+          </CollapsibleContent>
+        </Collapsible>
+      ) : null}
+      {state.renderedThinkSplit.think ? (
+        <Collapsible defaultOpen={false} className="group shrink-0 border-b border-border">
+          <CollapsibleTrigger className="flex w-full items-center justify-between px-3 py-2 text-left text-xs font-medium text-muted-foreground hover:bg-muted/50 nodrag nopan">
+            Thinking
+            <ChevronDown className="size-3.5 shrink-0 transition-transform group-data-[state=open]:rotate-180" />
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div
+              className={MARKDOWN_CLASS + ' max-h-48 overflow-auto'}
+              dangerouslySetInnerHTML={{ __html: state.renderedThinkSplit.think }}
+            />
+          </CollapsibleContent>
+        </Collapsible>
+      ) : null}
+      <div
+        className={MARKDOWN_MAIN_CLASS}
+        dangerouslySetInnerHTML={{ __html: state.renderedThinkSplit.main }}
+      />
+    </div>
+  )
+}