| "use client"; |
|
|
| import { useState } from "react"; |
| import { NotationHoverCard } from "@/components/tree-visualizer/NotationHoverCard"; |
| import { MathOnlyRenderer } from "@/components/tree-visualizer/RichMath"; |
| import { cn } from "@/lib/utils"; |
| import { splitTokenBlocks } from "@/lib/tree/content"; |
|
|
| interface MathRendererProps { |
| content: string; |
| className?: string; |
| compact?: boolean; |
| forceTokenOpen?: boolean; |
| allowTokenToggle?: boolean; |
| } |
|
|
| function stopNodeInteraction(event: React.SyntheticEvent) { |
| event.stopPropagation(); |
| } |
|
|
| function tokenLabel(name: string) { |
| return name.replace(/[^a-zA-Z0-9_]+/g, "_"); |
| } |
|
|
| function TokenBlob({ |
| name, |
| value, |
| raw, |
| forceOpen, |
| allowToggle = true |
| }: { |
| name: string; |
| value: string; |
| raw: string; |
| forceOpen?: boolean; |
| allowToggle?: boolean; |
| }) { |
| const [open, setOpen] = useState(false); |
| const isFinalAnswer = name === "final_answer"; |
| const isOpen = Boolean(forceOpen || open); |
|
|
| return ( |
| <div className="my-2 block min-w-0"> |
| <NotationHoverCard label={tokenLabel(name)} rendered={value} notation={raw}> |
| <button |
| type="button" |
| onPointerDown={stopNodeInteraction} |
| onMouseDown={stopNodeInteraction} |
| onClick={(event) => { |
| stopNodeInteraction(event); |
| if (!forceOpen && allowToggle) setOpen((current) => !current); |
| }} |
| className={cn( |
| "token-blob inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[11px] font-semibold shadow-sm transition", |
| isFinalAnswer |
| ? "border-claude-300 bg-claude-50 text-claude-700 hover:bg-claude-100" |
| : "border-paper-300 bg-white text-ink-600 hover:bg-paper-50" |
| )} |
| title={allowToggle || forceOpen ? (isOpen ? `Hide ${tokenLabel(name)}` : `Show ${tokenLabel(name)}`) : tokenLabel(name)} |
| > |
| <span className="h-1.5 w-1.5 rounded-full bg-current opacity-70" /> |
| {tokenLabel(name)} |
| </button> |
| </NotationHoverCard> |
| {isOpen && ( |
| <div className="token-content mt-2 block min-w-0 rounded-lg border border-paper-200 bg-white/86 px-3 py-2 text-sm leading-6 text-ink-700 shadow-sm"> |
| <MathOnlyRenderer content={value} /> |
| </div> |
| )} |
| </div> |
| ); |
| } |
|
|
| export function MathRenderer({ |
| content, |
| className, |
| compact = false, |
| forceTokenOpen = false, |
| allowTokenToggle = true |
| }: MathRendererProps) { |
| const segments = splitTokenBlocks(content || ""); |
|
|
| if (!content.trim()) { |
| return <p className={cn("text-sm text-ink-300", className)}>No math content.</p>; |
| } |
|
|
| return ( |
| <div |
| className={cn( |
| "whitespace-pre-wrap text-sm leading-6 text-ink-700", |
| compact && "line-clamp-4", |
| className |
| )} |
| > |
| {segments.map((segment, index) => { |
| if (segment.type === "token") { |
| return ( |
| <TokenBlob |
| key={`${segment.name}-${index}`} |
| name={segment.name} |
| value={segment.value} |
| raw={segment.raw} |
| forceOpen={forceTokenOpen} |
| allowToggle={allowTokenToggle} |
| /> |
| ); |
| } |
| return <MathOnlyRenderer key={`text-${index}`} content={segment.value} />; |
| })} |
| </div> |
| ); |
| } |
|
|
