css
++++++++++++++++++++
.modal-content {
width: 300px;
max-height: 400px;
overflow: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.chat-window {
display: flex;
flex-direction: column;
height: 100%;
}
.message-container {
flex-grow: 1;
overflow-y: auto;
margin-bottom: 10px;
}
.message {
margin-bottom: 10px;
}
.question {
font-weight: bold;
}
.input-form {
display: flex;
gap: 10px;
}
.input-field {
flex-grow: 1;
padding: 5px;
}
.send-button {
padding: 5px 10px;
background: #007bff;
color: white;
border: none;
cursor: pointer;
}
.send-button:hover {
background-color: #0056b3;
}
tsx file
++++++++++++++++++++++++
"use client"
import React, { useState } from 'react';
import { FiMessageSquare } from 'react-icons/fi';
import Modal from 'react-modal';
import './ChatButton.css';
const ChatButton: React.FC = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [messages, setMessages] = useState<{ question: string; answer: string }[]>([]);
const [inputValue, setInputValue] = useState('');
const handleToggleModal = () => {
setIsModalOpen((prevState) => !prevState);
};
const handleSubmitMessage = (e: React.FormEvent) => {
e.preventDefault();
if (inputValue.trim() !== '') {
setMessages((prevMessages) => [
...prevMessages,
{ question: inputValue, answer: 'Placeholder Answer' },
]);
setInputValue('');
}
};
return (
<>
<button className="chat-button" onClick={handleToggleModal}>
<FiMessageSquare size={24} />
</button>
{isModalOpen && (
<Modal
isOpen={true}
onRequestClose={handleToggleModal}
contentLabel="Chat Window"
className="modal-content"
overlayClassName="modal-overlay"
>
<div className="chat-window">
<h2>Chat Window</h2>
<div className="message-container">
{messages.map((message, index) => (
<div key={index} className="message">
<p className="question">{message.question}</p>
<p className="answer">{message.answer}</p>
</div>
))}
</div>
<form className="input-form" onSubmit={handleSubmitMessage}>
<input
type="text"
className="input-field"
placeholder="Enter your question"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button type="submit" className="send-button">
Send
</button>
</form>
</div>
</Modal>
)}
</>
);
};
export default ChatButton;