@protoyard/ai-ui 0.0.0-stage → 1.1.1

package/dist/components/RichAnswer.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+import { type MdBlock, type MdInline, parseMarkdown } from '@protoyard/ai';
+import { Badge } from 'texuli/badge';
+import { Code } from 'texuli/kbd-code';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'texuli/table';
+
+interface Props {
+  content: string;
+  label?: string;
+}
+
+let { content, label = 'Assistant response' }: Props = $props();
+// ```chart fences become chart blocks; their code (charts kit + zod) loads only when one appears.
+const document = $derived(parseMarkdown(content, { charts: true }));
+
+function sourceFor(id: string) {
+  return document.sources.find((source) => source.id === id);
+}
+</script>
+
+<div class="ai-rich-answer space-y-3 text-sm leading-7 text-foreground" aria-label={label}>
+  {#snippet renderInline(nodes: MdInline[])}
+    {#each nodes as node, index (`${node.type}-${index}`)}
+      {#if node.type === 'text'}
+        {node.text}
+      {:else if node.type === 'break'}
+        <br />
+      {:else if node.type === 'code'}
+        <Code value={node.text} />
+      {:else if node.type === 'link'}
+        <a class="text-primary underline decoration-primary/40 underline-offset-4 hover:decoration-primary" href={node.href} target={node.href.startsWith('http') ? '_blank' : undefined} rel={node.href.startsWith('http') ? 'noreferrer noopener' : undefined}>
+          {@render renderInline(node.children)}
+        </a>
+      {:else if node.type === 'image'}
+        {#if node.src}
+          <img class="my-2 max-h-80 max-w-full rounded-lg border border-border object-contain" src={node.src} alt={node.alt} loading="lazy" referrerpolicy="no-referrer" />
+        {:else}
+          <span class="rounded bg-muted px-2 py-1 text-xs text-muted-foreground">Image: {node.alt}</span>
+        {/if}
+      {:else if node.type === 'attachment'}
+        <Badge variant="outline" label={node.label} />
+      {:else if node.type === 'citation'}
+        {@const source = sourceFor(node.id)}
+        {#if source?.href}
+          <a class="rounded-full bg-muted px-1.5 text-xs text-primary" href={source.href} target="_blank" rel="noreferrer noopener" aria-label={`Source ${node.index}: ${source.title}`}>{node.index}</a>
+        {:else}
+          <span class="rounded-full bg-muted px-1.5 text-xs" aria-label={`Source ${node.index}`}>{node.index}</span>
+        {/if}
+      {:else}
+        <svelte:element this={node.type === 'strong' ? 'strong' : node.type === 'em' ? 'em' : 'del'}>
+          {@render renderInline(node.children)}
+        </svelte:element>
+      {/if}
+    {/each}
+  {/snippet}
+
+  {#snippet renderBlocks(blocks: MdBlock[])}
+    {#each blocks as block, index (`${block.type}-${index}`)}
+      {#if block.type === 'paragraph'}
+        <p>{@render renderInline(block.children)}</p>
+      {:else if block.type === 'heading'}
+        <svelte:element this={`h${block.level}`} class="font-semibold leading-tight tracking-tight">{@render renderInline(block.children)}</svelte:element>
+      {:else if block.type === 'code'}
+        <div class="overflow-hidden rounded-lg border border-border bg-muted/60">
+          <div class="flex items-center justify-between border-b border-border px-3 py-1.5 text-xs text-muted-foreground">
+            <span>{block.lang || 'code'}</span>
+            {#if !block.closed}<span role="status">Streaming</span>{/if}
+          </div>
+          <!-- The block code scrolls, so it takes focus and a name (WCAG 2.1.1 / axe scrollable-region-focusable). -->
+          <Code
+            variant="block"
+            value={block.text}
+            language={block.lang || undefined}
+            role="region"
+            tabindex={0}
+            aria-label={`${block.lang || 'code'} code`}
+            class="overflow-x-auto rounded-none border-0 p-3 text-xs leading-5 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"
+          />
+        </div>
+      {:else if block.type === 'chart'}
+        {#snippet chartStatus(text: string)}<p role="status" class="rounded-lg border border-border bg-muted/40 p-3 text-xs text-muted-foreground">{text}</p>{/snippet}
+        {#if !block.closed}
+          {@render chartStatus('Preparing chart…')}
+        {:else}
+          {#await import('./ChartAnswer.svelte')}
+            {@render chartStatus('Loading chart…')}
+          {:then { default: ChartAnswer }}
+            <ChartAnswer text={block.text} />
+          {:catch}
+            {@render chartStatus('The chart did not load.')}
+          {/await}
+        {/if}
+      {:else if block.type === 'list'}
+        <svelte:element this={block.ordered ? 'ol' : 'ul'} class="space-y-1 pl-6 marker:text-muted-foreground" start={block.ordered ? block.start : undefined}>
+          {#each block.items as item, itemIndex (`${index}-${itemIndex}`)}
+            <li>
+              {#if item.checked !== null}<span class="mr-2" aria-label={item.checked ? 'Complete' : 'Incomplete'}>{item.checked ? '☑' : '☐'}</span>{/if}
+              {@render renderBlocks(item.children)}
+            </li>
+          {/each}
+        </svelte:element>
+      {:else if block.type === 'quote'}
+        <blockquote class="border-l-2 border-primary/40 pl-4 text-muted-foreground">{@render renderBlocks(block.children)}</blockquote>
+      {:else if block.type === 'table'}
+        <Table class="text-xs">
+          <TableHeader>
+            <TableRow>{#each block.header as cell, cellIndex (`h-${cellIndex}`)}<TableHead>{@render renderInline(cell)}</TableHead>{/each}</TableRow>
+          </TableHeader>
+          <TableBody>
+            {#each block.rows as row, rowIndex (`r-${rowIndex}`)}<TableRow>{#each row as cell, cellIndex (`${rowIndex}-${cellIndex}`)}<TableCell>{@render renderInline(cell)}</TableCell>{/each}</TableRow>{/each}
+          </TableBody>
+        </Table>
+      {:else}
+        <hr class="border-border" />
+      {/if}
+    {/each}
+  {/snippet}
+
+  {@render renderBlocks(document.blocks)}
+  {#if document.sources.length}
+    <ol class="border-t border-border pt-2 text-xs leading-5 text-muted-foreground" aria-label="Sources">
+      {#each document.sources as source (source.id)}
+        <li value={source.index}>
+          {#if source.href}<a class="underline underline-offset-2" href={source.href} target="_blank" rel="noreferrer noopener">{source.title}</a>{:else}{source.title}{/if}
+        </li>
+      {/each}
+    </ol>
+  {/if}
+</div>

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

@@ -0,0 +1,7 @@
+interface Props {
+    content: string;
+    label?: string;
+}
+declare const RichAnswer: import("svelte").Component<Props, {}, "">;
+type RichAnswer = ReturnType<typeof RichAnswer>;
+export default RichAnswer;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { default as AssistantComposer } from './components/AssistantComposer.svelte';
+export { default as AssistantWorkspace } from './components/AssistantWorkspace.svelte';
+export { default as CanvasPanel } from './components/CanvasPanel.svelte';
+export { default as RichAnswer } from './components/RichAnswer.svelte';
+export { default as MessageList } from './MessageList.svelte';
+export type { AssistantCanvas, AssistantConversation, AssistantMessage, AssistantSendInput, FeedbackRating, } from './types.ts';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { default as AssistantComposer } from './components/AssistantComposer.svelte';
+export { default as AssistantWorkspace } from './components/AssistantWorkspace.svelte';
+export { default as CanvasPanel } from './components/CanvasPanel.svelte';
+export { default as RichAnswer } from './components/RichAnswer.svelte';
+export { default as MessageList } from './MessageList.svelte';

package/dist/messages/ChatMessageBlocks.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+import { type ChatMessage, type MessageAttachment, parseChatMessage } from '@protoyard/ai/messages';
+import RichAnswer from '../components/RichAnswer.svelte';
+import MessageAttachments from './MessageAttachments.svelte';
+import MessageButtons from './MessageButtons.svelte';
+import MessageForm from './MessageForm.svelte';
+import MessageLinkPreview from './MessageLinkPreview.svelte';
+import MessageSelect from './MessageSelect.svelte';
+import MessageTable from './MessageTable.svelte';
+import type { MessageActionHandler } from './types.js';
+
+/**
+ * Renders a `protoyard.message@1` chat message. Input is untrusted, so it is
+ * always validated with `parseChatMessage` first: an invalid message shows a
+ * short note (never its content), and an unknown block arrives as the plain
+ * text the parser put in its place. Text renders as text; markdown text goes
+ * through the safe markdown renderer. Nothing here uses `{@html}`.
+ *
+ * Actions (buttons, selects, forms) call `onAction` with a typed event; the
+ * returned promise drives each control's pending and error feedback.
+ */
+let {
+  message,
+  onAction,
+  onOpenAttachment,
+  label = 'Message',
+  class: className = '',
+}: {
+  /** A message object or its JSON text. */
+  message: unknown;
+  onAction?: MessageActionHandler;
+  onOpenAttachment?: (attachment: MessageAttachment) => unknown | Promise<unknown>;
+  label?: string;
+  class?: string;
+} = $props();
+
+const result = $derived(parseChatMessage(message));
+const parsed = $derived<ChatMessage | null>(result.success ? result.message : null);
+const messageId = $derived(parsed?.id ?? null);
+</script>
+
+<div class="grid gap-3 text-sm text-foreground {className}" data-py-chat-message role="group" aria-label={label}>
+  {#if !result.success}
+    <p class="m-0 rounded-md border border-dashed border-border bg-muted/40 p-3 text-xs text-muted-foreground" role="note" data-py-message-invalid>
+      This message could not be shown ({result.issues.length === 1 ? '1 problem' : `${result.issues.length} problems`}).
+    </p>
+  {:else if parsed}
+    {#each parsed.blocks as block, index (index)}
+      {#if block.type === 'text'}
+        {#if block.replaces}
+          <p class="m-0 rounded-md border border-dashed border-border px-3 py-2 text-xs text-muted-foreground" role="note" data-py-message-block="unknown">{block.text}</p>
+        {:else if block.format === 'markdown'}
+          <div data-py-message-block="text"><RichAnswer content={block.text} label="Message text" /></div>
+        {:else}
+          <p class="m-0 whitespace-pre-wrap leading-6" data-py-message-block="text">{block.text}</p>
+        {/if}
+      {:else if block.type === 'buttons'}
+        <MessageButtons {block} blockIndex={index} {messageId} {onAction} />
+      {:else if block.type === 'select'}
+        <MessageSelect {block} blockIndex={index} {messageId} {onAction} />
+      {:else if block.type === 'form'}
+        <MessageForm {block} blockIndex={index} {messageId} {onAction} />
+      {:else if block.type === 'table'}
+        <MessageTable {block} />
+      {:else if block.type === 'link_preview'}
+        <MessageLinkPreview {block} />
+      {/if}
+    {/each}
+    {#if parsed.attachments.length > 0}
+      <MessageAttachments attachments={parsed.attachments} onOpen={onOpenAttachment} />
+    {/if}
+  {/if}
+</div>

package/dist/messages/ChatMessageBlocks.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type MessageAttachment } from '@protoyard/ai/messages';
+import type { MessageActionHandler } from './types.ts';
+type $$ComponentProps = {
+    /** A message object or its JSON text. */
+    message: unknown;
+    onAction?: MessageActionHandler;
+    onOpenAttachment?: (attachment: MessageAttachment) => unknown | Promise<unknown>;
+    label?: string;
+    class?: string;
+};
+declare const ChatMessageBlocks: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatMessageBlocks = ReturnType<typeof ChatMessageBlocks>;
+export default ChatMessageBlocks;

package/dist/messages/MessageAttachments.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+import { FileText } from '@lucide/svelte';
+import type { MessageAttachment } from '@protoyard/ai/messages';
+import { Button } from 'texuli/button';
+import { LucideIcon } from 'texuli/icons/lucide';
+import { formatBytes, isImageMime, isInlineImageUrl } from './format.js';
+import { settle } from './types.js';
+
+/**
+ * Attachments: images inline (local or `data:` only, as the contract allows),
+ * other files as a labeled row. Opening a file is the host's job, through
+ * `onOpen`; without it, files are listed but not interactive.
+ */
+let {
+  attachments,
+  onOpen,
+}: {
+  attachments: readonly MessageAttachment[];
+  onOpen?: (attachment: MessageAttachment) => unknown | Promise<unknown>;
+} = $props();
+
+let pending = $state<string | null>(null);
+let error = $state('');
+
+async function open(attachment: MessageAttachment): Promise<void> {
+  if (!onOpen || pending) return;
+  pending = attachment.id;
+  error = (await settle(() => onOpen(attachment))) ?? '';
+  pending = null;
+}
+</script>
+
+<ul class="m-0 grid list-none gap-2 p-0" data-py-message-attachments aria-label="Attachments">
+  {#each attachments as attachment (attachment.id)}
+    <li class="flex items-center gap-2 text-sm">
+      {#if isImageMime(attachment.mime) && isInlineImageUrl(attachment.url)}
+        <img class="max-h-40 max-w-60 rounded-md border border-border object-contain" src={attachment.url} alt={attachment.name} loading="lazy" />
+      {:else}
+        <LucideIcon icon={FileText} size="sm" class="shrink-0 text-muted-foreground" />
+        {#if onOpen}
+          <!-- One open at a time: pending is the component's own state, so autoLoading is off. -->
+          <Button
+            variant="link"
+            autoLoading={false}
+            loading={pending === attachment.id}
+            disabled={pending !== null}
+            onclick={() => open(attachment)}
+          >
+            {attachment.name}
+          </Button>
+        {:else}
+          <span>{attachment.name}</span>
+        {/if}
+        <span class="text-xs text-muted-foreground">{formatBytes(attachment.size)}</span>
+      {/if}
+    </li>
+  {/each}
+</ul>
+{#if error}
+  <p class="m-0 text-xs text-destructive" role="alert">{error}</p>
+{/if}

package/dist/messages/MessageAttachments.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { MessageAttachment } from '@protoyard/ai/messages';
+type $$ComponentProps = {
+    attachments: readonly MessageAttachment[];
+    onOpen?: (attachment: MessageAttachment) => unknown | Promise<unknown>;
+};
+declare const MessageAttachments: import("svelte").Component<$$ComponentProps, {}, "">;
+type MessageAttachments = ReturnType<typeof MessageAttachments>;
+export default MessageAttachments;

package/dist/messages/MessageButtons.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+import { ExternalLink } from '@lucide/svelte';
+import type { ButtonsBlock, MessageButton } from '@protoyard/ai/messages';
+import { tick } from 'svelte';
+import { Button, type ButtonVariant } from 'texuli/button';
+import { LucideIcon } from 'texuli/icons/lucide';
+import { type MessageActionHandler, settle } from './types.js';
+
+/**
+ * Action and link buttons, drawn with Texuli's `Button`. An action button
+ * reports `{ kind: 'button' }` and stays busy (`loading`) while the host's
+ * promise is pending; a confirmation asks first, inline, with Cancel focused.
+ * Link buttons go through Texuli's URL policy at the untrusted tier (message
+ * content is untrusted) and open in a new tab without access to this page
+ * (`noopener noreferrer`).
+ */
+let {
+  block,
+  blockIndex,
+  messageId,
+  onAction,
+}: {
+  block: ButtonsBlock;
+  blockIndex: number;
+  messageId: string | null;
+  onAction?: MessageActionHandler;
+} = $props();
+
+const uid = $props.id();
+let pending = $state<number | null>(null);
+let confirming = $state<number | null>(null);
+let error = $state('');
+let cancelButton = $state<HTMLElement | null>(null);
+// One slot per button (the block is fixed for this component's life), so each binds a defined ref.
+// svelte-ignore state_referenced_locally
+const triggers: (HTMLElement | null)[] = $state(block.buttons.map(() => null));
+
+const VARIANT: Record<MessageButton['style'], ButtonVariant> = {
+  default: 'outline',
+  primary: 'default',
+  danger: 'destructive',
+};
+
+async function run(index: number): Promise<void> {
+  const button = block.buttons[index];
+  if (!button?.action || !onAction || pending !== null) return;
+  const fromConfirm = confirming !== null;
+  confirming = null;
+  pending = index;
+  error = '';
+  error =
+    (await settle(() =>
+      onAction({
+        kind: 'button',
+        messageId,
+        blockIndex,
+        action: button.action as string,
+        value: button.value ?? null,
+      })
+    )) ?? '';
+  pending = null;
+  // The confirmation closed under the keyboard; give focus back to the button.
+  if (fromConfirm) {
+    await tick();
+    triggers[index]?.focus();
+  }
+}
+
+async function press(index: number): Promise<void> {
+  if (block.buttons[index]?.confirm) {
+    confirming = index;
+    await tick();
+    cancelButton?.focus();
+    return;
+  }
+  await run(index);
+}
+
+async function cancel(): Promise<void> {
+  const index = confirming;
+  confirming = null;
+  await tick();
+  if (index !== null) triggers[index]?.focus();
+}
+</script>
+
+<div class="grid gap-2" data-py-message-block="buttons">
+  <div class="flex flex-wrap gap-2">
+    {#each block.buttons as button, index (index)}
+      {#if button.url}
+        <Button
+          variant={VARIANT[button.style]}
+          href={button.url}
+          hrefTrust="untrusted"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {button.label}
+          <LucideIcon icon={ExternalLink} size="xs" />
+          <span class="sr-only">(opens in a new tab)</span>
+        </Button>
+      {:else}
+        <!-- Pending is the component's own state (it also blocks the other buttons), so autoLoading is off. -->
+        <Button
+          variant={VARIANT[button.style]}
+          bind:ref={triggers[index]}
+          autoLoading={false}
+          loading={pending === index}
+          disabled={!onAction || pending !== null}
+          aria-expanded={button.confirm ? confirming === index : undefined}
+          aria-controls={button.confirm ? `${uid}-confirm` : undefined}
+          onclick={() => press(index)}
+        >
+          {button.label}
+        </Button>
+      {/if}
+    {/each}
+  </div>
+
+  {#if confirming !== null}
+    {@const confirm = block.buttons[confirming]?.confirm}
+    {#if confirm}
+      <div
+        id="{uid}-confirm"
+        class="grid gap-2 rounded-md border border-border bg-muted/50 p-3"
+        role="alertdialog"
+        aria-modal="false"
+        aria-labelledby="{uid}-confirm-title"
+        aria-describedby="{uid}-confirm-body"
+        tabindex="-1"
+        onkeydown={(event) => {
+          if (event.key === 'Escape') {
+            event.preventDefault();
+            void cancel();
+          }
+        }}
+      >
+        <p id="{uid}-confirm-title" class="m-0 text-sm font-semibold">{confirm.title}</p>
+        <p id="{uid}-confirm-body" class="m-0 whitespace-pre-wrap text-sm text-muted-foreground">{confirm.body}</p>
+        <div class="flex flex-wrap gap-2">
+          <Button variant="outline" bind:ref={cancelButton} autoLoading={false} onclick={cancel}>
+            {confirm.cancelLabel}
+          </Button>
+          <Button
+            variant={block.buttons[confirming]?.style === 'danger' ? 'destructive' : 'default'}
+            autoLoading={false}
+            onclick={() => run(confirming as number)}
+          >
+            {confirm.confirmLabel}
+          </Button>
+        </div>
+      </div>
+    {/if}
+  {/if}
+
+  {#if !onAction && block.buttons.some((button) => button.action)}
+    <p class="m-0 text-xs text-muted-foreground">Actions are not available in this view.</p>
+  {/if}
+  {#if error}
+    <p class="m-0 text-xs text-destructive" role="alert">{error}</p>
+  {/if}
+</div>

package/dist/messages/MessageButtons.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonsBlock } from '@protoyard/ai/messages';
+import { type MessageActionHandler } from './types.ts';
+type $$ComponentProps = {
+    block: ButtonsBlock;
+    blockIndex: number;
+    messageId: string | null;
+    onAction?: MessageActionHandler;
+};
+declare const MessageButtons: import("svelte").Component<$$ComponentProps, {}, "">;
+type MessageButtons = ReturnType<typeof MessageButtons>;
+export default MessageButtons;