@lobehub/ui 1.22.1 → 1.23.0

package/es/ActionIconGroup/index.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
 import { ActionIconProps } from "..";
+import { type MenuProps } from 'antd';
 import { DivProps } from "../types";
 export interface ActionIconGroupProps extends DivProps {
     direction?: 'row' | 'column';
-    items: ActionIconProps[];
+    dropdownMenu?: MenuProps['items'];
+    items?: ActionIconProps[];
     /**
      * @description The position of the tooltip relative to the target
      * @enum ["top","left","right","bottom","topLeft","topRight","bottomLeft","bottomRight","leftTop","leftBottom","rightTop","rightBottom"]

package/es/ActionIconGroup/index.js

@@ -1,9 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["type", "items", "placement", "spotlight", "direction"];
+var _excluded = ["type", "items", "placement", "spotlight", "direction", "dropdownMenu"];
 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 { ActionIcon, Spotlight } from "./..";
+import { Dropdown } from 'antd';
+import { MoreHorizontal } from 'lucide-react';
 import { memo } from 'react';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,26 +13,40 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var ActionIconGroup = /*#__PURE__*/memo(function (_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'block' : _ref$type,
-    items = _ref.items,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
     placement = _ref.placement,
     _ref$spotlight = _ref.spotlight,
     spotlight = _ref$spotlight === void 0 ? true : _ref$spotlight,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    _ref$dropdownMenu = _ref.dropdownMenu,
+    dropdownMenu = _ref$dropdownMenu === void 0 ? [] : _ref$dropdownMenu,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       direction: direction,
       type: type
     }),
     styles = _useStyles.styles;
+  var tooltipsPlacement = placement || (direction === 'column' ? 'right' : 'top');
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: styles.container
   }, props), {}, {
     children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), items.map(function (item, index) {
       return /*#__PURE__*/_jsx(ActionIcon, _objectSpread({
-        placement: placement || (direction === 'column' ? 'right' : 'top'),
+        placement: tooltipsPlacement,
         size: "small"
       }, item), index);
+    }), dropdownMenu && /*#__PURE__*/_jsx(Dropdown, {
+      menu: {
+        items: dropdownMenu
+      },
+      trigger: ['click'],
+      children: /*#__PURE__*/_jsx(ActionIcon, {
+        icon: MoreHorizontal,
+        placement: tooltipsPlacement,
+        size: "small"
+      }, "more")
     })]
   }));
 });

package/es/ActionIconGroup/style.js

@@ -8,7 +8,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     cx = _ref.cx;
   var direction = _ref2.direction,
     type = _ref2.type;
