70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import Message from '../Message';
|
|
import Input from '../Input';
|
|
import Button from '../Button';
|
|
|
|
export const ChatInterface: React.FC = () => {
|
|
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 (
|
|
<div className="flex flex-col h-full bg-maya-background rounded-lg border border-gray-200">
|
|
{/* Chat Header */}
|
|
<div className="bg-white px-4 py-3 border-b border-gray-200 rounded-t-lg">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-3 h-3 bg-maya-primary rounded-full"></div>
|
|
<h3 className="font-semibold text-gray-800">Soporte Banorte</h3>
|
|
<div className="w-2 h-2 bg-maya-success rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Messages Area */}
|
|
<div className="flex-1 p-4 overflow-y-auto">
|
|
{messages.map((msg) => (
|
|
<Message
|
|
key={msg.id}
|
|
text={msg.text}
|
|
isOwn={msg.isOwn}
|
|
timestamp={msg.timestamp}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Input Area */}
|
|
<div className="bg-white p-4 border-t border-gray-200 rounded-b-lg">
|
|
<div className="flex space-x-2">
|
|
<Input
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
placeholder="Escribe tu mensaje..."
|
|
className="flex-1"
|
|
onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
|
|
/>
|
|
<Button onClick={sendMessage} variant="primary">
|
|
Enviar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChatInterface |