dsh-genui 0.1.3 → 0.2.0

package/README.md

@@ -153,7 +153,11 @@ DSH locks in its plugin set at startup, so **nothing changes in the UI until you
 1. Go back to the terminal running DSH and press `Ctrl+C`
 2. Start it again: `dsh web`
 3. Refresh the browser
-4. **Start a new conversation** — the plugin's prompt is injected when a session begins, so older sessions won't pick it up
+4. **Start a new conversation**
+
+### Turn the authoring prompt on
+
+Click the sparkle button in the composer tool row to turn GenUI authoring on. The toggle starts off after DSH restarts or the plugin reloads, and it only controls the authoring guidance sent to the model. Card rendering stays installed either way.
 
 ### Check that it worked
 
@@ -193,7 +197,7 @@ DSH needs pnpm to manage plugins. Run `corepack enable` (or `npm i -g pnpm`), th
 
 **The AI doesn't use interfaces on its own?**
 
-That's expected; it decides case by case. When you want one, just say "give me a form / chart / interface."
+If the sparkle toggle is off, the model has no GenUI authoring guidance. Turn it on, then say something like "give me a form / chart / interface."
 
 **Does this change how DSH normally works?**
 
@@ -209,7 +213,7 @@ Yes. Run `dsh plugin remove`, restart, and DSH is back to its original state wit
 
 In short: the model no longer writes only text — it also writes a *description of an interface*, and the browser renders that description into real components.
 
