@tanstack/ai-preact 0.14.4 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -15
- package/dist/esm/chat-ui/create-chat-hook.d.ts +48 -0
- package/dist/esm/chat-ui/create-chat-hook.js +57 -0
- package/dist/esm/chat-ui/create-chat-hook.js.map +1 -0
- package/dist/esm/chat-ui/create-ui-contexts.d.ts +29 -0
- package/dist/esm/chat-ui/create-ui-contexts.js +36 -0
- package/dist/esm/chat-ui/create-ui-contexts.js.map +1 -0
- package/dist/esm/chat-ui/create-ui.d.ts +154 -0
- package/dist/esm/chat-ui/create-ui.js +294 -0
- package/dist/esm/chat-ui/create-ui.js.map +1 -0
- package/dist/esm/create-chat-hook.d.ts +22 -0
- package/dist/esm/create-chat-hook.js +24 -0
- package/dist/esm/create-chat-hook.js.map +1 -0
- package/dist/esm/index.d.ts +3 -0
- package/dist/esm/index.js +3 -1
- package/dist/esm/ui.d.ts +3 -0
- package/dist/esm/ui.js +4 -0
- package/dist/esm/use-web-mcp-tools.d.ts +27 -0
- package/dist/esm/use-web-mcp-tools.js +36 -0
- package/dist/esm/use-web-mcp-tools.js.map +1 -0
- package/package.json +8 -4
- package/src/chat-ui/create-chat-hook.tsx +98 -0
- package/src/chat-ui/create-ui-contexts.tsx +57 -0
- package/src/chat-ui/create-ui.tsx +764 -0
- package/src/create-chat-hook.ts +47 -0
- package/src/index.ts +3 -0
- package/src/ui.ts +20 -0
- package/src/use-web-mcp-tools.ts +59 -0
package/README.md
CHANGED
|
@@ -61,12 +61,8 @@ framework bindings as your app needs them.
|
|
|
61
61
|
|
|
62
62
|
- [Overview](https://tanstack.com/ai/latest/docs/getting-started/overview) -
|
|
63
63
|
what TanStack AI is and how the packages fit together.
|
|
64
|
-
- [Quick Start
|
|
65
|
-
add streaming chat
|
|
66
|
-
- [Quick Start: Vue](https://tanstack.com/ai/latest/docs/getting-started/quick-start-vue) -
|
|
67
|
-
build with Vue composables.
|
|
68
|
-
- [Quick Start: Svelte](https://tanstack.com/ai/latest/docs/getting-started/quick-start-svelte) -
|
|
69
|
-
build with Svelte 5 runes.
|
|
64
|
+
- [Quick Start](https://tanstack.com/ai/latest/docs/getting-started/quick-start) -
|
|
65
|
+
add streaming chat. Pick your framework at the top of the page.
|
|
70
66
|
- [Quick Start: Server Only](https://tanstack.com/ai/latest/docs/getting-started/quick-start-server) -
|
|
71
67
|
use TanStack AI from a server endpoint, script, or backend service.
|
|
72
68
|
- [TanStack AI vs Vercel AI SDK](https://tanstack.com/ai/latest/docs/comparison/vercel-ai-sdk) -
|
|
@@ -226,15 +222,15 @@ on.
|
|
|
226
222
|
|
|
227
223
|
## Framework Packages
|
|
228
224
|
|
|
229
|
-
| Package
|
|
230
|
-
|
|
|
231
|
-
| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client)
|
|
232
|
-
| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react)
|
|
233
|
-
| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid)
|
|
234
|
-
| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue)
|
|
235
|
-
| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte)
|
|
236
|
-
| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact)
|
|
237
|
-
| `@tanstack/ai-react
|
|
225
|
+
| Package | What it provides |
|
|
226
|
+
| ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
|
227
|
+
| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
|
|
228
|
+
| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
|
|
229
|
+
| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
|
|
230
|
+
| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
|
|
231
|
+
| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
|
|
232
|
+
| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat |
|
|
233
|
+
| `@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. |
|
|
238
234
|
|
|
239
235
|
## Advanced Docs
|
|
240
236
|
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { ComponentType } from 'preact/compat';
|
|
2
|
+
import { InferredClientContext } from '@tanstack/ai-client';
|
|
3
|
+
import { ChatUIInterruptsOf, ChatUIToolsOf } from '@tanstack/ai-client/ui';
|
|
4
|
+
import { UseChatOptions } from '../types.js';
|
|
5
|
+
import { ChatUIFactoryConfig, ChatUIHost, InputProps } from './create-ui.js';
|
|
6
|
+
type HeadlessOptions<TOptions> = UseChatOptions<ChatUIToolsOf<TOptions>, InferredClientContext<ChatUIToolsOf<TOptions>>, ChatUIInterruptsOf<TOptions>>;
|
|
7
|
+
type ChatInstanceOverrides<TOptions> = {
|
|
8
|
+
threadId?: string;
|
|
9
|
+
live?: boolean;
|
|
10
|
+
forwardedProps?: Record<string, any>;
|
|
11
|
+
body?: Record<string, any>;
|
|
12
|
+
initialMessages?: HeadlessOptions<TOptions>['initialMessages'];
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* Bind chat options and UI widgets once at module scope.
|
|
16
|
+
*
|
|
17
|
+
* This matches Form `createFormHook` and Table `createTableHook`. The
|
|
18
|
+
* returned `useAppChat` creates a chat instance. `chat.AppChat` renders it.
|
|
19
|
+
* `useChatContext` reads that instance. Part and interrupt widgets take
|
|
20
|
+
* `part` / `interrupt` as props. Do not read those from context.
|
|
21
|
+
*
|
|
22
|
+
* Pass instance overrides such as `threadId` into `useAppChat()`.
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```tsx
|
|
26
|
+
* const { useAppChat, useChatContext } = createChatHook({
|
|
27
|
+
* options: chatOptions,
|
|
28
|
+
* components: { layout: ChatLayout, message: ChatMessage },
|
|
29
|
+
* partsComponents: { fallback: FallbackPart },
|
|
30
|
+
* toolsComponents: { getWeather: WeatherTool, purchaseItem: PurchaseTool },
|
|
31
|
+
* interruptsComponents: { generic: { choosePlan: ChoosePlan } },
|
|
32
|
+
* })
|
|
33
|
+
*
|
|
34
|
+
* function Support() {
|
|
35
|
+
* const chat = useAppChat({ threadId: 'support-1' })
|
|
36
|
+
* return <chat.AppChat />
|
|
37
|
+
* }
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
export declare function createChatHook<const TOptions, TInput extends ComponentType<any> | undefined = ComponentType<InputProps<NoInfer<TOptions>>> | undefined>({ options, ...chatComponents }: {
|
|
41
|
+
options: TOptions;
|
|
42
|
+
} & ChatUIFactoryConfig<NoInfer<TOptions>, TInput>): {
|
|
43
|
+
useAppChat: (overrides?: ChatInstanceOverrides<TOptions>) => ChatUIHost<TOptions> & {
|
|
44
|
+
AppChat: ComponentType;
|
|
45
|
+
};
|
|
46
|
+
useChatContext: () => ChatUIHost<TOptions>;
|
|
47
|
+
};
|
|
48
|
+
export {};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { useChat } from "../use-chat.js";
|
|
2
|
+
import { createChatUI } from "./create-ui.js";
|
|
3
|
+
import { useMemo, useRef } from "preact/compat";
|
|
4
|
+
import { jsx } from "preact/jsx-runtime";
|
|
5
|
+
//#region src/chat-ui/create-chat-hook.tsx
|
|
6
|
+
/**
|
|
7
|
+
* Bind chat options and UI widgets once at module scope.
|
|
8
|
+
*
|
|
9
|
+
* This matches Form `createFormHook` and Table `createTableHook`. The
|
|
10
|
+
* returned `useAppChat` creates a chat instance. `chat.AppChat` renders it.
|
|
11
|
+
* `useChatContext` reads that instance. Part and interrupt widgets take
|
|
12
|
+
* `part` / `interrupt` as props. Do not read those from context.
|
|
13
|
+
*
|
|
14
|
+
* Pass instance overrides such as `threadId` into `useAppChat()`.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```tsx
|
|
18
|
+
* const { useAppChat, useChatContext } = createChatHook({
|
|
19
|
+
* options: chatOptions,
|
|
20
|
+
* components: { layout: ChatLayout, message: ChatMessage },
|
|
21
|
+
* partsComponents: { fallback: FallbackPart },
|
|
22
|
+
* toolsComponents: { getWeather: WeatherTool, purchaseItem: PurchaseTool },
|
|
23
|
+
* interruptsComponents: { generic: { choosePlan: ChoosePlan } },
|
|
24
|
+
* })
|
|
25
|
+
*
|
|
26
|
+
* function Support() {
|
|
27
|
+
* const chat = useAppChat({ threadId: 'support-1' })
|
|
28
|
+
* return <chat.AppChat />
|
|
29
|
+
* }
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
function createChatHook({ options, ...chatComponents }) {
|
|
33
|
+
const ui = createChatUI(options, chatComponents);
|
|
34
|
+
function useAppChat(overrides) {
|
|
35
|
+
const chat = overrides ? useChat({
|
|
36
|
+
...options,
|
|
37
|
+
...overrides
|
|
38
|
+
}) : useChat(options);
|
|
39
|
+
const chatRef = useRef(chat);
|
|
40
|
+
chatRef.current = chat;
|
|
41
|
+
const AppChat = useMemo(() => {
|
|
42
|
+
function AppChatImpl() {
|
|
43
|
+
return /* @__PURE__ */ jsx(ui.Chat, { chat: chatRef.current });
|
|
44
|
+
}
|
|
45
|
+
return AppChatImpl;
|
|
46
|
+
}, []);
|
|
47
|
+
return Object.assign(chat, { AppChat });
|
|
48
|
+
}
|
|
49
|
+
return {
|
|
50
|
+
useAppChat,
|
|
51
|
+
useChatContext: ui.useChatContext
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
//#endregion
|
|
55
|
+
export { createChatHook };
|
|
56
|
+
|
|
57
|
+
//# sourceMappingURL=create-chat-hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"create-chat-hook.js","names":[],"sources":["../../../src/chat-ui/create-chat-hook.tsx"],"sourcesContent":["import { useMemo, useRef } from 'preact/compat'\nimport type { ComponentType } from 'preact/compat'\nimport type { InferredClientContext } from '@tanstack/ai-client'\nimport type { ChatUIInterruptsOf, ChatUIToolsOf } from '@tanstack/ai-client/ui'\nimport { useChat as useUnboundChat } from '../use-chat'\nimport type { UseChatOptions } from '../types'\nimport { createChatUI } from './create-ui'\nimport type { ChatUIFactoryConfig, ChatUIHost, InputProps } from './create-ui'\n\ntype HeadlessOptions<TOptions> = UseChatOptions<\n ChatUIToolsOf<TOptions>,\n InferredClientContext<ChatUIToolsOf<TOptions>>,\n ChatUIInterruptsOf<TOptions>\n>\n\ntype ChatInstanceOverrides<TOptions> = {\n threadId?: string\n live?: boolean\n forwardedProps?: Record<string, any>\n body?: Record<string, any>\n initialMessages?: HeadlessOptions<TOptions>['initialMessages']\n}\n\n/**\n * Bind chat options and UI widgets once at module scope.\n *\n * This matches Form `createFormHook` and Table `createTableHook`. The\n * returned `useAppChat` creates a chat instance. `chat.AppChat` renders it.\n * `useChatContext` reads that instance. Part and interrupt widgets take\n * `part` / `interrupt` as props. Do not read those from context.\n *\n * Pass instance overrides such as `threadId` into `useAppChat()`.\n *\n * @example\n * ```tsx\n * const { useAppChat, useChatContext } = createChatHook({\n * options: chatOptions,\n * components: { layout: ChatLayout, message: ChatMessage },\n * partsComponents: { fallback: FallbackPart },\n * toolsComponents: { getWeather: WeatherTool, purchaseItem: PurchaseTool },\n * interruptsComponents: { generic: { choosePlan: ChoosePlan } },\n * })\n *\n * function Support() {\n * const chat = useAppChat({ threadId: 'support-1' })\n * return <chat.AppChat />\n * }\n * ```\n */\nexport function createChatHook<\n const TOptions,\n TInput extends ComponentType<any> | undefined =\n | ComponentType<InputProps<NoInfer<TOptions>>>\n | undefined,\n>({\n options,\n ...chatComponents\n}: {\n options: TOptions\n} & ChatUIFactoryConfig<NoInfer<TOptions>, TInput>) {\n const ui = createChatUI(\n options,\n chatComponents as ChatUIFactoryConfig<NoInfer<TOptions>, TInput>,\n )\n\n function useAppChat(overrides?: ChatInstanceOverrides<TOptions>) {\n const chat = (\n overrides\n ? useUnboundChat({\n ...(options as HeadlessOptions<TOptions>),\n ...overrides,\n })\n : useUnboundChat(options as HeadlessOptions<TOptions>)\n ) as ChatUIHost<TOptions>\n\n // `useChat` returns a fresh object on every render. The mixed Chat\n // component must stay stable, or React remounts the tree on each\n // update. Read the current instance from a ref.\n const chatRef = useRef(chat)\n chatRef.current = chat\n\n const AppChat = useMemo(() => {\n function AppChatImpl() {\n return <ui.Chat chat={chatRef.current} />\n }\n return AppChatImpl\n }, [])\n\n return Object.assign(chat, { AppChat }) as ChatUIHost<TOptions> & {\n AppChat: ComponentType\n }\n }\n\n return {\n useAppChat,\n useChatContext: ui.useChatContext,\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAgB,eAKd,EACA,SACA,GAAG,kBAG+C;CAClD,MAAM,KAAK,aACT,SACA,cACF;CAEA,SAAS,WAAW,WAA6C;EAC/D,MAAM,OACJ,YACI,QAAe;GACb,GAAI;GACJ,GAAG;EACL,CAAC,IACD,QAAe,OAAoC;EAMzD,MAAM,UAAU,OAAO,IAAI;EAC3B,QAAQ,UAAU;EAElB,MAAM,UAAU,cAAc;GAC5B,SAAS,cAAc;IACrB,OAAO,oBAAC,GAAG,MAAJ,EAAS,MAAM,QAAQ,QAAU,CAAA;GAC1C;GACA,OAAO;EACT,GAAG,CAAC,CAAC;EAEL,OAAO,OAAO,OAAO,MAAM,EAAE,QAAQ,CAAC;CAGxC;CAEA,OAAO;EACL;EACA,gBAAgB,GAAG;CACrB;AACF"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { Context } from 'preact/compat';
|
|
2
|
+
import { ChatUIInterrupt, ChatUISelectedPart } from '@tanstack/ai-client/ui';
|
|
3
|
+
import { UseChatReturn } from '../types.js';
|
|
4
|
+
/**
|
|
5
|
+
* Scoped chat, part, and interrupt contexts plus matching context hooks.
|
|
6
|
+
* Pass these into {@link createChatHook} when widgets live in other files, or
|
|
7
|
+
* when two chat trees nest and must not share the default contexts.
|
|
8
|
+
*/
|
|
9
|
+
export interface ChatUIContexts {
|
|
10
|
+
chatContext: Context<UseChatReturn<any, any> | null>;
|
|
11
|
+
partContext: Context<ChatUISelectedPart | null>;
|
|
12
|
+
interruptContext: Context<ChatUIInterrupt | null>;
|
|
13
|
+
useChatContext: () => UseChatReturn<any, any>;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Create a fresh set of chat UI contexts. This matches Form
|
|
17
|
+
* `createFormHookContexts` and Table `createTableHookContexts`.
|
|
18
|
+
*
|
|
19
|
+
* Most apps can skip this. `createChatHook` uses shared module contexts by
|
|
20
|
+
* default. The hooks on this object are the escape hatch for a widget file
|
|
21
|
+
* that cannot import the `createChatHook` result (circular import), or for
|
|
22
|
+
* nested chats that need isolated providers.
|
|
23
|
+
*
|
|
24
|
+
* Prefer the `useChatContext` hook returned from `createChatHook` when you
|
|
25
|
+
* can import that result. That hook knows the `chatComponents` types. Part
|
|
26
|
+
* and interrupt widgets take `part` / `interrupt` as props.
|
|
27
|
+
*/
|
|
28
|
+
export declare function createChatHookContexts(): ChatUIContexts;
|
|
29
|
+
export declare const defaultChatUIContexts: ChatUIContexts;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { createContext, useContext } from "preact/compat";
|
|
2
|
+
//#region src/chat-ui/create-ui-contexts.tsx
|
|
3
|
+
/**
|
|
4
|
+
* Create a fresh set of chat UI contexts. This matches Form
|
|
5
|
+
* `createFormHookContexts` and Table `createTableHookContexts`.
|
|
6
|
+
*
|
|
7
|
+
* Most apps can skip this. `createChatHook` uses shared module contexts by
|
|
8
|
+
* default. The hooks on this object are the escape hatch for a widget file
|
|
9
|
+
* that cannot import the `createChatHook` result (circular import), or for
|
|
10
|
+
* nested chats that need isolated providers.
|
|
11
|
+
*
|
|
12
|
+
* Prefer the `useChatContext` hook returned from `createChatHook` when you
|
|
13
|
+
* can import that result. That hook knows the `chatComponents` types. Part
|
|
14
|
+
* and interrupt widgets take `part` / `interrupt` as props.
|
|
15
|
+
*/
|
|
16
|
+
function createChatHookContexts() {
|
|
17
|
+
const chatContext = createContext(null);
|
|
18
|
+
const partContext = createContext(null);
|
|
19
|
+
const interruptContext = createContext(null);
|
|
20
|
+
function useChatContext() {
|
|
21
|
+
const chat = useContext(chatContext);
|
|
22
|
+
if (!chat) throw new Error("`useChatContext` must be used within `UI.Provider` or `UI.Chat`.");
|
|
23
|
+
return chat;
|
|
24
|
+
}
|
|
25
|
+
return {
|
|
26
|
+
chatContext,
|
|
27
|
+
partContext,
|
|
28
|
+
interruptContext,
|
|
29
|
+
useChatContext
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
var defaultChatUIContexts = createChatHookContexts();
|
|
33
|
+
//#endregion
|
|
34
|
+
export { createChatHookContexts, defaultChatUIContexts };
|
|
35
|
+
|
|
36
|
+
//# sourceMappingURL=create-ui-contexts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"create-ui-contexts.js","names":[],"sources":["../../../src/chat-ui/create-ui-contexts.tsx"],"sourcesContent":["import { createContext, useContext } from 'preact/compat'\nimport type { Context } from 'preact/compat'\nimport type {\n ChatUIInterrupt,\n ChatUISelectedPart,\n} from '@tanstack/ai-client/ui'\nimport type { UseChatReturn } from '../types'\n\n/**\n * Scoped chat, part, and interrupt contexts plus matching context hooks.\n * Pass these into {@link createChatHook} when widgets live in other files, or\n * when two chat trees nest and must not share the default contexts.\n */\nexport interface ChatUIContexts {\n chatContext: Context<UseChatReturn<any, any> | null>\n partContext: Context<ChatUISelectedPart | null>\n interruptContext: Context<ChatUIInterrupt | null>\n useChatContext: () => UseChatReturn<any, any>\n}\n\n/**\n * Create a fresh set of chat UI contexts. This matches Form\n * `createFormHookContexts` and Table `createTableHookContexts`.\n *\n * Most apps can skip this. `createChatHook` uses shared module contexts by\n * default. The hooks on this object are the escape hatch for a widget file\n * that cannot import the `createChatHook` result (circular import), or for\n * nested chats that need isolated providers.\n *\n * Prefer the `useChatContext` hook returned from `createChatHook` when you\n * can import that result. That hook knows the `chatComponents` types. Part\n * and interrupt widgets take `part` / `interrupt` as props.\n */\nexport function createChatHookContexts(): ChatUIContexts {\n const chatContext = createContext<UseChatReturn<any, any> | null>(null)\n const partContext = createContext<ChatUISelectedPart | null>(null)\n const interruptContext = createContext<ChatUIInterrupt | null>(null)\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 return {\n chatContext,\n partContext,\n interruptContext,\n useChatContext,\n }\n}\n\nexport const defaultChatUIContexts = createChatHookContexts()\n"],"mappings":";;;;;;;;;;;;;;;AAiCA,SAAgB,yBAAyC;CACvD,MAAM,cAAc,cAA8C,IAAI;CACtE,MAAM,cAAc,cAAyC,IAAI;CACjE,MAAM,mBAAmB,cAAsC,IAAI;CAEnE,SAAS,iBAAiB;EACxB,MAAM,OAAO,WAAW,WAAW;EACnC,IAAI,CAAC,MACH,MAAM,IAAI,MACR,kEACF;EAEF,OAAO;CACT;CAEA,OAAO;EACL;EACA;EACA;EACA;CACF;AACF;AAEA,IAAa,wBAAwB,uBAAuB"}
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { ComponentChildren } from 'preact';
|
|
2
|
+
import { ComponentType } from 'preact/compat';
|
|
3
|
+
import { ChatUIData, ChatUIHasNamedInterrupts, ChatUIHasNamedTools, ChatUIInterrupt, ChatUIInterruptName, ChatUIInterruptOf, ChatUIInterruptsOf, ChatUIMessages, ChatUINamedInterruptId, ChatUIPartKey, ChatUIPartOf, ChatUISelectedPart, ChatUIToolApproval, ChatUIToolName, ChatUIToolsOf } from '@tanstack/ai-client/ui';
|
|
4
|
+
import { MessagePart, QueuedMessage, ToolCallPart, ToolResultPart, UIMessage } from '@tanstack/ai-client';
|
|
5
|
+
import { UseChatReturn } from '../types.js';
|
|
6
|
+
import { ChatUIContexts } from './create-ui-contexts.js';
|
|
7
|
+
export type ChatUIHost<TOptions = unknown> = UseChatReturn<ChatUIToolsOf<TOptions>, ChatUIInterruptsOf<TOptions>>;
|
|
8
|
+
export type ChatUIQueueItem = QueuedMessage & {
|
|
9
|
+
cancelQueued: () => void;
|
|
10
|
+
};
|
|
11
|
+
export type LayoutProps<TOptions, TInput extends ComponentType<any> | undefined = ComponentType<InputProps<TOptions>>> = {
|
|
12
|
+
Messages: ComponentType;
|
|
13
|
+
Interrupts: ComponentType;
|
|
14
|
+
Queue: ComponentType;
|
|
15
|
+
readonly __ui?: TOptions;
|
|
16
|
+
} & (TInput extends ComponentType<any> ? {
|
|
17
|
+
Input: ComponentType;
|
|
18
|
+
} : {});
|
|
19
|
+
export type MessageProps<TOptions> = {
|
|
20
|
+
message: UIMessage<ChatUIToolsOf<TOptions>, ChatUIData<TOptions>>;
|
|
21
|
+
Parts: ComponentType;
|
|
22
|
+
};
|
|
23
|
+
export type InputProps<TOptions> = {
|
|
24
|
+
readonly __ui?: TOptions;
|
|
25
|
+
};
|
|
26
|
+
export type QueueProps<TOptions> = {
|
|
27
|
+
item: ChatUIQueueItem;
|
|
28
|
+
readonly __ui?: TOptions;
|
|
29
|
+
};
|
|
30
|
+
export type PartProps<TOptions, TKey extends ChatUIPartKey = ChatUIPartKey> = {
|
|
31
|
+
part: ChatUIPartOf<TOptions, TKey>;
|
|
32
|
+
};
|
|
33
|
+
export type ToolProps<TOptions, TName extends ChatUIToolName<TOptions> = ChatUIToolName<TOptions>> = {
|
|
34
|
+
part: Extract<ToolCallPart<ChatUIToolsOf<TOptions>>, {
|
|
35
|
+
name: TName;
|
|
36
|
+
}>;
|
|
37
|
+
result?: ToolResultPart;
|
|
38
|
+
interrupt?: ChatUIToolApproval<TOptions, TName>;
|
|
39
|
+
};
|
|
40
|
+
export type InterruptProps<TOptions, TName extends ChatUIInterruptName<TOptions> = never> = {
|
|
41
|
+
interrupt: ChatUIInterruptOf<TOptions, TName>;
|
|
42
|
+
readonly __ui?: TOptions;
|
|
43
|
+
};
|
|
44
|
+
type GenericInterruptComponents<TOptions> = ChatUIHasNamedInterrupts<TOptions> extends true ? {
|
|
45
|
+
[K in ChatUINamedInterruptId<TOptions>]: ComponentType<InterruptProps<TOptions, K & ChatUIInterruptName<TOptions>>>;
|
|
46
|
+
} & {
|
|
47
|
+
fallback?: ComponentType<InterruptProps<TOptions>>;
|
|
48
|
+
} : {
|
|
49
|
+
fallback?: ComponentType<InterruptProps<TOptions>>;
|
|
50
|
+
};
|
|
51
|
+
type ToolApprovalMap<TOptions> = {
|
|
52
|
+
[K in ChatUIToolName<TOptions>]?: ComponentType<InterruptProps<TOptions, K & ChatUIInterruptName<TOptions>>>;
|
|
53
|
+
};
|
|
54
|
+
/** The chrome around the message list: `layout`, `message`, and `input`. */
|
|
55
|
+
export type ChatUIChromeComponents<TOptions, TInput extends ComponentType<InputProps<TOptions>> | undefined = ComponentType<InputProps<TOptions>>> = {
|
|
56
|
+
layout: ComponentType<LayoutProps<TOptions, TInput>>;
|
|
57
|
+
message: ComponentType<MessageProps<TOptions>>;
|
|
58
|
+
input?: TInput;
|
|
59
|
+
queue?: ComponentType<QueueProps<TOptions>>;
|
|
60
|
+
};
|
|
61
|
+
export type ChatUIPartsComponents<TOptions> = {
|
|
62
|
+
[K in ChatUIPartKey]?: ComponentType<PartProps<TOptions, K>>;
|
|
63
|
+
} & {
|
|
64
|
+
fallback?: ComponentType<PartProps<TOptions>>;
|
|
65
|
+
};
|
|
66
|
+
export type ChatUIInterruptsComponents<TOptions> = {
|
|
67
|
+
tools?: ToolApprovalMap<TOptions>;
|
|
68
|
+
generic: GenericInterruptComponents<TOptions>;
|
|
69
|
+
};
|
|
70
|
+
export type ChatUIComponents<TOptions, TInput extends ComponentType<InputProps<TOptions>> | undefined = ComponentType<InputProps<TOptions>>> = {
|
|
71
|
+
components: ChatUIChromeComponents<TOptions, TInput>;
|
|
72
|
+
partsComponents: ChatUIPartsComponents<TOptions>;
|
|
73
|
+
} & (ChatUIHasNamedTools<TOptions> extends true ? {
|
|
74
|
+
toolsComponents: {
|
|
75
|
+
[K in ChatUIToolName<TOptions>]: ComponentType<ToolProps<TOptions, K>>;
|
|
76
|
+
};
|
|
77
|
+
} : {
|
|
78
|
+
toolsComponents?: {
|
|
79
|
+
[K in ChatUIToolName<TOptions>]?: ComponentType<ToolProps<TOptions, K>>;
|
|
80
|
+
};
|
|
81
|
+
}) & (ChatUIHasNamedInterrupts<TOptions> extends true ? {
|
|
82
|
+
interruptsComponents: ChatUIInterruptsComponents<TOptions>;
|
|
83
|
+
} : {
|
|
84
|
+
interruptsComponents?: {
|
|
85
|
+
tools?: ToolApprovalMap<TOptions>;
|
|
86
|
+
generic?: GenericInterruptComponents<TOptions>;
|
|
87
|
+
};
|
|
88
|
+
});
|
|
89
|
+
/** Scoped contexts, for widgets in other files or nested chat trees. */
|
|
90
|
+
export type ChatUIContextConfig = {
|
|
91
|
+
chatContext?: ChatUIContexts['chatContext'];
|
|
92
|
+
partContext?: ChatUIContexts['partContext'];
|
|
93
|
+
interruptContext?: ChatUIContexts['interruptContext'];
|
|
94
|
+
};
|
|
95
|
+
export type ChatUIFactoryConfig<TOptions, TInput extends ComponentType<InputProps<TOptions>> | undefined = ComponentType<InputProps<TOptions>>> = ChatUIComponents<TOptions, TInput> & {
|
|
96
|
+
context?: ChatUIContextConfig;
|
|
97
|
+
};
|
|
98
|
+
type BoundWidget = ComponentType<Record<string, never>>;
|
|
99
|
+
type PartMixins<TOptions> = {
|
|
100
|
+
[K in ChatUIPartKey]?: BoundWidget;
|
|
101
|
+
} & {
|
|
102
|
+
[K in ChatUIToolName<TOptions>]: BoundWidget;
|
|
103
|
+
} & {
|
|
104
|
+
Render: BoundWidget;
|
|
105
|
+
};
|
|
106
|
+
type InterruptMixins<TOptions> = {
|
|
107
|
+
[K in ChatUINamedInterruptId<TOptions>]: BoundWidget;
|
|
108
|
+
} & {
|
|
109
|
+
[K in ChatUIToolName<TOptions>]?: BoundWidget;
|
|
110
|
+
} & {
|
|
111
|
+
fallback?: BoundWidget;
|
|
112
|
+
Render: BoundWidget;
|
|
113
|
+
};
|
|
114
|
+
/**
|
|
115
|
+
* Bind chat options and UI widgets once at module scope. This matches Form
|
|
116
|
+
* `createFormHook` and Table `createTableHook`: widgets register here, mix
|
|
117
|
+
* onto Part / Interrupt / the UI kit, and automatic dispatch still walks the
|
|
118
|
+
* message list.
|
|
119
|
+
*
|
|
120
|
+
* `chatOptions` is type-only at runtime. Pass optional `chatContext`,
|
|
121
|
+
* `partContext`, and `interruptContext` from {@link createChatHookContexts}
|
|
122
|
+
* when widgets live in other files or when nested chats need isolation.
|
|
123
|
+
*/
|
|
124
|
+
export declare function createChatUI<const TOptions, TInput extends ComponentType<any> | undefined = ComponentType<InputProps<NoInfer<TOptions>>> | undefined>(options: TOptions, config: ChatUIFactoryConfig<NoInfer<TOptions>, TInput>): {
|
|
125
|
+
Chat: ({ chat }: {
|
|
126
|
+
chat: ChatUIHost<TOptions>;
|
|
127
|
+
}) => import("preact").JSX.Element;
|
|
128
|
+
Provider: ({ chat, children, }: {
|
|
129
|
+
chat: ChatUIHost<TOptions>;
|
|
130
|
+
children?: ComponentChildren;
|
|
131
|
+
}) => import("preact").JSX.Element;
|
|
132
|
+
Messages: ({ children, }?: {
|
|
133
|
+
children?: (messages: ChatUIMessages<TOptions>) => ComponentChildren;
|
|
134
|
+
}) => import("preact").JSX.Element;
|
|
135
|
+
Message: ({ message, children, }: {
|
|
136
|
+
message: ChatUIMessages<TOptions>[number];
|
|
137
|
+
children?: (parts: Array<ChatUISelectedPart>) => ComponentChildren;
|
|
138
|
+
}) => import("preact").JSX.Element;
|
|
139
|
+
Part: ({ part, children, }: {
|
|
140
|
+
part: MessagePart | ChatUISelectedPart;
|
|
141
|
+
children?: (mixed: ChatUISelectedPart & PartMixins<TOptions>) => ComponentChildren;
|
|
142
|
+
}) => import("preact").JSX.Element | null;
|
|
143
|
+
Interrupts: ({ children, }?: {
|
|
144
|
+
children?: (interrupts: ReadonlyArray<ChatUIInterrupt>) => ComponentChildren;
|
|
145
|
+
}) => import("preact").JSX.Element;
|
|
146
|
+
Interrupt: ({ interrupt, children, }: {
|
|
147
|
+
interrupt: ChatUIInterrupt;
|
|
148
|
+
children?: (mixed: ChatUIInterrupt & InterruptMixins<TOptions>) => ComponentChildren;
|
|
149
|
+
}) => import("preact").JSX.Element;
|
|
150
|
+
Queue: () => import("preact").JSX.Element | null;
|
|
151
|
+
useChatContext: () => ChatUIHost<TOptions>;
|
|
152
|
+
Input: TInput | undefined;
|
|
153
|
+
};
|
|
154
|
+
export {};
|