User: User: I want to implement the ability to delete all chats in my AI assistant interface.

<code>
// src/components/Sidebar.js
import React, { useContext, useState } from 'react';
import { ChatContext } from '../context/ChatContext';
import { PlusIcon } from '@heroicons/react/solid';
import { ThemeContext } from '../context/ThemeContext';
import ChatItem from './ChatItem'; // Ensure correct import path
import DarkModeToggle from './DarkModeToggle'; // Ensure correct import path

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

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

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

  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 handleGoHome = () => {
    setCurrentChatId(null);
  };

  return (
    <div className="w-72 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 space-y-2">
        {chats.length === 0 && (
          <li className="text-gray-500 dark:text-gray-400">No past chats.</li>
        )}
        {chats.map((chat) => (
          <ChatItem key={chat.id} chat={chat} />
        ))}
      </ul>

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

export default Sidebar;
</code>

<code>
// src/context/ChatContext.js
import React, { createContext, useState, useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';

export const ChatContext = createContext();

export const ChatProvider = ({ children }) => {
  const [chats, setChats] = useState(() => {
    const saved = localStorage.getItem('chats');
    return saved ? JSON.parse(saved) : [];
  });

  const [currentChatId, setCurrentChatId] = useState(() => {
    const saved = localStorage.getItem('currentChatId');
    return saved ? JSON.parse(saved) : null;
  });

  useEffect(() => {
    localStorage.setItem('chats', JSON.stringify(chats));
  }, [chats]);

  useEffect(() => {
    localStorage.setItem('currentChatId', JSON.stringify(currentChatId));
  }, [currentChatId]);

  const addChat = (name = `Chat ${chats.length + 1}`) => {
    const newChat = {
      id: uuidv4(),
      name: name,
      messages: [],
      systemPrompt: '',
    };
    setChats((prev) => [newChat, ...prev]);
    setCurrentChatId(newChat.id);
  };

  const updateChat = (id, updatedChat) => {
    console.log(`Updating chat with ID: ${id}`, updatedChat); // Add this line
    setChats((prevChats) =>
      prevChats.map((chat) => (chat.id === id ? { ...chat, ...updatedChat } : chat))
    );
  };
  

  const addMessage = (id, message) => {
    setChats((prevChats) =>
      prevChats.map((chat) =>
        chat.id === id
          ? { ...chat, messages: [...chat.messages, message] }
          : chat
      )
    );
  };

  const deleteChat = (id) => {
    setChats((prevChats) => prevChats.filter((chat) => chat.id !== id));
    // If the deleted chat was the current one, reset currentChatId
    if (id === currentChatId) {
      setCurrentChatId(null);
    }
  };

  const clearChats = () => {
    setChats([]);
    setCurrentChatId(null);
  };

  return (
    <ChatContext.Provider
      value={{
        chats,
        currentChatId,
        setCurrentChatId,
        addChat,
        updateChat,
        addMessage,
        deleteChat,
        clearChats,
      }}
    >
      {children}
    </ChatContext.Provider>
  );
};
</code>