@classic-homes/agent-chat 0.1.2 → 0.2.0

package/dist/components/ConversationSidebar.svelte

@@ -1,6 +1,16 @@
 <script lang="ts">
-  import { Button, Icon } from '@classic-homes/theme-svelte';
+  import {
+    Button,
+    cn,
+    DropdownMenu,
+    EmptyState,
+    Icon,
+    Input,
+    Skeleton,
+    Spinner,
+  } from '@classic-homes/theme-svelte';
   import type { ConversationSummary } from '@classic-homes/agent-contracts';
+  import ConversationDialogs, { type ConversationRef } from './ConversationDialogs.svelte';
 
   interface Props {
     conversations: ConversationSummary[];
@@ -10,10 +20,16 @@
     query?: string;
     onselect?: (conversationId: string) => void;
     onnew?: () => void;
+    /** Called with the trimmed query once typing pauses for `searchDelay` ms. */
     onsearch?: (query: string) => void;
+    searchDelay?: number;
     onmore?: () => void;
-    onrename?: (conversationId: string, title: string) => void;
-    ondelete?: (conversationId: string) => void;
+    /** May return a promise; a rejection keeps the rename dialog open with its message. */
+    onrename?: (conversationId: string, title: string) => void | Promise<void>;
+    /** Called after the user confirms; a rejection is passed to `onerror`. */
+    ondelete?: (conversationId: string) => void | Promise<void>;
+    onerror?: (message: string) => void;
+    class?: string;
   }
   let {
     conversations,
@@ -24,9 +40,12 @@
     onselect,
     onnew,
     onsearch,
+    searchDelay = 250,
     onmore,
     onrename,
     ondelete,
+    onerror,
+    class: className,
   }: Props = $props();
 
   function groupLabel(iso: string): string {
@@ -49,140 +68,142 @@
     }
     return [...map.entries()];
   });
