@lobehub/ui 1.48.1 → 1.49.1

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/List/ListItem/index.d.ts

@@ -29,7 +29,7 @@ export interface ListItemProps {
     /**
      * 描述信息
      */
-    description?: string;
+    description?: ReactNode;
     /**
      * 是否处于加载状态
      */
@@ -58,7 +58,7 @@ export interface ListItemProps {
     /**
      * 标题
      */
-    title: string;
+    title: ReactNode;
 }
 declare const ListItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ListItemProps & HTMLAttributes<any> & import("react").RefAttributes<HTMLElement>>>;
 export default ListItem;

package/es/types/chatMessage.d.ts

@@ -18,7 +18,7 @@ export interface ChatMessage extends BaseDataModel {
      */
     content: string;
     extra?: {
-        translate: {
+        translate?: {
             target: string;
             to: string;
         };

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.1",
+  "version": "1.49.1",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",