@classic-homes/agent-chat 0.2.1 → 0.3.0

package/dist/components/MessageItem.svelte

@@ -1,15 +1,16 @@
+<!--
+  @component
+  One transcript entry: a `UserMessage` or an `AssistantMessage`.
+-->
 <script lang="ts">
-  import { Button, Icon } from '@classic-homes/theme-svelte';
-  import Markdown from './Markdown.svelte';
   import type { ChatMessage } from '../reducer.js';
-  import { errorTitle } from '../reducer.js';
-  import { parseMarkdown } from '../markdown.js';
-  import ToolTimeline from './ToolTimeline.svelte';
-  import UiFrame from './UiFrame.svelte';
+  import AssistantMessage from './AssistantMessage.svelte';
+  import UserMessage from './UserMessage.svelte';
 
   interface Props {
     message: ChatMessage;
     streaming?: boolean;
+    last?: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
     onnavigate?: (href: string) => void;
@@ -18,147 +19,13 @@
     ontool?: (toolName: string, params?: Record<string, unknown>) => void;
     onnotify?: (message: string) => void;
     onretry?: () => void;
+    oncontinue?: () => void;
   }
-  let {
-    message,
-    streaming = false,
-    sandboxOrigin,
-    fileUrl,
-    onnavigate,
-    onopenartifact,
-    onprompt,
-    ontool,
-    onnotify,
-    onretry,
-  }: Props = $props();
-
-  // Re-parsing markdown on every token is the dominant streaming cost; throttle it.
-  const PARSE_THROTTLE_MS = 120;
-  let html = $state('');
-  let lastParse = 0;
-  let timer: ReturnType<typeof setTimeout> | null = null;
-  $effect(() => {
-    if (message.role !== 'assistant') return;
-    const text = message.text;
-    const now = Date.now();
-    if (!streaming || now - lastParse >= PARSE_THROTTLE_MS) {
-      if (timer) clearTimeout(timer);
-      timer = null;
-      lastParse = now;
-      html = parseMarkdown(text);
-    } else if (!timer) {
-      timer = setTimeout(
-        () => {
-          timer = null;
-          lastParse = Date.now();
-          html = parseMarkdown(message.role === 'assistant' ? message.text : '');
-        },
-        PARSE_THROTTLE_MS - (now - lastParse),
-      );
-    }
-  });
-  $effect(() => () => {
-    if (timer) clearTimeout(timer);
-  });
-
-  function handleClick(event: MouseEvent): void {
-    if (!onnavigate) return;
-    const anchor = (event.target as HTMLElement | null)?.closest?.('a.agent-internal-link');
-    if (!(anchor instanceof HTMLAnchorElement)) return;
-    event.preventDefault();
-    onnavigate(anchor.getAttribute('href') ?? anchor.href);
-  }
-
-  function formatBytes(n: number): string {
-    return n < 1024
-      ? `${n} B`
-      : n < 1048576
-        ? `${(n / 1024).toFixed(0)} KB`
-        : `${(n / 1048576).toFixed(1)} MB`;
-  }
+  let { message, last = false, ...rest }: Props = $props();
 </script>
 
 {#if message.role === 'user'}
-  <div class="ml-auto flex max-w-[85%] flex-col items-end gap-1 px-4 py-2">
-    {#if message.contextLabel}<div class="text-xs text-muted-foreground">
-        Context: {message.contextLabel}
-      </div>{/if}
-    <div
-      class="whitespace-pre-wrap rounded-2xl rounded-br-md bg-primary px-3.5 py-2 text-primary-foreground [overflow-wrap:anywhere]"
-    >
-      {message.text}
-    </div>
-    {#if message.attachments.length}
-      <ul class="flex flex-wrap justify-end gap-2 text-xs text-muted-foreground">
-        {#each message.attachments as file (file.fileId)}<li class="inline-flex items-center gap-1">
-            <Icon name="file" size={12} />
-            {file.name}
-          </li>{/each}
-      </ul>
-    {/if}
-  </div>
+  <UserMessage {message} {last} />
 {:else}
-  <div class="min-w-0 px-4 py-2" data-status={message.status}>
-    <ToolTimeline tools={message.tools} delegations={message.delegations} {streaming} />
-    {#if html}<Markdown {html} onclick={handleClick} />{/if}
-    {#if streaming && !message.text}<span class="italic text-muted-foreground">Thinking…</span>{/if}
-    {#if message.artifacts.length}
-      <div class="my-2 flex flex-wrap gap-1.5">
-        {#each message.artifacts as a (a.artifactId)}
-          <Button variant="outline" size="sm" onclick={() => onopenartifact?.(a.artifactId)}>
-            <Icon name="file-text" size={14} />
-            {a.title ?? a.artifactId}{a.open ? '…' : ''}
-          </Button>
-        {/each}
-      </div>
-    {/if}
-    {#each message.ui as resource (resource.callId + resource.uri)}
-      <UiFrame {resource} {sandboxOrigin} {onprompt} {ontool} {onnotify} />
-    {/each}
-    {#if message.files.length}
-      <ul class="mt-1 flex flex-wrap gap-2 text-sm">
-        {#each message.files as file (file.fileId)}
-          <li>
-            {#if file.mimeType.startsWith('image/')}
-              <img
-                class="mb-1 block max-h-96 max-w-full rounded-lg"
-                src={fileUrl(file.fileId)}
-                alt={file.name}
-                loading="lazy"
-              />
-            {/if}
-            <a
-              class="inline-flex items-center gap-1 text-primary underline-offset-2 hover:underline"
-              href={fileUrl(file.fileId)}
-              download={file.name}
-              ><Icon name="download" size={14} /> {file.name} ({formatBytes(file.bytes)})</a
-            >
-          </li>
-        {/each}
-      </ul>
-    {/if}
-    {#if message.proposals.length}
-      <div class="mt-1 text-xs text-muted-foreground">
-        Proposed {message.proposals.length} document edit{message.proposals.length === 1
-          ? ''
-          : 's'}; apply them from the Excel or Word add-in.
-      </div>
-    {/if}
-    {#if message.error}
-      <div
-        class="mt-2 rounded-lg bg-destructive/10 px-3 py-2 text-sm text-destructive"
-        role="alert"
-      >
-        <strong>{errorTitle(message.error.code)}.</strong>
-        {message.error.message}
-        {#if message.error.retryable && onretry}<Button variant="link" size="sm" onclick={onretry}
-            >Try again</Button
-          >{/if}
-      </div>
-    {:else if message.status === 'cancelled'}
-      <div class="mt-1 text-xs text-muted-foreground">Stopped.</div>
-    {:else if message.status === 'incomplete'}
-      <div class="mt-1 text-xs text-muted-foreground">The answer was cut short.</div>
-    {/if}
-  </div>
+  <AssistantMessage {message} {last} {...rest} />
 {/if}

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

@@ -2,6 +2,7 @@ import type { ChatMessage } from '../reducer.js';
 interface Props {
     message: ChatMessage;
     streaming?: boolean;
+    last?: boolean;
     sandboxOrigin: string;
     fileUrl: (fileId: string) => string;
     onnavigate?: (href: string) => void;
@@ -10,7 +11,9 @@ interface Props {
     ontool?: (toolName: string, params?: Record<string, unknown>) => void;
     onnotify?: (message: string) => void;
     onretry?: () => void;
+    oncontinue?: () => void;
 }
+/** One transcript entry: a `UserMessage` or an `AssistantMessage`. */
 declare const MessageItem: import("svelte").Component<Props, {}, "">;
 type MessageItem = ReturnType<typeof MessageItem>;
 export default MessageItem;

package/dist/components/MessageItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageItem.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageItem.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO/C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA2IH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageItem.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAkBH,sEAAsE;AACtE,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/MessageList.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { tick } from 'svelte';
+  import { Button, Icon } from '@classic-homes/theme-svelte';
   import type { ChatMessage } from '../reducer.js';
+  import { daySeparators, formatDay } from '../message-format.js';
   import MessageItem from './MessageItem.svelte';
 
   interface Props {
@@ -14,6 +16,7 @@
     ontool?: (toolName: string, params?: Record<string, unknown>) => void;
     onnotify?: (message: string) => void;
     onretry?: () => void;
+    oncontinue?: () => void;
     empty?: import('svelte').Snippet;
   }
   let {
@@ -27,33 +30,70 @@
     ontool,
     onnotify,
     onretry,
+    oncontinue,
     empty,
   }: Props = $props();
 
   let container: HTMLDivElement | undefined = $state();
-  let follow = true;
+  /** Pinned to the bottom: new content scrolls into view. Off once the reader scrolls up. */
+  let follow = $state(true);
+  /** Content arrived while the reader was scrolled up. */
+  let unseen = $state(false);
   const FOLLOW_THRESHOLD_PX = 80;
+  function atBottom(): boolean {
+    if (!container) return true;
+    return (
+      container.scrollTop + container.clientHeight >= container.scrollHeight - FOLLOW_THRESHOLD_PX
+    );
+  }
   function onscroll(): void {
+    follow = atBottom();
+    if (follow) unseen = false;
+  }
+  function scrollToBottom(smooth = false): void {
     if (!container) return;
-    follow =
-      container.scrollTop + container.clientHeight >= container.scrollHeight - FOLLOW_THRESHOLD_PX;
+    const reduce =
+      typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+    container.scrollTo({
+      top: container.scrollHeight,
+      behavior: smooth && !reduce ? 'smooth' : 'auto',
+    });
+  }
+  function jumpToLatest(): void {
+    follow = true;
+    unseen = false;
+    scrollToBottom(true);
   }
+
   const count = $derived(messages.length);
   const lastRole = $derived(messages[messages.length - 1]?.role);
   let prevCount = 0;
   $effect(() => {
     void messages;
-    if (streaming && follow && container) container.scrollTop = container.scrollHeight;
+    // Also when streaming stops: the turn's footer (outcome, actions) appears then.
+    void streaming;
+    if (!container) return;
+    if (follow) container.scrollTop = container.scrollHeight;
+    else if (streaming) unseen = true;
   });
   $effect(() => {
     void count;
     void lastRole;
-    if (count > prevCount && lastRole === 'user') follow = true;
+    // Sending always brings the reader back to the newest turn.
+    if (count > prevCount && lastRole === 'user') {
+      follow = true;
+      unseen = false;
+    }
     prevCount = count;
     void tick().then(() => {
       if (container && follow) container.scrollTop = container.scrollHeight;
     });
   });
+
+  const separators = $derived(daySeparators(messages));
+  // Only show day labels when the transcript spans more than one day.
+  const multiDay = $derived(separators.size > 1);
+
   // Announce the finished answer once, not every token.
   const announcement = $derived.by(() => {
     if (streaming) return '';
@@ -63,31 +103,60 @@
 </script>
 
 <div class="sr-only" aria-live="polite" aria-atomic="true">{announcement}</div>
-<div
-  class="flex min-h-0 flex-1 flex-col overflow-y-auto py-2"
-  bind:this={container}
-  {onscroll}
-  role="log"
-  aria-label="Conversation"
->
-  {#if messages.length === 0}
-    {#if empty}{@render empty()}{/if}
-  {:else}
-    <div class="mx-auto flex w-full max-w-3xl flex-col">
-      {#each messages as message, i (message.id)}
-        <MessageItem
-          {message}
-          streaming={streaming && i === messages.length - 1 && message.role === 'assistant'}
-          {sandboxOrigin}
-          {fileUrl}
-          {onnavigate}
-          {onopenartifact}
-          {onprompt}
-          {ontool}
-          {onnotify}
-          onretry={i === messages.length - 1 ? onretry : undefined}
-        />
-      {/each}
+<div class="relative flex min-h-0 flex-1 flex-col">
+  <div
+    class="flex min-h-0 flex-1 flex-col overflow-y-auto py-2"
+    bind:this={container}
+    {onscroll}
+    role="log"
+    aria-label="Conversation"
+  >
+    {#if messages.length === 0}
+      {#if empty}{@render empty()}{/if}
+    {:else}
+      <div class="mx-auto flex w-full max-w-3xl flex-col">
+        {#each messages as message, i (message.id)}
+          {#if multiDay && separators.has(i)}
+            <div
+              class="flex items-center gap-3 px-4 py-3 text-xs font-medium text-muted-foreground"
+              role="separator"
+              aria-label={formatDay(message.createdAt)}
+            >
+              <span class="h-px flex-1 bg-border"></span>
+              {formatDay(message.createdAt)}
+              <span class="h-px flex-1 bg-border"></span>
+            </div>
+          {/if}
+          <MessageItem
+            {message}
+            last={i === messages.length - 1}
+            streaming={streaming && i === messages.length - 1 && message.role === 'assistant'}
+            {sandboxOrigin}
+            {fileUrl}
+            {onnavigate}
+            {onopenartifact}
+            {onprompt}
+            {ontool}
+            {onnotify}
+            onretry={i === messages.length - 1 ? onretry : undefined}
+            oncontinue={i === messages.length - 1 && !streaming ? oncontinue : undefined}
+          />
+        {/each}
+      </div>
+    {/if}
+  </div>
+  {#if !follow && messages.length > 0}
+    <div class="pointer-events-none absolute inset-x-0 bottom-3 flex justify-center">
+      <Button
+        variant={unseen ? 'default' : 'outline'}
+        size="sm"
+        class="pointer-events-auto rounded-full shadow-md"
+        onclick={jumpToLatest}
+        aria-label={unseen ? 'New messages; jump to the latest' : 'Jump to the latest message'}
+      >
+        <Icon name="arrow-down" size={14} />
+        {unseen ? 'New messages' : 'Latest'}
+      </Button>
     </div>
   {/if}
 </div>

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

@@ -10,6 +10,7 @@ interface Props {
     ontool?: (toolName: string, params?: Record<string, unknown>) => void;
     onnotify?: (message: string) => void;
     onretry?: () => void;
+    oncontinue?: () => void;
     empty?: import('svelte').Snippet;
 }
 declare const MessageList: import("svelte").Component<Props, {}, "">;

package/dist/components/MessageList.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageList.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI/C,UAAU,KAAK;IACb,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CAClC;AAmEH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MessageList.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CAClC;AA2HH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/ProposalCard.svelte

@@ -0,0 +1,39 @@
+<!--
+  @component
+  Read-only view of a document edit the agent proposed. The chat never applies edits: they are
+  reviewed and applied from the Excel or Word add-in, which re-reads the target first.
+-->
+<script lang="ts">
+  import type { ProposedOperation } from '@classic-homes/agent-contracts';
+  import { cn, Icon } from '@classic-homes/theme-svelte';
+  import { describeProposal } from '../message-format.js';
+
+  interface Props {
+    operation: ProposedOperation;
+    class?: string;
+  }
+  let { operation, class: className }: Props = $props();
+  const info = $derived(describeProposal(operation));
+</script>
+
+<div
+  class={cn(
+    'flex max-w-md gap-3 rounded-lg border border-dashed border-border px-3 py-2',
+    className,
+  )}
+  data-operation-id={operation.operationId}
+>
+  <span
+    class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"
+  >
+    <Icon name={info.host === 'Excel' ? 'table' : 'file-text'} size={16} />
+  </span>
+  <div class="min-w-0 flex-1 text-sm">
+    <p class="font-medium text-foreground">
+      {info.action}{#if info.target}
+        <span class="font-mono text-xs text-muted-foreground"> · {info.target}</span>{/if}
+    </p>
+    <p class="text-muted-foreground [overflow-wrap:anywhere]">{operation.summary}</p>
+    <p class="mt-1 text-xs text-muted-foreground">Apply from the {info.host} add-in.</p>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+import type { ProposedOperation } from '@classic-homes/agent-contracts';
+interface Props {
+    operation: ProposedOperation;
+    class?: string;
+}
+/**
+ * Read-only view of a document edit the agent proposed. The chat never applies edits: they are
+ * reviewed and applied from the Excel or Word add-in, which re-reads the target first.
+ */
+declare const ProposalCard: import("svelte").Component<Props, {}, "">;
+type ProposalCard = ReturnType<typeof ProposalCard>;
+export default ProposalCard;
+//# sourceMappingURL=ProposalCard.svelte.d.ts.map

package/dist/components/ProposalCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProposalCard.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ProposalCard.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAKtE,UAAU,KAAK;IACb,SAAS,EAAE,iBAAiB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8BH;;;GAGG;AACH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/UserMessage.svelte

@@ -0,0 +1,46 @@
+<!--
+  @component
+  The user's turn: attachments and context above a right-aligned muted bubble, then the action bar.
+-->
+<script lang="ts">
+  import { Icon } from '@classic-homes/theme-svelte';
+  import type { UserMessage } from '../reducer.js';
+  import { fileIcon, formatBytes } from '../message-format.js';
+  import MessageActions from './MessageActions.svelte';
+
+  interface Props {
+    message: UserMessage;
+    last?: boolean;
+  }
+  let { message, last = false }: Props = $props();
+</script>
+
+<div class="group/message flex flex-col items-end gap-1 px-4 py-2" data-role="user">
+  {#if message.attachments.length || message.contextLabel}
+    <ul class="flex max-w-[85%] flex-wrap justify-end gap-1.5" aria-label="Attached">
+      {#if message.contextLabel}
+        <li
+          class="inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground"
+        >
+          <Icon name="link" size={12} />
+          {message.contextLabel}
+        </li>
+      {/if}
+      {#each message.attachments as file (file.fileId)}
+        <li
+          class="inline-flex max-w-60 items-center gap-1.5 rounded-md border border-border bg-background px-2 py-1 text-xs"
+        >
+          <Icon name={fileIcon(file.mimeType)} size={14} class="shrink-0 text-muted-foreground" />
+          <span class="truncate text-foreground">{file.name}</span>
+          <span class="shrink-0 text-muted-foreground">{formatBytes(file.bytes)}</span>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+  <div
+    class="max-w-[85%] whitespace-pre-wrap rounded-2xl rounded-br-md bg-muted px-4 py-2.5 text-foreground [overflow-wrap:anywhere]"
+  >
+    {message.text}
+  </div>
+  <MessageActions text={message.text} createdAt={message.createdAt} visible={last} align="end" />
+</div>

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

@@ -0,0 +1,10 @@
+import type { UserMessage } from '../reducer.js';
+interface Props {
+    message: UserMessage;
+    last?: boolean;
+}
+/** The user's turn: attachments and context above a right-aligned muted bubble, then the action bar. */
+declare const UserMessage: import("svelte").Component<Props, {}, "">;
+type UserMessage = ReturnType<typeof UserMessage>;
+export default UserMessage;
+//# sourceMappingURL=UserMessage.svelte.d.ts.map

package/dist/components/UserMessage.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserMessage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/UserMessage.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK/C,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAqCH,wGAAwG;AACxG,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/messages.svelte.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=messages.svelte.test.d.ts.map

package/dist/components/messages.svelte.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.svelte.test.d.ts","sourceRoot":"","sources":["../../src/lib/components/messages.svelte.test.ts"],"names":[],"mappings":""}