Function ThinkingProcess

apps/chat/src/components/ThinkingProcess.jsx:4–107

({ isThinking, content })

import "./styles/ThinkingProcess.css";

const ThinkingProcess = ({ isThinking, content }) => {
    const [elapsed, setElapsed] = useState(0);
    const [isOpen, setIsOpen] = useState(isThinking);
    const startTimeRef = useRef(null);
    const timerRef = useRef(null);

    useEffect(() => {
        if (isThinking) {
            // Start or resume timer
            if (!startTimeRef.current) {
                startTimeRef.current = Date.now() - elapsed * 1000;
            }

            timerRef.current = setInterval(() => {
                setElapsed((Date.now() - startTimeRef.current) / 1000);
            }, 100);

            // Auto-open when thinking starts
            setIsOpen(true);
        } else {
            // Stop timer
            if (timerRef.current) {
                clearInterval(timerRef.current);
                timerRef.current = null;
            }
            // If we were thinking and now stopped, we might want to close it or keep it open?
            // Usually it collapses after thinking is done, or stays as is.
            // The user image shows it collapsed (implied by "Thought for ...").
            // Let's default to collapsed if it's done, unless the user opened it.
            // Actually, let's keep it collapsed by default when done.
            if (elapsed > 0) {
                setIsOpen(false);
            }
        }

        return () => {
            if (timerRef.current) clearInterval(timerRef.current);
        };
    }, [isThinking]);

    // If we have content but no elapsed time (e.g. loaded from history),
    // we can't show accurate time. We'll just show "Thought".
    // Unless we save the duration in the message.
    // For now, if elapsed is 0 and not thinking, we hide the time or show a placeholder.

    const toggleOpen = () => setIsOpen(!isOpen);

    return (
        <div className={`thinking-process ${isThinking ? "thinking" : "done"}`}>
            <div className="thinking-header" onClick={toggleOpen}>
                <div className="thinking-icon-wrapper">
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"