@tanstack/ai-react 0.22.4 → 0.24.0

package/README.md

@@ -61,12 +61,8 @@ framework bindings as your app needs them.
 
 - [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
   what TanStack AI is and how the packages fit together.
-- [Quick Start: React](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
-  add streaming chat to a React app.
-- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
-  build with Vue composables.
-- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
-  build with Svelte 5 runes.
+- [Quick Start](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
+  add streaming chat. Pick your framework at the top of the page.
 - [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
   use TanStack AI from a server endpoint, script, or backend service.
 - [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) -
@@ -226,15 +222,15 @@ on.
 
 ## Framework Packages
 
-| Package                                                                    | What it provides                                                         |
-| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients                          |
-| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react)   | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
-| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid)   | Solid hooks for chat and generations                                     |
-| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue)       | Vue composables for chat and generations                                 |
-| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations                              |
-| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat                                                    |
-| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui`    | Headless UI components for chat interfaces                               |
+| Package                                                                                           | What it provides                                                                                                                        |
+| ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client)                        | Headless chat, realtime, and generation clients                                                                                         |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react)                          | React hooks including `useChat`, `useRealtimeChat`, and generation hooks                                                                |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid)                          | Solid hooks for chat and generations                                                                                                    |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue)                              | Vue composables for chat and generations                                                                                                |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte)                        | Svelte 5 factories for chat and generations                                                                                             |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact)                        | Preact hooks for chat                                                                                                                   |
+| `@tanstack/ai-react/ui`, `@tanstack/ai-solid/ui`, `@tanstack/ai-vue/ui`, `@tanstack/ai-svelte/ui` | Headless UI components for chat interfaces. `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, and `@tanstack/ai-vue-ui` are deprecated. |
 
 ## Advanced Docs
 

package/dist/esm/chat-ui/chat-input.d.ts

@@ -0,0 +1,57 @@
+import { ReactNode, RefObject } from 'react';
+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 to the input element */
+    inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
+}
+export interface ChatInputProps {
+    /** Render prop for full control */
+    children?: (props: ChatInputRenderProps) => ReactNode;
+    /** CSS class name */
+    className?: 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.9.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} onChange={(e) => onChange(e.target.value)} />
+ *       <button onClick={onSubmit} disabled={isLoading}>Send</button>
+ *     </div>
+ *   )}
+ * </Chat.Input>
+ * ```
+ */
+export declare function ChatInput({ children, className, placeholder, disabled: disabledProp, submitOnEnter, }: ChatInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/chat-ui/chat-input.js

@@ -0,0 +1,124 @@
+import { useChatContext } from "./chat.js";
+import { useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat-ui/chat-input.tsx
+/**
+* @deprecated Use `createChatUI()` and an application-owned input component.
+* Deprecated in 0.9.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} onChange={(e) => onChange(e.target.value)} />
+*       <button onClick={onSubmit} disabled={isLoading}>Send</button>
+*     </div>
+*   )}
+* </Chat.Input>
+* ```
+*/
+function ChatInput({ children, className, placeholder = "Type a message...", disabled: disabledProp, submitOnEnter = true }) {
+	const { sendMessage, isLoading } = useChatContext();
+	const [value, setValue] = useState("");
+	const inputRef = useRef(null);
+	const disabled = disabledProp || isLoading;
+	const handleSubmit = () => {
+		if (!value.trim() || disabled) return;
+		sendMessage(value);
+		setValue("");
+	};
+	const renderProps = {
+		value,
+		onChange: setValue,
+		onSubmit: handleSubmit,
+		isLoading,
+		disabled,
+		inputRef
+	};
+	if (children) return /* @__PURE__ */ jsx(Fragment, { children: children(renderProps) });
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		"data-chat-input": true,
+		style: {
+			display: "flex",
+			gap: "0.75rem",
+			alignItems: "center",
+			width: "100%"
+		},
+		children: [/* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			type: "text",
+			value,
+			onChange: (e) => setValue(e.target.value),
+			onKeyDown: (e) => {
+				if (submitOnEnter && e.key === "Enter") {
+					e.preventDefault();
+					handleSubmit();
+				}
+			},
+			placeholder,
+			disabled,
+			"data-chat-textarea": true,
+			style: {
+				flex: 1,
+				padding: "0.75rem 1rem",
+				fontSize: "0.875rem",
+				border: "1px solid rgba(255, 255, 255, 0.1)",
+				borderRadius: "0.75rem",
+				backgroundColor: "rgba(31, 41, 55, 0.5)",
+				color: "white",
+				outline: "none",
+				transition: "all 0.2s"
+			},
+			onFocus: (e) => {
+				e.target.style.borderColor = "rgba(249, 115, 22, 0.4)";
+				e.target.style.boxShadow = "0 0 0 2px rgba(249, 115, 22, 0.2)";
+			},
+			onBlur: (e) => {
+				e.target.style.borderColor = "rgba(255, 255, 255, 0.1)";
+				e.target.style.boxShadow = "none";
+			}
+		}), /* @__PURE__ */ jsx("button", {
+			onClick: handleSubmit,
+			disabled: disabled || !value.trim(),
+			"data-chat-submit": true,
+			style: {
+				padding: "0.75rem 1.5rem",
+				fontSize: "0.875rem",
+				fontWeight: 500,
+				color: "white",
+				backgroundColor: disabled || !value.trim() ? "rgba(107, 114, 128, 0.5)" : "rgb(249, 115, 22)",
+				border: "none",
+				borderRadius: "0.75rem",
+				cursor: disabled || !value.trim() ? "not-allowed" : "pointer",
+				transition: "all 0.2s",
+				whiteSpace: "nowrap"
+			},
+			onMouseEnter: (e) => {
+				if (!disabled && value.trim()) e.target.style.backgroundColor = "rgb(234, 88, 12)";
+			},
+			onMouseLeave: (e) => {
+				if (!disabled && value.trim()) e.target.style.backgroundColor = "rgb(249, 115, 22)";
+			},
+			children: isLoading ? "Sending..." : "Send"
+		})]
+	});
+}
+//#endregion
+export { ChatInput };
+
+//# sourceMappingURL=chat-input.js.map

