2c: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"],""] 2d: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"] 2e: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"] 2f: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"] 30:T196b,"use client"; import * as React from "react"; import { Avatar, AvatarFallback, AvatarGradient, AvatarImage } from "@/components/ui/avatar"; import { Message, MessageAvatar, MessageContent, MessageFooter, MessageHeader, } from "@/components/ui/message"; import { TextShimmer } from "@/components/ui/text-shimmer"; import { cn } from "@/lib/utils"; import { AiMarkdown } from "../ai-markdown/ai-markdown"; export type ChatRole = "user" | "assistant"; export type ChatAvatar = { src?: string; /** Initials shown when there is no image. */ fallback?: string; alt?: string; }; const RoleContext = React.createContext("assistant"); export type ChatMessageProps = Omit, "content" | "children"> & { role?: ChatRole; /** Display name in the header. */ name?: string; /** Avatar image or initials; omit or pass false for none. */ avatar?: ChatAvatar | false; /** Shown beside the name, e.g. "10:42". */ timestamp?: string; /** Machine-readable value for the `` element. */ dateTime?: string; /** Message text. Assistant messages render as markdown. */ content?: string; /** Force markdown on or off; defaults to on for assistant, off for user. */ markdown?: boolean; /** Show the shimmer line instead of the content. */ loading?: boolean; loadingLabel?: string; /** Fade new words in while the answer streams. */ streaming?: boolean; /** Rendered in the footer, usually ``. */ actions?: React.ReactNode; /** Compose the parts yourself; the shorthand props above are ignored. */ children?: React.ReactNode; }; function ChatMessage({ role = "assistant", name, avatar, timestamp, dateTime, content, markdown, loading = false, loadingLabel, streaming = false, actions, children, className, ...props }: ChatMessageProps) { return ( {children ?? ( <> {avatar ? : null} {name || timestamp ? : null} {loading ? ( ) : (markdown ?? role === "assistant") ? ( {content ?? ""} ) : (

{content}

)} {actions ? {actions} : null} )} ); } function initialsOf(name?: string) { const words = name?.trim().split(/\s+/).filter(Boolean); if (!words?.length) return undefined; return (words.length > 1 ? words[0][0] + words[1][0] : words[0][0]).toUpperCase(); } function ChatMessageAvatar({ src, fallback, alt, name, className, }: ChatAvatar & { name?: string; className?: string }) { const role = React.useContext(RoleContext); const initials = fallback ?? initialsOf(name) ?? (role === "user" ? "Y" : "AI"); return ( {src ? : null} {role === "assistant" ? ( {initials} ) : ( {initials} )} ); } function ChatMessageContent({ className, ...props }: React.ComponentProps<"div">) { const role = React.useContext(RoleContext); return ( ); } function ChatMessageHeader({ name, timestamp, dateTime, className, children, ...props }: React.ComponentProps<"div"> & { name?: string; timestamp?: string; dateTime?: string }) { const role = React.useContext(RoleContext); return ( {children ?? ( <> {name ? {name} : null} {timestamp ? ( {timestamp} ) : null} )} ); } function ChatMessageBody({ className, ...props }: React.ComponentProps<"div">) { const role = React.useContext(RoleContext); return (

); } function ChatMessageFooter({ className, ...props }: React.ComponentProps<"div">) { return ; } /** One shimmer line for a message that has not started streaming yet. */ function ChatMessageLoading({ label = "Thinking", className }: { label?: string; className?: string }) { return (

{`${label}…`} {`${label}…`}

); } export { ChatMessage, ChatMessageAvatar, ChatMessageContent, ChatMessageHeader, ChatMessageBody, ChatMessageFooter, ChatMessageLoading, }; 31:T2660,"use client"; /* react-markdown passes a `node` prop to every component; it is dropped before spreading onto the DOM. */ /* eslint-disable @typescript-eslint/no-unused-vars */ import * as React from "react"; import ReactMarkdown, { type Components } from "react-markdown"; import remarkGfm from "remark-gfm"; import { IconExternalLink } from "@tabler/icons-react"; import { StreamingText } from "@/components/ui/streaming-text"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { cn } from "@/lib/utils"; import { AiCodeBlock, type AiCodeLanguage } from "../ai-code-block/ai-code-block"; const LANGS: Record = { ts: "ts", typescript: "ts", tsx: "tsx", js: "js", javascript: "js", jsx: "jsx", sh: "sh", bash: "sh", shell: "sh", zsh: "sh", json: "json", }; /** * Split markdown into top-level blocks at blank lines, never inside a fenced code * block, and keep loose list items together. Each block is rendered (and memoized) * on its own, so while text streams in only the last block re-renders. */ export function splitMarkdownBlocks(source: string): string[] { const lines = source.split("\n"); const blocks: string[] = []; let current: string[] = []; let fence: string | null = null; const flush = () => { if (current.length) blocks.push(current.join("\n")); current = []; }; for (const line of lines) { const mark = /^\s{0,3}(`{3,}|~{3,})/.exec(line)?.[1]; if (mark) { if (fence === null) fence = mark[0]; else if (mark[0] === fence) fence = null; } if (fence === null && !mark && line.trim() === "") { flush(); continue; } current.push(line); } flush(); // Re-join list continuations so loose lists keep their numbering. const isItem = (b: string) => /^\s*([-*+]|\d+[.)])\s/.test(b); const isIndented = (b: string) => /^(\s{2,}|\t)\S/.test(b); const merged: string[] = []; for (const block of blocks) { const prev = merged[merged.length - 1]; if (prev !== undefined && isItem(prev) && (isItem(block) || isIndented(block))) { merged[merged.length - 1] = `${prev}\n\n${block}`; } else merged.push(block); } return merged; } const StreamCtx = React.createContext(false); /** Wraps plain string children in Kobra StreamingText while streaming. */ function Words({ children }: { children?: React.ReactNode }) { const streaming = React.useContext(StreamCtx); if (!streaming) return <>{children}; return ( <> {React.Children.map(children, (child) => typeof child === "string" ? {child} : child, )} ); } type NodeProps = React.ComponentProps & { node?: unknown }; const components: Components = { h1: ({ node: _n, children, ...p }: NodeProps<"h1">) => (

{children}

), h2: ({ node: _n, children, ...p }: NodeProps<"h2">) => (

{children}

), h3: ({ node: _n, children, ...p }: NodeProps<"h3">) => (

{children}

), h4: ({ node: _n, children, ...p }: NodeProps<"h4">) => (

{children}

), h5: ({ node: _n, children, ...p }: NodeProps<"h5">) => (

{children}

), h6: ({ node: _n, children, ...p }: NodeProps<"h6">) => (

{children}

), p: ({ node: _n, children, ...p }: NodeProps<"p">) => (

{children}

), strong: ({ node: _n, ...p }: NodeProps<"strong">) => , em: ({ node: _n, ...p }: NodeProps<"em">) => , del: ({ node: _n, ...p }: NodeProps<"del">) => , a: ({ node: _n, children, href, ...p }: NodeProps<"a">) => { const external = typeof href === "string" && /^https?:/.test(href); return ( {children} {external ? : null} ); }, ul: ({ node: _n, className, ...p }: NodeProps<"ul">) => (
), ol: ({ node: _n, ...p }: NodeProps<"ol">) => (
), li: ({ node: _n, children, className, ...p }: NodeProps<"li">) => (
ol]:my-1 [&>p]:my-0 [&>ul]:my-1", className?.includes("task-list-item") && "ps-0")}> {children}
), input: ({ node: _n, type, checked, ...p }: NodeProps<"input">) => type === "checkbox" ? ( {checked ? ( ) : null} ) : ( ), blockquote: ({ node: _n, ...p }: NodeProps<"blockquote">) => (
), hr: ({ node: _n, ...p }: NodeProps<"hr">) =>
, table: ({ node: _n, children }: NodeProps<"table">) => (
{children}

), thead: ({ node: _n, children }: NodeProps<"thead">) => {children}, tbody: ({ node: _n, children }: NodeProps<"tbody">) => {children}, tr: ({ node: _n, children }: NodeProps<"tr">) => {children}, th: ({ node: _n, children, style, ...p }: NodeProps<"th">) => ( {children} ), td: ({ node: _n, children, style, ...p }: NodeProps<"td">) => ( {children} ), code: ({ node: _n, className, children, ...p }: NodeProps<"code">) => ( {children} ), pre: ({ node: _n, children }: NodeProps<"pre">) => { const child = React.Children.toArray(children)[0] as React.ReactElement<{ className?: string; children?: React.ReactNode }> | undefined; const lang = /language-([\w-]+)/.exec(child?.props?.className ?? "")?.[1]?.toLowerCase(); const text = String(child?.props?.children ?? "").replace(/\n$/, ""); return (

); }, }; type BlockProps = { source: string; streaming: boolean }; const MarkdownBlock = React.memo( function MarkdownBlock({ source, streaming }: BlockProps) { return ( {source} ); }, (a, b) => a.source === b.source && a.streaming === b.streaming, ); export type AiMarkdownProps = Omit, "children"> & { /** Markdown source. Pass the growing string while a response streams in. */ children: string; /** Fade new words in with Kobra StreamingText and keep finished blocks untouched. */ streaming?: boolean; }; function AiMarkdown({ children, streaming = false, className, ...props }: AiMarkdownProps) { const blocks = React.useMemo(() => splitMarkdownBlocks(children), [children]); return (
{blocks.map((block, index) => ( ))}
); } export { AiMarkdown }; 32:T265b,"use client"; import * as React from "react"; import { IconCode, IconTerminal2, IconTextWrap } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { CopyCheck, useReceipt } from "@/components/ui/copy-check"; import { INK } from "@/components/ui/code-block"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { highlightCode, type CodeLanguage } from "@/lib/highlight-code"; import { cn } from "@/lib/utils"; /** Languages the block labels. `json` reuses the JS grammar; `text` is unhighlighted. */ export type AiCodeLanguage = CodeLanguage | "json" | "text"; const GRAMMAR: Record = { ts: "ts", tsx: "tsx", js: "js", jsx: "jsx", sh: "sh", json: "js", text: "sh", }; const LABEL: Record = { ts: "TypeScript", tsx: "TSX", js: "JavaScript", jsx: "JSX", sh: "Shell", json: "JSON", text: "Text", }; type Ctx = { code: string; language: AiCodeLanguage; filename?: string; wrap: boolean; setWrap: (next: boolean) => void; lineNumbers: boolean; maxHeight?: number; }; const AiCodeBlockContext = React.createContext(null); function useAiCodeBlock(part: string) { const ctx = React.useContext(AiCodeBlockContext); if (!ctx) throw new Error(`${part} must be used inside `); return ctx; } export type AiCodeBlockProps = Omit, "children"> & { code: string; language?: AiCodeLanguage; /** Shown in the header instead of the language label. */ filename?: string; lineNumbers?: boolean; /** Soft-wrap long lines. Controlled with `onWrapChange`, or uncontrolled with `defaultWrap`. */ wrap?: boolean; defaultWrap?: boolean; onWrapChange?: (wrap: boolean) => void; /** Render the wrap toggle in the header. */ wrapToggle?: boolean; /** `default` has a header bar; `bare` drops it and floats the copy action on hover or focus. */ variant?: "default" | "bare"; /** Cap the body height in px; it scrolls past that. */ maxHeight?: number; /** Compose your own parts; omit for the default header plus body. */ children?: React.ReactNode; }; function AiCodeBlock({ code, language = "ts", filename, lineNumbers = false, wrap: wrapProp, defaultWrap = false, onWrapChange, wrapToggle = false, variant = "default", maxHeight, children, className, ...props }: AiCodeBlockProps) { const [inner, setInner] = React.useState(defaultWrap); const wrap = wrapProp ?? inner; const setWrap = React.useCallback( (next: boolean) => { if (wrapProp === undefined) setInner(next); onWrapChange?.(next); }, [wrapProp, onWrapChange], ); const ctx = React.useMemo( () => ({ code, language, filename, wrap, setWrap, lineNumbers, maxHeight }), [code, language, filename, wrap, setWrap, lineNumbers, maxHeight], ); return (
{children ?? ( <> {variant === "default" ? ( {wrapToggle ? : null} ) : ( {wrapToggle ? : null} )} )}
); } function AiCodeBlockHeader({ className, ...props }: React.ComponentProps<"figcaption">) { return (
); } /** Language icon plus filename (or the language name when no filename is given). */ function AiCodeBlockLabel({ className, children, ...props }: React.ComponentProps<"span">) { const { language, filename } = useAiCodeBlock("AiCodeBlockLabel"); const Glyph = language === "sh" ? IconTerminal2 : IconCode; return ( {children ?? ( <> {filename ? {filename} : null} {LABEL[language]} )} ); } function AiCodeBlockActions({ floating = false, className, ...props }: React.ComponentProps<"div"> & { floating?: boolean }) { return (
); } function AiCodeBlockCopy({ className, ...props }: Omit, "children">) { const { code, filename } = useAiCodeBlock("AiCodeBlockCopy"); const [copied, showCopied] = useReceipt(); const copy = async () => { try { await navigator.clipboard.writeText(code); } catch { return; } showCopied(); }; return ( } /> {copied ? "Copied" : "Copy"} ); } function AiCodeBlockWrapToggle({ className, ...props }: Omit, "children">) { const { wrap, setWrap } = useAiCodeBlock("AiCodeBlockWrapToggle"); return ( setWrap(!wrap)} className={cn("text-muted-foreground hover:text-foreground aria-pressed:text-foreground aria-pressed:before:bg-foreground/7", className)} {...props} > } /> {wrap ? "Unwrap lines" : "Wrap lines"} ); } function AiCodeBlockContent({ className, ...props }: React.ComponentProps<"div">) { const { code, language, wrap, lineNumbers, maxHeight, filename } = useAiCodeBlock("AiCodeBlockContent"); const lines = React.useMemo(() => highlightCode(code.replace(/\n$/, ""), GRAMMAR[language]), [code, language]); const digits = String(lines.length).length; return (

{lines.map((runs, number) => ( {lineNumbers ? ( {number + 1} ) : ( )} {runs.map((run, index) => ( {run.text} ))} ))}

); } export { AiCodeBlock, AiCodeBlockHeader, AiCodeBlockLabel, AiCodeBlockActions, AiCodeBlockCopy, AiCodeBlockWrapToggle, AiCodeBlockContent, }; 33:T104f,"use client"; import { useEffect, useState } from "react"; import { MessageGroup } from "@/components/ui/message"; import { Button } from "@/components/ui/button"; import { ChatMessage, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageFooter, ChatMessageHeader, } from "./chat-message"; import { ChatMessageActions } from "../chat-message-actions/chat-message-actions"; import { chunkWords, richAnswerMarkdown, sampleTimes, shortAnswer, userPrompt } from "../_fixtures-b"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; const chunks = chunkWords(richAnswerMarkdown, 2); function LoadingToStreaming() { const [run, setRun] = useState(0); return setRun((r) => r + 1)} />; } function LoadingRun({ onReplay }: { onReplay: () => void }) { const [phase, setPhase] = useState<"loading" | "streaming" | "done">("loading"); const [count, setCount] = useState(0); useEffect(() => { const start = window.setTimeout(() => setPhase("streaming"), 1400); return () => window.clearTimeout(start); }, []); useEffect(() => { if (phase !== "streaming") return; const id = window.setInterval(() => { setCount((c) => { if (c + 1 >= chunks.length) { window.clearInterval(id); setPhase("done"); } return c + 1; }); }, 50); return () => window.clearInterval(id); }, [phase]); return (

: undefined} />
); } const SURFACE = "min-w-0 rounded-xl bg-card p-4 text-card-foreground ring-1 ring-foreground/10"; export function ChatMessageDemo() { return (
} />

{shortAnswer}
); } export default ChatMessageDemo; 34:T778,import type { BlockMeta } from "../../../lib/block-meta"; export const chatMessageMeta: BlockMeta = { slug: "chat-message", title: "Chat message", description: "A chat turn on the Kobra Message with user and assistant layouts, avatar, timestamp, markdown, a loading shimmer and an actions slot.", group: "ai", kobraDeps: ["avatar", "button", "code-block", "copy-check", "message", "streaming-text", "table", "text-shimmer", "tooltip"], files: [ "blocks/ai/chat-message/chat-message.tsx", "blocks/ai/ai-markdown/ai-markdown.tsx", "blocks/ai/ai-code-block/ai-code-block.tsx", ], props: [ { name: "role", type: "'user' | 'assistant'", default: "'assistant'", description: "User is an end-aligned bubble; assistant is open text with markdown." }, { name: "name", type: "string", description: "Display name in the header." }, { name: "avatar", type: "{ src?, fallback?, alt? } | false", description: "Avatar image or initials; omit for none." }, { name: "timestamp / dateTime", type: "string", description: "Label and machine value for the time element." }, { name: "content", type: "string", description: "Message text; markdown for assistant by default." }, { name: "markdown", type: "boolean", description: "Force markdown on or off." }, { name: "loading / loadingLabel", type: "boolean / string", default: "false / 'Thinking'", description: "Shimmer line instead of content." }, { name: "streaming", type: "boolean", default: "false", description: "Word fade for a growing answer." }, { name: "actions", type: "ReactNode", description: "Footer slot, usually ChatMessageActions." }, { name: "children", type: "ReactNode", description: "Compose ChatMessageAvatar, ChatMessageContent, ChatMessageHeader, ChatMessageBody, ChatMessageFooter, ChatMessageLoading yourself." }, ], tags: ["ai", "chat", "message", "markdown"], status: "ready", }; 23:["$","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":["$","$L2c",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":["$","$L2c",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 message"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Chat message"}],["$","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 turn on the Kobra Message with user and assistant layouts, avatar, timestamp, markdown, a loading shimmer and an actions slot."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"chat-message","group":"ai","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/ai/chat-message/chat-message.tsx","code":"$30"},{"path":"blocks/ai/ai-markdown/ai-markdown.tsx","code":"$31"},{"path":"blocks/ai/ai-code-block/ai-code-block.tsx","code":"$32"},{"path":"blocks/ai/chat-message/demo.tsx","code":"$33"},{"path":"blocks/ai/chat-message/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]