chatbox ui

client/src/pages/chat/components/ChatHistorySlider.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { AddIcon } from '@chakra-ui/icons';
+import React, { useMemo } from 'react';
 import {
   Box,
   Button,
@@ -10,13 +9,16 @@ import {
   MenuList,
   MenuItem
 } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
 import MyIcon from '@/components/Icon';
-import type { ShareChatHistoryItemType, ExportChatType } from '@/types/chat';
-import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
 import Avatar from '@/components/Avatar';
 
+type HistoryItemType = {
+  id: string;
+  title: string;
+  top?: boolean;
+};
+
 const ChatHistorySlider = ({
   appName,
   appAvatar,
@@ -24,23 +26,26 @@ const ChatHistorySlider = ({
   activeHistoryId,
   onChangeChat,
   onDelHistory,
+  onSetHistoryTop,
   onCloseSlider
 }: {
   appName: string;
   appAvatar: string;
-  history: {
-    id: string;
-    title: string;
-  }[];
+  history: HistoryItemType[];
   activeHistoryId: string;
   onChangeChat: (historyId?: string) => void;
   onDelHistory: (historyId: string) => void;
+  onSetHistoryTop?: (e: { historyId: string; top: boolean }) => void;
   onCloseSlider: () => void;
 }) => {
-  const router = useRouter();
   const theme = useTheme();
   const { isPc } = useGlobalStore();
 
+  const concatHistory = useMemo<HistoryItemType[]>(
+    () => (!activeHistoryId ? [{ id: activeHistoryId, title: '新对话' }].concat(history) : history),
+    [activeHistoryId, history]
+  );
+
   return (
     <Flex
       position={'relative'}
@@ -48,11 +53,11 @@ const ChatHistorySlider = ({
       w={'100%'}
       h={'100%'}
       bg={'white'}
-      px={[2, 5]}
       borderRight={['', theme.borders.base]}
+      whiteSpace={'nowrap'}
     >
       {isPc && (
-        <Flex pt={5} pb={2} alignItems={'center'} whiteSpace={'nowrap'}>
+        <Flex pt={5} pb={2} px={[2, 5]} alignItems={'center'}>
           <Avatar src={appAvatar} />
           <Box ml={2} fontWeight={'bold'} className={'textEllipsis'}>
             {appName}
@@ -60,7 +65,7 @@ const ChatHistorySlider = ({
         </Flex>
       )}
       {/* 新对话 */}
-      <Box w={'100%'} h={'36px'} my={5}>
+      <Box w={'100%'} px={[2, 5]} h={'36px'} my={5}>
         <Button
           variant={'base'}
           w={'100%'}
@@ -76,8 +81,8 @@ const ChatHistorySlider = ({
       </Box>
 
       {/* chat history */}
-      <Box flex={'1 0 0'} h={0} overflow={'overlay'}>
-        {history.map((item) => (
+      <Box flex={'1 0 0'} h={0} px={[2, 5]} overflow={'overlay'}>
+        {concatHistory.map((item) => (
           <Flex
             position={'relative'}
             key={item.id}
@@ -94,6 +99,7 @@ const ChatHistorySlider = ({
                 display: 'block'
               }
             }}
+            bg={item.top ? '#E6F6F6 !important' : ''}
             {...(item.id === activeHistoryId
               ? {
                   backgroundColor: 'myBlue.100 !important',
@@ -109,49 +115,50 @@ const ChatHistorySlider = ({
             <Box flex={'1 0 0'} ml={3} className="textEllipsis">
               {item.title}
             </Box>
-            <Box className="more" display={['block', 'none']}>
-              <Menu autoSelect={false} isLazy offset={[0, 5]}>
-                <MenuButton
-                  _hover={{ bg: 'white' }}
-                  cursor={'pointer'}
-                  borderRadius={'md'}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                  }}
-                >
-                  <MyIcon name={'more'} w={'14px'} p={1} />
-                </MenuButton>
-                <MenuList color={'myGray.700'} minW={`90px !important`}>
-                  <MenuItem>
-                    <MyIcon mr={2} name={'setTop'} w={'16px'}></MyIcon>
-                    置顶
-                  </MenuItem>
-                  <MenuItem
-                    _hover={{ color: 'red.500' }}
+            {!!item.id && (
+              <Box className="more" display={['block', 'none']}>
+                <Menu autoSelect={false} isLazy offset={[0, 5]}>
+                  <MenuButton
+                    _hover={{ bg: 'white' }}
+                    cursor={'pointer'}
+                    borderRadius={'md'}
                     onClick={(e) => {
                       e.stopPropagation();
-                      onDelHistory(item.id);
-                      if (item.id === activeHistoryId) {
-                        onChangeChat();
-                      }
                     }}
                   >
-                    <MyIcon mr={2} name={'delete'} w={'16px'}></MyIcon>
-                    删除
-                  </MenuItem>
-                </MenuList>
-              </Menu>
-            </Box>
+                    <MyIcon name={'more'} w={'14px'} p={1} />
+                  </MenuButton>
+                  <MenuList color={'myGray.700'} minW={`90px !important`}>
+                    {onSetHistoryTop && (
+                      <MenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onSetHistoryTop({ historyId: item.id, top: !item.top });
+                        }}
+                      >
+                        <MyIcon mr={2} name={'setTop'} w={'16px'}></MyIcon>
+                        {item.top ? '取消置顶' : '置顶'}
+                      </MenuItem>
+                    )}
+                    <MenuItem
+                      _hover={{ color: 'red.500' }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDelHistory(item.id);
+                        if (item.id === activeHistoryId) {
+                          onChangeChat();
+                        }
+                      }}
+                    >
+                      <MyIcon mr={2} name={'delete'} w={'16px'}></MyIcon>
+                      删除
+                    </MenuItem>
+                  </MenuList>
+                </Menu>
+              </Box>
+            )}
           </Flex>
         ))}
-        {history.length === 0 && (
-          <Flex h={'100%'} flexDirection={'column'} alignItems={'center'} pt={'30vh'}>
-            <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
-            <Box mt={2} color={'myGray.500'}>
-              还没有聊天记录
-            </Box>
-          </Flex>
-        )}
       </Box>
     </Flex>
   );

client/src/pages/chat/components/History.tsx

@@ -1,304 +0,0 @@
-import React, { useCallback, useRef, useState, useMemo } from 'react';
-import type { MouseEvent } from 'react';
-import { AddIcon } from '@chakra-ui/icons';
-import {
-  Box,
-  Button,
-  Flex,
-  useTheme,
-  Menu,
-  MenuList,
-  MenuItem,
-  useOutsideClick
-} from '@chakra-ui/react';
-import { ChatIcon } from '@chakra-ui/icons';
-import { useQuery } from '@tanstack/react-query';
-import { useRouter } from 'next/router';
-import { useLoading } from '@/hooks/useLoading';
-import { useUserStore } from '@/store/user';
-import MyIcon from '@/components/Icon';
-import type { HistoryItemType, ExportChatType } from '@/types/chat';
-import { useChatStore } from '@/store/chat';
-import ModelList from './ModelList';
-import { useGlobalStore } from '@/store/global';
-import styles from '../index.module.scss';
-import { useEditInfo } from '@/hooks/useEditInfo';
-import { putChatHistory } from '@/api/chat';
-import { useToast } from '@/hooks/useToast';
-import { formatTimeToChatTime, getErrText } from '@/utils/tools';
-
-const PcSliderBar = ({
-  onclickDelHistory,
-  onclickExportChat
-}: {
-  onclickDelHistory: (historyId: string) => Promise<void>;
-  onclickExportChat: (type: ExportChatType) => void;
-}) => {
-  const router = useRouter();
-  const { toast } = useToast();
-  const { modelId = '', chatId = '' } = router.query as {
-    modelId: string;
-    chatId: string;
-  };
-  const ContextMenuRef = useRef(null);
-  const onclickContext = useRef(false);
-
-  const theme = useTheme();
-  const { isPc } = useGlobalStore();
-
-  const { Loading, setIsLoading } = useLoading();
-  const [contextMenuData, setContextMenuData] = useState<{
-    left: number;
-    top: number;
-    history: HistoryItemType;
-  }>();
-
-  const { history, loadHistory } = useChatStore();
-  const { myApps, myCollectionApps, loadMyModels } = useUserStore();
-  const models = useMemo(() => [...myApps, ...myCollectionApps], [myCollectionApps, myApps]);
-
-  // custom title edit
-  const { onOpenModal, EditModal: EditTitleModal } = useEditInfo({
-    title: '自定义历史记录标题',
-    placeholder: '如果设置为空，会自动跟随聊天记录。'
-  });
-
-  // close contextMenu
-  useOutsideClick({
-    ref: ContextMenuRef,
-    handler: () => {
-      setTimeout(() => {
-        if (contextMenuData && !onclickContext.current) {
-          setContextMenuData(undefined);
-        }
-      }, 10);
-      setTimeout(() => {
-        onclickContext.current = false;
-      }, 10);
-    }
-  });
-
-  const onclickContextMenu = useCallback(
-    (e: MouseEvent<HTMLDivElement>, history: HistoryItemType) => {
-      e.preventDefault(); // 阻止默认右键菜单
-
-      if (!isPc) return;
-
-      onclickContext.current = true;
-      setContextMenuData({
-        left: e.clientX,
-        top: e.clientY,
-        history
-      });
-    },
-    [isPc]
-  );
-
-  useQuery(['loadModels'], loadMyModels);
-
-  const { isLoading: isLoadingHistory } = useQuery(['loadingHistory'], () =>
-    loadHistory({ pageNum: 1 })
-  );
-
-  return (
-    <Flex
-      position={'relative'}
-      flexDirection={'column'}
-      w={'100%'}
-      h={'100%'}
-      bg={'white'}
-      borderRight={['', theme.borders.base]}
-    >
-      {/* 新对话 */}
-      {isPc && (
-        <Box
-          className={styles.newChat}
-          zIndex={1001}
-          w={'90%'}
-          h={'40px'}
-          my={5}
-          mx={'auto'}
-          position={'relative'}
-        >
-          <Button
-            variant={'base'}
-            w={'100%'}
-            h={'100%'}
-            leftIcon={<AddIcon />}
-            onClick={() => router.replace(`/chat?appId=${modelId}`)}
-          >
-            新对话
-          </Button>
-          {models.length > 1 && (
-            <Box
-              className={styles.modelListContainer}
-              position={'absolute'}
-              w={'115%'}
-              left={0}
-              top={'40px'}
-              transition={'0.15s ease-out'}
-              bg={'white'}
-            >
-              <Box
-                className={styles.modelList}
-                mt={'6px'}
-                h={'calc(100% - 6px)'}
-                overflow={'overlay'}
-              >
-                <ModelList models={models} modelId={modelId} />
-              </Box>
-            </Box>
-          )}
-        </Box>
-      )}
-      {/* chat history */}
-      <Box flex={'1 0 0'} h={0} pl={2} overflowY={'scroll'} userSelect={'none'}>
-        {history.map((item) => (
-          <Flex
-            key={item._id}
-            position={'relative'}
-            alignItems={'center'}
-            p={3}
-            borderRadius={'md'}
-            mb={[2, 0]}
-            cursor={'pointer'}
-            transition={'background-color .2s ease-in'}
-            _hover={{
-              backgroundImage: ['', theme.lgColor.hoverBlueGradient]
-            }}
-            {...(item._id === chatId
-              ? {
-                  backgroundImage: `${theme.lgColor.activeBlueGradient}  !important`
-                }
-              : {
-                  bg: item.top ? 'myGray.200' : ''
-                })}
-            onClick={() => {
-              if (item._id === chatId) return;
-              if (isPc) {
-                router.replace(`/chat?appId=${item.modelId}&chatId=${item._id}`);
-              } else {
-                router.push(`/chat?appId=${item.modelId}&chatId=${item._id}`);
-              }
-            }}
-            onContextMenu={(e) => onclickContextMenu(e, item)}
-          >
-            <ChatIcon fontSize={'16px'} color={'myGray.500'} />
-            <Box flex={'1 0 0'} w={0} ml={3}>
-              <Flex alignItems={'center'}>
-                <Box flex={'1 0 0'} w={0} className="textEllipsis" color={'myGray.1000'}>
-                  {item.title}
-                </Box>
-                <Box color={'myGray.400'} fontSize={'sm'}>
-                  {formatTimeToChatTime(item.updateTime)}
-                </Box>
-              </Flex>
-              <Box className="textEllipsis" mt={1} fontSize={'sm'} color={'myGray.500'}>
-                {item.latestChat || '……'}
-              </Box>
-            </Box>
-            {/* phone quick delete */}
-            {!isPc && (
-              <MyIcon
-                px={3}
-                name={'delete'}
-                w={'16px'}
-                onClickCapture={async (e) => {
-                  e.stopPropagation();
-                  setIsLoading(true);
-                  try {
-                    await onclickDelHistory(item._id);
-                  } catch (error) {
-                    console.log(error);
-                  }
-                  setIsLoading(false);
-                }}
-              />
-            )}
-          </Flex>
-        ))}
-        {!isLoadingHistory && history.length === 0 && (
-          <Flex h={'100%'} flexDirection={'column'} alignItems={'center'} pt={'30vh'}>
-            <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
-            <Box mt={2} color={'myGray.500'}>
-              还没有聊天记录
-            </Box>
-          </Flex>
-        )}
-      </Box>
-      {/* context menu */}
-      {contextMenuData && (
-        <Box zIndex={10} position={'fixed'} top={contextMenuData.top} left={contextMenuData.left}>
-          <Box ref={ContextMenuRef}></Box>
-          <Menu isOpen>
-            <MenuList>
-              <MenuItem
-                onClick={async () => {
-                  try {
-                    await putChatHistory({
-                      chatId: contextMenuData.history._id,
-                      top: !contextMenuData.history.top
-                    });
-                    loadHistory({ pageNum: 1, init: true });
-                  } catch (error) {}
-                }}
-              >
-                {contextMenuData.history.top ? '取消置顶' : '置顶'}
-              </MenuItem>
-              <MenuItem
-                onClick={async () => {
-                  setIsLoading(true);
-                  try {
-                    await onclickDelHistory(contextMenuData.history._id);
-                    if (contextMenuData.history._id === chatId) {
-                      router.replace(`/chat?appId=${modelId}`);
-                    }
-                  } catch (error) {
-                    console.log(error);
-                  }
-                  setIsLoading(false);
-                }}
-              >
-                删除记录
-              </MenuItem>
-              <MenuItem
-                onClick={() =>
-                  onOpenModal({
-                    defaultVal: contextMenuData.history.title,
-                    onSuccess: async (val: string) => {
-                      await putChatHistory({
-                        chatId: contextMenuData.history._id,
-                        customTitle: val,
-                        top: contextMenuData.history.top
-                      });
-                      toast({
-                        title: '自定义标题成功',
-                        status: 'success'
-                      });
-                      loadHistory({ pageNum: 1, init: true });
-                    },
-                    onError(err) {
-                      toast({
-                        title: getErrText(err),
-                        status: 'error'
-                      });
-                    }
-                  })
-                }
-              >
-                自定义标题
-              </MenuItem>
-              <MenuItem onClick={() => onclickExportChat('html')}>导出HTML格式</MenuItem>
-              <MenuItem onClick={() => onclickExportChat('pdf')}>导出PDF格式</MenuItem>
-              <MenuItem onClick={() => onclickExportChat('md')}>导出Markdown格式</MenuItem>
-            </MenuList>
-          </Menu>
-        </Box>
-      )}
-      <EditTitleModal />
-      <Loading loading={isLoadingHistory} fixed={false} />
-    </Flex>
-  );
-};
-
-export default PcSliderBar;

client/src/pages/chat/components/ModelList.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import { Box, Flex } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
-import { AppListItemType } from '@/types/app';
-import Avatar from '@/components/Avatar';
-
-const ModelList = ({ models, modelId }: { models: AppListItemType[]; modelId: string }) => {
-  const router = useRouter();
-
-  return (
-    <>
-      {models.map((item) => (
-        <Box key={item._id}>
-          <Flex
-            key={item._id}
-            position={'relative'}
-            alignItems={['flex-start', 'center']}
-            p={3}
-            cursor={'pointer'}
-            transition={'background-color .2s ease-in'}
-            borderLeft={['', '5px solid transparent']}
-            zIndex={0}
-            _hover={{
-              backgroundColor: ['', '#dee0e3']
-            }}
-            {...(modelId === item._id
-              ? {
-                  backgroundColor: '#eff0f1',
-                  borderLeftColor: 'myBlue.600'
-                }
-              : {})}
-            onClick={() => {
-              router.replace(`/chat?appId=${item._id}`);
-            }}
-          >
-            <Avatar src={item.avatar} w={'34px'} h={'34px'} />
-            <Box flex={'1 0 0'} w={0} ml={3}>
-              <Box className="textEllipsis" color={'myGray.1000'}>
-                {item.name}
-              </Box>
-            </Box>
-          </Flex>
-        </Box>
-      ))}
-    </>
-  );
-};
-
-export default ModelList;

client/src/pages/chat/components/PhoneSliderBar.tsx

@@ -1,212 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { AddIcon, ChatIcon } from '@chakra-ui/icons';
-import {
-  Box,
-  Button,
-  Flex,
-  Divider,
-  useDisclosure,
-  useColorMode,
-  useColorModeValue
-} from '@chakra-ui/react';
-import { useUserStore } from '@/store/user';
-import { useQuery } from '@tanstack/react-query';
-import { useRouter } from 'next/router';
-import MyIcon from '@/components/Icon';
-import WxConcat from '@/components/WxConcat';
-import { delChatHistoryById } from '@/api/chat';
-import { useChatStore } from '@/store/chat';
-import Avatar from '@/components/Avatar';
-import Tabs from '@/components/Tabs';
-
-enum TabEnum {
-  app = 'app',
-  history = 'history'
-}
-
-const PhoneSliderBar = ({
-  chatId,
-  modelId,
-  onClose
-}: {
-  chatId: string;
-  modelId: string;
-  onClose: () => void;
-}) => {
-  const router = useRouter();
-  const [currentTab, setCurrentTab] = useState(TabEnum.app);
-  const { myApps, myCollectionApps, loadMyModels } = useUserStore();
-  const { isOpen: isOpenWx, onOpen: onOpenWx, onClose: onCloseWx } = useDisclosure();
-
-  const models = useMemo(() => [...myApps, ...myCollectionApps], [myCollectionApps, myApps]);
-  useQuery(['loadModels'], loadMyModels);
-
-  const { history, loadHistory } = useChatStore();
-  useQuery(['loadingHistory'], () => loadHistory({ pageNum: 1 }));
-
-  const RenderButton = ({
-    onClick,
-    children
-  }: {
-    onClick: () => void;
-    children: JSX.Element | string;
-  }) => (
-    <Box px={3} mb={2}>
-      <Flex
-        alignItems={'center'}
-        p={2}
-        cursor={'pointer'}
-        borderRadius={'md'}
-        _hover={{
-          backgroundColor: 'rgba(255,255,255,0.2)'
-        }}
-        onClick={onClick}
-      >
-        {children}
-      </Flex>
-    </Box>
-  );
-
-  return (
-    <Flex
-      flexDirection={'column'}
-      w={'100%'}
-      h={'100%'}
-      py={3}
-      backgroundColor={useColorModeValue('blackAlpha.800', 'blackAlpha.500')}
-      color={'white'}
-    >
-      <Flex mb={2} alignItems={'center'} justifyContent={'space-between'} px={2}>
-        <Tabs
-          w={'140px'}
-          list={[
-            { label: '应用', id: TabEnum.app },
-            { label: '历史记录', id: TabEnum.history }
-          ]}
-          size={'sm'}
-          activeId={currentTab}
-          onChange={(e: any) => setCurrentTab(e)}
-        />
-        {/* 新对话 */}
-        {currentTab === TabEnum.app && (
-          <Button
-            size={'sm'}
-            variant={'base'}
-            color={'white'}
-            leftIcon={<AddIcon />}
-            onClick={() => {
-              router.replace(`/chat?appId=${modelId}`);
-              onClose();
-            }}
-          >
-            新对话
-          </Button>
-        )}
-      </Flex>
-      {/* 我的模型 & 历史记录 折叠框*/}
-      <Box flex={'1 0 0'} px={3} h={0} overflowY={'auto'}>
-        {currentTab === TabEnum.app && (
-          <>
-            {models.map((item) => (
-              <Flex
-                key={item._id}
-                alignItems={'center'}
-                p={3}
-                borderRadius={'md'}
-                mb={2}
-                cursor={'pointer'}
-                _hover={{
-                  backgroundColor: 'rgba(255,255,255,0.1)'
-                }}
-                fontSize={'xs'}
-                border={'1px solid transparent'}
-                {...(item._id === modelId
-                  ? {
-                      borderColor: 'rgba(255,255,255,0.5)',
-                      backgroundColor: 'rgba(255,255,255,0.1)'
-                    }
-                  : {})}
-                onClick={async () => {
-                  if (item._id === modelId) return;
-                  router.replace(`/chat?appId=${item._id}`);
-                  onClose();
-                }}
-              >
-                <Avatar src={item.avatar} mr={2} w={'18px'} h={'18px'} />
-                <Box className={'textEllipsis'} flex={'1 0 0'} w={0}>
-                  {item.name}
-                </Box>
-              </Flex>
-            ))}
-          </>
-        )}
-        {currentTab === TabEnum.history && (
-          <>
-            {history.map((item) => (
-              <Flex
-                key={item._id}
-                alignItems={'center'}
-                p={3}
-                borderRadius={'md'}
-                mb={2}
-                fontSize={'xs'}
-                border={'1px solid transparent'}
-                {...(item._id === chatId
-                  ? {
-                      borderColor: 'rgba(255,255,255,0.5)',
-                      backgroundColor: 'rgba(255,255,255,0.1)'
-                    }
-                  : {})}
-                onClick={() => {
-                  if (item._id === chatId) return;
-                  router.replace(`/chat?appId=${item.modelId}&chatId=${item._id}`);
-                  onClose();
-                }}
-              >
-                <ChatIcon mr={2} />
-                <Box flex={'1 0 0'} w={0} className="textEllipsis">
-                  {item.title}
-                </Box>
-                <Box>
-                  <MyIcon
-                    name={'delete'}
-                    w={'14px'}
-                    onClick={async (e) => {
-                      e.stopPropagation();
-                      console.log(111);
-                      await delChatHistoryById(item._id);
-                      loadHistory({ pageNum: 1, init: true });
-                      if (item._id === chatId) {
-                        router.replace(`/chat?appId=${modelId}`);
-                      }
-                    }}
-                  />
-                </Box>
-              </Flex>
-            ))}
-          </>
-        )}
-      </Box>
-
-      <Divider my={3} colorScheme={useColorModeValue('gray', 'white')} />
-
-      <RenderButton onClick={() => router.push('/model')}>
-        <>
-          <MyIcon name="out" fill={'white'} w={'18px'} h={'18px'} mr={4} />
-          退出聊天
-        </>
-      </RenderButton>
-      <RenderButton onClick={onOpenWx}>
-        <>
-          <MyIcon name="wx" fill={'white'} w={'18px'} h={'18px'} mr={4} />
-          交流群
-        </>
-      </RenderButton>
-
-      {/* wx 联系 */}
-      {isOpenWx && <WxConcat onClose={onCloseWx} />}
-    </Flex>
-  );
-};
-
-export default PhoneSliderBar;

client/src/pages/chat/components/SliderApps.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Flex, Box, IconButton } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import { useUserStore } from '@/store/user';
+import { useQuery } from '@tanstack/react-query';
+import MyIcon from '@/components/Icon';
+import Avatar from '@/components/Avatar';
+
+const SliderApps = ({ appId }: { appId: string }) => {
+  const router = useRouter();
+  const { myApps, loadMyModels } = useUserStore();
+
+  useQuery(['loadModels'], loadMyModels);
+
+  return (
+    <>
+      <Flex
+        alignItems={'center'}
+        cursor={'pointer'}
+        py={2}
+        px={3}
+        borderRadius={'md'}
+        _hover={{ bg: 'myGray.200' }}
+        onClick={() => router.replace('/app/list')}
+      >
+        <IconButton
+          mr={3}
+          icon={<MyIcon name={'backFill'} w={'18px'} color={'myBlue.600'} />}
+          bg={'white'}
+          boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
+          h={'28px'}
+          size={'sm'}
+          borderRadius={'50%'}
+          aria-label={''}
+        />
+        退出聊天
+      </Flex>
+      <Box mt={5}>
+        {myApps.map((item) => (
+          <Flex
+            key={item._id}
+            py={2}
+            px={3}
+            mb={3}
+            cursor={'pointer'}
+            borderRadius={'lg'}
+            alignItems={'center'}
+            {...(item._id === appId
+              ? {
+                  bg: 'white',
+                  boxShadow: 'md'
+                }
+              : {
+                  _hover: {
+                    bg: 'myGray.200'
+                  },
+                  onClick: () => {
+                    router.replace({
+                      query: {
+                        appId: item._id
+                      }
+                    });
+                  }
+                })}
+          >
+            <Avatar src={item.avatar} w={'24px'} />
+            <Box ml={2} className={'textEllipsis'}>
+              {item.name}
+            </Box>
+          </Flex>
+        ))}
+      </Box>
+    </>
+  );
+};
+
+export default SliderApps;

client/src/pages/chat/share.tsx

@@ -18,13 +18,13 @@ import { streamFetch } from '@/api/fetch';
 import { useShareChatStore, defaultHistory } from '@/store/shareChat';
 import SideBar from '@/components/SideBar';
 import { gptMessage2ChatType } from '@/utils/adapt';
-import ChatHistorySlider from './components/ChatHistorySlider';
 import { getErrText } from '@/utils/tools';
 
 import ChatBox, { type ComponentRef, type StartChatFnProps } from '@/components/ChatBox';
 import MyIcon from '@/components/Icon';
 import Tag from '@/components/Tag';
 import PageContainer from '@/components/PageContainer';
+import ChatHistorySlider from './components/ChatHistorySlider';
 
 const ShareChat = () => {
   const theme = useTheme();
@@ -134,6 +134,10 @@ const ShareChat = () => {
         }
       }
 
+      if (history.chats.length > 0) {
+        ChatBoxRef.current?.scrollToBottom('auto');
+      }
+
       return history;
     },
     [
@@ -152,7 +156,7 @@ const ShareChat = () => {
 
   return (
     <PageContainer>
-      <Flex h={'100%'} flexDirection={['column', 'row']} backgroundColor={'#fdfdfd'}>
+      <Flex h={'100%'} flexDirection={['column', 'row']}>
         {/*  slider */}
         {isPc ? (
           <SideBar>
@@ -243,14 +247,7 @@ const ShareChat = () => {
             )}
           </Flex>
           {/* chat box */}
-          <Box
-            pt={[0, 5]}
-            flex={1}
-            maxW={['100%', '1000px', '1200px']}
-            px={[0, 5]}
-            w={'100%'}
-            mx={'auto'}
-          >
+          <Box flex={1}>
             <ChatBox
               ref={ChatBoxRef}
               appAvatar={shareChatData.app.avatar}