50: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"] 51: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"] 52:T10cd,'use client'; import type { ReactNode } from 'react'; import { cx } from '@/lib/creance/cx'; import { LiveRegion } from '@/lib/creance/LiveRegion'; import { Message } from '@/components/creance/message/Message'; import { MessageList } from '@/components/creance/message-list/MessageList'; import { PromptInput, type PromptInputProps } from '@/components/creance/prompt-input/PromptInput'; import { Reasoning } from '@/components/creance/reasoning/Reasoning'; import { Sources, type Source } from '@/components/creance/sources/Sources'; import { Suggestions } from '@/components/creance/suggestions/Suggestions'; import './Chat.css'; export interface ChatMessage { id: string; from: 'user' | 'assistant'; /** The message. Render markdown yourself; the kit does not parse it. */ content?: ReactNode; /** `pending` shows dots before the first word, `streaming` a caret after the last. Default `done`. */ status?: 'pending' | 'streaming' | 'done'; /** The thinking behind an assistant message, shown folded above it. */ reasoning?: { content: ReactNode; seconds?: number; thinking?: boolean }; /** What the answer is based on, listed under it. */ sources?: Source[]; /** Under a finished assistant message: copy, try again, feedback. */ actions?: ReactNode; } export interface ChatProps extends Pick { /** Oldest first. You own the list: add the person's message in `onSend`, then the agent's as it arrives. */ messages: ChatMessage[]; /** Shown above the agent's messages and used in labels. Default "Assistant". */ agentName?: string; /** Beside the agent's name, usually an Avatar. */ avatar?: ReactNode; /** Called with the text when the person sends a message or chooses a suggestion. */ onSend?: (text: string) => void; /** `working` turns Send into Stop. Default `ready`. */ status?: 'ready' | 'working'; onStop?: () => void; /** Starting points above the input. Choosing one sends it. */ suggestions?: string[]; /** Shown in place of the messages when there are none. */ empty?: ReactNode; /** After the last message, inside the scrolling list: an ApprovalPrompt, a DiffReview, a tool call. */ children?: ReactNode; /** Height of the whole chat. Default fills its container. */ height?: number | string; className?: string; } /** * A whole conversation with an agent: the messages, starting suggestions and the input. It follows new * messages until the person scrolls up, and announces each finished reply once, not every streamed word. */ export function Chat({ messages, agentName = 'Assistant', avatar, onSend, status = 'ready', onStop, suggestions, empty, children, height, className, ...prompt }: ChatProps) { const last = messages[messages.length - 1]; const replied = last?.from === 'assistant' && (last.status ?? 'done') === 'done' ? last.id : undefined; return (

{messages.length === 0 && empty ?

{empty}

: null} {messages.map((m) => ( {m.reasoning && ( {m.reasoning.content} )} {m.content} {m.sources && m.sources.length > 0 && } ))} {children}

{suggestions && suggestions.length > 0 && }

{/* Remounted for each finished reply, so the same words are announced again. */}

); } 4f:["$","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,["$","$L50",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json","https://creance.pages.dev/r/message.json","https://creance.pages.dev/r/message-list.json","https://creance.pages.dev/r/prompt-input.json","https://creance.pages.dev/r/reasoning.json","https://creance.pages.dev/r/sources.json","https://creance.pages.dev/r/suggestions.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"chat/Chat.css","content":".cr-chat {\n display: flex;\n flex-direction: column;\n min-height: 0;\n height: 100%;\n color: var(--cr-color-text-default);\n font-family: var(--cr-font-family-sans);\n}\n\n.cr-chat > .cr-message-list {\n flex: 1;\n height: auto;\n}\n\n.cr-chat__empty {\n display: grid;\n place-items: center;\n min-height: 160px;\n color: var(--cr-color-text-muted);\n text-align: center;\n}\n\n/* The input lines up with the column of messages above it. */\n.cr-chat__composer {\n display: flex;\n flex-direction: column;\n gap: var(--cr-space-3);\n box-sizing: border-box;\n width: 100%;\n max-width: var(--cr-message-list-width, 760px);\n margin-inline: auto;\n padding: var(--cr-space-2) var(--cr-space-4) var(--cr-space-4);\n}\n","type":"registry:file","target":"@components/creance/chat/Chat.css"},{"path":"chat/Chat.tsx","content":"$52","type":"registry:ui","target":"@components/creance/chat/Chat.tsx"}],"className":"h-[70svh] min-h-80"}]]}]