Spaces:
Runtime error
Runtime error
| "use client"; | |
| import React, { useState, useEffect } from "react"; | |
| import { Brain, ChevronDown, ChevronRight, Sparkles, Clock, CheckCircle2 } from "lucide-react"; | |
| interface ThinkingBoxProps { | |
| thinking: string; | |
| isStreaming?: boolean; | |
| thinkingTimeSeconds?: number; | |
| defaultExpanded?: boolean; | |
| } | |
| export const ThinkingBox: React.FC<ThinkingBoxProps> = ({ | |
| thinking, | |
| isStreaming = false, | |
| thinkingTimeSeconds, | |
| defaultExpanded = true, | |
| }) => { | |
| const [isExpanded, setIsExpanded] = useState(defaultExpanded); | |
| const [elapsedSeconds, setElapsedSeconds] = useState(thinkingTimeSeconds || 0); | |
| useEffect(() => { | |
| let timer: NodeJS.Timeout; | |
| if (isStreaming) { | |
| const startTime = Date.now() - (elapsedSeconds * 1000); | |
| timer = setInterval(() => { | |
| setElapsedSeconds(Number(((Date.now() - startTime) / 1000).toFixed(1))); | |
| }, 100); | |
| } else if (thinkingTimeSeconds) { | |
| setElapsedSeconds(thinkingTimeSeconds); | |
| } | |
| return () => clearInterval(timer); | |
| }, [isStreaming, thinkingTimeSeconds]); | |
| if (!thinking && !isStreaming) return null; | |
| return ( | |
| <div className="mb-4 rounded-xl border border-white/[0.08] bg-black/40 overflow-hidden backdrop-blur-md transition-all duration-300"> | |
| {/* Header Button */} | |
| <button | |
| onClick={() => setIsExpanded(!isExpanded)} | |
| className="w-full flex items-center justify-between px-3.5 py-2.5 bg-white/[0.02] hover:bg-white/[0.05] transition-colors text-left group" | |
| > | |
| <div className="flex items-center gap-2.5"> | |
| <div className="relative"> | |
| <Brain | |
| className={`w-4 h-4 transition-colors ${ | |
| isStreaming ? "text-cyan-400 animate-pulse" : "text-zinc-400 group-hover:text-zinc-200" | |
| }`} | |
| /> | |
| {isStreaming && ( | |
| <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-cyan-400 animate-ping" /> | |
| )} | |
| </div> | |
| <div className="flex items-center gap-2"> | |
| <span className="text-xs font-mono font-medium text-zinc-300 group-hover:text-white transition-colors"> | |
| {isStreaming ? "Thinking Process" : "Thought Process"} | |
| </span> | |
| <span className="text-[11px] font-mono text-zinc-500 flex items-center gap-1"> | |
| <Clock className="w-3 h-3" /> | |
| {elapsedSeconds > 0 ? `${elapsedSeconds.toFixed(1)}s` : "0.8s"} | |
| </span> | |
| </div> | |
| </div> | |
| <div className="flex items-center gap-2"> | |
| {isStreaming ? ( | |
| <span className="inline-flex items-center gap-1.5 text-[10px] font-mono uppercase px-2 py-0.5 rounded-full bg-cyan-500/10 text-cyan-400 border border-cyan-500/20"> | |
| <Sparkles className="w-2.5 h-2.5 animate-spin" /> | |
| Reasoning | |
| </span> | |
| ) : ( | |
| <span className="inline-flex items-center gap-1 text-[10px] font-mono uppercase px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"> | |
| <CheckCircle2 className="w-2.5 h-2.5" /> | |
| Verified | |
| </span> | |
| )} | |
| {isExpanded ? ( | |
| <ChevronDown className="w-3.5 h-3.5 text-zinc-500 group-hover:text-zinc-300 transition-transform" /> | |
| ) : ( | |
| <ChevronRight className="w-3.5 h-3.5 text-zinc-500 group-hover:text-zinc-300 transition-transform" /> | |
| )} | |
| </div> | |
| </button> | |
| {/* Collapsible Content */} | |
| {isExpanded && ( | |
| <div className="px-4 py-3 border-t border-white/[0.04] bg-black/60 text-xs font-mono text-zinc-400 leading-relaxed space-y-1.5 overflow-x-auto"> | |
| {thinking.split("\n").map((line, idx) => { | |
| if (!line.trim()) return <div key={idx} className="h-1" />; | |
| const isStepHeader = line.match(/^(\d+\.|\[.*?\])/); | |
| return ( | |
| <div | |
| key={idx} | |
| className={`flex gap-2 ${ | |
| isStepHeader ? "text-zinc-200 font-semibold pt-1 border-t border-white/[0.03] first:border-0 first:pt-0" : "text-zinc-400 pl-4" | |
| }`} | |
| > | |
| <span>{line}</span> | |
| </div> | |
| ); | |
| })} | |
| {isStreaming && ( | |
| <div className="flex items-center gap-1.5 text-cyan-400 text-[11px] pt-1"> | |
| <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-ping" /> | |
| <span className="italic">Evaluating transformer self-attention states...</span> | |
| </div> | |
| )} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| }; | |