chat-client-web/app/components/DeepSeekChat.tsx

import { useDebouncedCallback } from "use-debounce";
import React, {
  useState,
  useRef,
  useEffect,
  useMemo,
  useCallback,
  Fragment,
  RefObject,
} from "react";
import LeftIcon from "../icons/left.svg";
import SendWhiteIcon from "../icons/send-white.svg";
import BrainIcon from "../icons/brain.svg";
import CopyIcon from "../icons/copy.svg";
import LoadingIcon from "../icons/three-dots.svg";
import ResetIcon from "../icons/reload.svg";
import DeleteIcon from "../icons/clear.svg";
import ConfirmIcon from "../icons/confirm.svg";
import CancelIcon from "../icons/cancel.svg";
import SizeIcon from "../icons/size.svg";
import avatar from "../icons/aiIcon.png";
import sdsk from "../icons/sdsk.png";
import sdsk_selected from "../icons/sdsk_selected.png";
import hlw from "../icons/hlw.png";

import {
  SubmitKey,
  useChatStore,
  useAccessStore,
  Theme,
  useAppConfig,
  DEFAULT_TOPIC,
  ModelType,
} from "../store";

import {
  copyToClipboard,
  selectOrCopy,
  autoGrowTextArea,
  useMobileScreen,
  getMessageTextContent,
  getMessageImages,
  isVisionModel,
  isDalle3,
} from "../utils";

import { uploadImage as uploadImageRemote } from "@/app/utils/chat";

import dynamic from "next/dynamic";

import { ChatControllerPool } from "../client/controller";
import { DalleSize } from "../typing";
import type { RequestMessage } from "../client/api";
import { Prompt, usePromptStore } from "../store/prompt";
import { useGlobalStore } from "../store";
import Locale from "../locales";

import { IconButton } from "./button";
import styles from "./chat.module.scss";

import {
  List,
  ListItem,
  Modal,
  Selector,
  showConfirm,
  showToast,
} from "./ui-lib";
import { useNavigate, useLocation } from "react-router-dom";
import {
  CHAT_PAGE_SIZE,
  LAST_INPUT_KEY,
  Path,
  REQUEST_TIMEOUT_MS,
  UNFINISHED_INPUT,
  ServiceProvider,
  Plugin,
} from "../constant";
import { ContextPrompts, MaskConfig } from "./mask";
import { useMaskStore } from "../store/mask";
import { ChatCommandPrefix, useChatCommand, useCommand } from "../command";
import { prettyObject } from "../utils/format";
import { ExportMessageModal } from "./exporter";
import { getClientConfig } from "../config/client";
import { useAllModels } from "../utils/hooks";
import { nanoid } from "nanoid";
import { message, Upload, UploadProps, Tooltip } from "antd";
import {
  PaperClipOutlined,
  SendOutlined,
  FileOutlined,
  FilePdfOutlined,
  FileTextOutlined,
  FileWordOutlined
} from '@ant-design/icons';

export function createMessage(override: Partial<ChatMessage>): ChatMessage {
  return {
    id: nanoid(),
    date: new Date().toLocaleString(),
    role: "user",
    content: "",
    ...override,
  };
}

export type ChatMessage = RequestMessage & {
  date: string;
  streaming?: boolean;
  isError?: boolean;
  id: string;
  model?: ModelType;
};

export const BOT_HELLO: ChatMessage = createMessage({
  role: "assistant",
  content: '您好，我是小智',
});

const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
  loading: () => <LoadingIcon/>,
});

export function SessionConfigModel(props: {onClose: () => void}) {
  const chatStore = useChatStore();
  const session = chatStore.currentSession();
  const maskStore = useMaskStore();
  const navigate = useNavigate();
  
  return (
      <div className="modal-mask">
        <Modal
            title={Locale.Context.Edit}
            onClose={() => props.onClose()}
            actions={[
              <IconButton
                  key="reset"
                  icon={<ResetIcon/>}
                  bordered
                  text={Locale.Chat.Config.Reset}
                  onClick={async () => {
                    if ( await showConfirm(Locale.Memory.ResetConfirm) ) {
                      chatStore.updateCurrentSession(
                          (session) => (session.memoryPrompt = ""),
                      );
                    }
                  }}
              />,
              <IconButton
                  key="copy"
                  icon={<CopyIcon/>}
                  bordered
                  text={Locale.Chat.Config.SaveAs}
                  onClick={() => {
                    navigate(Path.Masks);
                    setTimeout(() => {
                      maskStore.create(session.mask);
                    }, 500);
                  }}
              />,
            ]}
        >
          <MaskConfig
              mask={session.mask}
              updateMask={(updater) => {
                const mask = {...session.mask};
                updater(mask);
                chatStore.updateCurrentSession((session) => (session.mask = mask));
              }}
              shouldSyncFromGlobal
              extraListItems={
                session.mask.modelConfig.sendMemory ? (
                    <ListItem
                        className="copyable"
                        title={`${Locale.Memory.Title} (${session.lastSummarizeIndex} of ${session.messages.length})`}
                        subTitle={session.memoryPrompt || Locale.Memory.EmptyContent}
                    ></ListItem>
                ) : (
                    <></>
                )
              }
          ></MaskConfig>
        </Modal>
      </div>
  );
}

// 提示词
const CallWord = (props: {
  setUserInput: (value: string) => void,
  doSubmit: (userInput: string) => void,
}) => {
  const {setUserInput, doSubmit} = props
  const list = [
    {
      title: '信息公布',
      // text: '在哪里查看招聘信息？',
      text: '今年上海建科工程咨询的校园招聘什么时候开始？如何查阅相关招聘信息？',
    },
    {
      title: '招聘岗位',
      // text: '今年招聘的岗位有哪些？',
      text: '今年招聘的岗位有哪些？',
    },
    {
      title: '专业要求',
      // text: '招聘的岗位有什么专业要求？',
      text: '招聘的岗位有什么专业要求？',
    },
    {
      title: '工作地点',
      // text: '全国都有工作地点吗？',
      text: '工作地点是如何确定的？',
    },
    {
      title: '薪资待遇',
      // text: '企业可提供的薪资与福利待遇如何？',
      text: '企业可提供的薪资与福利待遇如何？',
    },
    {
      title: '职业发展',
      // text: '我应聘贵单位，你们能提供怎样的职业发展规划？',
      text: '公司有哪些职业发展通道？',
    },
    {
      title: '落户政策',
      // text: '公司是否能协助我落户？',
      text: '关于落户支持？',
    }
  ]
  
  return (
      <>
        {
          list.map((item, index) => {
            return <span
                key={index}
                style={{
                  padding: '5px 10px',
                  background: '#f6f7f8',
                  color: '#5e5e66',
                  borderRadius: 4,
                  margin: '0 5px 10px 0',
                  cursor: 'pointer',
                  fontSize: 12
                }}
                onClick={() => {
                  const plan: string = '2';
                  if ( plan === '1' ) {
                    // 方案1.点击后出现在输入框内，用户自己点击发送
                    setUserInput(item.text);
                  } else {
                    // 方案2.点击后直接发送
                    doSubmit(item.text)
                  }
                }}
            >
            {item.title}
          </span>
          })
        }
      </>
  )
}

