@dpocean/chatui 1.0.0

package/es/components/Tabs/style.less

@@ -0,0 +1,98 @@
+@tabs-nav-margin: 4px;
+@scrollable-width: 18px;
+
+.Tabs {
+  --tab-font-size: 15px;
+  --tab-active-color: var(--color-text-1);
+  --tab-line-bottom: 5px;
+
+  &[data-color='primary'] {
+    --tab-active-color: var(--brand-1);
+  }
+  &[data-size='lg'] {
+    --tab-font-size: 18px;
+    --tab-line-bottom: 3px;
+  }
+}
+
+.Tabs-nav {
+  position: relative;
+  display: flex;
+  margin: @tabs-nav-margin 0;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.Tabs--scrollable {
+  .Tabs-nav {
+    position: relative;
+    overflow: hidden;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    // 隐藏滚动条
+    margin-bottom: -(@scrollable-width - @tabs-nav-margin);
+    padding-bottom: @scrollable-width;
+  }
+  .Tabs-navItem {
+    flex: none;
+
+    &:first-child {
+      padding-left: 6px;
+    }
+    &:last-child {
+      padding-right: 6px;
+    }
+  }
+}
+
+.Tabs-navItem {
+  flex: 1;
+  text-align: center;
+}
+
+.Tabs-navLink {
+  padding: 9px;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-2);
+  font-size: var(--tab-font-size);
+  line-height: 18px;
+  transition: color 0.3s;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+  &:hover {
+    cursor: pointer;
+    color: var(--color-text-1);
+  }
+  &.active {
+    position: relative;
+    z-index: 1;
+    color: var(--tab-active-color);
+    font-weight: bold;
+
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: var(--tab-line-bottom);
+      left: 50%;
+      transform: translateX(-50%);
+      width: 12px;
+      height: 2px;
+      background: currentColor;
+      border-radius: var(--radius-sm);
+    }
+  }
+}
+
+.Tabs-pane {
+  display: none;
+
+  &.active {
+    display: block;
+  }
+}

package/es/components/Tag/index.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["as", "className", "color", "children"];
+import React from 'react';
+import clsx from 'clsx';
+export var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Element = _props$as === void 0 ? 'span' : _props$as,
+    className = props.className,
+    color = props.color,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(Element, _extends({
+    className: clsx('Tag', color && "Tag--".concat(color), className),
+    ref: ref
+  }, other), children);
+});

package/es/components/Tag/style.less

@@ -0,0 +1,45 @@
+.Tag {
+  display: inline-block;
+  position: relative;
+  margin: @tag-margin;
+  padding: @tag-padding;
+  border: 1px solid var(--brand-1);
+  border-radius: var(--radius-sm);
+  color: @tag-color;
+  font-size: @tag-font-size;
+  line-height: 1.25;
+  white-space: nowrap;
+
+  &--primary {
+    border-color: transparent;
+    color: var(--orange);
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: -1px;
+      border-radius: inherit;
+      background: currentColor;
+      opacity: 0.14;
+    }
+  }
+  &--success {
+    border-color: var(--green);
+    background: var(--green);
+    color: #fff;
+  }
+  &--danger {
+    border-color: var(--red);
+    background: var(--red);
+    color: #fff;
+  }
+  &--warning {
+    border-color: var(--orange);
+    background: var(--orange);
+    color: #fff;
+  }
+}

package/es/components/Text/index.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["as", "className", "align", "breakWord", "truncate", "children"];
+import React from 'react';
+import clsx from 'clsx';
+export var Text = function Text(props) {
+  var _props$as = props.as,
+    Element = _props$as === void 0 ? 'div' : _props$as,
+    className = props.className,
+    align = props.align,
+    breakWord = props.breakWord,
+    truncate = props.truncate,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  var ellipsis = Number.isInteger(truncate);
+  var cls = clsx(align && "Text--".concat(align), {
+    'Text--break': breakWord,
+    'Text--truncate': truncate === true,
+    'Text--ellipsis': ellipsis
+  }, className);
+  var style = ellipsis ? {
+    WebkitLineClamp: truncate
+  } : null;
+  return /*#__PURE__*/React.createElement(Element, _extends({
+    className: cls,
+    style: style
+  }, other), children);
+};

