@lobehub/ui 1.31.3 → 1.33.0

package/README.md

@@ -2,7 +2,9 @@
 
 <div align="center">
 
-<img width="160" src="https://npm.elemecdn.com/@lobehub/assets-logo@1.0.0/assets/logo-3d.webp">
+<img height="120" src="https://npm.elemecdn.com/@lobehub/assets-logo@1.0.0/assets/logo-3d.webp">
+<img height="120" src="https://gw.alipayobjects.com/zos/kitchen/qJ3l3EPsdW/split.svg">
+<img height="120" src="https://npm.elemecdn.com/fluentui-emoji/icons/modern/lollipop.svg">
 
 <h1>Lobe UI</h1>
 

package/es/ActionIconGroup/index.d.ts

@@ -1,7 +1,12 @@
 /// <reference types="react" />
 import { ActionIconProps } from "..";
-import { type MenuProps } from 'antd';
+import { type LucideIcon } from 'lucide-react';
 import { DivProps } from "../types";
+interface ActionIconGroupItems {
+    icon: LucideIcon;
+    key: string;
+    label: string;
+}
 export interface ActionIconGroupProps extends DivProps {
     /**
      * @description The direction of the icons
@@ -11,12 +16,15 @@ export interface ActionIconGroupProps extends DivProps {
     /**
      * @description The menu items for the dropdown
      */
-    dropdownMenu?: MenuProps['items'];
+    dropdownMenu?: (ActionIconGroupItems | {
+        type: 'divider';
+    })[];
     /**
      * @description The items to be rendered
      * @default []
      */
-    items?: ActionIconProps[];
+    items?: ActionIconGroupItems[];
+    onActionClick: (key: string) => 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

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["type", "items", "placement", "spotlight", "direction", "dropdownMenu"];
+var _excluded = ["type", "items", "placement", "spotlight", "direction", "dropdownMenu", "onActionClick"];
 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 { ActionIcon, Icon, Spotlight } from "./..";
 import { Dropdown } from 'antd';
 import { MoreHorizontal } from 'lucide-react';
 import { memo } from 'react';
@@ -22,6 +22,8 @@ var ActionIconGroup = /*#__PURE__*/memo(function (_ref) {
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
     _ref$dropdownMenu = _ref.dropdownMenu,
     dropdownMenu = _ref$dropdownMenu === void 0 ? [] : _ref$dropdownMenu,
+    _ref$onActionClick = _ref.onActionClick,
+    onActionClick = _ref$onActionClick === void 0 ? function () {} : _ref$onActionClick,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       direction: direction,
@@ -32,14 +34,30 @@ var ActionIconGroup = /*#__PURE__*/memo(function (_ref) {
   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({
+    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), items.map(function (item) {
+      return /*#__PURE__*/_jsx(ActionIcon, {
+        icon: item.icon,
+        onClick: function onClick() {
+          return onActionClick(item.key);
+        },
         placement: tooltipsPlacement,
-        size: "small"
-      }, item), index);
+        size: "small",
+        title: item.label
+      }, item.key);
     }), dropdownMenu && /*#__PURE__*/_jsx(Dropdown, {
       menu: {
-        items: dropdownMenu
+        items: dropdownMenu.map(function (item) {
+          if (item.type) return item;
+          return _objectSpread(_objectSpread({}, item), {}, {
+            icon: /*#__PURE__*/_jsx(Icon, {
+              icon: item.icon,
+              size: "small"
+            }),
+            onClick: function onClick() {
+              return onActionClick(item.key);
+            }
+          });
+        })
       },
       trigger: ['click'],
       children: /*#__PURE__*/_jsx(ActionIcon, {

package/es/ChatItem/index.d.ts

@@ -1,8 +1,7 @@
 import { type AlertProps } from 'antd';
 import { ReactNode } from 'react';
-import type { DivProps } from "../types";
 import { MetaData } from "../types/meta";
-export interface ChatItemProps extends DivProps {
+export interface ChatItemProps {
     actions?: ReactNode;
     /**
      * @description Whether to show alert and alert config
@@ -17,6 +16,12 @@ export interface ChatItemProps extends DivProps {
      * @default true
      */
     borderSpacing?: boolean;
+    className?: string;
+    /**
+     * @title Whether the component is in edit mode or not
+     * @default false
+     */
+    editing?: boolean;
     /**
      * @description Whether to show a loading spinner
      * @default false
@@ -26,6 +31,16 @@ export interface ChatItemProps extends DivProps {
      * @description The message to be displayed
      */
     message?: string;
+    /**
+     * @title Callback function when the value changes
+     * @param value - The new value
+     */
+    onChange?: (value: string) => void;
+    /**
+     * @title Callback function when the editing state changes
+     * @param editing - Whether the component is in edit mode or not
+     */
+    onEditingChange?: (editing: boolean) => void;
     /**
      * @description The placement of the chat item
      * @default 'left'

package/es/ChatItem/index.js

@@ -1,14 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["actions", "className", "title", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert", "showTitle", "time"];
+var _excluded = ["actions", "className", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert", "showTitle", "time", "editing", "onChange", "onEditingChange"];
 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';
 import { Loader2 } from 'lucide-react';
 import { memo } from 'react';
 import Avatar from "../Avatar";
+import EditableMessage from "../EditableMessage";
 import Icon from "../Icon";
-import Markdown from "../Markdown";
 import { formatTime } from "../utils/formatTime";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,7 +17,6 @@ var AVATAR_SIZE = 40;
 var ChatItem = /*#__PURE__*/memo(function (_ref) {
   var actions = _ref.actions,
     className = _ref.className,
-    title = _ref.title,
     primary = _ref.primary,
     _ref$borderSpacing = _ref.borderSpacing,
     borderSpacing = _ref$borderSpacing === void 0 ? true : _ref$borderSpacing,
@@ -31,6 +30,9 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     alert = _ref.alert,
     showTitle = _ref.showTitle,
     time = _ref.time,
+    editing = _ref.editing,
+    onChange = _ref.onChange,
+    onEditingChange = _ref.onEditingChange,
     properties = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       avatarSize: AVATAR_SIZE,
@@ -38,7 +40,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
       placement: placement,
       primary: primary,
       showTitle: showTitle,
-      title: title,
+      title: avatar.title,
       type: type
     }),
     cx = _useStyles.cx,
@@ -76,10 +78,16 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
         showIcon: true
       }, alert)) : /*#__PURE__*/_jsx("div", {
         className: styles.message,
-        children: /*#__PURE__*/_jsx(Markdown, {
-          children: String(message || '...')
+        style: editing ? {
+          padding: 12
+        } : {},
+        children: /*#__PURE__*/_jsx(EditableMessage, {
+          editing: editing,
+          onChange: onChange,
+          onEditingChange: onEditingChange,
+          value: String(message || '...')
         })
-      }), /*#__PURE__*/_jsx("div", {
+      }), !editing && /*#__PURE__*/_jsx("div", {
         className: cx(styles.actions, 'chat-item-actions'),
         children: actions
       })]

package/es/ChatList/ActionsBar.js

@@ -7,7 +7,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { Copy, Edit, RotateCw, Trash } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import ActionIconGroup from "../ActionIconGroup";
-import Icon from "../Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ActionsBar = /*#__PURE__*/memo(function (_ref) {
   var primary = _ref.primary,
@@ -19,48 +18,32 @@ var ActionsBar = /*#__PURE__*/memo(function (_ref) {
   var groupItems = useMemo(function () {
     return [primary ? {
       icon: Edit,
-      onClick: function onClick() {
-        return console.log('click Edit');
-      },
-      title: 'Edit'
+      key: 'edit',
+      label: 'Edit'
     } : {
       icon: RotateCw,
-      onClick: function onClick() {
-        return console.log('click Regenerate');
-      },
-      title: 'Regenerate'
+      key: 'regenerate',
+      label: 'Regenerate'
     }].concat(_toConsumableArray(items)).filter(Boolean);
   }, [primary, items]);
   var groupDropdownMenu = useMemo(function () {
     return [].concat(_toConsumableArray(dropdownMenu), [{
-      icon: /*#__PURE__*/_jsx(Icon, {
-        icon: Edit,
-        size: "small"
-      }),
-      key: 'Edit',
+      icon: Edit,
+      key: 'edit',
       label: 'Edit'
     }, {
-      icon: /*#__PURE__*/_jsx(Icon, {
-        icon: Copy,
-        size: "small"
-      }),
-      key: 'Copy',
+      icon: Copy,
+      key: 'copy',
       label: 'Copy'
     }, {
-      icon: /*#__PURE__*/_jsx(Icon, {
-        icon: RotateCw,
-        size: "small"
-      }),
-      key: 'Regenerate',
+      icon: RotateCw,
+      key: 'regenerate',
       label: 'Regenerate'
     }, {
       type: 'divider'
     }, {
-      icon: /*#__PURE__*/_jsx(Icon, {
-        icon: Trash,
-        size: "small"
-      }),
-      key: 'Delete',
+      icon: Trash,
+      key: 'Ddelete',
       label: 'Delete'
     }]);
   }, [primary, dropdownMenu]);

package/es/ChatList/index.d.ts

@@ -7,6 +7,7 @@ export interface ChatListProps extends DivProps {
      * @description Data of chat messages to be displayed
      */
     data: ChatMessage[];
+    onActionClick: (actionKey: string, messageId: string) => void;
     /**
      * @description Whether to show name of the chat item
      * @default false

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 = ["className", "data", "type", "showTitle"];
+var _excluded = ["onActionClick", "className", "data", "type", "showTitle"];
 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 { memo } from 'react';
@@ -9,7 +9,8 @@ import ActionsBar from "./ActionsBar";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChatList = /*#__PURE__*/memo(function (_ref) {
-  var className = _ref.className,
+  var _onActionClick = _ref.onActionClick,
+    className = _ref.className,
     data = _ref.data,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'chat' : _ref$type,
@@ -24,6 +25,9 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
     children: data.map(function (item) {
       return /*#__PURE__*/_jsx(ChatItem, {
         actions: /*#__PURE__*/_jsx(ActionsBar, {
+          onActionClick: function onActionClick(actionKey) {
+            return _onActionClick(actionKey, item.id);
+          },
           primary: item.role === 'user'
         }),
         avatar: item.meta,

package/es/Markdown/CodeBlock.js

@@ -20,7 +20,6 @@ var Code = /*#__PURE__*/memo(function (properties) {
   return /*#__PURE__*/_jsx(Highlighter, {
     className: styles,
     language: (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'markdown',
-    spotlight: true,
     theme: theme.appearance,
     type: "block",
     children: Array.isArray(children) ? children[0] : children

package/es/MessageInput/index.js

@@ -1,7 +1,7 @@
 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 = ["type", "onCancel", "defaultValue", "onConfirm", "renderButtons", "textareaStyle", "textareaClassname", "height"];
+var _excluded = ["type", "onCancel", "defaultValue", "onConfirm", "renderButtons", "textareaStyle", "textareaClassname", "placeholder", "height"];
 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 { Button } from 'antd';
@@ -13,13 +13,15 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var MessageInput = /*#__PURE__*/memo(function (_ref) {
   var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'ghost' : _ref$type,
+    type = _ref$type === void 0 ? 'pure' : _ref$type,
     onCancel = _ref.onCancel,
     defaultValue = _ref.defaultValue,
     onConfirm = _ref.onConfirm,
     renderButtons = _ref.renderButtons,
     textareaStyle = _ref.textareaStyle,
     textareaClassname = _ref.textareaClassname,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Type something...' : _ref$placeholder,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? 'fit-content' : _ref$height,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -36,7 +38,7 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
       onValueChange: function onValueChange(value) {
         setRole(value);
       },
-      placeholder: '例如：你是一名擅长翻译的翻译官，请将用户所输入的英文都翻译为中文。',
+      placeholder: placeholder,
       resize: false,
       style: _objectSpread({
         height: height
@@ -47,16 +49,20 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
       direction: 'horizontal-reverse',
       gap: 8,
       children: renderButtons ? renderButtons(temporarySystemRole).map(function (buttonProps, index) {
-        return /*#__PURE__*/_jsx(Button, _objectSpread({}, buttonProps), index);
+        return /*#__PURE__*/_jsx(Button, _objectSpread({
+          size: "small"
+        }, buttonProps), index);
       }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Button, {
           onClick: function onClick() {
             onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(temporarySystemRole);
           },
+          size: "small",
           type: "primary",
           children: "Confirm"
         }), /*#__PURE__*/_jsx(Button, {
           onClick: onCancel,
+          size: "small",
           children: "Cancel"
         })]
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.31.3",
+  "version": "1.33.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -115,7 +115,7 @@
     "@types/react-dom": "^18",
     "@vitest/coverage-v8": "latest",
     "antd-style": "^3",
-    "babel-plugin-antd-style": "^1.0.4",
+    "babel-plugin-antd-style": "^1",
     "commitlint": "^17",
     "concurrently": "^8",
     "cross-env": "^7",