@lobehub/ui 1.128.4 → 1.128.6

package/README.md

@@ -63,7 +63,7 @@ $ bun add @lobehub/ui
 ### Compile with NextJS
 
 > \[!NOTE]\
-> By work correct with nextjs ssr, add `transpilePackages: ['@lobehub/ui']` to `next.config.js`. For example:
+> By work correct with nextjs page router SSR, add `transpilePackages: ['@lobehub/ui']` to `next.config.js`. For example:
 
 ```js
 // next.config.js

package/es/ChatItem/components/Title.js

@@ -11,7 +11,8 @@ var Title = /*#__PURE__*/memo(function (_ref) {
     avatar = _ref.avatar;
   var _useStyles = useStyles({
       placement: placement,
-      showTitle: showTitle
+      showTitle: showTitle,
+      time: time
     }),
     styles = _useStyles.styles;
   return /*#__PURE__*/_jsxs(Flexbox, {

package/es/ChatItem/index.js

@@ -48,6 +48,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
       placement: placement,
       primary: primary,
       showTitle: showTitle,
+      time: time,
       title: avatar.title,
       type: type
     }),

package/es/ChatItem/style.d.ts

@@ -4,6 +4,7 @@ export declare const useStyles: (props?: {
     placement?: "left" | "right" | undefined;
     primary?: boolean | undefined;
     showTitle?: boolean | undefined;
+    time?: number | undefined;
     title?: string | undefined;
     type?: "block" | "pure" | undefined;
 } | undefined) => import("antd-style").ReturnStyles<{

package/es/ChatItem/style.js

@@ -12,8 +12,8 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     title = _ref2.title,
     primary = _ref2.primary,
     avatarSize = _ref2.avatarSize,
-    showTitle = _ref2.showTitle,
-    editing = _ref2.editing;
+    editing = _ref2.editing,
+    time = _ref2.time;
   var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? isDarkMode ? token.colorFill : token.colorBgElevated : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-top: ", ";\n    "])), title ? 0 : '6px');
   var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-bottom: -16px;\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
@@ -23,15 +23,15 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          flex: none;\n          align-self: ", ";\n          justify-content: ", ";\n        "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            pointer-events: none !important;\n            opacity: 0 !important;\n          "])))),
     avatarContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
     avatarGroupContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        width: ", "px;\n      "])), avatarSize),
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          position: relative;\n\n          overflow: hidden;\n\n          width: 100%;\n          max-width: 100vw;\n          padding: 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='menubar'] {\n            display: flex;\n          }\n\n          time,\n          div[role='menubar'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='menubar'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n\n          ", " {\n            padding: 4px 8px;\n          }\n        "])), token.motionEaseOut, responsive.mobile)),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n          max-width: 100vw;\n          padding: 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='menubar'] {\n            display: flex;\n          }\n\n          time,\n          div[role='menubar'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='menubar'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n\n          ", " {\n            padding: 4px 8px;\n          }\n        "])), token.motionEaseOut, responsive.mobile)),
     editingContainer: cx(editingStylish, css(_templateObject10 || (_templateObject10 = _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(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
     editingInput: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        width: 100%;\n      "]))),
     errorContainer: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        position: relative;\n        overflow: hidden;\n        width: 100%;\n      "]))),
     loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\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),
     message: cx(typeStylish, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          position: relative;\n\n          ", " {\n            width: 100%;\n          }\n        "])), responsive.mobile)),
-    messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          max-width: 100%;\n\n          ", " {\n            overflow-x: auto;\n          }\n        "])), responsive.mobile)),
+    messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          max-width: 100%;\n          margin-top: ", "px;\n\n          ", " {\n            overflow-x: auto;\n          }\n        "])), time ? -16 : 0, responsive.mobile)),
     messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow-x: hidden;\n          max-width: 100%;\n\n          ", " {\n            flex-direction: column !important;\n          }\n        "])), responsive.mobile)),
     messageExtra: cx('message-extra'),
-    name: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
+    name: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), token.colorTextDescription, placement === 'left' ? 'left' : 'right')
   };
 });

package/es/DraggablePanel/index.js

@@ -3,9 +3,10 @@ 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 { useHover } from 'ahooks';
+import { ConfigProvider } from 'antd';
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';
 import { Resizable } from 're-resizable';
-import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Center } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
 import { useStyles } from "./style";
@@ -46,10 +47,21 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     destroyOnClose = _ref.destroyOnClose,
     hanlderStyle = _ref.hanlderStyle,
     _ref$classNames = _ref.classNames,
-    classNames = _ref$classNames === void 0 ? {} : _ref$classNames;
+    classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
+    dir = _ref.dir;
   var reference = useRef();
   var isHovering = useHover(reference);
   var isVertical = placement === 'top' || placement === 'bottom';
+
+  // inherit direction from Ant Design ConfigProvider
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    antdDirection = _useContext.direction;
+  var direction = dir !== null && dir !== void 0 ? dir : antdDirection;
+  var internalPlacement = placement;
+  // reverse the placement when dir is rtl
+  if (direction === 'rtl' && ['left', 'right'].includes(placement)) {
+    internalPlacement = internalPlacement === 'left' ? 'right' : 'left';
+  }
   var _useStyles = useStyles(headerHeight),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
@@ -79,8 +91,8 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
   var canResizing = resize !== false && isExpand;
   var resizeHandleClassNames = useMemo(function () {
     if (!canResizing) return {};
-    return _defineProperty({}, revesePlacement(placement), styles["".concat(revesePlacement(placement), "Handle")]);
-  }, [canResizing, placement]);
+    return _defineProperty({}, revesePlacement(internalPlacement), styles["".concat(revesePlacement(internalPlacement), "Handle")]);
+  }, [canResizing, internalPlacement]);
   var resizing = _objectSpread(_defineProperty({
     bottom: false,
     bottomLeft: false,
@@ -90,7 +102,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     top: false,
     topLeft: false,
     topRight: false
-  }, revesePlacement(placement), true), resize);
+  }, revesePlacement(internalPlacement), true), resize);
   var defaultSize = useMemo(function () {
     if (isVertical) return _objectSpread({
       height: DEFAULT_HEIGHT,
@@ -120,7 +132,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     }
   };
   var _useMemo = useMemo(function () {
-      switch (placement) {
+      switch (internalPlacement) {
         case 'top':
           {
             return {
@@ -150,7 +162,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
             };
           }
       }
-    }, [styles, placement]),
+    }, [styles, internalPlacement]),
     Arrow = _useMemo.Arrow,
     arrowPlacement = _useMemo.className;
   var handler = /*#__PURE__*/_jsx(Center
@@ -214,7 +226,8 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsxs("aside", {
     className: cx(styles.container,
     // @ts-ignore
-    styles[mode === 'fixed' ? 'fixed' : "".concat(placement, "Float")], className),
+    styles[mode === 'fixed' ? 'fixed' : "".concat(internalPlacement, "Float")], className),
+    dir: dir,
     ref: reference,
     style: isExpand ? _defineProperty({}, "border".concat(arrowPlacement, "Width"), 1) : {},
     children: [expandable && showExpand && handler, destroyOnClose ? isExpand && inner : inner]

package/es/SearchBar/style.js

@@ -10,6 +10,6 @@ export var useStyles = createStyles(function (_ref) {
     icon: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextPlaceholder),
     input: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 8px 0 12px;\n  "]))),
     search: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n    max-width: 100%;\n  "]))),
-    tag: cx(stylish.blur, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 5;\n      top: 50%;\n      right: 0;\n      transform: translateY(-50%);\n\n      color: ", ";\n    "])), token.colorTextDescription))
+    tag: cx(stylish.blur, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 5;\n      inset-block-start: 50%;\n      inset-inline-end: 12px;\n      transform: translateY(-50%);\n\n      color: ", ";\n    "])), token.colorTextDescription))
   };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.128.4",
+  "version": "1.128.6",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -31,7 +31,6 @@
     "build:watch": "father dev",
     "ci": "npm run lint && npm run type-check",
     "clean": "rm -r es lib dist coverage .dumi/tmp .eslintcache node_modules/.cache",
-    "dev": "father dev",
     "docs:build": "dumi build",
     "docs:build-analyze": "ANALYZE=1 dumi build",
     "docs:dev": "dumi dev",