plazbot
Version:
Official Plazbot SDK for creating AI agents for WhatsApp, portals, and developers.
55 lines (54 loc) • 2.85 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { usePlazbotContext } from '../../context/PlazbotContext';
import { resolveIcon } from '../../styles/icons';
export function GenericCard({ action, style }) {
const { theme, iconMode } = usePlazbotContext();
const [expanded, setExpanded] = useState(false);
const hasResult = action.result !== null && action.result !== undefined;
let preview = '';
try {
preview = typeof action.result === 'string'
? action.result
: JSON.stringify(action.result, null, 2);
}
catch {
preview = String(action.result);
}
const isLong = preview.length > 200;
return (_jsxs("div", { style: {
border: `1px solid ${theme.borderColor}`,
borderRadius: theme.borderRadius,
backgroundColor: theme.cardBg,
overflow: 'hidden',
animation: 'plazbot-scale-in 0.2s ease-out',
...style,
}, children: [_jsxs("div", { style: {
display: 'flex',
alignItems: 'center',
gap: '8px',
padding: '10px 14px',
borderBottom: hasResult ? `1px solid ${theme.borderColor}` : 'none',
fontSize: theme.fontSizeSm,
fontFamily: theme.fontFamily,
color: theme.textSecondary,
}, children: [resolveIcon('gear', iconMode) && _jsx("span", { style: { fontSize: '14px' }, children: resolveIcon('gear', iconMode) }), _jsx("span", { style: { fontWeight: 500, color: theme.textColor }, children: action.name ?? action.intent ?? 'Resultado' })] }), hasResult && (_jsxs("div", { style: { padding: '10px 14px' }, children: [_jsx("pre", { style: {
margin: 0,
fontSize: theme.fontSizeSm,
fontFamily: 'monospace',
color: theme.textColor,
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
maxHeight: expanded ? 'none' : '100px',
overflow: 'hidden',
}, children: preview }), isLong && (_jsx("button", { onClick: () => setExpanded(!expanded), style: {
marginTop: '6px',
background: 'none',
border: 'none',
color: theme.primaryColor,
fontSize: theme.fontSizeSm,
fontFamily: theme.fontFamily,
cursor: 'pointer',
padding: 0,
}, children: expanded ? 'Ver menos' : 'Ver mas' }))] }))] }));
}