@navsi.ai/sdk 1.0.0

package/README.md

@@ -0,0 +1,348 @@
+# @navsi/sdk - Navsi AI Chatbot SDK
+
+AI-powered chatbot SDK for websites with Ask & Navigate modes.
+
+> ⚠️ **Note**: This package is part of the `navsi-integrated` monorepo.
+
+## Installation (for external users)
+
+```bash
+npm install @navsi/sdk
+# or
+yarn add @navsi/sdk
+# or
+pnpm add @navsi/sdk
+```
+
+For **Next.js** projects, ensure `next` is installed (optional peer dependency):  
+`pnpm add next` (or use your existing Next.js app).
+
+## Quick Start
+
+```tsx
+import { ChatbotProvider, ChatbotWidget } from '@navsi/sdk';
+
+function App() {
+  return (
+    <ChatbotProvider
+      apiKey="YOUR_API_KEY"
+      serverUrl="wss://your-server.com/ws"
+    >
+      <YourApp />
+      <ChatbotWidget />
+    </ChatbotProvider>
+  );
+}
+```
+
+### With Configuration Fetching
+
+For a complete setup with widget configuration from your server:
+
+```tsx
+import React, { useState, useEffect } from 'react';
+import { ChatbotProvider, ChatbotWidget } from '@navsi/sdk';
+import type { FlatWidgetConfig } from '@navsi/shared';
+
+function App() {
+  const [widgetConfig, setWidgetConfig] = useState<FlatWidgetConfig | null>(null);
+  const [configError, setConfigError] = useState<string | null>(null);
+
+  const API_KEY = import.meta.env.VITE_NAVSI_API_KEY || process.env.REACT_APP_NAVSI_API_KEY;
+  const API_BASE = import.meta.env.VITE_NAVSI_API_URL || process.env.REACT_APP_NAVSI_API_URL || 'https://api.example.com';
+  
+  // Convert HTTP URL to WebSocket URL
+  const getWebSocketUrl = (httpUrl: string): string => {
+    const url = new URL(httpUrl);
+    const wsProtocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
+    return `${wsProtocol}//${url.host}${url.pathname.replace(/\/$/, '')}/ws`;
+  };
+  const WS_URL = getWebSocketUrl(API_BASE);
+
+  useEffect(() => {
+    fetch(`${API_BASE}/api/sdk/config`, {
+      headers: { 'x-api-key': API_KEY },
+    })
+      .then((r) => {
+        if (!r.ok) throw new Error(`Failed to fetch config: ${r.status}`);
+        return r.json();
+      })
+      .then((data) => {
+        if (data?.config && typeof data.config === 'object') {
+          setWidgetConfig(data.config as FlatWidgetConfig);
+        }
+      })
+      .catch((err) => {
+        console.error('Failed to load widget config:', err);
+        setConfigError(err.message);
+        // Widget will still work with default config
+      });
+  }, []);
+
+  return (
+    <ChatbotProvider
+      apiKey={API_KEY}
+      serverUrl={WS_URL}
+      config={widgetConfig}
+    >
+      <YourApp />
+      <ChatbotWidget />
+    </ChatbotProvider>
+  );
+}
+```
+
+### Next.js (App Router)
+
+Use a **Client Component** to wrap your app with the chatbot and provide a Next.js navigation adapter so the AI can navigate between pages:
+
+1. Create a client component (e.g. `app/ClientProviders.tsx`) with `'use client'` at the top.
+2. Use `useRouter()` and `usePathname()` from `next/navigation`, and `useNextRouterAdapter(router, pathname)` from `@navsi/sdk`.
+3. Wrap your app in `ChatbotProvider` (with `navigationAdapter`) and render `ChatbotWidget`.
+4. Set `NEXT_PUBLIC_NAVSI_API_KEY` and `NEXT_PUBLIC_NAVSI_API_URL` in `.env.local` (WebSocket URL is derived from the API URL).
+
+```tsx
+// app/ClientProviders.tsx
+'use client';
+
+import { useRouter, usePathname } from 'next/navigation';
+import { ChatbotProvider, ChatbotWidget, useNextRouterAdapter } from '@navsi/sdk';
+
+function getWebSocketUrl(httpUrl: string): string {
+  const url = new URL(httpUrl);
+  const wsProtocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
+  return `${wsProtocol}//${url.host}${url.pathname.replace(/\/$/, '')}/ws`;
+}
+
+export function ClientProviders({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const adapter = useNextRouterAdapter(router, pathname);
+
+  const apiKey = process.env.NEXT_PUBLIC_NAVSI_API_KEY ?? '';
+  const apiUrl = process.env.NEXT_PUBLIC_NAVSI_API_URL ?? 'http://localhost:3001';
+  const serverUrl = getWebSocketUrl(apiUrl);
+
+  return (
+    <ChatbotProvider apiKey={apiKey} serverUrl={serverUrl} navigationAdapter={adapter} routes={['/', '/products', '/cart']}>
+      {children}
+      <ChatbotWidget />
+    </ChatbotProvider>
+  );
+}
+```
+
+In your root `app/layout.tsx`, wrap your app with `<ClientProviders>{children}</ClientProviders>` (or nest it inside your layout so the widget is available on all pages).
+
+## Features
+
+### Ask Mode
+- Natural language Q&A about your website
+- Context-aware responses based on current page
+- Powered by Gemini AI
+
+### Navigate Mode
+- AI-guided navigation through your website
+- Automatic form filling
+- Multi-step task completion
+
+## Configuration Options
+
+```typescript
+interface ChatbotProviderProps {
+  // Required
+  apiKey: string;              // Your API key from the admin dashboard
+  serverUrl: string;            // WebSocket server URL (e.g., 'wss://api.example.com/ws')
+  
+  // Optional
+  config?: FlatWidgetConfig | null;  // Widget config fetched from /api/sdk/config
+  options?: Partial<WidgetConfig>;   // Additional widget configuration (e.g. voiceLanguage: 'hi-IN')
+  navigationAdapter?: NavigationAdapter;  // Custom navigation adapter (defaults to memory)
+  serverActions?: ServerAction[];    // Server-side actions the AI can execute
+  routes?: string[];                // List of available routes (for AI context)
+  debug?: boolean;                  // Enable debug logging
+  autoConnect?: boolean;            // Auto-connect WebSocket on mount (default: true)
+  children: React.ReactNode;       // Your app components
+}
+```
+
+### Widget Configuration
+
+The `config` prop accepts a flat widget configuration object fetched from your server:
+
+```typescript
+interface FlatWidgetConfig {
+  headerTitle?: string;
+  welcomeMessage?: string;
+  inputPlaceholder?: string;
+  showModeToggle?: boolean;
+  defaultMode?: 'ask' | 'navigate';
+  defaultOpen?: boolean;
+  /** BCP-47 language for voice input, output, and AI responses (e.g. 'hi-IN' for Hindi) */
+  voiceLanguage?: string;
+  theme?: {
+    primaryColor?: string;
+    secondaryColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    fontFamily?: string;
+    borderRadius?: number;
+    darkMode?: boolean;
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  };
+}
+```
+
+### Voice language (e.g. Hindi)
+
+Set `voiceLanguage` to a BCP-47 locale (e.g. `'hi-IN'` for Hindi) to:
+
+- Use that language for **speech recognition** (mic input)
+- Use that language for **speech synthesis** (AI reply read aloud)
+- Have the AI **respond in that language** (e.g. Hindi in Devanagari)
+
+Example:
+
+```tsx
+<ChatbotProvider
+  apiKey={API_KEY}
+  serverUrl={WS_URL}
+  options={{ voiceLanguage: 'hi-IN' }}
+>
+  <ChatbotWidget />
+</ChatbotProvider>
+```
+
+You can also pass `voiceLanguage` in the `config` object from your API. Browser support for Hindi (and other locales) depends on the client; Chrome supports `hi-IN` for both recognition and synthesis.
+
+## Server Actions
+
+Register server-side actions that the AI can execute:
+
+```tsx
+const serverActions = [
+  {
+    id: 'add-to-cart',
+    name: 'Add to Cart',
+    description: 'Add a product to the shopping cart',
+    parameters: [
+      { name: 'productId', type: 'string', required: true },
+      { name: 'quantity', type: 'number', required: false, defaultValue: 1 },
+    ],
+    handler: async (params, context) => {
+      // Your logic here
+      return { success: true, data: { message: 'Added to cart!' } };
+    },
+  },
+];
+
+<ChatbotProvider 
+  apiKey="YOUR_API_KEY"
+  serverUrl="wss://your-server.com/ws"
+  serverActions={serverActions}
+>
+```
+
+## Hooks
+
+### useChatbot
+
+Access chatbot state and controls:
+
+```tsx
+import { useChatbot } from '@navsi/sdk';
+
+function MyComponent() {
+  const { 
+    isConnected,
+    mode,
+    setMode,
+    sendMessage,
+    messages 
+  } = useChatbot();
+}
+```
+
+### useWebSocket
+
+Access WebSocket connection state:
+
+```tsx
+import { useWebSocket } from '@navsi/sdk';
+
+function ConnectionStatus() {
+  const { isConnected, isReconnecting } = useWebSocket();
+  
+  return <div>Status: {isConnected ? 'Connected' : isReconnecting ? 'Reconnecting' : 'Disconnected'}</div>;
+}
+```
+
+### useActionExecution
+
+Track action execution progress:
+
+```tsx
+import { useActionExecution } from '@navsi/sdk';
+
+function ProgressBar() {
+  const { progress } = useActionExecution();
+  
+  return progress ? (
+    <div>Step {progress.current + 1} of {progress.total}</div>
+  ) : null;
+}
+```
+
+## Environment Variables
+
+For production deployments, use environment variables:
+
+```bash
+# Vite (recommended)
+VITE_NAVSI_API_KEY=your_api_key_here
+VITE_NAVSI_API_URL=https://api.example.com
+
+# Create React App
+REACT_APP_NAVSI_API_KEY=your_api_key_here
+REACT_APP_NAVSI_API_URL=https://api.example.com
+
+# Next.js
+NEXT_PUBLIC_NAVSI_API_KEY=your_api_key_here
+NEXT_PUBLIC_NAVSI_API_URL=https://api.example.com
+```
+
+**Important**: Never commit API keys to version control. Use environment variables or secure configuration services.
+
+## Troubleshooting
+
+### Widget doesn't connect
+
+1. Check that `serverUrl` is correct (use `wss://` for HTTPS, `ws://` for HTTP)
+2. Verify your API key is valid
+3. Check browser console for WebSocket connection errors
+4. Ensure CORS is configured on your server
+
+### Configuration not loading
+
+1. Verify the `/api/sdk/config` endpoint returns valid JSON
+2. Check that the `x-api-key` header is included in the request
+3. Widget will fall back to default config if fetch fails
+
+### Actions not working
+
+1. Ensure `navigationAdapter` is provided if using React Router or similar
+2. Check that DOM elements have proper `data-chatbot-action` attributes
+3. Enable `debug={true}` to see detailed logs
+
+## Development
+
+```bash
+# From monorepo root
+pnpm --filter @navsi/sdk dev     # Watch mode
+pnpm --filter @navsi/sdk build   # Build
+pnpm --filter @navsi/sdk lint    # Lint
+```
+
+## License
+
+MIT

package/dist/chunk-427NHGTX.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-427NHGTX.js.map
+//# sourceMappingURL=chunk-427NHGTX.js.map

package/dist/chunk-427NHGTX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-427NHGTX.js"}

package/dist/chunk-6FUUG5WB.js

@@ -0,0 +1,77 @@
+import { createContext, useContext } from 'react';
+
+// src/context/chatbot-context.tsx
+var ChatbotContext = createContext(null);
+function useChatbotContext() {
+  const context = useContext(ChatbotContext);
+  if (!context) {
+    throw new Error("useChatbotContext must be used within a ChatbotProvider");
+  }
+  return context;
+}
+
+// src/hooks/useChatbot.ts
+function useChatbot() {
+  const context = useChatbotContext();
+  return {
+    widgetConfig: context.widgetConfig,
+    voiceLanguage: context.voiceLanguage,
+    setVoiceLanguage: context.setVoiceLanguage,
+    // Messages
+    messages: context.messages,
+    sendMessage: context.sendMessage,
+    clearMessages: context.clearMessages,
+    // Mode
+    mode: context.mode,
+    setMode: context.setMode,
+    // Widget visibility
+    isWidgetOpen: context.isWidgetOpen,
+    setWidgetOpen: context.setWidgetOpen,
+    // Connection
+    isConnected: context.isConnected,
+    connect: context.connect,
+    disconnect: context.disconnect,
+    // Actions
+    executeAction: context.executeAction,
+    registerServerAction: context.registerServerAction,
+    stopExecution: context.stopExecution,
+    // State
+    isExecuting: context.isExecuting,
+    error: context.error,
+    clearError: context.clearError
+  };
+}
+
+// src/hooks/useActionExecution.ts
+function useActionExecution() {
+  const context = useChatbotContext();
+  const progress = context.executionState ? {
+    current: context.executionState.currentIndex,
+    total: context.executionState.totalCommands,
+    percentage: context.executionState.totalCommands > 0 ? Math.round(context.executionState.currentIndex / context.executionState.totalCommands * 100) : 0,
+    description: context.executionState.description
+  } : null;
+  return {
+    isExecuting: context.isExecuting,
+    executionState: context.executionState,
+    currentCommand: context.executionState?.currentCommand,
+    progress
+  };
+}
+
+// src/hooks/useWebSocket.ts
+function useWebSocket() {
+  const context = useChatbotContext();
+  return {
+    connectionState: context.connectionState,
+    isConnected: context.connectionState === "connected",
+    isConnecting: context.connectionState === "connecting",
+    isReconnecting: context.connectionState === "reconnecting",
+    connect: context.connect,
+    disconnect: context.disconnect
+  };
+}
+
+export { ChatbotContext, useActionExecution, useChatbot, useChatbotContext, useWebSocket };
+//# sourceMappingURL=chunk-6FUUG5WB.js.map
+//# sourceMappingURL=chunk-6FUUG5WB.js.map

package/dist/chunk-6FUUG5WB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context/chatbot-context.tsx","../src/hooks/useChatbot.ts","../src/hooks/useActionExecution.ts","../src/hooks/useWebSocket.ts"],"names":[],"mappings":";;;AA2DO,IAAM,cAAA,GAAiB,cAA0C,IAAI;AAUrE,SAAS,iBAAA,GAAyC;AACrD,EAAA,MAAM,OAAA,GAAU,WAAW,cAAc,CAAA;AAEzC,EAAA,IAAI,CAAC,OAAA,EAAS;AACV,IAAA,MAAM,IAAI,MAAM,yDAAyD,CAAA;AAAA,EAC7E;AAEA,EAAA,OAAO,OAAA;AACX;;;ACHO,SAAS,UAAA,GAA+B;AAC3C,EAAA,MAAM,UAAU,iBAAA,EAAkB;AAElC,EAAA,OAAO;AAAA,IACH,cAAc,OAAA,CAAQ,YAAA;AAAA,IACtB,eAAe,OAAA,CAAQ,aAAA;AAAA,IACvB,kBAAkB,OAAA,CAAQ,gBAAA;AAAA;AAAA,IAE1B,UAAU,OAAA,CAAQ,QAAA;AAAA,IAClB,aAAa,OAAA,CAAQ,WAAA;AAAA,IACrB,eAAe,OAAA,CAAQ,aAAA;AAAA;AAAA,IAGvB,MAAM,OAAA,CAAQ,IAAA;AAAA,IACd,SAAS,OAAA,CAAQ,OAAA;AAAA;AAAA,IAGjB,cAAc,OAAA,CAAQ,YAAA;AAAA,IACtB,eAAe,OAAA,CAAQ,aAAA;AAAA;AAAA,IAGvB,aAAa,OAAA,CAAQ,WAAA;AAAA,IACrB,SAAS,OAAA,CAAQ,OAAA;AAAA,IACjB,YAAY,OAAA,CAAQ,UAAA;AAAA;AAAA,IAGpB,eAAe,OAAA,CAAQ,aAAA;AAAA,IACvB,sBAAsB,OAAA,CAAQ,oBAAA;AAAA,IAC9B,eAAe,OAAA,CAAQ,aAAA;AAAA;AAAA,IAGvB,aAAa,OAAA,CAAQ,WAAA;AAAA,IACrB,OAAO,OAAA,CAAQ,KAAA;AAAA,IACf,YAAY,OAAA,CAAQ;AAAA,GACxB;AACJ;;;ACpFO,SAAS,kBAAA,GAA+C;AAC3D,EAAA,MAAM,UAAU,iBAAA,EAAkB;AAElC,EAAA,MAAM,QAAA,GAAW,QAAQ,cAAA,GACnB;AAAA,IACE,OAAA,EAAS,QAAQ,cAAA,CAAe,YAAA;AAAA,IAChC,KAAA,EAAO,QAAQ,cAAA,CAAe,aAAA;AAAA,IAC9B,UAAA,EAAY,OAAA,CAAQ,cAAA,CAAe,aAAA,GAAgB,IAC7C,IAAA,CAAK,KAAA,CAAO,OAAA,CAAQ,cAAA,CAAe,YAAA,GAAe,OAAA,CAAQ,cAAA,CAAe,aAAA,GAAiB,GAAG,CAAA,GAC7F,CAAA;AAAA,IACN,WAAA,EAAa,QAAQ,cAAA,CAAe;AAAA,GACxC,GACE,IAAA;AAEN,EAAA,OAAO;AAAA,IACH,aAAa,OAAA,CAAQ,WAAA;AAAA,IACrB,gBAAgB,OAAA,CAAQ,cAAA;AAAA,IACxB,cAAA,EAAgB,QAAQ,cAAA,EAAgB,cAAA;AAAA,IACxC;AAAA,GACJ;AACJ;;;ACxBO,SAAS,YAAA,GAAmC;AAC/C,EAAA,MAAM,UAAU,iBAAA,EAAkB;AAElC,EAAA,OAAO;AAAA,IACH,iBAAiB,OAAA,CAAQ,eAAA;AAAA,IACzB,WAAA,EAAa,QAAQ,eAAA,KAAoB,WAAA;AAAA,IACzC,YAAA,EAAc,QAAQ,eAAA,KAAoB,YAAA;AAAA,IAC1C,cAAA,EAAgB,QAAQ,eAAA,KAAoB,cAAA;AAAA,IAC5C,SAAS,OAAA,CAAQ,OAAA;AAAA,IACjB,YAAY,OAAA,CAAQ;AAAA,GACxB;AACJ","file":"chunk-6FUUG5WB.js","sourcesContent":["/**\n * Chatbot Context\n * \n * React context for chatbot state and functionality.\n */\n\nimport { createContext, useContext } from 'react';\nimport type {\n    Message,\n    ChatMode,\n    ConnectionState,\n    ServerAction,\n    ExecutionState,\n    WidgetConfig,\n} from '@navsi.ai/shared';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ChatbotContextValue {\n    /** Widget styling and copy (from admin / API). Applied by ChatbotWidget. */\n    widgetConfig: Partial<WidgetConfig> | null;\n\n    // State\n    messages: Message[];\n    mode: ChatMode;\n    connectionState: ConnectionState;\n    isExecuting: boolean;\n    executionState: ExecutionState | null;\n    error: Error | null;\n\n    // Widget visibility (persists across navigation)\n    isWidgetOpen: boolean;\n    setWidgetOpen: (open: boolean) => void;\n\n    /** User-selected voice/response language (e.g. 'en-US', 'hi-IN'). Overrides widgetConfig.voiceLanguage when set. */\n    voiceLanguage: string | undefined;\n    setVoiceLanguage: (lang: string | undefined) => void;\n\n    // Actions\n    sendMessage: (content: string) => void;\n    setMode: (mode: ChatMode) => void;\n    executeAction: (actionId: string, params?: Record<string, unknown>) => Promise<unknown>;\n    registerServerAction: (action: ServerAction) => void;\n    clearMessages: () => void;\n    clearError: () => void;\n    stopExecution: () => void;\n\n    // Connection\n    connect: () => void;\n    disconnect: () => void;\n    isConnected: boolean;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nexport const ChatbotContext = createContext<ChatbotContextValue | null>(null);\n\n// ============================================================================\n// Hook\n// ============================================================================\n\n/**\n * Hook to access chatbot context\n * Must be used within ChatbotProvider\n */\nexport function useChatbotContext(): ChatbotContextValue {\n    const context = useContext(ChatbotContext);\n\n    if (!context) {\n        throw new Error('useChatbotContext must be used within a ChatbotProvider');\n    }\n\n    return context;\n}\n","/**\n * useChatbot Hook\n * \n * Main hook for accessing chatbot functionality.\n * Provides simplified API for common operations.\n */\n\nimport { useChatbotContext } from '../context/chatbot-context.js';\nimport type { ChatMode, ServerAction, Message, WidgetConfig } from '@navsi.ai/shared';\n\nexport interface UseChatbotReturn {\n    /** Widget styling/copy from admin (or options). Use in ChatbotWidget. */\n    widgetConfig: Partial<WidgetConfig> | null;\n\n    /** Effective voice/response language (user-selected or config). Use for STT/TTS and locale. */\n    voiceLanguage: string | undefined;\n    setVoiceLanguage: (lang: string | undefined) => void;\n\n    // Messages\n    messages: Message[];\n    sendMessage: (content: string) => void;\n    clearMessages: () => void;\n\n    // Mode\n    mode: ChatMode;\n    setMode: (mode: ChatMode) => void;\n\n    // Widget visibility (persists across navigation)\n    isWidgetOpen: boolean;\n    setWidgetOpen: (open: boolean) => void;\n\n    // Connection\n    isConnected: boolean;\n    connect: () => void;\n    disconnect: () => void;\n\n    // Actions\n    executeAction: (actionId: string, params?: Record<string, unknown>) => Promise<unknown>;\n    registerServerAction: (action: ServerAction) => void;\n    stopExecution: () => void;\n\n    // State\n    isExecuting: boolean;\n    error: Error | null;\n    clearError: () => void;\n}\n\n/**\n * Main hook for chatbot functionality\n * \n * @example\n * ```tsx\n * function MyComponent() {\n *   const { \n *     messages, \n *     sendMessage, \n *     isConnected,\n *     mode,\n *     setMode,\n *   } = useChatbot();\n * \n *   return (\n *     <div>\n *       <button onClick={() => sendMessage('Hello!')}>\n *         Send\n *       </button>\n *       <button onClick={() => startVoice()}>\n *         Start Voice\n *       </button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useChatbot(): UseChatbotReturn {\n    const context = useChatbotContext();\n\n    return {\n        widgetConfig: context.widgetConfig,\n        voiceLanguage: context.voiceLanguage,\n        setVoiceLanguage: context.setVoiceLanguage,\n        // Messages\n        messages: context.messages,\n        sendMessage: context.sendMessage,\n        clearMessages: context.clearMessages,\n\n        // Mode\n        mode: context.mode,\n        setMode: context.setMode,\n\n        // Widget visibility\n        isWidgetOpen: context.isWidgetOpen,\n        setWidgetOpen: context.setWidgetOpen,\n\n        // Connection\n        isConnected: context.isConnected,\n        connect: context.connect,\n        disconnect: context.disconnect,\n\n        // Actions\n        executeAction: context.executeAction,\n        registerServerAction: context.registerServerAction,\n        stopExecution: context.stopExecution,\n\n        // State\n        isExecuting: context.isExecuting,\n        error: context.error,\n        clearError: context.clearError,\n    };\n}\n","/**\n * useActionExecution Hook\n * \n * Hook for monitoring action execution state.\n */\n\nimport { useChatbotContext } from '../context/chatbot-context.js';\nimport type { ExecutionState } from '@navsi.ai/shared';\n\nexport interface UseActionExecutionReturn {\n    isExecuting: boolean;\n    executionState: ExecutionState | null;\n    currentCommand: ExecutionState['currentCommand'] | undefined;\n    progress: {\n        current: number;\n        total: number;\n        percentage: number;\n        /** Optional human-readable description of the current step */\n        description?: string;\n    } | null;\n}\n\n/**\n * Hook for monitoring action execution\n */\nexport function useActionExecution(): UseActionExecutionReturn {\n    const context = useChatbotContext();\n\n    const progress = context.executionState\n        ? {\n            current: context.executionState.currentIndex,\n            total: context.executionState.totalCommands,\n            percentage: context.executionState.totalCommands > 0\n                ? Math.round((context.executionState.currentIndex / context.executionState.totalCommands) * 100)\n                : 0,\n            description: context.executionState.description,\n        }\n        : null;\n\n    return {\n        isExecuting: context.isExecuting,\n        executionState: context.executionState,\n        currentCommand: context.executionState?.currentCommand,\n        progress,\n    };\n}\n","/**\n * useWebSocket Hook\n * \n * Hook for managing WebSocket connection state.\n */\n\nimport { useChatbotContext } from '../context/chatbot-context.js';\nimport type { ConnectionState } from '@navsi.ai/shared';\n\nexport interface UseWebSocketReturn {\n    connectionState: ConnectionState;\n    isConnected: boolean;\n    isConnecting: boolean;\n    isReconnecting: boolean;\n    connect: () => void;\n    disconnect: () => void;\n}\n\n/**\n * Hook for WebSocket connection management\n */\nexport function useWebSocket(): UseWebSocketReturn {\n    const context = useChatbotContext();\n\n    return {\n        connectionState: context.connectionState,\n        isConnected: context.connectionState === 'connected',\n        isConnecting: context.connectionState === 'connecting',\n        isReconnecting: context.connectionState === 'reconnecting',\n        connect: context.connect,\n        disconnect: context.disconnect,\n    };\n}\n"]}