@voxket-ai/voxket-live 1.0.30 → 1.0.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +83 -4
- package/dist/components/livekit/agent-control-bar/agent-control-bar.d.ts +3 -1
- package/dist/components/session-logger.d.ts +11 -0
- package/dist/components/session-view.d.ts +3 -1
- package/dist/components/welcome.d.ts +3 -1
- package/dist/components/widget.d.ts +7 -0
- package/dist/hooks/useSessionLogging.d.ts +34 -0
- package/dist/index.cjs +41 -43
- package/dist/index.css +1 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.js +7171 -6841
- package/dist/lib/types.d.ts +1 -1
- package/dist/styles.d.ts +23 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -87,6 +87,12 @@ The `VoxketWidget` component accepts the following props:
|
|
|
87
87
|
| `suportsChatInput` | `boolean` | No | `true` | Enables or disables the text chat input feature. |
|
|
88
88
|
| `suportsVideoInput` | `boolean` | No | `true` | Enables or disables the user's video input feature. |
|
|
89
89
|
| `suportsScreenShare`| `boolean` | No | `true` | Enables or disables the screen sharing feature for the user. |
|
|
90
|
+
| `theme` | `'dark' \| 'light' \| 'vox'` | No | `'vox'` | Sets the widget's visual theme. |
|
|
91
|
+
| `onSessionStart` | `(sessionId: string) => void` | No | `undefined` | Callback fired when a session starts. Receives the session ID. |
|
|
92
|
+
| `onSessionEnd` | `(metrics: SessionMetrics) => void` | No | `undefined` | Callback fired when a session ends. Receives session metrics. |
|
|
93
|
+
| `enableSessionLogging` | `boolean` | No | `true` | Enables or disables session logging functionality. |
|
|
94
|
+
| `onSessionLogsUpdate` | `(logs: SessionLog[]) => void` | No | `undefined` | Callback fired when session logs are updated. Provides real-time access to session events. |
|
|
95
|
+
| `onSessionMetricsUpdate` | `(metrics: SessionMetrics) => void` | No | `undefined` | Callback fired when session metrics are updated. Provides real-time access to session metrics. |
|
|
90
96
|
|
|
91
97
|
*(Note: `suportsChatInput` had a typo `suportsChatInput` in some internal example files, but the correct prop name used by the widget is `suportsChatInput`.)*
|
|
92
98
|
|
|
@@ -97,6 +103,83 @@ The `VoxketWidget` component accepts the following props:
|
|
|
97
103
|
- **Device Permissions:** The widget will request microphone and camera permissions as needed when the session starts.
|
|
98
104
|
- **Error Handling:** Basic error messages are displayed for connection issues or media device errors using toast notifications.
|
|
99
105
|
|
|
106
|
+
## Session Logging
|
|
107
|
+
|
|
108
|
+
The widget provides comprehensive session logging capabilities that allow you to capture and analyze user interactions in real-time.
|
|
109
|
+
|
|
110
|
+
### Basic Session Logging
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
import VoxketWidget from '@voxket-ai/voxket-live';
|
|
114
|
+
|
|
115
|
+
function App() {
|
|
116
|
+
const handleSessionStart = (sessionId: string) => {
|
|
117
|
+
console.log('Session started:', sessionId);
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
const handleSessionEnd = (metrics: any) => {
|
|
121
|
+
console.log('Session ended:', metrics);
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
return (
|
|
125
|
+
<VoxketWidget
|
|
126
|
+
agentId="your-agent-id"
|
|
127
|
+
// ... other props
|
|
128
|
+
onSessionStart={handleSessionStart}
|
|
129
|
+
onSessionEnd={handleSessionEnd}
|
|
130
|
+
enableSessionLogging={true}
|
|
131
|
+
/>
|
|
132
|
+
);
|
|
133
|
+
}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### Real-time Session Data Access
|
|
137
|
+
|
|
138
|
+
Get access to session logs and metrics in real-time:
|
|
139
|
+
|
|
140
|
+
```tsx
|
|
141
|
+
import VoxketWidget, { SessionLog, SessionMetrics } from '@voxket-ai/voxket-live';
|
|
142
|
+
|
|
143
|
+
function App() {
|
|
144
|
+
const [sessionLogs, setSessionLogs] = useState<SessionLog[]>([]);
|
|
145
|
+
const [sessionMetrics, setSessionMetrics] = useState<SessionMetrics | null>(null);
|
|
146
|
+
|
|
147
|
+
const handleSessionLogsUpdate = (logs: SessionLog[]) => {
|
|
148
|
+
setSessionLogs(logs);
|
|
149
|
+
// Send to your analytics service
|
|
150
|
+
analytics.track('session_logs_update', { logCount: logs.length });
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
const handleSessionMetricsUpdate = (metrics: SessionMetrics) => {
|
|
154
|
+
setSessionMetrics(metrics);
|
|
155
|
+
// Update your dashboard
|
|
156
|
+
updateDashboard(metrics);
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
return (
|
|
160
|
+
<VoxketWidget
|
|
161
|
+
agentId="your-agent-id"
|
|
162
|
+
// ... other props
|
|
163
|
+
onSessionLogsUpdate={handleSessionLogsUpdate}
|
|
164
|
+
onSessionMetricsUpdate={handleSessionMetricsUpdate}
|
|
165
|
+
enableSessionLogging={true}
|
|
166
|
+
/>
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
### Available Session Events
|
|
172
|
+
|
|
173
|
+
- `SESSION_STARTED` - When a session begins
|
|
174
|
+
- `SESSION_ENDED` - When a session ends
|
|
175
|
+
- `PARTICIPANT_CONNECTED` - When a participant joins
|
|
176
|
+
- `PARTICIPANT_DISCONNECTED` - When a participant leaves
|
|
177
|
+
- `DATA_RECEIVED` - When a message is received
|
|
178
|
+
- `TRACK_PUBLISHED` - When media tracks are published
|
|
179
|
+
- `CONNECTION_ISSUE` - When connection problems occur
|
|
180
|
+
|
|
181
|
+
For detailed session logging documentation, see [CONSUMER_SESSION_LOGGING.md](./CONSUMER_SESSION_LOGGING.md).
|
|
182
|
+
|
|
100
183
|
## Styling
|
|
101
184
|
|
|
102
185
|
The widget is styled using Tailwind CSS. You can customize its appearance:
|
|
@@ -111,7 +194,3 @@ This SDK is part of the Voxket AI agent marketplace. For issues, feature request
|
|
|
111
194
|
## License
|
|
112
195
|
|
|
113
196
|
This SDK is [MIT Licensed](./LICENSE). (Assuming MIT from the existing LICENSE file).
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
pacakge link: https://www.npmjs.com/package/@voxket-ai/voxket-live
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Track } from 'livekit-client';
|
|
2
2
|
import { AppConfig } from '../../../lib/types';
|
|
3
3
|
import { UseAgentControlBarProps } from './hooks/use-agent-control-bar';
|
|
4
|
+
import { ThemeType } from '../../../styles';
|
|
4
5
|
import * as React from 'react';
|
|
5
6
|
export interface AgentControlBarProps extends React.HTMLAttributes<HTMLDivElement>, UseAgentControlBarProps {
|
|
6
7
|
capabilities: Pick<AppConfig, 'suportsChatInput' | 'suportsVideoInput' | 'suportsScreenShare'>;
|
|
@@ -11,8 +12,9 @@ export interface AgentControlBarProps extends React.HTMLAttributes<HTMLDivElemen
|
|
|
11
12
|
source: Track.Source;
|
|
12
13
|
error: Error;
|
|
13
14
|
}) => void;
|
|
15
|
+
theme?: ThemeType;
|
|
14
16
|
}
|
|
15
17
|
/**
|
|
16
18
|
* A control bar specifically designed for voice assistant interfaces
|
|
17
19
|
*/
|
|
18
|
-
export declare function AgentControlBar({ controls, saveUserChoices, capabilities, className, onSendMessage, onChatOpenChange, onDisconnect, onDeviceError, ...props }: AgentControlBarProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export declare function AgentControlBar({ controls, saveUserChoices, capabilities, className, onSendMessage, onChatOpenChange, onDisconnect, onDeviceError, theme, ...props }: AgentControlBarProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
interface SessionLogViewerProps {
|
|
2
|
+
logs: any[];
|
|
3
|
+
onClear?: () => void;
|
|
4
|
+
onExport?: () => void;
|
|
5
|
+
}
|
|
6
|
+
export declare function SessionLogViewer({ logs, onClear, onExport }: SessionLogViewerProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
interface SessionMetricsProps {
|
|
8
|
+
metrics: any;
|
|
9
|
+
}
|
|
10
|
+
export declare function SessionMetrics({ metrics }: SessionMetricsProps): import("react/jsx-runtime").JSX.Element | null;
|
|
11
|
+
export {};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { ThemeType } from '../styles';
|
|
2
3
|
interface SessionViewProps {
|
|
3
4
|
disabled: boolean;
|
|
4
5
|
capabilities: {
|
|
@@ -9,6 +10,7 @@ interface SessionViewProps {
|
|
|
9
10
|
sessionStarted: boolean;
|
|
10
11
|
participantName: string;
|
|
11
12
|
loadingText?: string;
|
|
13
|
+
theme?: ThemeType;
|
|
12
14
|
}
|
|
13
|
-
export declare const SessionView: ({ disabled, capabilities, sessionStarted, ref, participantName, loadingText, }: React.ComponentProps<"div"> & SessionViewProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const SessionView: ({ disabled, capabilities, sessionStarted, ref, participantName, loadingText, theme, }: React.ComponentProps<"div"> & SessionViewProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
16
|
export {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ThemeType } from '../styles';
|
|
1
2
|
interface WelcomeProps {
|
|
2
3
|
disabled: boolean;
|
|
3
4
|
onStartCall: () => void;
|
|
@@ -9,6 +10,7 @@ interface WelcomeProps {
|
|
|
9
10
|
statusMessage?: string;
|
|
10
11
|
title?: string;
|
|
11
12
|
subTitle?: string;
|
|
13
|
+
theme?: ThemeType;
|
|
12
14
|
}
|
|
13
|
-
export declare const Welcome: ({ disabled, onStartCall, prompts, statusMessage, title, subTitle, }: WelcomeProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const Welcome: ({ disabled, onStartCall, prompts, statusMessage, title, subTitle, theme, }: WelcomeProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
16
|
export {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ThemeType } from '../styles';
|
|
1
2
|
export interface VoxketWidgetProps {
|
|
2
3
|
agentId: string;
|
|
3
4
|
participantName?: string;
|
|
@@ -15,6 +16,12 @@ export interface VoxketWidgetProps {
|
|
|
15
16
|
suportsChatInput?: boolean;
|
|
16
17
|
suportsVideoInput?: boolean;
|
|
17
18
|
suportsScreenShare?: boolean;
|
|
19
|
+
theme?: ThemeType;
|
|
20
|
+
onSessionStart?: (sessionId: string) => void;
|
|
21
|
+
onSessionEnd?: (metrics: any) => void;
|
|
22
|
+
enableSessionLogging?: boolean;
|
|
23
|
+
onSessionLogsUpdate?: (logs: any[]) => void;
|
|
24
|
+
onSessionMetricsUpdate?: (metrics: any) => void;
|
|
18
25
|
}
|
|
19
26
|
export default function Widget(props: VoxketWidgetProps & {
|
|
20
27
|
prompts?: string[];
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Room } from 'livekit-client';
|
|
2
|
+
export interface SessionLog {
|
|
3
|
+
timestamp: Date;
|
|
4
|
+
event: string;
|
|
5
|
+
data?: any;
|
|
6
|
+
sessionId?: string;
|
|
7
|
+
participantId?: string;
|
|
8
|
+
}
|
|
9
|
+
export interface SessionMetrics {
|
|
10
|
+
sessionId: string;
|
|
11
|
+
startTime: Date;
|
|
12
|
+
endTime?: Date;
|
|
13
|
+
duration?: number;
|
|
14
|
+
totalMessages: number;
|
|
15
|
+
connectionIssues: number;
|
|
16
|
+
participantCount: number;
|
|
17
|
+
events: SessionLog[];
|
|
18
|
+
}
|
|
19
|
+
interface UseSessionLoggingProps {
|
|
20
|
+
room?: Room;
|
|
21
|
+
onSessionEnd?: (metrics: SessionMetrics) => void;
|
|
22
|
+
onSessionStart?: (sessionId: string) => void;
|
|
23
|
+
enableConsoleLogging?: boolean;
|
|
24
|
+
enableLocalStorage?: boolean;
|
|
25
|
+
}
|
|
26
|
+
export declare function useSessionLogging({ room, onSessionEnd, onSessionStart, enableConsoleLogging, enableLocalStorage, }?: UseSessionLoggingProps): {
|
|
27
|
+
sessionMetrics: SessionMetrics | null;
|
|
28
|
+
sessionLogs: SessionLog[];
|
|
29
|
+
logEvent: (event: string, data?: any) => SessionLog;
|
|
30
|
+
getSessionLogs: () => any;
|
|
31
|
+
clearSessionLogs: () => void;
|
|
32
|
+
exportSessionLogs: () => void;
|
|
33
|
+
};
|
|
34
|
+
export {};
|