"use client"; import { useState, useCallback, useRef } from "react"; import { ChatThread, StreamingText, FeedbackBar, PromptBox, SuggestTopics, TopicCard, StatusIndicator, } from "@arc-lo/ui"; /* ─── Hardcoded responses ────────────────────────────────────────── */ const RESPONSES = [ "The transformer architecture revolutionized NLP by introducing self-attention mechanisms. Unlike RNNs, transformers process all tokens in parallel, enabling much faster training.\n\nThis breakthrough led to models like GPT, BERT, and Claude.", "Here are three key principles for AI product design:\n\n1. **Design for uncertainty** — AI outputs are non-deterministic\n2. **Make feedback loops first-class** — thumbs up/down teach the product\n3. **Stream everything** — waiting for a wall of text is terrible UX", "Machine learning models learn patterns from data through iterative optimization. The training process involves:\n\n- Forward pass: computing predictions\n- Loss calculation: measuring error\n- Backpropagation: computing gradients\n- Parameter update: adjusting weights", ]; /* ─── Types ──────────────────────────────────────────────────────── */ interface Message { id: number; role: "user" | "assistant"; content: string; /** For assistant messages: whether it is still streaming */ streaming: boolean; } /* ─── Component ──────────────────────────────────────────────────── */ export function SimpleChatbotExample() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const [isThinking, setIsThinking] = useState(false); const responseIdx = useRef(0); const nextId = useRef(1); const handleSubmit = useCallback( (text: string) => { if (!text.trim() || isThinking) return; const userMsg: Message = { id: nextId.current++, role: "user", content: text.trim(), streaming: false, }; setMessages((prev) => [...prev, userMsg]); setInput(""); setIsThinking(true); // Simulate a short "thinking" delay then stream a response setTimeout(() => { const responseText = RESPONSES[responseIdx.current % RESPONSES.length]; responseIdx.current++; const assistantMsg: Message = { id: nextId.current++, role: "assistant", content: responseText, streaming: true, }; setMessages((prev) => [...prev, assistantMsg]); setIsThinking(false); }, 1200); }, [isThinking], ); const handleTopicSelect = useCallback( (title: string) => { handleSubmit(title); }, [handleSubmit], ); const markDone = useCallback((msgId: number) => { setMessages((prev) => prev.map((m) => (m.id === msgId ? { ...m, streaming: false } : m)), ); }, []); const isEmpty = messages.length === 0; return (

{/* ─── Chat area ──────────────────────────────────────────── */} {/* Empty state with suggested topics */} {isEmpty && (

How can I help you?

Ask a question or pick a topic below.

🧠} onSelect={handleTopicSelect} /> 🎨} onSelect={handleTopicSelect} /> 📊} onSelect={handleTopicSelect} />

)} {/* Conversation messages */} {messages.map((msg) => msg.role === "user" ? ( Y

} > {msg.content} ) : ( A } >

{msg.streaming ? ( markDone(msg.id)} > ) : ( <>

{msg.content}

)}

), )} {/* Thinking indicator */} {isThinking && (

)} {/* ─── Prompt box ─────────────────────────────────────────── */}

Enter to send

); }

Simple Chatbot

How can I help you?