Zg/update evi ts example (#73)

evi-typescript-example/.env.example

@@ -1,2 +1,3 @@
-VITE_HUME_API_KEY="YOUR_API_KEY"
-VITE_HUME_SECRET_KEY="YOUR_SECRET_KEY"
+VITE_HUME_API_KEY="<YOUR_API_KEY>"
+VITE_HUME_SECRET_KEY="<YOUR_SECRET_KEY>"
+VITE_HUME_CONFIG_ID="<YOUR_CONFIG_ID>"

evi-typescript-example/README.md

@@ -44,13 +44,14 @@ After obtaining your API keys, you need to set them as environment variables. A
 Note the `VITE` prefix to the environment variables. This prefix is required for vite to expose the environment variable to the client. For more information, see the [vite documentation](https://vitejs.dev/guide/env-and-mode) on environment variables and modes.
 
 ```sh
-export VITE_HUME_API_KEY=<YOUR_API_KEY>
-export VITE_HUME_SECRET_KEY=<YOUR_SECRET_KEY>
+VITE_HUME_API_KEY="<YOUR_API_KEY>"
+VITE_HUME_SECRET_KEY="<YOUR_SECRET_KEY>"
+VITE_HUME_CONFIG_ID="<YOUR_CONFIG_ID>" // optional
 ```
 
 You can make these environment variables persistent by adding them to a file named `.env` in the root folder of the repo.
 
-> There is an example file called [`.env.example`](https://github.com/HumeAI/hume-api-examples/blob/main/evi-typescript-example/.env.example) with placeholder values, which you can simply rename to `.env`.
+> There is an example file called [`.env.example`](https://github.com/HumeAI/hume-api-examples/blob/main/evi-typescript-example/.env.example). Create a `.env` file, copy/paste the contents of the `.env.example` file, and fill in your environment variables. The config ID is optional, however if a config is not specified EVI will be configured with the [default configuration options](https://dev.hume.ai/docs/empathic-voice-interface-evi/configuration#default-configuration).
 
 ## Serve project
 

evi-typescript-example/package.json

@@ -9,7 +9,7 @@
  "preview": "vite preview"
  },
  "dependencies": {
- "hume": "^0.7.2"
+ "hume": "^0.8.3"
  },
  "devDependencies": {
  "typescript": "^5.2.2",

evi-typescript-example/src/main.ts

@@ -26,18 +26,13 @@ import './styles.css';
  /**
  * the WebSocket instance
  */
- let socket: Hume.empathicVoice.StreamSocket | null = null;
+ let socket: Hume.empathicVoice.chat.ChatSocket | null = null;
 
  /**
  * flag which denotes the intended state of the WebSocket
  */
  let connected = false;
 
- /**
- * The ChatGroup ID used to resume the chat if disconnected unexpectedly
- */
- let chatGroupId: string | undefined;
-
  /**
  * the recorder responsible for recording the audio stream to be prepared as the audio input
  */
@@ -58,6 +53,16 @@ import './styles.css';
  */
  let isPlaying = false;
 
+ /**
+ * flag which denotes whether to utilize chat resumability (preserve context from one chat to the next)
+ */
+ let resumeChats = true;
+
+ /**
+ * The ChatGroup ID used to resume the chat if disconnected unexpectedly
+ */
+ let chatGroupId: string | undefined;
+
  /**
  * audio playback queue
  */
@@ -85,14 +90,15 @@ import './styles.css';
 
  // instantiates WebSocket and establishes an authenticated connection
  socket = await client.empathicVoice.chat.connect({
- // configId: '<YOUR_CONFIG_ID>',
+ configId: import.meta.env.VITE_HUME_CONFIG_ID || null,
  resumedChatGroupId: chatGroupId,
- onOpen: handleWebSocketOpenEvent,
- onMessage: handleWebSocketMessageEvent,
- onError: handleWebSocketErrorEvent,
- onClose: handleWebSocketCloseEvent,
  });
 
+ socket.on('open', handleWebSocketOpenEvent);
+ socket.on('message', handleWebSocketMessageEvent);
+ socket.on('error', handleWebSocketErrorEvent);
+ socket.on('close', handleWebSocketCloseEvent);
+
  // update ui state
  toggleBtnStates();
  }
@@ -115,8 +121,10 @@ import './styles.css';
  // set connected state to false to prevent automatic reconnect
  connected = false;
 
- // reset chatGroupId so a new conversation is started when reconnecting, comment out to utilize chat resumability
- chatGroupId = undefined;
+ // IF resumeChats flag is false, reset chatGroupId so a new conversation is started when reconnecting
+ if (!resumeChats) {
+ chatGroupId = undefined;
+ }
 
  // closed the Web Socket connection
  socket?.close();
@@ -228,7 +236,9 @@ import './styles.css';
  * - `audio_output`: https://dev.hume.ai/reference/empathic-voice-interface-evi/chat/chat#receive.Audio%20Output.type
  * - `user_interruption`: https://dev.hume.ai/reference/empathic-voice-interface-evi/chat/chat#receive.User%20Interruption.type
  */
- function handleWebSocketMessageEvent(message: Hume.empathicVoice.SubscribeEvent): void {
+ async function handleWebSocketMessageEvent(
+ message: Hume.empathicVoice.SubscribeEvent
+ ): Promise<void> {
  /* place logic here which you would like to invoke when receiving a message through the socket */
 
  // handle messages received through the WebSocket (messages are distinguished by their "type" field.)
@@ -256,7 +266,7 @@ import './styles.css';
  audioQueue.push(blob);
 
  // play the next audio output
- if (audioQueue.length === 1) playAudio();
+ if (audioQueue.length >= 1) playAudio();
  break;
 
  // stop audio playback, clear audio playback queue, and update audio playback state on interrupt
@@ -269,7 +279,7 @@ import './styles.css';
  /**
  * callback function to handle a WebSocket error event
  */
- function handleWebSocketErrorEvent(error: Hume.empathicVoice.WebSocketError): void {
+ function handleWebSocketErrorEvent(error: Error): void {
  /* place logic here which you would like invoked when receiving an error through the socket */
  console.error(error);
  }
@@ -281,9 +291,7 @@ import './styles.css';
  /* place logic here which you would like invoked when the socket closes */
 
  // reconnect to the socket if disconnect was unintentional
- if (connected) {
- await connect();
- }
+ if (connected) await connect();
 
  console.log('Web socket connection closed');
  }
@@ -310,6 +318,9 @@ import './styles.css';
 
  // append chat card to the UI
  chat?.appendChild(chatCard.render());
+
+ // scroll to the bottom to view most recently added message
+ if (chat) chat.scrollTop = chat.scrollHeight;
  }
 
  /**

evi-typescript-example/src/styles.css

@@ -1,7 +1,6 @@
 body {
  display: flex;
  flex-direction: column;
- height: 100vh;
  align-items: center;
 }
 
@@ -37,11 +36,11 @@ button:disabled {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
- height: 100vh;
  width: 72%;
  min-width: 900px;
  padding: 24px;
  margin: 0px;
+ overflow: hidden;
 }
 
 #btn-container {
@@ -52,6 +51,9 @@ button:disabled {
 #chat {
  display: flex;
  flex-direction: column;
+ height: 560px;
+ overflow-y: auto;
+ padding: 0 16px;
 }
 
 .chat-card {