@tanstack/ai-react 0.22.4 → 0.23.0

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

@@ -0,0 +1,294 @@
+import { defaultChatUIContexts } from "./create-ui-contexts.js";
+import { createContext, memo, useContext } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { automaticPartsForMessage, collectInlineToolNames, resolveInterruptComponent, selectChatUI, selectMessageUI } from "@tanstack/ai-client/ui";
+//#region src/chat-ui/create-ui.tsx
+function createWarnOnce() {
+	const seen = /* @__PURE__ */ new Set();
+	return (key, message) => {
+		if (process.env.NODE_ENV === "production") return;
+		if (seen.has(key)) return;
+		seen.add(key);
+		console.warn(message);
+	};
+}
+function readMessages(chat) {
+	return chat.messages;
+}
+function readInterrupts(chat) {
+	return chat.interrupts ?? [];
+}
+function queueItemEqual(prev, next) {
+	return prev.item.id === next.item.id && prev.item.createdAt === next.item.createdAt && prev.item.content === next.item.content && prev.cancelQueued === next.cancelQueued;
+}
+function selectedPartPropsEqual(prev, next) {
+	if (prev.selected.key !== next.selected.key) return false;
+	if (prev.selected.part !== next.selected.part) return false;
+	if (prev.selected.key === "toolCall" && next.selected.key === "toolCall") return prev.selected.result === next.selected.result && prev.selected.interrupt === next.selected.interrupt;
+	if (prev.selected.key === "toolResult" && next.selected.key === "toolResult") return prev.selected.matched === next.selected.matched;
+	return true;
+}
+function isSelectedPart(value) {
+	return "key" in value && "part" in value;
+}
+function bindMap(map, bind) {
+	const out = {};
+	for (const [key, component] of Object.entries(map ?? {})) if (component) out[key] = bind(component);
+	return out;
+}
+/**
+* Bind chat options and UI widgets once at module scope. This matches Form
+* `createFormHook` and Table `createTableHook`: widgets register here, mix
+* onto Part / Interrupt / the UI kit, and automatic dispatch still walks the
+* message list.
+*
+* `chatOptions` is type-only at runtime. Pass optional `chatContext`,
+* `partContext`, and `interruptContext` from {@link createChatHookContexts}
+* when widgets live in other files or when nested chats need isolation.
+*/
+function createChatUI(options, config) {
+	const { context: contextOption, components, partsComponents: parts, toolsComponents: tools, interruptsComponents: interrupts } = config;
+	const { layout: Layout, message: MessageComponent, input: InputComponent, queue: QueueItemComponent } = components;
+	const { chatContext: chatContextOption, partContext: partContextOption, interruptContext: interruptContextOption } = contextOption ?? {};
+	const warn = createWarnOnce();
+	const ChatContext = chatContextOption ?? defaultChatUIContexts.chatContext;
+	const PartContext = partContextOption ?? defaultChatUIContexts.partContext;
+	const InterruptContext = interruptContextOption ?? defaultChatUIContexts.interruptContext;
+	const inlineToolNames = collectInlineToolNames(interrupts?.tools, Object.keys(tools ?? {}));
+	function useChatContext() {
+		const chat = useContext(ChatContext);
+		if (!chat) throw new Error("`useChatContext` must be used within `UI.Provider` or `UI.Chat`.");
+		return chat;
+	}
+	function usePartContext() {
+		const selected = useContext(PartContext);
+		if (!selected) throw new Error("`usePartContext` must be used within `UI.Part` or an automatic part.");
+		return selected;
+	}
+	function useInterruptContext() {
+		const interrupt = useContext(InterruptContext);
+		if (!interrupt) throw new Error("`useInterruptContext` must be used within `UI.Interrupt`.");
+		return interrupt;
+	}
+	function bindPart(Component) {
+		return function BoundPart() {
+			const selected = usePartContext();
+			return /* @__PURE__ */ jsx(Component, { part: selected.part });
+		};
+	}
+	function bindTool(Component) {
+		return function BoundTool() {
+			const selected = usePartContext();
+			if (selected.key !== "toolCall") return null;
+			return /* @__PURE__ */ jsx(Component, {
+				part: selected.part,
+				result: selected.result,
+				interrupt: selected.interrupt
+			});
+		};
+	}
+	function bindInterrupt(Component) {
+		return function BoundInterrupt() {
+			const interrupt = useInterruptContext();
+			return /* @__PURE__ */ jsx(Component, { interrupt });
+		};
+	}
+	const partMixins = bindMap(parts, bindPart);
+	const toolMixins = bindMap(tools, bindTool);
+	const interruptMixins = {
+		...bindMap(interrupts?.generic, bindInterrupt),
+		...bindMap(interrupts?.tools, bindInterrupt)
+	};
+	function mixPart(selected) {
+		return Object.assign({}, selected, partMixins, toolMixins, { Render: BoundRender });
+	}
+	function mixInterrupt(interrupt) {
+		return Object.assign({}, interrupt, interruptMixins, { Render: BoundInterruptRender });
+	}
+	function Provider({ chat, children }) {
+		return /* @__PURE__ */ jsx(ChatContext.Provider, {
+			value: chat,
+			children
+		});
+	}
+	function MissingInput() {
+		warn("input", "[tanstack-ai-ui] Rendered <Input /> but no `input` component is registered.");
+		return null;
+	}
+	const LayoutSlots = {
+		Messages,
+		Interrupts,
+		Queue,
+		Input: InputComponent ?? MissingInput
+	};
+	function Chat({ chat }) {
+		return /* @__PURE__ */ jsx(Provider, {
+			chat,
+			children: /* @__PURE__ */ jsx(Layout, { ...LayoutSlots })
+		});
+	}
+	function Queue() {
+		const chat = useChatContext();
+		if (!QueueItemComponent) return null;
+		const items = chat.queue;
+		return /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => /* @__PURE__ */ jsx(QueueItemView, {
+			cancelQueued: chat.cancelQueued,
+			item
+		}, item.id)) });
+	}
+	const QueueItemView = memo(function QueueItemView({ item, cancelQueued }) {
+		if (!QueueItemComponent) return null;
+		return /* @__PURE__ */ jsx(QueueItemComponent, { item: {
+			...item,
+			cancelQueued: () => {
+				cancelQueued(item.id);
+			}
+		} });
+	}, queueItemEqual);
+	function Messages({ children } = {}) {
+		const chat = useChatContext();
+		const messages = readMessages(chat);
+		const interrupts = readInterrupts(chat);
+		if (children) return /* @__PURE__ */ jsx(Fragment, { children: children(messages) });
+		return /* @__PURE__ */ jsx(Fragment, { children: messages.map((message) => /* @__PURE__ */ jsx(MessageView, {
+			inlineToolNames,
+			interrupts,
+			message
+		}, message.id)) });
+	}
+	const MessageRenderContext = createContext(null);
+	function Parts() {
+		const scope = useContext(MessageRenderContext);
+		if (!scope) throw new Error("`Parts` must be rendered by a `message` component.");
+		return /* @__PURE__ */ jsx(AutomaticParts, {
+			inlineToolNames: scope.inlineToolNames,
+			interrupts: scope.interrupts,
+			message: scope.message
+		});
+	}
+	const MessageView = memo(function MessageView({ message, interrupts, inlineToolNames: names, children }) {
+		const selected = selectMessageUI(message, {
+			interrupts,
+			inlineToolNames: names
+		});
+		if (children) return /* @__PURE__ */ jsx(Fragment, { children: children(selected.parts) });
+		return /* @__PURE__ */ jsx(MessageRenderContext.Provider, {
+			value: {
+				message,
+				interrupts,
+				inlineToolNames: names
+			},
+			children: /* @__PURE__ */ jsx(MessageComponent, {
+				message,
+				Parts
+			})
+		});
+	});
+	function Message({ message, children }) {
+		const chat = useChatContext();
+		return /* @__PURE__ */ jsx(MessageView, {
+			children,
+			inlineToolNames,
+			interrupts: readInterrupts(chat),
+			message
+		});
+	}
+	const AutomaticParts = memo(function AutomaticParts({ message, interrupts, inlineToolNames: names }) {
+		const selected = selectMessageUI(message, {
+			interrupts,
+			inlineToolNames: names
+		});
+		return /* @__PURE__ */ jsx(Fragment, { children: automaticPartsForMessage(selected).map((part, index) => /* @__PURE__ */ jsx(SelectedPartView, { selected: part }, `${message.id}-${index}`)) });
+	});
+	const SelectedPartInner = memo(function SelectedPartInner({ selected }) {
+		if (selected.key === "toolCall") {
+			const name = selected.part.name;
+			const Tool = tools?.[name];
+			if (!Tool) {
+				warn(`tool:${name}`, `[tanstack-ai-ui] Missing tools.${name} component`);
+				return null;
+			}
+			return /* @__PURE__ */ jsx(Tool, {
+				part: selected.part,
+				result: selected.result,
+				interrupt: selected.interrupt
+			});
+		}
+		const PartComponent = parts[selected.key] ?? parts.fallback;
+		if (!PartComponent) {
+			warn(`part:${selected.key}`, `[tanstack-ai-ui] Missing parts.${selected.key} component`);
+			return null;
+		}
+		return /* @__PURE__ */ jsx(PartComponent, { part: selected.part });
+	}, selectedPartPropsEqual);
+	const SelectedPartView = memo(function SelectedPartView({ selected }) {
+		return /* @__PURE__ */ jsx(PartContext.Provider, {
+			value: selected,
+			children: /* @__PURE__ */ jsx(SelectedPartInner, { selected })
+		});
+	});
+	function BoundRender() {
+		const selected = usePartContext();
+		return /* @__PURE__ */ jsx(SelectedPartInner, { selected });
+	}
+	function Part({ part, children }) {
+		const chat = useChatContext();
+		const selected = isSelectedPart(part) ? part : selectMessageUI({
+			id: "part",
+			role: "assistant",
+			parts: [part]
+		}, {
+			interrupts: readInterrupts(chat),
+			inlineToolNames: []
+		}).parts[0];
+		if (!selected) return null;
+		return /* @__PURE__ */ jsx(PartContext.Provider, {
+			value: selected,
+			children: children ? children(mixPart(selected)) : /* @__PURE__ */ jsx(SelectedPartInner, { selected })
+		});
+	}
+	function Interrupts({ children } = {}) {
+		const chat = useChatContext();
+		const selected = selectChatUI({
+			messages: readMessages(chat),
+			interrupts: readInterrupts(chat),
+			inlineToolNames
+		});
+		if (children) return /* @__PURE__ */ jsx(Fragment, { children: children(selected.interrupts) });
+		return /* @__PURE__ */ jsx(Fragment, { children: selected.interrupts.map((interrupt) => /* @__PURE__ */ jsx(Interrupt, { interrupt }, interrupt.id)) });
+	}
+	const InterruptInner = memo(function InterruptInner({ interrupt }) {
+		const Component = resolveInterruptComponent(interrupt, interrupts);
+		if (!Component) {
+			warn(`interrupt:${interrupt.id}`, `[tanstack-ai-ui] Missing interrupt component for ${interrupt.kind}`);
+			return null;
+		}
+		return /* @__PURE__ */ jsx(Component, { interrupt });
+	});
+	function BoundInterruptRender() {
+		const interrupt = useInterruptContext();
+		return /* @__PURE__ */ jsx(InterruptInner, { interrupt });
+	}
+	const Interrupt = memo(function Interrupt({ interrupt, children }) {
+		return /* @__PURE__ */ jsx(InterruptContext.Provider, {
+			value: interrupt,
+			children: children ? children(mixInterrupt(interrupt)) : /* @__PURE__ */ jsx(InterruptInner, { interrupt })
+		});
+	});
+	return {
+		Chat,
+		Provider,
+		Messages,
+		Message,
+		Part,
+		Interrupts,
+		Interrupt,
+		Queue,
+		useChatContext,
+		Input: InputComponent
+	};
+}
+//#endregion
+export { createChatUI };
+
+//# sourceMappingURL=create-ui.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"create-ui.js","names":[],"sources":["../../../src/chat-ui/create-ui.tsx"],"sourcesContent":["import { createContext, memo, useContext } from 'react'\nimport type { ComponentProps, ComponentType, Context, ReactNode } from 'react'\nimport {\n  automaticPartsForMessage,\n  collectInlineToolNames,\n  resolveInterruptComponent,\n  selectChatUI,\n  selectMessageUI,\n} from '@tanstack/ai-client/ui'\nimport type {\n  ChatUIData,\n  ChatUIHasNamedInterrupts,\n  ChatUIHasNamedTools,\n  ChatUIInterrupt,\n  ChatUIInterruptName,\n  ChatUIInterruptOf,\n  ChatUIInterruptsOf,\n  ChatUIMessages,\n  ChatUINamedInterruptId,\n  ChatUIPartKey,\n  ChatUIPartOf,\n  ChatUISchemaOf,\n  ChatUISelectedPart,\n  ChatUISelectedPartOf,\n  ChatUIToolApproval,\n  ChatUIToolName,\n  ChatUIToolsOf,\n} from '@tanstack/ai-client/ui'\nimport type {\n  MessagePart,\n  QueuedMessage,\n  ToolCallPart,\n  ToolResultPart,\n  UIMessage,\n} from '@tanstack/ai-client'\nimport type { UseChatReturn } from '../types'\nimport { defaultChatUIContexts } from './create-ui-contexts'\nimport type { ChatUIContexts } from './create-ui-contexts'\n\nexport type ChatUIHost<TOptions = unknown> = UseChatReturn<\n  ChatUIToolsOf<TOptions>,\n  ChatUISchemaOf<TOptions>,\n  ChatUIInterruptsOf<TOptions>\n>\n\nexport type ChatUIQueueItem = QueuedMessage & {\n  cancelQueued: () => void\n}\n\nexport type LayoutProps<\n  TOptions,\n  TInput extends ComponentType<any> | undefined = ComponentType<\n    InputProps<TOptions>\n  >,\n> = {\n  Messages: ComponentType\n  Interrupts: ComponentType\n  Queue: ComponentType\n  readonly __ui?: TOptions\n} & (TInput extends ComponentType<any> ? { Input: ComponentType } : {})\n\nexport type MessageProps<TOptions> = {\n  message: UIMessage<ChatUIToolsOf<TOptions>, ChatUIData<TOptions>>\n  Parts: ComponentType\n}\n\nexport type InputProps<TOptions> = {\n  readonly __ui?: TOptions\n}\n\nexport type QueueProps<TOptions> = {\n  item: ChatUIQueueItem\n  readonly __ui?: TOptions\n}\n\nexport type PartProps<TOptions, TKey extends ChatUIPartKey = ChatUIPartKey> = {\n  part: ChatUIPartOf<TOptions, TKey>\n}\n\nexport type ToolProps<\n  TOptions,\n  TName extends ChatUIToolName<TOptions> = ChatUIToolName<TOptions>,\n> = {\n  part: Extract<ToolCallPart<ChatUIToolsOf<TOptions>>, { name: TName }>\n  result?: ToolResultPart\n  interrupt?: ChatUIToolApproval<TOptions, TName>\n}\n\nexport type InterruptProps<\n  TOptions,\n  TName extends ChatUIInterruptName<TOptions> = never,\n> = {\n  interrupt: ChatUIInterruptOf<TOptions, TName>\n  readonly __ui?: TOptions\n}\n\ntype GenericInterruptComponents<TOptions> =\n  ChatUIHasNamedInterrupts<TOptions> extends true\n    ? {\n        [K in ChatUINamedInterruptId<TOptions>]: ComponentType<\n          InterruptProps<TOptions, K & ChatUIInterruptName<TOptions>>\n        >\n      } & {\n        fallback?: ComponentType<InterruptProps<TOptions>>\n      }\n    : {\n        fallback?: ComponentType<InterruptProps<TOptions>>\n      }\n\ntype ToolApprovalMap<TOptions> = {\n  [K in ChatUIToolName<TOptions>]?: ComponentType<\n    InterruptProps<TOptions, K & ChatUIInterruptName<TOptions>>\n  >\n}\n\n/** The chrome around the message list: `layout`, `message`, and `input`. */\nexport type ChatUIChromeComponents<\n  TOptions,\n  TInput extends ComponentType<InputProps<TOptions>> | undefined =\n    ComponentType<InputProps<TOptions>>,\n> = {\n  layout: ComponentType<LayoutProps<TOptions, TInput>>\n  message: ComponentType<MessageProps<TOptions>>\n  input?: TInput\n  queue?: ComponentType<QueueProps<TOptions>>\n}\n\nexport type ChatUIPartsComponents<TOptions> = {\n  [K in ChatUIPartKey]?: ComponentType<PartProps<TOptions, K>>\n} & {\n  fallback?: ComponentType<PartProps<TOptions>>\n}\n\nexport type ChatUIInterruptsComponents<TOptions> = {\n  tools?: ToolApprovalMap<TOptions>\n  generic: GenericInterruptComponents<TOptions>\n}\n\nexport type ChatUIComponents<\n  TOptions,\n  TInput extends ComponentType<InputProps<TOptions>> | undefined =\n    ComponentType<InputProps<TOptions>>,\n> = {\n  components: ChatUIChromeComponents<TOptions, TInput>\n  partsComponents: ChatUIPartsComponents<TOptions>\n} & (ChatUIHasNamedTools<TOptions> extends true\n  ? {\n      toolsComponents: {\n        [K in ChatUIToolName<TOptions>]: ComponentType<ToolProps<TOptions, K>>\n      }\n    }\n  : {\n      toolsComponents?: {\n        [K in ChatUIToolName<TOptions>]?: ComponentType<ToolProps<TOptions, K>>\n      }\n    }) &\n  (ChatUIHasNamedInterrupts<TOptions> extends true\n    ? { interruptsComponents: ChatUIInterruptsComponents<TOptions> }\n    : {\n        interruptsComponents?: {\n          tools?: ToolApprovalMap<TOptions>\n          generic?: GenericInterruptComponents<TOptions>\n        }\n      })\n\n/** Scoped contexts, for widgets in other files or nested chat trees. */\nexport type ChatUIContextConfig = {\n  chatContext?: ChatUIContexts['chatContext']\n  partContext?: ChatUIContexts['partContext']\n  interruptContext?: ChatUIContexts['interruptContext']\n}\n\nexport type ChatUIFactoryConfig<\n  TOptions,\n  TInput extends ComponentType<InputProps<TOptions>> | undefined =\n    ComponentType<InputProps<TOptions>>,\n> = ChatUIComponents<TOptions, TInput> & {\n  context?: ChatUIContextConfig\n}\n\ntype BoundWidget = ComponentType<Record<string, never>>\n\ntype PartMixins<TOptions> = {\n  [K in ChatUIPartKey]?: BoundWidget\n} & {\n  [K in ChatUIToolName<TOptions>]: BoundWidget\n} & {\n  Render: BoundWidget\n}\n\ntype InterruptMixins<TOptions> = {\n  [K in ChatUINamedInterruptId<TOptions>]: BoundWidget\n} & {\n  [K in ChatUIToolName<TOptions>]?: BoundWidget\n} & {\n  fallback?: BoundWidget\n  Render: BoundWidget\n}\n\nfunction createWarnOnce() {\n  const seen = new Set<string>()\n  return (key: string, message: string) => {\n    if (process.env.NODE_ENV === 'production') return\n    if (seen.has(key)) return\n    seen.add(key)\n    console.warn(message)\n  }\n}\n\nfunction readMessages<TOptions>(chat: ChatUIHost<TOptions>) {\n  return chat.messages as ChatUIMessages<TOptions>\n}\n\nfunction readInterrupts<TOptions>(chat: ChatUIHost<TOptions>) {\n  return chat.interrupts ?? []\n}\n\nfunction queueItemEqual(\n  prev: { item: QueuedMessage; cancelQueued: (id: string) => void },\n  next: { item: QueuedMessage; cancelQueued: (id: string) => void },\n) {\n  return (\n    prev.item.id === next.item.id &&\n    prev.item.createdAt === next.item.createdAt &&\n    prev.item.content === next.item.content &&\n    prev.cancelQueued === next.cancelQueued\n  )\n}\n\nfunction selectedPartPropsEqual(\n  prev: { selected: ChatUISelectedPart },\n  next: { selected: ChatUISelectedPart },\n) {\n  if (prev.selected.key !== next.selected.key) return false\n  if (prev.selected.part !== next.selected.part) return false\n  if (prev.selected.key === 'toolCall' && next.selected.key === 'toolCall') {\n    return (\n      prev.selected.result === next.selected.result &&\n      prev.selected.interrupt === next.selected.interrupt\n    )\n  }\n  if (\n    prev.selected.key === 'toolResult' &&\n    next.selected.key === 'toolResult'\n  ) {\n    return prev.selected.matched === next.selected.matched\n  }\n  return true\n}\n\nfunction isSelectedPart(\n  value: MessagePart | ChatUISelectedPart,\n): value is ChatUISelectedPart {\n  return 'key' in value && 'part' in value\n}\n\nfunction bindMap(\n  map: Record<string, ComponentType<any> | undefined> | undefined,\n  bind: (component: ComponentType<any>) => BoundWidget,\n) {\n  const out: Record<string, BoundWidget> = {}\n  for (const [key, component] of Object.entries(map ?? {})) {\n    if (component) out[key] = bind(component)\n  }\n  return out\n}\n\n/**\n * Bind chat options and UI widgets once at module scope. This matches Form\n * `createFormHook` and Table `createTableHook`: widgets register here, mix\n * onto Part / Interrupt / the UI kit, and automatic dispatch still walks the\n * message list.\n *\n * `chatOptions` is type-only at runtime. Pass optional `chatContext`,\n * `partContext`, and `interruptContext` from {@link createChatHookContexts}\n * when widgets live in other files or when nested chats need isolation.\n */\nexport function createChatUI<\n  const TOptions,\n  TInput extends ComponentType<any> | undefined =\n    | ComponentType<InputProps<NoInfer<TOptions>>>\n    | undefined,\n>(options: TOptions, config: ChatUIFactoryConfig<NoInfer<TOptions>, TInput>) {\n  void options\n  const {\n    context: contextOption,\n    components,\n    partsComponents: parts,\n    toolsComponents: tools,\n    interruptsComponents: interrupts,\n  } = config as ChatUIFactoryConfig<TOptions, TInput> & {\n    toolsComponents?: Record<string, ComponentType<any> | undefined>\n    interruptsComponents?: {\n      tools?: Record<string, ComponentType<any> | undefined>\n      generic?: Record<string, ComponentType<any> | undefined>\n    }\n  }\n  const {\n    layout: Layout,\n    message: MessageComponent,\n    input: InputComponent,\n    queue: QueueItemComponent,\n  } = components\n  const {\n    chatContext: chatContextOption,\n    partContext: partContextOption,\n    interruptContext: interruptContextOption,\n  } = contextOption ?? {}\n  const warn = createWarnOnce()\n  const ChatContext = (chatContextOption ??\n    defaultChatUIContexts.chatContext) as Context<ChatUIHost<TOptions> | null>\n  const PartContext = (partContextOption ??\n    defaultChatUIContexts.partContext) as Context<ChatUISelectedPart | null>\n  const InterruptContext = (interruptContextOption ??\n    defaultChatUIContexts.interruptContext) as Context<ChatUIInterrupt | null>\n  const inlineToolNames = collectInlineToolNames(\n    interrupts?.tools as Record<string, unknown> | undefined,\n    Object.keys(tools ?? {}),\n  )\n\n  function useChatContext() {\n    const chat = useContext(ChatContext)\n    if (!chat) {\n      throw new Error(\n        '`useChatContext` must be used within `UI.Provider` or `UI.Chat`.',\n      )\n    }\n    return chat\n  }\n\n  function usePartContext<TKey extends ChatUIPartKey = ChatUIPartKey>() {\n    const selected = useContext(PartContext)\n    if (!selected) {\n      throw new Error(\n        '`usePartContext` must be used within `UI.Part` or an automatic part.',\n      )\n    }\n    return selected as ChatUISelectedPartOf<TOptions, TKey>\n  }\n\n  function useInterruptContext<\n    TName extends ChatUIInterruptName<TOptions> = ChatUIInterruptName<TOptions>,\n  >() {\n    const interrupt = useContext(InterruptContext)\n    if (!interrupt) {\n      throw new Error(\n        '`useInterruptContext` must be used within `UI.Interrupt`.',\n      )\n    }\n    return interrupt as ChatUIInterruptOf<TOptions, TName>\n  }\n\n  function bindPart(Component: ComponentType<PartProps<TOptions>>) {\n    return function BoundPart() {\n      const selected = usePartContext()\n      return <Component part={selected.part as PartProps<TOptions>['part']} />\n    }\n  }\n\n  function bindTool(Component: ComponentType<ToolProps<TOptions>>) {\n    return function BoundTool() {\n      const selected = usePartContext()\n      if (selected.key !== 'toolCall') return null\n      return (\n        <Component\n          part={selected.part as ToolProps<TOptions>['part']}\n          result={selected.result}\n          interrupt={selected.interrupt as ToolProps<TOptions>['interrupt']}\n        />\n      )\n    }\n  }\n\n  function bindInterrupt(Component: ComponentType<InterruptProps<TOptions>>) {\n    return function BoundInterrupt() {\n      const interrupt = useInterruptContext()\n      return (\n        <Component\n          interrupt={interrupt as InterruptProps<TOptions>['interrupt']}\n        />\n      )\n    }\n  }\n\n  const partMixins = bindMap(\n    parts as Record<string, ComponentType<any> | undefined>,\n    bindPart,\n  )\n  const toolMixins = bindMap(\n    tools as Record<string, ComponentType<any> | undefined>,\n    bindTool,\n  )\n  const interruptMixins = {\n    ...bindMap(\n      interrupts?.generic as\n        | Record<string, ComponentType<any> | undefined>\n        | undefined,\n      bindInterrupt,\n    ),\n    ...bindMap(\n      interrupts?.tools as\n        | Record<string, ComponentType<any> | undefined>\n        | undefined,\n      bindInterrupt,\n    ),\n  }\n\n  function mixPart(selected: ChatUISelectedPart) {\n    return Object.assign({}, selected, partMixins, toolMixins, {\n      Render: BoundRender,\n    }) as ChatUISelectedPart & PartMixins<TOptions>\n  }\n\n  function mixInterrupt(interrupt: ChatUIInterrupt) {\n    return Object.assign({}, interrupt, interruptMixins, {\n      Render: BoundInterruptRender,\n    }) as ChatUIInterrupt & InterruptMixins<TOptions>\n  }\n\n  function Provider({\n    chat,\n    children,\n  }: {\n    chat: ChatUIHost<TOptions>\n    children?: ReactNode\n  }) {\n    return <ChatContext.Provider value={chat}>{children}</ChatContext.Provider>\n  }\n\n  // Backstop for when the conditional `Input` type cannot be inferred (see the\n  // `input` note in docs/ui/react.md). The type hides `Input` when no `input`\n  // is registered, but inference degrades on some config shapes, so always\n  // supply a component: warn once rather than crash on an undefined element.\n  function MissingInput() {\n    warn(\n      'input',\n      '[tanstack-ai-ui] Rendered <Input /> but no `input` component is registered.',\n    )\n    return null\n  }\n\n  // `Messages`, `Interrupts`, `Queue` and `InputComponent` are declared once\n  // per factory, so these props are stable for the lifetime of the kit.\n  const LayoutSlots = {\n    Messages: Messages as ComponentType,\n    Interrupts: Interrupts as ComponentType,\n    Queue: Queue as ComponentType,\n    Input: (InputComponent ?? MissingInput) as ComponentType,\n  }\n\n  function Chat({ chat }: { chat: ChatUIHost<TOptions> }) {\n    return (\n      <Provider chat={chat}>\n        <Layout {...(LayoutSlots as ComponentProps<ComponentType<any>>)} />\n      </Provider>\n    )\n  }\n\n  function Queue() {\n    const chat = useChatContext()\n    if (!QueueItemComponent) return null\n    const items = chat.queue\n    return (\n      <>\n        {items.map((item) => (\n          <QueueItemView\n            key={item.id}\n            cancelQueued={chat.cancelQueued}\n            item={item}\n          />\n        ))}\n      </>\n    )\n  }\n\n  const QueueItemView = memo(function QueueItemView({\n    item,\n    cancelQueued,\n  }: {\n    item: QueuedMessage\n    cancelQueued: (id: string) => void\n  }) {\n    if (!QueueItemComponent) return null\n    return (\n      <QueueItemComponent\n        item={{\n          ...item,\n          cancelQueued: () => {\n            cancelQueued(item.id)\n          },\n        }}\n      />\n    )\n  }, queueItemEqual)\n\n  function Messages({\n    children,\n  }: {\n    children?: (messages: ChatUIMessages<TOptions>) => ReactNode\n  } = {}) {\n    const chat = useChatContext()\n    const messages = readMessages(chat)\n    const interrupts = readInterrupts(chat)\n    if (children) return <>{children(messages)}</>\n    return (\n      <>\n        {messages.map((message) => (\n          <MessageView\n            key={message.id}\n            inlineToolNames={inlineToolNames}\n            interrupts={interrupts}\n            message={message}\n          />\n        ))}\n      </>\n    )\n  }\n\n  // Scoped to one message render. `Parts` reads it instead of closing over the\n  // message, which is what keeps its identity constant across re-renders — a\n  // fresh component per render would remount every part on each stream chunk.\n  type MessageRenderValue = {\n    message: ChatUIMessages<TOptions>[number]\n    interrupts: ReadonlyArray<ChatUIInterrupt>\n    inlineToolNames: ReadonlyArray<string>\n  }\n  const MessageRenderContext = createContext<MessageRenderValue | null>(null)\n\n  function Parts() {\n    const scope = useContext(MessageRenderContext)\n    if (!scope) {\n      throw new Error('`Parts` must be rendered by a `message` component.')\n    }\n    return (\n      <AutomaticParts\n        inlineToolNames={scope.inlineToolNames}\n        interrupts={scope.interrupts}\n        message={scope.message}\n      />\n    )\n  }\n\n  const MessageView = memo(function MessageView({\n    message,\n    interrupts,\n    inlineToolNames: names,\n    children,\n  }: {\n    message: ChatUIMessages<TOptions>[number]\n    interrupts: ReadonlyArray<ChatUIInterrupt>\n    inlineToolNames: ReadonlyArray<string>\n    children?: (parts: Array<ChatUISelectedPart>) => ReactNode\n  }) {\n    const selected = selectMessageUI(message, {\n      interrupts,\n      inlineToolNames: names,\n    })\n    if (children) return <>{children(selected.parts)}</>\n    return (\n      <MessageRenderContext.Provider\n        value={{ message, interrupts, inlineToolNames: names }}\n      >\n        <MessageComponent message={message} Parts={Parts} />\n      </MessageRenderContext.Provider>\n    )\n  })\n\n  function Message({\n    message,\n    children,\n  }: {\n    message: ChatUIMessages<TOptions>[number]\n    children?: (parts: Array<ChatUISelectedPart>) => ReactNode\n  }) {\n    const chat = useChatContext()\n    return (\n      <MessageView\n        children={children}\n        inlineToolNames={inlineToolNames}\n        interrupts={readInterrupts(chat)}\n        message={message}\n      />\n    )\n  }\n\n  const AutomaticParts = memo(function AutomaticParts({\n    message,\n    interrupts,\n    inlineToolNames: names,\n  }: {\n    message: ChatUIMessages<TOptions>[number]\n    interrupts: ReadonlyArray<ChatUIInterrupt>\n    inlineToolNames: ReadonlyArray<string>\n  }) {\n    const selected = selectMessageUI(message, {\n      interrupts,\n      inlineToolNames: names,\n    })\n    return (\n      <>\n        {automaticPartsForMessage(selected).map((part, index) => (\n          <SelectedPartView key={`${message.id}-${index}`} selected={part} />\n        ))}\n      </>\n    )\n  })\n\n  const SelectedPartInner = memo(function SelectedPartInner({\n    selected,\n  }: {\n    selected: ChatUISelectedPart\n  }) {\n    if (selected.key === 'toolCall') {\n      const name = selected.part.name\n      const Tool = tools?.[name as ChatUIToolName<TOptions>] as\n        | ComponentType<ToolProps<TOptions>>\n        | undefined\n      if (!Tool) {\n        warn(`tool:${name}`, `[tanstack-ai-ui] Missing tools.${name} component`)\n        return null\n      }\n      return (\n        <Tool\n          part={selected.part as ToolProps<TOptions>['part']}\n          result={selected.result}\n          interrupt={selected.interrupt as ToolProps<TOptions>['interrupt']}\n        />\n      )\n    }\n\n    const PartComponent = (parts[selected.key] ?? parts.fallback) as\n      | ComponentType<PartProps<TOptions>>\n      | undefined\n    if (!PartComponent) {\n      warn(\n        `part:${selected.key}`,\n        `[tanstack-ai-ui] Missing parts.${selected.key} component`,\n      )\n      return null\n    }\n    return <PartComponent part={selected.part as PartProps<TOptions>['part']} />\n  }, selectedPartPropsEqual)\n\n  const SelectedPartView = memo(function SelectedPartView({\n    selected,\n  }: {\n    selected: ChatUISelectedPart\n  }) {\n    return (\n      <PartContext.Provider value={selected}>\n        <SelectedPartInner selected={selected} />\n      </PartContext.Provider>\n    )\n  })\n\n  function BoundRender() {\n    const selected = usePartContext()\n    return <SelectedPartInner selected={selected} />\n  }\n\n  function Part({\n    part,\n    children,\n  }: {\n    part: MessagePart | ChatUISelectedPart\n    children?: (mixed: ChatUISelectedPart & PartMixins<TOptions>) => ReactNode\n  }) {\n    const chat = useChatContext()\n    const selected = isSelectedPart(part)\n      ? part\n      : selectMessageUI(\n          { id: 'part', role: 'assistant', parts: [part] },\n          { interrupts: readInterrupts(chat), inlineToolNames: [] },\n        ).parts[0]\n    if (!selected) return null\n    return (\n      <PartContext.Provider value={selected}>\n        {children ? (\n          children(mixPart(selected))\n        ) : (\n          <SelectedPartInner selected={selected} />\n        )}\n      </PartContext.Provider>\n    )\n  }\n\n  function Interrupts({\n    children,\n  }: {\n    children?: (interrupts: ReadonlyArray<ChatUIInterrupt>) => ReactNode\n  } = {}) {\n    const chat = useChatContext()\n    const selected = selectChatUI({\n      messages: readMessages(chat),\n      interrupts: readInterrupts(chat),\n      inlineToolNames,\n    })\n    if (children) return <>{children(selected.interrupts)}</>\n    return (\n      <>\n        {selected.interrupts.map((interrupt) => (\n          <Interrupt key={interrupt.id} interrupt={interrupt} />\n        ))}\n      </>\n    )\n  }\n\n  const InterruptInner = memo(function InterruptInner({\n    interrupt,\n  }: {\n    interrupt: ChatUIInterrupt\n  }) {\n    const Component = resolveInterruptComponent(interrupt, interrupts) as\n      | ComponentType<InterruptProps<TOptions>>\n      | undefined\n    if (!Component) {\n      warn(\n        `interrupt:${interrupt.id}`,\n        `[tanstack-ai-ui] Missing interrupt component for ${interrupt.kind}`,\n      )\n      return null\n    }\n    return <Component interrupt={interrupt} />\n  })\n\n  function BoundInterruptRender() {\n    const interrupt = useInterruptContext()\n    return <InterruptInner interrupt={interrupt} />\n  }\n\n  const Interrupt = memo(function Interrupt({\n    interrupt,\n    children,\n  }: {\n    interrupt: ChatUIInterrupt\n    children?: (mixed: ChatUIInterrupt & InterruptMixins<TOptions>) => ReactNode\n  }) {\n    return (\n      <InterruptContext.Provider value={interrupt}>\n        {children ? (\n          children(mixInterrupt(interrupt))\n        ) : (\n          <InterruptInner interrupt={interrupt} />\n        )}\n      </InterruptContext.Provider>\n    )\n  })\n\n  return {\n    Chat,\n    Provider,\n    Messages,\n    Message,\n    Part,\n    Interrupts,\n    Interrupt,\n    Queue,\n    useChatContext,\n    Input: InputComponent,\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+import { Options as ReactMarkdownOptions } from 'react-markdown';
+export type PluggableList = NonNullable<ReactMarkdownOptions['remarkPlugins']>;
+export declare const DEFAULT_REMARK_PLUGINS: PluggableList;
+export declare const DEFAULT_REHYPE_PLUGINS_BEFORE_USER: PluggableList;
+export declare const DEFAULT_REHYPE_PLUGINS_AFTER_USER: PluggableList;
+export interface ResolveMarkdownPluginsOptions {
+    remarkPlugins?: PluggableList;
+    rehypePlugins?: PluggableList;
+    disableDefaultPlugins?: boolean;
+}
+export interface ResolvedMarkdownPlugins {
+    remarkPlugins: PluggableList;
+    rehypePlugins: PluggableList;
+}
+export declare function resolveMarkdownPlugins(options: ResolveMarkdownPluginsOptions): ResolvedMarkdownPlugins;

