@tanstack/ai-solid 0.19.4 → 0.21.0

package/src/chat-ui/markdown-plugins.ts

@@ -0,0 +1,48 @@
+import remarkGfm from 'remark-gfm'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
+import rehypeHighlight from 'rehype-highlight'
+import type { SolidMarkdownOptions } from 'solid-markdown'
+
+export type PluggableList = SolidMarkdownOptions['remarkPlugins']
+
+export const DEFAULT_REMARK_PLUGINS: PluggableList = [remarkGfm]
+export const DEFAULT_REHYPE_PLUGINS_BEFORE_USER: PluggableList = [
+  rehypeRaw,
+  rehypeHighlight,
+]
+export const DEFAULT_REHYPE_PLUGINS_AFTER_USER: PluggableList = [rehypeSanitize]
+
+export interface ResolveMarkdownPluginsOptions {
+  remarkPlugins?: PluggableList
+  rehypePlugins?: PluggableList
+  disableDefaultPlugins?: boolean
+}
+
+export interface ResolvedMarkdownPlugins {
+  remarkPlugins: PluggableList
+  rehypePlugins: PluggableList
+}
+
+export function resolveMarkdownPlugins(
+  options: ResolveMarkdownPluginsOptions,
+): ResolvedMarkdownPlugins {
+  const userRemark = options.remarkPlugins ?? []
+  const userRehype = options.rehypePlugins ?? []
+
+  if (options.disableDefaultPlugins) {
+    return {
+      remarkPlugins: [...userRemark],
+      rehypePlugins: [...userRehype],
+    }
+  }
+
+  return {
+    remarkPlugins: [...DEFAULT_REMARK_PLUGINS, ...userRemark],
+    rehypePlugins: [
+      ...DEFAULT_REHYPE_PLUGINS_BEFORE_USER,
+      ...userRehype,
+      ...DEFAULT_REHYPE_PLUGINS_AFTER_USER,
+    ],
+  }
+}

package/src/chat-ui/text-part.tsx

@@ -0,0 +1,71 @@
+import { SolidMarkdown } from 'solid-markdown'
+import { resolveMarkdownPlugins } from './markdown-plugins'
+import type { SolidMarkdownComponents } from 'solid-markdown'
+import type { PluggableList } from './markdown-plugins'
+
+export interface TextPartProps {
+  /** The text content to render */
+  content: string
+  /** The role of the message (user, assistant, or system) - optional for standalone use */
+  role?: 'user' | 'assistant' | 'system'
+  /** Base class applied to all text parts */
+  class?: string
+  /** Additional class for user messages */
+  userClass?: string
+  /** Additional class for assistant messages (also used for system messages) */
+  assistantClass?: string
+  /** Additional remark plugins, appended after the defaults. */
+  remarkPlugins?: PluggableList
+  /**
+   * Additional rehype plugins. Inserted before the trailing
+   * `rehypeSanitize` so sanitization always runs last.
+   */
+  rehypePlugins?: PluggableList
+  /** solid-markdown `components` overrides. */
+  components?: SolidMarkdownComponents
+  /**
+   * Drop the built-in plugin defaults entirely. Disables the XSS
+   * sanitizer; the caller becomes responsible for sanitization.
+   */
+  disableDefaultPlugins?: boolean
+}
+
+/**
+ * TextPart component - renders markdown text with syntax highlighting.
+ *
+ * @example Add a markdown plugin (e.g. CJK bold/emphasis support)
+ * ```tsx
+ * import remarkCjkFriendly from 'remark-cjk-friendly'
+ *
+ * <TextPart content={content} remarkPlugins={[remarkCjkFriendly]} />
+ * ```
+ */
+export function TextPart(props: TextPartProps) {
+  const roleClass = () =>
+    props.role === 'user'
+      ? (props.userClass ?? '')
+      : props.role === 'assistant'
+        ? (props.assistantClass ?? '')
+        : ''
+  const combinedClass = () =>
+    [props.class ?? '', roleClass()].filter(Boolean).join(' ')
+
+  const resolved = () =>
+    resolveMarkdownPlugins({
+      remarkPlugins: props.remarkPlugins,
+      rehypePlugins: props.rehypePlugins,
+      disableDefaultPlugins: props.disableDefaultPlugins,
+    })
+
+  return (
+    <div class={combinedClass() || undefined}>
+      <SolidMarkdown
+        remarkPlugins={resolved().remarkPlugins}
+        rehypePlugins={resolved().rehypePlugins}
+        components={props.components}
+      >
+        {props.content}
+      </SolidMarkdown>
+    </div>
+  )
+}

