@tanstack/ai-solid 0.19.4 → 0.20.0

package/dist/create-chat-hook.d.ts

@@ -0,0 +1,39 @@
+import { UseChatOptions, UseChatReturn } from "./types.js";
+import { InferredClientContext } from "@tanstack/ai-client";
+import { AnyClientTool, InterruptDefinition, SchemaInput } from "@tanstack/ai";
+
+//#region src/create-chat-hook.d.ts
+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} />
+ * }
+ * ```
+ */
+declare 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>): {
+  useChat: (overrides?: ChatHookOverrides<TTools, TSchema, TContext, TInterrupts>) => UseChatReturn<TTools, TSchema, TInterrupts>;
+};
+//#endregion
+export { createChatHook };
+//# sourceMappingURL=create-chat-hook.d.ts.map

package/dist/create-chat-hook.js

@@ -0,0 +1,38 @@
+import { useChat } from "./use-chat.js";
+
+//#region src/create-chat-hook.ts
+/**
+* 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} />
+* }
+* ```
+*/
+function createChatHook(options) {
+	function useChat$1(overrides) {
+		if (!overrides) return useChat(options);
+		return useChat({
+			...options,
+			...overrides
+		});
+	}
+	return { useChat: useChat$1 };
+}
+
+//#endregion
+export { createChatHook };
+//# sourceMappingURL=create-chat-hook.js.map

