@lobehub/ui 1.88.1 → 1.90.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 (5) hide show
  1. package/es/ChatInputArea/index.d.ts +1 -0
  2. package/es/ChatInputArea/index.js +18 -15
  3. package/es/MobileNavBar/style.js +1 -1
  4. package/es/MobileTabBar/style.js +5 -4
  5. package/package.json +1 -1
package/es/ChatInputArea/index.d.ts CHANGED
@@ -63,6 +63,7 @@ export interface ChatInputAreaProps extends ActionProps, TextAreaProps {
63
63
  * @description CSS styles for the textarea element
64
64
  */
65
65
  textareaStyle?: CSSProperties;
66
+ value?: string;
66
67
  }
67
68
  declare const ChatInputArea: import("react").ForwardRefExoticComponent<ChatInputAreaProps & import("react").RefAttributes<InputRef>>;
68
69
  export default ChatInputArea;
package/es/ChatInputArea/index.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
2
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
4
- var _excluded = ["text", "textareaClassName", "style", "textareaStyle", "minHeight", "className", "actions", "footer", "expand", "placeholder", "onExpandChange", "onSend", "defaultValue", "loading", "disabled", "onInputChange", "onPressEnter", "onCompositionStart", "onCompositionEnd", "onBlur", "onChange", "textareaId", "actionsRight", "onStop"];
4
+ var _excluded = ["text", "textareaClassName", "style", "textareaStyle", "minHeight", "className", "actions", "footer", "expand", "placeholder", "onExpandChange", "onSend", "defaultValue", "loading", "disabled", "onInputChange", "onPressEnter", "onCompositionStart", "onCompositionEnd", "onBlur", "onChange", "textareaId", "actionsRight", "onStop", "value"];
5
5
  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; }
6
6
  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; }
7
7
  import { Button } from 'antd';
8
8
  import { Loader2 } from 'lucide-react';
9
- import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
9
+ import { forwardRef, useCallback, useRef } from 'react';
10
+ import useControlledState from 'use-merge-value';
10
11
  import Icon from "../Icon";
11
12
  import { TextArea } from "../Input";
12
13
  import Action from "./Action";
@@ -42,23 +43,25 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
42
43
  textareaId = _ref$textareaId === void 0 ? 'lobe-chat-input-area' : _ref$textareaId,
43
44
  actionsRight = _ref.actionsRight,
44
45
  onStop = _ref.onStop,
46
+ value = _ref.value,
45
47
  props = _objectWithoutProperties(_ref, _excluded);
48
+ var _useControlledState = useControlledState(defaultValue, {
49
+ defaultValue: defaultValue,
50
+ onChange: onInputChange,
51
+ value: value
52
+ }),
53
+ _useControlledState2 = _slicedToArray(_useControlledState, 2),
54
+ currentValue = _useControlledState2[0],
55
+ setCurrentValue = _useControlledState2[1];
46
56
  var _useStyles = useStyles(),
47
57
  cx = _useStyles.cx,
48
58
  styles = _useStyles.styles;
49
59
  var isChineseInput = useRef(false);
