@lobehub/ui 1.49.1 → 1.50.0

package/es/ChatItem/index.js

@@ -79,16 +79,17 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
           className: styles.alert,
           showIcon: true
         }, alert)) : /*#__PURE__*/_jsxs(Flexbox, {
-          className: styles.message,
-          style: editing ? {
-            padding: 12
-          } : {},
+          className: cx(styles.message, editing && styles.editingContainer),
           children: [/*#__PURE__*/_jsx(EditableMessage, {
+            classNames: {
+              input: styles.editingInput
+            },
+            editButtonSize: 'small',
             editing: editing,
             onChange: onChange,
             onEditingChange: onEditingChange,
             value: String(message || '...')
-          }), messageExtra ? /*#__PURE__*/_jsx("div", {
+          }), messageExtra && !editing ? /*#__PURE__*/_jsx("div", {
             className: styles.messageExtra,
             children: messageExtra
           }) : null]

package/es/ChatItem/style.d.ts

@@ -10,6 +10,8 @@ export declare const useStyles: (props?: {
     alert: import("antd-style").SerializedStyles;
     avatarContainer: import("antd-style").SerializedStyles;
     container: string;
+    editingContainer: import("antd-style").SerializedStyles;
+    editingInput: import("antd-style").SerializedStyles;
     loading: import("antd-style").SerializedStyles;
     message: string;
     messageContainer: import("antd-style").SerializedStyles;

package/es/ChatItem/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref, _ref2) {
@@ -22,11 +22,13 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     alert: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        span[role='img'] {\n          align-self: flex-start;\n          width: 16px;\n          height: 16px;\n          margin-top: 3px;\n        }\n\n        .ant-alert-description {\n          text-align: justify;\n          word-break: break-all;\n          word-wrap: break-word;\n        }\n\n        &.ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n\n          .ant-alert-message {\n            font-size: 14px;\n            font-weight: 600;\n            text-align: justify;\n            word-break: break-all;\n            word-wrap: break-word;\n          }\n        }\n      "]))),
     avatarContainer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
     container: cx(type === 'pure' && pureContainerStylish, css(_templateObject7 || (_templateObject7 = _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          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='chat-item-actions'] {\n            display: flex;\n          }\n\n          time,\n          div[role='chat-item-actions'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='chat-item-actions'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse', token.motionEaseOut)),
-    loading: css(_templateObject8 || (_templateObject8 = _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),
-    message: cx(typeStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
-    messageContainer: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: ", ";\n      "])), placement === 'left' ? 'flex-start' : 'flex-end'),
-    messageContent: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        position: revert;\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 8px;\n        align-items: ", ";\n      "])), type === 'block' ? placement === 'left' ? 'row' : 'row-reverse' : 'column', placement === 'left' ? 'flex-start' : 'flex-end'),
+    editingContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        padding-block: 8px;\n        border: 1px solid ", ";\n\n        &:active,\n        &:hover {\n          border-color: ", ";\n        }\n      "])), token.colorPrimaryBorder, token.colorPrimary),
+    editingInput: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        min-height: 80px;\n      "]))),
+    loading: css(_templateObject10 || (_templateObject10 = _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),
+    message: cx(typeStylish, css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
+    messageContainer: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: ", ";\n      "])), placement === 'left' ? 'flex-start' : 'flex-end'),
+    messageContent: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        position: revert;\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 8px;\n        align-items: ", ";\n      "])), type === 'block' ? placement === 'left' ? 'row' : 'row-reverse' : 'column', placement === 'left' ? 'flex-start' : 'flex-end'),
     messageExtra: cx('message-extra'),
-    name: css(_templateObject12 || (_templateObject12 = _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')
+    name: css(_templateObject14 || (_templateObject14 = _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')
   };
 });

package/es/ChatList/ActionsBar.js

@@ -16,11 +16,7 @@ var ActionsBar = /*#__PURE__*/memo(function (_ref) {
     dropdownMenu = _ref$dropdownMenu === void 0 ? [] : _ref$dropdownMenu,
     props = _objectWithoutProperties(_ref, _excluded);
   var groupItems = useMemo(function () {
-    return [primary ? {
-      icon: Edit,
-      key: 'edit',
-      label: 'Edit'
-    } : {
+    return [{
       icon: RotateCw,
       key: 'regenerate',
       label: 'Regenerate'

package/es/ChatList/index.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { ChatItemProps } from "../ChatItem";
 import type { DivProps } from "../types";
 import { ChatMessage } from "../types/chatMessage";
+declare type MessageExtra = (props: ChatMessage) => ReactNode;
 export interface ChatListProps extends DivProps {
     /**
      * @description Data of chat messages to be displayed
@@ -13,7 +14,8 @@ export interface ChatListProps extends DivProps {
      * @param {string} messageId - The id of the message
      */
     onActionClick?: (actionKey: string, messageId: string) => void;
-    renderMessageExtra?: (props: ChatMessage) => ReactNode;
+    onMessageChange?: (id: string, content: string) => void;
+    renderMessageExtra?: MessageExtra;
     /**
      * @description Whether to show name of the chat item
      * @default false
@@ -25,5 +27,12 @@ export interface ChatListProps extends DivProps {
      */
     type?: 'docs' | 'chat';
 }
+export interface ItemProps extends ChatMessage {
+    MessageExtra?: MessageExtra;
+    onActionClick?: (actionKey: string, messageId: string) => void;
+    onMessageChange?: (id: string, content: string) => void;
+    showTitle?: boolean;
+    type: 'docs' | 'chat';
+}
 declare const ChatList: import("react").NamedExoticComponent<ChatListProps>;
 export default ChatList;

package/es/ChatList/index.js

@@ -1,22 +1,76 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["onActionClick", "renderMessageExtra", "className", "data", "type", "showTitle"];
+var _excluded = ["MessageExtra", "showTitle", "onActionClick", "onMessageChange", "type"],
+  _excluded2 = ["onActionClick", "renderMessageExtra", "className", "data", "type", "showTitle", "onMessageChange"];
 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';
+import { App } from 'antd';
+import copy from 'copy-to-clipboard';
+import { memo, useState } from 'react';
 import ChatItem from "../ChatItem";
 import ActionsBar from "./ActionsBar";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var ChatList = /*#__PURE__*/memo(function (_ref) {
-  var onActionClick = _ref.onActionClick,
-    MessageExtra = _ref.renderMessageExtra,
-    className = _ref.className,
-    data = _ref.data,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'chat' : _ref$type,
+var Item = function Item(_ref) {
+  var MessageExtra = _ref.MessageExtra,
     showTitle = _ref.showTitle,
-    props = _objectWithoutProperties(_ref, _excluded);
+    _onActionClick = _ref.onActionClick,
+    onMessageChange = _ref.onMessageChange,
+    type = _ref.type,
+    item = _objectWithoutProperties(_ref, _excluded);
+  var renderMessageExtra = MessageExtra ? /*#__PURE__*/_jsx(MessageExtra, _objectSpread({}, item)) : undefined;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    editing = _useState2[0],
+    setEditing = _useState2[1];
+  var _App$useApp = App.useApp(),
+    message = _App$useApp.message;
+  return /*#__PURE__*/_jsx(ChatItem, {
+    actions: /*#__PURE__*/_jsx(ActionsBar, {
+      onActionClick: function onActionClick(actionKey) {
+        switch (actionKey) {
+          case 'copy':
+            {
+              copy(item.content);
+              message.success('复制成功');
+              break;
+            }
+          case 'edit':
+            {
+              console.log('editing');
+              setEditing(true);
+            }
+        }
+        _onActionClick === null || _onActionClick === void 0 ? void 0 : _onActionClick(actionKey, item.id);
+      },
+      primary: item.role === 'user'
+    }),
+    avatar: item.meta,
+    editing: editing,
+    message: item.content,
+    messageExtra: renderMessageExtra,
+    onChange: function onChange(value) {
+      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',
+    showTitle: showTitle,
+    time: item.updateAt || item.createAt,
+    type: type === 'chat' ? 'block' : 'pure'
+  });
+};
+var ChatList = /*#__PURE__*/memo(function (_ref2) {
+  var onActionClick = _ref2.onActionClick,
+    MessageExtra = _ref2.renderMessageExtra,
+    className = _ref2.className,
+    data = _ref2.data,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'chat' : _ref2$type,
+    showTitle = _ref2.showTitle,
+    onMessageChange = _ref2.onMessageChange,
+    props = _objectWithoutProperties(_ref2, _excluded2);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
@@ -24,23 +78,13 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
     className: cx(styles.container, className)
   }, props), {}, {
     children: data.map(function (item) {
-      var renderMessageExtra = MessageExtra ? /*#__PURE__*/_jsx(MessageExtra, _objectSpread({}, item)) : undefined;
-      return /*#__PURE__*/_jsx(ChatItem, {
-        actions: /*#__PURE__*/_jsx(ActionsBar, {
-          onActionClick: onActionClick ? function (actionKey) {
-            return onActionClick === null || onActionClick === void 0 ? void 0 : onActionClick(actionKey, item.id);
-          } : undefined,
-          primary: item.role === 'user'
-        }),
-        avatar: item.meta,
-        message: item.content,
-        messageExtra: renderMessageExtra,
-        placement: type === 'chat' ? item.role === 'user' ? 'right' : 'left' : 'left',
-        primary: item.role === 'user',
+      return /*#__PURE__*/_jsx(Item, _objectSpread({
+        MessageExtra: MessageExtra,
+        onActionClick: onActionClick,
+        onMessageChange: onMessageChange,
         showTitle: showTitle,
-        time: item.updateAt || item.createAt,
-        type: type === 'chat' ? 'block' : 'pure'
-      }, item.id);
+        type: type
+      }, item), item.id);
     })
   }));
 });

package/es/EditableMessage/index.d.ts

@@ -13,6 +13,7 @@ export interface EditableMessageProps {
          */
         markdown?: string;
     };
+    editButtonSize?: 'small' | 'middle';
     /**
      * @title Whether the component is in edit mode or not
      * @default false

package/es/EditableMessage/index.js

@@ -20,7 +20,8 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
     placeholder = _ref$placeholder === void 0 ? 'Type something...' : _ref$placeholder,
     _ref$showEditWhenEmpt = _ref.showEditWhenEmpty,
     showEditWhenEmpty = _ref$showEditWhenEmpt === void 0 ? false : _ref$showEditWhenEmpt,
-    styles = _ref.styles;
+    styles = _ref.styles,
+    editButtonSize = _ref.editButtonSize;
   var _useControlledState = useControlledState(false, {
       onChange: onEditingChange,
       value: editing
@@ -38,6 +39,7 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
   return !value && showEditWhenEmpty ? /*#__PURE__*/_jsx(MessageInput, {
     className: classNames === null || classNames === void 0 ? void 0 : classNames.input,
     defaultValue: value,
+    editButtonSize: editButtonSize,
     onCancel: function onCancel() {
       return setTyping(false);
     },
@@ -60,6 +62,7 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
     }), !expand && isEdit ? /*#__PURE__*/_jsx(MessageInput, {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.input,
       defaultValue: value,
+      editButtonSize: editButtonSize,
       onCancel: function onCancel() {
         return setTyping(false);
       },

package/es/MessageInput/index.d.ts

@@ -11,6 +11,7 @@ export interface MessageInputProps extends DivProps {
      * @description The default value of the input box.
      */
     defaultValue?: string;
+    editButtonSize?: 'small' | 'middle';
     height?: number | string;
     /**
      * @description Callback function triggered when user clicks on the cancel button.

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 = ["text", "type", "onCancel", "defaultValue", "onConfirm", "renderButtons", "textareaStyle", "textareaClassname", "placeholder", "height"];
+var _excluded = ["text", "type", "onCancel", "defaultValue", "onConfirm", "renderButtons", "textareaStyle", "textareaClassname", "placeholder", "height", "editButtonSize"];
 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';
@@ -25,6 +25,8 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
     placeholder = _ref$placeholder === void 0 ? 'Type something...' : _ref$placeholder,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? 'fit-content' : _ref$height,
+    _ref$editButtonSize = _ref.editButtonSize,
+    editButtonSize = _ref$editButtonSize === void 0 ? 'middle' : _ref$editButtonSize,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(defaultValue || ''),
     _useState2 = _slicedToArray(_useState, 2),
@@ -65,10 +67,12 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
           onClick: function onClick() {
             onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(temporarySystemRole);
           },
+          size: editButtonSize,
           type: "primary",
           children: (text === null || text === void 0 ? void 0 : text.confirm) || 'Confirm'
         }), /*#__PURE__*/_jsx(Button, {
           onClick: onCancel,
+          size: editButtonSize,
           children: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel'
         })]
       })

package/es/utils/formatTime.js

@@ -3,10 +3,10 @@ export var formatTime = function formatTime(time) {
   var now = dayjs();
   var target = dayjs(time);
   if (target.isSame(now, 'day')) {
-    return target.format('HH:mm');
+    return target.format('HH:mm:ss');
   } else if (target.isSame(now, 'year')) {
-    return target.format('MM-DD HH:mm');
+    return target.format('MM-DD HH:mm:ss');
   } else {
-    return target.format('YYYY-MM-DD HH:mm');
+    return target.format('YYYY-MM-DD HH:mm:ss');
   }
 };

package/package.json

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