From 0bd78791ca91dd3402d5754a1bf5aaad1a080ab8 Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Sun, 27 Oct 2024 15:01:49 -0700
Subject: [PATCH] Let user exit from command mode with esc, click out, etc.

---
 .../app/components/chatInputArea/chatInputArea.tsx   | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index 7f2baf1d..7a40b97f 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -72,6 +72,8 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
     const [progressValue, setProgressValue] = useState(0);
     const [isDragAndDropping, setIsDragAndDropping] = useState(false);
 
+    const [showCommandList, setShowCommandList] = useState(false);
+
     const chatInputRef = ref as React.MutableRefObject<HTMLTextAreaElement>;
     useEffect(() => {
         if (!uploading) {
@@ -275,6 +277,12 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
         chatInputRef.current.style.height = "auto";
         chatInputRef.current.style.height =
             Math.max(chatInputRef.current.scrollHeight - 24, 64) + "px";
+
+        if (message.startsWith("/") && message.split(" ").length === 1) {
+            setShowCommandList(true);
+        } else {
+            setShowCommandList(false);
+        }
     }, [message]);
 
     function handleDragOver(event: React.DragEvent<HTMLDivElement>) {
@@ -360,9 +368,9 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                     </AlertDialogContent>
                 </AlertDialog>
             )}
-            {message.startsWith("/") && message.split(" ").length === 1 && (
+            {showCommandList && (
                 <div className="flex justify-center text-center">
-                    <Popover open={message.startsWith("/")}>
+                    <Popover open={showCommandList} onOpenChange={setShowCommandList}>
                         <PopoverTrigger className="flex justify-center text-center"></PopoverTrigger>
                         <PopoverContent
                             onOpenAutoFocus={(e) => e.preventDefault()}