@lobehub/ui 1.48.0 → 1.49.0

package/es/ChatItem/index.d.ts

@@ -34,6 +34,7 @@ export interface ChatItemProps {
      * @description The message content of the chat item
      */
     message?: string;
+    messageExtra?: ReactNode;
     /**
      * @description Callback when the message content changes
      * @param value - The new message content

package/es/ChatItem/index.js

@@ -1,11 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["actions", "className", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert", "showTitle", "time", "editing", "onChange", "onEditingChange"];
+var _excluded = ["actions", "className", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra"];
 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 { Flexbox } from 'react-layout-kit';
 import Avatar from "../Avatar";
 import EditableMessage from "../EditableMessage";
 import Icon from "../Icon";
@@ -32,6 +33,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     editing = _ref.editing,
     onChange = _ref.onChange,
     onEditingChange = _ref.onEditingChange,
+    messageExtra = _ref.messageExtra,
     properties = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       avatarSize: AVATAR_SIZE,
@@ -76,17 +78,20 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
         children: [alert ? /*#__PURE__*/_jsx(Alert, _objectSpread({
           className: styles.alert,
           showIcon: true
-        }, alert)) : /*#__PURE__*/_jsx("div", {
+        }, alert)) : /*#__PURE__*/_jsxs(Flexbox, {
           className: styles.message,
           style: editing ? {
             padding: 12
           } : {},
-          children: /*#__PURE__*/_jsx(EditableMessage, {
+          children: [/*#__PURE__*/_jsx(EditableMessage, {
             editing: editing,
             onChange: onChange,
             onEditingChange: onEditingChange,
             value: String(message || '...')
-          })
+          }), messageExtra ? /*#__PURE__*/_jsx("div", {
+            className: styles.messageExtra,
+            children: messageExtra
+          }) : null]
         }), !editing && /*#__PURE__*/_jsx("div", {
           className: styles.actions,
           role: "chat-item-actions",

package/es/ChatItem/style.d.ts

@@ -14,5 +14,6 @@ export declare const useStyles: (props?: {
     message: string;
     messageContainer: import("antd-style").SerializedStyles;
     messageContent: import("antd-style").SerializedStyles;
+    messageExtra: string;
     name: import("antd-style").SerializedStyles;
 }>;

package/es/ChatItem/style.js

@@ -26,6 +26,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     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'),
+    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')
   };
 });

package/es/ChatList/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import { ChatItemProps } from "../ChatItem";
 import type { DivProps } from "../types";
 import { ChatMessage } from "../types/chatMessage";
@@ -13,6 +13,7 @@ export interface ChatListProps extends DivProps {
      * @param {string} messageId - The id of the message
      */
     onActionClick?: (actionKey: string, messageId: string) => void;
+    renderMessageExtra?: (props: ChatMessage) => ReactNode;
     /**
      * @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 = ["onActionClick", "className", "data", "type", "showTitle"];
+var _excluded = ["onActionClick", "renderMessageExtra", "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';
@@ -10,6 +10,7 @@ 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,
@@ -23,6 +24,7 @@ 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) {
@@ -32,6 +34,7 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
         }),
         avatar: item.meta,
         message: item.content,
+        messageExtra: renderMessageExtra,
         placement: type === 'chat' ? item.role === 'user' ? 'right' : 'left' : 'left',
         primary: item.role === 'user',
         showTitle: showTitle,

package/es/EditableMessage/index.d.ts

@@ -44,7 +44,7 @@ export interface EditableMessageProps {
      * @default false
      */
     showEditWhenEmpty?: boolean;
-    style?: {
+    styles?: {
         /**
          * @title The style for the MessageInput component
          */

package/es/EditableMessage/index.js

@@ -20,7 +20,7 @@ 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,
-    style = _ref.style;
+    styles = _ref.styles;
   var _useControlledState = useControlledState(false, {
       onChange: onEditingChange,
       value: editing
@@ -46,7 +46,7 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
       setTyping(false);
     },
     placeholder: placeholder,
-    style: style === null || style === void 0 ? void 0 : style.input
+    style: styles === null || styles === void 0 ? void 0 : styles.input
   }) : /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(MessageModal, {
       editing: isEdit,
@@ -68,10 +68,10 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
         setTyping(false);
       },
       placeholder: placeholder,
-      style: style === null || style === void 0 ? void 0 : style.input
+      style: styles === null || styles === void 0 ? void 0 : styles.input
     }) : /*#__PURE__*/_jsx(Markdown, {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.markdown,
-      style: style === null || style === void 0 ? void 0 : style.markdown,
+      style: styles === null || styles === void 0 ? void 0 : styles.markdown,
       children: value
     })]
   });

package/es/MessageInput/index.js

@@ -30,28 +30,30 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     temporarySystemRole = _useState2[0],
     setRole = _useState2[1];
-  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
-    gap: 8,
-    style: {
-      flex: 1,
-      width: '100%'
-    }
-  }, props), {}, {
-    children: [/*#__PURE__*/_jsx(CodeEditor, {
-      className: textareaClassname,
-      language: "md",
-      onValueChange: function onValueChange(value) {
-        setRole(value);
-      },
-      placeholder: placeholder,
-      resize: false,
-      style: _objectSpread({
-        height: height,
-        minHeight: '100%'
-      }, textareaStyle),
-      type: type,
-      value: temporarySystemRole
-    }), /*#__PURE__*/_jsx(Flexbox, {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+      gap: 8,
+      style: {
+        flex: 1,
+        width: '100%'
+      }
+    }, props), {}, {
+      children: /*#__PURE__*/_jsx(CodeEditor, {
+        className: textareaClassname,
+        language: "md",
+        onValueChange: function onValueChange(value) {
+          setRole(value);
+        },
+        placeholder: placeholder,
+        resize: false,
+        style: _objectSpread({
+          height: height,
+          minHeight: '100%'
+        }, textareaStyle),
+        type: type,
+        value: temporarySystemRole
+      })
+    })), /*#__PURE__*/_jsx(Flexbox, {
       direction: 'horizontal-reverse',
       gap: 8,
       children: renderButtons ? renderButtons(temporarySystemRole).map(function (buttonProps, index) {
@@ -63,16 +65,14 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
           onClick: function onClick() {
             onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(temporarySystemRole);
           },
-          size: "small",
           type: "primary",
           children: (text === null || text === void 0 ? void 0 : text.confirm) || 'Confirm'
         }), /*#__PURE__*/_jsx(Button, {
           onClick: onCancel,
-          size: "small",
           children: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel'
         })]
       })
     })]
-  }));
+  });
 });
 export default MessageInput;

package/es/types/meta.d.ts

@@ -18,8 +18,8 @@ export interface MetaData {
     title?: string;
 }
 export interface BaseDataModel {
-    createAt?: number;
+    createAt: number;
     id: string;
     meta: MetaData;
-    updateAt?: number;
+    updateAt: number;
 }

package/package.json

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