@myscheme/voice-navigation-sdk 0.1.3 → 0.1.6

package/dist/services/bedrock.js

@@ -1,5 +1,5 @@
 import { BedrockRuntimeClient, InvokeModelCommand, } from "@aws-sdk/client-bedrock-runtime";
-const CORE_ACTIONS_LIST = `"zoom_in", "zoom_out", "scroll_up", "scroll_down", "scroll_left", "scroll_right", "page_up", "page_down", "scroll_top", "scroll_bottom", "go_back", "go_forward", "reload_page", "print_page", "copy_url", "open_menu", "close_menu", "focus_search", "toggle_fullscreen", "exit_fullscreen", "play_media", "pause_media", "mute_media", "unmute_media", "search_content", "stop"`;
+const CORE_ACTIONS_LIST = `"zoom_in", "zoom_out", "scroll_up", "scroll_down", "scroll_left", "scroll_right", "page_up", "page_down", "scroll_top", "scroll_bottom", "go_back", "go_forward", "reload_page", "print_page", "copy_url", "open_menu", "close_menu", "focus_search", "toggle_fullscreen", "exit_fullscreen", "play_media", "pause_media", "mute_media", "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"`;
 const BASE_SYSTEM_PROMPT = `You are an action extraction assistant.
 
 CRITICAL RULES:
@@ -14,6 +14,7 @@ CRITICAL RULES:
 RESPONSE FORMAT:
 - Core actions: {"action": "action_name"}
 - Search: {"action": "search_content", "query": "keywords"}
+- Type text: {"action": "type_text", "text": "text to type"}
 - Page navigation: {"action": "navigate_<page_id>"}
 
 EXAMPLES:
@@ -21,6 +22,7 @@ EXAMPLES:
 - User says "show me the team page" → {"action": "navigate_team"}
 - User says "scroll down" → {"action": "scroll_down"}
 - User says "find schemes" → {"action": "search_content", "query": "schemes"}
+- User says "type hello world" → {"action": "type_text", "text": "hello world"}
 
 MATCHING RULES FOR PAGE NAVIGATION:
 - Match user's words to page names and keywords
@@ -29,25 +31,45 @@ MATCHING RULES FOR PAGE NAVIGATION:
 const DEFAULT_EMBEDDING_MODEL_ID = "cohere.embed-multilingual-v3";
 export class BedrockService {
     constructor(config) {
+        this.client = null;
+        this.actionModelId = null;
         this.pageRegistry = null;
-        this.client = new BedrockRuntimeClient({
-            region: config.region,
-            credentials: {
-                accessKeyId: config.accessKeyId,
-                secretAccessKey: config.secretAccessKey,
-            },
-        });
-        this.actionModelId = config.modelId;
-        if (config.embeddingModelId === null) {
+        this.bedrockEndpoint = null;
+        this.embeddingEndpointUrl = null;
+        this.useProxy = false;
+        this.useProxy = !!(config.bedrockEndpoint || config.embeddingEndpoint);
+        if (this.useProxy) {
+            this.bedrockEndpoint = config.bedrockEndpoint || null;
+            this.embeddingEndpointUrl = config.embeddingEndpoint || null;
+            this.actionModelId = null;
             this.embeddingModelId = null;
         }
-        else if (typeof config.embeddingModelId === "string") {
-            const trimmed = config.embeddingModelId.trim();
-            this.embeddingModelId =
-                trimmed.length > 0 ? trimmed : DEFAULT_EMBEDDING_MODEL_ID;
-        }
         else {
-            this.embeddingModelId = DEFAULT_EMBEDDING_MODEL_ID;
+            if (!config.region ||
+                !config.accessKeyId ||
+                !config.secretAccessKey ||
+                !config.modelId) {
+                throw new Error("AWS credentials required for direct mode");
+            }
+            this.client = new BedrockRuntimeClient({
+                region: config.region,
+                credentials: {
+                    accessKeyId: config.accessKeyId,
+                    secretAccessKey: config.secretAccessKey,
+                },
+            });
+            this.actionModelId = config.modelId;
+            if (config.embeddingModelId === null) {
+                this.embeddingModelId = null;
+            }
+            else if (typeof config.embeddingModelId === "string") {
+                const trimmed = config.embeddingModelId.trim();
+                this.embeddingModelId =
+                    trimmed.length > 0 ? trimmed : DEFAULT_EMBEDDING_MODEL_ID;
+            }
+            else {
+                this.embeddingModelId = DEFAULT_EMBEDDING_MODEL_ID;
+            }
         }
     }
     setPageRegistry(registry) {
@@ -71,6 +93,73 @@ export class BedrockService {
         return prompt;
     }
     async extractAction(userInput) {
+        if (this.useProxy) {
+            return this.extractActionViaProxy(userInput);
+        }
+        else {
+            return this.extractActionDirect(userInput);
+        }
+    }
+    async extractActionViaProxy(userInput) {
+        if (!this.bedrockEndpoint) {
+            throw new Error("Bedrock endpoint not configured");
+        }
+        try {
+            const systemPrompt = this.buildSystemPrompt();
+            const requestBody = {
+                anthropic_version: "bedrock-2023-05-31",
+                max_tokens: 70,
+                system: systemPrompt,
+                messages: [
+                    {
+                        role: "user",
+                        content: [
+                            {
+                                type: "text",
+                                text: `User input: "${userInput}". Identify the intended action from the allowed list and respond ONLY with a JSON object. If the user input is unclear, respond with {"action": "unknown"}. Include no additional text.`,
+                            },
+                        ],
+                    },
+                ],
+            };
+            const response = await fetch(this.bedrockEndpoint, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    body: requestBody,
+                }),
+            });
+            if (!response.ok) {
+                throw new Error(`Bedrock proxy error: ${response.status} ${response.statusText}`);
+            }
+            const data = (await response.json());
+            let rawText = "";
+            if (data.content && data.content.length > 0) {
+                rawText = data.content[0].text || "";
+            }
+            if (!rawText) {
+                return { action: "unknown" };
+            }
+            try {
+                const parsed = JSON.parse(rawText);
+                return parsed;
+            }
+            catch (parseError) {
+                console.error("Failed to parse Bedrock response:", rawText, parseError);
+                return { action: "unknown" };
+            }
+        }
+        catch (error) {
+            console.error("Bedrock proxy API error:", error);
+            throw error;
+        }
+    }
+    async extractActionDirect(userInput) {
+        if (!this.client || !this.actionModelId) {
+            throw new Error("AWS Bedrock client not initialized");
+        }
         const systemPrompt = this.buildSystemPrompt();
         const body = {
             anthropic_version: "bedrock-2023-05-31",
@@ -126,11 +215,76 @@ export class BedrockService {
         return new BedrockService(config);
     }
     async embedText(text) {
+        if (this.useProxy) {
+            return this.embedTextViaProxy(text);
+        }
+        else {
+            return this.embedTextDirect(text);
+        }
+    }
+    async embedTextViaProxy(text) {
+        const prompt = text.trim();
+        if (!prompt) {
+            return [];
+        }
+        if (!this.embeddingEndpointUrl) {
+            throw new Error("Embedding endpoint not configured");
+        }
+        try {
+            const response = await fetch(this.embeddingEndpointUrl, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    text: prompt,
+                    inputType: "search_query",
+                }),
+            });
+            if (!response.ok) {
+                throw new Error(`Embedding proxy error: ${response.status} ${response.statusText}`);
+            }
+            const decoded = (await response.json());
+            let embedding;
+            if (decoded.embeddings) {
+                if (Array.isArray(decoded.embeddings)) {
+                    if (decoded.embeddings.length > 0 &&
+                        Array.isArray(decoded.embeddings[0])) {
+                        embedding = decoded.embeddings[0];
+                    }
+                    else if (decoded.embeddings.length > 0 &&
+                        typeof decoded.embeddings[0] === "number") {
+                        embedding = decoded.embeddings;
+                    }
+                }
+                else if (typeof decoded.embeddings === "object" &&
+                    "values" in decoded.embeddings) {
+                    embedding = decoded.embeddings.values;
+                }
+            }
+            if (!embedding) {
+                embedding =
+                    decoded.embedding ||
+                        decoded.vector ||
+                        decoded.results?.find((item) => Array.isArray(item.embedding))
+                            ?.embedding;
+            }
+            if (!Array.isArray(embedding)) {
+                throw new Error("Unexpected embedding response structure");
+            }
+            return embedding.map((value) => Number(value));
+        }
+        catch (error) {
+            console.error("Embedding proxy error:", error);
+            throw error;
+        }
+    }
+    async embedTextDirect(text) {
         const prompt = text.trim();
         if (!prompt) {
             return [];
         }
-        if (!this.embeddingModelId) {
+        if (!this.client || !this.embeddingModelId) {
             throw new Error("Bedrock embedding model is not configured");
         }
         const payload = {

package/dist/services/vector-search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vector-search.d.ts","sourceRoot":"","sources":["../../src/services/vector-search.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAwCD,qBAAa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA6B;IACpD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;gBAEtB,MAAM,EAAE,gBAAgB;IA6B9B,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,EAAE,CAAC;IAyF9E,YAAY,CAAC,GAAG,EAAE,eAAe,GAAG,MAAM,GAAG,IAAI;IAoCjD,oBAAoB,CAAC,IAAI,EAAE,eAAe,EAAE,GAAG;QAC7C,GAAG,EAAE,eAAe,CAAC;QACrB,GAAG,EAAE,MAAM,CAAC;KACb,GAAG,IAAI;IAaR,OAAO,CAAC,mBAAmB;IAsB3B,OAAO,CAAC,eAAe;YAkBT,YAAY;CAQ3B"}
+{"version":3,"file":"vector-search.d.ts","sourceRoot":"","sources":["../../src/services/vector-search.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAyCD,qBAAa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA6B;IACpD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;gBAEtB,MAAM,EAAE,gBAAgB;IAuC9B,MAAM,CACV,MAAM,EAAE,MAAM,EAAE,EAChB,SAAS,CAAC,EAAE,MAAM,GACjB,OAAO,CAAC,eAAe,EAAE,CAAC;IA6F7B,YAAY,CAAC,GAAG,EAAE,eAAe,GAAG,MAAM,GAAG,IAAI;IAoCjD,oBAAoB,CAAC,IAAI,EAAE,eAAe,EAAE,GAAG;QAC7C,GAAG,EAAE,eAAe,CAAC;QACrB,GAAG,EAAE,MAAM,CAAC;KACb,GAAG,IAAI;IAaR,OAAO,CAAC,mBAAmB;IAqC3B,OAAO,CAAC,eAAe;YAqBT,YAAY;CAQ3B"}

package/dist/services/vector-search.js

@@ -11,6 +11,7 @@ export class VectorSearchService {
         const requestTimeoutMs = typeof config.requestTimeoutMs === "number" && config.requestTimeoutMs > 0
             ? Math.floor(config.requestTimeoutMs)
             : 15000;
+        const isEndpointOnlyMode = !!(config.searchEndpoint && !config.node);
         this.config = {
             ...config,
             vectorField: config.vectorField || "embedding",
@@ -19,9 +20,12 @@ export class VectorSearchService {
             numCandidates,
             requestTimeoutMs,
             sourceFields: config.sourceFields,
-            apiPath: config.apiPath || DEFAULT_VECTOR_SEARCH_API_PATH,
+            apiPath: config.apiPath ||
+                config.searchEndpoint ||
+                DEFAULT_VECTOR_SEARCH_API_PATH,
+            isEndpointOnlyMode,
         };
-        this.endpoint = this.resolveEndpoint(this.config.apiPath);
+        this.endpoint = this.resolveEndpoint(config.searchEndpoint || config.apiPath || DEFAULT_VECTOR_SEARCH_API_PATH);
     }
     async search(vector, queryText) {
         if (!Array.isArray(vector) || vector.length === 0) {
@@ -133,6 +137,15 @@ export class VectorSearchService {
         return null;
     }
     buildRequestPayload(vector, queryText) {
+        if (this.config.isEndpointOnlyMode) {
+            return {
+                vector,
+                query: queryText,
+                size: this.config.size,
+                minScore: this.config.minScore,
+                sourceFields: this.config.sourceFields,
+            };
+        }
         return {
             vector,
             queryText,

package/dist/types.d.ts

@@ -1,7 +1,15 @@
-export type CoreNavigationAction = "zoom_in" | "zoom_out" | "scroll_up" | "scroll_down" | "scroll_left" | "scroll_right" | "page_up" | "page_down" | "scroll_top" | "scroll_bottom" | "go_back" | "go_forward" | "reload_page" | "print_page" | "copy_url" | "open_menu" | "close_menu" | "focus_search" | "toggle_fullscreen" | "exit_fullscreen" | "play_media" | "pause_media" | "mute_media" | "unmute_media" | "search_content" | "stop" | "unknown";
+export type CoreNavigationAction = "zoom_in" | "zoom_out" | "scroll_up" | "scroll_down" | "scroll_left" | "scroll_right" | "page_up" | "page_down" | "scroll_top" | "scroll_bottom" | "go_back" | "go_forward" | "reload_page" | "print_page" | "copy_url" | "open_menu" | "close_menu" | "focus_search" | "toggle_fullscreen" | "exit_fullscreen" | "play_media" | "pause_media" | "mute_media" | "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";
 export type NavigationAction = CoreNavigationAction | `navigate_${string}`;
+export type ButtonPlacement = "bottom-right" | "bottom-left" | "top-right" | "top-left" | "center-right" | "center-left";
+export interface UIConfig {
+    showDefaultButton?: boolean;
+    customButtonSelector?: string;
+    buttonPlacement?: ButtonPlacement;
+}
 export interface NavigationConfig {
     aws?: {
+        bedrockEndpoint?: string;
+        embeddingEndpoint?: string;
         region?: string;
         accessKeyId?: string;
         secretAccessKey?: string;
@@ -9,6 +17,7 @@ export interface NavigationConfig {
         embeddingModelId?: string | null;
     };
     azure?: {
+        tokenEndpoint?: string;
         subscriptionKey?: string;
         region?: string;
     };
@@ -18,6 +27,7 @@ export interface NavigationConfig {
     opensearch?: OpenSearchConfig;
     openSearch?: OpenSearchConfig;
     pages?: NavigationPagesConfig;
+    ui?: UIConfig;
 }
 export interface NavigationPagesConfig {
     xml?: string;
@@ -31,20 +41,22 @@ export interface NavigationPagesConfig {
     }>;
 }
 export interface OpenSearchConfig {
-    node: string;
-    username: string;
-    password: string;
-    index: string;
+    searchEndpoint?: string;
+    suggestEndpoint?: string;
+    node?: string;
+    username?: string;
+    password?: string;
+    index?: string;
+    ssl?: {
+        rejectUnauthorized?: boolean;
+    };
+    apiPath?: string;
     vectorField?: string;
     size?: number;
     minScore?: number;
     numCandidates?: number;
     requestTimeoutMs?: number;
     sourceFields?: string[];
-    ssl?: {
-        rejectUnauthorized?: boolean;
-    };
-    apiPath?: string;
 }
 export interface ActionContext {
     controller?: any;
@@ -102,11 +114,12 @@ export interface NavigationCallbacks {
 export type NavigationState = "idle" | "loading" | "listening" | "thinking" | "error";
 export interface UIElements {
     root: HTMLElement;
-    button: HTMLButtonElement;
-    label: HTMLElement;
+    button: HTMLButtonElement | HTMLElement;
+    label: HTMLElement | null;
     status: HTMLElement;
     transcript: HTMLElement;
     action: HTMLElement;
+    isCustomButton?: boolean;
 }
 export interface NavigationEvent extends CustomEvent {
     detail: {

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/ui.d.ts

@@ -1,6 +1,7 @@
-import type { UIElements, NavigationState } from "./types.js";
-export declare const injectFloatingControlStyles: () => void;
-export declare const createFloatingControl: () => UIElements;
+import type { UIElements, NavigationState, ButtonPlacement } from "./types.js";
+export declare const injectFloatingControlStyles: (placement?: ButtonPlacement) => void;
+export declare const createFloatingControl: (placement?: ButtonPlacement) => UIElements;
+export declare const attachToCustomButton: (buttonSelector: string) => Promise<UIElements>;
 export declare const updateStatus: (ui: UIElements, text: string) => void;
 export declare const setState: (ui: UIElements, state: NavigationState) => void;
 export declare const updateTranscript: (ui: UIElements, text: string) => void;

package/dist/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAK9D,eAAO,MAAM,2BAA2B,QAAO,IAmH9C,CAAC;AAKF,eAAO,MAAM,qBAAqB,QAAO,UAqDxC,CAAC;AAKF,eAAO,MAAM,YAAY,GAAI,IAAI,UAAU,EAAE,MAAM,MAAM,KAAG,IAE3D,CAAC;AAKF,eAAO,MAAM,QAAQ,GAAI,IAAI,UAAU,EAAE,OAAO,eAAe,KAAG,IA+BjE,CAAC;AAKF,eAAO,MAAM,gBAAgB,GAAI,IAAI,UAAU,EAAE,MAAM,MAAM,KAAG,IAE/D,CAAC;AAKF,eAAO,MAAM,qBAAqB,GAChC,IAAI,UAAU,EACd,YAAY,MAAM,EAClB,WAAW,OAAO,EAClB,OAAM,GAAQ,KACb,IAkBF,CAAC;AAKF,eAAO,MAAM,SAAS,GAAI,IAAI,UAAU,EAAE,OAAO,KAAK,KAAG,IAGxD,CAAC;AAKF,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,EAAE,SAAQ,GAAQ,KAAG,IAU1D,CAAC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAuC/E,eAAO,MAAM,2BAA2B,GACtC,YAAW,eAAgC,KAC1C,IAqHF,CAAC;AAKF,eAAO,MAAM,qBAAqB,GAChC,YAAW,eAAgC,KAC1C,UAgEF,CAAC;AA+EF,eAAO,MAAM,oBAAoB,GAC/B,gBAAgB,MAAM,KACrB,OAAO,CAAC,UAAU,CAuEpB,CAAC;AAKF,eAAO,MAAM,YAAY,GAAI,IAAI,UAAU,EAAE,MAAM,MAAM,KAAG,IAE3D,CAAC;AAKF,eAAO,MAAM,QAAQ,GAAI,IAAI,UAAU,EAAE,OAAO,eAAe,KAAG,IAgDjE,CAAC;AAKF,eAAO,MAAM,gBAAgB,GAAI,IAAI,UAAU,EAAE,MAAM,MAAM,KAAG,IAE/D,CAAC;AAKF,eAAO,MAAM,qBAAqB,GAChC,IAAI,UAAU,EACd,YAAY,MAAM,EAClB,WAAW,OAAO,EAClB,OAAM,GAAQ,KACb,IAkBF,CAAC;AAKF,eAAO,MAAM,SAAS,GAAI,IAAI,UAAU,EAAE,OAAO,KAAK,KAAG,IAGxD,CAAC;AAKF,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,EAAE,SAAQ,GAAQ,KAAG,IAU1D,CAAC"}

package/dist/ui.js

@@ -1,17 +1,41 @@
-export const injectFloatingControlStyles = () => {
-    if (document.getElementById("navigate-control-styles")) {
-        return;
+const getPlacementStyles = (placement) => {
+    const positions = {
+        "bottom-right": "bottom: 24px; right: 24px; left: auto; top: auto;",
+        "bottom-left": "bottom: 24px; left: 24px; right: auto; top: auto;",
+        "top-right": "top: 24px; right: 24px; left: auto; bottom: auto;",
+        "top-left": "top: 24px; left: 24px; right: auto; bottom: auto;",
+        "center-right": "top: 50%; right: 24px; left: auto; bottom: auto; transform: translateY(-50%);",
+        "center-left": "top: 50%; left: 24px; right: auto; bottom: auto; transform: translateY(-50%);",
+    };
+    return positions[placement] || positions["bottom-right"];
+};
+const getMobilePlacementStyles = (placement) => {
+    const positions = {
+        "bottom-right": "bottom: 16px; right: 16px; left: auto; top: auto;",
+        "bottom-left": "bottom: 16px; left: 16px; right: auto; top: auto;",
+        "top-right": "top: 16px; right: 16px; left: auto; bottom: auto;",
+        "top-left": "top: 16px; left: 16px; right: auto; bottom: auto;",
+        "center-right": "top: 50%; right: 16px; left: auto; bottom: auto; transform: translateY(-50%);",
+        "center-left": "top: 50%; left: 16px; right: auto; bottom: auto; transform: translateY(-50%);",
+    };
+    return positions[placement] || positions["bottom-right"];
+};
+export const injectFloatingControlStyles = (placement = "bottom-right") => {
+    const existingStyle = document.getElementById("navigate-control-styles");
+    if (existingStyle) {
+        existingStyle.remove();
     }
     const style = document.createElement("style");
     style.id = "navigate-control-styles";
+    const placementStyles = getPlacementStyles(placement);
+    const mobilePlacementStyles = getMobilePlacementStyles(placement);
     style.textContent = `
     .navigate-control {
       position: fixed;
-      bottom: 24px;
-      right: 24px;
+      ${placementStyles}
       display: flex;
       gap: 12px;
-      align-items: flex-end;
+      align-items: ${placement.startsWith("top") ? "flex-start" : "flex-end"};
       z-index: 2147483647;
       font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       color: #0f172a;
@@ -101,8 +125,7 @@ export const injectFloatingControlStyles = () => {
 
     @media (max-width: 640px) {
       .navigate-control {
-        right: 16px;
-        bottom: 16px;
+        ${mobilePlacementStyles}
       }
 
       .navigate-control__panel {
@@ -112,8 +135,8 @@ export const injectFloatingControlStyles = () => {
   `;
     document.head.appendChild(style);
 };
-export const createFloatingControl = () => {
-    injectFloatingControlStyles();
+export const createFloatingControl = (placement = "bottom-right") => {
+    injectFloatingControlStyles(placement);
     let root = document.getElementById("navigate-control");
     if (!root) {
         root = document.createElement("div");
@@ -133,10 +156,12 @@ export const createFloatingControl = () => {
   `;
     const appendToBody = () => {
         if (!document.body) {
+            console.warn("Voice navigation: document.body not available yet");
             return;
         }
         if (!document.body.contains(root)) {
             document.body.appendChild(root);
+            console.log(`Voice navigation: Button created with placement "${placement}"`);
         }
     };
     appendToBody();
@@ -145,13 +170,111 @@ export const createFloatingControl = () => {
             once: true,
         });
     }
+    const button = root.querySelector(".navigate-control__button");
+    if (!button) {
+        console.error("Voice navigation: Failed to create button element");
+    }
     return {
         root,
-        button: root.querySelector(".navigate-control__button"),
+        button,
         label: root.querySelector(".navigate-control__label"),
         status: root.querySelector(".navigate-control__status"),
         transcript: root.querySelector(".navigate-control__transcript"),
         action: root.querySelector(".navigate-control__action"),
+        isCustomButton: false,
+    };
+};
+const waitForElement = (selector, timeout = 30000) => {
+    return new Promise((resolve, reject) => {
+        const element = document.querySelector(selector);
+        if (element) {
+            console.log(`[Voice Navigation] Element "${selector}" found immediately`);
+            resolve(element);
+            return;
+        }
+        console.log(`[Voice Navigation] Element "${selector}" not found, waiting up to ${timeout}ms...`);
+        let observer = null;
+        const waitForBody = () => {
+            if (!document.body) {
+                console.log("[Voice Navigation] Waiting for document.body to be available...");
+                setTimeout(waitForBody, 100);
+                return;
+            }
+            observer = new MutationObserver(() => {
+                const element = document.querySelector(selector);
+                if (element) {
+                    observer?.disconnect();
+                    clearTimeout(timeoutId);
+                    console.log(`[Voice Navigation] Element "${selector}" found after waiting`);
+                    resolve(element);
+                }
+            });
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        };
+        waitForBody();
+        const timeoutId = setTimeout(() => {
+            observer?.disconnect();
+            console.error(`[Voice Navigation] Timeout: Element "${selector}" not found after ${timeout}ms`);
+            const allButtons = document.querySelectorAll('[id^="btn"]');
+            if (allButtons.length > 0) {
+                console.log("[Voice Navigation] Available buttons with id starting with 'btn':", Array.from(allButtons).map((btn) => `#${btn.id}`));
+            }
+            reject(new Error(`Custom button not found with selector: "${selector}" after ${timeout}ms. Make sure the button exists in the DOM.`));
+        }, timeout);
+    });
+};
+export const attachToCustomButton = async (buttonSelector) => {
+    injectFloatingControlStyles("bottom-right");
+    console.log(`Voice navigation: Waiting for custom button "${buttonSelector}"...`);
+    const customButton = await waitForElement(buttonSelector).catch((error) => {
+        console.error(error.message);
+        throw error;
+    });
+    console.log(`Voice navigation: Custom button found "${buttonSelector}"`);
+    let root = document.getElementById("navigate-control-panel");
+    if (!root) {
+        root = document.createElement("div");
+        root.id = "navigate-control-panel";
+        root.className = "navigate-control";
+        root.style.display = "none";
+    }
+    root.dataset.state = root.dataset.state || "idle";
+    root.innerHTML = `
+    <div class="navigate-control__panel">
+      <div class="navigate-control__status">Tap your button to start voice control</div>
+      <div class="navigate-control__transcript" role="status" aria-live="polite"></div>
+      <div class="navigate-control__action" aria-live="polite"></div>
+    </div>
+  `;
+    const appendToBody = () => {
+        if (!document.body) {
+            return;
+        }
+        if (!document.body.contains(root)) {
+            document.body.appendChild(root);
+        }
+    };
+    appendToBody();
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", appendToBody, {
+            once: true,
+        });
+    }
+    customButton.setAttribute("aria-pressed", "false");
+    if (!customButton.getAttribute("aria-label")) {
+        customButton.setAttribute("aria-label", "Start voice control");
+    }
+    return {
+        root,
+        button: customButton,
+        label: null,
+        status: root.querySelector(".navigate-control__status"),
+        transcript: root.querySelector(".navigate-control__transcript"),
+        action: root.querySelector(".navigate-control__action"),
+        isCustomButton: true,
     };
 };
 export const updateStatus = (ui, text) => {
@@ -159,34 +282,44 @@ export const updateStatus = (ui, text) => {
 };
 export const setState = (ui, state) => {
     ui.root.dataset.state = state;
+    const updateLabel = (text) => {
+        if (ui.label) {
+            ui.label.textContent = text;
+        }
+    };
     switch (state) {
         case "idle":
-            ui.label.textContent = "Start";
+            updateLabel("Start");
             ui.button.setAttribute("aria-pressed", "false");
             ui.button.setAttribute("aria-label", "Start voice control");
-            updateStatus(ui, "Tap to start voice control");
+            updateStatus(ui, ui.isCustomButton
+                ? "Tap your button to start voice control"
+                : "Tap to start voice control");
             break;
         case "loading":
-            ui.label.textContent = "Loading...";
+            updateLabel("Loading...");
             ui.button.setAttribute("aria-label", "Loading voice control");
             updateStatus(ui, "Loading...");
             break;
         case "listening":
-            ui.label.textContent = "Stop";
+            updateLabel("Stop");
             ui.button.setAttribute("aria-pressed", "true");
             ui.button.setAttribute("aria-label", "Stop voice control");
             updateStatus(ui, "Listening...");
             break;
         case "thinking":
-            ui.label.textContent = "Stop";
+            updateLabel("Stop");
             ui.button.setAttribute("aria-label", "Processing");
             updateStatus(ui, "Processing...");
             break;
         case "error":
-            ui.label.textContent = "Error";
+            updateLabel("Error");
             ui.button.setAttribute("aria-label", "Error occurred");
             break;
     }
+    if (ui.isCustomButton) {
+        ui.root.style.display = state === "idle" ? "none" : "flex";
+    }
 };
 export const updateTranscript = (ui, text) => {
     ui.transcript.textContent = text;