package/dist/esm/chat-ui/markdown-plugins.js

@@ -0,0 +1,28 @@
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
+import rehypeHighlight from "rehype-highlight";
+//#region src/chat-ui/markdown-plugins.ts
+var DEFAULT_REMARK_PLUGINS = [remarkGfm];
+var DEFAULT_REHYPE_PLUGINS_BEFORE_USER = [rehypeRaw, rehypeHighlight];
+var DEFAULT_REHYPE_PLUGINS_AFTER_USER = [rehypeSanitize];
+function resolveMarkdownPlugins(options) {
+	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
+		]
+	};
+}
+//#endregion
+export { DEFAULT_REHYPE_PLUGINS_AFTER_USER, DEFAULT_REHYPE_PLUGINS_BEFORE_USER, DEFAULT_REMARK_PLUGINS, resolveMarkdownPlugins };
+
+//# sourceMappingURL=markdown-plugins.js.map

package/dist/esm/chat-ui/markdown-plugins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-plugins.js","names":[],"sources":["../../../src/chat-ui/markdown-plugins.ts"],"sourcesContent":["import remarkGfm from 'remark-gfm'\nimport rehypeRaw from 'rehype-raw'\nimport rehypeSanitize from 'rehype-sanitize'\nimport rehypeHighlight from 'rehype-highlight'\nimport type { Options as ReactMarkdownOptions } from 'react-markdown'\n\nexport type PluggableList = NonNullable<ReactMarkdownOptions['remarkPlugins']>\n\nexport const DEFAULT_REMARK_PLUGINS: PluggableList = [remarkGfm]\nexport const DEFAULT_REHYPE_PLUGINS_BEFORE_USER: PluggableList = [\n  rehypeRaw,\n  rehypeHighlight,\n]\nexport const DEFAULT_REHYPE_PLUGINS_AFTER_USER: PluggableList = [rehypeSanitize]\n\nexport interface ResolveMarkdownPluginsOptions {\n  remarkPlugins?: PluggableList\n  rehypePlugins?: PluggableList\n  disableDefaultPlugins?: boolean\n}\n\nexport interface ResolvedMarkdownPlugins {\n  remarkPlugins: PluggableList\n  rehypePlugins: PluggableList\n}\n\nexport function resolveMarkdownPlugins(\n  options: ResolveMarkdownPluginsOptions,\n): ResolvedMarkdownPlugins {\n  const userRemark = options.remarkPlugins ?? []\n  const userRehype = options.rehypePlugins ?? []\n\n  if (options.disableDefaultPlugins) {\n    return {\n      remarkPlugins: [...userRemark],\n      rehypePlugins: [...userRehype],\n    }\n  }\n\n  return {\n    remarkPlugins: [...DEFAULT_REMARK_PLUGINS, ...userRemark],\n    rehypePlugins: [\n      ...DEFAULT_REHYPE_PLUGINS_BEFORE_USER,\n      ...userRehype,\n      ...DEFAULT_REHYPE_PLUGINS_AFTER_USER,\n    ],\n  }\n}\n"],"mappings":";;;;;AAQA,IAAa,yBAAwC,CAAC,SAAS;AAC/D,IAAa,qCAAoD,CAC/D,WACA,eACF;AACA,IAAa,oCAAmD,CAAC,cAAc;AAa/E,SAAgB,uBACd,SACyB;CACzB,MAAM,aAAa,QAAQ,iBAAiB,CAAC;CAC7C,MAAM,aAAa,QAAQ,iBAAiB,CAAC;CAE7C,IAAI,QAAQ,uBACV,OAAO;EACL,eAAe,CAAC,GAAG,UAAU;EAC7B,eAAe,CAAC,GAAG,UAAU;CAC/B;CAGF,OAAO;EACL,eAAe,CAAC,GAAG,wBAAwB,GAAG,UAAU;EACxD,eAAe;GACb,GAAG;GACH,GAAG;GACH,GAAG;EACL;CACF;AACF"}

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

