plazbot
Version:
Official Plazbot SDK for creating AI agents for WhatsApp, portals, and developers.
41 lines (40 loc) • 1.71 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { usePlazbotContext } from '../../context/PlazbotContext';
const TYPING_STYLE_ID = 'plazbot-typing-anim';
const TYPING_CSS = `@keyframes pz-dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}`;
export function TypingIndicator({ style }) {
const { theme } = usePlazbotContext();
const injected = useRef(false);
useEffect(() => {
if (injected.current)
return;
if (typeof document === 'undefined')
return;
if (document.getElementById(TYPING_STYLE_ID)) {
injected.current = true;
return;
}
const s = document.createElement('style');
s.id = TYPING_STYLE_ID;
s.textContent = TYPING_CSS;
document.head.appendChild(s);
injected.current = true;
}, []);
const dot = (delay) => ({
display: 'inline-block',
width: 5,
height: 5,
borderRadius: '50%',
backgroundColor: theme.textSecondary,
animation: `pz-dot 1.4s ease-in-out ${delay} infinite`,
});
return (_jsx("div", { style: { display: 'flex', justifyContent: 'flex-start', ...style }, children: _jsxs("div", { style: {
display: 'inline-flex',
alignItems: 'center',
gap: '3px',
padding: '6px 10px',
borderRadius: theme.borderRadius,
backgroundColor: theme.bubbleAgentBg,
}, children: [_jsx("span", { style: dot('0s') }), _jsx("span", { style: dot('0.2s') }), _jsx("span", { style: dot('0.4s') })] }) }));
}