{
  "id": "agent-receptionist",
  "name": "Virtual Receptionist",
  "category": "agents",
  "tags": ["receptionist", "virtual assistant", "front desk", "agent"],
  "description": "Virtual receptionist panel with message queue, escalate button, and visitor log.",
  "triggers": ["receptionist", "virtual assistant", "front desk", "message queue"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "const AgentReceptionist = () => {\n  const [messages, setMessages] = React.useState([\n    { id: 1, from: 'John Doe', text: 'Appointment request for tomorrow 2pm', time: '10:23 AM', status: 'new' },\n    { id: 2, from: 'Sarah Lee', text: 'Question about billing', time: '9:45 AM', status: 'escalated' },\n    { id: 3, from: 'Mike Ross', text: 'Package delivery confirmation', time: '9:10 AM', status: 'resolved' }\n  ]);\n  const [visitorLog, setVisitorLog] = React.useState([\n    { id: 1, name: 'Alice Wong', time: '9:00 AM', purpose: 'Meeting' },\n    { id: 2, name: 'Bob Smith', time: '10:15 AM', purpose: 'Delivery' }\n  ]);\n  const [newVisitor, setNewVisitor] = React.useState('');\n  const [purpose, setPurpose] = React.useState('');\n\n  const handleEscalate = (id) => {\n    setMessages(msgs => msgs.map(m => m.id === id ? { ...m, status: 'escalated' } : m));\n  };\n\n  const handleResolve = (id) => {\n    setMessages(msgs => msgs.map(m => m.id === id ? { ...m, status: 'resolved' } : m));\n  };\n\n  const addVisitor = () => {\n    if (!newVisitor || !purpose) return;\n    setVisitorLog([{ id: Date.now(), name: newVisitor, time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), purpose }, ...visitorLog]);\n    setNewVisitor('');\n    setPurpose('');\n  };\n\n  const statusColor = (s) => s === 'new' ? '#2563eb' : s === 'escalated' ? '#dc2626' : '#16a34a';\n\n  return React.createElement('div', { style: { fontFamily: 'system-ui, sans-serif', padding: '16px', display: 'flex', flexDirection: 'column', gap: '16px', height: '100%', overflow: 'auto' } },\n    React.createElement('h3', { style: { margin: 0, fontSize: '16px', fontWeight: 600, color: '#111827' } }, 'Virtual Receptionist'),\n    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' } },\n      React.createElement('div', { style: { background: '#f9fafb', borderRadius: '8px', padding: '12px' } },\n        React.createElement('div', { style: { fontSize: '12px', fontWeight: 600, color: '#6b7280', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Message Queue'),\n        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },\n          messages.map(m => React.createElement('div', { key: m.id, style: { background: '#fff', borderRadius: '6px', padding: '10px', border: '1px solid #e5e7eb' } },\n            React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' } },\n              React.createElement('span', { style: { fontWeight: 600, fontSize: '13px', color: '#111827' } }, m.from),\n              React.createElement('span', { style: { fontSize: '11px', color: statusColor(m.status), fontWeight: 600, textTransform: 'uppercase' } }, m.status)\n            ),\n            React.createElement('div', { style: { fontSize: '12px', color: '#374151', marginBottom: '6px' } }, m.text),\n            React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },\n              React.createElement('span', { style: { fontSize: '11px', color: '#9ca3af' } }, m.time),\n              React.createElement('div', { style: { display: 'flex', gap: '6px' } },\n                m.status !== 'escalated' && React.createElement('button', { onClick: () => handleEscalate(m.id), style: { fontSize: '11px', padding: '4px 8px', borderRadius: '4px', border: 'none', background: '#fecaca', color: '#991b1b', cursor: 'pointer' } }, 'Escalate'),\n                m.status !== 'resolved' && React.createElement('button', { onClick: () => handleResolve(m.id), style: { fontSize: '11px', padding: '4px 8px', borderRadius: '4px', border: 'none', background: '#bbf7d0', color: '#166534', cursor: 'pointer' } }, 'Resolve')\n              )\n            )\n          ))\n        )\n      ),\n      React.createElement('div', { style: { background: '#f9fafb', borderRadius: '8px', padding: '12px', display: 'flex', flexDirection: 'column', gap: '12px' } },\n        React.createElement('div', { style: { fontSize: '12px', fontWeight: 600, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Visitor Log'),\n        React.createElement('div', { style: { display: 'flex', gap: '6px' } },\n          React.createElement('input', { value: newVisitor, onChange: e => setNewVisitor(e.target.value), placeholder: 'Name', style: { flex: 1, fontSize: '12px', padding: '6px', borderRadius: '4px', border: '1px solid #d1d5db' } }),\n          React.createElement('input', { value: purpose, onChange: e => setPurpose(e.target.value), placeholder: 'Purpose', style: { flex: 1, fontSize: '12px', padding: '6px', borderRadius: '4px', border: '1px solid #d1d5db' } }),\n          React.createElement('button', { onClick: addVisitor, style: { fontSize: '12px', padding: '6px 10px', borderRadius: '4px', border: 'none', background: '#2563eb', color: '#fff', cursor: 'pointer' } }, 'Add')\n        ),\n        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '6px', overflow: 'auto' } },\n          visitorLog.map(v => React.createElement('div', { key: v.id, style: { background: '#fff', borderRadius: '6px', padding: '8px', border: '1px solid #e5e7eb', display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },\n            React.createElement('div', null,\n              React.createElement('div', { style: { fontWeight: 600, fontSize: '13px', color: '#111827' } }, v.name),\n              React.createElement('div', { style: { fontSize: '11px', color: '#6b7280' } }, v.purpose)\n            ),\n            React.createElement('span', { style: { fontSize: '11px', color: '#9ca3af' } }, v.time)\n          ))\n        )\n      )\n    )\n  );\n};\nrender(<AgentReceptionist/>);",
  "placeholders": [{ "name": "REPLACE_WITH_COMPANY_NAME", "description": "Company name displayed in the receptionist header", "default": "Titan Corp" }]
}