@@ -0,0 +1,57 @@
+import { Components } from 'react-markdown';
+import { PluggableList } from './markdown-plugins.js';
+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 className applied to all text parts */
+    className?: string;
+    /** Additional className for user messages */
+    userClassName?: string;
+    /** Additional className for assistant messages (also used for system messages) */
+    assistantClassName?: string;
+    /**
+     * Additional remark plugins, appended after the defaults
+     * (or replacing them when `disableDefaultPlugins` is true).
+     */
+    remarkPlugins?: PluggableList;
+    /**
+     * Additional rehype plugins. Inserted between the built-in
+     * `rehypeRaw`/`rehypeHighlight` and the trailing `rehypeSanitize`
+     * so sanitization always runs last. When `disableDefaultPlugins`
+     * is true, replaces the entire chain.
+     */
+    rehypePlugins?: PluggableList;
+    /** react-markdown `components` overrides (e.g. custom `a`, `code`). */
+    components?: Components;
+    /**
+     * Drop the built-in plugin defaults entirely. The consumer becomes
+     * responsible for syntax highlighting, GFM, raw HTML handling, and
+     * sanitization. Use with care — disabling defaults removes the
+     * built-in XSS sanitizer.
+     */
+    disableDefaultPlugins?: boolean;
+}
+/**
+ * TextPart component - renders markdown text with syntax highlighting.
+ *
+ * @example Standalone usage
+ * ```tsx
+ * <TextPart
+ *   content="Hello **world**!"
+ *   role="user"
+ *   className="p-4 rounded"
+ *   userClassName="bg-blue-500"
+ *   assistantClassName="bg-gray-500"
+ * />
+ * ```
+ *
+ * @example Add a markdown plugin (e.g. CJK bold/emphasis support)
+ * ```tsx
+ * import remarkCjkFriendly from 'remark-cjk-friendly'
+ *
+ * <TextPart content={content} remarkPlugins={[remarkCjkFriendly]} />
+ * ```
+ */
+export declare function TextPart({ content, role, className, userClassName, assistantClassName, remarkPlugins, rehypePlugins, components, disableDefaultPlugins, }: TextPartProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/chat-ui/text-part.js

@@ -0,0 +1,46 @@
+import { resolveMarkdownPlugins } from "./markdown-plugins.js";
+import { jsx } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+//#region src/chat-ui/text-part.tsx
+/**
+* TextPart component - renders markdown text with syntax highlighting.
+*
+* @example Standalone usage
+* ```tsx
+* <TextPart
+*   content="Hello **world**!"
+*   role="user"
+*   className="p-4 rounded"
+*   userClassName="bg-blue-500"
+*   assistantClassName="bg-gray-500"
+* />
+* ```
+*
+* @example Add a markdown plugin (e.g. CJK bold/emphasis support)
+* ```tsx
+* import remarkCjkFriendly from 'remark-cjk-friendly'
+*
+* <TextPart content={content} remarkPlugins={[remarkCjkFriendly]} />
+* ```
+*/
+function TextPart({ content, role, className = "", userClassName = "", assistantClassName = "", remarkPlugins, rehypePlugins, components, disableDefaultPlugins }) {
+	const combinedClassName = [className, role === "user" ? userClassName : role === "assistant" ? assistantClassName : ""].filter(Boolean).join(" ");
+	const resolved = resolveMarkdownPlugins({
+		remarkPlugins,
+		rehypePlugins,
+		disableDefaultPlugins
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: combinedClassName || void 0,
+		children: /* @__PURE__ */ jsx(ReactMarkdown, {
+			remarkPlugins: resolved.remarkPlugins,
+			rehypePlugins: resolved.rehypePlugins,
+			components,
+			children: content
+		})
+	});
+}
+//#endregion
+export { TextPart };
+
+//# sourceMappingURL=text-part.js.map

package/dist/esm/chat-ui/text-part.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-part.js","names":[],"sources":["../../../src/chat-ui/text-part.tsx"],"sourcesContent":["import ReactMarkdown from 'react-markdown'\nimport { resolveMarkdownPlugins } from './markdown-plugins'\nimport type { Components } from 'react-markdown'\nimport type { PluggableList } from './markdown-plugins'\n\nexport interface TextPartProps {\n  /** The text content to render */\n  content: string\n  /** The role of the message (user, assistant, or system) - optional for standalone use */\n  role?: 'user' | 'assistant' | 'system'\n  /** Base className applied to all text parts */\n  className?: string\n  /** Additional className for user messages */\n  userClassName?: string\n  /** Additional className for assistant messages (also used for system messages) */\n  assistantClassName?: string\n  /**\n   * Additional remark plugins, appended after the defaults\n   * (or replacing them when `disableDefaultPlugins` is true).\n   */\n  remarkPlugins?: PluggableList\n  /**\n   * Additional rehype plugins. Inserted between the built-in\n   * `rehypeRaw`/`rehypeHighlight` and the trailing `rehypeSanitize`\n   * so sanitization always runs last. When `disableDefaultPlugins`\n   * is true, replaces the entire chain.\n   */\n  rehypePlugins?: PluggableList\n  /** react-markdown `components` overrides (e.g. custom `a`, `code`). */\n  components?: Components\n  /**\n   * Drop the built-in plugin defaults entirely. The consumer becomes\n   * responsible for syntax highlighting, GFM, raw HTML handling, and\n   * sanitization. Use with care — disabling defaults removes the\n   * built-in XSS sanitizer.\n   */\n  disableDefaultPlugins?: boolean\n}\n\n/**\n * TextPart component - renders markdown text with syntax highlighting.\n *\n * @example Standalone usage\n * ```tsx\n * <TextPart\n *   content=\"Hello **world**!\"\n *   role=\"user\"\n *   className=\"p-4 rounded\"\n *   userClassName=\"bg-blue-500\"\n *   assistantClassName=\"bg-gray-500\"\n * />\n * ```\n *\n * @example Add a markdown plugin (e.g. CJK bold/emphasis support)\n * ```tsx\n * import remarkCjkFriendly from 'remark-cjk-friendly'\n *\n * <TextPart content={content} remarkPlugins={[remarkCjkFriendly]} />\n * ```\n */\nexport function TextPart({\n  content,\n  role,\n  className = '',\n  userClassName = '',\n  assistantClassName = '',\n  remarkPlugins,\n  rehypePlugins,\n  components,\n  disableDefaultPlugins,\n}: TextPartProps) {\n  const roleClassName =\n    role === 'user'\n      ? userClassName\n      : role === 'assistant'\n        ? assistantClassName\n        : ''\n  const combinedClassName = [className, roleClassName].filter(Boolean).join(' ')\n\n  const resolved = resolveMarkdownPlugins({\n    remarkPlugins,\n    rehypePlugins,\n    disableDefaultPlugins,\n  })\n\n  return (\n    <div className={combinedClassName || undefined}>\n      <ReactMarkdown\n        remarkPlugins={resolved.remarkPlugins}\n        rehypePlugins={resolved.rehypePlugins}\n        components={components}\n      >\n        {content}\n      </ReactMarkdown>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,SAAgB,SAAS,EACvB,SACA,MACA,YAAY,IACZ,gBAAgB,IAChB,qBAAqB,IACrB,eACA,eACA,YACA,yBACgB;CAOhB,MAAM,oBAAoB,CAAC,WALzB,SAAS,SACL,gBACA,SAAS,cACP,qBACA,EAC2C,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE7E,MAAM,WAAW,uBAAuB;EACtC;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,OAAD;EAAK,WAAW,qBAAqB,KAAA;EACnC,UAAA,oBAAC,eAAD;GACE,eAAe,SAAS;GACxB,eAAe,SAAS;GACZ;GAEX,UAAA;EACY,CAAA;CACZ,CAAA;AAET"}

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

@@ -0,0 +1,41 @@
+export interface ThinkingPartProps {
+    /** The thinking content to render */
+    content: string;
+    /** Base className applied to thinking parts */
+    className?: 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..."
+ *   className="p-4 rounded bg-gray-100"
+ * />
+ * ```
+ *
+ * @example Usage in partRenderers
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   partRenderers={{
+ *     thinking: ({ content, isComplete }) => (
+ *       <ThinkingPart
+ *         content={content}
+ *         isComplete={isComplete}
+ *         className="px-5 py-3 rounded-2xl bg-gray-800/50"
+ *       />
+ *     )
+ *   }}
+ * />
+ * ```
+ */
+export declare function ThinkingPart({ content, className, isComplete, }: ThinkingPartProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/chat-ui/thinking-part.js

@@ -0,0 +1,73 @@
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat-ui/thinking-part.tsx
+/**
+* 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..."
+*   className="p-4 rounded bg-gray-100"
+* />
+* ```
+*
+* @example Usage in partRenderers
+* ```tsx
+* <ChatMessage
+*   message={message}
+*   partRenderers={{
+*     thinking: ({ content, isComplete }) => (
+*       <ThinkingPart
+*         content={content}
+*         isComplete={isComplete}
+*         className="px-5 py-3 rounded-2xl bg-gray-800/50"
+*       />
+*     )
+*   }}
+* />
+* ```
+*/
+function ThinkingPart({ content, className = "", isComplete = false }) {
+	const [isCollapsed, setIsCollapsed] = useState(false);
+	useEffect(() => {
+		if (isComplete) setIsCollapsed(true);
+	}, [isComplete]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: className || void 0,
+		"data-part-type": "thinking",
+		"data-part-content": true,
+		children: [/* @__PURE__ */ jsxs("button", {
+			onClick: () => setIsCollapsed(!isCollapsed),
+			className: "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",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "text-xs",
+					children: isCollapsed ? "▶" : "▼"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "italic",
+					children: "💭 Thinking..."
+				}),
+				isComplete && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-gray-500",
+					children: "(complete)"
+				})
+			]
+		}), !isCollapsed && /* @__PURE__ */ jsx("div", {
+			className: "text-gray-300 whitespace-pre-wrap font-mono text-sm",
+			children: content
+		})]
+	});
+}
+//#endregion
+export { ThinkingPart };
+
+//# sourceMappingURL=thinking-part.js.map

