@dpocean/chatui 1.0.0

package/es/hooks/useMessages.js

@@ -0,0 +1,72 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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 { useState, useMemo, useCallback } from 'react';
+import { getRandomString } from '../utils';
+var TIME_GAP = 5 * 60 * 1000;
+var lastTs = 0;
+var makeMsg = function makeMsg(msg, id) {
+  var ts = msg.createdAt || Date.now();
+  var hasTime = msg.hasTime || ts - lastTs > TIME_GAP;
+  if (hasTime) {
+    lastTs = ts;
+  }
+  return _objectSpread(_objectSpread({}, msg), {}, {
+    _id: msg._id || id || getRandomString(),
+    createdAt: ts,
+    position: msg.position || 'left',
+    hasTime: hasTime
+  });
+};
+export default function useMessages() {
+  var initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var initialMsgs = useMemo(function () {
+    return initialState.map(function (t) {
+      return makeMsg(t);
+    });
+  }, [initialState]);
+  var _useState = useState(initialMsgs),
+    _useState2 = _slicedToArray(_useState, 2),
+    messages = _useState2[0],
+    setMessages = _useState2[1];
+  var prependMsgs = useCallback(function (msgs) {
+    setMessages(function (prev) {
+      return [].concat(_toConsumableArray(msgs), _toConsumableArray(prev));
+    });
+  }, []);
+  var updateMsg = useCallback(function (id, msg) {
+    setMessages(function (prev) {
+      return prev.map(function (t) {
+        return t._id === id ? makeMsg(msg, id) : t;
+      });
+    });
+  }, []);
+  var appendMsg = useCallback(function (msg) {
+    var newMsg = makeMsg(msg);
+    setMessages(function (prev) {
+      return [].concat(_toConsumableArray(prev), [newMsg]);
+    });
+    return newMsg._id;
+  }, []);
+  var deleteMsg = useCallback(function (id) {
+    setMessages(function (prev) {
+      return prev.filter(function (t) {
+        return t._id !== id;
+      });
+    });
+  }, []);
+  var resetList = useCallback(function () {
+    var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    setMessages(list);
+  }, []);
+  return {
+    messages: messages,
+    prependMsgs: prependMsgs,
+    appendMsg: appendMsg,
+    updateMsg: updateMsg,
+    deleteMsg: deleteMsg,
+    resetList: resetList
+  };
+}

package/es/hooks/useMount.js

@@ -0,0 +1,47 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useState, useEffect, useRef } from 'react';
+import { reflow } from '../utils';
+function useMount(_ref) {
+  var _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    ref = _ref.ref,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 300 : _ref$delay;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShow = _useState2[0],
+    setIsShow = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    didMount = _useState4[0],
+    setDidMount = _useState4[1];
+  var timeout = useRef();
+  var clear = function clear() {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+  };
+  useEffect(function () {
+    if (active) {
+      clear();
+      setDidMount(active);
+    } else {
+      setIsShow(active);
+      timeout.current = setTimeout(function () {
+        setDidMount(active);
+      }, delay);
+    }
+    return clear;
+  }, [active, delay]);
+  useEffect(function () {
+    if (ref.current) {
+      reflow(ref.current);
+    }
+    setIsShow(didMount);
+  }, [didMount, ref]);
+  return {
+    didMount: didMount,
+    isShow: isShow
+  };
+}
+export default useMount;

package/es/hooks/useNextId.js

@@ -0,0 +1,11 @@
+import { useRef } from 'react';
+var nextId = 0;
+// eslint-disable-next-line no-plusplus
+var getNextId = function getNextId() {
+  return nextId++;
+};
+export default function useNextId() {
+  var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'id-';
+  var idRef = useRef("".concat(prefix).concat(getNextId()));
+  return idRef.current;
+}

package/es/hooks/useQuickReplies.js

@@ -0,0 +1,44 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useState, useEffect, useRef } from 'react';
+export default function useQuickReplies() {
+  var initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var _useState = useState(initialState),
+    _useState2 = _slicedToArray(_useState, 2),
+    quickReplies = _useState2[0],
+    setQuickReplies = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
+  var savedRef = useRef();
+  var stashRef = useRef();
+  useEffect(function () {
+    savedRef.current = quickReplies;
+  }, [quickReplies]);
+  var prepend = function prepend(list) {
+    setQuickReplies(function (prev) {
+      return [].concat(_toConsumableArray(list), _toConsumableArray(prev));
+    });
+  };
+
+  // prepend、replace 后立即 save 只会保存上一个状态
+  // 因为 savedRef.current 的更新优先级最后，用 setTimeout 可解
+  var save = function save() {
+    stashRef.current = savedRef.current;
+  };
+  var pop = function pop() {
+    if (stashRef.current) {
+      setQuickReplies(stashRef.current);
+    }
+  };
+  return {
+    quickReplies: quickReplies,
+    prepend: prepend,
+    replace: setQuickReplies,
+    visible: visible,
+    setVisible: setVisible,
+    save: save,
+    pop: pop
+  };
+}