package/dist/create-chat-hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-chat-hook.js","names":["useChat","useUnboundChat"],"sources":["../src/create-chat-hook.ts"],"sourcesContent":["import { useChat as useUnboundChat } from './use-chat'\nimport type {\n  AnyClientTool,\n  InterruptDefinition,\n  SchemaInput,\n} from '@tanstack/ai'\nimport type { InferredClientContext } from '@tanstack/ai-client'\nimport type { UseChatOptions } from './types'\n\ntype ChatHookOverrides<\n  TTools extends ReadonlyArray<AnyClientTool>,\n  TSchema extends SchemaInput | undefined,\n  TContext,\n  TInterrupts extends ReadonlyArray<InterruptDefinition<any, any, any, any>>,\n> = {\n  threadId?: string\n  live?: boolean\n  forwardedProps?: Record<string, any>\n  body?: Record<string, any>\n  initialMessages?: UseChatOptions<\n    TTools,\n    TSchema,\n    TContext,\n    TInterrupts\n  >['initialMessages']\n}\n\n/**\n * Bind chat options once at module scope. The returned `useChat` primitive\n * creates a chat instance from those options.\n *\n * Pass per-call overrides for instance keys such as `threadId`,\n * `initialMessages`, `live`, and `forwardedProps`. Do not change `tools`,\n * `interrupts`, or `outputSchema` here. Those stay on the factory options.\n *\n * Rename the primitive at the call site if you already import `useChat` from\n * `@tanstack/ai-solid`: `const { useChat: useAppChat } = createChatHook(chatOptions)`.\n *\n * @example\n * ```tsx\n * const { useChat } = createChatHook(chatOptions)\n *\n * function Support() {\n *   const chat = useChat({ threadId: 'support-1' })\n *   return <UI.Chat chat={chat} components={components} />\n * }\n * ```\n */\nexport function createChatHook<\n  const TTools extends ReadonlyArray<AnyClientTool> = any,\n  TSchema extends SchemaInput | undefined = undefined,\n  TContext = InferredClientContext<TTools>,\n  const TInterrupts extends ReadonlyArray<\n    InterruptDefinition<any, any, any, any>\n  > = readonly [],\n>(options: UseChatOptions<TTools, TSchema, TContext, TInterrupts>) {\n  function useChat(\n    overrides?: ChatHookOverrides<TTools, TSchema, TContext, TInterrupts>,\n  ) {\n    if (!overrides) {\n      return useUnboundChat(options)\n    }\n    return useUnboundChat({ ...options, ...overrides })\n  }\n\n  return { useChat }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgDA,SAAgB,eAOd,SAAiE;CACjE,SAASA,UACP,WACA;AACA,MAAI,CAAC,UACH,QAAOC,QAAe,QAAQ;AAEhC,SAAOA,QAAe;GAAE,GAAG;GAAS,GAAG;GAAW,CAAC;;AAGrD,QAAO,EAAE,oBAAS"}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { ChatRequestBody, DeepPartial, QueueConfig, QueueOption, QueueStrategy, QueuedMessage, SendMessageOptions, UIMessage, UseChatOptions, UseChatReturn, WhenBusy } from "./types.js";
 import { useChat } from "./use-chat.js";
+import { createChatHook } from "./create-chat-hook.js";
 import { useByok } from "./use-byok.js";
 import { UseGenerationOptions, UseGenerationReturn, useGeneration } from "./use-generation.js";
 import { UseGenerateImageOptions, UseGenerateImageReturn, useGenerateImage } from "./use-generate-image.js";
@@ -10,4 +11,4 @@ import { UseSummarizeOptions, UseSummarizeReturn, useSummarize } from "./use-sum
 import { UseGenerateVideoOptions, UseGenerateVideoReturn, useGenerateVideo } from "./use-generate-video.js";
 import { UseAudioRecorderOptions, UseAudioRecorderReturn, useAudioRecorder } from "./use-audio-recorder.js";
 import { AudioGenerateInput, ChatClientPersistence, ChatPersistedState, ChatPersistenceOption, ChatStorageAdapter, ConnectConnectionAdapter, ConnectionAdapter, FetchConnectionOptions, GenerationClientState, ImageGenerateInput, IndexedDBPersistenceOptions, InferChatMessages, RunAgentInputContext, SpeechGenerateInput, StorageUnavailableError, SubscribeConnectionAdapter, SummarizeGenerateInput, TranscriptionGenerateInput, VideoGenerateInput, VideoGenerateResult, VideoStatusInfo, WebSocketConnectionOptions, WebStoragePersistenceOptions, XhrConnectionOptions, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, webSocket, xhrHttpStream, xhrServerSentEvents } from "@tanstack/ai-client";
-export { type AudioGenerateInput, type ChatClientPersistence, type ChatPersistedState, type ChatPersistenceOption, type ChatRequestBody, type ChatStorageAdapter, type ConnectConnectionAdapter, type ConnectionAdapter, type DeepPartial, type FetchConnectionOptions, type GenerationClientState, type ImageGenerateInput, type IndexedDBPersistenceOptions, type InferChatMessages, type QueueConfig, type QueueOption, type QueueStrategy, type QueuedMessage, type RunAgentInputContext, type SendMessageOptions, type SpeechGenerateInput, StorageUnavailableError, type SubscribeConnectionAdapter, type SummarizeGenerateInput, type TranscriptionGenerateInput, type UIMessage, type UseAudioRecorderOptions, type UseAudioRecorderReturn, type UseChatOptions, type UseChatReturn, type UseGenerateAudioOptions, type UseGenerateAudioReturn, type UseGenerateImageOptions, type UseGenerateImageReturn, type UseGenerateSpeechOptions, type UseGenerateSpeechReturn, type UseGenerateVideoOptions, type UseGenerateVideoReturn, type UseGenerationOptions, type UseGenerationReturn, type UseSummarizeOptions, type UseSummarizeReturn, type UseTranscriptionOptions, type UseTranscriptionReturn, type VideoGenerateInput, type VideoGenerateResult, type VideoStatusInfo, type WebSocketConnectionOptions, type WebStoragePersistenceOptions, type WhenBusy, type XhrConnectionOptions, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, useAudioRecorder, useByok, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription, webSocket, xhrHttpStream, xhrServerSentEvents };
+export { type AudioGenerateInput, type ChatClientPersistence, type ChatPersistedState, type ChatPersistenceOption, type ChatRequestBody, type ChatStorageAdapter, type ConnectConnectionAdapter, type ConnectionAdapter, type DeepPartial, type FetchConnectionOptions, type GenerationClientState, type ImageGenerateInput, type IndexedDBPersistenceOptions, type InferChatMessages, type QueueConfig, type QueueOption, type QueueStrategy, type QueuedMessage, type RunAgentInputContext, type SendMessageOptions, type SpeechGenerateInput, StorageUnavailableError, type SubscribeConnectionAdapter, type SummarizeGenerateInput, type TranscriptionGenerateInput, type UIMessage, type UseAudioRecorderOptions, type UseAudioRecorderReturn, type UseChatOptions, type UseChatReturn, type UseGenerateAudioOptions, type UseGenerateAudioReturn, type UseGenerateImageOptions, type UseGenerateImageReturn, type UseGenerateSpeechOptions, type UseGenerateSpeechReturn, type UseGenerateVideoOptions, type UseGenerateVideoReturn, type UseGenerationOptions, type UseGenerationReturn, type UseSummarizeOptions, type UseSummarizeReturn, type UseTranscriptionOptions, type UseTranscriptionReturn, type VideoGenerateInput, type VideoGenerateResult, type VideoStatusInfo, type WebSocketConnectionOptions, type WebStoragePersistenceOptions, type WhenBusy, type XhrConnectionOptions, createChatClientOptions, createChatHook, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, useAudioRecorder, useByok, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription, webSocket, xhrHttpStream, xhrServerSentEvents };

package/dist/index.js

@@ -1,4 +1,5 @@
 import { useChat } from "./use-chat.js";
+import { createChatHook } from "./create-chat-hook.js";
 import { useByok } from "./use-byok.js";
 import { useGeneration } from "./use-generation.js";
 import { useGenerateImage } from "./use-generate-image.js";
@@ -10,4 +11,4 @@ import { useGenerateVideo } from "./use-generate-video.js";
 import { useAudioRecorder } from "./use-audio-recorder.js";
 import { StorageUnavailableError, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, webSocket, xhrHttpStream, xhrServerSentEvents } from "@tanstack/ai-client";
 
-export { StorageUnavailableError, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, useAudioRecorder, useByok, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription, webSocket, xhrHttpStream, xhrServerSentEvents };
+export { StorageUnavailableError, createChatClientOptions, createChatHook, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, useAudioRecorder, useByok, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription, webSocket, xhrHttpStream, xhrServerSentEvents };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-solid",
-  "version": "0.19.4",
+  "version": "0.20.0",
   "description": "Solid hooks for TanStack AI streaming chat, structured outputs, and media generation.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -24,6 +24,11 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./ui": {
+      "solid": "./src/ui.ts",
+      "types": "./src/ui.ts",
+      "import": "./src/ui.ts"
     }
   },
   "files": [
@@ -45,11 +50,16 @@
     "media-generation"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "^0.29.2"
+    "rehype-highlight": "^7.0.2",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
+    "solid-markdown": "^2.1.0",
+    "@tanstack/ai-client": "^0.30.0"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.10",
-    "@tanstack/ai": "^0.52.0"
+    "@tanstack/ai": "^0.52.1"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",
@@ -60,8 +70,10 @@
     "solid-js": "^1.9.10",
     "tsdown": "^0.17.0-beta.6",
     "typescript": "5.9.3",
+    "vite": "^8.2.1",
+    "vite-plugin-solid": "^2.11.14",
     "vitest": "^4.1.10",
-    "@tanstack/ai": "0.52.0"
+    "@tanstack/ai": "0.52.1"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/chat-ui/chat-input.tsx

@@ -0,0 +1,168 @@
+import { createSignal } from 'solid-js'
+import { useChatContext } from './chat'
+import type { JSX } from 'solid-js'
+
+export interface ChatInputRenderProps {
+  /** Current input value */
+  value: string
+  /** Set input value */
+  onChange: (value: string) => void
+  /** Submit the message */
+  onSubmit: () => void
+  /** Is the chat currently loading */
+  isLoading: boolean
+  /** Is input disabled */
+  disabled: boolean
+  /** Ref callback for the input element */
+  ref: (el: HTMLInputElement | HTMLTextAreaElement) => void
+}
+
+/** @deprecated Use `createChatUI()` and an application-owned input component. Deprecated in 0.8.0. Removed in 1.0.0. */
+export interface ChatInputProps {
+  /** Render prop for full control */
+  children?: (props: ChatInputRenderProps) => JSX.Element
+  /** CSS class name */
+  class?: string
+  /** Placeholder text */
+  placeholder?: string
+  /** Disable input */
+  disabled?: boolean
+  /** Submit on Enter (Shift+Enter for new line) */
+  submitOnEnter?: boolean
+}
+
+/**
+ * @deprecated Use `createChatUI()` and an application-owned input component. Deprecated in 0.8.0. Removed in 1.0.0.
+ *
+ * Chat input component - handles message input and submission
+ *
+ * Features:
+ * - Auto-growing textarea
+ * - Submit on Enter (Shift+Enter for new line)
+ * - Loading state management
+ * - Full render prop support for custom UIs
+ *
+ * @example
+ * ```tsx
+ * <Chat.Input placeholder="Type your message..." />
+ * ```
+ *
+ * @example Custom UI with render prop
+ * ```tsx
+ * <Chat.Input>
+ *   {({ value, onChange, onSubmit, isLoading }) => (
+ *     <div>
+ *       <textarea value={value} onInput={(e) => onChange(e.target.value)} />
+ *       <button onClick={onSubmit} disabled={isLoading}>Send</button>
+ *     </div>
+ *   )}
+ * </Chat.Input>
+ * ```
+ */
+export function ChatInput(props: ChatInputProps) {
+  const { sendMessage, isLoading } = useChatContext()
+  const [value, setValue] = createSignal('')
+
+  const disabled = () => props.disabled || isLoading()
+
+  const handleSubmit = () => {
+    if (!value().trim() || disabled()) return
+    void sendMessage(value())
+    setValue('')
+  }
+
+  const renderProps = (): ChatInputRenderProps => ({
+    value: value(),
+    onChange: setValue,
+    onSubmit: handleSubmit,
+    isLoading: isLoading(),
+    disabled: disabled(),
+
+    ref: () => {},
+  })
+
+  // Render prop pattern
+  if (props.children) {
+    return <>{props.children(renderProps())}</>
+  }
+
+  // Default implementation
+  return (
+    <div
+      class={props.class}
+      data-chat-input
+      style={{
+        display: 'flex',
+        gap: '0.75rem',
+        'align-items': 'center',
+        width: '100%',
+      }}
+    >
+      <input
+        type="text"
+        value={value()}
+        onInput={(e) => setValue(e.currentTarget.value)}
+        onKeyDown={(e) => {
+          if ((props.submitOnEnter ?? true) && e.key === 'Enter') {
+            e.preventDefault()
+            handleSubmit()
+          }
+        }}
+        placeholder={props.placeholder ?? 'Type a message...'}
+        disabled={disabled()}
+        data-chat-textarea
+        style={{
+          flex: 1,
+          padding: '0.75rem 1rem',
+          'font-size': '0.875rem',
+          border: '1px solid rgba(255, 255, 255, 0.1)',
+          'border-radius': '0.75rem',
+          'background-color': 'rgba(31, 41, 55, 0.5)',
+          color: 'white',
+          outline: 'none',
+          transition: 'all 0.2s',
+        }}
+        onFocus={(e) => {
+          e.currentTarget.style.borderColor = 'rgba(249, 115, 22, 0.4)'
+          e.currentTarget.style.boxShadow = '0 0 0 2px rgba(249, 115, 22, 0.2)'
+        }}
+        onBlur={(e) => {
+          e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.1)'
+          e.currentTarget.style.boxShadow = 'none'
+        }}
+      />
+      <button
+        onClick={handleSubmit}
+        disabled={disabled() || !value().trim()}
+        data-chat-submit
+        style={{
+          padding: '0.75rem 1.5rem',
+          'font-size': '0.875rem',
+          'font-weight': 500,
+          color: 'white',
+          'background-color':
+            disabled() || !value().trim()
+              ? 'rgba(107, 114, 128, 0.5)'
+              : 'rgb(249, 115, 22)',
+          border: 'none',
+          'border-radius': '0.75rem',
+          cursor: disabled() || !value().trim() ? 'not-allowed' : 'pointer',
+          transition: 'all 0.2s',
+          'white-space': 'nowrap',
+        }}
+        onMouseEnter={(e) => {
+          if (!disabled() && value().trim()) {
+            e.currentTarget.style.backgroundColor = 'rgb(234, 88, 12)'
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!disabled() && value().trim()) {
+            e.currentTarget.style.backgroundColor = 'rgb(249, 115, 22)'
+          }
+        }}
+      >
+        {isLoading() ? 'Sending...' : 'Send'}
+      </button>
+    </div>
+  )
+}

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

