voice-page-agent 2.7.4 → 2.7.6

package/dist/index.d.cts

@@ -9,11 +9,15 @@ type VoicePageAgentState = {
     micPermissionGranted: boolean;
 };
 type RuntimePageAgent = {
-    panel: {
+    panel?: {
         show: () => void;
         expand: () => void;
+        hide?: () => void;
+        collapse?: () => void;
     };
     execute: (task: string) => Promise<unknown>;
+    dispose?: (...args: unknown[]) => void;
+    disposed?: boolean;
     status?: "idle" | "running" | "completed" | "error" | string;
 };
 type VoicePageAgentButtonTextOptions = {
@@ -84,6 +88,7 @@ declare class VoicePageAgentController {
     };
     onStateChange(listener: VoiceStateListener): () => void;
     openAgent(): Promise<RuntimePageAgent | null>;
+    toggleAgentPanel(): Promise<void>;
     startWake(): Promise<void>;
     stopWake(): void;
     runCommand(commandText: string): Promise<void>;
@@ -102,6 +107,9 @@ declare class VoicePageAgentController {
     private requestMicrophonePermission;
     private syncPermissionState;
     private ensureAgent;
+    private isAgentPanelVisible;
+    private hideAgentPanel;
+    private resolveAgentInitErrorMessage;
     private executeVoiceCommand;
     private buildRecognition;
 }

package/dist/index.d.ts

@@ -9,11 +9,15 @@ type VoicePageAgentState = {
     micPermissionGranted: boolean;
 };
 type RuntimePageAgent = {
-    panel: {
+    panel?: {
         show: () => void;
         expand: () => void;
+        hide?: () => void;
+        collapse?: () => void;
     };
     execute: (task: string) => Promise<unknown>;
+    dispose?: (...args: unknown[]) => void;
+    disposed?: boolean;
     status?: "idle" | "running" | "completed" | "error" | string;
 };
 type VoicePageAgentButtonTextOptions = {
@@ -84,6 +88,7 @@ declare class VoicePageAgentController {
     };
     onStateChange(listener: VoiceStateListener): () => void;
     openAgent(): Promise<RuntimePageAgent | null>;
+    toggleAgentPanel(): Promise<void>;
     startWake(): Promise<void>;
     stopWake(): void;
     runCommand(commandText: string): Promise<void>;
@@ -102,6 +107,9 @@ declare class VoicePageAgentController {
     private requestMicrophonePermission;
     private syncPermissionState;
     private ensureAgent;
+    private isAgentPanelVisible;
+    private hideAgentPanel;
+    private resolveAgentInitErrorMessage;
     private executeVoiceCommand;
     private buildRecognition;
 }

package/dist/index.js

@@ -131,6 +131,14 @@ var VoicePageAgentController = class {
   async openAgent() {
     return this.ensureAgent();
   }
+  async toggleAgentPanel() {
+    if (typeof window === "undefined") return;
+    if (this.isAgentPanelVisible()) {
+      this.hideAgentPanel();
+      return;
+    }
+    await this.openAgent();
+  }
   async startWake() {
     if (this.disposed) return;
     if (!this.hasSpeechSupport()) {
@@ -313,26 +321,55 @@ var VoicePageAgentController = class {
     }
   }
   async ensureAgent() {
+    var _a;
     if (typeof window === "undefined") return null;
     const runtimeWindow = window;
-    if (runtimeWindow.pageAgent) {
-      runtimeWindow.pageAgent.panel.show();
-      runtimeWindow.pageAgent.panel.expand();
-      return runtimeWindow.pageAgent;
+    const existingAgent = runtimeWindow.pageAgent;
+    if (existingAgent) {
+      const panelNode = document.getElementById("page-agent-runtime_agent-panel");
+      const canReuse = Boolean(existingAgent.panel && (panelNode == null ? void 0 : panelNode.isConnected) && !existingAgent.disposed);
+      if (canReuse && existingAgent.panel) {
+        existingAgent.panel.show();
+        existingAgent.panel.expand();
+        return existingAgent;
+      }
+      try {
+        (_a = existingAgent.dispose) == null ? void 0 : _a.call(existingAgent, "RECREATE_WITH_PANEL");
+      } catch {
+      }
+      runtimeWindow.pageAgent = void 0;
     }
     if (this.initAgentPromise) return this.initAgentPromise;
     this.initAgentPromise = (async () => {
-      const mod = await import('./page-agent-H32WE3CG.js');
+      const mod = await import('./page-agent-ZROQ54L4.js');
       const Agent = mod.PageAgent;
-      const agent = new Agent(this.options.pageAgent);
+      let agent;
+      try {
+        agent = new Agent(this.options.pageAgent);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err || "");
+        const webglUnavailable = /webgl2 is required/i.test(message) || /webgl/i.test(message);
+        if (!webglUnavailable) {
+          throw err;
+        }
+        const fallbackConfig = {
+          ...this.options.pageAgent,
+          enableMask: false
+        };
+        agent = new Agent(fallbackConfig);
+      }
       runtimeWindow.pageAgent = agent;
+      if (!agent.panel) {
+        throw new Error("Page Agent panel is disabled. Set pageAgent.enablePanel=true.");
+      }
       agent.panel.show();
       agent.panel.expand();
       return agent;
     })().catch((err) => {
+      console.error("[voice-page-agent] ensureAgent failed:", err);
       this.patchState({
         status: "error",
-        message: err instanceof Error ? err.message : "Page Agent \u521D\u59CB\u5316\u5931\u8D25"
+        message: this.resolveAgentInitErrorMessage(err)
       });
       return null;
     }).finally(() => {
@@ -340,6 +377,33 @@ var VoicePageAgentController = class {
     });
     return this.initAgentPromise;
   }
+  isAgentPanelVisible() {
+    const panelNode = document.getElementById("page-agent-runtime_agent-panel");
+    if (!panelNode) return false;
+    const style = window.getComputedStyle(panelNode);
+    return style.display !== "none" && style.visibility !== "hidden" && style.opacity !== "0";
+  }
+  hideAgentPanel() {
+    var _a, _b, _c, _d;
+    const runtimeWindow = window;
+    const agent = runtimeWindow.pageAgent;
+    if (agent == null ? void 0 : agent.panel) {
+      (_b = (_a = agent.panel).collapse) == null ? void 0 : _b.call(_a);
+      (_d = (_c = agent.panel).hide) == null ? void 0 : _d.call(_c);
+    }
+    const panelNode = document.getElementById("page-agent-runtime_agent-panel");
+    if (panelNode) {
+      panelNode.style.display = "none";
+      panelNode.style.opacity = "0";
+    }
+  }
+  resolveAgentInitErrorMessage(error) {
+    const raw = error instanceof Error ? error.message : String(error || "");
+    if (/Cannot read properties of undefined \(reading 'indexOf'\)/i.test(raw)) {
+      return "Page Agent \u8FD0\u884C\u65F6\u4F9D\u8D56\u52A0\u8F7D\u5931\u8D25\uFF08\u65E7\u7248\u6784\u5EFA\u517C\u5BB9\u95EE\u9898\uFF09\uFF0C\u8BF7\u5347\u7EA7 voice-page-agent \u5E76\u91CD\u88C5\u4F9D\u8D56\u3002";
+    }
+    return raw || "Page Agent \u521D\u59CB\u5316\u5931\u8D25";
+  }
   async executeVoiceCommand(rawCommand) {
     const command = this.sanitizeVoiceCommand(rawCommand);
     if (!command) {
@@ -478,102 +542,122 @@ var VOICE_PAGE_AGENT_KEY = "VOICE_PAGE_AGENT_INSTANCE";
 var VOICE_PAGE_AGENT_STYLE_ID = "voice-page-agent-style";
 var VOICE_PAGE_AGENT_STYLE_TEXT = `
 .voice-page-agent-root {
-  --voice-page-agent-wake-bg: linear-gradient(135deg, #22c1ff, #3366ff);
+  --voice-page-agent-wake-bg: linear-gradient(135deg, #7f67ff, #5a8dff);
   --voice-page-agent-wake-color: #ffffff;
-  --voice-page-agent-open-bg: linear-gradient(135deg, #ffa84a, #ff5f6d);
-  --voice-page-agent-open-color: #ffffff;
-  --voice-page-agent-status-color: #e2e8f0;
-  --voice-page-agent-surface-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.9));
-  --voice-page-agent-surface-border: rgba(148, 163, 184, 0.3);
+  --voice-page-agent-open-bg: linear-gradient(180deg, #ffffff, #f7f4ff);
+  --voice-page-agent-open-color: #30264d;
+  --voice-page-agent-status-color: #5f5a79;
 
-  position: relative;
   display: flex;
   flex-direction: column;
+  align-items: flex-end;
   gap: 12px;
-  margin-top: 12px;
-  padding: 14px;
-  border-radius: 16px;
-  border: 1px solid var(--voice-page-agent-surface-border);
-  background: var(--voice-page-agent-surface-bg);
-  box-shadow:
-    0 16px 34px -26px rgba(15, 23, 42, 0.9),
-    inset 0 1px 0 rgba(255, 255, 255, 0.12);
-  overflow: hidden;
-}
-
-.voice-page-agent-root::before {
-  content: "";
-  position: absolute;
-  inset: -35% -10% auto;
-  height: 58%;
-  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.2), rgba(56, 189, 248, 0));
-  pointer-events: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
 }
 
 .voice-page-agent-actions {
-  position: relative;
-  z-index: 1;
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: nowrap;
   gap: 10px;
 }
 
 .voice-page-agent-btn {
-  border: 0;
+  border: 1px solid transparent;
   border-radius: 999px;
-  padding: 9px 16px;
-  font-size: 13px;
-  line-height: 1.3;
+  padding: 10px 16px;
+  font-size: 16px;
+  line-height: 1.2;
   font-weight: 600;
-  letter-spacing: 0.1px;
+  letter-spacing: 0;
   cursor: pointer;
-  box-shadow:
-    0 10px 20px -14px rgba(15, 23, 42, 1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.22);
-  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
+  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
+  white-space: nowrap;
+  user-select: none;
 }
 
 .voice-page-agent-btn--wake {
   background: var(--voice-page-agent-wake-bg);
   color: var(--voice-page-agent-wake-color);
+  border-color: rgba(129, 111, 214, 0.4);
+  box-shadow:
+    0 8px 20px -14px rgba(95, 77, 170, 0.8),
+    inset 0 1px 0 rgba(255, 255, 255, 0.24);
 }
 
 .voice-page-agent-btn--open {
   background: var(--voice-page-agent-open-bg);
   color: var(--voice-page-agent-open-color);
+  border-color: rgba(169, 149, 255, 0.48);
+  box-shadow:
+    0 8px 18px -14px rgba(102, 80, 188, 0.7),
+    0 2px 8px rgba(155, 129, 247, 0.18);
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 48px;
+  padding: 10px 20px;
 }
 
 .voice-page-agent-btn:hover {
   transform: translateY(-1px);
-  filter: brightness(1.03);
-  box-shadow:
-    0 14px 24px -14px rgba(15, 23, 42, 0.95),
-    inset 0 1px 0 rgba(255, 255, 255, 0.24);
+  filter: brightness(1.01);
 }
 
 .voice-page-agent-btn:active {
   transform: translateY(0);
-  filter: brightness(0.98);
+  filter: brightness(0.99);
+}
+
+.voice-page-agent-open-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  border: 2px solid #9d84ff;
+  color: #9d84ff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+.voice-page-agent-open-icon::before {
+  content: "\u2726";
+}
+
+.voice-page-agent-open-label {
+  line-height: 1;
 }
 
 .voice-page-agent-status {
   margin: 0;
-  position: relative;
-  z-index: 1;
+  max-width: min(420px, calc(100vw - 24px));
+  padding: 10px 16px;
+  border-radius: 999px;
+  border: 1px solid rgba(180, 166, 255, 0.56);
+  background: rgba(250, 248, 255, 0.9);
   color: var(--voice-page-agent-status-color);
-  font-size: 13px;
+  font-size: 15px;
   line-height: 1.4;
-  opacity: 0.95;
+  box-shadow: 0 8px 20px -18px rgba(98, 78, 170, 0.7);
+  backdrop-filter: blur(6px);
 }
 `;
 var DEFAULT_BUTTON_CONFIG = {
   startText: "\u5F00\u542F\u8BED\u97F3\u5524\u9192",
   wakeOnText: "\u8BED\u97F3\u5524\u9192\u4E2D",
   openText: "\u7F51\u9875\u52A9\u624B",
-  wakeButtonBackground: "linear-gradient(135deg, #22c1ff, #3366ff)",
+  wakeButtonBackground: "linear-gradient(135deg, #7f67ff, #5a8dff)",
   wakeButtonTextColor: "#ffffff",
-  openButtonBackground: "linear-gradient(135deg, #ffa84a, #ff5f6d)",
-  openButtonTextColor: "#ffffff"
+  openButtonBackground: "linear-gradient(180deg, #ffffff, #f7f4ff)",
+  openButtonTextColor: "#30264d"
 };
 var globalButtonConfig = {
   ...DEFAULT_BUTTON_CONFIG
@@ -634,6 +718,16 @@ function useVoicePageAgent() {
   if (defaultController) return defaultController;
   throw new Error("voice-page-agent: controller not found, please install plugin first.");
 }
+function resolveClickProps(handler) {
+  return {
+    // Vue3
+    onClick: handler,
+    // Vue2 render function listeners
+    on: {
+      click: handler
+    }
+  };
+}
 var VoicePageAgentButton = defineComponent({
   name: "VoicePageAgentButton",
   props: {
@@ -692,7 +786,7 @@ var VoicePageAgentButton = defineComponent({
       }
     };
     const handleOpenClick = () => {
-      void controller.openAgent();
+      void controller.toggleAgentPanel();
     };
     return () => {
       var _a, _b, _c, _d, _e, _f, _g;
@@ -716,7 +810,7 @@ var VoicePageAgentButton = defineComponent({
             {
               type: "button",
               class: "voice-page-agent-btn voice-page-agent-btn--wake",
-              onClick: handleWakeClick
+              ...resolveClickProps(handleWakeClick)
             },
             state.value.enabled ? resolvedWakeOnText : resolvedStartText
           ) : null,
@@ -725,9 +819,12 @@ var VoicePageAgentButton = defineComponent({
             {
               type: "button",
               class: "voice-page-agent-btn voice-page-agent-btn--open",
-              onClick: handleOpenClick
+              ...resolveClickProps(handleOpenClick)
             },
-            resolvedOpenText
+            [
+              h("span", { class: "voice-page-agent-open-icon", "aria-hidden": "true" }),
+              h("span", { class: "voice-page-agent-open-label" }, resolvedOpenText)
+            ]
           )
         ]),
         props.showStatus ? h("p", { class: "voice-page-agent-status" }, state.value.message) : null