chat-tools/app/components/DeepSeekChat.tsx

// 第三方库导入
import { useDebouncedCallback } from "use-debounce";
import React, {
  useState,
  useRef,
  useEffect,
  useMemo,
  useCallback,
  Fragment,
  RefObject,
} from "react";
import dynamic from "next/dynamic";
import { useNavigate, useLocation } from "react-router-dom";

// 本地组件和工具导入
import { IconButton } from "./button";
import { MaskAvatar } from "./mask";
import styles from "./chat.module.scss";

// 图标资源导入
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 hlw_selected from "../icons/hlw_selected.png";
import BotIcon from "../icons/bot.svg";
import BlackBotIcon from "../icons/black-bot.svg";

// 状态管理和类型导入
import {
  ChatMessage,
  SubmitKey,
  useChatStore,
  useAccessStore,
  Theme,
  useAppConfig,
  DEFAULT_TOPIC,
  ModelType,
  useGlobalStore,
} from "../store";
import { Prompt, usePromptStore } from "../store/prompt";

// 工具函数导入
import {
  copyToClipboard,
  selectOrCopy,
  autoGrowTextArea,
  useMobileScreen,
  getMessageTextContent,
  getMessageImages,
  isVisionModel,
  isDalle3,
} from "../utils";
import { uploadImage as uploadImageRemote } from "@/app/utils/chat";

// 客户端和类型导入
import { ChatControllerPool } from "../client/controller";
import { DalleSize } from "../typing";
import type { RequestMessage } from "../client/api";

// UI 组件导入
import {
  List,
  ListItem,
  Modal,
  Selector,
  showConfirm,
  showToast,
} from "./ui-lib";

// 常量和本地化
import Locale from "../locales";
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, Drawer, Button } from "antd";
import {
  PaperClipOutlined,
  SendOutlined,
  FileOutlined,
  FilePdfOutlined,
  FileTextOutlined,
  FileWordOutlined,
  RightOutlined
} from '@ant-design/icons';

// Avatar组件替代实现
function Avatar( props : { model? : string; avatar? : string } ) {
  if ( props.model ) {
    return (
        <div className="no-dark">
          { props.model?.startsWith( "gpt-4" ) ? (
              <BlackBotIcon className="user-avatar" />
          ) : (
              <BotIcon className="user-avatar" />
          ) }
        </div>
    );
  }
  
  return (
      <div className="user-avatar">
        {/* 移除emoji头像，使用默认bot图标 */ }
        <BotIcon className="user-avatar" />
      </div>
  );
}

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

