"use client"; import { useState, useCallback, useRef } from "react"; import { ChatThread, StreamingText, PromptBox, FeedbackBar, CitationInline, SourceCard, ConfidenceBadge, MarkdownRenderer, StatusIndicator, } from "@arc-lo/ui"; /* ─── Source data ────────────────────────────────────────────────── */ const SOURCES = [ { title: "Attention Is All You Need", url: "https://arxiv.org/abs/1706.03762", content: "We propose a new simple network architecture, the Transformer, based solely on attention mechanisms, dispensing with recurrence and convolutions entirely.", relevance: 0.95, }, { title: "Long Short-Term Memory", url: "https://www.bioinf.jku.at/publications/older/2604.pdf", content: "LSTM networks introduce a gating mechanism to control the flow of information, addressing the vanishing gradient problem inherent in standard RNNs.", relevance: 0.82, }, { title: "Sequence to Sequence Learning with Neural Networks", url: "https://arxiv.org/abs/1409.3215", content: "We present a general end-to-end approach to sequence learning using a multilayered LSTM to map the input sequence to a fixed-length vector.", relevance: 0.74, }, ]; /* ─── Canned response ───────────────────────────────────────────── */ const RESPONSE_MD = `## Transformers vs RNNs The key differences between transformers and RNNs come down to **architecture**, **parallelism**, and **long-range dependencies**. ### Architecture Transformers rely entirely on self-attention mechanisms to compute representations of input sequences, eliminating the need for recurrence altogether [1]. RNNs, by contrast, process tokens sequentially, maintaining a hidden state that is updated at each time step [2]. ### Parallelism Because transformers process all positions simultaneously through attention, they are highly parallelizable and train significantly faster on modern hardware [1]. RNNs must process tokens one at a time, creating a sequential bottleneck that limits training speed [3]. ### Handling Long-Range Dependencies Standard RNNs struggle with long-range dependencies due to vanishing gradients. LSTMs partially address this with gating mechanisms [2], but transformers handle arbitrarily long dependencies through direct attention connections between any two positions [1]. ### Summary - **Transformers**: parallel, scale well, excel at long-range dependencies - **RNNs/LSTMs**: sequential, simpler for short sequences, well-understood gating [2] [3]`; /* ─── Types ─────────────────────────────────────────────────────── */ interface Message { id: number; role: "user" | "assistant"; content: string; streaming: boolean; showSources?: boolean; } /* ─── Component ─────────────────────────────────────────────────── */ export function ResearchAssistantExample() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const [isThinking, setIsThinking] = useState(false); const [retrievingSources, setRetrievingSources] = useState(false); 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); setRetrievingSources(true); // Phase 1: Simulate source retrieval setTimeout(() => { setRetrievingSources(false); // Phase 2: Show streaming assistant response with sources const assistantMsg: Message = { id: nextId.current++, role: "assistant", content: RESPONSE_MD, streaming: true, showSources: true, }; setMessages((prev) => [...prev, assistantMsg]); setIsThinking(false); }, 1400); }, [isThinking], ); 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 */} {isEmpty && !isThinking && (

Research Assistant

Ask a question and I will retrieve relevant sources, cite them inline, and indicate my confidence.

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

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

{/* Retrieved sources */} {msg.showSources && (

Retrieved Sources

{SOURCES.map((src, i) => ( ))}

)} {/* Streaming or static response */} {msg.streaming ? ( markDone(msg.id)} >

) : ( <> {/* Inline citation legend */}

{SOURCES.map((src, i) => ( ))}

)}

), )} {/* Retrieving sources indicator */} {retrievingSources && (

)} {/* Thinking indicator (after sources retrieved) */} {isThinking && !retrievingSources && (

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

Enter to send

); }