portal element

web/app/components/base/portal-to-follow-elem/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import {
   FloatingPortal,
   autoUpdate,
@@ -7,6 +7,7 @@ import {
   offset,
   shift,
   size,
+  useClick,
   useDismiss,
   useFloating,
   useFocus,
@@ -33,17 +34,22 @@ export type PortalToFollowElemOptions = {
 
 export function usePortalToFollowElem({
   placement = 'bottom',
-  open,
+  open: controlledOpen,
   offset: offsetValue = 0,
   onOpenChange: setControlledOpen,
   triggerPopupSameWidth,
 }: PortalToFollowElemOptions = {}) {
-  const setOpen = setControlledOpen
+  const [localOpen, setLocalOpen] = useState(false)
+  const open = controlledOpen ?? localOpen
+  const handleOpenChange = useCallback((newOpen: boolean) => {
+    setLocalOpen(newOpen)
+    setControlledOpen?.(newOpen)
+  }, [setControlledOpen, setLocalOpen])
 
   const data = useFloating({
     placement,
     open,
-    onOpenChange: setOpen,
+    onOpenChange: handleOpenChange,
     whileElementsMounted: autoUpdate,
     middleware: [
       offset(offsetValue),
@@ -74,16 +80,25 @@ export function usePortalToFollowElem({
   const dismiss = useDismiss(context)
   const role = useRole(context, { role: 'tooltip' })
 
-  const interactions = useInteractions([hover, focus, dismiss, role])
+  const click = useClick(context)
+
+  const interactionsArray = useMemo(() => {
+    const result = [hover, focus, dismiss, role]
+
+    if (!setControlledOpen)
+      result.push(click)
+    return result
+  }, [setControlledOpen, hover, focus, dismiss, role, click])
+  const interactions = useInteractions(interactionsArray)
 
   return React.useMemo(
     () => ({
       open,
-      setOpen,
+      setOpen: handleOpenChange,
       ...interactions,
       ...data,
     }),
-    [open, setOpen, interactions, data],
+    [open, handleOpenChange, interactions, data],
   )
 }
 

web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx

@@ -77,7 +77,7 @@ const Popup = () => {
           }
         </Button>
       </div>
-      <div className='border-t-[0.5px] border-t-divider-regular p-4 pt-3'>
+      <div className='space-y-1 border-t-[0.5px] border-t-divider-regular p-4 pt-3'>
         <Button
           className='w-full'
         >