package/dist/esm/chat-ui/chat-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-input.js","names":[],"sources":["../../../src/chat-ui/chat-input.tsx"],"sourcesContent":["import { useRef, useState } from 'react'\nimport { useChatContext } from './chat'\nimport type { ReactNode, RefObject } from 'react'\n\nexport interface ChatInputRenderProps {\n  /** Current input value */\n  value: string\n  /** Set input value */\n  onChange: (value: string) => void\n  /** Submit the message */\n  onSubmit: () => void\n  /** Is the chat currently loading */\n  isLoading: boolean\n  /** Is input disabled */\n  disabled: boolean\n  /** Ref to the input element */\n  inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>\n}\n\nexport interface ChatInputProps {\n  /** Render prop for full control */\n  children?: (props: ChatInputRenderProps) => ReactNode\n  /** CSS class name */\n  className?: string\n  /** Placeholder text */\n  placeholder?: string\n  /** Disable input */\n  disabled?: boolean\n  /** Submit on Enter (Shift+Enter for new line) */\n  submitOnEnter?: boolean\n}\n\n/**\n * @deprecated Use `createChatUI()` and an application-owned input component.\n * Deprecated in 0.9.0. Removed in 1.0.0.\n *\n * Chat input component - handles message input and submission\n *\n * Features:\n * - Auto-growing textarea\n * - Submit on Enter (Shift+Enter for new line)\n * - Loading state management\n * - Full render prop support for custom UIs\n *\n * @example\n * ```tsx\n * <Chat.Input placeholder=\"Type your message...\" />\n * ```\n *\n * @example Custom UI with render prop\n * ```tsx\n * <Chat.Input>\n *   {({ value, onChange, onSubmit, isLoading }) => (\n *     <div>\n *       <textarea value={value} onChange={(e) => onChange(e.target.value)} />\n *       <button onClick={onSubmit} disabled={isLoading}>Send</button>\n *     </div>\n *   )}\n * </Chat.Input>\n * ```\n */\nexport function ChatInput({\n  children,\n  className,\n  placeholder = 'Type a message...',\n  disabled: disabledProp,\n  submitOnEnter = true,\n}: ChatInputProps) {\n  const { sendMessage, isLoading } = useChatContext()\n  const [value, setValue] = useState('')\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)\n\n  const disabled = disabledProp || isLoading\n\n  const handleSubmit = () => {\n    if (!value.trim() || disabled) return\n    void sendMessage(value)\n    setValue('')\n  }\n\n  const renderProps: ChatInputRenderProps = {\n    value,\n    onChange: setValue,\n    onSubmit: handleSubmit,\n    isLoading,\n    disabled,\n    inputRef,\n  }\n\n  // Render prop pattern\n  if (children) {\n    return <>{children(renderProps)}</>\n  }\n\n  // Default implementation\n  return (\n    <div\n      className={className}\n      data-chat-input\n      style={{\n        display: 'flex',\n        gap: '0.75rem',\n        alignItems: 'center',\n        width: '100%',\n      }}\n    >\n      <input\n        ref={inputRef as React.RefObject<HTMLInputElement>}\n        type=\"text\"\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        onKeyDown={(e) => {\n          if (submitOnEnter && e.key === 'Enter') {\n            e.preventDefault()\n            handleSubmit()\n          }\n        }}\n        placeholder={placeholder}\n        disabled={disabled}\n        data-chat-textarea\n        style={{\n          flex: 1,\n          padding: '0.75rem 1rem',\n          fontSize: '0.875rem',\n          border: '1px solid rgba(255, 255, 255, 0.1)',\n          borderRadius: '0.75rem',\n          backgroundColor: 'rgba(31, 41, 55, 0.5)',\n          color: 'white',\n          outline: 'none',\n          transition: 'all 0.2s',\n        }}\n        onFocus={(e) => {\n          e.target.style.borderColor = 'rgba(249, 115, 22, 0.4)'\n          e.target.style.boxShadow = '0 0 0 2px rgba(249, 115, 22, 0.2)'\n        }}\n        onBlur={(e) => {\n          e.target.style.borderColor = 'rgba(255, 255, 255, 0.1)'\n          e.target.style.boxShadow = 'none'\n        }}\n      />\n      <button\n        onClick={handleSubmit}\n        disabled={disabled || !value.trim()}\n        data-chat-submit\n        style={{\n          padding: '0.75rem 1.5rem',\n          fontSize: '0.875rem',\n          fontWeight: 500,\n          color: 'white',\n          backgroundColor:\n            disabled || !value.trim()\n              ? 'rgba(107, 114, 128, 0.5)'\n              : 'rgb(249, 115, 22)',\n          border: 'none',\n          borderRadius: '0.75rem',\n          cursor: disabled || !value.trim() ? 'not-allowed' : 'pointer',\n          transition: 'all 0.2s',\n          whiteSpace: 'nowrap',\n        }}\n        onMouseEnter={(e) => {\n          if (!disabled && value.trim()) {\n            ;(e.target as HTMLButtonElement).style.backgroundColor =\n              'rgb(234, 88, 12)'\n          }\n        }}\n        onMouseLeave={(e) => {\n          if (!disabled && value.trim()) {\n            ;(e.target as HTMLButtonElement).style.backgroundColor =\n              'rgb(249, 115, 22)'\n          }\n        }}\n      >\n        {isLoading ? 'Sending...' : 'Send'}\n      </button>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,SAAgB,UAAU,EACxB,UACA,WACA,cAAc,qBACd,UAAU,cACV,gBAAgB,QACC;CACjB,MAAM,EAAE,aAAa,cAAc,eAAe;CAClD,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CACrC,MAAM,WAAW,OAA+C,IAAI;CAEpE,MAAM,WAAW,gBAAgB;CAEjC,MAAM,qBAAqB;EACzB,IAAI,CAAC,MAAM,KAAK,KAAK,UAAU;EAC/B,YAAiB,KAAK;EACtB,SAAS,EAAE;CACb;CAEA,MAAM,cAAoC;EACxC;EACA,UAAU;EACV,UAAU;EACV;EACA;EACA;CACF;CAGA,IAAI,UACF,OAAO,oBAAA,UAAA,EAAA,UAAG,SAAS,WAAW,EAAI,CAAA;CAIpC,OACE,qBAAC,OAAD;EACa;EACX,mBAAA;EACA,OAAO;GACL,SAAS;GACT,KAAK;GACL,YAAY;GACZ,OAAO;EACT;EARF,UAAA,CAUE,oBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACE;GACP,WAAW,MAAM,SAAS,EAAE,OAAO,KAAK;GACxC,YAAY,MAAM;IAChB,IAAI,iBAAiB,EAAE,QAAQ,SAAS;KACtC,EAAE,eAAe;KACjB,aAAa;IACf;GACF;GACa;GACH;GACV,sBAAA;GACA,OAAO;IACL,MAAM;IACN,SAAS;IACT,UAAU;IACV,QAAQ;IACR,cAAc;IACd,iBAAiB;IACjB,OAAO;IACP,SAAS;IACT,YAAY;GACd;GACA,UAAU,MAAM;IACd,EAAE,OAAO,MAAM,cAAc;IAC7B,EAAE,OAAO,MAAM,YAAY;GAC7B;GACA,SAAS,MAAM;IACb,EAAE,OAAO,MAAM,cAAc;IAC7B,EAAE,OAAO,MAAM,YAAY;GAC7B;EACD,CAAA,GACD,oBAAC,UAAD;GACE,SAAS;GACT,UAAU,YAAY,CAAC,MAAM,KAAK;GAClC,oBAAA;GACA,OAAO;IACL,SAAS;IACT,UAAU;IACV,YAAY;IACZ,OAAO;IACP,iBACE,YAAY,CAAC,MAAM,KAAK,IACpB,6BACA;IACN,QAAQ;IACR,cAAc;IACd,QAAQ,YAAY,CAAC,MAAM,KAAK,IAAI,gBAAgB;IACpD,YAAY;IACZ,YAAY;GACd;GACA,eAAe,MAAM;IACnB,IAAI,CAAC,YAAY,MAAM,KAAK,GACzB,EAAG,OAA6B,MAAM,kBACrC;GAEN;GACA,eAAe,MAAM;IACnB,IAAI,CAAC,YAAY,MAAM,KAAK,GACzB,EAAG,OAA6B,MAAM,kBACrC;GAEN;GAEC,UAAA,YAAY,eAAe;EACtB,CAAA,CACL;;AAET"}

