@dpocean/chatui 1.0.0

package/es/components/Toolbar/style.less

@@ -0,0 +1,97 @@
+.Toolbar {
+  padding: var(--gutter);
+  padding-top: 0;
+}
+
+.Toolbar-item {
+  display: inline-block;
+  width: 25%;
+  margin-top: var(--gutter);
+  text-align: center;
+}
+
+.Toolbar-btn {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  // width: 76Px;
+  max-width: 100%;
+  min-width: 0;
+  padding: 6Px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--color-text-3);
+  font-weight: 400;
+  vertical-align: top;
+
+  &:hover {
+    background: transparent;
+  }
+  &:active {
+    .Toolbar-btnIcon {
+      background: @btn-hover-bg;
+    }
+  }
+}
+
+@media (hover: hover) {
+  .Toolbar-btn {
+    &:hover {
+      .Toolbar-btnIcon {
+        background: @btn-hover-bg;
+      }
+    }
+  }
+}
+
+@toolbar-icon-size: 30Px;
+
+.Toolbar-btnIcon {
+  display: inline-block;
+  padding: 12Px;
+  border-radius: var(--radius-md);
+  background: rgba(255, 255, 255, 0.8);
+  color: var(--color-text-1);
+  transition: 0.3s;
+
+  .Icon {
+    font-size: @toolbar-icon-size;
+    vertical-align: top;
+  }
+}
+
+.Toolbar-img {
+  width: @toolbar-icon-size;
+  height: @toolbar-icon-size;
+  vertical-align: top;
+}
+
+.Toolbar-btnText {
+  display: block;
+  margin-top: 8Px;
+  font-size: 14Px;
+  line-height: 1.1;
+  white-space: initial;
+  word-wrap: break-word;
+}
+
+.ChatApp[data-elder-mode='true'] {
+  .Toolbar-btnIcon {
+    padding: 16Px;
+  }
+}
+
+@media (min-width: 350px) {
+  .ChatApp[data-elder-mode='true'] {
+    // .Toolbar-btn {
+    //   width: 86Px;
+    // }
+    .Toolbar-btnIcon {
+      padding: 19Px;
+    }
+    .Toolbar-btnIcon .Icon {
+      font-size: 36Px;
+    }
+  }
+}

package/es/components/Tooltip/style.less

@@ -0,0 +1,40 @@
+[data-tooltip] {
+  position: relative;
+  cursor: pointer;
+
+  &:after,
+  &:before {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    z-index: @zindex-tooltip;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.18s ease-out 0.18s;
+    transform: translate(-50%, 4px);
+    transform-origin: top;
+  }
+  &:after {
+    content: attr(aria-label);
+    margin-bottom: 10px;
+    padding: 0.5em 1em;
+    border-radius: var(--radius-md);
+    background: var(--color-text-1);
+    color: var(--color-fill-1);
+    font-size: @font-size-xs;
+    white-space: nowrap;
+  }
+  &:before {
+    content: "";
+    width: 0;
+    height: 0;
+    transform-origin: top;
+    border: (5 / 16rem) solid transparent;
+    border-top-color: var(--color-text-1);
+  }
+  &:hover:before,
+  &:hover:after {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}

package/es/components/Tree/Tree.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import clsx from 'clsx';
+export var Tree = function Tree(props) {
+  var className = props.className,
+    children = props.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('Tree', className),
+    role: "tree"
+  }, children);
+};

package/es/components/Tree/TreeNode.js

