ChatGPT/FastGPT
1
0
Fork 0
mirror of https://github.com/labring/FastGPT.git synced 2025-07-29 09:44:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: chat slider support folder (#1759)

Browse Source 
* feat: docker-compose version

* feat: chat slider support folder

* lazy behavior

* pref: code sandbox size
This commit is contained in:
Archer
2024-06-13 23:09:36 +08:00
committed by GitHub
parent 6385794603
commit f7f4a8de4d
20 changed files with 336 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
projects/app/src/pages/api/core/app/list.ts
View File

@@ -16,8 +16,9 @@ import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
import { AppDefaultPermissionVal } from '@fastgpt/global/support/permission/app/constant';
export type ListAppBody = {
parentId: ParentIdType;
parentId?: ParentIdType;
type?: AppTypeEnum;
getRecentlyChat?: boolean;
};
async function handler(
@@ -35,14 +36,23 @@ async function handler(
per: ReadPermissionVal
});
const { parentId, type } = req.body;
const { parentId, type, getRecentlyChat } = req.body;
const findAppsQuery = getRecentlyChat
? {
// get all chat app
teamId,
type: { $in: [AppTypeEnum.advanced, AppTypeEnum.simple] }
}
: {
teamId,
...(type && { type }),
...parseParentIdInMongo(parentId)
};
/* temp: get all apps and per */
const [myApps, rpList] = await Promise.all([
MongoApp.find(
{ teamId, ...(type && { type }), ...parseParentIdInMongo(parentId) },
'_id avatar type name intro tmbId defaultPermission'
)
MongoApp.find(findAppsQuery, '_id avatar type name intro tmbId defaultPermission')
.sort({
updateTime: -1
})
@@ -69,7 +79,9 @@ async function handler(
})
.filter((app) => app.permission.hasReadPer);
return filterApps.map((app) => ({
const sliceApps = getRecentlyChat ? filterApps.slice(0, 15) : filterApps;
return sliceApps.map((app) => ({
_id: app._id,
avatar: app.avatar,
type: app.type,

93
projects/app/src/pages/chat/components/ChatHistorySlider.tsx
View File

@@ -1,15 +1,5 @@
import React, { useMemo, useState } from 'react';
import {
Box,
Button,
Flex,
useTheme,
Menu,
MenuButton,
MenuList,
MenuItem,
IconButton
} from '@chakra-ui/react';
import React, { useCallback, useMemo, useState } from 'react';
import { Box, Button, Flex, useTheme, IconButton } from '@chakra-ui/react';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import { useEditTitle } from '@/web/common/hooks/useEditTitle';
import { useRouter } from 'next/router';
@@ -21,10 +11,15 @@ import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
import Tabs from '@/components/Tabs';
import { useUserStore } from '@/web/support/user/useUserStore';
import { AppListItemType } from '@fastgpt/global/core/app/type';
import { useQuery } from '@tanstack/react-query';
import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
import { useI18n } from '@/web/context/I18n';
import MyMenu from '@fastgpt/web/components/common/MyMenu';
import SelectOneResource from '@/components/common/folder/SelectOneResource';
import {
GetResourceFolderListProps,
GetResourceListItemResponse
} from '@fastgpt/global/common/parentFolder/type';
import { getMyApps } from '@/web/core/app/api';
import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
type HistoryItemType = {
id: string;
@@ -34,6 +29,7 @@ type HistoryItemType = {
};
enum TabEnum {
recently = 'recently',
'app' = 'app',
'history' = 'history'
}
@@ -69,6 +65,8 @@ const ChatHistorySlider = ({
}) => {
const theme = useTheme();
const router = useRouter();
const isTeamChat = router.pathname === '/chat/team';
const { t } = useTranslation();
const { appT } = useI18n();
@@ -78,6 +76,7 @@ const ChatHistorySlider = ({
const [currentTab, setCurrentTab] = useState<`${TabEnum}`>(TabEnum.history);
const showApps = apps?.length > 0;
// custom title edit
const { onOpenModal, EditModal: EditTitleModal } = useEditTitle({
title: t('core.chat.Custom History Title'),
@@ -96,17 +95,33 @@ const ChatHistorySlider = ({
[activeChatId, history, t]
);
useQuery(['init'], () => {
if (!showApps) {
setCurrentTab(TabEnum.history);
return null;
}
return;
});
const canRouteToDetail = useMemo(
() => appId && userInfo?.team.role !== TeamMemberRoleEnum.visitor,
[appId, userInfo?.team.role]
() => appId && userInfo?.team.permission.hasWritePer,
[appId, userInfo?.team.permission.hasWritePer]
);
const getAppList = useCallback(async ({ parentId }: GetResourceFolderListProps) => {
return getMyApps({ parentId }).then((res) =>
res.map<GetResourceListItemResponse>((item) => ({
id: item._id,
name: item.name,
avatar: item.avatar,
isFolder: item.type === AppTypeEnum.folder
}))
);
}, []);
const onChangeApp = useCallback(
(appId: string) => {
router.replace({
query: {
...router.query,
chatId: '',
appId
}
});
},
[router]
);
return (
@@ -148,10 +163,11 @@ const ChatHistorySlider = ({
<Flex w={'100%'} px={[2, 5]} h={'36px'} my={5} alignItems={'center'}>
{!isPc && appId && (
<Tabs
w={'120px'}
w={'180px'}
mr={2}
list={[
{ label: 'App', id: TabEnum.app },
{ label: t('core.chat.Recent use'), id: TabEnum.recently },
{ label: t('App'), id: TabEnum.app },
{ label: t('core.chat.History'), id: TabEnum.history }
]}
activeId={currentTab}
@@ -291,7 +307,7 @@ const ChatHistorySlider = ({
))}
</>
)}
{currentTab === TabEnum.app && !isPc && (
{currentTab === TabEnum.recently && !isPc && (
<>
{Array.isArray(apps) &&
apps.map((item) => (
@@ -309,12 +325,7 @@ const ChatHistorySlider = ({
}
: {
onClick: () => {
router.replace({
query: {
...router.query,
appId: item._id
}
});
onChangeApp(item._id);
onClose();
}
})}
@@ -327,9 +338,23 @@ const ChatHistorySlider = ({
))}
</>
)}
{currentTab === TabEnum.app && !isPc && (
<>
<SelectOneResource
value={appId}
onSelect={(id) => {
if (!id) return;
onChangeApp(id);
onClose();
}}
server={getAppList}
/>
</>
)}
</Box>
{!isPc && appId && (
{/* exec */}
{!isPc && appId && !isTeamChat && (
<Flex
mt={2}
borderTop={theme.borders.base}

120
projects/app/src/pages/chat/components/SliderApps.tsx
View File

@@ -1,27 +1,53 @@
import React from 'react';
import { Flex, Box, IconButton } from '@chakra-ui/react';
import React, { useCallback } from 'react';
import { Flex, Box, IconButton, HStack } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import MyIcon from '@fastgpt/web/components/common/Icon';
import Avatar from '@/components/Avatar';
import { AppListItemType } from '@fastgpt/global/core/app/type';
import MyDivider from '@fastgpt/web/components/common/MyDivider';
import MyPopover from '@fastgpt/web/components/common/MyPopover/index';
import SelectOneResource from '@/components/common/folder/SelectOneResource';
import { getMyApps } from '@/web/core/app/api';
import {
GetResourceFolderListProps,
GetResourceListItemResponse
} from '@fastgpt/global/common/parentFolder/type';
import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
const SliderApps = ({
showExist = true,
apps,
activeAppId
}: {
showExist?: boolean;
apps: AppListItemType[];
activeAppId: string;
}) => {
const SliderApps = ({ apps, activeAppId }: { apps: AppListItemType[]; activeAppId: string }) => {
const { t } = useTranslation();
const router = useRouter();
const isTeamChat = router.pathname === '/chat/team';
const getAppList = useCallback(async ({ parentId }: GetResourceFolderListProps) => {
return getMyApps({ parentId }).then((res) =>
res.map<GetResourceListItemResponse>((item) => ({
id: item._id,
name: item.name,
avatar: item.avatar,
isFolder: item.type === AppTypeEnum.folder
}))
);
}, []);
const onChangeApp = useCallback(
(appId: string) => {
router.replace({
query: {
...router.query,
chatId: '',
appId
}
});
},
[router]
);
return (
<Flex flexDirection={'column'} h={'100%'}>
<Box px={5} py={4}>
{showExist && (
<Box mt={4} px={4}>
{!isTeamChat && (
<Flex
alignItems={'center'}
cursor={'pointer'}
@@ -33,7 +59,7 @@ const SliderApps = ({
>
<IconButton
mr={3}
icon={<MyIcon name={'common/backFill'} w={'18px'} color={'primary.500'} />}
icon={<MyIcon name={'common/backFill'} w={'1rem'} color={'primary.500'} />}
bg={'white'}
boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
size={'smSquare'}
@@ -45,7 +71,58 @@ const SliderApps = ({
)}
</Box>
<Box flex={'1 0 0'} h={0} px={5} overflow={'overlay'}>
{!isTeamChat && (
<>
<MyDivider h={2} my={1} />
<MyPopover
placement="right-start"
offset={[30, -65]}
trigger="hover"
Trigger={
<HStack
px={4}
my={2}
color={'myGray.500'}
fontSize={'sm'}
justifyContent={'space-between'}
>
<Box>{t('core.chat.Recent use')}</Box>
<HStack
spacing={0.5}
cursor={'pointer'}
px={2}
py={'0.5'}
borderRadius={'md'}
mr={-2}
userSelect={'none'}
_hover={{
bg: 'myGray.200'
}}
>
<Box>{t('common.More')}</Box>
<MyIcon name={'common/select'} w={'1rem'} />
</HStack>
</HStack>
}
>
{({ onClose }) => (
<Box minH={'200px'}>
<SelectOneResource
value={activeAppId}
onSelect={(id) => {
if (!id) return;
onChangeApp(id);
onClose();
}}
server={getAppList}
/>
</Box>
)}
</MyPopover>
</>
)}
<Box flex={'1 0 0'} px={4} h={0} overflow={'overlay'}>
{apps.map((item) => (
<Flex
key={item._id}
@@ -59,21 +136,14 @@ const SliderApps = ({
{...(item._id === activeAppId
? {
bg: 'white',
boxShadow: 'md'
boxShadow: 'md',
color: 'primary.600'
}
: {
_hover: {
bg: 'myGray.200'
},
onClick: () => {
router.replace({
query: {
...router.query,
chatId: '',
appId: item._id
}
});
}
onClick: () => onChangeApp(item._id)
})}
>
<Avatar src={item.avatar} w={'24px'} />

13
projects/app/src/pages/chat/index.tsx
View File

@@ -32,11 +32,12 @@ import ChatHeader from './components/ChatHeader';
import { getErrText } from '@fastgpt/global/common/error/utils';
import { useUserStore } from '@/web/support/user/useUserStore';
import { serviceSideProps } from '@/web/common/utils/i18n';
import { useAppStore } from '@/web/core/app/store/useAppStore';
import { checkChatSupportSelectFileByChatModels } from '@/web/core/chat/utils';
import { getChatTitleFromChatMessage } from '@fastgpt/global/core/chat/utils';
import { ChatStatusEnum } from '@fastgpt/global/core/chat/constants';
import { GPTMessages2Chats } from '@fastgpt/global/core/chat/adapt';
import { getMyApps } from '@/web/core/app/api';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
const Chat = ({ appId, chatId }: { appId: string; chatId: string }) => {
const router = useRouter();
@@ -62,7 +63,6 @@ const Chat = ({ appId, chatId }: { appId: string; chatId: string }) => {
setChatData,
delOneHistoryItem
} = useChatStore();
const { myApps, loadMyApps } = useAppStore();
const { userInfo } = useUserStore();
const { isPc } = useSystemStore();
@@ -128,7 +128,12 @@ const Chat = ({ appId, chatId }: { appId: string; chatId: string }) => {
[appId, chatId, histories, pushHistory, router, setChatData, updateHistory]
);
useQuery(['loadModels'], () => loadMyApps());
const { data: myApps = [], runAsync: loadMyApps } = useRequest2(
() => getMyApps({ getRecentlyChat: true }),
{
manual: false
}
);
// get chat app info
const loadChatInfo = useCallback(
@@ -272,7 +277,7 @@ const Chat = ({ appId, chatId }: { appId: string; chatId: string }) => {
onClose={onCloseSlider}
>
<DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
<DrawerContent maxWidth={'250px'}>{children}</DrawerContent>
<DrawerContent maxWidth={'75vw'}>{children}</DrawerContent>
</Drawer>
);
})(

2
projects/app/src/pages/chat/team.tsx
View File

@@ -274,7 +274,7 @@ const OutLink = () => {
{/* pc show myself apps */}
{isPc && (
<Box borderRight={theme.borders.base} w={'220px'} flexShrink={0}>
<SliderApps showExist={false} apps={myApps} activeAppId={appId} />
<SliderApps apps={myApps} activeAppId={appId} />
</Box>
)}