sycoraxai-voice-assistants/dist/components/StatusIndicator.js

A voice assistant package for React applications supporting multiple providers including LiveKit, Retell, and TargetAI

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StatusIndicator = StatusIndicator;
const react_1 = __importDefault(require("react"));
function StatusIndicator({ status, isConnected }) {
    if (!isConnected || status === 'disconnected')
        return null;
    const getStatusColor = () => {
        switch (status) {
            case 'speaking':
                return '#4CAF50'; // Green
            case 'listening':
                return '#2196F3'; // Blue
            case 'thinking':
                return '#FF9800'; // Orange
            case 'connecting':
            case 'initializing':
            case 'idle':
                return '#9E9E9E'; // Gray
            default:
                return '#2196F3'; // Default blue
        }
    };
    const getStatusText = () => {
        switch (status) {
            case 'speaking':
                return 'Agent is speaking';
            case 'listening':
                return 'Agent is listening';
            case 'thinking':
                return 'Agent is thinking';
            case 'connecting':
                return '';
            case 'initializing':
                return 'Initializing...';
            case 'idle':
                return 'Not active';
            default:
                return 'Agent active';
        }
    };
    const getAnimation = () => {
        switch (status) {
            case 'speaking':
                return 'pulse 1.5s infinite';
            case 'thinking':
                return 'pulse 2s infinite';
            case 'listening':
                return 'listening 1.5s infinite';
            default:
                return 'listening 1.5s infinite';
        }
    };
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("style", null, `
        @keyframes pulse {
          0%, 100% { transform: scale(1); opacity: 1; }
          50% { transform: scale(1.2); opacity: 0.7; }
        }
        
        @keyframes listening {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }
      `),
        react_1.default.createElement("div", { style: styles.statusIndicator },
            react_1.default.createElement("div", { style: {
                    ...styles.indicatorDot,
                    backgroundColor: getStatusColor(),
                    animation: getAnimation()
                } }),
            react_1.default.createElement("div", { style: styles.statusText }, getStatusText()))));
}
const styles = {
    statusIndicator: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        margin: '10px 0 20px 0',
    },
    indicatorDot: {
        width: '12px',
        height: '12px',
        borderRadius: '50%',
        marginBottom: '8px',
    },
    statusText: {
        fontSize: '14px',
        color: '#666',
        textAlign: 'center',
    },
};