@lobehub/ui 1.73.0 → 1.75.0

package/es/BackBottom/index.d.ts

@@ -0,0 +1,13 @@
+import type { Target } from 'ahooks/lib/useScroll';
+import { type BackTopProps } from 'antd';
+import { type CSSProperties } from 'react';
+export interface BackBottomProps {
+    className?: string;
+    onClick?: BackTopProps['onClick'];
+    style?: CSSProperties;
+    target: Target;
+    text?: string;
+    visibilityHeight?: BackTopProps['visibilityHeight'];
+}
+declare const BackBottom: import("react").NamedExoticComponent<BackBottomProps>;
+export default BackBottom;

package/es/BackBottom/index.js

@@ -0,0 +1,62 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { useScroll } from 'ahooks';
+import { Button } from 'antd';
+import { ListEnd } from 'lucide-react';
+import { memo, useEffect, useRef, useState } from 'react';
+import Icon from "../Icon";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var BackBottom = /*#__PURE__*/memo(function (_ref) {
+  var _ref$visibilityHeight = _ref.visibilityHeight,
+    visibilityHeight = _ref$visibilityHeight === void 0 ? 240 : _ref$visibilityHeight,
+    target = _ref.target,
+    onClick = _ref.onClick,
+    style = _ref.style,
+    className = _ref.className,
+    text = _ref.text;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useStyles = useStyles(visible),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var ref = useRef(null);
+  var current = target === null || target === void 0 ? void 0 : target.current;
+  var scrollHeight = (current === null || current === void 0 ? void 0 : current.scrollHeight) || 0;
+  var clientHeight = (current === null || current === void 0 ? void 0 : current.clientHeight) || 0;
+  var scroll = useScroll(target);
+  useEffect(function () {
+    if (scroll !== null && scroll !== void 0 && scroll.top) {
+      setVisible((scroll === null || scroll === void 0 ? void 0 : scroll.top) + clientHeight + visibilityHeight < scrollHeight);
+    }
+  }, [scrollHeight, scroll, visibilityHeight]);
+  var scrollToBottom = function scrollToBottom(e) {
+    var _current;
+    target === null || target === void 0 ? void 0 : (_current = target.current) === null || _current === void 0 ? void 0 : _current.scrollTo({
+      behavior: 'smooth',
+      left: 0,
+      top: scrollHeight
+    });
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
+  return /*#__PURE__*/_jsx(Button, {
+    className: cx(styles, className),
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: ListEnd
+    }),
+    onClick: scrollToBottom,
+    ref: ref,
+    size: 'small',
+    style: _objectSpread({
+      bottom: 16,
+      position: 'absolute',
+      right: 16
+    }, style),
+    children: text || 'Back to bottom'
+  });
+});
+export default BackBottom;

package/es/BackBottom/style.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: boolean | undefined) => import("antd-style").ReturnStyles<string>;

package/es/BackBottom/style.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, visible) {
+  var token = _ref.token,
+    css = _ref.css,
+    stylish = _ref.stylish,
+    cx = _ref.cx;
+  return cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      pointer-events: ", ";\n\n      transform: translateY(", ");\n\n      padding-inline: 12px !important;\n\n      opacity: ", ";\n      background: ", ";\n      border-radius: 16px !important;\n    "])), visible ? 'all' : 'none', visible ? 0 : '16px', visible ? 1 : 0, token.colorFillSecondary));
+});

package/es/ChatItem/style.js

@@ -22,7 +22,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     alert: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        span[role='img'] {\n          align-self: flex-start;\n          width: 16px;\n          height: 16px;\n          margin-top: 3px;\n        }\n\n        .ant-alert-description {\n          text-align: justify;\n          word-break: break-all;\n          word-wrap: break-word;\n        }\n\n        &.ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n\n          .ant-alert-message {\n            font-size: 14px;\n            font-weight: 600;\n            text-align: justify;\n            word-break: break-all;\n            word-wrap: break-word;\n          }\n        }\n      "]))),
     avatarContainer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
     avatarGroupContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        width: ", "px;\n      "])), avatarSize),
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='chat-item-actions'] {\n            display: flex;\n          }\n\n          time,\n          div[role='chat-item-actions'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='chat-item-actions'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse', token.motionEaseOut)),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='chat-item-actions'] {\n            display: flex;\n          }\n\n          time,\n          div[role='chat-item-actions'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='chat-item-actions'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse', token.motionEaseOut)),
     editingContainer: cx(css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          padding: 8px 12px 12px;\n          border: 1px solid ", ";\n\n          &:active,\n          &:hover {\n            border-color: ", ";\n          }\n        "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
     editingInput: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        min-width: 800px !important;\n      "]))),
     loading: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),

package/es/Form/components/FormGroup.js

@@ -5,6 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Icon } from "../..";
 import { Collapse } from 'antd';
