Merge branch 'main' into feat/rag-pipeline

web/app/components/plugins/plugin-detail-panel/action-list.tsx

@@ -78,7 +78,7 @@ const ActionList = ({
             className='w-full'
             onClick={() => setShowSettingAuth(true)}
             disabled={!isCurrentWorkspaceManager}
-          >{t('tools.auth.unauthorized')}</Button>
+          >{t('workflow.nodes.tool.authorize')}</Button>
         )}
       </div>
       <div className='flex flex-col gap-2'>

web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx

@@ -141,7 +141,7 @@ const MultipleToolSelector = ({
             }
             panelShowState={panelShowState}
             onPanelShowStateChange={setPanelShowState}
-
+            isEdit={false}
           />
           {value.length === 0 && (
             <div className='system-xs-regular flex justify-center rounded-[10px] bg-background-section p-3 text-text-tertiary'>{t('plugin.detailPanel.toolSelector.empty')}</div>
@@ -158,6 +158,7 @@ const MultipleToolSelector = ({
                 onSelect={item => handleConfigure(item, index)}
                 onDelete={() => handleDelete(index)}
                 supportEnableSwitch
+                isEdit
               />
             </div>
           ))}

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

@@ -54,6 +54,7 @@ type Props = {
   scope?: string
   value?: ToolValue
   selectedTools?: ToolValue[]
+  isEdit?: boolean
   onSelect: (tool: {
     provider_name: string
     tool_name: string
@@ -77,6 +78,7 @@ type Props = {
 const ToolSelector: FC<Props> = ({
   value,
   selectedTools,
+  isEdit,
   disabled,
   placement = 'left',
   offset = 4,
@@ -277,7 +279,7 @@ const ToolSelector: FC<Props> = ({
           <div className={cn('relative max-h-[642px] min-h-20 w-[361px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-4 shadow-lg backdrop-blur-sm', !isShowSettingAuth && 'overflow-y-auto pb-2')}>
             {!isShowSettingAuth && (
               <>
-                <div className='system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary'>{t('plugin.detailPanel.toolSelector.title')}</div>
+                <div className='system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary'>{t(`plugin.detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`)}</div>
                 {/* base form */}
                 <div className='flex flex-col gap-3 px-4 py-2'>
                   <div className='flex flex-col gap-1'>

web/app/components/plugins/plugin-page/plugins-panel.tsx

@@ -1,20 +1,23 @@
 'use client'
 import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import type { FilterState } from './filter-management'
 import FilterManagement from './filter-management'
 import List from './list'
-import { useInstalledLatestVersion, useInstalledPluginList, useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import { useInstalledLatestVersion, useInstalledPluginListWithPagination, useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
 import { usePluginPageContext } from './context'
 import { useDebounceFn } from 'ahooks'
+import Button from '@/app/components/base/button'
 import Empty from './empty'
 import Loading from '../../base/loading'
 import { PluginSource } from '../types'
 
 const PluginsPanel = () => {
+  const { t } = useTranslation()
   const filters = usePluginPageContext(v => v.filters) as FilterState
   const setFilters = usePluginPageContext(v => v.setFilters)
-  const { data: pluginList, isLoading: isPluginListLoading } = useInstalledPluginList()
+  const { data: pluginList, isLoading: isPluginListLoading, isFetching, isLastPage, loadNextPage } = useInstalledPluginListWithPagination()
   const { data: installedLatestVersion } = useInstalledLatestVersion(
     pluginList?.plugins
       .filter(plugin => plugin.source === PluginSource.marketplace)
@@ -64,10 +67,16 @@ const PluginsPanel = () => {
         />
       </div>
       {isPluginListLoading ? <Loading type='app' /> : (filteredList?.length ?? 0) > 0 ? (
-        <div className='flex grow flex-wrap content-start items-start gap-2 self-stretch px-12'>
+        <div className='flex grow flex-wrap content-start items-start justify-center gap-2 self-stretch px-12'>
           <div className='w-full'>
             <List pluginList={filteredList || []} />
           </div>
+          {!isLastPage && !isFetching && (
+            <Button onClick={loadNextPage}>
+              {t('workflow.common.loadMore')}
+            </Button>
+          )}
+          {isFetching && <div className='system-md-semibold text-text-secondary'>{t('appLog.detail.loading')}</div>}
         </div>
       ) : (
         <Empty />

web/app/components/plugins/types.ts

@@ -325,6 +325,11 @@ export type InstalledPluginListResponse = {
   plugins: PluginDetail[]
 }
 
+export type InstalledPluginListWithTotalResponse = {
+  plugins: PluginDetail[]
+  total: number
+}
+
 export type InstalledLatestVersionResponse = {
   versions: {
     [plugin_id: string]: {