@lobehub/ui 1.103.3 → 1.104.1

package/es/Burger/index.js

@@ -34,17 +34,19 @@ var Burger = /*#__PURE__*/memo(function (_ref) {
       icon: opened ? X : MenuIcon,
       size: "site"
     }), /*#__PURE__*/_jsxs(Drawer, {
-      bodyStyle: {
-        padding: 0
-      },
       className: styles.drawer,
       closeIcon: undefined,
-      headerStyle: {
-        display: 'none'
-      },
       open: opened,
       placement: 'left',
       rootClassName: styles.drawerRoot,
+      styles: {
+        body: {
+          padding: 0
+        },
+        header: {
+          display: 'none'
+        }
+      },
       width: '100vw',
       children: [/*#__PURE__*/_jsx(Menu, {
         className: styles.menu,

package/es/ChatItem/components/Actions.js

@@ -16,7 +16,7 @@ var Actions = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsx(Flexbox, {
     align: 'flex-start',
     className: styles.actions,
-    role: "widget",
+    role: "menubar",
     children: actions
   });
 });

package/es/ChatItem/style.js

@@ -24,7 +24,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     alert: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""]))),
     avatarContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
     avatarGroupContainer: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        width: ", "px;\n      "])), avatarSize),
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n          max-width: 100vw;\n          padding: 12px 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='widget'] {\n            display: flex;\n          }\n\n          time,\n          div[role='widget'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='widget'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n\n          ", " {\n            padding: 4px 16px;\n          }\n        "])), token.motionEaseOut, responsive.mobile)),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n          max-width: 100vw;\n          padding: 12px 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 16px;\n          }\n        "])), token.motionEaseOut, responsive.mobile)),
     editingContainer: cx(editingStylish, css(_templateObject11 || (_templateObject11 = _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(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
     editingInput: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\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),

package/es/ChatList/Item.d.ts

@@ -4,7 +4,7 @@ import { ChatMessage } from "../types/chatMessage";
 import { LLMRoleType } from "../types/llm";
 import { type ActionsBarProps } from './ActionsBar';
 export type OnMessageChange = (id: string, content: string) => void;
-export type OnActionClick = (actionKey: string, messageId: string) => void;
+export type OnActionClick = (props: ChatMessage) => void;
 export type RenderRole = LLMRoleType | 'default' | string;
 export type RenderItem = FC<{
     key: string;
@@ -21,13 +21,15 @@ export interface ListItemProps {
     /**
      * @description 点击操作按钮的回调函数
      */
-    onActionClick?: OnActionClick;
+    onActionsClick?: {
+        [actionKey: string]: OnActionClick;
+    };
     /**
      * @description 消息变化的回调函数
      */
     onMessageChange?: OnMessageChange;
     renderActions?: {
-        [role: RenderRole]: RenderAction;
+        [actionKey: string]: RenderAction;
     };
     /**
      * @description 渲染错误消息的函数

package/es/ChatList/Item.js

@@ -1,19 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["renderMessagesExtra", "showTitle", "onActionClick", "onMessageChange", "type", "text", "renderMessages", "renderErrorMessages", "renderActions", "loading", "groupNav", "renderItems"];
+var _excluded = ["renderMessagesExtra", "showTitle", "onActionsClick", "onMessageChange", "type", "text", "renderMessages", "renderErrorMessages", "renderActions", "loading", "groupNav", "renderItems"];
 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 { App } from 'antd';
-import copy from 'copy-to-clipboard';
+import _copy from 'copy-to-clipboard';
 import { memo, useCallback, useMemo, useState } from 'react';
 import ChatItem from "../ChatItem";
 import ActionsBar from "./ActionsBar";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Item = /*#__PURE__*/memo(function (props) {
+  var _item$error2;
   var renderMessagesExtra = props.renderMessagesExtra,
     showTitle = props.showTitle,
-    _onActionClick = props.onActionClick,
+    onActionsClick = props.onActionsClick,
     onMessageChange = props.onMessageChange,
     type = props.type,
     text = props.text,
@@ -37,85 +38,99 @@ var Item = /*#__PURE__*/memo(function (props) {
     if (!renderFunction && renderItems !== null && renderItems !== void 0 && renderItems['default']) renderFunction = renderItems['default'];
     if (!renderFunction) return;
     return renderFunction;
-  }, [renderItems, item]);
-  var innerRenderMessage = useCallback(function (editableContent) {
+  }, [renderItems === null || renderItems === void 0 ? void 0 : renderItems[item.role]]);
+  var RenderMessage = useCallback(function (_ref) {
+    var editableContent = _ref.editableContent,
+      data = _ref.data;
     if (!renderMessages || !(item !== null && item !== void 0 && item.role)) return;
     var RenderFunction;
     if (renderMessages !== null && renderMessages !== void 0 && renderMessages[item.role]) RenderFunction = renderMessages[item.role];
     if (!RenderFunction && renderMessages !== null && renderMessages !== void 0 && renderMessages['default']) RenderFunction = renderMessages['default'];
     if (!RenderFunction) return;
-    return /*#__PURE__*/_jsx(RenderFunction, _objectSpread(_objectSpread({}, item), {}, {
+    return /*#__PURE__*/_jsx(RenderFunction, _objectSpread(_objectSpread({}, data), {}, {
       editableContent: editableContent
     }));
-  }, [renderMessages, item]);
-  var MessageExtra = useCallback(function () {
+  }, [renderMessages === null || renderMessages === void 0 ? void 0 : renderMessages[item.role]]);
+  var MessageExtra = useCallback(function (_ref2) {
+    var data = _ref2.data;
     if (!renderMessagesExtra || !(item !== null && item !== void 0 && item.role)) return;
     var RenderFunction;
     if (renderMessagesExtra !== null && renderMessagesExtra !== void 0 && renderMessagesExtra[item.role]) RenderFunction = renderMessagesExtra[item.role];
     if (renderMessagesExtra !== null && renderMessagesExtra !== void 0 && renderMessagesExtra['default']) RenderFunction = renderMessagesExtra['default'];
     if (!RenderFunction && !RenderFunction) return;
-    return /*#__PURE__*/_jsx(RenderFunction, _objectSpread({}, item));
-  }, [renderMessagesExtra, item]);
-  var ErrorMessage = useCallback(function () {
+    return /*#__PURE__*/_jsx(RenderFunction, _objectSpread({}, data));
+  }, [renderMessagesExtra === null || renderMessagesExtra === void 0 ? void 0 : renderMessagesExtra[item.role]]);
+  var ErrorMessage = useCallback(function (_ref3) {
     var _item$error;
+    var data = _ref3.data;
     if (!renderErrorMessages || !(item !== null && item !== void 0 && (_item$error = item.error) !== null && _item$error !== void 0 && _item$error.type)) return;
     var RenderFunction;
     if (renderErrorMessages !== null && renderErrorMessages !== void 0 && renderErrorMessages[item.error.type]) RenderFunction = renderErrorMessages[item.error.type];
     if (!RenderFunction && renderErrorMessages !== null && renderErrorMessages !== void 0 && renderErrorMessages['default']) RenderFunction = renderErrorMessages['default'];
     if (!RenderFunction) return;
-    return /*#__PURE__*/_jsx(RenderFunction, _objectSpread({}, item));
-  }, [renderErrorMessages, item.error]);
-  var Actions = useCallback(function () {
+    return /*#__PURE__*/_jsx(RenderFunction, _objectSpread({}, data));
+  }, [renderErrorMessages === null || renderErrorMessages === void 0 ? void 0 : renderErrorMessages[item === null || item === void 0 ? void 0 : (_item$error2 = item.error) === null || _item$error2 === void 0 ? void 0 : _item$error2.type]]);
+  var Actions = useCallback(function (_ref4) {
+    var data = _ref4.data;
     if (!renderActions || !(item !== null && item !== void 0 && item.role)) return;
     var RenderFunction;
     if (renderActions !== null && renderActions !== void 0 && renderActions[item.role]) RenderFunction = renderActions[item.role];
     if (renderActions !== null && renderActions !== void 0 && renderActions['default']) RenderFunction = renderActions['default'];
     if (!RenderFunction) RenderFunction = ActionsBar;
-    return /*#__PURE__*/_jsx(RenderFunction, _objectSpread(_objectSpread({}, item), {}, {
+    var handleActionClick = _objectSpread({
+      copy: function copy(_ref5) {
+        var content = _ref5.content;
+        _copy(content);
+        message.success((text === null || text === void 0 ? void 0 : text.copySuccess) || 'Copy Success');
+      },
+      edit: function edit() {
+        return setEditing(true);
+      }
+    }, onActionsClick);
+    return /*#__PURE__*/_jsx(RenderFunction, _objectSpread(_objectSpread({}, data), {}, {
       onActionClick: function onActionClick(actionKey) {
-        switch (actionKey) {
-          case 'copy':
-            {
-              copy(item.content);
-              message.success((text === null || text === void 0 ? void 0 : text.copySuccess) || 'Copy Success');
-              break;
-            }
-          case 'edit':
-            {
-              setEditing(true);
-              break;
-            }
-        }
-        _onActionClick === null || _onActionClick === void 0 ? void 0 : _onActionClick(actionKey, item.id);
+        var _handleActionClick$ac;
+        return handleActionClick === null || handleActionClick === void 0 ? void 0 : (_handleActionClick$ac = handleActionClick[actionKey]) === null || _handleActionClick$ac === void 0 ? void 0 : _handleActionClick$ac.call(handleActionClick, data);
       },
       text: text
     }));
-  }, [renderActions, item, text, _onActionClick]);
+  }, [renderActions === null || renderActions === void 0 ? void 0 : renderActions[item.role], text, onActionsClick]);
   var error = useMemo(function () {
-    var _item$error2;
+    var _item$error3;
     if (!item.error) return;
     return {
-      message: (_item$error2 = item.error) === null || _item$error2 === void 0 ? void 0 : _item$error2.message
+      message: (_item$error3 = item.error) === null || _item$error3 === void 0 ? void 0 : _item$error3.message
     };
   }, [item.error]);
   if (RenderItem) return /*#__PURE__*/_jsx(RenderItem, _objectSpread({}, props), item.id);
   return /*#__PURE__*/_jsx(ChatItem, {
-    actions: /*#__PURE__*/_jsx(Actions, {}),
+    actions: /*#__PURE__*/_jsx(Actions, {
+      data: item
+    }),
     avatar: item.meta,
     avatarAddon: groupNav,
     editing: editing,
     error: error,
-    errorMessage: /*#__PURE__*/_jsx(ErrorMessage, {}),
+    errorMessage: /*#__PURE__*/_jsx(ErrorMessage, {
+      data: item
+    }),
     loading: loading,
     message: item.content,
-    messageExtra: /*#__PURE__*/_jsx(MessageExtra, {}),
+    messageExtra: /*#__PURE__*/_jsx(MessageExtra, {
+      data: item
+    }),
     onChange: function onChange(value) {
       return onMessageChange === null || onMessageChange === void 0 ? void 0 : onMessageChange(item.id, value);
     },
     onEditingChange: setEditing,
     placement: type === 'chat' ? item.role === 'user' ? 'right' : 'left' : 'left',
     primary: item.role === 'user',
-    renderMessage: innerRenderMessage,
+    renderMessage: function renderMessage(editableContent) {
+      return /*#__PURE__*/_jsx(RenderMessage, {
+        data: item,
+        editableContent: editableContent
+      });
+    },
     showTitle: showTitle,
     text: text,
     time: item.updateAt || item.createAt,

package/es/ChatList/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["onActionClick", "renderMessagesExtra", "className", "data", "type", "text", "showTitle", "onMessageChange", "renderMessages", "renderErrorMessages", "loadingId", "renderItems", "enableHistoryCount", "renderActions", "historyCount"];
+var _excluded = ["onActionsClick", "renderMessagesExtra", "className", "data", "type", "text", "showTitle", "onMessageChange", "renderMessages", "renderErrorMessages", "loadingId", "renderItems", "enableHistoryCount", "renderActions", "historyCount"];
 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 { Fragment, memo } from 'react';
@@ -10,7 +10,7 @@ import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var ChatList = /*#__PURE__*/memo(function (_ref) {
-  var onActionClick = _ref.onActionClick,
+  var onActionsClick = _ref.onActionsClick,
     renderMessagesExtra = _ref.renderMessagesExtra,
     className = _ref.className,
     data = _ref.data,
@@ -37,7 +37,7 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
     children: data.map(function (item, index) {
       var itemProps = {
         loading: loadingId === item.id,
-        onActionClick: onActionClick,
+        onActionsClick: onActionsClick,
         onMessageChange: onMessageChange,
         renderActions: renderActions,
         renderErrorMessages: renderErrorMessages,

package/es/MessageModal/index.js

@@ -43,9 +43,6 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
     overflowY: 'auto'
   };
   return /*#__PURE__*/_jsx(Modal, {
-    bodyStyle: mobile ? {
-      padding: 16
-    } : {},
     cancelText: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel',
     footer: isEdit ? null : undefined,
     okText: (text === null || text === void 0 ? void 0 : text.edit) || 'Edit',
@@ -56,6 +53,11 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
       return setTyping(true);
     },
     open: expand,
+    styles: mobile ? {
+      body: {
+        padding: 16
+      }
+    } : {},
     title: (text === null || text === void 0 ? void 0 : text.title) || 'Prompt',
     children: isEdit ? /*#__PURE__*/_jsx(MessageInput, {
       defaultValue: value,

package/es/Modal/index.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["children", "title", "className", "wrapClassName", "width", "onCancel", "open", "destroyOnClose", "bodyStyle"];
+var _excluded = ["children", "title", "className", "wrapClassName", "width", "onCancel", "open", "destroyOnClose"];
 var _templateObject, _templateObject2;
 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; }
@@ -32,7 +32,6 @@ var Modal = /*#__PURE__*/memo(function (_ref2) {
     onCancel = _ref2.onCancel,
     open = _ref2.open,
     destroyOnClose = _ref2.destroyOnClose,
-    bodyStyle = _ref2.bodyStyle,
     props = _objectWithoutProperties(_ref2, _excluded);
   var _useResponsive = useResponsive(),
     mobile = _useResponsive.mobile;
@@ -41,9 +40,6 @@ var Modal = /*#__PURE__*/memo(function (_ref2) {
     cx = _useStyles.cx,
     theme = _useStyles.theme;
   if (mobile) return /*#__PURE__*/_jsx(Drawer, {
-    bodyStyle: bodyStyle || {
-      padding: 0
-    },
     closeIcon: /*#__PURE__*/_jsx(ActionIcon, {
       icon: X,
       size: {
@@ -55,14 +51,19 @@ var Modal = /*#__PURE__*/memo(function (_ref2) {
     drawerStyle: {
       background: "linear-gradient(to bottom, ".concat(theme.colorBgContainer, ", ").concat(theme.colorBgLayout, ")")
     },
-    headerStyle: {
-      padding: '8px 4px'
-    },
     height: '75vh',
     maskClassName: cx(styles.wrap, wrapClassName),
     onClose: onCancel,
     open: open,
     placement: 'bottom',
+    styles: _objectSpread({
+      body: {
+        padding: 0
+      },
+      header: {
+        padding: '8px 4px'
+      }
+    }, props.styles),
     title: title,
     children: children
   });
@@ -73,7 +74,6 @@ var Modal = /*#__PURE__*/memo(function (_ref2) {
       }
     },
     children: /*#__PURE__*/_jsx(AntModal, _objectSpread(_objectSpread({
-      bodyStyle: bodyStyle,
       className: cx(styles.content, className),
       closable: true,
       closeIcon: /*#__PURE__*/_jsx(Icon, {

package/es/hooks/useChatListActionsBar.js

@@ -8,7 +8,7 @@ export var useChatListActionsBar = function useChatListActionsBar(text) {
     },
     del: {
       icon: Trash,
-      key: 'delete',
+      key: 'del',
       label: (text === null || text === void 0 ? void 0 : text.delete) || 'Delete'
     },
     divider: {

package/package.json

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