spb/vquant Public MIT

1/*2 * =============================================================================3 *  VibeQuant (vquant) — AI-Powered Financial Intelligence Platform4 * -----------------------------------------------------------------------------5 *  File:      client/src/components/chat/thinking-widget.tsx6 *7 *  Author:    Simon-Pierre Boucher8 *  Contact:   contact@spboucher.ai9 *  Website:   https://www.spboucher.ai10 *  Demo:      https://www.vquant.ai11 *  License:   MIT (see LICENSE)12 *13 *  Copyright © 2026 Simon-Pierre Boucher. All rights reserved.14 * =============================================================================15 */1617import { useState, useEffect } from "react";18import { Brain, ChevronDown } from "lucide-react";1920interface ThinkingWidgetProps {21  content: string;22  isStreaming?: boolean;23}2425export function ThinkingWidget({ content, isStreaming = false }: ThinkingWidgetProps) {26  const [open, setOpen] = useState(false);2728  // Auto-expand while the model is thinking, collapse once done.29  useEffect(() => {30    setOpen(isStreaming);31  }, [isStreaming]);3233  if (!content) return null;3435  return (36    <div37      className="mb-4 rounded-xl border border-border bg-muted/30 overflow-hidden"38      data-testid="thinking-widget"39    >40      <button41        type="button"42        onClick={() => setOpen((o) => !o)}43        className="w-full flex items-center gap-2 px-4 py-2.5 text-left hover:bg-muted/50 transition-colors"44      >45        <Brain46          className={`w-4 h-4 text-violet-500 flex-shrink-0 ${isStreaming ? "animate-pulse" : ""}`}47        />48        <span className="text-sm font-medium text-foreground">49          {isStreaming ? "Reflexion en cours..." : "Raisonnement"}50        </span>51        <ChevronDown52          className={`w-4 h-4 ml-auto text-muted-foreground transition-transform ${open ? "rotate-180" : ""}`}53        />54      </button>55      {open && (56        <div className="px-4 pb-3 pt-1 border-t border-border">57          <pre className="whitespace-pre-wrap break-words text-xs text-muted-foreground font-sans leading-relaxed">58            {content}59          </pre>60        </div>61      )}62    </div>63  );64}65