@tanstack/ai-solid 0.19.4 → 0.20.0

package/src/chat-ui/chat.tsx

@@ -0,0 +1,95 @@
+import { createContext, useContext } from 'solid-js'
+import type { ConnectionAdapter } from '@tanstack/ai-client'
+import { useChat } from '../use-chat'
+import type { JSX } from 'solid-js'
+import type { UIMessage, UseChatReturn } from '../types'
+
+/**
+ * Chat context - provides chat state to all child components
+ */
+const ChatContext = createContext<UseChatReturn | null>(null)
+
+/**
+ * Hook to access chat context
+ * @throws Error if used outside of Chat component
+ */
+/** @deprecated Use `createChatUI().useChat()` instead. Deprecated in 0.8.0. Removed in 1.0.0. */
+export function useChatContext(): UseChatReturn {
+  const context = useContext(ChatContext)
+  if (!context) {
+    throw new Error(
+      "Chat components must be wrapped in <Chat>. Make sure you're using Chat.Messages, Chat.Input, etc. inside a <Chat> component.",
+    )
+  }
+  return context
+}
+
+/** @deprecated Use `createChatUI()` Chat/Provider instead. Deprecated in 0.8.0. Removed in 1.0.0. */
+export interface ChatProps {
+  /** Child components (Chat.Messages, Chat.Input, etc.) */
+  children: JSX.Element
+  /** CSS class name for the root element */
+  class?: string
+  /** Connection adapter for communicating with your API */
+  connection: ConnectionAdapter
+  /** Initial messages to display */
+  initialMessages?: Array<UIMessage>
+  /** Custom message ID generator */
+  id?: string
+  /** Additional body data to send with requests */
+  body?: any
+  /** Callback when a response is received */
+  onResponse?: (response?: Response) => void | Promise<void>
+  /** Callback when each chunk arrives */
+  onChunk?: (chunk: any) => void
+  /** Callback when a message is complete */
+  onFinish?: (message: UIMessage) => void
+  /** Callback when an error occurs */
+  onError?: (error: Error) => void
+  /** Client-side tools with execute functions */
+  tools?: Array<any>
+  /** Custom tool components registry for rendering */
+  toolComponents?: Record<
+    string,
+    (props: { input: any; output?: any }) => JSX.Element
+  >
+}
+
+/**
+ * @deprecated Since 0.8.0. Use `createChatHook()` from `@tanstack/ai-solid/ui` instead.
+ * See https://tanstack.com/ai/latest/docs/ui/solid
+ * Removed in 1.0.0.
+ *
+ * Root Chat component - provides context for all chat subcomponents
+ *
+ * @example
+ * ```tsx
+ * <Chat connection={fetchServerSentEvents("/api/chat")}>
+ *   <Chat.Messages />
+ *   <Chat.Input />
+ * </Chat>
+ * ```
+ */
+export function Chat(props: ChatProps) {
+  const chat = useChat({
+    connection: props.connection,
+    ...(props.initialMessages !== undefined && {
+      initialMessages: props.initialMessages,
+    }),
+    ...(props.id !== undefined && { id: props.id }),
+    ...(props.body !== undefined && { body: props.body }),
+    ...(props.onResponse !== undefined && { onResponse: props.onResponse }),
+    ...(props.onChunk !== undefined && { onChunk: props.onChunk }),
+    ...(props.onFinish !== undefined && { onFinish: props.onFinish }),
+    ...(props.onError !== undefined && { onError: props.onError }),
+    ...(props.tools !== undefined && { tools: props.tools }),
+  })
+
+  return (
+    <ChatContext.Provider value={chat}>
+      <div class={props.class} data-chat-root>
+        {props.children}
+      </div>
+    </ChatContext.Provider>
+  )
+}

package/src/chat-ui/create-chat-hook.tsx

