2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T1768,"use client"; import { Fragment, type ComponentProps, type ReactNode } from "react"; import { Conversation, ConversationBubble, ConversationContent } from "@/components/ui/conversation"; import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, } from "@/components/ui/message-scroller"; import { cn } from "@/lib/utils"; import { ChatAttachmentGroup, type ChatAttachmentFile } from "../chat-attachment/chat-attachment"; export type ChatConversationTurnData = { id: string; role: "user" | "assistant"; /** Plain text: blank lines split paragraphs, lines starting with "- " become list items. */ text: string; time?: string; attachments?: ChatAttachmentFile[]; }; export type ChatConversationProps = Omit, "children"> & { /** Keep the view pinned to the newest message while the user is at the bottom. */ autoScroll?: boolean; /** Where a fresh conversation opens. */ defaultScrollPosition?: "start" | "end" | "last-anchor"; /** Show the round scroll-to-bottom button when the user has scrolled up. */ scrollButton?: boolean; /** Accessible name of the message log. */ label?: string; children: ReactNode; }; /** * A chat transcript that sticks to the bottom as messages arrive. Give it a height (via className) * and put `ChatConversationContent` inside. Scrolling up releases the pin and brings up the button. */ export function ChatConversation({ autoScroll = true, defaultScrollPosition = "end", scrollButton = true, label = "Conversation", children, className, ...props }: ChatConversationProps) { return ( {children} {scrollButton ? : null} ); } export function ChatConversationContent({ className, ...props }: ComponentProps) { return ; } export type ChatConversationMessageProps = Omit, "role"> & { role: "user" | "assistant"; /** Display time; tapping a user bubble reveals it. */ time?: string; /** Attachments sit above a user bubble. */ attachments?: ChatAttachmentFile[]; }; /** One message: a user bubble on the end side, or assistant text on the start side. */ export function ChatConversationMessage({ role, time, attachments, children, className, ...props }: ChatConversationMessageProps) { return ( {role === "user" ? ( <> {attachments && attachments.length > 0 ? (

) : null} {children} ) : (

Assistant: {children}

)} ); } /** Plain text to paragraphs and bullet lists. Markdown rendering belongs to the chat-message block. */ export function ChatConversationText({ text }: { text: string }) { const blocks = text.split(/\n{2,}/); return ( <> {blocks.map((block, i) => { const lines = block.split("\n"); if (lines.every((l) => l.startsWith("- "))) { return (

{l.slice(2)}

); } return (

{lines.map((l, j) => ( {j > 0 ?
: null} {l} ))}

); })} ); } /** A turn from data: attachments, text, time. */ export function ChatConversationTurn({ turn, ...props }: { turn: ChatConversationTurnData } & Omit) { return ( ); } /** Designed empty state for a conversation with no messages yet. */ export function ChatConversationEmpty({ title = "Start a conversation", description = "Ask a question or pick a suggestion below.", children, className }: { title?: string; description?: string; children?: ReactNode; className?: string }) { return (

{title}

{description}

{children ?

{children}

: null}

); } export { useMessageScroller as useChatConversationScroller }; 32:T18e9,"use client"; import { IconFileSpreadsheet, IconFileText, IconFileTypePdf, IconPhoto, IconX } from "@tabler/icons-react"; import type { ComponentProps, ReactNode } from "react"; import { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, } from "@/components/ui/attachment"; import { Spinner } from "@/components/ui/spinner"; import { cn } from "@/lib/utils"; export type ChatAttachmentKind = "image" | "pdf" | "sheet" | "doc" | "text"; /** What the block needs to draw an attachment. `src` is for images only. */ export type ChatAttachmentFile = { id?: string; name: string; kind: ChatAttachmentKind; /** Bytes. */ size?: number; src?: string; }; export function formatBytes(bytes: number) { if (bytes < 1024) return `${bytes} B`; if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`; return `${(bytes / 1024 / 1024).toFixed(1)} MB`; } const KIND_LABEL: Record = { image: "Image", pdf: "PDF", sheet: "Sheet", doc: "Document", text: "Text" }; function KindIcon({ kind }: { kind: ChatAttachmentKind }) { const Icon = kind === "pdf" ? IconFileTypePdf : kind === "sheet" ? IconFileSpreadsheet : kind === "image" ? IconPhoto : IconFileText; return ; } type AttachmentState = NonNullable["state"]>; export type ChatAttachmentProps = Omit, "children" | "state" | "onClick"> & { file: ChatAttachmentFile; /** "message" is read-only (optionally openable); "composer" adds the remove button. */ variant?: "message" | "composer"; state?: AttachmentState; /** Shown instead of the size line while state is "error". */ errorText?: string; onRemove?: () => void; /** Makes the whole card a button (for example to open a preview). */ onOpen?: () => void; }; /** * One attachment: an image thumbnail or a file card, on Kobra's Attachment. `orientation="vertical"` * makes a tile, the default is a row. */ export function ChatAttachment({ file, variant = "message", state = "done", errorText = "Upload failed", orientation = "horizontal", size, onRemove, onOpen, className, ...props }: ChatAttachmentProps) { const isImage = file.kind === "image"; const busy = state === "uploading" || state === "processing"; const meta = state === "error" ? errorText : [KIND_LABEL[file.kind], file.size != null ? formatBytes(file.size) : null].filter(Boolean).join(" · "); const tile = orientation === "vertical"; return ( {isImage && file.src ? ( // eslint-disable-next-line @next/next/no-img-element

) : ( )} {busy ? ( ) : null} {file.name} {!tile || variant === "message" ? {meta} : null} {onOpen ? : null} {variant === "composer" && onRemove ? ( ) : null} ); } export type ChatAttachmentGroupProps = Omit, "children"> & { files: ChatAttachmentFile[]; variant?: "message" | "composer"; orientation?: "horizontal" | "vertical"; /** Show at most this many, then a "+N" tile. */ max?: number; size?: ComponentProps["size"]; onRemove?: (file: ChatAttachmentFile, index: number) => void; /** Rendered when `files` is empty. */ empty?: ReactNode; }; /** Several attachments in a scrolling strip (default) or a grid, with a "+N" overflow tile. */ export function ChatAttachmentGroup({ files, variant = "message", orientation = "vertical", max, size, onRemove, empty, layout = "scroll", className, ...props }: ChatAttachmentGroupProps) { if (files.length === 0) return empty ? <>{empty} : null; const shown = max != null ? files.slice(0, max) : files; const hidden = files.length - shown.length; return ( {shown.map((file, i) => (

onRemove(file, i) : undefined} />

))} {hidden > 0 ? ( +{hidden} more attachments ) : null} ); } 33:T1d47,"use client"; import { useEffect, useRef, useState } from "react"; import { Button } from "@/components/ui/button"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; import { aiConversation, aiModels, aiReplies, aiSuggestions, type ChatTurn } from "../_fixtures"; import { ChatLoader } from "../chat-loader/chat-loader"; import { PromptInput, PromptInputActions, PromptInputAttachButton, PromptInputBody, PromptInputField, PromptInputModelSelect, PromptInputSubmit, PromptInputToolbar, PromptInputTools, type PromptInputStatus, } from "../prompt-input/prompt-input"; import { PromptSuggestions } from "../prompt-suggestion/prompt-suggestion"; import { ChatConversation, ChatConversationContent, ChatConversationEmpty, ChatConversationMessage, ChatConversationTurn } from "./chat-conversation"; const nowLabel = () => new Date().toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }); /** A pretend chat backend: everything is on timers, nothing is fetched. */ function useChatSim(seed: ChatTurn[]) { const [messages, setMessages] = useState(seed); const [status, setStatus] = useState("ready"); const timers = useRef[]>([]); const replyAt = useRef(0); const uid = useRef(0); const later = (ms: number, fn: () => void) => { timers.current.push(setTimeout(fn, ms)); }; const cancel = () => { timers.current.forEach(clearTimeout); timers.current = []; }; useEffect(() => cancel, []); const streamInto = (id: string, text: string, every: number, done: () => void) => { const parts = text.split(/(\s+)/); let shown = 0; const tick = () => { shown = Math.min(parts.length, shown + 2); const slice = parts.slice(0, shown).join(""); setMessages((all) => all.map((m) => (m.id === id ? { ...m, text: slice } : m))); if (shown < parts.length) later(every, tick); else done(); }; tick(); }; const send = (text: string) => { cancel(); const id = `live-${uid.current++}`; setMessages((all) => [...all, { id: `u-${id}`, role: "user", text, time: nowLabel() }]); setStatus("submitted"); later(700, () => { setMessages((all) => [...all, { id, role: "assistant", text: "", time: nowLabel() }]); setStatus("streaming"); streamInto(id, aiReplies[replyAt.current++ % aiReplies.length], 45, () => setStatus("ready")); }); }; const stop = () => { cancel(); setStatus("ready"); }; /** Replays the whole fixture conversation: user turns appear, assistant turns stream. */ const play = () => { cancel(); setMessages([]); const step = (i: number) => { if (i >= aiConversation.length) { setStatus("ready"); return; } const turn = aiConversation[i]; if (turn.role === "user") { later(650, () => { setMessages((all) => [...all, turn]); step(i + 1); }); } else { setStatus("submitted"); later(600, () => { setMessages((all) => [...all, { ...turn, text: "" }]); setStatus("streaming"); streamInto(turn.id, turn.text, 28, () => step(i + 1)); }); } }; step(0); }; return { messages, setMessages, status, send, stop, play }; } function Transcript({ turns, status }: { turns: ChatTurn[]; status?: PromptInputStatus }) { return ( {turns.length === 0 ? : null} {turns.map((t) => (t.role === "assistant" && t.text === "" ? null : ))} {status === "submitted" ? ( ) : null} ); } function PinnedDemo() { const [turns, setTurns] = useState(aiConversation.slice(0, 6)); const next = useRef(6); return (

At the bottom it follows new messages. Scroll up and it stays put; the button brings you back.

); } function FullChat() { const chat = useChatSim(aiConversation.slice(0, 2)); return (

Or type below: replies stream word by word on a timer.

{chat.messages.length < 3 ? : null} chat.send(text)} onStop={chat.stop}>

); } export function ChatConversationDemo() { return (

); } 34:T708,import type { BlockMeta } from "../../../lib/block-meta"; export const chatConversationMeta: BlockMeta = { slug: "chat-conversation", title: "Chat conversation", description: "A chat transcript on Kobra's message scroller and conversation bubbles: it sticks to the bottom while messages stream in, lets go when the reader scrolls up, and brings back a scroll-to-bottom button. Includes a full-chat demo that streams text on a timer.", group: "ai", kobraDeps: ["message-scroller", "conversation", "attachment", "spinner"], files: [ "blocks/ai/chat-conversation/chat-conversation.tsx", "blocks/ai/chat-attachment/chat-attachment.tsx", ], props: [ { name: "autoScroll", type: "boolean", default: "true", description: "Stay pinned to the newest message while the reader is at the bottom." }, { name: "defaultScrollPosition", type: "'start' | 'end' | 'last-anchor'", default: "'end'", description: "Where the transcript opens." }, { name: "scrollButton", type: "boolean", default: "true", description: "Show the scroll-to-bottom button when scrolled up." }, { name: "label", type: "string", default: "'Conversation'", description: "Accessible name of the log." }, { name: "className", type: "string", description: "Give the root a height here (default h-96)." }, { name: "ChatConversationMessage", type: "{ role, time?, attachments?, messageId?, scrollAnchor? }", description: "One message: user bubble or assistant text." }, { name: "ChatConversationTurn", type: "{ turn }", description: "Renders a { id, role, text, time, attachments } turn." }, { name: "ChatConversationEmpty", type: "{ title?, description?, children? }", description: "Empty state." }, ], tags: ["ai", "chat", "conversation", "scroll", "stream"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#ai","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"AI"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Chat conversation"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Chat conversation"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"A chat transcript on Kobra's message scroller and conversation bubbles: it sticks to the bottom while messages stream in, lets go when the reader scrolls up, and brings back a scroll-to-bottom button. Includes a full-chat demo that streams text on a timer."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"chat-conversation","group":"ai","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/ai/chat-conversation/chat-conversation.tsx","code":"$31"},{"path":"blocks/ai/chat-attachment/chat-attachment.tsx","code":"$32"},{"path":"blocks/ai/chat-conversation/demo.tsx","code":"$33"},{"path":"blocks/ai/chat-conversation/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]