diff --git a/web/app/components/tools/edit-custom-collection-modal/modal.tsx b/web/app/components/tools/edit-custom-collection-modal/modal.tsx new file mode 100644 index 0000000000..099012b277 --- /dev/null +++ b/web/app/components/tools/edit-custom-collection-modal/modal.tsx @@ -0,0 +1,361 @@ +'use client' +import type { FC } from 'react' +import React, { useEffect, useState } from 'react' +import { useTranslation } from 'react-i18next' +import { useDebounce, useGetState } from 'ahooks' +import produce from 'immer' +import { LinkExternal02, Settings01 } from '../../base/icons/src/vender/line/general' +import type { Credential, CustomCollectionBackend, CustomParamSchema, Emoji } from '../types' +import { AuthHeaderPrefix, AuthType } from '../types' +import GetSchema from './get-schema' +import ConfigCredentials from './config-credentials' +import TestApi from './test-api' +import cn from '@/utils/classnames' +import Input from '@/app/components/base/input' +import Textarea from '@/app/components/base/textarea' +import EmojiPicker from '@/app/components/base/emoji-picker' +import AppIcon from '@/app/components/base/app-icon' +import { parseParamsSchema } from '@/service/tools' +import LabelSelector from '@/app/components/tools/labels/selector' +import Toast from '@/app/components/base/toast' +import Modal from '../../base/modal' +import Button from '@/app/components/base/button' + +const fieldNameClassNames = 'py-2 leading-5 text-sm font-medium text-gray-900' +type Props = { + positionLeft?: boolean + payload: any + onHide: () => void + onAdd?: (payload: CustomCollectionBackend) => void + onRemove?: () => void + onEdit?: (payload: CustomCollectionBackend) => void +} +// Add and Edit +const EditCustomCollectionModal: FC = ({ + payload, + onHide, + onAdd, + onEdit, + onRemove, +}) => { + const { t } = useTranslation() + const isAdd = !payload + const isEdit = !!payload + + const [editFirst, setEditFirst] = useState(!isAdd) + const [paramsSchemas, setParamsSchemas] = useState(payload?.tools || []) + const [customCollection, setCustomCollection, getCustomCollection] = useGetState(isAdd + ? { + provider: '', + credentials: { + auth_type: AuthType.none, + api_key_header: 'Authorization', + api_key_header_prefix: AuthHeaderPrefix.basic, + }, + icon: { + content: '🕵️', + background: '#FEF7C3', + }, + schema_type: '', + schema: '', + } + : payload) + + const originalProvider = isEdit ? payload.provider : '' + + const [showEmojiPicker, setShowEmojiPicker] = useState(false) + const emoji = customCollection.icon + const setEmoji = (emoji: Emoji) => { + const newCollection = produce(customCollection, (draft) => { + draft.icon = emoji + }) + setCustomCollection(newCollection) + } + const schema = customCollection.schema + const debouncedSchema = useDebounce(schema, { wait: 500 }) + const setSchema = (schema: any) => { + const newCollection = produce(customCollection, (draft) => { + draft.schema = schema + }) + setCustomCollection(newCollection) + } + + useEffect(() => { + if (!debouncedSchema) + return + if (isEdit && editFirst) { + setEditFirst(false) + return + } + (async () => { + try { + const { parameters_schema, schema_type } = await parseParamsSchema(debouncedSchema) + const customCollection = getCustomCollection() + const newCollection = produce(customCollection, (draft) => { + draft.schema_type = schema_type + }) + setCustomCollection(newCollection) + setParamsSchemas(parameters_schema) + } + catch (e) { + const customCollection = getCustomCollection() + const newCollection = produce(customCollection, (draft) => { + draft.schema_type = '' + }) + setCustomCollection(newCollection) + setParamsSchemas([]) + } + })() + }, [debouncedSchema]) + + const [credentialsModalShow, setCredentialsModalShow] = useState(false) + const credential = customCollection.credentials + const setCredential = (credential: Credential) => { + const newCollection = produce(customCollection, (draft) => { + draft.credentials = credential + }) + setCustomCollection(newCollection) + } + + const [currTool, setCurrTool] = useState(null) + const [isShowTestApi, setIsShowTestApi] = useState(false) + + const [labels, setLabels] = useState(payload?.labels || []) + const handleLabelSelect = (value: string[]) => { + setLabels(value) + } + + const handleSave = () => { + // const postData = clone(customCollection) + const postData = produce(customCollection, (draft) => { + delete draft.tools + + if (draft.credentials.auth_type === AuthType.none) { + delete draft.credentials.api_key_header + delete draft.credentials.api_key_header_prefix + delete draft.credentials.api_key_value + } + + draft.labels = labels + }) + + let errorMessage = '' + if (!postData.provider) + errorMessage = t('common.errorMsg.fieldRequired', { field: t('tools.createTool.name') }) + + if (!postData.schema) + errorMessage = t('common.errorMsg.fieldRequired', { field: t('tools.createTool.schema') }) + + if (errorMessage) { + Toast.notify({ + type: 'error', + message: errorMessage, + }) + return + } + + if (isAdd) { + onAdd?.(postData) + return + } + + onEdit?.({ + ...postData, + original_provider: originalProvider, + }) + } + + const getPath = (url: string) => { + if (!url) + return '' + + try { + const path = decodeURI(new URL(url).pathname) + return path || '' + } + catch (e) { + return url + } + } + + return ( + <> + +
+
+ {t('tools.createTool.title')} +
+
+
+
{t('tools.createTool.name')} *
+
+ { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.content} background={emoji.background} /> + { + const newCollection = produce(customCollection, (draft) => { + draft.provider = e.target.value + }) + setCustomCollection(newCollection) + }} + /> +
+
+ + {/* Schema */} +
+
+
+
{t('tools.createTool.schema')}*
+
+ +
{t('tools.createTool.viewSchemaSpec')}
+ + +
+ + +
+