@dpocean/chatui 1.0.0

package/es/components/Chat/index.js

@@ -0,0 +1,157 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import { ConfigProvider } from '../ConfigProvider';
+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,
+    _props$Composer = props.Composer,
+    Composer = _props$Composer === void 0 ? DComposer : _props$Composer,
+    isX = props.isX;
+  var _useState = useState('light'),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentColorScheme = _useState2[0],
+    setCurrentColorScheme = _useState2[1];
+  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');
+      }
+    }
+  }, []);
+  useEffect(function () {
+    var updateColorScheme = function updateColorScheme(scheme) {
+      setCurrentColorScheme(scheme);
+      document.documentElement.dataset.colorScheme = scheme;
+    };
+    if (colorScheme === 'auto') {
+      var colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      var handleColorSchemeChange = function handleColorSchemeChange(e) {
+        updateColorScheme(e.matches ? 'dark' : 'light');
+      };
+      colorSchemeQuery.addEventListener('change', handleColorSchemeChange);
+      handleColorSchemeChange(colorSchemeQuery);
+      return function () {
+        colorSchemeQuery.removeEventListener('change', handleColorSchemeChange);
+      };
+    } else if (colorScheme === 'dark') {
+      updateColorScheme(colorScheme);
+    }
+    return;
+  }, [colorScheme]);
+  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
+  }))));
+});

package/es/components/Chat/style.less

@@ -0,0 +1,68 @@
+& when (@global-style = true) {
+  html {
+    height: 100vh;
+
+    &[data-safari] {
+      height: calc(100vh - calc(100vh - 100%));
+    }
+  }
+
+  body,
+  #root {
+    height: 100%;
+  }
+
+  body {
+    overflow: hidden;
+    margin: 0;
+  }
+
+  @media (hover: none) {
+    body {
+      user-select: none;
+      -webkit-touch-callout: none;
+    }
+  }
+}
+
+.ChatApp {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--app-bg);
+  color: @body-color;
+  font-family: @font-family-base;
+  line-height: @line-height-base;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.S--focusing {
+  --safe-bottom: 0px;
+}
+
+// only for iOS
+@supports (-webkit-touch-callout: none) {
+  .S--focusing {
+    .MessageList {
+      margin-top: 75vh;
+    }
+  }
+}
+
+.ChatFooter {
+  position: relative;
+  z-index: @zindex-footer;
+  padding-bottom: var(--safe-bottom);
+  background: var(--footer-bg);
+}
+
+@media (max-width: 374px) {
+  :root {
+    --msg-avatar-gap: 3Px;
+    --rate-width: 24Px;
+  }
+  .MessageList {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+}

package/es/components/Checkbox/Checkbox.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "label", "checked", "disabled", "onChange"];
+import React from 'react';
+import clsx from 'clsx';
+export var Checkbox = function Checkbox(props) {
+  var className = props.className,
+    label = props.label,
+    checked = props.checked,
+    disabled = props.disabled,
+    onChange = props.onChange,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("label", {
+    className: clsx('Checkbox', className, {
+      'Checkbox--checked': checked,
+      'Checkbox--disabled': disabled
+    })
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: "checkbox",
+    className: "Checkbox-input",
+    checked: checked,
+    disabled: disabled,
+    onChange: onChange
+  }, other)), /*#__PURE__*/React.createElement("span", {
+    className: "Checkbox-text"
+  }, label));
+};

package/es/components/Checkbox/CheckboxGroup.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Checkbox } from './Checkbox';
+export var CheckboxGroup = function CheckboxGroup(props) {
+  var className = props.className,
+    options = props.options,
+    value = props.value,
+    name = props.name,
+    disabled = props.disabled,
+    block = props.block,
+    align = props.align,
+    maxPerRow = props.maxPerRow,
+    flex = props.flex,
+    onChange = props.onChange;
+  function handleChange(val, e) {
+    var newValue = e.target.checked ? value.concat(val) : value.filter(function (item) {
+      return item !== val;
+    });
+    onChange(newValue, e);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('CheckboxGroup', {
+      'CheckboxGroup--block': block
+    }, className),
+    "data-align": align,
+    "data-layout": flex ? 'flex' : maxPerRow,
+    style: maxPerRow && !flex ? {
+      '--max-per-row': maxPerRow
+    } : undefined
+  }, options.map(function (item) {
+    return /*#__PURE__*/React.createElement(Checkbox, {
+      label: item.label || item.value,
+      value: item.value,
+      name: name,
+      checked: value.includes(item.value),
+      disabled: 'disabled' in item ? item.disabled : disabled,
+      onChange: function onChange(e) {
+        handleChange(item.value, e);
+      },
+      key: item.value
+    });
+  }));
+};

