import React, { useState, useEffect, useRef } from 'react';
import styled, { keyframes } from 'styled-components';

const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
`;

const Container = styled.div`
  font-family: 'Arial', sans-serif;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
`;

const Header = styled.h1`
  text-align: center;
  color: #333;
`;

const ChatWindow = styled.div`
  height: 400px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  background-color: white;
`;

const Message = styled.div`
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  max-width: 80%;
  animation: ${fadeIn} 0.3s ease-out;

  ${props => props.isUser ? `
    background-color: #007bff;
    color: white;
    align-self: flex-end;
    margin-left: auto;
  ` : `
    background-color: #f1f0f0;
    color: #333;
  `}
`;

const Input = styled.input`
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 10px;
`;

const Button = styled.button`
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  margin-top: 10px;
  cursor: pointer;
  transition: background-color 0.3s;

  &:hover {
    background-color: #0056b3;
  }
`;

const legalResponses = {
  "contract": "A contract is a legally binding agreement between two or more parties. It typically involves an offer, acceptance, and consideration.",
  "lawsuit": "A lawsuit is a legal proceeding initiated by one party against another in a court of law.",
  "copyright": "Copyright is a form of intellectual property protection granted to original works of authorship, including literary, dramatic, musical, and artistic works.",
  "patent": "A patent is a government-granted right that gives an inventor the exclusive right to manufacture, use, and sell their invention for a specific period.",
  "trademark": "A trademark is a symbol, word, or phrase used to identify and distinguish the source of goods or services of one party from those of others.",
  "default": "I'm sorry, but I don't have specific information about that legal topic. Please consult with a qualified attorney for professional legal advice."
};

const LegalAIChatbot = () => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const chatWindowRef = useRef(null);

  useEffect(() => {
    setMessages([{ text: "Hello! I'm a legal AI chatbot. How can I assist you with legal information today?", isUser: false }]);
  }, []);

  useEffect(() => {
    if (chatWindowRef.current) {
      chatWindowRef.current.scrollTop = chatWindowRef.current.scrollHeight;
    }
  }, [messages]);

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  const handleSend = () => {
    if (input.trim() === '') return;

    setMessages(prev => [...prev, { text: input, isUser: true }]);
    
    setTimeout(() => {
      const botResponse = getBotResponse(input);
      setMessages(prev => [...prev, { text: botResponse, isUser: false }]);
    }, 500);

    setInput('');
  };

  const getBotResponse = (userMessage) => {
    const lowercaseMessage = userMessage.toLowerCase();
    for (const [keyword, response] of Object.entries(legalResponses)) {
      if (lowercaseMessage.includes(keyword)) {
        return response;
      }
    }
    return legalResponses.default;
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      handleSend();
    }
  };

  return (
    <Container>
      <Header>Legal AI Chatbot</Header>
      <ChatWindow ref={chatWindowRef}>
        {messages.map((message, index) => (
          <Message key={index} isUser={message.isUser}>
            {message.text}
          </Message>
        ))}
      </ChatWindow>
      <Input
        type="text"
        value={input}
        onChange={handleInputChange}
        onKeyPress={handleKeyPress}
        placeholder="Ask a legal question..."
      />
      <Button onClick={handleSend}>Send</Button>
    </Container>
  );
};

export default LegalAIChatbot;
</ant_artifact>

This React-based Legal AI Chatbot offers several improvements over the previous HTML/JS version:

1. Modern UI: The chatbot now has a more polished look with styled-components for CSS-in-JS styling.

2. Improved Responsiveness: The chat window automatically scrolls to the bottom when new messages are added.

3. Animations: Messages fade in with a subtle animation for a more dynamic feel.

4. Better State Management: React's useState hook is used to manage the chat messages and input state.

5. Improved Code Structure: The code is now more modular and easier to maintain.

To use this React component:

1. Make sure you have React and styled-components installed in your project.
2. Copy this code into a new file, e.g., `LegalAIChatbot.js`.
3. Import and use the component in your main App or another component:

```jsx
import LegalAIChatbot from './LegalAIChatbot';

function App() {
  return (
    <div className="App">
      <LegalAIChatbot />
    </div>
  );
}
```

This chatbot still uses the same simple keyword-based response system as before. To make it more advanced, you could:

1. Implement a more sophisticated NLP system for understanding user queries.
2. Integrate with a backend API for more comprehensive legal information.
3. Add user authentication to personalize responses.
4. Implement a chat history feature.

Would you like me to explain any part of this React component in more detail or suggest ways to further enhance its functionality?