package/es/components/Text/style.less

@@ -0,0 +1,19 @@
+.Text--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.Text--break {
+  word-break: break-word !important;
+  overflow-wrap: break-word !important;
+}
+
+.Text--ellipsis {
+  overflow: hidden;
+  display: -webkit-box;
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+  /* -webkit-line-clamp: 2; */
+  text-overflow: ellipsis;
+}

package/es/components/Think/index.js

@@ -0,0 +1,37 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon';
+export var Think = function Think(_ref) {
+  var className = _ref.className,
+    isDone = _ref.isDone,
+    thinkTime = _ref.thinkTime,
+    children = _ref.children;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    show = _useState2[0],
+    setShow = _useState2[1];
+  var handleClick = function handleClick() {
+    setShow(function (s) {
+      return !s;
+    });
+  };
+  var getText = function getText() {
+    if (isDone) {
+      var time = thinkTime ? "\uFF08\u7528\u65F6".concat(thinkTime, "\u79D2\uFF09") : '';
+      return "\u5DF2\u6DF1\u5EA6\u601D\u8003".concat(time);
+    }
+    return '思考中...';
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('Think', className),
+    "data-collapsed": !show
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "Think-toggle",
+    onClick: handleClick
+  }, getText(), /*#__PURE__*/React.createElement(Icon, {
+    type: "chevron-up"
+  })), show && /*#__PURE__*/React.createElement("div", {
+    className: "Think-content"
+  }, children));
+};

package/es/components/Think/style.less

@@ -0,0 +1,68 @@
+.Think {
+  &[data-collapsed='true'] {
+    .Think-toggle .Icon {
+      transform: rotate(-180deg);
+    }
+  }
+}
+
+.Think-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  padding: 7px 14px;
+  margin-bottom: 12px;
+  background: var(--color-fill-2);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-xs);
+  user-select: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+
+  .Icon {
+    transition: transform 0.2s ease-in-out;
+    font-size: var(--font-size-sm);
+  }
+}
+
+.Think-content {
+  margin: 12px 0;
+  padding: 4px 0 4px 8px;
+  border-left: 2px solid var(--color-line-1);
+  color: var(--color-text-3);
+  font-size: var(--font-size-sm);
+
+  p {
+    margin: 0;
+  }
+}
+
+.ReactMarkdown {
+  font-size: 16px;
+  font-weight: 400;
+  min-height: 24px;
+  user-select: text;
+
+  p {
+    font-size: 16px;
+    font-weight: 400;
+  }
+  ol,
+  ul {
+    list-style: revert;
+    margin: revert;
+    padding: revert;
+  }
+  blockquote {
+    border-left: 2px solid #e5e5e5;
+    color: #8b8b8b;
+    font-size: 14px;
+    margin: 1rem 0;
+    padding: 0.25rem 0 0.25rem 0.5rem;
+
+    p {
+      font-size: 14px;
+    }
+  }
+}

