@ai-gui/react 0.1.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/LICENSE +21 -0
- package/README.md +49 -0
- package/dist/index.cjs +207 -0
- package/dist/index.d.cts +54 -0
- package/dist/index.d.ts +54 -0
- package/dist/index.js +179 -0
- package/package.json +61 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Liang Li
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# @ai-gui/react
|
|
2
|
+
|
|
3
|
+
React adapter for [AIGUI](../../README.md) — renders a streaming LLM response into React, with app-defined cards and plugins.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
pnpm add @ai-gui/core @ai-gui/react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { CardRegistry } from "@ai-gui/core"
|
|
15
|
+
import { AIRenderer } from "@ai-gui/react"
|
|
16
|
+
import { useRef } from "react"
|
|
17
|
+
|
|
18
|
+
const registry = new CardRegistry()
|
|
19
|
+
registry.register({
|
|
20
|
+
type: "weather",
|
|
21
|
+
description: "Weather summary",
|
|
22
|
+
// card render = a React component receiving { data, onAction }
|
|
23
|
+
render: ({ data, onAction }: { data: any; onAction: (a: any) => void }) => (
|
|
24
|
+
<div>
|
|
25
|
+
{data.city} — {data.tempC}°C
|
|
26
|
+
<button onClick={() => onAction({ type: "refresh", params: { city: data.city } })}>Refresh</button>
|
|
27
|
+
</div>
|
|
28
|
+
),
|
|
29
|
+
})
|
|
30
|
+
|
|
31
|
+
function Chat() {
|
|
32
|
+
const ref = useRef<React.ComponentRef<typeof AIRenderer>>(null)
|
|
33
|
+
// ref.current?.push(chunk) / feed(source) / reset()
|
|
34
|
+
return (
|
|
35
|
+
<AIRenderer
|
|
36
|
+
ref={ref}
|
|
37
|
+
registry={registry}
|
|
38
|
+
onCardAction={({ type, params, cardType }) => {/* app makes the real request */}}
|
|
39
|
+
/>
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Exports
|
|
45
|
+
|
|
46
|
+
- `<AIRenderer ref registry plugins sanitize onCardAction />` — imperative `ref.current.push/feed/reset`.
|
|
47
|
+
- `useAIRenderer(options)` → `{ nodes, push, feed, reset }` — the hook form when you want to render `nodes` yourself.
|
|
48
|
+
|
|
49
|
+
See the [root README](../../README.md) for cards, plugins, and `buildSystemPrompt`.
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
//#region rolldown:runtime
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
11
|
+
key = keys[i];
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
13
|
+
get: ((k) => from[k]).bind(null, key),
|
|
14
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
20
|
+
value: mod,
|
|
21
|
+
enumerable: true
|
|
22
|
+
}) : target, mod));
|
|
23
|
+
|
|
24
|
+
//#endregion
|
|
25
|
+
const react = __toESM(require("react"));
|
|
26
|
+
const __ai_gui_core = __toESM(require("@ai-gui/core"));
|
|
27
|
+
const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
|
|
28
|
+
|
|
29
|
+
//#region src/use-ai-renderer.ts
|
|
30
|
+
function useAIRenderer(options = {}) {
|
|
31
|
+
const [nodes, setNodes] = (0, react.useState)([]);
|
|
32
|
+
const renderer = (0, react.useMemo)(() => {
|
|
33
|
+
return new __ai_gui_core.Renderer({
|
|
34
|
+
...options,
|
|
35
|
+
onPatch: (_patches, nextNodes) => setNodes(nextNodes)
|
|
36
|
+
});
|
|
37
|
+
}, [
|
|
38
|
+
options.registry,
|
|
39
|
+
options.sanitize,
|
|
40
|
+
options.plugins
|
|
41
|
+
]);
|
|
42
|
+
const push = (0, react.useCallback)((chunk) => renderer.push(chunk), [renderer]);
|
|
43
|
+
const feed = (0, react.useCallback)((source) => renderer.feed(source), [renderer]);
|
|
44
|
+
const reset = (0, react.useCallback)(() => {
|
|
45
|
+
renderer.reset();
|
|
46
|
+
setNodes([]);
|
|
47
|
+
}, [renderer]);
|
|
48
|
+
return {
|
|
49
|
+
nodes,
|
|
50
|
+
push,
|
|
51
|
+
feed,
|
|
52
|
+
reset
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
//#endregion
|
|
57
|
+
//#region src/render-output.tsx
|
|
58
|
+
/** Translate a framework-neutral RenderOutput into React nodes. */
|
|
59
|
+
function renderOutput(out, key) {
|
|
60
|
+
switch (out.kind) {
|
|
61
|
+
case "html": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: (0, __ai_gui_core.sanitizeHtml)(out.html) } }, key);
|
|
62
|
+
case "element": return (0, react.createElement)(out.tag, {
|
|
63
|
+
key,
|
|
64
|
+
...out.props
|
|
65
|
+
}, (out.children ?? []).map((c, i) => renderOutput(c, String(i))));
|
|
66
|
+
case "card": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
|
|
67
|
+
"data-aigui-card-fallback": true,
|
|
68
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: JSON.stringify(out.data, null, 2) })
|
|
69
|
+
}, key);
|
|
70
|
+
case "mount": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MountHost, { mount: out.mount }, key);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
/** Host a framework-neutral imperative mount into a managed DOM element. */
|
|
74
|
+
function MountHost({ mount }) {
|
|
75
|
+
const ref = (0, react.useRef)(null);
|
|
76
|
+
(0, react.useEffect)(() => {
|
|
77
|
+
if (!ref.current) return;
|
|
78
|
+
const cleanup = mount(ref.current);
|
|
79
|
+
return () => {
|
|
80
|
+
if (typeof cleanup === "function") cleanup();
|
|
81
|
+
};
|
|
82
|
+
}, []);
|
|
83
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
84
|
+
ref,
|
|
85
|
+
"data-aigui-mount": true
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
/** Await an async RenderOutput, rendering a placeholder until it resolves. */
|
|
89
|
+
function AsyncOutput({ promise }) {
|
|
90
|
+
const [resolved, setResolved] = (0, react.useState)(null);
|
|
91
|
+
(0, react.useEffect)(() => {
|
|
92
|
+
let cancelled = false;
|
|
93
|
+
promise.then((out) => {
|
|
94
|
+
if (!cancelled) setResolved(out);
|
|
95
|
+
});
|
|
96
|
+
return () => {
|
|
97
|
+
cancelled = true;
|
|
98
|
+
};
|
|
99
|
+
}, [promise]);
|
|
100
|
+
if (resolved === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "data-aigui-async-pending": true });
|
|
101
|
+
return renderOutput(resolved);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
//#endregion
|
|
105
|
+
//#region src/render-node.tsx
|
|
106
|
+
function renderNode(node, ctx) {
|
|
107
|
+
const r = (0, __ai_gui_core.collectNodeRenderers)(ctx.plugins)[node.type];
|
|
108
|
+
if (r) {
|
|
109
|
+
const out = r(node);
|
|
110
|
+
if (out && typeof out.then === "function") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AsyncOutput, { promise: out }, node.key);
|
|
111
|
+
return renderOutput(out, node.key);
|
|
112
|
+
}
|
|
113
|
+
switch (node.type) {
|
|
114
|
+
case "heading": return (0, react.createElement)(node.tag ?? "h1", {
|
|
115
|
+
key: node.key,
|
|
116
|
+
dangerouslySetInnerHTML: { __html: node.html ?? "" }
|
|
117
|
+
});
|
|
118
|
+
case "paragraph": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { dangerouslySetInnerHTML: { __html: node.html ?? "" } }, node.key);
|
|
119
|
+
case "code": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
|
|
120
|
+
"data-lang": node.attrs?.lang,
|
|
121
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: node.content })
|
|
122
|
+
}, node.key);
|
|
123
|
+
case "hr": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {}, node.key);
|
|
124
|
+
case "html": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: node.content ?? "" } }, node.key);
|
|
125
|
+
case "card": return renderCard(node, ctx);
|
|
126
|
+
default: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: node.html ?? (0, __ai_gui_core.sanitizeHtml)(node.content ?? "") } }, node.key);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
function renderCard(node, ctx) {
|
|
130
|
+
const card = node.card;
|
|
131
|
+
if (!card) return null;
|
|
132
|
+
if (!card.complete) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
133
|
+
"data-aigui-card-loading": true,
|
|
134
|
+
"data-card-type": card.type
|
|
135
|
+
}, node.key);
|
|
136
|
+
if (!card.valid) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
|
|
137
|
+
"data-aigui-card-invalid": true,
|
|
138
|
+
"data-card-type": card.type,
|
|
139
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: JSON.stringify(card.data, null, 2) })
|
|
140
|
+
}, node.key);
|
|
141
|
+
const Comp = getCardComponent(ctx.registry, card.type);
|
|
142
|
+
if (!Comp) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
|
|
143
|
+
"data-aigui-card-fallback": true,
|
|
144
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: JSON.stringify(card.data, null, 2) })
|
|
145
|
+
}, node.key);
|
|
146
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
|
|
147
|
+
data: card.data,
|
|
148
|
+
onAction: (a) => ctx.onCardAction?.({
|
|
149
|
+
...a,
|
|
150
|
+
cardType: card.type
|
|
151
|
+
})
|
|
152
|
+
}, node.key);
|
|
153
|
+
}
|
|
154
|
+
function getCardComponent(registry, type) {
|
|
155
|
+
if (!registry) return void 0;
|
|
156
|
+
return registry.getRender(type);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
//#endregion
|
|
160
|
+
//#region src/ai-renderer.tsx
|
|
161
|
+
const AIRenderer = (0, react.forwardRef)(function AIRenderer$1(props, ref) {
|
|
162
|
+
const { registry, sanitize, plugins, onCardAction, className } = props;
|
|
163
|
+
const opts = {
|
|
164
|
+
registry,
|
|
165
|
+
sanitize,
|
|
166
|
+
plugins
|
|
167
|
+
};
|
|
168
|
+
const { nodes, push, feed, reset } = useAIRenderer(opts);
|
|
169
|
+
(0, react.useImperativeHandle)(ref, () => ({
|
|
170
|
+
push,
|
|
171
|
+
feed,
|
|
172
|
+
reset
|
|
173
|
+
}), [
|
|
174
|
+
push,
|
|
175
|
+
feed,
|
|
176
|
+
reset
|
|
177
|
+
]);
|
|
178
|
+
const ctx = {
|
|
179
|
+
registry,
|
|
180
|
+
plugins,
|
|
181
|
+
onCardAction
|
|
182
|
+
};
|
|
183
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
184
|
+
className,
|
|
185
|
+
"data-aigui-renderer": true,
|
|
186
|
+
children: nodes.map((n) => renderNode(n, ctx))
|
|
187
|
+
});
|
|
188
|
+
});
|
|
189
|
+
|
|
190
|
+
//#endregion
|
|
191
|
+
//#region src/apply-patches.ts
|
|
192
|
+
function applyPatches(nodes, patches) {
|
|
193
|
+
let out = nodes.slice();
|
|
194
|
+
for (const p of patches) if (p.op === "insert") out.splice(p.index, 0, p.node);
|
|
195
|
+
else if (p.op === "update") {
|
|
196
|
+
const i = out.findIndex((n) => n.key === p.key);
|
|
197
|
+
if (i >= 0) out[i] = p.node;
|
|
198
|
+
} else if (p.op === "remove") out = out.filter((n) => n.key !== p.key);
|
|
199
|
+
return out;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
//#endregion
|
|
203
|
+
exports.AIRenderer = AIRenderer
|
|
204
|
+
exports.applyPatches = applyPatches
|
|
205
|
+
exports.renderNode = renderNode
|
|
206
|
+
exports.renderOutput = renderOutput
|
|
207
|
+
exports.useAIRenderer = useAIRenderer
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { AIGuiPlugin, ASTNode, CardRegistry, Patch, RenderOutput, RendererOptions } from "@ai-gui/core";
|
|
2
|
+
import * as react0 from "react";
|
|
3
|
+
import * as react1 from "react";
|
|
4
|
+
import { ReactNode } from "react";
|
|
5
|
+
|
|
6
|
+
//#region src/use-ai-renderer.d.ts
|
|
7
|
+
interface UseAIRendererResult {
|
|
8
|
+
nodes: ASTNode[];
|
|
9
|
+
push: (chunk: string) => void;
|
|
10
|
+
feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
|
|
11
|
+
reset: () => void;
|
|
12
|
+
}
|
|
13
|
+
declare function useAIRenderer(options?: Omit<RendererOptions, "onPatch">): UseAIRendererResult;
|
|
14
|
+
|
|
15
|
+
//#endregion
|
|
16
|
+
//#region src/render-node.d.ts
|
|
17
|
+
interface RenderContext {
|
|
18
|
+
registry?: CardRegistry;
|
|
19
|
+
plugins?: AIGuiPlugin[];
|
|
20
|
+
onCardAction?: (action: {
|
|
21
|
+
type: string;
|
|
22
|
+
params?: unknown;
|
|
23
|
+
cardType: string;
|
|
24
|
+
}) => void;
|
|
25
|
+
}
|
|
26
|
+
declare function renderNode(node: ASTNode, ctx: RenderContext): ReactNode;
|
|
27
|
+
|
|
28
|
+
//#endregion
|
|
29
|
+
//#region src/ai-renderer.d.ts
|
|
30
|
+
interface AIRendererHandle {
|
|
31
|
+
push: (chunk: string) => void;
|
|
32
|
+
feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
|
|
33
|
+
reset: () => void;
|
|
34
|
+
}
|
|
35
|
+
interface AIRendererProps {
|
|
36
|
+
registry?: CardRegistry;
|
|
37
|
+
sanitize?: boolean;
|
|
38
|
+
plugins?: AIGuiPlugin[];
|
|
39
|
+
onCardAction?: RenderContext["onCardAction"];
|
|
40
|
+
className?: string;
|
|
41
|
+
}
|
|
42
|
+
declare const AIRenderer: react1.ForwardRefExoticComponent<AIRendererProps & react0.RefAttributes<AIRendererHandle>>;
|
|
43
|
+
|
|
44
|
+
//#endregion
|
|
45
|
+
//#region src/render-output.d.ts
|
|
46
|
+
/** Translate a framework-neutral RenderOutput into React nodes. */
|
|
47
|
+
declare function renderOutput(out: RenderOutput, key?: string): ReactNode;
|
|
48
|
+
|
|
49
|
+
//#endregion
|
|
50
|
+
//#region src/apply-patches.d.ts
|
|
51
|
+
declare function applyPatches(nodes: ASTNode[], patches: Patch[]): ASTNode[];
|
|
52
|
+
|
|
53
|
+
//#endregion
|
|
54
|
+
export { AIRenderer, AIRendererHandle, AIRendererProps, RenderContext, UseAIRendererResult, applyPatches, renderNode, renderOutput, useAIRenderer };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import * as react0 from "react";
|
|
2
|
+
import * as react1 from "react";
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
|
+
import { AIGuiPlugin, ASTNode, CardRegistry, Patch, RenderOutput, RendererOptions } from "@ai-gui/core";
|
|
5
|
+
|
|
6
|
+
//#region src/use-ai-renderer.d.ts
|
|
7
|
+
interface UseAIRendererResult {
|
|
8
|
+
nodes: ASTNode[];
|
|
9
|
+
push: (chunk: string) => void;
|
|
10
|
+
feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
|
|
11
|
+
reset: () => void;
|
|
12
|
+
}
|
|
13
|
+
declare function useAIRenderer(options?: Omit<RendererOptions, "onPatch">): UseAIRendererResult;
|
|
14
|
+
|
|
15
|
+
//#endregion
|
|
16
|
+
//#region src/render-node.d.ts
|
|
17
|
+
interface RenderContext {
|
|
18
|
+
registry?: CardRegistry;
|
|
19
|
+
plugins?: AIGuiPlugin[];
|
|
20
|
+
onCardAction?: (action: {
|
|
21
|
+
type: string;
|
|
22
|
+
params?: unknown;
|
|
23
|
+
cardType: string;
|
|
24
|
+
}) => void;
|
|
25
|
+
}
|
|
26
|
+
declare function renderNode(node: ASTNode, ctx: RenderContext): ReactNode;
|
|
27
|
+
|
|
28
|
+
//#endregion
|
|
29
|
+
//#region src/ai-renderer.d.ts
|
|
30
|
+
interface AIRendererHandle {
|
|
31
|
+
push: (chunk: string) => void;
|
|
32
|
+
feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
|
|
33
|
+
reset: () => void;
|
|
34
|
+
}
|
|
35
|
+
interface AIRendererProps {
|
|
36
|
+
registry?: CardRegistry;
|
|
37
|
+
sanitize?: boolean;
|
|
38
|
+
plugins?: AIGuiPlugin[];
|
|
39
|
+
onCardAction?: RenderContext["onCardAction"];
|
|
40
|
+
className?: string;
|
|
41
|
+
}
|
|
42
|
+
declare const AIRenderer: react1.ForwardRefExoticComponent<AIRendererProps & react0.RefAttributes<AIRendererHandle>>;
|
|
43
|
+
|
|
44
|
+
//#endregion
|
|
45
|
+
//#region src/render-output.d.ts
|
|
46
|
+
/** Translate a framework-neutral RenderOutput into React nodes. */
|
|
47
|
+
declare function renderOutput(out: RenderOutput, key?: string): ReactNode;
|
|
48
|
+
|
|
49
|
+
//#endregion
|
|
50
|
+
//#region src/apply-patches.d.ts
|
|
51
|
+
declare function applyPatches(nodes: ASTNode[], patches: Patch[]): ASTNode[];
|
|
52
|
+
|
|
53
|
+
//#endregion
|
|
54
|
+
export { AIRenderer, AIRendererHandle, AIRendererProps, RenderContext, UseAIRendererResult, applyPatches, renderNode, renderOutput, useAIRenderer };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import { createElement, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
|
|
2
|
+
import { Renderer, collectNodeRenderers, sanitizeHtml } from "@ai-gui/core";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
|
|
5
|
+
//#region src/use-ai-renderer.ts
|
|
6
|
+
function useAIRenderer(options = {}) {
|
|
7
|
+
const [nodes, setNodes] = useState([]);
|
|
8
|
+
const renderer = useMemo(() => {
|
|
9
|
+
return new Renderer({
|
|
10
|
+
...options,
|
|
11
|
+
onPatch: (_patches, nextNodes) => setNodes(nextNodes)
|
|
12
|
+
});
|
|
13
|
+
}, [
|
|
14
|
+
options.registry,
|
|
15
|
+
options.sanitize,
|
|
16
|
+
options.plugins
|
|
17
|
+
]);
|
|
18
|
+
const push = useCallback((chunk) => renderer.push(chunk), [renderer]);
|
|
19
|
+
const feed = useCallback((source) => renderer.feed(source), [renderer]);
|
|
20
|
+
const reset = useCallback(() => {
|
|
21
|
+
renderer.reset();
|
|
22
|
+
setNodes([]);
|
|
23
|
+
}, [renderer]);
|
|
24
|
+
return {
|
|
25
|
+
nodes,
|
|
26
|
+
push,
|
|
27
|
+
feed,
|
|
28
|
+
reset
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
//#endregion
|
|
33
|
+
//#region src/render-output.tsx
|
|
34
|
+
/** Translate a framework-neutral RenderOutput into React nodes. */
|
|
35
|
+
function renderOutput(out, key) {
|
|
36
|
+
switch (out.kind) {
|
|
37
|
+
case "html": return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: sanitizeHtml(out.html) } }, key);
|
|
38
|
+
case "element": return createElement(out.tag, {
|
|
39
|
+
key,
|
|
40
|
+
...out.props
|
|
41
|
+
}, (out.children ?? []).map((c, i) => renderOutput(c, String(i))));
|
|
42
|
+
case "card": return /* @__PURE__ */ jsx("pre", {
|
|
43
|
+
"data-aigui-card-fallback": true,
|
|
44
|
+
children: /* @__PURE__ */ jsx("code", { children: JSON.stringify(out.data, null, 2) })
|
|
45
|
+
}, key);
|
|
46
|
+
case "mount": return /* @__PURE__ */ jsx(MountHost, { mount: out.mount }, key);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
/** Host a framework-neutral imperative mount into a managed DOM element. */
|
|
50
|
+
function MountHost({ mount }) {
|
|
51
|
+
const ref = useRef(null);
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
if (!ref.current) return;
|
|
54
|
+
const cleanup = mount(ref.current);
|
|
55
|
+
return () => {
|
|
56
|
+
if (typeof cleanup === "function") cleanup();
|
|
57
|
+
};
|
|
58
|
+
}, []);
|
|
59
|
+
return /* @__PURE__ */ jsx("div", {
|
|
60
|
+
ref,
|
|
61
|
+
"data-aigui-mount": true
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
/** Await an async RenderOutput, rendering a placeholder until it resolves. */
|
|
65
|
+
function AsyncOutput({ promise }) {
|
|
66
|
+
const [resolved, setResolved] = useState(null);
|
|
67
|
+
useEffect(() => {
|
|
68
|
+
let cancelled = false;
|
|
69
|
+
promise.then((out) => {
|
|
70
|
+
if (!cancelled) setResolved(out);
|
|
71
|
+
});
|
|
72
|
+
return () => {
|
|
73
|
+
cancelled = true;
|
|
74
|
+
};
|
|
75
|
+
}, [promise]);
|
|
76
|
+
if (resolved === null) return /* @__PURE__ */ jsx("span", { "data-aigui-async-pending": true });
|
|
77
|
+
return renderOutput(resolved);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
//#endregion
|
|
81
|
+
//#region src/render-node.tsx
|
|
82
|
+
function renderNode(node, ctx) {
|
|
83
|
+
const r = collectNodeRenderers(ctx.plugins)[node.type];
|
|
84
|
+
if (r) {
|
|
85
|
+
const out = r(node);
|
|
86
|
+
if (out && typeof out.then === "function") return /* @__PURE__ */ jsx(AsyncOutput, { promise: out }, node.key);
|
|
87
|
+
return renderOutput(out, node.key);
|
|
88
|
+
}
|
|
89
|
+
switch (node.type) {
|
|
90
|
+
case "heading": return createElement(node.tag ?? "h1", {
|
|
91
|
+
key: node.key,
|
|
92
|
+
dangerouslySetInnerHTML: { __html: node.html ?? "" }
|
|
93
|
+
});
|
|
94
|
+
case "paragraph": return /* @__PURE__ */ jsx("p", { dangerouslySetInnerHTML: { __html: node.html ?? "" } }, node.key);
|
|
95
|
+
case "code": return /* @__PURE__ */ jsx("pre", {
|
|
96
|
+
"data-lang": node.attrs?.lang,
|
|
97
|
+
children: /* @__PURE__ */ jsx("code", { children: node.content })
|
|
98
|
+
}, node.key);
|
|
99
|
+
case "hr": return /* @__PURE__ */ jsx("hr", {}, node.key);
|
|
100
|
+
case "html": return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: node.content ?? "" } }, node.key);
|
|
101
|
+
case "card": return renderCard(node, ctx);
|
|
102
|
+
default: return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: node.html ?? sanitizeHtml(node.content ?? "") } }, node.key);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
function renderCard(node, ctx) {
|
|
106
|
+
const card = node.card;
|
|
107
|
+
if (!card) return null;
|
|
108
|
+
if (!card.complete) return /* @__PURE__ */ jsx("div", {
|
|
109
|
+
"data-aigui-card-loading": true,
|
|
110
|
+
"data-card-type": card.type
|
|
111
|
+
}, node.key);
|
|
112
|
+
if (!card.valid) return /* @__PURE__ */ jsx("pre", {
|
|
113
|
+
"data-aigui-card-invalid": true,
|
|
114
|
+
"data-card-type": card.type,
|
|
115
|
+
children: /* @__PURE__ */ jsx("code", { children: JSON.stringify(card.data, null, 2) })
|
|
116
|
+
}, node.key);
|
|
117
|
+
const Comp = getCardComponent(ctx.registry, card.type);
|
|
118
|
+
if (!Comp) return /* @__PURE__ */ jsx("pre", {
|
|
119
|
+
"data-aigui-card-fallback": true,
|
|
120
|
+
children: /* @__PURE__ */ jsx("code", { children: JSON.stringify(card.data, null, 2) })
|
|
121
|
+
}, node.key);
|
|
122
|
+
return /* @__PURE__ */ jsx(Comp, {
|
|
123
|
+
data: card.data,
|
|
124
|
+
onAction: (a) => ctx.onCardAction?.({
|
|
125
|
+
...a,
|
|
126
|
+
cardType: card.type
|
|
127
|
+
})
|
|
128
|
+
}, node.key);
|
|
129
|
+
}
|
|
130
|
+
function getCardComponent(registry, type) {
|
|
131
|
+
if (!registry) return void 0;
|
|
132
|
+
return registry.getRender(type);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
//#endregion
|
|
136
|
+
//#region src/ai-renderer.tsx
|
|
137
|
+
const AIRenderer = forwardRef(function AIRenderer$1(props, ref) {
|
|
138
|
+
const { registry, sanitize, plugins, onCardAction, className } = props;
|
|
139
|
+
const opts = {
|
|
140
|
+
registry,
|
|
141
|
+
sanitize,
|
|
142
|
+
plugins
|
|
143
|
+
};
|
|
144
|
+
const { nodes, push, feed, reset } = useAIRenderer(opts);
|
|
145
|
+
useImperativeHandle(ref, () => ({
|
|
146
|
+
push,
|
|
147
|
+
feed,
|
|
148
|
+
reset
|
|
149
|
+
}), [
|
|
150
|
+
push,
|
|
151
|
+
feed,
|
|
152
|
+
reset
|
|
153
|
+
]);
|
|
154
|
+
const ctx = {
|
|
155
|
+
registry,
|
|
156
|
+
plugins,
|
|
157
|
+
onCardAction
|
|
158
|
+
};
|
|
159
|
+
return /* @__PURE__ */ jsx("div", {
|
|
160
|
+
className,
|
|
161
|
+
"data-aigui-renderer": true,
|
|
162
|
+
children: nodes.map((n) => renderNode(n, ctx))
|
|
163
|
+
});
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
//#endregion
|
|
167
|
+
//#region src/apply-patches.ts
|
|
168
|
+
function applyPatches(nodes, patches) {
|
|
169
|
+
let out = nodes.slice();
|
|
170
|
+
for (const p of patches) if (p.op === "insert") out.splice(p.index, 0, p.node);
|
|
171
|
+
else if (p.op === "update") {
|
|
172
|
+
const i = out.findIndex((n) => n.key === p.key);
|
|
173
|
+
if (i >= 0) out[i] = p.node;
|
|
174
|
+
} else if (p.op === "remove") out = out.filter((n) => n.key !== p.key);
|
|
175
|
+
return out;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
//#endregion
|
|
179
|
+
export { AIRenderer, applyPatches, renderNode, renderOutput, useAIRenderer };
|
package/package.json
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@ai-gui/react",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "React adapter for AIGUI — stream LLM output into live React components with cards, plugins, and interactive widgets.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"llm",
|
|
7
|
+
"ai",
|
|
8
|
+
"streaming",
|
|
9
|
+
"markdown",
|
|
10
|
+
"react",
|
|
11
|
+
"components",
|
|
12
|
+
"cards",
|
|
13
|
+
"aigui"
|
|
14
|
+
],
|
|
15
|
+
"license": "MIT",
|
|
16
|
+
"author": "Liang Li <ll_faw@hotmail.com>",
|
|
17
|
+
"repository": {
|
|
18
|
+
"type": "git",
|
|
19
|
+
"url": "git+https://github.com/liliang-cn/aigui.git",
|
|
20
|
+
"directory": "packages/react"
|
|
21
|
+
},
|
|
22
|
+
"homepage": "https://github.com/liliang-cn/aigui#readme",
|
|
23
|
+
"bugs": "https://github.com/liliang-cn/aigui/issues",
|
|
24
|
+
"type": "module",
|
|
25
|
+
"main": "./dist/index.cjs",
|
|
26
|
+
"module": "./dist/index.js",
|
|
27
|
+
"types": "./dist/index.d.ts",
|
|
28
|
+
"exports": {
|
|
29
|
+
".": {
|
|
30
|
+
"types": "./dist/index.d.ts",
|
|
31
|
+
"import": "./dist/index.js",
|
|
32
|
+
"require": "./dist/index.cjs"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"files": [
|
|
36
|
+
"dist",
|
|
37
|
+
"README.md",
|
|
38
|
+
"LICENSE"
|
|
39
|
+
],
|
|
40
|
+
"publishConfig": {
|
|
41
|
+
"access": "public"
|
|
42
|
+
},
|
|
43
|
+
"dependencies": {
|
|
44
|
+
"@ai-gui/core": "0.1.0"
|
|
45
|
+
},
|
|
46
|
+
"peerDependencies": {
|
|
47
|
+
"react": ">=18"
|
|
48
|
+
},
|
|
49
|
+
"devDependencies": {
|
|
50
|
+
"react": "^18.3.1",
|
|
51
|
+
"react-dom": "^18.3.1",
|
|
52
|
+
"@types/react": "^18.3.12",
|
|
53
|
+
"@types/react-dom": "^18.3.1",
|
|
54
|
+
"@testing-library/react": "^16.0.1",
|
|
55
|
+
"@testing-library/dom": "^10.4.0"
|
|
56
|
+
},
|
|
57
|
+
"scripts": {
|
|
58
|
+
"build": "tsdown",
|
|
59
|
+
"typecheck": "tsc --noEmit"
|
|
60
|
+
}
|
|
61
|
+
}
|