@@ -0,0 +1,261 @@
+import { For, Show } from 'solid-js'
+import { ThinkingPart } from './thinking-part'
+import type { JSX } from 'solid-js'
+import type { UIMessage } from '../types'
+
+export interface ToolCallRenderProps {
+  id: string
+  name: string
+  arguments: string
+  state: string
+  approval?: any
+  output?: any
+}
+
+/** @deprecated Use `createChatUI()` Message instead. Deprecated in 0.8.0. Removed in 1.0.0. */
+export interface ChatMessageProps {
+  /** The message to render */
+  message: UIMessage
+  /** Base CSS class name */
+  class?: string
+  /** Additional class for user messages */
+  userClass?: string
+  /** Additional class for assistant messages */
+  assistantClass?: string
+  /** Custom renderer for text parts */
+  textPartRenderer?: (props: { content: string }) => JSX.Element
+  /** Custom renderer for thinking parts */
+  thinkingPartRenderer?: (props: {
+    content: string
+    isComplete?: boolean
+  }) => JSX.Element
+  /** Named tool renderers - use the tool name as the key */
+  toolsRenderer?: Record<string, (props: ToolCallRenderProps) => JSX.Element>
+  /** Default tool renderer when tool name not found in toolsRenderer */
+  defaultToolRenderer?: (props: ToolCallRenderProps) => JSX.Element
+  /** Custom renderer for tool result parts */
+  toolResultRenderer?: (props: {
+    toolCallId: string
+    content: string
+    state: string
+  }) => JSX.Element
+}
+
+/**
+ * @deprecated Use `createChatUI()` Message instead. Deprecated in 0.8.0. Removed in 1.0.0.
+ *
+ * Message component - renders a single message with all its parts
+ *
+ * This component natively understands TanStack AI's parts-based message format:
+ * - thinking parts: rendered as collapsible thinking/reasoning sections (auto-collapses when complete)
+ * - text parts: rendered as content
+ * - tool-call parts: rendered with state, approvals, etc.
+ * - tool-result parts: rendered with results
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Chat.Message message={message} />
+ * ```
+ *
+ * @example With role-based styling
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   class="flex"
+ *   userClass="justify-end"
+ *   assistantClass="justify-start"
+ * />
+ * ```
+ *
+ * @example With custom thinking renderer
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   thinkingPartRenderer={({ content, isComplete }) => (
+ *     <details open={!isComplete}>
+ *       <summary>Thinking...</summary>
+ *       <pre>{content}</pre>
+ *     </details>
+ *   )}
+ * />
+ * ```
+ *
+ * @example With named tool renderers
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   toolsRenderer={{
+ *     recommendGuitar: ({ id, arguments: args }) => <GuitarCard {...JSON.parse(args)} />,
+ *     weatherLookup: ({ id, arguments: args }) => <WeatherWidget {...JSON.parse(args)} />,
+ *   }}
+ *   defaultToolRenderer={() => null}
+ * />
+ * ```
+ */
+export function ChatMessage(props: ChatMessageProps) {
+  // Combine classes based on role
+  const roleClass = () =>
+    props.message.role === 'user'
+      ? (props.userClass ?? '')
+      : (props.assistantClass ?? '')
+
+  const combinedClass = () =>
+    [props.class ?? '', roleClass()].filter(Boolean).join(' ')
+
+  return (
+    <div
+      class={combinedClass() || undefined}
+      data-message-id={props.message.id}
+      data-message-role={props.message.role}
+      data-message-created={props.message.createdAt?.toISOString()}
+    >
+      <For each={props.message.parts}>
+        {(part, index) => {
+          // Check if thinking is complete (if there's a text part after this thinking part)
+          const isThinkingComplete = () =>
+            part.type === 'thinking' &&
+            props.message.parts
+              .slice(index() + 1)
+              .some((p) => p.type === 'text')
+
+          return (
+            <MessagePart
+              part={part}
+              isThinkingComplete={isThinkingComplete()}
+              textPartRenderer={props.textPartRenderer}
+              thinkingPartRenderer={props.thinkingPartRenderer}
+              toolsRenderer={props.toolsRenderer}
+              defaultToolRenderer={props.defaultToolRenderer}
+              toolResultRenderer={props.toolResultRenderer}
+            />
+          )
+        }}
+      </For>
+    </div>
+  )
+}
+
+function MessagePart(props: {
+  part: any
+  isThinkingComplete?: boolean
+  textPartRenderer?: ChatMessageProps['textPartRenderer']
+  thinkingPartRenderer?: ChatMessageProps['thinkingPartRenderer']
+  toolsRenderer?: ChatMessageProps['toolsRenderer']
+  defaultToolRenderer?: ChatMessageProps['defaultToolRenderer']
+  toolResultRenderer?: ChatMessageProps['toolResultRenderer']
+}) {
+  // Text part
+  if (props.part.type === 'text') {
+    if (props.textPartRenderer) {
+      return <>{props.textPartRenderer({ content: props.part.content })}</>
+    }
+    return (
+      <div data-part-type="text" data-part-content>
+        {props.part.content}
+      </div>
+    )
+  }
+
+  // Thinking part
+  if (props.part.type === 'thinking') {
+    if (props.thinkingPartRenderer) {
+      return (
+        <>
+          {props.thinkingPartRenderer({
+            content: props.part.content,
+            isComplete: props.isThinkingComplete,
+          })}
+        </>
+      )
+    }
+    return (
+      <ThinkingPart
+        content={props.part.content}
+        isComplete={props.isThinkingComplete}
+      />
+    )
+  }
+
+  // Tool call part
+  if (props.part.type === 'tool-call') {
+    const toolProps: ToolCallRenderProps = {
+      id: props.part.id,
+      name: props.part.name,
+      arguments: props.part.arguments,
+      state: props.part.state,
+      approval: props.part.approval,
+      output: props.part.output,
+    }
+
+    // Check if there's a specific renderer for this tool
+    if (props.toolsRenderer?.[props.part.name]) {
+      return <>{props.toolsRenderer[props.part.name]?.(toolProps)}</>
+    }
+
+    // Use default tool renderer if provided
+    if (props.defaultToolRenderer) {
+      return <>{props.defaultToolRenderer(toolProps)}</>
+    }
+
+    // Fallback to built-in default renderer
+    return (
+      <div
+        data-part-type="tool-call"
+        data-tool-name={props.part.name}
+        data-tool-state={props.part.state}
+        data-tool-id={props.part.id}
+      >
+        <div data-tool-header>
+          <strong>{props.part.name}</strong>
+          <span data-tool-state-badge>{props.part.state}</span>
+        </div>
+        <Show when={props.part.arguments}>
+          <div data-tool-arguments>
+            <pre>{props.part.arguments}</pre>
+          </div>
+        </Show>
+        <Show when={props.part.approval}>
+          <div data-tool-approval>
+            {props.part.approval.approved !== undefined
+              ? props.part.approval.approved
+                ? '✓ Approved'
+                : '✗ Denied'
+              : '⏳ Awaiting approval...'}
+          </div>
+        </Show>
+        <Show when={props.part.output}>
+          <div data-tool-output>
+            <pre>{JSON.stringify(props.part.output, null, 2)}</pre>
+          </div>
+        </Show>
+      </div>
+    )
+  }
+
+  // Tool result part
+  if (props.part.type === 'tool-result') {
+    if (props.toolResultRenderer) {
+      return (
+        <>
+          {props.toolResultRenderer({
+            toolCallId: props.part.toolCallId,
+            content: props.part.content,
+            state: props.part.state,
+          })}
+        </>
+      )
+    }
+
+    return (
+      <div
+        data-part-type="tool-result"
+        data-tool-call-id={props.part.toolCallId}
+        data-tool-result-state={props.part.state}
+      >
+        <div data-tool-result-content>{props.part.content}</div>
+      </div>
+    )
+  }
+
+  return null
+}

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

