plazbot
Version:
Official Plazbot SDK for creating AI agents for WhatsApp, portals, and developers.
61 lines (60 loc) • 3.16 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { usePlazbotContext } from '../../context/PlazbotContext';
import { AgentAvatar } from '../identity/AgentAvatar';
import { agentColorToHex } from '../../styles/theme';
export function EmptyState({ agent, suggestedQuestions, onSuggestionClick, style }) {
const { theme } = usePlazbotContext();
const greeting = agent?.instructions?.greeting ?? 'Hola! En que puedo ayudarte?';
const name = agent?.person?.name ?? agent?.name ?? 'Agente IA';
const questions = suggestedQuestions ?? agent?.examples?.map((e) => e.value) ?? [];
return (_jsxs("div", { style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
flex: 1,
padding: '24px 16px',
textAlign: 'center',
fontFamily: theme.fontFamily,
animation: 'plazbot-fade-in 0.3s ease-out',
...style,
}, children: [_jsx(AgentAvatar, { name: name, color: agent?.color, icon: agent?.iconWidget, size: 40 }), _jsx("div", { style: {
marginTop: '12px',
fontSize: theme.fontSizeLg,
fontWeight: 600,
color: theme.textColor,
}, children: name }), _jsx("div", { style: {
marginTop: '8px',
fontSize: theme.fontSize,
color: theme.textSecondary,
maxWidth: '280px',
lineHeight: 1.5,
}, children: greeting }), questions.length > 0 && (_jsx("div", { style: {
display: 'flex',
flexWrap: 'wrap',
gap: '8px',
justifyContent: 'center',
marginTop: '20px',
maxWidth: '340px',
}, children: questions.map((q, i) => {
const exampleColor = agent?.examples?.[i]?.color;
const btnColor = exampleColor ? agentColorToHex(exampleColor) : theme.primaryColor;
return (_jsx("button", { onClick: () => onSuggestionClick?.(q), style: {
padding: '6px 12px',
fontSize: theme.fontSizeSm,
color: btnColor,
backgroundColor: 'transparent',
border: `1px solid ${btnColor}`,
borderRadius: '4px',
cursor: 'pointer',
fontFamily: theme.fontFamily,
transition: 'background-color 0.15s, color 0.15s',
}, onMouseEnter: (e) => {
e.target.style.backgroundColor = btnColor;
e.target.style.color = '#ffffff';
}, onMouseLeave: (e) => {
e.target.style.backgroundColor = 'transparent';
e.target.style.color = btnColor;
}, children: q }, i));
}) }))] }));
}