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}

pages/index.tsx

@@ -10,6 +10,7 @@ export default function Home() {
   const [loading, setLoading] = useState<boolean>(false);
   const [model, setModel] = useState<OpenAIModel>(OpenAIModel.GPT_3_5);
   const [lightMode, setLightMode] = useState<"dark" | "light">("dark");
+  const [disabled, setDisabled] = useState<boolean>(false);
 
   const handleSend = async (message: Message) => {
     if (selectedConversation) {
@@ -20,6 +21,7 @@ export default function Home() {
 
       setSelectedConversation(updatedConversation);
       setLoading(true);
+      setDisabled(true);
 
       const response = await fetch("/api/chat", {
         method: "POST",
@@ -106,6 +108,8 @@ export default function Home() {
       setConversations(updatedConversations);
 
       localStorage.setItem("conversationHistory", JSON.stringify(updatedConversations));
+
+      setDisabled(false);
     }
   };
 
@@ -142,8 +146,15 @@ export default function Home() {
     setConversations(updatedConversations);
     localStorage.setItem("conversationHistory", JSON.stringify(updatedConversations));
 
-    if (selectedConversation && selectedConversation.id === conversation.id) {
-      setSelectedConversation(undefined);
+    if (updatedConversations.length > 0) {
+      setSelectedConversation(updatedConversations[0]);
+      localStorage.setItem("selectedConversation", JSON.stringify(updatedConversations[0]));
+    } else {
+      setSelectedConversation({
+        id: 1,
+        name: "",
+        messages: []
+      });
       localStorage.removeItem("selectedConversation");
     }
   };
@@ -193,6 +204,7 @@ export default function Home() {
       {selectedConversation && (
         <div className={`flex h-screen text-white ${lightMode}`}>
           <Sidebar
+            loading={disabled}
             conversations={conversations}
             lightMode={lightMode}
             selectedConversation={selectedConversation}

utils/index.ts

@@ -20,7 +20,7 @@ export const OpenAIStream = async (model: OpenAIModel, messages: Message[]) => {
         },
         ...messages
       ],
-      max_tokens: 800,
+      max_tokens: 1000,
       temperature: 0.0,
       stream: true
     })