Merge pull request #6211 from cmppoon/dev

fix: emoji picker remains stuck in the open state in AddEditAssistant component

web-app/src/containers/dialogs/AddEditAssistant.tsx

@@ -61,15 +61,18 @@ export default function AddEditAssistant({
   const [paramsTypes, setParamsTypes] = useState<string[]>(['string'])
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
   const emojiPickerRef = useRef<HTMLDivElement>(null)
+  const emojiPickerTriggerRef = useRef<HTMLDivElement>(null)
   const [nameError, setNameError] = useState<string | null>(null)
   const [toolSteps, setToolSteps] = useState(20)
 
-  // Handle click outside emoji picker
+  // Handle click outside emoji picker or trigger
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
         emojiPickerRef.current &&
-        !emojiPickerRef.current.contains(event.target as Node)
+        emojiPickerTriggerRef.current &&
+        !emojiPickerRef.current.contains(event.target as Node) &&
+        !emojiPickerTriggerRef.current.contains(event.target as Node)
       ) {
         setShowEmojiPicker(false)
       }
@@ -91,7 +94,9 @@ export default function AddEditAssistant({
       setName(initialData.name)
       setDescription(initialData.description)
       setInstructions(initialData.instructions)
+      setShowEmojiPicker(false)
       setToolSteps(initialData.tool_steps ?? 20)
+
       // Convert parameters object to arrays of keys and values
       const keys = Object.keys(initialData.parameters || {})
       const values = Object.values(initialData.parameters || {})
@@ -122,6 +127,7 @@ export default function AddEditAssistant({
     setParamsValues([''])
     setParamsTypes(['string'])
     setNameError(null)
+    setShowEmojiPicker(false)
     setToolSteps(20)
   }
 
@@ -247,6 +253,7 @@ export default function AddEditAssistant({
               <div
                 className="border rounded-sm p-1 w-9 h-9 flex items-center justify-center border-main-view-fg/10 cursor-pointer"
                 onClick={() => setShowEmojiPicker(!showEmojiPicker)}
+                ref={emojiPickerTriggerRef}
               >
                 {avatar ? (
                   <AvatarEmoji