feat: knowledge pipeline (#25360)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: jyong <718720800@qq.com>
Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: quicksand <quicksandzn@gmail.com>
Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: Yongtao Huang <yongtaoh2022@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Harry <xh001x@hotmail.com>

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

@@ -14,7 +14,7 @@ describe('PortalToFollowElem', () => {
 
       expect(() => {
         render(
-          <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>,
+          <PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>,
         )
       }).toThrow('PortalToFollowElem components must be wrapped in <PortalToFollowElem />')
 
@@ -25,7 +25,7 @@ describe('PortalToFollowElem', () => {
       expect(() => {
         render(
           <PortalToFollowElem>
-            <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
+            <PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>
           </PortalToFollowElem>,
         )
       }).not.toThrow()
@@ -36,7 +36,7 @@ describe('PortalToFollowElem', () => {
     test('should render children correctly', () => {
       const { getByText } = render(
         <PortalToFollowElem>
-          <PortalToFollowElemTrigger>Trigger Text </PortalToFollowElemTrigger>
+          <PortalToFollowElemTrigger>Trigger Text</PortalToFollowElemTrigger>
         </PortalToFollowElem>,
       )
       expect(getByText('Trigger Text')).toBeInTheDocument()
@@ -46,7 +46,7 @@ describe('PortalToFollowElem', () => {
       const { getByRole } = render(
         <PortalToFollowElem>
           <PortalToFollowElemTrigger asChild >
-            <button>Button Trigger </button>
+            <button>Button Trigger</button>
           </PortalToFollowElemTrigger>
         </PortalToFollowElem>,
       )
@@ -59,8 +59,8 @@ describe('PortalToFollowElem', () => {
     test('should not render content when closed', () => {
       const { queryByText } = render(
         <PortalToFollowElem open={false} >
-          <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
-          <PortalToFollowElemContent > Popup Content </PortalToFollowElemContent>
+          <PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>
+          <PortalToFollowElemContent>Popup Content</PortalToFollowElemContent>
         </PortalToFollowElem>,
       )
 
@@ -71,7 +71,7 @@ describe('PortalToFollowElem', () => {
       const { getByText } = render(
         <PortalToFollowElem open={true} >
           <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
-          <PortalToFollowElemContent > Popup Content </PortalToFollowElemContent>
+          <PortalToFollowElemContent>Popup Content</PortalToFollowElemContent>
         </PortalToFollowElem>,
       )
 
@@ -85,8 +85,8 @@ describe('PortalToFollowElem', () => {
 
       const { getByText } = render(
         <PortalToFollowElem onOpenChange={handleOpenChange} >
-          <PortalToFollowElemTrigger>Hover Me </PortalToFollowElemTrigger>
-          <PortalToFollowElemContent > Content </PortalToFollowElemContent>
+          <PortalToFollowElemTrigger>Hover Me</PortalToFollowElemTrigger>
+          <PortalToFollowElemContent>Content</PortalToFollowElemContent>
         </PortalToFollowElem>,
       )
 
@@ -104,8 +104,8 @@ describe('PortalToFollowElem', () => {
       const useFloatingMock = jest.spyOn(require('@floating-ui/react'), 'useFloating')
 
       render(
-        <PortalToFollowElem placement="top-start" >
-          <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
+        <PortalToFollowElem placement='top-start' >
+          <PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>
         </PortalToFollowElem>,
       )
 

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

@@ -1,13 +1,13 @@
 'use client'
-import React from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import {
   FloatingPortal,
   autoUpdate,
   flip,
-  hide,
   offset,
   shift,
   size,
+  useClick,
   useDismiss,
   useFloating,
   useFocus,
@@ -34,34 +34,32 @@ export type PortalToFollowElemOptions = {
 
 export function usePortalToFollowElem({
   placement = 'bottom',
-  open,
+  open: controlledOpen,
   offset: offsetValue = 0,
   onOpenChange: setControlledOpen,
   triggerPopupSameWidth,
 }: PortalToFollowElemOptions = {}) {
-  const setOpen = setControlledOpen
-  const container = document.getElementById('workflow-container') || document.body
+  const [localOpen, setLocalOpen] = useState(false)
+  const open = controlledOpen ?? localOpen
+  const isControlled = controlledOpen !== undefined
+  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),
       flip({
         crossAxis: placement.includes('-'),
         fallbackAxisSideDirection: 'start',
-        padding: 8,
-      }),
-      shift({
-        padding: 8,
-        boundary: container,
-        altBoundary: true,
-      }),
-      hide({
-        // hide when the reference element is not visible
-        boundary: container,
+        padding: 5,
       }),
+      shift({ padding: 5 }),
       size({
         apply({ rects, elements }) {
           if (triggerPopupSameWidth)
@@ -75,24 +73,33 @@ export function usePortalToFollowElem({
 
   const hover = useHover(context, {
     move: false,
-    enabled: open == null,
+    enabled: !isControlled,
   })
   const focus = useFocus(context, {
-    enabled: open == null,
+    enabled: !isControlled,
   })
   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 (!isControlled)
+      result.push(click)
+    return result
+  }, [isControlled, 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],
   )
 }