@lobehub/ui 1.3.0 → 1.4.0

package/lib/List/ListItem/index.js

@@ -0,0 +1,157 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/List/ListItem/index.tsx
+var ListItem_exports = {};
+__export(ListItem_exports, {
+  default: () => ListItem_default
+});
+module.exports = __toCommonJS(ListItem_exports);
+var import_icons = require("@ant-design/icons");
+var import_antd_style = require("antd-style");
+var import_react = require("react");
+var import_react_layout_kit = require("react-layout-kit");
+var import_colorUtils = require("../../utils/colorUtils");
+var import_time = require("./time");
+var useStyles = (0, import_antd_style.createStyles)(({ css, cx, token }) => {
+  const textOverlay = css`
+    --overlay-background: ${token.colorBgLayout};
+
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    right: 0;
+
+    width: 32px;
+    height: 44px;
+
+    background: linear-gradient(to right, transparent, var(--overlay-background));
+  `;
+  const overlayColor = (0, import_colorUtils.convertAlphaToSolid)(token.colorFillContent, token.colorBgLayout);
+  const hoverOverlay = css`
+    .${cx(textOverlay)} {
+      --overlay-background: ${overlayColor};
+    }
+  `;
+  return {
+    container: css`
+      cursor: pointer;
+      color: ${token.colorTextTertiary};
+      border-radius: 8px;
+
+      &:hover {
+        background: ${token.colorFillContent};
+        ${hoverOverlay}
+      }
+    `,
+    active: css`
+      color: ${token.colorText};
+      background: ${token.colorFillContent};
+
+      ${hoverOverlay}
+    `,
+    content: css`
+      position: relative;
+      overflow: hidden;
+      flex: 1;
+    `,
+    title: css`
+      overflow: hidden;
+
+      width: 100%;
+
+      font-size: 0.9em;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `,
+    time: css`
+      font-size: 12px;
+      color: ${token.colorTextPlaceholder};
+    `,
+    desc: css`
+      overflow: hidden;
+
+      width: 100%;
+      margin-top: 2px;
+
+      font-size: 0.75em;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      opacity: 0.5;
+    `,
+    textOverlay
+  };
+});
+var ListItem = (0, import_react.forwardRef)(
+  ({
+    active,
+    avatar,
+    loading,
+    description,
+    date,
+    title,
+    onHoverChange,
+    renderActions,
+    className,
+    style,
+    showAction,
+    classNames = {},
+    ...props
+  }, ref) => {
+    const { styles, cx } = useStyles();
+    return /* @__PURE__ */ React.createElement(
+      import_react_layout_kit.Flexbox,
+      {
+        ref,
+        horizontal: true,
+        paddingBlock: 8,
+        gap: 8,
+        paddingInline: "12px 8px",
+        align: "flex-start",
+        distribution: "space-between",
+        className: cx(styles.container, active && styles.active, className),
+        style,
+        ...props,
+        onMouseEnter: () => {
+          onHoverChange == null ? void 0 : onHoverChange(true);
+        },
+        onMouseLeave: () => {
+          onHoverChange == null ? void 0 : onHoverChange(false);
+        }
+      },
+      avatar ?? /* @__PURE__ */ React.createElement(import_icons.MessageOutlined, { style: { marginTop: 4 } }),
+      /* @__PURE__ */ React.createElement(import_react_layout_kit.Flexbox, { className: styles.content }, /* @__PURE__ */ React.createElement(import_react_layout_kit.Flexbox, { horizontal: true, distribution: "space-between" }, /* @__PURE__ */ React.createElement("div", { className: styles.title }, title)), description && /* @__PURE__ */ React.createElement("div", { className: styles.desc }, description), /* @__PURE__ */ React.createElement("div", { className: styles.textOverlay })),
+      loading ? /* @__PURE__ */ React.createElement(import_icons.LoadingOutlined, { spin: true }) : showAction ? /* @__PURE__ */ React.createElement(
+        import_react_layout_kit.Flexbox,
+        {
+          horizontal: true,
+          gap: 4,
+          style: { display: showAction ? void 0 : "none" },
+          onClick: (e) => {
+            e.stopPropagation();
+          }
+        },
+        renderActions
+      ) : date && /* @__PURE__ */ React.createElement("div", { className: cx(styles.time, classNames.time) }, (0, import_time.getChatItemTime)(date))
+    );
+  }
+);
+var ListItem_default = ListItem;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/List/ListItem/time.d.ts

