@urbicon-ui/blocks 6.34.0 → 6.36.0

package/dist/components/Chat/ChatMessage/ChatMessage.svelte

@@ -0,0 +1,342 @@
+<script lang="ts">
+  import { getBlocksConfig, resolveSlotClasses } from '../../../provider';
+  import { Alert, Avatar, Button, Skeleton, Tooltip } from '../../../primitives';
+  import { resolveIcon } from '../../../icons';
+  import SparklesIconDefault from '../../../icons/SparklesIcon.svelte';
+  import UserIconDefault from '../../../icons/UserIcon.svelte';
+  import InfoIconDefault from '../../../icons/InfoCircleIcon.svelte';
+  import CopyIconDefault from '../../../icons/CopyIcon.svelte';
+  import CheckIconDefault from '../../../icons/CheckIcon.svelte';
+  import RefreshIconDefault from '../../../icons/RefreshIcon.svelte';
+  import FileIconDefault from '../../../icons/FileIcon.svelte';
+  import { formatFileSize } from '../../../utils/file-intake';
+  import StreamingMarkdown from '../StreamingMarkdown/StreamingMarkdown.svelte';
+  import CitationChip from '../CitationChip/CitationChip.svelte';
+  import ReasoningDisclosure from '../ReasoningDisclosure/ReasoningDisclosure.svelte';
+  import ToolCallCard from '../ToolCallCard/ToolCallCard.svelte';
+  import type { CitationSource } from '../CitationChip';
+  import { checkLinkUrl } from '../markdown/url-policy.js';
+  import type { ChatMessagePart, ChatRole } from '../chat.types';
+  import { chatMessageVariants, type ChatMessageVariants } from './chat-message.variants';
+  import type { ChatMessageProps } from './index';
+
+  type AttachmentPart = Extract<ChatMessagePart, { type: 'attachment' }>;
+
+  let {
+    message,
+    urlPolicy,
+    onRegenerate,
+    onRetry,
+    avatar,
+    actions,
+    metadata,
+    partRenderers,
+    layout = 'bubble',
+    density = 'comfortable',
+    roleLabels,
+    copyLabel = 'Copy message',
+    copiedLabel = 'Copied',
+    regenerateLabel = 'Regenerate',
+    retryLabel = 'Retry',
+    errorLabel = 'Something went wrong',
+    abortedLabel = 'Generation stopped',
+    class: className,
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: ChatMessageProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  const SparklesIcon = resolveIcon('sparkles', SparklesIconDefault);
+  const UserIcon = resolveIcon('user', UserIconDefault);
+  const InfoIcon = resolveIcon('info', InfoIconDefault);
+  const CopyIcon = resolveIcon('copy', CopyIconDefault);
+  const CheckIcon = resolveIcon('check', CheckIconDefault);
+  const RefreshIcon = resolveIcon('refresh', RefreshIconDefault);
+  const FileIcon = resolveIcon('file', FileIconDefault);
+
+  const variantProps: ChatMessageVariants = $derived({ layout, density, role: message.role });
+  const styles = $derived(chatMessageVariants(variantProps));
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'ChatMessage', preset, variantProps, slotClassesProp)
+  );
+
+  function cls(name: keyof typeof slotClasses, extra?: string | (string | undefined)[]) {
+    if (unstyled) {
+      const own = slotClasses?.[name];
+      return [own, ...(Array.isArray(extra) ? extra : [extra])].filter(Boolean).join(' ');
+    }
+    const slotFns = styles as Record<string, (args: { class?: unknown }) => string>;
+    return slotFns[name]({
+      class: [slotClasses?.[name], ...(Array.isArray(extra) ? extra : [extra])]
+    });
+  }
+
+  const status = $derived(message.status ?? 'complete');
+  const lastIndex = $derived(message.parts.length - 1);
+
+  // Sources are collected out of the flow into a single numbered footer row and
+  // also feed StreamingMarkdown so `[id]` markers resolve to chips. Deduped by
+  // id (first occurrence wins): models routinely cite one source repeatedly,
+  // and a duplicate id would crash the keyed footer each (review finding).
+  const sources = $derived.by<CitationSource[]>(() => {
+    const byId = new Map<string, CitationSource>();
+    for (const p of message.parts) {
+      if (p.type === 'source' && !byId.has(p.id)) {
+        byId.set(p.id, { id: p.id, title: p.title, url: p.url, snippet: p.snippet });
+      }
+    }
+    return [...byId.values()];
+  });
+
+  // Concatenated text parts — what the copy action writes to the clipboard.
+  const copyText = $derived(
+    message.parts.flatMap((p) => (p.type === 'text' ? [p.text] : [])).join('\n\n')
+  );
+
+  // Zero-parts streaming placeholder. An empty *trailing* text part already gets
+  // StreamingMarkdown's cursor, so only the genuinely empty message needs this.
+  const showPlaceholder = $derived(message.status === 'streaming' && message.parts.length === 0);
+
+  const DEFAULT_ROLE_LABELS: Record<ChatRole, string> = {
+    user: 'You',
+    assistant: 'Assistant',
+    system: 'System'
+  };
+  const roleLabel = $derived(roleLabels?.[message.role] ?? DEFAULT_ROLE_LABELS[message.role]);
+
+  const createdAtIso = $derived(message.createdAt?.toISOString());
+  const createdAtTime = $derived(
+    message.createdAt?.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+  );
+
+  // ── Copy interaction ─────────────────────────────────────────────────────
+  let copied = $state(false);
+  let resetTimer: ReturnType<typeof setTimeout> | undefined;
+
+  async function copyMessage() {
+    try {
+      await navigator.clipboard.writeText(copyText);
+      copied = true;
+      if (resetTimer) clearTimeout(resetTimer);
+      resetTimer = setTimeout(() => {
+        copied = false;
+        resetTimer = undefined;
+      }, 2000);
+    } catch (err) {
+      // Never confirm a copy that failed (e.g. denied clipboard permission).
+      console.error('ChatMessage: failed to copy message', err);
+    }
+  }
+
+  $effect(() => () => {
+    if (resetTimer) clearTimeout(resetTimer);
+  });
+</script>
+
+{#snippet defaultAvatar(role: ChatRole)}
+  <Avatar size="sm" class={cls('avatar')}>
+    {#if role === 'assistant'}
+      <SparklesIcon size={16} />
+    {:else if role === 'user'}
+      <UserIcon size={16} />
+    {:else}
+      <InfoIcon size={16} />
+    {/if}
+  </Avatar>
+{/snippet}
+
+{#snippet attachmentChip(part: AttachmentPart)}
+  {@const linkCheck =
+    part.url != null ? checkLinkUrl(part.url, urlPolicy) : ({ ok: false } as const)}
+  {#if linkCheck.ok}
+    <a
+      class={cls('attachment')}
+      href={linkCheck.href}
+      target="_blank"
+      rel="noopener noreferrer"
+      download
+    >
+      <FileIcon size={16} class={cls('attachmentIcon')} />
+      <span class={cls('attachmentName')}>{part.name}</span>
+      {#if part.size != null}<span class={cls('attachmentSize')}>{formatFileSize(part.size)}</span
+        >{/if}
+    </a>
+  {:else}
+    <span class={cls('attachment')}>
+      <FileIcon size={16} class={cls('attachmentIcon')} />
+      <span class={cls('attachmentName')}>{part.name}</span>
+      {#if part.size != null}<span class={cls('attachmentSize')}>{formatFileSize(part.size)}</span
+        >{/if}
+    </span>
+  {/if}
+{/snippet}
+
+{#snippet body()}
+  <div class={cls('partsFlow')}>
+    {#each message.parts as part, index (index)}
+      <!--
+        Parts are append-only during streaming: array position IS identity, so
+        the index key is stable here (the documented exception to the
+        no-index-as-key rule).
+      -->
+      {#if part.type === 'text'}
+        {#if partRenderers?.text}
+          {@render partRenderers.text(part)}
+        {:else}
+          <StreamingMarkdown
+            content={part.text}
+            streaming={message.status === 'streaming' && index === lastIndex}
+            sources={sources.length ? sources : undefined}
+            {urlPolicy}
+            size="sm"
+          />
+        {/if}
+      {:else if part.type === 'reasoning'}
+        {#if partRenderers?.reasoning}
+          {@render partRenderers.reasoning(part)}
+        {:else}
+          <!-- Streaming while it is the trailing part: once the answer text
+               starts flowing behind it, the reasoning is settled. -->
+          <ReasoningDisclosure
+            reasoning={part}
+            streaming={status === 'streaming' && index === lastIndex}
+            {urlPolicy}
+          />
+        {/if}
+      {:else if part.type === 'tool-call'}
+        {#if partRenderers?.['tool-call']}
+          {@render partRenderers['tool-call'](part)}
+        {:else}
+          <ToolCallCard toolCall={part} />
+        {/if}
+      {:else if part.type === 'attachment'}
+        {#if partRenderers?.attachment}
+          {@render partRenderers.attachment(part)}
+        {:else}
+          {@render attachmentChip(part)}
+        {/if}
+      {:else if part.type === 'a2ui'}
+        <!-- default: render nothing. A2UIView lands in P4 via partRenderers. -->
+        {#if partRenderers?.a2ui}{@render partRenderers.a2ui(part)}{/if}
+      {/if}
+      <!-- part.type === 'source' is intentionally skipped: sources render in the
+           citation footer, never inline. -->
+    {/each}
+
+    {#if showPlaceholder}
+      <div class={cls('placeholder')}>
+        <Skeleton variant="text" width="40%" />
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
+{#snippet retryAction()}
+  <Button size="sm" onclick={onRetry}>
+    <RefreshIcon size={14} />
+    {retryLabel}
+  </Button>
+{/snippet}
+
+{#snippet defaultActions()}
+  <div class={cls('actions')}>
+    <!-- No copy for text-less messages (tool-call/reasoning-only): copying an
+         empty string and confirming "Copied" would be a lie (review finding). -->
+    {#if copyText}
+      <Tooltip label={copyLabel}>
+        <button
+          type="button"
+          class={cls('actionButton')}
+          onclick={copyMessage}
+          aria-label={copied ? copiedLabel : copyLabel}
+        >
+          {#if copied}
+            <CheckIcon size={16} />
+          {:else}
+            <CopyIcon size={16} />
+          {/if}
+        </button>
+      </Tooltip>
+    {/if}
+    {#if onRegenerate}
+      <Tooltip label={regenerateLabel}>
+        <button
+          type="button"
+          class={cls('actionButton')}
+          onclick={onRegenerate}
+          aria-label={regenerateLabel}
+        >
+          <RefreshIcon size={16} />
+        </button>
+      </Tooltip>
+    {/if}
+  </div>
+{/snippet}
+
+<div class={cls('root', className)} data-role={message.role} data-status={status} {...restProps}>
+  {#if layout === 'plain'}
+    <div class={cls('header')}>
+      {#if avatar}
+        {@render avatar({ role: message.role })}
+      {:else}
+        {@render defaultAvatar(message.role)}
+      {/if}
+      <span class={cls('roleName')}>{roleLabel}</span>
+    </div>
+    <div class={cls('bubble')}>
+      {@render body()}
+    </div>
+  {:else}
+    <div class={cls('container')}>
+      {#if message.role !== 'user'}
+        {#if avatar}
+          {@render avatar({ role: message.role })}
+        {:else}
+          {@render defaultAvatar(message.role)}
+        {/if}
+      {/if}
+      <div class={cls('bubble')}>
+        {@render body()}
+      </div>
+    </div>
+  {/if}
+
+  {#if sources.length}
+    <div class={cls('sourcesFooter')}>
+      {#each sources as source, i (source.id)}
+        <CitationChip {source} index={i + 1} {urlPolicy} />
+      {/each}
+    </div>
+  {/if}
+
+  {#if status === 'error' || status === 'aborted'}
+    <div class={cls('statusAlert')}>
+      <Alert
+        intent={status === 'error' ? 'danger' : 'warning'}
+        title={status === 'error' ? errorLabel : abortedLabel}
+        actions={onRetry ? retryAction : undefined}
+      />
+    </div>
+  {/if}
+
+  <div class={cls('footer')}>
+    {#if actions}
+      {@render actions({ message })}
+    {:else}
+      {@render defaultActions()}
+    {/if}
+    {#if metadata}
+      {@render metadata({ message })}
+    {:else if createdAtTime}
+      <time class={cls('metadata')} datetime={createdAtIso}>{createdAtTime}</time>
+    {/if}
+  </div>
+
+  <!-- Copy confirmation for screen readers — a live status region, present
+       before `copied` flips so it always announces the change. -->
+  <span class="sr-only" role="status">{copied ? copiedLabel : ''}</span>
+</div>

package/dist/components/Chat/ChatMessage/ChatMessage.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChatMessageProps } from './index.js';
+declare const ChatMessage: import("svelte").Component<ChatMessageProps, {}, "">;
+type ChatMessage = ReturnType<typeof ChatMessage>;
+export default ChatMessage;

package/dist/components/Chat/ChatMessage/chat-message.variants.d.ts

@@ -0,0 +1,138 @@
+import { type SlotNames, type VariantProps } from '../../../utils/variants.js';
+export declare const chatMessageVariants: ((props?: {
+    layout?: "bubble" | "plain" | undefined;
+    role?: "user" | "system" | "assistant" | undefined;
+    density?: "comfortable" | "compact" | undefined;
+} | undefined) => {
+    root: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    container: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    header: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    roleName: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    avatar: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    bubble: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    partsFlow: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    attachment: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    attachmentIcon: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    attachmentName: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    attachmentSize: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    sourcesFooter: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    placeholder: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    statusAlert: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    footer: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    actions: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    actionButton: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    metadata: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+}) & {
+    readonly config: import("../../../utils/variants.js").TVConfig;
+};
+export type ChatMessageVariants = VariantProps<typeof chatMessageVariants>;
+/** Slot names derived from the tv() config — single source of truth for slotClasses. */
+export type ChatMessageSlots = SlotNames<typeof chatMessageVariants>;

package/dist/components/Chat/ChatMessage/chat-message.variants.js

@@ -0,0 +1,118 @@
+import { tv } from '../../../utils/variants.js';
+export const chatMessageVariants = tv({
+    slots: {
+        // Group scope drives the hover/focus reveal of the action bar. `min-w-0`
+        // so long code/markdown scrolls inside the message, never the page.
+        root: ['group/message flex w-full min-w-0 flex-col'],
+        // Bubble layout: avatar beside the bubble. Plain layout ignores this and
+        // uses `header` + `content` instead.
+        container: ['flex min-w-0 items-start gap-3'],
+        // Plain-layout header row: avatar + role name above the full-width content.
+        header: ['flex min-w-0 items-center gap-2'],
+        roleName: ['text-sm font-medium text-text-secondary select-none'],
+        avatar: ['shrink-0'],
+        // The content bubble (bubble layout) / the full-width column (plain layout).
+        bubble: ['min-w-0 max-w-full'],
+        // Vertical stack of the rendered parts.
+        partsFlow: ['flex min-w-0 flex-col'],
+        // reasoning and tool-call parts render through ReasoningDisclosure /
+        // ToolCallCard (own slotClasses there); override via partRenderers.
+        // attachments
+        attachment: [
+            'inline-flex max-w-full items-center gap-2 rounded-modify border border-border-subtle bg-surface-base px-2.5 py-1.5 text-sm no-underline',
+            'transition-[color,background-color] duration-[var(--blocks-duration-fast)] ease-out'
+        ],
+        attachmentIcon: ['shrink-0 text-text-tertiary'],
+        attachmentName: ['min-w-0 truncate text-text-primary'],
+        attachmentSize: ['shrink-0 text-xs text-text-tertiary'],
+        // sources footer
+        sourcesFooter: ['flex flex-wrap items-center gap-1.5 pt-1'],
+        // streaming placeholder (zero parts)
+        placeholder: ['py-1'],
+        // status alert
+        statusAlert: ['mt-1'],
+        // footer row holding actions + metadata
+        footer: ['flex items-center gap-2'],
+        actions: [
+            'flex items-center gap-1 opacity-0',
+            'transition-opacity duration-[var(--blocks-duration-fast)] ease-out',
+            'group-hover/message:opacity-100 group-focus-within/message:opacity-100'
+        ],
+        actionButton: [
+            'inline-flex items-center justify-center rounded-modify p-1.5',
+            'text-text-tertiary cursor-pointer',
+            'transition-[color,background-color] duration-[var(--blocks-duration-fast)] ease-out',
+            'hover:bg-surface-hover hover:text-text-primary',
+            'focus-visible:outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1'
+        ],
+        metadata: ['text-xs text-text-tertiary']
+    },
+    variants: {
+        layout: {
+            bubble: {},
+            // Document-like: full-width content under an avatar + role header row.
+            plain: {
+                bubble: 'w-full',
+                partsFlow: 'gap-3'
+            }
+        },
+        role: {
+            user: {},
+            assistant: {},
+            system: {}
+        },
+        density: {
+            comfortable: {
+                root: 'gap-1.5',
+                partsFlow: 'gap-2'
+            },
+            compact: {
+                root: 'gap-1',
+                partsFlow: 'gap-1.5'
+            }
+        }
+    },
+    compoundVariants: [
+        // ── bubble layout: role tint + alignment ────────────────────────────────
+        {
+            layout: 'bubble',
+            role: 'user',
+            class: {
+                // Reverse so the (avatar-less) bubble packs to the right edge.
+                container: 'flex-row-reverse',
+                bubble: 'max-w-[85%] rounded-contain bg-primary-subtle'
+            }
+        },
+        {
+            layout: 'bubble',
+            role: 'assistant',
+            class: {
+                bubble: 'max-w-[85%] rounded-contain bg-surface-elevated'
+            }
+        },
+        {
+            layout: 'bubble',
+            role: 'system',
+            class: {
+                container: 'justify-center',
+                bubble: 'max-w-[90%] rounded-contain border border-border-subtle bg-surface-base text-sm text-text-secondary'
+            }
+        },
+        // ── bubble layout: density padding ──────────────────────────────────────
+        {
+            layout: 'bubble',
+            density: 'comfortable',
+            class: { bubble: 'px-3.5 py-2.5' }
+        },
+        {
+            layout: 'bubble',
+            density: 'compact',
+            class: { bubble: 'px-3 py-2' }
+        }
+    ],
+    defaultVariants: {
+        layout: 'bubble',
+        role: 'assistant',
+        density: 'comfortable'
+    }
+});