@ouraihub/aether-ui 0.0.0-stage → 0.1.1

package/src/providers/test-support/providers-fixture.ts

@@ -0,0 +1,120 @@
+import { render } from '@testing-library/svelte'
+import { vi } from 'vitest'
+import { createI18n } from '../../i18n'
+import {
+  createFakePorts,
+  type Endpoint,
+  type Provider,
+  type ProviderPreset,
+  type ProviderSave,
+} from '../../ports'
+import Harness from '../Harness.test.svelte'
+
+export const endpoint: Endpoint = {
+  id: 'e1',
+  slug: 'main',
+  baseUrl: 'http://127.0.0.1:9/v1',
+  protocol: 'openai-chat',
+  keys: [
+    {
+      id: 'k1',
+      label: '',
+      enabled: true,
+      masked: 'sk-a****wxyz',
+      readable: true,
+      exhaustedUntil: null,
+      exhaustedReason: null,
+    },
+  ],
+  keyStrategy: 'round_robin',
+  probeUrl: 'http://127.0.0.1:9/v1/models',
+  imageBaseUrl: null,
+  imageEditBaseUrl: null,
+  headers: { 'X-Team': 'a' },
+  models: [],
+}
+
+export const stored: Provider = {
+  id: 'p1',
+  name: 'Local',
+  enabled: true,
+  notes: '',
+  presetId: null,
+  endpoints: [endpoint],
+}
+
+export const twoKeys: Endpoint = {
+  ...endpoint,
+  keys: [
+    ...endpoint.keys,
+    {
+      id: 'k2',
+      label: 'backup',
+      enabled: true,
+      masked: 'sk-b****1234',
+      readable: true,
+      exhaustedUntil: null,
+      exhaustedReason: null,
+    },
+  ],
+}
+
+export const model = {
+  name: null,
+  groupName: null,
+  pricing: null,
+  contextWindow: null,
+  maxOutput: null,
+  canVision: false,
+  supportsTools: null,
+  nativeWebSearch: false,
+} as const
+
+export function setup(
+  overrides: NonNullable<Parameters<typeof createFakePorts>[0]>['providers'] = {},
+  list = stored,
+  presets?: ProviderPreset[],
+) {
+  const saves: ProviderSave[] = []
+  const ports = createFakePorts({
+    providers: {
+      list: () => Promise.resolve([list]),
+      save: (input) => {
+        saves.push(input)
+        return Promise.resolve([stored])
+      },
+      probe: () =>
+        Promise.resolve({
+          probeUrl: endpoint.probeUrl,
+          error: null,
+          suggestedProtocol: null,
+          models: [
+            {
+              ...model,
+              id: 'gpt-4o',
+              group: 'gpt',
+              modelType: 'chat',
+              typeSource: 'inferred',
+              reasoning: null,
+            },
+            {
+              ...model,
+              id: 'text-embedding-3',
+              group: null,
+              modelType: 'embedding',
+              typeSource: 'inferred',
+              reasoning: null,
+            },
+          ],
+        }),
+      ...overrides,
+    },
+  })
+  const notify = { toast: vi.fn(), confirm: () => Promise.resolve(true) }
+  const logger = { debug: vi.fn(), info: vi.fn(), warn: vi.fn(), error: vi.fn() }
+  render(Harness, {
+    kit: { ports, i18n: createI18n('en'), notify, logger },
+    ...(presets ? { presets } : {}),
+  })
+  return { saves, notify }
+}

package/src/search/SearchAdvancedTools.svelte

