feat: add new external knowledge api from the knowledge create page

This commit is contained in:
Yi
2024-09-27 22:38:13 +08:00
parent 020766a5e8
commit 644ab2df35
9 changed files with 57 additions and 38 deletions

View File

@ -1,6 +1,10 @@
import React, { useState } from 'react'
import { RiArrowDownSLine } from '@remixicon/react'
import {
RiAddLine,
RiArrowDownSLine,
} from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import { useRouter } from 'next/navigation'
import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
type ApiItem = {
@ -18,10 +22,15 @@ type ExternalApiSelectProps = {
const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, defaultValue, onSelect }) => {
const { t } = useTranslation()
const [isOpen, setIsOpen] = useState(false)
const router = useRouter()
const [selectedItem, setSelectedItem] = useState<ApiItem | null>(
items.find(item => item.value === defaultValue) || null,
)
const handleAddNewAPI = () => {
router.push('/datasets?openExternalApiPanel=true')
}
const handleSelect = (item: ApiItem) => {
setSelectedItem(item)
onSelect(item)
@ -64,6 +73,15 @@ const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, defaultVal
</div>
</div>
))}
<div className='flex p-1 flex-col items-start self-stretch'>
<div
className='flex p-2 items-center gap-2 self-stretch rounded-lg cursor-pointer hover:bg-state-base-hover'
onClick={handleAddNewAPI}
>
<RiAddLine className='text-text-secondary w-4 h-4' />
<span className='flex-grow overflow-hidden text-text-secondary text-ellipsis system-sm-medium'>{t('dataset.createNewExternalAPI')}</span>
</div>
</div>
</div>
)}
</div>

View File

@ -1,3 +1,5 @@
'use client'
import React, { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { RiAddLine } from '@remixicon/react'
@ -6,7 +8,6 @@ import ExternalApiSelect from './ExternalApiSelect'
import Input from '@/app/components/base/input'
import Button from '@/app/components/base/button'
import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
import { useExternalApiPanel } from '@/context/external-api-panel-context'
type ExternalApiSelectionProps = {
external_knowledge_api_id: string
@ -18,7 +19,6 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
const { t } = useTranslation()
const router = useRouter()
const { externalKnowledgeApiList } = useExternalKnowledgeApi()
// const { setShowExternalApiPanel } = useExternalApiPanel()
const apiItems = externalKnowledgeApiList.map(api => ({
value: api.id,
@ -26,11 +26,8 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
url: api.settings.endpoint,
}))
const { showExternalApiPanel, setShowExternalApiPanel } = useExternalApiPanel()
const handleAddNewAPI = () => {
router.back()
setShowExternalApiPanel(true)
router.push('/datasets?openExternalApiPanel=true')
}
useEffect(() => {