package/es/hooks/useTitleTyping.js

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useState, useCallback, useRef } from 'react';
+import getRandomInt from '../utils/getRandomInt';
+export function useTitleTyping() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTyping = _useState2[0],
+    setIsTyping = _useState2[1];
+  // 间断变化
+  var timerRef = useRef();
+  // 超时
+  var timeoutRef = useRef();
+  var after = function after(_ref, cb) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      min = _ref2[0],
+      max = _ref2[1];
+    var ms = getRandomInt(min, max);
+    timerRef.current = setTimeout(cb, ms);
+  };
+  var stop = useCallback(function () {
+    clearTimeout(timerRef.current);
+    clearTimeout(timeoutRef.current);
+    setIsTyping(false);
+  }, []);
+  var start = useCallback(function () {
+    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      delay = _ref3.delay,
+      timeout = _ref3.timeout;
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(function () {
+      // delay 后开始
+      setIsTyping(true);
+      after([3000, 6000], function () {
+        // 3-6s 后暂停
+        setIsTyping(false);
+        after([1000, 2000], function () {
+          // 1-2s 后重新开始
+          start();
+        });
+      });
+    }, delay);
+    if (timeout) {
+      timeoutRef.current = setTimeout(function () {
+        stop();
+      }, timeout);
+    }
+  }, [stop]);
+  return {
+    isTyping: isTyping,
+    start: start,
+    stop: stop
+  };
+}

package/es/hooks/useTypewriter.js

@@ -0,0 +1,35 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useState, useEffect } from 'react';
+import getRandomInt from '../utils/getRandomInt';
+export function useTypewriter(content) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _options$interval = options.interval,
+    interval = _options$interval === void 0 ? 80 : _options$interval,
+    _options$step = options.step,
+    step = _options$step === void 0 ? 1 : _options$step,
+    _options$initialIndex = options.initialIndex,
+    initialIndex = _options$initialIndex === void 0 ? 5 : _options$initialIndex;
+  var length = content.length;
+  var _useState = useState(initialIndex),
+    _useState2 = _slicedToArray(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  useEffect(function () {
+    if (index < length) {
+      var timer = setTimeout(function () {
+        var currentStep = Array.isArray(step) ? getRandomInt(step[0], step[1]) : step;
+        setIndex(function (prev) {
+          return prev + currentStep;
+        });
+      }, interval);
+      return function () {
+        clearTimeout(timer);
+      };
+    }
+    return;
+  }, [index, interval, length, step]);
+  return {
+    typedContent: content.slice(0, index),
+    isTyping: index < length
+  };
+}

package/es/hooks/useWindowResize.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+export default function useWindowResize(handler) {
+  var running = useRef(false);
+  useEffect(function () {
+    function runCallback() {
+      handler();
+      running.current = false;
+    }
+    function resizeThrottler() {
+      if (!running.current) {
+        running.current = true;
+        if (window.requestAnimationFrame) {
+          window.requestAnimationFrame(runCallback);
+        } else {
+          setTimeout(runCallback, 66);
+        }
+      }
+    }
+    window.addEventListener('resize', resizeThrottler);
+    return function () {
+      window.removeEventListener('resize', resizeThrottler);
+    };
+  }, [handler]);
+}

package/es/index.js

