plazbot
Version:
Official Plazbot SDK for creating AI agents for WhatsApp, portals, and developers.
53 lines (52 loc) • 3.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { usePlazbotContext } from '../../context/PlazbotContext';
import { AgentAvatar } from './AgentAvatar';
function ResetIcon() {
return (_jsxs("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), _jsx("path", { d: "M3 3v5h5" }), _jsx("path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" }), _jsx("path", { d: "M21 21v-5h-5" })] }));
}
export function AgentHeader({ agent, subtitle, showStatus = true, onReset, style }) {
const { theme } = usePlazbotContext();
const name = agent?.person?.name ?? agent?.name ?? 'Agente IA';
const role = subtitle ?? agent?.person?.role ?? '';
return (_jsxs("div", { style: {
display: 'flex',
alignItems: 'center',
gap: '8px',
padding: '8px 12px',
borderBottom: `1px solid ${theme.borderColor}`,
backgroundColor: theme.backgroundColor,
...style,
}, children: [_jsx(AgentAvatar, { name: name, color: agent?.color, icon: agent?.iconWidget }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: {
fontWeight: 600,
fontSize: theme.fontSize,
color: theme.textColor,
fontFamily: theme.fontFamily,
}, children: name }), role && (_jsx("div", { style: {
fontSize: theme.fontSizeSm,
color: theme.textSecondary,
fontFamily: theme.fontFamily,
marginTop: '1px',
}, children: role }))] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [showStatus && (_jsxs("div", { style: {
display: 'flex',
alignItems: 'center',
gap: '6px',
fontSize: theme.fontSizeSm,
color: theme.textSecondary,
fontFamily: theme.fontFamily,
}, children: [_jsx("span", { style: {
width: 6,
height: 6,
borderRadius: '50%',
backgroundColor: '#16a34a',
} }), "En linea"] })), onReset && (_jsx("button", { onClick: onReset, title: "Nueva conversacion", style: {
background: 'none',
border: 'none',
cursor: 'pointer',
padding: '4px',
color: theme.textSecondary,
borderRadius: '4px',
display: 'flex',
alignItems: 'center',
transition: 'color 0.15s',
}, onMouseEnter: (e) => { e.currentTarget.style.color = theme.textColor; }, onMouseLeave: (e) => { e.currentTarget.style.color = theme.textSecondary; }, children: _jsx(ResetIcon, {}) }))] })] }));
}