new framwork

client/src/pages/chat/share.tsx

@@ -0,0 +1,850 @@
+import React, { useCallback, useState, useRef, useMemo, useEffect, MouseEvent } 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,
+  Tooltip,
+  useOutsideClick,
+  useTheme,
+  Input,
+  ModalFooter,
+  ModalHeader
+} 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 SideBar from '@/components/SideBar';
+import Avatar from '@/components/Avatar';
+import Empty from './components/Empty';
+import { HUMAN_ICON } from '@/constants/chat';
+
+const ShareHistory = dynamic(() => import('./components/ShareHistory'), {
+  loading: () => <Loading fixed={false} />,
+  ssr: false
+});
+
+import styles from './index.module.scss';
+
+const textareaMinH = '22px';
+
+const Chat = ({ shareId, historyId }: { shareId: string; historyId: string }) => {
+  const router = useRouter();
+  const theme = useTheme();
+
+  const ChatBox = useRef<HTMLDivElement>(null);
+  const TextareaDom = useRef<HTMLTextAreaElement>(null);
+  const ContextMenuRef = useRef(null);
+  const PhoneContextShow = useRef(false);
+
+  // 中断请求
+  const controller = useRef(new AbortController());
+  const isLeavePage = useRef(false);
+
+  const [inputVal, setInputVal] = useState(''); // user input prompt
+  const [messageContextMenuData, setMessageContextMenuData] = useState<{
+    // message messageContextMenuData
+    left: number;
+    top: number;
+    message: ChatSiteItemType;
+  }>();
+
+  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 { 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();
+          });
+      }
+    }
+  });
+
+  // 滚动到底部
+  const scrollToBottom = useCallback((behavior: 'smooth' | 'auto' = 'smooth') => {
+    if (!ChatBox.current) return;
+    ChatBox.current.scrollTo({
+      top: ChatBox.current.scrollHeight,
+      behavior
+    });
+  }, []);
+
+  // 聊天信息生成中……获取当前滚动条位置，判断是否需要滚动到底部
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const generatingMessage = useCallback(
+    throttle(() => {
+      if (!ChatBox.current) return;
+      const isBottom =
+        ChatBox.current.scrollTop + ChatBox.current.clientHeight + 150 >=
+        ChatBox.current.scrollHeight;
+
+      isBottom && scrollToBottom('auto');
+    }, 100),
+    []
+  );
+
+  // 重置输入内容
+  const resetInputVal = useCallback((val: string) => {
+    setInputVal(val);
+    setTimeout(() => {
+      /* 回到最小高度 */
+      if (TextareaDom.current) {
+        TextareaDom.current.style.height =
+          val === '' ? textareaMinH : `${TextareaDom.current.scrollHeight}px`;
+      }
+    }, 100);
+  }, []);
+
+  // gpt 对话
+  const gptChatPrompt = useCallback(
+    async (prompts: ChatSiteItemType[]) => {
+      // create abort obj
+      const abortSignal = new AbortController();
+      controller.current = abortSignal;
+      isLeavePage.current = false;
+
+      const formatPrompts = prompts.map((item) => ({
+        obj: item.obj,
+        value: item.value
+      }));
+
+      // 流请求，获取数据
+      const { responseText } = await streamFetch({
+        url: '/api/chat/shareChat/chat',
+        data: {
+          prompts: formatPrompts.slice(-shareChatData.maxContext - 1, -1),
+          password,
+          shareId,
+          historyId
+        },
+        onMessage: (text: string) => {
+          setShareChatData((state) => ({
+            ...state,
+            history: state.history.map((item, index) => {
+              if (index !== state.history.length - 1) return item;
+              return {
+                ...item,
+                value: item.value + text
+              };
+            })
+          }));
+          generatingMessage();
+        },
+        abortSignal
+      });
+
+      // 重置了页面，说明退出了当前聊天, 不缓存任何内容
+      if (isLeavePage.current) {
+        return;
+      }
+
+      let responseHistory: ChatSiteItemType[] = [];
+
+      // 设置聊天内容为完成状态
+      setShareChatData((state) => {
+        responseHistory = state.history.map((item, index) => {
+          if (index !== state.history.length - 1) return item;
+          return {
+            ...item,
+            status: 'finish'
+          };
+        });
+
+        return {
+          ...state,
+          history: responseHistory
+        };
+      });
+
+      setShareChatHistory({
+        historyId,
+        shareId,
+        title: formatPrompts[formatPrompts.length - 2].value,
+        latestChat: responseText,
+        chats: responseHistory
+      });
+
+      window.top?.postMessage(
+        {
+          type: 'shareChatFinish',
+          data: {
+            responseText
+          }
+        },
+        '*'
+      );
+
+      setTimeout(() => {
+        generatingMessage();
+      }, 100);
+    },
+    [
+      generatingMessage,
+      historyId,
+      password,
+      setShareChatData,
+      setShareChatHistory,
+      shareChatData.maxContext,
+      shareId
+    ]
+  );
+
+  /**
+   * 发送一个内容
+   */
+  const sendPrompt = useCallback(async () => {
+    if (isChatting) {
+      toast({
+        title: '正在聊天中...请等待结束',
+        status: 'warning'
+      });
+      return;
+    }
+    const storeInput = inputVal;
+    // 去除空行
+    const val = inputVal.trim().replace(/\n\s*/g, '\n');
+
+    if (!val) {
+      toast({
+        title: '内容为空',
+        status: 'warning'
+      });
+      return;
+    }
+
+    const newChatList: ChatSiteItemType[] = [
+      ...shareChatData.history,
+      {
+        _id: String(new Types.ObjectId()),
+        obj: 'Human',
+        value: val,
+        status: 'finish'
+      },
+      {
+        _id: String(new Types.ObjectId()),
+        obj: 'AI',
+        value: '',
+        status: 'loading'
+      }
+    ];
+
+    // 插入内容
+    setShareChatData((state) => ({
+      ...state,
+      history: newChatList
+    }));
+
+    // 清空输入内容
+    resetInputVal('');
+    setTimeout(() => {
+      scrollToBottom();
+    }, 100);
+
+    try {
+      await gptChatPrompt(newChatList);
+    } catch (err: any) {
+      toast({
+        title: typeof err === 'string' ? err : err?.message || '聊天出错了~',
+        status: 'warning',
+        duration: 5000,
+        isClosable: true
+      });
+
+      resetInputVal(storeInput);
+
+      setShareChatData((state) => ({
+        ...state,
+        history: newChatList.slice(0, newChatList.length - 2)
+      }));
+    }
+  }, [
+    isChatting,
+    inputVal,
+    shareChatData.history,
+    setShareChatData,
+    resetInputVal,
+    toast,
+    scrollToBottom,
+    gptChatPrompt
+  ]);
+
+  // 复制内容
+  const onclickCopy = useCallback(
+    (value: string) => {
+      const val = value.replace(/\n+/g, '\n');
+      copyData(val);
+    },
+    [copyData]
+  );
+
+  // 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]
+  );
+
+  // onclick chat message context
+  const onclickContextMenu = useCallback(
+    (e: MouseEvent<HTMLDivElement>, message: ChatSiteItemType) => {
+      e.preventDefault(); // 阻止默认右键菜单
+
+      // select all text
+      const range = document.createRange();
+      range.selectNodeContents(e.currentTarget as HTMLDivElement);
+      window.getSelection()?.removeAllRanges();
+      window.getSelection()?.addRange(range);
+
+      navigator.vibrate?.(50); // 震动 50 毫秒
+
+      if (!isPc) {
+        PhoneContextShow.current = true;
+      }
+
+      setMessageContextMenuData({
+        left: e.clientX - 20,
+        top: e.clientY,
+        message
+      });
+
+      return false;
+    },
+    [isPc]
+  );
+
+  // 获取对话信息
+  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
+  ]);
+
+  // 初始化聊天框
+  useQuery(['init', historyId], () => {
+    if (!shareId) {
+      return null;
+    }
+
+    if (!historyId) {
+      router.replace(`/chat/share?shareId=${shareId}&historyId=${new Types.ObjectId()}`);
+      return null;
+    }
+
+    return loadChatInfo();
+  });
+
+  // abort stream
+  useEffect(() => {
+    return () => {
+      window.speechSynthesis?.cancel();
+      isLeavePage.current = true;
+      controller.current?.abort();
+    };
+  }, [shareId, historyId]);
+
+  // context menu component
+  const RenderContextMenu = useCallback(
+    ({ history, index }: { history: ChatSiteItemType; index: number }) => (
+      <MenuList fontSize={'sm'} minW={'100px !important'}>
+        <MenuItem onClick={() => onclickCopy(history.value)}>复制</MenuItem>
+        {hasVoiceApi && (
+          <MenuItem
+            borderBottom={theme.borders.base}
+            onClick={() => voiceBroadcast({ text: history.value })}
+          >
+            语音播报
+          </MenuItem>
+        )}
+
+        <MenuItem onClick={() => delShareChatHistoryItemById(historyId, index)}>删除</MenuItem>
+      </MenuList>
+    ),
+    [delShareChatHistoryItemById, historyId, onclickCopy, theme.borders.base]
+  );
+
+  return (
+    <Flex
+      h={'100%'}
+      flexDirection={['column', 'row']}
+      backgroundColor={useColorModeValue('#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={ChatBox} pb={[4, 0]} flex={'1 0 0'} h={0} w={'100%'} overflow={'overlay'}>
+          <Box id={'history'}>
+            {shareChatData.history.map((item, index) => (
+              <Flex key={item._id} alignItems={'flex-start'} py={2} px={[2, 6, 8]}>
+                {item.obj === 'Human' && <Box flex={1} />}
+                {/* avatar */}
+                <Menu autoSelect={false} isLazy>
+                  <Tooltip label={item.obj === 'AI' ? '应用详情' : ''}>
+                    <MenuButton
+                      as={Box}
+                      {...(item.obj === 'AI'
+                        ? {
+                            order: 1,
+                            mr: ['6px', 2]
+                          }
+                        : {
+                            order: 3,
+                            ml: ['6px', 2]
+                          })}
+                    >
+                      <Avatar
+                        src={
+                          item.obj === 'Human'
+                            ? shareChatData.userAvatar || HUMAN_ICON
+                            : shareChatData.model.avatar
+                        }
+                        w={['20px', '34px']}
+                        h={['20px', '34px']}
+                      />
+                    </MenuButton>
+                  </Tooltip>
+                  {!isPc && <RenderContextMenu history={item} index={index} />}
+                </Menu>
+                {/* message */}
+                <Flex order={2} pt={2} maxW={['calc(100% - 50px)', '80%']}>
+                  {item.obj === 'AI' ? (
+                    <Box w={'100%'}>
+                      <Card
+                        bg={'white'}
+                        px={4}
+                        py={3}
+                        borderRadius={'0 8px 8px 8px'}
+                        onContextMenu={(e) => onclickContextMenu(e, item)}
+                      >
+                        <Markdown
+                          source={item.value}
+                          isChatting={isChatting && index === shareChatData.history.length - 1}
+                          formatLink
+                        />
+                      </Card>
+                    </Box>
+                  ) : (
+                    <Box>
+                      <Card
+                        className="markdown"
+                        whiteSpace={'pre-wrap'}
+                        px={4}
+                        py={3}
+                        borderRadius={'8px 0 8px 8px'}
+                        bg={'myBlue.300'}
+                        onContextMenu={(e) => onclickContextMenu(e, item)}
+                      >
+                        <Box as={'p'}>{item.value}</Box>
+                      </Card>
+                    </Box>
+                  )}
+                </Flex>
+              </Flex>
+            ))}
+            {shareChatData.history.length === 0 && (
+              <Empty model={shareChatData.model} showChatProblem={false} />
+            )}
+          </Box>
+        </Box>
+        {/* 发送区 */}
+        <Box m={['0 auto', '20px auto']} w={'100%'} maxW={['auto', 'min(750px, 100%)']}>
+          <Box
+            py={'18px'}
+            position={'relative'}
+            boxShadow={`0 0 10px rgba(0,0,0,0.1)`}
+            borderTop={['1px solid', 0]}
+            borderTopColor={useColorModeValue('gray.200', 'gray.700')}
+            borderRadius={['none', 'md']}
+            backgroundColor={useColorModeValue('white', 'gray.700')}
+          >
+            {/* 输入框 */}
+            <Textarea
+              ref={TextareaDom}
+              py={0}
+              pr={['45px', '55px']}
+              border={'none'}
+              _focusVisible={{
+                border: 'none'
+              }}
+              placeholder="提问"
+              resize={'none'}
+              value={inputVal}
+              rows={1}
+              height={'22px'}
+              lineHeight={'22px'}
+              maxHeight={'150px'}
+              maxLength={-1}
+              overflowY={'auto'}
+              whiteSpace={'pre-wrap'}
+              wordBreak={'break-all'}
+              boxShadow={'none !important'}
+              color={useColorModeValue('blackAlpha.700', 'white')}
+              onChange={(e) => {
+                const textarea = e.target;
+                setInputVal(textarea.value);
+                textarea.style.height = textareaMinH;
+                textarea.style.height = `${textarea.scrollHeight}px`;
+              }}
+              onKeyDown={(e) => {
+                // 触发快捷发送
+                if (isPc && e.keyCode === 13 && !e.shiftKey) {
+                  sendPrompt();
+                  e.preventDefault();
+                }
+                // 全选内容
+                // @ts-ignore
+                e.key === 'a' && e.ctrlKey && e.target?.select();
+              }}
+            />
+            {/* 发送和等待按键 */}
+            <Flex
+              alignItems={'center'}
+              justifyContent={'center'}
+              h={'25px'}
+              w={'25px'}
+              position={'absolute'}
+              right={['12px', '20px']}
+              bottom={'15px'}
+            >
+              {isChatting ? (
+                <MyIcon
+                  className={styles.stopIcon}
+                  width={['22px', '25px']}
+                  height={['22px', '25px']}
+                  cursor={'pointer'}
+                  name={'stop'}
+                  color={useColorModeValue('gray.500', 'white')}
+                  onClick={() => {
+                    controller.current?.abort();
+                  }}
+                />
+              ) : (
+                <MyIcon
+                  name={'chatSend'}
+                  width={['18px', '20px']}
+                  height={['18px', '20px']}
+                  cursor={'pointer'}
+                  color={useColorModeValue('gray.500', 'white')}
+                  onClick={sendPrompt}
+                />
+              )}
+            </Flex>
+          </Box>
+        </Box>
+
+        <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}
+              onCloseSlider={onCloseSlider}
+            />
+          </DrawerContent>
+        </Drawer>
+      )}
+      {/* context menu */}
+      {messageContextMenuData && (
+        <Box
+          zIndex={10}
+          position={'fixed'}
+          top={messageContextMenuData.top}
+          left={messageContextMenuData.left}
+        >
+          <Box ref={ContextMenuRef}></Box>
+          <Menu isOpen>
+            <RenderContextMenu
+              history={messageContextMenuData.message}
+              index={shareChatData.history.findIndex(
+                (item) => item._id === messageContextMenuData.message._id
+              )}
+            />
+          </Menu>
+        </Box>
+      )}
+      {/* 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)}
+                />
+              </Flex>
+            </ModalBody>
+            <ModalFooter>
+              <Button variant={'outline'} mr={3} onClick={onClosePassword}>
+                取消
+              </Button>
+              <Button onClick={loadChatInfo}>确定</Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      }
+    </Flex>
+  );
+};
+
+Chat.getInitialProps = ({ query, req }: any) => {
+  return {
+    shareId: query?.shareId || '',
+    historyId: query?.historyId || ''
+  };
+};
+
+export default Chat;