import Conversation from '@/features/Conversation';
import { isMobileDevice } from '@/utils/responsive';

import ChatHydration from './features/ChatHydration';
import DesktopChatInput from './features/ChatInput/Desktop';
import MobileChatInput from './features/ChatInput/Mobile';

const ChatConversation = () => {
  const mobile = isMobileDevice();
  const ChatInput = mobile ? MobileChatInput : DesktopChatInput;

  return (
    <>
      <Conversation mobile={mobile} />

      <ChatInput />

      <div style={{ backgroundColor: "rgba(200, 205, 220, 0.2)", color: '#909090', fontSize: '13px'}}>
        <span style={{ display: 'inline-block', }}>文字输入快捷键提示:</span>
        <span style={{ display: 'inline-block', fontSize: "20px", margin: "0px 13px" }}>&crarr;</span>
        <span>键 发送 </span>
        <span style={{ display: 'inline-block', fontSize: "20px", marginLeft: '30px', marginRight: '11px' }}>&crarr;</span>
        <span>键 + Ctrl 键  换行</span>
      </div>

      <ChatHydration />
    </>
  );
};

ChatConversation.displayName = 'ChatConversation';

export default ChatConversation;
