dify

dify/web/app/components/plugins/marketplace/intersection-line/hooks.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react'
+import { useMarketplaceContext } from '@/app/components/plugins/marketplace/context'
+
+export const useScrollIntersection = (
+  anchorRef: React.RefObject<HTMLDivElement | null>,
+  intersectionContainerId = 'marketplace-container',
+) => {
+  const intersected = useMarketplaceContext(v => v.intersected)
+  const setIntersected = useMarketplaceContext(v => v.setIntersected)
+
+  useEffect(() => {
+    const container = document.getElementById(intersectionContainerId)
+    let observer: IntersectionObserver | undefined
+    if (container && anchorRef.current) {
+      observer = new IntersectionObserver((entries) => {
+        const isIntersecting = entries[0].isIntersecting
+
+        if (isIntersecting && !intersected)
+          setIntersected(true)
+
+        if (!isIntersecting && intersected)
+          setIntersected(false)
+      }, {
+        root: container,
+      })
+      observer.observe(anchorRef.current)
+    }
+    return () => observer?.disconnect()
+  }, [anchorRef, intersected, setIntersected, intersectionContainerId])
+}

dify/web/app/components/plugins/marketplace/intersection-line/index.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { useRef } from 'react'
+import { useScrollIntersection } from './hooks'
+
+type IntersectionLineProps = {
+  intersectionContainerId?: string
+}
+const IntersectionLine = ({
+  intersectionContainerId,
+}: IntersectionLineProps) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useScrollIntersection(ref, intersectionContainerId)
+
+  return (
+    <div ref={ref} className='mb-4 h-px shrink-0 bg-transparent'></div>
+  )
+}
+
+export default IntersectionLine