@myscheme/voice-navigation-sdk 0.1.3 → 0.1.6

package/README.md

@@ -11,7 +11,9 @@ A TypeScript SDK for voice-controlled navigation using Azure Speech-to-Text and
 - 🖱️ **Rich browser and media controls**
 - ♿ **Accessibility-first design**
 - 🎨 **Customizable floating UI** control
-- 📦 **Full TypeScript support**
+- � **Flexible button options** - use default or your own custom button
+- 📍 **Configurable button placement** - position the default button anywhere
+- �📦 **Full TypeScript support**
 - 🔄 **Reusable across multiple websites**
 - 🔍 **Vector search integration** with OpenSearch
 
@@ -94,6 +96,7 @@ const controller = initNavigationOnMicrophone({
 | `actionHandlers`        | `object`  | ❌       | Custom action callbacks                        |
 | `pages`                 | `object`  | ❌       | Dynamic page navigation configuration          |
 | `opensearch`            | `object`  | ❌       | OpenSearch vector search configuration         |
+| `ui`                    | `object`  | ❌       | UI customization (button placement & style)    |
 
 ### OpenSearch Configuration
 
@@ -112,6 +115,252 @@ When providing the optional `opensearch` block:
 | `sourceFields`  | `string[]` | ❌       | Source fields to retrieve                                       |
 | `apiPath`       | `string`   | ❌       | Proxy endpoint (default: `/api/voice-navigation/vector-search`) |
 
+### UI Configuration
+
+The library provides flexible button options - use the default floating button or integrate with your own custom button.
+
+#### Configuration Options
+
+| Property               | Type              | Required | Description                                                   |
+| ---------------------- | ----------------- | -------- | ------------------------------------------------------------- |
+| `showDefaultButton`    | `boolean`         | ❌       | Show library's default button (default: `true`)               |
+| `customButtonSelector` | `string`          | ❌       | CSS selector for your custom button (e.g., `"#my-voice-btn"`) |
+| `buttonPlacement`      | `ButtonPlacement` | ❌       | Position of default button (default: `"bottom-right"`)        |
+
+**ButtonPlacement** options: `"bottom-right"` \| `"bottom-left"` \| `"top-right"` \| `"top-left"` \| `"center-right"` \| `"center-left"`
+
+#### Option 1: Default Button with Custom Placement
+
+Use the library's pre-styled floating button at different positions:
+
+```typescript
+const controller = initNavigationOnMicrophone({
+  azure: {
+    /* ... */
+  },
+  aws: {
+    /* ... */
+  },
+
+  // Place button at top-left corner
+  ui: {
+    showDefaultButton: true,
+    buttonPlacement: "top-left",
+  },
+});
+```
+
+**Available placements:**
+
+- `"bottom-right"` (default) - Bottom right corner
+- `"bottom-left"` - Bottom left corner
+- `"top-right"` - Top right corner
+- `"top-left"` - Top left corner
+- `"center-right"` - Vertically centered on right
+- `"center-left"` - Vertically centered on left
+
+#### Option 2: Custom Button
+
+Use your own button design and have the library attach voice control functionality to it:
+
+**1. Create your button in HTML:**
+
+```html
+<button id="my-voice-button" class="my-custom-style">
+  <span>🎤 Voice Control</span>
+</button>
+```
+
+**2. Configure the SDK to use your button:**
+
+```typescript
+const controller = initNavigationOnMicrophone({
+  azure: {
+    /* ... */
+  },
+  aws: {
+    /* ... */
+  },
+
+  ui: {
+    showDefaultButton: false,
+    customButtonSelector: "#my-voice-button",
+  },
+});
+```
+
+**Important Notes for Custom Buttons:**
+
+- **Button must exist in DOM before SDK initialization** - Add the SDK initialization code after your button is rendered, or use `DOMContentLoaded` event
+- The library will automatically add `aria-pressed` and `aria-label` attributes for accessibility
+- The button can be any clickable element (button, div, etc.)
+- The library handles all click events and state management
+- Visual feedback panel will display near the button when voice control is active
+- You are responsible for styling the button (pressed, disabled, etc.) based on your design requirements
+
+**React Example with Custom Button:**
+
+```tsx
+import { useEffect, useRef } from "react";
+import { initNavigationOnMicrophone } from "@myscheme/voice-navigation-sdk";
+
+export default function VoiceNavigationProvider() {
+  const controllerRef = useRef(null);
+
+  useEffect(() => {
+    // Initialize after button is rendered
+    controllerRef.current = initNavigationOnMicrophone({
+      azure: {
+        subscriptionKey: process.env.NEXT_PUBLIC_AZURE_SPEECH_KEY!,
+        region: process.env.NEXT_PUBLIC_AZURE_SPEECH_REGION!,
+      },
+      aws: {
+        accessKeyId: process.env.NEXT_PUBLIC_AWS_ACCESS_KEY_ID!,
+        secretAccessKey: process.env.NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY!,
+        modelId: "anthropic.claude-3-sonnet-20240229-v1:0",
+        region: "ap-south-1",
+      },
+      ui: {
+        showDefaultButton: false,
+        customButtonSelector: "#voice-control-btn",
+      },
+    });
+
+    return () => controllerRef.current?.destroy();
+  }, []);
+
+  return (
+    <button
+      id="voice-control-btn"
+      className="px-4 py-2 bg-blue-600 text-white rounded-full hover:bg-blue-700"
+    >
+      🎤 Voice Control
+    </button>
+  );
+}
+```
+
+**Next.js App Router Example:**
+
+```tsx
+// app/components/voice-button.tsx
+"use client";
+
+export default function VoiceButton() {
+  return (
+    <button
+      id="voice-nav-button"
+      className="fixed bottom-4 right-4 w-16 h-16 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg hover:scale-110 transition-transform"
+      aria-label="Activate voice navigation"
+    >
+      🎤
+    </button>
+  );
+}
+
+// app/providers/voice-navigation.tsx
+("use client");
+
+import { useEffect } from "react";
+import { initNavigationOnMicrophone } from "@myscheme/voice-navigation-sdk";
+
+export default function VoiceNavigationProvider() {
+  useEffect(() => {
+    const controller = initNavigationOnMicrophone({
+      azure: {
+        /* ... */
+      },
+      aws: {
+        /* ... */
+      },
+      ui: {
+        showDefaultButton: false,
+        customButtonSelector: "#voice-nav-button",
+      },
+    });
+
+    return () => controller.destroy();
+  }, []);
+
+  return null;
+}
+
+// app/layout.tsx
+import VoiceButton from "./components/voice-button";
+import VoiceNavigationProvider from "./providers/voice-navigation";
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <VoiceButton />
+        <VoiceNavigationProvider />
+        {children}
+      </body>
+    </html>
+  );
+}
+```
+
+**Vanilla JavaScript Example:**
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      .voice-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border: none;
+        cursor: pointer;
+        font-size: 24px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        transition: transform 0.2s;
+      }
+
+      .voice-btn:hover {
+        transform: scale(1.1);
+      }
+
+      .voice-btn:active {
+        transform: scale(0.95);
+      }
+    </style>
+  </head>
+  <body>
+    <button id="voice-control" class="voice-btn">🎤</button>
+
+    <script type="module">
+      import { initNavigationOnMicrophone } from "@myscheme/voice-navigation-sdk";
+
+      const controller = initNavigationOnMicrophone({
+        azure: {
+          subscriptionKey: "your-key",
+          region: "your-region",
+        },
+        aws: {
+          accessKeyId: "your-key",
+          secretAccessKey: "your-secret",
+          modelId: "anthropic.claude-3-sonnet-20240229-v1:0",
+          region: "ap-south-1",
+        },
+        ui: {
+          showDefaultButton: false,
+          customButtonSelector: "#voice-control",
+        },
+      });
+    </script>
+  </body>
+</html>
+```
+
 ## 🌐 Dynamic Page Navigation
 
 Instead of hardcoding page navigation, configure pages dynamically using XML or direct configuration.

package/dist/actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,gBAAgB,EAEhB,aAAa,EACb,YAAY,EACZ,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAsChE,eAAO,MAAM,eAAe,GAAI,UAAU,YAAY,KAAG,IAOxD,CAAC;AAKF,eAAO,MAAM,eAAe,QAAO,YAAY,GAAG,IAEjD,CAAC;AAkCF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,KAAG,MAS5C,CAAC;AAKF,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,KAAG,MAM1C,CAAC;AAKF,eAAO,MAAM,iBAAiB,GAAI,QAAQ,MAAM,KAAG,MAElD,CAAC;AAKF,eAAO,MAAM,kBAAkB,GAC7B,QAAQ,gBAAgB,EACxB,UAAS,aAAkB,KAC1B,YA4VF,CAAC;AAKF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,GAAG,KAAG,mBAAmB,GAAG,IAiCtE,CAAC;AAKF,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,KAAG,MAAM,IAAI,gBAY1D,CAAC"}
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,gBAAgB,EAEhB,aAAa,EACb,YAAY,EACZ,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAyDhE,eAAO,MAAM,eAAe,GAAI,UAAU,YAAY,KAAG,IAOxD,CAAC;AAKF,eAAO,MAAM,eAAe,QAAO,YAAY,GAAG,IAEjD,CAAC;AAkCF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,KAAG,MAS5C,CAAC;AAKF,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,KAAG,MAM1C,CAAC;AAKF,eAAO,MAAM,iBAAiB,GAAI,QAAQ,MAAM,KAAG,MAElD,CAAC;AAKF,eAAO,MAAM,kBAAkB,GAC7B,QAAQ,gBAAgB,EACxB,UAAS,aAAkB,KAC1B,YA4yBF,CAAC;AAKF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,GAAG,KAAG,mBAAmB,GAAG,IAiCtE,CAAC;AAKF,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,KAAG,MAAM,IAAI,gBAY1D,CAAC"}

package/dist/actions.js

@@ -25,6 +25,25 @@ const CORE_ACTIONS = new Set([
     "unmute_media",
     "search_content",
     "stop",
+    "quit",
+    "tab_next",
+    "tab_back",
+    "click",
+    "enter",
+    "submit",
+    "move_left",
+    "move_right",
+    "move_up",
+    "move_down",
+    "move_beginning",
+    "move_end",
+    "select_all",
+    "select_line",
+    "type_text",
+    "cut",
+    "copy",
+    "paste",
+    "clear",
     "unknown",
 ]);
 let globalPageRegistry = null;
@@ -197,14 +216,14 @@ export const performAgentAction = (action, context = {}) => {
         }
         case "copy_url": {
             if (navigator.clipboard && window.isSecureContext) {
+                info.copied = true;
+                performed = true;
                 navigator.clipboard
                     .writeText(window.location.href)
                     .then(() => console.log("Page URL copied to clipboard"))
                     .catch((error) => {
                     console.warn("Failed to copy URL via clipboard API", error);
                 });
-                info.copied = true;
-                performed = true;
             }
             else {
                 try {
@@ -351,6 +370,382 @@ export const performAgentAction = (action, context = {}) => {
             performed = true;
             break;
         }
+        case "quit": {
+            console.log("Quit command received");
+            if (onStop) {
+                onStop();
+            }
+            info.quit = true;
+            performed = true;
+            break;
+        }
+        case "tab_next": {
+            const focusableElements = Array.from(document.querySelectorAll('a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])')).filter((el) => {
+                const rect = el.getBoundingClientRect();
+                return (!el.hasAttribute("disabled") &&
+                    rect.width > 0 &&
+                    rect.height > 0 &&
+                    window.getComputedStyle(el).visibility !== "hidden");
+            });
+            const currentIndex = focusableElements.indexOf(document.activeElement);
+            const nextIndex = (currentIndex + 1) % focusableElements.length;
+            if (focusableElements[nextIndex]) {
+                focusableElements[nextIndex].focus();
+                console.log("Moved focus to next element");
+                info.focused = true;
+                info.direction = "next";
+                performed = true;
+            }
+            break;
+        }
+        case "tab_back": {
+            const focusableElements = Array.from(document.querySelectorAll('a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])')).filter((el) => {
+                const rect = el.getBoundingClientRect();
+                return (!el.hasAttribute("disabled") &&
+                    rect.width > 0 &&
+                    rect.height > 0 &&
+                    window.getComputedStyle(el).visibility !== "hidden");
+            });
+            const currentIndex = focusableElements.indexOf(document.activeElement);
+            const prevIndex = currentIndex <= 0 ? focusableElements.length - 1 : currentIndex - 1;
+            if (focusableElements[prevIndex]) {
+                focusableElements[prevIndex].focus();
+                console.log("Moved focus to previous element");
+                info.focused = true;
+                info.direction = "back";
+                performed = true;
+            }
+            break;
+        }
+        case "click":
+        case "enter":
+        case "submit": {
+            const activeElement = document.activeElement;
+            if (activeElement && activeElement !== document.body) {
+                activeElement.click();
+                console.log(`Clicked on focused element: ${activeElement.tagName}`);
+                info.clicked = true;
+                performed = true;
+            }
+            else {
+                console.log("No element is currently focused");
+            }
+            break;
+        }
+        case "move_left": {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                (activeElement instanceof HTMLInputElement ||
+                    activeElement instanceof HTMLTextAreaElement)) {
+                const currentPos = activeElement.selectionStart || 0;
+                activeElement.setSelectionRange(currentPos - 1, currentPos - 1);
+                console.log("Moved cursor left");
+                info.cursorMoved = true;
+                info.direction = "left";
+                performed = true;
+            }
+            break;
+        }
+        case "move_right": {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                (activeElement instanceof HTMLInputElement ||
+                    activeElement instanceof HTMLTextAreaElement)) {
+                const currentPos = activeElement.selectionStart || 0;
+                activeElement.setSelectionRange(currentPos + 1, currentPos + 1);
+                console.log("Moved cursor right");
+                info.cursorMoved = true;
+                info.direction = "right";
+                performed = true;
+            }
+            break;
+        }
+        case "move_up": {
+            const activeElement = document.activeElement;
+            if (activeElement instanceof HTMLTextAreaElement) {
+                const lines = activeElement.value.split("\n");
+                const currentPos = activeElement.selectionStart || 0;
+                let lineStart = 0;
+                let currentLine = 0;
+                for (let i = 0; i < lines.length; i++) {
+                    if (currentPos <= lineStart + lines[i].length) {
+                        currentLine = i;
+                        break;
+                    }
+                    lineStart += lines[i].length + 1;
+                }
+                if (currentLine > 0) {
+                    const posInLine = currentPos - lineStart;
+                    const prevLineStart = lineStart - lines[currentLine - 1].length - 1;
+                    const newPos = Math.min(prevLineStart + posInLine, prevLineStart + lines[currentLine - 1].length);
+                    activeElement.setSelectionRange(newPos, newPos);
+                    console.log("Moved cursor up");
+                    info.cursorMoved = true;
+                    info.direction = "up";
+                    performed = true;
+                }
+            }
+            break;
+        }
+        case "move_down": {
+            const activeElement = document.activeElement;
+            if (activeElement instanceof HTMLTextAreaElement) {
+                const lines = activeElement.value.split("\n");
+                const currentPos = activeElement.selectionStart || 0;
+                let lineStart = 0;
+                let currentLine = 0;
+                for (let i = 0; i < lines.length; i++) {
+                    if (currentPos <= lineStart + lines[i].length) {
+                        currentLine = i;
+                        break;
+                    }
+                    lineStart += lines[i].length + 1;
+                }
+                if (currentLine < lines.length - 1) {
+                    const posInLine = currentPos - lineStart;
+                    const nextLineStart = lineStart + lines[currentLine].length + 1;
+                    const newPos = Math.min(nextLineStart + posInLine, nextLineStart + lines[currentLine + 1].length);
+                    activeElement.setSelectionRange(newPos, newPos);
+                    console.log("Moved cursor down");
+                    info.cursorMoved = true;
+                    info.direction = "down";
+                    performed = true;
+                }
+            }
+            break;
+        }
+        case "move_beginning": {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                (activeElement instanceof HTMLInputElement ||
+                    activeElement instanceof HTMLTextAreaElement)) {
+                activeElement.setSelectionRange(0, 0);
+                console.log("Moved cursor to beginning");
+                info.cursorMoved = true;
+                info.position = "beginning";
+                performed = true;
+            }
+            break;
+        }
+        case "move_end": {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                (activeElement instanceof HTMLInputElement ||
+                    activeElement instanceof HTMLTextAreaElement)) {
+                const length = activeElement.value.length;
+                activeElement.setSelectionRange(length, length);
+                console.log("Moved cursor to end");
+                info.cursorMoved = true;
+                info.position = "end";
+                performed = true;
+            }
+            break;
+        }
+        case "select_all": {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                (activeElement instanceof HTMLInputElement ||
+                    activeElement instanceof HTMLTextAreaElement)) {
+                activeElement.select();
+                console.log("Selected all text");
+                info.selected = true;
+                performed = true;
+            }
+            else {
+                const selection = window.getSelection();
+                if (selection) {
+                    selection.selectAllChildren(document.body);
+                    console.log("Selected all content on page");
+                    info.selected = true;
+                    performed = true;
+                }
+            }
+            break;
+        }
+        case "select_line": {
+            const activeElement = document.activeElement;
+            if (activeElement instanceof HTMLTextAreaElement) {
+                const currentPos = activeElement.selectionStart || 0;
+                const value = activeElement.value;
+                let lineStart = value.lastIndexOf("\n", currentPos - 1) + 1;
+                let lineEnd = value.indexOf("\n", currentPos);
+                if (lineEnd === -1) {
+                    lineEnd = value.length;
+                }
+                activeElement.setSelectionRange(lineStart, lineEnd);
+                console.log("Selected current line");
+                info.selected = true;
+                info.scope = "line";
+                performed = true;
+            }
+            else if (activeElement instanceof HTMLInputElement) {
+                activeElement.select();
+                console.log("Selected all text in input");
+                info.selected = true;
+                performed = true;
+            }
+            break;
+        }
+        case "type_text": {
+            const activeElement = document.activeElement;
+            const typeText = context?.parameters?.text || "";
+            if (activeElement &&
+                (activeElement instanceof HTMLInputElement ||
+                    activeElement instanceof HTMLTextAreaElement) &&
+                typeText) {
+                const start = activeElement.selectionStart || 0;
+                const end = activeElement.selectionEnd || 0;
+                const value = activeElement.value;
+                activeElement.value =
+                    value.substring(0, start) + typeText + value.substring(end);
+                const newPos = start + typeText.length;
+                activeElement.setSelectionRange(newPos, newPos);
+                activeElement.dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));
+                console.log(`Typed text: "${typeText}"`);
+                info.typed = true;
+                info.text = typeText;
+                performed = true;
+            }
+            else {
+                console.log("No text field is focused or no text provided");
+            }
+            break;
+        }
+        case "cut": {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                (activeElement instanceof HTMLInputElement ||
+                    activeElement instanceof HTMLTextAreaElement)) {
+                const start = activeElement.selectionStart || 0;
+                const end = activeElement.selectionEnd || 0;
+                const selectedText = activeElement.value.substring(start, end);
+                if (selectedText && navigator.clipboard) {
+                    info.cut = true;
+                    performed = true;
+                    navigator.clipboard
+                        .writeText(selectedText)
+                        .then(() => {
+                        const value = activeElement.value;
+                        activeElement.value =
+                            value.substring(0, start) + value.substring(end);
+                        activeElement.setSelectionRange(start, start);
+                        activeElement.dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));
+                        console.log("Cut text to clipboard");
+                    })
+                        .catch((error) => {
+                        console.warn("Failed to cut text", error);
+                    });
+                }
+                else {
+                    console.log("No text selected or clipboard API unavailable");
+                }
+            }
+            break;
+        }
+        case "copy": {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                (activeElement instanceof HTMLInputElement ||
+                    activeElement instanceof HTMLTextAreaElement)) {
+                const start = activeElement.selectionStart || 0;
+                const end = activeElement.selectionEnd || 0;
+                const selectedText = activeElement.value.substring(start, end);
+                if (selectedText && navigator.clipboard) {
+                    info.copied = true;
+                    performed = true;
+                    navigator.clipboard
+                        .writeText(selectedText)
+                        .then(() => {
+                        console.log("Copied text to clipboard");
+                    })
+                        .catch((error) => {
+                        console.warn("Failed to copy text", error);
+                    });
+                }
+                else {
+                    const selection = window.getSelection();
+                    const selectionText = selection?.toString();
+                    if (selectionText && navigator.clipboard) {
+                        info.copied = true;
+                        performed = true;
+                        navigator.clipboard
+                            .writeText(selectionText)
+                            .then(() => {
+                            console.log("Copied selected text to clipboard");
+                        })
+                            .catch((error) => {
+                            console.warn("Failed to copy text", error);
+                        });
+                    }
+                    else {
+                        console.log("No text selected");
+                    }
+                }
+            }
+            else {
+                const selection = window.getSelection();
+                const selectionText = selection?.toString();
+                if (selectionText && navigator.clipboard) {
+                    info.copied = true;
+                    performed = true;
+                    navigator.clipboard
+                        .writeText(selectionText)
+                        .then(() => {
+                        console.log("Copied selected text to clipboard");
+                    })
+                        .catch((error) => {
+                        console.warn("Failed to copy text", error);
+                    });
+                }
+                else {
+                    console.log("No text selected");
+                }
+            }
+            break;
+        }
+        case "paste": {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                (activeElement instanceof HTMLInputElement ||
+                    activeElement instanceof HTMLTextAreaElement) &&
+                navigator.clipboard) {
+                info.pasted = true;
+                performed = true;
+                navigator.clipboard
+                    .readText()
+                    .then((clipboardText) => {
+                    const start = activeElement.selectionStart || 0;
+                    const end = activeElement.selectionEnd || 0;
+                    const value = activeElement.value;
+                    activeElement.value =
+                        value.substring(0, start) + clipboardText + value.substring(end);
+                    const newPos = start + clipboardText.length;
+                    activeElement.setSelectionRange(newPos, newPos);
+                    activeElement.dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));
+                    console.log("Pasted text from clipboard");
+                })
+                    .catch((error) => {
+                    console.warn("Failed to paste text", error);
+                });
+            }
+            else {
+                console.log("No text field is focused or clipboard API unavailable");
+            }
+            break;
+        }
+        case "clear": {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                (activeElement instanceof HTMLInputElement ||
+                    activeElement instanceof HTMLTextAreaElement)) {
+                activeElement.value = "";
+                activeElement.dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));
+                console.log("Cleared text field");
+                info.cleared = true;
+                performed = true;
+            }
+            break;
+        }
         default: {
             if (action.startsWith("navigate_") && globalPageRegistry) {
                 const pageId = globalPageRegistry.getPageIdFromAction(action);