@ouraihub/aether-ui 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouraihub/aether-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "license": "LGPL-3.0-only",
   "repository": {
     "type": "git",
@@ -30,7 +30,7 @@
     "svelte": "^5.57.1"
   },
   "dependencies": {
-    "@ouraihub/aether-contracts": "0.1.0",
+    "@ouraihub/aether-contracts": "0.1.2",
     "@internationalized/date": "3.12.4",
     "@lucide/svelte": "0.561.0",
     "@tauri-apps/api": "2.11.1",
@@ -49,7 +49,7 @@
     "@tailwindcss/vite": "4.3.3",
     "@testing-library/svelte": "5.4.2",
     "jsdom": "30.1.2",
-    "svelte": "5.57.1",
+    "svelte": "5.57.2",
     "svelte-check": "4.7.6",
     "tailwindcss": "4.3.3",
     "typescript": "5.9.3",

package/src/chat/ApprovalCard.svelte

@@ -12,12 +12,18 @@
 <Alert.Root aria-label={t('chat.approval.title', { name: tool.name })}>
   <Alert.Title>{t('chat.approval.title', { name: tool.name })}</Alert.Title>
   <Alert.Description class="flex flex-col gap-2">
-    <span>{tool.server ? t('chat.approval.mcp', { server: tool.server }) : t('chat.approval.host')}</span>
+    <span
+      >{tool.server
+        ? t('chat.approval.mcp', { server: tool.server })
+        : t('chat.approval.host')}</span
+    >
     <pre
       class="bg-muted max-h-40 w-full overflow-auto rounded-kit-sm p-2 text-kit-xs whitespace-pre-wrap">{tool.pending}</pre>
     <span class="flex gap-2">
       <Button size="sm" onclick={() => onAnswer(true)}>{t('chat.approval.allow')}</Button>
-      <Button size="sm" variant="outline" onclick={() => onAnswer(false)}>{t('chat.approval.deny')}</Button>
+      <Button size="sm" variant="outline" onclick={() => onAnswer(false)}
+        >{t('chat.approval.deny')}</Button
+      >
     </span>
   </Alert.Description>
 </Alert.Root>

package/src/chat/ChatComposer.svelte

@@ -0,0 +1,319 @@
+<script lang="ts">
+  import { tick, untrack, type Snippet } from 'svelte'
+  import MaximizeIcon from '@lucide/svelte/icons/maximize-2'
+  import MinimizeIcon from '@lucide/svelte/icons/minimize-2'
+  import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'
+  import SquareIcon from '@lucide/svelte/icons/square'
+  import { Button } from '#lib/components/ui/button/index.js'
+
+  let {
+    value = $bindable(''),
+    label,
+    placeholder,
+    submitLabel,
+    stopLabel = 'Stop',
+    disabled = false,
+    running = false,
+    stopping = false,
+    maxlength,
+    onsubmit,
+    onstop,
+    oninput,
+    onpaste,
+    onfiles,
+    top,
+    tools,
+    actions,
+    override,
+    expandLabel = 'Expand input',
+    collapseLabel = 'Collapse input',
+  }: {
+    value?: string | undefined
+    label: string
+    placeholder?: string | undefined
+    submitLabel: string
+    stopLabel?: string | undefined
+    disabled?: boolean | undefined
+    running?: boolean | undefined
+    stopping?: boolean | undefined
+    maxlength?: number | undefined
+    onsubmit: () => void
+    onstop?: (() => void) | undefined
+    oninput?: (() => void) | undefined
+    onpaste?: ((event: ClipboardEvent) => void) | undefined
+    onfiles?: ((files: File[]) => void) | undefined
+    top?: Snippet | undefined
+    tools?: Snippet | undefined
+    actions?: Snippet | undefined
+    override?: Snippet | undefined
+    expandLabel?: string | undefined
+    collapseLabel?: string | undefined
+  } = $props()
+  let expanded = $state(false)
+  let textarea = $state<HTMLTextAreaElement | null>(null)
+  let normal = $state<HTMLFormElement | null>(null)
+  let replacement = $state<HTMLDivElement | null>(null)
+  let restoreFocus: HTMLElement | null = null
+  let overridden = false
+  function submit() {
+    if (!disabled && !running && !override) onsubmit()
+  }
+  function resize() {
+    if (!textarea) return
+    textarea.style.height = 'auto'
+    textarea.style.height = `${textarea.scrollHeight}px`
+  }
+  $effect(() => {
+    void value
+    void expanded
+    void override
+    void tick().then(resize)
+  })
+  $effect.pre(() => {
+    const next = !!override
+    untrack(() => {
+      if (next && !overridden) {
+        const active = document.activeElement
+        restoreFocus = active instanceof HTMLElement && normal?.contains(active) ? active : null
+      } else if (!next && overridden) {
+        const active = document.activeElement
+        const shouldRestore =
+          active === document.body || !!(active && replacement?.contains(active))
+        const target = restoreFocus
+        void tick().then(() => {
+          if (
+            shouldRestore &&
+            target?.isConnected &&
+            (document.activeElement === document.body || document.activeElement === active)
+          )
+            target.focus({ preventScroll: true })
+        })
+        restoreFocus = null
+      }
+      overridden = next
+    })
+  })
+</script>
+
+<div class="composer-shell">
+  <form
+    class="composer"
+    class:expanded
+    bind:this={normal}
+    hidden={!!override}
+    inert={!!override}
+    onsubmit={(event) => {
+      event.preventDefault()
+      submit()
+    }}
+    ondragover={(event) => {
+      if (onfiles && event.dataTransfer?.types.includes('Files')) event.preventDefault()
+    }}
+    ondrop={(event) => {
+      if (!onfiles || !event.dataTransfer?.files.length) return
+      event.preventDefault()
+      onfiles([...event.dataTransfer.files])
+    }}
+  >
+    <div class="expand-control">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-sm"
+        aria-label={expanded ? collapseLabel : expandLabel}
+        title={expanded ? collapseLabel : expandLabel}
+        aria-expanded={expanded}
+        onmousedown={(event) => event.preventDefault()}
+        onclick={() => {
+          expanded = !expanded
+        }}
+      >
+        {#if expanded}<MinimizeIcon />{:else}<MaximizeIcon />{/if}
+      </Button>
+    </div>
+    {#if top}<div class="composer-top">{@render top()}</div>{/if}
+    <textarea
+      bind:this={textarea}
+      bind:value
+      rows="2"
+      aria-label={label}
+      {placeholder}
+      {maxlength}
+      oninput={() => {
+        resize()
+        oninput?.()
+      }}
+      {onpaste}
+      onkeydown={(event) => {
+        if (event.key === 'Escape' && expanded && !event.isComposing && !event.defaultPrevented) {
+          event.preventDefault()
+          event.stopPropagation()
+          expanded = false
+          return
+        }
+        if (
+          event.key === 'Enter' &&
+          (event.ctrlKey || event.metaKey) &&
+          !event.isComposing &&
+          event.keyCode !== 229
+        ) {
+          event.preventDefault()
+          if (!event.repeat) submit()
+        }
+      }}></textarea>
+    <div class="composer-tools">
+      <div class="tool-group">
+        {#if tools}{@render tools()}{/if}
+      </div>
+      <div class="tool-group send-tools">
+        {#if actions}{@render actions()}{/if}
+        {#if running && onstop}<Button
+            type="button"
+            variant="destructive"
+            size="icon-sm"
+            disabled={stopping}
+            aria-label={stopLabel}
+            title={stopLabel}
+            onclick={onstop}><SquareIcon /></Button
+          >
+        {:else}<Button
+            type="submit"
+            size="icon-sm"
+            disabled={disabled || running}
+            aria-label={submitLabel}
+            title={submitLabel}><ArrowUpIcon /></Button
+          >{/if}
+      </div>
+    </div>
+  </form>
+  {#if override}<div class="composer-override" bind:this={replacement}>
+      {@render override()}
+    </div>{/if}
+</div>
+
+<style>
+  /* Hallmark · component: integrated composer · theme: host semantic tokens */
+  .composer-shell {
+    min-width: 0;
+    container-type: inline-size;
+    container-name: composer;
+  }
+  .composer {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 0;
+    max-height: 68cqh;
+    overflow-y: auto;
+    border: 1px solid var(--color-border);
+    border-radius: calc(var(--kit-radius, var(--radius)) * 1.5);
+    padding: 0.5rem;
+    background: var(--color-background);
+  }
+  .composer[hidden] {
+    display: none;
+  }
+  .expand-control {
+    position: absolute;
+    top: 0.25rem;
+    right: 0.25rem;
+  }
+  @media (pointer: coarse) {
+    .expand-control :global(button),
+    .composer-tools :global(button) {
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+  .composer-top {
+    padding-right: 2.75rem;
+    min-width: 0;
+  }
+  textarea {
+    box-sizing: border-box;
+    display: block;
+    flex-shrink: 0;
+    width: 100%;
+    min-width: 0;
+    min-height: 3.5rem;
+    max-height: 35cqh;
+    resize: none;
+    padding: 0.5rem 2.75rem 0.5rem 0.5rem;
+    border: 0;
+    border-radius: var(--kit-radius-sm, var(--radius));
+    background: transparent;
+    color: var(--color-foreground);
+    font: inherit;
+    line-height: 1.5;
+    overflow-y: auto;
+  }
+  textarea::placeholder {
+    color: var(--color-muted-foreground);
+  }
+  textarea:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: -2px;
+  }
+  .expanded textarea {
+    min-height: 55cqh;
+    max-height: 55cqh;
+  }
+  .composer-tools,
+  .tool-group {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+  .composer-tools {
+    justify-content: space-between;
+    gap: 0.5rem;
+    overflow: visible;
+  }
+  /* Tools then the model pill on the left; only the pill shrinks. Usage and send stay whole. */
+  .tool-group:first-child {
+    flex: 1 1 auto;
+  }
+  .tool-group > :global(:not([data-composer-model])) {
+    flex-shrink: 0;
+  }
+  .send-tools {
+    flex: 0 0 auto;
+    justify-content: flex-end;
+    margin-left: auto;
+  }
+  @container composer (max-width: 560px) {
+    .composer-tools :global([data-composer-mode-label]),
+    .composer-tools :global([data-composer-model-detail]),
+    .composer-tools :global([data-composer-capacity]) {
+      display: none;
+    }
+    .composer-tools :global([data-composer-model]) {
+      flex: 0 1 auto;
+      min-width: 4.5rem;
+      max-width: 9rem;
+      padding-inline: 2px;
+    }
+    .composer-tools {
+      gap: 2px;
+    }
+  }
+  @container composer (max-width: 400px) {
+    .composer-tools :global([data-composer-model]) {
+      max-width: 6rem;
+    }
+    .composer-tools :global([data-slot='select-trigger']) {
+      max-width: 5.5rem;
+      overflow: hidden;
+    }
+    .composer-tools :global([data-composer-model] [data-icon='inline-end']) {
+      display: none;
+    }
+  }
+  .composer-override {
+    min-width: 0;
+  }
+</style>

package/src/chat/ChatMessage.svelte

@@ -0,0 +1,262 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import { renderMarkdown } from '../markdown'
+  import { Button } from '#lib/components/ui/button/index.js'
+
+  let {
+    role,
+    text,
+    label,
+    status,
+    reasoning,
+    reasoningLabel = 'Reasoning',
+    process,
+    attachments,
+    children,
+    actions,
+    latest = false,
+    selected = false,
+    showMoreLabel = 'Show more',
+    showLessLabel = 'Show less',
+  }: {
+    role: 'user' | 'assistant'
+    text: string
+    label?: string | undefined
+    status?: string | undefined
+    reasoning?: string | undefined
+    reasoningLabel?: string | undefined
+    process?: Snippet | undefined
+    attachments?: Snippet | undefined
+    children?: Snippet | undefined
+    actions?: Snippet | undefined
+    latest?: boolean | undefined
+    selected?: boolean | undefined
+    showMoreLabel?: string | undefined
+    showLessLabel?: string | undefined
+  } = $props()
+  const html = $derived(role === 'assistant' ? renderMarkdown(text) : '')
+  const preview = $derived.by(() => {
+    if (role !== 'user') return null
+    let lines = 0
+    let end = 0
+    for (const line of text.split('\n')) {
+      if (line.trim() && ++lines > 5) return text.slice(0, end).trimEnd()
+      end += line.length + 1
+    }
+    return null
+  })
+  let expanded = $state(false)
+</script>
+
+<div
+  class="chat-message"
+  data-status={status}
+  class:user={role === 'user'}
+  class:assistant={role === 'assistant'}
+  class:latest
+  class:selected
+>
+  {#if label}<div class="reply-source">{label}</div>{/if}
+  {#if attachments}{@render attachments()}{/if}
+  {#if reasoning}<details class="thinking">
+      <summary>{reasoningLabel}</summary>
+      <p>{reasoning}</p>
+    </details>{/if}
+  {#if process}{@render process()}{/if}
+  {#if role === 'user'}
+    <div class="user-bubble">
+      <p class="user-message">{preview !== null && !expanded ? preview : text}</p>
+      {#if preview !== null}<Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          aria-expanded={expanded}
+          onclick={() => {
+            expanded = !expanded
+          }}>{expanded ? showLessLabel : showMoreLabel}</Button
+        >{/if}
+    </div>
+  {:else}
+    <div
+      class="markdown"
+      {@attach (node) => {
+        node.innerHTML = html
+      }}
+    ></div>
+  {/if}
+  {#if children}{@render children()}{/if}
+  {#if actions}<div class="message-actions">{@render actions()}</div>{/if}
+</div>
+
+<style>
+  /* Hallmark · component: open assistant message · theme: host semantic tokens */
+  .chat-message {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    min-width: 0;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    color: var(--color-foreground);
+  }
+  .assistant {
+    padding-block: 0.75rem;
+  }
+  .selected {
+    outline: 1px solid var(--color-border);
+    outline-offset: 0.5rem;
+    border-radius: var(--kit-radius, var(--radius));
+  }
+  .user {
+    align-items: flex-end;
+  }
+  .user-bubble {
+    max-width: min(90%, 42rem);
+    border-radius: var(--kit-radius, var(--radius));
+    padding: 0.625rem 0.875rem;
+    background: var(--color-muted);
+  }
+  .user-message {
+    margin: 0;
+    font-size: var(--kit-text-base);
+    white-space: pre-wrap;
+  }
+  .reply-source,
+  .thinking {
+    color: var(--color-muted-foreground);
+    font-size: var(--kit-text-sm);
+  }
+  .thinking summary {
+    cursor: pointer;
+  }
+  .thinking summary:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+  .thinking p {
+    white-space: pre-wrap;
+    margin-block: 0.5rem;
+  }
+  .message-actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    min-height: 2rem;
+  }
+  .message-actions :global(button) {
+    min-width: 2rem;
+    min-height: 2rem;
+  }
+  @media (hover: hover) {
+    .assistant:not(.latest) .message-actions {
+      opacity: 0;
+    }
+    .assistant:hover .message-actions,
+    .assistant:focus-within .message-actions {
+      opacity: 1;
+    }
+  }
+  .markdown {
+    font-size: var(--kit-text-base);
+    line-height: 1.6;
+  }
+  .markdown :global(p),
+  .markdown :global(ul),
+  .markdown :global(ol),
+  .markdown :global(blockquote),
+  .markdown :global(pre),
+  .markdown :global(table) {
+    margin: 0.75em 0;
+  }
+  .markdown :global(h1),
+  .markdown :global(h2),
+  .markdown :global(h3),
+  .markdown :global(h4),
+  .markdown :global(h5),
+  .markdown :global(h6) {
+    margin: 1em 0 0.5em;
+    font-weight: 600;
+    line-height: 1.35;
+  }
+  .markdown :global(h1) {
+    font-size: 1.4em;
+  }
+  .markdown :global(h2) {
+    font-size: 1.25em;
+  }
+  .markdown :global(h3) {
+    font-size: 1.1em;
+  }
+  .markdown :global(ul),
+  .markdown :global(ol) {
+    padding-inline-start: 1.5em;
+  }
+  .markdown :global(ul) {
+    list-style: disc;
+  }
+  .markdown :global(ol) {
+    list-style: decimal;
+  }
+  .markdown :global(li) {
+    margin: 0.25em 0;
+  }
+  .markdown :global(li::marker) {
+    color: var(--color-muted-foreground);
+  }
+  .markdown :global(blockquote) {
+    border-inline-start: 3px solid var(--color-border);
+    padding-inline-start: 0.75em;
+    color: var(--color-muted-foreground);
+  }
+  .markdown :global(a) {
+    color: var(--color-primary);
+    text-decoration: underline;
+    overflow-wrap: anywhere;
+  }
+  .markdown :global(code) {
+    border-radius: var(--kit-radius-sm);
+    background: var(--color-background);
+    padding: 0.1em 0.3em;
+    font-size: 0.95em;
+  }
+  .markdown :global(pre) {
+    max-width: 100%;
+    overflow-x: auto;
+    padding: 0.75em;
+    border: 1px solid var(--color-border);
+    border-radius: var(--kit-radius-sm);
+    background: var(--color-background);
+    white-space: pre;
+    overflow-wrap: normal;
+  }
+  .markdown :global(pre code) {
+    padding: 0;
+    background: none;
+  }
+  .markdown :global(table) {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    border-collapse: collapse;
+  }
+  .markdown :global(th),
+  .markdown :global(td) {
+    padding: 0.4em 0.6em;
+    border: 1px solid var(--color-border);
+  }
+  .markdown :global(th) {
+    font-weight: 600;
+  }
+  .markdown :global(img),
+  .markdown :global(video) {
+    max-width: 100%;
+    height: auto;
+  }
+  .markdown :global(:first-child) {
+    margin-top: 0;
+  }
+  .markdown :global(:last-child) {
+    margin-bottom: 0;
+  }
+</style>