plazbot
Version:
Official Plazbot SDK for creating AI agents for WhatsApp, portals, and developers.
149 lines (148 loc) • 7.61 kB
JavaScript
import { createElement } from 'react';
const emojiMap = {
contact: '\u{1F464}',
mail: '\u2709',
phone: '\u{1F4F1}',
calendar: '\u{1F4C5}',
clock: '\u{1F552}',
availability: '\u{1F4C5}',
tag: '\u{1F3F7}',
assign: '\u{1F464}',
stage: '\u{1F4CB}',
segmentation: '\u{1F4CA}',
solved: '\u2705',
transfer: '\u{1F91D}',
globe: '\u{1F310}',
gear: '\u2699',
file: '\u{1F4C4}',
source: '\u{1F4C4}',
check: '\u2713',
attach: '\u{1F4CE}',
send: '\u27A4',
};
// ── SVG icon helpers ────────────────────────────────────────────────
const svgProps = {
width: 16,
height: 16,
viewBox: '0 0 24 24',
fill: 'none',
stroke: 'currentColor',
strokeWidth: 2,
strokeLinecap: 'round',
strokeLinejoin: 'round',
style: { display: 'inline-block', verticalAlign: 'middle', flexShrink: 0 },
};
function svg(...children) {
return createElement('svg', svgProps, ...children);
}
function path(d) {
return createElement('path', { d });
}
function circle(cx, cy, r) {
return createElement('circle', { cx, cy, r });
}
function line(x1, y1, x2, y2) {
return createElement('line', { x1, y1, x2, y2 });
}
function rect(x, y, w, h, rx) {
return createElement('rect', { x, y, width: w, height: h, rx });
}
function polyline(points) {
return createElement('polyline', { points });
}
// ── SVG icon map ────────────────────────────────────────────────────
const svgIconMap = {
// User
contact: svg(path('M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'), circle(12, 7, 4)),
// Mail
mail: svg(rect(2, 4, 20, 16, 2), polyline('2,4 12,13 22,4')),
// Phone
phone: svg(path('M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z')),
// Calendar
calendar: svg(rect(3, 4, 18, 18, 2), line(16, 2, 16, 6), line(8, 2, 8, 6), line(3, 10, 21, 10)),
// Clock
clock: svg(circle(12, 12, 10), polyline('12,6 12,12 16,14')),
// CalendarCheck
availability: svg(rect(3, 4, 18, 18, 2), line(16, 2, 16, 6), line(8, 2, 8, 6), line(3, 10, 21, 10), path('M9 16l2 2 4-4')),
// Tag
tag: svg(path('M12 2l-7 7v5l7 7 10-10V6a4 4 0 0 0-4-4h-6z'), circle(15.5, 8.5, 1.5)),
// UserPlus
assign: svg(path('M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'), circle(8.5, 7, 4), line(20, 8, 20, 14), line(23, 11, 17, 11)),
// ClipboardList
stage: svg(path('M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'), rect(8, 2, 8, 4, 1), line(12, 11, 16, 11), line(12, 16, 16, 16), line(8, 11, 8.01, 11), line(8, 16, 8.01, 16)),
// BarChart2
segmentation: svg(line(18, 20, 18, 10), line(12, 20, 12, 4), line(6, 20, 6, 14)),
// CheckCircle
solved: svg(path('M22 11.08V12a10 10 0 1 1-5.93-9.14'), polyline('22,4 12,14.01 9,11.01')),
// ArrowRightLeft
transfer: svg(polyline('8,3 4,7 8,11'), line(4, 7, 20, 7), polyline('16,21 20,17 16,13'), line(20, 17, 4, 17)),
// Globe
globe: svg(circle(12, 12, 10), line(2, 12, 22, 12), path('M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z')),
// Settings
gear: svg(circle(12, 12, 3), path('M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z')),
// FileText
file: svg(path('M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'), polyline('14,2 14,8 20,8'), line(16, 13, 8, 13), line(16, 17, 8, 17), polyline('10,9 9,9 8,9')),
// FileText (same)
source: svg(path('M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'), polyline('14,2 14,8 20,8'), line(16, 13, 8, 13), line(16, 17, 8, 17), polyline('10,9 9,9 8,9')),
// Check
check: svg(polyline('20,6 9,17 4,12')),
// Paperclip
attach: svg(path('M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48')),
// Send (ArrowUp)
send: svg(line(12, 19, 12, 5), polyline('5,12 12,5 19,12')),
};
const widgetSvgProps = (size) => ({
width: size,
height: size,
viewBox: '0 0 24 24',
fill: 'none',
stroke: 'currentColor',
strokeWidth: 2,
strokeLinecap: 'round',
strokeLinejoin: 'round',
});
export function widgetIconSVG(icon, size) {
const props = widgetSvgProps(size);
switch (icon) {
// CPU / Bot
case 'robot':
return createElement('svg', props, rect(4, 4, 16, 16, 2), line(9, 9, 9, 9.01), line(15, 9, 15, 9.01), path('M8 14s1.5 2 4 2 4-2 4-2'), line(12, 2, 12, 4));
// MessageSquare
case 'message':
return createElement('svg', props, path('M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'));
// Headphones
case 'support':
return createElement('svg', props, path('M3 18v-6a9 9 0 0 1 18 0v6'), path('M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3z'), path('M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'));
// HelpCircle
case 'qa':
return createElement('svg', props, circle(12, 12, 10), path('M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'), line(12, 17, 12.01, 17));
// MessageCircle
case 'chat':
return createElement('svg', props, path('M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'));
// Smile
case 'smile':
return createElement('svg', props, circle(12, 12, 10), path('M8 14s1.5 2 4 2 4-2 4-2'), line(9, 9, 9.01, 9), line(15, 9, 15.01, 9));
// Mic
case 'voice':
return createElement('svg', props, path('M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'), path('M19 10v2a7 7 0 0 1-14 0v-2'), line(12, 19, 12, 23), line(8, 23, 16, 23));
// MessagesSquare
case 'uservoice':
return createElement('svg', props, path('M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'), line(8, 9, 16, 9), line(8, 13, 14, 13));
default:
return null;
}
}
// ── Resolver ────────────────────────────────────────────────────────
export function resolveIcon(key, mode) {
if (mode === 'none')
return null;
if (mode === 'svg')
return svgIconMap[key] ?? null;
if (mode === 'emoji')
return emojiMap[key] ?? null;
// Mapa custom: usa el custom si existe, sino fallback a svg
if (typeof mode === 'object') {
return mode[key] ?? svgIconMap[key] ?? null;
}
return svgIconMap[key] ?? null;
}