Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 63b183a9 by Archer Committed by GitHub
Options

fix: mark modal cannot select folder (#327)

parent 858117f8
Showing with 323 additions and 279 deletions
client/src/components/ChatBox/SelectDataset.tsx
import React, { useRef, useState } from 'react';
import {
ModalBody,
useTheme,
ModalFooter,
Button,
ModalHeader,
Box,
Card,
Flex
} from '@chakra-ui/react';
import MyModal from '../MyModal';
import React, { useState } from 'react';
import { ModalBody, useTheme, ModalFooter, Button, Box, Card, Flex, Grid } from '@chakra-ui/react';
import { useTranslation } from 'next-i18next';
import { useQuery } from '@tanstack/react-query';
import { useDatasetStore } from '@/store/dataset';
import { useToast } from '@/hooks/useToast';
import Avatar from '../Avatar';
import MyIcon from '@/components/Icon';
import { useGlobalStore } from '@/store/global';
import { KbTypeEnum } from '@/constants/kb';
import DatasetSelectModal, { useDatasetSelect } from '@/components/core/dataset/SelectModal';
const SelectDataset = ({
isOpen,
onSuccess,
onClose
}: {
isOpen: boolean;
onSuccess: (kbId: string) => void;
onClose: () => void;
}) => {
const { t } = useTranslation();
const theme = useTheme();
const { isPc } = useGlobalStore();
const { toast } = useToast();
const { myKbList, loadKbList } = useDatasetStore();
const [selectedId, setSelectedId] = useState<string>();
useQuery(['loadKbList'], () => loadKbList());
const { paths, parentId, setParentId, datasets } = useDatasetSelect();
return (
<MyModal isOpen={true} onClose={onClose} w={'100%'} maxW={['90vw', '900px']} isCentered={!isPc}>
<Flex flexDirection={'column'} h={['90vh', 'auto']}>
<ModalHeader>
<Box>{t('chat.Select Mark Kb')}</Box>
<Box fontSize={'sm'} color={'myGray.500'} fontWeight={'normal'}>
{t('chat.Select Mark Kb Desc')}
</Box>
</ModalHeader>
<ModalBody
flex={['1 0 0', '0 0 auto']}
maxH={'80vh'}
overflowY={'auto'}
display={'grid'}
<DatasetSelectModal
isOpen={isOpen}
paths={paths}
onClose={onClose}
parentId={parentId}
setParentId={setParentId}
tips={t('chat.Select Mark Kb Desc')}
>
<ModalBody flex={['1 0 0', '0 0 auto']} maxH={'80vh'} overflowY={'auto'}>
<Grid
gridTemplateColumns={['repeat(1,1fr)', 'repeat(2,1fr)', 'repeat(3,1fr)']}
gridGap={3}
userSelect={'none'}
>
{myKbList.map((item) =>
{datasets.map((item) =>
(() => {
const selected = selectedId === item._id;
return (
......@@ -72,7 +57,11 @@ const SelectDataset = ({
}
: {})}
onClick={() => {
setSelectedId(item._id);
if (item.type === KbTypeEnum.folder) {
setParentId(item._id);
} else {
setSelectedId(item._id);
}
}}
>
<Flex alignItems={'center'} h={'38px'}>
......@@ -89,28 +78,36 @@ const SelectDataset = ({
);
})()
)}
</ModalBody>
<ModalFooter>
<Button variant={'base'} mr={2} onClick={onClose}>
{t('Cancel')}
</Button>
<Button
onClick={() => {
if (!selectedId) {
return toast({
status: 'warning',
title: t('Select value is empty')
});
}
</Grid>
{datasets.length === 0 && (
<Flex mt={5} flexDirection={'column'} alignItems={'center'}>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}>
这个目录已经没东西可选了~
</Box>
</Flex>
)}
</ModalBody>
<ModalFooter>
<Button variant={'base'} mr={2} onClick={onClose}>
{t('Cancel')}
</Button>
<Button
onClick={() => {
if (!selectedId) {
return toast({
status: 'warning',
title: t('Select value is empty')
});
}
onSuccess(selectedId);
}}
>
{t('Confirm')}
</Button>
</ModalFooter>
</Flex>
</MyModal>
onSuccess(selectedId);
}}
>
{t('Confirm')}
</Button>
</ModalFooter>
</DatasetSelectModal>
);
};
......
client/src/components/ChatBox/index.tsx
......@@ -985,13 +985,12 @@ const ChatBox = (
/>
)}
{/* select one dataset to insert markData */}
{adminMarkData && !adminMarkData.kbId && (
<SelectDataset
onClose={() => setAdminMarkData(undefined)}
// @ts-ignore
onSuccess={(kbId) => setAdminMarkData((state) => ({ ...state, kbId }))}
/>
)}
<SelectDataset
isOpen={!!adminMarkData && !adminMarkData.kbId}
onClose={() => setAdminMarkData(undefined)}
// @ts-ignore
onSuccess={(kbId) => setAdminMarkData((state) => ({ ...state, kbId }))}
/>
{/* edit markData modal */}
{adminMarkData && adminMarkData.kbId && (
<InputDataModal
......
client/src/components/Icon/index.tsx
......@@ -101,7 +101,7 @@ const MyIcon = ({ name, w = 'auto', h = 'auto', ...props }: { name: IconName } &
.catch((error) => console.log(error));
}, [name]);
return name ? (
return !!name && !!iconPaths[name] ? (
<Icon
{...IconComponent}
w={w}
......
client/src/components/core/dataset/SelectModal.tsx 0 → 100644
import { getKbList, getKbPaths } from '@/api/plugins/kb';
import MyModal from '@/components/MyModal';
import { useQuery } from '@tanstack/react-query';
import React, { Dispatch, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useGlobalStore } from '@/store/global';
import { Box, Flex, ModalHeader } from '@chakra-ui/react';
import MyIcon from '@/components/Icon';
type PathItemType = {
parentId: string;
parentName: string;
};
const DatasetSelectModal = ({
isOpen,
parentId,
setParentId,
paths,
onClose,
tips,
children
}: {
isOpen: boolean;
parentId?: string;
setParentId: Dispatch<string>;
paths: PathItemType[];
onClose: () => void;
tips?: string | null;
children: React.ReactNode;
}) => {
const { t } = useTranslation();
const { isPc } = useGlobalStore();
return (
<MyModal
isOpen={isOpen}
onClose={onClose}
w={'100%'}
maxW={['90vw', '900px']}
isCentered={!isPc}
>
<Flex flexDirection={'column'} h={['90vh', 'auto']}>
<ModalHeader>
{!!parentId ? (
<Flex
flex={1}
userSelect={'none'}
fontSize={['sm', 'lg']}
fontWeight={'normal'}
color={'myGray.900'}
>
{paths.map((item, i) => (
<Flex key={item.parentId} mr={2} alignItems={'center'}>
<Box
fontSize={'lg'}
borderRadius={'md'}
{...(i === paths.length - 1
? {
cursor: 'default'
}
: {
cursor: 'pointer',
_hover: {
color: 'myBlue.600'
},
onClick: () => {
setParentId(item.parentId);
}
})}
>
{item.parentName}
</Box>
{i !== paths.length - 1 && (
<MyIcon name={'rightArrowLight'} color={'myGray.500'} w={['18px', '24px']} />
)}
</Flex>
))}
</Flex>
) : (
<Box>{t('chat.Select Mark Kb')}</Box>
)}
{!!tips && (
<Box fontSize={'sm'} color={'myGray.500'} fontWeight={'normal'}>
{tips}
</Box>
)}
</ModalHeader>
{children}
</Flex>
</MyModal>
);
};
export const useDatasetSelect = () => {
const { t } = useTranslation();
const [parentId, setParentId] = useState<string>();
const { data } = useQuery(['loadDatasetData', parentId], () =>
Promise.all([getKbList({ parentId }), getKbPaths(parentId)])
);
const paths = useMemo(
() => [
{
parentId: '',
parentName: t('kb.My Dataset')
},
...(data?.[1] || [])
],
[data, t]
);
return {
parentId,
setParentId,
datasets: data?.[0] || [],
paths
};
};
export default DatasetSelectModal;
client/src/pages/app/detail/components/BasicEdit/index.tsx
......@@ -71,7 +71,7 @@ const Settings = ({ appId }: { appId: string }) => {
const { t } = useTranslation();
const { toast } = useToast();
const { appDetail, updateAppDetail } = useUserStore();
const { loadAllDatasets, datasets } = useDatasetStore();
const { loadAllDatasets, allDatasets } = useDatasetStore();
const { isPc } = useGlobalStore();
const [editVariable, setEditVariable] = useState<VariableItemType>();
......@@ -131,8 +131,8 @@ const Settings = ({ appId }: { appId: string }) => {
);
}, [getValues, refresh]);
const selectedKbList = useMemo(
() => datasets.filter((item) => kbList.find((kb) => kb.kbId === item._id)),
[datasets, kbList]
() => allDatasets.filter((item) => kbList.find((kb) => kb.kbId === item._id)),
[allDatasets, kbList]
);
/* 点击删除 */
......@@ -564,16 +564,15 @@ const Settings = ({ appId }: { appId: string }) => {
defaultData={getValues('chatModel')}
/>
)}
{isOpenKbSelect && (
<KBSelectModal
activeKbs={selectedKbList.map((item) => ({
kbId: item._id,
vectorModel: item.vectorModel
}))}
onClose={onCloseKbSelect}
onChange={replaceKbList}
/>
)}
<KBSelectModal
isOpen={isOpenKbSelect}
activeKbs={selectedKbList.map((item) => ({
kbId: item._id,
vectorModel: item.vectorModel
}))}
onClose={onCloseKbSelect}
onChange={replaceKbList}
/>
{isOpenKbParams && (
<KbParamsModal
searchEmptyText={getValues('kb.searchEmptyText')}
......
client/src/pages/app/detail/components/KBSelectModal.tsx
......@@ -5,19 +5,16 @@ import {
Box,
Button,
ModalBody,
ModalHeader,
ModalFooter,
useTheme,
Textarea,
Grid,
Divider
} from '@chakra-ui/react';
import { getKbPaths } from '@/api/plugins/kb';
import Avatar from '@/components/Avatar';
import { useForm } from 'react-hook-form';
import { QuestionOutlineIcon } from '@chakra-ui/icons';
import type { SelectedKbType } from '@/types/plugin';
import { useGlobalStore } from '@/store/global';
import { useToast } from '@/hooks/useToast';
import MySlider from '@/components/Slider';
import MyTooltip from '@/components/MyTooltip';
......@@ -28,6 +25,7 @@ import { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query';
import { useDatasetStore } from '@/store/dataset';
import { feConfigs } from '@/store/static';
import DatasetSelectModal, { useDatasetSelect } from '@/components/core/dataset/SelectModal';
export type KbParamsType = {
searchSimilarity: number;
......@@ -36,10 +34,12 @@ export type KbParamsType = {
};
export const KBSelectModal = ({
isOpen,
activeKbs = [],
onChange,
onClose
}: {
isOpen: boolean;
activeKbs: SelectedKbType;
onChange: (e: SelectedKbType) => void;
onClose: () => void;
......@@ -47,229 +47,156 @@ export const KBSelectModal = ({
const { t } = useTranslation();
const theme = useTheme();
const [selectedKbList, setSelectedKbList] = useState<SelectedKbType>(activeKbs);
const { isPc } = useGlobalStore();
const { toast } = useToast();
const [parentId, setParentId] = useState<string>();
const { myKbList, loadKbList, datasets, loadAllDatasets } = useDatasetStore();
const { paths, parentId, setParentId, datasets } = useDatasetSelect();
const { allDatasets, loadAllDatasets } = useDatasetStore();
const { data } = useQuery(['loadKbList', parentId], () => {
return Promise.all([loadKbList(parentId), getKbPaths(parentId)]);
});
useQuery(['loadAllDatasets'], loadAllDatasets);
const paths = useMemo(
() => [
{
parentId: '',
parentName: t('kb.My Dataset')
},
...(data?.[1] || [])
],
[data, t]
);
const filterKbList = useMemo(() => {
return {
selected: datasets.filter((item) => selectedKbList.find((kb) => kb.kbId === item._id)),
unSelected: myKbList.filter((item) => !selectedKbList.find((kb) => kb.kbId === item._id))
selected: allDatasets.filter((item) => selectedKbList.find((kb) => kb.kbId === item._id)),
unSelected: datasets.filter((item) => !selectedKbList.find((kb) => kb.kbId === item._id))
};
}, [myKbList, datasets, selectedKbList]);
}, [datasets, allDatasets, selectedKbList]);
return (
<MyModal
isOpen={true}
isCentered={!isPc}
maxW={['90vw', '800px']}
w={'800px'}
<DatasetSelectModal
isOpen={isOpen}
paths={paths}
parentId={parentId}
setParentId={setParentId}
tips={'仅能选择同一个索引模型的知识库'}
onClose={onClose}
>
<Flex flexDirection={'column'} h={['90vh', 'auto']}>
<ModalHeader>
{!!parentId ? (
<Flex
flex={1}
userSelect={'none'}
fontSize={['sm', 'lg']}
fontWeight={'normal'}
color={'myGray.900'}
>
{paths.map((item, i) => (
<Flex key={item.parentId} mr={2} alignItems={'center'}>
<Box
fontSize={'lg'}
borderRadius={'md'}
{...(i === paths.length - 1
? {
cursor: 'default'
}
: {
cursor: 'pointer',
_hover: {
color: 'myBlue.600'
},
onClick: () => {
setParentId(item.parentId);
}
})}
>
{item.parentName}
</Box>
{i !== paths.length - 1 && (
<MyIcon name={'rightArrowLight'} color={'myGray.500'} w={['18px', '24px']} />
)}
</Flex>
))}
</Flex>
) : (
<Box>关联的知识库({selectedKbList.length})</Box>
)}
{isPc && (
<Box fontSize={'sm'} color={'myGray.500'} fontWeight={'normal'}>
仅能选择同一个索引模型的知识库
</Box>
<ModalBody flex={['1 0 0', '0 0 auto']} maxH={'80vh'} overflowY={'auto'} userSelect={'none'}>
<Grid gridTemplateColumns={['repeat(1,1fr)', 'repeat(2,1fr)', 'repeat(3,1fr)']} gridGap={3}>
{filterKbList.selected.map((item) =>
(() => {
return (
<Card
key={item._id}
p={3}
border={theme.borders.base}
boxShadow={'sm'}
bg={'myBlue.300'}
>
<Flex alignItems={'center'} h={'38px'}>
<Avatar src={item.avatar} w={['24px', '28px']}></Avatar>
<Box flex={'1 0 0'} mx={3}>
{item.name}
</Box>
<MyIcon
name={'delete'}
w={'14px'}
cursor={'pointer'}
_hover={{ color: 'red.500' }}
onClick={() => {
setSelectedKbList((state) => state.filter((kb) => kb.kbId !== item._id));
}}
/>
</Flex>
</Card>
);
})()
)}
</ModalHeader>
</Grid>
<ModalBody
flex={['1 0 0', '0 0 auto']}
maxH={'80vh'}
overflowY={'auto'}
display={'grid'}
userSelect={'none'}
>
<Grid
h={'auto'}
gridTemplateColumns={['repeat(1,1fr)', 'repeat(2,1fr)', 'repeat(3,1fr)']}
gridGap={3}
>
{filterKbList.selected.map((item) =>
(() => {
return (
{filterKbList.selected.length > 0 && <Divider my={3} />}
<Grid gridTemplateColumns={['repeat(1,1fr)', 'repeat(2,1fr)', 'repeat(3,1fr)']} gridGap={3}>
{filterKbList.unSelected.map((item) =>
(() => {
return (
<MyTooltip
key={item._id}
label={
item.type === KbTypeEnum.dataset
? t('kb.Select Dataset')
: t('kb.Select Folder')
}
>
<Card
key={item._id}
p={3}
border={theme.borders.base}
boxShadow={'sm'}
bg={'myBlue.300'}
h={'80px'}
cursor={'pointer'}
_hover={{
boxShadow: 'md'
}}
onClick={() => {
if (item.type === KbTypeEnum.folder) {
setParentId(item._id);
} else if (item.type === KbTypeEnum.dataset) {
const vectorModel = selectedKbList[0]?.vectorModel?.model;
if (vectorModel && vectorModel !== item.vectorModel.model) {
return toast({
status: 'warning',
title: '仅能选择同一个索引模型的知识库'
});
}
setSelectedKbList((state) => [
...state,
{ kbId: item._id, vectorModel: item.vectorModel }
]);
}
}}
>
<Flex alignItems={'center'} h={'38px'}>
<Avatar src={item.avatar} w={['24px', '28px']}></Avatar>
<Box flex={'1 0 0'} mx={3}>
<Box
className="textEllipsis"
ml={3}
fontWeight={'bold'}
fontSize={['md', 'lg', 'xl']}
>
{item.name}
</Box>
<MyIcon
name={'delete'}
w={'14px'}
cursor={'pointer'}
_hover={{ color: 'red.500' }}
onClick={() => {
setSelectedKbList((state) => state.filter((kb) => kb.kbId !== item._id));
}}
/>
</Flex>
<Flex justifyContent={'flex-end'} alignItems={'center'} fontSize={'sm'}>
{item.type === KbTypeEnum.folder ? (
<Box color={'myGray.500'}>{t('Folder')}</Box>
) : (
<>
<MyIcon mr={1} name="kbTest" w={'12px'} />
<Box color={'myGray.500'}>{item.vectorModel.name}</Box>
</>
)}
</Flex>
</Card>
);
})()
)}
</Grid>
{filterKbList.selected.length > 0 && <Divider my={3} />}
<Grid
gridTemplateColumns={['repeat(1,1fr)', 'repeat(2,1fr)', 'repeat(3,1fr)']}
gridGap={3}
>
{filterKbList.unSelected.map((item) =>
(() => {
return (
<MyTooltip
key={item._id}
label={
item.type === KbTypeEnum.dataset
? t('kb.Select Dataset')
: t('kb.Select Folder')
}
>
<Card
p={3}
border={theme.borders.base}
boxShadow={'sm'}
h={'80px'}
cursor={'pointer'}
_hover={{
boxShadow: 'md'
}}
onClick={() => {
if (item.type === KbTypeEnum.folder) {
setParentId(item._id);
} else if (item.type === KbTypeEnum.dataset) {
const vectorModel = selectedKbList[0]?.vectorModel?.model;
if (vectorModel && vectorModel !== item.vectorModel.model) {
return toast({
status: 'warning',
title: '仅能选择同一个索引模型的知识库'
});
}
setSelectedKbList((state) => [
...state,
{ kbId: item._id, vectorModel: item.vectorModel }
]);
}
}}
>
<Flex alignItems={'center'} h={'38px'}>
<Avatar src={item.avatar} w={['24px', '28px']}></Avatar>
<Box
className="textEllipsis"
ml={3}
fontWeight={'bold'}
fontSize={['md', 'lg', 'xl']}
>
{item.name}
</Box>
</Flex>
<Flex justifyContent={'flex-end'} alignItems={'center'} fontSize={'sm'}>
{item.type === KbTypeEnum.folder ? (
<Box color={'myGray.500'}>{t('Folder')}</Box>
) : (
<>
<MyIcon mr={1} name="kbTest" w={'12px'} />
<Box color={'myGray.500'}>{item.vectorModel.name}</Box>
</>
)}
</Flex>
</Card>
</MyTooltip>
);
})()
)}
</Grid>
{filterKbList.unSelected.length === 0 && (
<Flex mt={5} flexDirection={'column'} alignItems={'center'}>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}>
这个目录已经没东西可选了~
</Box>
</Flex>
</MyTooltip>
);
})()
)}
</ModalBody>
</Grid>
{filterKbList.unSelected.length === 0 && (
<Flex mt={5} flexDirection={'column'} alignItems={'center'}>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}>
这个目录已经没东西可选了~
</Box>
</Flex>
)}
</ModalBody>
<ModalFooter>
<Button
onClick={() => {
// filter out the kb that is not in the kList
const filterKbList = selectedKbList.filter((kb) => {
return datasets.find((item) => item._id === kb.kbId);
});
<ModalFooter>
<Button
onClick={() => {
// filter out the kb that is not in the kList
const filterKbList = selectedKbList.filter((kb) => {
return datasets.find((item) => item._id === kb.kbId);
});
onClose();
onChange(filterKbList);
}}
>
完成
</Button>
</ModalFooter>
</Flex>
</MyModal>
onClose();
onChange(filterKbList);
}}
>
完成
</Button>
</ModalFooter>
</DatasetSelectModal>
);
};
......
client/src/store/dataset.ts
......@@ -8,7 +8,7 @@ import { defaultKbDetail } from '@/constants/kb';
import { KbUpdateParams } from '@/api/request/kb';
type State = {
datasets: KbListItemType[];
allDatasets: KbListItemType[];
loadAllDatasets: () => Promise<KbListItemType[]>;
myKbList: KbListItemType[];
loadKbList: (parentId?: string) => Promise<any>;
......@@ -27,11 +27,11 @@ export const useDatasetStore = create<State>()(
devtools(
persist(
immer((set, get) => ({
datasets: [],
allDatasets: [],
async loadAllDatasets() {
const res = await getAllDataset();
set((state) => {
state.datasets = res;
state.allDatasets = res;
});
return res;
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment