@ouraihub/aether-ui 0.0.0-stage → 0.1.1

package/src/providers/ModelPickerDialog.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+  // Search and filter fetched models; every +/- applies at once.
+  import { untrack } from 'svelte'
+  import ChevronRight from '@lucide/svelte/icons/chevron-right'
+  import Plus from '@lucide/svelte/icons/plus'
+  import Minus from '@lucide/svelte/icons/minus'
+  import { Button } from '#lib/components/ui/button/index.js'
+  import { Input } from '#lib/components/ui/input/index.js'
+  import * as Dialog from '#lib/components/ui/dialog/index.js'
+  import * as Select from '#lib/components/ui/select/index.js'
+  import { getKitContext } from '../context'
+  import type { Model, ModelType, ProbeResult } from '../ports'
+  import { mergeModels } from './draft'
+
+  let {
+    open = $bindable(false),
+    result,
+    selected,
+    onchange,
+  }: {
+    open: boolean
+    result: ProbeResult | null
+    /** Currently selected models; preselected and their user-set types kept. */
+    selected: Model[]
+    /** Called after every change with the endpoint's full model list. */
+    onchange: (models: Model[]) => void
+  } = $props()
+
+  const TYPES: ModelType[] = [
+    'chat',
+    'image',
+    'video',
+    'tts',
+    'stt',
+    'embedding',
+    'rerank',
+    'unknown',
+  ]
+  const { t } = getKitContext().i18n
+
+  let checked = $state<Record<string, boolean>>({})
+  let types = $state<Record<string, ModelType>>({})
+  let query = $state('')
+  let filter = $state<ModelType | 'all'>('all')
+  let collapsed = $state<Record<string, boolean>>({})
+
+  $effect.pre(() => {
+    if (!open || !result) return
+    const current = Object.fromEntries(untrack(() => selected).map((m) => [m.id, m]))
+    checked = Object.fromEntries(result.models.map((m) => [m.id, m.id in current]))
+    types = Object.fromEntries(
+      result.models.map((m) => [m.id, current[m.id]?.modelType ?? m.modelType]),
+    )
+    query = ''
+    filter = 'all'
+    collapsed = {}
+  })
+
+  const models = $derived(result?.models ?? [])
+  const searched = $derived(
+    models.filter((m) => m.id.toLowerCase().includes(query.trim().toLowerCase())),
+  )
+  const shown = $derived(
+    searched.filter((m) => filter === 'all' || (types[m.id] ?? m.modelType) === filter),
+  )
+  const groups = $derived(Object.entries(Object.groupBy(shown, (m) => m.group ?? '')))
+  const count = $derived(models.filter((m) => checked[m.id]).length)
+  const bulkRemoves = $derived(shown.length > 0 && shown.every((m) => checked[m.id]))
+
+  function bulk() {
+    const on = !bulkRemoves
+    for (const model of shown) checked[model.id] = on
+    emit()
+  }
+  function toggle(id: string) {
+    checked[id] = !checked[id]
+    emit()
+  }
+  function setType(id: string, type: ModelType) {
+    types[id] = type
+    if (checked[id]) emit()
+  }
+
+  /** Models outside this probe (added by hand, or no longer listed) are kept untouched. */
+  function emit() {
+    onchange(mergeModels(selected, models, checked, types))
+  }
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Content class="flex max-h-[85dvh] min-w-0 flex-col gap-3 sm:max-w-2xl">
+    <Dialog.Header class="shrink-0 text-left">
+      <Dialog.Title class="flex items-center gap-2 pr-6">
+        {t('providers.picker_title')}
+        <span aria-hidden="true" class="bg-muted rounded px-1.5 text-kit-xs tabular-nums"
+          >{models.length}</span
+        >
+      </Dialog.Title>
+      <Dialog.Description>{t('providers.picker_hint')}</Dialog.Description>
+    </Dialog.Header>
+    <div class="flex shrink-0 items-center gap-2">
+      <Input
+        class="min-w-0 flex-1"
+        bind:value={query}
+        placeholder={t('providers.search_models')}
+        aria-label={t('providers.search_models')}
+        autocomplete="off"
+        spellcheck={false}
+      />
+      <Button
+        variant="outline"
+        size="sm"
+        class="shrink-0"
+        disabled={shown.length === 0}
+        onclick={bulk}
+      >
+        {t(bulkRemoves ? 'providers.remove_all' : 'providers.add_all')}
+      </Button>
+    </div>
+    <div
+      class="flex shrink-0 gap-1 overflow-x-auto pb-1"
+      role="group"
+      aria-label={t('providers.model_type')}
+    >
+      {#each ['all', ...TYPES] as type (type)}
+        {@const hits =
+          type === 'all'
+            ? searched.length
+            : searched.filter((m) => (types[m.id] ?? m.modelType) === type).length}
+        <Button
+          variant={filter === type ? 'secondary' : 'ghost'}
+          size="sm"
+          class="shrink-0"
+          aria-pressed={filter === type}
+          disabled={hits === 0 && type !== 'all'}
+          onclick={() => (filter = type as ModelType | 'all')}
+        >
+          {type === 'all' ? t('providers.all_types') : t(`providers.type.${type as ModelType}`)}
+          <span class="text-muted-foreground tabular-nums">{hits}</span>
+        </Button>
+      {/each}
+    </div>
+    <div
+      class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto"
+      role="region"
+      aria-label={t('providers.models')}
+    >
+      {#if shown.length === 0}
+        <p class="text-muted-foreground py-8 text-center text-kit-sm">
+          {t('providers.no_model_matches')}
+        </p>
+      {/if}
+      {#each groups as [group, items = []] (group)}
+        {@const folded = !query.trim() && collapsed[group]}
+        <section class="flex min-w-0 flex-col">
+          <Button
+            variant="ghost"
+            size="sm"
+            class="justify-start"
+            aria-expanded={!folded}
+            onclick={() => (collapsed[group] = !collapsed[group])}
+          >
+            <ChevronRight class={folded ? '' : 'rotate-90'} />
+            {group || t('providers.no_group')}
+            <span class="bg-muted rounded px-1.5 tabular-nums">{items.length}</span>
+          </Button>
+          {#if !folded}
+            <ul>
+              {#each items as model (model.id)}
+                <li
+                  class="hover:bg-accent/50 flex min-w-0 items-center gap-1 rounded-md py-0.5 pl-4"
+                >
+                  <span class="min-w-0 flex-1 truncate font-mono text-kit-sm" title={model.id}
+                    >{model.id}</span
+                  >
+                  <Select.Root
+                    type="single"
+                    value={types[model.id] ?? model.modelType}
+                    onValueChange={(value) => setType(model.id, value as ModelType)}
+                  >
+                    <Select.Trigger
+                      size="sm"
+                      class="shrink-0 border-0 bg-transparent shadow-none"
+                      aria-label={t('providers.type_for', { id: model.id })}
+                    >
+                      {t(`providers.type.${types[model.id] ?? model.modelType}`)}
+                    </Select.Trigger>
+                    <Select.Content
+                      ><Select.Group>
+                        {#each TYPES as type (type)}
+                          <Select.Item value={type} label={t(`providers.type.${type}`)} />
+                        {/each}
+                      </Select.Group></Select.Content
+                    >
+                  </Select.Root>
+                  {#if model.canVision}<span
+                      class="text-muted-foreground hidden shrink-0 text-kit-xs sm:inline"
+                      >{t('providers.vision')}</span
+                    >{/if}
+                  <span class="text-success w-8 shrink-0 text-right text-kit-xs"
+                    >{checked[model.id] ? t('providers.picked') : ''}</span
+                  >
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    class="shrink-0"
+                    aria-label={t(
+                      checked[model.id] ? 'providers.remove_model' : 'providers.add_model',
+                      {
+                        id: model.id,
+                      },
+                    )}
+                    onclick={() => toggle(model.id)}
+                  >
+                    {#if checked[model.id]}<Minus />{:else}<Plus />{/if}
+                  </Button>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        </section>
+      {/each}
+    </div>
+    <Dialog.Footer class="shrink-0">
+      <p class="text-muted-foreground mr-auto text-kit-xs" aria-live="polite">
+        {t('providers.picked_count', { count })}
+      </p>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>

package/src/providers/ModelPricing.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  import { getKitContext } from '../context'
+  import MinusIcon from '@lucide/svelte/icons/minus'
+  import PlusIcon from '@lucide/svelte/icons/plus'
+  import { Button } from '#lib/components/ui/button/index.js'
+  import * as Field from '#lib/components/ui/field/index.js'
+  import { Input } from '#lib/components/ui/input/index.js'
+  import type { Model, PricingTier } from '../ports'
+  import type { ModelField } from './draft'
+
+  let {
+    edit,
+    errorFor,
+  }: { edit: Model | null; errorFor: (field: ModelField) => { message: string }[] } = $props()
+  const { t } = getKitContext().i18n
+  const PRICES: (keyof PricingTier)[] = ['input', 'output', 'cacheRead', 'cacheWrite']
+  const CURRENCIES = [
+    ['USD', '$'],
+    ['CNY', '¥'],
+  ] as const
+  const CHIP = 'aria-pressed:border-primary aria-pressed:bg-primary/10 aria-pressed:text-primary'
+  const count = (value: number) => (Number.isNaN(value) ? null : value)
+  const tier = (minInputTokens: number): PricingTier => ({
+    minInputTokens,
+    input: 0,
+    output: 0,
+    cacheRead: null,
+    cacheWrite: null,
+  })
+  function setPrice(index: number, key: keyof PricingTier, value: number) {
+    const target = edit?.pricing?.tiers[index]
+    if (!target) return
+    if (key === 'cacheRead' || key === 'cacheWrite') target[key] = count(value)
+    else target[key] = value
+  }
+  function removeTier(index: number) {
+    const pricing = edit?.pricing
+    if (!edit || !pricing) return
+    pricing.tiers.splice(index, 1)
+    if (pricing.tiers[0]) pricing.tiers[0].minInputTokens = 0
+    else edit.pricing = null
+  }
+</script>
+
+<Field.Set>
+  <Field.Legend variant="label">{t('providers.pricing')}</Field.Legend>
+  {#if edit?.pricing}
+    {@const current = edit.pricing}
+    <div class="flex flex-wrap gap-1.5" role="group" aria-label={t('providers.currency')}>
+      {#each CURRENCIES as [currency, symbol] (currency)}
+        <Button
+          variant="outline"
+          size="sm"
+          class={CHIP}
+          aria-pressed={current.currency === currency}
+          aria-label={t(`providers.currency.${currency}`)}
+          onclick={() => (current.currency = currency)}>{symbol}</Button
+        >
+      {/each}
+    </div>
+    <p class="text-muted-foreground text-kit-xs">{t('providers.pricing_unit')}</p>
+    {#each current.tiers as item, index (index)}
+      <fieldset class="flex flex-col gap-2 rounded-kit border p-2">
+        <legend class="flex w-full items-center gap-2 px-1 text-kit-sm"
+          >{t('providers.tier', { n: index + 1 })}{#if current.tiers.length > 1}<Button
+              variant="ghost"
+              size="icon-xs"
+              class="ml-auto"
+              aria-label={t('providers.tier_remove', { n: index + 1 })}
+              title={t('providers.tier_remove', { n: index + 1 })}
+              onclick={() => removeTier(index)}><MinusIcon /></Button
+            >{/if}</legend
+        >
+        <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
+          <label class="flex flex-col gap-1 text-kit-xs"
+            >{t('providers.tier_start')}<Input
+              type="number"
+              min="0"
+              step="1"
+              disabled={index === 0}
+              value={item.minInputTokens}
+              oninput={(event) =>
+                setPrice(index, 'minInputTokens', event.currentTarget.valueAsNumber)}
+            /></label
+          >
+          {#each PRICES as key (key)}
+            <label class="flex flex-col gap-1 text-kit-xs"
+              >{t(`providers.price.${key}`)}<Input
+                type="number"
+                min="0"
+                step="any"
+                placeholder={key === 'cacheRead' || key === 'cacheWrite'
+                  ? t('providers.price_same_as_input')
+                  : ''}
+                value={item[key] ?? ''}
+                oninput={(event) => setPrice(index, key, event.currentTarget.valueAsNumber)}
+              /></label
+            >
+          {/each}
+        </div>
+      </fieldset>
+    {/each}
+    <Field.Error errors={errorFor('pricing')} />
+    <div class="flex flex-wrap gap-1.5">
+      {#if current.tiers.length < 8}<Button
+          variant="outline"
+          size="sm"
+          onclick={() =>
+            current.tiers.push(tier((current.tiers.at(-1)?.minInputTokens ?? 0) + 200000))}
+          ><PlusIcon />{t('providers.tier_add')}</Button
+        >{/if}
+      <Button variant="ghost" size="sm" onclick={() => edit && (edit.pricing = null)}
+        >{t('providers.pricing_clear')}</Button
+      >
+    </div>
+  {:else}
+    <Button
+      variant="outline"
+      size="sm"
+      class="self-start"
+      onclick={() => edit && (edit.pricing = { currency: 'USD', tiers: [tier(0)] })}
+      ><PlusIcon />{t('providers.pricing_add')}</Button
+    >
+  {/if}
+</Field.Set>