package/dist/esm/chat-ui/chat-message.d.ts

@@ -0,0 +1,91 @@
+import { ReactNode } from 'react';
+import { UIMessage } from '../types.js';
+export interface ToolCallRenderProps {
+    id: string;
+    name: string;
+    arguments: string;
+    state: string;
+    approval?: any;
+    output?: any;
+}
+export interface ChatMessageProps {
+    /** The message to render */
+    message: UIMessage;
+    /** Base CSS class name */
+    className?: string;
+    /** Additional className for user messages */
+    userClassName?: string;
+    /** Additional className for assistant messages */
+    assistantClassName?: string;
+    /** Custom renderer for text parts */
+    textPartRenderer?: (props: {
+        content: string;
+    }) => ReactNode;
+    /** Custom renderer for thinking parts */
+    thinkingPartRenderer?: (props: {
+        content: string;
+        isComplete?: boolean;
+    }) => ReactNode;
+    /** Named tool renderers - use the tool name as the key */
+    toolsRenderer?: Record<string, (props: ToolCallRenderProps) => ReactNode>;
+    /** Default tool renderer when tool name not found in toolsRenderer */
+    defaultToolRenderer?: (props: ToolCallRenderProps) => ReactNode;
+    /** Custom renderer for tool result parts */
+    toolResultRenderer?: (props: {
+        toolCallId: string;
+        content: string;
+        state: string;
+    }) => ReactNode;
+}
+/**
+ * @deprecated Use `createChatUI()` Message instead. Deprecated in 0.9.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}
+ *   className="flex"
+ *   userClassName="justify-end"
+ *   assistantClassName="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 declare function ChatMessage({ message, className, userClassName, assistantClassName, textPartRenderer, thinkingPartRenderer, toolsRenderer, defaultToolRenderer, toolResultRenderer, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/chat-ui/chat-message.js

@@ -0,0 +1,157 @@
+import { ThinkingPart } from "./thinking-part.js";
+import { toolResultContentToString } from "./tool-result-content.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat-ui/chat-message.tsx
+/**
+* @deprecated Use `createChatUI()` Message instead. Deprecated in 0.9.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}
+*   className="flex"
+*   userClassName="justify-end"
+*   assistantClassName="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}
+* />
+* ```
+*/
+function ChatMessage({ message, className = "", userClassName = "", assistantClassName = "", textPartRenderer, thinkingPartRenderer, toolsRenderer, defaultToolRenderer, toolResultRenderer }) {
+	const combinedClassName = [className, message.role === "user" ? userClassName : assistantClassName].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx("div", {
+		className: combinedClassName || void 0,
+		"data-message-id": message.id,
+		"data-message-role": message.role,
+		"data-message-created": message.createdAt?.toISOString(),
+		children: message.parts.map((part, index) => {
+			const isThinkingComplete = part.type === "thinking" && message.parts.slice(index + 1).some((p) => p.type === "text");
+			return /* @__PURE__ */ jsx(MessagePart, {
+				part,
+				isThinkingComplete,
+				textPartRenderer,
+				thinkingPartRenderer,
+				toolsRenderer,
+				defaultToolRenderer,
+				toolResultRenderer
+			}, `${message.id}-part-${index}`);
+		})
+	});
+}
+function MessagePart({ part, isThinkingComplete, textPartRenderer, thinkingPartRenderer, toolsRenderer, defaultToolRenderer, toolResultRenderer }) {
+	if (part.type === "text") {
+		if (textPartRenderer) return /* @__PURE__ */ jsx(Fragment, { children: textPartRenderer({ content: part.content }) });
+		return /* @__PURE__ */ jsx("div", {
+			"data-part-type": "text",
+			"data-part-content": true,
+			children: part.content
+		});
+	}
+	if (part.type === "thinking") {
+		if (thinkingPartRenderer) return /* @__PURE__ */ jsx(Fragment, { children: thinkingPartRenderer({
+			content: part.content,
+			isComplete: isThinkingComplete
+		}) });
+		return /* @__PURE__ */ jsx(ThinkingPart, {
+			content: part.content,
+			isComplete: isThinkingComplete
+		});
+	}
+	if (part.type === "tool-call") {
+		const toolProps = {
+			id: part.id,
+			name: part.name,
+			arguments: part.arguments,
+			state: part.state,
+			approval: part.approval,
+			output: part.output
+		};
+		if (toolsRenderer?.[part.name]) return /* @__PURE__ */ jsx(Fragment, { children: toolsRenderer[part.name]?.(toolProps) });
+		if (defaultToolRenderer) return /* @__PURE__ */ jsx(Fragment, { children: defaultToolRenderer(toolProps) });
+		return /* @__PURE__ */ jsxs("div", {
+			"data-part-type": "tool-call",
+			"data-tool-name": part.name,
+			"data-tool-state": part.state,
+			"data-tool-id": part.id,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					"data-tool-header": true,
+					children: [/* @__PURE__ */ jsx("strong", { children: part.name }), /* @__PURE__ */ jsx("span", {
+						"data-tool-state-badge": true,
+						children: part.state
+					})]
+				}),
+				part.arguments && /* @__PURE__ */ jsx("div", {
+					"data-tool-arguments": true,
+					children: /* @__PURE__ */ jsx("pre", { children: part.arguments })
+				}),
+				part.approval && /* @__PURE__ */ jsx("div", {
+					"data-tool-approval": true,
+					children: part.approval.approved !== void 0 ? part.approval.approved ? "✓ Approved" : "✗ Denied" : "⏳ Awaiting approval..."
+				}),
+				part.output && /* @__PURE__ */ jsx("div", {
+					"data-tool-output": true,
+					children: /* @__PURE__ */ jsx("pre", { children: JSON.stringify(part.output, null, 2) })
+				})
+			]
+		});
+	}
+	if (part.type === "tool-result") {
+		const toolResultContent = toolResultContentToString(part.content);
+		if (toolResultRenderer) return /* @__PURE__ */ jsx(Fragment, { children: toolResultRenderer({
+			toolCallId: part.toolCallId,
+			content: toolResultContent,
+			state: part.state
+		}) });
+		return /* @__PURE__ */ jsx("div", {
+			"data-part-type": "tool-result",
+			"data-tool-call-id": part.toolCallId,
+			"data-tool-result-state": part.state,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-tool-result-content": true,
+				children: toolResultContent
+			})
+		});
+	}
+	return null;
+}
+//#endregion
+export { ChatMessage };
+
+//# sourceMappingURL=chat-message.js.map