@@ -0,0 +1,77 @@
+import type { Component } from 'solid-js'
+import type { InferredClientContext } from '@tanstack/ai-client'
+import type {
+  ChatUIInterruptsOf,
+  ChatUISchemaOf,
+  ChatUIToolsOf,
+} from '@tanstack/ai-client/ui'
+import { useChat as useUnboundChat } from '../use-chat'
+import type { UseChatOptions } from '../types'
+import { createChatUI } from './create-ui'
+import type { ChatUIFactoryConfig, ChatUIHost, InputProps } from './create-ui'
+
+type HeadlessOptions<TOptions> = UseChatOptions<
+  ChatUIToolsOf<TOptions>,
+  ChatUISchemaOf<TOptions>,
+  InferredClientContext<ChatUIToolsOf<TOptions>>,
+  ChatUIInterruptsOf<TOptions>
+>
+
+type ChatInstanceOverrides<TOptions> = {
+  threadId?: string
+  live?: boolean
+  forwardedProps?: Record<string, any>
+  body?: Record<string, any>
+  initialMessages?: HeadlessOptions<TOptions>['initialMessages']
+}
+
+/**
+ * Bind chat options and UI widgets once at module scope.
+ *
+ * This matches Form `createFormHook` and Table `createTableHook`. The
+ * returned `useAppChat` creates a chat instance. `chat.AppChat` renders it.
+ * Context `useChatContext` reads that instance. Part and interrupt
+ * widgets take `part` / `interrupt` as props.
+ *
+ * Pass instance overrides such as `threadId` into `useAppChat()`.
+ */
+export function createChatHook<
+  const TOptions,
+  TInput extends Component<any> | undefined =
+    | Component<InputProps<NoInfer<TOptions>>>
+    | undefined,
+>({
+  options,
+  ...chatComponents
+}: {
+  options: TOptions
+} & ChatUIFactoryConfig<NoInfer<TOptions>, TInput>) {
+  const ui = createChatUI(
+    options,
+    chatComponents as ChatUIFactoryConfig<NoInfer<TOptions>, TInput>,
+  )
+
+  function useAppChat(overrides?: ChatInstanceOverrides<TOptions>) {
+    const chat = (
+      overrides
+        ? useUnboundChat({
+            ...(options as HeadlessOptions<TOptions>),
+            ...overrides,
+          })
+        : useUnboundChat(options as HeadlessOptions<TOptions>)
+    ) as ChatUIHost<TOptions>
+
+    function AppChat() {
+      return <ui.Chat chat={chat} />
+    }
+
+    return Object.assign(chat, { AppChat }) as ChatUIHost<TOptions> & {
+      AppChat: Component
+    }
+  }
+
+  return {
+    useAppChat,
+    useChatContext: ui.useChatContext,
+  }
+}

package/src/chat-ui/create-ui-contexts.tsx

@@ -0,0 +1,52 @@
+import { createContext, useContext } from 'solid-js'
+import type { Context } from 'solid-js'
+import type {
+  ChatUIInterrupt,
+  ChatUISelectedPart,
+} from '@tanstack/ai-client/ui'
+import type { UseChatReturn } from '../types'
+
+export interface ChatUIContexts {
+  chatContext: Context<UseChatReturn<any, any, any> | undefined>
+  partContext: Context<ChatUISelectedPart | undefined>
+  interruptContext: Context<ChatUIInterrupt | undefined>
+  useChatContext: () => UseChatReturn<any, any, any>
+}
+
+/**
+ * Create a fresh set of chat UI contexts. This matches Form
+ * `createFormHookContexts` and Table `createTableHookContexts`.
+ *
+ * Most apps can skip this. `createChatHook` uses shared module contexts by
+ * default. Call this when a widget file cannot import the `createChatHook`
+ * result, or when nested chats need isolated providers.
+ *
+ * Prefer `useChatContext` from `createChatHook` when you can import that
+ * result. Part and interrupt widgets take `part` / `interrupt` as props.
+ */
+export function createChatHookContexts(): ChatUIContexts {
+  const chatContext = createContext<UseChatReturn<any, any, any> | undefined>(
+    undefined,
+  )
+  const partContext = createContext<ChatUISelectedPart | undefined>(undefined)
+  const interruptContext = createContext<ChatUIInterrupt | undefined>(undefined)
+
+  function useChatContext() {
+    const chat = useContext(chatContext)
+    if (!chat) {
+      throw new Error(
+        '`useChatContext` must be used within `UI.Provider` or `UI.Chat`.',
+      )
+    }
+    return chat
+  }
+
+  return {
+    chatContext,
+    partContext,
+    interruptContext,
+    useChatContext,
+  }
+}
+
+export const defaultChatUIContexts = createChatHookContexts()