@lobehub/ui 1.128.8 → 1.129.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/ChatInputArea/mobile/ChatInputArea.d.ts +1 -0
  2. package/es/ChatInputArea/mobile/ChatInputArea.js +62 -56
  3. package/package.json +1 -1
package/es/ChatInputArea/mobile/ChatInputArea.d.ts CHANGED
@@ -4,6 +4,7 @@ import { type ChatInputAreaInnerProps } from '../ChatInputAreaInner';
4
4
  export interface MobileChatInputAreaProps extends ChatInputAreaInnerProps {
5
5
  bottomAddons?: ReactNode;
6
6
  expand?: boolean;
7
+ safeArea?: boolean;
7
8
  setExpand?: (expand: boolean) => void;
8
9
  style?: CSSProperties;
9
10
  textAreaLeftAddons?: ReactNode;
package/es/ChatInputArea/mobile/ChatInputArea.js CHANGED
@@ -8,6 +8,7 @@ import { rgba } from 'polished';
8
8
  import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
9
9
  import { Flexbox } from 'react-layout-kit';
10
10
  import ActionIcon from "../../ActionIcon";
11
+ import MobileSafeArea from "../../MobileSafeArea";
11
12
  import ChatInputAreaInner from "../ChatInputAreaInner";
12
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
14
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -15,7 +16,7 @@ var useStyles = createStyles(function (_ref) {
15
16
  var css = _ref.css,
16
17
  token = _ref.token;
17
18
  return {
18
- container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 12px 0;\n background: ", ";\n border-top: 1px solid ", ";\n "])), token.colorFillQuaternary, rgba(token.colorBorder, 0.25)),
19
+ 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)),
19
20
  expand: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n height: 100%;\n background: ", ";\n "])), token.colorBgLayout),
20
21
  expandButton: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n left: 14px;\n "]))),
21
22
  expandTextArea: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n flex: 1;\n "]))),
@@ -35,7 +36,8 @@ var MobileChatInputArea = /*#__PURE__*/forwardRef(function (_ref2, ref) {
35
36
  onSend = _ref2.onSend,
36
37
  onInput = _ref2.onInput,
37
38
  loading = _ref2.loading,
38
- value = _ref2.value;
39
+ value = _ref2.value,
40
+ safeArea = _ref2.safeArea;
39
41
  var containerRef = useRef(null);
40
42
  var _useStyles = useStyles(),
41
43
  cx = _useStyles.cx,
@@ -74,65 +76,69 @@ var MobileChatInputArea = /*#__PURE__*/forwardRef(function (_ref2, ref) {
74
76
  }, [expand, loading]);
75
77
  var showAddons = !expand && !isFocused;
76
78
  return /*#__PURE__*/_jsxs(Flexbox, {
77
- className: cx(styles.container, expand && styles.expand, className),
78
- gap: 12,
79
- style: style,
80
- children: [topAddons && /*#__PURE__*/_jsx(Flexbox, {
81
- style: showAddons ? {} : {
82
- display: 'none'
83
- },
84
- children: topAddons
85
- }), /*#__PURE__*/_jsxs(Flexbox, {
86
- className: cx(expand && styles.expand),
87
- ref: containerRef,
88
- style: {
89
- position: 'relative'
90
- },
91
- children: [showFullscreen && /*#__PURE__*/_jsx(ActionIcon, {
92
- active: true,
93
- className: styles.expandButton,
94
- icon: expand ? ChevronDown : ChevronUp,
95
- onClick: function onClick() {
96
- return setExpand === null || setExpand === void 0 ? void 0 : setExpand(!expand);
79
+ children: [/*#__PURE__*/_jsxs(Flexbox, {
80
+ className: cx(styles.container, expand && styles.expand, className),
81
+ gap: 12,
82
+ style: style,
83
+ children: [topAddons && /*#__PURE__*/_jsx(Flexbox, {
84
+ style: showAddons ? {} : {
85
+ display: 'none'
97
86
  },
98
- size: {
99
- blockSize: 24,
100
- borderRadius: '50%',
101
- fontSize: 14
87
+ children: topAddons
88
+ }), /*#__PURE__*/_jsxs(Flexbox, {
89
+ className: cx(expand && styles.expand),
90
+ ref: containerRef,
91
+ style: {
92
+ position: 'relative'
102
93
  },
103
- style: expand ? {
104
- top: 6
105
- } : {}
106
- }), /*#__PURE__*/_jsx(InnerContainer, {
107
- children: /*#__PURE__*/_jsx(ChatInputAreaInner, {
108
- autoSize: expand ? false : {
109
- maxRows: 6,
110
- minRows: 0
94
+ children: [showFullscreen && /*#__PURE__*/_jsx(ActionIcon, {
95
+ active: true,
96
+ className: styles.expandButton,
97
+ icon: expand ? ChevronDown : ChevronUp,
98
+ onClick: function onClick() {
99
+ return setExpand === null || setExpand === void 0 ? void 0 : setExpand(!expand);
111
100
  },
112
- className: cx(expand && styles.expandTextArea),
113
- loading: loading,
114
- onBlur: function onBlur() {
115
- return setIsFocused(false);
101
+ size: {
102
+ blockSize: 24,
103
+ borderRadius: '50%',
104
+ fontSize: 14
116
105
  },
117
- onFocus: function onFocus() {
118
- return setIsFocused(true);
119
- },
120
- onInput: onInput,
121
- onSend: onSend,
122
- ref: ref,
123
- style: {
124
- height: 36,
125
- paddingBlock: 6
126
- },
127
- type: expand ? 'pure' : 'block',
128
- value: value
129
- })
106
+ style: expand ? {
107
+ top: 6
108
+ } : {}
109
+ }), /*#__PURE__*/_jsx(InnerContainer, {
110
+ children: /*#__PURE__*/_jsx(ChatInputAreaInner, {
111
+ autoSize: expand ? false : {
112
+ maxRows: 6,
113
+ minRows: 0
114
+ },
115
+ className: cx(expand && styles.expandTextArea),
116
+ loading: loading,
117
+ onBlur: function onBlur() {
118
+ return setIsFocused(false);
119
+ },
120
+ onFocus: function onFocus() {
121
+ return setIsFocused(true);
122
+ },
123
+ onInput: onInput,
124
+ onSend: onSend,
125
+ ref: ref,
126
+ style: {
127
+ height: 36,
128
+ paddingBlock: 6
129
+ },
130
+ type: expand ? 'pure' : 'block',
131
+ value: value
132
+ })
133
+ })]
134
+ }), bottomAddons && /*#__PURE__*/_jsx(Flexbox, {
135
+ style: showAddons ? {} : {
136
+ display: 'none'
137
+ },
138
+ children: bottomAddons
130
139
  })]
131
- }), bottomAddons && /*#__PURE__*/_jsx(Flexbox, {
132
- style: showAddons ? {} : {
133
- display: 'none'
134
- },
135
- children: bottomAddons
140
+ }), safeArea && !isFocused && /*#__PURE__*/_jsx(MobileSafeArea, {
141
+ position: 'bottom'
136
142
  })]
137
143
  });
138
144
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "1.128.8",
3
+ "version": "1.129.0",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",