feat: kb crud

2023-05-17 19:30:43 +08:00
parent 021add2af4
commit a79429fdcd
57 changed files with 1186 additions and 788 deletions
--- a/src/pages/chat/components/History.tsx
+++ b/src/pages/chat/components/History.tsx
@@ -20,24 +20,22 @@ import { formatTimeToChatTime } from '@/utils/tools';
 import MyIcon from '@/components/Icon';
 import type { HistoryItemType, ExportChatType } from '@/types/chat';
 import { useChatStore } from '@/store/chat';
-import { useScreen } from '@/hooks/useScreen';
 import ModelList from './ModelList';
+import { useGlobalStore } from '@/store/global';

 import styles from '../index.module.scss';

 const PcSliderBar = ({
-  isPcDevice,
  onclickDelHistory,
  onclickExportChat
 }: {
-  isPcDevice: boolean;
  onclickDelHistory: (historyId: string) => Promise<void>;
  onclickExportChat: (type: ExportChatType) => void;
 }) => {
  const router = useRouter();
  const { modelId = '', chatId = '' } = router.query as { modelId: string; chatId: string };
  const theme = useTheme();
-  const { isPc } = useScreen({ defaultIsPc: isPcDevice });
+  const { isPc } = useGlobalStore();

  const ContextMenuRef = useRef(null);

--- a/src/pages/chat/components/ShareHistory.tsx
+++ b/src/pages/chat/components/ShareHistory.tsx
@@ -17,17 +17,15 @@ import { formatTimeToChatTime } from '@/utils/tools';
 import MyIcon from '@/components/Icon';
 import type { ShareChatHistoryItemType, ExportChatType } from '@/types/chat';
 import { useChatStore } from '@/store/chat';
-import { useScreen } from '@/hooks/useScreen';
+import { useGlobalStore } from '@/store/global';

 import styles from '../index.module.scss';

 const PcSliderBar = ({
-  isPcDevice,
  onclickDelHistory,
  onclickExportChat,
  onCloseSlider
 }: {
-  isPcDevice: boolean;
  onclickDelHistory: (historyId: string) => void;
  onclickExportChat: (type: ExportChatType) => void;
  onCloseSlider: () => void;
@@ -35,7 +33,7 @@ const PcSliderBar = ({
  const router = useRouter();
  const { shareId = '', historyId = '' } = router.query as { shareId: string; historyId: string };
  const theme = useTheme();
-  const { isPc } = useScreen({ defaultIsPc: isPcDevice });
+  const { isPc } = useGlobalStore();

  const ContextMenuRef = useRef(null);

--- a/src/pages/chat/index.tsx
+++ b/src/pages/chat/index.tsx
@@ -33,7 +33,7 @@ import {
  useTheme
 } from '@chakra-ui/react';
 import { useToast } from '@/hooks/useToast';
-import { useScreen } from '@/hooks/useScreen';
+import { useGlobalStore } from '@/store/global';
 import { useQuery } from '@tanstack/react-query';
 import dynamic from 'next/dynamic';
 import { useCopyData, voiceBroadcast, hasVoiceApi } from '@/utils/tools';
@@ -50,6 +50,7 @@ import { htmlTemplate } from '@/constants/common';
 import { useUserStore } from '@/store/user';
 import Loading from '@/components/Loading';
 import Markdown from '@/components/Markdown';
+import SideBar from '@/components/SideBar';
 import Empty from './components/Empty';

 const PhoneSliderBar = dynamic(() => import('./components/PhoneSliderBar'), {
@@ -64,15 +65,7 @@ import styles from './index.module.scss';

 const textareaMinH = '22px';

-const Chat = ({
-  modelId,
-  chatId,
-  isPcDevice
-}: {
-  modelId: string;
-  chatId: string;
-  isPcDevice: boolean;
-}) => {
+const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
  const router = useRouter();
  const theme = useTheme();

@@ -92,7 +85,6 @@ const Chat = ({
    top: number;
    message: ChatSiteItemType;
  }>();
-  const [foldSliderBar, setFoldSlideBar] = useState(false);

  const {
    lastChatModelId,
@@ -113,7 +105,7 @@ const Chat = ({

  const { toast } = useToast();
  const { copyData } = useCopyData();
-  const { isPc } = useScreen({ defaultIsPc: isPcDevice });
+  const { isPc } = useGlobalStore();
  const { Loading, setIsLoading } = useLoading();
  const { userInfo } = useUserStore();
  const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
@@ -481,7 +473,7 @@ const Chat = ({

      navigator.vibrate?.(50); // 震动 50 毫秒

-      if (!isPcDevice) {
+      if (!isPc) {
        PhoneContextShow.current = true;
      }

@@ -493,7 +485,7 @@ const Chat = ({

      return false;
    },
-    [isPcDevice]
+    [isPc]
  );

  // 获取对话信息
@@ -636,61 +628,9 @@ const Chat = ({
    >
      {/* pc always show history.  */}
      {(isPc || !modelId) && (
-        <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={foldSliderBar ? 'hidden' : 'visible'}
-          >
-            <History
-              onclickDelHistory={onclickDelHistory}
-              onclickExportChat={onclickExportChat}
-              isPcDevice={isPcDevice}
-            />
-          </Box>
-        </Box>
+        <SideBar>
+          <History onclickDelHistory={onclickDelHistory} onclickExportChat={onclickExportChat} />
+        </SideBar>
      )}

      {/* 聊天内容 */}
@@ -906,7 +846,7 @@ const Chat = ({
                  }}
                  onKeyDown={(e) => {
                    // 触发快捷发送
-                    if (isPcDevice && e.keyCode === 13 && !e.shiftKey) {
+                    if (isPc && e.keyCode === 13 && !e.shiftKey) {
                      sendPrompt();
                      e.preventDefault();
                    }
@@ -1008,8 +948,7 @@ const Chat = ({
 Chat.getInitialProps = ({ query, req }: any) => {
  return {
    modelId: query?.modelId || '',
-    chatId: query?.chatId || '',
-    isPcDevice: !/Mobile/.test(req?.headers?.['user-agent'])
+    chatId: query?.chatId || ''
  };
 };

--- a/src/pages/chat/share.tsx
+++ b/src/pages/chat/share.tsx
@@ -31,7 +31,7 @@ import {
  ModalHeader
 } from '@chakra-ui/react';
 import { useToast } from '@/hooks/useToast';
-import { useScreen } from '@/hooks/useScreen';
+import { useGlobalStore } from '@/store/global';
 import { useQuery } from '@tanstack/react-query';
 import dynamic from 'next/dynamic';
 import { useCopyData, voiceBroadcast, hasVoiceApi } from '@/utils/tools';
@@ -47,6 +47,7 @@ import { htmlTemplate } from '@/constants/common';
 import { useUserStore } from '@/store/user';
 import Loading from '@/components/Loading';
 import Markdown from '@/components/Markdown';
+import SideBar from '@/components/SideBar';
 import Empty from './components/Empty';

 const ShareHistory = dynamic(() => import('./components/ShareHistory'), {
@@ -58,15 +59,7 @@ import styles from './index.module.scss';

 const textareaMinH = '22px';

-const Chat = ({
-  shareId,
-  historyId,
-  isPcDevice
-}: {
-  shareId: string;
-  historyId: string;
-  isPcDevice: boolean;
-}) => {
+const Chat = ({ shareId, historyId }: { shareId: string; historyId: string }) => {
  const router = useRouter();
  const theme = useTheme();

@@ -87,7 +80,6 @@ const Chat = ({
    top: number;
    message: ChatSiteItemType;
  }>();
-  const [foldSliderBar, setFoldSlideBar] = useState(false);

  const {
    password,
@@ -108,7 +100,7 @@ const Chat = ({

  const { toast } = useToast();
  const { copyData } = useCopyData();
-  const { isPc } = useScreen({ defaultIsPc: isPcDevice });
+  const { isPc } = useGlobalStore();
  const { Loading, setIsLoading } = useLoading();
  const { userInfo } = useUserStore();
  const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
@@ -426,7 +418,7 @@ const Chat = ({

      navigator.vibrate?.(50); // 震动 50 毫秒

-      if (!isPcDevice) {
+      if (!isPc) {
        PhoneContextShow.current = true;
      }

@@ -438,7 +430,7 @@ const Chat = ({

      return false;
    },
-    [isPcDevice]
+    [isPc]
  );

  // 获取对话信息
@@ -543,57 +535,13 @@ const Chat = ({
    >
      {/* pc always show history.  */}
      {isPc && (
-        <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'}>
-            <ShareHistory
-              onclickDelHistory={delShareHistoryById}
-              onclickExportChat={onclickExportChat}
-              onCloseSlider={onCloseSlider}
-              isPcDevice={isPcDevice}
-            />
-          </Box>
-        </Box>
+        <SideBar>
+          <ShareHistory
+            onclickDelHistory={delShareHistoryById}
+            onclickExportChat={onclickExportChat}
+            onCloseSlider={onCloseSlider}
+          />
+        </SideBar>
      )}

      {/* 聊天内容 */}
@@ -623,13 +571,7 @@ const Chat = ({
              onClick={onOpenSlider}
            />
          )}
-          <Box
-            cursor={'pointer'}
-            lineHeight={1.2}
-            textAlign={'center'}
-            px={3}
-            fontSize={['sm', 'md']}
-          >
+          <Box lineHeight={1.2} textAlign={'center'} px={3} fontSize={['sm', 'md']}>
            {shareChatData.model.name}
            {shareChatData.history.length > 0 ? ` (${shareChatData.history.length})` : ''}
          </Box>
@@ -797,7 +739,7 @@ const Chat = ({
              }}
              onKeyDown={(e) => {
                // 触发快捷发送
-                if (isPcDevice && e.keyCode === 13 && !e.shiftKey) {
+                if (isPc && e.keyCode === 13 && !e.shiftKey) {
                  sendPrompt();
                  e.preventDefault();
                }
@@ -854,7 +796,6 @@ const Chat = ({
              onclickDelHistory={delShareHistoryById}
              onclickExportChat={onclickExportChat}
              onCloseSlider={onCloseSlider}
-              isPcDevice={isPcDevice}
            />
          </DrawerContent>
        </Drawer>
@@ -924,8 +865,7 @@ const Chat = ({
 Chat.getInitialProps = ({ query, req }: any) => {
  return {
    shareId: query?.shareId || '',
-    historyId: query?.historyId || '',
-    isPcDevice: !/Mobile/.test(req?.headers?.['user-agent'])
+    historyId: query?.historyId || ''
  };
 };