chat box

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

@@ -0,0 +1,160 @@
+import React from 'react';
+import { AddIcon } from '@chakra-ui/icons';
+import {
+  Box,
+  Button,
+  Flex,
+  useTheme,
+  Menu,
+  MenuButton,
+  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';
+
+const ChatHistorySlider = ({
+  appName,
+  appAvatar,
+  history,
+  activeHistoryId,
+  onChangeChat,
+  onDelHistory,
+  onCloseSlider
+}: {
+  appName: string;
+  appAvatar: string;
+  history: {
+    id: string;
+    title: string;
+  }[];
+  activeHistoryId: string;
+  onChangeChat: (historyId?: string) => void;
+  onDelHistory: (historyId: string) => void;
+  onCloseSlider: () => void;
+}) => {
+  const router = useRouter();
+  const theme = useTheme();
+  const { isPc } = useGlobalStore();
+
+  return (
+    <Flex
+      position={'relative'}
+      flexDirection={'column'}
+      w={'100%'}
+      h={'100%'}
+      bg={'white'}
+      px={[2, 5]}
+      borderRight={['', theme.borders.base]}
+    >
+      {isPc && (
+        <Flex pt={5} pb={2} alignItems={'center'} whiteSpace={'nowrap'}>
+          <Avatar src={appAvatar} />
+          <Box ml={2} fontWeight={'bold'} className={'textEllipsis'}>
+            {appName}
+          </Box>
+        </Flex>
+      )}
+      {/* 新对话 */}
+      <Box w={'100%'} h={'36px'} my={5}>
+        <Button
+          variant={'base'}
+          w={'100%'}
+          h={'100%'}
+          color={'myBlue.700'}
+          borderRadius={'xl'}
+          leftIcon={<MyIcon name={'edit'} w={'16px'} />}
+          overflow={'hidden'}
+          onClick={() => onChangeChat()}
+        >
+          新对话
+        </Button>
+      </Box>
+
+      {/* chat history */}
+      <Box flex={'1 0 0'} h={0} overflow={'overlay'}>
+        {history.map((item) => (
+          <Flex
+            position={'relative'}
+            key={item.id}
+            alignItems={'center'}
+            py={3}
+            px={4}
+            cursor={'pointer'}
+            userSelect={'none'}
+            borderRadius={'lg'}
+            mb={2}
+            _hover={{
+              bg: 'myGray.100',
+              '& .more': {
+                display: 'block'
+              }
+            }}
+            {...(item.id === activeHistoryId
+              ? {
+                  backgroundColor: 'myBlue.100 !important',
+                  color: 'myBlue.700'
+                }
+              : {
+                  onClick: () => {
+                    onChangeChat(item.id);
+                  }
+                })}
+          >
+            <MyIcon name={item.id === activeHistoryId ? 'chatFill' : 'chatLight'} w={'16px'} />
+            <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' }}
+                    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>
+  );
+};
+
+export default ChatHistorySlider;

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

@@ -1,212 +0,0 @@
-import React, { useCallback, useRef, useState } 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 { useRouter } from 'next/router';
-import { formatTimeToChatTime } from '@/utils/tools';
-import MyIcon from '@/components/Icon';
-import type { ShareChatHistoryItemType, ExportChatType } from '@/types/chat';
-import { useChatStore } from '@/store/chat';
-import { useGlobalStore } from '@/store/global';
-
-import styles from '../index.module.scss';
-
-const PcSliderBar = ({
-  onclickDelHistory,
-  onclickExportChat,
-  onCloseSlider
-}: {
-  onclickDelHistory: (historyId: string) => void;
-  onclickExportChat: (type: ExportChatType) => void;
-  onCloseSlider: () => void;
-}) => {
-  const router = useRouter();
-  const { shareId = '', historyId = '' } = router.query as {
-    shareId: string;
-    historyId: string;
-  };
-  const theme = useTheme();
-  const { isPc } = useGlobalStore();
-
-  const ContextMenuRef = useRef(null);
-  const onclickContext = useRef(false);
-
-  const [contextMenuData, setContextMenuData] = useState<{
-    left: number;
-    top: number;
-    history: ShareChatHistoryItemType;
-  }>();
-
-  const { shareChatHistory } = useChatStore();
-
-  // 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: ShareChatHistoryItemType) => {
-      e.preventDefault(); // 阻止默认右键菜单
-
-      if (!isPc) return;
-      onclickContext.current = true;
-
-      setContextMenuData({
-        left: e.clientX,
-        top: e.clientY,
-        history
-      });
-    },
-    [isPc]
-  );
-
-  const replaceChatPage = useCallback(
-    ({ hId = '', shareId }: { hId?: string; shareId: string }) => {
-      if (hId === historyId) return;
-
-      router.replace(`/chat/share?shareId=${shareId}&historyId=${hId}`);
-      !isPc && onCloseSlider();
-    },
-    [historyId, isPc, onCloseSlider, router]
-  );
-
-  return (
-    <Flex
-      position={'relative'}
-      flexDirection={'column'}
-      w={'100%'}
-      h={'100%'}
-      bg={'white'}
-      borderRight={['', theme.borders.base]}
-    >
-      {/* 新对话 */}
-      <Box
-        className={styles.newChat}
-        zIndex={1000}
-        w={'90%'}
-        h={'40px'}
-        my={5}
-        mx={'auto'}
-        position={'relative'}
-      >
-        <Button
-          variant={'base'}
-          w={'100%'}
-          h={'100%'}
-          leftIcon={<AddIcon />}
-          onClick={() => replaceChatPage({ shareId })}
-        >
-          新对话
-        </Button>
-      </Box>
-
-      {/* chat history */}
-      <Box flex={'1 0 0'} h={0} overflow={'overlay'}>
-        {shareChatHistory.map((item) => (
-          <Flex
-            position={'relative'}
-            key={item._id}
-            alignItems={'center'}
-            py={3}
-            pr={[0, 3]}
-            pl={[6, 3]}
-            cursor={'pointer'}
-            transition={'background-color .2s ease-in'}
-            borderLeft={['none', '5px solid transparent']}
-            userSelect={'none'}
-            _hover={{
-              backgroundColor: ['', '#dee0e3']
-            }}
-            {...(item._id === historyId
-              ? {
-                  backgroundColor: '#eff0f1',
-                  borderLeftColor: 'myBlue.600 !important'
-                }
-              : {})}
-            onClick={() => replaceChatPage({ hId: item._id, shareId: item.shareId })}
-            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={(e) => {
-                  e.stopPropagation();
-                  onclickDelHistory(item._id);
-                  item._id === historyId && replaceChatPage({ shareId: item.shareId });
-                }}
-              />
-            )}
-          </Flex>
-        ))}
-        {shareChatHistory.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={() => {
-                  onclickDelHistory(contextMenuData.history._id);
-                  contextMenuData.history._id === historyId && replaceChatPage({ shareId });
-                }}
-              >
-                删除记录
-              </MenuItem>
-              <MenuItem onClick={() => onclickExportChat('html')}>导出HTML格式</MenuItem>
-              <MenuItem onClick={() => onclickExportChat('pdf')}>导出PDF格式</MenuItem>
-              <MenuItem onClick={() => onclickExportChat('md')}>导出Markdown格式</MenuItem>
-            </MenuList>
-          </Menu>
-        </Box>
-      )}
-    </Flex>
-  );
-};
-
-export default PcSliderBar;

