@lobehub/ui 1.38.4 → 1.39.0

package/README.md

@@ -53,7 +53,7 @@ This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908
 To install Lobe UI, run the following command:
 
 ```bash
-pnpm add @lobehub/ui
+pnpm i -S @lobehub/ui
 ```
 
 <div align="right">

package/es/ActionIcon/index.d.ts

@@ -54,5 +54,5 @@ export interface ActionIconProps extends DivProps {
      */
     title?: string;
 }
-declare const ActionIcon: import("react").NamedExoticComponent<ActionIconProps>;
+declare const ActionIcon: import("react").ForwardRefExoticComponent<ActionIconProps & import("react").RefAttributes<HTMLDivElement>>;
 export default ActionIcon;

package/es/ActionIcon/index.js

@@ -4,7 +4,7 @@ var _excluded = ["className", "active", "icon", "size", "style", "glass", "title
 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 { Loader2 } from 'lucide-react';
-import { memo, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import Icon from "../Icon";
 import Spotlight from "../Spotlight";
 import Tooltip from "../Tooltip";
@@ -52,7 +52,7 @@ var calcSize = function calcSize(size) {
     borderRadius: borderRadius
   };
 };
-var ActionIcon = /*#__PURE__*/memo(function (_ref) {
+var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     active = _ref.active,
     icon = _ref.icon,
@@ -94,6 +94,7 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
   var actionIconBlock = /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.block, className),
     onClick: loading ? undefined : onClick,
+    ref: ref,
     style: _objectSpread({
       borderRadius: borderRadius,
       height: blockSize,

package/es/ChatHeader/index.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { DivProps } from "../types";
+export interface ChatHeaderProps extends DivProps {
+    gap?: {
+        left?: number;
+        right?: number;
+    };
+    left?: ReactNode;
+    onBackClick?: () => void;
+    right?: ReactNode;
+    showBackButton?: boolean;
+}
+declare const ChatHeader: import("react").NamedExoticComponent<ChatHeaderProps>;
+export default ChatHeader;

package/es/ChatHeader/index.js

@@ -0,0 +1,50 @@
+import { ChevronLeft } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import ActionIcon from "../ActionIcon";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ChatHeader = /*#__PURE__*/memo(function (_ref) {
+  var left = _ref.left,
+    right = _ref.right,
+    className = _ref.className,
+    style = _ref.style,
+    showBackButton = _ref.showBackButton,
+    onBackClick = _ref.onBackClick,
+    gap = _ref.gap;
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    align: 'center',
+    className: cx(styles.container, className),
+    distribution: 'space-between',
+    horizontal: true,
+    paddingInline: 16,
+    style: style,
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      gap: (gap === null || gap === void 0 ? void 0 : gap.left) || 12,
+      horizontal: true,
+      children: [showBackButton && /*#__PURE__*/_jsx(ActionIcon, {
+        icon: ChevronLeft,
+        onClick: function onClick() {
+          return onBackClick === null || onBackClick === void 0 ? void 0 : onBackClick();
+        },
+        size: {
+          fontSize: 24
+        },
+        style: {
+          marginRight: gap !== null && gap !== void 0 && gap.left ? -gap.left / 2 : -6
+        }
+      }), left]
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      gap: (gap === null || gap === void 0 ? void 0 : gap.right) || 8,
+      horizontal: true,
+      children: right
+    })]
+  });
+});
+export default ChatHeader;

package/es/ChatHeader/style.d.ts

@@ -0,0 +1,3 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    container: import("antd-style").SerializedStyles;
+}>;

package/es/ChatHeader/style.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      grid-area: header;\n      height: 64px;\n      border-bottom: 1px solid ", ";\n    "])), token.colorSplit)
+  };
+});

package/es/Form/components/FormGroup.d.ts

@@ -3,7 +3,7 @@ import { type CollapseProps } from 'antd';
 import { type ReactNode } from 'react';
 export interface FormGroupProps extends CollapseProps {
     children: ReactNode;
-    icon: IconProps['icon'];
+    icon?: IconProps['icon'];
     title: string;
 }
 declare const FormGroup: import("react").NamedExoticComponent<FormGroupProps>;

package/es/Form/components/FormGroup.js

@@ -26,7 +26,7 @@ var FormGroup = /*#__PURE__*/memo(function (_ref) {
       key: 1,
       label: /*#__PURE__*/_jsxs("div", {
         className: styles.title,
-        children: [/*#__PURE__*/_jsx(Icon, {
+        children: [icon && /*#__PURE__*/_jsx(Icon, {
           icon: icon
         }), title]
       })

package/es/Form/index.d.ts

@@ -4,7 +4,7 @@ import { type ReactNode } from 'react';
 import { FormItemProps } from './components/FormItem';
 export interface ItemGroup {
     children: FormItemProps[];
-    icon: LucideIcon;
+    icon?: LucideIcon;
     title: string;
 }
 export interface FormProps extends AntFormProps {

package/es/Form/index.js

@@ -27,7 +27,7 @@ var Form = /*#__PURE__*/memo(function (_ref) {
   }, props), {}, {
     children: [items === null || items === void 0 ? void 0 : items.map(function (group, groupIndex) {
       return /*#__PURE__*/_jsx(FormGroup, {
-        icon: group.icon,
+        icon: group === null || group === void 0 ? void 0 : group.icon,
         title: group.title,
         children: group.children.map(function (item, itemIndex) {
           return /*#__PURE__*/_jsx(FormItem, _objectSpread({

package/es/index.d.ts

@@ -3,6 +3,7 @@ export { default as ActionIconGroup, type ActionIconGroupProps } from './ActionI
 export { default as Avatar, type AvatarProps } from './Avatar';
 export { default as Burger, type BurgerProps } from './Burger';
 export type { ChatMessage, MessageRoleType } from './Chat';
+export { default as ChatHeader, type ChatHeaderProps } from './ChatHeader';
 export { default as ChatInputArea, type ChatInputAreaProps } from './ChatInputArea';
 export { default as ChatItem, type ChatItemProps } from './ChatItem';
 export { default as ChatList, type ChatListProps } from './ChatList';

package/es/index.js

@@ -2,6 +2,7 @@ export { default as ActionIcon } from "./ActionIcon";
 export { default as ActionIconGroup } from "./ActionIconGroup";
 export { default as Avatar } from "./Avatar";
 export { default as Burger } from "./Burger";
+export { default as ChatHeader } from "./ChatHeader";
 export { default as ChatInputArea } from "./ChatInputArea";
 export { default as ChatItem } from "./ChatItem";
 export { default as ChatList } from "./ChatList";

package/package.json

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