function PromptToast(props: {
  showToast?: boolean;
  showModal?: boolean;
  setShowModal: (_: boolean) => void;
}) {
  const chatStore = useChatStore();
  const session = chatStore.currentSession();
  const context = session.mask.context;
  
  return (
      <div className={styles["prompt-toast"]} key="prompt-toast">
        {props.showToast && (
            <div
                className={styles["prompt-toast-inner"] + " clickable"}
                role="button"
                onClick={() => props.setShowModal(true)}
            >
              <BrainIcon/>
              <span className={styles["prompt-toast-content"]}>
            {Locale.Context.Toast(context.length)}
          </span>
            </div>
        )}
        {props.showModal && (
            <SessionConfigModel onClose={() => props.setShowModal(false)}/>
        )}
      </div>
  );
}

function useSubmitHandler() {
  const config = useAppConfig();
  const submitKey = config.submitKey;
  const isComposing = useRef(false);
  
  useEffect(() => {
    const onCompositionStart = () => {
      isComposing.current = true;
    };
    const onCompositionEnd = () => {
      isComposing.current = false;
    };
    
    window.addEventListener("compositionstart", onCompositionStart);
    window.addEventListener("compositionend", onCompositionEnd);
    
    return () => {
      window.removeEventListener("compositionstart", onCompositionStart);
      window.removeEventListener("compositionend", onCompositionEnd);
    };
  }, []);
  
  const shouldSubmit = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    // Fix Chinese input method "Enter" on Safari
    if ( e.keyCode == 229 ) return false;
    if ( e.key !== "Enter" ) return false;
    if ( e.key === "Enter" && (e.nativeEvent.isComposing || isComposing.current) )
      return false;
    return (
        (config.submitKey === SubmitKey.AltEnter && e.altKey) ||
        (config.submitKey === SubmitKey.CtrlEnter && e.ctrlKey) ||
        (config.submitKey === SubmitKey.ShiftEnter && e.shiftKey) ||
        (config.submitKey === SubmitKey.MetaEnter && e.metaKey) ||
        (config.submitKey === SubmitKey.Enter &&
            !e.altKey &&
            !e.ctrlKey &&
            !e.shiftKey &&
            !e.metaKey)
    );
  };
  
  return {
    submitKey,
    shouldSubmit,
  };
}

export type RenderPrompt = Pick<Prompt, "title" | "content">;

export function PromptHints(props: {
  prompts: RenderPrompt[];
  onPromptSelect: (prompt: RenderPrompt) => void;
}) {
  const noPrompts = props.prompts.length === 0;
  const [ selectIndex, setSelectIndex ] = useState(0);
  const selectedRef = useRef<HTMLDivElement>(null);
  
  useEffect(() => {
    setSelectIndex(0);
  }, [ props.prompts.length ]);
  
  useEffect(() => {
    const onKeyDown = (e: KeyboardEvent) => {
      if ( noPrompts || e.metaKey || e.altKey || e.ctrlKey ) {
        return;
      }
      // arrow up / down to select prompt
      const changeIndex = (delta: number) => {
        e.stopPropagation();
        e.preventDefault();
        const nextIndex = Math.max(
            0,
            Math.min(props.prompts.length - 1, selectIndex + delta),
        );
        setSelectIndex(nextIndex);
        selectedRef.current?.scrollIntoView({
          block: "center",
        });
      };
      
      if ( e.key === "ArrowUp" ) {
        changeIndex(1);
      } else if ( e.key === "ArrowDown" ) {
        changeIndex(-1);
      } else if ( e.key === "Enter" ) {
        const selectedPrompt = props.prompts.at(selectIndex);
        if ( selectedPrompt ) {
          props.onPromptSelect(selectedPrompt);
        }
      }
    };
    
    window.addEventListener("keydown", onKeyDown);
    
    return () => window.removeEventListener("keydown", onKeyDown);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ props.prompts.length, selectIndex ]);
  
  if ( noPrompts ) return null;
  return (
      <div className={styles["prompt-hints"]}>
        {props.prompts.map((prompt, i) => (
            <div
                ref={i === selectIndex ? selectedRef : null}
                className={
                    styles["prompt-hint"] +
                    ` ${i === selectIndex ? styles["prompt-hint-selected"] : ""}`
                }
                key={prompt.title + i.toString()}
                onClick={() => props.onPromptSelect(prompt)}
                onMouseEnter={() => setSelectIndex(i)}
            >
              <div className={styles["hint-title"]}>{prompt.title}</div>
              <div className={styles["hint-content"]}>{prompt.content}</div>
            </div>
        ))}
      </div>
  );
}

function ClearContextDivider() {
  const chatStore = useChatStore();
  
  return (
      <div
          className={styles["clear-context"]}
          onClick={() =>
              chatStore.updateCurrentSession(
                  (session) => (session.clearContextIndex = undefined),
              )
          }
      >
        <div className={styles["clear-context-tips"]}>{Locale.Context.Clear}</div>
        <div className={styles["clear-context-revert-btn"]}>
          {Locale.Context.Revert}
        </div>
      </div>
  );
}

