fix delete error

components/Sidebar/Conversations.tsx

@@ -3,20 +3,22 @@ import { IconMessage, IconTrash } from "@tabler/icons-react";
 import { FC } from "react";
 
 interface Props {
+  loading: boolean;
   conversations: Conversation[];
   selectedConversation: Conversation;
   onSelectConversation: (conversation: Conversation) => void;
   onDeleteConversation: (conversation: Conversation) => void;
 }
 
-export const Conversations: FC<Props> = ({ conversations, selectedConversation, onSelectConversation, onDeleteConversation }) => {
+export const Conversations: FC<Props> = ({ loading, conversations, selectedConversation, onSelectConversation, onDeleteConversation }) => {
   return (
     <div className="flex flex-col space-y-2">
       {conversations.map((conversation, index) => (
-        <div
+        <button
           key={index}
-          className={`flex items-center justify-start w-[240px] h-[40px] px-2 text-sm rounded-lg hover:bg-neutral-700 cursor-pointer ${selectedConversation.id === conversation.id ? "bg-slate-600" : ""}`}
+          className={`flex items-center justify-start w-[240px] h-[40px] px-2 text-sm rounded-lg hover:bg-neutral-700 cursor-pointer ${loading ? "disabled:cursor-not-allowed" : ""} ${selectedConversation.id === conversation.id ? "bg-slate-600" : ""}`}
           onClick={() => onSelectConversation(conversation)}
+          disabled={loading}
         >
           <IconMessage
             className="mr-2 min-w-[20px]"
@@ -32,7 +34,7 @@ export const Conversations: FC<Props> = ({ conversations, selectedConversation,
               onDeleteConversation(conversation);
             }}
           />
-        </div>
+        </button>
       ))}
     </div>
   );

components/Sidebar/Sidebar.tsx

@@ -5,6 +5,7 @@ import { Conversations } from "./Conversations";
 import { SidebarSettings } from "./SidebarSettings";
 
 interface Props {
+  loading: boolean;
   conversations: Conversation[];
   lightMode: "light" | "dark";
   selectedConversation: Conversation;
@@ -14,7 +15,7 @@ interface Props {
   onDeleteConversation: (conversation: Conversation) => void;
 }
 
-export const Sidebar: FC<Props> = ({ conversations, lightMode, selectedConversation, onNewConversation, onToggleLightMode, onSelectConversation, onDeleteConversation }) => {
+export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selectedConversation, onNewConversation, onToggleLightMode, onSelectConversation, onDeleteConversation }) => {
   return (
     <div className="flex flex-col bg-[#202123] min-w-[260px]">
       <div className="flex items-center justify-center h-[60px]">
@@ -32,6 +33,7 @@ export const Sidebar: FC<Props> = ({ conversations, lightMode, selectedConversat
 
       <div className="flex-1 mx-auto pb-2 overflow-auto">
         <Conversations
+          loading={loading}
           conversations={conversations}
           selectedConversation={selectedConversation}
           onSelectConversation={onSelectConversation}