agora-ui-foundation 1.0.0

package/lib/components/message-label/index.stories.js

@@ -0,0 +1,231 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Doc = void 0;
+var _ = require(".");
+var _avatar = require("../avatar");
+var _messageBubble = require("../message-bubble");
+var _i18n = require("../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var meta = {
+  title: 'Components/MessageLabel',
+  tags: ['autodocs'],
+  component: _.MessageLabel,
+  args: {
+    styles: {
+      display: 'flex'
+    }
+  },
+  argTypes: {}
+};
+var Doc = exports.Doc = function Doc(props) {
+  var styles = props.styles;
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      padding: 50,
+      border: 'solid 0.5px #e5e7eb'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 300,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      children: ["Basic: \u81EA\u5DF1\u662F\u4E3B\u6301\u4EBA", /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          display: 'flex',
+          paddingRight: 30,
+          flexDirection: 'column'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MessageLabel, {
+          color: '#6A79FF',
+          publisher: '',
+          target: '',
+          time: '2023-12-29 12:20 AM',
+          tag: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-msg-tag",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: transI18n('fmt_role_host')
+            })
+          })
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 300,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      children: ["Basic:", /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          display: 'flex',
+          paddingRight: 30,
+          flexDirection: 'column'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MessageLabel, {
+          color: '#6A79FF',
+          publisher: '',
+          target: '',
+          time: '2023-12-29 12:20 AM'
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 300,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      children: ["\u5E26\u5934\u50CF:", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MessageLabel, {
+        color: '#6A79FF',
+        publisher: '',
+        target: '',
+        time: '2023-12-29 12:20 AM',
+        avatar: /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+          size: 24,
+          textSize: 24,
+          nickName: "\u5468"
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 400,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      children: ["\u5E26\u5934\u50CF & Tag:", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MessageLabel, {
+        color: '#6A79FF',
+        publisher: '',
+        target: '',
+        time: '2023-12-29 12:20 AM'
+        /**TODO：Tag */,
+        tag: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-msg-tag",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: transI18n('fmt_role_host')
+          })
+        }),
+        avatar: /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+          size: 24,
+          textSize: 24,
+          nickName: "T"
+        })
+      })]
+    }), "\u5E26\u6D88\u606F\u6C14\u6CE1\u5C55\u793A\uFF1A", /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 300,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      children: ["Basic:", /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: 'flex',
+          paddingRight: 30,
+          flexDirection: 'column'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.MessageLabel, {
+          color: '#6A79FF',
+          publisher: '',
+          target: '',
+          time: '2023-12-29 12:20 AM',
+          tag: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-msg-tag",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: transI18n('fmt_role_host')
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_messageBubble.MessageBubble, {
+          role: 'participant',
+          isSelf: true
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 300,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      children: ["Basic:", /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          display: 'flex',
+          paddingRight: 30,
+          flexDirection: 'column'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.MessageLabel, {
+          color: '#6A79FF',
+          publisher: '',
+          target: '',
+          time: '2023-12-29 12:20 AM'
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_messageBubble.MessageBubble, {
+          role: 'participant',
+          isSelf: true
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 300,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      children: ["\u5E26\u5934\u50CF:", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MessageLabel, {
+        color: '#6A79FF',
+        publisher: '',
+        target: '',
+        time: '2023-12-29 12:20 AM',
+        avatar: /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+          size: 24,
+          textSize: 24,
+          nickName: "\u5468"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_messageBubble.MessageBubble, {
+        role: "participant",
+        styles: {
+          marginLeft: 34
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 400,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      children: ["\u5E26\u5934\u50CF & Tag:", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MessageLabel, {
+        color: '#6A79FF',
+        time: '2023-12-29 12:20 AM'
+        /**TODO：Tag */,
+        tag: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-msg-tag",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: transI18n('fmt_role_host')
+          })
+        }),
+        avatar: /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+          size: 24,
+          textSize: 24,
+          nickName: "T"
+        }),
+        publisher: '',
+        target: ''
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_messageBubble.MessageBubble, {
+        role: "host",
+        styles: {
+          marginLeft: 34
+        }
+      })]
+    })]
+  });
+};
+var _default = exports["default"] = meta;

