Thinking.tsx (1568B)
1 import { useState } from "react"; 2 3 interface ThinkingProps { 4 content: string; 5 } 6 7 export function Thinking({ content }: ThinkingProps) { 8 const [expanded, setExpanded] = useState(false); 9 10 return ( 11 <div className="my-1 rounded-lg border border-gray-700/50 bg-gray-900/30 text-sm"> 12 <button 13 type="button" 14 onClick={() => setExpanded(!expanded)} 15 className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-gray-800/30 transition-colors text-gray-400" 16 > 17 <svg 18 className="h-4 w-4" 19 fill="none" 20 viewBox="0 0 24 24" 21 stroke="currentColor" 22 strokeWidth={2} 23 > 24 <path 25 strokeLinecap="round" 26 strokeLinejoin="round" 27 d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" 28 /> 29 </svg> 30 <span className="text-xs font-medium">Thinking</span> 31 <svg 32 className={`ml-auto h-3 w-3 transition-transform ${expanded ? "rotate-180" : ""}`} 33 fill="none" 34 viewBox="0 0 24 24" 35 stroke="currentColor" 36 strokeWidth={2} 37 > 38 <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" /> 39 </svg> 40 </button> 41 42 {expanded && ( 43 <div className="border-t border-gray-700/50 px-3 py-2 text-gray-400"> 44 {content} 45 </div> 46 )} 47 </div> 48 ); 49 }