@lobehub/ui 1.128.7 → 1.129.0

package/es/ChatInputArea/mobile/ChatInputArea.d.ts

@@ -4,6 +4,7 @@ import { type ChatInputAreaInnerProps } from '../ChatInputAreaInner';
 export interface MobileChatInputAreaProps extends ChatInputAreaInnerProps {
     bottomAddons?: ReactNode;
     expand?: boolean;
+    safeArea?: boolean;
     setExpand?: (expand: boolean) => void;
     style?: CSSProperties;
     textAreaLeftAddons?: ReactNode;

package/es/ChatInputArea/mobile/ChatInputArea.js

@@ -8,6 +8,7 @@ import { rgba } from 'polished';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import ActionIcon from "../../ActionIcon";
+import MobileSafeArea from "../../MobileSafeArea";
 import ChatInputAreaInner from "../ChatInputAreaInner";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -15,7 +16,7 @@ var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 12px 0;\n      background: ", ";\n      border-top: 1px solid ", ";\n    "])), token.colorFillQuaternary, rgba(token.colorBorder, 0.25)),
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding-top: 12px;\n      padding-bottom: 12px;\n      background: ", ";\n      border-top: 1px solid ", ";\n    "])), token.colorFillQuaternary, rgba(token.colorBorder, 0.25)),
     expand: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: absolute;\n      height: 100%;\n      background: ", ";\n    "])), token.colorBgLayout),
     expandButton: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: absolute;\n      left: 14px;\n    "]))),
     expandTextArea: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      flex: 1;\n    "]))),
@@ -35,7 +36,8 @@ var MobileChatInputArea = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     onSend = _ref2.onSend,
     onInput = _ref2.onInput,
     loading = _ref2.loading,
-    value = _ref2.value;
+    value = _ref2.value,
+    safeArea = _ref2.safeArea;
   var containerRef = useRef(null);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
@@ -74,65 +76,69 @@ var MobileChatInputArea = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }, [expand, loading]);
   var showAddons = !expand && !isFocused;
   return /*#__PURE__*/_jsxs(Flexbox, {
-    className: cx(styles.container, expand && styles.expand, className),
-    gap: 12,
-    style: style,
-    children: [topAddons && /*#__PURE__*/_jsx(Flexbox, {
-      style: showAddons ? {} : {
-        display: 'none'
-      },
-      children: topAddons
-    }), /*#__PURE__*/_jsxs(Flexbox, {
-      className: cx(expand && styles.expand),
-      ref: containerRef,
-      style: {
-        position: 'relative'
-      },
-      children: [showFullscreen && /*#__PURE__*/_jsx(ActionIcon, {
-        active: true,
-        className: styles.expandButton,
-        icon: expand ? ChevronDown : ChevronUp,
-        onClick: function onClick() {
-          return setExpand === null || setExpand === void 0 ? void 0 : setExpand(!expand);
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      className: cx(styles.container, expand && styles.expand, className),
+      gap: 12,
+      style: style,
+      children: [topAddons && /*#__PURE__*/_jsx(Flexbox, {
+        style: showAddons ? {} : {
+          display: 'none'
         },
-        size: {
-          blockSize: 24,
-          borderRadius: '50%',
-          fontSize: 14
+        children: topAddons
+      }), /*#__PURE__*/_jsxs(Flexbox, {
+        className: cx(expand && styles.expand),
+        ref: containerRef,
+        style: {
+          position: 'relative'
         },
-        style: expand ? {
-          top: 6
-        } : {}
-      }), /*#__PURE__*/_jsx(InnerContainer, {
-        children: /*#__PURE__*/_jsx(ChatInputAreaInner, {
-          autoSize: expand ? false : {
-            maxRows: 6,
-            minRows: 0
+        children: [showFullscreen && /*#__PURE__*/_jsx(ActionIcon, {
+          active: true,
+          className: styles.expandButton,
+          icon: expand ? ChevronDown : ChevronUp,
+          onClick: function onClick() {
+            return setExpand === null || setExpand === void 0 ? void 0 : setExpand(!expand);
           },
-          className: cx(expand && styles.expandTextArea),
-          loading: loading,
-          onBlur: function onBlur() {
-            return setIsFocused(false);
+          size: {
+            blockSize: 24,
+            borderRadius: '50%',
+            fontSize: 14
           },
-          onFocus: function onFocus() {
-            return setIsFocused(true);
-          },
-          onInput: onInput,
-          onSend: onSend,
-          ref: ref,
-          style: {
-            height: 36,
-            paddingBlock: 6
-          },
-          type: expand ? 'pure' : 'block',
-          value: value
-        })
+          style: expand ? {
+            top: 6
+          } : {}
+        }), /*#__PURE__*/_jsx(InnerContainer, {
+          children: /*#__PURE__*/_jsx(ChatInputAreaInner, {
+            autoSize: expand ? false : {
+              maxRows: 6,
+              minRows: 0
+            },
+            className: cx(expand && styles.expandTextArea),
+            loading: loading,
+            onBlur: function onBlur() {
+              return setIsFocused(false);
+            },
+            onFocus: function onFocus() {
+              return setIsFocused(true);
+            },
+            onInput: onInput,
+            onSend: onSend,
+            ref: ref,
+            style: {
+              height: 36,
+              paddingBlock: 6
+            },
+            type: expand ? 'pure' : 'block',
+            value: value
+          })
+        })]
+      }), bottomAddons && /*#__PURE__*/_jsx(Flexbox, {
+        style: showAddons ? {} : {
+          display: 'none'
+        },
+        children: bottomAddons
       })]
-    }), bottomAddons && /*#__PURE__*/_jsx(Flexbox, {
-      style: showAddons ? {} : {
-        display: 'none'
-      },
-      children: bottomAddons
+    }), safeArea && !isFocused && /*#__PURE__*/_jsx(MobileSafeArea, {
+      position: 'bottom'
     })]
   });
 });

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

@@ -16,7 +16,7 @@ export interface FormGroupProps extends CollapseProps {
     children: ReactNode;
     defaultActive?: boolean;
     extra?: ReactNode;
-    icon?: IconProps['icon'] | ReactNode;
+    icon?: IconProps['icon'];
     itemsType?: ItemsType;
     title?: string;
     variant?: FormVariant;

package/es/Form/components/FormGroup.js

@@ -56,9 +56,9 @@ var FormGroup = /*#__PURE__*/memo(function (_ref2) {
     className: styles.title,
     gap: 8,
     horizontal: true,
-    children: [icon && typeof icon === 'function' ? /*#__PURE__*/_jsx(Icon, {
+    children: [icon && /*#__PURE__*/_jsx(Icon, {
       icon: icon
-    }) : icon, title]
+    }), title]
   });
   if (itemsType === 'flat') {
     if (mobile) return /*#__PURE__*/_jsx(Flexbox, {

package/package.json

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