@agentskit/chat-svelte 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 AgentsKit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,5 @@
+# @agentskit/chat-svelte
+
+Svelte 5 application shell for AgentsKit Chat. It composes `createChatStore` and the headless components from `@agentskit/svelte`; chat state and lifecycle remain upstream.
+
+Customization uses typed Svelte snippets: `container`, `message`, `input`, `thinking`, `confirmation`, and `choiceList`.

package/dist/AgentChat.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { AgentChatProps } from './types.js'
+  import AgentChatSession from './AgentChatSession.svelte'
+
+  let props: AgentChatProps = $props()
+  const sessionKey = $derived(`${props.definition.id}:${props.definition.revision ?? 1}:${props.session?.sessionId ?? 'new'}`)
+</script>
+
+{#key sessionKey}
+  <AgentChatSession {...props} />
+{/key}

package/dist/AgentChat.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Component } from 'svelte'
+import type { AgentChatProps } from './types.js'
+declare const AgentChat: Component<AgentChatProps>
+export default AgentChat

package/dist/AgentChatSession.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  import { ChatContainer, InputBar, Message, ThinkingIndicator, ToolConfirmation, type SvelteChatStore } from '@agentskit/svelte'
+  import type { ComponentInteractionEvent, ComponentRenderFrame, ComponentSelectionEvent } from '@agentskit/chat-protocol'
+  import { formatSemanticFallback, getLifecycleTargets, presentChatMessage, resolveChatSession, resolveChatTheme, resolveChoiceAction, resolveComponentFrame } from '@agentskit/chat'
+  import type { ChatState, Message as ChatMessage } from '@agentskit/core'
+  import type { AgentChatProps } from './types.js'
+  import ChatBinding from './ChatBinding.svelte'
+  import ChoiceList from './ChoiceList.svelte'
+  import StandardComponent from './StandardComponent.svelte'
+  import { toChatStyle } from './index.js'
+  import { untrack } from 'svelte'
+
+  let { definition, placeholder, onComponentSelect, onComponentInteract, actionConfirmationTtlMs, session: preparedSession, theme, container, message, input, thinking, confirmation: confirmationSnippet, choiceList, standardComponent }: AgentChatProps = $props()
+  const initial = untrack(() => ({ definition, preparedSession, actionConfirmationTtlMs }))
+  const session = resolveChatSession(initial.definition, initial.preparedSession)
+  const sessionId = session.sessionId
+  const initialChat = initial.definition.chat
+  let activeChat = $state.raw(initialChat)
+  let pendingChat = $state.raw(initialChat)
+  let messages = $state<ChatMessage[]>(initialChat.initialMessages ?? [])
+  let status = $state<ChatState['status']>('idle')
+  let bindingRevision = $state(0)
+  let currentStore: SvelteChatStore | undefined
+  let actionError = $state<Error | undefined>()
+  let editDraft = $state<{ messageId: string; content: string } | undefined>()
+  let resolvedInstances = $state(new Set<string>())
+  const coordinator = session.createConfirmation({
+    ...(initial.actionConfirmationTtlMs === undefined ? {} : { ttlMs: initial.actionConfirmationTtlMs }),
+    chat: { proposeToolCall: proposal => currentStore!.proposeToolCall(proposal), approve: id => currentStore!.approve(id), deny: (id, reason) => currentStore!.deny(id, reason) },
+  })
+
+  $effect(() => {
+    pendingChat = definition.chat
+    if (activeChat !== pendingChat) {
+      if (status === 'streaming') currentStore?.stop()
+      activeChat = pendingChat
+      bindingRevision += 1
+    }
+  })
+
+  function fail(error: unknown, fallback: string) { actionError = error instanceof Error ? error : new Error(fallback) }
+  function selectComponent(event: ComponentSelectionEvent, frame: ComponentRenderFrame) {
+    if (resolvedInstances.has(event.instanceId)) return
+    actionError = undefined
+    resolvedInstances.add(event.instanceId)
+    try { onComponentSelect?.(event) } catch (error) { fail(error, 'Component selection callback failed.') }
+    const action = resolveChoiceAction(frame, event.choiceId)
+    if (action) void coordinator.propose(action).catch(error => { resolvedInstances.delete(event.instanceId); fail(error, 'Action proposal failed.') })
+    else {
+      let submission
+      try { submission = definition.choiceSubmission?.(frame, event.choiceId, { sessionId }) } catch (error) {
+        resolvedInstances.delete(event.instanceId)
+        fail(error, 'Choice submission authorization failed.')
+        return
+      }
+      if (submission && 'unavailable' in submission) {
+        resolvedInstances.delete(event.instanceId)
+        fail(new Error('This deterministic choice expired. Ask the question again.'), 'Choice unavailable.')
+        return
+      }
+      if (submission) void currentStore!.send(submission.value).then(
+        () => { try { submission.commit() } catch (error) { fail(error, 'Choice submission settlement failed.') } },
+        error => {
+          try { submission.release() } catch { /* settlement isolation */ }
+          finally { resolvedInstances.delete(event.instanceId) }
+          fail(error, 'Choice submission failed.')
+        },
+      )
+    }
+  }
+  function interactComponent(event: ComponentInteractionEvent) {
+    if (resolvedInstances.has(event.instanceId)) return
+    resolvedInstances.add(event.instanceId)
+    try { onComponentInteract?.(event) } catch (error) { resolvedInstances.delete(event.instanceId); fail(error, 'Component interaction callback failed.') }
+  }
+  function approve(id: string) { const record = coordinator.getByToolCall(id); void (record ? coordinator.approve(record.token, sessionId) : currentStore!.approve(id)).catch(error => fail(error, 'Action approval failed.')) }
+  function deny(id: string, reason?: string) { const record = coordinator.getByToolCall(id); void (record ? coordinator.reject(record.token, sessionId, reason) : currentStore!.deny(id, reason)).catch(error => fail(error, 'Action rejection failed.')) }
+  function run(operation: Promise<void>) { actionError = undefined; void operation.catch(error => fail(error, 'Lifecycle operation failed.')) }
+</script>
+
+{#key bindingRevision}
+  <ChatBinding config={session.updateChat({ ...activeChat, initialMessages: messages })} onState={(store, state) => {
+    currentStore = store; messages = state.messages; status = state.status
+  }}>
+    {#snippet children(store, state)}
+      {@const targets = getLifecycleTargets(state.messages)}
+      {#snippet content()}
+        {#each state.messages as item (item.id)}
+          {#each presentChatMessage(item) as presentation, index (`${item.id}:${index}`)}
+            {#if presentation.kind === 'component'}
+              {@const resolved = definition.components === undefined ? undefined : resolveComponentFrame(presentation.frame, definition.components)}
+              {#if resolved?.ok}
+                {#if presentation.frame.componentKey === 'choice-list'}
+                  {#if choiceList}{@render choiceList(presentation.frame, definition.components!, resolvedInstances.has(presentation.frame.instanceId), event => selectComponent(event, presentation.frame))}
+                  {:else}<ChoiceList frame={presentation.frame} manifest={definition.components!} disabled={resolvedInstances.has(presentation.frame.instanceId)} onSelect={event => selectComponent(event, presentation.frame)} />{/if}
+                {:else if standardComponent}{@render standardComponent(presentation.frame, definition.components!, resolvedInstances.has(presentation.frame.instanceId), interactComponent)}
+                {:else}<StandardComponent frame={presentation.frame} manifest={definition.components!} disabled={resolvedInstances.has(presentation.frame.instanceId)} onInteract={interactComponent} />{/if}
+              {:else}<p data-ak-component-fallback>{formatSemanticFallback(presentation.frame.fallback)}</p>{/if}
+            {:else if presentation.kind === 'diagnostic'}<p role="alert" data-ak-component-diagnostic={presentation.code}>{presentation.message}</p>
+            {:else if message}{@render message(presentation.message)}
+            {:else}<Message message={presentation.message} />{/if}
+          {/each}
+        {/each}
+        {#each state.messages.flatMap(item => item.toolCalls ?? []) as toolCall (toolCall.id)}
+          {#if confirmationSnippet}{@render confirmationSnippet(toolCall, approve, deny)}{:else}<ToolConfirmation {toolCall} onApprove={approve} onDeny={deny} />{/if}
+        {/each}
+        {#if thinking}{@render thinking(state.status === 'streaming')}{:else}<ThinkingIndicator visible={state.status === 'streaming'} />{/if}
+      {/snippet}
+
+      <section aria-label={`${definition.id} chat`} data-ak-app-chat style={theme === undefined ? undefined : toChatStyle(theme)}>
+        <div aria-live="polite" aria-relevant="additions text" role="log">
+          {#if container}{@render container(content)}{:else}<ChatContainer>{@render content()}</ChatContainer>{/if}
+        </div>
+        {#if state.error || actionError}<p role="alert" style:color={resolveChatTheme(theme).colors.danger}>{state.error?.message ?? actionError?.message}</p>{/if}
+        {#if state.status === 'streaming'}<button type="button" onclick={store.stop}>Stop</button>{/if}
+        {#if state.status !== 'streaming' && targets.userId}
+          <div aria-label="Response actions">
+            <button type="button" aria-label="Retry response" onclick={() => run(store.retry())}>Retry</button>
+            {#if targets.assistantId}<button type="button" aria-label="Regenerate response" onclick={() => run(store.regenerate(targets.assistantId))}>Regenerate</button>{/if}
+            <button type="button" onclick={() => editDraft = { messageId: targets.userId!, content: state.messages.find(item => item.id === targets.userId)?.content ?? '' }}>Edit last message</button>
+            {#if editDraft}
+              <form onsubmit={event => { event.preventDefault(); if (!editDraft?.content.trim()) return; run(store.edit(editDraft.messageId, editDraft.content)); editDraft = undefined }}>
+                <label>Edit message<input aria-label="Edit message" value={editDraft.content} oninput={event => editDraft = { ...editDraft!, content: event.currentTarget.value }} /></label>
+                <button type="submit" aria-label="Save edit">Save edit</button><button type="button" onclick={() => editDraft = undefined}>Cancel edit</button>
+              </form>
+            {/if}
+          </div>
+        {/if}
+        {#if input}{@render input(store, state, placeholder)}{:else}<InputBar chat={{ ...state, ...store }} disabled={state.status === 'streaming'} {...(placeholder === undefined ? {} : { placeholder })} />{/if}
+      </section>
+    {/snippet}
+  </ChatBinding>
+{/key}

package/dist/AgentChatSession.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AgentChatProps } from './types.js';
+declare const AgentChatSession: import("svelte").Component<AgentChatProps, {}, "">;
+type AgentChatSession = ReturnType<typeof AgentChatSession>;
+export default AgentChatSession;

package/dist/ChatBinding.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { ChatConfig, ChatState } from '@agentskit/core'
+  import { createChatStore, type SvelteChatStore } from '@agentskit/svelte'
+  import { onDestroy, untrack, type Snippet } from 'svelte'
+
+  let { config, onState, children }: { config: ChatConfig; onState: (store: SvelteChatStore, state: ChatState) => void; children: Snippet<[SvelteChatStore, ChatState]> } = $props()
+  const store = createChatStore(untrack(() => config))
+  let state = $state<ChatState>({ messages: [], status: 'idle', input: '', error: null, usage: { promptTokens: 0, completionTokens: 0, totalTokens: 0 } })
+  const unsubscribe = store.subscribe(value => { state = value; onState(store, value) })
+  onDestroy(() => { unsubscribe(); store.destroy() })
+</script>
+
+{@render children(store, state)}

package/dist/ChatBinding.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ChatConfig, ChatState } from '@agentskit/core';
+import { type SvelteChatStore } from '@agentskit/svelte';
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    config: ChatConfig;
+    onState: (store: SvelteChatStore, state: ChatState) => void;
+    children: Snippet<[SvelteChatStore, ChatState]>;
+};
+declare const ChatBinding: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatBinding = ReturnType<typeof ChatBinding>;
+export default ChatBinding;

package/dist/ChoiceList.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { resolveChoiceListFrame, selectChoice } from '@agentskit/chat'
+  import type { ComponentManifest } from '@agentskit/chat'
+  import type { ComponentSelectionEvent } from '@agentskit/chat-protocol'
+
+  let { frame, manifest, onSelect, disabled = false }: { frame: unknown; manifest: ComponentManifest; onSelect: (event: ComponentSelectionEvent) => void; disabled?: boolean } = $props()
+  const resolved = $derived(resolveChoiceListFrame(frame, manifest))
+</script>
+
+{#if resolved.ok}
+  <fieldset aria-label={resolved.props.prompt} data-ak-component="choice-list">
+    <legend>{resolved.props.prompt}</legend>
+    {#each resolved.props.choices as choice (choice.id)}
+      <button type="button" {disabled} onclick={() => onSelect(selectChoice(resolved.frame, choice.id))}>
+        <span>{choice.label}</span>{#if choice.description !== undefined}<small>{choice.description}</small>{/if}
+      </button>
+    {/each}
+  </fieldset>
+{/if}

package/dist/ChoiceList.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Component } from 'svelte'
+import type { ChoiceListProps } from './types.js'
+declare const ChoiceList: Component<ChoiceListProps>
+export default ChoiceList

package/dist/StandardComponent.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { ApprovalRequestPropsSchema, ButtonGroupPropsSchema, ConfirmationPropsSchema, ErrorNoticePropsSchema, FileAttachmentPropsSchema, FormPropsSchema, LinkCardPropsSchema, ProgressPropsSchema, SourceListPropsSchema, TablePropsSchema, ToolCallPropsSchema, createComponentInteraction, resolveComponentFallback, resolveComponentFrame } from '@agentskit/chat'
+  import type { ComponentManifest } from '@agentskit/chat'
+  import type { ComponentInteractionEvent, ComponentRenderFrame } from '@agentskit/chat-protocol'
+
+  let { frame, manifest, onInteract, disabled = false }: { frame: ComponentRenderFrame; manifest: ComponentManifest; onInteract: (event: ComponentInteractionEvent) => void; disabled?: boolean } = $props()
+  let values: Record<string, string | boolean> = $state({})
+  const emit = (event: string, value?: unknown): void => onInteract(createComponentInteraction(frame, manifest, event, value))
+  const valid = $derived(resolveComponentFrame(frame, manifest).ok && frame.componentKey !== 'choice-list')
+</script>
+
+{#if valid}
+  {#if frame.componentKey === 'button-group'}
+    {@const item = ButtonGroupPropsSchema.parse(frame.props)}
+    <fieldset aria-label={item.label} data-ak-component="button-group"><legend>{item.label}</legend>{#each item.buttons as button (button.id)}<button type="button" disabled={disabled || button.disabled} onclick={() => emit('select', button.id)}>{button.label}</button>{/each}</fieldset>
+  {:else if frame.componentKey === 'form'}
+    {@const item = FormPropsSchema.parse(frame.props)}
+    <form aria-label={item.title ?? 'Form'} data-ak-component="form" onsubmit={event => { event.preventDefault(); emit('submit', { ...values }) }}>
+      {#if item.title}<h3>{item.title}</h3>{/if}
+      {#each item.fields as field (field.id)}<label>{field.label}{#if field.type === 'select'}<select required={field.required} {disabled} value={String(values[field.id] ?? '')} onchange={event => values[field.id] = event.currentTarget.value}><option value="" disabled>Select…</option>{#each field.options ?? [] as option}<option value={option.id}>{option.label}</option>{/each}</select>{:else}<input type={field.type} required={field.required} {disabled} placeholder={field.placeholder} oninput={event => values[field.id] = field.type === 'checkbox' ? event.currentTarget.checked : event.currentTarget.value} />{/if}</label>{/each}
+      <button type="submit" {disabled}>{item.submitLabel}</button>
+    </form>
+  {:else if frame.componentKey === 'confirmation'}
+    {@const item = ConfirmationPropsSchema.parse(frame.props)}<section aria-label={item.title} data-ak-component="confirmation"><h3>{item.title}</h3><p>{item.message}</p><button {disabled} onclick={() => emit('confirm')}>{item.confirmLabel}</button><button {disabled} onclick={() => emit('cancel')}>{item.cancelLabel}</button></section>
+  {:else if frame.componentKey === 'progress'}
+    {@const item = ProgressPropsSchema.parse(frame.props)}<div data-ak-component="progress"><label>{item.label}<progress max="100" value={item.value}></progress></label>{#if item.status}<p>{item.status}</p>{/if}</div>
+  {:else if frame.componentKey === 'source-list'}
+    {@const item = SourceListPropsSchema.parse(frame.props)}<section data-ak-component="source-list"><h3>{item.label}</h3><ul>{#each item.sources as source (source.id)}<li>{#if source.url}<a href={source.url} onclick={event => { event.preventDefault(); emit('open', source.id) }}>{source.title}</a>{:else}{source.title}{/if}{#if source.snippet}<p>{source.snippet}</p>{/if}</li>{/each}</ul></section>
+  {:else if frame.componentKey === 'link-card'}
+    {@const item = LinkCardPropsSchema.parse(frame.props)}<a data-ak-component="link-card" href={item.href} onclick={event => { event.preventDefault(); emit('open', item.href) }}><strong>{item.title}</strong>{#if item.description}<span>{item.description}</span>{/if}{#if item.label}<span>{item.label}</span>{/if}</a>
+  {:else if frame.componentKey === 'error-notice'}
+    {@const item = ErrorNoticePropsSchema.parse(frame.props)}<section role="alert" data-ak-component="error-notice"><strong>{item.title}</strong><p>{item.message}</p>{#if item.code}<code>{item.code}</code>{/if}{#if item.retryLabel}<button {disabled} onclick={() => emit('retry')}>{item.retryLabel}</button>{/if}</section>
+  {:else if frame.componentKey === 'tool-call'}
+    {@const item = ToolCallPropsSchema.parse(frame.props)}<section role="status" data-ak-component="tool-call"><strong>{item.name}</strong><span>{item.status}</span>{#if item.arguments}<pre>{JSON.stringify(item.arguments, null, 2)}</pre>{/if}{#if item.result !== undefined}<pre>{JSON.stringify(item.result, null, 2)}</pre>{/if}</section>
+  {:else if frame.componentKey === 'approval-request'}
+    {@const item = ApprovalRequestPropsSchema.parse(frame.props)}<section aria-label={item.title} data-ak-component="approval-request"><h3>{item.title}</h3><p>{item.description}</p><button {disabled} onclick={() => emit('approve')}>{item.approveLabel}</button><button {disabled} onclick={() => emit('deny')}>{item.denyLabel}</button></section>
+  {:else if frame.componentKey === 'table'}
+    {@const item = TablePropsSchema.parse(frame.props)}<table data-ak-component="table"><caption>{item.caption}</caption><thead><tr>{#each item.columns as column (column.key)}<th scope="col">{column.label}</th>{/each}</tr></thead><tbody>{#each item.rows as row}<tr>{#each item.columns as column (column.key)}<td>{String(row[column.key] ?? '')}</td>{/each}</tr>{/each}</tbody></table>
+  {:else if frame.componentKey === 'file-attachment'}
+    {@const item = FileAttachmentPropsSchema.parse(frame.props)}<article data-ak-component="file-attachment"><strong>{item.name}</strong><span>{item.mimeType}</span>{#if item.sizeBytes !== undefined}<span>{item.sizeBytes} bytes</span>{/if}{#if item.url}<a href={item.url} onclick={event => { event.preventDefault(); emit('open', item.url) }}>Open</a>{/if}</article>
+  {:else}<p data-ak-component-fallback="">{resolveComponentFallback(frame, manifest)}</p>
+  {/if}
+{/if}

package/dist/StandardComponent.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from 'svelte'
+import type { ComponentManifest } from '@agentskit/chat'
+import type { ComponentInteractionEvent, ComponentRenderFrame } from '@agentskit/chat-protocol'
+declare const StandardComponent: Component<{ frame: ComponentRenderFrame; manifest: ComponentManifest; onInteract: (event: ComponentInteractionEvent) => void; disabled?: boolean }>
+export default StandardComponent

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { default as AgentChat } from './AgentChat.svelte';
+export { default as ChoiceList } from './ChoiceList.svelte';
+export { default as StandardComponent } from './StandardComponent.svelte';
+export type { AgentChatProps, ChoiceListProps, StandardComponentProps } from './types.js';
+export type { ChatDefinition } from '@agentskit/chat';
+import type { ChatThemeInput } from '@agentskit/chat';
+export type ChatCssVariables = Readonly<Record<`--ak-${string}`, string | number>>;
+export declare const toChatCssVariables: (input?: ChatThemeInput) => ChatCssVariables;
+export declare const toChatStyle: (input?: ChatThemeInput) => string;

package/dist/index.js

@@ -0,0 +1,19 @@
+export { default as AgentChat } from './AgentChat.svelte';
+export { default as ChoiceList } from './ChoiceList.svelte';
+export { default as StandardComponent } from './StandardComponent.svelte';
+import { resolveChatTheme } from '@agentskit/chat';
+export const toChatCssVariables = (input) => {
+    const theme = resolveChatTheme(input);
+    return {
+        '--ak-color-bg': theme.colors.background, '--ak-color-surface': theme.colors.surface, '--ak-color-border': theme.colors.border,
+        '--ak-color-text': theme.colors.text, '--ak-color-text-muted': theme.colors.muted, '--ak-color-bubble-user': theme.colors.accent,
+        '--ak-color-bubble-user-text': theme.colors.onAccent, '--ak-color-bubble-assistant': theme.colors.surface, '--ak-color-bubble-assistant-text': theme.colors.text,
+        '--ak-color-input-bg': theme.colors.background, '--ak-color-input-border': theme.colors.border, '--ak-color-input-focus': theme.colors.accent,
+        '--ak-color-button': theme.colors.accent, '--ak-color-button-text': theme.colors.onAccent, '--ak-color-tool-bg': theme.colors.surface,
+        '--ak-color-tool-border': theme.colors.border, '--ak-app-color-danger': theme.colors.danger,
+        '--ak-font-family': theme.fontFamily === 'system' ? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" : theme.fontFamily,
+        '--ak-radius': `${theme.radius.medium}px`, '--ak-radius-lg': `${theme.radius.large}px`, '--ak-spacing-sm': `${theme.spacing.small}px`,
+        '--ak-spacing-md': `${theme.spacing.medium}px`, '--ak-spacing-lg': `${theme.spacing.large}px`,
+    };
+};
+export const toChatStyle = (input) => Object.entries(toChatCssVariables(input)).map(([key, value]) => `${key}:${value}`).join(';');

package/dist/types.d.ts

@@ -0,0 +1,33 @@
+import type { ChatDefinition, ChatSession, ChatThemeInput, ComponentManifest } from '@agentskit/chat';
+import type { ComponentInteractionEvent, ComponentRenderFrame, ComponentSelectionEvent } from '@agentskit/chat-protocol';
+import type { ChatState, Message, ToolCall } from '@agentskit/core';
+import type { SvelteChatStore } from '@agentskit/svelte';
+import type { Snippet } from 'svelte';
+export interface AgentChatProps {
+    definition: ChatDefinition;
+    placeholder?: string;
+    onComponentSelect?: (event: ComponentSelectionEvent) => void;
+    onComponentInteract?: (event: ComponentInteractionEvent) => void;
+    actionConfirmationTtlMs?: number;
+    session?: ChatSession;
+    theme?: ChatThemeInput;
+    container?: Snippet<[Snippet]>;
+    message?: Snippet<[Message]>;
+    input?: Snippet<[SvelteChatStore, ChatState, string | undefined]>;
+    thinking?: Snippet<[boolean]>;
+    confirmation?: Snippet<[ToolCall, (id: string) => void, (id: string, reason?: string) => void]>;
+    choiceList?: Snippet<[unknown, ComponentManifest, boolean, (event: ComponentSelectionEvent) => void]>;
+    standardComponent?: Snippet<[ComponentRenderFrame, ComponentManifest, boolean, (event: ComponentInteractionEvent) => void]>;
+}
+export interface StandardComponentProps {
+    frame: ComponentRenderFrame;
+    manifest: ComponentManifest;
+    onInteract: (event: ComponentInteractionEvent) => void;
+    disabled?: boolean;
+}
+export interface ChoiceListProps {
+    frame: unknown;
+    manifest: ComponentManifest;
+    onSelect: (event: ComponentSelectionEvent) => void;
+    disabled?: boolean;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@agentskit/chat-svelte",
+  "version": "0.1.0",
+  "description": "Svelte application shell for AgentsKit Chat.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AgentsKit-io/agentskit-chat.git",
+    "directory": "packages/svelte"
+  },
+  "homepage": "https://github.com/AgentsKit-io/agentskit-chat#readme",
+  "bugs": {
+    "url": "https://github.com/AgentsKit-io/agentskit-chat/issues"
+  },
+  "type": "module",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@agentskit/core": "^1.12.2",
+    "@agentskit/chat": "0.1.0",
+    "@agentskit/chat-protocol": "0.1.0"
+  },
+  "peerDependencies": {
+    "@agentskit/svelte": "^0.4.4",
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@agentskit/svelte": "^0.4.4",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.2.0",
+    "@testing-library/svelte": "^5.4.2",
+    "@types/node": "^25.0.0",
+    "happy-dom": "^20.10.3",
+    "svelte": "^5.56.4",
+    "svelte-check": "^4.4.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "svelte-package -i src -o dist",
+    "lint": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "pnpm --filter @agentskit/chat build && pnpm build && vitest run --coverage && vitest run --config vitest.ssr.config.ts"
+  }
+}