文章对话框CSS样式

import React, { useState } from 'react';

const App = () => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  const handleSend = () => {
    if (input.trim()) {
      setMessages([...messages, { text: input, sender: 'user' }]);
      setInput('');
      // Simulate AI response
      setTimeout(() => {
        setMessages([...messages, { text: 'This is a response from AI.', sender: 'ai' }]);
      }, 1000);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="max-w-4xl mx-auto">
        <div className="article-chat-container bg-white p-6 rounded-lg shadow-lg">
          <div className="article-chat-history h-96 overflow-y-auto p-4 bg-gray-50 rounded-lg mb-4">
            {messages.map((msg, index) => (
              <div key={index} className={`article-message ${msg.sender === 'user' ? 'user' : 'ai'}`}>
                <div className={`article-message-content ${msg.sender === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`}>
                  {msg.text}
                </div>
              </div>
            ))}
          </div>
          <div className="article-chat-input flex gap-2">
            <textarea
              className="flex-1 border border-gray-300 rounded-full p-3 resize-none"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder="Type your message..."
            />
            <button
              className="bg-blue-500 text-white rounded-full px-6 py-2 hover:bg-blue-600 transition-colors"
              onClick={handleSend}
            >
              Send
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;