export function ChatAction(props: {
  text: string;
  icon: JSX.Element;
  onClick: () => void;
}) {
  const iconRef = useRef<HTMLDivElement>(null);
  const textRef = useRef<HTMLDivElement>(null);
  const [ width, setWidth ] = useState({
    full: 16,
    icon: 16,
  });
  
  function updateWidth() {
    if ( !iconRef.current || !textRef.current ) return;
    const getWidth = (dom: HTMLDivElement) => dom.getBoundingClientRect().width;
    const textWidth = getWidth(textRef.current);
    const iconWidth = getWidth(iconRef.current);
    setWidth({
      full: textWidth + iconWidth,
      icon: iconWidth,
    });
  }
  
  return (
      <div
          className={`${styles["chat-input-action"]} clickable`}
          onClick={() => {
            props.onClick();
            setTimeout(updateWidth, 1);
          }}
          onMouseEnter={updateWidth}
          onTouchStart={updateWidth}
          style={
            {
              "--icon-width": `${width.icon}px`,
              "--full-width": `${width.full}px`,
            } as React.CSSProperties
          }
      >
        <div ref={iconRef} className={styles["icon"]}>
          {props.icon}
        </div>
        <div className={styles["text"]} ref={textRef}>
          {props.text}
        </div>
      </div>
  );
}

function useScrollToBottom(
    scrollRef: RefObject<HTMLDivElement>,
    detach: boolean = false,
) {
  // for auto-scroll
  
  const [ autoScroll, setAutoScroll ] = useState(true);
  
  function scrollDomToBottom() {
    const dom = scrollRef.current;
    if ( dom ) {
      requestAnimationFrame(() => {
        setAutoScroll(true);
        dom.scrollTo(0, dom.scrollHeight);
      });
    }
  }
  
  // auto scroll
  useEffect(() => {
    if ( autoScroll && !detach ) {
      scrollDomToBottom();
    }
  });
  
  return {
    scrollRef,
    autoScroll,
    setAutoScroll,
    scrollDomToBottom,
  };
}

export function ChatActions(props: {
  setUserInput: (value: string) => void;
  doSubmit: (userInput: string) => void;
  uploadImage: () => void;
  setAttachImages: (images: string[]) => void;
  setUploading: (uploading: boolean) => void;
  showPromptModal: () => void;
  scrollToBottom: () => void;
  showPromptHints: () => void;
  hitBottom: boolean;
  uploading: boolean;
}) {
  const config = useAppConfig();
  const navigate = useNavigate();
  const chatStore = useChatStore();
  
  // switch themes
  const theme = config.theme;
  
  function nextTheme() {
    const themes = [ Theme.Auto, Theme.Light, Theme.Dark ];
    const themeIndex = themes.indexOf(theme);
    const nextIndex = (themeIndex + 1) % themes.length;
    const nextTheme = themes[nextIndex];
    config.update((config) => (config.theme = nextTheme));
  }
  
  // stop all responses
  const couldStop = ChatControllerPool.hasPending();
  const stopAll = () => ChatControllerPool.stopAll();
  
  // switch model
  const currentModel = chatStore.currentSession().mask.modelConfig.model;
  const currentProviderName =
      chatStore.currentSession().mask.modelConfig?.providerName ||
      ServiceProvider.OpenAI;
  const allModels = useAllModels();
  const models = useMemo(() => {
    const filteredModels = allModels.filter((m) => m.available);
    const defaultModel = filteredModels.find((m) => m.isDefault);
    
    if ( defaultModel ) {
      const arr = [
        defaultModel,
        ...filteredModels.filter((m) => m !== defaultModel),
      ];
      return arr;
    } else {
      return filteredModels;
    }
  }, [ allModels ]);
  const currentModelName = useMemo(() => {
    const model = models.find(
        (m) =>
            m.name == currentModel &&
            m?.provider?.providerName == currentProviderName,
    );
    return model?.displayName ?? "";
  }, [ models, currentModel, currentProviderName ]);
  const [ showModelSelector, setShowModelSelector ] = useState(false);
  const [ showPluginSelector, setShowPluginSelector ] = useState(false);
  const [ showUploadImage, setShowUploadImage ] = useState(false);
  
  type GuessList = string[]
  const [ guessList, setGuessList ] = useState<GuessList>([]);
  
  const [ showSizeSelector, setShowSizeSelector ] = useState(false);
  const dalle3Sizes: DalleSize[] = [ "1024x1024", "1792x1024", "1024x1792" ];
  const currentSize =
      chatStore.currentSession().mask.modelConfig?.size ?? "1024x1024";
  const session = chatStore.currentSession();
  
  useEffect(() => {
    const show = isVisionModel(currentModel);
    setShowUploadImage(show);
    if ( !show ) {
      props.setAttachImages([]);
      props.setUploading(false);
    }
    
    // if current model is not available
    // switch to first available model
    const isUnavaliableModel = !models.some((m) => m.name === currentModel);
    if ( isUnavaliableModel && models.length > 0 ) {
      // show next model to default model if exist
      let nextModel = models.find((model) => model.isDefault) || models[0];
      chatStore.updateCurrentSession((session) => {
        session.mask.modelConfig.model = nextModel.name;
        session.mask.modelConfig.providerName = nextModel?.provider?.providerName as ServiceProvider;
      });
      showToast(
          nextModel?.provider?.providerName == "ByteDance"
              ? nextModel.displayName
              : nextModel.name,
      );
    }
  }, [ chatStore, currentModel, models ]);
  
  return (
      <div className={styles["chat-input-actions"]}>
        {showModelSelector && (
            <Selector
                defaultSelectedValue={`${currentModel}@${currentProviderName}`}
                items={models.map((m) => ({
                  title: `${m.displayName}${m?.provider?.providerName
                      ? "(" + m?.provider?.providerName + ")"
                      : ""
                  }`,
                  value: `${m.name}@${m?.provider?.providerName}`,
                }))}
                onClose={() => setShowModelSelector(false)}
                onSelection={(s) => {
                  if ( s.length === 0 ) return;
                  const [ model, providerName ] = s[0].split("@");
                  chatStore.updateCurrentSession((session) => {
                    session.mask.modelConfig.model = model as ModelType;
                    session.mask.modelConfig.providerName =
                        providerName as ServiceProvider;
                    session.mask.syncGlobalConfig = false;
                  });
                  if ( providerName == "ByteDance" ) {
                    const selectedModel = models.find(
                        (m) =>
                            m.name == model && m?.provider?.providerName == providerName,
                    );
                    showToast(selectedModel?.displayName ?? "");
                  } else {
                    showToast(model);
                  }
                }}
            />
        )}
        
        {isDalle3(currentModel) && (
            <ChatAction
                onClick={() => setShowSizeSelector(true)}
                text={currentSize}
                icon={<SizeIcon/>}
            />
        )}
        
        {showSizeSelector && (
            <Selector
                defaultSelectedValue={currentSize}
                items={dalle3Sizes.map((m) => ({
                  title: m,
                  value: m,
                }))}
                onClose={() => setShowSizeSelector(false)}
                onSelection={(s) => {
                  if ( s.length === 0 ) return;
                  const size = s[0];
                  chatStore.updateCurrentSession((session) => {
                    session.mask.modelConfig.size = size;
                  });
                  showToast(size);
                }}
            />
        )}
        
        {showPluginSelector && (
            <Selector
                multiple
                defaultSelectedValue={chatStore.currentSession().mask?.plugin}
                items={[
                  {
                    title: Locale.Plugin.Artifacts,
                    value: Plugin.Artifacts,
                  },
                ]}
                onClose={() => setShowPluginSelector(false)}
                onSelection={(s) => {
                  const plugin = s[0];
                  chatStore.updateCurrentSession((session) => {
                    session.mask.plugin = s;
                  });
                  if ( plugin ) {
                    showToast(plugin);
                  }
                }}
            />
        )}
      </div>
  );
}

