plazbot
Version:
Official Plazbot SDK for creating AI agents for WhatsApp, portals, and developers.
89 lines (88 loc) • 4.24 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useRef, useCallback } from 'react';
import { usePlazbotContext } from '../../context/PlazbotContext';
import { resolveIcon } from '../../styles/icons';
export function ChatInput({ onSend, disabled = false, placeholder = 'Escribe tu mensaje...', allowAttachments = false, style, }) {
const { theme, iconMode } = usePlazbotContext();
const [text, setText] = useState('');
const textareaRef = useRef(null);
const fileInputRef = useRef(null);
const handleSend = useCallback(() => {
const trimmed = text.trim();
if (!trimmed || disabled)
return;
onSend(trimmed);
setText('');
if (textareaRef.current) {
textareaRef.current.style.height = 'auto';
}
}, [text, disabled, onSend]);
const handleKeyDown = (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSend();
}
};
const handleInput = () => {
const el = textareaRef.current;
if (!el)
return;
el.style.height = 'auto';
el.style.height = Math.min(el.scrollHeight, 100) + 'px';
};
const handleFileChange = (e) => {
const file = e.target.files?.[0];
if (!file)
return;
const reader = new FileReader();
reader.onload = () => {
const url = reader.result;
onSend(`[Archivo: ${file.name}]`, url);
};
reader.readAsDataURL(file);
e.target.value = '';
};
return (_jsxs("div", { style: {
display: 'flex',
alignItems: 'flex-end',
gap: '6px',
padding: '8px 12px',
borderTop: `1px solid ${theme.borderColor}`,
backgroundColor: theme.backgroundColor,
...style,
}, children: [allowAttachments && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => fileInputRef.current?.click(), disabled: disabled, style: {
background: 'none',
border: 'none',
cursor: disabled ? 'not-allowed' : 'pointer',
padding: '6px',
fontSize: '18px',
color: theme.textSecondary,
opacity: disabled ? 0.5 : 1,
flexShrink: 0,
}, "aria-label": "Adjuntar archivo", children: resolveIcon('attach', iconMode) ?? '\u{1F4CE}' }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*,.pdf", onChange: handleFileChange, style: { display: 'none' } })] })), _jsx("textarea", { ref: textareaRef, value: text, onChange: (e) => setText(e.target.value), onKeyDown: handleKeyDown, onInput: handleInput, placeholder: placeholder, disabled: disabled, rows: 1, "data-plazbot-input": "", style: {
flex: 1,
resize: 'none',
border: `1px solid ${theme.inputBorder}`,
borderRadius: '6px',
padding: '8px 12px',
fontSize: theme.fontSize,
fontFamily: theme.fontFamily,
color: theme.textColor,
backgroundColor: theme.inputBg,
outline: 'none',
maxHeight: '100px',
lineHeight: 1.4,
opacity: disabled ? 0.6 : 1,
overflow: 'hidden',
} }), _jsx("button", { onClick: handleSend, disabled: disabled || !text.trim(), style: {
background: 'none',
border: 'none',
cursor: disabled || !text.trim() ? 'not-allowed' : 'pointer',
padding: '6px',
fontSize: '16px',
color: text.trim() ? theme.primaryColor : theme.textSecondary,
opacity: disabled ? 0.5 : 1,
flexShrink: 0,
transition: 'color 0.15s',
}, "aria-label": "Enviar mensaje", children: resolveIcon('send', iconMode) ?? '\u27A4' })] }));
}