@memori.ai/memori-react/esm/components/MicrophoneButton/MicrophoneButton.js

[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https

import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useEffect, useRef } from 'react';
import Microphone from '../icons/Microphone';
import Button from '../ui/Button';
import Tooltip from '../ui/Tooltip';
import cx from 'classnames';
import { useTranslation } from 'react-i18next';
const MicrophoneButton = ({ listening, stopAudio, startListening, stopListening, }) => {
    const { t } = useTranslation();
    const [micBtnTooltip, setMicBtnTooltip] = useState();
    const intervalRef = useRef(null);
    const startHold = (e) => {
        e.preventDefault();
        setMicBtnTooltip(t('write_and_speak.holdToSpeak') || 'Hold to record');
        if (intervalRef.current)
            return;
        intervalRef.current = setTimeout(() => {
            stopAudio();
            setMicBtnTooltip(t('write_and_speak.releaseToEndListening') || 'Release to end listening');
            startListening();
        }, 300);
    };
    const stopHold = () => {
        if (intervalRef.current) {
            clearTimeout(intervalRef.current);
            intervalRef.current = null;
        }
        stopListening();
        setMicBtnTooltip(undefined);
    };
    useEffect(() => {
        return () => stopHold();
    }, []);
    return (_jsx(Tooltip, { visible: !!micBtnTooltip, content: _jsx("span", { children: micBtnTooltip ||
                t('write_and_speak.pressAndHoldToSpeak') ||
                'Press and hold to speak' }), align: "topLeft", className: "memori-mic-btn-tooltip", children: _jsx(Button, { primary: true, className: cx('memori-chat-inputs--mic', {
                'memori-chat-inputs--mic--listening': listening,
            }), title: listening
                ? t('write_and_speak.micButtonPopoverListening') || 'Listening'
                : t('write_and_speak.micButtonPopover') || 'Start listening', onMouseDown: startHold, onTouchStart: startHold, onMouseUp: stopHold, onTouchEnd: stopHold, shape: "circle", icon: _jsx(Microphone, {}) }) }));
};
export default MicrophoneButton;
//# sourceMappingURL=MicrophoneButton.js.map