50
- var _useState = useState(defaultValue),
51
- _useState2 = _slicedToArray(_useState, 2),
52
- value = _useState2[0],
53
- setValue = _useState2[1];
54
60
  var handleSend = useCallback(function () {
55
61
  if (loading && disabled) return;
56
- if (onSend) onSend(value);
57
- setValue('');
58
- }, [disabled, value]);
59
- useEffect(function () {
60
- if (onInputChange) onInputChange(value);
61
- }, [value]);
62
+ if (onSend) onSend(currentValue);
63
+ setCurrentValue('');
64
+ }, [disabled, currentValue]);
62
65
  return /*#__PURE__*/_jsxs("section", {
63
66
  className: cx(styles.container, className),
64
67
  style: _objectSpread({
@@ -80,11 +83,11 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
80
83
  }, props), {}, {
81
84
  onBlur: function onBlur(e) {
82
85
  if (_onBlur) _onBlur(e);
83
- setValue(e.target.value);
86
+ setCurrentValue(e.target.value);
84
87
  },
85
88
  onChange: function onChange(e) {
86
89
  if (_onChange) _onChange(e);
87
- setValue(e.target.value);
90
+ setCurrentValue(e.target.value);
88
91
  },
89
92
  onCompositionEnd: function onCompositionEnd(e) {
90
93
  if (_onCompositionEnd) _onCompositionEnd(e);
@@ -104,7 +107,7 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
104
107
  placeholder: placeholder,
105
108
  resize: false,
106
109
  type: "pure",
107
- value: value
110
+ value: currentValue
108
111
  }))
109
112
  }), /*#__PURE__*/_jsxs("div", {
110
113
  className: styles.footerBar,
package/es/MobileNavBar/style.js CHANGED
@@ -9,7 +9,7 @@ export var useStyles = createStyles(function (_ref) {
9
9
  stylish = _ref.stylish;
10
10
  return {
11
11
  center: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: 100%;\n "]))),
12
- container: cx(stylish.blurStrong, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow: hidden;\n flex: none;\n\n width: 100vw;\n\n background: linear-gradient(\n to bottom,\n ", ",\n ", "\n );\n border-bottom: 1px solid ", ";\n "])), rgba(token.colorBgLayout, 0.8), rgba(token.colorBgLayout, 0.4), token.colorBorder)),
12
+ container: cx(stylish.blurStrong, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow: hidden;\n flex: none;\n width: 100vw;\n background: linear-gradient(\n to bottom,\n ", ",\n ", "\n );\n "])), rgba(token.colorBgLayout, 0.8), rgba(token.colorBgLayout, 0.4))),
13
13
  inner: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n\n width: 100%;\n height: 44px;\n min-height: 44px;\n max-height: 44px;\n padding: 0 6px;\n "]))),
14
14
  left: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n justify-content: flex-start;\n height: 100%;\n "]))),
15
15
  right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n justify-content: flex-end;\n height: 100%;\n "])))
package/es/MobileTabBar/style.js CHANGED
@@ -6,13 +6,14 @@ export var useStyles = createStyles(function (_ref) {
6
6
  var css = _ref.css,
7
7
  token = _ref.token,
8
8
  cx = _ref.cx,
9
- stylish = _ref.stylish;
9
+ stylish = _ref.stylish,
10
+ isDarkMode = _ref.isDarkMode;
10
11
  return {
11
12
  active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n "])), token.colorPrimary),
12
- container: cx(stylish.blur, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow: hidden;\n flex: none;\n\n width: 100vw;\n\n background: ", ";\n border-top: 1px solid ", ";\n "])), rgba(token.colorBgContainer, 0.5), token.colorBorder)),
13
+ container: cx(stylish.blur, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow: hidden;\n flex: none;\n width: 100vw;\n background: ", ";\n "])), rgba(isDarkMode ? token.colorBgLayout : token.colorBgContainer, 0.5))),
13
14
  icon: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 24px;\n height: 24px;\n font-size: 24px;\n "]))),
14
15
  inner: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n height: 48px;\n "]))),
15
- tab: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n cursor: pointer;\n\n width: 48px;\n height: 48px;\n padding-top: env(safe-area-inset-top);\n\n color: ", ";\n "])), token.colorTextSecondary),
16
- title: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n font-size: 12px;\n line-height: 1;\n "])))
16
+ tab: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n cursor: pointer;\n width: 48px;\n height: 48px;\n color: ", ";\n "])), token.colorTextSecondary),
17
+ title: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n overflow: hidden;\n\n width: 100%;\n\n font-size: 12px;\n line-height: 1;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n "])))
17
18
  };
18
19
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "1.88.1",
3
+ "version": "1.90.0",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",