here is my dashboard front-end:
import React, { useState, useEffect, useContext } from 'react';
import { AuthContext } from '../AuthContext';
import { auth } from '../firebase';
import { signOut } from 'firebase/auth';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import {
  Typography,
  Button,
} from '@mui/material';
import { styled } from '@mui/system';
import UserActivityLogs from './UserActivityLogs'; // Import UserActivityLogs component
import UserCard from './UserCard'; // Import UserCard component

// Define your custom styled components
const Root = styled('div')(({ theme }) => ({
  padding: theme.spacing(3),
}));

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

const LogoutButton = styled(Button)(({ theme }) => ({
  marginBottom: theme.spacing(2),
  float: 'right',
}));

function DashboardPage() {
  const [usersData, setUsersData] = useState([]);
  const [activityLogs, setActivityLogs] = useState([]); // State for activity logs
  const { currentUser } = useContext(AuthContext);
  const navigate = useNavigate();

  useEffect(() => {
    if (!currentUser) {
      navigate('/');
      return;
    }

    // Fetch users data and activity logs from backend
    const fetchData = async () => {
      try {
        const token = await currentUser.getIdToken();

        const [usersResponse, logsResponse] = await Promise.all([
          axios.get('/api/users', {
            headers: { Authorization: `Bearer ${token}` },
          }),
          axios.get('/api/activityLogs', {
            headers: { Authorization: `Bearer ${token}` },
          }),
        ]);

        setUsersData(usersResponse.data);
        setActivityLogs(logsResponse.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, [currentUser, navigate]);

  const handleLogout = () => {
    signOut(auth)
      .then(() => {
        navigate('/');
      })
      .catch((error) => {
        console.error('Error during sign out:', error);
      });
  };

  return (
    <Root>
      <Title variant="h4">Psychologist Dashboard</Title>
      <LogoutButton variant="outlined" color="secondary" onClick={handleLogout}>
        Logout
      </LogoutButton>

      {/* User Activity Logs Section */}
      <UserActivityLogs logs={activityLogs} />

      {/* Users List */}
      {usersData.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}
    </Root>
  );
}

export default DashboardPage;

and this is my backend:
/* eslint-disable max-len */
const functions = require("firebase-functions");
const fetch = require("node-fetch");

// Firebase Cloud Function to handle chatbot interaction using OpenAI API
exports.chatWithOpenAI = functions.https.onRequest(async (req, res) => {
  // Set CORS headers to allow cross-origin requests
  res.set("Access-Control-Allow-Origin", "*");
  res.set("Access-Control-Allow-Headers", "Content-Type");

  // Handle preflight request (for CORS)
  if (req.method === "OPTIONS") {
    res.status(204).send("");
    return;
  }

  // Ensure only POST requests are accepted
  if (req.method !== "POST") {
    res.status(405).send({error: "Only POST requests are accepted"});
    return;
  }

  try {
    const {conversationHistory} = req.body;
    console.log("Received conversationHistory:", conversationHistory);

    // Validate conversationHistory
    if (!Array.isArray(conversationHistory)) {
      res.status(400).send({error: "\"conversationHistory\" must be an array"});
      return;
    }

    // Get OpenAI API key from Firebase environment variables
    const apiKey = functions.config().openai.apikey;

    if (!apiKey) {
      console.error("OpenAI API key is not configured.");
      res.status(500).send({error: "OpenAI API key is not configured"});
      return;
    }

    // System prompt to guide the assistant
    const systemPrompt = `You are a compassionate and skilled mental health assistant trained in Cognitive Behavioral Therapy (CBT) and mindfulness practices. Your mission is to support users in identifying, restructuring, and challenging negative thoughts through a natural, private conversation, similar to talking with a trusted friend.

**Guidelines:**

1. **Warm and Empathetic Tone:** Maintain a friendly, understanding, and non-judgmental manner. Ensure your responses are brief, clear, and resemble everyday human conversation.

2. **CBT Techniques:**
   - **Identify Negative Thoughts:** Help users recognize and articulate their negative thoughts.
   - **Explore Underlying Beliefs:** Encourage users to delve deeper into the beliefs driving their negative thoughts.
   - **Challenge and Restructure:** Assist users in examining the validity of their thoughts by considering real-life evidence and alternative perspectives.

3. **Mindfulness Integration:**
   - **Present Moment Awareness:** Guide users to focus on the here and now when appropriate.
   - **Breathing Exercises:** Suggest simple mindfulness practices, such as deep breathing, to help users center themselves.

4. **Step-by-Step Support:**
   - **Progressive Solutions:** Introduce coping strategies and solutions gradually to avoid overwhelming the user.
   - **Actionable Steps:** Break down information into manageable, practical actions that users can implement.

5. **Encourage Self-Reflection:**
   - **Open-Ended Questions:** Pose questions that prompt users to reflect on their feelings and thoughts more deeply.
   - **Active Listening:** Acknowledge user feelings and validate their experiences to foster a sense of understanding.

6. **Concise Responses:**
   - **Avoid Lengthy Paragraphs:** Keep replies short and to the point to facilitate a smooth and engaging conversation.
   - **Clear and Direct Language:** Use straightforward language to ensure clarity and ease of understanding.

7. **Safety and Boundaries:**
   - **Recognize Distress Signals:** Be attentive to signs of severe distress or mentions of self-harm.
   - **Encourage Professional Help:** Prompt users to seek professional assistance when necessary, ensuring their safety is prioritized.

**Example Interaction:**

*User:* I've been feeling really overwhelmed and can't stop thinking about my failures.

*Assistant:* I'm sorry you're feeling this way. Can you share more about these thoughts of failure?

*User:* I keep thinking I messed up that important presentation at work.

*Assistant:* That sounds stressful. What evidence do you have that supports or contradicts this thought?

*User:* Well, my manager actually praised my effort afterwards.

*Assistant:* That's a positive sign! How can we view the presentation more balanced, considering both the feedback and your feelings?

*User:* Maybe I focused too much on one part and overlooked others, but overall it was well-received.

*Assistant:* It sounds like you did better than you initially thought. How can you remind yourself of this next time you start feeling overwhelmed by negative thoughts?

*User:* I could write down the positive feedback and review it when I feel down.

*Assistant:* That’s a great idea. Keeping a list of positive feedback can help you stay balanced. Would you like to discuss ways to implement this?

---
\n\n`;

    // Function to summarize conversation if it exceeds a certain number of turns
    const summarizeConversation = async (messages) => {
      const summaryPrompt = `Summarize the following conversation into a concise summary (3-5 sentences) that captures the main points and context:

${messages.map((turn) => `${turn.role === "user" ? "User" : "Assistant"}: ${turn.content}`).join("\n")}

Summary:`;

      const summaryPayload = {
        model: "gpt-4", // Corrected model name
        messages: [
          {role: "system", content: "You are an assistant that summarizes conversations concisely."},
          {role: "user", content: summaryPrompt},
        ],
        max_tokens: 150,
        temperature: 0.5,
      };

      const summaryResponse = await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
          "Authorization": `Bearer ${apiKey}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify(summaryPayload),
      });

      if (!summaryResponse.ok) {
        const errorData = await summaryResponse.json();
        console.error("Error summarizing conversation:", JSON.stringify(errorData, null, 2));
        throw new Error("Failed to summarize conversation");
      }

      const summaryData = await summaryResponse.json();
      return summaryData.choices[0].message.content.trim();
    };

    // Transform conversationHistory into OpenAI's message format
    let messages = [
      {role: "system", content: systemPrompt},
    ];

    if (conversationHistory.length > 0) {
      conversationHistory.forEach((turn) => {
        if (turn.sender === "user") {
          messages.push({role: "user", content: turn.text});
        } else if (turn.sender === "bot") {
          messages.push({role: "assistant", content: turn.text});
        }
      });
    }

    // Optionally summarize if conversation is too long
    const MAX_TURNS = 40; // Adjust based on token limits and requirements (each turn has 2 messages: user + assistant)
    if (messages.length > MAX_TURNS) {
      // Extract the last MAX_TURNS messages
      const recentMessages = messages.slice(-MAX_TURNS);
      const summary = await summarizeConversation(recentMessages);
      // Reset messages with system prompt and summary
      messages = [
        {role: "system", content: systemPrompt},
        {role: "user", content: `Summary of previous conversation: ${summary}`},
      ];
    }

    console.log("Constructed messages array:", messages);

    // Create the payload for OpenAI API
    const payload = {
      model: "gpt-4", // Corrected model name
      messages: messages,
      max_tokens: 150, // Limit the length of the response
      temperature: 0.7, // Control creativity
      top_p: 0.9, // Sampling method for diverse responses
      n: 1, // Number of responses to generate
      stop: null, // Let the model decide when to stop
    };

    // OpenAI API endpoint
    const OPENAI_ENDPOINT = "https://api.openai.com/v1/chat/completions";

    // Send the request to OpenAI
    const response = await fetch(OPENAI_ENDPOINT, {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${apiKey}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(payload),
    });

    if (!response.ok) {
      const errorData = await response.json();
      console.error("Error from OpenAI API:", JSON.stringify(errorData, null, 2));
      res.status(response.status).send({error: "Error from OpenAI API", details: errorData});
      return;
    }

    // Parse the response from OpenAI
    const data = await response.json();
    console.log("Data from OpenAI API:", JSON.stringify(data, null, 2));

    // Extract assistant's reply
    const assistantReply = data.choices[0].message.content.trim();

    // Update the latest conversation turn with assistant reply
    if (conversationHistory.length > 0) {
      // Find the last user message without a bot reply
      for (let i = conversationHistory.length - 1; i >= 0; i--) {
        if (!conversationHistory[i].bot) {
          conversationHistory[i].bot = assistantReply;
          break;
        }
      }
    }

    // Optionally, you can save or log the updated conversationHistory here

    // Send the assistant's reply back to the client
    res.status(200).send({reply: assistantReply});
  } catch (error) {
    console.error("Error in Cloud Function:", error);
    res.status(500).send({error: "Internal server error"});
  }
});



please add the necessary functions and functionalities needed in my backend and provide the full code.

additional information:
i am using realtime database.
and this is my chatpage.js provided for more information:
import React, { useState, useEffect, useContext, useRef } from 'react';
import { AuthContext } from '../AuthContext';
import { ref, get, update, push, set, remove } from 'firebase/database';
import { db } from '../firebase';
import {
  TextField,
  Button,
  Paper,
  Typography,
  List,
  ListItem,
  Divider,
  IconButton,
  Avatar,
  Menu,
  MenuItem,
  Badge,
  Switch,
  CircularProgress, // Import CircularProgress for loading indicator
} from '@mui/material';
import SendIcon from '@mui/icons-material/Send';
import EditIcon from '@mui/icons-material/Edit';
import SaveIcon from '@mui/icons-material/Save';
import DeleteIcon from '@mui/icons-material/Delete';
import LogoutIcon from '@mui/icons-material/Logout';
import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';
import { ThemeProvider, createTheme, CssBaseline } from '@mui/material';
import { styled } from '@mui/system';
import { useNavigate } from 'react-router-dom'; // Import useNavigate to handle redirection

const Root = styled('div')(({ theme }) => ({
  height: '100vh',
  display: 'flex',
  flexDirection: 'column',
}));

const Header = styled('div')(({ theme }) => ({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  padding: theme.spacing(2),
  backgroundColor: theme.palette.primary.main,
  color: theme.palette.primary.contrastText,
}));

const Sidebar = styled('div')(({ theme }) => ({
  width: '250px',
  padding: theme.spacing(2),
  backgroundColor: theme.palette.background.paper,
  borderRight: `1px solid ${theme.palette.divider}`,
  overflowY: 'auto',
}));

const ChatContainer = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(4),
  textAlign: 'left',
  width: '100%',
  height: '100%',
  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,
}));

const UserAvatar = styled(Avatar)(({ theme }) => ({
  marginRight: theme.spacing(2),
}));

const UserStatus = styled('div')(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
}));

function ChatPage() {
  const [sessions, setSessions] = useState([]);
  const [currentSession, setCurrentSession] = useState(null);
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [editingSession, setEditingSession] = useState(null);
  const [sessionName, setSessionName] = useState('');
  const { currentUser } = useContext(AuthContext);
  const { signOut } = useContext(AuthContext); // Destructure signOut separately
  const [isSending, setIsSending] = useState(false);
  const [isCreatingSession, setIsCreatingSession] = useState(false);
  const messagesEndRef = useRef(null);
  const [anchorEl, setAnchorEl] = useState(null);
  const [darkMode, setDarkMode] = useState(false); // Light/Dark mode state
  const [loading, setLoading] = useState(true); // Loading state
  const navigate = useNavigate(); // Initialize navigate

  const logUserActivity = async (activity) => {
    if (!currentUser) return;

    const logRef = ref(db, `activityLogs/${currentUser.uid}`);
    const newLogRef = push(logRef);

    const logEntry = {
      timestamp: new Date().toISOString(),
      activity: activity,
    };

    try {
      await set(newLogRef, logEntry);
    } catch (error) {
      console.error('Error logging activity:', error);
    }
  };

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

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

  useEffect(() => {
    if (currentUser) {
      const sessionsRef = ref(db, `chats/${currentUser.uid}/sessions`);
      get(sessionsRef)
        .then((snapshot) => {
          if (snapshot.exists()) {
            const sessionsData = Object.entries(snapshot.val());
            setSessions(sessionsData);
          } else {
            setSessions([]);
          }
        })
        .catch((error) => {
          console.error('Error fetching chat sessions:', error);
        })
        .finally(() => {
          setLoading(false); // Data loaded
        });
    } else {
      setLoading(false); // Auth state resolved but no user
    }
  }, [currentUser]);

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setDarkMode(savedTheme === 'dark');
    }
  }, []);

  // Redirect to login if not authenticated and loading is complete
  useEffect(() => {
    if (!currentUser && !loading) {
      navigate('/'); // Replace '/login' with your login route
    }
  }, [currentUser, loading, navigate]);

  const loadSession = async (sessionId) => {
    if (!currentUser) return;

    const sessionRef = ref(db, `chats/${currentUser.uid}/sessions/${sessionId}`);
    try {
      const snapshot = await get(sessionRef);
      if (snapshot.exists()) {
        const sessionData = snapshot.val();
        setMessages(sessionData.messages || []);
        setSessionName(sessionData.name || sessionId);
      } else {
        setMessages([]);
        setSessionName(sessionId);
      }
      setCurrentSession(sessionId);
    } catch (error) {
      console.error('Error fetching session chat history:', error);
    }
  };

  const createNewSession = async (userMessage = null) => {
    if (!currentUser || isCreatingSession) return null;

    setIsCreatingSession(true);

    try {
      const newSessionLabel = `Session ${sessions.length + 1}`;
      const newSessionRef = push(
        ref(db, `chats/${currentUser.uid}/sessions`)
      );
      const sessionId = newSessionRef.key;

      const initialMessages =
        userMessage && userMessage.text ? [userMessage] : [];

      await set(newSessionRef, {
        name: newSessionLabel,
        messages: initialMessages,
      });

      setSessions((prev) => [
        ...prev,
        [sessionId, { name: newSessionLabel, messages: initialMessages }],
      ]);

      setCurrentSession(sessionId);
      setMessages(initialMessages);
      setSessionName(newSessionLabel);

      return sessionId;
    } catch (error) {
      console.error('Error creating new session:', error);
      return null;
    } finally {
      setIsCreatingSession(false);
    }
  };

  const saveMessagesToFirebase = async (sessionId, updatedMessages) => {
    const sessionRef = ref(
      db,
      `chats/${currentUser.uid}/sessions/${sessionId}/messages`
    );
    await set(sessionRef, updatedMessages);
  };

  const handleSend = async () => {
    if (input.trim() === '' || isSending || isCreatingSession) return;

    const userMessage = { sender: 'user', text: input.trim() };

    setIsSending(true);

    try {
      let sessionId = currentSession;

      if (!sessionId) {
        sessionId = await createNewSession(userMessage);
        if (!sessionId) {
          throw new Error('Failed to create a new session');
        }
      }

      let updatedMessages = [...messages, userMessage];
      setMessages(updatedMessages);

      await saveMessagesToFirebase(sessionId, updatedMessages);
      await logUserActivity(
        `User ${currentUser.email} sent a message in session ${sessionName}`
      );

      const FUNCTION_URL =
        'https://us-central1-mind-gardener.cloudfunctions.net/chatWithOpenAI';
      const response = await fetch(FUNCTION_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ conversationHistory: updatedMessages }),
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || 'Server error');
      }

      const result = await response.json();
      const botReply = result.reply || 'No response from bot';
      const botMessage = { sender: 'bot', text: botReply };
      const updatedMessagesWithBotReply = [...updatedMessages, botMessage];

      setMessages(updatedMessagesWithBotReply);
      await saveMessagesToFirebase(sessionId, updatedMessagesWithBotReply);
    } catch (error) {
      const errorMessage = {
        sender: 'bot',
        text: `Sorry, there was an error: ${error.message}`,
      };
      const updatedMessagesWithError = [
        ...messages,
        userMessage,
        errorMessage,
      ];

      setMessages(updatedMessagesWithError);
      if (currentSession) {
        await saveMessagesToFirebase(currentSession, updatedMessagesWithError);
      }
    } finally {
      setIsSending(false);
      setInput('');
    }
  };

  const toggleTheme = () => {
    const newMode = !darkMode;
    setDarkMode(newMode);
    localStorage.setItem('theme', newMode ? 'dark' : 'light');
  };

  const saveSessionName = async (sessionId) => {
    if (!currentUser || !sessionId || !sessionName) return;

    const sessionRef = ref(db, `chats/${currentUser.uid}/sessions/${sessionId}`);
    try {
      await update(sessionRef, { name: sessionName });
      setSessions((prevSessions) =>
        prevSessions.map(([id, data]) =>
          id === sessionId
            ? [id, { ...data, name: sessionName }]
            : [id, data]
        )
      );
      setEditingSession(null);
    } catch (error) {
      console.error('Error saving session name:', error);
    }
  };

  const deleteSession = async (sessionId) => {
    if (!currentUser || !sessionId) return;

    const sessionRef = ref(db, `chats/${currentUser.uid}/sessions/${sessionId}`);
    try {
      await remove(sessionRef);
      setSessions((prevSessions) =>
        prevSessions.filter(([id]) => id !== sessionId)
      );
      if (sessionId === currentSession) {
        setCurrentSession(null);
        setMessages([]);
      }
    } catch (error) {
      console.error('Error deleting session:', error);
    }
  };

  const lightTheme = createTheme({
    palette: {
      mode: 'light',
      primary: {
        main: '#4caf50', // Green for primary in light mode
      },
    },
  });

  const darkTheme = createTheme({
    palette: {
      mode: 'dark',
      primary: {
        main: '#4caf50', // Green for primary in dark mode
      },
      background: {
        default: '#121212',
        paper: '#1e1e1e',
      },
    },
  });

  // Show loading indicator while authentication state is loading
  if (loading) {
    return (
      <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
        <CssBaseline />
        <div
          style={{
            height: '100vh',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <CircularProgress />
        </div>
      </ThemeProvider>
    );
  }

  // If user is not authenticated, return null (or redirect handled in useEffect)
  if (!currentUser) {
    return null;
  }

  return (
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      <CssBaseline />
      <Root>
        <Header>
          <Title variant="h6">MindGarden Chat</Title>
          <UserStatus>
            <UserAvatar>{currentUser.email[0].toUpperCase()}</UserAvatar>
            <Typography>{currentUser.email}</Typography>
            <Switch
              checked={darkMode}
              onChange={toggleTheme}
              icon={<Brightness7Icon />}
              checkedIcon={<Brightness4Icon />}
            />
            <IconButton onClick={(e) => setAnchorEl(e.currentTarget)}>
              <Badge color="success" variant="dot">
                <LogoutIcon />
              </Badge>
            </IconButton>
            <Menu
              anchorEl={anchorEl}
              open={Boolean(anchorEl)}
              onClose={() => setAnchorEl(null)}
            >
              <MenuItem
                onClick={() => {
                  signOut();
                  setAnchorEl(null);
                }}
              >
                Sign Out
              </MenuItem>
            </Menu>
          </UserStatus>
        </Header>
        <div style={{ display: 'flex', height: '100%' }}>
          <Sidebar>
            <Button
              variant="contained"
              onClick={createNewSession}
              fullWidth
              disabled={isCreatingSession}
            >
              {isCreatingSession ? 'Creating...' : 'New Session'}
            </Button>
            <List>
              {sessions.map(([sessionId, sessionData]) => (
                <div key={sessionId}>
                  <ListItem
                    button
                    selected={sessionId === currentSession}
                    onClick={() => loadSession(sessionId)}
                  >
                    {editingSession === sessionId ? (
                      <>
                        <TextField
                          value={sessionName}
                          onChange={(e) => setSessionName(e.target.value)}
                          onBlur={() => saveSessionName(sessionId)}
                          autoFocus
                          size="small"
                        />
                        <IconButton onClick={() => saveSessionName(sessionId)}>
                          <SaveIcon />
                        </IconButton>
                      </>
                    ) : (
                      <>
                        <Typography style={{ flexGrow: 1 }}>
                          {sessionData.name}
                        </Typography>
                        <IconButton
                          onClick={() => {
                            setEditingSession(sessionId);
                            setSessionName(sessionData.name);
                          }}
                        >
                          <EditIcon />
                        </IconButton>
                        <IconButton onClick={() => deleteSession(sessionId)}>
                          <DeleteIcon />
                        </IconButton>
                      </>
                    )}
                  </ListItem>
                  <Divider />
                </div>
              ))}
            </List>
          </Sidebar>
          <ChatContainer>
            <MessageContainer>
              {messages.map((msg, index) => (
                <Message key={index} sender={msg.sender}>
                  {msg.text}
                </Message>
              ))}
              <div ref={messagesEndRef} />
            </MessageContainer>
            <InputContainer>
              <TextInput
                value={input}
                onChange={(e) => setInput(e.target.value)}
                variant="outlined"
                placeholder="Type your message..."
                disabled={isSending || isCreatingSession}
                onKeyPress={(e) => {
                  if (e.key === 'Enter') {
                    handleSend();
                  }
                }}
              />
              <SendButton
                variant="contained"
                color="primary"
                onClick={handleSend}
                endIcon={<SendIcon />}
                disabled={isSending || isCreatingSession}
              >
                {isSending ? 'Sending...' : 'Send'}
              </SendButton>
            </InputContainer>
          </ChatContainer>
        </div>
      </Root>
    </ThemeProvider>
  );
}

export default ChatPage;