fix: phone ui

2023-07-14 18:27:08 +08:00
parent 077ee9504f
commit 877aab858b
14 changed files with 259 additions and 210 deletions
--- a/client/src/pages/_app.tsx
+++ b/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>
--- a/client/src/pages/chat/components/ChatHeader.tsx
+++ b/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;
--- a/client/src/pages/chat/components/ChatHistorySlider.tsx
+++ b/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>
  );
 };
--- a/client/src/pages/chat/components/SliderApps.tsx
+++ b/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}
--- a/client/src/pages/chat/components/ToolMenu.tsx
+++ b/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>
  );
--- a/client/src/pages/chat/index.tsx
+++ b/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
--- a/client/src/pages/chat/share.tsx
+++ b/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;