@@ -0,0 +1,85 @@
+import 'intersection-observer';
+export { default as clsx } from 'clsx';
+export { default as DOMPurify } from 'dompurify';
+export { default as canUse } from './utils/canUse';
+export { importScript } from './utils/importScript';
+export { lazyComponent } from './utils/lazyComponent';
+export { mountComponent } from './utils/mountComponent';
+export { default as useClickOutside } from './hooks/useClickOutside';
+export { default as useForwardRef } from './hooks/useForwardRef';
+export { useLatest } from './hooks/useLatest';
+export { default as useMessages } from './hooks/useMessages';
+export { default as useMount } from './hooks/useMount';
+export { default as useQuickReplies } from './hooks/useQuickReplies';
+export { useTitleTyping } from './hooks/useTitleTyping';
+export { useTypewriter } from './hooks/useTypewriter';
+export { ComponentsProvider, useComponents } from './components/ComponentsProvider';
+export { LazyComponent } from './components/LazyComponent';
+export { Avatar } from './components/Avatar';
+export { Backdrop } from './components/Backdrop';
+export { Bubble } from './components/Bubble';
+export { Button } from './components/Button';
+export { Card, CardMedia, CardHeader, CardTitle, CardContent, CardText, CardActions } from './components/Card';
+export { Carousel } from './components/Carousel';
+export { Checkbox, CheckboxGroup } from './components/Checkbox';
+export { ClickOutside } from './components/ClickOutside';
+export { Countdown } from './components/Countdown';
+export { Divider } from './components/Divider';
+export { Empty } from './components/Empty';
+export { ErrorBoundary } from './components/ErrorBoundary';
+export { Flex, FlexItem } from './components/Flex';
+export { Form, FormActions, FormItem } from './components/Form';
+export { Icon } from './components/Icon';
+export { IconButton } from './components/IconButton';
+export { Image } from './components/Image';
+export { ImageList } from './components/ImageList';
+export { InfiniteScroll } from './components/InfiniteScroll';
+export { Input } from './components/Input';
+export { KvList, KvItem } from './components/KvList';
+export { List, ListItem } from './components/List';
+export { Loading } from './components/Loading';
+export { ConfigProvider, ConfigProvider as LocaleProvider, ConfigContext, ConfigContext as LocaleContext, useConfig, useLocale } from './components/ConfigProvider';
+export { MediaObject } from './components/MediaObject';
+export { Message, SystemMessage } from './components/Message';
+export { MessageStatus } from './components/MessageStatus';
+export { Modal, Confirm, Popup } from './components/Modal';
+export { Navbar } from './components/Navbar';
+export { Notice } from './components/Notice';
+export { Portal } from './components/Portal';
+export { Price } from './components/Price';
+export { Progress } from './components/Progress';
+export { PullToRefresh } from './components/PullToRefresh';
+export { QuickReplies } from './components/QuickReplies';
+export { Quote } from './components/Quote';
+export { Radio, RadioGroup } from './components/Radio';
+export { RateActions } from './components/RateActions';
+export { RichText } from './components/RichText';
+export { ScrollGrid } from './components/ScrollGrid';
+export { ScrollView } from './components/ScrollView';
+export { Search } from './components/Search';
+export { Select } from './components/Select';
+export { Skeleton } from './components/Skeleton';
+export { StatusBadge } from './components/StatusBadge';
+export { Ribbon } from './components/Ribbon';
+export { Stepper, Step } from './components/Stepper';
+export { Tabs, Tab } from './components/Tabs';
+export { Tag } from './components/Tag';
+export { Text } from './components/Text';
+export { Think } from './components/Think';
+export { Time } from './components/Time';
+export { Tips } from './components/Tips';
+export { Toast, toast } from './components/Toast';
+export { Toolbar } from './components/Toolbar';
+export { Tree, TreeNode } from './components/Tree';
+export { Typing } from './components/Typing';
+export { TypingBubble } from './components/TypingBubble';
+export { Video } from './components/Video';
+export { VisuallyHidden } from './components/VisuallyHidden';
+export { FileCard } from './components/FileCard';
+export { Filter } from './components/Filter';
+export { Coupon } from './components/Coupon';
+export { Goods } from './components/Goods';
+export { OrderObject } from './components/OrderObject';
+export { RedPacket } from './components/RedPacket';
+export { MultiRedPacket } from './components/MultiRedPacket';
+export { Chat as default } from './components/Chat';

package/es/styles/animation.less

