V4.8.20 feature (#3686)
* Aiproxy (#3649) * model config * feat: model config ui * perf: rename variable * feat: custom request url * perf: model buffer * perf: init model * feat: json model config * auto login * fix: ts * update packages * package * fix: dockerfile * feat: usage filter & export & dashbord (#3538) * feat: usage filter & export & dashbord * adjust ui * fix tmb scroll * fix code & selecte all * merge * perf: usages list；perf: move components (#3654) * perf: usages list * team sub plan load * perf: usage dashboard code * perf: dashboard ui * perf: move components * add default model config (#3653) * 4.8.20 test (#3656) * provider * perf: model config * model perf (#3657) * fix: model * dataset quote * perf: model config * model tag * doubao model config * perf: config model * feat: model test * fix: POST 500 error on dingtalk bot (#3655) * feat: default model (#3662) * move model config * feat: default model * fix: false triggerd org selection (#3661) * export usage csv i18n (#3660) * export usage csv i18n * fix build * feat: markdown extension (#3663) * feat: markdown extension * media cros * rerank test * default price * perf: default model * fix: cannot custom provider * fix: default model select * update bg * perf: default model selector * fix: usage export * i18n * fix: rerank * update init extension * perf: ip limit check * doubao model order * web default modle * perf: tts selector * perf: tts error * qrcode package * reload buffer (#3665) * reload buffer * reload buffer * tts selector * fix: err tip (#3666) * fix: err tip * perf: training queue * doc * fix interactive edge (#3659) * fix interactive edge * fix * comment * add gemini model * fix: chat model select * perf: supplement assistant empty response (#3669) * perf: supplement assistant empty response * check array * perf: max_token count;feat: support resoner output;fix: member scroll (#3681) * perf: supplement assistant empty response * check array * perf: max_token count * feat: support resoner output * member scroll * update provider order * i18n * fix: stream response (#3682) * perf: supplement assistant empty response * check array * fix: stream response * fix: model config cannot set to null * fix: reasoning response (#3684) * perf: supplement assistant empty response * check array * fix: reasoning response * fix: reasoning response * doc (#3685) * perf: supplement assistant empty response * check array * doc * lock * animation * update doc * update compose * doc * doc --------- Co-authored-by: heheer <heheer@sealos.io> Co-authored-by: a.e. <49438478+I-Info@users.noreply.github.com>
This commit is contained in:
Archer
172
projects/app/src/pageComponents/chat/SliderApps.tsx
Normal file
172
projects/app/src/pageComponents/chat/SliderApps.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
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 '@fastgpt/web/components/common/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 { getMyApps } from '@/web/core/app/api';
|
||||
import {
|
||||
GetResourceFolderListProps,
|
||||
GetResourceListItemResponse
|
||||
} from '@fastgpt/global/common/parentFolder/type';
|
||||
import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { ChatItemContext } from '@/web/core/chat/context/chatItemContext';
|
||||
import { useContextSelector } from 'use-context-selector';
|
||||
|
||||
const SelectOneResource = dynamic(() => import('@/components/common/folder/SelectOneResource'));
|
||||
|
||||
const SliderApps = ({ apps, activeAppId }: { apps: AppListItemType[]; activeAppId: string }) => {
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const isTeamChat = router.pathname === '/chat/team';
|
||||
|
||||
const showRouteToAppDetail = useContextSelector(ChatItemContext, (v) => v.showRouteToAppDetail);
|
||||
|
||||
const getAppList = useCallback(async ({ parentId }: GetResourceFolderListProps) => {
|
||||
return getMyApps({
|
||||
parentId,
|
||||
type: [AppTypeEnum.folder, AppTypeEnum.simple, AppTypeEnum.workflow, AppTypeEnum.plugin]
|
||||
}).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,
|
||||
appId
|
||||
}
|
||||
});
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex flexDirection={'column'} h={'100%'}>
|
||||
{showRouteToAppDetail && (
|
||||
<>
|
||||
<Box mt={4} px={4}>
|
||||
<Flex
|
||||
alignItems={'center'}
|
||||
cursor={'pointer'}
|
||||
py={2}
|
||||
px={3}
|
||||
borderRadius={'md'}
|
||||
_hover={{ bg: 'myGray.200' }}
|
||||
onClick={() => router.push('/app/list')}
|
||||
>
|
||||
<IconButton
|
||||
mr={3}
|
||||
icon={<MyIcon name={'common/backFill'} w={'1rem'} color={'primary.500'} />}
|
||||
bg={'white'}
|
||||
boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
|
||||
size={'smSquare'}
|
||||
borderRadius={'50%'}
|
||||
aria-label={''}
|
||||
/>
|
||||
{t('common:core.chat.Exit Chat')}
|
||||
</Flex>
|
||||
</Box>
|
||||
<MyDivider h={2} my={1} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{!isTeamChat && (
|
||||
<>
|
||||
<HStack
|
||||
px={4}
|
||||
my={2}
|
||||
color={'myGray.500'}
|
||||
fontSize={'sm'}
|
||||
justifyContent={'space-between'}
|
||||
>
|
||||
<Box>{t('common:core.chat.Recent use')}</Box>
|
||||
<MyPopover
|
||||
placement="bottom-end"
|
||||
offset={[20, 10]}
|
||||
p={4}
|
||||
trigger="hover"
|
||||
Trigger={
|
||||
<HStack
|
||||
spacing={0.5}
|
||||
cursor={'pointer'}
|
||||
px={2}
|
||||
py={'0.5'}
|
||||
borderRadius={'md'}
|
||||
mr={-2}
|
||||
userSelect={'none'}
|
||||
_hover={{
|
||||
bg: 'myGray.200'
|
||||
}}
|
||||
>
|
||||
<Box>{t('common:common.More')}</Box>
|
||||
<MyIcon name={'common/select'} w={'1rem'} />
|
||||
</HStack>
|
||||
}
|
||||
>
|
||||
{({ onClose }) => (
|
||||
<Box minH={'200px'}>
|
||||
<SelectOneResource
|
||||
maxH={'60vh'}
|
||||
value={activeAppId}
|
||||
onSelect={(id) => {
|
||||
if (!id) return;
|
||||
onChangeApp(id);
|
||||
onClose();
|
||||
}}
|
||||
server={getAppList}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</MyPopover>
|
||||
</HStack>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Box flex={'1 0 0'} px={4} h={0} overflow={'overlay'}>
|
||||
{apps.map((item) => (
|
||||
<Flex
|
||||
key={item._id}
|
||||
py={2}
|
||||
px={3}
|
||||
mb={3}
|
||||
cursor={'pointer'}
|
||||
borderRadius={'md'}
|
||||
alignItems={'center'}
|
||||
fontSize={'sm'}
|
||||
{...(item._id === activeAppId
|
||||
? {
|
||||
bg: 'white',
|
||||
boxShadow: 'md',
|
||||
color: 'primary.600'
|
||||
}
|
||||
: {
|
||||
_hover: {
|
||||
bg: 'myGray.200'
|
||||
},
|
||||
onClick: () => onChangeApp(item._id)
|
||||
})}
|
||||
>
|
||||
<Avatar src={item.avatar} w={'1.5rem'} borderRadius={'md'} />
|
||||
<Box ml={2} className={'textEllipsis'}>
|
||||
{item.name}
|
||||
</Box>
|
||||
</Flex>
|
||||
))}
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(SliderApps);
|
||||
Reference in New Issue
Block a user