User: Here is my frontend code for my chat interface and the sidebar where new chats are created:

<code>
// src/components/ChatInterface.js
import React, { useState, useContext, useRef, useEffect } from 'react';
import { ChatContext } from '../context/ChatContext';
import Message from './Message';
import CodeModal from './CodeModal';

function ChatInterface() {
  const {
    chats,
    currentChatId,
    addMessage,
    updateChat,
  } = useContext(ChatContext);
  const currentChat = chats.find((chat) => chat.id === currentChatId);
  const [message, setMessage] = useState('');
  const [codeContent, setCodeContent] = useState('');
  const [isCodeModalOpen, setIsCodeModalOpen] = useState(false);
  const [isSystemPromptOpen, setIsSystemPromptOpen] = useState(false);
  const [isTyping, setIsTyping] = useState(false);
  const messagesEndRef = useRef(null);

  useEffect(() => {
    scrollToBottom();
  }, [currentChat?.messages, isTyping]);

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

  const handleSend = async () => {
    if (!message.trim() || !currentChatId) return;

    const userMessage = { sender: 'user', text: message };
    addMessage(currentChatId, userMessage);
    setMessage('');
    scrollToBottom();

    // Set typing indicator
    setIsTyping(true);

    // Send the message to the backend
    try {
      const response = await fetch('http://localhost:8000/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text: formatMessageWithSystemPrompt(message, currentChat.systemPrompt) }),
      });
      const data = await response.json();
      const responseText = data.response;

      // Check if the response contains code blocks
      const codeMatch = responseText.match(/```(?:\w+\n)?([\s\S]*?)```/);
      if (codeMatch) {
        //setCodeContent(codeMatch[1]);
        //setIsCodeModalOpen(true);
      }

      const botMessage = { sender: 'bot', text: responseText };
      addMessage(currentChatId, botMessage);
      scrollToBottom();
    } catch (error) {
      console.error('Error:', error);
      const errorMessage = { sender: 'bot', text: 'Sorry, something went wrong. Please try again.' };
      addMessage(currentChatId, errorMessage);
      scrollToBottom();
    } finally {
      // Remove typing indicator
      setIsTyping(false);
    }
  };

  const formatMessageWithSystemPrompt = (message, systemPrompt) => {
    if (systemPrompt.trim() === '') {
      return message;
    }
    return `${systemPrompt}\n\n${message}`;
  };

  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  const handleSystemPromptChange = (e) => {
    const newPrompt = e.target.value;
    updateChat(currentChatId, { systemPrompt: newPrompt });
  };

  const toggleSystemPrompt = () => {
    setIsSystemPromptOpen(!isSystemPromptOpen);
  };

  if (!currentChat) {
    return <div className="flex-1 p-4">No active chat. Please start a new chat.</div>;
  }

  return (
    <div className="flex flex-col h-screen">
      <div className="flex-1 p-32 pt-8 pb-8 overflow-y-auto bg-[#eeeeee] dark:bg-[#161618]">
        {currentChat.messages.map((msg, index) => (
          <Message key={index} sender={msg.sender} text={msg.text} />
        ))}
        {isTyping && (
          <div className="mb-4 flex justify-start">
            <div className="max-w-xs md:max-w-md lg:max-w-lg p-3 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 flex items-center">
              <div className="flex space-x-1 mr-2">
                <div className="w-2 h-2 bg-gray-600 rounded-full animate-bounce-custom animation-delay-0"></div>
                <div className="w-2 h-2 bg-gray-600 rounded-full animate-bounce-custom animation-delay-200"></div>
                <div className="w-2 h-2 bg-gray-600 rounded-full animate-bounce-custom animation-delay-400"></div>
              </div>
              <span className="text-sm">Echo is typing...</span>
            </div>
          </div>
        )}
        <div ref={messagesEndRef} />
      </div>
      <div id="message_area" className="p-4 border-t dark:border-gray-700 bg-white dark:bg-[#161618]">
        <button
          onClick={toggleSystemPrompt}
          className="mb-2 text-sm text-blue-500 hover:underline focus:outline-none"
        >
          {isSystemPromptOpen ? 'Hide System Prompt' : 'Show System Prompt'}
        </button>
        {isSystemPromptOpen && (
          <textarea
            className="w-full p-2 border rounded-lg resize-none dark:bg-gray-800 dark:text-gray-200 mb-2"
            rows="3"
            placeholder="Enter system prompt..."
            value={currentChat.systemPrompt}
            onChange={handleSystemPromptChange}
          />
        )}
        <div className="flex">
          <textarea
            className="flex-1 p-2 border rounded-lg resize-none dark:bg-zinc-800 dark:text-gray-200"
            rows="2"
            placeholder="Type your message..."
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            onKeyDown={handleKeyDown}
          />
          <button
            className="ml-2 bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600"
            onClick={handleSend}
          >
            Send
          </button>
        </div>
      </div>
      {isCodeModalOpen && (
        <CodeModal code={codeContent} setIsCodeModalOpen={setIsCodeModalOpen} />
      )}
    </div>
  );
}

