feat(app): support custom max_active_requests per app (#22073)

api/controllers/console/app/app.py

@@ -151,6 +151,7 @@ class AppApi(Resource):
         parser.add_argument("icon", type=str, location="json")
         parser.add_argument("icon_background", type=str, location="json")
         parser.add_argument("use_icon_as_answer_icon", type=bool, location="json")
+        parser.add_argument("max_active_requests", type=int, location="json")
         args = parser.parse_args()
 
         app_service = AppService()

api/fields/app_fields.py

@@ -188,6 +188,7 @@ app_detail_fields_with_site = {
     "site": fields.Nested(site_fields),
     "api_base_url": fields.String,
     "use_icon_as_answer_icon": fields.Boolean,
+    "max_active_requests": fields.Integer,
     "created_by": fields.String,
     "created_at": TimestampField,
     "updated_by": fields.String,

api/services/app_service.py

@@ -233,6 +233,7 @@ class AppService:
         app.icon = args.get("icon")
         app.icon_background = args.get("icon_background")
         app.use_icon_as_answer_icon = args.get("use_icon_as_answer_icon", False)
+        app.max_active_requests = args.get("max_active_requests")
         app.updated_by = current_user.id
         app.updated_at = datetime.now(UTC).replace(tzinfo=None)
         db.session.commit()

web/app/(commonLayout)/apps/AppCard.tsx

@@ -88,6 +88,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
     icon_background,
     description,
     use_icon_as_answer_icon,
+    max_active_requests,
   }) => {
     try {
       await updateAppInfo({
@@ -98,6 +99,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
         icon_background,
         description,
         use_icon_as_answer_icon,
+        max_active_requests,
       })
       setShowEditModal(false)
       notify({
@@ -432,6 +434,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           appDescription={app.description}
           appMode={app.mode}
           appUseIconAsAnswerIcon={app.use_icon_as_answer_icon}
+          max_active_requests={app.max_active_requests ?? null}
           show={showEditModal}
           onConfirm={onEdit}
           onHide={() => setShowEditModal(false)}

web/app/components/app-sidebar/app-info.tsx

@@ -71,6 +71,7 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
     icon_background,
     description,
     use_icon_as_answer_icon,
+    max_active_requests,
   }) => {
     if (!appDetail)
       return
@@ -83,6 +84,7 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
         icon_background,
         description,
         use_icon_as_answer_icon,
+        max_active_requests,
       })
       setShowEditModal(false)
       notify({
@@ -350,6 +352,7 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
           appDescription={appDetail.description}
           appMode={appDetail.mode}
           appUseIconAsAnswerIcon={appDetail.use_icon_as_answer_icon}
+          max_active_requests={appDetail.max_active_requests ?? null}
           show={showEditModal}
           onConfirm={onEdit}
           onHide={() => setShowEditModal(false)}

web/app/components/explore/create-app-modal/index.tsx

@@ -27,6 +27,7 @@ export type CreateAppModalProps = {
   appIconUrl?: string | null
   appMode?: string
   appUseIconAsAnswerIcon?: boolean
+  max_active_requests: number | null
   onConfirm: (info: {
     name: string
     icon_type: AppIconType
@@ -34,6 +35,7 @@ export type CreateAppModalProps = {
     icon_background?: string
     description: string
     use_icon_as_answer_icon?: boolean
+    max_active_requests?: number | null
   }) => Promise<void>
   confirmDisabled?: boolean
   onHide: () => void
@@ -50,6 +52,7 @@ const CreateAppModal = ({
   appDescription,
   appMode,
   appUseIconAsAnswerIcon,
+  max_active_requests,
   onConfirm,
   confirmDisabled,
   onHide,
@@ -66,6 +69,10 @@ const CreateAppModal = ({
   const [description, setDescription] = useState(appDescription || '')
   const [useIconAsAnswerIcon, setUseIconAsAnswerIcon] = useState(appUseIconAsAnswerIcon || false)
 
+  const [maxActiveRequestsInput, setMaxActiveRequestsInput] = useState(
+    max_active_requests !== null && max_active_requests !== undefined ? String(max_active_requests) : '',
+  )
+
   const { plan, enableBilling } = useProviderContext()
   const isAppsFull = (enableBilling && plan.usage.buildApps >= plan.total.buildApps)
 
@@ -74,16 +81,21 @@ const CreateAppModal = ({
       Toast.notify({ type: 'error', message: t('explore.appCustomize.nameRequired') })
       return
     }
-    onConfirm({
+    const isValid = maxActiveRequestsInput.trim() !== '' && !isNaN(Number(maxActiveRequestsInput))
+    const payload: any = {
       name,
       icon_type: appIcon.type,
       icon: appIcon.type === 'emoji' ? appIcon.icon : appIcon.fileId,
       icon_background: appIcon.type === 'emoji' ? appIcon.background! : undefined,
       description,
       use_icon_as_answer_icon: useIconAsAnswerIcon,
-    })
+    }
+    if (isValid)
+      payload.max_active_requests = Number(maxActiveRequestsInput)
+
+    onConfirm(payload)
     onHide()
-  }, [name, appIcon, description, useIconAsAnswerIcon, onConfirm, onHide, t])
+  }, [name, appIcon, description, useIconAsAnswerIcon, onConfirm, onHide, t, maxActiveRequestsInput])
 
   const { run: handleSubmit } = useDebounceFn(submit, { wait: 300 })
 
@@ -158,6 +170,22 @@ const CreateAppModal = ({
               <p className='body-xs-regular text-text-tertiary'>{t('app.answerIcon.descriptionInExplore')}</p>
             </div>
           )}
+          {isEditModal && (
+            <div className='pt-2'>
+              <div className='mb-2 mt-2 text-sm font-medium leading-[20px] text-text-primary'>{t('app.maxActiveRequests')}</div>
+              <Input
+                type='number'
+                min={1}
+                placeholder={t('app.maxActiveRequestsPlaceholder')}
+                value={maxActiveRequestsInput}
+                onChange={(e) => {
+                  setMaxActiveRequestsInput(e.target.value)
+                }}
+                className='h-10 w-full'
+              />
+              <p className='body-xs-regular mb-0 mt-2 text-text-tertiary'>{t('app.maxActiveRequestsTip')}</p>
+            </div>
+          )}
           {!isEditModal && isAppsFull && <AppsFull className='mt-4' loc='app-explore-create' />}
         </div>
         <div className='flex flex-row-reverse'>

web/i18n/en-US/app.ts

@@ -245,6 +245,9 @@ const translation = {
     notSetDesc: 'Currently nobody can access the web app. Please set permissions.',
   },
   noAccessPermission: 'No permission to access web app',
+  maxActiveRequests: 'Max concurrent requests',
+  maxActiveRequestsPlaceholder: 'Enter 0 for unlimited',
+  maxActiveRequestsTip: 'Maximum number of concurrent active requests per app (0 for unlimited)',
 }
 
 export default translation

web/i18n/zh-Hans/app.ts

@@ -246,6 +246,9 @@ const translation = {
     notSetDesc: '当前任何人都无法访问 Web 应用。请设置访问权限。',
   },
   noAccessPermission: '没有权限访问 web 应用',
+  maxActiveRequests: '最大活跃请求数',
+  maxActiveRequestsPlaceholder: '0 表示不限制',
+  maxActiveRequestsTip: '当前应用的最大活跃请求数（0 表示不限制）',
 }
 
 export default translation

web/service/apps.ts

@@ -21,8 +21,9 @@ export const createApp: Fetcher<AppDetailResponse, { name: string; icon_type?: A
   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 }> = ({ appID, name, icon_type, icon, icon_background, description, use_icon_as_answer_icon }) => {
+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 }) => {
-  return put<AppDetailResponse>(`apps/${appID}`, { body: { name, icon_type, icon, icon_background, description, use_icon_as_answer_icon } })
+  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: AppMode; description?: string }> = ({ appID, name, icon_type, icon, icon_background, mode, description }) => {

web/types/app.ts

@@ -369,6 +369,7 @@ export type App = {
   }
   /** access control */
   access_mode: AccessMode
+  max_active_requests?: number | null
 }
 
 export type AppSSO = {