29 lines
2.1 KiB
JavaScript
29 lines
2.1 KiB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { useState } from 'react';
|
|
import Message from '../Message';
|
|
import Input from '../Input';
|
|
import Button from '../Button';
|
|
export const ChatInterface = () => {
|
|
const [message, setMessage] = useState('');
|
|
const [messages, setMessages] = useState([
|
|
{ id: 1, text: '¡Hola! ¿En qué puedo ayudarte?', isOwn: false, timestamp: '10:00' },
|
|
{ id: 2, text: 'Me gustaría información sobre mis inversiones', isOwn: true, timestamp: '10:01' },
|
|
]);
|
|
const sendMessage = () => {
|
|
if (message.trim()) {
|
|
setMessages([
|
|
...messages,
|
|
{
|
|
id: messages.length + 1,
|
|
text: message,
|
|
isOwn: true,
|
|
timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
|
}
|
|
]);
|
|
setMessage('');
|
|
}
|
|
};
|
|
return (_jsxs("div", { className: "flex flex-col h-full bg-maya-background rounded-lg border border-gray-200", children: [_jsx("div", { className: "bg-white px-4 py-3 border-b border-gray-200 rounded-t-lg", children: _jsxs("div", { className: "flex items-center space-x-3", children: [_jsx("div", { className: "w-3 h-3 bg-maya-primary rounded-full" }), _jsx("h3", { className: "font-semibold text-gray-800", children: "Soporte Banorte" }), _jsx("div", { className: "w-2 h-2 bg-maya-success rounded-full" })] }) }), _jsx("div", { className: "flex-1 p-4 overflow-y-auto", children: messages.map((msg) => (_jsx(Message, { text: msg.text, isOwn: msg.isOwn, timestamp: msg.timestamp }, msg.id))) }), _jsx("div", { className: "bg-white p-4 border-t border-gray-200 rounded-b-lg", children: _jsxs("div", { className: "flex space-x-2", children: [_jsx(Input, { value: message, onChange: (e) => setMessage(e.target.value), placeholder: "Escribe tu mensaje...", className: "flex-1", onKeyPress: (e) => e.key === 'Enter' && sendMessage() }), _jsx(Button, { onClick: sendMessage, variant: "primary", children: "Enviar" })] }) })] }));
|
|
};
|
|
export default ChatInterface;
|