+import { ChevronDown } from 'lucide-react';
 import { memo } from 'react';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,6 +23,19 @@ var FormGroup = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsx(Collapse, _objectSpread({
     className: cx(styles.group, className),
     defaultActiveKey: [1],
+    expandIcon: function expandIcon(_ref2) {
+      var isActive = _ref2.isActive;
+      return /*#__PURE__*/_jsx(Icon, {
+        className: styles.icon,
+        icon: ChevronDown,
+        size: {
+          fontSize: 16
+        },
+        style: isActive ? {} : {
+          rotate: '-90deg'
+        }
+      });
+    },
     items: [{
       children: children,
       extra: extra,

package/es/Form/components/style.d.ts

@@ -2,6 +2,7 @@ export declare const useStyles: (props?: string | number | undefined) => import(
     footer: import("antd-style").SerializedStyles;
     formTitle: import("antd-style").SerializedStyles;
     group: string;
+    icon: import("antd-style").SerializedStyles;
     item: import("antd-style").SerializedStyles;
     title: import("antd-style").SerializedStyles;
 }>;

package/es/Form/components/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import { createStyles } from 'antd-style';
 import { isNumber } from 'lodash-es';
 export var useStyles = createStyles(function (_ref, itemMinWidth) {
@@ -10,8 +10,9 @@ export var useStyles = createStyles(function (_ref, itemMinWidth) {
   return {
     footer: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n    "]))),
     formTitle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n\n      text-align: left;\n\n      > div {\n        font-weight: 500;\n        line-height: 1;\n      }\n\n      > small {\n        display: block;\n\n        line-height: 1;\n        color: ", ";\n        word-wrap: break-word;\n        white-space: pre-wrap;\n      }\n\n      .ant-tag {\n        font-family: ", ";\n      }\n    "])), token.colorTextDescription, token.fontFamilyCode),
-    group: cx(isDarkMode && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          .ant-collapse-content {\n            background: transparent;\n          }\n\n          .ant-collapse-header {\n            background: ", ";\n          }\n        "])), token.colorFillTertiary), css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        .ant-collapse-header {\n          border-radius: 0 !important;\n        }\n\n        .ant-collapse-content-box {\n          padding-top: 0 !important;\n          padding-bottom: 0 !important;\n        }\n\n        .ant-form-item-label {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n        }\n      "])))),
-    item: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      padding: 8px 0;\n\n      .ant-row {\n        justify-content: space-between;\n\n        > div {\n          flex: unset !important;\n          flex-grow: unset !important;\n        }\n      }\n\n      ", "\n    "])), itemMinWidth && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        .ant-form-item-control {\n          width: ", ";\n        }\n      "])), isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth)),
-    title: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      font-size: 16px;\n      font-weight: 600;\n\n      .anticon {\n        color: ", ";\n      }\n    "])), token.colorPrimary)
+    group: cx(isDarkMode && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          .ant-collapse-content {\n            background: transparent;\n          }\n\n          .ant-collapse-header {\n            background: ", ";\n          }\n        "])), token.colorFillTertiary), css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        .ant-collapse-header {\n          align-items: center !important;\n          border-radius: 0 !important;\n        }\n\n        .ant-collapse-content-box {\n          padding-top: 0 !important;\n          padding-bottom: 0 !important;\n        }\n\n        .ant-form-item-label {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n        }\n      "])))),
+    icon: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      transition: all 100ms ", ";\n    "])), token.motionEaseOut),
+    item: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      padding: 8px 0;\n\n      .ant-row {\n        justify-content: space-between;\n\n        > div {\n          flex: unset !important;\n          flex-grow: unset !important;\n        }\n      }\n\n      ", "\n    "])), itemMinWidth && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        .ant-form-item-control {\n          width: ", ";\n        }\n      "])), isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth)),
+    title: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      font-size: 16px;\n      font-weight: 600;\n\n      .anticon {\n        color: ", ";\n      }\n    "])), token.colorPrimary)
   };
 });

package/es/TokenTag/style.js

@@ -6,7 +6,8 @@ export var ICON_SIZE = 20;
 export var useStyles = createStyles(function (_ref, _ref2) {
   var cx = _ref.cx,
     css = _ref.css,
-    token = _ref.token;
+    token = _ref.token,
+    isDarkMode = _ref.isDarkMode;
   var type = _ref2.type,
     shape = _ref2.shape;
   var percentStyle;
@@ -27,7 +28,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
         break;
       }
   }
-  var roundStylish = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding: 0 ", "px 0 ", "px;\n      background: ", ";\n      border-radius: ", "px;\n    "])), (HEIGHT - ICON_SIZE) * 1.2, (HEIGHT - ICON_SIZE) / 2, token.colorFillSecondary, HEIGHT / 2);
+  var roundStylish = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding: 0 ", "px 0 ", "px;\n      background: ", ";\n      border-radius: ", "px;\n    "])), (HEIGHT - ICON_SIZE) * 1.2, (HEIGHT - ICON_SIZE) / 2, isDarkMode ? token.colorFillSecondary : token.colorFillTertiary, HEIGHT / 2);
   var squareStylish = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n    "])), token.borderRadiusSM);
   return {
     container: cx(percentStyle, shape === 'round' ? roundStylish : squareStylish, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          user-select: none;\n\n          overflow: hidden;\n          display: flex;\n          flex: 0;\n          gap: 4px;\n          align-items: center;\n\n          min-width: fit-content;\n          height: ", "px;\n\n          font-family: ", ";\n          font-size: 13px;\n          line-height: 1;\n        "])), HEIGHT, token.fontFamilyCode))

package/es/index.d.ts

@@ -1,6 +1,7 @@
 export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
 export { default as ActionIconGroup, type ActionIconGroupProps } from './ActionIconGroup';
 export { default as Avatar, type AvatarProps } from './Avatar';
+export { default as BackBottom, type BackBottomProps } from './BackBottom';
 export { default as Burger, type BurgerProps } from './Burger';
 export { default as ChatHeader, type ChatHeaderProps } from './ChatHeader';
 export { default as ChatHeaderTitle, type ChatHeaderTitleProps, } from './ChatHeader/ChatHeaderTitle';

package/es/index.js

@@ -1,6 +1,7 @@
 export { default as ActionIcon } from "./ActionIcon";
 export { default as ActionIconGroup } from "./ActionIconGroup";
 export { default as Avatar } from "./Avatar";
+export { default as BackBottom } from "./BackBottom";
 export { default as Burger } from "./Burger";
 export { default as ChatHeader } from "./ChatHeader";
 export { default as ChatHeaderTitle } from "./ChatHeader/ChatHeaderTitle";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.73.0",
+  "version": "1.75.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",