@11labs/react - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5-beta.1

dist/index.d.ts

 import { SessionConfig, Callbacks, Status, ClientToolsConfig } from "@11labs/client";
-export type { Role, Mode, Status } from "@11labs/client";
+export type { Role, Mode, Status, SessionConfig } from "@11labs/client";
+export { postOverallFeedback } from "@11labs/client";
 export type HookOptions = Partial<SessionConfig & HookCallbacks & ClientToolsConfig>;
@@ -15,4 +16,6 @@ export type HookCallbacks = Pick<Callbacks, "onConnect" | "onDisconnect" | "onError" | "onMessage" | "onDebug" | "onUnhandledClientToolCall">;
     getOutputVolume: () => number;
+    sendFeedback: (like: boolean) => void;
     status: Status;
+    canSendFeedback: boolean;
     isSpeaking: boolean;
 };

dist/lib.modern.js

@@ -1,2 +0,2 @@
-import{useRef as t,useState as n,useEffect as e}from"react";import{Conversation as r}from"@11labs/client";function u(){return u=Object.assign?Object.assign.bind():function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var r in e)({}).hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},u.apply(null,arguments)}function l(l){const a=t(null),o=t(null),[c,s]=n("disconnected"),[i,g]=n("listening");return e(()=>()=>{var t;null==(t=a.current)||t.endSession()},[]),{startSession:async t=>{if(a.current)return a.current.getId();if(o.current)return(await o.current).getId();try{return o.current=r.startSession(u({},null!=l?l:{},null!=t?t:{},{onModeChange:({mode:t})=>{g(t)},onStatusChange:({status:t})=>{s(t)}})),a.current=await o.current,a.current.getId()}finally{o.current=null}},endSession:async()=>{const t=a.current;a.current=null,await(null==t?void 0:t.endSession())},setVolume:({volume:t})=>{var n;null==(n=a.current)||n.setVolume({volume:t})},getInputByteFrequencyData:()=>{var t;return null==(t=a.current)?void 0:t.getInputByteFrequencyData()},getOutputByteFrequencyData:()=>{var t;return null==(t=a.current)?void 0:t.getOutputByteFrequencyData()},getInputVolume:()=>{var t,n;return null!=(t=null==(n=a.current)?void 0:n.getInputVolume())?t:0},getOutputVolume:()=>{var t,n;return null!=(t=null==(n=a.current)?void 0:n.getOutputVolume())?t:0},status:c,isSpeaking:"speaking"===i}}export{l as useConversation};
+import{useRef as e,useState as n,useEffect as t}from"react";import{Conversation as r}from"@11labs/client";export{postOverallFeedback}from"@11labs/client";function u(){return u=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},u.apply(null,arguments)}function a(a){const l=e(null),c=e(null),[o,s]=n("disconnected"),[i,d]=n(!1),[g,p]=n("listening");return t(()=>()=>{var e;null==(e=l.current)||e.endSession()},[]),{startSession:async e=>{if(l.current)return l.current.getId();if(c.current)return(await c.current).getId();try{return c.current=r.startSession(u({},null!=a?a:{},null!=e?e:{},{onModeChange:({mode:e})=>{p(e)},onStatusChange:({status:e})=>{s(e)},onCanSendFeedbackChange:({canSendFeedback:e})=>{d(e)}})),l.current=await c.current,l.current.getId()}finally{c.current=null}},endSession:async()=>{const e=l.current;l.current=null,await(null==e?void 0:e.endSession())},setVolume:({volume:e})=>{var n;null==(n=l.current)||n.setVolume({volume:e})},getInputByteFrequencyData:()=>{var e;return null==(e=l.current)?void 0:e.getInputByteFrequencyData()},getOutputByteFrequencyData:()=>{var e;return null==(e=l.current)?void 0:e.getOutputByteFrequencyData()},getInputVolume:()=>{var e,n;return null!=(e=null==(n=l.current)?void 0:n.getInputVolume())?e:0},getOutputVolume:()=>{var e,n;return null!=(e=null==(n=l.current)?void 0:n.getOutputVolume())?e:0},sendFeedback:e=>{var n;null==(n=l.current)||n.sendFeedback(e)},status:o,canSendFeedback:i,isSpeaking:"speaking"===g}}export{a as useConversation};
 //# sourceMappingURL=lib.modern.js.map

