voice-page-agent 2.7.2 → 2.7.3

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/README.md CHANGED
@@ -137,6 +137,13 @@ You can use `VoicePageAgentButton` globally after plugin install:
137
137
  <VoicePageAgentButton />
138
138
  ```
139
139
 
140
+ The component injects default styles automatically. You can override these classes in your app:
141
+
142
+ - `.voice-page-agent-root`
143
+ - `.voice-page-agent-actions`
144
+ - `.voice-page-agent-btn`
145
+ - `.voice-page-agent-status`
146
+
140
147
  It renders:
141
148
  - wake button (only when mic permission is not granted)
142
149
  - open page-agent button
package/dist/index.cjs CHANGED
@@ -20240,9 +20240,56 @@ function createVoicePageAgent(options) {
20240
20240
  return new VoicePageAgentController(options);
20241
20241
  }
20242
20242
  var VOICE_PAGE_AGENT_KEY = "VOICE_PAGE_AGENT_INSTANCE";
20243
+ var VOICE_PAGE_AGENT_STYLE_ID = "voice-page-agent-style";
20244
+ var VOICE_PAGE_AGENT_STYLE_TEXT = `
20245
+ .voice-page-agent-root {
20246
+ display: flex;
20247
+ flex-direction: column;
20248
+ gap: 10px;
20249
+ margin-top: 12px;
20250
+ }
20251
+
20252
+ .voice-page-agent-actions {
20253
+ display: flex;
20254
+ flex-wrap: wrap;
20255
+ gap: 8px;
20256
+ }
20257
+
20258
+ .voice-page-agent-btn {
20259
+ border: 1px solid #d6d6d6;
20260
+ background: #ffffff;
20261
+ color: #1f2937;
20262
+ border-radius: 999px;
20263
+ padding: 8px 14px;
20264
+ font-size: 13px;
20265
+ line-height: 1.2;
20266
+ cursor: pointer;
20267
+ }
20268
+
20269
+ .voice-page-agent-btn:hover {
20270
+ border-color: #b9b9b9;
20271
+ background: #f8fafc;
20272
+ }
20273
+
20274
+ .voice-page-agent-status {
20275
+ margin: 0;
20276
+ color: #4b5563;
20277
+ font-size: 13px;
20278
+ line-height: 1.4;
20279
+ }
20280
+ `;
20243
20281
  var defaultController = null;
20282
+ function ensureButtonStyles() {
20283
+ if (typeof document === "undefined") return;
20284
+ if (document.getElementById(VOICE_PAGE_AGENT_STYLE_ID)) return;
20285
+ const style = document.createElement("style");
20286
+ style.id = VOICE_PAGE_AGENT_STYLE_ID;
20287
+ style.textContent = VOICE_PAGE_AGENT_STYLE_TEXT;
20288
+ document.head.appendChild(style);
20289
+ }
20244
20290
  function attachToApp(target, controller) {
20245
20291
  var _a3, _b, _c, _d, _e;
20292
+ ensureButtonStyles();
20246
20293
  const anyTarget = target;
20247
20294
  if ("config" in anyTarget && ((_a3 = anyTarget.config) == null ? void 0 : _a3.globalProperties)) {
20248
20295
  anyTarget.config.globalProperties.$voicePageAgent = controller;
@@ -20290,6 +20337,7 @@ var VoicePageAgentButton = vueDemi.defineComponent({
20290
20337
  }
20291
20338
  },
20292
20339
  setup(props) {
20340
+ ensureButtonStyles();
20293
20341
  const controller = useVoicePageAgent();
20294
20342
  const state = vueDemi.ref(controller.snapshot);
20295
20343
  let off = null;
package/dist/index.js CHANGED
@@ -475,9 +475,56 @@ function createVoicePageAgent(options) {
475
475
  return new VoicePageAgentController(options);
476
476
  }
477
477
  var VOICE_PAGE_AGENT_KEY = "VOICE_PAGE_AGENT_INSTANCE";
478
+ var VOICE_PAGE_AGENT_STYLE_ID = "voice-page-agent-style";
479
+ var VOICE_PAGE_AGENT_STYLE_TEXT = `
480
+ .voice-page-agent-root {
481
+ display: flex;
482
+ flex-direction: column;
483
+ gap: 10px;
484
+ margin-top: 12px;
485
+ }
486
+
487
+ .voice-page-agent-actions {
488
+ display: flex;
489
+ flex-wrap: wrap;
490
+ gap: 8px;
491
+ }
492
+
493
+ .voice-page-agent-btn {
494
+ border: 1px solid #d6d6d6;
495
+ background: #ffffff;
496
+ color: #1f2937;
497
+ border-radius: 999px;
498
+ padding: 8px 14px;
499
+ font-size: 13px;
500
+ line-height: 1.2;
501
+ cursor: pointer;
502
+ }
503
+
504
+ .voice-page-agent-btn:hover {
505
+ border-color: #b9b9b9;
506
+ background: #f8fafc;
507
+ }
508
+
509
+ .voice-page-agent-status {
510
+ margin: 0;
511
+ color: #4b5563;
512
+ font-size: 13px;
513
+ line-height: 1.4;
514
+ }
515
+ `;
478
516
  var defaultController = null;
517
+ function ensureButtonStyles() {
518
+ if (typeof document === "undefined") return;
519
+ if (document.getElementById(VOICE_PAGE_AGENT_STYLE_ID)) return;
520
+ const style = document.createElement("style");
521
+ style.id = VOICE_PAGE_AGENT_STYLE_ID;
522
+ style.textContent = VOICE_PAGE_AGENT_STYLE_TEXT;
523
+ document.head.appendChild(style);
524
+ }
479
525
  function attachToApp(target, controller) {
480
526
  var _a, _b, _c, _d, _e;
527
+ ensureButtonStyles();
481
528
  const anyTarget = target;
482
529
  if ("config" in anyTarget && ((_a = anyTarget.config) == null ? void 0 : _a.globalProperties)) {
483
530
  anyTarget.config.globalProperties.$voicePageAgent = controller;
@@ -525,6 +572,7 @@ var VoicePageAgentButton = defineComponent({
525
572
  }
526
573
  },
527
574
  setup(props) {
575
+ ensureButtonStyles();
528
576
  const controller = useVoicePageAgent();
529
577
  const state = ref(controller.snapshot);
530
578
  let off = null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "voice-page-agent",
3
- "version": "2.7.2",
3
+ "version": "2.7.3",
4
4
  "description": "Voice wake plugin for page-agent with Vue2/Vue3 compatibility.",
5
5
  "license": "MIT",
6
6
  "type": "module",