@classic-homes/agent-chat 0.1.2 → 0.2.0

package/dist/components/Composer.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { Button, Icon } from '@classic-homes/theme-svelte';
+  import { Button, Icon, Textarea } from '@classic-homes/theme-svelte';
   import type { FileRef } from '@classic-homes/agent-contracts';
   import { LIMITS } from '@classic-homes/agent-contracts';
+  import { composerKeyAction } from '../composer-keys.js';
 
   interface Props {
     disabled?: boolean;
@@ -30,7 +31,7 @@
     context,
   }: Props = $props();
 
-  let textarea: HTMLTextAreaElement | undefined = $state();
+  let textarea = $state<HTMLTextAreaElement | null>(null);
   let fileInput: HTMLInputElement | undefined = $state();
   let uploading = $state(0);
   let uploadError = $state<string | undefined>();
@@ -43,20 +44,18 @@
     const text = value.trim();
     if (!text || disabled || streaming || uploading > 0) return;
     value = '';
-    if (textarea) textarea.style.height = 'auto';
     onsend?.(text);
   }
   function onkeydown(event: KeyboardEvent): void {
-    if (event.key === 'Enter' && !event.shiftKey) {
+    const action = composerKeyAction(event, streaming);
+    if (action === 'send') {
       event.preventDefault();
       submit();
+    } else if (action === 'cancel') {
+      event.preventDefault();
+      oncancel?.();
     }
   }
-  function autosize(): void {
-    if (!textarea) return;
-    textarea.style.height = 'auto';
-    textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
-  }
   async function onfiles(event: Event): Promise<void> {
     const input = event.currentTarget as HTMLInputElement;
     const chosen = [...(input.files ?? [])];
@@ -81,131 +80,89 @@
 </script>
 
 <form
-  class="agent-composer"
+  class="bg-background px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-2"
   onsubmit={(e) => {
     e.preventDefault();
     submit();
   }}
   aria-label="Send a message"
 >
-  {#if context}<div class="agent-composer__context">{@render context()}</div>{/if}
-  {#if files.length || uploadError}
-    <div class="agent-composer__files">
-      {#each files as file (file.fileId)}
-        <span class="agent-composer__file">
-          <Icon name="file" size={12} />
-          {file.name}
-          <button
-            type="button"
-            aria-label={`Remove ${file.name}`}
-            onclick={() => {
-              files = files.filter((f) => f.fileId !== file.fileId);
-              onremovefile?.(file.fileId);
-            }}>×</button
+  <div
+    class="mx-auto w-full max-w-3xl rounded-xl border border-input bg-background shadow-sm transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20"
+  >
+    {#if files.length || uploadError}
+      <div class="flex flex-wrap items-center gap-1.5 px-3 pt-3 text-xs">
+        {#each files as file (file.fileId)}
+          <span
+            class="inline-flex max-w-full items-center gap-1 rounded-full bg-muted py-0.5 pl-2 pr-0.5"
           >
-        </span>
-      {/each}
-      {#if uploadError}<span class="agent-composer__error" role="alert">{uploadError}</span>{/if}
-    </div>
-  {/if}
-  <div class="agent-composer__row">
-    {#if upload}
-      <input bind:this={fileInput} type="file" multiple hidden onchange={onfiles} />
-      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        aria-label="Attach files"
-        disabled={disabled || uploading > 0}
-        loading={uploading > 0}
-        onclick={() => fileInput?.click()}
-      >
-        {#if uploading === 0}<Icon name="upload" size={18} />{/if}
-      </Button>
+            <Icon name="file" size={12} class="shrink-0 text-muted-foreground" />
+            <span class="truncate">{file.name}</span>
+            <button
+              type="button"
+              class="inline-flex size-5 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label={`Remove ${file.name}`}
+              onclick={() => {
+                files = files.filter((f) => f.fileId !== file.fileId);
+                onremovefile?.(file.fileId);
+              }}><Icon name="close" size={12} /></button
+            >
+          </span>
+        {/each}
+        {#if uploadError}<span class="text-destructive" role="alert">{uploadError}</span>{/if}
+      </div>
     {/if}
-    <textarea
-      bind:this={textarea}
+    <Textarea
+      bind:ref={textarea}
       bind:value
-      class="agent-composer__field"
-      rows="1"
+      autosize
+      rows={1}
+      maxRows={8}
+      class="border-0 bg-transparent px-3 pb-1 pt-3 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
       {placeholder}
       aria-label="Message"
       maxlength={LIMITS.messageChars}
       {disabled}
       {onkeydown}
-      oninput={autosize}></textarea>
-    {#if streaming}
-      <Button
-        type="button"
-        variant="outline"
-        size="icon"
-        aria-label="Stop"
-        onclick={() => oncancel?.()}><Icon name="square" size={16} /></Button
-      >
-    {:else}
-      <Button
-        type="submit"
-        size="icon"
-        aria-label="Send"
-        disabled={disabled || !value.trim() || uploading > 0}><Icon name="send" size={18} /></Button
-      >
-    {/if}
+    />
+    <div class="flex items-center gap-1 px-2 pb-2">
+      {#if upload}
+        <input bind:this={fileInput} type="file" multiple hidden onchange={onfiles} />
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          class="size-8 text-muted-foreground"
+          aria-label="Attach files"
+          disabled={disabled || uploading > 0}
+          loading={uploading > 0}
+          onclick={() => fileInput?.click()}
+        >
+          {#if uploading === 0}<Icon name="paperclip" size={18} />{/if}
+        </Button>
+      {/if}
+      {#if context}<div class="min-w-0">{@render context()}</div>{/if}
+      <div class="ml-auto">
+        {#if streaming}
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            class="size-8"
+            aria-label="Stop"
+            onclick={() => oncancel?.()}><Icon name="stop" size={14} /></Button
+          >
+        {:else}
+          <Button
+            type="submit"
+            size="icon"
+            class="size-8"
+            aria-label="Send"
+            disabled={disabled || !value.trim() || uploading > 0}
+            ><Icon name="send" size={16} /></Button
+          >
+        {/if}
+      </div>
+    </div>
   </div>
 </form>
-
-<style>
-  .agent-composer {
-    padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
-    border-top: 1px solid hsl(var(--border));
-    background: hsl(var(--background));
-    display: grid;
-    gap: 0.5rem;
-  }
-  .agent-composer__row {
-    display: flex;
-    align-items: flex-end;
-    gap: 0.5rem;
-  }
-  .agent-composer__field {
-    flex: 1;
-    resize: none;
-    min-height: 2.75rem;
-    max-height: 200px;
-    padding: 0.625rem 0.875rem;
-    border: 1px solid hsl(var(--border));
-    border-radius: 1rem;
-    background: hsl(var(--background));
-    color: hsl(var(--foreground));
-    font: inherit;
-    font-size: 16px;
-    line-height: 1.5;
-  }
-  .agent-composer__field:focus {
-    outline: none;
-    border-color: hsl(var(--primary));
-    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15);
-  }
-  .agent-composer__files {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.375rem;
-    font-size: 0.75rem;
-  }
-  .agent-composer__file {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.125rem 0.5rem;
-    border-radius: 9999px;
-    background: hsl(var(--muted));
-  }
-  .agent-composer__file button {
-    border: 0;
-    background: none;
-    cursor: pointer;
-    font: inherit;
-  }
-  .agent-composer__error {
-    color: hsl(var(--destructive));
-  }
-</style>

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

@@ -1 +1 @@
-{"version":3,"file":"Composer.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Composer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAI5D,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACpC;AA6GH,QAAA,MAAM,QAAQ;iBArFO,IAAI;qBAqF6B,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Composer.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Composer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAK5D,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACpC;AA8GH,QAAA,MAAM,QAAQ;iBArFO,IAAI;qBAqF6B,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/ConversationDialogs.svelte

@@ -0,0 +1,134 @@
+<!--
+  @component
+  Rename and delete dialogs for one conversation, shared by `ConversationSidebar` and
+  `ChatHeader`. Set `renaming` or `deleting` to a conversation to open the matching dialog.
+  A rejected `onrename` keeps the dialog open with the message; a rejected `ondelete` is
+  reported through `onerror` (the confirm dialog has already closed). Both dialogs usually open
+  from a menu item that is gone by the time they close, so focus returns to `returnFocus` (the
+  menu trigger) when it is still on the page.
+-->
+<script lang="ts" module>
+  export interface ConversationRef {
+    conversationId: string;
+    title: string;
+  }
+</script>
+
+<script lang="ts">
+  import { AlertDialog, Button, Dialog, Input } from '@classic-homes/theme-svelte';
+
+  interface Props {
+    renaming?: ConversationRef | null;
+    deleting?: ConversationRef | null;
+    onrename?: (conversationId: string, title: string) => void | Promise<void>;
+    ondelete?: (conversationId: string) => void | Promise<void>;
+    onerror?: (message: string) => void;
+    /** Element to focus when a dialog closes, e.g. the menu trigger that opened it. */
+    returnFocus?: HTMLElement | null;
+  }
+  let {
+    renaming = $bindable(null),
+    deleting = $bindable(null),
+    onrename,
+    ondelete,
+    onerror,
+    returnFocus = null,
+  }: Props = $props();
+
+  const uid = $props.id();
+  const formId = `${uid}-rename`;
+  const errorId = `${uid}-rename-error`;
+  const MAX_TITLE = 200;
+  let draft = $state('');
+  let saving = $state(false);
+  let renameError = $state<string | undefined>();
+
+  $effect(() => {
+    if (renaming) {
+      draft = renaming.title;
+      renameError = undefined;
+    }
+  });
+
+  function message(err: unknown, fallback: string): string {
+    return err instanceof Error && err.message ? err.message : fallback;
+  }
+
+  async function saveRename(event: SubmitEvent): Promise<void> {
+    event.preventDefault();
+    const target = renaming;
+    const title = draft.trim();
+    if (!target || !title || saving) return;
+    if (title === target.title) {
+      renaming = null;
+      return;
+    }
+    saving = true;
+    renameError = undefined;
+    try {
+      await onrename?.(target.conversationId, title);
+      renaming = null;
+    } catch (err) {
+      renameError = message(err, 'Could not rename the conversation.');
+    } finally {
+      saving = false;
+    }
+  }
+
+  function restoreFocus(event: Event): void {
+    if (!returnFocus?.isConnected) return;
+    event.preventDefault();
+    returnFocus.focus();
+  }
+
+  async function confirmDelete(): Promise<void> {
+    const target = deleting;
+    deleting = null;
+    if (!target) return;
+    try {
+      await ondelete?.(target.conversationId);
+    } catch (err) {
+      onerror?.(message(err, 'Could not delete the conversation.'));
+    }
+  }
+</script>
+
+<Dialog
+  open={renaming !== null}
+  onOpenChange={(open) => {
+    if (!open && !saving) renaming = null;
+  }}
+  title="Rename conversation"
+  size="sm"
+  onCloseAutoFocus={restoreFocus}
+>
+  <form id={formId} class="grid gap-2" onsubmit={saveRename}>
+    <Input
+      bind:value={draft}
+      aria-label="Conversation title"
+      maxlength={MAX_TITLE}
+      aria-invalid={renameError ? true : undefined}
+      aria-describedby={renameError ? errorId : undefined}
+    />
+    {#if renameError}
+      <p id={errorId} class="text-sm text-destructive" role="alert">{renameError}</p>
+    {/if}
+  </form>
+  {#snippet footer()}
+    <Button variant="outline" disabled={saving} onclick={() => (renaming = null)}>Cancel</Button>
+    <Button type="submit" form={formId} loading={saving} disabled={!draft.trim()}>Save</Button>
+  {/snippet}
+</Dialog>
+
+<AlertDialog
+  open={deleting !== null}
+  onOpenChange={(open) => {
+    if (!open) deleting = null;
+  }}
+  title="Delete this conversation?"
+  description={deleting ? `“${deleting.title}” will be deleted. This cannot be undone.` : undefined}
+  confirmText="Delete"
+  confirmVariant="destructive"
+  onConfirm={() => void confirmDelete()}
+  onCloseAutoFocus={restoreFocus}
+/>

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

@@ -0,0 +1,25 @@
+export interface ConversationRef {
+    conversationId: string;
+    title: string;
+}
+interface Props {
+    renaming?: ConversationRef | null;
+    deleting?: ConversationRef | null;
+    onrename?: (conversationId: string, title: string) => void | Promise<void>;
+    ondelete?: (conversationId: string) => void | Promise<void>;
+    onerror?: (message: string) => void;
+    /** Element to focus when a dialog closes, e.g. the menu trigger that opened it. */
+    returnFocus?: HTMLElement | null;
+}
+/**
+ * Rename and delete dialogs for one conversation, shared by `ConversationSidebar` and
+ * `ChatHeader`. Set `renaming` or `deleting` to a conversation to open the matching dialog.
+ * A rejected `onrename` keeps the dialog open with the message; a rejected `ondelete` is
+ * reported through `onerror` (the confirm dialog has already closed). Both dialogs usually open
+ * from a menu item that is gone by the time they close, so focus returns to `returnFocus` (the
+ * menu trigger) when it is still on the page.
+ */
+declare const ConversationDialogs: import("svelte").Component<Props, {}, "renaming" | "deleting">;
+type ConversationDialogs = ReturnType<typeof ConversationDialogs>;
+export default ConversationDialogs;
+//# sourceMappingURL=ConversationDialogs.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationDialogs.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ConversationDialogs.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,eAAe;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAMD,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,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,mFAAmF;IACnF,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAClC;AA+FH;;;;;;;GAOG;AACH,QAAA,MAAM,mBAAmB,gEAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}