export default ChatInterface;
</code>

<code>
import React, { useContext, useState } from 'react';
import { ChatContext } from '../context/ChatContext';
import { PlusIcon, TrashIcon } from '@heroicons/react/solid';
import { ThemeContext } from '../context/ThemeContext';

function Sidebar() {
  const {
    chats,
    currentChatId,
    setCurrentChatId,
    addChat,
    deleteChat,
  } = useContext(ChatContext);

  const { theme, toggleTheme } = useContext(ThemeContext);

  const [isResetting, setIsResetting] = useState(false);
  const [error, setError] = useState(null);

  const handleSelectChat = (id) => {
    setCurrentChatId(id);
  };

  const handleNewChat = async () => {
    setIsResetting(true);
    setError(null);

    try {
      const response = await fetch('http://localhost:8000/api/reset', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });

      if (!response.ok) {
        throw new Error('Failed to reset chat.');
      }

      const data = await response.json();
      console.log(data.status); // Optional: Handle the response as needed

      addChat('New Chat');
      setCurrentChatId(null); // Optionally set to the new chat's ID if returned
    } catch (err) {
      console.error('Error resetting chat:', err);
      setError('Unable to reset the chat. Please try again.');
    } finally {
      setIsResetting(false);
    }
  };

  const handleDeleteChat = (e, id) => {
    e.stopPropagation(); // Prevent triggering the chat selection
    deleteChat(id);
  };

  const handleGoHome = () => {
    setCurrentChatId(null);
  };

  return (
    <div className="w-64 bg-gray-100 dark:bg-zinc-900 border-r dark:border-gray-700 p-4 flex flex-col">
      {/* Chatbot Name "Echo" at the top */}
      <div
        className="mb-6 text-2xl font-bold text-gray-800 dark:text-gray-200 cursor-pointer"
        onClick={handleGoHome}
      >
        Echo
      </div>

      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-bold text-gray-800 dark:text-gray-200">Past Chats</h2>
        <button
          onClick={handleNewChat}
          className={`p-2 bg-blue-500 text-white rounded hover:bg-blue-600 flex items-center justify-center ${
            isResetting ? 'opacity-50 cursor-not-allowed' : ''
          }`}
          title="Start New Chat"
          disabled={isResetting}
        >
          {isResetting ? 'Resetting...' : <PlusIcon className="h-5 w-5" />}
        </button>
      </div>

      {error && (
        <div className="mb-4 text-red-500 text-sm">
          {error}
        </div>
      )}

      <ul className="flex-1 overflow-y-auto">
        {chats.length === 0 && (
          <li className="text-gray-500 dark:text-gray-400">No past chats.</li>
        )}
        {chats.map((chat) => (
          <li
            key={chat.id}
            className={`mb-2 cursor-pointer p-2 rounded flex justify-between items-center ${
              chat.id === currentChatId
                ? 'bg-blue-100 dark:bg-blue-900'
                : 'hover:bg-gray-100 dark:hover:bg-gray-700'
            }`}
            onClick={() => handleSelectChat(chat.id)}
          >
            <span className='text-black dark:text-white'>{chat.name}</span>
            <button
              onClick={(e) => handleDeleteChat(e, chat.id)}
              className="text-red-500 hover:text-red-700"
              title="Delete Chat"
            >
              <TrashIcon className="h-5 w-5" />
            </button>
          </li>
        ))}
      </ul>

      {/* Dark Mode Toggle at the bottom */}
      <div className="mt-4">
        <DarkModeToggle theme={theme} toggleTheme={toggleTheme} />
      </div>
    </div>
  );
}

function DarkModeToggle({ theme, toggleTheme }) {
  return (
    <div className="flex items-center justify-center">
      <span className="text-gray-800 dark:text-gray-200 mr-2">Dark Mode</span>
      <button
        onClick={toggleTheme}
        className={`relative inline-flex items-center h-6 rounded-full w-11 focus:outline-none transition-colors duration-200 ${
          theme === 'dark' ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'
        }`}
      >
        <span className="sr-only">Toggle Dark Mode</span>
        <span
          className={`${
            theme === 'dark' ? 'translate-x-6' : 'translate-x-1'
          } inline-block w-4 h-4 transform bg-white rounded-full transition-transform duration-200`}
        />
      </button>
    </div>
  );
}

export default Sidebar;
</code>