"use client"; import * as React from "react"; import { cn } from "@kineticui/core"; import { Button } from "./button"; import { ChatMessage, useStreamedText } from "./chat-message"; import { ModelSelector } from "./model-selector"; import { PromptBox } from "./prompt-box"; import { Sources } from "./citations"; import { ThinkingBlock } from "./thinking-block"; import { ToolCall } from "./tool-call"; import { UsageMeter } from "./usage-meter"; import { EditIcon, SearchIcon, SparkleIcon, BoltIcon } from "@kineticui/icons"; const threads = [ { id: "1", title: "Launch email for v2", time: "Today" }, { id: "2", title: "Explain spring physics", time: "Today" }, { id: "3", title: "Refactor DataTable sorting", time: "Yesterday" }, { id: "4", title: "Pricing page copy", time: "Nov 10" }, { id: "5", title: "SQL for weekly retention", time: "Nov 8" }, ]; const reply = `Here's a draft you can paste straight into your email tool: **Subject:** Kinetic UI 2.0 is here Hi there, We just shipped **120 components** and a new set of **AI blocks**. Everything installs from npm or copies into your app with one command. - Chat, agent plans and tool calls - Live cursors and comments - Charts with zero dependencies Reply to this email if you'd like a walkthrough.`; /** ChatGPT-style workspace: thread list, streaming conversation with reasoning and tool calls, composer and usage. */ export function AiWorkspace() { const [active, setActive] = React.useState("1"); const [messages, setMessages] = React.useState<{ id: number; q: string }[]>([{ id: 0, q: "Write a short launch email for Kinetic UI 2.0" }]); const [streaming, setStreaming] = React.useState(true); const { text, done } = useStreamedText(reply, { speed: 60, enabled: streaming }); React.useEffect(() => { if (done) setStreaming(false); }, [done]); const last = messages.at(-1)!; return (

}, { id: "fast", name: "Kinetic Lite", description: "Fastest answers", intelligence: 3, speed: 5, icon: }, ]} /> {threads.find((t) => t.id === active)?.title ?? "New chat"}

{messages.length === 0 ? (

What are we building today?

) : ( messages.map((m) => ( Short, scannable, one clear call to action. Lead with the number. } meta="0.4s" /> } after={m.id !== last.id || !streaming ? : null} onRetry={() => setStreaming(true)} onFeedback={() => {}} /> )) )}

setStreaming(false)} onSubmit={(q) => { setMessages((ms) => [...ms, { id: ms.length ? ms.at(-1)!.id + 1 : 0, q }]); setStreaming(true); }} suggestions={messages.length ? undefined : ["Draft a launch email", "Summarise this week", "Write SQL for retention"]} onAttach={(files) => files.map((f) => ({ id: f.name + Date.now(), name: f.name, size: `${Math.round(f.size / 1024)} KB` }))} />

Kinetic can make mistakes. Check important info.

); }

AI Workspace

Installation