export const BOT_HELLO : ChatMessage = createMessage( {
  role: "assistant",
  content: '你好，我是小智~\n' +
      '我可以帮助你快速查询作业指导书、规范条文、公司信息等内容，如需获取上述内容，请点击上方导航栏中的「专业知识」或「职能管理」，选择相应的智能体进行提问。无论是现场技术，还是制度流程，我都会尽力为你解答！\n' +
      '请注意：在这个对话框内，我只能请DeepSeek来帮忙回答常见通用问题哦！',
} );

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();
  config.sendPreviewBubble = false;
  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.MaskChat),  // 关闭mask入口 ，后续有需求再二开
    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();
  
  // 切换聊天窗口后清理上传文件信息
  useEffect( () => {
    setWebSearch( false );
  }, [ chatStore.currentSession() ] )
  
  const [ webSearch, setWebSearch ] = useState<boolean>( chatStore.web_search );
  
  const [ drawerOpen, setDrawerOpen ] = useState( false );
  type DrawerList = {
    title : string,
    content : string,
    web_url : string,
  }[]
  const [ drawerList, setDrawerList ] = useState<DrawerList>( [] );
  
  interface NetworkDrawerProps {
    list : DrawerList,
  }
  
  const NetworkDrawer : React.FC<NetworkDrawerProps> = ( props ) => {
    return (
        <Drawer
            title='网页搜索'
            open={ drawerOpen }
            onClose={ () => {
              setDrawerOpen( false );
            } }
        >
          { props.list.map( ( item, index ) => {
            return <div
                style={ {
                  padding: 10,
                  background: '#fafafa',
                  borderRadius: 4,
                  marginBottom: 10,
                  cursor: 'pointer',
                } }
                key={ index }
                onClick={ () => {
                  window.open( item.web_url );
                } }
            >
              <div style={ {
                margin: '5px 0',
                fontSize: 16,
                display: '-webkit-box',
                WebkitBoxOrient: 'vertical',
                WebkitLineClamp: 2,// 限制显示两行
                overflow: 'hidden',
              } }>
                { item.title }
              </div>
              <div style={ {
                color: '#afafaf',
                display: '-webkit-box',
                WebkitBoxOrient: 'vertical',
                WebkitLineClamp: 4,// 限制显示两行
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              } }>
                { item.content }
              </div>
            </div>
          } )
          }
        </Drawer>
    )
  }
  
  return (
      <div className={ styles.chat } key={ session.id }>
        {
            isMobileScreen && location.pathname !== '/' &&
            <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: 'column' } }>
                        <div className={ styles[ "chat-message-header" ] }>
                          <div className={ styles[ "chat-message-avatar" ] }>
                            { isUser ? (
                                // 在这里换头像
                                <div style={ { position: 'relative' } }>
                                  <div
                                      style={ {
                                        position: 'absolute',
                                        zIndex: 2,
                                        top: '50%',
                                        left: '50%',
                                        transform: ' translate(-110%, -100%)',
                                        fontSize: 14,
                                      } }>
                                    我
                                  </div>
                                </div>
                            ) : (
                                <>
                                  { [ "system" ].includes( message.role ) ? (
                                      <Avatar avatar="2699-fe0f" />
                                  ) : (
                                      <MaskAvatar
                                          avatar={ session.mask.avatar }
                                          model={
                                              message.model || session.mask.modelConfig.model
                                          }
                                      />
                                  ) }
                                </>
                            ) }
                          </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>
                    )} */ }
                        {
                            message.networkInfo && message.networkInfo.list.length > 0 &&
                            <div style={ { marginTop: 10 } }>
                              <Button
                                  icon={ <RightOutlined /> }
                                  iconPosition='end'
                                  onClick={ () => {
                                    setDrawerList( message.networkInfo!.list );
                                    setDrawerOpen( true );
                                  } }
                              >
                                搜索到{ message.networkInfo.list.length }篇相关资料
                              </Button>
                              {
                                  drawerOpen &&
                                  <NetworkDrawer
                                      list={ message.networkInfo.list }
                                  />
                              }
                            </div>
                        }
                        <div className={ styles[ "chat-message-item" ] }>
                          <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>
            ) }
            {/* 修改样式：输入框内部按钮区域 */ }
            {/* <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}> */ }
            <div className={ styles[ "chat-input-bottom-bar" ] }>
              {/* <div style={{ display: 'flex', alignItems: 'center' }}> */ }
              <div className={ styles[ "left-options" ] }>
                
                {/*深度思考R1按钮*/ }
                
                <Tooltip
                    title={
                      <span style={ { fontSize: 12, lineHeight: 1.4, minHeight: 24, padding: '4px 8px' } }>
                    { isDeepThink ? '关闭深度思考模式' : '启用深度思考模式' }
                  </span>
                    }
                    placement="left"
                >
                  <div
                      // className={styles["option-item"]}
                      style={ {
                        padding: '0 12px',
                        height: 28,
                        borderRadius: 18,
                        fontSize: 12,
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        // marginRight: 10,
                        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={ {
                           width: 16,
                           height: 16,
                         } }
                    />
                    <span style={ { fontSize: 11, marginLeft: 5 } }>
                      深度思考
                    </span>
                  </div>
                </Tooltip>
                {/*联网搜索按钮*/ }
                <div style={ {
                  padding: '0 12px',
                  height: 28,
                  borderRadius: 18,
                  fontSize: 12,
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  cursor: 'pointer',
                  background: webSearch ? '#dee9fc' : '#f3f4f6',
                  color: webSearch ? '#3875f6' : '#000000',
                  transition: 'all 0.2s ease',
                  userSelect: 'none'
                } }
                     onClick={ () => {
                       setWebSearch( !webSearch );
                       chatStore.setWebSearch( !webSearch );
                     } }
                >
                  
                  <img src={ webSearch ? hlw_selected.src : hlw.src }
                       style={ {
                         width: 16,
                         height: 16,
                       } }
                  />
                  <span style={ { fontSize: 11, marginLeft: 5, marginRight: 10 } }>
                    联网搜索
                  </span>
                </div>
              </div>
              
              <div style={ { display: 'flex', alignItems: 'center' } }>
                {
                    !webSearch &&
                    <div style={ { marginRight: 10 } }>
                      <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( '上传失败' );
                            }
                          } }
                      >
                        <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,
                            }}>
                              <span>
                              仅支持单个PDF/Word/TXT文件格式
                              </span>
                              <span>
                              (单个文件≤50MB)
                              </span>

                              </div>
                              </div>}
                            placement="top"
                        >
                          <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>
                        </Tooltip>
                      </Upload>
                    </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>
          </label>
          
          <div style={ { marginTop: 8, textAlign: 'center', color: '#888888', fontSize: 12 } }>
            内容由AI生成，仅供参考
          </div>
        </div>
        {
            showExport && (
                <ExportMessageModal onClose={ () => setShowExport( false ) } />
            )
        }
        {
            isEditingMessage && (
                <EditMessageModal
                    onClose={ () => {
                      setIsEditingMessage( false );
                    } }
                />
            )
        }
      </div>
  );
}

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