@lobehub/ui 1.95.0 → 1.96.0

package/README.md

@@ -27,7 +27,7 @@ Lobe UI is an open-source UI component library for building _AIGC_ web apps
 [![][github-issues-shield]][github-issues-link]
 [![][github-license-shield]][github-license-link]
 
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268452017-960ab8a1-e4b7-4648-beb1-77daf4b6034a.png)
+[![][banner]][vercel-link]
 
 </div>
 
@@ -52,7 +52,8 @@ Lobe UI is an open-source UI component library for building _AIGC_ web apps
 
 ## 📦 Installation
 
-This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
+> **Important**\
+> This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
 
 To install Lobe UI, run the following command:
 
@@ -82,6 +83,30 @@ const nextConfig = {
 
 </div>
 
+## 🤯 Usage
+
+> **Note**\
+> The LobeUI components are developed based on [Antd](https://ant.design/components/overview/), fully compatible with Antd components,
+> and it is recommended to use [antd-style](https://ant-design.github.io/antd-style/) as the default css-in-js styling solution.
+
+```tsx
+import { ThemeProvider, Button } from '@lobehub/ui'
+import { Button } from 'antd'
+
+export default () => (
+  <ThemeProvider>
+    <Button>Hello AIGC</Button>
+  </ThemeProvider>
+)
+```
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+
 ## ⌨️ Local Development
 
 You can use Github Codespaces for online development:
@@ -109,7 +134,7 @@ Contributions of all types are more than welcome, if you are interested in contr
 
 [![][pr-welcome-shield]][pr-welcome-link]
 
-[![][contributors-contrib]][contributors-url]
+[![][contributors-contrib]][contributors-link]
 
 <div align="right">
 
@@ -138,18 +163,19 @@ Contributions of all types are more than welcome, if you are interested in contr
 
 </details>
 
-Copyright © 2023 [LobeHub][profile-url]. <br />
+Copyright © 2023 [LobeHub][profile-link]. <br />
 This project is [MIT](./LICENSE) licensed.
 
 <!-- LINK GROUP -->
 
 [back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
+[banner]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268452017-960ab8a1-e4b7-4648-beb1-77daf4b6034a.png
 [bun-link]: https://bun.sh
 [bun-shield]: https://img.shields.io/badge/-speedup%20with%20bun-black?logo=bun&style=for-the-badge
 [codespaces-link]: https://codespaces.new/lobehub/lobe-ui
 [codespaces-shield]: https://github.com/codespaces/badge.svg
 [contributors-contrib]: https://contrib.rocks/image?repo=lobehub/lobe-ui
-[contributors-url]: https://github.com/lobehub/lobe-ui/graphs/contributors
+[contributors-link]: https://github.com/lobehub/lobe-ui/graphs/contributors
 [discord-link]: https://discord.gg/AYFPHvv2jT
 [discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
 [fossa-license-link]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-ui
@@ -180,6 +206,6 @@ This project is [MIT](./LICENSE) licensed.
 [npm-release-shield]: https://img.shields.io/npm/v/@lobehub/ui?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
 [pr-welcome-link]: https://github.com/lobehub/lobe-chat/pulls
 [pr-welcome-shield]: https://img.shields.io/badge/🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge
-[profile-url]: https://github.com/lobehub
+[profile-link]: https://github.com/lobehub
 [vercel-link]: https://ui.lobehub.com
 [vercel-shield]: https://img.shields.io/website?down_message=offline&label=vercel&labelColor=black&logo=vercel&style=flat-square&up_message=online&url=https%3A%2F%2Fui.lobehub.com

package/es/ChatList/HistoryDivider.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface HistoryDividerProps {
+    enable?: boolean;
+    text?: {
+        history?: string;
+    };
+}
+declare const HistoryDivider: import("react").NamedExoticComponent<HistoryDividerProps>;
+export default HistoryDivider;

package/es/ChatList/HistoryDivider.js

@@ -0,0 +1,25 @@
+import { Divider } from 'antd';
+import { Timer } from 'lucide-react';
+import { memo } from 'react';
+import Icon from "../Icon";
+import Tag from "../Tag";
+import { jsx as _jsx } from "react/jsx-runtime";
+var HistoryDivider = /*#__PURE__*/memo(function (_ref) {
+  var enable = _ref.enable,
+    text = _ref.text;
+  if (!enable) return null;
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      padding: '0 20px'
+    },
+    children: /*#__PURE__*/_jsx(Divider, {
+      children: /*#__PURE__*/_jsx(Tag, {
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: Timer
+        }),
+        children: (text === null || text === void 0 ? void 0 : text.history) || 'History Message'
+      })
+    })
+  });
+});
+export default HistoryDivider;

