@ouraihub/aether-ui 0.0.0-stage → 0.1.1

package/src/chat/UsageDetails.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { ContextUsage, Cost, TokenUsage } from '../ports'
+  import { getKitContext } from '../context'
+  import UsageControl from './UsageControl.svelte'
+  interface Props {
+    context: ContextUsage | null
+    usage: TokenUsage | null
+    total: TokenUsage
+    /** Last turn's cost; null when its model has no pricing or a round lacked token counts. */
+    cost: Cost | null
+    /** Session total per currency. */
+    totalCost: Cost[]
+  }
+  let {
+    context,
+    usage,
+    total,
+    cost,
+    totalCost,
+    modelName = '',
+  }: Props & { modelName?: string } = $props()
+  const { i18n } = getKitContext()
+  const { t } = i18n
+  const fields = [
+    'inputTokens',
+    'outputTokens',
+    'cacheReadTokens',
+    'cacheWriteTokens',
+    'reasoningTokens',
+  ] as const
+  const money = ({ amount, currency }: Cost) =>
+    `${currency === 'CNY' ? '¥' : '$'}${amount.toFixed(4)}`
+</script>
+
+<UsageControl context={context ? { ...context, modelName } : null} {i18n}>
+  {#snippet details()}
+    <table>
+      <thead
+        ><tr
+          ><th scope="col">{t('chat.usage')}</th><th scope="col">{t('chat.currentUsage')}</th><th
+            scope="col">{t('chat.totalUsage')}</th
+          ></tr
+        ></thead
+      >
+      <tbody
+        >{#each fields as field (field)}<tr
+            ><th scope="row">{t(`chat.usage.${field}`)}</th><td
+              >{usage?.[field] ?? t('chat.unknown')}</td
+            ><td>{total[field] ?? t('chat.unknown')}</td></tr
+          >{/each}<tr
+          ><th scope="row">{t('chat.cost')}</th><td>{cost ? money(cost) : t('chat.unknown')}</td><td
+            >{totalCost.length ? totalCost.map(money).join(' + ') : t('chat.unknown')}</td
+          ></tr
+        ></tbody
+      >
+    </table>
+    <p>{t('chat.usageHint')}</p>
+  {/snippet}
+</UsageControl>
+
+<style>
+  p {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  th,
+  td {
+    padding: 0.25rem;
+    text-align: left;
+    overflow-wrap: anywhere;
+  }
+</style>

package/src/chat/chat-attachments.svelte.ts

@@ -0,0 +1,74 @@
+import type { KitI18n } from '../i18n'
+import type { KitNotify } from '../context'
+import type { ImagePart } from '../ports'
+
+export type AttachedImage = ImagePart & { preview: string }
+
+export function hasImages(files: FileList | null | undefined): boolean {
+  return [...(files ?? [])].some((file) => file.type.startsWith('image/'))
+}
+
+function readBase64(file: File): Promise<string> {
+  const { promise, resolve, reject } = Promise.withResolvers<string>()
+  const reader = new FileReader()
+  reader.onload = () => resolve(String(reader.result).slice(String(reader.result).indexOf(',') + 1))
+  reader.onerror = () => reject(reader.error ?? new Error('read failed'))
+  reader.readAsDataURL(file)
+  return promise
+}
+
+/** Owns attachment reads and previews; the panel transfers images to run/draft recovery. */
+export class ChatAttachments {
+  images = $state<AttachedImage[]>([])
+  reading = $state(0)
+
+  constructor(
+    private readonly canVision: () => boolean,
+    private readonly notify: KitNotify,
+    private readonly i18n: KitI18n,
+  ) {}
+
+  remove = (index: number): void => {
+    const [image] = this.images.splice(index, 1)
+    if (image) URL.revokeObjectURL(image.preview)
+  }
+
+  attach = async (files: FileList | File[] | null | undefined): Promise<void> => {
+    const picked = [...(files ?? [])].filter((file) => file.type.startsWith('image/'))
+    if (picked.length === 0) return
+    const { t } = this.i18n
+    if (!this.canVision()) this.notify.toast('error', t('chat.visionUnsupported'))
+    else if (
+      picked.some(
+        (file) => !['image/png', 'image/jpeg', 'image/webp', 'image/gif'].includes(file.type),
+      )
+    )
+      this.notify.toast('error', t('chat.imageType'))
+    else if (picked.some((file) => file.size > 4 * 1024 * 1024))
+      this.notify.toast('error', t('chat.imageSize'))
+    else if (this.images.length + picked.length > 4)
+      this.notify.toast('error', t('chat.imageLimit', { max: 4 }))
+    else {
+      this.reading++
+      try {
+        const read = await Promise.all(
+          picked.map(async (file) => ({ mime: file.type, data: await readBase64(file), file })),
+        )
+        if (this.images.length + read.length > 4)
+          this.notify.toast('error', t('chat.imageLimit', { max: 4 }))
+        else
+          this.images.push(
+            ...read.map(({ mime, data, file }) => ({
+              mime,
+              data,
+              preview: URL.createObjectURL(file),
+            })),
+          )
+      } catch {
+        this.notify.toast('error', t('errors.internal'))
+      } finally {
+        this.reading--
+      }
+    }
+  }
+}

package/src/chat/chat-panel-history.svelte.ts

@@ -0,0 +1,430 @@
+import { SvelteMap } from 'svelte/reactivity'
+import type { KitNotify } from '../context'
+import type {
+  Conversation,
+  ConversationClient,
+  ConversationSummary,
+  ModelOption,
+  ModelRef,
+} from '../ports'
+import type { ChatTurn, RunSession } from './run-session.svelte'
+
+type Translate = (key: string, values?: Record<string, string | number>) => string
+
+type HistoryDependencies = {
+  history: ConversationClient | undefined
+  getSession: () => RunSession | null
+  getModelOptions: () => ModelOption[] | null
+  getModelError: () => string | null
+  setDraft: (value: string) => void
+  bumpDraftRevision: () => void
+  setFullAccess: (value: boolean) => void
+  getScope: () => string | undefined
+  getLocale: () => string
+  onConversationChange?: ((id: string | null) => void) | undefined
+  bumpScrollRevision: () => void
+  notify: KitNotify
+  t: Translate
+  errorText: (error: unknown) => string
+  consumeBase: () => Parameters<RunSession['translate']>[0]
+  discardRecovery: () => void
+}
+
+export class ChatPanelHistoryState {
+  readonly history: ConversationClient | undefined
+  conversations = $state<ConversationSummary[]>([])
+  shownSummary = $state<ConversationSummary | null>(null)
+  historyOpen = $state(false)
+  historyBusy = $state(false)
+  historyLoading = $state(false)
+  historyError = $state<string | null>(null)
+  retryHistory = $state<() => Promise<void>>(async () => {
+    await this.refresh()
+  })
+  renameTitle = $state('')
+  renaming = $state(false)
+  restored = $state(false)
+  restoreBlocked = $state(false)
+  replyDialog = $state<'edit' | 'translate' | null>(null)
+  replyOpen = $state(false)
+  sourceReply = $state<ChatTurn | null>(null)
+  editDraft = $state('')
+  expectedText = ''
+  targetLanguage = $state('')
+  replyModel = $state<ModelRef | null>(null)
+  replyError = $state<string | null>(null)
+  viewGeneration = $state(0)
+  disposed = $state(false)
+  #listGeneration = 0
+  #reported: string | null
+  readonly #deps: HistoryDependencies
+
+  constructor(deps: HistoryDependencies, initialConversationId: string | null) {
+    this.#deps = deps
+    this.history = deps.history
+    this.#reported = initialConversationId
+    this.retryHistory = this.refresh
+  }
+
+  get title() {
+    const session = this.#deps.getSession()
+    return (
+      (this.shownSummary?.id === session?.conversationId ? this.shownSummary?.title : null) ??
+      this.conversations.find((conversation) => conversation.id === session?.conversationId)
+        ?.title ??
+      this.#deps.t('chat.newConversation')
+    )
+  }
+
+  get groups() {
+    const grouped = new SvelteMap<string, ChatTurn[]>()
+    for (const turn of this.#deps.getSession()?.turns ?? []) {
+      const replies = grouped.get(turn.questionId)
+      if (replies) replies.push(turn)
+      else grouped.set(turn.questionId, [turn])
+    }
+    return [...grouped.entries()]
+  }
+
+  get actionBusy() {
+    return this.historyBusy || this.#deps.getSession()?.running === true || this.restoreBlocked
+  }
+
+  get validReplyModel() {
+    const model = this.replyModel
+    return (
+      this.#deps
+        .getModelOptions()
+        ?.some(
+          (option) => option.endpointId === model?.endpointId && option.modelId === model?.modelId,
+        ) === true
+    )
+  }
+
+  get isRestored() {
+    return this.restored
+  }
+
+  dispose = () => {
+    this.disposed = true
+    this.viewGeneration++
+    this.#listGeneration++
+    this.#deps.setFullAccess(false)
+    this.#deps.getSession()?.dispose()
+  }
+
+  syncConversation = () => {
+    const session = this.#deps.getSession()
+    const id = session?.conversationId ?? null
+    if (!this.restored || this.restoreBlocked || id === this.#reported) return
+    this.#reported = id
+    this.#deps.onConversationChange?.(id)
+  }
+
+  refresh = async () => {
+    if (!this.history) return
+    const generation = ++this.#listGeneration
+    this.historyLoading = true
+    try {
+      const next = await this.history.list(this.#deps.getScope())
+      if (this.disposed || generation !== this.#listGeneration) return
+      this.conversations = next
+      if (this.retryHistory === this.refresh) this.historyError = null
+    } catch (error) {
+      if (!this.disposed && generation === this.#listGeneration && !this.restoreBlocked) {
+        this.historyError = this.#deps.errorText(error)
+        this.retryHistory = this.refresh
+      }
+    } finally {
+      if (!this.disposed && generation === this.#listGeneration) this.historyLoading = false
+    }
+  }
+
+  restore = async (id: string | null) => {
+    if (id !== null && this.history && this.#deps.getSession()) {
+      this.restoreBlocked = true
+      await this.open(id)
+    }
+    this.restored = true
+  }
+
+  open = async (id: string) => {
+    const session = this.#deps.getSession()
+    if (!this.history || !session || session.running || this.historyBusy) return
+    const generation = ++this.viewGeneration
+    this.#deps.setFullAccess(false)
+    this.historyBusy = true
+    try {
+      const conversation = await this.history.get(id)
+      if (this.disposed || generation !== this.viewGeneration) return
+      session.show(id, conversation.turns, conversation.summary.selectedTurnId)
+      this.shownSummary = conversation.summary
+      this.restoreBlocked = false
+      this.restored = true
+      this.historyError = null
+      this.retryHistory = this.refresh
+      this.historyOpen = false
+      this.renaming = false
+      this.#deps.bumpScrollRevision()
+    } catch (error) {
+      if (this.disposed || generation !== this.viewGeneration) return
+      this.historyError = this.#deps.errorText(error)
+      this.retryHistory = () => this.open(id)
+    } finally {
+      if (!this.disposed && generation === this.viewGeneration) this.historyBusy = false
+    }
+  }
+
+  newConversation = () => {
+    const session = this.#deps.getSession()
+    if (!session || session.running || this.historyBusy) return
+    this.viewGeneration++
+    this.#deps.setFullAccess(false)
+    session.show(null)
+    this.shownSummary = null
+    this.restoreBlocked = false
+    this.restored = true
+    this.historyError = null
+    this.historyOpen = false
+    this.renaming = false
+    this.#deps.bumpScrollRevision()
+  }
+
+  rename = async () => {
+    const session = this.#deps.getSession()
+    const id = session?.conversationId
+    const next = this.renameTitle.trim()
+    if (!this.history || !id || !next || session?.running || this.historyBusy) return
+    const generation = this.viewGeneration
+    this.historyBusy = true
+    try {
+      const summary = await this.history.rename(id, next)
+      if (this.disposed || generation !== this.viewGeneration) return
+      this.shownSummary = summary
+      this.conversations = this.conversations.map((item) => (item.id === id ? summary : item))
+      this.renaming = false
+      this.historyError = null
+    } catch (error) {
+      if (this.disposed || generation !== this.viewGeneration) return
+      this.historyError = this.#deps.errorText(error)
+      this.retryHistory = this.rename
+    } finally {
+      if (!this.disposed && generation === this.viewGeneration) this.historyBusy = false
+    }
+  }
+
+  remove = async () => {
+    const session = this.#deps.getSession()
+    const id = session?.conversationId
+    if (!this.history || !session || !id || session.running || this.historyBusy) return
+    const generation = this.viewGeneration
+    this.historyBusy = true
+    try {
+      const ok = await this.#deps.notify.confirm({
+        title: this.#deps.t('chat.deleteTitle'),
+        body: this.#deps.t('chat.deleteBody'),
+        danger: true,
+      })
+      if (!ok || this.disposed || generation !== this.viewGeneration) return
+      await this.history.remove(id)
+      if (this.disposed || generation !== this.viewGeneration) return
+      if (session.conversationId === id) {
+        session.show(null)
+        this.shownSummary = null
+        this.historyOpen = false
+        this.renaming = false
+        this.#deps.bumpScrollRevision()
+      }
+      this.historyError = null
+      void this.refresh()
+    } catch (error) {
+      if (this.disposed || generation !== this.viewGeneration) return
+      this.historyError = this.#deps.errorText(error)
+      this.retryHistory = this.remove
+    } finally {
+      if (!this.disposed && generation === this.viewGeneration) this.historyBusy = false
+    }
+  }
+
+  sourceModel = (turn: ChatTurn): ModelRef | null =>
+    turn.endpointId && turn.modelId ? { endpointId: turn.endpointId, modelId: turn.modelId } : null
+
+  sourceLabel = (turn: ChatTurn) => {
+    const option = this.#deps
+      .getModelOptions()
+      ?.find((item) => item.endpointId === turn.endpointId && item.modelId === turn.modelId)
+    return option
+      ? (option.name ?? option.modelId)
+      : turn.modelId
+        ? `${turn.endpointId ?? this.#deps.t('chat.unknown')} · ${turn.modelId}`
+        : this.#deps.t('chat.noSourceModel')
+  }
+
+  #hasChildren(turn: ChatTurn) {
+    return (
+      this.#deps
+        .getSession()
+        ?.turns.some((child) => child.parentId === turn.id || child.supersedesId === turn.id) ===
+      true
+    )
+  }
+
+  canEdit = (turn: ChatTurn) => turn.status !== 'running' && !this.#hasChildren(turn)
+
+  editReply = (turn: ChatTurn) => {
+    this.sourceReply = turn
+    this.editDraft = turn.text
+    this.expectedText = turn.text
+    this.replyDialog = 'edit'
+    this.replyOpen = true
+  }
+
+  translateDialog = (turn: ChatTurn) => {
+    this.sourceReply = turn
+    this.replyModel = this.sourceModel(turn)
+    this.targetLanguage = this.#deps.getLocale()
+    this.replyError = null
+    this.replyDialog = 'translate'
+    this.replyOpen = true
+  }
+
+  #showConversation(conversation: Conversation) {
+    this.viewGeneration++
+    this.#deps.setFullAccess(false)
+    this.#deps
+      .getSession()
+      ?.show(conversation.summary.id, conversation.turns, conversation.summary.selectedTurnId)
+    this.shownSummary = conversation.summary
+    this.#deps.bumpScrollRevision()
+  }
+
+  mutateReply = async (turn: ChatTurn, action: 'select' | 'remove' | 'branch' | 'copy') => {
+    const session = this.#deps.getSession()
+    const id = session?.conversationId
+    if (!this.history || !session || !id || this.actionBusy) return
+    let generation = this.viewGeneration
+    this.historyBusy = true
+    try {
+      if (action === 'remove') {
+        if (turn.status === 'running') return
+        const reparent = session.turns.some((child) => child.parentId === turn.id)
+        if (
+          !(await this.#deps.notify.confirm({
+            title: this.#deps.t('chat.deleteReplyTitle'),
+            body: reparent ? this.#deps.t('chat.deleteReparentBody') : '',
+            danger: true,
+          }))
+        )
+          return
+      }
+      if (this.disposed || generation !== this.viewGeneration) return
+      const conversation =
+        action === 'select' || action === 'branch'
+          ? await this.history.selectTurn(id, turn.id)
+          : action === 'remove'
+            ? await this.history.removeTurn(id, turn.id)
+            : await this.history.fork(id, turn.id)
+      if (this.disposed || generation !== this.viewGeneration) return
+      this.#showConversation(conversation)
+      generation = this.viewGeneration
+      if (action === 'branch') {
+        this.#deps.setDraft('')
+        this.#deps.bumpDraftRevision()
+        this.#deps.discardRecovery()
+      }
+      this.historyError = null
+      void this.refresh()
+    } catch (error) {
+      if (this.disposed || generation !== this.viewGeneration) return
+      this.#deps.notify.toast('error', this.#deps.errorText(error))
+    } finally {
+      if (!this.disposed && generation === this.viewGeneration) this.historyBusy = false
+    }
+  }
+
+  retryReply = async (turn: ChatTurn) => {
+    const session = this.#deps.getSession()
+    if (!session || this.actionBusy) return
+    const source = this.sourceModel(turn)
+    const options = this.#deps.getModelOptions()
+    if (this.history && turn.persisted) {
+      if (options === null || this.#deps.getModelError()) {
+        this.#deps.notify.toast(
+          'error',
+          this.#deps.getModelError() ?? this.#deps.t('chat.modelsLoading'),
+        )
+        return
+      }
+      if (
+        !source ||
+        !options.some(
+          (option) => option.endpointId === source.endpointId && option.modelId === source.modelId,
+        )
+      ) {
+        this.#deps.notify.toast('error', this.#deps.t('chat.sourceModelUnavailable'))
+        return
+      }
+    }
+    this.#deps.bumpScrollRevision()
+    await session.retry(this.#deps.consumeBase(), turn.id)
+  }
+
+  switchModel = async (turn: ChatTurn, model: ModelRef) => {
+    const session = this.#deps.getSession()
+    if (!session || this.actionBusy) return
+    this.#deps.bumpScrollRevision()
+    if (!(await session.retry(this.#deps.consumeBase(), turn.id, model)))
+      this.#deps.notify.toast('error', this.#deps.t(`errors.${session.actionError ?? 'internal'}`))
+  }
+
+  submitReply = async () => {
+    const session = this.#deps.getSession()
+    const turn = this.sourceReply
+    if (this.disposed || !session || !turn || this.actionBusy) return
+    let generation = this.viewGeneration
+    this.replyError = null
+    if (this.replyDialog === 'edit') {
+      const id = session.conversationId
+      if (
+        !this.history ||
+        !id ||
+        !this.editDraft.trim() ||
+        this.editDraft.length > 24_000 ||
+        !this.canEdit(turn)
+      )
+        return
+      this.historyBusy = true
+      try {
+        const conversation = await this.history.editTurn(
+          id,
+          turn.id,
+          this.editDraft,
+          this.expectedText,
+        )
+        if (this.disposed || generation !== this.viewGeneration) return
+        this.#showConversation(conversation)
+        generation = this.viewGeneration
+        this.replyOpen = false
+      } catch (error) {
+        if (this.disposed || generation !== this.viewGeneration) return
+        this.replyError = this.#deps.errorText(error)
+      } finally {
+        if (!this.disposed && generation === this.viewGeneration) this.historyBusy = false
+      }
+    } else {
+      if (!this.validReplyModel || !this.replyModel) return
+      if (!this.targetLanguage.trim() || this.targetLanguage.trim().length > 80) return
+      const accepted = await session.translate(
+        { ...this.#deps.consumeBase(), model: this.replyModel },
+        turn.id,
+        this.targetLanguage.trim(),
+      )
+      if (this.disposed || generation !== this.viewGeneration) return
+      if (accepted) this.replyOpen = false
+      else
+        this.replyError = session.actionError
+          ? this.#deps.t(`errors.${session.actionError}`)
+          : this.#deps.t('errors.internal')
+    }
+  }
+}

package/src/chat/chat-panel-props.ts

@@ -0,0 +1,32 @@
+import type { ImageRef, ModelRef, PermissionMode, ReasoningEffort, SkillRef } from '../ports'
+
+/** Host inputs for the chat container, independent of its private view composition. */
+export interface ChatPanelProps {
+  purpose?: string
+  model?: ModelRef | null
+  scope?: string
+  /** Host context can be removed for the next message without changing conversation ownership. */
+  context?: { kind: string; id: string; label: string } | null
+  skills?: SkillRef[]
+  onSkillsChange?: (refs: SkillRef[]) => void
+  skillsBudget?: number
+  onInsert?: (markdown: string) => void
+  onSaveNote?: (markdown: string, images: ImageRef[]) => Promise<void> | void
+  onExportMarkdown?: (markdown: string) => Promise<void> | void
+  onOpenSettings?: () => void
+  /** A failed restore stays visible until retried or replaced with a new conversation. */
+  conversationId?: string | null
+  onConversationChange?: (id: string | null) => void
+  onClose?: () => void
+  /** A host painting model gates image generation. */
+  paintingModel?: boolean
+  /** Ordered pinned tool ids; omitted means the default toolbar. */
+  toolbar?: string[]
+  onToolbarChange?: (ids: string[]) => void
+  /** Saved preference mapped to the selected model's nearest supported effort. */
+  reasoningEffort?: ReasoningEffort
+  onReasoningEffortChange?: (effort: ReasoningEffort) => void
+  permissionModes?: PermissionMode[]
+  /** Full access stays private and is consumed once, never saved as a preference. */
+  permissionMode?: PermissionMode
+}

package/src/chat/index.ts

@@ -0,0 +1,6 @@
+export { default as ChatPanel } from './ChatPanel.svelte'
+export { default as ChatSurface } from './ChatSurface.svelte'
+export { default as ChatComposer } from './ChatComposer.svelte'
+export { default as ChatMessage } from './ChatMessage.svelte'
+export { default as ReasoningControl } from './ReasoningControl.svelte'
+export { default as UsageControl } from './UsageControl.svelte'

package/src/chat/run-session-history.ts

@@ -0,0 +1,56 @@
+import type { Cost, TokenUsage, Turn } from '../ports'
+import type { ChatTurn } from './run-session-types'
+
+export function fromHistory(turn: Turn): ChatTurn {
+  return {
+    id: turn.id,
+    persisted: true,
+    parentId: turn.parentId,
+    questionId: turn.questionId,
+    supersedesId: turn.supersedesId,
+    kind: turn.kind,
+    endpointId: turn.endpointId,
+    modelId: turn.modelId,
+    input: turn.input,
+    images: turn.images,
+    generated: turn.generated,
+    text: turn.text,
+    reasoningText: turn.reasoningText ?? '',
+    reasoningEffort: turn.reasoningEffort ?? 'default',
+    usage: turn.usage ?? null,
+    cost: turn.cost ?? null,
+    contextUsage: turn.contextUsage ?? null,
+    status: turn.status,
+    error: turn.errorCode,
+    tools: [],
+    exhausted: false,
+    search: { status: 'idle', query: null, provider: null, hits: [], error: null },
+  }
+}
+
+export function cumulativeUsage(turns: readonly ChatTurn[]): TokenUsage {
+  const total: TokenUsage = {
+    inputTokens: null,
+    outputTokens: null,
+    cacheReadTokens: null,
+    cacheWriteTokens: null,
+    reasoningTokens: null,
+  }
+  for (const turn of turns)
+    for (const key of Object.keys(total) as (keyof TokenUsage)[]) {
+      const value = turn.usage?.[key]
+      if (value != null) total[key] = (total[key] ?? 0) + value
+    }
+  return total
+}
+
+export function cumulativeCost(turns: readonly ChatTurn[]): Cost[] {
+  const totals: Cost[] = []
+  for (const { cost } of turns) {
+    if (!cost) continue
+    const found = totals.find((item) => item.currency === cost.currency)
+    if (found) found.amount += cost.amount
+    else totals.push({ ...cost })
+  }
+  return totals
+}