4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:Tdea,"use client" import * as React from "react" import { Composer, ComposerSubmit, ComposerTextarea, ComposerToolbar, } from "@/registry/seam/ui/composer" import { Conversation, ConversationContent, ConversationScrollButton, } from "@/registry/seam/ui/conversation" import { Message, MessageAvatar, MessageContent, } from "@/registry/seam/ui/message" import { Response } from "@/registry/seam/ui/response" type ChatMessage = { id: number; from: "user" | "assistant"; text: string } const REPLY = `Good question. A few notes: - **springs** carry velocity, so interruptions redirect smoothly - **depth** presses controls into the surface and floats overlays up - **reduced motion** swaps movement for opacity — never a dead UI That is the whole seam idea in three lines.` let nextId = 0 // A complete v0 chat: composer + conversation + message + response, wired to a // fake streaming backend so the whole loop is visible. export default function ChatDemo() { const [messages, setMessages] = React.useState([ { id: nextId++, from: "assistant", text: "Ask me about seamui's motion." }, ]) const [value, setValue] = React.useState("") const [status, setStatus] = React.useState<"ready" | "streaming">("ready") const timers = React.useRef[]>([]) const stop = () => { timers.current.forEach(clearInterval) timers.current = [] setStatus("ready") } const submit = (e: React.FormEvent) => { e.preventDefault() const text = value.trim() if (!text || status === "streaming") return setValue("") const replyId = nextId++ setMessages((prev) => [ ...prev, { id: nextId++, from: "user", text }, { id: replyId, from: "assistant", text: "" }, ]) setStatus("streaming") const tokens = REPLY.split(/(\s+)/) let i = 0 const id = setInterval(() => { i++ const partial = tokens.slice(0, i).join("") setMessages((prev) => prev.map((m) => (m.id === replyId ? { ...m, text: partial } : m)) ) if (i >= tokens.length) { clearInterval(id) timers.current = timers.current.filter((t) => t !== id) setStatus("ready") } }, 55) timers.current.push(id) } return (

{messages.map((m) => ( {m.from === "assistant" && } {m.from === "assistant" ? ( m.text ? ( {m.text} ) : ( … ) ) : ( m.text )} ))}

setValue(e.target.value)} placeholder="Ask anything…" />

) } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4d",null,{"namespace":"@seamui","registryDependencies":["https://seamui.dev/r/composer.json","https://seamui.dev/r/conversation.json","https://seamui.dev/r/message.json","https://seamui.dev/r/response.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"registry/seam/examples/chat-demo.tsx","content":"$4f","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]