@lobehub/ui 1.54.0 → 1.55.1

package/es/EditableMessage/index.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+import { type MessageModalProps } from "../MessageModal";
 export interface EditableMessageProps {
     /**
      * @title The class name for the Markdown and MessageInput component
@@ -55,6 +56,7 @@ export interface EditableMessageProps {
          */
         markdown?: CSSProperties;
     };
+    text?: MessageModalProps['text'];
     /**
      * @title The current text value
      */

package/es/EditableMessage/index.js

@@ -21,7 +21,8 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
     _ref$showEditWhenEmpt = _ref.showEditWhenEmpty,
     showEditWhenEmpty = _ref$showEditWhenEmpt === void 0 ? false : _ref$showEditWhenEmpt,
     styles = _ref.styles,
-    editButtonSize = _ref.editButtonSize;
+    editButtonSize = _ref.editButtonSize,
+    text = _ref.text;
   var _useControlledState = useControlledState(false, {
       onChange: onEditingChange,
       value: editing
@@ -66,15 +67,20 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
     }) : /*#__PURE__*/_jsx(Markdown, {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.markdown,
       style: styles === null || styles === void 0 ? void 0 : styles.markdown,
-      children: value
+      children: value || placeholder
     }), /*#__PURE__*/_jsx(MessageModal, {
       editing: isEdit,
       onChange: function onChange(text) {
-        _onChange === null || _onChange === void 0 ? void 0 : _onChange(text);
+        return _onChange === null || _onChange === void 0 ? void 0 : _onChange(text);
       },
       onEditingChange: setTyping,
-      onOpenChange: setExpand,
+      onOpenChange: function onOpenChange(e) {
+        setExpand(e);
+        setTyping(false);
+      },
       open: expand,
+      placeholder: placeholder,
+      text: text,
       value: value
     })]
   });

package/es/MessageModal/index.d.ts

@@ -22,6 +22,13 @@ export interface MessageModalProps {
      * @default false
      */
     open?: boolean;
+    placeholder?: string;
+    text?: {
+        cancel?: string;
+        confirm?: string;
+        edit?: string;
+        title?: string;
+    };
     /**
      * @description The value of the message content
      */

package/es/MessageModal/index.js

@@ -14,8 +14,10 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
     open = _ref.open,
     onOpenChange = _ref.onOpenChange,
     onEditingChange = _ref.onEditingChange,
+    placeholder = _ref.placeholder,
     value = _ref.value,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    text = _ref.text;
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
   var _useControlledState = useControlledState(false, {
@@ -33,13 +35,13 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
     expand = _useControlledState4[0],
     setExpand = _useControlledState4[1];
   return /*#__PURE__*/_jsx(Modal, {
-    cancelText: 'Cancel',
+    cancelText: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel',
     className: styles.modal,
     closeIcon: /*#__PURE__*/_jsx(Icon, {
       icon: X
     }),
     footer: isEdit ? null : undefined,
-    okText: 'Edit',
+    okText: (text === null || text === void 0 ? void 0 : text.edit) || 'Edit',
     onCancel: function onCancel() {
       return setExpand(false);
     },
@@ -51,7 +53,7 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
       align: 'center',
       gap: 4,
       horizontal: true,
-      children: "Prompt"
+      children: (text === null || text === void 0 ? void 0 : text.title) || 'Prompt'
     }),
     width: 800,
     children: isEdit ? /*#__PURE__*/_jsx(MessageInput, {
@@ -63,10 +65,18 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
       onConfirm: function onConfirm(text) {
         setTyping(false);
         onChange === null || onChange === void 0 ? void 0 : onChange(text);
+      },
+      placeholder: placeholder,
+      text: {
+        cancel: text === null || text === void 0 ? void 0 : text.cancel,
+        confirm: text === null || text === void 0 ? void 0 : text.confirm
       }
     }) : /*#__PURE__*/_jsx(Markdown, {
       className: styles.body,
-      children: value
+      style: value ? {} : {
+        opacity: 0.5
+      },
+      children: String(value || placeholder)
     })
   });
 });

package/es/TokenTag/index.d.ts

@@ -10,5 +10,5 @@ export interface TokenTagProps extends DivProps {
      */
     value: number;
 }
-declare const TokenTag: import("react").NamedExoticComponent<TokenTagProps>;
+declare const TokenTag: import("react").ForwardRefExoticComponent<TokenTagProps & import("react").RefAttributes<HTMLDivElement>>;
 export default TokenTag;

package/es/TokenTag/index.js

@@ -3,12 +3,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["className", "maxValue", "value"];
 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 { memo } from 'react';
+import { forwardRef } from 'react';
 import FluentEmoji from "../FluentEmoji";
 import { ICON_SIZE, useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var TokenTag = /*#__PURE__*/memo(function (_ref) {
+var TokenTag = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     maxValue = _ref.maxValue,
     value = _ref.value,
@@ -31,7 +31,8 @@ var TokenTag = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: cx(styles.container, className)
+    className: cx(styles.container, className),
+    ref: ref
   }, props), {}, {
     children: [/*#__PURE__*/_jsx(FluentEmoji, {
       emoji: emoji,

package/package.json

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