@ouraihub/aether-ui 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,178 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/svelte'
+import type { ComponentProps } from 'svelte'
+import { expect, vi } from 'vitest'
+import { createI18n } from '../../i18n'
+import {
+  createFakePorts,
+  KitClientError,
+  type ConversationClient,
+  type Conversation,
+  type RunClient,
+  type RunEvent,
+  type RunRequest,
+  type ProvidersPort,
+  type SearchPort,
+  type SkillsPort,
+} from '../../ports'
+import type ChatPanel from '../ChatPanel.svelte'
+import Harness from '../Harness.test.svelte'
+
+export const model = { endpointId: 'e1', modelId: 'm1' }
+
+export function required<T>(value: T | null | undefined): T {
+  if (value == null) throw new Error('Expected chat fixture or control is missing')
+  return value
+}
+
+export interface Run {
+  request: RunRequest
+  turnId: string
+  emit: (event: RunEvent) => void
+  signal: AbortSignal | undefined
+}
+
+export interface Extra {
+  props?: Partial<ComponentProps<typeof ChatPanel>>
+  history?: Partial<ConversationClient>
+  providers?: Partial<ProvidersPort>
+  search?: Partial<SearchPort>
+  skills?: Partial<SkillsPort>
+  chat?: Partial<RunClient>
+}
+
+export function setup(
+  withHistory: boolean,
+  context: { kind: string; id: string; label: string } | null = null,
+  extra: Extra = {},
+) {
+  const runs: Run[] = []
+  const stored: Conversation = {
+    summary: {
+      id: 'c1',
+      title: 'Test',
+      scope: null,
+      selectedTurnId: null,
+      createdAt: 0,
+      updatedAt: 0,
+    },
+    turns: [],
+  }
+  const approve = vi.fn<(runId: string, callId: string, allow: boolean) => Promise<void>>(() =>
+    Promise.resolve(),
+  )
+  const ports = createFakePorts({
+    providers: {
+      modelOptions: () =>
+        Promise.resolve([
+          {
+            ...model,
+            label: 'Local · main · m1',
+            modelType: 'chat',
+            name: null,
+            supportsTools: null,
+            reasoning: null,
+            nativeWebSearch: false,
+            canVision: false,
+          },
+        ]),
+      ...extra.providers,
+    },
+    ...(extra.search ? { search: extra.search } : {}),
+    ...(extra.skills ? { skills: extra.skills } : {}),
+    chat: {
+      start: (request, emit, options) => {
+        const id = crypto.randomUUID()
+        const source = stored.turns.find(
+          (turn) => turn.id === (request.retryTurnId ?? request.translateTurnId),
+        )
+        const turn: Conversation['turns'][number] = {
+          id,
+          parentId: request.retryTurnId
+            ? (source?.parentId ?? null)
+            : (request.translateTurnId ?? request.replyToId ?? stored.summary.selectedTurnId),
+          questionId: request.retryTurnId ? (source?.questionId ?? id) : id,
+          supersedesId: request.retryTurnId ?? null,
+          kind: request.translateTurnId ? 'translation' : 'reply',
+          input: source?.input ?? request.input,
+          images: source
+            ? source.images
+            : (request.images ?? []).map((image) => ({
+                mime: image.mime,
+                url: `data:${image.mime};base64,${image.data}`,
+              })),
+          generated: [],
+          text: '',
+          status: 'running',
+          errorCode: null,
+          endpointId: request.model?.endpointId ?? null,
+          modelId: request.model?.modelId ?? null,
+          reasoningEffort: request.reasoningEffort ?? 'default',
+          reasoningText: null,
+        }
+        stored.turns.push(turn)
+        const wrapped = (event: RunEvent) => {
+          if (event.kind === 'text_delta') turn.text += event.text
+          if (event.kind === 'reasoning_delta')
+            turn.reasoningText = (turn.reasoningText ?? '') + event.text
+          if (event.kind === 'usage') {
+            turn.usage = {
+              inputTokens: event.inputTokens,
+              outputTokens: event.outputTokens,
+              cacheReadTokens: event.cacheReadTokens,
+              cacheWriteTokens: event.cacheWriteTokens,
+              reasoningTokens: event.reasoningTokens,
+            }
+            turn.cost = event.cost
+          }
+          if (event.kind === 'context') turn.contextUsage = event.usage
+          if (event.kind === 'end') {
+            turn.status = event.status
+            turn.errorCode = event.error?.code ?? null
+            if (event.status === 'completed' && !request.retryTurnId)
+              stored.summary.selectedTurnId = id
+          }
+          emit(event)
+        }
+        runs.push({ request, turnId: id, emit: wrapped, signal: options?.signal })
+        options?.signal?.addEventListener('abort', () =>
+          wrapped({ kind: 'end', status: 'cancelled' }),
+        )
+        return Promise.resolve({
+          runId: `r${runs.length}`,
+          conversationId: withHistory ? (request.conversationId ?? 'c1') : null,
+          turnId: withHistory ? id : null,
+        })
+      },
+      approve,
+      ...extra.chat,
+    },
+  })
+  if (ports.conversations)
+    Object.assign(
+      ports.conversations,
+      {
+        get: (id: string) =>
+          id === stored.summary.id
+            ? Promise.resolve(structuredClone(stored))
+            : Promise.reject(
+                new KitClientError({ code: 'not_found', message: 'conversation not found' }),
+              ),
+      },
+      extra.history,
+    )
+  if (!withHistory) delete ports.conversations
+  const notify = { toast: vi.fn(), confirm: vi.fn(() => Promise.resolve(true)) }
+  const logger = { debug: vi.fn(), info: vi.fn(), warn: vi.fn(), error: vi.fn() }
+  const kit = { ports, i18n: createI18n('en'), notify, logger }
+  const view = render(Harness, { props: { kit, model, context, ...extra.props } })
+  return { runs, view, approve, notify }
+}
+
+export async function send(text: string) {
+  await fireEvent.input(screen.getByRole('textbox', { name: 'Message' }), {
+    target: { value: text },
+  })
+  const button = screen.getByRole('button', { name: 'Send' })
+  await waitFor(() => expect(button.hasAttribute('disabled')).toBe(false))
+  await fireEvent.click(button)
+}

