sycoraxai-voice-assistants
Version:
A voice assistant package for React applications supporting multiple providers including LiveKit, Retell, and TargetAI
23 lines (22 loc) • 2.2 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ControlBar = ControlBar;
const react_1 = __importDefault(require("react"));
const framer_motion_1 = require("framer-motion");
const components_react_1 = require("@livekit/components-react");
function ControlBar({ onConnectButtonClicked }) {
const { state: agentState } = (0, components_react_1.useVoiceAssistant)();
return (react_1.default.createElement("div", { className: "relative h-[60px]" },
react_1.default.createElement(framer_motion_1.AnimatePresence, null, agentState === "disconnected" && (react_1.default.createElement(framer_motion_1.motion.button, { initial: { opacity: 0, top: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, top: "-10px" }, transition: { duration: 1, ease: [0.09, 1.04, 0.245, 1.055] }, className: "uppercase absolute left-1/2 -translate-x-1/2 px-4 py-2 bg-white text-black rounded-md", onClick: onConnectButtonClicked }, "Start a conversation"))),
react_1.default.createElement(framer_motion_1.AnimatePresence, null, agentState !== "disconnected" && agentState !== "connecting" && (react_1.default.createElement(framer_motion_1.motion.div, { initial: { opacity: 0, top: "10px" }, animate: { opacity: 1, top: 0 }, exit: { opacity: 0, top: "-10px" }, transition: { duration: 0.4, ease: [0.09, 1.04, 0.245, 1.055] }, className: "flex h-8 absolute left-1/2 -translate-x-1/2 justify-center" },
react_1.default.createElement(components_react_1.VoiceAssistantControlBar, { controls: { leave: false } }),
react_1.default.createElement(components_react_1.DisconnectButton, null,
react_1.default.createElement(CloseIcon, null)))))));
}
function CloseIcon() {
return (react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
react_1.default.createElement("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
}