diff --git a/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx b/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
index 47cf653..e4c67e6 100644
--- a/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
+++ b/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
@@ -1,9 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import useStore from '@store/store';
+
 import { useTranslation } from 'react-i18next';
 import { matchSorter } from 'match-sorter';
 import { Prompt } from '@type/prompt';
 
+import useHideOnOutsideClick from '@hooks/useHideOnOutsideClick';
+
 const CommandPrompt = ({
   _setContent,
 }: {
@@ -11,10 +14,10 @@ const CommandPrompt = ({
 }) => {
   const { t } = useTranslation();
   const prompts = useStore((state) => state.prompts);
-  const [dropDown, setDropDown] = useState<boolean>(false);
   const [_prompts, _setPrompts] = useState<Prompt[]>(prompts);
   const [input, setInput] = useState<string>('');
-  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const [dropDown, setDropDown, dropDownRef] = useHideOnOutsideClick();
 
   useEffect(() => {
     const filteredPrompts = matchSorter(useStore.getState().prompts, input, {
@@ -28,29 +31,8 @@ const CommandPrompt = ({
     setInput('');
   }, [prompts]);
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setDropDown(false);
-      }
-    };
-
-    if (dropDown) {
-      document.addEventListener('mousedown', handleClickOutside);
-    } else {
-      document.removeEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [dropdownRef, dropDown]);
-
   return (
-    <div className='relative max-wd-sm' ref={dropdownRef}>
+    <div className='relative max-wd-sm' ref={dropDownRef}>
       <button
         className='btn btn-neutral btn-small'
         onClick={() => setDropDown(!dropDown)}
diff --git a/src/components/Chat/ChatContent/Message/RoleSelector.tsx b/src/components/Chat/ChatContent/Message/RoleSelector.tsx
index a5f43cc..8e3ac67 100644
--- a/src/components/Chat/ChatContent/Message/RoleSelector.tsx
+++ b/src/components/Chat/ChatContent/Message/RoleSelector.tsx
@@ -5,6 +5,8 @@ import useStore from '@store/store';
 import DownChevronArrow from '@icon/DownChevronArrow';
 import { ChatInterface, Role, roles } from '@type/chat';
 
+import useHideOnOutsideClick from '@hooks/useHideOnOutsideClick';
+
 const RoleSelector = React.memo(
   ({
     role,
@@ -20,29 +22,7 @@ const RoleSelector = React.memo(
     const setChats = useStore((state) => state.setChats);
     const currentChatIndex = useStore((state) => state.currentChatIndex);
 
-    const [dropDown, setDropDown] = useState<boolean>(false);
-    const dropDownRef = useRef<HTMLDivElement>(null);
-
-    const handleClickOutside = useCallback(
-      (event: any) => {
-        if (dropDownRef.current && !dropDownRef.current.contains(event.target))
-          setDropDown(false);
-      },
-      [dropDownRef, setDropDown, messageIndex]
-    );
-
-    useEffect(() => {
-      // Bind the event listener only if the dropdown is open.
-      if (dropDown) {
-        document.addEventListener('mousedown', handleClickOutside);
-      } else {
-        document.removeEventListener('mousedown', handleClickOutside);
-      }
-
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }, [dropDownRef, dropDown]);
+    const [dropDown, setDropDown, dropDownRef] = useHideOnOutsideClick();
 
     return (
       <div className='prose dark:prose-invert relative'>
diff --git a/src/components/Menu/ChatFolder.tsx b/src/components/Menu/ChatFolder.tsx
index 9e1f6d2..383e7c2 100644
--- a/src/components/Menu/ChatFolder.tsx
+++ b/src/components/Menu/ChatFolder.tsx
@@ -20,6 +20,8 @@ import RefreshIcon from '@icon/RefreshIcon';
 
 import { folderColorOptions } from '@constants/color';
 
+import useHideOnOutsideClick from '@hooks/useHideOnOutsideClick';
+
 const ChatFolder = ({
   folderChats,
   folderId,
@@ -37,13 +39,13 @@ const ChatFolder = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const folderRef = useRef<HTMLDivElement>(null);
   const gradientRef = useRef<HTMLDivElement>(null);
-  const paletteRef = useRef<HTMLDivElement>(null);
 
   const [_folderName, _setFolderName] = useState<string>(folderName);
   const [isEdit, setIsEdit] = useState<boolean>(false);
   const [isDelete, setIsDelete] = useState<boolean>(false);
   const [isHover, setIsHover] = useState<boolean>(false);
-  const [showPalette, setShowPalette] = useState<boolean>(false);
+
+  const [showPalette, setShowPalette, paletteRef] = useHideOnOutsideClick();
 
   const editTitle = () => {
     const updatedFolders: FolderCollection = JSON.parse(
@@ -145,27 +147,6 @@ const ChatFolder = ({
     if (inputRef && inputRef.current) inputRef.current.focus();
   }, [isEdit]);
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        paletteRef.current &&
-        !paletteRef.current.contains(event.target as Node)
-      ) {
-        setShowPalette(false);
-      }
-    };
-
-    if (showPalette) {
-      document.addEventListener('mousedown', handleClickOutside);
-    } else {
-      document.removeEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [paletteRef, showPalette]);
-
   return (
     <div
       className={`w-full transition-colors group/folder ${
diff --git a/src/hooks/useHideOnOutsideClick.ts b/src/hooks/useHideOnOutsideClick.ts
new file mode 100644
index 0000000..261aeb2
--- /dev/null
+++ b/src/hooks/useHideOnOutsideClick.ts
@@ -0,0 +1,36 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+const useHideOnOutsideClick = (): [
+  boolean,
+  React.Dispatch<React.SetStateAction<boolean>>,
+  React.RefObject<HTMLDivElement>
+] => {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const [showElement, setShowElement] = useState<boolean>(false);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      elementRef.current &&
+      !elementRef.current.contains(event.target as Node)
+    ) {
+      setShowElement(false);
+    }
+  };
+
+  useEffect(() => {
+    // Bind the event listener only if the element is show.
+    if (showElement) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showElement, elementRef]);
+
+  return [showElement, setShowElement, elementRef];
+};
+
+export default useHideOnOutsideClick;