export function EditMessageModal(props: {onClose: () => void}) {
  const chatStore = useChatStore();
  const session = chatStore.currentSession();
  const [ messages, setMessages ] = useState(session.messages.slice());
  
  return (
      <div className="modal-mask">
        <Modal
            title={Locale.Chat.EditMessage.Title}
            onClose={props.onClose}
            actions={[
              <IconButton
                  text={Locale.UI.Cancel}
                  icon={<CancelIcon/>}
                  key="cancel"
                  onClick={() => {
                    props.onClose();
                  }}
              />,
              <IconButton
                  type="primary"
                  text={Locale.UI.Confirm}
                  icon={<ConfirmIcon/>}
                  key="ok"
                  onClick={() => {
                    chatStore.updateCurrentSession(
                        (session) => (session.messages = messages),
                    );
                    props.onClose();
                  }}
              />,
            ]}
        >
          <List>
            <ListItem
                title={Locale.Chat.EditMessage.Topic.Title}
                subTitle={Locale.Chat.EditMessage.Topic.SubTitle}
            >
              <input
                  type="text"
                  value={session.topic}
                  onInput={(e) =>
                      chatStore.updateCurrentSession(
                          (session) => (session.topic = e.currentTarget.value),
                      )
                  }
              ></input>
            </ListItem>
          </List>
          <ContextPrompts
              context={messages}
              updateContext={(updater) => {
                const newMessages = messages.slice();
                updater(newMessages);
                setMessages(newMessages);
              }}
          />
        </Modal>
      </div>
  );
}

export function DeleteImageButton(props: {deleteImage: () => void}) {
  return (
      <div className={styles["delete-image"]} onClick={props.deleteImage}>
        <DeleteIcon/>
      </div>
  );
}

