@ai-gui/vue 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -105,7 +105,7 @@ const MountHost = (0, vue.defineComponent)({
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
 function renderOutput(out, sanitize, context = {}) {
 	switch (out.kind) {
-		case "html": return (0, vue.h)("div", { innerHTML: sanitizeOutput(out.html, sanitize) });
+		case "html": return (0, vue.h)("div", { innerHTML: (0, __ai_gui_core.sanitizeRenderedHtml)(out.html, sanitize, out.trusted) });
 		case "element": return (0, vue.h)(out.tag, out.props, (out.children ?? []).map((child) => renderOutput(child, sanitize, context)));
 		case "mount": return (0, vue.h)(MountHost, {
 			mount: out.mount,
@@ -191,10 +191,6 @@ function createRenderMountContext(registry, onCardAction) {
 		};
 	} };
 }
-function sanitizeOutput(html, sanitize) {
-	if (sanitize === false) return html;
-	return (0, __ai_gui_core.sanitizeHtml)(html, typeof sanitize === "object" ? sanitize : void 0);
-}
 
 //#endregion
 //#region src/render-node.ts
@@ -207,7 +203,7 @@ function renderNode(node, ctx) {
 			"data-block-type": node.type
 		});
 		try {
-			const out = r(node);
+			const out = r(node, { theme: ctx.theme });
 			const mountContext = createRenderMountContext(ctx.registry, ctx.onCardAction);
 			if (out && typeof out.then === "function") return (0, vue.h)(AsyncOutput, {
 				key: node.key,
@@ -377,8 +373,16 @@ function renderHtml(html, ctx) {
 //#region src/ai-renderer.ts
 const AIRenderer = (0, vue.defineComponent)({
 	name: "AIRenderer",
-	emits: ["card-action"],
+	emits: ["card-action", "render"],
 	props: {
+		text: {
+			type: String,
+			default: void 0
+		},
+		theme: {
+			type: String,
+			default: void 0
+		},
 		registry: {
 			type: Object,
 			default: void 0
@@ -451,18 +455,40 @@ const AIRenderer = (0, vue.defineComponent)({
 			resetActionScope();
 			current.value.destroy();
 		});
+		const root = (0, vue.shallowRef)();
+		(0, vue.watch)(() => current.value.nodes.value, (nodes) => emit("render", nodes), { immediate: true });
+		let rendered = "";
+		const syncText = () => {
+			const text = props.text;
+			if (text === void 0 || text === rendered) return;
+			if (text.startsWith(rendered)) current.value.push(text.slice(rendered.length));
+			else {
+				resetActionScope();
+				current.value.reset();
+				current.value.push(text);
+			}
+			rendered = text;
+		};
+		(0, vue.watch)(() => props.text, syncText, { immediate: true });
+		(0, vue.watch)(current, () => {
+			rendered = "";
+			syncText();
+		});
 		const push = (chunk) => current.value.push(chunk);
 		const feed = (source, options) => current.value.feed(source, options);
 		const reset = () => {
 			resetActionScope();
+			rendered = "";
 			current.value.reset();
 		};
+		const exportImages = (options) => root.value ? (0, __ai_gui_core.exportRenderedImages)(root.value, options) : Promise.resolve([]);
 		expose({
 			debugSource: "renderer",
 			subscribeDebug: (listener) => current.value.renderer.subscribeDebug(listener),
 			push,
 			feed,
-			reset
+			reset,
+			exportImages
 		});
 		return () => {
 			const onCardAction = (action) => {
@@ -487,9 +513,13 @@ const AIRenderer = (0, vue.defineComponent)({
 				nodeRenderers: nodeRenderers.value,
 				onCardAction,
 				sanitize: props.sanitize,
-				sanitized: true
+				sanitized: true,
+				theme: props.theme
 			};
-			return (0, vue.h)("div", { "data-aigui-renderer": "" }, current.value.nodes.value.map((n) => renderNode(n, ctx)));
+			return (0, vue.h)("div", {
+				"data-aigui-renderer": "",
+				ref: root
+			}, current.value.nodes.value.map((n) => renderNode(n, ctx)));
 		};
 	}
 });

package/dist/index.d.cts

@@ -35,6 +35,8 @@ interface RenderContext {
   }) => void;
   sanitize?: RendererOptions["sanitize"];
   sanitized?: boolean;
+  /** The host's colour scheme, handed to every plugin that renders a node. */
+  theme?: string;
 }
 declare function renderNode(node: ASTNode, ctx: RenderContext): VNode;
 

package/dist/index.d.ts

@@ -35,6 +35,8 @@ interface RenderContext {
   }) => void;
   sanitize?: RendererOptions["sanitize"];
   sanitized?: boolean;
+  /** The host's colour scheme, handed to every plugin that renders a node. */
+  theme?: string;
 }
 declare function renderNode(node: ASTNode, ctx: RenderContext): VNode;
 

package/dist/index.js

@@ -1,5 +1,5 @@
 import { defineComponent, h, markRaw, onBeforeUnmount, onMounted, onScopeDispose, ref, render, shallowRef, toRaw, watch } from "vue";
-import { Renderer, collectNodeRenderers, sanitizeHtml } from "@ai-gui/core";
+import { Renderer, collectNodeRenderers, exportRenderedImages, sanitizeHtml, sanitizeRenderedHtml } from "@ai-gui/core";
 
 //#region src/use-ai-renderer.ts
 function useAIRenderer(options = {}) {
@@ -81,7 +81,7 @@ const MountHost = defineComponent({
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
 function renderOutput(out, sanitize, context = {}) {
 	switch (out.kind) {
-		case "html": return h("div", { innerHTML: sanitizeOutput(out.html, sanitize) });
+		case "html": return h("div", { innerHTML: sanitizeRenderedHtml(out.html, sanitize, out.trusted) });
 		case "element": return h(out.tag, out.props, (out.children ?? []).map((child) => renderOutput(child, sanitize, context)));
 		case "mount": return h(MountHost, {
 			mount: out.mount,
@@ -167,10 +167,6 @@ function createRenderMountContext(registry, onCardAction) {
 		};
 	} };
 }
-function sanitizeOutput(html, sanitize) {
-	if (sanitize === false) return html;
-	return sanitizeHtml(html, typeof sanitize === "object" ? sanitize : void 0);
-}
 
 //#endregion
 //#region src/render-node.ts
@@ -183,7 +179,7 @@ function renderNode(node, ctx) {
 			"data-block-type": node.type
 		});
 		try {
-			const out = r(node);
+			const out = r(node, { theme: ctx.theme });
 			const mountContext = createRenderMountContext(ctx.registry, ctx.onCardAction);
 			if (out && typeof out.then === "function") return h(AsyncOutput, {
 				key: node.key,
@@ -353,8 +349,16 @@ function renderHtml(html, ctx) {
 //#region src/ai-renderer.ts
 const AIRenderer = defineComponent({
 	name: "AIRenderer",
-	emits: ["card-action"],
+	emits: ["card-action", "render"],
 	props: {
+		text: {
+			type: String,
+			default: void 0
+		},
+		theme: {
+			type: String,
+			default: void 0
+		},
 		registry: {
 			type: Object,
 			default: void 0
@@ -427,18 +431,40 @@ const AIRenderer = defineComponent({
 			resetActionScope();
 			current.value.destroy();
 		});
+		const root = shallowRef();
+		watch(() => current.value.nodes.value, (nodes) => emit("render", nodes), { immediate: true });
+		let rendered = "";
+		const syncText = () => {
+			const text = props.text;
+			if (text === void 0 || text === rendered) return;
+			if (text.startsWith(rendered)) current.value.push(text.slice(rendered.length));
+			else {
+				resetActionScope();
+				current.value.reset();
+				current.value.push(text);
+			}
+			rendered = text;
+		};
+		watch(() => props.text, syncText, { immediate: true });
+		watch(current, () => {
+			rendered = "";
+			syncText();
+		});
 		const push = (chunk) => current.value.push(chunk);
 		const feed = (source, options) => current.value.feed(source, options);
 		const reset = () => {
 			resetActionScope();
+			rendered = "";
 			current.value.reset();
 		};
+		const exportImages = (options) => root.value ? exportRenderedImages(root.value, options) : Promise.resolve([]);
 		expose({
 			debugSource: "renderer",
 			subscribeDebug: (listener) => current.value.renderer.subscribeDebug(listener),
 			push,
 			feed,
-			reset
+			reset,
+			exportImages
 		});
 		return () => {
 			const onCardAction = (action) => {
@@ -463,9 +489,13 @@ const AIRenderer = defineComponent({
 				nodeRenderers: nodeRenderers.value,
 				onCardAction,
 				sanitize: props.sanitize,
-				sanitized: true
+				sanitized: true,
+				theme: props.theme
 			};
-			return h("div", { "data-aigui-renderer": "" }, current.value.nodes.value.map((n) => renderNode(n, ctx)));
+			return h("div", {
+				"data-aigui-renderer": "",
+				ref: root
+			}, current.value.nodes.value.map((n) => renderNode(n, ctx)));
 		};
 	}
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/vue",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Vue 3 adapter for AIGUI — stream LLM output into live Vue components with cards and plugins.",
   "keywords": [
     "llm",
@@ -51,7 +51,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@ai-gui/core": "0.5.0"
+    "@ai-gui/core": "0.6.0"
   },
   "peerDependencies": {
     "vue": ">=3.3"