is my code running ok? import React, { useState, useEffect, useContext, useRef } from 'react';
import { AuthContext } from '../AuthContext';
import { TextField, Button, Paper, Typography } from '@mui/material';
import SendIcon from '@mui/icons-material/Send';
import { styled } from '@mui/system';

// Define your custom styled components
const Root = styled('div')(({ theme }) => ({
  height: '100vh',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: theme.palette.background.default,
}));

const ChatContainer = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(4),
  textAlign: 'center',
  width: '400px',
  height: '500px',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',
  overflowY: 'auto',
}));

const Title = styled(Typography)(({ theme }) => ({
  marginBottom: theme.spacing(2),
}));

const MessageContainer = styled('div')({
  marginTop: 16,
  flexGrow: 1,
  display: 'flex',
  flexDirection: 'column',
  overflowY: 'auto',
});

const Message = styled(Typography)(({ sender, theme }) => ({
  alignSelf: sender === 'user' ? 'flex-end' : 'flex-start',
  backgroundColor:
    sender === 'user' ? theme.palette.primary.main : theme.palette.grey[200],
  color:
    sender === 'user'
      ? theme.palette.primary.contrastText
      : theme.palette.text.primary,
  padding: theme.spacing(1),
  borderRadius: theme.spacing(1),
  marginBottom: theme.spacing(1),
  maxWidth: '75%',
}));

const InputContainer = styled('div')(({ theme }) => ({
  display: 'flex',
  gap: theme.spacing(1),
  marginTop: theme.spacing(2),
}));

const TextInput = styled(TextField)(({ theme }) => ({
  flexGrow: 1,
}));

const SendButton = styled(Button)(({ theme }) => ({
  flexShrink: 0,
}));

function ChatPage() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const { currentUser } = useContext(AuthContext);

  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    if (messagesEndRef.current) {
      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const handleSend = async () => {
    if (input.trim() === '') return;
    const userMessage = { sender: 'user', text: input };
    setMessages((prev) => [...prev, userMessage]);

    // Prepare conversation history for the backend
    const conversationHistory = [];
    for (let i = 0; i < messages.length; i += 2) {
      const userMsg = messages[i]?.text || '';
      const assistantMsg = messages[i + 1]?.text || '';
      conversationHistory.push({ user: userMsg, assistant: assistantMsg });
    }
    // Add the latest user message without an assistant reply yet
    conversationHistory.push({ user: input, assistant: '' });

    try {
      // Call your Firebase Cloud Function
      const response = await fetch(
        'https://us-central1-mind-gardener.cloudfunctions.net/chatWithHuggingFace',
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ conversationHistory }),
        }
      );

      if (!response.ok) {
        const errorData = await response.json();
        console.error('Error response from Cloud Function:', errorData);
        throw new Error(errorData.error || 'Server error');
      }

      const result = await response.json();
      console.log('Response from Firebase Function:', result);

      const botReply = result.reply || 'No response from bot';

      const botMessage = { sender: 'bot', text: botReply };
      setMessages((prev) => [...prev, botMessage]);
    } catch (error) {
      console.error('Chatbot error:', error);
      setMessages((prev) => [
        ...prev,
        { sender: 'bot', text: 'Sorry, there was an error.' },
      ]);
    }

    setInput('');
  };

  return (
    <Root>
      <Title variant="h4">MindGarden</Title>
      <ChatContainer>
        <MessageContainer>
          {messages.map((msg, index) => (
            <Message key={index} sender={msg.sender}>
              {msg.text}
            </Message>
          ))}
          <div ref={messagesEndRef} />
        </MessageContainer>
        <InputContainer>
          <TextInput
            variant="outlined"
            placeholder="Type your message..."
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter') handleSend();
            }}
          />
          <SendButton variant="contained" color="primary" onClick={handleSend}>
            <SendIcon />
          </SendButton>
        </InputContainer>
      </ChatContainer>
    </Root>
  );
}

export default ChatPage;