package/lib/components/message-textarea/handleUploadImag.d.ts

@@ -0,0 +1 @@
+export declare function handleClickUploadImage(handleImagData: (imgData: any) => void): void;

package/lib/components/message-textarea/handleUploadImag.js

@@ -0,0 +1,63 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleClickUploadImage = handleClickUploadImage;
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.function.name.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/web.url.js");
+require("core-js/modules/web.url.to-json.js");
+require("core-js/modules/web.url-search-params.js");
+require("core-js/modules/web.url-search-params.delete.js");
+require("core-js/modules/web.url-search-params.has.js");
+require("core-js/modules/web.url-search-params.size.js");
+function handleClickUploadImage(handleImagData) {
+  var fileInput = document.createElement('input');
+  fileInput.setAttribute('readonly', 'readonly');
+  fileInput.type = 'file';
+  fileInput.accept = 'image/*';
+  fileInput.style.display = 'none';
+  fileInput.addEventListener('change', function (ev) {
+    handleFileSelect(ev, handleImagData);
+  }, false);
+  fileInput.addEventListener('cancel', function () {
+    document.body.removeChild(fileInput);
+  });
+  document.body.appendChild(fileInput);
+  fileInput.click();
+}
+function handleFileSelect(event, handleImagData) {
+  var _event$target;
+  var file = event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 || (_event$target = _event$target.files) === null || _event$target === void 0 ? void 0 : _event$target[0];
+  if (file) {
+    var reader = new FileReader();
+    reader.onload = function (e) {
+      var _e$target;
+      var fileData = e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.result;
+      var url = URL.createObjectURL(file);
+      // TODO: 数据类型
+      var chatRoomFile = {
+        filename: file.name,
+        filetype: file.type,
+        url: url,
+        data: fileData
+      };
+      handleImagData(chatRoomFile);
+      URL.revokeObjectURL(url);
+    };
+    reader.onerror = function () {
+      console.error('文件读取失败');
+    };
+
+    // base64 读取
+    reader.readAsDataURL(file);
+    reader.onloadend = function () {
+      event.target.remove();
+    };
+  }
+}

package/lib/components/message-textarea/index.css

