sycoraxai-voice-assistants
Version:
A voice assistant package for React applications supporting multiple providers including LiveKit, Retell, and TargetAI
72 lines (71 loc) • 4.92 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.RetellSimpleVoiceAssistant = RetellSimpleVoiceAssistant;
const react_1 = __importStar(require("react"));
const framer_motion_1 = require("framer-motion");
const RetellProvider_1 = require("./RetellProvider");
const StatusIndicator_1 = require("./StatusIndicator");
function RetellSimpleVoiceAssistant({ onConnectButtonClicked, children }) {
const voiceAssistant = (0, RetellProvider_1.useRetellVoiceAssistant)();
const [agentState, setAgentState] = (0, react_1.useState)('disconnected');
const [agentStatus, setAgentStatus] = (0, react_1.useState)('idle');
(0, react_1.useEffect)(() => {
// Poll for state changes since Retell client state might not trigger re-renders
const interval = setInterval(() => {
setAgentState(voiceAssistant.isCallActive ? 'connected' : 'disconnected');
setAgentStatus(voiceAssistant.agentStatus);
}, 100);
return () => clearInterval(interval);
}, [voiceAssistant]);
const handleEndCall = () => {
voiceAssistant.disconnect();
};
// If no connect button handler is provided, always show connected state
if (!onConnectButtonClicked) {
return (react_1.default.createElement(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, ease: [0.09, 1.04, 0.245, 1.055] }, className: "relative h-full" },
react_1.default.createElement("div", { className: "absolute top-0 left-0 right-0 flex justify-center" },
react_1.default.createElement(StatusIndicator_1.StatusIndicator, { status: agentStatus, isConnected: agentState === 'connected' })),
react_1.default.createElement("div", { className: "pt-16" }, children)));
}
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(framer_motion_1.AnimatePresence, { mode: "wait" }, agentState === "disconnected" ? (react_1.default.createElement(framer_motion_1.motion.div, { key: "disconnected", initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.95 }, transition: { duration: 0.3, ease: [0.09, 1.04, 0.245, 1.055] }, className: "grid items-center justify-center h-full" },
react_1.default.createElement(framer_motion_1.motion.button, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, delay: 0.1 }, className: "uppercase px-4 py-2 bg-white text-black rounded-md", onClick: onConnectButtonClicked }, "Start a conversation"))) : (react_1.default.createElement(framer_motion_1.motion.div, { key: "connected", initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -20 }, transition: { duration: 0.3, ease: [0.09, 1.04, 0.245, 1.055] }, className: "relative h-full" },
react_1.default.createElement("div", { className: "absolute top-0 flex justify-center" },
react_1.default.createElement(StatusIndicator_1.StatusIndicator, { status: agentStatus, isConnected: agentState === 'connected' })),
react_1.default.createElement("div", { className: "pt-16" }, children),
react_1.default.createElement("div", { className: "absolute bottom-0 left-0 right-0 flex justify-center" },
react_1.default.createElement("button", { onClick: handleEndCall, className: "px-6 py-3 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors" }, "End Call")))))));
}