fix: in plugin config panel appselector can not list all apps() (#21457)

web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx

@@ -1,7 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useMemo } from 'react'
-import { useState } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -14,9 +13,9 @@ import type {
 import Input from '@/app/components/base/input'
 import AppIcon from '@/app/components/base/app-icon'
 import type { App } from '@/types/app'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
-  appList: App[]
   scope: string
   disabled: boolean
   trigger: React.ReactNode
@@ -25,11 +24,16 @@ type Props = {
   isShow: boolean
   onShowChange: (isShow: boolean) => void
   onSelect: (app: App) => void
+  apps: App[]
+  isLoading: boolean
+  hasMore: boolean
+  onLoadMore: () => void
+  searchText: string
+  onSearchChange: (text: string) => void
 }
 
 const AppPicker: FC<Props> = ({
   scope,
-  appList,
   disabled,
   trigger,
   placement = 'right-start',
@@ -37,19 +41,81 @@ const AppPicker: FC<Props> = ({
   isShow,
   onShowChange,
   onSelect,
+  apps,
+  isLoading,
+  hasMore,
+  onLoadMore,
+  searchText,
+  onSearchChange,
 }) => {
-  const [searchText, setSearchText] = useState('')
-  const filteredAppList = useMemo(() => {
-    return (appList || [])
-      .filter(app => app.name.toLowerCase().includes(searchText.toLowerCase()))
-      .filter(app => (app.mode !== 'advanced-chat' && app.mode !== 'workflow') || !!app.workflow)
-      .filter(app => scope === 'all'
-      || (scope === 'completion' && app.mode === 'completion')
-      || (scope === 'workflow' && app.mode === 'workflow')
-      || (scope === 'chat' && app.mode === 'advanced-chat')
-      || (scope === 'chat' && app.mode === 'agent-chat')
-      || (scope === 'chat' && app.mode === 'chat'))
-  }, [appList, scope, searchText])
+  const { t } = useTranslation()
+  const observerTarget = useRef<HTMLDivElement>(null)
+  const observerRef = useRef<IntersectionObserver | null>(null)
+  const loadingRef = useRef(false)
+
+  const handleIntersection = useCallback((entries: IntersectionObserverEntry[]) => {
+    const target = entries[0]
+    if (!target.isIntersecting || loadingRef.current || !hasMore || isLoading) return
+
+    loadingRef.current = true
+    onLoadMore()
+    // Reset loading state
+    setTimeout(() => {
+      loadingRef.current = false
+    }, 500)
+  }, [hasMore, isLoading, onLoadMore])
+
+  useEffect(() => {
+    if (!isShow) {
+      if (observerRef.current) {
+        observerRef.current.disconnect()
+        observerRef.current = null
+      }
+      return
+    }
+
+    let mutationObserver: MutationObserver | null = null
+
+    const setupIntersectionObserver = () => {
+      if (!observerTarget.current) return
+
+      // Create new observer
+      observerRef.current = new IntersectionObserver(handleIntersection, {
+        root: null,
+        rootMargin: '100px',
+        threshold: 0.1,
+      })
+
+      observerRef.current.observe(observerTarget.current)
+    }
+
+    // Set up MutationObserver to watch DOM changes
+    mutationObserver = new MutationObserver((mutations) => {
+      if (observerTarget.current) {
+        setupIntersectionObserver()
+        mutationObserver?.disconnect()
+      }
+    })
+
+    // Watch body changes since Portal adds content to body
+    mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+    })
+
+    // If element exists, set up IntersectionObserver directly
+    if (observerTarget.current)
+      setupIntersectionObserver()
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect()
+        observerRef.current = null
+      }
+      mutationObserver?.disconnect()
+    }
+  }, [isShow, handleIntersection])
+
   const getAppType = (app: App) => {
     switch (app.mode) {
       case 'advanced-chat':
@@ -84,18 +150,18 @@ const AppPicker: FC<Props> = ({
       </PortalToFollowElemTrigger>
 
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className="relative min-h-20 w-[356px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm">
+        <div className="relative flex max-h-[400px] min-h-20 w-[356px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm">
           <div className='p-2 pb-1'>
             <Input
               showLeftIcon
               showClearIcon
               value={searchText}
-              onChange={e => setSearchText(e.target.value)}
-              onClear={() => setSearchText('')}
+              onChange={e => onSearchChange(e.target.value)}
+              onClear={() => onSearchChange('')}
             />
           </div>
-          <div className='p-1'>
-            {filteredAppList.map(app => (
+          <div className='min-h-0 flex-1 overflow-y-auto p-1'>
+            {apps.map(app => (
               <div
                 key={app.id}
                 className='flex cursor-pointer items-center gap-3 rounded-lg py-1 pl-2 pr-3 hover:bg-state-base-hover'
@@ -113,6 +179,13 @@ const AppPicker: FC<Props> = ({
                 <div className='system-2xs-medium-uppercase shrink-0 text-text-tertiary'>{getAppType(app)}</div>
               </div>
             ))}
+            <div ref={observerTarget} className='h-4 w-full'>
+              {isLoading && (
+                <div className='flex justify-center py-2'>
+                  <div className='text-sm text-gray-500'>{t('common.loading')}</div>
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </PortalToFollowElemContent>