plazbot
Version:
Official Plazbot SDK for creating AI agents for WhatsApp, portals, and developers.
56 lines (55 loc) • 3.58 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { usePlazbotContext } from '../../context/PlazbotContext';
import { useAgent } from '../../hooks/useAgent';
import { useChat } from '../../hooks/useChat';
import { ErrorBoundary } from '../utils/ErrorBoundary';
import { AgentHeader } from '../identity/AgentHeader';
import { PoweredBy } from '../identity/PoweredBy';
import { MessageList } from './MessageList';
import { EmptyState } from './EmptyState';
import { ChatInput } from './ChatInput';
import { TypingIndicator } from './TypingIndicator';
export function Chat({ showHeader = true, showPoweredBy = true, placeholder, allowAttachments = false, suggestedQuestions, onMessage, onActionExecuted, onError, className, style, }) {
const { theme } = usePlazbotContext();
const { agent, isLoading: agentLoading } = useAgent();
const chat = useChat({
onResponse: (msg) => {
onMessage?.(msg);
msg.actionsExecuted?.forEach((a) => onActionExecuted?.(a));
},
onError,
});
return (_jsx(ErrorBoundary, { children: _jsxs("div", { className: className, style: {
display: 'flex',
flexDirection: 'column',
height: '100%',
width: '100%',
backgroundColor: theme.backgroundColor,
borderRadius: theme.borderRadiusLg,
overflow: 'hidden',
fontFamily: theme.fontFamily,
...style,
}, children: [showHeader && !agentLoading && _jsx(AgentHeader, { agent: agent, onReset: chat.clearMessages }), agentLoading ? (_jsx("div", { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("div", { style: {
width: 24, height: 24,
border: `2px solid ${theme.borderColor}`,
borderTopColor: theme.primaryColor,
borderRadius: '50%',
animation: 'plazbot-spin 0.6s linear infinite',
} }) })) : chat.messages.length === 0 && !chat.isLoading ? (_jsx(EmptyState, { agent: agent, suggestedQuestions: suggestedQuestions, onSuggestionClick: chat.sendMessage })) : (_jsx(MessageList, { messages: chat.messages, children: chat.isLoading && _jsx(TypingIndicator, {}) })), chat.error && (_jsxs("div", { style: {
padding: '8px 16px',
fontSize: theme.fontSizeSm,
color: theme.errorColor,
backgroundColor: theme.errorColor + '10',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}, children: [_jsx("span", { children: chat.error }), _jsx("button", { onClick: chat.retry, style: {
background: 'none',
border: 'none',
color: theme.errorColor,
cursor: 'pointer',
fontWeight: 500,
fontSize: theme.fontSizeSm,
fontFamily: theme.fontFamily,
}, children: "Reintentar" })] })), _jsx(ChatInput, { onSend: chat.sendMessage, disabled: chat.isLoading, placeholder: placeholder, allowAttachments: allowAttachments }), showPoweredBy && (_jsx(PoweredBy, { ...(typeof showPoweredBy === 'object' ? showPoweredBy : {}) }))] }) }));
}