Added Role Selector close functionality when clicking outside of it (#211)

* Added dropdown close functionality when clicking
outside.

Added an event listener to the document that checks if the user clicks
outside the dropdown and closes it if so. This behavior is implemented
using a useRef hook and a mousedown event. The cleanup function is also
added to remove the event listener when the component unmounts.

* Optimized event listener in RoleSelector component
for improved performance.
Updated event listener for RoleSelector component
to only be added when the dropdown is opened and removed
when the dropdown is closed.

* Removed package-lock.json and yarn.lock

* Revert "Removed package-lock.json and yarn.lock"

This reverts commit f9dbf056b6003377d5bcf4f3a731afe7324f000b.

* Remove yarn.lock, package-lock.json from PR

* revert yarn.lock

* optimisation

* change React.useRef to useRef

---------

Co-authored-by: Jing Hua <tohjinghua123@gmail.com>

src/components/Chat/ChatContent/Message/RoleSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import useStore from '@store/store';
 
@@ -21,6 +21,28 @@ const RoleSelector = React.memo(
     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]);
 
     return (
       <div className='prose dark:prose-invert relative'>
@@ -33,6 +55,7 @@ const RoleSelector = React.memo(
           <DownChevronArrow />
         </button>
         <div
+          ref={dropDownRef}
           id='dropdown'
           className={`${
             dropDown ? '' : 'hidden'