@@ -0,0 +1,66 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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, { useState } from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon';
+export var TreeNode = function TreeNode(props) {
+  var title = props.title,
+    content = props.content,
+    link = props.link,
+    _props$children = props.children,
+    children = _props$children === void 0 ? [] : _props$children,
+    _onClick = props.onClick,
+    onExpand = props.onExpand;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expand = _useState2[0],
+    setExpand = _useState2[1];
+  var hasChildren = children.length > 0;
+  function handleTitleClick() {
+    if (hasChildren) {
+      setExpand(!expand);
+      onExpand(title, !expand);
+    } else {
+      _onClick({
+        title: title,
+        content: content,
+        link: link
+      });
+    }
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "TreeNode",
+    role: "treeitem",
+    "aria-expanded": expand
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "TreeNode-title",
+    onClick: handleTitleClick,
+    role: "treeitem",
+    "aria-expanded": expand,
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "TreeNode-title-text"
+  }, title), hasChildren ? /*#__PURE__*/React.createElement(Icon, {
+    className: "TreeNode-title-icon",
+    type: expand ? 'chevron-up' : 'chevron-down'
+  }) : null), hasChildren ? children.map(function (t, j) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: clsx('TreeNode-children', {
+        'TreeNode-children-active': expand
+      }),
+      key: j
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "TreeNode-title TreeNode-children-title",
+      onClick: function onClick() {
+        return _onClick(_objectSpread(_objectSpread({}, t), {
+          index: j
+        }));
+      },
+      role: "treeitem"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "TreeNode-title-text"
+    }, t.title)));
+  }) : null);
+};

package/es/components/Tree/index.js

@@ -0,0 +1,2 @@
+export { Tree } from './Tree';
+export { TreeNode } from './TreeNode';

package/es/components/Tree/style.less

@@ -0,0 +1,41 @@
+.Tree {
+  background: var(--color-fill-1);
+}
+
+.TreeNode-title {
+  padding: 10px 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--color-line-1);
+  &:hover {
+    background: var(--color-fill-2);
+    // color: var(--brand-1);
+    cursor: pointer;
+  }
+}
+.TreeNode {
+  &:last-child {
+    .TreeNode-title {
+      border: 0;
+    }
+  }
+}
+.TreeNode-children-title {
+  // background: var(--color-fill-2);
+  border-bottom: 1px solid var(--color-line-1);
+}
+.TreeNode-title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  flex: 1;
+}
+.TreeNode-children {
+  display: none;
+}
+.TreeNode-children-active {
+  display: block;
+}

package/es/components/Typing/Typing.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Bubble } from '../Bubble';
+export function Typing(_ref) {
+  var text = _ref.text;
+  return /*#__PURE__*/React.createElement(Bubble, {
+    type: "typing"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "Typing",
+    "aria-busy": "true"
+  }, text && /*#__PURE__*/React.createElement("span", {
+    className: "Typing-text"
+  }, text), /*#__PURE__*/React.createElement("div", {
+    className: "Typing-dot",
+    "data-i": "0"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "Typing-dot",
+    "data-i": "1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "Typing-dot",
+    "data-i": "2"
+  })));
+}

package/es/components/Typing/index.js

@@ -0,0 +1 @@
+export { Typing } from './Typing';

package/es/components/Typing/style.less

@@ -0,0 +1,41 @@
+.Typing {
+  display: flex;
+  align-items: center;
+  height: 22.5px;
+}
+
+.Typing-text {
+  margin-right: 9px;
+  font-size: 15px;
+}
+
+@frame-time: 0.4s;
+
+.Typing-dot {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  border-radius: 4px;
+  animation: typing-dot (@frame-time * 4) ease-in-out infinite;
+  background: var(--gray-4);
+
+  & + & {
+    margin-left: 4px;
+  }
+  &[data-i="1"] {
+    animation-delay: 0.2s;
+  }
+  &[data-i="2"] {
+    animation-delay: 0.3s;
+  }
+}
+
+@keyframes typing-dot {
+  0%, 40%, 100% {
+    background: var(--gray-4);
+  }
+  20% {
+    background: var(--gray-3);
+    transform: scale(1.2);
+  }
+}