package/src/chat/test-support/conversation-fixtures.ts

@@ -0,0 +1,32 @@
+import type { Conversation } from '../../ports'
+import { model } from './chat-fixture'
+
+export function candidates(): Conversation {
+  const reply = (id: string, text: string): Conversation['turns'][number] => ({
+    id,
+    parentId: null,
+    questionId: 'q',
+    supersedesId: null,
+    kind: 'reply',
+    ...model,
+    input: 'Shared question',
+    text,
+    status: 'completed',
+    errorCode: null,
+    reasoningEffort: 'default',
+    reasoningText: null,
+    images: [],
+    generated: [],
+  })
+  return {
+    summary: {
+      id: 'saved',
+      title: 'Candidates',
+      scope: null,
+      selectedTurnId: 'a',
+      createdAt: 0,
+      updatedAt: 0,
+    },
+    turns: [reply('a', 'Original **reply**'), reply('b', 'Alternative reply')],
+  }
+}

package/src/chat/test-support/run-session-fixture.ts

@@ -0,0 +1,112 @@
+import { vi } from 'vitest'
+import { createFakePorts } from '../../ports'
+import type {
+  ConversationClient,
+  Conversation,
+  RunAccepted,
+  RunEvent,
+  RunRequest,
+  Turn,
+} from '../../ports'
+import { RunSession, type RunBase } from '../run-session.svelte'
+
+export const sourceModel = { endpointId: 'original-endpoint', modelId: 'original-model' }
+export const pickedModel = { endpointId: 'picked-endpoint', modelId: 'picked-model' }
+export const base: RunBase = {
+  purpose: 'chat',
+  scope: null,
+  language: 'en',
+  model: pickedModel,
+  skills: [],
+  context: null,
+}
+
+export function required<T>(value: T | null | undefined): T {
+  if (value == null) throw new Error('Expected run-session fixture is missing')
+  return value
+}
+
+export function stored(overrides: Partial<Turn> = {}): Turn {
+  return {
+    id: 'source',
+    parentId: null,
+    questionId: 'question',
+    supersedesId: null,
+    kind: 'reply',
+    endpointId: sourceModel.endpointId,
+    modelId: sourceModel.modelId,
+    input: 'Original question',
+    text: 'Original **answer**',
+    status: 'completed',
+    errorCode: null,
+    reasoningText: 'Original reasoning',
+    reasoningEffort: 'default',
+    images: [],
+    generated: [],
+    ...overrides,
+  }
+}
+
+export function conversation(
+  turns: Turn[],
+  selectedTurnId: string | null = 'source',
+): Conversation {
+  return {
+    summary: {
+      id: 'conversation',
+      title: 'Conversation',
+      scope: null,
+      createdAt: 0,
+      updatedAt: 0,
+      selectedTurnId,
+    },
+    turns,
+  }
+}
+
+export interface Deferred<T> {
+  promise: Promise<T>
+  resolve: (value: T) => void
+  reject: (error: unknown) => void
+}
+export function deferred<T>(): Deferred<T> {
+  let resolve!: (value: T) => void
+  let reject!: (error: unknown) => void
+  const promise = new Promise<T>((yes, no) => {
+    resolve = yes
+    reject = no
+  })
+  return { promise, resolve, reject }
+}
+
+export function setup(withHistory = true) {
+  const runs: {
+    request: RunRequest
+    emit: (event: RunEvent) => void
+    accepted: Deferred<RunAccepted>
+  }[] = []
+  const get = vi.fn<ConversationClient['get']>(() => Promise.resolve(conversation([stored()])))
+  const cancel = vi.fn(() => Promise.resolve())
+  const approve = vi.fn(() => Promise.resolve())
+  const ports = createFakePorts({
+    chat: {
+      cancel,
+      approve,
+      start: (request, emit) => {
+        const accepted = deferred<RunAccepted>()
+        runs.push({ request, emit, accepted })
+        return accepted.promise
+      },
+    },
+  })
+  const chat = required(ports.chat)
+  if (withHistory) Object.assign(required(ports.conversations), { get })
+  else delete ports.conversations
+  return { session: new RunSession(chat, ports.conversations), runs, get, cancel, approve }
+}
+
+export const accepted: RunAccepted = {
+  runId: 'run',
+  conversationId: 'conversation',
+  turnId: 'candidate',
+}