client/src/pages/chat/share.tsx

@@ -1,391 +1,278 @@
-import React, { useCallback, useState, useRef, useMemo, useEffect, MouseEvent } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { useRouter } from 'next/router';
 import { initShareChatInfo } from '@/api/chat';
-import type { ChatSiteItemType, ExportChatType } from '@/types/chat';
 import {
-  Textarea,
   Box,
   Flex,
   useColorModeValue,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalBody,
-  ModalCloseButton,
   useDisclosure,
   Drawer,
   DrawerOverlay,
   DrawerContent,
-  Card,
-  useOutsideClick,
-  useTheme,
-  Input,
-  ModalFooter,
-  ModalHeader
+  useTheme
 } from '@chakra-ui/react';
 import { useToast } from '@/hooks/useToast';
 import { useGlobalStore } from '@/store/global';
 import { useQuery } from '@tanstack/react-query';
-import dynamic from 'next/dynamic';
-import { useCopyData, voiceBroadcast, hasVoiceApi } from '@/utils/tools';
 import { streamFetch } from '@/api/fetch';
-import MyIcon from '@/components/Icon';
-import { throttle } from 'lodash';
-import { Types } from 'mongoose';
-import { useChatStore } from '@/store/chat';
-import { useLoading } from '@/hooks/useLoading';
-import { fileDownload } from '@/utils/file';
-import { htmlTemplate } from '@/constants/common';
-import { useUserStore } from '@/store/user';
-import Loading from '@/components/Loading';
-import Markdown from '@/components/Markdown';
+import { useShareChatStore, defaultHistory } from '@/store/shareChat';
 import SideBar from '@/components/SideBar';
