mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-24 22:03:54 +00:00
feat: fold sliderbar
This commit is contained in:
@@ -221,8 +221,8 @@ export const theme = extendTheme({
|
||||
sm: '900px',
|
||||
md: '1200px',
|
||||
lg: '1500px',
|
||||
xl: '1800',
|
||||
'2xl': '2100'
|
||||
xl: '1800px',
|
||||
'2xl': '2100px'
|
||||
},
|
||||
components: {
|
||||
Modal: ModalTheme,
|
||||
|
@@ -98,6 +98,7 @@ const Chat = ({
|
||||
top: number;
|
||||
message: ChatSiteItemType;
|
||||
}>();
|
||||
const [foldSliderBar, setFoldSlideBar] = useState(false);
|
||||
|
||||
const {
|
||||
lastChatModelId,
|
||||
@@ -636,14 +637,57 @@ const Chat = ({
|
||||
flexDirection={['column', 'row']}
|
||||
backgroundColor={useColorModeValue('#fdfdfd', '')}
|
||||
>
|
||||
{/* pc always show history. phone is only show when modelId is present */}
|
||||
{/* pc always show history. */}
|
||||
{(isPc || !modelId) && (
|
||||
<Box flex={[1, '0 0 250px']} w={['100%', 0]} h={'100%'}>
|
||||
<History
|
||||
onclickDelHistory={onclickDelHistory}
|
||||
onclickExportChat={onclickExportChat}
|
||||
isPcDevice={isPcDevice}
|
||||
/>
|
||||
<Box
|
||||
position={'relative'}
|
||||
flex={foldSliderBar ? '0 0 0' : [1, '0 0 250px', '0 0 280px', '0 0 310px', '0 0 340px']}
|
||||
w={['100%', 0]}
|
||||
h={'100%'}
|
||||
zIndex={1}
|
||||
transition={'0.2s'}
|
||||
_hover={{
|
||||
'& > div': { visibility: 'visible', opacity: 1 }
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
position={'absolute'}
|
||||
right={0}
|
||||
top={'50%'}
|
||||
transform={'translate(50%,-50%)'}
|
||||
alignItems={'center'}
|
||||
justifyContent={'flex-end'}
|
||||
pr={1}
|
||||
w={'36px'}
|
||||
h={'50px'}
|
||||
borderRadius={'10px'}
|
||||
bg={'rgba(0,0,0,0.5)'}
|
||||
cursor={'pointer'}
|
||||
transition={'0.2s'}
|
||||
{...(foldSliderBar
|
||||
? {
|
||||
opacity: 0.6
|
||||
}
|
||||
: {
|
||||
visibility: 'hidden',
|
||||
opacity: 0
|
||||
})}
|
||||
onClick={() => setFoldSlideBar(!foldSliderBar)}
|
||||
>
|
||||
<MyIcon
|
||||
name={'back'}
|
||||
transform={foldSliderBar ? 'rotate(180deg)' : ''}
|
||||
w={'14px'}
|
||||
color={'white'}
|
||||
/>
|
||||
</Flex>
|
||||
<Box position={'relative'} h={'100%'} bg={'white'} overflow={'hidden'}>
|
||||
<History
|
||||
onclickDelHistory={onclickDelHistory}
|
||||
onclickExportChat={onclickExportChat}
|
||||
isPcDevice={isPcDevice}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -656,6 +700,7 @@ const Chat = ({
|
||||
flex={'1 0 0'}
|
||||
flexDirection={'column'}
|
||||
>
|
||||
{/* chat header */}
|
||||
<Flex
|
||||
alignItems={'center'}
|
||||
justifyContent={'space-between'}
|
||||
@@ -722,10 +767,11 @@ const Chat = ({
|
||||
<Box w={'16px'} h={'16px'} />
|
||||
)}
|
||||
</Flex>
|
||||
{/* chat content box */}
|
||||
<Box ref={ChatBox} pb={[4, 0]} flex={'1 0 0'} h={0} w={'100%'} overflow={'overlay'}>
|
||||
<Box id={'history'} maxW={['auto', '800px', '1000px']} m={'auto'}>
|
||||
<Box id={'history'}>
|
||||
{chatData.history.map((item, index) => (
|
||||
<Flex key={item._id} alignItems={'flex-start'} py={2} px={[2, 4]}>
|
||||
<Flex key={item._id} alignItems={'flex-start'} py={2} px={[2, 6, 8]}>
|
||||
{item.obj === 'Human' && <Box flex={1} />}
|
||||
{/* avatar */}
|
||||
<Menu autoSelect={false} isLazy>
|
||||
|
Reference in New Issue
Block a user