@ouraihub/aether-ui 0.0.0-stage → 0.1.1

package/src/chat/ChatPanelComposer.svelte

@@ -0,0 +1,317 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import XIcon from '@lucide/svelte/icons/x'
+  import { Button } from '#lib/components/ui/button/index.js'
+  import type { KitI18n } from '../i18n'
+  import type {
+    ContextUsage,
+    ImagePart,
+    ModelOption,
+    ModelRef,
+    PermissionMode,
+    ReasoningEffort,
+    SkillRef,
+    SkillsPort,
+  } from '../ports'
+  import { settingsTarget } from '../providers/revision.svelte'
+  import ChatComposer from './ChatComposer.svelte'
+  import ChatPanelMode from './ChatPanelMode.svelte'
+  import ChatPanelToolbar from './ChatPanelToolbar.svelte'
+  import ReasoningControl from './ReasoningControl.svelte'
+  import SkillPicker from './SkillPicker.svelte'
+  import UsageDetails from './UsageDetails.svelte'
+  import type { RunSession } from './run-session.svelte'
+
+  type Attached = ImagePart & { preview: string }
+  type Recovery = {
+    draft: string
+    images: Attached[]
+    droppedKey: string | null
+    contextKey: string | null
+  }
+
+  let {
+    i18n,
+    session,
+    purpose,
+    draft = $bindable(''),
+    canSend,
+    activeContext,
+    images,
+    vision,
+    recovery,
+    webSearch = $bindable(false),
+    generateImage = $bindable(false),
+    toolbar,
+    onToolbarChange,
+    paintingModel,
+    capability,
+    historyBusy,
+    onNewConversation,
+    attach,
+    onDraftInput,
+    onRemoveImage,
+    onRecoverDraft,
+    onDropContext,
+    hasSearch,
+    selected,
+    skillsBudget,
+    skillsPort,
+    onSkillsChange,
+    onSkillResolved,
+    mode,
+    allowedModes,
+    chooseMode,
+    reasoningEffort,
+    allowedEfforts,
+    reasoningOpen = $bindable(false),
+    chooseEffort,
+    currentContext,
+    picked,
+    onOpenSettings,
+    onSend,
+    onStop,
+    hasImages,
+    override,
+  }: {
+    i18n: KitI18n
+    session: RunSession
+    purpose: string
+    draft?: string
+    canSend: boolean
+    activeContext: { kind: string; id: string; label: string } | null
+    images: Attached[]
+    vision: boolean
+    recovery: Recovery | null
+    webSearch?: boolean
+    generateImage?: boolean
+    toolbar?: string[] | undefined
+    onToolbarChange?: ((ids: string[]) => void) | undefined
+    paintingModel: boolean
+    capability: ModelOption | null
+    historyBusy: boolean
+    onNewConversation: () => void
+    attach: (files: FileList | File[] | null | undefined) => Promise<void>
+    onDraftInput: () => void
+    onRemoveImage: (index: number) => void
+    onRecoverDraft: () => void
+    onDropContext: () => void
+    hasSearch: boolean
+    selected: SkillRef[]
+    skillsBudget: number
+    skillsPort?: SkillsPort | undefined
+    onSkillsChange: (refs: SkillRef[]) => void
+    onSkillResolved: () => void
+    mode: PermissionMode
+    allowedModes: PermissionMode[]
+    chooseMode: (mode: PermissionMode) => Promise<void>
+    reasoningEffort: ReasoningEffort
+    allowedEfforts: ReasoningEffort[]
+    reasoningOpen?: boolean
+    chooseEffort: (effort: ReasoningEffort) => void
+    currentContext: ContextUsage | null
+    picked: ModelRef | null
+    onOpenSettings?: (() => void) | undefined
+    onSend: () => void
+    onStop: () => void
+    hasImages: (files: FileList | null | undefined) => boolean
+    override?: Snippet | undefined
+  } = $props()
+  const t = $derived(i18n.t)
+</script>
+
+<ChatComposer
+  bind:value={draft}
+  label={t('chat.input')}
+  placeholder={t('chat.placeholder')}
+  submitLabel={t('chat.send')}
+  stopLabel={t('chat.stop')}
+  disabled={!canSend}
+  running={session.running}
+  expandLabel={t('chat.expandInput')}
+  collapseLabel={t('chat.collapseInput')}
+  onsubmit={onSend}
+  onstop={onStop}
+  oninput={onDraftInput}
+  onpaste={(event) => {
+    const files = event.clipboardData?.files
+    if (!hasImages(files)) return
+    event.preventDefault()
+    void attach(files)
+  }}
+  onfiles={(files) => void attach(files)}
+  {override}
+>
+  {#snippet top()}
+    {#if activeContext}
+      <div class="context-chip">
+        <span title={activeContext.label}>{activeContext.label}</span><Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          aria-label={t('chat.context.remove', { label: activeContext.label })}
+          title={t('chat.context.remove', { label: activeContext.label })}
+          onclick={onDropContext}><XIcon /></Button
+        >
+      </div>
+    {/if}
+    {#if images.length > 0}
+      <ul class="image-tray">
+        {#each images as image, index (image.preview)}
+          <li>
+            <img src={image.preview} alt="" /><Button
+              type="button"
+              variant="secondary"
+              size="icon-xs"
+              aria-label={t('chat.removeImage', { index: index + 1 })}
+              title={t('chat.removeImage', { index: index + 1 })}
+              onclick={() => onRemoveImage(index)}><XIcon /></Button
+            >
+          </li>
+        {/each}
+      </ul>
+      {#if !vision}<p class="search-status" role="status">{t('chat.visionUnsupported')}</p>{/if}
+    {/if}
+    {#if recovery}
+      <div class="draft-recovery" role="status">
+        <span>{t('chat.draftRecoverable')}</span><Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={draft !== '' || images.length > 0}
+          onclick={onRecoverDraft}>{t('chat.restoreDraft')}</Button
+        >
+      </div>
+    {/if}
+    {#if hasSearch && purpose === 'chat' && session.search.status === 'searching'}<p
+        class="search-status"
+        role="status"
+      >
+        {t('chat.searching')}
+      </p>{/if}
+  {/snippet}
+  {#snippet tools()}
+    <ChatPanelToolbar
+      {i18n}
+      running={session.running}
+      {historyBusy}
+      {vision}
+      {paintingModel}
+      {capability}
+      {purpose}
+      {toolbar}
+      {onToolbarChange}
+      {hasSearch}
+      newConversation={onNewConversation}
+      {attach}
+      bind:webSearch
+      bind:generateImage
+    />
+    {#if skillsPort}<div class="skills-control">
+        <SkillPicker
+          port={skillsPort}
+          value={selected}
+          budget={skillsBudget}
+          changed={session.skillChanged}
+          onchange={onSkillsChange}
+          onresolved={onSkillResolved}
+        />
+      </div>{/if}
+  {/snippet}
+  {#snippet actions()}
+    <ChatPanelMode {i18n} {mode} {allowedModes} running={session.running} {chooseMode} />
+    {#if picked}
+      <ReasoningControl
+        value={reasoningEffort}
+        efforts={allowedEfforts}
+        disabled={session.running}
+        bind:open={reasoningOpen}
+        {i18n}
+        onchange={chooseEffort}
+        onOpenSettings={onOpenSettings
+          ? () => {
+              settingsTarget.value = { endpointId: picked.endpointId, modelId: picked.modelId }
+              onOpenSettings()
+            }
+          : undefined}
+      />
+    {/if}
+    <UsageDetails
+      context={currentContext}
+      modelName={capability?.name ?? capability?.modelId ?? ''}
+      usage={session.turns.at(-1)?.usage ?? null}
+      total={session.cumulativeUsage}
+      cost={session.turns.at(-1)?.cost ?? null}
+      totalCost={session.cumulativeCost}
+    />
+  {/snippet}
+</ChatComposer>
+
+<style>
+  .context-chip {
+    display: flex;
+    align-items: center;
+    align-self: flex-start;
+    gap: 0.25rem;
+    max-width: calc(100% - 2rem);
+    padding-left: 0.5rem;
+    background: var(--color-muted);
+    border-radius: var(--kit-radius, var(--radius));
+  }
+  .context-chip span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .context-chip :global(button) {
+    flex-shrink: 0;
+  }
+  .image-tray {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .image-tray li {
+    position: relative;
+  }
+  .image-tray img {
+    width: 3.5rem;
+    height: 3.5rem;
+    object-fit: cover;
+    border: 1px solid var(--color-border);
+    border-radius: var(--kit-radius, var(--radius));
+  }
+  .image-tray :global(button) {
+    position: absolute;
+    top: -0.375rem;
+    right: -0.375rem;
+  }
+  .skills-control {
+    min-width: 0;
+    max-width: 100%;
+  }
+  .skills-control :global(div:first-child) {
+    flex-wrap: wrap;
+    min-width: 0;
+  }
+  .skills-control :global([data-slot='select-trigger']) {
+    width: auto;
+    max-width: 100%;
+  }
+  .search-status,
+  .draft-recovery {
+    margin: 0;
+    color: var(--color-muted-foreground);
+    font-size: var(--kit-font-size-sm, 0.8125rem);
+  }
+  .draft-recovery {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+  }
+</style>

package/src/chat/ChatPanelDialogs.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+  import { Button } from '#lib/components/ui/button/index.js'
+  import { Input } from '#lib/components/ui/input/index.js'
+  import { Textarea } from '#lib/components/ui/textarea/index.js'
+  import * as Dialog from '#lib/components/ui/dialog/index.js'
+  import * as Field from '#lib/components/ui/field/index.js'
+  import ModelSelect from '../providers/ModelSelect.svelte'
+  import type { KitI18n } from '../i18n'
+  import type { ConversationClient, ConversationSummary, ModelOption, ModelRef } from '../ports'
+  let {
+    i18n,
+    history,
+    session,
+    conversations,
+    title,
+    historyLoading,
+    historyBusy,
+    historyError,
+    retryHistory,
+    open,
+    rename,
+    remove,
+    actionBusy,
+    replyDialog,
+    modelOptions,
+    modelError,
+    noModels,
+    validReplyModel,
+    submitReply,
+    reloadModels,
+    historyOpen = $bindable(false),
+    renaming = $bindable(false),
+    renameTitle = $bindable(''),
+    replyOpen = $bindable(false),
+    editDraft = $bindable(''),
+    replyModel = $bindable<ModelRef | null>(null),
+    targetLanguage = $bindable(''),
+    replyError,
+  }: {
+    i18n: KitI18n
+    history: ConversationClient | undefined
+    session: { running: boolean; conversationId: string | null }
+    conversations: ConversationSummary[]
+    title: string
+    historyLoading: boolean
+    historyBusy: boolean
+    historyError: string | null
+    retryHistory: () => Promise<void>
+    open: (id: string) => Promise<void>
+    rename: () => Promise<void>
+    remove: () => Promise<void>
+    actionBusy: boolean
+    replyDialog: 'edit' | 'translate' | null
+    modelOptions: ModelOption[] | null
+    modelError: string | null
+    noModels: boolean
+    validReplyModel: boolean
+    submitReply: () => Promise<void>
+    reloadModels: () => void
+    historyOpen?: boolean
+    renaming?: boolean
+    renameTitle?: string
+    replyOpen?: boolean
+    editDraft?: string
+    replyModel?: ModelRef | null
+    targetLanguage?: string
+    replyError: string | null
+  } = $props()
+  const t = $derived(i18n.t)
+</script>
+
+{#if history}
+  <Dialog.Root bind:open={historyOpen}>
+    <Dialog.Content showCloseButton={false}>
+      <Dialog.Header><Dialog.Title>{t('chat.history')}</Dialog.Title></Dialog.Header>
+      {#if historyLoading}<p role="status">{t('chat.historyLoading')}</p>{/if}
+      {#if historyError}<p role="alert">
+          {t('chat.historyFailed')}: {historyError}<Button
+            variant="outline"
+            size="sm"
+            disabled={historyBusy}
+            onclick={() => void retryHistory()}>{t('chat.retryHistory')}</Button
+          >
+        </p>{/if}
+      <div class="history-list">
+        {#each conversations as c (c.id)}<Button
+            variant="ghost"
+            title={c.title}
+            disabled={historyBusy || session.running}
+            onclick={() => void open(c.id)}><span>{c.title}</span></Button
+          >{/each}
+      </div>
+      {#if session.conversationId}
+        {#if renaming}
+          <form
+            onsubmit={(e) => {
+              e.preventDefault()
+              void rename()
+            }}
+          >
+            <Field.FieldGroup
+              ><Field.Field
+                ><Field.FieldLabel for="chat-conversation-title"
+                  >{t('chat.conversationTitle')}</Field.FieldLabel
+                ><Input
+                  id="chat-conversation-title"
+                  bind:value={renameTitle}
+                  disabled={historyBusy}
+                /></Field.Field
+              ><Button type="submit" disabled={historyBusy || renameTitle.trim() === ''}
+                >{t('common.confirm')}</Button
+              ></Field.FieldGroup
+            >
+          </form>
+        {:else}<Button
+            variant="outline"
+            disabled={historyBusy || session.running}
+            onclick={() => {
+              renameTitle = title
+              renaming = true
+            }}>{t('chat.rename')}</Button
+          >{/if}
+        <Button
+          variant="destructive"
+          disabled={historyBusy || session.running}
+          onclick={() => void remove()}>{t('chat.delete')}</Button
+        >
+      {/if}
+      <Dialog.Footer
+        ><Button variant="ghost" onclick={() => (historyOpen = false)}>{t('chat.close')}</Button
+        ></Dialog.Footer
+      >
+    </Dialog.Content>
+  </Dialog.Root>
+{/if}
+<Dialog.Root bind:open={replyOpen}>
+  <Dialog.Content class="reply-dialog" showCloseButton={false}>
+    <Dialog.Header>
+      <Dialog.Title>{t(replyDialog === 'edit' ? 'chat.editReply' : 'chat.translate')}</Dialog.Title>
+      <Dialog.Description
+        >{t(
+          replyDialog === 'edit' ? 'chat.editReplyHint' : 'chat.candidateHint',
+        )}</Dialog.Description
+      >
+    </Dialog.Header>
+    <form
+      onsubmit={(event) => {
+        event.preventDefault()
+        void submitReply()
+      }}
+    >
+      <Field.FieldGroup>
+        {#if replyDialog === 'edit'}
+          <Field.Field
+            ><Field.FieldLabel for="chat-reply-edit">{t('chat.replyText')}</Field.FieldLabel
+            ><Textarea
+              id="chat-reply-edit"
+              bind:value={editDraft}
+              rows={8}
+              maxlength={24_000}
+              disabled={actionBusy}
+            /></Field.Field
+          >
+        {:else}
+          <Field.Field
+            ><Field.FieldLabel>{t('chat.replyModel')}</Field.FieldLabel><ModelSelect
+              value={replyModel}
+              options={modelOptions}
+              disabled={actionBusy || modelError !== null}
+              onchange={(value) => (replyModel = value)}
+            /></Field.Field
+          >
+          {#if noModels}<p role="status">{t('chat.noModels')}</p>{/if}
+          {#if modelError}<p role="alert">
+              {modelError}<Button type="button" variant="outline" size="sm" onclick={reloadModels}
+                >{t('chat.retryModels')}</Button
+              >
+            </p>{/if}
+          <Field.Field
+            ><Field.FieldLabel for="chat-target-language"
+              >{t('chat.targetLanguage')}</Field.FieldLabel
+            ><Input
+              id="chat-target-language"
+              bind:value={targetLanguage}
+              maxlength={80}
+              disabled={actionBusy}
+            /></Field.Field
+          >
+        {/if}
+        {#if replyError}<p role="alert" class="text-destructive">{replyError}</p>{/if}
+        <Dialog.Footer>
+          <Button
+            type="button"
+            variant="ghost"
+            disabled={actionBusy}
+            onclick={() => (replyOpen = false)}>{t('common.cancel')}</Button
+          >
+          <Button
+            type="submit"
+            disabled={actionBusy ||
+              (replyDialog === 'edit'
+                ? !editDraft.trim() || editDraft.length > 24_000
+                : !validReplyModel || !targetLanguage.trim())}>{t('common.confirm')}</Button
+          >
+        </Dialog.Footer>
+      </Field.FieldGroup>
+    </form>
+  </Dialog.Content>
+</Dialog.Root>
+
+<style>
+  .history-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    max-height: 40vh;
+    overflow-y: auto;
+    min-width: 0;
+  }
+  .history-list :global(button) {
+    justify-content: flex-start;
+    min-width: 0;
+  }
+  .history-list span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  :global(.reply-dialog) {
+    max-height: calc(100dvh - 2rem);
+    overflow-y: auto;
+  }
+  :global(.reply-dialog form),
+  :global(.reply-dialog [data-slot='field-group']) {
+    min-width: 0;
+  }
+  :global(.reply-dialog textarea) {
+    max-height: 45dvh;
+    overflow-y: auto;
+  }
+</style>

package/src/chat/ChatPanelHeader.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import XIcon from '@lucide/svelte/icons/x'
+  import HistoryIcon from '@lucide/svelte/icons/history'
+  import { Button } from '#lib/components/ui/button/index.js'
+  import * as Alert from '#lib/components/ui/alert/index.js'
+  import type { KitI18n } from '../i18n'
+  import type { ConversationClient, ModelOption, ModelRef } from '../ports'
+  import ModelSelect from '../providers/ModelSelect.svelte'
+  import type { RunSession } from './run-session.svelte'
+
+  let {
+    i18n,
+    title,
+    session,
+    history,
+    historyBusy,
+    historyOpen,
+    historyError,
+    modelOptions,
+    modelError,
+    onHistory,
+    onClose,
+    onRetryHistory,
+    picked,
+    onPickModel,
+    onOpenSettings,
+  }: {
+    i18n: KitI18n
+    title: string
+    session: RunSession
+    history: ConversationClient | undefined
+    historyBusy: boolean
+    historyOpen: boolean
+    historyError: string | null
+    modelOptions: ModelOption[] | null
+    modelError: string | null
+    onHistory: () => void
+    onClose?: (() => void) | undefined
+    onRetryHistory: () => void
+    picked: ModelRef | null
+    onPickModel: (model: ModelRef) => void
+    onOpenSettings?: (() => void) | undefined
+  } = $props()
+  const t = $derived(i18n.t)
+</script>
+
+<header class="chat-header">
+  <div class="title-row">
+    <h2>{title}</h2>
+    {#if history}<Button
+        variant="ghost"
+        size="icon-sm"
+        disabled={session.running || historyBusy}
+        aria-label={t('chat.history')}
+        title={t('chat.history')}
+        onclick={onHistory}><HistoryIcon /></Button
+      >{/if}
+    {#if onClose}<Button
+        variant="ghost"
+        size="icon-sm"
+        aria-label={t('chat.close')}
+        title={t('chat.close')}
+        onclick={onClose}><XIcon /></Button
+      >{/if}
+  </div>
+  <div class="model-row">
+    <ModelSelect
+      value={picked}
+      options={modelOptions}
+      filter={{ modelType: 'chat' }}
+      disabled={session.running || modelError !== null}
+      onchange={onPickModel}
+      {...onOpenSettings ? { onOpenSettings } : {}}
+    />
+  </div>
+</header>
+{#if historyError && !historyOpen}
+  <Alert.Root variant="destructive">
+    <Alert.Title>{t('chat.historyFailed')}</Alert.Title>
+    <Alert.Description
+      >{historyError}<Button
+        variant="outline"
+        size="sm"
+        disabled={historyBusy || session.running}
+        onclick={onRetryHistory}>{t('chat.retryHistory')}</Button
+      ></Alert.Description
+    >
+  </Alert.Root>
+{/if}
+{#if session.actionError}<p role="alert" class="text-destructive text-kit-sm">
+    {t(`errors.${session.actionError}`)}
+  </p>{/if}
+{#if session.historyRefreshError}<p role="alert" class="text-destructive text-kit-sm">
+    {t('chat.replyRefreshFailed')}<Button
+      variant="outline"
+      size="sm"
+      disabled={session.running || historyBusy}
+      onclick={() => session.conversationId && onRetryHistory()}>{t('chat.retryHistory')}</Button
+    >
+  </p>{/if}
+
+<style>
+  .chat-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    flex: none;
+    min-width: 0;
+  }
+  .title-row {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+  .title-row h2 {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    font: inherit;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .title-row :global(button) {
+    flex-shrink: 0;
+  }
+  .model-row {
+    min-width: 0;
+  }
+</style>