79 lines
2.3 KiB
JavaScript
79 lines
2.3 KiB
JavaScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import './ChatSidebar.css';
|
|
|
|
const ChatSidebar = ({ isOpen, onClose }) => {
|
|
|
|
const [messages, setMessages] = useState([
|
|
{ id: 1, text: 'Olá! Como podemos ajudar você hoje?', sender: 'support' }
|
|
]);
|
|
const [inputValue, setInputValue] = useState('');
|
|
const messagesEndRef = useRef(null);
|
|
const sidebarClassName = `chat-sidebar ${isOpen ? 'open' : ''}`;
|
|
const scrollToBottom = () => {
|
|
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
};
|
|
|
|
useEffect(() => {
|
|
scrollToBottom();
|
|
}, [messages]);
|
|
|
|
const handleSendMessage = () => {
|
|
if (inputValue.trim() === '') return;
|
|
const newMessage = {
|
|
id: messages.length + 1,
|
|
text: inputValue,
|
|
sender: 'user'
|
|
};
|
|
setMessages(currentMessages => [...currentMessages, newMessage]);
|
|
setInputValue('');
|
|
setTimeout(() => {
|
|
const supportReply = {
|
|
id: messages.length + 2,
|
|
text: 'Obrigado por sua mensagem. Um de nossos atendentes responderá em breve.',
|
|
sender: 'support'
|
|
};
|
|
setMessages(currentMessages => [...currentMessages, supportReply]);
|
|
}, 1000);
|
|
};
|
|
const handleKeyPress = (event) => {
|
|
if (event.key === 'Enter') {
|
|
handleSendMessage();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={sidebarClassName}>
|
|
<div className="chat-header">
|
|
<h3>Suporte Online</h3>
|
|
<button onClick={onClose} className="chat-close-button">X</button>
|
|
</div>
|
|
|
|
<div className="chat-messages">
|
|
{/* Mapeia a lista de mensagens e cria um balão para cada uma */}
|
|
{messages.map(message => (
|
|
<div
|
|
key={message.id}
|
|
className={`message ${message.sender === 'user' ? 'sent' : 'received'}`}
|
|
>
|
|
{message.text}
|
|
</div>
|
|
))}
|
|
{/* Elemento invisível no final para o scroll automático */}
|
|
<div ref={messagesEndRef} />
|
|
</div>
|
|
|
|
<div className="chat-input-area">
|
|
<input
|
|
type="text"
|
|
placeholder="Digite sua mensagem..."
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
onKeyPress={handleKeyPress}
|
|
/>
|
|
<button onClick={handleSendMessage}>Enviar</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChatSidebar; |