@lobehub/ui 1.65.0 → 1.66.0

package/es/ChatList/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import type { ChatMessage, DivProps } from "../types";
+import { ReactNode } from 'react';
+import type { ChatMessage, DivProps, MessageRoleType } from "../types";
 import { ListItemProps } from './Item';
 export interface ChatListProps extends DivProps, ListItemProps {
     /**
@@ -7,6 +7,11 @@ export interface ChatListProps extends DivProps, ListItemProps {
      */
     data: ChatMessage[];
     loadingId?: string;
+    renderItem?: {
+        [role: MessageRoleType | string]: (data: {
+            key: string;
+        } & ChatMessage & ListItemProps) => ReactNode;
+    };
 }
 export type { OnActionClick, OnMessageChange, RenderErrorMessage, RenderMessage } from './Item';
 declare const ChatList: import("react").NamedExoticComponent<ChatListProps>;

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", "renderMessageExtra", "className", "data", "type", "text", "showTitle", "onMessageChange", "renderMessage", "renderErrorMessage", "loadingId"];
+var _excluded = ["onActionClick", "renderMessageExtra", "className", "data", "type", "text", "showTitle", "onMessageChange", "renderMessage", "renderErrorMessage", "loadingId", "renderItem"];
 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';
@@ -20,6 +20,7 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
     renderMessage = _ref.renderMessage,
     renderErrorMessage = _ref.renderErrorMessage,
     loadingId = _ref.loadingId,
+    renderItem = _ref.renderItem,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
@@ -28,7 +29,8 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
     className: cx(styles.container, className)
   }, props), {}, {
     children: data.map(function (item) {
-      return /*#__PURE__*/_jsx(Item, _objectSpread({
+      var key = item.id;
+      var props = _objectSpread({
         loading: loadingId === item.id,
         onActionClick: onActionClick,
         onMessageChange: onMessageChange,
@@ -38,7 +40,13 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
         showTitle: showTitle,
         text: text,
         type: type
-      }, item), item.id);
+      }, item);
+      if (renderItem && renderItem[item.role]) {
+        return renderItem[item.role](_objectSpread({
+          key: key
+        }, props));
+      }
+      return /*#__PURE__*/_jsx(Item, _objectSpread({}, props), key);
     })
   }));
 });

package/es/List/ListItem/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["active", "avatar", "loading", "description", "date", "title", "onHoverChange", "actions", "className", "style", "showAction", "children", "classNames", "pin"];
+var _excluded = ["active", "avatar", "loading", "description", "date", "title", "onHoverChange", "actions", "className", "style", "showAction", "children", "classNames", "addon", "pin"];
 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 { LoadingOutlined, MessageOutlined } from '@ant-design/icons';
@@ -14,6 +14,7 @@ import { getChatItemTime } from "./time";
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var active = _ref.active,
     avatar = _ref.avatar,
@@ -29,6 +30,7 @@ var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     children = _ref.children,
     _ref$classNames = _ref.classNames,
     classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
+    addon = _ref.addon,
     pin = _ref.pin,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(pin),
@@ -58,6 +60,7 @@ var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
         }
       }), /*#__PURE__*/_jsxs(Flexbox, {
         className: styles.content,
+        gap: 8,
         children: [/*#__PURE__*/_jsx(Flexbox, {
           distribution: 'space-between',
           horizontal: true,
@@ -68,24 +71,29 @@ var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
         }), description && /*#__PURE__*/_jsx("div", {
           className: styles.desc,
           children: description
-        })]
+        }), addon]
       }), loading ? /*#__PURE__*/_jsx(LoadingOutlined, {
         spin: true
-      }) : showAction ? /*#__PURE__*/_jsx(Flexbox, {
-        className: styles.actions,
-        gap: 4,
-        horizontal: true,
-        onClick: function onClick(e) {
-          e.preventDefault();
-          e.stopPropagation();
-        },
-        style: {
-          display: showAction ? undefined : 'none'
-        },
-        children: actions
-      }) : date && /*#__PURE__*/_jsx("div", {
-        className: cx(styles.time, classNames.time),
-        children: getChatItemTime(date)
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [showAction && /*#__PURE__*/_jsx(Flexbox, {
+          className: styles.actions,
+          gap: 4,
+          horizontal: true,
+          onClick: function onClick(e) {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          style: {
+            display: showAction ? undefined : 'none'
+          },
+          children: actions
+        }), date && /*#__PURE__*/_jsx("div", {
+          className: cx(styles.time, classNames.time),
+          style: showAction ? {
+            opacity: 0
+          } : {},
+          children: getChatItemTime(date)
+        })]
       }), children]
     })
   }));

package/es/List/ListItem/style.js

@@ -8,10 +8,10 @@ export var useStyles = createStyles(function (_ref, pin) {
     actions: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: absolute;\n      top: 50%;\n      right: 16px;\n      transform: translateY(-50%);\n    "]))),
     active: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), token.colorText, token.colorFillSecondary, token.colorFill),
     container: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n      background: ", ";\n      transition: background-color 200ms ", ";\n\n      &:active {\n        background-color: ", " !important;\n      }\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), token.colorTextTertiary, pin ? token.colorFillTertiary : 'transparent', token.motionEaseOut, pin ? token.colorFill : token.colorFillSecondary, pin ? token.colorFill : token.colorFillTertiary),
-    content: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n      flex: 1;\n    "]))),
-    desc: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n      margin-top: 2px;\n\n      font-size: 12px;\n      color: ", ";\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])), token.colorTextDescription),
+    content: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n      flex: 1;\n      padding-top: 6px;\n    "]))),
+    desc: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n\n      font-size: 12px;\n      line-height: 1;\n      color: ", ";\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])), token.colorTextDescription),
     pin: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), token.colorFillTertiary),
     time: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      font-size: 12px;\n      color: ", ";\n    "])), token.colorTextPlaceholder),
-    title: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n\n      font-size: 16px;\n      color: ", ";\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])), token.colorText)
+    title: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n\n      font-size: 16px;\n      line-height: 1;\n      color: ", ";\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])), token.colorText)
   };
 });

package/package.json

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