From 742efea50db281f080bdfef40abe4cd3d59cddb5 Mon Sep 17 00:00:00 2001
From: Mckay Wrigley <mckaywrigley@gmail.com>
Date: Wed, 15 Mar 2023 07:25:15 -0600
Subject: [PATCH] fix delete error

---
 components/Sidebar/Conversations.tsx | 10 ++++++----
 components/Sidebar/Sidebar.tsx       |  4 +++-
 pages/index.tsx                      | 16 ++++++++++++++--
 utils/index.ts                       |  2 +-
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/components/Sidebar/Conversations.tsx b/components/Sidebar/Conversations.tsx
index f4cb529..ec97bda 100644
--- a/components/Sidebar/Conversations.tsx
+++ b/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>
   );
diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx
index acef3f4..4902986 100644
--- a/components/Sidebar/Sidebar.tsx
+++ b/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}
diff --git a/pages/index.tsx b/pages/index.tsx
index 7431eab..51ae250 100644
--- a/pages/index.tsx
+++ b/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}
diff --git a/utils/index.ts b/utils/index.ts
index 6bebad4..d723f12 100644
--- a/utils/index.ts
+++ b/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
     })