package/es/components/Time/Time.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import dayjs from "dayjs";
+export var Time = function Time(_ref) {
+  var date = _ref.date,
+    _ref$timeFormat = _ref.timeFormat,
+    timeFormat = _ref$timeFormat === void 0 ? 'MM-DD-YYYY HH:mm:ss' : _ref$timeFormat;
+  var dateTime = new Date(date).toLocaleString('zh').replace(/\//g, '-');
+  var dateTxt = dayjs(date).format(timeFormat);
+  return /*#__PURE__*/React.createElement("time", {
+    className: "Time",
+    dateTime: dateTime
+  }, dateTxt);
+};

package/es/components/Time/index.js

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

package/es/components/Time/parser.js

@@ -0,0 +1,50 @@
+var REGEX_FORMAT = /YYYY|M|D|dddd|HH|mm/g;
+var MS_A_DAY = 24 * 60 * 60 * 1000;
+var MS_A_WEEK = MS_A_DAY * 7;
+var parseDate = function parseDate(date) {
+  // if (date === null) {
+  //   return new Date(NaN);
+  // }
+  // if (typeof date === 'undefined') {
+  //   return new Date(); // today
+  // }
+  if (date instanceof Date) {
+    return date;
+  }
+  return new Date(date);
+};
+var getWeeHours = function getWeeHours() {
+  return new Date(new Date().setHours(0, 0, 0, 0));
+};
+var padStart = function padStart(n) {
+  return (n <= 9 ? '0' : '') + n;
+};
+var getFormat = function getFormat(date) {
+  var diff = getWeeHours().getTime() - date.getTime();
+  if (diff < 0) {
+    return 'LT'; // 今天
+  }
+  if (diff < MS_A_DAY) {
+    return 'YT'; // 昨天
+  }
+  if (diff < MS_A_WEEK) {
+    return 'WT'; // 这周
+  }
+  return 'lll';
+};
+function formatDate(date, locale) {
+  var $d = parseDate(date);
+  var format = locale.formats[getFormat($d)];
+  var dates = {
+    YYYY: "".concat($d.getFullYear()),
+    M: "".concat($d.getMonth() + 1),
+    D: "".concat($d.getDate()),
+    dddd: locale.weekdays[$d.getDay()],
+    HH: padStart($d.getHours()),
+    mm: padStart($d.getMinutes())
+  };
+  return format.replace(REGEX_FORMAT, function (match) {
+    return dates[match];
+  });
+}
+export default formatDate;

package/es/components/Time/style.less

@@ -0,0 +1,4 @@
+.Time {
+  font-size: 12px;
+  color: var(--color-text-3);
+}

package/es/components/Tips/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon';
+import { Flex, FlexItem } from '../Flex';
+export var Tips = function Tips(_ref) {
+  var className = _ref.className,
+    size = _ref.size,
+    primary = _ref.primary,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? 'info-circle' : _ref$icon,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(Flex, {
+    className: clsx('Tips', className),
+    "data-size": size,
+    "data-primary": primary
+  }, icon && /*#__PURE__*/React.createElement(Icon, {
+    type: icon
+  }), /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement("div", {
+    className: "Tips-content"
+  }, children)));
+};

package/es/components/Tips/style.less

@@ -0,0 +1,23 @@
+.Tips {
+  padding: 8px;
+  border-radius: var(--radius-md);
+  background: var(--color-fill-2);
+  color: var(--color-text-1);
+  font-size: 12px;
+
+  .Icon {
+    margin: 2px 4px 0 0;
+    font-size: 14px;
+  }
+  &[data-size="lg"] {
+    font-size: 14px;
+
+    .Icon {
+      font-size: 15px;
+    }
+  }
+  &[data-primary="true"] {
+    background: var(--brand-4);
+    color: var(--brand-1);
+  }
+}

package/es/components/Toast/Toast.js