package/dist/esm/chat-ui/chat-message.js.map

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

package/dist/esm/chat-ui/chat-messages.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { UIMessage } from '../types.js';
+/** @deprecated Use `createChatUI()` Messages instead. Deprecated in 0.9.0. Removed in 1.0.0. */
+export interface ChatMessagesProps {
+    /** Custom render function for each message */
+    children?: (message: UIMessage, index: number) => ReactNode;
+    /** CSS class name */
+    className?: string;
+    /** Element to show when there are no messages */
+    emptyState?: ReactNode;
+    /** Element to show while loading the first message */
+    loadingState?: ReactNode;
+    /** Custom error renderer */
+    errorState?: (props: {
+        error: Error;
+        reload: () => Promise<void>;
+    }) => ReactNode;
+    /** Auto-scroll to bottom on new messages */
+    autoScroll?: boolean;
+}
+/**
+ * @deprecated Use `createChatUI()` Messages instead. Deprecated in 0.9.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 declare function ChatMessages({ children, className, emptyState, loadingState, errorState, autoScroll, }: ChatMessagesProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/chat-ui/chat-messages.js

@@ -0,0 +1,44 @@
+import { useChatContext } from "./chat.js";
+import { ChatMessage } from "./chat-message.js";
+import { useEffect, useRef } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/chat-ui/chat-messages.tsx
+/**
+* @deprecated Use `createChatUI()` Messages instead. Deprecated in 0.9.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>
+* ```
+*/
+function ChatMessages({ children, className, emptyState, loadingState, errorState, autoScroll = true }) {
+	const { messages, isLoading, error, reload } = useChatContext();
+	const containerRef = useRef(null);
+	useEffect(() => {
+		if (autoScroll && containerRef.current) containerRef.current.scrollTop = containerRef.current.scrollHeight;
+	}, [messages, autoScroll]);
+	if (error && errorState) return /* @__PURE__ */ jsx(Fragment, { children: errorState({
+		error,
+		reload
+	}) });
+	if (isLoading && messages.length === 0 && loadingState) return /* @__PURE__ */ jsx(Fragment, { children: loadingState });
+	if (messages.length === 0 && emptyState) return /* @__PURE__ */ jsx(Fragment, { children: emptyState });
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className,
+		"data-chat-messages": true,
+		"data-message-count": messages.length,
+		children: messages.map((message, index) => children ? /* @__PURE__ */ jsx("div", {
+			"data-message-id": message.id,
+			children: children(message, index)
+		}, message.id) : /* @__PURE__ */ jsx(ChatMessage, { message }, message.id))
+	});
+}
+//#endregion
+export { ChatMessages };
+
+//# sourceMappingURL=chat-messages.js.map

