@lobehub/ui 1.106.1 → 1.107.0

package/es/ActionIconGroup/index.d.ts

@@ -7,6 +7,11 @@ export interface ActionIconGroupItems {
     key: string;
     label: string;
 }
+export interface ActionEvent {
+    item: ActionIconGroupItems;
+    key: string;
+    keyPath: string[];
+}
 export interface ActionIconGroupProps extends DivProps {
     /**
      * @description The direction of the icons
@@ -24,7 +29,7 @@ export interface ActionIconGroupProps extends DivProps {
      * @default []
      */
     items?: ActionIconGroupItems[];
-    onActionClick?: (key: string) => void;
+    onActionClick?: (action: ActionEvent) => void;
     /**
      * @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

@@ -37,7 +37,11 @@ var ActionIconGroup = /*#__PURE__*/memo(function (_ref) {
       return /*#__PURE__*/_jsx(ActionIcon, {
         icon: item.icon,
         onClick: onActionClick ? function () {
-          return onActionClick === null || onActionClick === void 0 ? void 0 : onActionClick(item.key);
+          return onActionClick === null || onActionClick === void 0 ? void 0 : onActionClick({
+            item: item,
+            key: item.key,
+            keyPath: [item.key]
+          });
         } : undefined,
         placement: tooltipsPlacement,
         size: "small",
@@ -52,8 +56,12 @@ var ActionIconGroup = /*#__PURE__*/memo(function (_ref) {
               icon: item.icon,
               size: "small"
             }),
-            onClick: onActionClick ? function () {
-              return onActionClick(item.key);
+            onClick: onActionClick ? function (info) {
+              return onActionClick({
+                item: item,
+                key: info.key,
+                keyPath: info.keyPath
+              });
             } : undefined
           });
         })

package/es/Avatar/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", "avatar", "title", "animation", "size", "shape", "background"];
+var _excluded = ["className", "avatar", "title", "animation", "size", "shape", "background", "onClick", "style"];
 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 { Avatar as AntAvatar } from 'antd';
@@ -20,6 +20,8 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
     _ref$background = _ref.background,
     background = _ref$background === void 0 ? 'rgba(0,0,0,0)' : _ref$background,
+    onClick = _ref.onClick,
+    style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
   var isImage = Boolean(avatar && ['/', 'http', 'data:'].some(function (index) {
     return avatar.startsWith(index);
@@ -36,17 +38,18 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var text = String(isImage ? title : avatar);
-  return isImage ? /*#__PURE__*/_jsx(AntAvatar, _objectSpread({
+  var avatarProps = {
     className: cx(styles.avatar, className),
     shape: shape,
     size: size,
+    style: onClick ? style : _objectSpread({
+      cursor: 'default'
+    }, style)
+  };
+  return isImage ? /*#__PURE__*/_jsx(AntAvatar, _objectSpread(_objectSpread({
     src: isBase64 ? avatar : undefined,
     srcSet: isBase64 ? undefined : avatar
-  }, props)) : /*#__PURE__*/_jsx(AntAvatar, _objectSpread(_objectSpread({
-    className: cx(styles.avatar, className),
-    shape: shape,
-    size: size
-  }, props), {}, {
+  }, avatarProps), props)) : /*#__PURE__*/_jsx(AntAvatar, _objectSpread(_objectSpread(_objectSpread({}, avatarProps), props), {}, {
     children: emoji ? /*#__PURE__*/_jsx(FluentEmoji, {
       emoji: emoji,
       size: size * 0.8,

package/es/ChatList/Item.d.ts

@@ -1,10 +1,11 @@
 import { FC, ReactNode } from 'react';
+import { ActionEvent } from "../ActionIconGroup";
 import { type ChatItemProps } from "../ChatItem";
 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 = (props: ChatMessage) => void;
+export type OnActionClick = (action: ActionEvent, message: ChatMessage) => void;
 export type RenderRole = LLMRoleType | 'default' | string;
 export type RenderItem = FC<{
     key: string;
@@ -21,9 +22,7 @@ export interface ListItemProps {
     /**
      * @description 点击操作按钮的回调函数
      */
-    onActionsClick?: {
-        [actionKey: string]: OnActionClick;
-    };
+    onActionsClick?: OnActionClick;
     /**
      * @description 消息变化的回调函数
      */

package/es/ChatList/Item.js

@@ -5,7 +5,7 @@ var _excluded = ["renderMessagesExtra", "showTitle", "onActionsClick", "onMessag
 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";
@@ -77,20 +77,24 @@ var Item = /*#__PURE__*/memo(function (props) {
     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;
-    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);
+    var handleActionClick = function handleActionClick(action, data) {
+      switch (action.key) {
+        case 'copy':
+          {
+            copy(data.content);
+            message.success((text === null || text === void 0 ? void 0 : text.copySuccess) || 'Copy Success');
+            break;
+          }
+        case 'edit':
+          {
+            setEditing(true);
+          }
       }
-    }, onActionsClick);
+      onActionsClick === null || onActionsClick === void 0 ? void 0 : onActionsClick(action, data);
+    };
     return /*#__PURE__*/_jsx(RenderFunction, _objectSpread(_objectSpread({}, data), {}, {
       onActionClick: function onActionClick(actionKey) {
-        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);
+        return handleActionClick === null || handleActionClick === void 0 ? void 0 : handleActionClick(actionKey, data);
       },
       text: text
     }));

package/es/EditableMessage/index.d.ts

@@ -25,6 +25,10 @@ export interface EditableMessageProps {
     fullFeaturedCodeBlock?: boolean;
     height?: MessageInputProps['height'];
     inputType?: MessageInputProps['type'];
+    model?: {
+        extra?: MessageModalProps['extra'];
+        footer?: MessageModalProps['footer'];
+    };
     /**
      * @title Callback function when the value changes
      * @param value - The new value

package/es/EditableMessage/index.js

@@ -28,7 +28,8 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
     inputType = _ref.inputType,
     editButtonSize = _ref.editButtonSize,
     text = _ref.text,
-    fullFeaturedCodeBlock = _ref.fullFeaturedCodeBlock;
+    fullFeaturedCodeBlock = _ref.fullFeaturedCodeBlock,
+    model = _ref.model;
   var _useControlledState = useControlledState(false, {
       onChange: onEditingChange,
       value: editing
@@ -78,6 +79,8 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
       children: value || placeholder
     }), /*#__PURE__*/_jsx(MessageModal, {
       editing: isEdit,
+      extra: model === null || model === void 0 ? void 0 : model.extra,
+      footer: model === null || model === void 0 ? void 0 : model.footer,
       height: height,
       onChange: function onChange(text) {
         return _onChange === null || _onChange === void 0 ? void 0 : _onChange(text);

package/es/MessageModal/index.d.ts

@@ -1,11 +1,13 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import { type MessageInputProps } from "../MessageInput";
-export interface MessageModalProps {
+import { type ModalProps } from "../Modal";
+export interface MessageModalProps extends Pick<ModalProps, 'open' | 'footer'> {
     /**
      * @description Whether the message is being edited or not
      * @default false
      */
     editing?: boolean;
+    extra?: ReactNode;
     height?: MessageInputProps['height'];
     /**
      * @description Callback fired when message content is changed
@@ -23,7 +25,6 @@ export interface MessageModalProps {
      * @description Whether the modal is open or not
      * @default false
      */
-    open?: boolean;
     placeholder?: string;
     text?: {
         cancel?: string;

package/es/MessageModal/index.js

@@ -9,6 +9,8 @@ import Markdown from "../Markdown";
 import MessageInput from "../MessageInput";
 import Modal from "../Modal";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var MessageModal = /*#__PURE__*/memo(function (_ref) {
   var editing = _ref.editing,
     open = _ref.open,
@@ -19,7 +21,9 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
     placeholder = _ref.placeholder,
     value = _ref.value,
     onChange = _ref.onChange,
-    text = _ref.text;
+    text = _ref.text,
+    footer = _ref.footer,
+    extra = _ref.extra;
   var _useResponsive = useResponsive(),
     mobile = _useResponsive.mobile;
   var _useControlledState = useControlledState(false, {
@@ -44,7 +48,7 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
   };
   return /*#__PURE__*/_jsx(Modal, {
     cancelText: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel',
-    footer: isEdit ? null : undefined,
+    footer: isEdit ? null : footer,
     okText: (text === null || text === void 0 ? void 0 : text.edit) || 'Edit',
     onCancel: function onCancel() {
       return setExpand(false);
@@ -75,11 +79,13 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
         confirm: text === null || text === void 0 ? void 0 : text.confirm
       },
       type: 'block'
-    }) : /*#__PURE__*/_jsx(Markdown, {
-      style: value ? markdownStyle : _objectSpread(_objectSpread({}, markdownStyle), {}, {
-        opacity: 0.5
-      }),
-      children: String(value || placeholder)
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [extra, /*#__PURE__*/_jsx(Markdown, {
+        style: value ? markdownStyle : _objectSpread(_objectSpread({}, markdownStyle), {}, {
+          opacity: 0.5
+        }),
+        children: String(value || placeholder)
+      })]
     })
   });
 });

package/es/ThemeProvider/index.js

@@ -4,9 +4,8 @@ var _excluded = ["children", "customStylish", "customToken", "enableWebfonts", "
 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 { ThemeProvider as AntdThemeProvider, StyleProvider, setupStyled } from 'antd-style';
-import { memo, useCallback, useEffect } from 'react';
-import { ThemeContext } from 'styled-components';
+import { ThemeProvider as AntdThemeProvider, StyleProvider } from 'antd-style';
+import { memo, useCallback } from 'react';
 import { useCdnFn } from "../ConfigProvider";
 import FontLoader from "../FontLoader";
 import { lobeCustomStylish, lobeCustomToken } from "../styles";
@@ -43,11 +42,6 @@ var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
     pkg: 'katex',
     version: '0.16.8'
   })];
-  useEffect(function () {
-    setupStyled({
-      ThemeContext: ThemeContext
-    });
-  }, []);
   var stylish = useCallback(function (theme) {
     return _objectSpread(_objectSpread({}, lobeCustomStylish(theme)), customStylish === null || customStylish === void 0 ? void 0 : customStylish(theme));
   }, [customStylish]);

package/es/types/global.d.ts

@@ -1,5 +1,4 @@
 import 'antd-style';
-import { AntdToken } from 'antd-style/lib/types/theme';
 
 import { LobeCustomStylish } from './customStylish';
 import { LobeCustomToken } from './customToken';
@@ -10,7 +9,3 @@ declare module 'antd-style' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   export interface CustomStylish extends LobeCustomStylish {}
 }
-
-declare module 'styled-components' {
-  export interface DefaultTheme extends AntdToken, LobeCustomToken {}
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.106.1",
+  "version": "1.107.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -105,7 +105,6 @@
     "remark-gfm": "^3",
     "remark-math": "^5",
     "shikiji": "^0",
-    "styled-components": "^6",
     "swr": "^2",
     "three": "^0.150",
     "ts-md5": "^1",
@@ -143,6 +142,7 @@
     "remark": "^14",
     "remark-cli": "^11",
     "semantic-release": "^21",
+    "styled-components": "^6",
     "stylelint": "^15",
     "typescript": "^5",
     "vitest": "latest"