fix: phone ui

client/src/components/ChatBox/index.tsx

@@ -312,8 +312,8 @@ const ChatBox = (
   };
   const controlContainerStyle = {
     className: 'control',
-    display: isChatting ? 'none' : ['flex', 'none'],
     color: 'myGray.400',
+    display: ['flex', 'none'],
     pl: 1,
     mt: 2,
     position: 'absolute' as any,
@@ -321,12 +321,17 @@ const ChatBox = (
     w: '100%'
   };
 
+  const hasVariableInput = useMemo(
+    () => variableModules || welcomeText,
+    [variableModules, welcomeText]
+  );
+
   return (
     <Flex flexDirection={'column'} h={'100%'}>
-      <Box ref={ChatBoxRef} flex={'1 0 0'} overflow={'overlay'} px={[2, 5, 8]} py={5}>
-        <Box maxW={['100%', '1000px', '1200px']} mx={'auto'}>
+      <Box ref={ChatBoxRef} flex={'1 0 0'} h={0} overflow={'overlay'} px={[2, 5, 8]} py={[0, 5]}>
+        <Box maxW={['100%', '1000px', '1200px']} h={'100%'} mx={'auto'}>
           {/* variable input */}
-          {(variableModules || welcomeText) && (
+          {hasVariableInput && (
             <Flex alignItems={'flex-start'} py={2}>
               {/* avatar */}
               <Avatar
@@ -396,8 +401,10 @@ const ChatBox = (
               </Flex>
             </Flex>
           )}
+          {/* empty guide */}
+
           {/* chat history */}
-          <Box id={'history'}>
+          <Box id={'history'} pb={[8, 2]}>
             {chatHistory.map((item, index) => (
               <Flex
                 key={item._id}
@@ -486,7 +493,7 @@ const ChatBox = (
                       >
                         <Box as={'p'}>{item.value}</Box>
                       </Card>
-                      <Flex {...controlContainerStyle} right={0}>
+                      <Flex {...controlContainerStyle} justifyContent={'flex-end'}>
                         <MyTooltip label={'复制'}>
                           <MyIcon
                             {...controlIconStyle}
@@ -523,6 +530,7 @@ const ChatBox = (
           </Box>
         </Box>
       </Box>
+      {/* input */}
       {variableIsFinish ? (
         <Box m={['0 auto', '20px auto']} w={'100%'} maxW={['auto', 'min(750px, 100%)']} px={[0, 5]}>
           <Box

client/src/components/Icon/icons/file/html.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689324646567" class="icon" viewBox="0 0 1110 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3584" data-spm-anchor-id="a313x.7781069.0.i4" xmlns:xlink="http://www.w3.org/1999/xlink" width="69.375" height="64"><path d="M919.75593219 424.16813563a21.72203344 21.72203344 0 0 0 21.65694937-21.78711844V140.93559313c0-60.04067812-48.545085-108.93559312-108.26847469-108.93559313H140.26033906C80.545085 32 32 80.894915 32 140.93559313v740.77017c0 60.04067812 48.545085 108.93559312 108.26033906 108.93559312h692.88406781c59.71525406 0 108.26033906-48.894915 108.26033907-108.93559312V750.98305063a21.72203344 21.72203344 0 0 0-21.64881375-21.78711844 21.72203344 21.72203344 0 0 0-21.65694938 21.78711843v130.72271251c0 36.04067812-29.14169531 65.36135625-64.95457594 65.36135531H140.26033906c-35.81288156 0-64.95457594-29.32881375-64.95457593-65.36135531V249.87118625h822.80135531v152.50983094a21.72203344 21.72203344 0 0 0 21.64881375 21.78711843zM75.30576312 206.29694937V140.93559313c0-36.04067812 29.14169531-65.36135625 64.95457594-65.36135625h692.88406781c35.81288156 0 64.96271156 29.32881375 64.96271157 65.36135625v65.36135625H75.30576312z m64.95457594-43.57423781a21.72203344 21.72203344 0 0 0 21.65694938-21.78711843 21.72203344 21.72203344 0 0 0-21.65694938-21.78711844 21.72203344 21.72203344 0 0 0-21.64881375 21.78711844 21.72203344 21.72203344 0 0 0 21.64881375 21.78711843z m86.61152531 0a21.72203344 21.72203344 0 0 0 21.65694938-21.78711843 21.72203344 21.72203344 0 0 0-21.65694938-21.78711844 21.72203344 21.72203344 0 0 0-21.64881375 21.78711844 21.72203344 21.72203344 0 0 0 21.64881375 21.78711843z m86.61152532 0a21.72203344 21.72203344 0 0 0 21.65694937-21.78711843 21.72203344 21.72203344 0 0 0-21.65694937-21.78711844 21.72203344 21.72203344 0 0 0-21.64881375 21.78711844 21.72203344 21.72203344 0 0 0 21.64881375 21.78711843zM486.70644031 467.7423725a21.72203344 21.72203344 0 0 1 21.64881375 21.795255v174.29694844a21.72203344 21.72203344 0 0 1-21.64881375 21.78711937 21.72203344 21.72203344 0 0 1-21.65694844-21.78711937v-65.36135531H378.43796656v65.36135531a21.72203344 21.72203344 0 0 1-21.64881375 21.78711937 21.72203344 21.72203344 0 0 1-21.65694937-21.78711937V489.5376275a21.72203344 21.72203344 0 0 1 21.65694937-21.795255 21.72203344 21.72203344 0 0 1 21.64881375 21.795255v65.36135531H465.0576275v-65.36135531a21.72203344 21.72203344 0 0 1 21.65694844-21.795255z m173.21491594 0c11.95932188 0 21.665085 9.76271156 21.66508406 21.78711937a21.72203344 21.72203344 0 0 1-21.65694844 21.78711844h-21.65694937v152.51796563a21.72203344 21.72203344 0 0 1-21.64881375 21.78711937 21.72203344 21.72203344 0 0 1-21.65694938-21.78711937V511.31661031h-21.64881281a21.72203344 21.72203344 0 0 1-21.65694937-21.77898281 21.72203344 21.72203344 0 0 1 21.65694937-21.795255h86.60338969z m224.80271156 1.70847469a21.79525406 21.79525406 0 0 1 13.38305063 20.1274575v174.29694937a21.72203344 21.72203344 0 0 1-21.64881375 21.74644125 21.72203344 21.72203344 0 0 1-21.65694844-21.78711937v-121.70847469l-27.97830562 28.14915281a21.57559313 21.57559313 0 0 1-30.61423688 0l-28.01898281-28.14915281v121.70847469a21.72203344 21.72203344 0 0 1-21.65694938 21.78711937 21.72203344 21.72203344 0 0 1-21.64881375-21.78711937V489.5376275c0-8.80271156 5.28813563-16.77559313 13.38305063-20.13559406a21.68135625 21.68135625 0 0 1 23.59322062 4.71050906l49.62711844 49.97694937 49.62711844-49.93627125a21.38847469 21.38847469 0 0 1 23.60949187-4.71050906z m164.94915281 172.58847468a21.72203344 21.72203344 0 0 1 21.65694844 21.78711844 21.72203344 21.72203344 0 0 1-21.65694843 21.78711938h-86.61152532a21.72203344 21.72203344 0 0 1-21.64881375-21.78711938V489.52949188a21.72203344 21.72203344 0 0 1 21.64881375-21.78711938 21.72203344 21.72203344 0 0 1 21.65694844 21.78711938v152.50982999h64.95457688z" p-id="3585"></path></svg>

client/src/components/Icon/icons/file/markdown.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689324655973" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3734" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M512 601.09184948l-213.36752354-331.89890023A41.3976083 41.3976083 0 0 0 222.02342717 291.06546788v428.06065559H208.2150185a41.42522469 41.42522469 0 0 0 0 82.85044936h110.46726671a41.42522469 41.42522469 0 0 0 0-82.85044936h-13.80840868V432.10455041l172.27370066 267.99358607a41.42522469 41.42522469 0 0 0 69.70484562 0l172.27370066-267.99358607V719.12612347H705.31771479a41.42522469 41.42522469 0 0 0 0 82.85044936h110.46726671a41.42522469 41.42522469 0 0 0 0-82.85044936h-13.80840867V291.06546788a41.42522469 41.42522469 0 0 0-76.69189974-21.76205051L512 601.09184948z" p-id="3735"></path><path d="M14.8973037 180.59820247a165.70089876 165.70089876 0 0 1 165.70089877-165.70089877h662.80359506a165.70089876 165.70089876 0 0 1 165.70089877 165.70089877v662.80359506a165.70089876 165.70089876 0 0 1-165.70089877 165.70089877H180.59820247a165.70089876 165.70089876 0 0 1-165.70089877-165.70089877V180.59820247z m165.70089877-82.85044938a82.85044939 82.85044939 0 0 0-82.85044938 82.85044938v662.80359506a82.85044939 82.85044939 0 0 0 82.85044938 82.85044938h662.80359506a82.85044939 82.85044939 0 0 0 82.85044938-82.85044938V180.59820247a82.85044939 82.85044939 0 0 0-82.85044938-82.85044938H180.59820247z" p-id="3736"></path></svg>

client/src/components/Icon/icons/file/pdf.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689325086843" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1918" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M75.09333333 220.72888889h-36.40888888H75.09333333z m0 582.54222222h0z m194.18074112 194.18074112v-36.40888889 36.40888889z m485.4518511 0v0z m194.18074112-194.18074112h-36.40888889 36.40888889z m0-307.92211001h0zM480.10581333 26.54814777v-36.40888889V26.54814777zM269.27407445 26.54814777v0z m622.73763556 331.46652444l-25.72894891 25.72894891 25.72894891-25.72894891z m-274.57156779-274.57156664l25.72894777-25.72894891-25.72894777 25.72894891zM560.54518557 220.72888889h-36.4088889 36.4088889z m194.18073998 194.18074112v0zM38.68444445 220.72888889v582.54222222h72.81777777V220.72888889h-72.81777777zM269.27407445 1033.86074112h485.4518511v-72.81777778H269.27407445v72.81777778zM985.31555555 803.27111111v-307.92211001h-72.81777777V803.27111111h72.81777777zM480.10581333-9.86074112H269.27407445v72.81777778h210.83173888v-72.81777778z m437.68339001 342.14646557l-274.62011335-274.62011222-51.45789554 51.45789554 274.57156665 274.66865778 51.45789668-51.45789554zM480.10581333 62.95703666a157.77185223 157.77185223 0 0 1 111.55683556 46.21501667l51.45789668-51.45789667a230.58963001 230.58963001 0 0 0-163.01473224-67.57489778v72.81777778z m505.20974222 432.39196444c0-61.16693333-24.27259221-119.80951666-67.52635221-163.06327665l-51.45789667 51.45789667c29.56401778 29.61256334 46.16647111 69.75943111 46.16647111 111.60537998h72.81777777zM38.68444445 803.27111111A230.58963001 230.58963001 0 0 0 269.27407445 1033.86074112v-72.81777778A157.77185223 157.77185223 0 0 1 111.50222222 803.27111111h-72.81777777z m72.81777777-582.54222222A157.77185223 157.77185223 0 0 1 269.27407445 62.95703666v-72.81777778A230.58963001 230.58963001 0 0 0 38.68444445 220.72888889h72.81777777zM754.72592555 1033.86074112A230.58963001 230.58963001 0 0 0 985.31555555 803.27111111h-72.81777777A157.77185223 157.77185223 0 0 1 754.72592555 961.04296334v72.81777778zM524.13629667 26.54814777v194.18074112h72.81777778V26.54814777h-72.81777778zM754.72592555 451.3185189h194.18074112v-72.81777778h-194.18074112v72.81777778zM524.13629667 220.72888889A230.58963001 230.58963001 0 0 0 754.72592555 451.3185189v-72.81777778A157.77185223 157.77185223 0 0 1 596.95407445 220.72888889h-72.81777778z" p-id="1919"></path><path d="M241.94313443 594.76954112V803.27111111h42.08867556v-78.6432h27.42803001c19.07825778 0 33.64181333-0.97090333 43.69066667-3.0098011 7.37886777-1.60199111 14.61210112-4.8545189 21.74824334-9.80612779 7.18468779-5.00015445 13.1072-11.89356999 17.76753778-20.63170332 4.66033778-8.73813333 6.99050667-19.46661888 6.99050666-32.28254891 0-16.55390777-4.02924999-30.09801443-12.13629667-40.53522887a54.56478777 54.56478777 0 0 0-30.00092445-20.43752334c-7.76723001-2.08744334-24.46677333-3.15543666-50.00154112-3.15543666H241.89459001z m271.07631446 0h-76.9441189V803.27111111h79.1771978c15.53445888 0 28.01057223-1.45635555 37.28270222-4.36906666 12.42756779-4.02924999 22.28224-9.5634011 29.6125622-16.69954333 9.66049223-9.36922112 17.08790557-21.65115221 22.33078557-36.79725113 4.22343111-12.42756779 6.35941888-27.18530333 6.35941888-44.37029888 0-19.56371001-2.28162333-35.92343666-6.79632555-49.22481778a91.02222222 91.02222222 0 0 0-19.90352554-33.83599445 69.71088555 69.71088555 0 0 0-31.45728-19.22389333c-9.12649443-2.66998557-22.33078557-3.98070557-39.66141668-3.98070443z m133.98471111 0V803.27111111h42.04012999v-88.59496334h87.0415178v-35.29234887h-87.0415178v-49.32190891h100.87689558v-35.29234887H646.95561443zM283.98326557 689.18992555v-59.12803556h20.34043221q22.71914667 0 30.29219555 1.40781113a29.12711111 29.12711111 0 0 1 16.89372445 9.22358443c4.46615666 4.95160889 6.69923555 11.16539221 6.69923555 18.78698666a27.71930112 27.71930112 0 0 1-17.9617189 26.45712669c-5.53415111 2.18453333-16.6509989 3.25252779-33.25345109 3.25252665h-23.01041777z m194.13219555 78.93447111v-138.06250667h18.93262222c17.13644999 0 28.64165888 0.63108779 34.51562667 1.94180779q11.79648 2.57289443 19.51516444 9.85467221c5.09724445 4.8545189 9.07795001 11.55375445 11.94211556 20.1947978 2.81562112 8.64104334 4.27197667 20.97152 4.27197554 37.0885211s-1.45635555 28.88438557-4.27197554 38.30215111c-2.86416555 9.27212999-6.5536 15.97136555-11.11684779 20.0491611q-6.65068999 6.11669333-16.89372444 8.64104335a114.66372779 114.66372779 0 0 1-25.48622223 1.99035221h-31.40873443z" p-id="1920"></path></svg>

client/src/components/Icon/index.tsx

@@ -51,7 +51,10 @@ const map = {
   variable: require('./icons/modules/variable.svg').default,
   setTop: require('./icons/light/setTop.svg').default,
   fullScreenLight: require('./icons/light/fullScreen.svg').default,
-  voice: require('./icons/voice.svg').default
+  voice: require('./icons/voice.svg').default,
+  html: require('./icons/file/html.svg').default,
+  pdf: require('./icons/file/pdf.svg').default,
+  markdown: require('./icons/file/markdown.svg').default
 };
 
 export type IconName = keyof typeof map;

client/src/components/Layout/index.tsx

@@ -63,34 +63,39 @@ const Layout = ({ children }: { children: JSX.Element }) => {
   return (
     <>
       <Box h={'100%'} bg={'myWhite.600'}>
-        <Box h={'100%'} display={['none', 'block']}>
-          {pcUnShowLayoutRoute[router.pathname] ? (
-            <Auth>{children}</Auth>
-          ) : (
-            <>
-              <Box h={'100%'} position={'fixed'} left={0} top={0} w={'70px'}>
-                <Navbar unread={unread} />
-              </Box>
-              <Box h={'100%'} ml={'70px'} overflow={'overlay'}>
+        {isPc ? (
+          <>
+            {pcUnShowLayoutRoute[router.pathname] ? (
+              <Auth>{children}</Auth>
+            ) : (
+              <>
+                <Box h={'100%'} position={'fixed'} left={0} top={0} w={'70px'}>
+                  <Navbar unread={unread} />
+                </Box>
+                <Box h={'100%'} ml={'70px'} overflow={'overlay'}>
+                  <Auth>{children}</Auth>
+                </Box>
+              </>
+            )}
+          </>
+        ) : (
+          <>
+            <Box h={'100%'} display={['block', 'none']}>
+              {phoneUnShowLayoutRoute[router.pathname] || isChatPage ? (
                 <Auth>{children}</Auth>
-              </Box>
-            </>
-          )}
-        </Box>
-        <Box h={'100%'} display={['block', 'none']}>
-          {phoneUnShowLayoutRoute[router.pathname] || isChatPage ? (
-            <Auth>{children}</Auth>
-          ) : (
-            <Flex h={'100%'} flexDirection={'column'}>
-              <Box flex={'1 0 0'} h={0} overflow={'overlay'}>
-                <Auth>{children}</Auth>
-              </Box>
-              <Box h={'50px'} borderTop={'1px solid rgba(0,0,0,0.1)'}>
-                <NavbarPhone unread={unread} />
-              </Box>
-            </Flex>
-          )}
-        </Box>
+              ) : (
+                <Flex h={'100%'} flexDirection={'column'}>
+                  <Box flex={'1 0 0'} h={0} overflow={'overlay'}>
+                    <Auth>{children}</Auth>
+                  </Box>
+                  <Box h={'50px'} borderTop={'1px solid rgba(0,0,0,0.1)'}>
+                    <NavbarPhone unread={unread} />
+                  </Box>
+                </Flex>
+              )}
+            </Box>
+          </>
+        )}
       </Box>
       <Loading loading={loading} />
     </>

client/src/pages/_app.tsx

@@ -44,7 +44,7 @@ function App({ Component, pageProps }: AppProps) {
     <>
       <Head>
         <title>Fast GPT</title>
-        <meta name="description" content="Generated by Fast GPT" />
+        <meta name="description" content="Embedding + LLM, Build AI knowledge base" />
         <meta
           name="viewport"
           content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover"
@@ -67,7 +67,6 @@ function App({ Component, pageProps }: AppProps) {
       <QueryClientProvider client={queryClient}>
         <ChakraProvider theme={theme}>
           <ColorModeScript initialColorMode={theme.config.initialColorMode} />
-          {/* @ts-ignore */}
           <Layout>
             <Component {...pageProps} />
           </Layout>

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Flex, useTheme, Box } from '@chakra-ui/react';
+import { useGlobalStore } from '@/store/global';
+import MyIcon from '@/components/Icon';
+import Tag from '@/components/Tag';
+import Avatar from '@/components/Avatar';
+import ToolMenu from './ToolMenu';
+import { ChatItemType } from '@/types/chat';
+
+const ChatHeader = ({
+  title,
+  history,
+  appAvatar,
+  onOpenSlider
+}: {
+  title: string;
+  history: ChatItemType[];
+  appAvatar: string;
+  onOpenSlider: () => void;
+}) => {
+  const theme = useTheme();
+  const { isPc } = useGlobalStore();
+  return (
+    <Flex
+      alignItems={'center'}
+      py={[3, 5]}
+      px={[3, 5]}
+      borderBottom={theme.borders.base}
+      borderBottomColor={'gray.200'}
+      color={'myGray.900'}
+    >
+      {isPc ? (
+        <>
+          <Box mr={3} color={'myGray.1000'}>
+            {title}
+          </Box>
+          <Tag display={'flex'}>
+            <MyIcon name={'history'} w={'14px'} />
+            <Box ml={1}>{history.length}条记录</Box>
+          </Tag>
+          <Box flex={1} />
+        </>
+      ) : (
+        <>
+          <MyIcon name={'menu'} w={'20px'} h={'20px'} color={'myGray.900'} onClick={onOpenSlider} />
+          <Flex px={3} alignItems={'center'} flex={'1 0 0'} w={0} justifyContent={'center'}>
+            <Avatar src={appAvatar} w={'16px'} />
+            <Box ml={1} className="textEllipsis">
+              {title}
+            </Box>
+          </Flex>
+        </>
+      )}
+      {/* control */}
+      <ToolMenu history={history} />
+    </Flex>
+  );
+};
+
+export default ChatHeader;

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

@@ -7,7 +7,8 @@ import {
   Menu,
   MenuButton,
   MenuList,
-  MenuItem
+  MenuItem,
+  IconButton
 } from '@chakra-ui/react';
 import { useGlobalStore } from '@/store/global';
 import { useRouter } from 'next/router';
@@ -29,8 +30,7 @@ const ChatHistorySlider = ({
   activeHistoryId,
   onChangeChat,
   onDelHistory,
-  onSetHistoryTop,
-  onCloseSlider
+  onSetHistoryTop
 }: {
   appId?: string;
   appName: string;
@@ -40,7 +40,6 @@ const ChatHistorySlider = ({
   onChangeChat: (historyId?: string) => void;
   onDelHistory: (historyId: string) => void;
   onSetHistoryTop?: (e: { historyId: string; top: boolean }) => void;
-  onCloseSlider: () => void;
 }) => {
   const theme = useTheme();
   const router = useRouter();
@@ -180,6 +179,29 @@ const ChatHistorySlider = ({
           </Flex>
         ))}
       </Box>
+
+      {!isPc && appId && (
+        <Flex
+          mt={2}
+          borderTop={theme.borders.base}
+          alignItems={'center'}
+          cursor={'pointer'}
+          p={3}
+          onClick={() => router.push('/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>
+      )}
     </Flex>
   );
 };

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

@@ -21,7 +21,7 @@ const SliderApps = ({ appId }: { appId: string }) => {
         px={3}
         borderRadius={'md'}
         _hover={{ bg: 'myGray.200' }}
-        onClick={() => router.back()}
+        onClick={() => router.push('/app/list')}
       >
         <IconButton
           mr={3}

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

@@ -1,11 +1,29 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { useChatBox } from '@/components/ChatBox';
 import { ChatItemType } from '@/types/chat';
-import { Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react';
+import { Menu, MenuButton, MenuList, MenuItem, Box } from '@chakra-ui/react';
 import MyIcon from '@/components/Icon';
 
 const ToolMenu = ({ history }: { history: ChatItemType[] }) => {
   const { onExportChat } = useChatBox();
+  const menuList = useRef([
+    {
+      icon: 'shareLight',
+      label: '分享对话',
+      onClick: () => {}
+    },
+    {
+      icon: 'apiLight',
+      label: 'HTML导出',
+      onClick: () => onExportChat({ type: 'html', history })
+    },
+    {
+      icon: 'markdown',
+      label: 'Markdown导出',
+      onClick: () => onExportChat({ type: 'md', history })
+    },
+    { icon: 'pdf', label: 'PDF导出', onClick: () => onExportChat({ type: 'pdf', history }) }
+  ]);
   return (
     <Menu autoSelect={false} isLazy>
       <MenuButton
@@ -18,10 +36,13 @@ const ToolMenu = ({ history }: { history: ChatItemType[] }) => {
       >
         <MyIcon name={'more'} w={'14px'} p={2} />
       </MenuButton>
-      <MenuList color={'myGray.700'} minW={`90px !important`}>
-        <MenuItem onClick={() => onExportChat({ type: 'html', history })}>导出HTML格式</MenuItem>
-        <MenuItem onClick={() => onExportChat({ type: 'pdf', history })}>导出PDF格式</MenuItem>
-        <MenuItem onClick={() => onExportChat({ type: 'md', history })}>导出Markdown格式</MenuItem>
+      <MenuList color={'myGray.700'} minW={`120px !important`} zIndex={10}>
+        {menuList.current.map((item) => (
+          <MenuItem key={item.label} onClick={item.onClick} py={[2, 3]}>
+            <MyIcon name={item.icon as any} w={['14px', '16px']} />
+            <Box ml={[1, 2]}>{item.label}</Box>
+          </MenuItem>
+        ))}
       </MenuList>
     </Menu>
   );

client/src/pages/chat/index.tsx

@@ -1,11 +1,6 @@
 import React, { useCallback, useState, useRef } from 'react';
 import { useRouter } from 'next/router';
-import {
-  getInitChatSiteInfo,
-  delChatRecordByIndex,
-  delChatHistoryById,
-  putChatHistory
-} from '@/api/chat';
+import { getInitChatSiteInfo, delChatRecordByIndex, putChatHistory } from '@/api/chat';
 import {
   Box,
   Flex,
@@ -39,6 +34,7 @@ import ChatHistorySlider from './components/ChatHistorySlider';
 import SliderApps from './components/SliderApps';
 import Tag from '@/components/Tag';
 import ToolMenu from './components/ToolMenu';
+import ChatHeader from './components/ChatHeader';
 
 const Chat = () => {
   const router = useRouter();
@@ -59,6 +55,7 @@ const Chat = () => {
     history,
     loadHistory,
     updateHistory,
+    delHistory,
     chatData,
     setChatData
   } = useChatStore();
@@ -138,14 +135,6 @@ const Chat = () => {
     },
     [historyId, setChatData]
   );
-  // delete a history
-  const delHistoryById = useCallback(
-    async (historyId: string) => {
-      await delChatHistoryById(historyId);
-      loadHistory({ appId });
-    },
-    [appId, loadHistory]
-  );
 
   // get chat app info
   const loadChatInfo = useCallback(
@@ -232,7 +221,7 @@ const Chat = () => {
   useQuery(['loadHistory', appId], () => (appId ? loadHistory({ appId }) : null));
 
   return (
-    <Flex h={'100%'} flexDirection={['column', 'row']}>
+    <Flex h={'100%'}>
       {/* pc show myself apps */}
       {isPc && (
         <Box p={5} borderRight={theme.borders.base} w={'220px'} flexShrink={0}>
@@ -270,15 +259,22 @@ const Chat = () => {
                     appId
                   }
                 });
+                if (!isPc) {
+                  onCloseSlider();
+                }
               }}
-              onDelHistory={delHistoryById}
+              onDelHistory={delHistory}
               onSetHistoryTop={async (e) => {
                 try {
                   await putChatHistory(e);
-                  loadHistory({ appId });
+                  const historyItem = history.find((item) => item._id === e.historyId);
+                  if (!historyItem) return;
+                  updateHistory({
+                    ...historyItem,
+                    top: e.top
+                  });
                 } catch (error) {}
               }}
-              onCloseSlider={onCloseSlider}
             />
           )}
           {/* chat container */}
@@ -289,38 +285,14 @@ const Chat = () => {
             flex={'1 0 0'}
             flexDirection={'column'}
           >
-            <Flex
-              alignItems={'center'}
-              py={[3, 5]}
-              px={5}
-              borderBottom={theme.borders.base}
-              borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
-              color={useColorModeValue('myGray.900', 'white')}
-            >
-              {isPc ? (
-                <>
-                  <Box mr={3} color={'myGray.1000'}>
-                    {chatData.title}
-                  </Box>
-                  <Tag display={'flex'}>
-                    <MyIcon name={'history'} w={'14px'} />
-                    <Box ml={1}>{chatData.history.length}条记录</Box>
-                  </Tag>
-                </>
-              ) : (
-                <>
-                  <MyIcon
-                    name={'menu'}
-                    w={'20px'}
-                    h={'20px'}
-                    color={useColorModeValue('blackAlpha.700', 'white')}
-                    onClick={onOpenSlider}
-                  />
-                </>
-              )}
-              <Box flex={1} />
-              <ToolMenu history={chatData.history} />
-            </Flex>
+            {/* header */}
+            <ChatHeader
+              appAvatar={chatData.app.avatar}
+              title={chatData.app.name}
+              history={chatData.history}
+              onOpenSlider={onOpenSlider}
+            />
+
             {/* chat box */}
             <Box flex={1}>
               <ChatBox

client/src/pages/chat/share.tsx

@@ -1,16 +1,7 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useRouter } from 'next/router';
 import { initShareChatInfo } from '@/api/chat';
-import {
-  Box,
-  Flex,
-  useColorModeValue,
-  useDisclosure,
-  Drawer,
-  DrawerOverlay,
-  DrawerContent,
-  useTheme
-} from '@chakra-ui/react';
+import { Box, Flex, useDisclosure, Drawer, DrawerOverlay, DrawerContent } from '@chakra-ui/react';
 import { useToast } from '@/hooks/useToast';
 import { useGlobalStore } from '@/store/global';
 import { useQuery } from '@tanstack/react-query';
@@ -21,15 +12,12 @@ import { gptMessage2ChatType } from '@/utils/adapt';
 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';
+import ChatHeader from './components/ChatHeader';
 
-const ShareChat = () => {
-  const theme = useTheme();
+const ShareChat = ({ shareId, historyId }: { shareId: string; historyId: string }) => {
   const router = useRouter();
-  const { shareId = '', historyId } = router.query as { shareId: string; historyId: string };
   const { toast } = useToast();
   const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
   const { isPc } = useGlobalStore();
@@ -48,8 +36,6 @@ const ShareChat = () => {
 
   const startChat = useCallback(
     async ({ messages, controller, generatingMessage, variables }: StartChatFnProps) => {
-      console.log(messages, variables);
-
       const prompts = messages.slice(-shareChatData.maxContext - 2);
       const { responseText } = await streamFetch({
         data: {
@@ -103,8 +89,8 @@ const ShareChat = () => {
   );
 
   const loadAppInfo = useCallback(
-    async (shareId?: string) => {
-      if (!shareId) return null;
+    async (shareId: string, historyId: string) => {
+      if (!shareId || !historyId) return null;
       const history = shareChatHistory.find((item) => item._id === historyId) || defaultHistory;
 
       ChatBoxRef.current?.resetHistory(history.chats);
@@ -140,74 +126,52 @@ const ShareChat = () => {
 
       return history;
     },
-    [
-      delManyShareChatHistoryByShareId,
-      historyId,
-      setShareChatData,
-      shareChatData,
-      shareChatHistory,
-      toast
-    ]
+    [delManyShareChatHistoryByShareId, setShareChatData, shareChatData, shareChatHistory, toast]
   );
 
-  useQuery(['init', shareId, historyId], () => {
-    return loadAppInfo(shareId);
-  });
+  useEffect(() => {
+    loadAppInfo(shareId, historyId);
+  }, [shareId, historyId]);
 
   return (
     <PageContainer>
       <Flex h={'100%'} flexDirection={['column', 'row']}>
-        {/*  slider */}
-        {isPc ? (
-          <SideBar>
-            <ChatHistorySlider
-              appName={shareChatData.app.name}
-              appAvatar={shareChatData.app.avatar}
-              activeHistoryId={historyId}
-              history={shareChatHistory
-                .filter((item) => item.shareId === shareId)
-                .map((item) => ({
-                  id: item._id,
-                  title: item.title
-                }))}
-              onChangeChat={(historyId) => {
-                router.push({
-                  query: {
-                    historyId: historyId || '',
-                    shareId
-                  }
-                });
-              }}
-              onDelHistory={delOneShareHistoryByHistoryId}
-              onCloseSlider={onCloseSlider}
-            />
-          </SideBar>
-        ) : (
-          <Drawer isOpen={isOpenSlider} placement="left" size={'xs'} onClose={onCloseSlider}>
-            <DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
-            <DrawerContent maxWidth={'250px'}>
-              <ChatHistorySlider
-                appName={shareChatData.app.name}
-                appAvatar={shareChatData.app.avatar}
-                activeHistoryId={historyId}
-                history={shareChatHistory.map((item) => ({
-                  id: item._id,
-                  title: item.title
-                }))}
-                onChangeChat={(historyId) => {
-                  router.push({
-                    query: {
-                      historyId: historyId || '',
-                      shareId
-                    }
-                  });
-                }}
-                onDelHistory={delOneShareHistoryByHistoryId}
-                onCloseSlider={onCloseSlider}
-              />
-            </DrawerContent>
-          </Drawer>
+        {((children: React.ReactNode) => {
+          return isPc ? (
+            <SideBar>{children}</SideBar>
+          ) : (
+            <Drawer isOpen={isOpenSlider} placement="left" size={'xs'} onClose={onCloseSlider}>
+              <DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
+              <DrawerContent maxWidth={'250px'} boxShadow={'2px 0 10px rgba(0,0,0,0.15)'}>
+                {children}
+              </DrawerContent>
+            </Drawer>
+          );
+        })(
+          <ChatHistorySlider
+            appName={shareChatData.app.name}
+            appAvatar={shareChatData.app.avatar}
+            activeHistoryId={historyId}
+            history={shareChatHistory.map((item) => ({
+              id: item._id,
+              title: item.title
+            }))}
+            onChangeChat={(historyId) => {
+              router.push({
+                query: {
+                  historyId: historyId || '',
+                  shareId
+                }
+              });
+              if (!isPc) {
+                onCloseSlider();
+              }
+            }}
+            onDelHistory={delOneShareHistoryByHistoryId}
+            onCloseSlider={onCloseSlider}
+          />
         )}
+
         {/* chat container */}
         <Flex
           position={'relative'}
@@ -216,36 +180,13 @@ const ShareChat = () => {
           flex={'1 0 0'}
           flexDirection={'column'}
         >
-          <Flex
-            alignItems={'center'}
-            py={[3, 5]}
-            px={5}
-            borderBottom={theme.borders.base}
-            borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
-            color={useColorModeValue('myGray.900', 'white')}
-          >
-            {isPc ? (
-              <>
-                <Box mr={3} color={'myGray.1000'}>
-                  {shareChatData.history.title}
-                </Box>
-                <Tag display={'flex'}>
-                  <MyIcon name={'history'} w={'14px'} />
-                  <Box ml={1}>{shareChatData.history.chats.length}条记录</Box>
-                </Tag>
-              </>
-            ) : (
-              <>
-                <MyIcon
-                  name={'menu'}
-                  w={'20px'}
-                  h={'20px'}
-                  color={useColorModeValue('blackAlpha.700', 'white')}
-                  onClick={onOpenSlider}
-                />
-              </>
-            )}
-          </Flex>
+          {/* header */}
+          <ChatHeader
+            appAvatar={shareChatData.app.avatar}
+            title={shareChatData.history.title}
+            history={shareChatData.history.chats}
+            onOpenSlider={onOpenSlider}
+          />
           {/* chat box */}
           <Box flex={1}>
             <ChatBox
@@ -272,4 +213,13 @@ const ShareChat = () => {
   );
 };
 
+export async function getServerSideProps(context: any) {
+  const shareId = context?.query?.shareId || '';
+  const historyId = context?.query?.historyId || '';
+
+  return {
+    props: { shareId, historyId }
+  };
+}
+
 export default ShareChat;

client/src/store/chat.ts

@@ -4,12 +4,12 @@ import { immer } from 'zustand/middleware/immer';
 
 import { ChatHistoryItemType } from '@/types/chat';
 import type { InitChatResponse } from '@/api/response/chat';
-import { getChatHistory } from '@/api/chat';
-import { HUMAN_ICON } from '@/constants/chat';
+import { delChatHistoryById, getChatHistory } from '@/api/chat';
 
 type State = {
   history: ChatHistoryItemType[];
   loadHistory: (data: { appId?: string }) => Promise<null>;
+  delHistory(history: string): Promise<void>;
   updateHistory: (history: ChatHistoryItemType) => void;
   chatData: InitChatResponse;
   setChatData: (e: InitChatResponse | ((e: InitChatResponse) => InitChatResponse)) => void;
@@ -63,6 +63,12 @@ export const useChatStore = create<State>()(
           });
           return null;
         },
+        async delHistory(historyId) {
+          set((state) => {
+            state.history = state.history.filter((item) => item._id !== historyId);
+          });
+          await delChatHistoryById(historyId);
+        },
         updateHistory(history) {
           const index = get().history.findIndex((item) => item._id === history._id);
           set((state) => {