import React, { useCallback, useState, useRef, useMemo, useEffect, MouseEvent } from 'react';
import { useRouter } from 'next/router';
import { getInitChatSiteInfo, delChatRecordByIndex, delChatHistoryById } from '@/api/chat';
import type { ChatItemType, ChatSiteItemType, ExportChatType } from '@/types/chat';
import {
  Textarea,
  Box,
  Flex,
  useColorModeValue,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  Button,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalBody,
  ModalCloseButton,
  ModalHeader,
  useDisclosure,
  Drawer,
  DrawerOverlay,
  DrawerContent,
  Card,
  Tooltip,
  useOutsideClick,
  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, delay } from '@/utils/tools';
import { streamFetch } from '@/api/fetch';
import MyIcon from '@/components/Icon';
import { throttle } from 'lodash';
import { Types } from 'mongoose';
import { LOGO_ICON } from '@/constants/chat';
import { ChatModelMap } from '@/constants/model';
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 QuoteModal from './components/QuoteModal';

const PhoneSliderBar = dynamic(() => import('./components/PhoneSliderBar'), {
  ssr: false
});
const History = dynamic(() => import('./components/History'), {
  loading: () => <Loading fixed={false} />,
  ssr: false
});

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

const textareaMinH = '22px';

const Chat = ({ modelId, chatId }: { modelId: string; chatId: 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 [showHistoryQuote, setShowHistoryQuote] = useState<string>();
  const [showSystemPrompt, setShowSystemPrompt] = useState('');
  const [messageContextMenuData, setMessageContextMenuData] = useState<{
    // message messageContextMenuData
    left: number;
    top: number;
    message: ChatSiteItemType;
  }>();

  const {
    lastChatModelId,
    setLastChatModelId,
    lastChatId,
    setLastChatId,
    loadHistory,
    chatData,
    setChatData,
    forbidLoadChatData,
    setForbidLoadChatData
  } = useChatStore();

  const isChatting = useMemo(
    () => chatData.history[chatData.history.length - 1]?.status === 'loading',
    [chatData.history]
  );

  const { toast } = useToast();
  const { copyData } = useCopyData();
  const { isPc } = useGlobalStore();
  const { Loading, setIsLoading } = useLoading();
  const { userInfo } = useUserStore();
  const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = 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) => {
    if (!TextareaDom.current) return;
    TextareaDom.current.value = 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 prompt: ChatItemType[] = prompts.map((item) => ({
        _id: item._id,
        obj: item.obj,
        value: item.value
      }));

      // 流请求，获取数据
      const { newChatId, quoteLen, systemPrompt } = await streamFetch({
        url: '/api/chat/chat',
        data: {
          prompt,
          chatId,
          modelId
        },
        onMessage: (text: string) => {
          setChatData((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;
      }

      if (newChatId) {
        setForbidLoadChatData(true);
        router.replace(`/chat?modelId=${modelId}&chatId=${newChatId}`);
      }

      abortSignal.signal.aborted && (await delay(600));

      // 设置聊天内容为完成状态
      setChatData((state) => ({
        ...state,
        chatId: newChatId || state.chatId, // 如果有 Id，说明是新创建的对话
        history: state.history.map((item, index) => {
          if (index !== state.history.length - 1) return item;
          return {
            ...item,
            status: 'finish',
            quoteLen,
            systemPrompt
          };
        })
      }));

      // refresh history
      setTimeout(() => {
        loadHistory({ pageNum: 1, init: true });
        generatingMessage();
      }, 100);
    },
    [chatId, setForbidLoadChatData, generatingMessage, loadHistory, modelId, router, setChatData]
  );

  /**
   * 发送一个内容
   */
  const sendPrompt = useCallback(async () => {
    // get value
    if (isChatting) {
      toast({
        title: '正在聊天中...请等待结束',
        status: 'warning'
      });
      return;
    }

    // get input value
    const value = TextareaDom.current?.value || '';
    const val = value.trim().replace(/\n\s*/g, '\n');

    if (!val) {
      toast({
        title: '内容为空',
        status: 'warning'
      });
      return;
    }

    const newChatList: ChatSiteItemType[] = [
      ...chatData.history,
      {
        _id: String(new Types.ObjectId()),
        obj: 'Human',
        value: val,
        status: 'finish'
      },
      {
        _id: String(new Types.ObjectId()),
        obj: 'AI',
        value: '',
        status: 'loading'
      }
    ];

    // 插入内容
    setChatData((state) => ({
      ...state,
      history: newChatList
    }));

    // 清空输入内容
    resetInputVal('');
    setTimeout(() => {
      scrollToBottom();
    }, 100);

    try {
      await gptChatPrompt(newChatList.slice(newChatList.length - 2));
    } catch (err: any) {
      toast({
        title: typeof err === 'string' ? err : err?.message || '聊天出错了~',
        status: 'warning',
        duration: 5000,
        isClosable: true
      });

      resetInputVal(value);

      setChatData((state) => ({
        ...state,
        history: newChatList.slice(0, newChatList.length - 2)
      }));
    }
  }, [
    isChatting,
    chatData.history,
    setChatData,
    resetInputVal,
    toast,
    scrollToBottom,
    gptChatPrompt
  ]);

  // 删除一句话
  const delChatRecord = useCallback(
    async (index: number, historyId: string) => {
      if (!messageContextMenuData) return;
      setIsLoading(true);

      try {
        // 删除数据库最后一句
        await delChatRecordByIndex(chatId, historyId);

        setChatData((state) => ({
          ...state,
          history: state.history.filter((_, i) => i !== index)
        }));
      } catch (err) {
        console.log(err);
      }
      setIsLoading(false);
    },
    [chatId, messageContextMenuData, setChatData, setIsLoading]
  );

  // 复制内容
  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: chatData.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]();
    },
    [chatData.history]
  );

  // delete history and reload history
  const onclickDelHistory = useCallback(
    async (historyId: string) => {
      await delChatHistoryById(historyId);
      loadHistory({ pageNum: 1, init: true });
    },
    [loadHistory]
  );

  // 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 ({
      modelId,
      chatId,
      isLoading = false
    }: {
      modelId: string;
      chatId: string;
      isLoading?: boolean;
    }) => {
      isLoading && setIsLoading(true);
      try {
        const res = await getInitChatSiteInfo(modelId, chatId);

        setChatData({
          ...res,
          history: res.history.map((item) => ({
            ...item,
            status: 'finish'
          }))
        });

        // have records.
        if (res.history.length > 0) {
          setTimeout(() => {
            scrollToBottom('auto');
          }, 300);
        }

        // 空 modelId 请求, 重定向到新的 model 聊天
        if (res.modelId !== modelId) {
          setForbidLoadChatData(true);
          router.replace(`/chat?modelId=${res.modelId}`);
        }
      } catch (e: any) {
        // reset all chat tore
        setLastChatModelId('');
        setLastChatId('');
        setChatData();
        loadHistory({ pageNum: 1, init: true });
        router.replace('/chat');
      }
      setIsLoading(false);
      return null;
    },
    [
      router,
      loadHistory,
      setForbidLoadChatData,
      scrollToBottom,
      setChatData,
      setIsLoading,
      setLastChatId,
      setLastChatModelId
    ]
  );
  // 初始化聊天框
  const { isLoading } = useQuery(['init', modelId, chatId], () => {
    // pc: redirect to latest model chat
    if (!modelId && lastChatModelId) {
      router.replace(`/chat?modelId=${lastChatModelId}&chatId=${lastChatId}`);
      return null;
    }

    // store id
    modelId && setLastChatModelId(modelId);
    setLastChatId(chatId);

    if (forbidLoadChatData) {
      setForbidLoadChatData(false);
      return null;
    }

    return loadChatInfo({
      modelId,
      chatId
    });
  });

  // abort stream
  useEffect(() => {
    return () => {
      window.speechSynthesis?.cancel();
      isLeavePage.current = true;
      controller.current?.abort();
    };
  }, [modelId, chatId]);

  // context menu component
  const RenderContextMenu = useCallback(
    ({
      history,
      index,
      AiDetail = false
    }: {
      history: ChatSiteItemType;
      index: number;
      AiDetail?: boolean;
    }) => (
      <MenuList fontSize={'sm'} minW={'100px !important'}>
        <MenuItem onClick={() => onclickCopy(history.value)}>复制</MenuItem>
        {AiDetail && chatData.model.canUse && history.obj === 'AI' && (
          <MenuItem
            borderBottom={theme.borders.base}
            onClick={() => router.push(`/model?modelId=${chatData.modelId}`)}
          >
            应用详情
          </MenuItem>
        )}
        {hasVoiceApi && (
          <MenuItem
            borderBottom={theme.borders.base}
            onClick={() => voiceBroadcast({ text: history.value })}
          >
            语音播报
          </MenuItem>
        )}

        <MenuItem onClick={() => delChatRecord(index, history._id)}>删除</MenuItem>
      </MenuList>
    ),
    [
      chatData.model.canUse,
      chatData.modelId,
      delChatRecord,
      onclickCopy,
      router,
      theme.borders.base
    ]
  );

  return (
    <Flex
      h={'100%'}
      flexDirection={['column', 'row']}
      backgroundColor={useColorModeValue('#fdfdfd', '')}
    >
      {/* pc always show history.  */}
      {(isPc || !modelId) && (
        <SideBar>
          <History onclickDelHistory={onclickDelHistory} onclickExportChat={onclickExportChat} />
        </SideBar>
      )}

      {/* 聊天内容 */}
      {modelId && (
        <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
              cursor={'pointer'}
              lineHeight={1.2}
              textAlign={'center'}
              px={3}
              fontSize={['sm', 'md']}
              onClick={() => router.push(`/model?modelId=${chatData.modelId}`)}
            >
              {chatData.model.name} {ChatModelMap[chatData.chatModel].name}
              {chatData.history.length > 0 ? ` (${chatData.history.length})` : ''}
            </Box>
            {chatId ? (
              <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?modelId=${modelId}`)}>
                    新对话
                  </MenuItem>
                  <MenuItem
                    onClick={async () => {
                      try {
                        setIsLoading(true);
                        await onclickDelHistory(chatData.chatId);
                        router.replace(`/chat?modelId=${modelId}`);
                      } catch (err) {
                        console.log(err);
                      }
                      setIsLoading(false);
                    }}
                  >
                    删除记录
                  </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'}>
              {chatData.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],
                              cursor: 'pointer',
                              onClick: () =>
                                isPc &&
                                chatData.model.canUse &&
                                router.push(`/model?modelId=${chatData.modelId}`)
                            }
                          : {
                              order: 3,
                              ml: ['6px', 2]
                            })}
                      >
                        <Avatar
                          className="avatar"
                          src={
                            item.obj === 'Human'
                              ? userInfo?.avatar || '/icon/human.png'
                              : chatData.model.avatar || LOGO_ICON
                          }
                          w={['20px', '34px']}
                          h={['20px', '34px']}
                        />
                      </MenuButton>
                    </Tooltip>
                    {!isPc && <RenderContextMenu history={item} index={index} AiDetail />}
                  </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 === chatData.history.length - 1}
                            formatLink
                          />
                          <Flex>
                            {!!item.systemPrompt && (
                              <Button
                                mt={2}
                                mr={3}
                                size={'xs'}
                                fontWeight={'normal'}
                                colorScheme={'gray'}
                                variant={'outline'}
                                px={[2, 4]}
                                onClick={() => setShowSystemPrompt(item.systemPrompt || '')}
                              >
                                提示词
                              </Button>
                            )}
                            {!!item.quoteLen && (
                              <Button
                                mt={2}
                                size={'xs'}
                                fontWeight={'normal'}
                                colorScheme={'gray'}
                                variant={'outline'}
                                px={[2, 4]}
                                onClick={() => setShowHistoryQuote(item._id)}
                              >
                                {item.quoteLen}条引用
                              </Button>
                            )}
                          </Flex>
                        </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>
              ))}
              {chatData.history.length === 0 && (
                <Empty model={chatData.model} showChatProblem={true} />
              )}
            </Box>
          </Box>
          {/* 发送区 */}
          {chatData.model.canUse ? (
            <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'}
                  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;
                    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>
          ) : (
            <Box m={['0 auto', '20px auto']} w={'100%'} textAlign={'center'} color={'myGray.500'}>
              作者已关闭分享
            </Box>
          )}

          <Loading loading={isLoading} 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'}>
            <PhoneSliderBar chatId={chatId} modelId={modelId} onClose={onCloseSlider} />
          </DrawerContent>
        </Drawer>
      )}
      {/* quote modal*/}
      {showHistoryQuote && chatId && (
        <QuoteModal
          historyId={showHistoryQuote}
          chatId={chatId}
          onClose={() => setShowHistoryQuote(undefined)}
        />
      )}
      {/* system prompt show modal */}
      {
        <Modal isOpen={!!showSystemPrompt} onClose={() => setShowSystemPrompt('')}>
          <ModalOverlay />
          <ModalContent maxW={'min(90vw, 600px)'} maxH={'80vh'} minH={'50vh'} overflow={'overlay'}>
            <ModalCloseButton />
            <ModalHeader>提示词</ModalHeader>
            <ModalBody pt={0} whiteSpace={'pre-wrap'} textAlign={'justify'} fontSize={'xs'}>
              {showSystemPrompt}
            </ModalBody>
          </ModalContent>
        </Modal>
      }
      {/* 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={chatData.history.findIndex(
                (item) => item._id === messageContextMenuData.message._id
              )}
              AiDetail={!isPc}
            />
          </Menu>
        </Box>
      )}
    </Flex>
  );
};

Chat.getInitialProps = ({ query, req }: any) => {
  return {
    modelId: query?.modelId || '',
    chatId: query?.chatId || ''
  };
};

export default Chat;