From c4f52adb456d16ddc957edeafa82de27c3a9f953 Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Mon, 2 Sep 2024 11:44:40 +0530
Subject: [PATCH] feat(textarea): handle "/" keys

---
 ui/components/EmptyChatMessageInput.tsx | 21 ++++++++++++++-------
 ui/components/MessageInput.tsx          | 21 ++++++++++++++-------
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/ui/components/EmptyChatMessageInput.tsx b/ui/components/EmptyChatMessageInput.tsx
index 0ff9b2e..39d3f16 100644
--- a/ui/components/EmptyChatMessageInput.tsx
+++ b/ui/components/EmptyChatMessageInput.tsx
@@ -18,14 +18,21 @@ const EmptyChatMessageInput = ({
 
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === '/') {
-      e.preventDefault();
-      inputRef.current?.focus();
-    }
-  };
-
   useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const activeElement = document.activeElement;
+
+      const isInputFocused =
+        activeElement?.tagName === 'INPUT' ||
+        activeElement?.tagName === 'TEXTAREA' ||
+        activeElement?.hasAttribute('contenteditable');
+
+      if (e.key === '/' && !isInputFocused) {
+        e.preventDefault();
+        inputRef.current?.focus();
+      }
+    };
+
     document.addEventListener('keydown', handleKeyDown);
 
     return () => {
diff --git a/ui/components/MessageInput.tsx b/ui/components/MessageInput.tsx
index 2229cdf..05d44a6 100644
--- a/ui/components/MessageInput.tsx
+++ b/ui/components/MessageInput.tsx
@@ -27,14 +27,21 @@ const MessageInput = ({
 
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === '/') {
-      e.preventDefault();
-      inputRef.current?.focus();
-    }
-  };
-
   useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const activeElement = document.activeElement;
+
+      const isInputFocused =
+        activeElement?.tagName === 'INPUT' ||
+        activeElement?.tagName === 'TEXTAREA' ||
+        activeElement?.hasAttribute('contenteditable');
+
+      if (e.key === '/' && !isInputFocused) {
+        e.preventDefault();
+        inputRef.current?.focus();
+      }
+    };
+
     document.addEventListener('keydown', handleKeyDown);
 
     return () => {