@@ -0,0 +1,2 @@
+import 'dayjs/locale/zh-cn';
+export declare const getChatItemTime: (updateAt: number) => string;

package/lib/List/ListItem/time.js

@@ -0,0 +1,50 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/List/ListItem/time.ts
+var time_exports = {};
+__export(time_exports, {
+  getChatItemTime: () => getChatItemTime
+});
+module.exports = __toCommonJS(time_exports);
+var import_dayjs = __toESM(require("dayjs"));
+var import_zh_cn = require("dayjs/locale/zh-cn");
+import_dayjs.default.locale("zh-cn");
+var getChatItemTime = (updateAt) => {
+  const time = (0, import_dayjs.default)(updateAt);
+  const diff = (0, import_dayjs.default)().day() - time.day();
+  if (time.isSame((0, import_dayjs.default)(), "day"))
+    return time.format("HH:mm");
+  if (diff === 1)
+    return "昨天";
+  return time.format("MM-DD");
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getChatItemTime
+});

package/lib/List/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const List: {
+    Item: import("react").ForwardRefExoticComponent<import("./ListItem").ListItemProps & import("react").HTMLAttributes<any> & import("react").RefAttributes<HTMLElement>>;
+};
+export default List;

package/lib/List/index.js

@@ -0,0 +1,41 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/List/index.ts
+var List_exports = {};
+__export(List_exports, {
+  default: () => List_default
+});
+module.exports = __toCommonJS(List_exports);
+var import_ListItem = __toESM(require("./ListItem"));
+var List = {
+  Item: import_ListItem.default
+};
+var List_default = List;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/index.d.ts

@@ -1,9 +1,12 @@
 export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
+export { default as Avatar, type AvatarProps } from './Avatar';
+export { default as ContextMenu, type ContextMenuProps } from './ContextMenu';
 export { default as CopyButton, type CopyButtonProps } from './CopyButton';
 export { default as DraggablePanel, type DraggablePanelProps } from './DraggablePanel';
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export { default as Highlighter, SyntaxHighlighter, type HighlighterProps, type SyntaxHighlighterProps, } from './Highlighter';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
+export { default as List } from './List';
 export { default as Logo, type LogoProps } from './Logo';
 export { default as Markdown, type MarkdownProps } from './Markdown';
 export { default as MessageInput, type MessageInputProps } from './MessageInput';

package/lib/index.js

@@ -30,11 +30,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   ActionIcon: () => import_ActionIcon.default,
+  Avatar: () => import_Avatar.default,
+  ContextMenu: () => import_ContextMenu.default,
   CopyButton: () => import_CopyButton.default,
   DraggablePanel: () => import_DraggablePanel.default,
   EditableText: () => import_EditableText.default,
   Highlighter: () => import_Highlighter.default,
   Icon: () => import_Icon.default,
+  List: () => import_List.default,
   Logo: () => import_Logo.default,
   Markdown: () => import_Markdown.default,
   MessageInput: () => import_MessageInput.default,
@@ -53,11 +56,14 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var import_ActionIcon = __toESM(require("./ActionIcon"));
+var import_Avatar = __toESM(require("./Avatar"));
+var import_ContextMenu = __toESM(require("./ContextMenu"));
 var import_CopyButton = __toESM(require("./CopyButton"));
 var import_DraggablePanel = __toESM(require("./DraggablePanel"));
 var import_EditableText = __toESM(require("./EditableText"));
 var import_Highlighter = __toESM(require("./Highlighter"));
 var import_Icon = __toESM(require("./Icon"));
+var import_List = __toESM(require("./List"));
 var import_Logo = __toESM(require("./Logo"));
 var import_Markdown = __toESM(require("./Markdown"));
 var import_MessageInput = __toESM(require("./MessageInput"));
@@ -73,11 +79,14 @@ var import_Tooltip = __toESM(require("./Tooltip"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionIcon,
+  Avatar,
+  ContextMenu,
   CopyButton,
   DraggablePanel,
   EditableText,
   Highlighter,
   Icon,
+  List,
   Logo,
   Markdown,
   MessageInput,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -65,10 +65,12 @@
   "dependencies": {
     "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
+    "@floating-ui/react": "^0.24",
     "ahooks": "^3",
     "antd-style": "^3",
     "chroma-js": "^2",
     "copy-to-clipboard": "^3",
+    "dayjs": "^1",
     "leva": "^0.9.34",
     "lodash": "^4",
     "lucide-react": "latest",