From a70ae8799d692f20ca2a834f737db116fb587ca5 Mon Sep 17 00:00:00 2001
From: Syed Muzamil <38078427+SyedMuzamilM@users.noreply.github.com>
Date: Tue, 28 Mar 2023 19:30:07 +0530
Subject: [PATCH] fix: website crash when typing / followed with non prompt
 name (#262)

* fix: froward slash crash

* added the rounded corners when editing folder/chat
---
 components/Chat/ChatInput.tsx          | 26 ++++++++++-----------
 components/Chatbar/Conversation.tsx    |  2 +-
 components/Folders/Chat/ChatFolder.tsx | 32 +++++++++++++-------------
 3 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
index f140f03..0995548 100644
--- a/components/Chat/ChatInput.tsx
+++ b/components/Chat/ChatInput.tsx
@@ -107,11 +107,13 @@ export const ChatInput: FC<Props> = ({
 
   const handleInitModal = () => {
     const selectedPrompt = filteredPrompts[activePromptIndex];
-    setContent((prevContent) => {
-      const newContent = prevContent?.replace(/\/\w*$/, selectedPrompt.content);
-      return newContent;
-    });
-    handlePromptSelect(selectedPrompt);
+    if (selectedPrompt) {
+      setContent((prevContent) => {
+        const newContent = prevContent?.replace(/\/\w*$/, selectedPrompt.content);
+        return newContent;
+      });
+      handlePromptSelect(selectedPrompt);
+    }
     setShowPromptList(false);
   };
 
@@ -209,9 +211,8 @@ export const ChatInput: FC<Props> = ({
     if (textareaRef && textareaRef.current) {
       textareaRef.current.style.height = 'inherit';
       textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`;
-      textareaRef.current.style.overflow = `${
-        textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden'
-      }`;
+      textareaRef.current.style.overflow = `${textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden'
+        }`;
     }
   }, [content]);
 
@@ -261,11 +262,10 @@ export const ChatInput: FC<Props> = ({
               resize: 'none',
               bottom: `${textareaRef?.current?.scrollHeight}px`,
               maxHeight: '400px',
-              overflow: `${
-                textareaRef.current && textareaRef.current.scrollHeight > 400
-                  ? 'auto'
-                  : 'hidden'
-              }`,
+              overflow: `${textareaRef.current && textareaRef.current.scrollHeight > 400
+                ? 'auto'
+                : 'hidden'
+                }`,
             }}
             placeholder={
               t('Type a message or type "/" to select a prompt...') || ''
diff --git a/components/Chatbar/Conversation.tsx b/components/Chatbar/Conversation.tsx
index 262b0bd9..e9b6470 100644
--- a/components/Chatbar/Conversation.tsx
+++ b/components/Chatbar/Conversation.tsx
@@ -68,7 +68,7 @@ export const ConversationComponent: FC<Props> = ({
   return (
     <div className="relative flex items-center">
       {isRenaming && selectedConversation.id === conversation.id ? (
-        <div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3">
+        <div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3 rounded-lg">
           <IconMessage size={18} />
           <input
             className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-3 text-white outline-none focus:border-neutral-100"
diff --git a/components/Folders/Chat/ChatFolder.tsx b/components/Folders/Chat/ChatFolder.tsx
index 5f74598..2c52af7 100644
--- a/components/Folders/Chat/ChatFolder.tsx
+++ b/components/Folders/Chat/ChatFolder.tsx
@@ -103,7 +103,7 @@ export const ChatFolder: FC<Props> = ({
     <>
       <div className="relative flex items-center">
         {isRenaming ? (
-          <div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3">
+          <div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3 rounded-lg">
             {isOpen ? (
               <IconCaretDown size={18} />
             ) : (
@@ -199,21 +199,21 @@ export const ChatFolder: FC<Props> = ({
 
       {isOpen
         ? conversations.map((conversation, index) => {
-            if (conversation.folderId === currentFolder.id) {
-              return (
-                <div key={index} className="ml-5 gap-2 border-l pl-2">
-                  <ConversationComponent
-                    selectedConversation={selectedConversation}
-                    conversation={conversation}
-                    loading={loading}
-                    onSelectConversation={onSelectConversation}
-                    onDeleteConversation={onDeleteConversation}
-                    onUpdateConversation={onUpdateConversation}
-                  />
-                </div>
-              );
-            }
-          })
+          if (conversation.folderId === currentFolder.id) {
+            return (
+              <div key={index} className="ml-5 gap-2 border-l pl-2">
+                <ConversationComponent
+                  selectedConversation={selectedConversation}
+                  conversation={conversation}
+                  loading={loading}
+                  onSelectConversation={onSelectConversation}
+                  onDeleteConversation={onDeleteConversation}
+                  onUpdateConversation={onUpdateConversation}
+                />
+              </div>
+            );
+          }
+        })
         : null}
     </>
   );