|
|
|
|
@ -3,8 +3,9 @@ import type { FC } from 'react'
|
|
|
|
|
import React, { useEffect, useState } from 'react'
|
|
|
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
|
import { useDebounce, useGetState } from 'ahooks'
|
|
|
|
|
import { RiSettings2Line } from '@remixicon/react'
|
|
|
|
|
import produce from 'immer'
|
|
|
|
|
import { LinkExternal02, Settings01 } from '../../base/icons/src/vender/line/general'
|
|
|
|
|
import { LinkExternal02 } 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'
|
|
|
|
|
@ -21,7 +22,6 @@ import { parseParamsSchema } from '@/service/tools'
|
|
|
|
|
import LabelSelector from '@/app/components/tools/labels/selector'
|
|
|
|
|
import Toast from '@/app/components/base/toast'
|
|
|
|
|
|
|
|
|
|
const fieldNameClassNames = 'py-2 leading-5 text-sm font-medium text-gray-900'
|
|
|
|
|
type Props = {
|
|
|
|
|
positionLeft?: boolean
|
|
|
|
|
payload: any
|
|
|
|
|
@ -189,12 +189,12 @@ const EditCustomCollectionModal: FC<Props> = ({
|
|
|
|
|
panelClassName='mt-2 !w-[640px]'
|
|
|
|
|
maxWidthClassName='!max-w-[640px]'
|
|
|
|
|
height='calc(100vh - 16px)'
|
|
|
|
|
headerClassName='!border-b-black/5'
|
|
|
|
|
headerClassName='!border-b-divider-regular'
|
|
|
|
|
body={
|
|
|
|
|
<div className='flex flex-col h-full'>
|
|
|
|
|
<div className='grow h-0 overflow-y-auto px-6 py-3 space-y-4'>
|
|
|
|
|
<div>
|
|
|
|
|
<div className={fieldNameClassNames}>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
|
|
|
|
|
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
|
|
|
|
|
<div className='flex items-center justify-between gap-3'>
|
|
|
|
|
<AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.content} background={emoji.background} />
|
|
|
|
|
<Input
|
|
|
|
|
@ -214,12 +214,12 @@ const EditCustomCollectionModal: FC<Props> = ({
|
|
|
|
|
<div className='select-none'>
|
|
|
|
|
<div className='flex justify-between items-center'>
|
|
|
|
|
<div className='flex items-center'>
|
|
|
|
|
<div className={fieldNameClassNames}>{t('tools.createTool.schema')}<span className='ml-1 text-red-500'>*</span></div>
|
|
|
|
|
<div className='mx-2 w-px h-3 bg-black/5'></div>
|
|
|
|
|
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.schema')}<span className='ml-1 text-red-500'>*</span></div>
|
|
|
|
|
<div className='mx-2 w-px h-3 bg-divider-regular'></div>
|
|
|
|
|
<a
|
|
|
|
|
href="https://swagger.io/specification/"
|
|
|
|
|
target='_blank' rel='noopener noreferrer'
|
|
|
|
|
className='flex items-center h-[18px] space-x-1 text-[#155EEF]'
|
|
|
|
|
className='flex items-center h-[18px] space-x-1 text-text-accent'
|
|
|
|
|
>
|
|
|
|
|
<div className='text-xs font-normal'>{t('tools.createTool.viewSchemaSpec')}</div>
|
|
|
|
|
<LinkExternal02 className='w-3 h-3' />
|
|
|
|
|
@ -238,11 +238,11 @@ const EditCustomCollectionModal: FC<Props> = ({
|
|
|
|
|
|
|
|
|
|
{/* Available Tools */}
|
|
|
|
|
<div>
|
|
|
|
|
<div className={fieldNameClassNames}>{t('tools.createTool.availableTools.title')}</div>
|
|
|
|
|
<div className='rounded-lg border border-gray-200 w-full overflow-x-auto'>
|
|
|
|
|
<table className='w-full leading-[18px] text-xs text-gray-700 font-normal'>
|
|
|
|
|
<thead className='text-gray-500 uppercase'>
|
|
|
|
|
<tr className={cn(paramsSchemas.length > 0 && 'border-b', 'border-gray-200')}>
|
|
|
|
|
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.availableTools.title')}</div>
|
|
|
|
|
<div className='rounded-lg border border-divider-regular w-full overflow-x-auto'>
|
|
|
|
|
<table className='w-full system-xs-regular text-text-secondary'>
|
|
|
|
|
<thead className='text-text-tertiary uppercase'>
|
|
|
|
|
<tr className={cn(paramsSchemas.length > 0 && 'border-b', 'border-divider-regular')}>
|
|
|
|
|
<th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.name')}</th>
|
|
|
|
|
<th className="p-2 pl-3 font-medium w-[236px]">{t('tools.createTool.availableTools.description')}</th>
|
|
|
|
|
<th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.method')}</th>
|
|
|
|
|
@ -252,9 +252,9 @@ const EditCustomCollectionModal: FC<Props> = ({
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
{paramsSchemas.map((item, index) => (
|
|
|
|
|
<tr key={index} className='border-b last:border-0 border-gray-200'>
|
|
|
|
|
<tr key={index} className='border-b last:border-0 border-divider-regular'>
|
|
|
|
|
<td className="p-2 pl-3">{item.operation_id}</td>
|
|
|
|
|
<td className="p-2 pl-3 text-gray-500 w-[236px]">{item.summary}</td>
|
|
|
|
|
<td className="p-2 pl-3 w-[236px]">{item.summary}</td>
|
|
|
|
|
<td className="p-2 pl-3">{item.method}</td>
|
|
|
|
|
<td className="p-2 pl-3">{getPath(item.server_url)}</td>
|
|
|
|
|
<td className="p-2 pl-3 w-[62px]">
|
|
|
|
|
@ -277,22 +277,22 @@ const EditCustomCollectionModal: FC<Props> = ({
|
|
|
|
|
|
|
|
|
|
{/* Authorization method */}
|
|
|
|
|
<div>
|
|
|
|
|
<div className={fieldNameClassNames}>{t('tools.createTool.authMethod.title')}</div>
|
|
|
|
|
<div className='flex items-center h-9 justify-between px-2.5 bg-gray-100 rounded-lg cursor-pointer' onClick={() => setCredentialsModalShow(true)}>
|
|
|
|
|
<div className='text-sm font-normal text-gray-900'>{t(`tools.createTool.authMethod.types.${credential.auth_type}`)}</div>
|
|
|
|
|
<Settings01 className='w-4 h-4 text-gray-700 opacity-60' />
|
|
|
|
|
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.authMethod.title')}</div>
|
|
|
|
|
<div className='flex items-center h-9 justify-between px-2.5 bg-components-input-bg-normal rounded-lg cursor-pointer' onClick={() => setCredentialsModalShow(true)}>
|
|
|
|
|
<div className='system-xs-regular text-text-primary'>{t(`tools.createTool.authMethod.types.${credential.auth_type}`)}</div>
|
|
|
|
|
<RiSettings2Line className='w-4 h-4 text-text-secondary' />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Labels */}
|
|
|
|
|
<div>
|
|
|
|
|
<div className='py-2 leading-5 text-sm font-medium text-gray-900'>{t('tools.createTool.toolInput.label')}</div>
|
|
|
|
|
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.toolInput.label')}</div>
|
|
|
|
|
<LabelSelector value={labels} onChange={handleLabelSelect} />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Privacy Policy */}
|
|
|
|
|
<div>
|
|
|
|
|
<div className={fieldNameClassNames}>{t('tools.createTool.privacyPolicy')}</div>
|
|
|
|
|
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.privacyPolicy')}</div>
|
|
|
|
|
<Input
|
|
|
|
|
value={customCollection.privacy_policy}
|
|
|
|
|
onChange={(e) => {
|
|
|
|
|
@ -305,7 +305,7 @@ const EditCustomCollectionModal: FC<Props> = ({
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<div className={fieldNameClassNames}>{t('tools.createTool.customDisclaimer')}</div>
|
|
|
|
|
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.customDisclaimer')}</div>
|
|
|
|
|
<Input
|
|
|
|
|
value={customCollection.custom_disclaimer}
|
|
|
|
|
onChange={(e) => {
|
|
|
|
|
@ -318,10 +318,10 @@ const EditCustomCollectionModal: FC<Props> = ({
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-gray-50 border-t border-black/5')} >
|
|
|
|
|
<div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-background-section-burn border-t border-divider-regular')} >
|
|
|
|
|
{
|
|
|
|
|
isEdit && (
|
|
|
|
|
<Button onClick={onRemove} className='text-red-500 border-red-50 hover:border-red-500'>{t('common.operation.delete')}</Button>
|
|
|
|
|
<Button variant='warning' onClick={onRemove}>{t('common.operation.delete')}</Button>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
<div className='flex space-x-2 '>
|
|
|
|
|
|
JzoNg
1 year ago