package/es/components/TypingBubble/index.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["content", "className", "isRichText", "options", "messageRender", "onResize", "children"];
+import React, { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { RichText } from '../RichText';
+import { useTypewriter } from '../../hooks/useTypewriter';
+export var TypingBubble = function TypingBubble(props) {
+  var content = props.content,
+    className = props.className,
+    isRichText = props.isRichText,
+    options = props.options,
+    messageRender = props.messageRender,
+    onResize = props.onResize,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  var _useTypewriter = useTypewriter(messageRender ? messageRender(content) : content, options),
+    typedContent = _useTypewriter.typedContent,
+    isTyping = _useTypewriter.isTyping;
+  var bubbleRef = useRef(null);
+  useEffect(function () {
+    if (!('ResizeObserver' in window)) {
+      return;
+    }
+
+    // eslint-disable-next-line compat/compat
+    var resizeObserver = new ResizeObserver(function () {
+      onResize === null || onResize === void 0 || onResize(bubbleRef.current);
+    });
+    if (bubbleRef.current) {
+      resizeObserver.observe(bubbleRef.current);
+    }
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [onResize]);
+  var effect = isTyping ? 'typing' : null;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('Bubble richtext', className)
+  }, other, {
+    ref: bubbleRef
+  }), typedContent && (isRichText ? /*#__PURE__*/React.createElement(RichText, {
+    "data-effect": effect,
+    content: typedContent
+  }) : /*#__PURE__*/React.createElement("div", {
+    "data-effect": effect
+  }, /*#__PURE__*/React.createElement("p", null, typedContent))), children);
+};

package/es/components/Video/index.js

@@ -0,0 +1,82 @@
+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 = ["className", "src", "cover", "duration", "onClick", "onCoverLoad", "style", "videoRef", "children"];
+/* eslint-disable jsx-a11y/media-has-caption */
+import React, { useState, useRef } from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon';
+import { formatTime } from '../../utils/formatTime';
+export var Video = function Video(props) {
+  var className = props.className,
+    src = props.src,
+    cover = props.cover,
+    duration = props.duration,
+    onClick = props.onClick,
+    onCoverLoad = props.onCoverLoad,
+    style = props.style,
+    outerVideoRef = props.videoRef,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  var localVideoRef = useRef(null);
+  var videoRef = outerVideoRef || localVideoRef;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPlayed = _useState2[0],
+    setIsPlayed = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    paused = _useState4[0],
+    setPaused = _useState4[1];
+  function handleClick(e) {
+    setIsPlayed(true);
+    var video = videoRef.current;
+    if (video) {
+      if (video.ended || video.paused) {
+        video.play();
+      } else {
+        video.pause();
+      }
+    }
+    if (onClick) {
+      onClick(paused, e);
+    }
+  }
+  function handlePlay() {
+    setPaused(false);
+  }
+  function handlePause() {
+    setPaused(true);
+  }
+  var hasCover = !isPlayed && !!cover;
+  var hasDuration = hasCover && !!duration;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('Video', "Video--".concat(paused ? 'paused' : 'playing'), className),
+    style: style
+  }, hasCover && /*#__PURE__*/React.createElement("img", {
+    className: "Video-cover",
+    src: cover,
+    onLoad: onCoverLoad,
+    alt: ""
+  }), hasDuration && /*#__PURE__*/React.createElement("span", {
+    className: "Video-duration"
+  }, formatTime(+duration)), /*#__PURE__*/React.createElement("video", _extends({
+    className: "Video-video",
+    src: src,
+    ref: videoRef,
+    hidden: hasCover,
+    controls: true,
+    onPlay: handlePlay,
+    onPause: handlePause,
+    onEnded: handlePause
+  }, other), children), hasCover && /*#__PURE__*/React.createElement("button", {
+    className: clsx('Video-playBtn', {
+      paused: paused
+    }),
+    type: "button",
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: "Video-playIcon",
+    type: "play-fill"
+  })));
+};

package/es/components/Video/style.less