@@ -0,0 +1,182 @@
+<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 Field from '#lib/components/ui/field/index.js'
+  import { getKitContext } from '../context'
+  import type { SearchPage, SearchPreferences, SearchResult } from '../ports'
+  let {
+    preferences = $bindable(),
+    blacklist = $bindable(),
+    query = $bindable(),
+    pageUrl = $bindable(),
+    preferencesPending,
+    preferencesError,
+    result,
+    page,
+    queryPending,
+    pagePending,
+    queryError,
+    pageError,
+    onSavePreferences,
+    onSearch,
+    onReadPage,
+  }: {
+    preferences: SearchPreferences
+    blacklist: string
+    query: string
+    pageUrl: string
+    preferencesPending: boolean
+    preferencesError: string
+    result: SearchResult | null
+    page: SearchPage | null
+    queryPending: boolean
+    pagePending: boolean
+    queryError: string
+    pageError: string
+    onSavePreferences: () => void
+    onSearch: () => void
+    onReadPage: () => void
+  } = $props()
+
+  const { i18n } = getKitContext()
+  const { t } = i18n
+  const safeUrl = (raw?: string) => {
+    if (!raw) return null
+    try {
+      const url = new URL(raw)
+      return ['https:', 'http:'].includes(url.protocol) ? url.href : null
+    } catch {
+      return null
+    }
+  }
+</script>
+
+<section class="rounded-kit border p-4">
+  <details>
+    <summary class="cursor-pointer text-kit-base font-semibold">{t('search.advanced')}</summary>
+    <Field.Group class="mt-3 gap-3">
+      <Field.Field orientation="horizontal"
+        ><Field.Label for="search-max-results">{t('search.maxResults')}</Field.Label><Input
+          id="search-max-results"
+          class="ml-auto w-20"
+          type="number"
+          min="1"
+          max="50"
+          disabled={preferencesPending}
+          value={preferences.maxResults}
+          oninput={(event) => (preferences.maxResults = +event.currentTarget.value)}
+        /></Field.Field
+      >
+      <Field.Field orientation="horizontal"
+        ><Field.Label for="search-compression">{t('search.compression')}</Field.Label><select
+          id="search-compression"
+          class="bg-background border-input h-kit-control ml-auto rounded-kit-sm border px-2 text-kit-sm"
+          disabled={preferencesPending}
+          value={preferences.compression}
+          onchange={(event) =>
+            (preferences.compression = event.currentTarget
+              .value as SearchPreferences['compression'])}
+          ><option value="none">{t('search.compressionNone')}</option><option value="cutoff"
+            >{t('search.compressionCutoff')}</option
+          ></select
+        ></Field.Field
+      >
+      {#if preferences.compression === 'cutoff'}<Field.Field orientation="horizontal"
+          ><Field.Label for="search-cutoff">{t('search.cutoffLimit')}</Field.Label><Input
+            id="search-cutoff"
+            class="ml-auto w-24"
+            type="number"
+            min="100"
+            max="20000"
+            disabled={preferencesPending}
+            value={preferences.cutoffLimit}
+            oninput={(event) => (preferences.cutoffLimit = +event.currentTarget.value)}
+          /></Field.Field
+        >{/if}
+      <Field.Field
+        ><Field.Label for="search-blacklist">{t('search.blacklist')}</Field.Label><Textarea
+          id="search-blacklist"
+          rows={3}
+          disabled={preferencesPending}
+          placeholder="example.com\n*://*.example.org/*"
+          value={blacklist}
+          oninput={(event) => (blacklist = event.currentTarget.value)}
+        /></Field.Field
+      >
+    </Field.Group>
+  </details>
+  <Field.Field class="mt-3 border-t pt-3"
+    ><label class="flex items-center gap-2 text-kit-sm"
+      ><input
+        type="checkbox"
+        disabled={preferencesPending}
+        checked={preferences.modelToolsPreferred}
+        onchange={(event) => (preferences.modelToolsPreferred = event.currentTarget.checked)}
+      />{t('search.nativePreferred')}</label
+    ><Field.Description>{t('search.nativePrivacy')}</Field.Description></Field.Field
+  >
+  {#if preferencesError}<p role="alert" class="text-destructive text-kit-sm">
+      {preferencesError}
+    </p>{/if}
+  <Button
+    class="mt-3"
+    type="button"
+    size="sm"
+    disabled={preferencesPending}
+    onclick={onSavePreferences}>{t('search.save')}</Button
+  >
+</section>
+<section class="flex min-w-0 flex-col gap-3 rounded-kit border p-4" aria-label={t('search.tools')}>
+  <Field.Field
+    ><Field.Label for="search-query">{t('search.query')}</Field.Label>
+    <div class="flex min-w-0 gap-2">
+      <Input
+        id="search-query"
+        class="min-w-0 flex-1"
+        disabled={queryPending}
+        value={query}
+        oninput={(event) => (query = event.currentTarget.value)}
+      /><Button type="button" disabled={queryPending || !query.trim()} onclick={onSearch}
+        >{t('search.runSearch')}</Button
+      >
+    </div></Field.Field
+  >
+  {#if queryError}<p class="text-destructive text-kit-sm" role="alert">{queryError}</p>{/if}
+  {#if result}<p class="text-muted-foreground text-kit-sm">
+      {t('search.resultCount', { count: result.hits.length })}
+    </p>
+    {#each result.hits as hit (hit.url)}<article class="min-w-0 text-kit-sm">
+        <a
+          class="text-primary break-words hover:underline"
+          href={safeUrl(hit.url) ?? ''}
+          target="_blank"
+          rel="noopener noreferrer">{hit.title}</a
+        >
+        <p class="whitespace-pre-wrap break-words">{hit.snippet}</p>
+      </article>{/each}{/if}
+  <Field.Field
+    ><Field.Label for="search-page-url">{t('search.pageUrl')}</Field.Label>
+    <div class="flex min-w-0 gap-2">
+      <Input
+        id="search-page-url"
+        class="min-w-0 flex-1"
+        disabled={pagePending}
+        value={pageUrl}
+        oninput={(event) => (pageUrl = event.currentTarget.value)}
+      /><Button type="button" disabled={pagePending || !pageUrl.trim()} onclick={onReadPage}
+        >{t('search.read')}</Button
+      >
+    </div></Field.Field
+  >
+  {#if pageError}<p class="text-destructive text-kit-sm" role="alert">{pageError}</p>{/if}
+  {#if page}<h3 class="text-kit-base font-medium">{page.title}</h3>
+    <a
+      class="text-primary break-words text-kit-sm"
+      href={safeUrl(page.url) ?? ''}
+      target="_blank"
+      rel="noopener noreferrer">{page.url}</a
+    >
+    <pre
+      class="max-h-96 overflow-auto whitespace-pre-wrap break-words text-kit-sm">{page.content}</pre>{/if}
+</section>

package/src/search/SearchProviderCard.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+  import ActivityIcon from '@lucide/svelte/icons/activity'
+  import ListIcon from '@lucide/svelte/icons/list'
+  import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle'
+  import ExternalLinkIcon from '@lucide/svelte/icons/external-link'
+  import { Button } from '#lib/components/ui/button/index.js'
+  import { Input } from '#lib/components/ui/input/index.js'
+  import CopyInput from '../CopyInput.svelte'
+  import * as Alert from '#lib/components/ui/alert/index.js'
+  import * as Field from '#lib/components/ui/field/index.js'
+  import { getKitContext } from '../context'
+  import type { SearchCap, SearchProvider, SearchSettingsDto } from '../ports'
+
+  type Draft = { baseUrl?: string; basicAuthUsername?: string }
+  let {
+    cap,
+    provider,
+    settings,
+    pending,
+    error,
+    draft,
+    keyDraft,
+    check,
+    onChoose,
+    onOpenKeys,
+    onKeyInput,
+    onPatchDraft,
+    onSave,
+  }: {
+    cap: SearchCap
+    provider: SearchProvider
+    settings: SearchSettingsDto
+    pending: boolean
+    error: string
+    draft: Draft
+    keyDraft: string
+    check?: number | undefined
+    onChoose: (provider: string) => void
+    onOpenKeys: () => void
+    onKeyInput: (value: string) => void
+    onPatchDraft: (patch: Draft) => void
+    onSave: (check?: boolean) => void
+  } = $props()
+
+  const { i18n } = getKitContext()
+  const { t } = i18n
+  const safeUrl = (raw?: string) => {
+    if (!raw) return null
+    try {
+      const url = new URL(raw)
+      return ['https:', 'http:'].includes(url.protocol) ? url.href : null
+    } catch {
+      return null
+    }
+  }
+</script>
+
+<section
+  class="flex min-w-0 flex-col gap-3 rounded-kit border p-4"
+  aria-labelledby={`search-${cap}`}
+>
+  <header class="flex flex-wrap items-start justify-between gap-3">
+    <div class="min-w-0 flex-1">
+      <h2 id={`search-${cap}`} class="text-kit-base font-semibold">{t(`search.${cap}`)}</h2>
+      <p class="text-muted-foreground text-kit-sm">
+        {provider.description}
+        {#if safeUrl(provider.officialWebsite)}<a
+            class="text-primary inline-flex"
+            href={safeUrl(provider.officialWebsite) ?? ''}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={t('search.website')}
+            title={t('search.website')}><ExternalLinkIcon size={13} /></a
+          >{/if}
+      </p>
+    </div>
+    <select
+      class="bg-background border-input h-kit-control max-w-full rounded-kit-sm border px-2 text-kit-sm"
+      aria-label={t(`search.${cap}`)}
+      disabled={pending}
+      value={settings.defaultProvider}
+      onchange={(event) => onChoose(event.currentTarget.value)}
+    >
+      {#each settings.providers as option (option.id)}<option value={option.id}
+          >{option.name}</option
+        >{/each}
+    </select>
+  </header>
+  {#if error}<Alert.Root variant="destructive"
+      ><Alert.Description>{error}</Alert.Description></Alert.Root
+    >{/if}
+  <Field.Group class="gap-3 border-t pt-3">
+    {#if provider.keyMode !== 'none' || provider.basicAuth}
+      <Field.Field data-disabled={pending}>
+        <div class="flex flex-wrap items-baseline gap-2">
+          <Field.Label for={`search-key-${cap}`}
+            >{provider.basicAuth ? t('search.password') : t('search.apiKey')}</Field.Label
+          >
+          {#if safeUrl(provider.apiKeyWebsite)}<a
+              class="text-primary text-kit-sm hover:underline"
+              href={safeUrl(provider.apiKeyWebsite) ?? ''}
+              target="_blank"
+              rel="noopener noreferrer">{t('search.apiKeyWebsite')}</a
+            >{/if}
+        </div>
+        <div class="flex min-w-0 items-center gap-2">
+          <Input
+            id={`search-key-${cap}`}
+            class="min-w-0 flex-1"
+            type="password"
+            autocomplete="off"
+            spellcheck={false}
+            maxlength={4096}
+            disabled={pending}
+            placeholder={t('search.newKey')}
+            value={keyDraft}
+            oninput={(event) => onKeyInput(event.currentTarget.value)}
+          />
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            disabled={pending}
+            aria-label={t('search.manageKeys')}
+            title={t('search.manageKeys')}
+            onclick={onOpenKeys}><ListIcon /></Button
+          >
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            disabled={pending}
+            aria-label={t('search.check')}
+            title={t('search.check')}
+            onclick={() => onSave(true)}
+          >
+            {#if pending}<LoaderCircleIcon class="animate-spin" />{:else}<ActivityIcon />{/if}
+          </Button>
+        </div>
+        <Field.Description
+          >{provider.keys.length
+            ? provider.keys.map((item) => item.masked).join(' · ')
+            : t('search.keyNotSet')}</Field.Description
+        >
+      </Field.Field>
+    {/if}
+    {#if provider.defaultBaseUrl !== undefined}
+      <Field.Field data-disabled={pending}>
+        <Field.Label for={`search-url-${cap}`}>{t('search.baseUrl')}</Field.Label>
+        <div class="flex min-w-0 items-center gap-2">
+          <CopyInput
+            id={`search-url-${cap}`}
+            class="min-w-0 flex-1"
+            disabled={pending}
+            value={draft.baseUrl ?? provider.baseUrl ?? provider.defaultBaseUrl}
+            oninput={(event) => onPatchDraft({ baseUrl: event.currentTarget.value })}
+          />
+          {#if provider.keyMode === 'none' && !provider.basicAuth}<Button
+              type="button"
+              variant="outline"
+              size="icon-sm"
+              disabled={pending}
+              aria-label={t('search.check')}
+              title={t('search.check')}
+              onclick={() => onSave(true)}><ActivityIcon /></Button
+            >{/if}
+        </div>
+      </Field.Field>
+    {/if}
+    {#if provider.basicAuth}
+      <Field.Field
+        ><Field.Label for={`search-user-${cap}`}>{t('search.username')}</Field.Label><Input
+          id={`search-user-${cap}`}
+          disabled={pending}
+          value={draft.basicAuthUsername ?? provider.basicAuthUsername ?? ''}
+          oninput={(event) => onPatchDraft({ basicAuthUsername: event.currentTarget.value })}
+        /></Field.Field
+      >
+    {/if}
+  </Field.Group>
+  <div class="flex flex-wrap items-center gap-2">
+    {#if provider.defaultBaseUrl !== undefined || provider.keyMode !== 'none'}<Button
+        type="button"
+        size="sm"
+        disabled={pending}
+        onclick={() => onSave()}>{t('search.save')}</Button
+      >{/if}
+    {#if pending}<span class="text-muted-foreground text-kit-sm" role="status"
+        >{t('search.checking')}</span
+      >
+    {:else if check !== undefined}<span class="text-muted-foreground text-kit-sm" role="status"
+        >{t('search.resultCount', { count: check })}</span
+      >{/if}
+  </div>
+</section>