From 894e883dede154e3517e4f67be8f0e69e69a0751 Mon Sep 17 00:00:00 2001
From: Lorem <lorem.ipsum.crypto@gmail.com>
Date: Fri, 9 Feb 2024 01:07:27 -0500
Subject: [PATCH] adjusted horizontal scroll bar style, changed input box to
 textarea to support multiple lines, refactored menu buttons, fixed
 deleteConversation method, and added deleteAllConversations method

---
 src/renderer/App.css                          |   1 +
 src/renderer/components/Chat.tsx              |   7 +-
 src/renderer/components/ConversationsMenu.tsx | 102 +++++++++++-------
 src/renderer/utils/conversationManager.ts     |   7 +-
 4 files changed, 74 insertions(+), 43 deletions(-)

diff --git a/src/renderer/App.css b/src/renderer/App.css
index c9df6e5..4ffae44 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -86,6 +86,7 @@
 /* Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
   width: 3px;
+  height: 4px;
   position: absolute;
 }
 
diff --git a/src/renderer/components/Chat.tsx b/src/renderer/components/Chat.tsx
index f9ba056..b820b5a 100644
--- a/src/renderer/components/Chat.tsx
+++ b/src/renderer/components/Chat.tsx
@@ -187,6 +187,7 @@ export default function Chat() {
 
   const keyDown = (e: any) => {
     if (e.key === 'Enter' && !pending) {
+      e.preventDefault();
       sendMessage();
       setTimeout(() => {
         scrollToBottom();
@@ -196,9 +197,9 @@ export default function Chat() {
 
   const renderInput = () => {
     return (
-      <div className="relative w-full">
-        <input
-          className="w-full h-12 border-[1px] border-zinc-700 min-h-10 px-3 rounded-md bg-zinc-800 text-white outline-zinc-900"
+      <div className="relative w-full h-auto flex">
+        <textarea
+          className="w-full h-12 border-[1px] border-zinc-700 min-h-10 px-3 rounded-md bg-zinc-800 text-white outline-zinc-900 pt-[10px] pr-10"
           disabled={!currentModelName}
           placeholder={`${!currentModelName ? "No model selected" :  "Type a message..."}`}
           value={input}
diff --git a/src/renderer/components/ConversationsMenu.tsx b/src/renderer/components/ConversationsMenu.tsx
index 33794e9..0551346 100644
--- a/src/renderer/components/ConversationsMenu.tsx
+++ b/src/renderer/components/ConversationsMenu.tsx
@@ -1,18 +1,26 @@
-import { PlusCircle, Trash, Trash2, X } from 'react-feather';
+import { Plus, PlusCircle, Trash2, X } from 'react-feather';
 import { useAtom } from 'jotai';
-import { currentConversationAtom, isConversationsMenuOpenAtom } from '../utils/atoms';
+import {
+  currentConversationAtom,
+  isConversationsMenuOpenAtom,
+} from '../utils/atoms';
 import { useEffect, useState } from 'react';
-import { deleteConversation, loadConversations } from '../utils/conversationManager';
+import {
+  deleteAllConversations,
+  deleteConversation,
+  loadConversations,
+} from '../utils/conversationManager';
 import { CONVERSATION } from '../utils/interfaces';
 import { useInterval } from 'usehooks-ts';
 
 export default function ConversationsMenu() {
-
   const [isConversationsMenuOpen, setIsConversationsMenuOpen] = useAtom(
     isConversationsMenuOpenAtom,
   );
   const [conversations, setConversations] = useState<CONVERSATION[]>([]);
-  const [currentConversation, setCurrentConversation] = useAtom(currentConversationAtom);
+  const [currentConversation, setCurrentConversation] = useAtom(
+    currentConversationAtom,
+  );
 
   useEffect(() => {
     fetchConversations();
@@ -27,7 +35,7 @@ export default function ConversationsMenu() {
   const fetchConversations = async () => {
     const conversations = await loadConversations();
     setConversations(conversations);
-  }
+  };
 
   const getMenuSize = () => {
     if (isConversationsMenuOpen) {
@@ -37,37 +45,44 @@ export default function ConversationsMenu() {
     }
   };
 
-  const renderNewConversationButton = () => {
-
-    const onClick = () => {
-      setCurrentConversation(null);
-      setIsConversationsMenuOpen(false);
-    }
-
+  const renderMenuButton = (label: string, icon: any, onClick: () => void) => {
     return (
-      <div 
-        className={`flex justify-between w-full h-10 cursor-pointer items-center hover:bg-zinc-900 px-2 transition all rounded-md text-white border border-zinc-800`}
+      <div
+        className={`flex justify-between w-full h-10 cursor-pointer items-center hover:bg-zinc-900 transition all rounded-md text-white border border-zinc-800`}
         onClick={onClick}
       >
-        <span className="text-nowrap">New Conversation</span>
-        <PlusCircle
-          size={15}
-        />
+        <span className="block h-full flex-1 text-white text-nowrap flex items-center px-2">
+          {label}
+        </span>
+        <div className="h-full w-1/5 flex justify-center items-center">
+          {icon}
+        </div>
       </div>
-    )
-  }
+    );
+  };
 
-  const renderConversations = () => {
+  // on click listener for deleting all conversations
+  const deleteAllConversationsClicked = () => {
+    deleteAllConversations();
+    fetchConversations();
+  };
 
+  // on click listener for starting new conversations
+  const newConversationClicked = () => {
+    setCurrentConversation(null);
+    setIsConversationsMenuOpen(false);
+  };
+
+  const renderConversations = () => {
     const conversationClicked = (conversation: CONVERSATION) => {
       setCurrentConversation(conversation);
       setIsConversationsMenuOpen(false);
-    }
+    };
 
     const deleteClicked = (conversation: CONVERSATION) => {
       deleteConversation(conversation.uid);
       fetchConversations();
-    }
+    };
 
     return (
       <>
@@ -75,30 +90,39 @@ export default function ConversationsMenu() {
           const messages = conversation.messages;
           const firstMessage = messages[0];
           const title = firstMessage.content.substring(0, 15);
-          const isActiveConversation = conversation.uid === currentConversation?.uid;
-          const isActiveStyle = `${isActiveConversation ? "bg-zinc-900" : ""}`
+          const isActiveConversation =
+            conversation.uid === currentConversation?.uid;
+          const isActiveStyle = `${isActiveConversation ? 'bg-zinc-900' : ''}`;
           return (
-            <div 
-              className={`${isActiveStyle} flex justify-between w-full h-10 cursor-pointer items-center hover:bg-zinc-900 px-2 transition all rounded-md`}
+            <div
+              className={`${isActiveStyle} flex justify-between w-full h-10 cursor-pointer items-center hover:bg-zinc-900 transition all rounded-md overflow-hidden`}
               onClick={() => conversationClicked(conversation)}
             >
-              <span 
-                className="text-white text-nowrap"
-              >
+              <span className="block h-full flex-1 text-white text-nowrap flex items-center px-2">
                 {title}
               </span>
-              <Trash2 
-                className="text-red-500 cursor-pointer"
-                size={15}
+              <div
+                className="h-full w-1/5 flex justify-center items-center hover:bg-zinc-800"
                 onClick={() => deleteClicked(conversation)}
-              />
+              >
+                <Trash2 className="text-red-500 cursor-pointer" size={15} />
+              </div>
             </div>
-          )
+          );
         })}
-        {renderNewConversationButton()}
+        {renderMenuButton(
+          'New Conversation',
+          <PlusCircle size={15} />,
+          newConversationClicked,
+        )}
+        {renderMenuButton(
+          'Delete Conversations',
+          <Trash2 size={15} className="text-red-500" />,
+          deleteAllConversationsClicked,
+        )}
       </>
-    )
-  }
+    );
+  };
 
   return (
     <>
diff --git a/src/renderer/utils/conversationManager.ts b/src/renderer/utils/conversationManager.ts
index 43957e1..0ce7912 100644
--- a/src/renderer/utils/conversationManager.ts
+++ b/src/renderer/utils/conversationManager.ts
@@ -1,5 +1,9 @@
 import { CONVERSATION, MESSAGE } from "./interfaces";
 
+export const deleteAllConversations = () => {
+  localStorage.removeItem('conversations');
+}
+
 export const deleteConversation = (uid: string) => {
   const conversations = [...loadConversations()];
   // if the user is deleting the last conversation, remove the conversations key from local storage
@@ -10,8 +14,9 @@ export const deleteConversation = (uid: string) => {
   // find the conversation with the passed in uid
   const index = conversations.findIndex((c: any) => c.uid === uid);
   // if the conversation exists delete it from the array
-  if (index) {
+  if (index !== -1) {
     conversations.splice(index, 1);
+    console.log(conversations);
     localStorage.setItem('conversations', JSON.stringify(conversations));
   }
 }