@@ -0,0 +1,48 @@
+@keyframes slideInRight {
+  0% {
+    transform: translateX(100px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.slide-in-right-item {
+  animation: slideInRight 0.5s ease-in-out both;
+}
+
+each(range(2, 11), {
+  .slide-in-right-item:nth-child(@{value}) {
+    animation-delay: ((@value - 1) * 0.1s);
+  }
+});
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes up {
+  from {
+    transform: translate3d(0, 20px, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.A-fadeIn,
+[data-animation='fadeIn'] {
+  animation: 0.6s fadeIn;
+}
+
+[data-animation='fadeInUp'] {
+  animation: fadeIn 0.6s cubic-bezier(0.17, 0.17, 0.67, 1),
+    up 0.6s cubic-bezier(0.02, 0.25, 0.04, 0.98);
+}

package/es/styles/dark.less

@@ -0,0 +1,40 @@
+:root[data-color-scheme="dark"] {
+  // 不再建议直接用，用下面的文字色、填充色、线条色、功能色
+  --black: var(--gray-1); // 不再使用
+  --white: #1c222e;
+  --gray-1: #f3f6f8;
+  --gray-2: #cacfd7;
+  --gray-4: #444c5a;
+  --gray-5: rgba(204, 223, 255, 0.15);
+  --gray-8: rgba(124, 136, 156, 0.15);
+  --blue: #409fff;
+  --red: #ff6666;
+
+  // Brand 品牌色
+  --brand-3: #343B4D;
+  --brand-4: #332B26;
+
+  --color-mask: rgba(14, 17, 25, 0.7);
+  --color-toast: rgba(243, 246, 248, 0.9);
+
+  --app-bg: #0e1119;
+  --navbar-bg: #0e1119;
+  --footer-bg: #0e1119;
+
+  --btn-primary-color: #fff;
+
+  --skeleton-bg-1: var(--color-fill-2);
+  --skeleton-bg-2: var(--color-line-1);
+
+  .Toolbar-btnIcon {
+    background: #1c222e;
+  }
+
+  .Modal-dialog[data-has-avatar='true'] {
+    background: @modal-bg;
+  }
+
+  .Popup-dialog[data-bg-color="gray"] {
+    background: var(--brand-3);
+  }
+}

package/es/styles/font-face.less

@@ -0,0 +1,22 @@
+@font-face {
+  font-family: 'AlibabaSans';
+  src: url(https://gw.alipayobjects.com/as/g/antui/antui-static/1.0.5/fonts/AlibabaSans102Ver2-Rg.woff)
+    format('woff');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'AlibabaSans';
+  src: url(https://gw.alipayobjects.com/as/g/antui/antui-static/1.0.5/fonts/AlibabaSans102Ver2-Md.woff)
+    format('woff');
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'AlibabaSans';
+  src: url(https://gw.alipayobjects.com/as/g/antui/antui-static/1.0.5/fonts/AlibabaSans102Ver2-Bd.woff)
+    format('woff');
+  font-weight: 700;
+  font-display: swap;
+}

package/es/styles/index.less

@@ -0,0 +1,81 @@
+@import 'var';
+@import 'font-face';
+@import 'root';
+@import 'dark';
+// @import 'scale';
+@import 'utils';
+@import 'animation';
+
+@import '../components/Avatar/style';
+@import '../components/Backdrop/style';
+@import '../components/Bubble/style';
+@import '../components/Button/style';
+@import '../components/BackBottom/style';
+@import '../components/Countdown/style';
+@import '../components/Divider/style';
+@import '../components/Empty/style';
+@import '../components/Flex/style';
+@import '../components/HelpText/style';
+@import '../components/Icon/style';
+@import '../components/IconButton/style';
+@import '../components/Image/style';
+@import '../components/ImageList/style';
+@import '../components/InfiniteScroll/style';
+@import '../components/Input/style';
+@import '../components/KvList/style';
+@import '../components/Label/style';
+@import '../components/List/style';
+@import '../components/Loading/style';
+@import '../components/MediaObject/style';
+@import '../components/Message/style';
+@import '../components/MessageStatus/style';
+@import '../components/Modal/style';
+@import '../components/Navbar/style';
+@import '../components/Notice/style';
+@import '../components/Popover/style';
+@import '../components/Price/style';
+@import '../components/Progress/style';
+@import '../components/PullToRefresh/style';
+@import '../components/QuickReplies/style';
+@import '../components/Quote/style';
+@import '../components/Radio/style';
+@import '../components/RateActions/style';
+@import '../components/RichText/style';
+@import '../components/ScrollGrid/style';
+@import '../components/ScrollView/style';
+@import '../components/Search/style';
+@import '../components/Select/style';
+@import '../components/Skeleton/style';
+@import '../components/StatusBadge/style';
+@import '../components/Ribbon/style';
+@import '../components/Stepper/style';
+@import '../components/Tabs/style';
+@import '../components/Tag/style';
+@import '../components/Text/style';
+@import '../components/Think/style';
+@import '../components/Time/style';
+@import '../components/Tips/style';
+@import '../components/Toast/style';
+@import '../components/Toolbar/style';
+@import '../components/Tooltip/style';
+@import '../components/Tree/style';
+@import '../components/Typing/style';
+@import '../components/Video/style';
+
+@import '../components/Card/style';
+@import '../components/Carousel/style';
+@import '../components/FileCard/style';
+@import '../components/Filter/style';
+@import '../components/Form/style';
+
+@import '../components/Coupon/style';
+@import '../components/Goods/style';
+@import '../components/OrderObject/style';
+@import '../components/RedPacket/style';
+@import '../components/MultiRedPacket/style';
+
+@import '../components/MessageContainer/style';
+@import '../components/Recorder/style';
+@import '../components/Composer/style';
+@import '../components/SendConfirm/style';
+@import '../components/Chat/style';