-  function rename(c: ConversationSummary): void {
-    const title = window.prompt('Rename conversation', c.title);
-    if (title && title.trim() && title !== c.title) onrename?.(c.conversationId, title.trim());
+  let renaming = $state<ConversationRef | null>(null);
+  let deleting = $state<ConversationRef | null>(null);
+  let navEl = $state<HTMLElement | null>(null);
+  let returnFocus = $state<HTMLElement | null>(null);
+  /** Remember the row's menu trigger before a dialog takes focus from the closing menu. */
+  function open(id: string, set: () => void): void {
+    returnFocus =
+      navEl?.querySelector<HTMLElement>(
+        `[data-conversation-id="${CSS.escape(id)}"] [aria-haspopup="menu"]`,
+      ) ?? null;
+    set();
+  }
+
+  let searchTimer: ReturnType<typeof setTimeout> | undefined;
+  function search(): void {
+    clearTimeout(searchTimer);
+    searchTimer = setTimeout(() => onsearch?.(query.trim()), searchDelay);
+  }
+  $effect(() => () => clearTimeout(searchTimer));
+
+  function rowItems(c: ConversationSummary) {
+    const ref = { conversationId: c.conversationId, title: c.title };
+    return [
+      ...(onrename
+        ? [
+            {
+              label: 'Rename',
+              icon: 'edit' as const,
+              onSelect: () => open(c.conversationId, () => (renaming = ref)),
+            },
+          ]
+        : []),
+      ...(ondelete
+        ? [
+            {
+              label: 'Delete',
+              icon: 'trash' as const,
+              destructive: true,
+              onSelect: () => open(c.conversationId, () => (deleting = ref)),
+            },
+          ]
+        : []),
+    ];
   }
 </script>
 
-<nav class="agent-sidebar" aria-label="Conversations">
-  <div class="agent-sidebar__top">
+<nav
+  bind:this={navEl}
+  class={cn('flex h-full w-72 flex-col border-r border-border bg-card', className)}
+  aria-label="Conversations"
+>
+  <div class="grid gap-2 p-3">
     <Button size="sm" onclick={() => onnew?.()}><Icon name="plus" size={14} /> New chat</Button>
-    <input
-      class="agent-sidebar__search"
+    <Input
       type="search"
-      placeholder="Search"
+      class="h-9"
+      placeholder="Search conversations"
       aria-label="Search conversations"
       bind:value={query}
-      oninput={() => onsearch?.(query)}
+      oninput={search}
     />
   </div>
-  <div class="agent-sidebar__list">
+  <div class="flex-1 overflow-y-auto px-2 pb-3">
+    {#if loading && conversations.length === 0}
+      <div class="grid gap-2 px-2 pt-3" aria-busy="true" aria-label="Loading conversations">
+        {#each [80, 65, 90, 55, 75] as width, i (i)}
+          <Skeleton variant="text" class="h-7" style={`width:${width}%`} />
+        {/each}
+      </div>
+    {:else if conversations.length === 0}
+      <EmptyState
+        size="sm"
+        icon={query.trim() ? 'search' : 'chat'}
+        headingLevel="p"
+        title={query.trim() ? 'No matching conversations' : 'No conversations yet'}
+        description={query.trim() ? 'Try another search.' : 'Start a chat to see it here.'}
+        class="py-8"
+      />
+    {/if}
     {#each groups as [label, items] (label)}
-      <div class="agent-sidebar__group">{label}</div>
+      <div
+        class="sticky top-0 z-[1] bg-card px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"
+      >
+        {label}
+      </div>
       {#each items as c (c.conversationId)}
+        {@const active = c.conversationId === selectedId}
+        {@const menu = rowItems(c)}
         <div
-          class="agent-sidebar__row"
-          class:agent-sidebar__row--active={c.conversationId === selectedId}
+          data-conversation-id={c.conversationId}
+          class={cn(
+            'group flex items-center gap-1 rounded-md pr-1 hover:bg-muted',
+            active && 'bg-muted font-medium',
+          )}
         >
           <button
             type="button"
-            class="agent-sidebar__title"
+            class="flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-current={active ? 'page' : undefined}
             onclick={() => onselect?.(c.conversationId)}
             title={c.title}
           >
-            {c.title}{c.activeRequestId ? ' …' : ''}
+            <span class="truncate">{c.title}</span>
+            {#if c.activeRequestId}<Spinner
+                size="sm"
+                class="size-3 shrink-0"
+                label="Answering"
+              />{/if}
           </button>
-          <div class="agent-sidebar__actions">
-            {#if onrename}<button type="button" aria-label="Rename" onclick={() => rename(c)}
-                ><Icon name="edit" size={13} /></button
-              >{/if}
-            {#if ondelete}<button
-                type="button"
-                aria-label="Delete"
-                onclick={() => ondelete(c.conversationId)}><Icon name="trash" size={13} /></button
-              >{/if}
-          </div>
+          {#if menu.length}
+            <DropdownMenu
+              items={menu}
+              align="end"
+              triggerVariant="ghost"
+              triggerSize="icon"
+              triggerLabel={`Options for ${c.title}`}
+              triggerClass={cn(
+                'size-7 shrink-0 text-muted-foreground opacity-0 focus-visible:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 data-[state=open]:opacity-100 [@media(hover:none)]:opacity-100',
+                active && 'opacity-100',
+              )}
+              showChevron={false}
+            >
+              {#snippet trigger()}<Icon name="more-horizontal" size={16} />{/snippet}
+            </DropdownMenu>
+          {/if}
         </div>
       {/each}
     {/each}
-    {#if !loading && conversations.length === 0}<div class="agent-sidebar__empty">
-        No conversations yet.
-      </div>{/if}
-    {#if hasMore}<Button variant="ghost" size="sm" {loading} onclick={() => onmore?.()}
-        >Load more</Button
+    {#if hasMore}<Button
+        variant="ghost"
+        size="sm"
+        class="w-full"
+        {loading}
+        onclick={() => onmore?.()}>Load more</Button
       >{/if}
   </div>
 </nav>
 
-<style>
-  .agent-sidebar {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    border-right: 1px solid hsl(var(--border));
-    background: hsl(var(--card));
-    width: 16rem;
-  }
-  .agent-sidebar__top {
-    display: grid;
-    gap: 0.5rem;
-    padding: 0.75rem;
-  }
-  .agent-sidebar__search {
-    font: inherit;
-    font-size: 0.875rem;
-    padding: 0.375rem 0.625rem;
-    border: 1px solid hsl(var(--border));
-    border-radius: 0.5rem;
-    background: hsl(var(--background));
-    color: inherit;
-  }
-  .agent-sidebar__list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0 0.5rem 0.75rem;
-  }
-  .agent-sidebar__group {
-    font-size: 0.6875rem;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: hsl(var(--muted-foreground));
-    padding: 0.75rem 0.5rem 0.25rem;
-  }
-  .agent-sidebar__row {
-    display: flex;
-    align-items: center;
-    border-radius: 0.5rem;
-  }
-  .agent-sidebar__row:hover,
-  .agent-sidebar__row--active {
-    background: hsl(var(--muted));
-  }
-  .agent-sidebar__title {
-    flex: 1;
-    min-width: 0;
-    text-align: left;
-    background: none;
-    border: 0;
-    padding: 0.375rem 0.5rem;
-    font: inherit;
-    font-size: 0.875rem;
-    color: inherit;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .agent-sidebar__actions {
-    display: none;
-    gap: 0.125rem;
-    padding-right: 0.25rem;
-  }
-  .agent-sidebar__row:hover .agent-sidebar__actions,
-  .agent-sidebar__row--active .agent-sidebar__actions {
-    display: flex;
-  }
-  .agent-sidebar__actions button {
-    border: 0;
-    background: none;
-    cursor: pointer;
-    color: hsl(var(--muted-foreground));
-    padding: 0.25rem;
-  }
-  .agent-sidebar__empty {
-    font-size: 0.8125rem;
-    color: hsl(var(--muted-foreground));
-    padding: 0.5rem;
-  }
-</style>
+<ConversationDialogs bind:renaming bind:deleting {onrename} {ondelete} {onerror} {returnFocus} />

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

@@ -7,10 +7,16 @@ interface Props {
     query?: string;
     onselect?: (conversationId: string) => void;
     onnew?: () => void;
+    /** Called with the trimmed query once typing pauses for `searchDelay` ms. */
     onsearch?: (query: string) => void;
+    searchDelay?: number;
     onmore?: () => void;
-    onrename?: (conversationId: string, title: string) => void;
-    ondelete?: (conversationId: string) => void;
+    /** May return a promise; a rejection keeps the rename dialog open with its message. */
+    onrename?: (conversationId: string, title: string) => void | Promise<void>;
+    /** Called after the user confirms; a rejection is passed to `onerror`. */
+    ondelete?: (conversationId: string) => void | Promise<void>;
+    onerror?: (message: string) => void;
+    class?: string;
 }
 declare const ConversationSidebar: import("svelte").Component<Props, {}, "query">;
 type ConversationSidebar = ReturnType<typeof ConversationSidebar>;

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

@@ -1 +1 @@
-{"version":3,"file":"ConversationSidebar.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ConversationSidebar.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAGxE,UAAU,KAAK;IACb,aAAa,EAAE,mBAAmB,EAAE,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AA4EH,QAAA,MAAM,mBAAmB,gDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ConversationSidebar.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ConversationSidebar.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAIxE,UAAU,KAAK;IACb,aAAa,EAAE,mBAAmB,EAAE,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0IH,QAAA,MAAM,mBAAmB,gDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/Markdown.svelte

@@ -0,0 +1,48 @@
+<!--
+  @component
+  Renders sanitized markdown HTML from `parseMarkdown`, with the chat prose rules. The rules are
+  Tailwind arbitrary variants on the container rather than a stylesheet: the Classic App's
+  cascade-layers polyfill raises the specificity of its base styles above any plain component
+  CSS, while utilities still win. Values follow theme-docs `.markdown-content`, sized for chat.
+-->
+<script lang="ts" module>
+  const PROSE = [
+    'agent-markdown leading-[1.65] text-foreground [overflow-wrap:anywhere]',
+    '[&>:first-child]:mt-0 [&>:last-child]:mb-0',
+    '[&_p]:mb-3 [&_p]:mt-0 [&_p:empty]:hidden',
+    '[&_h2]:mb-2 [&_h2]:mt-5 [&_h2]:text-[1.25em] [&_h2]:font-semibold [&_h2]:leading-snug',
+    '[&_h3]:mb-2 [&_h3]:mt-5 [&_h3]:text-[1.125em] [&_h3]:font-semibold [&_h3]:leading-snug',
+    '[&_h4]:mb-2 [&_h4]:mt-4 [&_h4]:text-[1em] [&_h4]:font-semibold [&_h4]:leading-snug',
+    '[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 [&_a:hover]:text-primary/80',
+    '[&_ul]:mb-3 [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:mb-3 [&_ol]:list-decimal [&_ol]:pl-6',
+    '[&_li]:mb-1 [&_li>ul]:mb-0 [&_li>ul]:mt-1 [&_li>ol]:mb-0 [&_li>ol]:mt-1',
+    '[&_ul.agent-tasklist]:list-none [&_ul.agent-tasklist]:pl-1',
+    '[&_.agent-tasklist_input]:mr-1.5 [&_.agent-tasklist_input]:accent-primary',
+    '[&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.875em]',
+    '[&_pre]:mb-3 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:border-border [&_pre]:bg-muted/60 [&_pre]:px-4 [&_pre]:py-3 [&_pre]:text-[13px] [&_pre]:leading-relaxed',
+    '[&_pre_code]:rounded-none [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-[length:inherit]',
+    '[&_blockquote]:mb-3 [&_blockquote]:border-l-4 [&_blockquote]:border-primary [&_blockquote]:bg-muted/50 [&_blockquote]:px-4 [&_blockquote]:py-2 [&_blockquote]:text-muted-foreground',
+    '[&_hr]:my-5 [&_hr]:border-border',
+    '[&_table]:mb-3 [&_table]:block [&_table]:max-w-full [&_table]:border-collapse [&_table]:overflow-x-auto [&_table]:text-[0.875em]',
+    '[&_th]:border [&_th]:border-border [&_th]:px-3 [&_th]:py-1.5 [&_th]:text-left [&_th]:align-top',
+    '[&_td]:border [&_td]:border-border [&_td]:px-3 [&_td]:py-1.5 [&_td]:text-left [&_td]:align-top',
+    '[&_th]:bg-muted [&_th]:font-semibold',
+    '[&_img]:max-w-full [&_img]:rounded-lg',
+  ].join(' ');
+</script>
+
+<script lang="ts">
+  import { cn } from '@classic-homes/theme-svelte';
+
+  interface Props {
+    /** Output of `parseMarkdown` (already sanitized by DOMPurify). */
+    html: string;
+    class?: string;
+    onclick?: (event: MouseEvent) => void;
+  }
+  let { html, class: className, onclick }: Props = $props();
+</script>
+
+<!-- Clicks are delegated to internal links inside the HTML; the links themselves are focusable. -->
+<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+<div class={className ? `${PROSE} ${cn(className)}` : PROSE} {onclick}>{@html html}</div>

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

@@ -0,0 +1,16 @@
+interface Props {
+    /** Output of `parseMarkdown` (already sanitized by DOMPurify). */
+    html: string;
+    class?: string;
+    onclick?: (event: MouseEvent) => void;
+}
+/**
+ * Renders sanitized markdown HTML from `parseMarkdown`, with the chat prose rules. The rules are
+ * Tailwind arbitrary variants on the container rather than a stylesheet: the Classic App's
+ * cascade-layers polyfill raises the specificity of its base styles above any plain component
+ * CSS, while utilities still win. Values follow theme-docs `.markdown-content`, sized for chat.
+ */
+declare const Markdown: import("svelte").Component<Props, {}, "">;
+type Markdown = ReturnType<typeof Markdown>;
+export default Markdown;
+//# sourceMappingURL=Markdown.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Markdown.svelte.ts"],"names":[],"mappings":"AA+BE,UAAU,KAAK;IACb,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAgBH;;;;;GAKG;AACH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/MessageItem.svelte

@@ -1,5 +1,6 @@
 <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';
@@ -78,14 +79,18 @@
 </script>
 
 {#if message.role === 'user'}
-  <div class="agent-msg agent-msg--user">
-    {#if message.contextLabel}<div class="agent-msg__context">
+  <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="agent-msg__bubble">{message.text}</div>
+    <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="agent-msg__attachments">
-        {#each message.attachments as file (file.fileId)}<li>
+      <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}
@@ -93,15 +98,12 @@
     {/if}
   </div>
 {:else}
-  <div class="agent-msg agent-msg--assistant" data-status={message.status}>
+  <div class="min-w-0 px-4 py-2" data-status={message.status}>
     <ToolTimeline tools={message.tools} delegations={message.delegations} {streaming} />
-    <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
-    <div class="agent-markdown" onclick={handleClick}>
-      {@html html}
-      {#if streaming && !message.text}<span class="agent-msg__thinking">Thinking…</span>{/if}
-    </div>
+    {#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="agent-msg__chips">
+      <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} />
@@ -114,18 +116,21 @@
       <UiFrame {resource} {sandboxOrigin} {onprompt} {ontool} {onnotify} />
     {/each}
     {#if message.files.length}
-      <ul class="agent-msg__files">
+      <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="agent-msg__image"
+                class="mb-1 block max-h-96 max-w-full rounded-lg"
                 src={fileUrl(file.fileId)}
                 alt={file.name}
                 loading="lazy"
               />
             {/if}
-            <a href={fileUrl(file.fileId)} download={file.name}
+            <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>
@@ -133,14 +138,17 @@
       </ul>
     {/if}
     {#if message.proposals.length}
-      <div class="agent-msg__note">
+      <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="agent-msg__error" role="alert">
+      <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}
@@ -148,106 +156,9 @@
           >{/if}
       </div>
     {:else if message.status === 'cancelled'}
-      <div class="agent-msg__note">Stopped.</div>
+      <div class="mt-1 text-xs text-muted-foreground">Stopped.</div>
     {:else if message.status === 'incomplete'}
-      <div class="agent-msg__note">The answer was cut short.</div>
+      <div class="mt-1 text-xs text-muted-foreground">The answer was cut short.</div>
     {/if}
   </div>
 {/if}
-
-<style>
-  .agent-msg {
-    padding: 0.5rem 1rem;
-    max-width: 48rem;
-  }
-  .agent-msg--user {
-    margin-left: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-  }
-  .agent-msg__bubble {
-    background: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
-    border-radius: 1rem 1rem 0.25rem 1rem;
-    padding: 0.5rem 0.875rem;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-  }
-  .agent-msg__context,
-  .agent-msg__attachments,
-  .agent-msg__note {
-    font-size: 0.75rem;
-    color: hsl(var(--muted-foreground));
-  }
-  .agent-msg__attachments,
-  .agent-msg__files {
-    list-style: none;
-    padding: 0;
-    margin: 0.25rem 0 0;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
-  .agent-msg__chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.375rem;
-    margin: 0.5rem 0;
-  }
-  .agent-msg__image {
-    display: block;
-    max-width: 100%;
-    max-height: 24rem;
-    border-radius: 0.5rem;
-    margin-bottom: 0.25rem;
-  }
-  .agent-msg__thinking {
-    color: hsl(var(--muted-foreground));
-    font-style: italic;
-  }
-  .agent-msg__error {
-    margin-top: 0.5rem;
-    padding: 0.5rem 0.75rem;
-    border-radius: 0.5rem;
-    background: hsl(var(--destructive) / 0.1);
-    color: hsl(var(--destructive));
-    font-size: 0.875rem;
-  }
-  :global(.agent-markdown) {
-    overflow-wrap: anywhere;
-    line-height: 1.6;
-  }
-  :global(.agent-markdown pre) {
-    background: hsl(var(--muted));
-    padding: 0.75rem;
-    border-radius: 0.5rem;
-    overflow: auto;
-    font-size: 0.8125rem;
-  }
-  :global(.agent-markdown code) {
-    font-family: ui-monospace, monospace;
-    font-size: 0.875em;
-  }
-  :global(.agent-markdown table) {
-    border-collapse: collapse;
-    margin: 0.5rem 0;
-    font-size: 0.875rem;
-  }
-  :global(.agent-markdown th),
-  :global(.agent-markdown td) {
-    border: 1px solid hsl(var(--border));
-    padding: 0.25rem 0.5rem;
-    text-align: left;
-  }
-  :global(.agent-markdown blockquote) {
-    border-left: 3px solid hsl(var(--border));
-    margin: 0.5rem 0;
-    padding-left: 0.75rem;
-    color: hsl(var(--muted-foreground));
-  }
-  :global(.agent-markdown img) {
-    max-width: 100%;
-    border-radius: 0.5rem;
-  }
-</style>

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":"AAIA,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;AA6IH,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":"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"}