'use client'; import { useEffect, useRef, useState, type RefObject } from 'react'; import { Box } from '@chakra-ui/react'; import { keyframes } from '@emotion/react'; import { marked, Marked } from 'marked'; import DOMPurify from 'dompurify'; import { useChatStore } from '../_store/useChatStore'; import { ChatMessage } from './ChatMessage'; import { TradeLockerSpinner } from './TradeLockerSpinner'; // marked is regex-based (no AST backtracking) — configure once at module level marked.use({ gfm: true, breaks: false }); // Streaming renderer: suppress tables so partial pipe/dash syntax never shows mid-stream. // The finalized message renders the full table once streaming completes. const streamingMarked = new Marked({ gfm: true, breaks: false }); streamingMarked.use({ renderer: { table: () => '' } }); const pulse = keyframes` 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } `; // Subscribes directly to the store and mutates innerHTML — no React re-renders per token. function StreamingContent({ bottomRef }: { bottomRef: RefObject }) { const divRef = useRef(null); useEffect(() => { const update = (streamingText: string) => { if (!divRef.current) return; divRef.current.innerHTML = DOMPurify.sanitize( streamingMarked.parse(streamingText) as string ); if (streamingText) { bottomRef.current?.scrollIntoView({ behavior: 'instant' as ScrollBehavior }); } }; update(useChatStore.getState().streamingText); const unsub = useChatStore.subscribe((state, prev) => { if (state.streamingText === prev.streamingText) return; update(state.streamingText); }); return unsub; }, [bottomRef]); return

; } function MessagesList({ bottomRef }: { bottomRef: RefObject }) { const messages = useChatStore((s) => s.messages); useEffect(() => { bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages, bottomRef]); const lastSubstantiveIdx = messages.reduce( (acc, m, i) => (m.type === 'user' || m.type === 'assistant' ? i : acc), -1, ); return ( <> {messages.map((msg, idx) => ( ))} ); } function TypewriterText({ text, speed = 10 }: { text: string; speed?: number }) { const [displayed, setDisplayed] = useState(''); useEffect(() => { setDisplayed(''); let i = 0; const interval = setInterval(() => { i++; setDisplayed(text.slice(0, i)); if (i >= text.length) clearInterval(interval); }, speed); return () => clearInterval(interval); }, [text, speed]); return <>{displayed}; } function StepsLog({ bottomRef }: { bottomRef: RefObject }) { const steps = useChatStore((s) => s.steps); const stepCount = steps.length; useEffect(() => { if (stepCount) { bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); } }, [stepCount, bottomRef]); if (!steps.length) return null; return ( {steps.map((step) => ( {step.done ? ( ) : ( )} {step.done ? step.label : } {step.done && step.exitText && ( {step.exitText} )} ))} ); } const streamingBoxSx = { '& p': { mb: 2 }, '& p:last-child': { mb: 0 }, '& ul, & ol': { pl: 5, my: 2 }, '& li': { mb: 1 }, '& strong': { color: 'white' }, '& a': { color: 'blue.300', textDecoration: 'underline' }, '& code': { bg: 'gray.700', px: 1, borderRadius: 'sm', fontSize: 'sm' }, '& pre': { bg: 'gray.900', p: 3, borderRadius: 'md', overflowX: 'auto', my: 2 }, '& blockquote': { borderLeft: '3px solid', borderColor: 'gray.500', pl: 3, color: 'gray.400' }, }; function StreamingBubble({ bottomRef }: { bottomRef: RefObject }) { // Only re-renders when streaming starts or stops — not on every token const isStreaming = useChatStore((s) => Boolean(s.streamingText)); if (!isStreaming) return null; return ( ); } export function ChatMessages() { const bottomRef = useRef(null); const historyLoading = useChatStore((s) => s.historyLoading); return (

{historyLoading && ( Loading... )} ); }