dist/lib.module.js

@@ -1,2 +0,2 @@
-import{useRef as n,useState as t,useEffect as r}from"react";import{Conversation as e}from"@11labs/client";function u(){return u=Object.assign?Object.assign.bind():function(n){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var e in r)({}).hasOwnProperty.call(r,e)&&(n[e]=r[e])}return n},u.apply(null,arguments)}function o(o){var c=n(null),i=n(null),l=t("disconnected"),a=l[0],s=l[1],f=t("listening"),v=f[0],m=f[1];return r(function(){return function(){var n;null==(n=c.current)||n.endSession()}},[]),{startSession:function(n){try{var t,r=function(r){return t?r:function(t,r){try{var l=(i.current=e.startSession(u({},null!=o?o:{},null!=n?n:{},{onModeChange:function(n){m(n.mode)},onStatusChange:function(n){s(n.status)}})),Promise.resolve(i.current).then(function(n){return c.current=n,c.current.getId()}))}catch(n){return r(!0,n)}return l&&l.then?l.then(r.bind(null,!1),r.bind(null,!0)):r(!1,l)}(0,function(n,t){if(i.current=null,n)throw t;return t})};if(c.current)return Promise.resolve(c.current.getId());var l=function(){if(i.current)return Promise.resolve(i.current).then(function(n){var r=n.getId();return t=1,r})}();return Promise.resolve(l&&l.then?l.then(r):r(l))}catch(n){return Promise.reject(n)}},endSession:function(){try{var n=c.current;return c.current=null,Promise.resolve(null==n?void 0:n.endSession()).then(function(){})}catch(n){return Promise.reject(n)}},setVolume:function(n){var t;null==(t=c.current)||t.setVolume({volume:n.volume})},getInputByteFrequencyData:function(){var n;return null==(n=c.current)?void 0:n.getInputByteFrequencyData()},getOutputByteFrequencyData:function(){var n;return null==(n=c.current)?void 0:n.getOutputByteFrequencyData()},getInputVolume:function(){var n,t;return null!=(n=null==(t=c.current)?void 0:t.getInputVolume())?n:0},getOutputVolume:function(){var n,t;return null!=(n=null==(t=c.current)?void 0:t.getOutputVolume())?n:0},status:a,isSpeaking:"speaking"===v}}export{o as useConversation};
+import{useRef as n,useState as e,useEffect as t}from"react";import{Conversation as r}from"@11labs/client";export{postOverallFeedback}from"@11labs/client";function u(){return u=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},u.apply(null,arguments)}function o(o){var c=n(null),l=n(null),i=e("disconnected"),a=i[0],s=i[1],f=e(!1),d=f[0],v=f[1],m=e("listening"),g=m[0],p=m[1];return t(function(){return function(){var n;null==(n=c.current)||n.endSession()}},[]),{startSession:function(n){try{var e,t=function(t){return e?t:function(e,t){try{var i=(l.current=r.startSession(u({},null!=o?o:{},null!=n?n:{},{onModeChange:function(n){p(n.mode)},onStatusChange:function(n){s(n.status)},onCanSendFeedbackChange:function(n){v(n.canSendFeedback)}})),Promise.resolve(l.current).then(function(n){return c.current=n,c.current.getId()}))}catch(n){return t(!0,n)}return i&&i.then?i.then(t.bind(null,!1),t.bind(null,!0)):t(!1,i)}(0,function(n,e){if(l.current=null,n)throw e;return e})};if(c.current)return Promise.resolve(c.current.getId());var i=function(){if(l.current)return Promise.resolve(l.current).then(function(n){var t=n.getId();return e=1,t})}();return Promise.resolve(i&&i.then?i.then(t):t(i))}catch(n){return Promise.reject(n)}},endSession:function(){try{var n=c.current;return c.current=null,Promise.resolve(null==n?void 0:n.endSession()).then(function(){})}catch(n){return Promise.reject(n)}},setVolume:function(n){var e;null==(e=c.current)||e.setVolume({volume:n.volume})},getInputByteFrequencyData:function(){var n;return null==(n=c.current)?void 0:n.getInputByteFrequencyData()},getOutputByteFrequencyData:function(){var n;return null==(n=c.current)?void 0:n.getOutputByteFrequencyData()},getInputVolume:function(){var n,e;return null!=(n=null==(e=c.current)?void 0:e.getInputVolume())?n:0},getOutputVolume:function(){var n,e;return null!=(n=null==(e=c.current)?void 0:e.getOutputVolume())?n:0},sendFeedback:function(n){var e;null==(e=c.current)||e.sendFeedback(n)},status:a,canSendFeedback:d,isSpeaking:"speaking"===g}}export{o as useConversation};
 //# sourceMappingURL=lib.module.js.map

