Untitled
unknown
plain_text
a year ago
2.9 kB
1
Indexable
Never
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;