package/src/chat-ui/thinking-part.tsx

@@ -0,0 +1,79 @@
+import { Show, createEffect, createSignal } from 'solid-js'
+
+export interface ThinkingPartProps {
+  /** The thinking content to render */
+  content: string
+  /** Base class applied to thinking parts */
+  class?: string
+  /** Whether thinking is complete (has text content after) */
+  isComplete?: boolean
+}
+
+/**
+ * ThinkingPart component - renders thinking/reasoning content
+ *
+ * This component displays the model's internal reasoning process,
+ * typically shown in a collapsed or expandable format to distinguish
+ * it from the final response. It automatically collapses when thinking
+ * is complete.
+ *
+ * @example Standalone usage
+ * ```tsx
+ * <ThinkingPart
+ *   content="Let me think about this step by step..."
+ *   class="p-4 rounded bg-gray-100"
+ * />
+ * ```
+ *
+ * @example Usage in partRenderers
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   partRenderers={{
+ *     thinking: ({ content, isComplete }) => (
+ *       <ThinkingPart
+ *         content={content}
+ *         isComplete={isComplete}
+ *         class="px-5 py-3 rounded-2xl bg-gray-800/50"
+ *       />
+ *     )
+ *   }}
+ * />
+ * ```
+ */
+export function ThinkingPart(props: ThinkingPartProps) {
+  const [isCollapsed, setIsCollapsed] = createSignal(false)
+
+  // Auto-collapse when thinking completes
+  createEffect(() => {
+    if (props.isComplete) {
+      setIsCollapsed(true)
+    }
+  })
+
+  return (
+    <div
+      class={props.class || undefined}
+      data-part-type="thinking"
+      data-part-content
+    >
+      <button
+        onClick={() => setIsCollapsed(!isCollapsed())}
+        class="flex items-center gap-2 text-sm text-gray-400 hover:text-gray-300 transition-colors mb-2"
+        aria-expanded={!isCollapsed()}
+        aria-label={isCollapsed() ? 'Expand thinking' : 'Collapse thinking'}
+      >
+        <span class="text-xs">{isCollapsed() ? '▶' : '▼'}</span>
+        <span class="italic">💭 Thinking...</span>
+        <Show when={props.isComplete}>
+          <span class="text-xs text-gray-500">(complete)</span>
+        </Show>
+      </button>
+      <Show when={!isCollapsed()}>
+        <div class="text-gray-300 whitespace-pre-wrap font-mono text-sm">
+          {props.content}
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/chat-ui/tool-approval.tsx

@@ -0,0 +1,121 @@
+import { useChatContext } from './chat'
+import type { JSX } from 'solid-js'
+
+/** @deprecated Use `createChatUI()` interrupt components with `chat.interrupts`. Deprecated in 0.8.0. Removed in 1.0.0. */
+export interface ToolApprovalProps {
+  /** Tool call ID */
+  toolCallId: string
+  /** Tool name */
+  toolName: string
+  /** Parsed tool arguments/input */
+  input: any
+  /** Approval metadata */
+  approval: {
+    id: string
+    needsApproval: boolean
+    approved?: boolean
+  }
+  /** CSS class name */
+  class?: string
+  /** Custom render prop */
+  children?: (props: ToolApprovalRenderProps) => JSX.Element
+}
+
+export interface ToolApprovalRenderProps {
+  /** Tool name */
+  toolName: string
+  /** Parsed input */
+  input: any
+  /** Approve the tool call */
+  onApprove: () => void
+  /** Deny the tool call */
+  onDeny: () => void
+  /** Whether user has responded */
+  hasResponded: boolean
+  /** User's decision (if responded) */
+  approved?: boolean
+}
+
+/**
+ * @deprecated Use `createChatUI()` interrupt components with `chat.interrupts`. Deprecated in 0.8.0. Removed in 1.0.0.
+ *
+ * Tool approval component - renders approve/deny buttons for tools that need approval
+ *
+ * @example
+ * ```tsx
+ * {part.approval && (
+ *   <ToolApproval
+ *     toolCallId={part.id}
+ *     toolName={part.name}
+ *     input={JSON.parse(part.arguments)}
+ *     approval={part.approval}
+ *   />
+ * )}
+ * ```
+ */
+export function ToolApproval(props: ToolApprovalProps) {
+  const { addToolApprovalResponse } = useChatContext()
+
+  const handleApprove = () => {
+    void addToolApprovalResponse({
+      id: props.approval.id,
+      approved: true,
+    })
+  }
+
+  const handleDeny = () => {
+    void addToolApprovalResponse({
+      id: props.approval.id,
+      approved: false,
+    })
+  }
+
+  const hasResponded = () => props.approval.approved !== undefined
+
+  const renderProps = (): ToolApprovalRenderProps => ({
+    toolName: props.toolName,
+    input: props.input,
+    onApprove: handleApprove,
+    onDeny: handleDeny,
+    hasResponded: hasResponded(),
+    approved: props.approval.approved,
+  })
+
+  // Render prop pattern
+  if (props.children) {
+    return <>{props.children(renderProps())}</>
+  }
+
+  // Already responded - show decision
+  if (hasResponded()) {
+    return (
+      <div
+        class={props.class}
+        data-tool-approval
+        data-approval-status={props.approval.approved ? 'approved' : 'denied'}
+      >
+        {props.approval.approved ? '✓ Approved' : '✗ Denied'}
+      </div>
+    )
+  }
+
+  // Default approval UI
+  return (
+    <div class={props.class} data-tool-approval data-approval-status="pending">
+      <div data-approval-header>
+        <strong>{props.toolName}</strong> requires approval
+      </div>
+      <div data-approval-input>
+        <pre>{JSON.stringify(props.input, null, 2)}</pre>
+      </div>
+      <div data-approval-actions>
+        <button onClick={handleApprove} data-approval-approve>
+          Approve
+        </button>
+        <button onClick={handleDeny} data-approval-deny>
+          Deny
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/create-chat-hook.ts

@@ -0,0 +1,67 @@
+import { useChat as useUnboundChat } from './use-chat'
+import type {
+  AnyClientTool,
+  InterruptDefinition,
+  SchemaInput,
+} from '@tanstack/ai'
+import type { InferredClientContext } from '@tanstack/ai-client'
+import type { UseChatOptions } 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?: UseChatOptions<
+    TTools,
+    TSchema,
+    TContext,
+    TInterrupts
+  >['initialMessages']
+}
+
+/**
+ * Bind chat options once at module scope. The returned `useChat` primitive
+ * 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 primitive at the call site if you already import `useChat` from
+ * `@tanstack/ai-solid`: `const { useChat: useAppChat } = createChatHook(chatOptions)`.
+ *
+ * @example
+ * ```tsx
+ * const { useChat } = createChatHook(chatOptions)
+ *
+ * function Support() {
+ *   const chat = useChat({ threadId: 'support-1' })
+ *   return <UI.Chat chat={chat} components={components} />
+ * }
+ * ```
+ */
+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: UseChatOptions<TTools, TSchema, TContext, TInterrupts>) {
+  function useChat(
+    overrides?: ChatHookOverrides<TTools, TSchema, TContext, TInterrupts>,
+  ) {
+    if (!overrides) {
+      return useUnboundChat(options)
+    }
+    return useUnboundChat({ ...options, ...overrides })
+  }
+
+  return { useChat }
+}

package/src/index.ts

@@ -1,5 +1,8 @@
 export { useChat } from './use-chat'
+export { createChatHook } from './create-chat-hook'
 export { useByok } from './use-byok'
+export { useWebMCPTools } from './use-web-mcp-tools'
+export type { UseWebMCPToolsOptions } from './use-web-mcp-tools'
 export type {
   DeepPartial,
   UseChatOptions,

package/src/ui.ts

@@ -0,0 +1,39 @@
+// Barrel entry for the `@tanstack/ai-solid/ui` subpath.
+export {
+  createChatUI,
+  type ChatUIComponents,
+  type ChatUIFactoryConfig,
+  type ChatUIHost,
+  type ChatUIQueueItem,
+  type InputProps,
+  type InterruptProps,
+  type LayoutProps,
+  type MessageProps,
+  type PartProps,
+  type QueueProps,
+  type ToolProps,
+} from './chat-ui/create-ui'
+export { createChatHook } from './chat-ui/create-chat-hook'
+export {
+  createChatHookContexts,
+  type ChatUIContexts,
+} from './chat-ui/create-ui-contexts'
+export { Chat, useChatContext, type ChatProps } from './chat-ui/chat'
+export { ChatMessages, type ChatMessagesProps } from './chat-ui/chat-messages'
+export {
+  ChatMessage,
+  type ChatMessageProps,
+  type ToolCallRenderProps,
+} from './chat-ui/chat-message'
+export {
+  ChatInput,
+  type ChatInputProps,
+  type ChatInputRenderProps,
+} from './chat-ui/chat-input'
+export {
+  ToolApproval,
+  type ToolApprovalProps,
+  type ToolApprovalRenderProps,
+} from './chat-ui/tool-approval'
+export { TextPart, type TextPartProps } from './chat-ui/text-part'
+export { ThinkingPart, type ThinkingPartProps } from './chat-ui/thinking-part'

package/src/use-web-mcp-tools.ts

@@ -0,0 +1,55 @@
+import { onCleanup } from 'solid-js'
+import { registerWebMCPTools } from '@tanstack/ai-client'
+import type {
+  AnyClientTool,
+  InferredClientContext,
+  RegisterWebMCPToolsOptions,
+} from '@tanstack/ai-client'
+
+/** Options for {@link useWebMCPTools}. */
+export type UseWebMCPToolsOptions<
+  TTools extends ReadonlyArray<AnyClientTool>,
+  TContext = InferredClientContext<TTools>,
+> = Omit<RegisterWebMCPToolsOptions<TTools, TContext>, 'signal'> & {
+  /** Receives an asynchronous registration error. */
+  onError?: (error: unknown) => void
+}
+
+type UseWebMCPToolsArguments<
+  TTools extends ReadonlyArray<AnyClientTool>,
+  TContext,
+> =
+  {} extends UseWebMCPToolsOptions<TTools, TContext>
+    ? [options?: UseWebMCPToolsOptions<TTools, TContext>]
+    : [options: UseWebMCPToolsOptions<TTools, TContext>]
+
+/**
+ * Registers executable client tools with WebMCP for the current Solid owner.
+ *
+ * The owner cleanup removes every tool registered by this call.
+ *
+ * @param tools - The executable client tools to expose through WebMCP.
+ * @param options - Runtime context, per-tool options, and error handling.
+ *
+ * @example
+ * ```ts
+ * useWebMCPTools([searchProducts])
+ * ```
+ */
+export function useWebMCPTools<
+  const TTools extends ReadonlyArray<AnyClientTool>,
+  TContext = InferredClientContext<TTools>,
+>(tools: TTools, ...[options]: UseWebMCPToolsArguments<TTools, TContext>) {
+  const controller = new AbortController()
+
+  void registerWebMCPTools(tools, {
+    ...options,
+    signal: controller.signal,
+  }).catch((error) => {
+    if (!controller.signal.aborted) {
+      options?.onError?.(error)
+    }
+  })
+
+  onCleanup(() => controller.abort())
+}