-import Avatar from '@/components/Avatar';
-import Empty from './components/Empty';
-import { HUMAN_ICON } from '@/constants/chat';
-import MyTooltip from '@/components/MyTooltip';
+import { gptMessage2ChatType } from '@/utils/adapt';
+import ChatHistorySlider from './components/ChatHistorySlider';
+import { getErrText } from '@/utils/tools';
 
-const ShareHistory = dynamic(() => import('./components/ShareHistory'), {
-  loading: () => <Loading fixed={false} />,
-  ssr: false
-});
+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 styles from './index.module.scss';
-import { adaptChatItem_openAI } from '@/utils/plugin/openai';
-import { useChat } from '@/hooks/useChat';
-
-const textareaMinH = '22px';
-
-const Chat = () => {
+const ShareChat = () => {
+  const theme = useTheme();
   const router = useRouter();
   const { shareId = '', historyId } = router.query as { shareId: string; historyId: string };
-  const theme = useTheme();
+  const { toast } = useToast();
+  const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
+  const { isPc } = useGlobalStore();
 
-  const ContextMenuRef = useRef(null);
-  const PhoneContextShow = useRef(false);
-
-  const [messageContextMenuData, setMessageContextMenuData] = useState<{
-    // message messageContextMenuData
-    left: number;
-    top: number;
-    message: ChatSiteItemType;
-  }>();
+  const ChatBoxRef = useRef<ComponentRef>(null);
 
   const {
-    password,
-    setPassword,
-    shareChatHistory,
-    delShareHistoryById,
-    setShareChatHistory,
     shareChatData,
     setShareChatData,
-    delShareChatHistoryItemById,
-    delShareChatHistory
-  } = useChatStore();
-
-  const isChatting = useMemo(
-    () => shareChatData.history[shareChatData.history.length - 1]?.status === 'loading',
-    [shareChatData.history]
-  );
-
-  const { ChatBox, ChatInput, ChatBoxParentRef, setChatHistory, scrollToBottom } = useChat({
-    appId: shareChatData.appId
-  });
-
-  const { toast } = useToast();
-  const { copyData } = useCopyData();
-  const { isPc } = useGlobalStore();
-  const { Loading, setIsLoading } = useLoading();
-  const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
-  const {
-    isOpen: isOpenPassword,
-    onClose: onClosePassword,
-    onOpen: onOpenPassword
-  } = useDisclosure();
-
-  // close contextMenu
-  useOutsideClick({
-    ref: ContextMenuRef,
-    handler: () => {
-      // 移动端长按后会将其设置为true，松手时候也会触发一次，松手的时候需要忽略一次。
-      if (PhoneContextShow.current) {
-        PhoneContextShow.current = false;
-      } else {
-        messageContextMenuData &&
-          setTimeout(() => {
-            setMessageContextMenuData(undefined);
-            window.getSelection?.()?.empty?.();
-            window.getSelection?.()?.removeAllRanges?.();
-            document?.getSelection()?.empty();
-          });
-      }
-    }
-  });
-
-  // export chat data
-  const onclickExportChat = useCallback(
-    (type: ExportChatType) => {
-      const getHistoryHtml = () => {
-        const historyDom = document.getElementById('history');
-        if (!historyDom) return;
-        const dom = Array.from(historyDom.children).map((child, i) => {
-          const avatar = `<img src="${
-            child.querySelector<HTMLImageElement>('.avatar')?.src
-          }" alt="" />`;
-
-          const chatContent = child.querySelector<HTMLDivElement>('.markdown');
-
-          if (!chatContent) {
-            return '';
-          }
-
-          const chatContentClone = chatContent.cloneNode(true) as HTMLDivElement;
-
-          const codeHeader = chatContentClone.querySelectorAll('.code-header');
-          codeHeader.forEach((childElement: any) => {
-            childElement.remove();
-          });
-
-          return `<div class="chat-item">
-          ${avatar}
-          ${chatContentClone.outerHTML}
-        </div>`;
-        });
-
-        const html = htmlTemplate.replace('{{CHAT_CONTENT}}', dom.join('\n'));
-        return html;
-      };
-
-      const map: Record<ExportChatType, () => void> = {
-        md: () => {
-          fileDownload({
-            text: shareChatData.history.map((item) => item.value).join('\n\n'),
-            type: 'text/markdown',
-            filename: 'chat.md'
-          });
-        },
-        html: () => {
-          const html = getHistoryHtml();
-          html &&
-            fileDownload({
-              text: html,
-              type: 'text/html',
-              filename: '聊天记录.html'
-            });
-        },
-        pdf: () => {
-          const html = getHistoryHtml();
-
-          html &&
-            // @ts-ignore
-            html2pdf(html, {
-              margin: 0,
-              filename: `聊天记录.pdf`
-            });
-        }
-      };
-
-      map[type]();
-    },
-    [shareChatData.history]
-  );
-
-  // 获取对话信息
-  const loadChatInfo = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const res = await initShareChatInfo({
-        shareId,
-        password
-      });
-
-      const history = shareChatHistory.find((item) => item._id === historyId)?.chats || [];
-
-      setShareChatData({
-        ...res,
-        history
-      });
-
-      onClosePassword();
-
-      history.length > 0 &&
-        setTimeout(() => {
-          scrollToBottom();
-        }, 500);
-    } catch (e: any) {
-      toast({
-        status: 'error',
-        title: typeof e === 'string' ? e : e?.message || '初始化异常'
-      });
-      if (e?.code === 501) {
-        onOpenPassword();
-      } else {
-        delShareChatHistory(shareId);
-        router.replace(`/chat/share`);
-      }
-    }
-    setIsLoading(false);
-    return null;
-  }, [
-    setIsLoading,
-    shareId,
-    password,
-    setShareChatData,
     shareChatHistory,
-    onClosePassword,
-    historyId,
-    scrollToBottom,
-    toast,
-    onOpenPassword,
-    delShareChatHistory,
-    router
-  ]);
+    saveChatResponse,
+    delShareChatHistoryItemById,
+    delOneShareHistoryByHistoryId,
+    delManyShareChatHistoryByShareId
+  } = useShareChatStore();
+
+  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: {
+          history,
+          messages: prompts,
+          variables,
+          shareId
+        },
+        onMessage: generatingMessage,
+        abortSignal: controller
+      });
+
+      const result = {
+        question: messages[messages.length - 2].content || '',
+        answer: responseText
+      };
+
+      prompts[prompts.length - 1].content = responseText;
+
+      /* save chat */
+      const { newChatId } = saveChatResponse({
+        historyId,
+        prompts: gptMessage2ChatType(prompts).map((item) => ({
+          ...item,
+          status: 'finish'
+        })),
+        variables,
+        shareId
+      });
+
+      if (newChatId) {
+        router.replace({
+          query: {
+            shareId,
+            historyId: newChatId
+          }
+        });
+      }
+
+      window.top?.postMessage(
+        {
+          type: 'shareChatFinish',
+          data: result
+        },
+        '*'
+      );
+
+      return { responseText };
+    },
+    [historyId, router, saveChatResponse, shareChatData.maxContext, shareId]
+  );
+
+  const loadAppInfo = useCallback(
+    async (shareId?: string) => {
+      if (!shareId) return null;
+      const history = shareChatHistory.find((item) => item._id === historyId) || defaultHistory;
+
+      ChatBoxRef.current?.resetHistory(history.chats);
+      ChatBoxRef.current?.resetVariables(history.variables);
+
+      try {
+        const chatData = await (async () => {
+          if (shareChatData.app.name === '') {
+            return initShareChatInfo({
+              shareId
+            });
+          }
+          return shareChatData;
+        })();
+
+        setShareChatData({
+          ...chatData,
+          history
+        });
+      } catch (e: any) {
+        toast({
+          status: 'error',
+          title: getErrText(e, '获取应用失败')
+        });
+        if (e?.code === 501) {
+          delManyShareChatHistoryByShareId(shareId);
+        }
+      }
+
+      return history;
+    },
+    [
+      delManyShareChatHistoryByShareId,
+      historyId,
+      setShareChatData,
+      shareChatData,
+      shareChatHistory,
+      toast
+    ]
+  );
 