package/es/components/Checkbox/index.js

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export { CheckboxGroup } from './CheckboxGroup';

package/es/components/ClickOutside/index.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "onClick", "mouseEvent"];
+import React, { useEffect, useRef } from 'react';
+var doc = document;
+var html = doc.documentElement;
+export var ClickOutside = function ClickOutside(props) {
+  var children = props.children,
+    onClick = props.onClick,
+    _props$mouseEvent = props.mouseEvent,
+    mouseEvent = _props$mouseEvent === void 0 ? 'mouseup' : _props$mouseEvent,
+    others = _objectWithoutProperties(props, _excluded);
+  var wrapper = useRef(null);
+  function handleClick(e) {
+    if (!wrapper.current) return;
+    if (html.contains(e.target) && !wrapper.current.contains(e.target)) {
+      onClick(e);
+    }
+  }
+  useEffect(function () {
+    if (mouseEvent) {
+      doc.addEventListener(mouseEvent, handleClick);
+    }
+    return function () {
+      doc.removeEventListener(mouseEvent, handleClick);
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: wrapper
+  }, others), children);
+};

package/es/components/ComponentsProvider/ComponentsContext.js

@@ -0,0 +1,10 @@
+import React from 'react';
+export var ComponentsContext = /*#__PURE__*/React.createContext({
+  addComponent: function addComponent() {},
+  hasComponent: function hasComponent() {
+    return false;
+  },
+  getComponent: function getComponent() {
+    return null;
+  }
+});

package/es/components/ComponentsProvider/index.js

@@ -0,0 +1,90 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { useEffect } from 'react';
+import { lazyComponent } from '../../utils/lazyComponent';
+import { LazyComponentWithCode } from '../LazyComponent';
+import { ComponentsContext } from './ComponentsContext';
+export { useComponents } from './useComponents';
+export var ComponentsProvider = function ComponentsProvider(props) {
+  var components = props.components,
+    children = props.children;
+  var componentsRef = React.useRef(_objectSpread({}, components));
+  useEffect(function () {
+    componentsRef.current = _objectSpread(_objectSpread({}, components), componentsRef.current);
+  }, [components]);
+  function addComponent(code, val) {
+    componentsRef.current[code] = val;
+  }
+  function hasComponent(code) {
+    return componentsRef.current.hasOwnProperty(code);
+  }
+  function getComponent(code) {
+    var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
+    var comp = componentsRef.current[code];
+
+    // no component
+    if (!comp) {
+      callback({
+        code: code,
+        errCode: 'NO_CODE'
+      });
+      return null;
+    }
+    if ('component' in comp) {
+      if (comp.type !== 'decorator') {
+        callback({
+          code: code,
+          async: false,
+          component: comp.component
+        });
+      }
+      return comp.component;
+    }
+    if ('decorator' in comp) {
+      var component = function component(compProps) {
+        return /*#__PURE__*/React.createElement(LazyComponentWithCode, _extends({
+          code: comp.decorator,
+          decoratorData: comp.data,
+          onLoad: callback
+        }, compProps));
+      };
+      componentsRef.current[code] = {
+        component: component,
+        type: 'decorator'
+      };
+      return component;
+    }
+    if ('url' in comp) {
+      var _component = lazyComponent(comp.url, comp.name, function () {
+        componentsRef.current[code] = {
+          component: _component
+        };
+        callback({
+          code: code,
+          async: true,
+          component: _component
+        });
+      }, function () {
+        callback({
+          code: code,
+          errCode: 'ERR_IMPORT_SCRIPT'
+        });
+      });
+      return _component;
+    }
+    callback({
+      code: code,
+      errCode: 'NO_HANDLER'
+    });
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ComponentsContext.Provider, {
+    value: {
+      addComponent: addComponent,
+      hasComponent: hasComponent,
+      getComponent: getComponent
+    }
+  }, children);
+};

