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:T67f,.cr-message { display: flex; flex-direction: column; gap: var(--cr-space-2); color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); font-size: var(--cr-font-size-md); line-height: 1.55; } .cr-message[data-from='user'] { align-items: flex-end; } /* Your own words: a tile on the right, with the corner nearest the input squared off. */ .cr-message[data-from='user'] .cr-message__content { box-sizing: border-box; max-width: 78%; padding: var(--cr-space-3) var(--cr-space-4); border: 1px solid var(--cr-color-glass-edge); border-radius: 20px 20px 6px; background: var(--cr-color-glass-sheet); box-shadow: var(--cr-shadow-card); } .cr-message__who { display: flex; align-items: center; gap: var(--cr-space-2); font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-semibold); } .cr-message__content { display: flex; flex-direction: column; gap: var(--cr-space-3); min-width: 0; overflow-wrap: anywhere; } .cr-message__content > p { margin: 0; } /* While it writes: a caret at the end of the last block, or of the text itself when there are no blocks. */ .cr-message[data-status='streaming'] .cr-message__content > :last-child::after, .cr-message[data-status='streaming'] .cr-message__content:not(:has(> *))::after { content: ''; display: inline-block; width: 8px; height: 1.1em; margin-inline-start: 2px; border-radius: 2px; background: var(--cr-color-ink-bg); vertical-align: -0.2em; } .cr-message__actions { display: flex; align-items: center; gap: 2px; margin-inline-start: calc(-1 * var(--cr-space-2)); color: var(--cr-color-text-muted); } 53:T849,import type { ReactNode } from 'react'; import { LoadingDots } from '@/components/creance/loading-dots/LoadingDots'; import { cx } from '@/lib/creance/cx'; import { VisuallyHidden } from '@/lib/creance/VisuallyHidden'; import './Message.css'; export interface MessageProps { /** `user` sits on the right in a tile. `assistant` is plain text on the page, under its name. */ from: 'user' | 'assistant'; /** Who is speaking. Shown above an assistant message; read out for a user message. Default "You" or "Assistant". */ name?: string; /** Beside the name of an assistant message, usually an Avatar. */ avatar?: ReactNode; /** * `pending` shows three dots before the first word. `streaming` puts a caret at the end of the text. * Default `done`. */ status?: 'pending' | 'streaming' | 'done'; /** What screen readers hear while `pending`. Default "{name} is thinking". */ pendingLabel?: string; /** Under a finished assistant message: copy, try again, feedback. */ actions?: ReactNode; /** The message. Render markdown yourself; the kit does not parse it. */ children?: ReactNode; className?: string; } /** One turn in a conversation. The message body is whatever you render, including Reasoning, Sources and tool calls. */ export function Message({ from, name, avatar, status = 'done', pendingLabel, actions, children, className }: MessageProps) { const who = name ?? (from === 'user' ? 'You' : 'Assistant'); return (

{from === 'assistant' ? (

{avatar} {who}

) : ( {who}: )} {status === 'pending' ? ( {pendingLabel ?? `${who} is thinking`} ) : (

{children}

)} {actions && status === 'done' &&

{actions}

}

); } 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/loading-dots.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"message/Message.css","content":"$52","type":"registry:file","target":"@components/creance/message/Message.css"},{"path":"message/Message.tsx","content":"$53","type":"registry:ui","target":"@components/creance/message/Message.tsx"}],"className":"h-[70svh] min-h-80"}]]}]