Untitled

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;