File size: 2,837 Bytes
f59fbe2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | import { useState } from "react";
import { IconChevronDown, IconLoader3, IconBulb } from "@tabler/icons-react";
import { cn } from "@/lib/utils";
import { Markdown } from "./Markdown";
import { useSettingsStore } from "@/stores";
interface ThinkingBlockProps {
content: string;
finished?: boolean;
compact?: boolean;
}
export function ThinkingBlock({ content, finished, compact }: ThinkingBlockProps) {
const { extensionConfig } = useSettingsStore();
const showThinkingContent = extensionConfig.showThinkingContent;
const [expanded, setExpanded] = useState(extensionConfig.showThinkingExpanded);
const isStreaming = !finished;
if (!showThinkingContent) {
// Hidden mode: static label, no interaction
return (
<div className="rounded-lg border border-zinc-200/50 bg-zinc-50/30 dark:border-zinc-800/50 dark:bg-zinc-900/10 overflow-hidden">
<div
className={cn("w-full flex items-center gap-2", compact ? "px-2 py-1.5" : "px-3 py-2")}
>
<div className="inline-flex items-center gap-2">
<IconBulb className={cn("text-zinc-500", compact ? "size-3" : "size-3.5")} />
<span className={cn("font-medium text-zinc-700 dark:text-zinc-300", compact ? "text-[0.75rem]" : "text-xs")}>Thinking</span>
{isStreaming && <IconLoader3 className={cn("text-zinc-400 ml-auto animate-spin", compact ? "size-3" : "size-3.5")} />}
</div>
</div>
</div>
);
}
// Show mode: clickable, expandable/collapsible
if (!content && !isStreaming) {
return null;
}
return (
<div className="rounded-lg border border-zinc-200/50 bg-zinc-50/30 dark:border-zinc-800/50 dark:bg-zinc-900/10 overflow-hidden">
<button
onClick={() => setExpanded(!expanded)}
className={cn("w-full flex items-center gap-2 hover:bg-zinc-100/50 dark:hover:bg-zinc-800/20 transition-colors", compact ? "px-2 py-1.5" : "px-3 py-2")}
>
<div className="inline-flex items-center gap-2">
<IconBulb className={cn("text-zinc-500", compact ? "size-3" : "size-3.5")} />
<span className={cn("font-medium text-zinc-700 dark:text-zinc-300", compact ? "text-[0.75rem]" : "text-xs")}>Thinking</span>
{isStreaming && <IconLoader3 className={cn("text-zinc-400 ml-auto animate-spin", compact ? "size-3" : "size-3.5")} />}
</div>
<IconChevronDown className={cn("text-zinc-400 ml-auto transition-transform", compact ? "size-3" : "size-3.5", expanded && "rotate-180")} />
</button>
{expanded && content && (
<Markdown
content={content}
className={cn("border-t border-zinc-200/50 dark:border-zinc-700/50", compact ? "py-2 px-2 text-[0.75rem]" : "py-3 px-2 pl-3.5 text-xs")}
enableEnrichment={finished}
/>
)}
</div>
);
}
|