@chatui/core/es/components/Chat/index.js

The React library for Chatbot UI

import React, { useEffect } from 'react';
import { ConfigProvider } from '../ConfigProvider';
import { useColorScheme } from '../../hooks/useColorScheme';
import { Navbar } from '../Navbar';
import { MessageContainer } from '../MessageContainer';
import { QuickReplies } from '../QuickReplies';
import { Composer as DComposer } from '../Composer';
import { isSafari, isHuaweiBrowser, getIOSMajorVersion } from '../../utils/ua';
export var Chat = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var wideBreakpoint = props.wideBreakpoint,
    _props$locale = props.locale,
    locale = _props$locale === void 0 ? 'zh-CN' : _props$locale,
    locales = props.locales,
    colorScheme = props.colorScheme,
    elderMode = props.elderMode,
    navbar = props.navbar,
    renderNavbar = props.renderNavbar,
    loadMoreText = props.loadMoreText,
    renderBeforeMessageList = props.renderBeforeMessageList,
    messagesRef = props.messagesRef,
    onRefresh = props.onRefresh,
    onScroll = props.onScroll,
    _props$messages = props.messages,
    messages = _props$messages === void 0 ? [] : _props$messages,
    isTyping = props.isTyping,
    renderMessageContent = props.renderMessageContent,
    onBackBottomShow = props.onBackBottomShow,
    onBackBottomClick = props.onBackBottomClick,
    _props$quickReplies = props.quickReplies,
    quickReplies = _props$quickReplies === void 0 ? [] : _props$quickReplies,
    quickRepliesVisible = props.quickRepliesVisible,
    _props$onQuickReplyCl = props.onQuickReplyClick,
    onQuickReplyClick = _props$onQuickReplyCl === void 0 ? function () {} : _props$onQuickReplyCl,
    onQuickReplyScroll = props.onQuickReplyScroll,
    renderQuickReplies = props.renderQuickReplies,
    text = props.text,
    textOnce = props.textOnce,
    placeholder = props.placeholder,
    onInputFocus = props.onInputFocus,
    onInputChange = props.onInputChange,
    onInputBlur = props.onInputBlur,
    onSend = props.onSend,
    onBeforeSend = props.onBeforeSend,
    onImageSend = props.onImageSend,
    inputOptions = props.inputOptions,
    composerRef = props.composerRef,
    inputType = props.inputType,
    onInputTypeChange = props.onInputTypeChange,
    recorder = props.recorder,
    toolbar = props.toolbar,
    onToolbarClick = props.onToolbarClick,
    onAccessoryToggle = props.onAccessoryToggle,
    rightAction = props.rightAction,
    enableNewVoiceInput = props.enableNewVoiceInput,
    _props$Composer = props.Composer,
    Composer = _props$Composer === void 0 ? DComposer : _props$Composer,
    isX = props.isX;
  var currentColorScheme = useColorScheme(colorScheme);
  function handleInputFocus(e) {
    if (messagesRef && messagesRef.current) {
      messagesRef.current.scrollToEnd({
        animated: false,
        force: true
      });
    }
    if (onInputFocus) {
      onInputFocus(e);
    }
  }
  useEffect(function () {
    var rootEl = document.documentElement;
    if (isSafari || isHuaweiBrowser) {
      rootEl.dataset.safari = '';
    }
    var v = getIOSMajorVersion();
    if (v) {
      if (v < 11) {
        // iOS 9、10 不支持按钮使用 flex
        rootEl.classList.add('no-btn-flex');
      }
      if (v < 13) {
        rootEl.classList.add('no-scrolling');
      }
    }
  }, []);
  return /*#__PURE__*/React.createElement(ConfigProvider, {
    locale: locale,
    locales: locales,
    colorScheme: currentColorScheme,
    elderMode: elderMode
  }, /*#__PURE__*/React.createElement("div", {
    className: "ChatApp",
    "data-elder-mode": elderMode,
    "data-x": isX,
    ref: ref
  }, renderNavbar ? renderNavbar() : navbar && /*#__PURE__*/React.createElement(Navbar, navbar), /*#__PURE__*/React.createElement(MessageContainer, {
    ref: messagesRef,
    loadMoreText: loadMoreText,
    messages: messages,
    isTyping: isTyping,
    renderBeforeMessageList: renderBeforeMessageList,
    renderMessageContent: renderMessageContent,
    onRefresh: onRefresh,
    onScroll: onScroll,
    onBackBottomShow: onBackBottomShow,
    onBackBottomClick: onBackBottomClick
  }), /*#__PURE__*/React.createElement("div", {
    className: "ChatFooter"
  }, renderQuickReplies ? renderQuickReplies() : /*#__PURE__*/React.createElement(QuickReplies, {
    items: quickReplies,
    visible: quickRepliesVisible,
    onClick: onQuickReplyClick,
    onScroll: onQuickReplyScroll
  }), /*#__PURE__*/React.createElement(Composer, {
    wideBreakpoint: wideBreakpoint,
    ref: composerRef,
    inputType: inputType,
    text: text,
    textOnce: textOnce,
    inputOptions: inputOptions,
    placeholder: placeholder,
    onAccessoryToggle: onAccessoryToggle,
    recorder: recorder,
    toolbar: toolbar,
    onToolbarClick: onToolbarClick,
    onInputTypeChange: onInputTypeChange,
    onFocus: handleInputFocus,
    onChange: onInputChange,
    onBlur: onInputBlur,
    onSend: onSend,
    onBeforeSend: onBeforeSend,
    onImageSend: onImageSend,
    rightAction: rightAction,
    enableNewVoiceInput: enableNewVoiceInput
  }))));
});