function _Chat() {
  type RenderMessage = ChatMessage & {preview?: boolean};
  
  const chatStore = useChatStore();
  const session = chatStore.currentSession();
  const config = useAppConfig();
  const fontSize = config.fontSize;
  const fontFamily = config.fontFamily;
  
  const [ showExport, setShowExport ] = useState(false);
  
  const inputRef = useRef<HTMLTextAreaElement>(null);
  const [ userInput, setUserInput ] = useState("");
  const [ isLoading, setIsLoading ] = useState(false);
  const {submitKey, shouldSubmit} = useSubmitHandler();
  const scrollRef = useRef<HTMLDivElement>(null);
  const isScrolledToBottom = scrollRef?.current
      ? Math.abs(
      scrollRef.current.scrollHeight -
      (scrollRef.current.scrollTop + scrollRef.current.clientHeight),
  ) <= 1
      : false;
  const {setAutoScroll, scrollDomToBottom} = useScrollToBottom(
      scrollRef,
      isScrolledToBottom,
  );
  const [ hitBottom, setHitBottom ] = useState(true);
  const isMobileScreen = useMobileScreen();
  const navigate = useNavigate();
  const [ attachImages, setAttachImages ] = useState<string[]>([]);
  const [ uploading, setUploading ] = useState(false);
  
  // prompt hints
  const promptStore = usePromptStore();
  const [ promptHints, setPromptHints ] = useState<RenderPrompt[]>([]);
  const onSearch = useDebouncedCallback(
      (text: string) => {
        const matchedPrompts = promptStore.search(text);
        setPromptHints(matchedPrompts);
      },
      100,
      {leading: true, trailing: true},
  );
  
  useEffect(() => {
    chatStore.updateCurrentSession((session) => {
      session.appId = '1881269958412521255';
    });
  }, [])
  
  const [ inputRows, setInputRows ] = useState(2);
  const measure = useDebouncedCallback(
      () => {
        const rows = inputRef.current ? autoGrowTextArea(inputRef.current) : 1;
        const inputRows = Math.min(
            20,
            Math.max(2 + Number(!isMobileScreen), rows),
        );
        setInputRows(inputRows);
      },
      100,
      {
        leading: true,
        trailing: true,
      },
  );
  
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(measure, [ userInput ]);
  
  // chat commands shortcuts
  const chatCommands = useChatCommand({
    new: () => chatStore.newSession(),
    newm: () => navigate(Path.NewChat),
    prev: () => chatStore.nextSession(-1),
    next: () => chatStore.nextSession(1),
    clear: () =>
        chatStore.updateCurrentSession(
            (session) => (session.clearContextIndex = session.messages.length),
        ),
    del: () => chatStore.deleteSession(chatStore.currentSessionIndex),
  });
  
  // only search prompts when user input is short
  const SEARCH_TEXT_LIMIT = 30;
  const onInput = (text: string) => {
    setUserInput(text);
    const n = text.trim().length;
    
    // clear search results
    if ( n === 0 ) {
      setPromptHints([]);
    } else if ( text.match(ChatCommandPrefix) ) {
      setPromptHints(chatCommands.search(text));
    } else if ( !config.disablePromptHint && n < SEARCH_TEXT_LIMIT ) {
      // check if need to trigger auto completion
      if ( text.startsWith("/") ) {
        let searchText = text.slice(1);
        onSearch(searchText);
      }
    }
  };
  
  const doSubmit = (userInput: string) => {
    if ( userInput.trim() === "" ) return;
    const matchCommand = chatCommands.match(userInput);
    if ( matchCommand.matched ) {
      setUserInput("");
      setPromptHints([]);
      matchCommand.invoke();
      return;
    }
    setIsLoading(true);
    chatStore.onUserInput(fileList, userInput, attachImages).then(() => setIsLoading(false));
    setAttachImages([]);
    localStorage.setItem(LAST_INPUT_KEY, userInput);
    setUserInput("");
    setPromptHints([]);
    if ( !isMobileScreen ) inputRef.current?.focus();
    setAutoScroll(true);
  };
  
  const onPromptSelect = (prompt: RenderPrompt) => {
    setTimeout(() => {
      setPromptHints([]);
      
      const matchedChatCommand = chatCommands.match(prompt.content);
      if ( matchedChatCommand.matched ) {
        // if user is selecting a chat command, just trigger it
        matchedChatCommand.invoke();
        setUserInput("");
      } else {
        // or fill the prompt
        setUserInput(prompt.content);
      }
      inputRef.current?.focus();
    }, 30);
  };
  
  // stop response
  const onUserStop = (messageId: string) => {
    ChatControllerPool.stop(session.id, messageId);
  };
  
  useEffect(() => {
    chatStore.updateCurrentSession((session) => {
      const stopTiming = Date.now() - REQUEST_TIMEOUT_MS;
      session.messages.forEach((m) => {
        // check if should stop all stale messages
        if ( m.isError || new Date(m.date).getTime() < stopTiming ) {
          if ( m.streaming ) {
            m.streaming = false;
          }
          
          if ( m.content.length === 0 ) {
            m.isError = true;
            m.content = prettyObject({
              error: true,
              message: "empty response",
            });
          }
        }
      });
      
      // auto sync mask config from global config
      if ( session.mask.syncGlobalConfig ) {
        console.log("[Mask] syncing from global, name = ", session.mask.name);
        session.mask.modelConfig = {...config.modelConfig};
      }
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  
  // check if should send message
  const onInputKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (
        e.key === "ArrowUp" &&
        userInput.length <= 0 &&
        !(e.metaKey || e.altKey || e.ctrlKey)
    ) {
      setUserInput(localStorage.getItem(LAST_INPUT_KEY) ?? "");
      e.preventDefault();
      return;
    }
    if ( shouldSubmit(e) && promptHints.length === 0 ) {
      doSubmit(userInput);
      e.preventDefault();
    }
  };
  
  const onRightClick = (e: any, message: ChatMessage) => {
    // copy to clipboard
    if ( selectOrCopy(e.currentTarget, getMessageTextContent(message)) ) {
      if ( userInput.length === 0 ) {
        setUserInput(getMessageTextContent(message));
      }
      
      e.preventDefault();
    }
  };
  
  const deleteMessage = (msgId?: string) => {
    chatStore.updateCurrentSession(
        (session) =>
            (session.messages = session.messages.filter((m) => m.id !== msgId)),
    );
  };
  
  const onDelete = (msgId: string) => {
    deleteMessage(msgId);
  };
  
  const onResend = (message: ChatMessage) => {
    // when it is resending a message
    // 1. for a user's message, find the next bot response
    // 2. for a bot's message, find the last user's input
    // 3. delete original user input and bot's message
    // 4. resend the user's input
    
    const resendingIndex = session.messages.findIndex(
        (m) => m.id === message.id,
    );
    
    if ( resendingIndex < 0 || resendingIndex >= session.messages.length ) {
      console.error("[Chat] failed to find resending message", message);
      return;
    }
    
    let userMessage: ChatMessage | undefined;
    let botMessage: ChatMessage | undefined;
    
    if ( message.role === "assistant" ) {
      // if it is resending a bot's message, find the user input for it
      botMessage = message;
      for ( let i = resendingIndex; i >= 0; i -= 1 ) {
        if ( session.messages[i].role === "user" ) {
          userMessage = session.messages[i];
          break;
        }
      }
    } else if ( message.role === "user" ) {
      // if it is resending a user's input, find the bot's response
      userMessage = message;
      for ( let i = resendingIndex; i < session.messages.length; i += 1 ) {
        if ( session.messages[i].role === "assistant" ) {
          botMessage = session.messages[i];
          break;
        }
      }
    }
    
    if ( userMessage === undefined ) {
      console.error("[Chat] failed to resend", message);
      return;
    }
    
    // delete the original messages
    deleteMessage(userMessage.id);
    deleteMessage(botMessage?.id);
    
    // resend the message
    setIsLoading(true);
    const textContent = getMessageTextContent(userMessage);
    const images = getMessageImages(userMessage);
    chatStore.onUserInput([], textContent, images).then(() => setIsLoading(false));
    inputRef.current?.focus();
  };
  
  const onPinMessage = (message: ChatMessage) => {
    chatStore.updateCurrentSession((session) =>
        session.mask.context.push(message),
    );
    
    showToast(Locale.Chat.Actions.PinToastContent, {
      text: Locale.Chat.Actions.PinToastAction,
      onClick: () => {
        setShowPromptModal(true);
      },
    });
  };
  
  const context: RenderMessage[] = useMemo(() => {
    return session.mask.hideContext ? [] : session.mask.context.slice();
  }, [ session.mask.context, session.mask.hideContext ]);
  const accessStore = useAccessStore();
  
  if (
      context.length === 0 &&
      session.messages.at(0)?.content !== BOT_HELLO.content
  ) {
    const copiedHello = Object.assign({}, BOT_HELLO);
    if ( !accessStore.isAuthorized() ) {
      copiedHello.content = Locale.Error.Unauthorized;
    }
    context.push(copiedHello);
  }
  
  // preview messages
  const renderMessages = useMemo(() => {
    return context.concat(session.messages as RenderMessage[]).concat(
        isLoading
            ? [
              {
                ...createMessage({
                  role: "assistant",
                  content: "……",
                }),
                preview: true,
              },
            ]
            : [],
    ).concat(
        userInput.length > 0 && config.sendPreviewBubble
            ? [
              {
                ...createMessage({
                  role: "user",
                  content: userInput,
                }),
                preview: true,
              },
            ]
            : [],
    );
  }, [
    config.sendPreviewBubble,
    context,
    isLoading,
    session.messages,
    userInput,
  ]);
  
  const [ msgRenderIndex, _setMsgRenderIndex ] = useState(
      Math.max(0, renderMessages.length - CHAT_PAGE_SIZE),
  );
  
  function setMsgRenderIndex(newIndex: number) {
    newIndex = Math.min(renderMessages.length - CHAT_PAGE_SIZE, newIndex);
    newIndex = Math.max(0, newIndex);
    _setMsgRenderIndex(newIndex);
  }
  
  const messages = useMemo(() => {
    const endRenderIndex = Math.min(
        msgRenderIndex + 3 * CHAT_PAGE_SIZE,
        renderMessages.length,
    );
    return renderMessages.slice(msgRenderIndex, endRenderIndex);
  }, [ msgRenderIndex, renderMessages ]);
  
  const onChatBodyScroll = (e: HTMLElement) => {
    const bottomHeight = e.scrollTop + e.clientHeight;
    const edgeThreshold = e.clientHeight;
    
    const isTouchTopEdge = e.scrollTop <= edgeThreshold;
    const isTouchBottomEdge = bottomHeight >= e.scrollHeight - edgeThreshold;
    const isHitBottom =
        bottomHeight >= e.scrollHeight - (isMobileScreen ? 4 : 10);
    
    const prevPageMsgIndex = msgRenderIndex - CHAT_PAGE_SIZE;
    const nextPageMsgIndex = msgRenderIndex + CHAT_PAGE_SIZE;
    
    if ( isTouchTopEdge && !isTouchBottomEdge ) {
      setMsgRenderIndex(prevPageMsgIndex);
    } else if ( isTouchBottomEdge ) {
      setMsgRenderIndex(nextPageMsgIndex);
    }
    
    setHitBottom(isHitBottom);
    setAutoScroll(isHitBottom);
  };
  
  function scrollToBottom() {
    setMsgRenderIndex(renderMessages.length - CHAT_PAGE_SIZE);
    scrollDomToBottom();
  }
  
  // clear context index = context length + index in messages
  const clearContextIndex =
      (session.clearContextIndex ?? -1) >= 0
          ? session.clearContextIndex! + context.length - msgRenderIndex
          : -1;
  
  const [ showPromptModal, setShowPromptModal ] = useState(false);
  
  const clientConfig = useMemo(() => getClientConfig(), []);
  
  const autoFocus = !isMobileScreen; // wont auto focus on mobile screen
  const showMaxIcon = !isMobileScreen && !clientConfig?.isApp;
  
  useCommand({
    fill: setUserInput,
    submit: (text) => {
      doSubmit(text);
    },
    code: (text) => {
      if ( accessStore.disableFastLink ) return;
      console.log("[Command] got code from url: ", text);
      showConfirm(Locale.URLCommand.Code + `code = ${text}`).then((res) => {
        if ( res ) {
          accessStore.update((access) => (access.accessCode = text));
        }
      });
    },
    settings: (text) => {
      if ( accessStore.disableFastLink ) return;
      
      try {
        const payload = JSON.parse(text) as {
          key?: string;
          url?: string;
        };
        
        console.log("[Command] got settings from url: ", payload);
        
        if ( payload.key || payload.url ) {
          showConfirm(
              Locale.URLCommand.Settings +
              `\n${JSON.stringify(payload, null, 4)}`,
          ).then((res) => {
            if ( !res ) return;
            if ( payload.key ) {
              accessStore.update(
                  (access) => (access.openaiApiKey = payload.key!),
              );
            }
            if ( payload.url ) {
              accessStore.update((access) => (access.openaiUrl = payload.url!));
            }
            accessStore.update((access) => (access.useCustomConfig = true));
          });
        }
      } catch {
        console.error("[Command] failed to get settings from url: ", text);
      }
    },
  });
  
  // edit / insert message modal
  const [ isEditingMessage, setIsEditingMessage ] = useState(false);
  
  // remember unfinished input
  useEffect(() => {
    // try to load from local storage
    const key = UNFINISHED_INPUT(session.id);
    const mayBeUnfinishedInput = localStorage.getItem(key);
    if ( mayBeUnfinishedInput && userInput.length === 0 ) {
      setUserInput(mayBeUnfinishedInput);
      localStorage.removeItem(key);
    }
    
    const dom = inputRef.current;
    return () => {
      localStorage.setItem(key, dom?.value ?? "");
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  
  const handlePaste = useCallback(
      async (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
        const currentModel = chatStore.currentSession().mask.modelConfig.model;
        if ( !isVisionModel(currentModel) ) {
          return;
        }
        const items = (event.clipboardData || window.clipboardData).items;
        for ( const item of items ) {
          if ( item.kind === "file" && item.type.startsWith("image/") ) {
            event.preventDefault();
            const file = item.getAsFile();
            if ( file ) {
              const images: string[] = [];
              images.push(...attachImages);
              images.push(
                  ...(await new Promise<string[]>((res, rej) => {
                    setUploading(true);
                    const imagesData: string[] = [];
                    uploadImageRemote(file).then((dataUrl) => {
                      imagesData.push(dataUrl);
                      setUploading(false);
                      res(imagesData);
                    }).catch((e) => {
                      setUploading(false);
                      rej(e);
                    });
                  })),
              );
              const imagesLength = images.length;
              
              if ( imagesLength > 3 ) {
                images.splice(3, imagesLength - 3);
              }
              setAttachImages(images);
            }
          }
        }
      },
      [ attachImages, chatStore ],
  );
  
  async function uploadImage() {
    const images: string[] = [];
    images.push(...attachImages);
    
    images.push(
        ...(await new Promise<string[]>((res, rej) => {
          const fileInput = document.createElement("input");
          fileInput.type = "file";
          fileInput.accept =
              "image/png, image/jpeg, image/webp, image/heic, image/heif";
          fileInput.multiple = true;
          fileInput.onchange = (event: any) => {
            setUploading(true);
            const files = event.target.files;
            const imagesData: string[] = [];
            for ( let i = 0; i < files.length; i++ ) {
              const file = event.target.files[i];
              uploadImageRemote(file).then((dataUrl) => {
                imagesData.push(dataUrl);
                if (
                    imagesData.length === 3 ||
                    imagesData.length === files.length
                ) {
                  setUploading(false);
                  res(imagesData);
                }
              }).catch((e) => {
                setUploading(false);
                rej(e);
              });
            }
          };
          fileInput.click();
        })),
    );
    
    const imagesLength = images.length;
    if ( imagesLength > 3 ) {
      images.splice(3, imagesLength - 3);
    }
    setAttachImages(images);
  }
  
  const [ fileList, setFileList ] = useState<any[]>([]);
  
  // 上传配置
  const uploadConfig: UploadProps = {
    action: '/deepseek-api' + '/upload/file',
    method: 'POST',
    accept: [ '.pdf', '.txt', '.doc', '.docx' ].join(','),
  };
  
  interface FileIconProps {
    fileName: string;
  }
  
  const FileIcon: React.FC<FileIconProps> = (props: FileIconProps) => {
    const style = {
      fontSize: '30px',
      color: '#3875f6',
    }
    
    let icon = <FileOutlined style={style}/>
    if ( props.fileName ) {
      const suffix = props.fileName.split('.').pop() || '';
      switch ( suffix ) {
        case 'pdf':
          icon = <FilePdfOutlined style={style}/>
          break;
        case 'txt':
          icon = <FileTextOutlined style={style}/>
          break;
        case 'doc':
        case 'docx':
          icon = <FileWordOutlined style={style}/>
          break;
        default:
          break;
      }
    }
    return icon;
  }
  
  const [ isDeepThink, setIsDeepThink ] = useState<boolean>(chatStore.isDeepThink);
  
  // 切换聊天窗口后清理上传文件信息
  useEffect(() => {
    setFileList([])
  }, [ chatStore.currentSession() ])
  
  const couldStop = ChatControllerPool.hasPending();
  const stopAll = () => ChatControllerPool.stopAll();
  
  return (
      <div className={styles.chat} key={session.id}>
        {
            isMobileScreen &&
            <div className="window-header" data-tauri-drag-region>
              <div style={{display: 'flex', alignItems: 'center'}}
                   className={`window-header-title ${styles["chat-body-title"]}`}>
                <div>
                  <IconButton
                      style={{padding: 0, marginRight: 20}}
                      icon={<LeftIcon/>}
                      text={Locale.NewChat.Return}
                      onClick={() => navigate('/deepseekChat')}
                  />
                </div>
              </div>
            </div>
        }
        <div
            className={styles["chat-body"]}
            ref={scrollRef}
            onScroll={(e) => onChatBodyScroll(e.currentTarget)}
            onMouseDown={() => inputRef.current?.blur()}
            onTouchStart={() => {
              inputRef.current?.blur();
              setAutoScroll(false);
            }}
        >
          <>
            {messages.map((message, i) => {
              const isUser = message.role === "user";
              const isContext = i < context.length;
              const showActions =
                  i > 0 &&
                  !(message.preview || message.content.length === 0) &&
                  !isContext;
              const showTyping = message.preview || message.streaming;
              
              const shouldShowClearContextDivider = i === clearContextIndex - 1;
              
              return (
                  <Fragment key={message.id}>
                    <div
                        className={
                          isUser ? styles["chat-message-user"] : styles["chat-message"]
                        }
                    >
                      <div className={styles["chat-message-container"]}
                           style={{display: 'flex', flexDirection: isUser ? 'column' : 'row'}}>
                        <div className={styles["chat-message-header"]}>
                          <div className={styles["chat-message-avatar"]}>
                            {isUser ? null : (
                                <img src={avatar.src} style={{width: 40, marginRight: 10}}/>
                            )}
                          </div>
                        </div>
                        {
                            isUser && message.document && message.document.id &&
                            <a style={{
                              padding: '10px',
                              background: '#f7f7f7',
                              borderRadius: '10px',
                              textDecoration: 'none',
                              color: '#24292f',
                              display: 'flex',
                              alignItems: 'center'
                            }} href={message.document.url} target="_blank">
                              <FileIcon fileName={message.document.name}/>
                              <div style={{marginLeft: 8, fontSize: '14px'}}>
                                {message.document.name}
                              </div>
                            </a>
                        }
                        {/* {showTyping && (
                      <div className={styles["chat-message-status"]}>
                        正在输入…
                      </div>
                    )} */}
                        <div className={styles["chat-message-item"]} style={{marginTop: 20}}>
                          <Markdown
                              key={message.streaming ? "loading" : "done"}
                              content={getMessageTextContent(message)}
                              loading={
                                  (message.preview || message.streaming) &&
                                  message.content.length === 0 &&
                                  !isUser
                              }
                              onDoubleClickCapture={() => {
                                if ( !isMobileScreen ) return;
                                setUserInput(getMessageTextContent(message));
                              }}
                              fontSize={fontSize}
                              fontFamily={fontFamily}
                              parentRef={scrollRef}
                              defaultShow={i >= messages.length - 6}
                          />
                          {getMessageImages(message).length == 1 && (
                              <img
                                  className={styles["chat-message-item-image"]}
                                  src={getMessageImages(message)[0]}
                                  alt=""
                              />
                          )}
                          {getMessageImages(message).length > 1 && (
                              <div
                                  className={styles["chat-message-item-images"]}
                                  style={
                                    {
                                      "--image-count": getMessageImages(message).length,
                                    } as React.CSSProperties
                                  }
                              >
                                {getMessageImages(message).map((image, index) => {
                                  return (
                                      <img
                                          className={
                                            styles["chat-message-item-image-multi"]
                                          }
                                          key={index}
                                          src={image}
                                          alt=""
                                      />
                                  );
                                })}
                              </div>
                          )}
                        </div>
                      </div>
                    </div>
                    {shouldShowClearContextDivider && <ClearContextDivider/>}
                  </Fragment>
              );
            })}
          </>
        </div>
        <div className={styles["chat-input-panel"]}>
          <ChatActions
              setUserInput={setUserInput}
              doSubmit={doSubmit}
              uploadImage={uploadImage}
              setAttachImages={setAttachImages}
              setUploading={setUploading}
              showPromptModal={() => setShowPromptModal(true)}
              scrollToBottom={scrollToBottom}
              hitBottom={hitBottom}
              uploading={uploading}
              showPromptHints={() => {
                if ( promptHints.length > 0 ) {
                  setPromptHints([]);
                  return;
                }
                inputRef.current?.focus();
                setUserInput("/");
                onSearch("");
              }}
          />
          {
              fileList.length > 0 &&
              <div style={{marginBottom: 20}}>
                <Upload
                    fileList={fileList}
                    onRemove={(file) => {
                      setFileList(fileList.filter(item => item.uid !== file.uid));
                    }}
                />
              </div>
          }
          <label
              className={`${styles["chat-input-panel-inner"]} ${attachImages.length != 0
                  ? styles["chat-input-panel-inner-attach"]
                  : ""
              }`}
              htmlFor="chat-input"
          >
          <textarea
              id="chat-input"
              ref={inputRef}
              className={styles["chat-input2"]}
              placeholder={Locale.Chat.Input(submitKey)}
              onInput={(e) => onInput(e.currentTarget.value)}
              value={userInput}
              onKeyDown={onInputKeyDown}
              onFocus={scrollToBottom}
              onClick={scrollToBottom}
              onPaste={handlePaste}
              rows={inputRows}
              autoFocus={autoFocus}
              style={{
                fontSize: config.fontSize,
                fontFamily: config.fontFamily,
              }}
          />
            {attachImages.length != 0 && (
                <div className={styles["attach-images"]}>
                  {attachImages.map((image, index) => {
                    return (
                        <div
                            key={index}
                            className={styles["attach-image"]}
                            style={{backgroundImage: `url("${image}")`}}
                        >
                          <div className={styles["attach-image-mask"]}>
                            <DeleteImageButton
                                deleteImage={() => {
                                  setAttachImages(
                                      attachImages.filter((_, i) => i !== index),
                                  );
                                }}
                            />
                          </div>
                        </div>
                    );
                  })}
                </div>
            )}
          </label>
          <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 10}}>
            <div style={{display: 'flex', alignItems: 'center'}}>
              {/*深度思考R1按钮*/}
              <Tooltip
                  title={
                    <span style={{
                      fontSize: 12,
                      lineHeight: 1.4,
                      minHeight: 24,
                      padding: '4px 8px',
                      
                    }}>
                      {isDeepThink ? '关闭深度思考模式' : '启用深度思考模式 (R1模型)'}
                    </span>
                  }
                  placement="left"
              >
                <div
                    style={{
                      padding: '0 12px',
                      height: 28,
                      borderRadius: 18,
                      fontSize: 12,
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                      marginRight: 20,
                      cursor: 'pointer',
                      background: isDeepThink ? '#dee9fc' : '#f3f4f6',
                      color: isDeepThink ? '#3875f6' : '#000000',
                      border: `1px solid ${isDeepThink ? '#3875f6' : 'transparent'}`,
                      transition: 'all 0.2s ease',
                      userSelect: 'none'
                    }}
                    onClick={() => {
                      setIsDeepThink(!isDeepThink);
                      chatStore.setIsDeepThink(!isDeepThink);
                    }}
                >
                  <img
                      src={isDeepThink ? sdsk_selected.src : sdsk.src}
                      style={{
                        height: 18,
                        
                      }}
                  />
                  <div style={{marginLeft: 5}}>
                    深度思考 (R1)
                  </div>
                </div>
              </Tooltip>
              {/*联网搜索按钮*/}
              <div
                  style={{
                    padding: '0 12px',
                    height: 28,
                    borderRadius: 18,
                    fontSize: 12,
                    background: '#f3f4f6',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center'
                  }}
              >
                <img
                    src={hlw.src}
                    style={{
                      height: 18
                    }}
                />
                <div style={{marginLeft: 5}}>
                  联网搜索
                </div>
              </div>
            </div>
            <div style={{display: 'flex', alignItems: 'center'}}>
              <div style={{marginRight: 20}}>
                <Tooltip
                    title={
                      <div style={{ padding: '4px 8px' }}>
                        <div style={{
                          fontSize: 12,
                          lineHeight: 1.4,
                          marginBottom: 6,
                        }}>
                          上传附件 (识别文本和图表中的内容)
                        </div>
                        <div style={{
                          fontSize: 10,
                          color: '#8c8c8c',
                          lineHeight: 1.4,
                        }}>
                          仅支持单个PDF/Word/TXT文件格式 (单个文件≤50MB)
                        </div>
                      </div>
                    }
                    placement="top"
                >
                  <Upload
                      {...uploadConfig}
                      showUploadList={false}
                      maxCount={1}
                      onChange={(info) => {
                        const fileList = info.fileList.map((file) => {
                          const data = file.response;
                          return {
                            ...file,
                            url: data?.document_url || file.url,
                            documentId: data?.document_id || '',
                          }
                        });
                        setFileList(fileList);
                        if ( info.file.status === 'done' ) {// 上传成功
                          const {code, message: msg} = info.file.response;
                          if ( code === 200 ) {
                            message.success('上传成功');
                          } else {
                            message.error(msg);
                          }
                        } else if ( info.file.status === 'error' ) {// 上传失败
                          message.error('上传失败');
                        }
                      }}
                  >
                    <div
                        style={{
                          width: 28,
                          height: 28,
                          borderRadius: '50%',
                          background: '#4357d2',
                          display: 'flex',
                          justifyContent: 'center',
                          alignItems: 'center',
                          cursor: 'pointer',
                          transition: 'all 0.2s ease',
                          userSelect: 'none'
                        }}
                    >
                      <PaperClipOutlined style={{color: '#FFFFFF', fontSize: '18px'}}/>
                    </div>
                  </Upload>
                </Tooltip>
              </div>
              <div
                  style={{
                    width: 28,
                    height: 28,
                    borderRadius: '50%',
                    background: '#4357d2',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    cursor: 'pointer',
                  }}
                  onClick={() => {
                    if ( couldStop ) {
                      stopAll();
                    } else {
                      doSubmit(userInput);
                    }
                  }}
              >
                {
                  couldStop ?
                      <div style={{width: 13, height: 13, background: '#FFFFFF', borderRadius: 2}}></div>
                      :
                      <div style={{transform: 'rotate(-45deg)', padding: '0px 0px 3px 5px'}}>
                        <SendOutlined style={{color: '#FFFFFF'}}/>
                      </div>
                }
                <div>
                </div>
              </div>
            </div>
          </div>
          <div style={{marginTop: 10, textAlign: 'center', color: '#888888', fontSize: 12}}>
            内容由AI生成，仅供参考
          </div>
        </div>
        {
            showExport && (
                <ExportMessageModal onClose={() => setShowExport(false)}/>
            )
        }
        {
            isEditingMessage && (
                <EditMessageModal
                    onClose={() => {
                      setIsEditingMessage(false);
                    }}
                />
            )
        }
      </div>
  );
}

export function Chat() {
  const chatStore = useChatStore();
  const sessionIndex = chatStore.currentSessionIndex;
  
  useEffect(() => {
    chatStore.setModel('DeepSeek');
  }, []);
  
  return <_Chat key={sessionIndex}></_Chat>;
}