@tanstack/ai-svelte 0.19.3 → 0.20.0

package/src/chat-ui/ui-interrupts.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import {
+    getChatContext,
+    getComponentsContext,
+    listInterrupts,
+    type UIDescriptor,
+  } from './create-ui'
+  import UIInterrupt from './ui-interrupt.svelte'
+  import type { ChatUIInterrupt } from '@tanstack/ai-client/ui'
+
+  let {
+    ui,
+    children,
+  }: {
+    ui: UIDescriptor
+    children?: import('svelte').Snippet<[Array<ChatUIInterrupt>]>
+  } = $props()
+
+  const chat = $derived(getChatContext(ui))
+  const comps = $derived(getComponentsContext(ui))
+  const interrupts = $derived(listInterrupts(chat, comps.inlineToolNames))
+</script>
+
+{#if children}
+  {@render children(interrupts)}
+{:else}
+  {#each interrupts as interrupt (interrupt.id)}
+    <UIInterrupt {ui} {interrupt} />
+  {/each}
+{/if}

package/src/chat-ui/ui-message.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import {
+    getChatContext,
+    getComponentsContext,
+    messageParts,
+    readInterrupts,
+    type UIDescriptor,
+  } from './create-ui'
+  import SelectedPart from './selected-part.svelte'
+  import type { ChatUIInterrupt } from '@tanstack/ai-client/ui'
+  import type { UIMessage } from '@tanstack/ai-client'
+
+  let {
+    ui,
+    message,
+    interrupts,
+    children,
+  }: {
+    ui: UIDescriptor
+    message: UIMessage
+    interrupts?: ReadonlyArray<ChatUIInterrupt>
+    children?: import('svelte').Snippet<[unknown]>
+  } = $props()
+
+  const comps = $derived(getComponentsContext(ui))
+  const resolvedInterrupts = $derived(
+    interrupts ?? readInterrupts(getChatContext(ui)),
+  )
+  const selectedParts = $derived(
+    messageParts(message, resolvedInterrupts, comps.inlineToolNames),
+  )
+  const Message = $derived(comps.components.message as any)
+</script>
+
+{#if children}
+  {@render children(selectedParts)}
+{:else}
+  <Message {message}>
+    {#snippet parts()}
+      {#each selectedParts as part, index (`${message.id}-${index}`)}
+        <SelectedPart {ui} selected={part} />
+      {/each}
+    {/snippet}
+  </Message>
+{/if}

package/src/chat-ui/ui-messages.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import {
+    getChatContext,
+    readInterrupts,
+    readMessages,
+    type UIDescriptor,
+  } from './create-ui'
+  import UIMessage from './ui-message.svelte'
+  import type { Snippet } from 'svelte'
+  import type { UIMessage as UIMessageModel } from '@tanstack/ai-client'
+
+  let {
+    ui,
+    children,
+  }: {
+    ui: UIDescriptor
+    children?: Snippet<[ReadonlyArray<UIMessageModel>]>
+  } = $props()
+
+  const chat = $derived(getChatContext(ui))
+  const messages = $derived(readMessages(chat))
+  const interrupts = $derived(readInterrupts(chat))
+</script>
+
+{#if children}
+  {@render children(messages)}
+{:else}
+  {#each messages as message (message.id)}
+    <UIMessage {ui} {message} {interrupts} />
+  {/each}
+{/if}

package/src/chat-ui/ui-part.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import {
+    getChatContext,
+    readInterrupts,
+    type UIDescriptor,
+  } from './create-ui'
+  import { selectMessageUI } from '@tanstack/ai-client/ui'
+  import SelectedPart from './selected-part.svelte'
+  import type { MessagePart } from '@tanstack/ai-client'
+
+  let {
+    ui,
+    part,
+  }: {
+    ui: UIDescriptor
+    part: MessagePart
+  } = $props()
+
+  const chat = $derived(getChatContext(ui))
+  const selected = $derived(
+    selectMessageUI(
+      { id: 'part', role: 'assistant', parts: [part] },
+      { interrupts: readInterrupts(chat), inlineToolNames: [] },
+    ).parts[0],
+  )
+</script>
+
+{#if selected}
+  <SelectedPart {ui} {selected} />
+{/if}

package/src/chat-ui/ui-provider.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import {
+    setUIContext,
+    type ChatUIComponents,
+    type UIDescriptor,
+  } from './create-ui'
+
+  let {
+    ui,
+    chat,
+    components,
+    children,
+  }: {
+    ui: UIDescriptor
+    // ponytail: Svelte components are not generic, so ChatUIHost<TOptions> cannot
+    // accept a typed createChat() host with tool-approval interrupts.
+    chat: any
+    components?: ChatUIComponents<unknown>
+    children?: import('svelte').Snippet
+  } = $props()
+
+  setUIContext({
+    ui,
+    chat,
+    components: (components ?? ui.components) as never,
+  })
+</script>
+
+{@render children?.()}

package/src/chat-ui/ui-queue.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import {
+    getChatContext,
+    getComponentsContext,
+    readQueue,
+    type UIDescriptor,
+  } from './create-ui'
+
+  let { ui }: { ui: UIDescriptor } = $props()
+
+  const chat = $derived(getChatContext(ui))
+  const comps = $derived(getComponentsContext(ui))
+  const items = $derived(readQueue(chat))
+  const QueueItem = $derived(comps.components.queue as any)
+</script>
+
+{#if QueueItem}
+  {#each items as item (item.id)}
+    <QueueItem {item} />
+  {/each}
+{/if}

package/src/create-chat-hook.ts

@@ -0,0 +1,67 @@
+import { createChat as createUnboundChat } from './create-chat.svelte'
+import type {
+  AnyClientTool,
+  InterruptDefinition,
+  SchemaInput,
+} from '@tanstack/ai'
+import type { InferredClientContext } from '@tanstack/ai-client'
+import type { CreateChatOptions } from './types'
+
+type ChatHookOverrides<
+  TTools extends ReadonlyArray<AnyClientTool>,
+  TSchema extends SchemaInput | undefined,
+  TContext,
+  TInterrupts extends ReadonlyArray<InterruptDefinition<any, any, any, any>>,
+> = {
+  threadId?: string
+  live?: boolean
+  forwardedProps?: Record<string, any>
+  body?: Record<string, any>
+  initialMessages?: CreateChatOptions<
+    TTools,
+    TSchema,
+    TContext,
+    TInterrupts
+  >['initialMessages']
+}
+
+/**
+ * Bind chat options once at module scope. The returned `createChat`
+ * function creates a chat instance from those options.
+ *
+ * Pass per-call overrides for instance keys such as `threadId`,
+ * `initialMessages`, `live`, and `forwardedProps`. Do not change `tools`,
+ * `interrupts`, or `outputSchema` here. Those stay on the factory options.
+ *
+ * Rename the function at the call site if you already import `createChat` from
+ * `@tanstack/ai-svelte`: `const { createChat: createAppChat } = createChatHook(chatOptions)`.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createChatHook } from '@tanstack/ai-svelte'
+ *
+ *   const { createChat } = createChatHook(chatOptions)
+ *   const chat = createChat({ threadId: 'support-1' })
+ * </script>
+ * ```
+ */
+export function createChatHook<
+  const TTools extends ReadonlyArray<AnyClientTool> = any,
+  TSchema extends SchemaInput | undefined = undefined,
+  TContext = InferredClientContext<TTools>,
+  const TInterrupts extends ReadonlyArray<
+    InterruptDefinition<any, any, any, any>
+  > = readonly [],
+>(options: CreateChatOptions<TTools, TSchema, TContext, TInterrupts>) {
+  function createChat(
+    overrides?: ChatHookOverrides<TTools, TSchema, TContext, TInterrupts>,
+  ) {
+    if (!overrides) {
+      return createUnboundChat(options)
+    }
+    return createUnboundChat({ ...options, ...overrides })
+  }
+
+  return { createChat }
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 export { createChat } from './create-chat.svelte'
+export { createChatHook } from './create-chat-hook'
 export { createByok } from './create-byok.svelte'
 export type {
   CreateChatOptions,

package/src/ui.ts

@@ -0,0 +1,25 @@
+// Barrel entry for the `@tanstack/ai-svelte/ui` subpath.
+export { createChatUI, getUIContext } from './chat-ui/create-ui'
+export { createChatHook } from './chat-ui/create-chat-hook'
+export type {
+  ChatUIComponents,
+  ChatUIFactoryConfig,
+  ChatUIHost,
+  ChatUIQueueItem,
+  InputProps,
+  InterruptProps,
+  LayoutProps,
+  MessageProps,
+  PartProps,
+  QueueProps,
+  ToolProps,
+  UIDescriptor,
+} from './chat-ui/create-ui'
+export { default as UIChat } from './chat-ui/ui-chat.svelte'
+export { default as UIProvider } from './chat-ui/ui-provider.svelte'
+export { default as UIMessages } from './chat-ui/ui-messages.svelte'
+export { default as UIMessage } from './chat-ui/ui-message.svelte'
+export { default as UIPart } from './chat-ui/ui-part.svelte'
+export { default as UIInterrupts } from './chat-ui/ui-interrupts.svelte'
+export { default as UIInterrupt } from './chat-ui/ui-interrupt.svelte'
+export { default as UIQueue } from './chat-ui/ui-queue.svelte'