@@ -0,0 +1,91 @@
+import { For, Show, createEffect } from 'solid-js'
+import { useChatContext } from './chat'
+import { ChatMessage } from './chat-message'
+import type { JSX } from 'solid-js'
+import type { UIMessage } from '../types'
+
+/** @deprecated Use `createChatUI()` Messages instead. Deprecated in 0.8.0. Removed in 1.0.0. */
+export interface ChatMessagesProps {
+  /** Custom render function for each message */
+  children?: (message: UIMessage, index: number) => JSX.Element
+  /** CSS class name */
+  class?: string
+  /** Element to show when there are no messages */
+  emptyState?: JSX.Element
+  /** Element to show while loading the first message */
+  loadingState?: JSX.Element
+  /** Custom error renderer */
+  errorState?: (props: {
+    error: Error
+    reload: () => Promise<void>
+  }) => JSX.Element
+  /** Auto-scroll to bottom on new messages */
+  autoScroll?: boolean
+}
+
+/**
+ * @deprecated Use `createChatUI()` Messages instead. Deprecated in 0.8.0. Removed in 1.0.0.
+ *
+ * Messages container - renders all messages in the conversation
+ *
+ * @example
+ * ```tsx
+ * <Chat.Messages>
+ *   {(message) => <Chat.Message message={message} />}
+ * </Chat.Messages>
+ * ```
+ */
+export function ChatMessages(props: ChatMessagesProps) {
+  const { messages, isLoading, error, reload } = useChatContext()
+  let containerRef: HTMLDivElement | undefined
+
+  // Auto-scroll to bottom on new messages
+  createEffect(() => {
+    // Track messages to trigger effect on change
+    messages()
+    if ((props.autoScroll ?? true) && containerRef) {
+      containerRef.scrollTop = containerRef.scrollHeight
+    }
+  })
+
+  return (
+    <Show
+      when={!error() || !props.errorState}
+      fallback={(() => {
+        const err = error()
+        return err ? <>{props.errorState?.({ error: err, reload })}</> : null
+      })()}
+    >
+      <Show
+        when={!isLoading() || messages().length > 0 || !props.loadingState}
+        fallback={<>{props.loadingState}</>}
+      >
+        <Show
+          when={messages().length > 0 || !props.emptyState}
+          fallback={<>{props.emptyState}</>}
+        >
+          <div
+            ref={(el) => {
+              containerRef = el
+            }}
+            class={props.class}
+            data-chat-messages
+            data-message-count={messages().length}
+          >
+            <For each={messages()}>
+              {(message, index) =>
+                props.children ? (
+                  <div data-message-id={message.id}>
+                    {props.children(message, index())}
+                  </div>
+                ) : (
+                  <ChatMessage message={message} />
+                )
+              }
+            </For>
+          </div>
+        </Show>
+      </Show>
+    </Show>
+  )
+}