mirror of
https://github.com/langgenius/dify.git
synced 2026-05-06 10:28:10 +08:00
chore(web): new lint setup (#30020)
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
This commit is contained in:
Stephen Zhou
GitHub
@ -1,15 +1,15 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import type { Credential } from '@/app/components/tools/types'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import type { Credential } from '@/app/components/tools/types'
|
||||
import Input from '@/app/components/base/input'
|
||||
import Drawer from '@/app/components/base/drawer-plus'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Drawer from '@/app/components/base/drawer-plus'
|
||||
import Input from '@/app/components/base/input'
|
||||
import Radio from '@/app/components/base/radio/ui'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import { AuthHeaderPrefix, AuthType } from '@/app/components/tools/types'
|
||||
import { cn } from '@/utils/classnames'
|
||||
|
||||
type Props = {
|
||||
positionCenter?: boolean
|
||||
@ -32,7 +32,7 @@ const SelectItem: FC<ItemProps> = ({ text, value, isChecked, onClick }) => {
|
||||
onClick={() => onClick(value)}
|
||||
>
|
||||
<Radio isChecked={isChecked} />
|
||||
<div className='system-sm-regular text-text-primary'>{text}</div>
|
||||
<div className="system-sm-regular text-text-primary">{text}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -52,18 +52,18 @@ const ConfigCredential: FC<Props> = ({
|
||||
positionCenter={positionCenter}
|
||||
onHide={onHide}
|
||||
title={t('tools.createTool.authMethod.title')!}
|
||||
dialogClassName='z-[60]'
|
||||
dialogBackdropClassName='z-[70]'
|
||||
panelClassName='mt-2 !w-[520px] h-fit z-[80]'
|
||||
maxWidthClassName='!max-w-[520px]'
|
||||
height={'fit-content'}
|
||||
headerClassName='!border-b-divider-regular'
|
||||
body={
|
||||
<div className='px-6 pt-2'>
|
||||
<div className='space-y-4'>
|
||||
dialogClassName="z-[60]"
|
||||
dialogBackdropClassName="z-[70]"
|
||||
panelClassName="mt-2 !w-[520px] h-fit z-[80]"
|
||||
maxWidthClassName="!max-w-[520px]"
|
||||
height="fit-content"
|
||||
headerClassName="!border-b-divider-regular"
|
||||
body={(
|
||||
<div className="px-6 pt-2">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.type')}</div>
|
||||
<div className='flex space-x-3'>
|
||||
<div className="system-sm-medium py-2 text-text-primary">{t('tools.createTool.authMethod.type')}</div>
|
||||
<div className="flex space-x-3">
|
||||
<SelectItem
|
||||
text={t('tools.createTool.authMethod.types.none')}
|
||||
value={AuthType.none}
|
||||
@ -98,8 +98,8 @@ const ConfigCredential: FC<Props> = ({
|
||||
{tempCredential.auth_type === AuthType.apiKeyHeader && (
|
||||
<>
|
||||
<div>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authHeaderPrefix.title')}</div>
|
||||
<div className='flex space-x-3'>
|
||||
<div className="system-sm-medium py-2 text-text-primary">{t('tools.createTool.authHeaderPrefix.title')}</div>
|
||||
<div className="flex space-x-3">
|
||||
<SelectItem
|
||||
text={t('tools.createTool.authHeaderPrefix.types.basic')}
|
||||
value={AuthHeaderPrefix.basic}
|
||||
@ -121,15 +121,15 @@ const ConfigCredential: FC<Props> = ({
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className='system-sm-medium flex items-center py-2 text-text-primary'>
|
||||
<div className="system-sm-medium flex items-center py-2 text-text-primary">
|
||||
{t('tools.createTool.authMethod.key')}
|
||||
<Tooltip
|
||||
popupContent={
|
||||
<div className='w-[261px] text-text-tertiary'>
|
||||
popupContent={(
|
||||
<div className="w-[261px] text-text-tertiary">
|
||||
{t('tools.createTool.authMethod.keyTooltip')}
|
||||
</div>
|
||||
}
|
||||
triggerClassName='ml-0.5 w-4 h-4'
|
||||
)}
|
||||
triggerClassName="ml-0.5 w-4 h-4"
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
@ -139,26 +139,27 @@ const ConfigCredential: FC<Props> = ({
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.value')}</div>
|
||||
<div className="system-sm-medium py-2 text-text-primary">{t('tools.createTool.authMethod.value')}</div>
|
||||
<Input
|
||||
value={tempCredential.api_key_value}
|
||||
onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
|
||||
placeholder={t('tools.createTool.authMethod.types.apiValuePlaceholder')!}
|
||||
/>
|
||||
</div>
|
||||
</>)}
|
||||
</>
|
||||
)}
|
||||
{tempCredential.auth_type === AuthType.apiKeyQuery && (
|
||||
<>
|
||||
<div>
|
||||
<div className='system-sm-medium flex items-center py-2 text-text-primary'>
|
||||
<div className="system-sm-medium flex items-center py-2 text-text-primary">
|
||||
{t('tools.createTool.authMethod.queryParam')}
|
||||
<Tooltip
|
||||
popupContent={
|
||||
<div className='w-[261px] text-text-tertiary'>
|
||||
popupContent={(
|
||||
<div className="w-[261px] text-text-tertiary">
|
||||
{t('tools.createTool.authMethod.queryParamTooltip')}
|
||||
</div>
|
||||
}
|
||||
triggerClassName='ml-0.5 w-4 h-4'
|
||||
)}
|
||||
triggerClassName="ml-0.5 w-4 h-4"
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
@ -168,26 +169,32 @@ const ConfigCredential: FC<Props> = ({
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.value')}</div>
|
||||
<div className="system-sm-medium py-2 text-text-primary">{t('tools.createTool.authMethod.value')}</div>
|
||||
<Input
|
||||
value={tempCredential.api_key_value}
|
||||
onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
|
||||
placeholder={t('tools.createTool.authMethod.types.apiValuePlaceholder')!}
|
||||
/>
|
||||
</div>
|
||||
</>)}
|
||||
</>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
<div className='mt-4 flex shrink-0 justify-end space-x-2 py-4'>
|
||||
<div className="mt-4 flex shrink-0 justify-end space-x-2 py-4">
|
||||
<Button onClick={onHide}>{t('common.operation.cancel')}</Button>
|
||||
<Button variant='primary' onClick={() => {
|
||||
onChange(tempCredential)
|
||||
onHide()
|
||||
}}>{t('common.operation.save')}</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => {
|
||||
onChange(tempCredential)
|
||||
onHide()
|
||||
}}
|
||||
>
|
||||
{t('common.operation.save')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useClickAway } from 'ahooks'
|
||||
import {
|
||||
RiAddLine,
|
||||
RiArrowDownSLine,
|
||||
} from '@remixicon/react'
|
||||
import Toast from '../../base/toast'
|
||||
import examples from './examples'
|
||||
import { useClickAway } from 'ahooks'
|
||||
import React, { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Input from '@/app/components/base/input'
|
||||
import { importSchemaFromURL } from '@/service/tools'
|
||||
import Toast from '../../base/toast'
|
||||
import examples from './examples'
|
||||
|
||||
type Props = {
|
||||
onChange: (value: string) => void
|
||||
@ -56,30 +56,30 @@ const GetSchema: FC<Props> = ({
|
||||
}, showExamplesRef)
|
||||
|
||||
return (
|
||||
<div className='relative flex w-[224px] justify-end space-x-1'>
|
||||
<div className="relative flex w-[224px] justify-end space-x-1">
|
||||
<div ref={importURLRef}>
|
||||
<Button
|
||||
size='small'
|
||||
className='space-x-1 '
|
||||
size="small"
|
||||
className="space-x-1 "
|
||||
onClick={() => { setShowImportFromUrl(!showImportFromUrl) }}
|
||||
>
|
||||
<RiAddLine className='h-3 w-3' />
|
||||
<div className='system-xs-medium text-text-secondary'>{t('tools.createTool.importFromUrl')}</div>
|
||||
<RiAddLine className="h-3 w-3" />
|
||||
<div className="system-xs-medium text-text-secondary">{t('tools.createTool.importFromUrl')}</div>
|
||||
</Button>
|
||||
{showImportFromUrl && (
|
||||
<div className=' absolute left-[-35px] top-[26px] rounded-lg border border-components-panel-border bg-components-panel-bg p-2 shadow-lg'>
|
||||
<div className='relative'>
|
||||
<div className=" absolute left-[-35px] top-[26px] rounded-lg border border-components-panel-border bg-components-panel-bg p-2 shadow-lg">
|
||||
<div className="relative">
|
||||
<Input
|
||||
type='text'
|
||||
className='w-[244px]'
|
||||
type="text"
|
||||
className="w-[244px]"
|
||||
placeholder={t('tools.createTool.importFromUrlPlaceHolder')!}
|
||||
value={importUrl}
|
||||
onChange={e => setImportUrl(e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
className='absolute right-1 top-1'
|
||||
size='small'
|
||||
variant='primary'
|
||||
className="absolute right-1 top-1"
|
||||
size="small"
|
||||
variant="primary"
|
||||
disabled={!importUrl}
|
||||
onClick={handleImportFromUrl}
|
||||
loading={isParsing}
|
||||
@ -90,17 +90,17 @@ const GetSchema: FC<Props> = ({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='relative -mt-0.5' ref={showExamplesRef}>
|
||||
<div className="relative -mt-0.5" ref={showExamplesRef}>
|
||||
<Button
|
||||
size='small'
|
||||
className='space-x-1'
|
||||
size="small"
|
||||
className="space-x-1"
|
||||
onClick={() => { setShowExamples(!showExamples) }}
|
||||
>
|
||||
<div className='system-xs-medium text-text-secondary'>{t('tools.createTool.examples')}</div>
|
||||
<RiArrowDownSLine className='h-3 w-3' />
|
||||
<div className="system-xs-medium text-text-secondary">{t('tools.createTool.examples')}</div>
|
||||
<RiArrowDownSLine className="h-3 w-3" />
|
||||
</Button>
|
||||
{showExamples && (
|
||||
<div className='absolute right-0 top-7 rounded-lg bg-components-panel-bg p-1 shadow-sm'>
|
||||
<div className="absolute right-0 top-7 rounded-lg bg-components-panel-bg p-1 shadow-sm">
|
||||
{examples.map(item => (
|
||||
<div
|
||||
key={item.key}
|
||||
@ -108,7 +108,7 @@ const GetSchema: FC<Props> = ({
|
||||
onChange(item.content)
|
||||
setShowExamples(false)
|
||||
}}
|
||||
className='system-sm-regular cursor-pointer whitespace-nowrap rounded-lg px-3 py-1.5 leading-5 text-text-secondary hover:bg-components-panel-on-panel-item-bg-hover'
|
||||
className="system-sm-regular cursor-pointer whitespace-nowrap rounded-lg px-3 py-1.5 leading-5 text-text-secondary hover:bg-components-panel-on-panel-item-bg-hover"
|
||||
>
|
||||
{t(`tools.createTool.exampleOptions.${item.key}`)}
|
||||
</div>
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import type { Credential, CustomCollectionBackend, CustomParamSchema, Emoji } from '../types'
|
||||
import { RiSettings2Line } from '@remixicon/react'
|
||||
import { useDebounce, useGetState } from 'ahooks'
|
||||
import { produce } from 'immer'
|
||||
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 } 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 Drawer from '@/app/components/base/drawer-plus'
|
||||
import AppIcon from '@/app/components/base/app-icon'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Drawer from '@/app/components/base/drawer-plus'
|
||||
import EmojiPicker from '@/app/components/base/emoji-picker'
|
||||
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 LabelSelector from '@/app/components/tools/labels/selector'
|
||||
import { parseParamsSchema } from '@/service/tools'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import { LinkExternal02 } from '../../base/icons/src/vender/line/general'
|
||||
import { AuthHeaderPrefix, AuthType } from '../types'
|
||||
import ConfigCredentials from './config-credentials'
|
||||
import GetSchema from './get-schema'
|
||||
import TestApi from './test-api'
|
||||
|
||||
type Props = {
|
||||
positionLeft?: boolean
|
||||
@ -49,19 +49,19 @@ const EditCustomCollectionModal: FC<Props> = ({
|
||||
const [paramsSchemas, setParamsSchemas] = useState<CustomParamSchema[]>(payload?.tools || [])
|
||||
const [customCollection, setCustomCollection, getCustomCollection] = useGetState<CustomCollectionBackend>(isAdd
|
||||
? {
|
||||
provider: '',
|
||||
credentials: {
|
||||
auth_type: AuthType.none,
|
||||
api_key_header: 'Authorization',
|
||||
api_key_header_prefix: AuthHeaderPrefix.basic,
|
||||
},
|
||||
icon: {
|
||||
content: '🕵️',
|
||||
background: '#FEF7C3',
|
||||
},
|
||||
schema_type: '',
|
||||
schema: '',
|
||||
}
|
||||
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 : ''
|
||||
@ -189,19 +189,24 @@ const EditCustomCollectionModal: FC<Props> = ({
|
||||
onHide={onHide}
|
||||
title={t(`tools.createTool.${isAdd ? 'title' : 'editTitle'}`)!}
|
||||
dialogClassName={dialogClassName}
|
||||
panelClassName='mt-2 !w-[640px]'
|
||||
maxWidthClassName='!max-w-[640px]'
|
||||
height='calc(100vh - 16px)'
|
||||
headerClassName='!border-b-divider-regular'
|
||||
body={
|
||||
<div className='flex h-full flex-col'>
|
||||
<div className='h-0 grow space-y-4 overflow-y-auto px-6 py-3'>
|
||||
panelClassName="mt-2 !w-[640px]"
|
||||
maxWidthClassName="!max-w-[640px]"
|
||||
height="calc(100vh - 16px)"
|
||||
headerClassName="!border-b-divider-regular"
|
||||
body={(
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="h-0 grow space-y-4 overflow-y-auto px-6 py-3">
|
||||
<div>
|
||||
<div className='system-sm-medium py-2 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} />
|
||||
<div className="system-sm-medium py-2 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
|
||||
className='h-10 grow' placeholder={t('tools.createTool.toolNamePlaceHolder')!}
|
||||
className="h-10 grow"
|
||||
placeholder={t('tools.createTool.toolNamePlaceHolder')!}
|
||||
value={customCollection.provider}
|
||||
onChange={(e) => {
|
||||
const newCollection = produce(customCollection, (draft) => {
|
||||
@ -214,25 +219,29 @@ const EditCustomCollectionModal: FC<Props> = ({
|
||||
</div>
|
||||
|
||||
{/* Schema */}
|
||||
<div className='select-none'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center'>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.schema')}<span className='ml-1 text-red-500'>*</span></div>
|
||||
<div className='mx-2 h-3 w-px bg-divider-regular'></div>
|
||||
<div className="select-none">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div className="system-sm-medium py-2 text-text-primary">
|
||||
{t('tools.createTool.schema')}
|
||||
<span className="ml-1 text-red-500">*</span>
|
||||
</div>
|
||||
<div className="mx-2 h-3 w-px bg-divider-regular"></div>
|
||||
<a
|
||||
href="https://swagger.io/specification/"
|
||||
target='_blank' rel='noopener noreferrer'
|
||||
className='flex h-[18px] items-center space-x-1 text-text-accent'
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex h-[18px] items-center space-x-1 text-text-accent"
|
||||
>
|
||||
<div className='text-xs font-normal'>{t('tools.createTool.viewSchemaSpec')}</div>
|
||||
<LinkExternal02 className='h-3 w-3' />
|
||||
<div className="text-xs font-normal">{t('tools.createTool.viewSchemaSpec')}</div>
|
||||
<LinkExternal02 className="h-3 w-3" />
|
||||
</a>
|
||||
</div>
|
||||
<GetSchema onChange={setSchema} />
|
||||
|
||||
</div>
|
||||
<Textarea
|
||||
className='h-[240px] resize-none'
|
||||
className="h-[240px] resize-none"
|
||||
value={schema}
|
||||
onChange={e => setSchema(e.target.value)}
|
||||
placeholder={t('tools.createTool.schemaPlaceHolder')!}
|
||||
@ -241,10 +250,10 @@ const EditCustomCollectionModal: FC<Props> = ({
|
||||
|
||||
{/* Available Tools */}
|
||||
<div>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.availableTools.title')}</div>
|
||||
<div className='w-full overflow-x-auto rounded-lg border border-divider-regular'>
|
||||
<table className='system-xs-regular w-full text-text-secondary'>
|
||||
<thead className='uppercase text-text-tertiary'>
|
||||
<div className="system-sm-medium py-2 text-text-primary">{t('tools.createTool.availableTools.title')}</div>
|
||||
<div className="w-full overflow-x-auto rounded-lg border border-divider-regular">
|
||||
<table className="system-xs-regular w-full text-text-secondary">
|
||||
<thead className="uppercase text-text-tertiary">
|
||||
<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="w-[236px] p-2 pl-3 font-medium">{t('tools.createTool.availableTools.description')}</th>
|
||||
@ -255,14 +264,14 @@ const EditCustomCollectionModal: FC<Props> = ({
|
||||
</thead>
|
||||
<tbody>
|
||||
{paramsSchemas.map((item, index) => (
|
||||
<tr key={index} className='border-b border-divider-regular last:border-0'>
|
||||
<tr key={index} className="border-b border-divider-regular last:border-0">
|
||||
<td className="p-2 pl-3">{item.operation_id}</td>
|
||||
<td className="w-[236px] p-2 pl-3">{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="w-[62px] p-2 pl-3">
|
||||
<Button
|
||||
size='small'
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setCurrTool(item)
|
||||
setIsShowTestApi(true)
|
||||
@ -280,22 +289,22 @@ const EditCustomCollectionModal: FC<Props> = ({
|
||||
|
||||
{/* Authorization method */}
|
||||
<div>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.title')}</div>
|
||||
<div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5' onClick={() => setCredentialsModalShow(true)}>
|
||||
<div className='system-xs-regular text-text-primary'>{t(`tools.createTool.authMethod.types.${credential.auth_type}`)}</div>
|
||||
<RiSettings2Line className='h-4 w-4 text-text-secondary' />
|
||||
<div className="system-sm-medium py-2 text-text-primary">{t('tools.createTool.authMethod.title')}</div>
|
||||
<div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5" onClick={() => setCredentialsModalShow(true)}>
|
||||
<div className="system-xs-regular text-text-primary">{t(`tools.createTool.authMethod.types.${credential.auth_type}`)}</div>
|
||||
<RiSettings2Line className="h-4 w-4 text-text-secondary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Labels */}
|
||||
<div>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.toolInput.label')}</div>
|
||||
<div className="system-sm-medium py-2 text-text-primary">{t('tools.createTool.toolInput.label')}</div>
|
||||
<LabelSelector value={labels} onChange={handleLabelSelect} />
|
||||
</div>
|
||||
|
||||
{/* Privacy Policy */}
|
||||
<div>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.privacyPolicy')}</div>
|
||||
<div className="system-sm-medium py-2 text-text-primary">{t('tools.createTool.privacyPolicy')}</div>
|
||||
<Input
|
||||
value={customCollection.privacy_policy}
|
||||
onChange={(e) => {
|
||||
@ -304,11 +313,13 @@ const EditCustomCollectionModal: FC<Props> = ({
|
||||
})
|
||||
setCustomCollection(newCollection)
|
||||
}}
|
||||
className='h-10 grow' placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
|
||||
className="h-10 grow"
|
||||
placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.customDisclaimer')}</div>
|
||||
<div className="system-sm-medium py-2 text-text-primary">{t('tools.createTool.customDisclaimer')}</div>
|
||||
<Input
|
||||
value={customCollection.custom_disclaimer}
|
||||
onChange={(e) => {
|
||||
@ -317,38 +328,42 @@ const EditCustomCollectionModal: FC<Props> = ({
|
||||
})
|
||||
setCustomCollection(newCollection)
|
||||
}}
|
||||
className='h-10 grow' placeholder={t('tools.createTool.customDisclaimerPlaceholder') || ''} />
|
||||
className="h-10 grow"
|
||||
placeholder={t('tools.createTool.customDisclaimerPlaceholder') || ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')} >
|
||||
<div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')}>
|
||||
{
|
||||
isEdit && (
|
||||
<Button variant='warning' onClick={onRemove}>{t('common.operation.delete')}</Button>
|
||||
<Button variant="warning" onClick={onRemove}>{t('common.operation.delete')}</Button>
|
||||
)
|
||||
}
|
||||
<div className='flex space-x-2 '>
|
||||
<div className="flex space-x-2 ">
|
||||
<Button onClick={onHide}>{t('common.operation.cancel')}</Button>
|
||||
<Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
|
||||
<Button variant="primary" onClick={handleSave}>{t('common.operation.save')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
{showEmojiPicker && <EmojiPicker
|
||||
onSelect={(icon, icon_background) => {
|
||||
setEmoji({ content: icon, background: icon_background })
|
||||
setShowEmojiPicker(false)
|
||||
}}
|
||||
onClose={() => {
|
||||
setShowEmojiPicker(false)
|
||||
}}
|
||||
/>}
|
||||
{showEmojiPicker && (
|
||||
<EmojiPicker
|
||||
onSelect={(icon, icon_background) => {
|
||||
setEmoji({ content: icon, background: icon_background })
|
||||
setShowEmojiPicker(false)
|
||||
}}
|
||||
onClose={() => {
|
||||
setShowEmojiPicker(false)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{credentialsModalShow && (
|
||||
<ConfigCredentials
|
||||
positionCenter={isAdd}
|
||||
credential={credential}
|
||||
onChange={setCredential}
|
||||
onHide={() => setCredentialsModalShow(false)}
|
||||
/>)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{isShowTestApi && (
|
||||
<TestApi
|
||||
positionCenter={isAdd}
|
||||
@ -358,7 +373,7 @@ const EditCustomCollectionModal: FC<Props> = ({
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
isShowMask={true}
|
||||
clickOutsideNotOpen={true}
|
||||
/>
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import type { Credential, CustomCollectionBackend, CustomParamSchema } from '@/app/components/tools/types'
|
||||
import { RiSettings2Line } from '@remixicon/react'
|
||||
import React, { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useContext } from 'use-context-selector'
|
||||
import { RiSettings2Line } from '@remixicon/react'
|
||||
import ConfigCredentials from './config-credentials'
|
||||
import { AuthType, type Credential, type CustomCollectionBackend, type CustomParamSchema } from '@/app/components/tools/types'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Input from '@/app/components/base/input'
|
||||
import Drawer from '@/app/components/base/drawer-plus'
|
||||
import Input from '@/app/components/base/input'
|
||||
import { AuthType } from '@/app/components/tools/types'
|
||||
import I18n from '@/context/i18n'
|
||||
import { testAPIAvailable } from '@/service/tools'
|
||||
import { getLanguage } from '@/i18n-config/language'
|
||||
import { testAPIAvailable } from '@/service/tools'
|
||||
import ConfigCredentials from './config-credentials'
|
||||
|
||||
type Props = {
|
||||
positionCenter?: boolean
|
||||
@ -36,7 +37,8 @@ const TestApi: FC<Props> = ({
|
||||
const { operation_id: toolName, parameters } = tool
|
||||
const [parametersValue, setParametersValue] = useState<Record<string, string>>({})
|
||||
const handleTest = async () => {
|
||||
if (testing) return
|
||||
if (testing)
|
||||
return
|
||||
setTesting(true)
|
||||
// clone test schema
|
||||
const credentials = JSON.parse(JSON.stringify(tempCredential)) as Credential
|
||||
@ -65,34 +67,34 @@ const TestApi: FC<Props> = ({
|
||||
positionCenter={positionCenter}
|
||||
onHide={onHide}
|
||||
title={`${t('tools.test.title')} ${toolName}`}
|
||||
panelClassName='mt-2 !w-[600px]'
|
||||
maxWidthClassName='!max-w-[600px]'
|
||||
height='calc(100vh - 16px)'
|
||||
headerClassName='!border-b-divider-regular'
|
||||
body={
|
||||
<div className='overflow-y-auto px-6 pt-2'>
|
||||
<div className='space-y-4'>
|
||||
panelClassName="mt-2 !w-[600px]"
|
||||
maxWidthClassName="!max-w-[600px]"
|
||||
height="calc(100vh - 16px)"
|
||||
headerClassName="!border-b-divider-regular"
|
||||
body={(
|
||||
<div className="overflow-y-auto px-6 pt-2">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.title')}</div>
|
||||
<div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5' onClick={() => setCredentialsModalShow(true)}>
|
||||
<div className='system-xs-regular text-text-primary'>{t(`tools.createTool.authMethod.types.${tempCredential.auth_type}`)}</div>
|
||||
<RiSettings2Line className='h-4 w-4 text-text-secondary' />
|
||||
<div className="system-sm-medium py-2 text-text-primary">{t('tools.createTool.authMethod.title')}</div>
|
||||
<div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5" onClick={() => setCredentialsModalShow(true)}>
|
||||
<div className="system-xs-regular text-text-primary">{t(`tools.createTool.authMethod.types.${tempCredential.auth_type}`)}</div>
|
||||
<RiSettings2Line className="h-4 w-4 text-text-secondary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.test.parametersValue')}</div>
|
||||
<div className='rounded-lg border border-divider-regular'>
|
||||
<table className='system-xs-regular w-full font-normal text-text-secondary'>
|
||||
<thead className='uppercase text-text-tertiary'>
|
||||
<tr className='border-b border-divider-regular'>
|
||||
<div className="system-sm-medium py-2 text-text-primary">{t('tools.test.parametersValue')}</div>
|
||||
<div className="rounded-lg border border-divider-regular">
|
||||
<table className="system-xs-regular w-full font-normal text-text-secondary">
|
||||
<thead className="uppercase text-text-tertiary">
|
||||
<tr className="border-b border-divider-regular">
|
||||
<th className="p-2 pl-3 font-medium">{t('tools.test.parameters')}</th>
|
||||
<th className="p-2 pl-3 font-medium">{t('tools.test.value')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{parameters.map((item, index) => (
|
||||
<tr key={index} className='border-b border-divider-regular last:border-0'>
|
||||
<tr key={index} className="border-b border-divider-regular last:border-0">
|
||||
<td className="py-2 pl-3 pr-2.5">
|
||||
{item.label[language]}
|
||||
</td>
|
||||
@ -100,8 +102,9 @@ const TestApi: FC<Props> = ({
|
||||
<Input
|
||||
value={parametersValue[item.name] || ''}
|
||||
onChange={e => setParametersValue({ ...parametersValue, [item.name]: e.target.value })}
|
||||
type='text'
|
||||
className='!hover:border-transparent !hover:bg-transparent !focus:border-transparent !focus:bg-transparent !border-transparent !bg-transparent' />
|
||||
type="text"
|
||||
className="!hover:border-transparent !hover:bg-transparent !focus:border-transparent !focus:bg-transparent !border-transparent !bg-transparent"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
@ -111,18 +114,18 @@ const TestApi: FC<Props> = ({
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<Button variant='primary' className=' mt-4 h-10 w-full' loading={testing} disabled={testing} onClick={handleTest}>{t('tools.test.title')}</Button>
|
||||
<div className='mt-6'>
|
||||
<div className='flex items-center space-x-3'>
|
||||
<div className='system-xs-semibold text-text-tertiary'>{t('tools.test.testResult')}</div>
|
||||
<div className='bg-[rgb(243, 244, 246)] h-px w-0 grow'></div>
|
||||
<Button variant="primary" className=" mt-4 h-10 w-full" loading={testing} disabled={testing} onClick={handleTest}>{t('tools.test.title')}</Button>
|
||||
<div className="mt-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="system-xs-semibold text-text-tertiary">{t('tools.test.testResult')}</div>
|
||||
<div className="bg-[rgb(243, 244, 246)] h-px w-0 grow"></div>
|
||||
</div>
|
||||
<div className='system-xs-regular mt-2 h-[200px] overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal px-3 py-2 text-text-secondary'>
|
||||
{result || <span className='text-text-quaternary'>{t('tools.test.testResultPlaceholder')}</span>}
|
||||
<div className="system-xs-regular mt-2 h-[200px] overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal px-3 py-2 text-text-secondary">
|
||||
{result || <span className="text-text-quaternary">{t('tools.test.testResultPlaceholder')}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
/>
|
||||
{credentialsModalShow && (
|
||||
<ConfigCredentials
|
||||
@ -130,8 +133,8 @@ const TestApi: FC<Props> = ({
|
||||
credential={tempCredential}
|
||||
onChange={setTempCredential}
|
||||
onHide={() => setCredentialsModalShow(false)}
|
||||
/>)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user