diff --git a/web/src/components/knowledge-base-item.tsx b/web/src/components/knowledge-base-item.tsx index 47a7ba2c0..e3958853a 100644 --- a/web/src/components/knowledge-base-item.tsx +++ b/web/src/components/knowledge-base-item.tsx @@ -1,79 +1,72 @@ import { DocumentParserType } from '@/constants/knowledge'; -import { useTranslate } from '@/hooks/common-hooks'; import { useFetchKnowledgeList } from '@/hooks/use-knowledge-request'; +import { IKnowledge } from '@/interfaces/database/knowledge'; import { useBuildQueryVariableOptions } from '@/pages/agent/hooks/use-get-begin-query'; -import { UserOutlined } from '@ant-design/icons'; -import { Avatar as AntAvatar, Form, Select, Space } from 'antd'; import { toLower } from 'lodash'; -import { useMemo } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { useFormContext } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import { RAGFlowAvatar } from './ragflow-avatar'; import { FormControl, FormField, FormItem, FormLabel } from './ui/form'; -import { MultiSelect } from './ui/multi-select'; - -interface KnowledgeBaseItemProps { - label?: string; - tooltipText?: string; - name?: string; - required?: boolean; - onChange?(): void; -} - -const KnowledgeBaseItem = ({ - label, - tooltipText, - name, - required = true, - onChange, -}: KnowledgeBaseItemProps) => { - const { t } = useTranslate('chat'); - - const { list: knowledgeList } = useFetchKnowledgeList(true); - - const filteredKnowledgeList = knowledgeList.filter( - (x) => x.parser_id !== DocumentParserType.Tag, - ); - - const knowledgeOptions = filteredKnowledgeList.map((x) => ({ - label: ( - - } src={x.avatar} /> - {x.name} - - ), - value: x.id, - })); - - return ( - - - - ); -}; - -export default KnowledgeBaseItem; +import { MultiSelect, MultiSelectOptionType } from './ui/multi-select'; function buildQueryVariableOptionsByShowVariable(showVariable?: boolean) { return showVariable ? useBuildQueryVariableOptions : () => []; } +export function useDisableDifferenceEmbeddingDataset() { + const [datasetOptions, setDatasetOptions] = useState( + [], + ); + const [datasetSelectEmbedId, setDatasetSelectEmbedId] = useState(''); + const { list: datasetListOrigin } = useFetchKnowledgeList(true); + + useEffect(() => { + const datasetListMap = datasetListOrigin + .filter((x) => x.parser_id !== DocumentParserType.Tag) + .map((item: IKnowledge) => { + return { + label: item.name, + icon: () => ( + + ), + suffix: ( +
+ {item.embd_id} +
+ ), + value: item.id, + disabled: + item.embd_id !== datasetSelectEmbedId && + datasetSelectEmbedId !== '', + }; + }); + setDatasetOptions(datasetListMap); + }, [datasetListOrigin, datasetSelectEmbedId]); + + const handleDatasetSelectChange = ( + value: string[], + onChange: (value: string[]) => void, + ) => { + if (value.length) { + const data = datasetListOrigin?.find((item) => item.id === value[0]); + setDatasetSelectEmbedId(data?.embd_id ?? ''); + } else { + setDatasetSelectEmbedId(''); + } + onChange?.(value); + }; + + return { + datasetOptions, + handleDatasetSelectChange, + }; +} + export function KnowledgeBaseFormField({ showVariable = false, }: { @@ -82,22 +75,12 @@ export function KnowledgeBaseFormField({ const form = useFormContext(); const { t } = useTranslation(); - const { list: knowledgeList } = useFetchKnowledgeList(true); - - const filteredKnowledgeList = knowledgeList.filter( - (x) => x.parser_id !== DocumentParserType.Tag, - ); + const { datasetOptions, handleDatasetSelectChange } = + useDisableDifferenceEmbeddingDataset(); const nextOptions = buildQueryVariableOptionsByShowVariable(showVariable)(); - const knowledgeOptions = filteredKnowledgeList.map((x) => ({ - label: x.name, - value: x.id, - icon: () => ( - - ), - })); - + const knowledgeOptions = datasetOptions; const options = useMemo(() => { if (showVariable) { return [ @@ -140,11 +123,14 @@ export function KnowledgeBaseFormField({ { + handleDatasetSelectChange(value, field.onChange); + }} placeholder={t('chat.knowledgeBasesMessage')} variant="inverted" maxCount={100} defaultValue={field.value} + showSelectAll={false} {...field} />