@urbicon-ui/blocks 6.35.0 → 6.36.0

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { getBlocksConfig, resolveSlotClasses } from '../../../provider';
+  import { chatVariants } from './chat.variants';
+  import type { ChatProps } from './index';
+
+  let {
+    children,
+    header,
+    composer,
+    class: className,
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: ChatProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  const styles = chatVariants();
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'Chat', preset, {}, 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])]
+    });
+  }
+</script>
+
+<div class={cls('root', className)} {...restProps}>
+  {#if header}
+    <div class={cls('header')}>
+      {@render header()}
+    </div>
+  {/if}
+
+  <div class={cls('body')}>
+    {@render children?.()}
+  </div>
+
+  {#if composer}
+    <div class={cls('composer')}>
+      {@render composer()}
+    </div>
+  {/if}
+</div>

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

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

package/dist/components/Chat/Chat/chat.variants.d.ts

@@ -0,0 +1,20 @@
+import { type SlotNames, type VariantProps } from '../../../utils/variants.js';
+export declare const chatVariants: ((props?: {} | undefined) => {
+    root: (props?: ({} & {
+        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?: ({} & {
+        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;
+    body: (props?: ({} & {
+        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;
+    composer: (props?: ({} & {
+        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 ChatVariants = VariantProps<typeof chatVariants>;
+/** Slot names derived from the tv() config — single source of truth for slotClasses. */
+export type ChatSlots = SlotNames<typeof chatVariants>;

package/dist/components/Chat/Chat/chat.variants.js

@@ -0,0 +1,15 @@
+import { tv } from '../../../utils/variants.js';
+export const chatVariants = tv({
+    slots: {
+        // Fills its parent's height as a flex column. `min-h-0` is the discipline
+        // that lets the body child own the scroll instead of overflowing the page.
+        root: ['flex h-full min-h-0 w-full flex-col bg-surface-base'],
+        // Pinned header — never scrolls.
+        header: ['shrink-0 border-b border-border-subtle'],
+        // The conversation area. Flexes to fill and clamps to min-h-0 so its own
+        // scrollable child (ChatMessageList) can scroll; the container never does.
+        body: ['min-h-0 min-w-0 flex-1'],
+        // Pinned composer at the bottom.
+        composer: ['shrink-0 border-t border-border-subtle bg-surface-base']
+    }
+});

package/dist/components/Chat/Chat/index.d.ts

@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChatSlots, ChatVariants } from './chat.variants.js';
+/**
+ * @description Thin full-height layout shell for a chat surface: an optional pinned
+ * `header` (border-b), the scrollable conversation area as `children` (the consumer
+ * drops a ChatMessageList here — the shell itself never scrolls, the body child does),
+ * and an optional pinned `composer` at the bottom (border-t, e.g. PromptInput). No
+ * state, no context, no provider — pure structure with `min-h-0` flex discipline so it
+ * fills its parent and hands scrolling to its body.
+ *
+ * @tag ai
+ * @tag layout
+ * @related ChatMessageList
+ * @related PromptInput
+ * @stability experimental
+ *
+ * @example
+ * ```svelte
+ * <Chat>
+ *   {#snippet header()}<Toolbar>…</Toolbar>{/snippet}
+ *   <ChatMessageList {messages} />
+ *   {#snippet composer()}<PromptInput onSubmit={send} />{/snippet}
+ * </Chat>
+ * ```
+ */
+export interface ChatProps extends ChatVariants, Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> {
+    /** The scrollable conversation area — typically a ChatMessageList. */
+    children?: Snippet;
+    /** Optional pinned header rendered above the conversation (border-b). */
+    header?: Snippet;
+    /** Optional pinned composer rendered below the conversation (border-t) — e.g. PromptInput. */
+    composer?: Snippet;
+    /** Extra classes merged onto the root element. */
+    class?: string;
+    /** Remove all default tv classes. */
+    unstyled?: boolean;
+    /** Per-slot class overrides. Slots: root | header | body | composer */
+    slotClasses?: Partial<Record<ChatSlots, string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ Chat: {...} }}>`.
+     * Prefer this over `class` overrides for reusable custom looks.
+     */
+    preset?: string;
+}
+export { default as Chat } from './Chat.svelte';
+export { type ChatSlots, type ChatVariants, chatVariants } from './chat.variants.js';

package/dist/components/Chat/Chat/index.js

@@ -0,0 +1,2 @@
+export { default as Chat } from './Chat.svelte';
+export { chatVariants } from './chat.variants.js';

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;