@@ -0,0 +1,111 @@
+.fcr-message-input {
+  min-width: 312px;
+  max-height: 110px;
+
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  padding: 8px 8px 0 10px;
+
+  background: var(--fcr_ui_scene_input);
+  border-radius: var(--fcr_cornerradius_m);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  font-size: 12px;
+
+  position: relative;
+}
+
+.fcr-input__box {
+  display: flex;
+  flex: 1;
+  /* margin-bottom: 4px; */
+}
+
+.fcr-message-input__focus {
+  border: 1px solid var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-message-input__error {
+  border: 1px solid var(--fcr_ui_scene_ramp_red6);
+}
+
+.fcr-message-input textarea {
+  background: inherit;
+  color: var(--fcr_ui_scene_icontext1);
+  width: 100%;
+  resize: none;
+  line-height: 18px;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.fcr-message-input textarea:focus {
+  outline: none;
+}
+
+.fcr-input__bottom-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+}
+
+.fcr-bar__buttons {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+}
+
+.fcr-bar__buttons button {
+  background: var(--fcr_web_ui_scene_fill2);
+  border: none;
+  margin-right: 4px;
+}
+
+.fcr-bar__confirm {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-direction: row;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-bar__confirm button {
+  background: var(--fcr_ui_scene_input);
+  border: none;
+  width: 32px;
+  height: 32px;
+}
+
+.fcr-confirm_error {
+  color: var(--fcr_ui_scene_ramp_red6);
+}
+
+.fcr-confirm_normal {
+  color: var(--fcr_ui_scene_icontext2);
+}
+
+.fcr-bar__confirm span {
+  font-weight: 400;
+}
+
+.fcr-button-icons {
+  display: flex;
+  align-items: center;
+  background: var(--fcr_web_ui_scene_fill2);
+  border-radius: var(--fcr_cornerradius_xs);
+}
+
+.fcr-button-icons button {
+  margin: 0;
+  cursor: inherit;
+}
+
+.fcr-icon-drop {
+  margin-left: -4px;
+  background: transparent;
+  height: 16px;
+  width: 16px;
+  cursor: pointer;
+}

package/lib/components/message-textarea/index.d.ts

@@ -0,0 +1,20 @@
+import React, { CSSProperties } from 'react';
+import './index.css';
+import { handleClickUploadImage } from './handleUploadImag';
+export interface MessageInputProps {
+    updateErrVisible?: (visible: boolean) => void;
+    onMsg?: (msg: string) => void;
+    limitation?: number;
+    styles?: CSSProperties;
+    placeholder?: string;
+    onEmoji?: (emoji: string) => void;
+    onFile?: (file: string) => void;
+    handleClickUploadImage?: () => void;
+    defaultMsg?: string;
+    updateChatTextMsg?: (msg: string) => void;
+}
+export declare const MessageTextArea: React.ForwardRefExoticComponent<MessageInputProps & React.RefAttributes<{
+    dom: HTMLTextAreaElement | null;
+}>>;
+export declare const ButtonIcons: React.FC<{}>;
+export { handleClickUploadImage };

package/lib/components/message-textarea/index.js

@@ -0,0 +1,250 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageTextArea = exports.ButtonIcons = void 0;
+Object.defineProperty(exports, "handleClickUploadImage", {
+  enumerable: true,
+  get: function get() {
+    return _handleUploadImag.handleClickUploadImage;
+  }
+});
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.keys.js");
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+require("./index.css");
+var _iconButton = require("../icon-button");
+var _type = require("../icon/type");
+var _icon = require("../icon");
+var _handleUploadImag = require("./handleUploadImag");
+var _popover = require("../popover");
+var svgExports = _interopRequireWildcard(require("../icon/svg-exports"));
+var _i18n = require("../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var defaultAutoSizeParams = {
+  minHeight: 45,
+  maxHeight: 68
+};
+var MessageTextArea = exports.MessageTextArea = /*#__PURE__*/(0, _react.forwardRef)(function MessageTextArea(props, ref) {
+  var t = (0, _i18n.useI18n)();
+  var updateErrVisible = props.updateErrVisible,
+    onSendMsg = props.onMsg,
+    _props$limitation = props.limitation,
+    limitation = _props$limitation === void 0 ? 200 : _props$limitation,
+    styles = props.styles,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? t('fmt_chat_label_enter_message') : _props$placeholder,
+    onEmoji = props.onEmoji,
+    onFile = props.onFile,
+    handleClickUploadImage = props.handleClickUploadImage,
+    _props$defaultMsg = props.defaultMsg,
+    defaultMsg = _props$defaultMsg === void 0 ? '' : _props$defaultMsg,
+    updateChatTextMsg = props.updateChatTextMsg;
+  var _useState = (0, _react.useState)(defaultMsg),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    textMsg = _useState2[0],
+    setTextMsg = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    focus = _useState4[0],
+    setFocus = _useState4[1];
+  var cls = (0, _classnames["default"])('fcr-message-input', {
+    'fcr-message-input__focus': focus && textMsg.length <= limitation,
+    'fcr-message-input__error': textMsg.length > limitation
+  });
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    emojiVisible = _useState6[0],
+    setEmojiVisible = _useState6[1];
+  var inputRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: inputRef.current
+    };
+  });
+  var handleSize = function handleSize() {
+    var _defaultAutoSizeParam = defaultAutoSizeParams.minHeight,
+      minHeight = _defaultAutoSizeParam === void 0 ? 100 : _defaultAutoSizeParam;
+    if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
+      inputRef.current.style.height = minHeight + 'px';
+      inputRef.current.style.height = inputRef.current.scrollHeight + 'px';
+    }
+  };
+  (0, _react.useEffect)(handleSize, [textMsg]);
+  (0, _react.useEffect)(function () {
+    if (textMsg.length <= limitation) {
+      updateErrVisible && updateErrVisible(false);
+    }
+  }, [textMsg]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      updateChatTextMsg === null || updateChatTextMsg === void 0 || updateChatTextMsg(textMsg);
+    };
+  }, [textMsg]);
+  var msgSendHandler = function msgSendHandler() {
+    if (textMsg.length === 0) return;
+    if (textMsg.length > limitation) {
+      updateErrVisible && updateErrVisible(true);
+    } else {
+      onSendMsg && onSendMsg(textMsg);
+      setTextMsg('');
+    }
+  };
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isComposing = _useState8[0],
+    setIsComposing = _useState8[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: cls,
+    style: _objectSpread({}, styles),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-input__box",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
+        ref: inputRef,
+        style: _objectSpread(_objectSpread({}, defaultAutoSizeParams), {}, {
+          height: defaultAutoSizeParams.minHeight
+        }),
+        placeholder: placeholder,
+        value: textMsg,
+        onChange: function onChange(target) {
+          setTextMsg(target.target.value);
+        },
+        onFocus: function onFocus() {
+          setFocus(true);
+        },
+        onBlur: function onBlur() {
+          setFocus(false);
+        },
+        onCompositionStart: function onCompositionStart(_) {
+          setIsComposing(true);
+        },
+        onCompositionEnd: function onCompositionEnd(_) {
+          setIsComposing(false);
+        },
+        onKeyDown: function onKeyDown(event) {
+          if (event.key === 'Enter' && !isComposing) {
+            if (!event.shiftKey) {
+              msgSendHandler();
+              event.preventDefault();
+            }
+          }
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-input__bottom-bar",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-bar__buttons",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+          icon: _type.FcrIconType.FCR_PICTURE,
+          size: "mini",
+          iconColors: {
+            iconPrimary: 'var(--fcr_ui_scene_ramp_brand2)',
+            iconSecondary: 'var(--fcr_card_purple2)'
+          },
+          onClick: handleClickUploadImage
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+          trigger: 'click',
+          placement: 'bottomLeft',
+          overlayInnerStyle: {
+            maxHeight: 200,
+            overflow: 'auto'
+          },
+          visible: emojiVisible,
+          onVisibleChange: function onVisibleChange(visible) {
+            setEmojiVisible(visible);
+          },
+          content: Object.keys(svgExports).map(function (key) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              style: {
+                display: 'inline-block',
+                cursor: 'pointer'
+              },
+              type: key,
+              size: 24,
+              colors: {
+                iconPrimary: '#ccc'
+              },
+              onClick: function onClick() {
+                onEmoji && onEmoji(key);
+                setTextMsg(textMsg + "[".concat(key, "]"));
+                setEmojiVisible(false);
+              }
+            });
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+            icon: _type.FcrIconType.FCR_EMO,
+            size: "mini",
+            iconColors: {
+              iconPrimary: 'var(--fcr_ui_scene_black10)'
+            },
+            onClick: function onClick() {
+              setEmojiVisible(true);
+            }
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonIcons, {})]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-bar__confirm",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: textMsg.length >= limitation ? 'fcr-confirm_error' : 'fcr-confirm_normal',
+            children: textMsg.length
+          }), ' ', "/ ", limitation]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+          disabled: textMsg.length === 0,
+          icon: _type.FcrIconType.FCR_SEND,
+          size: "large",
+          iconColors: {
+            iconPrimary: 'var(--fcr_ui_scene_ramp_brand6)'
+          },
+          onClick: msgSendHandler
+        })]
+      })]
+    })]
+  });
+});
+var ButtonIcons = exports.ButtonIcons = function ButtonIcons(_ref) {
+  (0, _objectDestructuringEmpty2["default"])(_ref);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-button-icons",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+      icon: _type.FcrIconType.FCR_OPENFILE,
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      },
+      size: "mini"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: 'fcr-icon-drop',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_DROPDOWN,
+        colors: {
+          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+        }
+      })
+    })]
+  });
+};

package/lib/components/message-textarea/index.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { MessageTextArea, MessageInputProps } from '.';
+declare const meta: Meta<typeof MessageTextArea>;
+export declare const Doc: (props: MessageInputProps) => import("react/jsx-runtime").JSX.Element;
+export default meta;