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 196 additions and 79 deletions
client/src/components/ChatBox/SelectDataset.tsx
import React, { useRef, useState } from 'react'; import React, { useState } from 'react';
import { import { ModalBody, useTheme, ModalFooter, Button, Box, Card, Flex, Grid } from '@chakra-ui/react';
ModalBody,
useTheme,
ModalFooter,
Button,
ModalHeader,
Box,
Card,
Flex
} from '@chakra-ui/react';
import MyModal from '../MyModal';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { useQuery } from '@tanstack/react-query';
import { useDatasetStore } from '@/store/dataset';
import { useToast } from '@/hooks/useToast'; import { useToast } from '@/hooks/useToast';
import Avatar from '../Avatar'; import Avatar from '../Avatar';
import MyIcon from '@/components/Icon'; 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 = ({ const SelectDataset = ({
isOpen,
onSuccess, onSuccess,
onClose onClose
}: { }: {
isOpen: boolean;
onSuccess: (kbId: string) => void; onSuccess: (kbId: string) => void;
onClose: () => void; onClose: () => void;
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const theme = useTheme(); const theme = useTheme();
const { isPc } = useGlobalStore();
const { toast } = useToast(); const { toast } = useToast();
const { myKbList, loadKbList } = useDatasetStore();
const [selectedId, setSelectedId] = useState<string>(); const [selectedId, setSelectedId] = useState<string>();
const { paths, parentId, setParentId, datasets } = useDatasetSelect();
useQuery(['loadKbList'], () => loadKbList());
return ( return (
<MyModal isOpen={true} onClose={onClose} w={'100%'} maxW={['90vw', '900px']} isCentered={!isPc}> <DatasetSelectModal
<Flex flexDirection={'column'} h={['90vh', 'auto']}> isOpen={isOpen}
<ModalHeader> paths={paths}
<Box>{t('chat.Select Mark Kb')}</Box> onClose={onClose}
<Box fontSize={'sm'} color={'myGray.500'} fontWeight={'normal'}> parentId={parentId}
{t('chat.Select Mark Kb Desc')} setParentId={setParentId}
</Box> tips={t('chat.Select Mark Kb Desc')}
</ModalHeader> >
<ModalBody <ModalBody flex={['1 0 0', '0 0 auto']} maxH={'80vh'} overflowY={'auto'}>
flex={['1 0 0', '0 0 auto']} <Grid
maxH={'80vh'}
overflowY={'auto'}
display={'grid'}
gridTemplateColumns={['repeat(1,1fr)', 'repeat(2,1fr)', 'repeat(3,1fr)']} gridTemplateColumns={['repeat(1,1fr)', 'repeat(2,1fr)', 'repeat(3,1fr)']}
gridGap={3} gridGap={3}
userSelect={'none'} userSelect={'none'}
> >
{myKbList.map((item) => {datasets.map((item) =>
(() => { (() => {
const selected = selectedId === item._id; const selected = selectedId === item._id;
return ( return (
...@@ -72,7 +57,11 @@ const SelectDataset = ({ ...@@ -72,7 +57,11 @@ const SelectDataset = ({
} }
: {})} : {})}
onClick={() => { onClick={() => {
setSelectedId(item._id); if (item.type === KbTypeEnum.folder) {
setParentId(item._id);
} else {
setSelectedId(item._id);
}
}} }}
> >
<Flex alignItems={'center'} h={'38px'}> <Flex alignItems={'center'} h={'38px'}>
...@@ -89,28 +78,36 @@ const SelectDataset = ({ ...@@ -89,28 +78,36 @@ const SelectDataset = ({
); );
})() })()
)} )}
</ModalBody> </Grid>
<ModalFooter> {datasets.length === 0 && (
<Button variant={'base'} mr={2} onClick={onClose}> <Flex mt={5} flexDirection={'column'} alignItems={'center'}>
{t('Cancel')} <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
</Button> <Box mt={2} color={'myGray.500'}>
<Button 这个目录已经没东西可选了~
onClick={() => { </Box>
if (!selectedId) { </Flex>
return toast({ )}
status: 'warning', </ModalBody>
title: t('Select value is empty') <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); onSuccess(selectedId);
}} }}
> >
{t('Confirm')} {t('Confirm')}
</Button> </Button>
</ModalFooter> </ModalFooter>
</Flex> </DatasetSelectModal>
</MyModal>
); );
}; };
......
client/src/components/ChatBox/index.tsx
...@@ -985,13 +985,12 @@ const ChatBox = ( ...@@ -985,13 +985,12 @@ const ChatBox = (
/> />
)} )}
{/* select one dataset to insert markData */} {/* select one dataset to insert markData */}
{adminMarkData && !adminMarkData.kbId && ( <SelectDataset
<SelectDataset isOpen={!!adminMarkData && !adminMarkData.kbId}
onClose={() => setAdminMarkData(undefined)} onClose={() => setAdminMarkData(undefined)}
// @ts-ignore // @ts-ignore
onSuccess={(kbId) => setAdminMarkData((state) => ({ ...state, kbId }))} onSuccess={(kbId) => setAdminMarkData((state) => ({ ...state, kbId }))}
/> />
)}
{/* edit markData modal */} {/* edit markData modal */}
{adminMarkData && adminMarkData.kbId && ( {adminMarkData && adminMarkData.kbId && (
<InputDataModal <InputDataModal
......
client/src/components/Icon/index.tsx
...@@ -101,7 +101,7 @@ const MyIcon = ({ name, w = 'auto', h = 'auto', ...props }: { name: IconName } & ...@@ -101,7 +101,7 @@ const MyIcon = ({ name, w = 'auto', h = 'auto', ...props }: { name: IconName } &
.catch((error) => console.log(error)); .catch((error) => console.log(error));
}, [name]); }, [name]);
return name ? ( return !!name && !!iconPaths[name] ? (
<Icon <Icon
{...IconComponent} {...IconComponent}
w={w} 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 }) => { ...@@ -71,7 +71,7 @@ const Settings = ({ appId }: { appId: string }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { toast } = useToast(); const { toast } = useToast();
const { appDetail, updateAppDetail } = useUserStore(); const { appDetail, updateAppDetail } = useUserStore();
const { loadAllDatasets, datasets } = useDatasetStore(); const { loadAllDatasets, allDatasets } = useDatasetStore();
const { isPc } = useGlobalStore(); const { isPc } = useGlobalStore();
const [editVariable, setEditVariable] = useState<VariableItemType>(); const [editVariable, setEditVariable] = useState<VariableItemType>();
...@@ -131,8 +131,8 @@ const Settings = ({ appId }: { appId: string }) => { ...@@ -131,8 +131,8 @@ const Settings = ({ appId }: { appId: string }) => {
); );
}, [getValues, refresh]); }, [getValues, refresh]);
const selectedKbList = useMemo( const selectedKbList = useMemo(
() => datasets.filter((item) => kbList.find((kb) => kb.kbId === item._id)), () => allDatasets.filter((item) => kbList.find((kb) => kb.kbId === item._id)),
[datasets, kbList] [allDatasets, kbList]
); );
/* 点击删除 */ /* 点击删除 */
...@@ -564,16 +564,15 @@ const Settings = ({ appId }: { appId: string }) => { ...@@ -564,16 +564,15 @@ const Settings = ({ appId }: { appId: string }) => {
defaultData={getValues('chatModel')} defaultData={getValues('chatModel')}
/> />
)} )}
{isOpenKbSelect && ( <KBSelectModal
<KBSelectModal isOpen={isOpenKbSelect}
activeKbs={selectedKbList.map((item) => ({ activeKbs={selectedKbList.map((item) => ({
kbId: item._id, kbId: item._id,
vectorModel: item.vectorModel vectorModel: item.vectorModel
}))} }))}
onClose={onCloseKbSelect} onClose={onCloseKbSelect}
onChange={replaceKbList} onChange={replaceKbList}
/> />
)}
{isOpenKbParams && ( {isOpenKbParams && (
<KbParamsModal <KbParamsModal
searchEmptyText={getValues('kb.searchEmptyText')} searchEmptyText={getValues('kb.searchEmptyText')}
......
client/src/store/dataset.ts
...@@ -8,7 +8,7 @@ import { defaultKbDetail } from '@/constants/kb'; ...@@ -8,7 +8,7 @@ import { defaultKbDetail } from '@/constants/kb';
import { KbUpdateParams } from '@/api/request/kb'; import { KbUpdateParams } from '@/api/request/kb';
type State = { type State = {
datasets: KbListItemType[]; allDatasets: KbListItemType[];
loadAllDatasets: () => Promise<KbListItemType[]>; loadAllDatasets: () => Promise<KbListItemType[]>;
myKbList: KbListItemType[]; myKbList: KbListItemType[];
loadKbList: (parentId?: string) => Promise<any>; loadKbList: (parentId?: string) => Promise<any>;
...@@ -27,11 +27,11 @@ export const useDatasetStore = create<State>()( ...@@ -27,11 +27,11 @@ export const useDatasetStore = create<State>()(
devtools( devtools(
persist( persist(
immer((set, get) => ({ immer((set, get) => ({
datasets: [], allDatasets: [],
async loadAllDatasets() { async loadAllDatasets() {
const res = await getAllDataset(); const res = await getAllDataset();
set((state) => { set((state) => {
state.datasets = res; state.allDatasets = res;
}); });
return 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