merge
Joel
1 year ago
commit
7fe16a9f9d
@ -0,0 +1,60 @@
|
|||||||
|
'use client'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
import React from 'react'
|
||||||
|
import type { Plugin } from '../../../types'
|
||||||
|
import Card from '@/app/components/plugins/card'
|
||||||
|
import Button from '@/app/components/base/button'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import Badge, { BadgeState } from '@/app/components/base/badge/index'
|
||||||
|
import useGetIcon from '../../base/use-get-icon'
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
list: Plugin[]
|
||||||
|
installStatus: { success: boolean }[]
|
||||||
|
onCancel: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const Installed: FC<Props> = ({
|
||||||
|
list,
|
||||||
|
installStatus,
|
||||||
|
onCancel,
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const { getIconUrl } = useGetIcon()
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
|
||||||
|
{/* <p className='text-text-secondary system-md-regular'>{(isFailed && errMsg) ? errMsg : t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p> */}
|
||||||
|
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn space-y-1'>
|
||||||
|
{list.map((plugin, index) => {
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
key={plugin.plugin_id}
|
||||||
|
className='w-full'
|
||||||
|
payload={{
|
||||||
|
...plugin,
|
||||||
|
icon: getIconUrl(plugin.icon),
|
||||||
|
}}
|
||||||
|
installed={installStatus[index].success}
|
||||||
|
installFailed={!installStatus[index].success}
|
||||||
|
titleLeft={plugin.version ? <Badge className='mx-1' size="s" state={BadgeState.Default}>{plugin.version}</Badge> : null}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
|
||||||
|
<Button
|
||||||
|
variant='primary'
|
||||||
|
className='min-w-[72px]'
|
||||||
|
onClick={onCancel}
|
||||||
|
>
|
||||||
|
{t('common.operation.close')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(Installed)
|
||||||
@ -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
|
||||||
@ -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 ? 'empty' : 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
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
'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[]
|
||||||
|
disabled: boolean
|
||||||
|
trigger: React.ReactNode
|
||||||
|
placement?: Placement
|
||||||
|
offset?: OffsetOptions
|
||||||
|
isShow: boolean
|
||||||
|
onShowChange: (isShow: boolean) => void
|
||||||
|
onSelect: (app: App) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const AppPicker: FC<Props> = ({
|
||||||
|
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)
|
||||||
|
}, [appList, 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 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)
|
||||||
@ -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
|
||||||
@ -0,0 +1,139 @@
|
|||||||
|
'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[]
|
||||||
|
}
|
||||||
|
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,
|
||||||
|
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 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}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* app inputs config panel */}
|
||||||
|
{currentAppInfo && (
|
||||||
|
<AppInputsPanel
|
||||||
|
value={formattedValue}
|
||||||
|
appDetail={currentAppInfo}
|
||||||
|
onFormChange={handleFormChange}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</PortalToFollowElemContent>
|
||||||
|
</PortalToFollowElem>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default React.memo(AppSelector)
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
import { get } from './base'
|
||||||
|
import type { App } from '@/types/app'
|
||||||
|
import type { AppListResponse } from '@/models/app'
|
||||||
|
import { useInvalid } from './use-base'
|
||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
|
||||||
|
const NAME_SPACE = 'apps'
|
||||||
|
|
||||||
|
// TODO paging for list
|
||||||
|
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}`),
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { get } from './base'
|
||||||
|
import type {
|
||||||
|
FileUploadConfigResponse,
|
||||||
|
} from '@/models/common'
|
||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
|
||||||
|
const NAME_SPACE = 'common'
|
||||||
|
|
||||||
|
export const useFileUploadConfig = () => {
|
||||||
|
return useQuery<FileUploadConfigResponse>({
|
||||||
|
queryKey: [NAME_SPACE, 'file-upload-config'],
|
||||||
|
queryFn: () => get<FileUploadConfigResponse>('/files/upload'),
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { get } from './base'
|
||||||
|
import type {
|
||||||
|
FetchWorkflowDraftResponse,
|
||||||
|
} from '@/types/workflow'
|
||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
|
||||||
|
const NAME_SPACE = 'workflow'
|
||||||
|
|
||||||
|
export const useAppWorkflow = (appID: string) => {
|
||||||
|
return useQuery<FetchWorkflowDraftResponse>({
|
||||||
|
queryKey: [NAME_SPACE, 'publish', appID],
|
||||||
|
queryFn: () => {
|
||||||
|
if (appID === 'empty')
|
||||||
|
return Promise.resolve({} as unknown as FetchWorkflowDraftResponse)
|
||||||
|
return get<FetchWorkflowDraftResponse>(`/apps/${appID}/workflows/publish`)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue