@humeai/voice-embed-react 0.0.0-beta.1

package/README.md

@@ -0,0 +1,94 @@
+<div align="center">
+  <img src="https://storage.googleapis.com/hume-public-logos/hume/hume-banner.png">
+  <h1>Hume AI Voice Embed</h1>
+  <p>
+    <strong>Integrate Hume's Empathic Voice Interface directly into your web application</strong>
+  </p>
+</div>
+
+## Overview
+
+This package provides a React widget component that encapsulates Hume's Empathic Voice Interface, making it easy to integrate this interface into your web application. The component is designed to be embedded into your web page through an iframe. 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.
+
+## Prerequisites
+
+Before installing this package, please ensure your development environment meets the following requirement:
+
+- Node.js (`v18.0.0` or higher).
+
+To verify your Node.js version, run this command in your terminal:
+
+```sh
+node --version
+```
+
+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.
+
+## Installation
+
+Add `@humeai/voice-embed-react` to your project by running this command in your project directory:
+
+```bash
+npm install @humeai/voice-embed-react
+```
+
+This will download and include the package in your project, making it ready for import and use within your React components.
+
+```tsx
+import { EmbeddedVoice } from '@humeai/voice-embed-react';
+```
+
+## Usage
+
+### Quickstart
+
+Here's a simple example to get you started with the `EmbeddedVoice` component:
+
+```tsx
+import React, { useState } from 'react';
+import { EmbeddedVoice } from '@humeai/voice-embed-react';
+
+function App() {
+  const apiKey = process.env.HUME_API_KEY || '';
+  const [isEmbedOpen, setIsEmbedOpen] = useState(false);
+
+  return (
+    <div>
+      <button onClick={() => setIsEmbedOpen(true)}>Open Widget</button>
+      <EmbeddedVoice
+        auth={{ type: 'apiKey', value: apiKey }}
+        systemPrompt={'Your system prompt goes here.'}
+        onMessage={(msg) => console.log('Message received: ', msg)}
+        onClose={() => setIsEmbedOpen(false)}
+        isEmbedOpen={isEmbedOpen}
+      />
+    </div>
+  );
+}
+```
+
+**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).
+
+### Component Props
+
+The table below outlines the props accepted by the EmbeddedVoice component:
+
+| prop              | required | description                                                                                                                                                                                                                                                                                                                         |
+| ----------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| auth              | yes      | Authentication strategy and corresponding value. Authentication is required to establish the web socket connection with Hume's Voice API. See our [documentation](https://dev.hume.ai/docs/quick-start#getting-your-api-key) on obtaining your `API key` or `access token`.                                                         |
+| 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. |
+| rendererUrl       | no       | URL of the webpage to inject the `EmbeddedVoice` widget into.                                                                                                                                                                                                                                                                       |
+| hostname          | no       | Hostname of the Hume API. If not provided this value will default to `"api.hume.ai"`.                                                                                                                                                                                                                                               |
+| channels          | no       | Number of channels in the input audio.                                                                                                                                                                                                                                                                                              |
+| sampleRate        | no       | Sample rate of the input audio.                                                                                                                                                                                                                                                                                                     |
+| tts               | no       | Text-To-Speech service. If not provided this value will default to `"hume_ai"`, specifying Hume's text-to-speech service. Other options include: `"eleven_labs"` and `"play_ht"`.                                                                                                                                                   |
+| speedRatio        | no       | Speed ratio of the TTS service.                                                                                                                                                                                                                                                                                                     |
+| reconnectAttempts | no       | Number of times to attempt to reconnect to the API. If not provided this value will default to `30`.                                                                                                                                                                                                                                |
+| debug             | no       | Enable debug mode. If not provided this value will default to `false`.                                                                                                                                                                                                                                                              |
+| systemPrompt      | no       | System prompt to use for the Voice. The system prompt has a character limit of 100,000 characters. If not provided, this value will default to the default Hume system prompt.                                                                                                                                                              |
+| onMessage         | no       | Callback function to invoke upon receiving a message through the web socket.                                                                                                                                                                                                                                                        |
+| onClose           | no       | Callback function to invoke upon the web socket connection being closed.                                                                                                                                                                                                                                                            |
+
+## Support
+
+If you have questions or require assistance pertaining to this package, [reach out to us on Discord](https://discord.com/invite/WPRSugvAm6)!

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+import { EmbeddedVoiceConfig, TranscriptMessageHandler, CloseHandler } from '@humeai/voice-embed';
+export { AgentTranscriptMessage, COLLAPSE_WIDGET_ACTION, Config, EXPAND_WIDGET_ACTION, EmotionScores, FrameToClientAction, JSONMessage, LanguageModelOption, MINIMIZE_WIDGET_ACTION, RESIZE_FRAME_ACTION, TRANSCRIPT_MESSAGE_ACTION, UserTranscriptMessage, WIDGET_IFRAME_IS_READY_ACTION, WindowDimensions, parseClientToFrameAction } from '@humeai/voice-embed';
+
+type EmbeddedVoiceProps = Partial<EmbeddedVoiceConfig> & NonNullable<Pick<EmbeddedVoiceConfig, 'auth'>> & {
+    onMessage?: TranscriptMessageHandler;
+    onClose?: CloseHandler;
+    isEmbedOpen: boolean;
+};
+declare const EmbeddedVoice: (props: EmbeddedVoiceProps) => null;
+
+export { EmbeddedVoice };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { EmbeddedVoiceConfig, TranscriptMessageHandler, CloseHandler } from '@humeai/voice-embed';
+export { AgentTranscriptMessage, COLLAPSE_WIDGET_ACTION, Config, EXPAND_WIDGET_ACTION, EmotionScores, FrameToClientAction, JSONMessage, LanguageModelOption, MINIMIZE_WIDGET_ACTION, RESIZE_FRAME_ACTION, TRANSCRIPT_MESSAGE_ACTION, UserTranscriptMessage, WIDGET_IFRAME_IS_READY_ACTION, WindowDimensions, parseClientToFrameAction } from '@humeai/voice-embed';
+
+type EmbeddedVoiceProps = Partial<EmbeddedVoiceConfig> & NonNullable<Pick<EmbeddedVoiceConfig, 'auth'>> & {
+    onMessage?: TranscriptMessageHandler;
+    onClose?: CloseHandler;
+    isEmbedOpen: boolean;
+};
+declare const EmbeddedVoice: (props: EmbeddedVoiceProps) => null;
+
+export { EmbeddedVoice };

package/dist/index.js

@@ -0,0 +1,85 @@
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  COLLAPSE_WIDGET_ACTION: () => import_voice_embed2.COLLAPSE_WIDGET_ACTION,
+  EXPAND_WIDGET_ACTION: () => import_voice_embed2.EXPAND_WIDGET_ACTION,
+  EmbeddedVoice: () => EmbeddedVoice,
+  LanguageModelOption: () => import_voice_embed2.LanguageModelOption,
+  MINIMIZE_WIDGET_ACTION: () => import_voice_embed2.MINIMIZE_WIDGET_ACTION,
+  RESIZE_FRAME_ACTION: () => import_voice_embed2.RESIZE_FRAME_ACTION,
+  TRANSCRIPT_MESSAGE_ACTION: () => import_voice_embed2.TRANSCRIPT_MESSAGE_ACTION,
+  WIDGET_IFRAME_IS_READY_ACTION: () => import_voice_embed2.WIDGET_IFRAME_IS_READY_ACTION,
+  parseClientToFrameAction: () => import_voice_embed2.parseClientToFrameAction
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/EmbeddedVoice.ts
+var import_voice_embed = require("@humeai/voice-embed");
+var import_react = require("react");
+var EmbeddedVoice = (props) => {
+  const { onMessage, isEmbedOpen, onClose, ...config } = props;
+  const embeddedVoice = (0, import_react.useRef)(null);
+  const onMessageHandler = (0, import_react.useRef)();
+  onMessageHandler.current = onMessage;
+  const onCloseHandler = (0, import_react.useRef)();
+  onCloseHandler.current = onClose;
+  const stableConfig = (0, import_react.useRef)();
+  stableConfig.current = config;
+  (0, import_react.useEffect)(() => {
+    let unmount;
+    if (!embeddedVoice.current && stableConfig.current) {
+      embeddedVoice.current = import_voice_embed.EmbeddedVoice.create({
+        onMessage: onMessageHandler.current,
+        onClose: onCloseHandler.current,
+        ...stableConfig.current
+      });
+      unmount = embeddedVoice.current.mount();
+    }
+    return () => {
+      unmount?.();
+      embeddedVoice.current = null;
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (isEmbedOpen) {
+      embeddedVoice.current?.openEmbed();
+    }
+  }, [isEmbedOpen]);
+  return null;
+};
+
+// src/index.ts
+var import_voice_embed2 = require("@humeai/voice-embed");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  COLLAPSE_WIDGET_ACTION,
+  EXPAND_WIDGET_ACTION,
+  EmbeddedVoice,
+  LanguageModelOption,
+  MINIMIZE_WIDGET_ACTION,
+  RESIZE_FRAME_ACTION,
+  TRANSCRIPT_MESSAGE_ACTION,
+  WIDGET_IFRAME_IS_READY_ACTION,
+  parseClientToFrameAction
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/lib/EmbeddedVoice.ts"],"sourcesContent":["export * from './lib/EmbeddedVoice';\n\nexport {\n  COLLAPSE_WIDGET_ACTION,\n  EXPAND_WIDGET_ACTION,\n  MINIMIZE_WIDGET_ACTION,\n  RESIZE_FRAME_ACTION,\n  TRANSCRIPT_MESSAGE_ACTION,\n  WIDGET_IFRAME_IS_READY_ACTION,\n  parseClientToFrameAction,\n  LanguageModelOption,\n} from '@humeai/voice-embed';\n\nexport type {\n  AgentTranscriptMessage,\n  Config,\n  FrameToClientAction,\n  JSONMessage,\n  UserTranscriptMessage,\n  WindowDimensions,\n  EmotionScores,\n} from '@humeai/voice-embed';\n","import {\n  type CloseHandler,\n  EmbeddedVoice as EA,\n  type EmbeddedVoiceConfig,\n  type TranscriptMessageHandler,\n} from '@humeai/voice-embed';\nimport { useEffect, useRef } from 'react';\n\ntype EmbeddedVoiceProps = Partial<EmbeddedVoiceConfig> &\n  NonNullable<Pick<EmbeddedVoiceConfig, 'auth'>> & {\n    onMessage?: TranscriptMessageHandler;\n    onClose?: CloseHandler;\n    isEmbedOpen: boolean;\n  };\n\nexport const EmbeddedVoice = (props: EmbeddedVoiceProps) => {\n  const { onMessage, isEmbedOpen, onClose, ...config } = props;\n  const embeddedVoice = useRef<EA | null>(null);\n  const onMessageHandler = useRef<TranscriptMessageHandler | undefined>();\n  onMessageHandler.current = onMessage;\n\n  const onCloseHandler = useRef<CloseHandler | undefined>();\n  onCloseHandler.current = onClose;\n\n  const stableConfig = useRef<\n    Partial<EmbeddedVoiceConfig> &\n      NonNullable<Pick<EmbeddedVoiceConfig, 'auth'>>\n  >();\n  stableConfig.current = config;\n\n  useEffect(() => {\n    let unmount: () => void;\n    if (!embeddedVoice.current && stableConfig.current) {\n      embeddedVoice.current = EA.create({\n        onMessage: onMessageHandler.current,\n        onClose: onCloseHandler.current,\n        ...stableConfig.current,\n      });\n      unmount = embeddedVoice.current.mount();\n    }\n\n    return () => {\n      unmount?.();\n      embeddedVoice.current = null;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (isEmbedOpen) {\n      embeddedVoice.current?.openEmbed();\n    }\n  }, [isEmbedOpen]);\n\n  return null;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,yBAKO;AACP,mBAAkC;AAS3B,IAAM,gBAAgB,CAAC,UAA8B;AAC1D,QAAM,EAAE,WAAW,aAAa,SAAS,GAAG,OAAO,IAAI;AACvD,QAAM,oBAAgB,qBAAkB,IAAI;AAC5C,QAAM,uBAAmB,qBAA6C;AACtE,mBAAiB,UAAU;AAE3B,QAAM,qBAAiB,qBAAiC;AACxD,iBAAe,UAAU;AAEzB,QAAM,mBAAe,qBAGnB;AACF,eAAa,UAAU;AAEvB,8BAAU,MAAM;AACd,QAAI;AACJ,QAAI,CAAC,cAAc,WAAW,aAAa,SAAS;AAClD,oBAAc,UAAU,mBAAAA,cAAG,OAAO;AAAA,QAChC,WAAW,iBAAiB;AAAA,QAC5B,SAAS,eAAe;AAAA,QACxB,GAAG,aAAa;AAAA,MAClB,CAAC;AACD,gBAAU,cAAc,QAAQ,MAAM;AAAA,IACxC;AAEA,WAAO,MAAM;AACX,gBAAU;AACV,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,aAAa;AACf,oBAAc,SAAS,UAAU;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,SAAO;AACT;;;ADpDA,IAAAC,sBASO;","names":["EA","import_voice_embed"]}

package/dist/index.mjs

@@ -0,0 +1,62 @@
+'use client';
+
+// src/lib/EmbeddedVoice.ts
+import {
+  EmbeddedVoice as EA
+} from "@humeai/voice-embed";
+import { useEffect, useRef } from "react";
+var EmbeddedVoice = (props) => {
+  const { onMessage, isEmbedOpen, onClose, ...config } = props;
+  const embeddedVoice = useRef(null);
+  const onMessageHandler = useRef();
+  onMessageHandler.current = onMessage;
+  const onCloseHandler = useRef();
+  onCloseHandler.current = onClose;
+  const stableConfig = useRef();
+  stableConfig.current = config;
+  useEffect(() => {
+    let unmount;
+    if (!embeddedVoice.current && stableConfig.current) {
+      embeddedVoice.current = EA.create({
+        onMessage: onMessageHandler.current,
+        onClose: onCloseHandler.current,
+        ...stableConfig.current
+      });
+      unmount = embeddedVoice.current.mount();
+    }
+    return () => {
+      unmount?.();
+      embeddedVoice.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    if (isEmbedOpen) {
+      embeddedVoice.current?.openEmbed();
+    }
+  }, [isEmbedOpen]);
+  return null;
+};
+
+// src/index.ts
+import {
+  COLLAPSE_WIDGET_ACTION,
+  EXPAND_WIDGET_ACTION,
+  MINIMIZE_WIDGET_ACTION,
+  RESIZE_FRAME_ACTION,
+  TRANSCRIPT_MESSAGE_ACTION,
+  WIDGET_IFRAME_IS_READY_ACTION,
+  parseClientToFrameAction,
+  LanguageModelOption
+} from "@humeai/voice-embed";
+export {
+  COLLAPSE_WIDGET_ACTION,
+  EXPAND_WIDGET_ACTION,
+  EmbeddedVoice,
+  LanguageModelOption,
+  MINIMIZE_WIDGET_ACTION,
+  RESIZE_FRAME_ACTION,
+  TRANSCRIPT_MESSAGE_ACTION,
+  WIDGET_IFRAME_IS_READY_ACTION,
+  parseClientToFrameAction
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/EmbeddedVoice.ts","../src/index.ts"],"sourcesContent":["import {\n  type CloseHandler,\n  EmbeddedVoice as EA,\n  type EmbeddedVoiceConfig,\n  type TranscriptMessageHandler,\n} from '@humeai/voice-embed';\nimport { useEffect, useRef } from 'react';\n\ntype EmbeddedVoiceProps = Partial<EmbeddedVoiceConfig> &\n  NonNullable<Pick<EmbeddedVoiceConfig, 'auth'>> & {\n    onMessage?: TranscriptMessageHandler;\n    onClose?: CloseHandler;\n    isEmbedOpen: boolean;\n  };\n\nexport const EmbeddedVoice = (props: EmbeddedVoiceProps) => {\n  const { onMessage, isEmbedOpen, onClose, ...config } = props;\n  const embeddedVoice = useRef<EA | null>(null);\n  const onMessageHandler = useRef<TranscriptMessageHandler | undefined>();\n  onMessageHandler.current = onMessage;\n\n  const onCloseHandler = useRef<CloseHandler | undefined>();\n  onCloseHandler.current = onClose;\n\n  const stableConfig = useRef<\n    Partial<EmbeddedVoiceConfig> &\n      NonNullable<Pick<EmbeddedVoiceConfig, 'auth'>>\n  >();\n  stableConfig.current = config;\n\n  useEffect(() => {\n    let unmount: () => void;\n    if (!embeddedVoice.current && stableConfig.current) {\n      embeddedVoice.current = EA.create({\n        onMessage: onMessageHandler.current,\n        onClose: onCloseHandler.current,\n        ...stableConfig.current,\n      });\n      unmount = embeddedVoice.current.mount();\n    }\n\n    return () => {\n      unmount?.();\n      embeddedVoice.current = null;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (isEmbedOpen) {\n      embeddedVoice.current?.openEmbed();\n    }\n  }, [isEmbedOpen]);\n\n  return null;\n};\n","export * from './lib/EmbeddedVoice';\n\nexport {\n  COLLAPSE_WIDGET_ACTION,\n  EXPAND_WIDGET_ACTION,\n  MINIMIZE_WIDGET_ACTION,\n  RESIZE_FRAME_ACTION,\n  TRANSCRIPT_MESSAGE_ACTION,\n  WIDGET_IFRAME_IS_READY_ACTION,\n  parseClientToFrameAction,\n  LanguageModelOption,\n} from '@humeai/voice-embed';\n\nexport type {\n  AgentTranscriptMessage,\n  Config,\n  FrameToClientAction,\n  JSONMessage,\n  UserTranscriptMessage,\n  WindowDimensions,\n  EmotionScores,\n} from '@humeai/voice-embed';\n"],"mappings":";;;AAAA;AAAA,EAEE,iBAAiB;AAAA,OAGZ;AACP,SAAS,WAAW,cAAc;AAS3B,IAAM,gBAAgB,CAAC,UAA8B;AAC1D,QAAM,EAAE,WAAW,aAAa,SAAS,GAAG,OAAO,IAAI;AACvD,QAAM,gBAAgB,OAAkB,IAAI;AAC5C,QAAM,mBAAmB,OAA6C;AACtE,mBAAiB,UAAU;AAE3B,QAAM,iBAAiB,OAAiC;AACxD,iBAAe,UAAU;AAEzB,QAAM,eAAe,OAGnB;AACF,eAAa,UAAU;AAEvB,YAAU,MAAM;AACd,QAAI;AACJ,QAAI,CAAC,cAAc,WAAW,aAAa,SAAS;AAClD,oBAAc,UAAU,GAAG,OAAO;AAAA,QAChC,WAAW,iBAAiB;AAAA,QAC5B,SAAS,eAAe;AAAA,QACxB,GAAG,aAAa;AAAA,MAClB,CAAC;AACD,gBAAU,cAAc,QAAQ,MAAM;AAAA,IACxC;AAEA,WAAO,MAAM;AACX,gBAAU;AACV,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,aAAa;AACf,oBAAc,SAAS,UAAU;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,SAAO;AACT;;;ACpDA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@humeai/voice-embed-react",
+  "version": "0.0.0-beta.1",
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/HumeAI/voice-sdk.git",
+    "directory": "packages/react"
+  },
+  "files": [
+    "package.json",
+    "dist"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@humeai/voice-embed": "0.0.0-beta.1"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/eslint": "^8.56.2",
+    "@types/node": "^20.11.19",
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jsdom": "^24.0.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.3.3",
+    "vitest": "^1.3.0",
+    "@humeai/eslint-config": "0.0.1",
+    "@humeai/typescript-config": "0.0.0"
+  },
+  "browserslist": [
+    "last 2 Chrome versions, last 2 iOS major versions, Firefox ESR, not dead"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint ./src",
+    "pack": "npm pack"
+  }
+}