-A bit more detail: the plugin adds a prompt section teaching the model to emit structured JSON (inside a `schemaJson` code block) when an interface would help. The DSH web client picks up that JSON and hands it to a renderer. It's streaming, so the interface appears as the model writes it — no waiting for the full reply.
+A bit more detail: when the composer toggle is enabled, the plugin adds a prompt section teaching the model to emit structured JSON (inside a `schemaJson` code block) when an interface would help. The DSH web client picks up that JSON and hands it to a renderer. It's streaming, so the interface appears as the model writes it — no waiting for the full reply.
 
 The components come from [OpenTiny GenUI SDK](https://opentiny.design/genui-sdk) and the OpenTiny Vue library — OpenTiny's generative-UI stack, a spec plus rendering engine for letting LLMs produce interfaces. dsh-genui wires that into the DSH conversation flow.
 
@@ -219,6 +223,7 @@ On safety: the model can only use whitelisted components. It cannot inject HTML
 
 ## Links
 
+- Changelog: <https://github.com/lhuans/dsh-genui/releases>
 - npm package: <https://www.npmjs.com/package/dsh-genui>
 - OpenTiny GenUI SDK: <https://github.com/opentiny/genui-sdk>
 - DeepSeek Harness: <https://github.com/deepseek-ai/deepseek-harness>

package/README.zh-CN.md

@@ -153,7 +153,11 @@ DSH 在启动时就锁定了当前的插件集合，所以**装完插件不重
 1. 回到跑着 DSH 的那个终端，按 `Ctrl+C` 停掉
 2. 重新启动：`dsh web`
 3. 浏览器刷新一下页面
-4. **开一个新会话**（插件的提示词是在会话开始时注入的，旧会话不生效）
+4. **开一个新会话**
+
+### 打开 GenUI 提示词
+
+点击输入框工具行里的星形按钮，开启 GenUI 授权提示词。DSH 重启或插件重新加载后，开关默认关闭；它只控制发给模型的提示词，卡片渲染能力始终保留。
 
 ### 验证装好了没
 
@@ -193,7 +197,7 @@ DSH 管理插件依赖 pnpm。执行 `corepack enable`（或 `npm i -g pnpm`）
 
 **AI 不主动用界面回答？**
 
-正常现象，它会看情况判断。想要的时候明确说一句「用界面/表单/图表的方式给我」就行。
+如果星形开关是关闭的，模型不会收到 GenUI 提示词。先打开开关，再说一句「用界面/表单/图表的方式给我」就行。
 
 **会不会影响原来的用法？**
 
@@ -209,7 +213,7 @@ DSH 管理插件依赖 pnpm。执行 `corepack enable`（或 `npm i -g pnpm`）
 
 一句话：AI 不再只写文字，它还会写一段「界面描述」，浏览器把这段描述渲染成真正的组件。
 
-具体一点：插件给模型加了一段提示词，教它在需要的时候输出一段结构化的 JSON（写在 `schemaJson` 代码块里）；DSH 网页端拿到这段 JSON 后，交给渲染器变成实际组件。整个过程是流式的，AI 写到哪、界面就渲染到哪，不用等它把话说完。
+具体一点：输入框开关打开时，插件给模型加一段提示词，教它在需要的时候输出一段结构化的 JSON（写在 `schemaJson` 代码块里）；DSH 网页端拿到这段 JSON 后，交给渲染器变成实际组件。整个过程是流式的，AI 写到哪、界面就渲染到哪，不用等它把话说完。
 
 组件本身来自 [OpenTiny GenUI SDK](https://opentiny.design/genui-sdk) 和 OpenTiny Vue 组件库——这是 OpenTiny 团队做的生成式 UI 方案，一整套「让大模型输出界面」的规范和渲染引擎。dsh-genui 做的事情，是把它接到了 DSH 的对话流里。
 
@@ -219,6 +223,7 @@ DSH 管理插件依赖 pnpm。执行 `corepack enable`（或 `npm i -g pnpm`）
 
 ## 相关链接
 
+- 更新记录：<https://github.com/lhuans/dsh-genui/releases>
 - npm 包：<https://www.npmjs.com/package/dsh-genui>
 - OpenTiny GenUI SDK：<https://github.com/opentiny/genui-sdk>
 - DeepSeek Harness：<https://github.com/deepseek-ai/deepseek-harness>

package/lib/client.js

@@ -7,6 +7,7 @@ window.__ModuleLoader__.load({
 		let react = require("react");
 		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 		let react_jsx_runtime = require("react/jsx-runtime");
+		let react_dom = require("react-dom");
 		//#region src/client/genui-card-tag.ts
 		/** Custom element tag for the Vue GenUI card (thin client + runtime share this string). */
 		const DSH_GENUI_CARD_TAG = "dsh-genui-card";
@@ -117,9 +118,11 @@ window.__ModuleLoader__.load({
 		* Split assistant text into markdown and schema-card segments.
 		* @param text - full assistant text block (streaming or final).
 		* @param streaming - whether the turn is still generating.
+		* @param interrupted - whether generation was stopped after partial content.
 		* @returns ordered segments for mixed markdown + GenUI rendering.
 		*/
-		function splitAssistantText(text, streaming) {
+		function splitAssistantText(text, streaming, interrupted = false) {
+			const live = streaming || interrupted;
 			const segments = [];
 			let last = 0;
 			COMPLETE_FENCE.lastIndex = 0;
@@ -138,7 +141,7 @@ window.__ModuleLoader__.load({
 			}
 			const rest = text.slice(last);
 			if (rest.length === 0) return segments;
-			if (streaming) {
+			if (live) {
 				const open = OPEN_FENCE.exec(rest);
 				if (open !== null && open.index !== void 0) {
 					const before = rest.slice(0, open.index);
@@ -162,13 +165,13 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:module:src/client/genui-assistant.module.css.mjs
-		const css = ".vHCAGq_root{flex-direction:column;gap:.5rem;min-width:0;display:flex}.vHCAGq_body{flex-direction:column;gap:.75rem;min-width:0;display:flex}.vHCAGq_card{isolation:isolate;border-radius:8px;width:100%;max-width:100%;display:block;overflow:auto}.vHCAGq_card[data-dsh-genui-card-pending],.vHCAGq_card[data-dsh-genui-card-error]{min-height:4.5rem}.vHCAGq_think{opacity:.85;font-size:.9em}.vHCAGq_stopped{opacity:.7;font-style:italic}.vHCAGq_images{flex-wrap:wrap;gap:.5rem;display:flex}.vHCAGq_image{object-fit:contain;border-radius:6px;max-width:100%;max-height:240px}";
-		const tagId = "dsh-genui/src/client/genui-assistant.module.css";
-		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
+		const css$1 = ".vHCAGq_root{flex-direction:column;gap:.5rem;min-width:0;display:flex}.vHCAGq_body{flex-direction:column;gap:.75rem;min-width:0;display:flex}.vHCAGq_card{isolation:isolate;border-radius:8px;width:100%;max-width:100%;display:block;overflow:auto}.vHCAGq_card[data-dsh-genui-card-pending],.vHCAGq_card[data-dsh-genui-card-error]{min-height:4.5rem}.vHCAGq_think{opacity:.85;font-size:.9em}.vHCAGq_stopped{opacity:.7;font-style:italic}.vHCAGq_images{flex-wrap:wrap;gap:.5rem;display:flex}.vHCAGq_image{object-fit:contain;border-radius:6px;max-width:100%;max-height:240px}";
+		const tagId$1 = "dsh-genui/src/client/genui-assistant.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$1) + "]") === null) {
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "dsh-genui";
-			tag.dataset.pluginCss = tagId;
-			tag.textContent = css;
+			tag.dataset.pluginCss = tagId$1;
+			tag.textContent = css$1;
 			document.head.appendChild(tag);
 		}
 		var genui_assistant_module_css_default = {
@@ -186,8 +189,12 @@ window.__ModuleLoader__.load({
 		* Mixed markdown + Vue GenUI card body for one assistant text block.
 		*/
 		/** Render markdown segments and schemaJson fences as GenUI cards. */
-		const GenuiTextBody = (0, react.memo)(function GenuiTextBody({ text, streaming, labels, mentions, customActions }) {
-			const segments = (0, react.useMemo)(() => splitAssistantText(text, streaming), [text, streaming]);
+		const GenuiTextBody = (0, react.memo)(function GenuiTextBody({ text, streaming, interrupted, labels, mentions, customActions }) {
+			const segments = (0, react.useMemo)(() => splitAssistantText(text, streaming, interrupted), [
+				text,
+				streaming,
+				interrupted
+			]);
 			const nodes = [];
 			for (let i = 0; i < segments.length; i++) {
 				const segment = segments[i];
@@ -284,6 +291,7 @@ window.__ModuleLoader__.load({
 						rendered.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GenuiTextBody, {
 							text: block.text,
 							streaming,
+							interrupted,
 							labels,
 							mentions,
 							customActions
@@ -338,6 +346,149 @@ window.__ModuleLoader__.load({
 			});
 		});
 		//#endregion
+		//#region src/prompt-control-url.ts
+		/** Same-origin host route used by the composer toggle button. */
+		const GENUI_PROMPT_CONTROL_URL = "/api/dsh-genui/prompt";
+		//#endregion
+		//#region \0dsh-css:module:src/client/prompt-toggle-button.module.css.mjs
+		const css = ".aG4Rta_toggle{width:28px;height:28px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:14px;justify-content:center;align-items:center;display:inline-flex}.aG4Rta_toggle:hover:not(:disabled),.aG4Rta_toggle:focus-visible{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);outline:none}.aG4Rta_toggle[aria-disabled=true]{cursor:not-allowed;opacity:.4}.aG4Rta_toggle[data-active]{background:var(--dsw-alias-button-ghost-active-fill);color:var(--dsw-alias-label-primary);box-shadow:inset 0 0 0 1px var(--dsw-alias-button-ghost-active-border)}.aG4Rta_tooltip{z-index:1000;background:var(--dsw-alias-tooltip-bg);width:max-content;max-width:50vw;color:var(--dsw-static-neutral-bluish-00);white-space:pre-line;overflow-wrap:break-word;pointer-events:none;border-radius:8px;padding:3px 7px;font-size:13px;line-height:20px;position:fixed;transform:translate(-50%,-100%)}";
+		const tagId = "dsh-genui/src/client/prompt-toggle-button.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "dsh-genui";
+			tag.dataset.pluginCss = tagId;
+			tag.textContent = css;
+			document.head.appendChild(tag);
+		}
+		var prompt_toggle_button_module_css_default = {
+			"toggle": "aG4Rta_toggle",
+			"tooltip": "aG4Rta_tooltip"
+		};
+		//#endregion
+		//#region src/client/prompt-toggle-button.tsx
+		/**
+		* Turn the GenUI authoring prompt on or off from the composer tool row.
+		* Rendering stays installed either way; only the prompt section changes.
+		*/
+		function PromptToggleButton(_props) {
+			const [enabled, setEnabled] = (0, react.useState)(false);
+			const [available, setAvailable] = (0, react.useState)(false);
+			const [busy, setBusy] = (0, react.useState)(false);
+			const [tooltipPoint, setTooltipPoint] = (0, react.useState)(null);
+			const buttonRef = (0, react.useRef)(null);
+			const tooltipTimer = (0, react.useRef)(null);
+			(0, react.useEffect)(() => {
+				let active = true;
+				const controller = new AbortController();
+				fetch(GENUI_PROMPT_CONTROL_URL, { signal: controller.signal }).then(async (response) => {
+					if (!response.ok) throw new Error(String(response.status));
+					const state = await response.json();
+					if (active) {
+						setEnabled(state.enabled === true);
+						setAvailable(true);
+					}
+				}).catch(() => {
+					if (active) setAvailable(false);
+				});
+				return () => {
+					active = false;
+					controller.abort();
+				};
+			}, []);
+			const toggle = (0, react.useCallback)(async () => {
+				if (busy) return;
+				const next = !enabled;
+				setBusy(true);
+				setEnabled(next);
+				try {
+					const response = await fetch(GENUI_PROMPT_CONTROL_URL, {
+						method: "POST",
+						headers: { "content-type": "application/json" },
+						body: JSON.stringify({ enabled: next })
+					});
+					if (!response.ok) throw new Error(String(response.status));
+					const state = await response.json();
+					setEnabled(state.enabled === true);
+					setAvailable(true);
+				} catch {
+					setEnabled(!next);
+					setAvailable(false);
+				} finally {
+					setBusy(false);
+				}
+			}, [busy, enabled]);
+			const showTooltip = (0, react.useCallback)(() => {
+				if (tooltipTimer.current !== null) return;
+				tooltipTimer.current = setTimeout(() => {
+					tooltipTimer.current = null;
+					const button = buttonRef.current;
+					if (button === null) return;
+					const rect = button.getBoundingClientRect();
+					setTooltipPoint({
+						left: rect.left + rect.width / 2,
+						top: rect.top - 8
+					});
+				}, 120);
+			}, []);
+			const hideTooltip = (0, react.useCallback)(() => {
+				if (tooltipTimer.current !== null) {
+					clearTimeout(tooltipTimer.current);
+					tooltipTimer.current = null;
+				}
+				setTooltipPoint(null);
+			}, []);
+			const tooltipOpen = tooltipPoint !== null;
+			(0, react.useLayoutEffect)(() => {
+				if (!tooltipOpen) return;
+				const update = () => {
+					const button = buttonRef.current;
+					if (button === null) return;
+					const rect = button.getBoundingClientRect();
+					setTooltipPoint({
+						left: rect.left + rect.width / 2,
+						top: rect.top - 8
+					});
+				};
+				update();
+				window.addEventListener("resize", update);
+				window.addEventListener("scroll", update, true);
+				return () => {
+					window.removeEventListener("resize", update);
+					window.removeEventListener("scroll", update, true);
+				};
+			}, [tooltipOpen]);
+			(0, react.useEffect)(() => hideTooltip, [hideTooltip]);
+			const label = available ? enabled ? "GenUI prompt on" : "GenUI prompt off" : "GenUI prompt unavailable";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				ref: buttonRef,
+				type: "button",
+				className: prompt_toggle_button_module_css_default.toggle,
+				"aria-label": "GenUI prompt",
+				"aria-pressed": enabled,
+				"aria-disabled": !available,
+				"data-active": enabled || void 0,
+				onClick: () => {
+					if (available && !busy) toggle();
+				},
+				onMouseDown: (event) => {
+					event.preventDefault();
+				},
+				onMouseEnter: showTooltip,
+				onMouseLeave: hideTooltip,
+				onFocus: showTooltip,
+				onBlur: hideTooltip,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconSparkle16, { size: 14 })
+			}), tooltipPoint !== null && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: prompt_toggle_button_module_css_default.tooltip,
+				role: "tooltip",
+				style: {
+					left: tooltipPoint.left,
+					top: tooltipPoint.top
+				},
+				children: label
+			}), document.body)] });
+		}
+		//#endregion
 		//#region src/client/index.ts
 		const inject = ["slots"];
 		/**
@@ -346,6 +497,11 @@ window.__ModuleLoader__.load({
 		*/
 		function apply(ctx) {
 			prefetchGenuiRuntime();
+			ctx.slots.inject("conversation.input.left", () => ctx.slots.register({
+				name: "conversation.input.left",
+				id: "genui-prompt-toggle",
+				order: 0
+			}, PromptToggleButton));
 			ctx.slots.inject("conversation.chat.node", () => ctx.slots.register({
 				name: "conversation.chat.node",
 				key: "assistant-step",