Introduce Plugins (#13836)

Signed-off-by: yihong0618 <zouzou0208@gmail.com> Signed-off-by: -LAN- <laipz8200@outlook.com> Signed-off-by: xhe <xw897002528@gmail.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: takatost <takatost@gmail.com> Co-authored-by: kurokobo <kuro664@gmail.com> Co-authored-by: Novice Lee <novicelee@NoviPro.local> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: AkaraChen <akarachen@outlook.com> Co-authored-by: Yi <yxiaoisme@gmail.com> Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: JzoNg <jzongcode@gmail.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: Hiroshi Fujita <fujita-h@users.noreply.github.com> Co-authored-by: AkaraChen <85140972+AkaraChen@users.noreply.github.com> Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com> Co-authored-by: 非法操作 <hjlarry@163.com> Co-authored-by: Novice <857526207@qq.com> Co-authored-by: Hiroki Nagai <82458324+nagaihiroki-git@users.noreply.github.com> Co-authored-by: Gen Sato <52241300+halogen22@users.noreply.github.com> Co-authored-by: eux <euxuuu@gmail.com> Co-authored-by: huangzhuo1949 <167434202+huangzhuo1949@users.noreply.github.com> Co-authored-by: huangzhuo <huangzhuo1@xiaomi.com> Co-authored-by: lotsik <lotsik@mail.ru> Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> Co-authored-by: nite-knite <nkCoding@gmail.com> Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: gakkiyomi <gakkiyomi@aliyun.com> Co-authored-by: CN-P5 <heibai2006@gmail.com> Co-authored-by: CN-P5 <heibai2006@qq.com> Co-authored-by: Chuehnone <1897025+chuehnone@users.noreply.github.com> Co-authored-by: yihong <zouzou0208@gmail.com> Co-authored-by: Kevin9703 <51311316+Kevin9703@users.noreply.github.com> Co-authored-by: -LAN- <laipz8200@outlook.com> Co-authored-by: Boris Feld <lothiraldan@gmail.com> Co-authored-by: mbo <himabo@gmail.com> Co-authored-by: mabo <mabo@aeyes.ai> Co-authored-by: Warren Chen <warren.chen830@gmail.com> Co-authored-by: JzoNgKVO <27049666+JzoNgKVO@users.noreply.github.com> Co-authored-by: jiandanfeng <chenjh3@wangsu.com> Co-authored-by: zhu-an <70234959+xhdd123321@users.noreply.github.com> Co-authored-by: zhaoqingyu.1075 <zhaoqingyu.1075@bytedance.com> Co-authored-by: 海狸大師 <86974027+yenslife@users.noreply.github.com> Co-authored-by: Xu Song <xusong.vip@gmail.com> Co-authored-by: rayshaw001 <396301947@163.com> Co-authored-by: Ding Jiatong <dingjiatong@gmail.com> Co-authored-by: Bowen Liang <liangbowen@gf.com.cn> Co-authored-by: JasonVV <jasonwangiii@outlook.com> Co-authored-by: le0zh <newlight@qq.com> Co-authored-by: zhuxinliang <zhuxinliang@didiglobal.com> Co-authored-by: k-zaku <zaku99@outlook.jp> Co-authored-by: luckylhb90 <luckylhb90@gmail.com> Co-authored-by: hobo.l <hobo.l@binance.com> Co-authored-by: jiangbo721 <365065261@qq.com> Co-authored-by: 刘江波 <jiangbo721@163.com> Co-authored-by: Shun Miyazawa <34241526+miya@users.noreply.github.com> Co-authored-by: EricPan <30651140+Egfly@users.noreply.github.com> Co-authored-by: crazywoola <427733928@qq.com> Co-authored-by: sino <sino2322@gmail.com> Co-authored-by: Jhvcc <37662342+Jhvcc@users.noreply.github.com> Co-authored-by: lowell <lowell.hu@zkteco.in> Co-authored-by: Boris Polonsky <BorisPolonsky@users.noreply.github.com> Co-authored-by: Ademílson Tonato <ademilsonft@outlook.com> Co-authored-by: Ademílson Tonato <ademilson.tonato@refurbed.com> Co-authored-by: IWAI, Masaharu <iwaim.sub@gmail.com> Co-authored-by: Yueh-Po Peng (Yabi) <94939112+y10ab1@users.noreply.github.com> Co-authored-by: Jason <ggbbddjm@gmail.com> Co-authored-by: Xin Zhang <sjhpzx@gmail.com> Co-authored-by: yjc980121 <3898524+yjc980121@users.noreply.github.com> Co-authored-by: heyszt <36215648+hieheihei@users.noreply.github.com> Co-authored-by: Abdullah AlOsaimi <osaimiacc@gmail.com> Co-authored-by: Abdullah AlOsaimi <189027247+osaimi@users.noreply.github.com> Co-authored-by: Yingchun Lai <laiyingchun@apache.org> Co-authored-by: Hash Brown <hi@xzd.me> Co-authored-by: zuodongxu <192560071+zuodongxu@users.noreply.github.com> Co-authored-by: Masashi Tomooka <tmokmss@users.noreply.github.com> Co-authored-by: aplio <ryo.091219@gmail.com> Co-authored-by: Obada Khalili <54270856+obadakhalili@users.noreply.github.com> Co-authored-by: Nam Vu <zuzoovn@gmail.com> Co-authored-by: Kei YAMAZAKI <1715090+kei-yamazaki@users.noreply.github.com> Co-authored-by: TechnoHouse <13776377+deephbz@users.noreply.github.com> Co-authored-by: Riddhimaan-Senapati <114703025+Riddhimaan-Senapati@users.noreply.github.com> Co-authored-by: MaFee921 <31881301+2284730142@users.noreply.github.com> Co-authored-by: te-chan <t-nakanome@sakura-is.co.jp> Co-authored-by: HQidea <HQidea@users.noreply.github.com> Co-authored-by: Joshbly <36315710+Joshbly@users.noreply.github.com> Co-authored-by: xhe <xw897002528@gmail.com> Co-authored-by: weiwenyan-dev <154779315+weiwenyan-dev@users.noreply.github.com> Co-authored-by: ex_wenyan.wei <ex_wenyan.wei@tcl.com> Co-authored-by: engchina <12236799+engchina@users.noreply.github.com> Co-authored-by: engchina <atjapan2015@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: 呆萌闷油瓶 <253605712@qq.com> Co-authored-by: Kemal <kemalmeler@outlook.com> Co-authored-by: Lazy_Frog <4590648+lazyFrogLOL@users.noreply.github.com> Co-authored-by: Yi Xiao <54782454+YIXIAO0@users.noreply.github.com> Co-authored-by: Steven sun <98230804+Tuyohai@users.noreply.github.com> Co-authored-by: steven <sunzwj@digitalchina.com> Co-authored-by: Kalo Chin <91766386+fdb02983rhy@users.noreply.github.com> Co-authored-by: Katy Tao <34019945+KatyTao@users.noreply.github.com> Co-authored-by: depy <42985524+h4ckdepy@users.noreply.github.com> Co-authored-by: 胡春东 <gycm520@gmail.com> Co-authored-by: Junjie.M <118170653@qq.com> Co-authored-by: MuYu <mr.muzea@gmail.com> Co-authored-by: Naoki Takashima <39912547+takatea@users.noreply.github.com> Co-authored-by: Summer-Gu <37869445+gubinjie@users.noreply.github.com> Co-authored-by: Fei He <droxer.he@gmail.com> Co-authored-by: ybalbert001 <120714773+ybalbert001@users.noreply.github.com> Co-authored-by: Yuanbo Li <ybalbert@amazon.com> Co-authored-by: douxc <7553076+douxc@users.noreply.github.com> Co-authored-by: liuzhenghua <1090179900@qq.com> Co-authored-by: Wu Jiayang <62842862+Wu-Jiayang@users.noreply.github.com> Co-authored-by: Your Name <you@example.com> Co-authored-by: kimjion <45935338+kimjion@users.noreply.github.com> Co-authored-by: AugNSo <song.tiankai@icloud.com> Co-authored-by: llinvokerl <38915183+llinvokerl@users.noreply.github.com> Co-authored-by: liusurong.lsr <liusurong.lsr@alibaba-inc.com> Co-authored-by: Vasu Negi <vasu-negi@users.noreply.github.com> Co-authored-by: Hundredwz <1808096180@qq.com> Co-authored-by: Xiyuan Chen <52963600+GareArc@users.noreply.github.com>
2025-12-25 01:00:42 -05:00 · 2025-02-17 17:05:13 +08:00
parent 222df44d21
commit 403e2d58b9
3272 changed files with 66339 additions and 281594 deletions
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
@@ -0,0 +1,125 @@
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
+import { PortalSelect } from '@/app/components/base/select'
+import { InputVarType } from '@/app/components/workflow/types'
+import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
+
+type Props = {
+  inputsForms: any[]
+  inputs: Record<string, any>
+  inputsRef: any
+  onFormChange: (value: Record<string, any>) => void
+}
+const AppInputsForm = ({
+  inputsForms,
+  inputs,
+  inputsRef,
+  onFormChange,
+}: Props) => {
+  const { t } = useTranslation()
+
+  const handleFormChange = useCallback((variable: string, value: any) => {
+    onFormChange({
+      ...inputsRef.current,
+      [variable]: value,
+    })
+  }, [onFormChange, inputsRef])
+
+  const renderField = (form: any) => {
+    const {
+      label,
+      variable,
+      options,
+    } = form
+    if (form.type === InputVarType.textInput) {
+      return (
+        <Input
+          value={inputs[variable] || ''}
+          onChange={e => handleFormChange(variable, e.target.value)}
+          placeholder={label}
+        />
+      )
+    }
+    if (form.type === InputVarType.number) {
+      return (
+        <Input
+          type="number"
+          value={inputs[variable] || ''}
+          onChange={e => handleFormChange(variable, e.target.value)}
+          placeholder={label}
+        />
+      )
+    }
+    if (form.type === InputVarType.paragraph) {
+      return (
+        <Textarea
+          value={inputs[variable] || ''}
+          onChange={e => handleFormChange(variable, e.target.value)}
+          placeholder={label}
+        />
+      )
+    }
+    if (form.type === InputVarType.select) {
+      return (
+        <PortalSelect
+          popupClassName="w-[356px] z-[1050]"
+          value={inputs[variable] || ''}
+          items={options.map((option: string) => ({ value: option, name: option }))}
+          onSelect={item => handleFormChange(variable, item.value as string)}
+          placeholder={label}
+        />
+      )
+    }
+    if (form.type === InputVarType.singleFile) {
+      return (
+        <FileUploaderInAttachmentWrapper
+          value={inputs[variable] ? [inputs[variable]] : []}
+          onChange={files => handleFormChange(variable, files[0])}
+          fileConfig={{
+            allowed_file_types: form.allowed_file_types,
+            allowed_file_extensions: form.allowed_file_extensions,
+            allowed_file_upload_methods: form.allowed_file_upload_methods,
+            number_limits: 1,
+            fileUploadConfig: (form as any).fileUploadConfig,
+          }}
+        />
+      )
+    }
+    if (form.type === InputVarType.multiFiles) {
+      return (
+        <FileUploaderInAttachmentWrapper
+          value={inputs[variable]}
+          onChange={files => handleFormChange(variable, files)}
+          fileConfig={{
+            allowed_file_types: form.allowed_file_types,
+            allowed_file_extensions: form.allowed_file_extensions,
+            allowed_file_upload_methods: form.allowed_file_upload_methods,
+            number_limits: form.max_length,
+            fileUploadConfig: (form as any).fileUploadConfig,
+          }}
+        />
+      )
+    }
+  }
+
+  if (!inputsForms.length)
+    return null
+
+  return (
+    <div className='px-4 py-2 flex flex-col gap-4'>
+      {inputsForms.map(form => (
+        <div key={form.variable}>
+          <div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'>
+            <div className='truncate'>{form.label}</div>
+            {!form.required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>}
+          </div>
+          {renderField(form)}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default AppInputsForm
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
@@ -0,0 +1,180 @@
+'use client'
+import React, { useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import Loading from '@/app/components/base/loading'
+import AppInputsForm from '@/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form'
+import { useAppDetail } from '@/service/use-apps'
+import { useAppWorkflow } from '@/service/use-workflow'
+import { useFileUploadConfig } from '@/service/use-common'
+import { Resolution } from '@/types/app'
+import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
+import type { App } from '@/types/app'
+import type { FileUpload } from '@/app/components/base/features/types'
+import { BlockEnum, InputVarType, SupportUploadFileTypes } from '@/app/components/workflow/types'
+
+import cn from '@/utils/classnames'
+
+type Props = {
+  value?: {
+    app_id: string
+    inputs: Record<string, any>
+  }
+  appDetail: App
+  onFormChange: (value: Record<string, any>) => void
+}
+
+const AppInputsPanel = ({
+  value,
+  appDetail,
+  onFormChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const inputsRef = useRef<any>(value?.inputs || {})
+  const isBasicApp = appDetail.mode !== 'advanced-chat' && appDetail.mode !== 'workflow'
+  const { data: fileUploadConfig } = useFileUploadConfig()
+  const { data: currentApp, isFetching: isAppLoading } = useAppDetail(appDetail.id)
+  const { data: currentWorkflow, isFetching: isWorkflowLoading } = useAppWorkflow(isBasicApp ? '' : appDetail.id)
+  const isLoading = isAppLoading || isWorkflowLoading
+
+  const basicAppFileConfig = useMemo(() => {
+    let fileConfig: FileUpload
+    if (isBasicApp)
+      fileConfig = currentApp?.model_config?.file_upload as FileUpload
+    else
+      fileConfig = currentWorkflow?.features?.file_upload as FileUpload
+    return {
+      image: {
+        detail: fileConfig?.image?.detail || Resolution.high,
+        enabled: !!fileConfig?.image?.enabled,
+        number_limits: fileConfig?.image?.number_limits || 3,
+        transfer_methods: fileConfig?.image?.transfer_methods || ['local_file', 'remote_url'],
+      },
+      enabled: !!(fileConfig?.enabled || fileConfig?.image?.enabled),
+      allowed_file_types: fileConfig?.allowed_file_types || [SupportUploadFileTypes.image],
+      allowed_file_extensions: fileConfig?.allowed_file_extensions || [...FILE_EXTS[SupportUploadFileTypes.image]].map(ext => `.${ext}`),
+      allowed_file_upload_methods: fileConfig?.allowed_file_upload_methods || fileConfig?.image?.transfer_methods || ['local_file', 'remote_url'],
+      number_limits: fileConfig?.number_limits || fileConfig?.image?.number_limits || 3,
+    }
+  }, [currentApp?.model_config?.file_upload, currentWorkflow?.features?.file_upload, isBasicApp])
+
+  const inputFormSchema = useMemo(() => {
+    if (!currentApp)
+      return []
+    let inputFormSchema = []
+    if (isBasicApp) {
+      inputFormSchema = currentApp.model_config.user_input_form.filter((item: any) => !item.external_data_tool).map((item: any) => {
+        if (item.paragraph) {
+          return {
+            ...item.paragraph,
+            type: 'paragraph',
+            required: false,
+          }
+        }
+        if (item.number) {
+          return {
+            ...item.number,
+            type: 'number',
+            required: false,
+          }
+        }
+        if (item.select) {
+          return {
+            ...item.select,
+            type: 'select',
+            required: false,
+          }
+        }
+
+        if (item['file-list']) {
+          return {
+            ...item['file-list'],
+            type: 'file-list',
+            required: false,
+            fileUploadConfig,
+          }
+        }
+
+        if (item.file) {
+          return {
+            ...item.file,
+            type: 'file',
+            required: false,
+            fileUploadConfig,
+          }
+        }
+
+        return {
+          ...item['text-input'],
+          type: 'text-input',
+          required: false,
+        }
+      })
+    }
+    else {
+      const startNode = currentWorkflow?.graph.nodes.find(node => node.data.type === BlockEnum.Start) as any
+      inputFormSchema = startNode?.data.variables.map((variable: any) => {
+        if (variable.type === InputVarType.multiFiles) {
+          return {
+            ...variable,
+            required: false,
+            fileUploadConfig,
+          }
+        }
+
+        if (variable.type === InputVarType.singleFile) {
+          return {
+            ...variable,
+            required: false,
+            fileUploadConfig,
+          }
+        }
+        return {
+          ...variable,
+          required: false,
+        }
+      })
+    }
+    if ((currentApp.mode === 'completion' || currentApp.mode === 'workflow') && basicAppFileConfig.enabled) {
+      inputFormSchema.push({
+        label: 'Image Upload',
+        variable: '#image#',
+        type: InputVarType.singleFile,
+        required: false,
+        ...basicAppFileConfig,
+        fileUploadConfig,
+      })
+    }
+    return inputFormSchema
+  }, [basicAppFileConfig, currentApp, currentWorkflow, fileUploadConfig, isBasicApp])
+
+  const handleFormChange = (value: Record<string, any>) => {
+    inputsRef.current = value
+    onFormChange(value)
+  }
+
+  return (
+    <div className={cn('max-h-[240px] flex flex-col pb-4 rounded-b-2xl border-t border-divider-subtle')}>
+      {isLoading && <div className='pt-3'><Loading type='app' /></div>}
+      {!isLoading && (
+        <div className='shrink-0 mt-3 mb-2 px-4 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('app.appSelector.params')}</div>
+      )}
+      {!isLoading && !inputFormSchema.length && (
+        <div className='h-16 flex flex-col justify-center items-center'>
+          <div className='text-text-tertiary system-sm-regular'>{t('app.appSelector.noParams')}</div>
+        </div>
+      )}
+      {!isLoading && !!inputFormSchema.length && (
+        <div className='grow overflow-y-auto'>
+          <AppInputsForm
+            inputs={value?.inputs || {}}
+            inputsRef={inputsRef}
+            inputsForms={inputFormSchema}
+            onFormChange={handleFormChange}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AppInputsPanel
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
@@ -0,0 +1,123 @@
+'use client'
+import type { FC } from 'react'
+import React, { useMemo } from 'react'
+import { useState } from 'react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type {
+  OffsetOptions,
+  Placement,
+} from '@floating-ui/react'
+import Input from '@/app/components/base/input'
+import AppIcon from '@/app/components/base/app-icon'
+import type { App } from '@/types/app'
+
+type Props = {
+  appList: App[]
+  scope: string
+  disabled: boolean
+  trigger: React.ReactNode
+  placement?: Placement
+  offset?: OffsetOptions
+  isShow: boolean
+  onShowChange: (isShow: boolean) => void
+  onSelect: (app: App) => void
+}
+
+const AppPicker: FC<Props> = ({
+  scope,
+  appList,
+  disabled,
+  trigger,
+  placement = 'right-start',
+  offset = 0,
+  isShow,
+  onShowChange,
+  onSelect,
+}) => {
+  const [searchText, setSearchText] = useState('')
+  const filteredAppList = useMemo(() => {
+    return (appList || [])
+      .filter(app => app.name.toLowerCase().includes(searchText.toLowerCase()))
+      .filter(app => (app.mode !== 'advanced-chat' && app.mode !== 'workflow') || !!app.workflow)
+      .filter(app => scope === 'all'
+      || (scope === 'completion' && app.mode === 'completion')
+      || (scope === 'workflow' && app.mode === 'workflow')
+      || (scope === 'chat' && app.mode === 'advanced-chat')
+      || (scope === 'chat' && app.mode === 'agent-chat')
+      || (scope === 'chat' && app.mode === 'chat'))
+  }, [appList, scope, searchText])
+  const getAppType = (app: App) => {
+    switch (app.mode) {
+      case 'advanced-chat':
+        return 'chatflow'
+      case 'agent-chat':
+        return 'agent'
+      case 'chat':
+        return 'chat'
+      case 'completion':
+        return 'completion'
+      case 'workflow':
+        return 'workflow'
+    }
+  }
+
+  const handleTriggerClick = () => {
+    if (disabled) return
+    onShowChange(true)
+  }
+
+  return (
+    <PortalToFollowElem
+      placement={placement}
+      offset={offset}
+      open={isShow}
+      onOpenChange={onShowChange}
+    >
+      <PortalToFollowElemTrigger
+        onClick={handleTriggerClick}
+      >
+        {trigger}
+      </PortalToFollowElemTrigger>
+
+      <PortalToFollowElemContent className='z-[1000]'>
+        <div className="relative w-[356px] min-h-20 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
+          <div className='p-2 pb-1'>
+            <Input
+              showLeftIcon
+              showClearIcon
+              value={searchText}
+              onChange={e => setSearchText(e.target.value)}
+              onClear={() => setSearchText('')}
+            />
+          </div>
+          <div className='p-1'>
+            {filteredAppList.map(app => (
+              <div
+                key={app.id}
+                className='flex items-center gap-3 py-1 pl-2 pr-3 rounded-lg hover:bg-state-base-hover cursor-pointer'
+                onClick={() => onSelect(app)}
+              >
+                <AppIcon
+                  className='shrink-0'
+                  size='xs'
+                  iconType={app.icon_type}
+                  icon={app.icon}
+                  background={app.icon_background}
+                  imageUrl={app.icon_url}
+                />
+                <div title={app.name} className='grow system-sm-medium text-components-input-text-filled'>{app.name}</div>
+                <div className='shrink-0 text-text-tertiary system-2xs-medium-uppercase'>{getAppType(app)}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default React.memo(AppPicker)
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
@@ -0,0 +1,48 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiArrowDownSLine,
+} from '@remixicon/react'
+import AppIcon from '@/app/components/base/app-icon'
+import type { App } from '@/types/app'
+import cn from '@/utils/classnames'
+
+type Props = {
+  open: boolean
+  appDetail?: App
+}
+
+const AppTrigger = ({
+  open,
+  appDetail,
+}: Props) => {
+  const { t } = useTranslation()
+  return (
+    <div className={cn(
+      'group flex items-center p-2 pl-3 bg-components-input-bg-normal rounded-lg cursor-pointer hover:bg-state-base-hover-alt',
+      open && 'bg-state-base-hover-alt',
+      appDetail && 'pl-1.5 py-1.5',
+    )}>
+      {appDetail && (
+        <AppIcon
+          className='mr-2'
+          size='xs'
+          iconType={appDetail.icon_type}
+          icon={appDetail.icon}
+          background={appDetail.icon_background}
+          imageUrl={appDetail.icon_url}
+        />
+      )}
+      {appDetail && (
+        <div title={appDetail.name} className='grow system-sm-medium text-components-input-text-filled'>{appDetail.name}</div>
+      )}
+      {!appDetail && (
+        <div className='grow text-components-input-text-placeholder system-sm-regular truncate'>{t('app.appSelector.placeholder')}</div>
+      )}
+      <RiArrowDownSLine className={cn('shrink-0 ml-0.5 w-4 h-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
+    </div>
+  )
+}
+
+export default AppTrigger
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
@@ -0,0 +1,143 @@
+'use client'
+import type { FC } from 'react'
+import React, { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import AppTrigger from '@/app/components/plugins/plugin-detail-panel/app-selector/app-trigger'
+import AppPicker from '@/app/components/plugins/plugin-detail-panel/app-selector/app-picker'
+import AppInputsPanel from '@/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel'
+import { useAppFullList } from '@/service/use-apps'
+import type { App } from '@/types/app'
+import type {
+  OffsetOptions,
+  Placement,
+} from '@floating-ui/react'
+
+type Props = {
+  value?: {
+    app_id: string
+    inputs: Record<string, any>
+    files?: any[]
+  }
+  scope?: string
+  disabled?: boolean
+  placement?: Placement
+  offset?: OffsetOptions
+  onSelect: (app: {
+    app_id: string
+    inputs: Record<string, any>
+    files?: any[]
+  }) => void
+  supportAddCustomTool?: boolean
+}
+const AppSelector: FC<Props> = ({
+  value,
+  scope,
+  disabled,
+  placement = 'bottom',
+  offset = 4,
+  onSelect,
+}) => {
+  const { t } = useTranslation()
+  const [isShow, onShowChange] = useState(false)
+  const handleTriggerClick = () => {
+    if (disabled) return
+    onShowChange(true)
+  }
+
+  const { data: appList } = useAppFullList()
+  const currentAppInfo = useMemo(() => {
+    if (!appList?.data || !value)
+      return undefined
+    return appList.data.find(app => app.id === value.app_id)
+  }, [appList?.data, value])
+
+  const [isShowChooseApp, setIsShowChooseApp] = useState(false)
+  const handleSelectApp = (app: App) => {
+    const clearValue = app.id !== value?.app_id
+    const appValue = {
+      app_id: app.id,
+      inputs: clearValue ? {} : value?.inputs || {},
+      files: clearValue ? [] : value?.files || [],
+    }
+    onSelect(appValue)
+    setIsShowChooseApp(false)
+  }
+  const handleFormChange = (inputs: Record<string, any>) => {
+    const newFiles = inputs['#image#']
+    delete inputs['#image#']
+    const newValue = {
+      app_id: value?.app_id || '',
+      inputs,
+      files: newFiles ? [newFiles] : value?.files || [],
+    }
+    onSelect(newValue)
+  }
+
+  const formattedValue = useMemo(() => {
+    return {
+      app_id: value?.app_id || '',
+      inputs: {
+        ...value?.inputs,
+        ...(value?.files?.length ? { '#image#': value.files[0] } : {}),
+      },
+    }
+  }, [value])
+
+  return (
+    <>
+      <PortalToFollowElem
+        placement={placement}
+        offset={offset}
+        open={isShow}
+        onOpenChange={onShowChange}
+      >
+        <PortalToFollowElemTrigger
+          className='w-full'
+          onClick={handleTriggerClick}
+        >
+          <AppTrigger
+            open={isShow}
+            appDetail={currentAppInfo}
+          />
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1000]'>
+          <div className="relative w-[389px] min-h-20 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
+            <div className='px-4 py-3 flex flex-col gap-1'>
+              <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('app.appSelector.label')}</div>
+              <AppPicker
+                placement='bottom'
+                offset={offset}
+                trigger={
+                  <AppTrigger
+                    open={isShowChooseApp}
+                    appDetail={currentAppInfo}
+                  />
+                }
+                isShow={isShowChooseApp}
+                onShowChange={setIsShowChooseApp}
+                disabled={false}
+                appList={appList?.data || []}
+                onSelect={handleSelectApp}
+                scope={scope || 'all'}
+              />
+            </div>
+            {/* app inputs config panel */}
+            {currentAppInfo && (
+              <AppInputsPanel
+                value={formattedValue}
+                appDetail={currentAppInfo}
+                onFormChange={handleFormChange}
+              />
+            )}
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+    </>
+  )
+}
+export default React.memo(AppSelector)