"use client"; import { useState, useCallback, useRef } from "react"; import { StreamingText, FeedbackBar, PromptBox, ModelSelector, TokenUsage, ConfidenceBadge, } from "@arc-lo/ui"; import type { ModelOption, ConfidenceLevel } from "@arc-lo/ui"; /* ── Model options ──────────────────────────────────────────────────── */ const MODELS: ModelOption[] = [ { id: "claude-sonnet", name: "Claude Sonnet", description: "Fast and balanced", badge: "Fast", }, { id: "claude-opus", name: "Claude Opus", description: "Most capable reasoning", badge: "New", }, { id: "gpt-4", name: "GPT-4", description: "OpenAI flagship model", }, ]; /* ── Sample responses ───────────────────────────────────────────────── */ const RESPONSE_A = "Quantum computing leverages quantum mechanical phenomena — specifically superposition and entanglement — to process information.\n\nUnlike classical bits (0 or 1), quantum bits (qubits) can exist in a superposition of both states simultaneously. When multiple qubits are entangled, measuring one instantly constrains the others, enabling parallel exploration of solution spaces.\n\nThis gives quantum computers exponential speedup for specific problem classes: integer factorization (Shor's algorithm), unstructured search (Grover's algorithm), and quantum simulation of molecular systems.\n\nKey challenges remain: decoherence, error correction overhead, and the need for near-absolute-zero operating temperatures."; const RESPONSE_B = "Think of a regular computer like a person reading a maze — they try one path at a time until they find the exit.\n\nA quantum computer is more like pouring water into the maze. The water flows down every path at once, and the first stream to reach the exit reveals the solution.\n\nThis works because of two special properties:\n\n1. **Superposition** — Imagine a coin spinning in the air. It's not heads or tails yet — it's both possibilities at once. Quantum bits work the same way.\n\n2. **Entanglement** — Now imagine two spinning coins that are magically linked. No matter how far apart they are, when one lands on heads, the other instantly lands on tails.\n\nThese properties let quantum computers explore many solutions simultaneously, making them incredibly powerful for certain puzzles — like designing new medicines or cracking codes — that would take regular computers millions of years."; /* ── Types ──────────────────────────────────────────────────────────── */ interface PanelState { modelId: string; response: string; streaming: boolean; done: boolean; confidence: ConfidenceLevel; inputTokens: number; outputTokens: number; cost: number; } /* ── Component ──────────────────────────────────────────────────────── */ export function MultiModelPlaygroundExample() { const [prompt, setPrompt] = useState("Explain quantum computing in simple terms"); const [isComparing, setIsComparing] = useState(false); const [panelA, setPanelA] = useState({ modelId: "claude-sonnet", response: "", streaming: false, done: false, confidence: "high", inputTokens: 0, outputTokens: 0, cost: 0, }); const [panelB, setPanelB] = useState({ modelId: "claude-opus", response: "", streaming: false, done: false, confidence: "high", inputTokens: 0, outputTokens: 0, cost: 0, }); const timerA = useRef | null>(null); const timerB = useRef | null>(null); const handleCompare = useCallback(() => { if (!prompt.trim() || isComparing) return; setIsComparing(true); // Reset panels and start streaming after a brief delay setPanelA((p) => ({ ...p, response: "", streaming: false, done: false, inputTokens: 0, outputTokens: 0, cost: 0, })); setPanelB((p) => ({ ...p, response: "", streaming: false, done: false, inputTokens: 0, outputTokens: 0, cost: 0, })); // Model A starts after 400ms (faster model) timerA.current = setTimeout(() => { setPanelA((p) => ({ ...p, response: RESPONSE_A, streaming: true, confidence: "high", inputTokens: 142, outputTokens: 287, cost: 0.0043, })); }, 400); // Model B starts after 900ms (slower model) timerB.current = setTimeout(() => { setPanelB((p) => ({ ...p, response: RESPONSE_B, streaming: true, confidence: "medium", inputTokens: 142, outputTokens: 341, cost: 0.0118, })); }, 900); }, [prompt, isComparing]); const handleDoneA = useCallback(() => { setPanelA((p) => ({ ...p, streaming: false, done: true })); // Check if B is also done setPanelB((prev) => { if (prev.done) setIsComparing(false); return prev; }); }, []); const handleDoneB = useCallback(() => { setPanelB((p) => ({ ...p, streaming: false, done: true })); // Check if A is also done setPanelA((prev) => { if (prev.done) setIsComparing(false); return prev; }); }, []); // When both panels finish streaming, stop comparing if (panelA.done && panelB.done && isComparing) { setIsComparing(false); } return (

{/* ── Prompt area ─────────────────────────────────────────── */}

Enter to compare

{/* ── Side-by-side panels ─────────────────────────────────── */}

{/* Panel A */} setPanelA((p) => ({ ...p, modelId: id }))} onStreamDone={handleDoneA} streamSpeed={16} /> {/* Panel B */} setPanelB((p) => ({ ...p, modelId: id }))} onStreamDone={handleDoneB} streamSpeed={24} isRight />

); } /* ── Model Panel ────────────────────────────────────────────────────── */ interface ModelPanelProps { label: string; panel: PanelState; onModelChange: (id: string) => void; onStreamDone: () => void; streamSpeed: number; isRight?: boolean; } function ModelPanel({ label, panel, onModelChange, onStreamDone, streamSpeed, isRight, }: ModelPanelProps) { const hasContent = panel.streaming || panel.done; return (

{/* Header */}

{label}

{/* Response area */}

{!hasContent && (

Response will appear here...

)} {panel.streaming && ( )} {panel.done && !panel.streaming && (

{panel.response}

)}

{/* Metrics row */} {hasContent && (

)}

); }

Multi-Model Playground