-  // 初始化聊天框
   useQuery(['init', shareId, historyId], () => {
-    if (!shareId) {
-      return null;
-    }
-
-    if (!historyId) {
-      return router.replace(`/chat/share?shareId=${shareId}&historyId=${new Types.ObjectId()}`);
-    }
-
-    return loadChatInfo();
+    return loadAppInfo(shareId);
   });
 
   return (
-    <Flex h={'100%'} flexDirection={['column', 'row']} backgroundColor={'#fdfdfd'}>
-      {/* pc always show history.  */}
-      {isPc && (
-        <SideBar>
-          <ShareHistory
-            onclickDelHistory={delShareHistoryById}
-            onclickExportChat={onclickExportChat}
-            onCloseSlider={onCloseSlider}
-          />
-        </SideBar>
-      )}
-
-      {/* 聊天内容 */}
-      <Flex
-        position={'relative'}
-        h={[0, '100%']}
-        w={['100%', 0]}
-        flex={'1 0 0'}
-        flexDirection={'column'}
-      >
-        {/* chat header */}
-        <Flex
-          alignItems={'center'}
-          justifyContent={'space-between'}
-          py={[3, 5]}
-          px={5}
-          borderBottom={'1px solid '}
-          borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
-          color={useColorModeValue('myGray.900', 'white')}
-        >
-          {!isPc && (
-            <MyIcon
-              name={'menu'}
-              w={'20px'}
-              h={'20px'}
-              color={useColorModeValue('blackAlpha.700', 'white')}
-              onClick={onOpenSlider}
-            />
-          )}
-          <Box lineHeight={1.2} textAlign={'center'} px={3} fontSize={['sm', 'md']}>
-            {shareChatData.model.name}
-            {shareChatData.history.length > 0 ? ` (${shareChatData.history.length})` : ''}
-          </Box>
-          {shareChatData.history.length > 0 ? (
-            <Menu autoSelect={false}>
-              <MenuButton lineHeight={1}>
-                <MyIcon
-                  name={'more'}
-                  w={'16px'}
-                  h={'16px'}
-                  color={useColorModeValue('blackAlpha.700', 'white')}
-                />
-              </MenuButton>
-              <MenuList minW={`90px !important`}>
-                <MenuItem onClick={() => router.replace(`/chat/share?shareId=${shareId}`)}>
-                  新对话
-                </MenuItem>
-                <MenuItem
-                  onClick={() => {
-                    delShareHistoryById(historyId);
-                    router.replace(`/chat/share?shareId=${shareId}`);
-                  }}
-                >
-                  删除记录
-                </MenuItem>
-                <MenuItem onClick={() => onclickExportChat('html')}>导出HTML格式</MenuItem>
-                <MenuItem onClick={() => onclickExportChat('pdf')}>导出PDF格式</MenuItem>
-                <MenuItem onClick={() => onclickExportChat('md')}>导出Markdown格式</MenuItem>
-              </MenuList>
-            </Menu>
-          ) : (
-            <Box w={'16px'} h={'16px'} />
-          )}
-        </Flex>
-        {/* chat content box */}
-        <Box ref={ChatBoxParentRef} flex={1}>
-          <ChatBox appAvatar={shareChatData.model.avatar} />
-        </Box>
-        {/* 发送区 */}
-        <ChatInput />
-
-        <Loading fixed={false} />
-      </Flex>
-
-      {/* phone slider */}
-      {!isPc && (
-        <Drawer isOpen={isOpenSlider} placement="left" size={'xs'} onClose={onCloseSlider}>
-          <DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
-          <DrawerContent maxWidth={'250px'}>
-            <ShareHistory
-              onclickDelHistory={delShareHistoryById}
-              onclickExportChat={onclickExportChat}
+    <PageContainer>
+      <Flex h={'100%'} flexDirection={['column', 'row']} backgroundColor={'#fdfdfd'}>
+        {/*  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}
             />
-          </DrawerContent>
-        </Drawer>
-      )}
-      {/* password input */}
-      {
-        <Modal isOpen={isOpenPassword} onClose={onClosePassword}>
-          <ModalOverlay />
-          <ModalContent>
-            <ModalCloseButton />
-            <ModalHeader>安全密码</ModalHeader>
-            <ModalBody>
-              <Flex alignItems={'center'}>
-                <Box flex={'0 0 70px'}>密码：</Box>
-                <Input
-                  type="password"
-                  autoFocus
-                  placeholder="使用密码,无密码直接点确认"
-                  onBlur={(e) => setPassword(e.target.value)}
+          </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>
+        )}
+        {/* chat container */}
+        <Flex
+          position={'relative'}
+          h={[0, '100%']}
+          w={['100%', 0]}
+          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>
-            </ModalBody>
-            <ModalFooter>
-              <Button variant={'base'} mr={3} onClick={onClosePassword}>
-                取消
-              </Button>
-              <Button onClick={loadChatInfo}>确定</Button>
-            </ModalFooter>
-          </ModalContent>
-        </Modal>
-      }
-    </Flex>
+              </>
+            )}
+          </Flex>
+          {/* chat box */}
+          <Box
+            pt={[0, 5]}
+            flex={1}
+            maxW={['100%', '1000px', '1200px']}
+            px={[0, 5]}
+            w={'100%'}
+            mx={'auto'}
+          >
+            <ChatBox
+              ref={ChatBoxRef}
+              appAvatar={shareChatData.app.avatar}
+              variableModules={shareChatData.app.variableModules}
+              welcomeText={shareChatData.app.welcomeText}
+              onUpdateVariable={(e) => {
+                setShareChatData((state) => ({
+                  ...state,
+                  history: {
+                    ...state.history,
+                    variables: e
+                  }
+                }));
+              }}
+              onStartChat={startChat}
+              onDelMessage={({ index }) => delShareChatHistoryItemById({ historyId, index })}
+            />
+          </Box>
+        </Flex>
+      </Flex>
+    </PageContainer>
   );
 };
 
-export default Chat;
+export default ShareChat;