plazbot
Version:
Official Plazbot SDK for creating AI agents for WhatsApp, portals, and developers.
38 lines (37 loc) • 2.94 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { usePlazbotContext } from '../../context/PlazbotContext';
import { resolveIcon } from '../../styles/icons';
function extractContact(result) {
if (!result || typeof result !== 'object')
return {};
return result;
}
export function ContactCard({ action, style }) {
const { theme, iconMode } = usePlazbotContext();
const contact = extractContact(action.result);
const name = contact.fullname ?? contact.name ?? 'Contacto';
return (_jsxs("div", { style: {
borderRadius: theme.borderRadius,
backgroundColor: theme.cardBg,
border: `1px solid ${theme.borderColor}`,
overflow: 'hidden',
fontFamily: theme.fontFamily,
animation: 'plazbot-scale-in 0.2s ease-out',
...style,
}, children: [_jsxs("div", { style: {
display: 'flex',
alignItems: 'center',
gap: '8px',
padding: '10px 14px',
borderBottom: `1px solid ${theme.borderColor}`,
fontSize: theme.fontSizeSm,
color: theme.textSecondary,
}, children: [resolveIcon('contact', iconMode) && _jsx("span", { style: { fontSize: '14px' }, children: resolveIcon('contact', iconMode) }), _jsx("span", { style: { fontWeight: 500, color: theme.textColor }, children: "Contacto" })] }), _jsxs("div", { style: { padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: '6px' }, children: [_jsx("div", { style: { fontWeight: 600, fontSize: theme.fontSize, color: theme.textColor }, children: name }), (contact.email || contact.phone || contact.cellphone) && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '3px', fontSize: theme.fontSizeSm, color: theme.textSecondary }, children: [contact.email && _jsxs("span", { children: [resolveIcon('mail', iconMode), " ", contact.email] }), (contact.phone ?? contact.cellphone) && _jsxs("span", { children: [resolveIcon('phone', iconMode), " ", contact.phone ?? contact.cellphone] })] })), contact.tags && contact.tags.length > 0 && (_jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '4px', marginTop: '4px' }, children: contact.tags.map((tag, i) => (_jsx("span", { style: {
padding: '2px 8px',
fontSize: '11px',
borderRadius: theme.borderRadiusSm,
backgroundColor: theme.surfaceColor,
color: theme.textSecondary,
border: `1px solid ${theme.borderColor}`,
}, children: tag }, i))) })), contact.stage && (_jsxs("div", { style: { fontSize: theme.fontSizeSm, color: theme.primaryColor, marginTop: '2px' }, children: ["Fase: ", contact.stage] }))] })] }));
}