bug:移动设备ui问题

Version information (版本信息)

ChatUI or ChatUI Pro? chatUI
ChatUI Version:1.2.1
React Version:17.0.2
OS Version:mac11.6
Browser Version:chrome版本 92.0.4515.131（正式版本） (x86_64)

Describe the bug (描述问题) 当使用浏览器中的调试模式移动设备或直接在手机上运行时，当输入框取到focus后聊天消息显示框会自动下移到输入框附近。

Steps To Reproduce (重现步骤)

用webstore新建react项目

复制chatui示例代码到app.js：


import React from 'react';
import '@chatui/core/es/styles/index.less';
// 引入组件
import Chat, { Bubble, useMessages } from '@chatui/core';
// 引入样式
import '@chatui/core/dist/index.css';

const initialMessages = [ { type: 'text', content: { text: '主人好，我是智能助理，你的贴心小助手~' }, user: { avatar: '//gw.alicdn.com/tfs/TB1DYHLwMHqK1RjSZFEXXcGMXXa-56-62.svg' }, }, { type: 'image', content: { picUrl: '//img.alicdn.com/tfs/TB1p_nirYr1gK0jSZR0XXbP8XXa-300-300.png', }, }, ];

const toolbar = [ { type: 'image', icon: 'image', title: '相册', }, { type: 'speech', icon: 'mic', title: '语音输入' } ];

// 默认快捷短语，可选 const defaultQuickReplies = [ { icon: 'message', name: '联系人工服务', isNew: true, isHighlight: true, }, { name: '短语1', isNew: true, }, { name: '短语2', isHighlight: true, }, { name: '短语3', }, ];

// eslint-disable-next-line import/no-anonymous-default-export export default function() { // 消息列表 const { messages, appendMsg, setTyping } = useMessages(initialMessages);

// 发送回调 function handleSend(type, val) { if (type === 'text' && val.trim()) { // TODO: 发送请求 appendMsg({ type: 'text', content: { text: val }, position: 'right', });

  setTyping(true);

  // 模拟回复消息
  setTimeout(() => {
    appendMsg({
      type: 'text',
      content: { text: '亲，您遇到什么问题啦？请简要描述您的问题~' },
    });
  }, 1000);
}

}

// 快捷短语回调，可根据 item 数据做出不同的操作，这里以发送文本消息为例 function handleQuickReplyClick(item) { handleSend('text', item.name); }

function ToolbarClick (item, ctx) { if (item.type === 'speech') { // // 这里改成 App 提供的 bridge 方法 // nativeInvoke('speech', (text) => { // if (text) { // // 通过 setText 更新输入框内容 // // bot.appRef.current.setText(text); // } // }); } }

function renderMessageContent(msg) { const { type, content } = msg;

// 根据消息类型来渲染
switch (type) {
  case 'text':
    return <Bubble content={content.text} />;
  case 'image':
    return (
        <Bubble type="image">
          <img src={content.picUrl} alt="" />
        </Bubble>
    );
  default:
    return null;
}

}

return ( <Chat navbar={{ title: '智能助理' }} messages={messages} renderMessageContent={renderMessageContent} quickReplies={defaultQuickReplies} onQuickReplyClick={handleQuickReplyClick} onSend={handleSend} placeholder={'请输入...'} toolbar={toolbar} onToolbarClick={ToolbarClick} /> ); }

3.index.html文件代码：

<!DOCTYPE html>

React App


4.npm start
5.在chrome浏览器开启开发者模式，设置为移动设备状态。
6.点击输入框
7.bug出现，消息内容直接显示到输入框附近。

**Link to minimal reproduction (最小化重现链接)**
以下是工程源代码
https://github.com/jacoblai/charuitest

**Expected behavior (期望的结果是什么)**
希望能正常显示消息。

alibaba / ChatUI

bug:移动设备ui问题 #78