@@ -0,0 +1,61 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect } from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon';
+function renderIcon(type) {
+  switch (type) {
+    case 'success':
+      return /*#__PURE__*/React.createElement(Icon, {
+        type: "check-circle"
+      });
+    case 'error':
+      return /*#__PURE__*/React.createElement(Icon, {
+        type: "warning-circle"
+      });
+    case 'loading':
+      return /*#__PURE__*/React.createElement(Icon, {
+        type: "spinner",
+        spin: true
+      });
+    default:
+      return null;
+  }
+}
+export var Toast = function Toast(props) {
+  var content = props.content,
+    type = props.type,
+    _props$duration = props.duration,
+    duration = _props$duration === void 0 ? 2000 : _props$duration,
+    onUnmount = props.onUnmount;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    show = _useState2[0],
+    setShow = _useState2[1];
+  useEffect(function () {
+    setShow(true);
+    if (duration !== -1) {
+      setTimeout(function () {
+        setShow(false);
+      }, duration);
+      setTimeout(function () {
+        if (onUnmount) {
+          onUnmount();
+        }
+      }, duration + 300);
+    }
+  }, [duration, onUnmount]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('Toast', {
+      show: show
+    }),
+    "data-type": type,
+    role: "alert",
+    "aria-live": "assertive",
+    "aria-atomic": "true"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "Toast-content",
+    role: "presentation"
+  }, renderIcon(type), /*#__PURE__*/React.createElement("p", {
+    className: "Toast-message"
+  }, content)));
+};

package/es/components/Toast/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { mountComponent } from '../../utils/mountComponent';
+import { Toast } from './Toast';
+function show(content, type, duration) {
+  mountComponent(/*#__PURE__*/React.createElement(Toast, {
+    content: content,
+    type: type,
+    duration: duration
+  }));
+}
+export var toast = {
+  show: show,
+  success: function success(content, duration) {
+    show(content, 'success', duration);
+  },
+  fail: function fail(content, duration) {
+    show(content, 'error', duration);
+  },
+  loading: function loading(content, duration) {
+    show(content, 'loading', duration);
+  }
+};
+export { Toast };

package/es/components/Toast/style.less

@@ -0,0 +1,48 @@
+.Toast {
+  position: fixed;
+  top: 50%;
+  left: 0;
+  right: 0;
+  z-index: @zindex-toast;
+  display: flex;
+  justify-content: center;
+  transition: all 300ms ease 0s;
+  transform: translateY(-50%);
+  opacity: 0;
+  visibility: hidden;
+
+  &[data-type='success'] .Icon {
+    color: var(--green);
+  }
+  &[data-type='error'] .Icon {
+    color: var(--red);
+  }
+  &[data-type='loading'] .Icon {
+    color: var(--brand-1);
+  }
+  &.show {
+    opacity: 1;
+    visibility: visible;
+  }
+  .Icon {
+    margin-right: 6px;
+    font-size: 24px;
+  }
+}
+
+.Toast-content {
+  display: flex;
+  max-width: 90vw;
+  padding: @toast-content-padding;
+  border-radius: var(--radius-md);
+  background: var(--color-toast);
+  box-sizing: border-box;
+}
+
+.Toast-message {
+  flex: 1;
+  margin: @toast-message-margin;
+  color: @toast-message-color;
+  font-size: @toast-message-font-size;
+  word-break: break-word;
+}

package/es/components/Toolbar/Toolbar.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ToolbarButton } from './ToolbarButton';
+export var Toolbar = function Toolbar(props) {
+  var items = props.items,
+    onClick = props.onClick;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "Toolbar"
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(ToolbarButton, {
+      item: item,
+      onClick: onClick,
+      key: item.type
+    });
+  }));
+};

package/es/components/Toolbar/ToolbarButton.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+export var ToolbarButton = function ToolbarButton(props) {
+  var item = props.item,
+    _onClick = props.onClick;
+  var type = item.type,
+    icon = item.icon,
+    img = item.img,
+    title = item.title;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "Toolbar-item",
+    "data-type": type
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "Toolbar-btn",
+    onClick: function onClick(e) {
+      return _onClick(item, e);
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "Toolbar-btnIcon"
+  }, icon && /*#__PURE__*/React.createElement(Icon, {
+    type: icon
+  }), img && /*#__PURE__*/React.createElement("img", {
+    className: "Toolbar-img",
+    src: img,
+    alt: ""
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "Toolbar-btnText"
+  }, title)));
+};

package/es/components/Toolbar/index.js

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