plazbot
Version:
Official Plazbot SDK for creating AI agents for WhatsApp, portals, and developers.
67 lines (66 loc) • 3.32 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createElement, useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { usePlazbotContext } from '../../context/PlazbotContext';
import { useAgent } from '../../hooks/useAgent';
import { agentColorToHex } from '../../styles/theme';
import { widgetIconSVG } from '../../styles/icons';
import { Chat } from '../chat/Chat';
const closeSvg = createElement('svg', {
width: 18, height: 18, viewBox: '0 0 24 24',
fill: 'none', stroke: 'currentColor', strokeWidth: 2.5,
strokeLinecap: 'round', strokeLinejoin: 'round',
}, createElement('line', { x1: 18, y1: 6, x2: 6, y2: 18 }), createElement('line', { x1: 6, y1: 6, x2: 18, y2: 18 }));
export function ChatWidget({ position = 'bottom-right', offset = 20, width = 400, height = 600, defaultOpen = false, icon, buttonColor, placeholder, allowAttachments, suggestedQuestions, showPoweredBy = true, customCardRenderers, onMessage, onActionExecuted, }) {
const { theme } = usePlazbotContext();
const { agent, isLoading: agentLoading } = useAgent();
const [isOpen, setIsOpen] = useState(defaultOpen);
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted || agentLoading)
return null;
const color = buttonColor ?? agentColorToHex(agent?.color);
const displayIcon = (icon ?? agent?.iconWidget);
const iconElement = displayIcon ? widgetIconSVG(displayIcon, 24) : widgetIconSVG('message', 24);
const isRight = position === 'bottom-right';
const containerStyle = {
position: 'fixed',
bottom: offset,
[isRight ? 'right' : 'left']: offset,
zIndex: 999999,
fontFamily: theme.fontFamily,
};
const panelStyle = {
position: 'absolute',
bottom: 64,
[isRight ? 'right' : 'left']: 0,
width,
height,
borderRadius: theme.borderRadiusLg,
boxShadow: theme.shadowLg,
overflow: 'hidden',
animation: 'plazbot-slide-up 0.25s ease-out',
border: `1px solid ${theme.borderColor}`,
};
const buttonStyle = {
width: 56,
height: 56,
borderRadius: '50%',
backgroundColor: color,
border: 'none',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#ffffff',
boxShadow: theme.shadowMd,
transition: 'transform 0.2s',
};
return createPortal(_jsxs("div", { style: containerStyle, children: [isOpen && (_jsx("div", { style: panelStyle, children: _jsx(Chat, { showPoweredBy: showPoweredBy, placeholder: placeholder, allowAttachments: allowAttachments, suggestedQuestions: suggestedQuestions, customCardRenderers: customCardRenderers, onMessage: onMessage, onActionExecuted: onActionExecuted }) })), _jsx("button", { onClick: () => setIsOpen(!isOpen), style: buttonStyle, "aria-label": isOpen ? 'Cerrar chat' : 'Abrir chat', onMouseEnter: (e) => {
e.currentTarget.style.transform = 'scale(1.08)';
}, onMouseLeave: (e) => {
e.currentTarget.style.transform = 'scale(1)';
}, children: isOpen ? closeSvg : iconElement })] }), document.body);
}