package/src/components/ui/alert/alert-action.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "#lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-action"
+	class={cn("absolute top-2 right-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/components/ui/alert/alert-description.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "#lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-description"
+	class={cn(
+		"text-muted-foreground text-kit-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/components/ui/alert/alert-title.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "#lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-title"
+	class={cn(
+		"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/components/ui/alert/alert.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "#lib/utils.js";
+
+	export const alertVariants = tv({
+		base: "grid gap-0.5 rounded-kit border px-2.5 py-2 text-left text-kit-base has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "#lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert"
+	role="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/components/ui/alert/index.ts

@@ -0,0 +1,17 @@
+import Action from "./alert-action.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+import Root from "./alert.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
+
+export {
+	Root,
+	Description,
+	Title,
+	Action,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+	Action as AlertAction,
+};

package/src/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "#lib/components/ui/button/index.js";
+	import { cn } from "#lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		size = "default",
+		...restProps
+	}: AlertDialogPrimitive.ActionProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants({ variant, size }), "", className)}
+	{...restProps}
+/>

package/src/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "#lib/components/ui/button/index.js";
+	import { cn } from "#lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "default",
+		...restProps
+	}: AlertDialogPrimitive.CancelProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant, size }), "", className)}
+	{...restProps}
+/>

package/src/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "#lib/utils.js";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import AlertDialogPortal from "./alert-dialog-portal.svelte";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "default",
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		size?: "default" | "sm";
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
+	} = $props();
+</script>
+
+<AlertDialogPortal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		data-size={size}
+		class={cn(
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPortal>

package/src/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "#lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn("text-muted-foreground *:[a]:hover:text-foreground text-kit-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
+	{...restProps}
+/>

package/src/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "#lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-footer"
+	class={cn(
+		"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "#lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-header"
+	class={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/components/ui/alert-dialog/alert-dialog-media.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "#lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-media"
+	class={cn("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-kit sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "#lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	data-slot="alert-dialog-overlay"
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
+	{...restProps}
+/>

package/src/components/ui/alert-dialog/alert-dialog-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...restProps} />

package/src/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "#lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn("text-kit-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
+	{...restProps}
+/>

package/src/components/ui/alert-dialog/alert-dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />