Fix marketplace list reset on clear when no collections

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

api/models/types.py

@@ -19,7 +19,7 @@ class StringUUID(TypeDecorator[uuid.UUID | str | None]):
     def process_bind_param(self, value: uuid.UUID | str | None, dialect: Dialect) -> str | None:
         if value is None:
             return value
-        elif dialect.name == "postgresql":
+        elif dialect.name in ["postgresql", "mysql"]:
             return str(value)
         else:
             if isinstance(value, uuid.UUID):

web/.gitignore

@@ -54,4 +54,3 @@ package-lock.json
 # mise
 mise.toml
 
-complexity-report.csv

web/app/account/(commonLayout)/account-page/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 import { useState } from 'react'
-import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import {
   RiGraduationCapFill,
@@ -23,8 +22,9 @@ import PremiumBadge from '@/app/components/base/premium-badge'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import EmailChangeModal from './email-change-modal'
 import { validPassword } from '@/config'
-import { fetchAppList } from '@/service/apps'
+
 import type { App } from '@/types/app'
+import { useAppList } from '@/service/use-apps'
 
 const titleClassName = `
   system-sm-semibold text-text-secondary
@@ -36,7 +36,7 @@ const descriptionClassName = `
 export default function AccountPage() {
   const { t } = useTranslation()
   const { systemFeatures } = useGlobalPublicStore()
-  const { data: appList } = useSWR({ url: '/apps', params: { page: 1, limit: 100, name: '' } }, fetchAppList)
+  const { data: appList } = useAppList({ page: 1, limit: 100, name: '' })
   const apps = appList?.data || []
   const { mutateUserProfile, userProfile } = useAppContext()
   const { isEducationAccount } = useProviderContext()

web/app/components/app/overview/app-chart.tsx

@@ -3,7 +3,6 @@ import type { FC } from 'react'
 import React from 'react'
 import ReactECharts from 'echarts-for-react'
 import type { EChartsOption } from 'echarts'
-import useSWR from 'swr'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import { get } from 'lodash-es'
@@ -13,7 +12,20 @@ import { formatNumber } from '@/utils/format'
 import Basic from '@/app/components/app-sidebar/basic'
 import Loading from '@/app/components/base/loading'
 import type { AppDailyConversationsResponse, AppDailyEndUsersResponse, AppDailyMessagesResponse, AppTokenCostsResponse } from '@/models/app'
-import { getAppDailyConversations, getAppDailyEndUsers, getAppDailyMessages, getAppStatistics, getAppTokenCosts, getWorkflowDailyConversations } from '@/service/apps'
+import {
+  useAppAverageResponseTime,
+  useAppAverageSessionInteractions,
+  useAppDailyConversations,
+  useAppDailyEndUsers,
+  useAppDailyMessages,
+  useAppSatisfactionRate,
+  useAppTokenCosts,
+  useAppTokensPerSecond,
+  useWorkflowAverageInteractions,
+  useWorkflowDailyConversations,
+  useWorkflowDailyTerminals,
+  useWorkflowTokenCosts,
+} from '@/service/use-apps'
 const valueFormatter = (v: string | number) => v
 
 const COLOR_TYPE_MAP = {
@@ -272,8 +284,8 @@ const getDefaultChartData = ({ start, end, key = 'count' }: { start: string; end
 
 export const MessagesChart: FC<IBizChartProps> = ({ id, period }) => {
   const { t } = useTranslation()
-  const { data: response } = useSWR({ url: `/apps/${id}/statistics/daily-messages`, params: period.query }, getAppDailyMessages)
-  if (!response)
+  const { data: response, isLoading } = useAppDailyMessages(id, period.query)
+  if (isLoading || !response)
     return <Loading />
   const noDataFlag = !response.data || response.data.length === 0
   return <Chart
@@ -286,8 +298,8 @@ export const MessagesChart: FC<IBizChartProps> = ({ id, period }) => {
 
 export const ConversationsChart: FC<IBizChartProps> = ({ id, period }) => {
   const { t } = useTranslation()
-  const { data: response } = useSWR({ url: `/apps/${id}/statistics/daily-conversations`, params: period.query }, getAppDailyConversations)
-  if (!response)
+  const { data: response, isLoading } = useAppDailyConversations(id, period.query)
+  if (isLoading || !response)
     return <Loading />
   const noDataFlag = !response.data || response.data.length === 0
   return <Chart
@@ -301,8 +313,8 @@ export const ConversationsChart: FC<IBizChartProps> = ({ id, period }) => {
 export const EndUsersChart: FC<IBizChartProps> = ({ id, period }) => {
   const { t } = useTranslation()
 
-  const { data: response } = useSWR({ url: `/apps/${id}/statistics/daily-end-users`, id, params: period.query }, getAppDailyEndUsers)
-  if (!response)
+  const { data: response, isLoading } = useAppDailyEndUsers(id, period.query)
+  if (isLoading || !response)
     return <Loading />
   const noDataFlag = !response.data || response.data.length === 0
   return <Chart
@@ -315,8 +327,8 @@ export const EndUsersChart: FC<IBizChartProps> = ({ id, period }) => {
 
 export const AvgSessionInteractions: FC<IBizChartProps> = ({ id, period }) => {
   const { t } = useTranslation()
-  const { data: response } = useSWR({ url: `/apps/${id}/statistics/average-session-interactions`, params: period.query }, getAppStatistics)
-  if (!response)
+  const { data: response, isLoading } = useAppAverageSessionInteractions(id, period.query)
+  if (isLoading || !response)
     return <Loading />
   const noDataFlag = !response.data || response.data.length === 0
   return <Chart
@@ -331,8 +343,8 @@ export const AvgSessionInteractions: FC<IBizChartProps> = ({ id, period }) => {
 
 export const AvgResponseTime: FC<IBizChartProps> = ({ id, period }) => {
   const { t } = useTranslation()
-  const { data: response } = useSWR({ url: `/apps/${id}/statistics/average-response-time`, params: period.query }, getAppStatistics)
-  if (!response)
+  const { data: response, isLoading } = useAppAverageResponseTime(id, period.query)
+  if (isLoading || !response)
     return <Loading />
   const noDataFlag = !response.data || response.data.length === 0
   return <Chart
@@ -348,8 +360,8 @@ export const AvgResponseTime: FC<IBizChartProps> = ({ id, period }) => {
 
 export const TokenPerSecond: FC<IBizChartProps> = ({ id, period }) => {
   const { t } = useTranslation()
-  const { data: response } = useSWR({ url: `/apps/${id}/statistics/tokens-per-second`, params: period.query }, getAppStatistics)
-  if (!response)
+  const { data: response, isLoading } = useAppTokensPerSecond(id, period.query)
+  if (isLoading || !response)
     return <Loading />
   const noDataFlag = !response.data || response.data.length === 0
   return <Chart
@@ -366,8 +378,8 @@ export const TokenPerSecond: FC<IBizChartProps> = ({ id, period }) => {
 
 export const UserSatisfactionRate: FC<IBizChartProps> = ({ id, period }) => {
   const { t } = useTranslation()
-  const { data: response } = useSWR({ url: `/apps/${id}/statistics/user-satisfaction-rate`, params: period.query }, getAppStatistics)
-  if (!response)
+  const { data: response, isLoading } = useAppSatisfactionRate(id, period.query)
+  if (isLoading || !response)
     return <Loading />
   const noDataFlag = !response.data || response.data.length === 0
   return <Chart
@@ -384,8 +396,8 @@ export const UserSatisfactionRate: FC<IBizChartProps> = ({ id, period }) => {
 export const CostChart: FC<IBizChartProps> = ({ id, period }) => {
   const { t } = useTranslation()
 
-  const { data: response } = useSWR({ url: `/apps/${id}/statistics/token-costs`, params: period.query }, getAppTokenCosts)
-  if (!response)
+  const { data: response, isLoading } = useAppTokenCosts(id, period.query)
+  if (isLoading || !response)
     return <Loading />
   const noDataFlag = !response.data || response.data.length === 0
   return <Chart
@@ -398,8 +410,8 @@ export const CostChart: FC<IBizChartProps> = ({ id, period }) => {
 
 export const WorkflowMessagesChart: FC<IBizChartProps> = ({ id, period }) => {
   const { t } = useTranslation()
-  const { data: response } = useSWR({ url: `/apps/${id}/workflow/statistics/daily-conversations`, params: period.query }, getWorkflowDailyConversations)
-  if (!response)
+  const { data: response, isLoading } = useWorkflowDailyConversations(id, period.query)
+  if (isLoading || !response)
     return <Loading />
   const noDataFlag = !response.data || response.data.length === 0
   return <Chart
@@ -414,8 +426,8 @@ export const WorkflowMessagesChart: FC<IBizChartProps> = ({ id, period }) => {
 export const WorkflowDailyTerminalsChart: FC<IBizChartProps> = ({ id, period }) => {
   const { t } = useTranslation()
 
-  const { data: response } = useSWR({ url: `/apps/${id}/workflow/statistics/daily-terminals`, id, params: period.query }, getAppDailyEndUsers)
-  if (!response)
+  const { data: response, isLoading } = useWorkflowDailyTerminals(id, period.query)
+  if (isLoading || !response)
     return <Loading />
   const noDataFlag = !response.data || response.data.length === 0
   return <Chart
@@ -429,8 +441,8 @@ export const WorkflowDailyTerminalsChart: FC<IBizChartProps> = ({ id, period })
 export const WorkflowCostChart: FC<IBizChartProps> = ({ id, period }) => {
   const { t } = useTranslation()
 
-  const { data: response } = useSWR({ url: `/apps/${id}/workflow/statistics/token-costs`, params: period.query }, getAppTokenCosts)
-  if (!response)
+  const { data: response, isLoading } = useWorkflowTokenCosts(id, period.query)
+  if (isLoading || !response)
     return <Loading />
   const noDataFlag = !response.data || response.data.length === 0
   return <Chart
@@ -443,8 +455,8 @@ export const WorkflowCostChart: FC<IBizChartProps> = ({ id, period }) => {
 
 export const AvgUserInteractions: FC<IBizChartProps> = ({ id, period }) => {
   const { t } = useTranslation()
-  const { data: response } = useSWR({ url: `/apps/${id}/workflow/statistics/average-app-interactions`, params: period.query }, getAppStatistics)
-  if (!response)
+  const { data: response, isLoading } = useWorkflowAverageInteractions(id, period.query)
+  if (isLoading || !response)
     return <Loading />
   const noDataFlag = !response.data || response.data.length === 0
   return <Chart

web/app/components/apps/empty.tsx

@@ -23,7 +23,7 @@ const Empty = () => {
   return (
     <>
       <DefaultCards />
-      <div className='absolute inset-0 z-20 flex items-center justify-center bg-gradient-to-t from-background-body to-transparent pointer-events-none'>
+      <div className='pointer-events-none absolute inset-0 z-20 flex items-center justify-center bg-gradient-to-t from-background-body to-transparent'>
         <span className='system-md-medium text-text-tertiary'>
           {t('app.newApp.noAppsFound')}
         </span>

web/app/components/apps/list.tsx

@@ -4,7 +4,6 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import {
   useRouter,
 } from 'next/navigation'
-import useSWRInfinite from 'swr/infinite'
 import { useTranslation } from 'react-i18next'
 import { useDebounceFn } from 'ahooks'
 import {
@@ -19,8 +18,6 @@ import AppCard from './app-card'
 import NewAppCard from './new-app-card'
 import useAppsQueryState from './hooks/use-apps-query-state'
 import { useDSLDragDrop } from './hooks/use-dsl-drag-drop'
-import type { AppListResponse } from '@/models/app'
-import { fetchAppList } from '@/service/apps'
 import { useAppContext } from '@/context/app-context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { CheckModal } from '@/hooks/use-pay'
@@ -35,6 +32,7 @@ import Empty from './empty'
 import Footer from './footer'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { AppModeEnum } from '@/types/app'
+import { useInfiniteAppList } from '@/service/use-apps'
 
 const TagManagementModal = dynamic(() => import('@/app/components/base/tag-management'), {
   ssr: false,
@@ -43,30 +41,6 @@ const CreateFromDSLModal = dynamic(() => import('@/app/components/app/create-fro
   ssr: false,
 })
 
-const getKey = (
-  pageIndex: number,
-  previousPageData: AppListResponse,
-  activeTab: string,
-  isCreatedByMe: boolean,
-  tags: string[],
-  keywords: string,
-) => {
-  if (!pageIndex || previousPageData.has_more) {
-    const params: any = { url: 'apps', params: { page: pageIndex + 1, limit: 30, name: keywords, is_created_by_me: isCreatedByMe } }
-
-    if (activeTab !== 'all')
-      params.params.mode = activeTab
-    else
-      delete params.params.mode
-
-    if (tags.length)
-      params.params.tag_ids = tags
-
-    return params
-  }
-  return null
-}
-
 const List = () => {
   const { t } = useTranslation()
   const { systemFeatures } = useGlobalPublicStore()
@@ -102,16 +76,24 @@ const List = () => {
     enabled: isCurrentWorkspaceEditor,
   })
 
-  const { data, isLoading, error, setSize, mutate } = useSWRInfinite(
-    (pageIndex: number, previousPageData: AppListResponse) => getKey(pageIndex, previousPageData, activeTab, isCreatedByMe, tagIDs, searchKeywords),
-    fetchAppList,
-    {
-      revalidateFirstPage: true,
-      shouldRetryOnError: false,
-      dedupingInterval: 500,
-      errorRetryCount: 3,
-    },
-  )
+  const appListQueryParams = {
+    page: 1,
+    limit: 30,
+    name: searchKeywords,
+    tag_ids: tagIDs,
+    is_created_by_me: isCreatedByMe,
+    ...(activeTab !== 'all' ? { mode: activeTab as AppModeEnum } : {}),
+  }
+
+  const {
+    data,
+    isLoading,
+    isFetchingNextPage,
+    fetchNextPage,
+    hasNextPage,
+    error,
+    refetch,
+  } = useInfiniteAppList(appListQueryParams, { enabled: !isCurrentWorkspaceDatasetOperator })
 
   const anchorRef = useRef<HTMLDivElement>(null)
   const options = [
@@ -126,9 +108,9 @@ const List = () => {
   useEffect(() => {
     if (localStorage.getItem(NEED_REFRESH_APP_LIST_KEY) === '1') {
       localStorage.removeItem(NEED_REFRESH_APP_LIST_KEY)
-      mutate()
+      refetch()
     }
-  }, [mutate, t])
+  }, [refetch])
 
   useEffect(() => {
     if (isCurrentWorkspaceDatasetOperator)
@@ -136,7 +118,9 @@ const List = () => {
   }, [router, isCurrentWorkspaceDatasetOperator])
 
   useEffect(() => {
-    const hasMore = data?.at(-1)?.has_more ?? true
+    if (isCurrentWorkspaceDatasetOperator)
+      return
+    const hasMore = hasNextPage ?? true
     let observer: IntersectionObserver | undefined
 
     if (error) {
@@ -151,8 +135,8 @@ const List = () => {
       const dynamicMargin = Math.max(100, Math.min(containerHeight * 0.2, 200)) // Clamps to 100-200px range, using 20% of container height as the base value
 
       observer = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting && !isLoading && !error && hasMore)
-          setSize((size: number) => size + 1)
+        if (entries[0].isIntersecting && !isLoading && !isFetchingNextPage && !error && hasMore)
+          fetchNextPage()
       }, {
         root: containerRef.current,
         rootMargin: `${dynamicMargin}px`,
@@ -161,7 +145,7 @@ const List = () => {
       observer.observe(anchorRef.current)
     }
     return () => observer?.disconnect()
-  }, [isLoading, setSize, data, error])
+  }, [isLoading, isFetchingNextPage, fetchNextPage, error, hasNextPage, isCurrentWorkspaceDatasetOperator])
 
   const { run: handleSearch } = useDebounceFn(() => {
     setSearchKeywords(keywords)
@@ -185,6 +169,9 @@ const List = () => {
     setQuery(prev => ({ ...prev, isCreatedByMe: newValue }))
   }, [isCreatedByMe, setQuery])
 
+  const pages = data?.pages ?? []
+  const hasAnyApp = (pages[0]?.total ?? 0) > 0
+
   return (
     <>
       <div ref={containerRef} className='relative flex h-0 shrink-0 grow flex-col overflow-y-auto bg-background-body'>
@@ -217,17 +204,17 @@ const List = () => {
             />
           </div>
         </div>
-        {(data && data[0].total > 0)
+        {hasAnyApp
           ? <div className='relative grid grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6'>
             {isCurrentWorkspaceEditor
-              && <NewAppCard ref={newAppCardRef} onSuccess={mutate} selectedAppType={activeTab} />}
-            {data.map(({ data: apps }) => apps.map(app => (
-              <AppCard key={app.id} app={app} onRefresh={mutate} />
+              && <NewAppCard ref={newAppCardRef} onSuccess={refetch} selectedAppType={activeTab} />}
+            {pages.map(({ data: apps }) => apps.map(app => (
+              <AppCard key={app.id} app={app} onRefresh={refetch} />
             )))}
           </div>
           : <div className='relative grid grow grid-cols-1 content-start gap-4 overflow-hidden px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6'>
             {isCurrentWorkspaceEditor
-              && <NewAppCard ref={newAppCardRef} className='z-10' onSuccess={mutate} selectedAppType={activeTab} />}
+              && <NewAppCard ref={newAppCardRef} className='z-10' onSuccess={refetch} selectedAppType={activeTab} />}
             <Empty />
           </div>}
 
@@ -261,7 +248,7 @@ const List = () => {
           onSuccess={() => {
             setShowCreateFromDSLModal(false)
             setDroppedDSLFile(undefined)
-            mutate()
+            refetch()
           }}
           droppedFile={droppedDSLFile}
         />

web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx

@@ -1,5 +1,4 @@
 'use client'
-import useSWR from 'swr'
 import { produce } from 'immer'
 import React, { Fragment } from 'react'
 import { usePathname } from 'next/navigation'
@@ -9,7 +8,6 @@ import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } fro
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import type { Item } from '@/app/components/base/select'
-import { fetchAppVoices } from '@/service/apps'
 import Tooltip from '@/app/components/base/tooltip'
 import Switch from '@/app/components/base/switch'
 import AudioBtn from '@/app/components/base/audio-btn'
@@ -17,6 +15,7 @@ import { languages } from '@/i18n-config/language'
 import { TtsAutoPlay } from '@/types/app'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import classNames from '@/utils/classnames'
+import { useAppVoices } from '@/service/use-apps'
 
 type VoiceParamConfigProps = {
   onClose: () => void
@@ -39,7 +38,7 @@ const VoiceParamConfig = ({
   const localLanguagePlaceholder = languageItem?.name || t('common.placeholder.select')
 
   const language = languageItem?.value
-  const voiceItems = useSWR({ appId, language }, fetchAppVoices).data
+  const { data: voiceItems } = useAppVoices(appId, language)
   let voiceItem = voiceItems?.find(item => item.value === text2speech?.voice)
   if (voiceItems && !voiceItem)
     voiceItem = voiceItems[0]

web/app/components/develop/secret-key/secret-key-modal.tsx

@@ -5,7 +5,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { RiDeleteBinLine } from '@remixicon/react'
 import { PlusIcon, XMarkIcon } from '@heroicons/react/20/solid'
-import useSWR, { useSWRConfig } from 'swr'
+import useSWR from 'swr'
 import SecretKeyGenerateModal from './secret-key-generate'
 import s from './style.module.css'
 import ActionButton from '@/app/components/base/action-button'
@@ -15,7 +15,6 @@ import CopyFeedback from '@/app/components/base/copy-feedback'
 import {
   createApikey as createAppApikey,
   delApikey as delAppApikey,
-  fetchApiKeysList as fetchAppApiKeysList,
 } from '@/service/apps'
 import {
   createApikey as createDatasetApikey,
@@ -27,6 +26,7 @@ import Loading from '@/app/components/base/loading'
 import Confirm from '@/app/components/base/confirm'
 import useTimestamp from '@/hooks/use-timestamp'
 import { useAppContext } from '@/context/app-context'
+import { useAppApiKeys, useInvalidateAppApiKeys } from '@/service/use-apps'
 
 type ISecretKeyModalProps = {
   isShow: boolean
@@ -45,12 +45,14 @@ const SecretKeyModal = ({
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
   const [isVisible, setVisible] = useState(false)
   const [newKey, setNewKey] = useState<CreateApiKeyResponse | undefined>(undefined)
-  const { mutate } = useSWRConfig()
-  const commonParams = appId
-    ? { url: `/apps/${appId}/api-keys`, params: {} }
-    : { url: '/datasets/api-keys', params: {} }
-  const fetchApiKeysList = appId ? fetchAppApiKeysList : fetchDatasetApiKeysList
-  const { data: apiKeysList } = useSWR(commonParams, fetchApiKeysList)
+  const invalidateAppApiKeys = useInvalidateAppApiKeys()
+  const { data: appApiKeys, isLoading: isAppApiKeysLoading } = useAppApiKeys(appId, { enabled: !!appId && isShow })
+  const { data: datasetApiKeys, isLoading: isDatasetApiKeysLoading, mutate: mutateDatasetApiKeys } = useSWR(
+    !appId && isShow ? { url: '/datasets/api-keys', params: {} } : null,
+    fetchDatasetApiKeysList,
+  )
+  const apiKeysList = appId ? appApiKeys : datasetApiKeys
+  const isApiKeysLoading = appId ? isAppApiKeysLoading : isDatasetApiKeysLoading
 
   const [delKeyID, setDelKeyId] = useState('')
 
@@ -64,7 +66,10 @@ const SecretKeyModal = ({
       ? { url: `/apps/${appId}/api-keys/${delKeyID}`, params: {} }
       : { url: `/datasets/api-keys/${delKeyID}`, params: {} }
     await delApikey(params)
-    mutate(commonParams)
+    if (appId)
+      invalidateAppApiKeys(appId)
+    else
+      mutateDatasetApiKeys()
   }
 
   const onCreate = async () => {
@@ -75,7 +80,10 @@ const SecretKeyModal = ({
     const res = await createApikey(params)
     setVisible(true)
     setNewKey(res)
-    mutate(commonParams)
+    if (appId)
+      invalidateAppApiKeys(appId)
+    else
+      mutateDatasetApiKeys()
   }
 
   const generateToken = (token: string) => {
@@ -88,7 +96,7 @@ const SecretKeyModal = ({
         <XMarkIcon className="h-6 w-6 cursor-pointer text-text-tertiary" onClick={onClose} />
       </div>
       <p className='mt-1 shrink-0 text-[13px] font-normal leading-5 text-text-tertiary'>{t('appApi.apiKeyModal.apiSecretKeyTips')}</p>
-      {!apiKeysList && <div className='mt-4'><Loading /></div>}
+      {isApiKeysLoading && <div className='mt-4'><Loading /></div>}
       {
         !!apiKeysList?.data?.length && (
           <div className='mt-4 flex grow flex-col overflow-hidden'>

web/app/components/goto-anything/actions/index.ts

@@ -214,8 +214,12 @@ export const searchAnything = async (
   actionItem?: ActionItem,
   dynamicActions?: Record<string, ActionItem>,
 ): Promise<SearchResult[]> => {
+  const trimmedQuery = query.trim()
+
   if (actionItem) {
-    const searchTerm = query.replace(actionItem.key, '').replace(actionItem.shortcut, '').trim()
+    const escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    const prefixPattern = new RegExp(`^(${escapeRegExp(actionItem.key)}|${escapeRegExp(actionItem.shortcut)})\\s*`)
+    const searchTerm = trimmedQuery.replace(prefixPattern, '').trim()
     try {
       return await actionItem.search(query, searchTerm, locale)
     }
@@ -225,10 +229,12 @@ export const searchAnything = async (
     }
   }
 
-  if (query.startsWith('@') || query.startsWith('/'))
+  if (trimmedQuery.startsWith('@') || trimmedQuery.startsWith('/'))
     return []
 
   const globalSearchActions = Object.values(dynamicActions || Actions)
+    // Exclude slash commands from general search results
+    .filter(action => action.key !== '/')
 
   // Use Promise.allSettled to handle partial failures gracefully
   const searchPromises = globalSearchActions.map(async (action) => {

web/app/components/goto-anything/index.tsx

@@ -177,31 +177,42 @@ const GotoAnything: FC<Props> = ({
     }
   }, [router])
 
+  const dedupedResults = useMemo(() => {
+    const seen = new Set<string>()
+    return searchResults.filter((result) => {
+      const key = `${result.type}-${result.id}`
+      if (seen.has(key))
+        return false
+      seen.add(key)
+      return true
+    })
+  }, [searchResults])
+
   // Group results by type
-  const groupedResults = useMemo(() => searchResults.reduce((acc, result) => {
+  const groupedResults = useMemo(() => dedupedResults.reduce((acc, result) => {
     if (!acc[result.type])
       acc[result.type] = []
 
     acc[result.type].push(result)
     return acc
   }, {} as { [key: string]: SearchResult[] }),
-  [searchResults])
+  [dedupedResults])
 
   useEffect(() => {
     if (isCommandsMode)
       return
 
-    if (!searchResults.length)
+    if (!dedupedResults.length)
       return
 
-    const currentValueExists = searchResults.some(result => `${result.type}-${result.id}` === cmdVal)
+    const currentValueExists = dedupedResults.some(result => `${result.type}-${result.id}` === cmdVal)
 
     if (!currentValueExists)
-      setCmdVal(`${searchResults[0].type}-${searchResults[0].id}`)
-  }, [isCommandsMode, searchResults, cmdVal])
+      setCmdVal(`${dedupedResults[0].type}-${dedupedResults[0].id}`)
+  }, [isCommandsMode, dedupedResults, cmdVal])
 
   const emptyResult = useMemo(() => {
-    if (searchResults.length || !searchQuery.trim() || isLoading || isCommandsMode)
+    if (dedupedResults.length || !searchQuery.trim() || isLoading || isCommandsMode)
       return null
 
     const isCommandSearch = searchMode !== 'general'
@@ -246,7 +257,7 @@ const GotoAnything: FC<Props> = ({
         </div>
       </div>
     )
-  }, [searchResults, searchQuery, Actions, searchMode, isLoading, isError, isCommandsMode])
+  }, [dedupedResults, searchQuery, Actions, searchMode, isLoading, isError, isCommandsMode])
 
   const defaultUI = useMemo(() => {
     if (searchQuery.trim())
@@ -430,14 +441,14 @@ const GotoAnything: FC<Props> = ({
             {/* Always show footer to prevent height jumping */}
             <div className='border-t border-divider-subtle bg-components-panel-bg-blur px-4 py-2 text-xs text-text-tertiary'>
               <div className='flex min-h-[16px] items-center justify-between'>
-                {(!!searchResults.length || isError) ? (
+                {(!!dedupedResults.length || isError) ? (
                   <>
                     <span>
                       {isError ? (
                         <span className='text-red-500'>{t('app.gotoAnything.someServicesUnavailable')}</span>
                       ) : (
                         <>
-                          {t('app.gotoAnything.resultCount', { count: searchResults.length })}
+                          {t('app.gotoAnything.resultCount', { count: dedupedResults.length })}
                           {searchMode !== 'general' && (
                             <span className='ml-2 opacity-60'>
                               {t('app.gotoAnything.inScope', { scope: searchMode.replace('@', '') })}

web/app/components/header/account-setting/data-source-page-new/hooks/use-marketplace-all-plugins.ts

@@ -1,39 +1,28 @@
 import {
-  useCallback,
   useEffect,
   useMemo,
-  useState,
 } from 'react'
 import {
   useMarketplacePlugins,
+  useMarketplacePluginsByCollectionId,
 } from '@/app/components/plugins/marketplace/hooks'
-import type { Plugin } from '@/app/components/plugins/types'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
-import { getMarketplacePluginsByCollectionId } from '@/app/components/plugins/marketplace/utils'
 
 export const useMarketplaceAllPlugins = (providers: any[], searchText: string) => {
   const exclude = useMemo(() => {
     return providers.map(provider => provider.plugin_id)
   }, [providers])
-  const [collectionPlugins, setCollectionPlugins] = useState<Plugin[]>([])
-
+  const {
+    plugins: collectionPlugins = [],
+    isLoading: isCollectionLoading,
+  } = useMarketplacePluginsByCollectionId('__datasource-settings-pinned-datasources')
   const {
     plugins,
     queryPlugins,
     queryPluginsWithDebounced,
-    isLoading,
+    isLoading: isPluginsLoading,
   } = useMarketplacePlugins()
 
-  const getCollectionPlugins = useCallback(async () => {
-    const collectionPlugins = await getMarketplacePluginsByCollectionId('__datasource-settings-pinned-datasources')
-
-    setCollectionPlugins(collectionPlugins)
-  }, [])
-
-  useEffect(() => {
-    getCollectionPlugins()
-  }, [getCollectionPlugins])
-
   useEffect(() => {
     if (searchText) {
       queryPluginsWithDebounced({
@@ -75,6 +64,6 @@ export const useMarketplaceAllPlugins = (providers: any[], searchText: string) =
 
   return {
     plugins: allPlugins,
-    isLoading,
+    isLoading: isCollectionLoading || isPluginsLoading,
   }
 }

web/app/components/header/account-setting/model-provider-page/hooks.ts

@@ -33,10 +33,9 @@ import {
 import { useProviderContext } from '@/context/provider-context'
 import {
   useMarketplacePlugins,
+  useMarketplacePluginsByCollectionId,
 } from '@/app/components/plugins/marketplace/hooks'
-import type { Plugin } from '@/app/components/plugins/types'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
-import { getMarketplacePluginsByCollectionId } from '@/app/components/plugins/marketplace/utils'
 import { useModalContextSelector } from '@/context/modal-context'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
@@ -255,25 +254,17 @@ export const useMarketplaceAllPlugins = (providers: ModelProvider[], searchText:
   const exclude = useMemo(() => {
     return providers.map(provider => provider.provider.replace(/(.+)\/([^/]+)$/, '$1'))
   }, [providers])
-  const [collectionPlugins, setCollectionPlugins] = useState<Plugin[]>([])
-
+  const {
+    plugins: collectionPlugins = [],
+    isLoading: isCollectionLoading,
+  } = useMarketplacePluginsByCollectionId('__model-settings-pinned-models')
   const {
     plugins,
     queryPlugins,
     queryPluginsWithDebounced,
-    isLoading,
+    isLoading: isPluginsLoading,
   } = useMarketplacePlugins()
 
-  const getCollectionPlugins = useCallback(async () => {
-    const collectionPlugins = await getMarketplacePluginsByCollectionId('__model-settings-pinned-models')
-
-    setCollectionPlugins(collectionPlugins)
-  }, [])
-
-  useEffect(() => {
-    getCollectionPlugins()
-  }, [getCollectionPlugins])
-
   useEffect(() => {
     if (searchText) {
       queryPluginsWithDebounced({
@@ -315,7 +306,7 @@ export const useMarketplaceAllPlugins = (providers: ModelProvider[], searchText:
 
   return {
     plugins: allPlugins,
-    isLoading,
+    isLoading: isCollectionLoading || isPluginsLoading,
   }
 }
 

web/app/components/header/app-nav/index.tsx

@@ -3,7 +3,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'next/navigation'
-import useSWRInfinite from 'swr/infinite'
 import { flatten } from 'lodash-es'
 import { produce } from 'immer'
 import {
@@ -12,33 +11,13 @@ import {
 } from '@remixicon/react'
 import Nav from '../nav'
 import type { NavItem } from '../nav/nav-selector'
-import { fetchAppList } from '@/service/apps'
 import CreateAppTemplateDialog from '@/app/components/app/create-app-dialog'
 import CreateAppModal from '@/app/components/app/create-app-modal'
 import CreateFromDSLModal from '@/app/components/app/create-from-dsl-modal'
-import type { AppListResponse } from '@/models/app'
 import { useAppContext } from '@/context/app-context'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { AppModeEnum } from '@/types/app'
-
-const getKey = (
-  pageIndex: number,
-  previousPageData: AppListResponse,
-  activeTab: string,
-  keywords: string,
-) => {
-  if (!pageIndex || previousPageData.has_more) {
-    const params: any = { url: 'apps', params: { page: pageIndex + 1, limit: 30, name: keywords } }
-
-    if (activeTab !== 'all')
-      params.params.mode = activeTab
-    else
-      delete params.params.mode
-
-    return params
-  }
-  return null
-}
+import { useInfiniteAppList } from '@/service/use-apps'
 
 const AppNav = () => {
   const { t } = useTranslation()
@@ -50,17 +29,21 @@ const AppNav = () => {
   const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(false)
   const [navItems, setNavItems] = useState<NavItem[]>([])
 
-  const { data: appsData, setSize, mutate } = useSWRInfinite(
-    appId
-      ? (pageIndex: number, previousPageData: AppListResponse) => getKey(pageIndex, previousPageData, 'all', '')
-      : () => null,
-    fetchAppList,
-    { revalidateFirstPage: false },
-  )
+  const {
+    data: appsData,
+    fetchNextPage,
+    hasNextPage,
+    refetch,
+  } = useInfiniteAppList({
+    page: 1,
+    limit: 30,
+    name: '',
+  }, { enabled: !!appId })
 
   const handleLoadMore = useCallback(() => {
-    setSize(size => size + 1)
-  }, [setSize])
+    if (hasNextPage)
+      fetchNextPage()
+  }, [fetchNextPage, hasNextPage])
 
   const openModal = (state: string) => {
     if (state === 'blank')
@@ -73,7 +56,7 @@ const AppNav = () => {
 
   useEffect(() => {
     if (appsData) {
-      const appItems = flatten(appsData?.map(appData => appData.data))
+      const appItems = flatten((appsData.pages ?? []).map(appData => appData.data))
       const navItems = appItems.map((app) => {
         const link = ((isCurrentWorkspaceEditor, app) => {
           if (!isCurrentWorkspaceEditor) {
@@ -132,17 +115,17 @@ const AppNav = () => {
       <CreateAppModal
         show={showNewAppDialog}
         onClose={() => setShowNewAppDialog(false)}
-        onSuccess={() => mutate()}
+        onSuccess={() => refetch()}
       />
       <CreateAppTemplateDialog
         show={showNewAppTemplateDialog}
         onClose={() => setShowNewAppTemplateDialog(false)}
-        onSuccess={() => mutate()}
+        onSuccess={() => refetch()}
       />
       <CreateFromDSLModal
         show={showCreateFromDSLModal}
         onClose={() => setShowCreateFromDSLModal(false)}
-        onSuccess={() => mutate()}
+        onSuccess={() => refetch()}
       />
     </>
   )

web/app/components/plugins/marketplace/constants.ts

@@ -2,3 +2,5 @@ export const DEFAULT_SORT = {
   sortBy: 'install_count',
   sortOrder: 'DESC',
 }
+
+export const SCROLL_BOTTOM_THRESHOLD = 100

web/app/components/plugins/marketplace/context.tsx

@@ -50,7 +50,7 @@ export type MarketplaceContextValue = {
   activePluginType: string
   handleActivePluginTypeChange: (type: string) => void
   page: number
-  handlePageChange: (page: number) => void
+  handlePageChange: () => void
   plugins?: Plugin[]
   pluginsTotal?: number
   resetPlugins: () => void
@@ -128,8 +128,6 @@ export const MarketplaceContextProvider = ({
   const filterPluginTagsRef = useRef(filterPluginTags)
   const [activePluginType, setActivePluginType] = useState(categoryFromSearchParams)
   const activePluginTypeRef = useRef(activePluginType)
-  const [page, setPage] = useState(1)
-  const pageRef = useRef(page)
   const [sort, setSort] = useState(DEFAULT_SORT)
   const sortRef = useRef(sort)
   const {
@@ -149,7 +147,11 @@ export const MarketplaceContextProvider = ({
     queryPluginsWithDebounced,
     cancelQueryPluginsWithDebounced,
     isLoading: isPluginsLoading,
+    fetchNextPage: fetchNextPluginsPage,
+    hasNextPage: hasNextPluginsPage,
+    page: pluginsPage,
   } = useMarketplacePlugins()
+  const page = Math.max(pluginsPage || 0, 1)
 
   useEffect(() => {
     if (queryFromSearchParams || hasValidTags || hasValidCategory) {
@@ -160,7 +162,6 @@ export const MarketplaceContextProvider = ({
         sortBy: sortRef.current.sortBy,
         sortOrder: sortRef.current.sortOrder,
         type: getMarketplaceListFilterType(activePluginTypeRef.current),
-        page: pageRef.current,
       })
       const url = new URL(window.location.href)
       if (searchParams?.language)
@@ -221,7 +222,6 @@ export const MarketplaceContextProvider = ({
         sortOrder: sortRef.current.sortOrder,
         exclude,
         type: getMarketplaceListFilterType(activePluginTypeRef.current),
-        page: pageRef.current,
       })
     }
     else {
@@ -233,7 +233,6 @@ export const MarketplaceContextProvider = ({
         sortOrder: sortRef.current.sortOrder,
         exclude,
         type: getMarketplaceListFilterType(activePluginTypeRef.current),
-        page: pageRef.current,
       })
     }
   }, [exclude, queryPluginsWithDebounced, queryPlugins, handleUpdateSearchParams])
@@ -252,8 +251,6 @@ export const MarketplaceContextProvider = ({
   const handleSearchPluginTextChange = useCallback((text: string) => {
     setSearchPluginText(text)
     searchPluginTextRef.current = text
-    setPage(1)
-    pageRef.current = 1
 
     handleQuery(true)
   }, [handleQuery])
@@ -261,8 +258,6 @@ export const MarketplaceContextProvider = ({
   const handleFilterPluginTagsChange = useCallback((tags: string[]) => {
     setFilterPluginTags(tags)
     filterPluginTagsRef.current = tags
-    setPage(1)
-    pageRef.current = 1
 
     handleQuery()
   }, [handleQuery])
@@ -270,8 +265,6 @@ export const MarketplaceContextProvider = ({
   const handleActivePluginTypeChange = useCallback((type: string) => {
     setActivePluginType(type)
     activePluginTypeRef.current = type
-    setPage(1)
-    pageRef.current = 1
 
     handleQuery()
   }, [handleQuery])
@@ -279,20 +272,14 @@ export const MarketplaceContextProvider = ({
   const handleSortChange = useCallback((sort: PluginsSort) => {
     setSort(sort)
     sortRef.current = sort
-    setPage(1)
-    pageRef.current = 1
 
     handleQueryPlugins()
   }, [handleQueryPlugins])
 
   const handlePageChange = useCallback(() => {
-    if (pluginsTotal && plugins && pluginsTotal > plugins.length) {
-      setPage(pageRef.current + 1)
-      pageRef.current++
-
-      handleQueryPlugins()
-    }
-  }, [handleQueryPlugins, plugins, pluginsTotal])
+    if (hasNextPluginsPage)
+      fetchNextPluginsPage()
+  }, [fetchNextPluginsPage, hasNextPluginsPage])
 
   const handleMoreClick = useCallback((searchParams: SearchParamsFromCollection) => {
     setSearchPluginText(searchParams?.query || '')
@@ -305,9 +292,6 @@ export const MarketplaceContextProvider = ({
       sortBy: searchParams?.sort_by || DEFAULT_SORT.sortBy,
       sortOrder: searchParams?.sort_order || DEFAULT_SORT.sortOrder,
     }
-    setPage(1)
-    pageRef.current = 1
-
     handleQueryPlugins()
   }, [handleQueryPlugins])
 

web/app/components/plugins/marketplace/hooks.ts

@@ -3,6 +3,11 @@ import {
   useEffect,
   useState,
 } from 'react'
+import {
+  useInfiniteQuery,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { useDebounceFn } from 'ahooks'
 import type {
@@ -16,39 +21,41 @@ import type {
 import {
   getFormattedPlugin,
   getMarketplaceCollectionsAndPlugins,
+  getMarketplacePluginsByCollectionId,
 } from './utils'
+import { SCROLL_BOTTOM_THRESHOLD } from './constants'
 import i18n from '@/i18n-config/i18next-config'
-import {
-  useMutationPluginsFromMarketplace,
-} from '@/service/use-plugins'
+import { postMarketplace } from '@/service/base'
+import type { PluginsFromMarketplaceResponse } from '@/app/components/plugins/types'
 
 export const useMarketplaceCollectionsAndPlugins = () => {
-  const [isLoading, setIsLoading] = useState(false)
-  const [isSuccess, setIsSuccess] = useState(false)
-  const [marketplaceCollections, setMarketplaceCollections] = useState<MarketplaceCollection[]>()
-  const [marketplaceCollectionPluginsMap, setMarketplaceCollectionPluginsMap] = useState<Record<string, Plugin[]>>()
+  const [queryParams, setQueryParams] = useState<CollectionsAndPluginsSearchParams>()
+  const [marketplaceCollectionsOverride, setMarketplaceCollections] = useState<MarketplaceCollection[]>()
+  const [marketplaceCollectionPluginsMapOverride, setMarketplaceCollectionPluginsMap] = useState<Record<string, Plugin[]>>()
 
-  const queryMarketplaceCollectionsAndPlugins = useCallback(async (query?: CollectionsAndPluginsSearchParams) => {
-    try {
-      setIsLoading(true)
-      setIsSuccess(false)
-      const { marketplaceCollections, marketplaceCollectionPluginsMap } = await getMarketplaceCollectionsAndPlugins(query)
-      setIsLoading(false)
-      setIsSuccess(true)
-      setMarketplaceCollections(marketplaceCollections)
-      setMarketplaceCollectionPluginsMap(marketplaceCollectionPluginsMap)
-    }
-    // eslint-disable-next-line unused-imports/no-unused-vars
-    catch (e) {
-      setIsLoading(false)
-      setIsSuccess(false)
-    }
+  const {
+    data,
+    isFetching,
+    isSuccess,
+    isPending,
+  } = useQuery({
+    queryKey: ['marketplaceCollectionsAndPlugins', queryParams],
+    queryFn: ({ signal }) => getMarketplaceCollectionsAndPlugins(queryParams, { signal }),
+    enabled: queryParams !== undefined,
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 10,
+    retry: false,
+  })
+
+  const queryMarketplaceCollectionsAndPlugins = useCallback((query?: CollectionsAndPluginsSearchParams) => {
+    setQueryParams(query ? { ...query } : {})
   }, [])
+  const isLoading = !!queryParams && (isFetching || isPending)
 
   return {
-    marketplaceCollections,
+    marketplaceCollections: marketplaceCollectionsOverride ?? data?.marketplaceCollections,
     setMarketplaceCollections,
-    marketplaceCollectionPluginsMap,
+    marketplaceCollectionPluginsMap: marketplaceCollectionPluginsMapOverride ?? data?.marketplaceCollectionPluginsMap,
     setMarketplaceCollectionPluginsMap,
     queryMarketplaceCollectionsAndPlugins,
     isLoading,
@@ -56,37 +63,128 @@ export const useMarketplaceCollectionsAndPlugins = () => {
   }
 }
 
-export const useMarketplacePlugins = () => {
+export const useMarketplacePluginsByCollectionId = (
+  collectionId?: string,
+  query?: CollectionsAndPluginsSearchParams,
+) => {
   const {
     data,
-    mutateAsync,
-    reset,
+    isFetching,
+    isSuccess,
     isPending,
-  } = useMutationPluginsFromMarketplace()
+  } = useQuery({
+    queryKey: ['marketplaceCollectionPlugins', collectionId, query],
+    queryFn: ({ signal }) => {
+      if (!collectionId)
+        return Promise.resolve<Plugin[]>([])
+      return getMarketplacePluginsByCollectionId(collectionId, query, { signal })
+    },
+    enabled: !!collectionId,
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 10,
+    retry: false,
+  })
 
-  const [prevPlugins, setPrevPlugins] = useState<Plugin[] | undefined>()
+  return {
+    plugins: data || [],
+    isLoading: !!collectionId && (isFetching || isPending),
+    isSuccess,
+  }
+}
+
+export const useMarketplacePlugins = () => {
+  const queryClient = useQueryClient()
+  const [queryParams, setQueryParams] = useState<PluginsSearchParams>()
+
+  const normalizeParams = useCallback((pluginsSearchParams: PluginsSearchParams) => {
+    const pageSize = pluginsSearchParams.pageSize || 40
+
+    return {
+      ...pluginsSearchParams,
+      pageSize,
+    }
+  }, [])
+
+  const marketplacePluginsQuery = useInfiniteQuery({
+    queryKey: ['marketplacePlugins', queryParams],
+    queryFn: async ({ pageParam = 1, signal }) => {
+      if (!queryParams) {
+        return {
+          plugins: [] as Plugin[],
+          total: 0,
+          page: 1,
+          pageSize: 40,
+        }
+      }
+
+      const params = normalizeParams(queryParams)
+      const {
+        query,
+        sortBy,
+        sortOrder,
+        category,
+        tags,
+        exclude,
+        type,
+        pageSize,
+      } = params
+      const pluginOrBundle = type === 'bundle' ? 'bundles' : 'plugins'
+
+      try {
+        const res = await postMarketplace<{ data: PluginsFromMarketplaceResponse }>(`/${pluginOrBundle}/search/advanced`, {
+          body: {
+            page: pageParam,
+            page_size: pageSize,
+            query,
+            sort_by: sortBy,
+            sort_order: sortOrder,
+            category: category !== 'all' ? category : '',
+            tags,
+            exclude,
+            type,
+          },
+          signal,
+        })
+        const resPlugins = res.data.bundles || res.data.plugins || []
+
+        return {
+          plugins: resPlugins.map(plugin => getFormattedPlugin(plugin)),
+          total: res.data.total,
+          page: pageParam,
+          pageSize,
+        }
+      }
+      catch {
+        return {
+          plugins: [],
+          total: 0,
+          page: pageParam,
+          pageSize,
+        }
+      }
+    },
+    getNextPageParam: (lastPage) => {
+      const nextPage = lastPage.page + 1
+      const loaded = lastPage.page * lastPage.pageSize
+      return loaded < (lastPage.total || 0) ? nextPage : undefined
+    },
+    initialPageParam: 1,
+    enabled: !!queryParams,
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 10,
+    retry: false,
+  })
 
   const resetPlugins = useCallback(() => {
-    reset()
-    setPrevPlugins(undefined)
-  }, [reset])
+    setQueryParams(undefined)
+    queryClient.removeQueries({
+      queryKey: ['marketplacePlugins'],
+    })
+  }, [queryClient])
 
   const handleUpdatePlugins = useCallback((pluginsSearchParams: PluginsSearchParams) => {
-    mutateAsync(pluginsSearchParams).then((res) => {
-      const currentPage = pluginsSearchParams.page || 1
-      const resPlugins = res.data.bundles || res.data.plugins
-      if (currentPage > 1) {
-        setPrevPlugins(prevPlugins => [...(prevPlugins || []), ...resPlugins.map((plugin) => {
-          return getFormattedPlugin(plugin)
-        })])
-      }
-      else {
-        setPrevPlugins(resPlugins.map((plugin) => {
-          return getFormattedPlugin(plugin)
-        }))
-      }
-    })
-  }, [mutateAsync])
+    setQueryParams(normalizeParams(pluginsSearchParams))
+  }, [normalizeParams])
 
   const { run: queryPluginsWithDebounced, cancel: cancelQueryPluginsWithDebounced } = useDebounceFn((pluginsSearchParams: PluginsSearchParams) => {
     handleUpdatePlugins(pluginsSearchParams)
@@ -94,14 +192,29 @@ export const useMarketplacePlugins = () => {
     wait: 500,
   })
 
+  const hasQuery = !!queryParams
+  const hasData = marketplacePluginsQuery.data !== undefined
+  const plugins = hasQuery && hasData
+    ? marketplacePluginsQuery.data.pages.flatMap(page => page.plugins)
+    : undefined
+  const total = hasQuery && hasData ? marketplacePluginsQuery.data.pages?.[0]?.total : undefined
+  const isPluginsLoading = hasQuery && (
+    marketplacePluginsQuery.isPending
+    || (marketplacePluginsQuery.isFetching && !marketplacePluginsQuery.data)
+  )
+
   return {
-    plugins: prevPlugins,
-    total: data?.data?.total,
+    plugins,
+    total,
     resetPlugins,
     queryPlugins: handleUpdatePlugins,
     queryPluginsWithDebounced,
     cancelQueryPluginsWithDebounced,
-    isLoading: isPending,
+    isLoading: isPluginsLoading,
+    isFetchingNextPage: marketplacePluginsQuery.isFetchingNextPage,
+    hasNextPage: marketplacePluginsQuery.hasNextPage,
+    fetchNextPage: marketplacePluginsQuery.fetchNextPage,
+    page: marketplacePluginsQuery.data?.pages?.length || (marketplacePluginsQuery.isPending && hasQuery ? 1 : 0),
   }
 }
 
@@ -131,7 +244,7 @@ export const useMarketplaceContainerScroll = (
       scrollHeight,
       clientHeight,
     } = target
-    if (scrollTop + clientHeight >= scrollHeight - 5 && scrollTop > 0)
+    if (scrollTop + clientHeight >= scrollHeight - SCROLL_BOTTOM_THRESHOLD && scrollTop > 0)
       callback()
   }, [callback])
 

web/app/components/plugins/marketplace/index.tsx

@@ -4,7 +4,8 @@ import IntersectionLine from './intersection-line'
 import SearchBoxWrapper from './search-box/search-box-wrapper'
 import PluginTypeSwitch from './plugin-type-switch'
 import ListWrapper from './list/list-wrapper'
-import type { SearchParams } from './types'
+import type { MarketplaceCollection, SearchParams } from './types'
+import type { Plugin } from '@/app/components/plugins/types'
 import { getMarketplaceCollectionsAndPlugins } from './utils'
 import { TanstackQueryInitializer } from '@/context/query-client'
 
@@ -30,8 +31,8 @@ const Marketplace = async ({
   scrollContainerId,
   showSearchParams = true,
 }: MarketplaceProps) => {
-  let marketplaceCollections: any = []
-  let marketplaceCollectionPluginsMap = {}
+  let marketplaceCollections: MarketplaceCollection[] = []
+  let marketplaceCollectionPluginsMap: Record<string, Plugin[]> = {}
   if (!shouldExclude) {
     const marketplaceCollectionsAndPluginsData = await getMarketplaceCollectionsAndPlugins()
     marketplaceCollections = marketplaceCollectionsAndPluginsData.marketplaceCollections

web/app/components/plugins/marketplace/list/list-wrapper.tsx

@@ -28,13 +28,20 @@ const ListWrapper = ({
   const isLoading = useMarketplaceContext(v => v.isLoading)
   const isSuccessCollections = useMarketplaceContext(v => v.isSuccessCollections)
   const handleQueryPlugins = useMarketplaceContext(v => v.handleQueryPlugins)
+  const searchPluginText = useMarketplaceContext(v => v.searchPluginText)
+  const filterPluginTags = useMarketplaceContext(v => v.filterPluginTags)
   const page = useMarketplaceContext(v => v.page)
   const handleMoreClick = useMarketplaceContext(v => v.handleMoreClick)
 
   useEffect(() => {
-    if (!marketplaceCollectionsFromClient?.length && isSuccessCollections)
+    if (
+      !marketplaceCollectionsFromClient?.length
+      && isSuccessCollections
+      && !searchPluginText
+      && !filterPluginTags.length
+    )
       handleQueryPlugins()
-  }, [handleQueryPlugins, marketplaceCollections, marketplaceCollectionsFromClient, isSuccessCollections])
+  }, [handleQueryPlugins, marketplaceCollections, marketplaceCollectionsFromClient, isSuccessCollections, searchPluginText, filterPluginTags])
 
   return (
     <div

web/app/components/plugins/marketplace/utils.ts

@@ -13,6 +13,14 @@ import {
 } from '@/config'
 import { getMarketplaceUrl } from '@/utils/var'
 
+type MarketplaceFetchOptions = {
+  signal?: AbortSignal
+}
+
+const getMarketplaceHeaders = () => new Headers({
+  'X-Dify-Version': !IS_MARKETPLACE ? APP_VERSION : '999.0.0',
+})
+
 export const getPluginIconInMarketplace = (plugin: Plugin) => {
   if (plugin.type === 'bundle')
     return `${MARKETPLACE_API_PREFIX}/bundles/${plugin.org}/${plugin.name}/icon`
@@ -46,20 +54,23 @@ export const getPluginDetailLinkInMarketplace = (plugin: Plugin) => {
   return `/plugins/${plugin.org}/${plugin.name}`
 }
 
-export const getMarketplacePluginsByCollectionId = async (collectionId: string, query?: CollectionsAndPluginsSearchParams) => {
-  let plugins: Plugin[]
+export const getMarketplacePluginsByCollectionId = async (
+  collectionId: string,
+  query?: CollectionsAndPluginsSearchParams,
+  options?: MarketplaceFetchOptions,
+) => {
+  let plugins: Plugin[] = []
 
   try {
     const url = `${MARKETPLACE_API_PREFIX}/collections/${collectionId}/plugins`
-    const headers = new Headers({
-      'X-Dify-Version': !IS_MARKETPLACE ? APP_VERSION : '999.0.0',
-    })
+    const headers = getMarketplaceHeaders()
     const marketplaceCollectionPluginsData = await globalThis.fetch(
       url,
       {
         cache: 'no-store',
         method: 'POST',
         headers,
+        signal: options?.signal,
         body: JSON.stringify({
           category: query?.category,
           exclude: query?.exclude,
@@ -68,9 +79,7 @@ export const getMarketplacePluginsByCollectionId = async (collectionId: string,
       },
     )
     const marketplaceCollectionPluginsDataJson = await marketplaceCollectionPluginsData.json()
-    plugins = marketplaceCollectionPluginsDataJson.data.plugins.map((plugin: Plugin) => {
-      return getFormattedPlugin(plugin)
-    })
+    plugins = (marketplaceCollectionPluginsDataJson.data.plugins || []).map((plugin: Plugin) => getFormattedPlugin(plugin))
   }
   // eslint-disable-next-line unused-imports/no-unused-vars
   catch (e) {
@@ -80,23 +89,31 @@ export const getMarketplacePluginsByCollectionId = async (collectionId: string,
   return plugins
 }
 
-export const getMarketplaceCollectionsAndPlugins = async (query?: CollectionsAndPluginsSearchParams) => {
-  let marketplaceCollections = [] as MarketplaceCollection[]
-  let marketplaceCollectionPluginsMap = {} as Record<string, Plugin[]>
+export const getMarketplaceCollectionsAndPlugins = async (
+  query?: CollectionsAndPluginsSearchParams,
+  options?: MarketplaceFetchOptions,
+) => {
+  let marketplaceCollections: MarketplaceCollection[] = []
+  let marketplaceCollectionPluginsMap: Record<string, Plugin[]> = {}
   try {
     let marketplaceUrl = `${MARKETPLACE_API_PREFIX}/collections?page=1&page_size=100`
     if (query?.condition)
       marketplaceUrl += `&condition=${query.condition}`
     if (query?.type)
       marketplaceUrl += `&type=${query.type}`
-    const headers = new Headers({
-      'X-Dify-Version': !IS_MARKETPLACE ? APP_VERSION : '999.0.0',
-    })
-    const marketplaceCollectionsData = await globalThis.fetch(marketplaceUrl, { headers, cache: 'no-store' })
+    const headers = getMarketplaceHeaders()
+    const marketplaceCollectionsData = await globalThis.fetch(
+      marketplaceUrl,
+      {
+        headers,
+        cache: 'no-store',
+        signal: options?.signal,
+      },
+    )
     const marketplaceCollectionsDataJson = await marketplaceCollectionsData.json()
-    marketplaceCollections = marketplaceCollectionsDataJson.data.collections
+    marketplaceCollections = marketplaceCollectionsDataJson.data.collections || []
     await Promise.all(marketplaceCollections.map(async (collection: MarketplaceCollection) => {
-      const plugins = await getMarketplacePluginsByCollectionId(collection.name, query)
+      const plugins = await getMarketplacePluginsByCollectionId(collection.name, query, options)
 
       marketplaceCollectionPluginsMap[collection.name] = plugins
     }))

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

@@ -15,32 +15,10 @@ import type {
   OffsetOptions,
   Placement,
 } from '@floating-ui/react'
-import useSWRInfinite from 'swr/infinite'
-import { fetchAppList } from '@/service/apps'
-import type { AppListResponse } from '@/models/app'
+import { useInfiniteAppList } from '@/service/use-apps'
 
 const PAGE_SIZE = 20
 
-const getKey = (
-  pageIndex: number,
-  previousPageData: AppListResponse,
-  searchText: string,
-) => {
-  if (pageIndex === 0 || (previousPageData && previousPageData.has_more)) {
-    const params: any = {
-      url: 'apps',
-      params: {
-        page: pageIndex + 1,
-        limit: PAGE_SIZE,
-        name: searchText,
-      },
-    }
-
-    return params
-  }
-  return null
-}
-
 type Props = {
   value?: {
     app_id: string
@@ -72,30 +50,32 @@ const AppSelector: FC<Props> = ({
   const [searchText, setSearchText] = useState('')
   const [isLoadingMore, setIsLoadingMore] = useState(false)
 
-  const { data, isLoading, setSize } = useSWRInfinite(
-    (pageIndex: number, previousPageData: AppListResponse) => getKey(pageIndex, previousPageData, searchText),
-    fetchAppList,
-    {
-      revalidateFirstPage: true,
-      shouldRetryOnError: false,
-      dedupingInterval: 500,
-      errorRetryCount: 3,
-    },
-  )
+  const {
+    data,
+    isLoading,
+    isFetchingNextPage,
+    fetchNextPage,
+    hasNextPage,
+  } = useInfiniteAppList({
+    page: 1,
+    limit: PAGE_SIZE,
+    name: searchText,
+  })
 
+  const pages = data?.pages ?? []
   const displayedApps = useMemo(() => {
-    if (!data) return []
-    return data.flatMap(({ data: apps }) => apps)
-  }, [data])
+    if (!pages.length) return []
+    return pages.flatMap(({ data: apps }) => apps)
+  }, [pages])
 
-  const hasMore = data?.at(-1)?.has_more ?? true
+  const hasMore = hasNextPage ?? true
 
   const handleLoadMore = useCallback(async () => {
-    if (isLoadingMore || !hasMore) return
+    if (isLoadingMore || isFetchingNextPage || !hasMore) return
 
     setIsLoadingMore(true)
     try {
-      await setSize((size: number) => size + 1)
+      await fetchNextPage()
     }
     finally {
       // Add a small delay to ensure state updates are complete
@@ -103,7 +83,7 @@ const AppSelector: FC<Props> = ({
         setIsLoadingMore(false)
       }, 300)
     }
-  }, [isLoadingMore, hasMore, setSize])
+  }, [isLoadingMore, isFetchingNextPage, hasMore, fetchNextPage])
 
   const handleTriggerClick = () => {
     if (disabled) return
@@ -185,7 +165,7 @@ const AppSelector: FC<Props> = ({
                 onSelect={handleSelectApp}
                 scope={scope || 'all'}
                 apps={displayedApps}
-                isLoading={isLoading || isLoadingMore}
+                isLoading={isLoading || isLoadingMore || isFetchingNextPage}
                 hasMore={hasMore}
                 onLoadMore={handleLoadMore}
                 searchText={searchText}

web/app/components/tools/marketplace/hooks.ts

@@ -3,12 +3,12 @@ import {
   useEffect,
   useMemo,
   useRef,
-  useState,
 } from 'react'
 import {
   useMarketplaceCollectionsAndPlugins,
   useMarketplacePlugins,
 } from '@/app/components/plugins/marketplace/hooks'
+import { SCROLL_BOTTOM_THRESHOLD } from '@/app/components/plugins/marketplace/constants'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
 import { getMarketplaceListCondition } from '@/app/components/plugins/marketplace/utils'
 import { useAllToolProviders } from '@/service/use-tools'
@@ -31,10 +31,10 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
     queryPlugins,
     queryPluginsWithDebounced,
     isLoading: isPluginsLoading,
-    total: pluginsTotal,
+    fetchNextPage,
+    hasNextPage,
+    page: pluginsPage,
   } = useMarketplacePlugins()
-  const [page, setPage] = useState(1)
-  const pageRef = useRef(page)
   const searchPluginTextRef = useRef(searchPluginText)
   const filterPluginTagsRef = useRef(filterPluginTags)
 
@@ -44,9 +44,6 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
   }, [searchPluginText, filterPluginTags])
   useEffect(() => {
     if ((searchPluginText || filterPluginTags.length) && isSuccess) {
-      setPage(1)
-      pageRef.current = 1
-
       if (searchPluginText) {
         queryPluginsWithDebounced({
           category: PluginCategoryEnum.tool,
@@ -54,7 +51,6 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
           tags: filterPluginTags,
           exclude,
           type: 'plugin',
-          page: pageRef.current,
         })
         return
       }
@@ -64,7 +60,6 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
         tags: filterPluginTags,
         exclude,
         type: 'plugin',
-        page: pageRef.current,
       })
     }
     else {
@@ -87,24 +82,13 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
       scrollHeight,
       clientHeight,
     } = target
-    if (scrollTop + clientHeight >= scrollHeight - 5 && scrollTop > 0) {
+    if (scrollTop + clientHeight >= scrollHeight - SCROLL_BOTTOM_THRESHOLD && scrollTop > 0) {
       const searchPluginText = searchPluginTextRef.current
       const filterPluginTags = filterPluginTagsRef.current
-      if (pluginsTotal && plugins && pluginsTotal > plugins.length && (!!searchPluginText || !!filterPluginTags.length)) {
-        setPage(pageRef.current + 1)
-        pageRef.current++
-
-        queryPlugins({
-          category: PluginCategoryEnum.tool,
-          query: searchPluginText,
-          tags: filterPluginTags,
-          exclude,
-          type: 'plugin',
-          page: pageRef.current,
-        })
-      }
+      if (hasNextPage && (!!searchPluginText || !!filterPluginTags.length))
+        fetchNextPage()
     }
-  }, [exclude, plugins, pluginsTotal, queryPlugins])
+  }, [exclude, fetchNextPage, hasNextPage, plugins, queryPlugins])
 
   return {
     isLoading: isLoading || isPluginsLoading,
@@ -112,6 +96,6 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
     marketplaceCollectionPluginsMap,
     plugins,
     handleScroll,
-    page,
+    page: Math.max(pluginsPage || 0, 1),
   }
 }

web/calculate-complexity.js

@@ -1,128 +0,0 @@
-// https://www.sonarsource.com/blog/5-clean-code-tips-for-reducing-cognitive-complexity/
-const fs = require('fs');
-const path = require('path');
-const { Linter } = require('eslint');
-const sonarPlugin = require('eslint-plugin-sonarjs');
-const tsParser = require('@typescript-eslint/parser');
-
-const linter = new Linter();
-
-const config = {
-  languageOptions: {
-    parser: tsParser,
-    parserOptions: {
-      ecmaVersion: 'latest',
-      sourceType: 'module',
-      ecmaFeatures: {
-        jsx: true
-      }
-    }
-  },
-  plugins: {
-    sonarjs: sonarPlugin,
-  },
-  rules: {
-    'sonarjs/cognitive-complexity': ['error', 0], // always show error
-  },
-};
-
-function getFileComplexity(filePath) {
-  try {
-    const code = fs.readFileSync(filePath, 'utf8');
-
-    const messages = linter.verify(code, config);
-
-    let totalFileComplexity = 0;
-    let maxFileComplexityIndex = 0;
-    const functionComplexities = [];
-
-    messages.forEach((msg) => {
-      // console.log(msg);
-      if (msg.ruleId === 'sonarjs/cognitive-complexity') {
-        const match = msg.message.match(/reduce its Cognitive Complexity from (\d+)/);
-        if (match && match[1]) {
-          const score = parseInt(match[1], 10);
-          totalFileComplexity += score;
-          if (score > functionComplexities[maxFileComplexityIndex]?.score || functionComplexities.length === 0) {
-            maxFileComplexityIndex = functionComplexities.length;
-          }
-
-          functionComplexities.push({
-            line: msg.line,
-            // functionName: extractFunctionName(code, msg.line),
-            score: score,
-            // message: msg.message
-          });
-        }
-      }
-    });
-
-    return {
-      file: filePath,
-      totalComplexity: totalFileComplexity,
-      maxComplexityInfo: functionComplexities[maxFileComplexityIndex],
-      details: functionComplexities
-    };
-
-  } catch (error) {
-    console.error(`Error processing file ${filePath}:`, error);
-    return null;
-  }
-}
-
-function collectTsxFiles(baseDir) {
-  const entries = fs.readdirSync(baseDir, { withFileTypes: true });
-  const files = [];
-
-  entries.forEach((entry) => {
-    const fullPath = path.join(baseDir, entry.name);
-
-    if (entry.isDirectory()) {
-      if (
-        entry.name === 'node_modules' ||
-        entry.name.startsWith('.') ||
-        entry.name === '__test__' ||
-        entry.name === '__tests__'
-      ) {
-        return;
-      }
-      files.push(...collectTsxFiles(fullPath));
-    } else if (
-      entry.isFile() &&
-      entry.name.endsWith('.tsx') &&
-      !entry.name.endsWith('.spec.tsx') &&
-      !entry.name.endsWith('.test.tsx')
-    ) {
-      files.push(fullPath);
-    }
-  });
-
-  return files;
-}
-
-function writeCsv(results, outputPath) {
-  const header = 'File,Total Complexity,Max Complexity,Max Complexity Line';
-  const rows = results.map(({ file, totalComplexity, maxComplexityInfo }) => {
-    const maxScore = maxComplexityInfo?.score ?? 0;
-    const maxLine = maxComplexityInfo?.line ?? '';
-    const targetFile = JSON.stringify(path.relative(process.cwd(), file));
-    return `${targetFile},${totalComplexity},${maxScore},${maxLine}`;
-  });
-
-  fs.writeFileSync(outputPath, [header, ...rows].join('\n'), 'utf8');
-}
-
-function main() {
-  const projectRoot = process.cwd();
-  const tsxFiles = collectTsxFiles(projectRoot);
-  const results = tsxFiles
-    .map(getFileComplexity)
-    .filter((item) => item && item.totalComplexity > 0)
-    .sort((a, b) => b.maxComplexityInfo?.score - a.maxComplexityInfo?.score);
-
-  const outputPath = path.join(projectRoot, 'complexity-report.csv');
-  writeCsv(results, outputPath);
-  console.log(`CSV report written to ${outputPath}`);
-}
-
-main();

web/models/log.ts

@@ -21,9 +21,6 @@ export type ConversationListResponse = {
   logs: Conversation[]
 }
 
-export const fetchLogs = (url: string) =>
-  fetch(url).then<ConversationListResponse>(r => r.json())
-
 export const CompletionParams = ['temperature', 'top_p', 'presence_penalty', 'max_token', 'stop', 'frequency_penalty'] as const
 
 export type CompletionParamType = typeof CompletionParams[number]

web/models/user.ts

@@ -1,17 +0,0 @@
-export type User = {
-  id: string
-  firstName: string
-  lastName: string
-  name: string
-  phone: string
-  username: string
-  email: string
-  avatar: string
-}
-
-export type UserResponse = {
-  users: User[]
-}
-
-export const fetchUsers = (url: string) =>
-  fetch(url).then<UserResponse>(r => r.json())

web/package.json

@@ -179,7 +179,6 @@
     "@types/semver": "^7.7.1",
     "@types/sortablejs": "^1.15.8",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/parser": "^8.48.0",
     "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
     "bing-translate-api": "^4.1.0",

web/pnpm-lock.yaml

@@ -457,9 +457,6 @@ importers:
       '@types/uuid':
         specifier: ^10.0.0
         version: 10.0.0
-      '@typescript-eslint/parser':
-        specifier: ^8.48.0
-        version: 8.48.0(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       autoprefixer:
         specifier: ^10.4.21
         version: 10.4.21(postcss@8.5.6)
@@ -3389,8 +3386,8 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.48.0':
-    resolution: {integrity: sha512-jCzKdm/QK0Kg4V4IK/oMlRZlY+QOcdjv89U2NgKHZk1CYTj82/RVSx1mV/0gqCVMJ/DA+Zf/S4NBWNF8GQ+eqQ==}
+  '@typescript-eslint/parser@8.46.2':
+    resolution: {integrity: sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -3402,32 +3399,16 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.48.0':
-    resolution: {integrity: sha512-Ne4CTZyRh1BecBf84siv42wv5vQvVmgtk8AuiEffKTUo3DrBaGYZueJSxxBZ8fjk/N3DrgChH4TOdIOwOwiqqw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
   '@typescript-eslint/scope-manager@8.46.2':
     resolution: {integrity: sha512-LF4b/NmGvdWEHD2H4MsHD8ny6JpiVNDzrSZr3CsckEgCbAGZbYM4Cqxvi9L+WqDMT+51Ozy7lt2M+d0JLEuBqA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/scope-manager@8.48.0':
-    resolution: {integrity: sha512-uGSSsbrtJrLduti0Q1Q9+BF1/iFKaxGoQwjWOIVNJv0o6omrdyR8ct37m4xIl5Zzpkp69Kkmvom7QFTtue89YQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/tsconfig-utils@8.46.2':
     resolution: {integrity: sha512-a7QH6fw4S57+F5y2FIxxSDyi5M4UfGF+Jl1bCGd7+L4KsaUY80GsiF/t0UoRFDHAguKlBaACWJRmdrc6Xfkkag==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/tsconfig-utils@8.48.0':
-    resolution: {integrity: sha512-WNebjBdFdyu10sR1M4OXTt2OkMd5KWIL+LLfeH9KhgP+jzfDV/LI3eXzwJ1s9+Yc0Kzo2fQCdY/OpdusCMmh6w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
   '@typescript-eslint/type-utils@8.46.2':
     resolution: {integrity: sha512-HbPM4LbaAAt/DjxXaG9yiS9brOOz6fabal4uvUmaUYe6l3K1phQDMQKBRUrr06BQkxkvIZVVHttqiybM9nJsLA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3439,22 +3420,12 @@ packages:
     resolution: {integrity: sha512-lNCWCbq7rpg7qDsQrd3D6NyWYu+gkTENkG5IKYhUIcxSb59SQC/hEQ+MrG4sTgBVghTonNWq42bA/d4yYumldQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/types@8.48.0':
-    resolution: {integrity: sha512-cQMcGQQH7kwKoVswD1xdOytxQR60MWKM1di26xSUtxehaDs/32Zpqsu5WJlXTtTTqyAVK8R7hvsUnIXRS+bjvA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/typescript-estree@8.46.2':
     resolution: {integrity: sha512-f7rW7LJ2b7Uh2EiQ+7sza6RDZnajbNbemn54Ob6fRwQbgcIn+GWfyuHDHRYgRoZu1P4AayVScrRW+YfbTvPQoQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/typescript-estree@8.48.0':
-    resolution: {integrity: sha512-ljHab1CSO4rGrQIAyizUS6UGHHCiAYhbfcIZ1zVJr5nMryxlXMVWS3duFPSKvSUbFPwkXMFk1k0EMIjub4sRRQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
   '@typescript-eslint/utils@8.46.2':
     resolution: {integrity: sha512-sExxzucx0Tud5tE0XqR0lT0psBQvEpnpiul9XbGUB1QwpWJJAps1O/Z7hJxLGiZLBKMCutjTzDgmd1muEhBnVg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3466,10 +3437,6 @@ packages:
     resolution: {integrity: sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/visitor-keys@8.48.0':
-    resolution: {integrity: sha512-T0XJMaRPOH3+LBbAfzR2jalckP1MSG/L9eUtY0DEzUyVaXJ/t6zN0nR7co5kz0Jko/nkSYCBRkz1djvjajVTTg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
@@ -8536,8 +8503,8 @@ snapshots:
       '@eslint-community/eslint-plugin-eslint-comments': 4.5.0(eslint@9.38.0(jiti@1.21.7))
       '@eslint/markdown': 7.4.1
       '@stylistic/eslint-plugin': 5.5.0(eslint@9.38.0(jiti@1.21.7))
-      '@typescript-eslint/eslint-plugin': 8.46.2(@typescript-eslint/parser@8.48.0(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.48.0(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@vitest/eslint-plugin': 1.3.23(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       ansis: 4.2.0
       cac: 6.7.14
@@ -8557,8 +8524,8 @@ snapshots:
       eslint-plugin-regexp: 2.10.0(eslint@9.38.0(jiti@1.21.7))
       eslint-plugin-toml: 0.12.0(eslint@9.38.0(jiti@1.21.7))
       eslint-plugin-unicorn: 61.0.2(eslint@9.38.0(jiti@1.21.7))
-      eslint-plugin-unused-imports: 4.3.0(@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.48.0(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))
-      eslint-plugin-vue: 10.5.1(@stylistic/eslint-plugin@5.5.0(eslint@9.38.0(jiti@1.21.7)))(@typescript-eslint/parser@8.48.0(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.38.0(jiti@1.21.7)))
+      eslint-plugin-unused-imports: 4.3.0(@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))
+      eslint-plugin-vue: 10.5.1(@stylistic/eslint-plugin@5.5.0(eslint@9.38.0(jiti@1.21.7)))(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.38.0(jiti@1.21.7)))
       eslint-plugin-yml: 1.19.0(eslint@9.38.0(jiti@1.21.7))
       eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.22)(eslint@9.38.0(jiti@1.21.7))
       globals: 16.4.0
@@ -11864,10 +11831,10 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
-  '@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.48.0(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.48.0(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@typescript-eslint/scope-manager': 8.46.2
       '@typescript-eslint/type-utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
@@ -11881,12 +11848,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.48.0(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.48.0
-      '@typescript-eslint/types': 8.48.0
-      '@typescript-eslint/typescript-estree': 8.48.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.48.0
+      '@typescript-eslint/scope-manager': 8.46.2
+      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.46.2
       debug: 4.4.3
       eslint: 9.38.0(jiti@1.21.7)
       typescript: 5.9.3
@@ -11902,33 +11869,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.48.0(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.48.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.48.0
-      debug: 4.4.3
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/scope-manager@8.46.2':
     dependencies:
       '@typescript-eslint/types': 8.46.2
       '@typescript-eslint/visitor-keys': 8.46.2
 
-  '@typescript-eslint/scope-manager@8.48.0':
-    dependencies:
-      '@typescript-eslint/types': 8.48.0
-      '@typescript-eslint/visitor-keys': 8.48.0
-
   '@typescript-eslint/tsconfig-utils@8.46.2(typescript@5.9.3)':
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/tsconfig-utils@8.48.0(typescript@5.9.3)':
-    dependencies:
-      typescript: 5.9.3
-
   '@typescript-eslint/type-utils@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.46.2
@@ -11943,8 +11892,6 @@ snapshots:
 
   '@typescript-eslint/types@8.46.2': {}
 
-  '@typescript-eslint/types@8.48.0': {}
-
   '@typescript-eslint/typescript-estree@8.46.2(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/project-service': 8.46.2(typescript@5.9.3)
@@ -11961,21 +11908,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.48.0(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.48.0(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.48.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.48.0
-      '@typescript-eslint/visitor-keys': 8.48.0
-      debug: 4.4.3
-      minimatch: 9.0.5
-      semver: 7.7.3
-      tinyglobby: 0.2.15
-      ts-api-utils: 2.1.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/utils@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@1.21.7))
@@ -11992,11 +11924,6 @@ snapshots:
       '@typescript-eslint/types': 8.46.2
       eslint-visitor-keys: 4.2.1
 
-  '@typescript-eslint/visitor-keys@8.48.0':
-    dependencies:
-      '@typescript-eslint/types': 8.48.0
-      eslint-visitor-keys: 4.2.1
-
   '@ungap/structured-clone@1.3.0': {}
 
   '@vitest/eslint-plugin@1.3.23(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
@@ -13724,13 +13651,13 @@ snapshots:
       semver: 7.7.3
       strip-indent: 4.1.1
 
-  eslint-plugin-unused-imports@4.3.0(@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.48.0(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7)):
+  eslint-plugin-unused-imports@4.3.0(@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7)):
     dependencies:
       eslint: 9.38.0(jiti@1.21.7)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.46.2(@typescript-eslint/parser@8.48.0(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
 
-  eslint-plugin-vue@10.5.1(@stylistic/eslint-plugin@5.5.0(eslint@9.38.0(jiti@1.21.7)))(@typescript-eslint/parser@8.48.0(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.38.0(jiti@1.21.7))):
+  eslint-plugin-vue@10.5.1(@stylistic/eslint-plugin@5.5.0(eslint@9.38.0(jiti@1.21.7)))(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.38.0(jiti@1.21.7))):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@1.21.7))
       eslint: 9.38.0(jiti@1.21.7)
@@ -13742,7 +13669,7 @@ snapshots:
       xml-name-validator: 4.0.0
     optionalDependencies:
       '@stylistic/eslint-plugin': 5.5.0(eslint@9.38.0(jiti@1.21.7))
-      '@typescript-eslint/parser': 8.48.0(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
 
   eslint-plugin-yml@1.19.0(eslint@9.38.0(jiti@1.21.7)):
     dependencies:

web/service/apps.ts

@@ -1,15 +1,14 @@
-import type { Fetcher } from 'swr'
 import { del, get, patch, post, put } from './base'
 import type { ApiKeysListResponse, AppDailyConversationsResponse, AppDailyEndUsersResponse, AppDailyMessagesResponse, AppDetailResponse, AppListResponse, AppStatisticsResponse, AppTemplatesResponse, AppTokenCostsResponse, AppVoicesListResponse, CreateApiKeyResponse, DSLImportMode, DSLImportResponse, GenerationIntroductionResponse, TracingConfig, TracingStatus, UpdateAppModelConfigResponse, UpdateAppSiteCodeResponse, UpdateOpenAIKeyResponse, ValidateOpenAIKeyResponse, WebhookTriggerResponse, WorkflowDailyConversationsResponse } from '@/models/app'
 import type { CommonResponse } from '@/models/common'
 import type { AppIconType, AppModeEnum, ModelConfig } from '@/types/app'
 import type { TracingProvider } from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/type'
 
-export const fetchAppList: Fetcher<AppListResponse, { url: string; params?: Record<string, any> }> = ({ url, params }) => {
+export const fetchAppList = ({ url, params }: { url: string; params?: Record<string, any> }): Promise<AppListResponse> => {
   return get<AppListResponse>(url, { params })
 }
 
-export const fetchAppDetail: Fetcher<AppDetailResponse, { url: string; id: string }> = ({ url, id }) => {
+export const fetchAppDetail = ({ url, id }: { url: string; id: string }): Promise<AppDetailResponse> => {
   return get<AppDetailResponse>(`${url}/${id}`)
 }
 
@@ -18,24 +17,74 @@ export const fetchAppDetailDirect = async ({ url, id }: { url: string; id: strin
   return get<AppDetailResponse>(`${url}/${id}`)
 }
 
-export const fetchAppTemplates: Fetcher<AppTemplatesResponse, { url: string }> = ({ url }) => {
+export const fetchAppTemplates = ({ url }: { url: string }): Promise<AppTemplatesResponse> => {
   return get<AppTemplatesResponse>(url)
 }
 
-export const createApp: Fetcher<AppDetailResponse, { name: string; icon_type?: AppIconType; icon?: string; icon_background?: string; mode: AppModeEnum; description?: string; config?: ModelConfig }> = ({ name, icon_type, icon, icon_background, mode, description, config }) => {
+export const createApp = ({
+  name,
+  icon_type,
+  icon,
+  icon_background,
+  mode,
+  description,
+  config,
+}: {
+  name: string
+  icon_type?: AppIconType
+  icon?: string
+  icon_background?: string
+  mode: AppModeEnum
+  description?: string
+  config?: ModelConfig
+}): Promise<AppDetailResponse> => {
   return post<AppDetailResponse>('apps', { body: { name, icon_type, icon, icon_background, mode, description, model_config: config } })
 }
 
-export const updateAppInfo: Fetcher<AppDetailResponse, { appID: string; name: string; icon_type: AppIconType; icon: string; icon_background?: string; description: string; use_icon_as_answer_icon?: boolean; max_active_requests?: number | null }> = ({ appID, name, icon_type, icon, icon_background, description, use_icon_as_answer_icon, max_active_requests }) => {
+export const updateAppInfo = ({
+  appID,
+  name,
+  icon_type,
+  icon,
+  icon_background,
+  description,
+  use_icon_as_answer_icon,
+  max_active_requests,
+}: {
+  appID: string
+  name: string
+  icon_type: AppIconType
+  icon: string
+  icon_background?: string
+  description: string
+  use_icon_as_answer_icon?: boolean
+  max_active_requests?: number | null
+}): Promise<AppDetailResponse> => {
   const body = { name, icon_type, icon, icon_background, description, use_icon_as_answer_icon, max_active_requests }
   return put<AppDetailResponse>(`apps/${appID}`, { body })
 }
 
-export const copyApp: Fetcher<AppDetailResponse, { appID: string; name: string; icon_type: AppIconType; icon: string; icon_background?: string | null; mode: AppModeEnum; description?: string }> = ({ appID, name, icon_type, icon, icon_background, mode, description }) => {
+export const copyApp = ({
+  appID,
+  name,
+  icon_type,
+  icon,
+  icon_background,
+  mode,
+  description,
+}: {
+  appID: string
+  name: string
+  icon_type: AppIconType
+  icon: string
+  icon_background?: string | null
+  mode: AppModeEnum
+  description?: string
+}): Promise<AppDetailResponse> => {
   return post<AppDetailResponse>(`apps/${appID}/copy`, { body: { name, icon_type, icon, icon_background, mode, description } })
 }
 
-export const exportAppConfig: Fetcher<{ data: string }, { appID: string; include?: boolean; workflowID?: string }> = ({ appID, include = false, workflowID }) => {
+export const exportAppConfig = ({ appID, include = false, workflowID }: { appID: string; include?: boolean; workflowID?: string }): Promise<{ data: string }> => {
   const params = new URLSearchParams({
     include_secret: include.toString(),
   })
@@ -44,126 +93,116 @@ export const exportAppConfig: Fetcher<{ data: string }, { appID: string; include
   return get<{ data: string }>(`apps/${appID}/export?${params.toString()}`)
 }
 
-// TODO: delete
-export const importApp: Fetcher<AppDetailResponse, { data: string; name?: string; description?: string; icon_type?: AppIconType; icon?: string; icon_background?: string }> = ({ data, name, description, icon_type, icon, icon_background }) => {
-  return post<AppDetailResponse>('apps/import', { body: { data, name, description, icon_type, icon, icon_background } })
-}
-
-// TODO: delete
-export const importAppFromUrl: Fetcher<AppDetailResponse, { url: string; name?: string; description?: string; icon?: string; icon_background?: string }> = ({ url, name, description, icon, icon_background }) => {
-  return post<AppDetailResponse>('apps/import/url', { body: { url, name, description, icon, icon_background } })
-}
-
-export const importDSL: Fetcher<DSLImportResponse, { mode: DSLImportMode; yaml_content?: string; yaml_url?: string; app_id?: string; name?: string; description?: string; icon_type?: AppIconType; icon?: string; icon_background?: string }> = ({ mode, yaml_content, yaml_url, app_id, name, description, icon_type, icon, icon_background }) => {
+export const importDSL = ({ mode, yaml_content, yaml_url, app_id, name, description, icon_type, icon, icon_background }: { mode: DSLImportMode; yaml_content?: string; yaml_url?: string; app_id?: string; name?: string; description?: string; icon_type?: AppIconType; icon?: string; icon_background?: string }): Promise<DSLImportResponse> => {
   return post<DSLImportResponse>('apps/imports', { body: { mode, yaml_content, yaml_url, app_id, name, description, icon, icon_type, icon_background } })
 }
 
-export const importDSLConfirm: Fetcher<DSLImportResponse, { import_id: string }> = ({ import_id }) => {
+export const importDSLConfirm = ({ import_id }: { import_id: string }): Promise<DSLImportResponse> => {
   return post<DSLImportResponse>(`apps/imports/${import_id}/confirm`, { body: {} })
 }
 
-export const switchApp: Fetcher<{ new_app_id: string }, { appID: string; name: string; icon_type: AppIconType; icon: string; icon_background?: string | null }> = ({ appID, name, icon_type, icon, icon_background }) => {
+export const switchApp = ({ appID, name, icon_type, icon, icon_background }: { appID: string; name: string; icon_type: AppIconType; icon: string; icon_background?: string | null }): Promise<{ new_app_id: string }> => {
   return post<{ new_app_id: string }>(`apps/${appID}/convert-to-workflow`, { body: { name, icon_type, icon, icon_background } })
 }
 
-export const deleteApp: Fetcher<CommonResponse, string> = (appID) => {
+export const deleteApp = (appID: string): Promise<CommonResponse> => {
   return del<CommonResponse>(`apps/${appID}`)
 }
 
-export const updateAppSiteStatus: Fetcher<AppDetailResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
+export const updateAppSiteStatus = ({ url, body }: { url: string; body: Record<string, any> }): Promise<AppDetailResponse> => {
   return post<AppDetailResponse>(url, { body })
 }
 
-export const updateAppApiStatus: Fetcher<AppDetailResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
+export const updateAppApiStatus = ({ url, body }: { url: string; body: Record<string, any> }): Promise<AppDetailResponse> => {
   return post<AppDetailResponse>(url, { body })
 }
 
 // path: /apps/{appId}/rate-limit
-export const updateAppRateLimit: Fetcher<AppDetailResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
+export const updateAppRateLimit = ({ url, body }: { url: string; body: Record<string, any> }): Promise<AppDetailResponse> => {
   return post<AppDetailResponse>(url, { body })
 }
 
-export const updateAppSiteAccessToken: Fetcher<UpdateAppSiteCodeResponse, { url: string }> = ({ url }) => {
+export const updateAppSiteAccessToken = ({ url }: { url: string }): Promise<UpdateAppSiteCodeResponse> => {
   return post<UpdateAppSiteCodeResponse>(url)
 }
 
-export const updateAppSiteConfig = ({ url, body }: { url: string; body: Record<string, any> }) => {
+export const updateAppSiteConfig = ({ url, body }: { url: string; body: Record<string, any> }): Promise<AppDetailResponse> => {
   return post<AppDetailResponse>(url, { body })
 }
 
-export const getAppDailyMessages: Fetcher<AppDailyMessagesResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const getAppDailyMessages = ({ url, params }: { url: string; params: Record<string, any> }): Promise<AppDailyMessagesResponse> => {
   return get<AppDailyMessagesResponse>(url, { params })
 }
 
-export const getAppDailyConversations: Fetcher<AppDailyConversationsResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const getAppDailyConversations = ({ url, params }: { url: string; params: Record<string, any> }): Promise<AppDailyConversationsResponse> => {
   return get<AppDailyConversationsResponse>(url, { params })
 }
 
-export const getWorkflowDailyConversations: Fetcher<WorkflowDailyConversationsResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const getWorkflowDailyConversations = ({ url, params }: { url: string; params: Record<string, any> }): Promise<WorkflowDailyConversationsResponse> => {
   return get<WorkflowDailyConversationsResponse>(url, { params })
 }
 
-export const getAppStatistics: Fetcher<AppStatisticsResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const getAppStatistics = ({ url, params }: { url: string; params: Record<string, any> }): Promise<AppStatisticsResponse> => {
   return get<AppStatisticsResponse>(url, { params })
 }
 
-export const getAppDailyEndUsers: Fetcher<AppDailyEndUsersResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const getAppDailyEndUsers = ({ url, params }: { url: string; params: Record<string, any> }): Promise<AppDailyEndUsersResponse> => {
   return get<AppDailyEndUsersResponse>(url, { params })
 }
 
-export const getAppTokenCosts: Fetcher<AppTokenCostsResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const getAppTokenCosts = ({ url, params }: { url: string; params: Record<string, any> }): Promise<AppTokenCostsResponse> => {
   return get<AppTokenCostsResponse>(url, { params })
 }
 
-export const updateAppModelConfig: Fetcher<UpdateAppModelConfigResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
+export const updateAppModelConfig = ({ url, body }: { url: string; body: Record<string, any> }): Promise<UpdateAppModelConfigResponse> => {
   return post<UpdateAppModelConfigResponse>(url, { body })
 }
 
 // For temp testing
-export const fetchAppListNoMock: Fetcher<AppListResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const fetchAppListNoMock = ({ url, params }: { url: string; params: Record<string, any> }): Promise<AppListResponse> => {
   return get<AppListResponse>(url, params)
 }
 
-export const fetchApiKeysList: Fetcher<ApiKeysListResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const fetchApiKeysList = ({ url, params }: { url: string; params: Record<string, any> }): Promise<ApiKeysListResponse> => {
   return get<ApiKeysListResponse>(url, params)
 }
 
-export const delApikey: Fetcher<CommonResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
+export const delApikey = ({ url, params }: { url: string; params: Record<string, any> }): Promise<CommonResponse> => {
   return del<CommonResponse>(url, params)
 }
 
-export const createApikey: Fetcher<CreateApiKeyResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
+export const createApikey = ({ url, body }: { url: string; body: Record<string, any> }): Promise<CreateApiKeyResponse> => {
   return post<CreateApiKeyResponse>(url, body)
 }
 
-export const validateOpenAIKey: Fetcher<ValidateOpenAIKeyResponse, { url: string; body: { token: string } }> = ({ url, body }) => {
+export const validateOpenAIKey = ({ url, body }: { url: string; body: { token: string } }): Promise<ValidateOpenAIKeyResponse> => {
   return post<ValidateOpenAIKeyResponse>(url, { body })
 }
 
-export const updateOpenAIKey: Fetcher<UpdateOpenAIKeyResponse, { url: string; body: { token: string } }> = ({ url, body }) => {
+export const updateOpenAIKey = ({ url, body }: { url: string; body: { token: string } }): Promise<UpdateOpenAIKeyResponse> => {
   return post<UpdateOpenAIKeyResponse>(url, { body })
 }
 
-export const generationIntroduction: Fetcher<GenerationIntroductionResponse, { url: string; body: { prompt_template: string } }> = ({ url, body }) => {
+export const generationIntroduction = ({ url, body }: { url: string; body: { prompt_template: string } }): Promise<GenerationIntroductionResponse> => {
   return post<GenerationIntroductionResponse>(url, { body })
 }
 
-export const fetchAppVoices: Fetcher<AppVoicesListResponse, { appId: string; language?: string }> = ({ appId, language }) => {
+export const fetchAppVoices = ({ appId, language }: { appId: string; language?: string }): Promise<AppVoicesListResponse> => {
   language = language || 'en-US'
   return get<AppVoicesListResponse>(`apps/${appId}/text-to-audio/voices?language=${language}`)
 }
 
 // Tracing
-export const fetchTracingStatus: Fetcher<TracingStatus, { appId: string }> = ({ appId }) => {
-  return get(`/apps/${appId}/trace`)
+export const fetchTracingStatus = ({ appId }: { appId: string }): Promise<TracingStatus> => {
+  return get<TracingStatus>(`/apps/${appId}/trace`)
 }
 
-export const updateTracingStatus: Fetcher<CommonResponse, { appId: string; body: Record<string, any> }> = ({ appId, body }) => {
-  return post(`/apps/${appId}/trace`, { body })
+export const updateTracingStatus = ({ appId, body }: { appId: string; body: Record<string, any> }): Promise<CommonResponse> => {
+  return post<CommonResponse>(`/apps/${appId}/trace`, { body })
 }
 
 // Webhook Trigger
-export const fetchWebhookUrl: Fetcher<WebhookTriggerResponse, { appId: string; nodeId: string }> = ({ appId, nodeId }) => {
+export const fetchWebhookUrl = ({ appId, nodeId }: { appId: string; nodeId: string }): Promise<WebhookTriggerResponse> => {
   return get<WebhookTriggerResponse>(
     `apps/${appId}/workflows/triggers/webhook`,
     { params: { node_id: nodeId } },
@@ -171,22 +210,22 @@ export const fetchWebhookUrl: Fetcher<WebhookTriggerResponse, { appId: string; n
   )
 }
 
-export const fetchTracingConfig: Fetcher<TracingConfig & { has_not_configured: true }, { appId: string; provider: TracingProvider }> = ({ appId, provider }) => {
-  return get(`/apps/${appId}/trace-config`, {
+export const fetchTracingConfig = ({ appId, provider }: { appId: string; provider: TracingProvider }): Promise<TracingConfig & { has_not_configured: true }> => {
+  return get<TracingConfig & { has_not_configured: true }>(`/apps/${appId}/trace-config`, {
     params: {
       tracing_provider: provider,
     },
   })
 }
 
-export const addTracingConfig: Fetcher<CommonResponse, { appId: string; body: TracingConfig }> = ({ appId, body }) => {
-  return post(`/apps/${appId}/trace-config`, { body })
+export const addTracingConfig = ({ appId, body }: { appId: string; body: TracingConfig }): Promise<CommonResponse> => {
+  return post<CommonResponse>(`/apps/${appId}/trace-config`, { body })
 }
 
-export const updateTracingConfig: Fetcher<CommonResponse, { appId: string; body: TracingConfig }> = ({ appId, body }) => {
-  return patch(`/apps/${appId}/trace-config`, { body })
+export const updateTracingConfig = ({ appId, body }: { appId: string; body: TracingConfig }): Promise<CommonResponse> => {
+  return patch<CommonResponse>(`/apps/${appId}/trace-config`, { body })
 }
 
-export const removeTracingConfig: Fetcher<CommonResponse, { appId: string; provider: TracingProvider }> = ({ appId, provider }) => {
-  return del(`/apps/${appId}/trace-config?tracing_provider=${provider}`)
+export const removeTracingConfig = ({ appId, provider }: { appId: string; provider: TracingProvider }): Promise<CommonResponse> => {
+  return del<CommonResponse>(`/apps/${appId}/trace-config?tracing_provider=${provider}`)
 }

web/service/demo/index.tsx

@@ -1,38 +1,85 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import useSWR, { useSWRConfig } from 'swr'
-import { createApp, fetchAppDetail, fetchAppList, getAppDailyConversations, getAppDailyEndUsers, updateAppApiStatus, updateAppModelConfig, updateAppRateLimit, updateAppSiteAccessToken, updateAppSiteConfig, updateAppSiteStatus } from '../apps'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { createApp, updateAppApiStatus, updateAppModelConfig, updateAppRateLimit, updateAppSiteAccessToken, updateAppSiteConfig, updateAppSiteStatus } from '../apps'
 import Loading from '@/app/components/base/loading'
 import { AppModeEnum } from '@/types/app'
+import {
+  useAppDailyConversations,
+  useAppDailyEndUsers,
+  useAppDetail,
+  useAppList,
+} from '../use-apps'
 
 const Service: FC = () => {
-  const { data: appList, error: appListError } = useSWR({ url: '/apps', params: { page: 1 } }, fetchAppList)
-  const { data: firstApp, error: appDetailError } = useSWR({ url: '/apps', id: '1' }, fetchAppDetail)
-  const { data: updateAppSiteStatusRes, error: err1 } = useSWR({ url: '/apps', id: '1', body: { enable_site: false } }, updateAppSiteStatus)
-  const { data: updateAppApiStatusRes, error: err2 } = useSWR({ url: '/apps', id: '1', body: { enable_api: true } }, updateAppApiStatus)
-  const { data: updateAppRateLimitRes, error: err3 } = useSWR({ url: '/apps', id: '1', body: { api_rpm: 10, api_rph: 20 } }, updateAppRateLimit)
-  const { data: updateAppSiteCodeRes, error: err4 } = useSWR({ url: '/apps', id: '1', body: {} }, updateAppSiteAccessToken)
-  const { data: updateAppSiteConfigRes, error: err5 } = useSWR({ url: '/apps', id: '1', body: { title: 'title test', author: 'author test' } }, updateAppSiteConfig)
-  const { data: getAppDailyConversationsRes, error: err6 } = useSWR({ url: '/apps', id: '1', body: { start: '1', end: '2' } }, getAppDailyConversations)
-  const { data: getAppDailyEndUsersRes, error: err7 } = useSWR({ url: '/apps', id: '1', body: { start: '1', end: '2' } }, getAppDailyEndUsers)
-  const { data: updateAppModelConfigRes, error: err8 } = useSWR({ url: '/apps', id: '1', body: { model_id: 'gpt-100' } }, updateAppModelConfig)
+  const appId = '1'
+  const queryClient = useQueryClient()
 
-  const { mutate } = useSWRConfig()
+  const { data: appList, error: appListError, isLoading: isAppListLoading } = useAppList({ page: 1, limit: 30, name: '' })
+  const { data: firstApp, error: appDetailError, isLoading: isAppDetailLoading } = useAppDetail(appId)
 
-  const handleCreateApp = async () => {
-    await createApp({
+  const { data: updateAppSiteStatusRes, error: err1, isLoading: isUpdatingSiteStatus } = useQuery({
+    queryKey: ['demo', 'updateAppSiteStatus', appId],
+    queryFn: () => updateAppSiteStatus({ url: '/apps', body: { enable_site: false } }),
+  })
+  const { data: updateAppApiStatusRes, error: err2, isLoading: isUpdatingApiStatus } = useQuery({
+    queryKey: ['demo', 'updateAppApiStatus', appId],
+    queryFn: () => updateAppApiStatus({ url: '/apps', body: { enable_api: true } }),
+  })
+  const { data: updateAppRateLimitRes, error: err3, isLoading: isUpdatingRateLimit } = useQuery({
+    queryKey: ['demo', 'updateAppRateLimit', appId],
+    queryFn: () => updateAppRateLimit({ url: '/apps', body: { api_rpm: 10, api_rph: 20 } }),
+  })
+  const { data: updateAppSiteCodeRes, error: err4, isLoading: isUpdatingSiteCode } = useQuery({
+    queryKey: ['demo', 'updateAppSiteAccessToken', appId],
+    queryFn: () => updateAppSiteAccessToken({ url: '/apps' }),
+  })
+  const { data: updateAppSiteConfigRes, error: err5, isLoading: isUpdatingSiteConfig } = useQuery({
+    queryKey: ['demo', 'updateAppSiteConfig', appId],
+    queryFn: () => updateAppSiteConfig({ url: '/apps', body: { title: 'title test', author: 'author test' } }),
+  })
+
+  const { data: getAppDailyConversationsRes, error: err6, isLoading: isConversationsLoading } = useAppDailyConversations(appId, { start: '1', end: '2' })
+  const { data: getAppDailyEndUsersRes, error: err7, isLoading: isEndUsersLoading } = useAppDailyEndUsers(appId, { start: '1', end: '2' })
+
+  const { data: updateAppModelConfigRes, error: err8, isLoading: isUpdatingModelConfig } = useQuery({
+    queryKey: ['demo', 'updateAppModelConfig', appId],
+    queryFn: () => updateAppModelConfig({ url: '/apps', body: { model_id: 'gpt-100' } }),
+  })
+
+  const { mutateAsync: mutateCreateApp } = useMutation({
+    mutationKey: ['demo', 'createApp'],
+    mutationFn: () => createApp({
       name: `new app${Math.round(Math.random() * 100)}`,
       mode: AppModeEnum.CHAT,
-    })
-    // reload app list
-    mutate({ url: '/apps', params: { page: 1 } })
+    }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['apps', 'list'],
+      })
+    },
+  })
+
+  const handleCreateApp = async () => {
+    await mutateCreateApp()
   }
 
   if (appListError || appDetailError || err1 || err2 || err3 || err4 || err5 || err6 || err7 || err8)
-    return <div>{JSON.stringify(appListError)}</div>
+    return <div>{JSON.stringify(appListError ?? appDetailError ?? err1 ?? err2 ?? err3 ?? err4 ?? err5 ?? err6 ?? err7 ?? err8)}</div>
 
-  if (!appList || !firstApp || !updateAppSiteStatusRes || !updateAppApiStatusRes || !updateAppRateLimitRes || !updateAppSiteCodeRes || !updateAppSiteConfigRes || !getAppDailyConversationsRes || !getAppDailyEndUsersRes || !updateAppModelConfigRes)
+  const isLoading = isAppListLoading
+    || isAppDetailLoading
+    || isUpdatingSiteStatus
+    || isUpdatingApiStatus
+    || isUpdatingRateLimit
+    || isUpdatingSiteCode
+    || isUpdatingSiteConfig
+    || isConversationsLoading
+    || isEndUsersLoading
+    || isUpdatingModelConfig
+
+  if (isLoading || !appList || !firstApp || !updateAppSiteStatusRes || !updateAppApiStatusRes || !updateAppRateLimitRes || !updateAppSiteCodeRes || !updateAppSiteConfigRes || !getAppDailyConversationsRes || !getAppDailyEndUsersRes || !updateAppModelConfigRes)
     return <Loading />
 
   return (

web/service/use-apps.ts

@@ -1,31 +1,63 @@
 import { get, post } from './base'
-import type { App } from '@/types/app'
-import type { AppListResponse } from '@/models/app'
+import type {
+  ApiKeysListResponse,
+  AppDailyConversationsResponse,
+  AppDailyEndUsersResponse,
+  AppDailyMessagesResponse,
+  AppListResponse,
+  AppStatisticsResponse,
+  AppTokenCostsResponse,
+  AppVoicesListResponse,
+  WorkflowDailyConversationsResponse,
+} from '@/models/app'
+import type { App, AppModeEnum } from '@/types/app'
 import { useInvalid } from './use-base'
-import { useQuery } from '@tanstack/react-query'
+import {
+  useInfiniteQuery,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
 import type { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
 
 const NAME_SPACE = 'apps'
 
-// TODO paging for list
+type AppListParams = {
+  page?: number
+  limit?: number
+  name?: string
+  mode?: AppModeEnum | 'all'
+  tag_ids?: string[]
+  is_created_by_me?: boolean
+}
+
+type DateRangeParams = {
+  start?: string
+  end?: string
+}
+
+const normalizeAppListParams = (params: AppListParams) => {
+  const {
+    page = 1,
+    limit = 30,
+    name = '',
+    mode,
+    tag_ids,
+    is_created_by_me,
+  } = params
+
+  return {
+    page,
+    limit,
+    name,
+    ...(mode && mode !== 'all' ? { mode } : {}),
+    ...(tag_ids?.length ? { tag_ids } : {}),
+    ...(is_created_by_me ? { is_created_by_me } : {}),
+  }
+}
+
+const appListKey = (params: AppListParams) => [NAME_SPACE, 'list', params]
+
 const useAppFullListKey = [NAME_SPACE, 'full-list']
-export const useAppFullList = () => {
-  return useQuery<AppListResponse>({
-    queryKey: useAppFullListKey,
-    queryFn: () => get<AppListResponse>('/apps', { params: { page: 1, limit: 100 } }),
-  })
-}
-
-export const useInvalidateAppFullList = () => {
-  return useInvalid(useAppFullListKey)
-}
-
-export const useAppDetail = (appID: string) => {
-  return useQuery<App>({
-    queryKey: [NAME_SPACE, 'detail', appID],
-    queryFn: () => get<App>(`/apps/${appID}`),
-  })
-}
 
 export const useGenerateRuleTemplate = (type: GeneratorType, disabled?: boolean) => {
   return useQuery({
@@ -39,3 +71,142 @@ export const useGenerateRuleTemplate = (type: GeneratorType, disabled?: boolean)
     retry: 0,
   })
 }
+
+export const useAppDetail = (appID: string) => {
+  return useQuery<App>({
+    queryKey: [NAME_SPACE, 'detail', appID],
+    queryFn: () => get<App>(`/apps/${appID}`),
+    enabled: !!appID,
+  })
+}
+
+export const useAppList = (params: AppListParams, options?: { enabled?: boolean }) => {
+  const normalizedParams = normalizeAppListParams(params)
+  return useQuery<AppListResponse>({
+    queryKey: appListKey(normalizedParams),
+    queryFn: () => get<AppListResponse>('/apps', { params: normalizedParams }),
+    ...options,
+  })
+}
+
+export const useAppFullList = () => {
+  return useQuery<AppListResponse>({
+    queryKey: useAppFullListKey,
+    queryFn: () => get<AppListResponse>('/apps', { params: { page: 1, limit: 100, name: '' } }),
+  })
+}
+
+export const useInvalidateAppFullList = () => {
+  return useInvalid(useAppFullListKey)
+}
+
+export const useInfiniteAppList = (params: AppListParams, options?: { enabled?: boolean }) => {
+  const normalizedParams = normalizeAppListParams(params)
+  return useInfiniteQuery<AppListResponse>({
+    queryKey: appListKey(normalizedParams),
+    queryFn: ({ pageParam = normalizedParams.page }) => get<AppListResponse>('/apps', { params: { ...normalizedParams, page: pageParam } }),
+    getNextPageParam: lastPage => lastPage.has_more ? lastPage.page + 1 : undefined,
+    initialPageParam: normalizedParams.page,
+    ...options,
+  })
+}
+
+export const useInvalidateAppList = () => {
+  const queryClient = useQueryClient()
+  return () => {
+    queryClient.invalidateQueries({
+      queryKey: [NAME_SPACE, 'list'],
+    })
+  }
+}
+
+const useAppStatisticsQuery = <T>(metric: string, appId: string, params?: DateRangeParams) => {
+  return useQuery<T>({
+    queryKey: [NAME_SPACE, 'statistics', metric, appId, params],
+    queryFn: () => get<T>(`/apps/${appId}/statistics/${metric}`, { params }),
+    enabled: !!appId,
+  })
+}
+
+const useWorkflowStatisticsQuery = <T>(metric: string, appId: string, params?: DateRangeParams) => {
+  return useQuery<T>({
+    queryKey: [NAME_SPACE, 'workflow-statistics', metric, appId, params],
+    queryFn: () => get<T>(`/apps/${appId}/workflow/statistics/${metric}`, { params }),
+    enabled: !!appId,
+  })
+}
+
+export const useAppDailyMessages = (appId: string, params?: DateRangeParams) => {
+  return useAppStatisticsQuery<AppDailyMessagesResponse>('daily-messages', appId, params)
+}
+
+export const useAppDailyConversations = (appId: string, params?: DateRangeParams) => {
+  return useAppStatisticsQuery<AppDailyConversationsResponse>('daily-conversations', appId, params)
+}
+
+export const useAppDailyEndUsers = (appId: string, params?: DateRangeParams) => {
+  return useAppStatisticsQuery<AppDailyEndUsersResponse>('daily-end-users', appId, params)
+}
+
+export const useAppAverageSessionInteractions = (appId: string, params?: DateRangeParams) => {
+  return useAppStatisticsQuery<AppStatisticsResponse>('average-session-interactions', appId, params)
+}
+
+export const useAppAverageResponseTime = (appId: string, params?: DateRangeParams) => {
+  return useAppStatisticsQuery<AppStatisticsResponse>('average-response-time', appId, params)
+}
+
+export const useAppTokensPerSecond = (appId: string, params?: DateRangeParams) => {
+  return useAppStatisticsQuery<AppStatisticsResponse>('tokens-per-second', appId, params)
+}
+
+export const useAppSatisfactionRate = (appId: string, params?: DateRangeParams) => {
+  return useAppStatisticsQuery<AppStatisticsResponse>('user-satisfaction-rate', appId, params)
+}
+
+export const useAppTokenCosts = (appId: string, params?: DateRangeParams) => {
+  return useAppStatisticsQuery<AppTokenCostsResponse>('token-costs', appId, params)
+}
+
+export const useWorkflowDailyConversations = (appId: string, params?: DateRangeParams) => {
+  return useWorkflowStatisticsQuery<WorkflowDailyConversationsResponse>('daily-conversations', appId, params)
+}
+
+export const useWorkflowDailyTerminals = (appId: string, params?: DateRangeParams) => {
+  return useWorkflowStatisticsQuery<AppDailyEndUsersResponse>('daily-terminals', appId, params)
+}
+
+export const useWorkflowTokenCosts = (appId: string, params?: DateRangeParams) => {
+  return useWorkflowStatisticsQuery<AppTokenCostsResponse>('token-costs', appId, params)
+}
+
+export const useWorkflowAverageInteractions = (appId: string, params?: DateRangeParams) => {
+  return useWorkflowStatisticsQuery<AppStatisticsResponse>('average-app-interactions', appId, params)
+}
+
+export const useAppVoices = (appId?: string, language?: string) => {
+  return useQuery<AppVoicesListResponse>({
+    queryKey: [NAME_SPACE, 'voices', appId, language || 'en-US'],
+    queryFn: () => get<AppVoicesListResponse>(`/apps/${appId}/text-to-audio/voices`, { params: { language: language || 'en-US' } }),
+    enabled: !!appId,
+  })
+}
+
+export const useAppApiKeys = (appId?: string, options?: { enabled?: boolean }) => {
+  return useQuery<ApiKeysListResponse>({
+    queryKey: [NAME_SPACE, 'api-keys', appId],
+    queryFn: () => get<ApiKeysListResponse>(`/apps/${appId}/api-keys`),
+    enabled: !!appId && (options?.enabled ?? true),
+  })
+}
+
+export const useInvalidateAppApiKeys = () => {
+  const queryClient = useQueryClient()
+  return (appId?: string) => {
+    if (!appId)
+      return
+    queryClient.invalidateQueries({
+      queryKey: [NAME_SPACE, 'api-keys', appId],
+    })
+  }
+}