dsh-genui 0.1.3 → 0.2.1

package/README.md

@@ -20,13 +20,13 @@ All three screenshots are from a live DSH session — not mockups.
 
 ### "Generate a calculator"
 
-![A calculator rendered inside a DSH conversation](./public/computer.png)
+![A calculator rendered inside a DSH conversation](./public/computer.webp)
 
 Digits, operators, parentheses, backspace, clear — every key works. That 666 was typed on the keypad, not written into the text by the model.
 
 ### "Generate a form"
 
-![A project proposal form rendered inside a DSH conversation](./public/form.png)
+![A project proposal form rendered inside a DSH conversation](./public/form.webp)
 
 One sentence produces a full project proposal form: required-field validation, radio group, dropdown, headcount stepper, date picker, toggle, checkboxes, long text.
 
@@ -34,7 +34,7 @@ Hit **Submit** and your answers go back into the conversation, so the AI can ran
 
 ### "Show the last 7 days of traffic as a line chart"
 
-![A traffic line chart rendered inside a DSH conversation](./public/chat.png)
+![A traffic line chart rendered inside a DSH conversation](./public/chat.webp)
 
 Two series, legend, axes, gridlines — a rendered chart, not ASCII art.
 
@@ -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**
+
+### GenUI authoring prompt
+
+GenUI authoring starts on by default and remembers your last choice across DSH restarts. Use the sparkle button in the composer tool row if you want to turn the authoring guidance off. 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 back 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: the plugin adds a prompt section teaching the model to emit structured JSON (inside a `schemaJson` code block) when an interface would help. The composer sparkle toggle controls that section and is enabled by default. The DSH web client picks up the 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

@@ -20,13 +20,13 @@
 
 ### 说「生成一个计算器」
 
-![DSH 对话里渲染出的计算器](./public/computer.png)
+![DSH 对话里渲染出的计算器](./public/computer.webp)
 
 数字键、四则运算、括号、退格、清空，全都能按。算出来的 666 是真按出来的，不是 AI 写在文字里的。
 
 ### 说「生成一个表单」
 
-![DSH 对话里渲染出的项目立项申请表](./public/form.png)
+![DSH 对话里渲染出的项目立项申请表](./public/form.webp)
 
 一句话生成一整张立项申请表：必填校验、单选按钮组、下拉框、人数步进器、日期选择、开关、多选框、长文本，一次到位。
 
@@ -34,7 +34,7 @@
 
 ### 说「用折线图展示最近 7 天访问量」
 
-![DSH 对话里渲染出的访问量折线图](./public/chat.png)
+![DSH 对话里渲染出的访问量折线图](./public/chat.webp)
 
 双折线、图例、坐标轴、网格线，都是渲染出来的图，不是字符画。
 
@@ -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",