package/es/components/ComponentsProvider/interface.js

@@ -0,0 +1 @@
+export {};

package/es/components/ComponentsProvider/useComponents.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ComponentsContext } from './ComponentsContext';
+export function useComponents() {
+  return React.useContext(ComponentsContext);
+}

package/es/components/Composer/AccessoryWrap.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClickOutside } from '../ClickOutside';
+export var AccessoryWrap = function AccessoryWrap(_ref) {
+  var onClickOutside = _ref.onClickOutside,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(ClickOutside, {
+    onClick: onClickOutside
+  }, children);
+};

package/es/components/Composer/Action.js

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import { IconButton } from '../IconButton';
+export var Action = function Action(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "Composer-actions",
+    "data-action-icon": props.icon
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    size: "lg"
+  }, props)));
+};

package/es/components/Composer/ComposerInput.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["inputRef", "invisible", "onImageSend"];
+import React, { useState, useEffect, useCallback } from 'react';
+import clsx from 'clsx';
+import { Input } from '../Input';
+import { SendConfirm } from '../SendConfirm';
+import riseInput from './riseInput';
+import parseDataTransfer from '../../utils/parseDataTransfer';
+import canUse from '../../utils/canUse';
+var canTouch = canUse('touch');
+export var ComposerInput = function ComposerInput(_ref) {
+  var inputRef = _ref.inputRef,
+    invisible = _ref.invisible,
+    onImageSend = _ref.onImageSend,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    pastedImage = _useState2[0],
+    setPastedImage = _useState2[1];
+  var handlePaste = useCallback(function (e) {
+    parseDataTransfer(e, setPastedImage);
+  }, []);
+  var handleImageCancel = useCallback(function () {
+    setPastedImage(null);
+  }, []);
+  var handleImageSend = useCallback(function () {
+    if (onImageSend && pastedImage) {
+      Promise.resolve(onImageSend(pastedImage)).then(function () {
+        setPastedImage(null);
+      });
+    }
+  }, [onImageSend, pastedImage]);
+  useEffect(function () {
+    if (canTouch && inputRef.current) {
+      var $composer = document.querySelector('.Composer');
+      riseInput(inputRef.current, $composer);
+    }
+  }, [inputRef]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx({
+      'S--invisible': invisible
+    }),
+    "aria-hidden": invisible
+  }, /*#__PURE__*/React.createElement(Input, _extends({
+    className: "Composer-input",
+    rows: 1,
+    autoSize: true,
+    enterKeyHint: "send",
+    onPaste: onImageSend ? handlePaste : undefined,
+    ref: inputRef
+  }, rest)), pastedImage && /*#__PURE__*/React.createElement(SendConfirm, {
+    file: pastedImage,
+    onCancel: handleImageCancel,
+    onSend: handleImageSend
+  }));
+};

package/es/components/Composer/SendButton.js

@@ -0,0 +1,29 @@
+import React, { useEffect, useRef } from 'react';
+import { Button } from '../Button';
+import { useLocale } from '../ConfigProvider';
+export var SendButton = function SendButton(_ref) {
+  var disabled = _ref.disabled,
+    onClick = _ref.onClick;
+  var _useLocale = useLocale('Composer'),
+    trans = _useLocale.trans;
+  var wrapRef = useRef(null);
+  var btnRef = useRef(null);
+  useEffect(function () {
+    var wrap = wrapRef.current;
+    var btn = btnRef.current;
+    if (wrap && btn) {
+      wrap.style.setProperty('--send-width', "".concat(btn.offsetWidth, "px"));
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "Composer-actions",
+    "data-action": "send",
+    ref: wrapRef
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "Composer-sendBtn",
+    disabled: disabled,
+    onMouseDown: onClick,
+    color: "primary",
+    ref: btnRef
+  }, trans('send')));
+};

package/es/components/Composer/ToolbarItem.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Action } from './Action';
+export var ToolbarItem = function ToolbarItem(props) {
+  var item = props.item,
+    onClick = props.onClick;
+  return /*#__PURE__*/React.createElement(Action, {
+    icon: item.icon,
+    img: item.img,
+    "data-icon": item.icon,
+    "data-tooltip": item.title || null,
+    "aria-label": item.title,
+    onClick: onClick
+  });
+};