@humeai/voice-embed 0.0.0-beta.21 → 0.0.0-beta.23
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 +82 -0
- package/dist/index.d.mts +8 -8
- package/dist/index.d.ts +8 -8
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<img src="https://storage.googleapis.com/hume-public-logos/hume/hume-banner.png">
|
|
3
|
+
<h1>Hume AI Voice Embed SDK</h1>
|
|
4
|
+
<p>
|
|
5
|
+
<strong>Integrate Hume's Empathic Voice Interface directly into your web application</strong>
|
|
6
|
+
</p>
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
This package enables you to integrate a widget that runs Hume's Empathic Voice Interface any Javascript application. It abstracts away the complexities of managing websocket connections, capturing user audio via the client's microphone, and handling the playback of the interface's audio responses. The widget is embedded into your web page through an iframe.
|
|
12
|
+
|
|
13
|
+
There are two packages needed to embed your own widget. Install this package to embed the widget to your application. Code for the widget itself can be found at [https://github.com/HumeAI/empathic-voice-embed-renderer](https://github.com/HumeAI/empathic-voice-embed-renderer).
|
|
14
|
+
|
|
15
|
+
## Prerequisites
|
|
16
|
+
|
|
17
|
+
Before installing this package, please ensure your development environment meets the following requirement:
|
|
18
|
+
|
|
19
|
+
- Node.js (`v18.0.0` or higher).
|
|
20
|
+
|
|
21
|
+
To verify your Node.js version, run this command in your terminal:
|
|
22
|
+
|
|
23
|
+
```sh
|
|
24
|
+
node --version
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
If your Node.js version is below `18.0.0`, update it to meet the requirement. For updating Node.js, visit [Node.js' official site](https://nodejs.org/) or use a version management tool like nvm for a more seamless upgrade process.
|
|
28
|
+
|
|
29
|
+
## Installation
|
|
30
|
+
|
|
31
|
+
Add `@humeai/voice-embed` to your project by running this command in your project directory:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm install @humeai/voice-embed
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
This will download and include the package in your project, making it ready for import and use within your React components.
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import { EmbeddedVoice } from '@humeai/voice-embed';
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
__NOTE:__ If you are building a React application, you can use our React voice embed SDK instead of this one. [Documentation can be found here](https://github.com/HumeAI/empathic-voice-api-js/blob/main/packages/embed-react).
|
|
44
|
+
|
|
45
|
+
## Usage
|
|
46
|
+
|
|
47
|
+
### Quickstart
|
|
48
|
+
|
|
49
|
+
Here's a simple example to get you started with the `EmbeddedVoice` component:
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import {
|
|
53
|
+
type CloseHandler,
|
|
54
|
+
EmbeddedVoice as EA,
|
|
55
|
+
type EmbeddedVoiceConfig,
|
|
56
|
+
type TranscriptMessageHandler,
|
|
57
|
+
} from '@humeai/voice-embed';
|
|
58
|
+
|
|
59
|
+
const embeddedVoice = EA.create({
|
|
60
|
+
// Configuration options
|
|
61
|
+
});
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
**Note:** For integration within server components, instantiate `EmbeddedVoice` within a client component. For more information checkout the [Next.js documentation on client components](https://nextjs.org/docs/app/building-your-application/rendering/client-components).
|
|
65
|
+
|
|
66
|
+
### Configuration options
|
|
67
|
+
|
|
68
|
+
Configuration options for the embedded voice include all props that are accepted by the VoiceProvider in the [@humeai/voice-react package](https://github.com/HumeAI/empathic-voice-api-js/blob/main/packages/react).
|
|
69
|
+
|
|
70
|
+
In addition, it accepts a few other configurations specific to creating a widget:
|
|
71
|
+
|
|
72
|
+
| Option | Required | Description |
|
|
73
|
+
| ----------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
74
|
+
| `isEmbedOpen` | yes | Determines the initial visibility of the widget. Assign `true` to render the widget as open on initial load, and `false` to start with the widget closed. While the widget's UI provides a trigger to toggle its visibility, this prop also enables external control over the widget's visibility state through a parent component. |
|
|
75
|
+
| rendererUrl | no | URL where the widget itself is hosted. If blank, this defaults the Hume AI widget, https://voice-widget.hume.ai. An example of this widget can be found at [http://hume.ai](http://hume.ai). |
|
|
76
|
+
| `onMessage` | no | Callback function to invoke upon receiving a message through the web socket. |
|
|
77
|
+
| `onClose` | no | Callback function to invoke upon the web socket connection being closed. |
|
|
78
|
+
| `openOnMount` | no | Boolean which indicates whether the widget should be initialized in an open or closed state. Set as `true` if you want it to be open. The default value is `false`. |
|
|
79
|
+
|
|
80
|
+
## Support
|
|
81
|
+
|
|
82
|
+
If you have questions or require assistance pertaining to this package, [reach out to us on Discord](https://hume.ai/discord)!
|
package/dist/index.d.mts
CHANGED
|
@@ -405,7 +405,7 @@ declare const FrameToClientActionSchema: z.ZodUnion<[z.ZodObject<{
|
|
|
405
405
|
end: number;
|
|
406
406
|
} | null | undefined;
|
|
407
407
|
}>;
|
|
408
|
-
|
|
408
|
+
from_text: z.ZodCatch<z.ZodBoolean>;
|
|
409
409
|
}, "strip", z.ZodTypeAny, {
|
|
410
410
|
type: "assistant_message";
|
|
411
411
|
message: {
|
|
@@ -422,7 +422,7 @@ declare const FrameToClientActionSchema: z.ZodUnion<[z.ZodObject<{
|
|
|
422
422
|
end: number;
|
|
423
423
|
} | null | undefined;
|
|
424
424
|
};
|
|
425
|
-
|
|
425
|
+
from_text: boolean;
|
|
426
426
|
}, {
|
|
427
427
|
type: "assistant_message";
|
|
428
428
|
message: {
|
|
@@ -439,7 +439,7 @@ declare const FrameToClientActionSchema: z.ZodUnion<[z.ZodObject<{
|
|
|
439
439
|
end: number;
|
|
440
440
|
} | null | undefined;
|
|
441
441
|
};
|
|
442
|
-
|
|
442
|
+
from_text?: unknown;
|
|
443
443
|
}>, {
|
|
444
444
|
type: "assistant_message";
|
|
445
445
|
message: {
|
|
@@ -456,7 +456,7 @@ declare const FrameToClientActionSchema: z.ZodUnion<[z.ZodObject<{
|
|
|
456
456
|
end: number;
|
|
457
457
|
} | null | undefined;
|
|
458
458
|
};
|
|
459
|
-
|
|
459
|
+
from_text: boolean;
|
|
460
460
|
} & {
|
|
461
461
|
receivedAt: Date;
|
|
462
462
|
}, {
|
|
@@ -475,7 +475,7 @@ declare const FrameToClientActionSchema: z.ZodUnion<[z.ZodObject<{
|
|
|
475
475
|
end: number;
|
|
476
476
|
} | null | undefined;
|
|
477
477
|
};
|
|
478
|
-
|
|
478
|
+
from_text?: unknown;
|
|
479
479
|
}>]>;
|
|
480
480
|
}, "strip", z.ZodTypeAny, {
|
|
481
481
|
type: "transcript_message";
|
|
@@ -512,7 +512,7 @@ declare const FrameToClientActionSchema: z.ZodUnion<[z.ZodObject<{
|
|
|
512
512
|
end: number;
|
|
513
513
|
} | null | undefined;
|
|
514
514
|
};
|
|
515
|
-
|
|
515
|
+
from_text: boolean;
|
|
516
516
|
} & {
|
|
517
517
|
receivedAt: Date;
|
|
518
518
|
});
|
|
@@ -549,7 +549,7 @@ declare const FrameToClientActionSchema: z.ZodUnion<[z.ZodObject<{
|
|
|
549
549
|
end: number;
|
|
550
550
|
} | null | undefined;
|
|
551
551
|
};
|
|
552
|
-
|
|
552
|
+
from_text?: unknown;
|
|
553
553
|
};
|
|
554
554
|
}>, z.ZodObject<{
|
|
555
555
|
type: z.ZodLiteral<"resize_frame">;
|
|
@@ -624,7 +624,7 @@ declare const TRANSCRIPT_MESSAGE_ACTION: (message: UserTranscriptMessage | Assis
|
|
|
624
624
|
end: number;
|
|
625
625
|
} | null | undefined;
|
|
626
626
|
};
|
|
627
|
-
|
|
627
|
+
from_text: boolean;
|
|
628
628
|
} & {
|
|
629
629
|
receivedAt: Date;
|
|
630
630
|
});
|
package/dist/index.d.ts
CHANGED
|
@@ -405,7 +405,7 @@ declare const FrameToClientActionSchema: z.ZodUnion<[z.ZodObject<{
|
|
|
405
405
|
end: number;
|
|
406
406
|
} | null | undefined;
|
|
407
407
|
}>;
|
|
408
|
-
|
|
408
|
+
from_text: z.ZodCatch<z.ZodBoolean>;
|
|
409
409
|
}, "strip", z.ZodTypeAny, {
|
|
410
410
|
type: "assistant_message";
|
|
411
411
|
message: {
|
|
@@ -422,7 +422,7 @@ declare const FrameToClientActionSchema: z.ZodUnion<[z.ZodObject<{
|
|
|
422
422
|
end: number;
|
|
423
423
|
} | null | undefined;
|
|
424
424
|
};
|
|
425
|
-
|
|
425
|
+
from_text: boolean;
|
|
426
426
|
}, {
|
|
427
427
|
type: "assistant_message";
|
|
428
428
|
message: {
|
|
@@ -439,7 +439,7 @@ declare const FrameToClientActionSchema: z.ZodUnion<[z.ZodObject<{
|
|
|
439
439
|
end: number;
|
|
440
440
|
} | null | undefined;
|
|
441
441
|
};
|
|
442
|
-
|
|
442
|
+
from_text?: unknown;
|
|
443
443
|
}>, {
|
|
444
444
|
type: "assistant_message";
|
|
445
445
|
message: {
|
|
@@ -456,7 +456,7 @@ declare const FrameToClientActionSchema: z.ZodUnion<[z.ZodObject<{
|
|
|
456
456
|
end: number;
|
|
457
457
|
} | null | undefined;
|
|
458
458
|
};
|
|
459
|
-
|
|
459
|
+
from_text: boolean;
|
|
460
460
|
} & {
|
|
461
461
|
receivedAt: Date;
|
|
462
462
|
}, {
|
|
@@ -475,7 +475,7 @@ declare const FrameToClientActionSchema: z.ZodUnion<[z.ZodObject<{
|
|
|
475
475
|
end: number;
|
|
476
476
|
} | null | undefined;
|
|
477
477
|
};
|
|
478
|
-
|
|
478
|
+
from_text?: unknown;
|
|
479
479
|
}>]>;
|
|
480
480
|
}, "strip", z.ZodTypeAny, {
|
|
481
481
|
type: "transcript_message";
|
|
@@ -512,7 +512,7 @@ declare const FrameToClientActionSchema: z.ZodUnion<[z.ZodObject<{
|
|
|
512
512
|
end: number;
|
|
513
513
|
} | null | undefined;
|
|
514
514
|
};
|
|
515
|
-
|
|
515
|
+
from_text: boolean;
|
|
516
516
|
} & {
|
|
517
517
|
receivedAt: Date;
|
|
518
518
|
});
|
|
@@ -549,7 +549,7 @@ declare const FrameToClientActionSchema: z.ZodUnion<[z.ZodObject<{
|
|
|
549
549
|
end: number;
|
|
550
550
|
} | null | undefined;
|
|
551
551
|
};
|
|
552
|
-
|
|
552
|
+
from_text?: unknown;
|
|
553
553
|
};
|
|
554
554
|
}>, z.ZodObject<{
|
|
555
555
|
type: z.ZodLiteral<"resize_frame">;
|
|
@@ -624,7 +624,7 @@ declare const TRANSCRIPT_MESSAGE_ACTION: (message: UserTranscriptMessage | Assis
|
|
|
624
624
|
end: number;
|
|
625
625
|
} | null | undefined;
|
|
626
626
|
};
|
|
627
|
-
|
|
627
|
+
from_text: boolean;
|
|
628
628
|
} & {
|
|
629
629
|
receivedAt: Date;
|
|
630
630
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@humeai/voice-embed",
|
|
3
|
-
"version": "0.0.0-beta.
|
|
3
|
+
"version": "0.0.0-beta.23",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -23,12 +23,12 @@
|
|
|
23
23
|
"tsup": "^8.0.2",
|
|
24
24
|
"typescript": "^5.4.3",
|
|
25
25
|
"vitest": "^1.4.0",
|
|
26
|
-
"@humeai/
|
|
27
|
-
"@humeai/
|
|
26
|
+
"@humeai/eslint-config": "0.0.1",
|
|
27
|
+
"@humeai/typescript-config": "0.0.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"zod": "^3.22.4",
|
|
31
|
-
"@humeai/voice": "0.0.0-beta.
|
|
31
|
+
"@humeai/voice": "0.0.0-beta.23"
|
|
32
32
|
},
|
|
33
33
|
"browserslist": [
|
|
34
34
|
"last 2 Chrome versions, last 2 iOS major versions, Firefox ESR, not dead"
|