@voxket-ai/voxket-live 1.0.150 → 1.0.151

package/README.md

@@ -357,6 +357,122 @@ client.on('connection.error', (error) => {
 });
 ```
 
+## 🔔 **Custom Event System**
+
+### 📡 **Register Event Emitters**
+
+Register custom event emitters to listen for LiveKit text stream topics:
+
+```typescript
+import { VoxketClient } from '@voxket-ai/voxket-live';
+
+const client = new VoxketClient(config);
+
+// Register an event emitter for custom events
+client.registerEventEmitter('custom_event_topic', (data) => {
+  console.log('Custom event received:', data);
+  // Handle your custom business logic
+  handleCustomEvent(data);
+});
+
+// Register multiple event emitters
+client.registerEventEmitter('user_action', (actionData) => {
+  console.log('User action:', actionData);
+  analytics.track('user_action', actionData);
+});
+
+client.registerEventEmitter('system_notification', (notification) => {
+  showNotification(notification);
+});
+```
+
+### 🎯 **Event Listener Registration**
+
+Register event listeners for any SDK events with automatic cleanup:
+
+```typescript
+// Register event listeners with automatic unsubscribe
+const unsubscribe = client.registerEventListener('chat.message.received', (message) => {
+  console.log('New message:', message);
+  updateUI(message);
+});
+
+// Manual cleanup when needed
+unsubscribe();
+
+// Register multiple listeners
+client.registerEventListener('connection.connected', () => {
+  console.log('Connected to Voxket!');
+  updateConnectionStatus('connected');
+});
+
+client.registerEventListener('agent.thinking', () => {
+  showTypingIndicator();
+});
+```
+
+### 🏢 **Business Integration Examples**
+
+#### **Real-time Notifications**
+```typescript
+// Listen for agent-triggered notifications
+client.registerEventEmitter('agent_notification', (data) => {
+  // Show toast notification
+  showToast({
+    title: data.title,
+    message: data.message,
+    type: data.type
+  });
+});
+
+// Listen for system updates
+client.registerEventEmitter('system_update', (updateInfo) => {
+  if (updateInfo.type === 'maintenance') {
+    showMaintenanceWarning(updateInfo.schedule);
+  }
+});
+```
+
+#### **Custom Analytics Integration**
+```typescript
+// Track custom business events
+client.registerEventEmitter('business_event', (eventData) => {
+  // Send to your analytics platform
+  analytics.track(eventData.event_name, {
+    ...eventData.properties,
+    timestamp: new Date().toISOString(),
+    session_id: client.getCurrentSession()?.id
+  });
+});
+
+// Example: Track user interactions
+client.registerEventEmitter('user_interaction', (interaction) => {
+  mixpanel.track('Voxket User Interaction', {
+    interaction_type: interaction.type,
+    interaction_data: interaction.data,
+    user_id: getCurrentUserId()
+  });
+});
+```
+
+#### **Workflow Automation**
+```typescript
+// Trigger business workflows
+client.registerEventEmitter('workflow_trigger', (workflowData) => {
+  switch (workflowData.workflow_type) {
+    case 'lead_qualification':
+      triggerLeadQualificationWorkflow(workflowData.lead_data);
+      break;
+    case 'support_escalation':
+      escalateToHumanAgent(workflowData.ticket_data);
+      break;
+    case 'appointment_booking':
+      processAppointmentRequest(workflowData.appointment_data);
+      break;
+  }
+});
+```
+
 ### 💬 **Chat & Messaging Events**
 
 ```javascript
@@ -766,7 +882,31 @@ await client.setAudioInputDevice(deviceId);
 await client.setVideoInputDevice(deviceId);
 ```
 
-### 👥 **Participant Management**
+### � **Event System Methods**
+
+```typescript
+// Register custom event emitter
+client.registerEventEmitter(
+  topic: string,
+  handler: (data: string) => void
+): void
+
+// Register event listener with cleanup
+client.registerEventListener<K extends keyof VoxketEvents>(
+  eventName: K,
+  callback: (data: any) => void
+): () => void
+
+// Example usage
+const unsubscribe = client.registerEventListener('chat.message.received', (msg) => {
+  console.log('Message:', msg);
+});
+
+// Cleanup
+unsubscribe();
+```
+
+### �👥 **Participant Management**
 
 ```typescript
 // Get participants

package/dist/components/chat/attachment-message.d.ts

