58 lines
2.8 KiB
TypeScript
58 lines
2.8 KiB
TypeScript
/**
|
|
* 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>
|
|
)
|
|
}
|