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

@@ -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...') || ''

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"

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}
     </>
   );