@@ -0,0 +1,47 @@
+.Video {
+  position: relative;
+  border-radius: inherit;
+}
+
+.Video-cover,
+.Video-video:not([hidden]) {
+  display: block;
+  width: 100%;
+  max-height: 100%;
+  border-radius: inherit;
+}
+
+.Video-duration {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  z-index: 1;
+  color: var(--color-fill-1);
+  line-height: 1;
+}
+
+.Video-playBtn {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.Video-playIcon {
+  font-size: 42px;
+}
+
+.Video--playing {
+  .Video-playBtn {
+    display: none;
+  }
+}

package/es/components/VisuallyHidden/index.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+var style = {
+  position: 'absolute',
+  height: '1px',
+  width: '1px',
+  overflow: 'hidden',
+  clip: 'rect(0 0 0 0)',
+  margin: '-1px',
+  // padding: 0,
+  // border: 0,
+  whiteSpace: 'nowrap'
+};
+export var VisuallyHidden = function VisuallyHidden(props) {
+  return /*#__PURE__*/React.createElement("span", _extends({
+    style: style
+  }, props));
+};

package/es/global.d.js

@@ -0,0 +1,7 @@
+/**
+ * 全局类型声明
+ * 扩展 Window 接口以支持动态加载的全局变量
+ */
+
+// 确保该文件被视为模块
+export {};

package/es/hooks/useClickOutside.js

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+export default function useClickOutside(handler) {
+  var eventName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'click';
+  var ref = useRef();
+  useEffect(function () {
+    var listener = function listener(e) {
+      var targetElement = ref.current;
+      if (!targetElement || targetElement.contains(e.target)) {
+        return;
+      }
+      if (handler) {
+        handler(e);
+      }
+    };
+    document.addEventListener(eventName, listener);
+    return function () {
+      document.removeEventListener(eventName, listener);
+    };
+  }, [eventName, handler]);
+  return ref;
+}

package/es/hooks/useCountdown.js

@@ -0,0 +1,54 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useState, useEffect } from 'react';
+import { useLatest } from './useLatest';
+var calcLeft = function calcLeft(ts) {
+  if (!ts) {
+    return 0;
+  }
+  var left = new Date(ts).getTime() - Date.now();
+  return left < 0 ? 0 : left;
+};
+var parseMs = function parseMs(ms) {
+  return {
+    // days: Math.floor(ms / 86400000),
+    hours: Math.floor(ms / 3600000) % 24,
+    minutes: Math.floor(ms / 60000) % 60,
+    seconds: Math.floor(ms / 1000) % 60
+  };
+};
+var useCountdown = function useCountdown(options) {
+  var _ref = options || {},
+    targetDate = _ref.targetDate,
+    onEnd = _ref.onEnd;
+  var _useState = useState(function () {
+      return calcLeft(targetDate);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    timeLeft = _useState2[0],
+    setTimeLeft = _useState2[1];
+  var onEndRef = useLatest(onEnd);
+  useEffect(function () {
+    if (!targetDate) {
+      // for stop
+      setTimeLeft(0);
+      return;
+    }
+
+    // 立即执行一次
+    setTimeLeft(calcLeft(targetDate));
+    var timer = setInterval(function () {
+      var targetLeft = calcLeft(targetDate);
+      setTimeLeft(targetLeft);
+      if (targetLeft === 0) {
+        var _onEndRef$current;
+        clearInterval(timer);
+        (_onEndRef$current = onEndRef.current) === null || _onEndRef$current === void 0 || _onEndRef$current.call(onEndRef);
+      }
+    }, 1000);
+    return function () {
+      return clearInterval(timer);
+    };
+  }, [onEndRef, targetDate]);
+  return parseMs(timeLeft);
+};
+export default useCountdown;

package/es/hooks/useForwardRef.js

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+export default function useForwardRef(ref) {
+  var targetRef = useRef(null);
+  useEffect(function () {
+    if (!ref) return;
+    if (typeof ref === 'function') {
+      ref(targetRef.current);
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      ref.current = targetRef.current;
+    }
+  }, [ref]);
+  return targetRef;
+}

package/es/hooks/useLatest.js

@@ -0,0 +1,6 @@
+import { useRef } from 'react';
+export function useLatest(value) {
+  var ref = useRef(value);
+  ref.current = value;
+  return ref;
+}