package/dist/esm/chat-ui/chat-messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-messages.js","names":[],"sources":["../../../src/chat-ui/chat-messages.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { useChatContext } from './chat'\nimport { ChatMessage } from './chat-message'\nimport type { ReactNode } from 'react'\nimport type { UIMessage } from '../types'\n\n/** @deprecated Use `createChatUI()` Messages instead. Deprecated in 0.9.0. Removed in 1.0.0. */\nexport interface ChatMessagesProps {\n  /** Custom render function for each message */\n  children?: (message: UIMessage, index: number) => ReactNode\n  /** CSS class name */\n  className?: string\n  /** Element to show when there are no messages */\n  emptyState?: ReactNode\n  /** Element to show while loading the first message */\n  loadingState?: ReactNode\n  /** Custom error renderer */\n  errorState?: (props: {\n    error: Error\n    reload: () => Promise<void>\n  }) => ReactNode\n  /** Auto-scroll to bottom on new messages */\n  autoScroll?: boolean\n}\n\n/**\n * @deprecated Use `createChatUI()` Messages instead. Deprecated in 0.9.0. Removed in 1.0.0.\n *\n * Messages container - renders all messages in the conversation\n *\n * @example\n * ```tsx\n * <Chat.Messages>\n *   {(message) => <Chat.Message message={message} />}\n * </Chat.Messages>\n * ```\n */\nexport function ChatMessages({\n  children,\n  className,\n  emptyState,\n  loadingState,\n  errorState,\n  autoScroll = true,\n}: ChatMessagesProps) {\n  const { messages, isLoading, error, reload } = useChatContext()\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  // Auto-scroll to bottom on new messages\n  useEffect(() => {\n    if (autoScroll && containerRef.current) {\n      containerRef.current.scrollTop = containerRef.current.scrollHeight\n    }\n  }, [messages, autoScroll])\n\n  // Error state\n  if (error && errorState) {\n    return <>{errorState({ error, reload })}</>\n  }\n\n  // Loading state (only show if no messages yet)\n  if (isLoading && messages.length === 0 && loadingState) {\n    return <>{loadingState}</>\n  }\n\n  // Empty state\n  if (messages.length === 0 && emptyState) {\n    return <>{emptyState}</>\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      data-chat-messages\n      data-message-count={messages.length}\n    >\n      {messages.map((message, index) =>\n        children ? (\n          <div key={message.id} data-message-id={message.id}>\n            {children(message, index)}\n          </div>\n        ) : (\n          <ChatMessage key={message.id} message={message} />\n        ),\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqCA,SAAgB,aAAa,EAC3B,UACA,WACA,YACA,cACA,YACA,aAAa,QACO;CACpB,MAAM,EAAE,UAAU,WAAW,OAAO,WAAW,eAAe;CAC9D,MAAM,eAAe,OAAuB,IAAI;CAGhD,gBAAgB;EACd,IAAI,cAAc,aAAa,SAC7B,aAAa,QAAQ,YAAY,aAAa,QAAQ;CAE1D,GAAG,CAAC,UAAU,UAAU,CAAC;CAGzB,IAAI,SAAS,YACX,OAAO,oBAAA,UAAA,EAAA,UAAG,WAAW;EAAE;EAAO;CAAO,CAAC,EAAI,CAAA;CAI5C,IAAI,aAAa,SAAS,WAAW,KAAK,cACxC,OAAO,oBAAA,UAAA,EAAA,UAAG,aAAe,CAAA;CAI3B,IAAI,SAAS,WAAW,KAAK,YAC3B,OAAO,oBAAA,UAAA,EAAA,UAAG,WAAa,CAAA;CAGzB,OACE,oBAAC,OAAD;EACE,KAAK;EACM;EACX,sBAAA;EACA,sBAAoB,SAAS;EAE5B,UAAA,SAAS,KAAK,SAAS,UACtB,WACE,oBAAC,OAAD;GAAsB,mBAAiB,QAAQ;GAC5C,UAAA,SAAS,SAAS,KAAK;EACrB,GAFK,QAAQ,EAEb,IAEL,oBAAC,aAAD,EAAuC,QAAU,GAA/B,QAAQ,EAAuB,CAErD;CACG,CAAA;AAET"}

package/dist/esm/chat-ui/chat.d.ts

@@ -0,0 +1,53 @@
+import { ConnectionAdapter } from '@tanstack/ai-client';
+import { ReactNode } from 'react';
+import { UIMessage, UseChatReturn } from '../types.js';
+/**
+ * Hook to access chat context
+ * @throws Error if used outside of Chat component
+ */
+/** @deprecated Use `createChatUI().useChatContext()` instead. Deprecated in 0.9.0. Removed in 1.0.0. */
+export declare function useChatContext(): UseChatReturn;
+/** @deprecated Use `createChatUI()` Chat/Provider instead. Deprecated in 0.9.0. Removed in 1.0.0. */
+export interface ChatProps {
+    /** Child components (Chat.Messages, Chat.Input, etc.) */
+    children: ReactNode;
+    /** CSS class name for the root element */
+    className?: 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;
+    /** Custom tool components registry */
+    tools?: Record<string, React.ComponentType<{
+        input: any;
+        output?: any;
+    }>>;
+}
+/**
+ * @deprecated Since 0.9.0. Use `createChatHook()` from `@tanstack/ai-react/ui` instead.
+ * See https://tanstack.com/ai/latest/docs/ui/react
+ * 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 declare function Chat({ children, className, connection, initialMessages, id, body, onResponse, onChunk, onFinish, onError, }: ChatProps): import("react/jsx-runtime").JSX.Element;