package/es/ChatList/Item.d.ts

@@ -45,6 +45,7 @@ export interface ListItemProps {
      */
     text?: ChatItemProps['text'] & ActionsBarProps['text'] & {
         copySuccess?: string;
+        history?: string;
     };
     /**
      * @description 聊天列表的类型

package/es/ChatList/index.d.ts

@@ -6,6 +6,8 @@ export interface ChatListProps extends DivProps, ListItemProps {
      * @description Data of chat messages to be displayed
      */
     data: ChatMessage[];
+    enableHistoryCount?: boolean;
+    historyCount?: number;
     loadingId?: string;
 }
 export type { OnActionClick, OnMessageChange, RenderErrorMessage, RenderMessage } from './Item';

package/es/ChatList/index.js

@@ -1,13 +1,16 @@
 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", "renderItem"];
+var _excluded = ["onActionClick", "renderMessageExtra", "className", "data", "type", "text", "showTitle", "onMessageChange", "renderMessage", "renderErrorMessage", "loadingId", "renderItem", "enableHistoryCount", "historyCount"];
 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 Group from "./Group";
+import HistoryDivider from "./HistoryDivider";
 import Item from "./Item";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var ChatList = /*#__PURE__*/memo(function (_ref) {
   var onActionClick = _ref.onActionClick,
     MessageExtra = _ref.renderMessageExtra,
@@ -22,6 +25,9 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
     renderErrorMessage = _ref.renderErrorMessage,
     loadingId = _ref.loadingId,
     renderItem = _ref.renderItem,
+    enableHistoryCount = _ref.enableHistoryCount,
+    _ref$historyCount = _ref.historyCount,
+    historyCount = _ref$historyCount === void 0 ? 0 : _ref$historyCount,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
@@ -29,7 +35,7 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className)
   }, props), {}, {
-    children: data.map(function (item) {
+    children: data.map(function (item, index) {
       var _item$children;
       var props = {
         loading: loadingId === item.id,
@@ -43,15 +49,27 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
         text: text,
         type: type
       };
+      var historyLength = data.length;
+      var enableHistoryDivider = enableHistoryCount && historyLength > historyCount && historyCount === historyLength - index + 1;
       if (item.children && ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0) {
-        return /*#__PURE__*/_jsx(Group, {
-          data: item.children.map(function (childrenItem) {
-            return _objectSpread(_objectSpread({}, props), childrenItem);
-          }),
-          meta: item.meta
-        }, item.children[0].id);
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(HistoryDivider, {
+            enable: enableHistoryDivider,
+            text: text
+          }), /*#__PURE__*/_jsx(Group, {
+            data: item.children.map(function (childrenItem) {
+              return _objectSpread(_objectSpread({}, props), childrenItem);
+            }),
+            meta: item.meta
+          }, item.children[0].id)]
+        });
       }
-      return /*#__PURE__*/_jsx(Item, _objectSpread(_objectSpread({}, props), item), item.id);
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(HistoryDivider, {
+          enable: enableHistoryDivider,
+          text: text
+        }), /*#__PURE__*/_jsx(Item, _objectSpread(_objectSpread({}, props), item), item.id)]
+      });
     })
   }));
 });

package/package.json

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