fix: default selection issue & trigger retrieval setting unintentionally

feat/external-knowledge-api
Yi 2 years ago
parent b92fced974
commit 69c0f3f2ad

@ -0,0 +1,11 @@
import { create } from 'zustand'
type DatasetStore = {
showExternalApiPanel: boolean
setShowExternalApiPanel: (show: boolean) => void
}
export const useDatasetStore = create<DatasetStore>(set => ({
showExternalApiPanel: false,
setShowExternalApiPanel: show => set({ showExternalApiPanel: show }),
}))

@ -1,4 +1,4 @@
import React, { useState } from 'react' import React, { useEffect, useState } from 'react'
import { import {
RiAddLine, RiAddLine,
RiArrowDownSLine, RiArrowDownSLine,
@ -15,18 +15,23 @@ type ApiItem = {
type ExternalApiSelectProps = { type ExternalApiSelectProps = {
items: ApiItem[] items: ApiItem[]
defaultValue?: string value?: string
onSelect: (item: ApiItem) => void onSelect: (item: ApiItem) => void
} }
const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, defaultValue, onSelect }) => { const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, value, onSelect }) => {
const { t } = useTranslation() const { t } = useTranslation()
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
const router = useRouter() const router = useRouter()
const [selectedItem, setSelectedItem] = useState<ApiItem | null>( 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 = () => { const handleAddNewAPI = () => {
router.push('/datasets?openExternalApiPanel=true') router.push('/datasets?openExternalApiPanel=true')
} }
@ -40,7 +45,7 @@ const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, defaultVal
return ( return (
<div className="relative w-full"> <div className="relative w-full">
<div <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'}`} bg-components-input-bg-normal hover:bg-state-base-hover-alt ${isOpen && 'bg-state-base-hover-alt'}`}
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
> >

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

@ -47,6 +47,11 @@ const DatasetItem: FC<Props> = ({
hideSettingsModal() hideSettingsModal()
}, [hideSettingsModal, onChange]) }, [hideSettingsModal, onChange])
const handleRemove = useCallback((e: React.MouseEvent) => {
e.stopPropagation()
onRemove()
}, [onRemove])
return ( return (
<div className={`flex items-center h-10 justify-between rounded-xl px-2 border-[0.5px] <div className={`flex items-center h-10 justify-between rounded-xl px-2 border-[0.5px]
border-components-panel-border-subtle cursor-pointer group/dataset-item border-components-panel-border-subtle cursor-pointer group/dataset-item
@ -71,12 +76,15 @@ const DatasetItem: FC<Props> = ({
{!readonly && ( {!readonly && (
<div className='hidden group-hover/dataset-item:flex shrink-0 ml-2 items-center space-x-1'> <div className='hidden group-hover/dataset-item:flex shrink-0 ml-2 items-center space-x-1'>
<ActionButton <ActionButton
onClick={showSettingsModal} onClick={(e) => {
e.stopPropagation()
showSettingsModal()
}}
> >
<RiEditLine className='w-4 h-4 flex-shrink-0 text-text-tertiary' /> <RiEditLine className='w-4 h-4 flex-shrink-0 text-text-tertiary' />
</ActionButton> </ActionButton>
<ActionButton <ActionButton
onClick={onRemove} onClick={handleRemove}
state={ActionButtonState.Destructive} state={ActionButtonState.Destructive}
onMouseEnter={() => setIsDeleteHovered(true)} onMouseEnter={() => setIsDeleteHovered(true)}
onMouseLeave={() => setIsDeleteHovered(false)} onMouseLeave={() => setIsDeleteHovered(false)}

@ -208,6 +208,7 @@ const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
allEconomic, allEconomic,
mixtureHighQualityAndEconomic, mixtureHighQualityAndEconomic,
inconsistentEmbeddingModel, inconsistentEmbeddingModel,
allInternal,
} = getSelectedDatasetsMode(newDatasets) } = getSelectedDatasetsMode(newDatasets)
const newInputs = produce(inputs, (draft) => { const newInputs = produce(inputs, (draft) => {
draft.dataset_ids = newDatasets.map(d => d.id) draft.dataset_ids = newDatasets.map(d => d.id)
@ -220,7 +221,7 @@ const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
setInputs(newInputs) setInputs(newInputs)
setSelectedDatasets(newDatasets) setSelectedDatasets(newDatasets)
if (allEconomic || mixtureHighQualityAndEconomic || inconsistentEmbeddingModel) if (allInternal && (allEconomic || mixtureHighQualityAndEconomic || inconsistentEmbeddingModel))
setRerankModelOpen(true) setRerankModelOpen(true)
}, [inputs, setInputs, payload.retrieval_mode]) }, [inputs, setInputs, payload.retrieval_mode])

Loading…
Cancel
Save