fix: default selection issue & trigger retrieval setting unintentionally

This commit is contained in:
Yi
2024-09-28 14:13:02 +08:00
parent b92fced974
commit 69c0f3f2ad
5 changed files with 49 additions and 11 deletions

View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'
import React, { useEffect, useState } from 'react'
import {
RiAddLine,
RiArrowDownSLine,
@ -15,18 +15,23 @@ type ApiItem = {
type ExternalApiSelectProps = {
items: ApiItem[]
defaultValue?: string
value?: string
onSelect: (item: ApiItem) => void
}
const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, defaultValue, onSelect }) => {
const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, value, 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,
items.find(item => item.value === value) || null,
)
useEffect(() => {
const newSelectedItem = items.find(item => item.value === value) || null
setSelectedItem(newSelectedItem)
}, [value, items])
const handleAddNewAPI = () => {
router.push('/datasets?openExternalApiPanel=true')
}
@ -40,7 +45,7 @@ const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, defaultVal
return (
<div className="relative w-full">
<div
className={`flex items-center justify-between cursor-point px-2 py-1 gap-0.5 self-stretch rounded-lg
className={`flex items-center justify-between cursor-pointer px-2 py-1 gap-0.5 self-stretch rounded-lg
bg-components-input-bg-normal hover:bg-state-base-hover-alt ${isOpen && 'bg-state-base-hover-alt'}`}
onClick={() => setIsOpen(!isOpen)}
>

View File

@ -1,6 +1,6 @@
'use client'
import React, { useEffect } from 'react'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { RiAddLine } from '@remixicon/react'
import { useRouter } from 'next/navigation'
@ -19,6 +19,7 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
const { t } = useTranslation()
const router = useRouter()
const { externalKnowledgeApiList } = useExternalKnowledgeApi()
const [selectedApiId, setSelectedApiId] = useState(external_knowledge_api_id)
const apiItems = externalKnowledgeApiList.map(api => ({
value: api.id,
@ -26,6 +27,15 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
url: api.settings.endpoint,
}))
useEffect(() => {
if (apiItems.length > 0) {
const newSelectedId = external_knowledge_api_id || apiItems[0].value
setSelectedApiId(newSelectedId)
if (newSelectedId !== external_knowledge_api_id)
onChange({ external_knowledge_api_id: newSelectedId, external_knowledge_id })
}
}, [apiItems, external_knowledge_api_id, external_knowledge_id, onChange])
const handleAddNewAPI = () => {
router.push('/datasets?openExternalApiPanel=true')
}
@ -44,8 +54,11 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
{apiItems.length > 0
? <ExternalApiSelect
items={apiItems}
defaultValue={apiItems[0].value}
onSelect={e => onChange({ external_knowledge_api_id: e.value as string, external_knowledge_id })}
value={selectedApiId}
onSelect={(e) => {
setSelectedApiId(e.value)
onChange({ external_knowledge_api_id: e.value, external_knowledge_id })
}}
/>
: <Button variant={'tertiary'} onClick={handleAddNewAPI} className='justify-start gap-0.5'>
<RiAddLine className='w-4 h-4 text-text-tertiary' />