-  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder);
+  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "])), type === 'block' ? token.colorFillTertiary : token.colorFillQuaternary, type === 'block' ? 'transparent' : token.colorBorder);
   return {
     container: cx(type !== 'pure' && typeStylish, stylish.blur, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n\n          padding: 2px;\n\n          border-radius: ", "px;\n        "])), direction, token.borderRadius))
   };

package/es/ChatItem/index.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
 import { type AlertProps } from 'antd';
+import { ReactNode } from 'react';
 import type { DivProps } from "../types";
 import { MetaData } from "../types/meta";
 export interface ChatItemProps extends DivProps {
+    actions?: ReactNode;
     /**
      * @description Whether to show alert and alert config
      */

package/es/ChatItem/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "title", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert", "showTitle", "time"];
+var _excluded = ["actions", "className", "title", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert", "showTitle", "time"];
 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 { Alert } from 'antd';
@@ -13,7 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var AVATAR_SIZE = 40;
 var ChatItem = /*#__PURE__*/memo(function (_ref) {
-  var className = _ref.className,
+  var actions = _ref.actions,
+    className = _ref.className,
     title = _ref.title,
     primary = _ref.primary,
     _ref$borderSpacing = _ref.borderSpacing,
@@ -35,7 +36,8 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
       title: title,
       primary: primary,
       avatarSize: AVATAR_SIZE,
-      showTitle: showTitle
+      showTitle: showTitle,
+      borderSpacing: borderSpacing
     }),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
@@ -65,7 +67,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
       children: [/*#__PURE__*/_jsxs("div", {
         className: cx(styles.name, 'chat-item-name'),
         children: [showTitle ? avatar.title || 'untitled' : null, time && /*#__PURE__*/_jsx("span", {
-          className: cx(type === 'pure' && !showTitle && styles.time, 'chat-item-time'),
+          className: "chat-item-time",
           children: formatTime(time)
         })]
       }), alert ? /*#__PURE__*/_jsx(Alert, _objectSpread({
@@ -75,6 +77,9 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
         children: /*#__PURE__*/_jsx(Markdown, {
           children: String(message || '...')
         })
+      }), /*#__PURE__*/_jsx("div", {
+        className: cx(styles.actions, 'chat-item-actions'),
+        children: actions
       })]
     }), borderSpacing && /*#__PURE__*/_jsx("div", {
       style: {

package/es/ChatItem/style.d.ts

@@ -1,5 +1,6 @@
 export declare const useStyles: (props?: {
     avatarSize: number;
+    borderSpacing: boolean;
     placement?: "left" | "right" | undefined;
     primary?: boolean | undefined;
     showTitle?: boolean | undefined;
@@ -11,6 +12,6 @@ export declare const useStyles: (props?: {
     avatarContainer: import("antd-style").SerializedStyles;
     messageContainer: import("antd-style").SerializedStyles;
     name: import("antd-style").SerializedStyles;
-    time: string;
     message: string;
+    actions: string;
 }>;

package/es/ChatItem/style.js

@@ -1,28 +1,28 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var cx = _ref.cx,
     css = _ref.css,
-    token = _ref.token,
-    stylish = _ref.stylish;
+    token = _ref.token;
   var placement = _ref2.placement,
     type = _ref2.type,
     title = _ref2.title,
     primary = _ref2.primary,
     avatarSize = _ref2.avatarSize,
-    showTitle = _ref2.showTitle;
+    showTitle = _ref2.showTitle,
+    borderSpacing = _ref2.borderSpacing;
   var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? token.colorFillSecondary : token.colorFillTertiary, token.borderRadiusLG, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-top: ", ";\n    "])), title ? 0 : '6px');
-  var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), token.borderRadiusLG, token.motionEaseOut, token.colorFillTertiary);
+  var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
   return {
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject4 || (_templateObject4 = _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          .chat-item-time {\n            display: none;\n          }\n\n          &:hover {\n            .chat-item-time {\n              display: inline-block;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse')),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject4 || (_templateObject4 = _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          .chat-item-time,\n          .chat-item-actions {\n            display: none;\n          }\n\n          &:hover {\n            .chat-item-time {\n              display: inline-block;\n            }\n\n            .chat-item-actions {\n              display: flex;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse')),
     loading: css(_templateObject5 || (_templateObject5 = _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),
     avatarContainer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
     messageContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n\n        .ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n        }\n      "]))),
     name: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 4px;\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', placement === 'left' ? 'row' : 'row-reverse', token.colorTextDescription, placement === 'left' ? 'left' : 'right'),
-    time: cx(stylish.blur, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          padding: 4px 6px;\n\n          line-height: 1;\n\n          background: ", ";\n          border-radius: ", "px;\n        "])), token.colorFillQuaternary, token.borderRadius)),
-    message: cx(typeStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n        "]))))
+    message: cx(typeStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
+    actions: cx(css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: absolute;\n          display: flex;\n          align-items: flex-start;\n          justify-content: ", ";\n        "])), placement === 'left' ? 'flex-end' : 'flex-start'), type === 'block' && borderSpacing ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n              right: ", ";\n              bottom: 0;\n              left: ", ";\n              transform: translateX(", ");\n            "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', placement === 'left' ? '100%' : '-100%') : css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n              right: ", ";\n              bottom: ", ";\n              left: ", ";\n            "])), placement === 'left' ? '0' : 'unset', type === 'block' ? '-40px' : '-32px', placement === 'right' ? '0' : 'unset'))
   };
 });

package/es/ChatList/ActionsBar.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type ActionIconGroupProps } from "../index";
+export interface ActionsBarProps extends ActionIconGroupProps {
+    primary?: boolean;
+}
+declare const ActionsBar: import("react").NamedExoticComponent<ActionsBarProps>;
+export default ActionsBar;

package/es/ChatList/ActionsBar.js

@@ -0,0 +1,72 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["primary", "items", "dropdownMenu"];
+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 { Copy, Edit, RotateCw, Trash } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { ActionIconGroup, Icon } from "./..";
+import { jsx as _jsx } from "react/jsx-runtime";
+var ActionsBar = /*#__PURE__*/memo(function (_ref) {
+  var primary = _ref.primary,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$dropdownMenu = _ref.dropdownMenu,
+    dropdownMenu = _ref$dropdownMenu === void 0 ? [] : _ref$dropdownMenu,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var groupItems = useMemo(function () {
+    return [primary ? {
+      icon: Edit,
+      title: 'Edit',
+      onClick: function onClick() {
+        return console.log('click Edit');
+      }
+    } : {
+      icon: RotateCw,
+      title: 'Regenerate',
+      onClick: function onClick() {
+        return console.log('click Regenerate');
+      }
+    }].concat(_toConsumableArray(items)).filter(Boolean);
+  }, [primary, items]);
+  var groupDropdownMenu = useMemo(function () {
+    return dropdownMenu.concat([{
+      key: 'Edit',
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: Edit,
+        size: "small"
+      }),
+      label: 'Edit'
+    }, {
+      key: 'Copy',
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: Copy,
+        size: "small"
+      }),
+      label: 'Copy'
+    }, {
+      key: 'Regenerate',
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: RotateCw,
+        size: "small"
+      }),
+      label: 'Regenerate'
+    }, {
+      type: 'divider'
+    }, {
+      key: 'Delete',
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: Trash,
+        size: "small"
+      }),
+      label: 'Delete'
+    }]).filter(Boolean);
+  }, [primary, dropdownMenu]);
+  return /*#__PURE__*/_jsx(ActionIconGroup, _objectSpread({
+    dropdownMenu: groupDropdownMenu,
+    items: groupItems,
+    type: "ghost"
+  }, props));
+});
+export default ActionsBar;

package/es/ChatList/index.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 { memo } from 'react';
 import { ChatItem } from "./..";
+import ActionsBar from "./ActionsBar";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChatList = /*#__PURE__*/memo(function (_ref) {
@@ -22,6 +23,9 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
   }, props), {}, {
     children: data.map(function (item) {
       return /*#__PURE__*/_jsx(ChatItem, {
+        actions: /*#__PURE__*/_jsx(ActionsBar, {
+          primary: item.role === 'user'
+        }),
         avatar: item.meta,
         borderSpacing: type === 'chat',
         message: item.content,

package/package.json

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