@@ -0,0 +1,9 @@
+import { ThemeType } from '../../styles';
+import { ChatMessage } from '../../types/core';
+interface AttachmentMessageProps {
+    message: ChatMessage;
+    theme: ThemeType;
+    isOwn: boolean;
+}
+export declare function AttachmentMessage({ message, theme, isOwn }: AttachmentMessageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/chat/chat-input-panel.d.ts

@@ -0,0 +1,11 @@
+import { ThemeType } from '../../styles';
+interface ChatInputPanelProps {
+    onSendMessage: (message: string) => void;
+    onSendAttachments: (files: File[]) => void;
+    disabled?: boolean;
+    theme: ThemeType;
+    onEndChat?: () => void;
+    attachmentsEnabled?: boolean;
+}
+export declare function ChatInputPanel({ onSendMessage, onSendAttachments, disabled, theme, onEndChat, attachmentsEnabled }: ChatInputPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/chat/chat-message.d.ts

@@ -0,0 +1,10 @@
+import { ThemeType } from '../../styles';
+import { ChatMessage } from '../../types/core';
+interface ChatMessageProps {
+    message: ChatMessage;
+    theme: ThemeType;
+    isOwn: boolean;
+    isStreaming?: boolean;
+}
+export declare function ChatMessageComponent({ message, theme, isOwn, isStreaming }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/chat/default-views.d.ts

@@ -0,0 +1,5 @@
+export declare function DefaultSuccessView(): import("react/jsx-runtime").JSX.Element;
+export declare function DefaultTimeoutView(): import("react/jsx-runtime").JSX.Element;
+export declare function DefaultToolExecutionView({ toolData }: {
+    toolData?: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/chat/markdown-utils.d.ts

@@ -0,0 +1,5 @@
+import { ThemeType } from '../../styles';
+export declare function createMarkdownComponents(theme: ThemeType): any;
+export declare function linkifyText(text: string, theme: ThemeType): (string | import("react/jsx-runtime").JSX.Element)[];
+export declare function detectMarkdownContent(content: string): boolean;
+export declare function cleanMarkdownContent(content: string): string;

package/dist/components/chat/streaming-text.d.ts

@@ -0,0 +1,8 @@
+interface StreamingTextProps {
+    text: string;
+    isComplete: boolean;
+    isRealTimeStream?: boolean;
+    speed?: number;
+}
+export declare function StreamingText({ text, isComplete, isRealTimeStream, speed }: StreamingTextProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/chat/thinking-indicator.d.ts

@@ -0,0 +1,6 @@
+import { ThemeType } from '../../styles';
+interface ThinkingIndicatorProps {
+    theme: ThemeType;
+}
+export declare function ThinkingIndicator({ theme }: ThinkingIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/chat/tool-execution-indicator.d.ts

@@ -0,0 +1,8 @@
+import { ThemeType } from '../../styles';
+import { ToolExecutionData } from '../../types/tools';
+interface ToolExecutionIndicatorProps {
+    toolData: ToolExecutionData;
+    theme: ThemeType;
+}
+export declare function ToolExecutionIndicator({ toolData, theme }: ToolExecutionIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/deep-analysis.d.ts

@@ -0,0 +1,17 @@
+import { VoxketClient } from '../core/client';
+import { ThemeType } from '../styles';
+interface DeepAnalysisProps {
+    voxketClient: VoxketClient | null;
+    theme: ThemeType;
+    setTheme: (theme: ThemeType) => void;
+    configAgentId: string;
+    configParticipantName: string;
+    className?: string;
+    prompts?: string[];
+    statusMessage?: string;
+    welcomeTitle?: string;
+    welcomeSubTitle?: string;
+    participantMetadata?: Record<string, any>;
+}
+export declare function DeepAnalysis({ voxketClient, theme, setTheme, configAgentId, configParticipantName, className, prompts, statusMessage, welcomeTitle, welcomeSubTitle, participantMetadata }: DeepAnalysisProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/widget.d.ts

@@ -33,6 +33,7 @@ export interface VoxketWidgetProps {
     onPopupToggle?: (isOpen: boolean) => void;
     onDisplayTypeChange?: (displayType: DisplayType) => void;
     voxketClient?: VoxketClient;
+    participantMetadata?: Record<string, any>;
 }
 declare function WrappedWidget(props: VoxketWidgetProps & {
     prompts?: string[];

package/dist/core/client.d.ts

@@ -37,11 +37,14 @@ export interface RenderUIOptions {
     welcomeTitle?: string;
     welcomeSubTitle?: string;
     loadingText?: string;
+    /** Participant metadata to be sent with session creation */
+    participantMetadata?: Record<string, any>;
 }
 export interface VoxketClientConfig extends VoxketConfig {
     agentId?: string;
     participantName?: string;
     modalities?: SessionModality[];
+    participantMetadata?: Record<string, any>;
     onConnected?: () => void;
     onDisconnected?: (reason?: string) => void;
     onError?: (error: Error) => void;
@@ -74,13 +77,13 @@ export declare class VoxketClient extends VoxketEventEmitter<VoxketEvents & RpcE
     private initializeClient;
     private setupRoomEventListeners;
     private setupTextStreamHandlers;
-    fetchConnectionDetails(agentId?: string, participantName?: string, modalities?: SessionModality[]): Promise<{
+    fetchConnectionDetails(agentId?: string, participantName?: string, modalities?: SessionModality[], participantMetadata?: Record<string, any>): Promise<{
         serverUrl: string;
         participantToken: string;
         voxketSessionId: string;
         agentInfo?: AgentInfo;
     }>;
-    connect(agentId?: string, participantName?: string, modalities?: SessionModality[]): Promise<{
+    connect(agentId?: string, participantName?: string, modalities?: SessionModality[], participantMetadata?: Record<string, any>): Promise<{
         serverUrl: string;
         participantToken: string;
         voxketSessionId: string;
@@ -92,6 +95,7 @@ export declare class VoxketClient extends VoxketEventEmitter<VoxketEvents & RpcE
         participantName?: string;
         modalities?: SessionModality[];
         metadata?: Record<string, any>;
+        participantMetadata?: Record<string, any>;
     }): Promise<VoxketSession>;
     endSession(): Promise<SessionMetrics | null>;
     getCurrentSession(): VoxketSession | null;
@@ -215,6 +219,16 @@ export declare class VoxketClient extends VoxketEventEmitter<VoxketEvents & RpcE
      * Unregister an RPC method
      */
     unregisterRpcMethod(methodName: string): void;
+    /**
+     * Set participant metadata that will be sent with session creation requests.
+     * This is useful for passing business-specific user information to the API.
+     * @param metadata Object containing participant metadata (e.g., userId, customerType, etc.)
+     */
+    setParticipantMetadata(metadata: Record<string, any>): void;
+    /**
+     * Get the current participant metadata
+     */
+    getParticipantMetadata(): Record<string, any> | undefined;
     /**
      * Register a custom event listener for VoxketClient events.
      * This is a business-friendly alias for the inherited `on` method.

package/dist/examples/test-visualization-event.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Test script to simulate visualization_data events
+ * This can be run in the browser console when the deep analysis component is active
+ */
+declare global {
+    interface Window {
+        voxketClient?: any;
+        testVisualizationEvent?: () => void;
+        testBarChart?: () => void;
+        testLineChart?: () => void;
+        testTableData?: () => void;
+    }
+}
+declare function testVisualizationEvent(): void;
+declare function testBarChart(): void;
+declare function testLineChart(): void;
+declare function testTableData(): void;
+export { testVisualizationEvent, testBarChart, testLineChart, testTableData };

package/dist/examples/visualization-view.d.ts

@@ -0,0 +1,8 @@
+import { VoxketInteractiveView } from '../types/rpc';
+/**
+ * Visualization RPC Component
+ * - Agent calls RPC with schema JSON
+ * - RpcManager passes data → this component renders chart/table
+ * - Component responds back via handler.didSuccess or handler.didFail
+ */
+export declare const VisualizationView: VoxketInteractiveView;

package/dist/hooks/chat-hooks.d.ts

@@ -0,0 +1,39 @@
+import { VoxketClient } from '../core/client';
+import { ChatMessage } from '../types/core';
+import { InteractiveUIState } from '../types/rpc';
+import { ToolExecutionData } from '../types/tools';
+import * as React from 'react';
+export type { ToolExecutionData };
+export declare function useChatMessages(client: VoxketClient): {
+    messages: ChatMessage[];
+    setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
+    isLoading: boolean;
+    setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+    streamingMessages: Set<string>;
+    setStreamingMessages: React.Dispatch<React.SetStateAction<Set<string>>>;
+    pendingMessages: ChatMessage[];
+    setPendingMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
+};
+export declare function useAgentState(client: VoxketClient): {
+    agentState: "idle" | "thinking" | "speaking" | "tool_execution";
+    setAgentState: React.Dispatch<React.SetStateAction<"idle" | "thinking" | "speaking" | "tool_execution">>;
+    toolExecutions: ToolExecutionData[];
+    setToolExecutions: React.Dispatch<React.SetStateAction<ToolExecutionData[]>>;
+};
+export declare function useInteractionState(client: VoxketClient): {
+    currentInteraction: InteractiveUIState | null;
+    setCurrentInteraction: React.Dispatch<React.SetStateAction<InteractiveUIState | null>>;
+};
+export declare function useScrollBehavior(): {
+    messagesContainerRef: React.RefObject<HTMLDivElement>;
+    shouldAutoScroll: boolean;
+    setShouldAutoScroll: React.Dispatch<React.SetStateAction<boolean>>;
+    scrollToBottom: (immediate?: boolean) => void;
+    smartScrollToBottom: (immediate?: boolean) => void;
+    handleScroll: () => void;
+};
+export declare function useMobileDetection(): {
+    isMobile: boolean;
+    isFullscreen: boolean;
+    setIsFullscreen: React.Dispatch<React.SetStateAction<boolean>>;
+};