dist/lib.umd.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("@11labs/client")):"function"==typeof define&&define.amd?define(["exports","react","@11labs/client"],n):n((e||self).react={},e.react,e.client)}(this,function(e,n,t){function r(){return r=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},r.apply(null,arguments)}e.useConversation=function(e){var u=n.useRef(null),o=n.useRef(null),i=n.useState("disconnected"),c=i[0],l=i[1],s=n.useState("listening"),a=s[0],f=s[1];return n.useEffect(function(){return function(){var e;null==(e=u.current)||e.endSession()}},[]),{startSession:function(n){try{var i,c=function(c){return i?c:function(i,c){try{var s=(o.current=t.Conversation.startSession(r({},null!=e?e:{},null!=n?n:{},{onModeChange:function(e){f(e.mode)},onStatusChange:function(e){l(e.status)}})),Promise.resolve(o.current).then(function(e){return u.current=e,u.current.getId()}))}catch(e){return c(!0,e)}return s&&s.then?s.then(c.bind(null,!1),c.bind(null,!0)):c(!1,s)}(0,function(e,n){if(o.current=null,e)throw n;return n})};if(u.current)return Promise.resolve(u.current.getId());var s=function(){if(o.current)return Promise.resolve(o.current).then(function(e){var n=e.getId();return i=1,n})}();return Promise.resolve(s&&s.then?s.then(c):c(s))}catch(e){return Promise.reject(e)}},endSession:function(){try{var e=u.current;return u.current=null,Promise.resolve(null==e?void 0:e.endSession()).then(function(){})}catch(e){return Promise.reject(e)}},setVolume:function(e){var n;null==(n=u.current)||n.setVolume({volume:e.volume})},getInputByteFrequencyData:function(){var e;return null==(e=u.current)?void 0:e.getInputByteFrequencyData()},getOutputByteFrequencyData:function(){var e;return null==(e=u.current)?void 0:e.getOutputByteFrequencyData()},getInputVolume:function(){var e,n;return null!=(e=null==(n=u.current)?void 0:n.getInputVolume())?e:0},getOutputVolume:function(){var e,n;return null!=(e=null==(n=u.current)?void 0:n.getOutputVolume())?e:0},status:c,isSpeaking:"speaking"===a}}});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("@11labs/client")):"function"==typeof define&&define.amd?define(["exports","react","@11labs/client"],n):n((e||self).react={},e.react,e.client)}(this,function(e,n,t){function r(){return r=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},r.apply(null,arguments)}Object.defineProperty(e,"postOverallFeedback",{enumerable:!0,get:function(){return t.postOverallFeedback}}),e.useConversation=function(e){var u=n.useRef(null),o=n.useRef(null),c=n.useState("disconnected"),i=c[0],l=c[1],a=n.useState(!1),s=a[0],f=a[1],d=n.useState("listening"),v=d[0],g=d[1];return n.useEffect(function(){return function(){var e;null==(e=u.current)||e.endSession()}},[]),{startSession:function(n){try{var c,i=function(i){return c?i:function(c,i){try{var a=(o.current=t.Conversation.startSession(r({},null!=e?e:{},null!=n?n:{},{onModeChange:function(e){g(e.mode)},onStatusChange:function(e){l(e.status)},onCanSendFeedbackChange:function(e){f(e.canSendFeedback)}})),Promise.resolve(o.current).then(function(e){return u.current=e,u.current.getId()}))}catch(e){return i(!0,e)}return a&&a.then?a.then(i.bind(null,!1),i.bind(null,!0)):i(!1,a)}(0,function(e,n){if(o.current=null,e)throw n;return n})};if(u.current)return Promise.resolve(u.current.getId());var a=function(){if(o.current)return Promise.resolve(o.current).then(function(e){var n=e.getId();return c=1,n})}();return Promise.resolve(a&&a.then?a.then(i):i(a))}catch(e){return Promise.reject(e)}},endSession:function(){try{var e=u.current;return u.current=null,Promise.resolve(null==e?void 0:e.endSession()).then(function(){})}catch(e){return Promise.reject(e)}},setVolume:function(e){var n;null==(n=u.current)||n.setVolume({volume:e.volume})},getInputByteFrequencyData:function(){var e;return null==(e=u.current)?void 0:e.getInputByteFrequencyData()},getOutputByteFrequencyData:function(){var e;return null==(e=u.current)?void 0:e.getOutputByteFrequencyData()},getInputVolume:function(){var e,n;return null!=(e=null==(n=u.current)?void 0:n.getInputVolume())?e:0},getOutputVolume:function(){var e,n;return null!=(e=null==(n=u.current)?void 0:n.getOutputVolume())?e:0},sendFeedback:function(e){var n;null==(n=u.current)||n.sendFeedback(e)},status:i,canSendFeedback:s,isSpeaking:"speaking"===v}}});
 //# sourceMappingURL=lib.umd.js.map

