User: In my AI assistant interface website currently, adding a new chat opens the home page rather than going to that newly created chat. How do I fix this?<br><br><br><code fileName="Sidebar.js" notes="">// src/components/Sidebar.js
import React, { useContext, useState } from &quot;react&quot;;
import { ChatContext } from &quot;../context/ChatContext&quot;;
import { PlusIcon, TrashIcon } from &quot;@heroicons/react/solid&quot;;
import { ThemeContext } from &quot;../context/ThemeContext&quot;;
import ChatItem from &quot;./ChatItem&quot;;
import DarkModeToggle from &quot;./DarkModeToggle&quot;;
import ConfirmModal from &quot;./ConfirmModal&quot;;
import ModelList from &quot;./ModelList&quot;; // Import the ModelList component
import Favicon from &quot;../assets/favicon.png&quot;

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

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

  const [isResetting, setIsResetting] = useState(false);
  const [error, setError] = useState(null);
  const [isModalOpen, setIsModalOpen] = useState(false); // For deleting all chats

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

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

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

      const data = await response.json();
      console.log(data.status);

      addChat(&quot;New Chat&quot;);
      setCurrentChatId(null);
    } catch (err) {
      console.error(&quot;Error resetting chat:&quot;, err);
      setError(&quot;Unable to reset the chat. Please try again.&quot;);
    } finally {
      setIsResetting(false);
    }
  };

  const handleGoHome = () =&gt; {
    setCurrentChatId(null);
  };

  const handleDeleteAllChats = () =&gt; {
    setIsModalOpen(true);
  };

  const confirmDeleteAllChats = () =&gt; {
    clearChats();
    setIsModalOpen(false);
  };

  const cancelDeleteAllChats = () =&gt; {
    setIsModalOpen(false);
  };

  return (
    &lt;div className=&quot;w-72 bg-gray-100 dark:bg-zinc-900 border-r dark:border-gray-700 p-4 flex flex-col&quot;&gt;
      {/* Chatbot Name &quot;Echo&quot; at the top */}
      &lt;div
        className=&quot;mb-6 text-2xl font-bold text-gray-800 dark:text-gray-200 cursor-pointer flex flex-row align-middle&quot;
        onClick={handleGoHome}
      &gt;
      &lt;img src={Favicon} alt=&quot;Logo of Echo&quot; width={&quot;32&quot;} className=&quot;mr-2 mt-[2px]&quot; /&gt;
        Echo
      &lt;/div&gt;

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

      {error &amp;&amp; &lt;div className=&quot;mb-4 text-red-500 text-sm&quot;&gt;{error}&lt;/div&gt;}

      &lt;ul className=&quot;flex-1 overflow-y-auto space-y-2&quot;&gt;
        {chats.length === 0 &amp;&amp; (
          &lt;li className=&quot;text-gray-500 dark:text-gray-400&quot;&gt;No past chats.&lt;/li&gt;
        )}
        {chats.map((chat) =&gt; (
          &lt;ChatItem key={chat.id} chat={chat} /&gt;
        ))}
      &lt;/ul&gt;

      {/* Delete All Chats Button */}
      {chats.length &gt; 0 &amp;&amp; (
        &lt;button
          onClick={handleDeleteAllChats}
          className=&quot;mt-4 p-2 bg-red-500 text-white rounded hover:bg-red-600 flex items-center justify-center&quot;
          title=&quot;Delete All Chats&quot;
        &gt;
          &lt;TrashIcon className=&quot;h-5 w-5&quot; /&gt;
          &lt;span className=&quot;ml-2&quot;&gt;Delete All&lt;/span&gt;
        &lt;/button&gt;
      )}

      {/* Confirm Modal */}
      {isModalOpen &amp;&amp; (
        &lt;ConfirmModal
          title=&quot;Delete All Chats&quot;
          message=&quot;Are you sure you want to delete all chats? This action cannot be undone.&quot;
          onConfirm={confirmDeleteAllChats}
          onCancel={cancelDeleteAllChats}
        /&gt;
      )}

      {/* Model List */}
      &lt;ModelList /&gt;

      {/* Dark Mode Toggle at the bottom */}
      &lt;div className=&quot;mt-4&quot;&gt;
        &lt;DarkModeToggle theme={theme} toggleTheme={toggleTheme} /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
}

export default Sidebar;</code>