@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https
38 lines • 6.52 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import Drawer from '../ui/Drawer';
import { useTranslation } from 'react-i18next';
import Checkbox from '../ui/Checkbox';
import Select from '../ui/Select';
import { setLocalConfig } from '../../helpers/configuration';
import { RadioGroup } from '@headlessui/react';
import Button from '../ui/Button';
import Tooltip from '../ui/Tooltip';
const silenceSeconds = [2, 3, 5, 10, 15, 20, 30, 60];
const SettingsDrawer = ({ open, layout = 'DEFAULT', onClose, speakerMuted, microphoneMode = 'HOLD_TO_TALK', continuousSpeechTimeout, setMicrophoneMode, setContinuousSpeechTimeout, controlsPosition, setControlsPosition, hideEmissions, setHideEmissions, additionalSettings, avatarType, setAvatarType, enablePositionControls, setEnablePositionControls, isAvatar3d, }) => {
const { t } = useTranslation();
return (_jsxs(Drawer, { className: "memori-settings-drawer", open: open, onClose: onClose, title: t('widget.settings') || 'Settings', description: t('write_and_speak.settingsHeaderLabel'), children: [_jsxs("div", { className: "memori-settings-drawer--field controls", children: [_jsxs("label", { htmlFor: "#microphoneMode", children: [t('write_and_speak.microphoneMode') || 'Microphone mode', ":"] }), _jsxs(RadioGroup, { id: "microphoneMode", name: "microphoneMode", value: microphoneMode, defaultValue: microphoneMode, className: "memori-settings-drawer--microphoneMode-radio", onChange: (value) => {
let micMode = value === 'CONTINUOUS' ? 'CONTINUOUS' : 'HOLD_TO_TALK';
setMicrophoneMode(micMode);
setLocalConfig('microphoneMode', micMode);
}, children: [_jsx(RadioGroup.Option, { value: "HOLD_TO_TALK", className: "memori-settings-drawer--microphoneMode-radio-button", children: ({ checked }) => (_jsx(Button, { primary: checked, outlined: !checked, children: t('write_and_speak.holdToSpeak') || 'Hold to speak' })) }), _jsx(Tooltip, { content: speakerMuted ? t('write_and_speak.continuousSpeechDisabled') : '', disabled: !speakerMuted, children: _jsx(RadioGroup.Option, { value: "CONTINUOUS", className: `memori-settings-drawer--microphoneMode-radio-button ${speakerMuted
? 'memori-settings-drawer--microphoneMode-radio-button-disabled'
: ''}`, children: ({ checked }) => (_jsx(Button, { primary: checked, outlined: !checked, disabled: speakerMuted, children: t('write_and_speak.continuousSpeechLabel') ||
'Continuous speech' })) }) })] })] }), microphoneMode === 'CONTINUOUS' && (_jsx("div", { className: "memori-settings-drawer--field", children: _jsx(Select, { label: t('write_and_speak.secondsLabel') || 'Seconds', placeholder: t('write_and_speak.secondsLabel') || 'Seconds', options: silenceSeconds.map(s => ({ value: s, label: s })), value: continuousSpeechTimeout, onChange: value => {
setContinuousSpeechTimeout(value);
setLocalConfig('continuousSpeechTimeout', value);
} }) })), layout === 'TOTEM' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "memori-settings-drawer--field controls", children: [_jsxs("label", { htmlFor: "#controlsPosition", children: [t('write_and_speak.controlsPosition') || 'Controls', ":"] }), _jsxs(RadioGroup, { id: "controlsPosition", name: "controlsPosition", value: controlsPosition, defaultValue: controlsPosition, className: "memori-settings-drawer--controlsposition-radio", onChange: (value) => {
setControlsPosition(value);
setLocalConfig('controlsPosition', value);
}, children: [_jsx(RadioGroup.Option, { value: "center", className: "memori-settings-drawer--controlsposition-radio-button", children: ({ checked }) => (_jsx(Button, { primary: checked, outlined: !checked, children: t('center') || 'Center' })) }), _jsx(RadioGroup.Option, { value: "bottom", className: "memori-settings-drawer--controlsposition-radio-button", children: ({ checked }) => (_jsx(Button, { primary: checked, outlined: !checked, children: t('bottom') || 'Bottom' })) })] })] }), isAvatar3d && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "memori-settings-drawer--field controls", children: [_jsxs("label", { htmlFor: "avatarType", className: "memori-settings-drawer-label", children: [t('write_and_speak.avatarType') || 'Avatar type', ":"] }), _jsxs(RadioGroup, { id: "avatarType", name: "avatarType", value: avatarType, defaultValue: avatarType, className: "memori-settings-drawer--avatarType-radio", onChange: (value) => {
setAvatarType && setAvatarType(value);
setLocalConfig('avatarType', value);
}, children: [_jsx(RadioGroup.Option, { value: "blob", className: "memori-settings-drawer--avatarType-radio-button", children: ({ checked }) => (_jsx(Button, { primary: checked, outlined: !checked, children: t('write_and_speak.blob') || 'Blob' })) }), _jsx(RadioGroup.Option, { value: "avatar3d", className: "memori-settings-drawer--avatarType-radio-button", children: ({ checked }) => (_jsx(Button, { primary: checked, outlined: !checked, children: t('write_and_speak.avatar3d') || 'Avatar 3D' })) })] })] }), _jsx("div", { className: "memori-settings-drawer--field", children: _jsx(Checkbox, { label: t('write_and_speak.enablePositionControls') ||
'Enable position controls', name: "enablePositionControls", checked: enablePositionControls, onChange: e => {
setEnablePositionControls(e.target.checked);
} }) })] })), _jsx("div", { className: "memori-settings-drawer--field", children: _jsx(Checkbox, { label: t('write_and_speak.hideEmissionsLabel') || 'Hide emissions', name: "hideControls", checked: hideEmissions, onChange: e => {
setHideEmissions(e.target.checked);
setLocalConfig('hideEmissions', e.target.checked);
} }) })] })), additionalSettings && (_jsx("div", { className: "memori-settings-drawer--field controls", children: additionalSettings }))] }));
};
export default SettingsDrawer;
//# sourceMappingURL=SettingsDrawer.js.map