package.json

 {
   "name": "@11labs/react",
-  "version": "0.0.4",
+  "version": "0.0.5-beta.1",
   "description": "ElevenLabs React Library",
@@ -22,3 +22,3 @@ "main": "./dist/lib.umd.js",
   "dependencies": {
-    "@11labs/client": "0.0.4"
+    "@11labs/client": "0.0.5-beta.1"
   },
@@ -25,0 +25,0 @@ "peerDependencies": {

README.md

@@ -5,3 +5,3 @@ # ElevenLabs React Library
 
-> Note that this library is launching to primarily support Conversational AI. The support for speech synthesis and other more generic use cases is planned for the future.   
+> Note that this library is launching to primarily support Conversational AI. The support for speech synthesis and other more generic use cases is planned for the future.
 
@@ -39,3 +39,3 @@ ![LOGO](https://github.com/elevenlabs/elevenlabs-python/assets/12028621/21267d89-5e82-4e7e-9c81-caf30b237683)
 Note that Conversational AI requires microphone access.
-Consider explaining and allowing access in your apps UI before the Conversation kicks off. 
+Consider explaining and allowing access in your apps UI before the Conversation kicks off.
 
@@ -52,11 +52,13 @@ ```js
 ```tsx
-const conversation = useConversation({/* options object */});
+const conversation = useConversation({
+  /* options object */
+});
 ```
 
-* **clientTools** - object definition for client tools that can be invoked by agent. [See below](#client-tools) for details.
-* **overrides** - object definition conversations settings overrides. [See below](#conversation-overrides) for details.
-* **onConnect** - handler called when the conversation websocket connection is established.  
-* **onDisconnect** - handler called when the conversation websocket connection is ended.
-* **onMessage** - handler called when a new message is received. These can be tentative or final transcriptions of user voice, replies produced by LLM, or debug message when a debug option is enabled.
-* **onError** - handler called when a error is encountered.
+- **clientTools** - object definition for client tools that can be invoked by agent. [See below](#client-tools) for details.
+- **overrides** - object definition conversations settings overrides. [See below](#conversation-overrides) for details.
+- **onConnect** - handler called when the conversation websocket connection is established.
+- **onDisconnect** - handler called when the conversation websocket connection is ended.
+- **onMessage** - handler called when a new message is received. These can be tentative or final transcriptions of user voice, replies produced by LLM, or debug message when a debug option is enabled.
+- **onError** - handler called when a error is encountered.
 
@@ -70,10 +72,10 @@ ##### Client Tools
 ```ts
-const conversation = useConversation({ 
+const conversation = useConversation({
   clientTools: {
-    displayMessage: (parameters: {text: string}) => {
+    displayMessage: (parameters: { text: string }) => {
       alert(text);
-      
+
       return "Message displayed";
-    } 
-  }
+    },
+  },
 });
@@ -103,3 +105,3 @@ ```
     tts: {
-      voiceId: "custom voice id"
+      voiceId: "custom voice id",
     },
@@ -125,3 +127,3 @@ },
 For the public agents, define `agentId` - no signed link generation necessary.
- 
+
 In case the conversation requires authorization, use the REST API to generate signed links. Use the signed link as a `url` parameter.
@@ -134,3 +136,3 @@
 const requestHeaders: HeadersInit = new Headers();
-requestHeaders.set("xi-api-key", process.env.XI_API_KEY); // use your ElevenLabs API key 
+requestHeaders.set("xi-api-key", process.env.XI_API_KEY); // use your ElevenLabs API key
 
@@ -153,3 +155,3 @@ const response = await fetch(
 
-##### endConversation
+##### endSession
 
@@ -162,2 +164,16 @@ A method to manually end the conversation. The method will end the conversation and disconnect from websocket.
 
+##### sendFeedback
+
+A method for sending binary feedback to the agent.
+The method accepts a boolean value, where `true` represents positive feedback and `false` negative feedback.
+Feedback is always correlated to the most recent agent response and can be sent only once per response.
+Check `canSendFeedback` state to see if feedback can be sent in the given moment.
+
+```js
+const { sendFeedback } = useConversation();
+
+sendFeedback(true); // positive feedback
+sendFeedback(false); // negative feedback
+```
+
 ##### setVolume
@@ -173,3 +189,3 @@
 
-A React state containing the current status of the conversation. 
+A React state containing the current status of the conversation.
 
@@ -181,6 +197,6 @@ ```js
 
-##### mode
+##### isSpeaking
 
-A React state containing the information of whether the agent is currently speaking. 
-This is helpful for indicating the mode in your UI. 
+A React state containing the information of whether the agent is currently speaking.
+This is helpful for indicating the mode in your UI.
 
@@ -192,7 +208,18 @@ ```js
 
+##### canSendFeedback
+
+A React state representing whether the user can send feedback to the agent.
+When false, calls to `sendFeedback` will be ignored.
+This is helpful to conditionally show the feedback button in your UI.
+
+```js
+const { canSendFeedback } = useConversation();
+console.log(canSendFeedback); // boolean
+```
+
 ## Development
 
-Please, refer to the README.md file in the root of this repository. 
+Please, refer to the README.md file in the root of this repository.
 
-## Contributing 
+## Contributing
 
@@ -202,2 +229,1 @@ Please, create an issue first to discuss the proposed changes. Any contributions are welcome!
 Remember, if merged, your code will be used as part of a MIT licensed project. By submitting a Pull Request, you are giving your consent for your code to be integrated into this library.
-

No alert changes

Improved metrics

Total package byte prevSize

43041

increased by12.52%

Lines of code

59

increased by13.46%

Number of lines in readme file

217

increased by13.61%

Dependency changes

• + Added@11labs/client@0.0.5-beta.1(transitive)

• - Removed@11labs/client@0.0.4(transitive)

• Updated@11labs/client@0.0.5-beta.1