package/dist/esm/chat-ui/thinking-part.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thinking-part.js","names":[],"sources":["../../../src/chat-ui/thinking-part.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nexport interface ThinkingPartProps {\n  /** The thinking content to render */\n  content: string\n  /** Base className applied to thinking parts */\n  className?: string\n  /** Whether thinking is complete (has text content after) */\n  isComplete?: boolean\n}\n\n/**\n * ThinkingPart component - renders thinking/reasoning content\n *\n * This component displays the model's internal reasoning process,\n * typically shown in a collapsed or expandable format to distinguish\n * it from the final response. It automatically collapses when thinking\n * is complete.\n *\n * @example Standalone usage\n * ```tsx\n * <ThinkingPart\n *   content=\"Let me think about this step by step...\"\n *   className=\"p-4 rounded bg-gray-100\"\n * />\n * ```\n *\n * @example Usage in partRenderers\n * ```tsx\n * <ChatMessage\n *   message={message}\n *   partRenderers={{\n *     thinking: ({ content, isComplete }) => (\n *       <ThinkingPart\n *         content={content}\n *         isComplete={isComplete}\n *         className=\"px-5 py-3 rounded-2xl bg-gray-800/50\"\n *       />\n *     )\n *   }}\n * />\n * ```\n */\nexport function ThinkingPart({\n  content,\n  className = '',\n  isComplete = false,\n}: ThinkingPartProps) {\n  const [isCollapsed, setIsCollapsed] = useState(false)\n\n  // Auto-collapse when thinking completes\n  useEffect(() => {\n    if (isComplete) {\n      setIsCollapsed(true)\n    }\n  }, [isComplete])\n\n  return (\n    <div\n      className={className || undefined}\n      data-part-type=\"thinking\"\n      data-part-content\n    >\n      <button\n        onClick={() => setIsCollapsed(!isCollapsed)}\n        className=\"flex items-center gap-2 text-sm text-gray-400 hover:text-gray-300 transition-colors mb-2\"\n        aria-expanded={!isCollapsed}\n        aria-label={isCollapsed ? 'Expand thinking' : 'Collapse thinking'}\n      >\n        <span className=\"text-xs\">{isCollapsed ? '▶' : '▼'}</span>\n        <span className=\"italic\">💭 Thinking...</span>\n        {isComplete && (\n          <span className=\"text-xs text-gray-500\">(complete)</span>\n        )}\n      </button>\n      {!isCollapsed && (\n        <div className=\"text-gray-300 whitespace-pre-wrap font-mono text-sm\">\n          {content}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,SAAgB,aAAa,EAC3B,SACA,YAAY,IACZ,aAAa,SACO;CACpB,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAGpD,gBAAgB;EACd,IAAI,YACF,eAAe,IAAI;CAEvB,GAAG,CAAC,UAAU,CAAC;CAEf,OACE,qBAAC,OAAD;EACE,WAAW,aAAa,KAAA;EACxB,kBAAe;EACf,qBAAA;EAHF,UAAA,CAKE,qBAAC,UAAD;GACE,eAAe,eAAe,CAAC,WAAW;GAC1C,WAAU;GACV,iBAAe,CAAC;GAChB,cAAY,cAAc,oBAAoB;GAJhD,UAAA;IAME,oBAAC,QAAD;KAAM,WAAU;KAAW,UAAA,cAAc,MAAM;IAAU,CAAA;IACzD,oBAAC,QAAD;KAAM,WAAU;KAAS,UAAA;IAAoB,CAAA;IAC5C,cACC,oBAAC,QAAD;KAAM,WAAU;KAAwB,UAAA;IAAgB,CAAA;GAEpD;EACP,CAAA,GAAA,CAAC,eACA,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA;EACE,CAAA,CAEJ;;AAET"}