@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/recipes/conversation_view/message_input/message_input.vue.cjs

@@ -0,0 +1,690 @@
+"use strict";
+const meeting_pill = require("./meeting_pill/meeting_pill.cjs");
+const vue = require("vue");
+;/* empty css                     */
+const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
+const button = require("../../../components/button/button.vue.cjs");
+const emoji_picker = require("../../../components/emoji_picker/emoji_picker.vue.cjs");
+const icon = require("../../../components/icon/icon.vue.cjs");
+const input = require("../../../components/input/input.vue.cjs");
+const popover = require("../../../components/popover/popover.vue.cjs");
+const rich_text_editor = require("../../../components/rich_text_editor/rich_text_editor.vue.cjs");
+const tooltip = require("../../../components/tooltip/tooltip.vue.cjs");
+const rich_text_editor_constants = require("../../../components/rich_text_editor/rich_text_editor_constants.cjs");
+const _sfc_main = {
+  name: "DtRecipeMessageInput",
+  components: {
+    DtButton: button,
+    DtEmojiPicker: emoji_picker,
+    DtIcon: icon,
+    DtInput: input,
+    DtPopover: popover,
+    DtRichTextEditor: rich_text_editor,
+    DtTooltip: tooltip
+  },
+  mixins: [],
+  inheritAttrs: false,
+  props: {
+    /**
+     * Value of the input. The object format should match TipTap's JSON
+     * document structure: https://tiptap.dev/guide/output#option-1-json
+     */
+    modelValue: {
+      type: [Object, String],
+      default: ""
+    },
+    /**
+     * Whether the input is editable
+     */
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Descriptive label for the input element
+     */
+    inputAriaLabel: {
+      type: String,
+      required: true,
+      default: ""
+    },
+    /**
+     * Prevents the user from typing any further. Deleting text will still work.
+     */
+    preventTyping: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Additional class name for the input element. Only accepts a String value
+     * because this is passed to the editor via options. For multiple classes,
+     * join them into one string, e.g. "d-p8 d-hmx96"
+     */
+    inputClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether the input should receive focus after the component has been
+     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.
+     * - `start`  Sets the focus to the beginning of the input
+     * - `end`    Sets the focus to the end of the input
+     * - `all`    Selects the whole contents of the input
+     * - `Number` Sets the focus to a specific position in the input
+     * - `true`   Defaults to `start`
+     * - `false`  Disables autofocus
+     * @values true, false, start, end, all, number
+     */
+    autoFocus: {
+      type: [Boolean, String, Number],
+      default: false,
+      validator(autoFocus) {
+        if (typeof autoFocus === "string") {
+          return rich_text_editor_constants.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);
+        }
+        return true;
+      }
+    },
+    /**
+     * The output format that the editor uses when emitting the "@input" event.
+     * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for
+     * examples.
+     * @values text, json, html
+     */
+    outputFormat: {
+      type: String,
+      default: "text",
+      validator(outputFormat) {
+        return rich_text_editor_constants.RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);
+      }
+    },
+    /**
+     * Enables the Link extension and optionally passes configurations to it
+     */
+    link: {
+      type: [Boolean, Object],
+      default: true
+    },
+    /**
+     * Placeholder text
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Disable Send Button
+     */
+    disableSend: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Content area needs to dynamically adjust height based on the conversation area height.
+     * can be vh|px|rem|em|%
+     */
+    maxHeight: {
+      type: String,
+      default: "unset"
+    },
+    // Emoji picker props
+    showEmojiPicker: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Props to pass into the emoji picker.
+     */
+    emojiPickerProps: {
+      type: Object,
+      default: () => ({}),
+      validate(emojiPickerProps) {
+        return [
+          "searchNoResultsLabel",
+          "searchResultsLabel",
+          "searchPlaceholderLabel",
+          "skinSelectorButtonTooltipLabel",
+          "tabSetLabels"
+        ].every((prop) => emojiPickerProps[prop] != null);
+      }
+    },
+    /**
+     * Emoji button tooltip label
+     */
+    emojiTooltipMessage: {
+      type: String,
+      default: "Emoji"
+    },
+    // Aria label for buttons
+    /**
+     * Emoji button aria label
+     */
+    emojiButtonAriaLabel: {
+      type: String,
+      default: "emoji button"
+    },
+    /**
+     * Enable character Limit warning
+     */
+    showCharacterLimit: {
+      type: [Boolean, Object],
+      default: () => ({ count: 1500, warning: 500, message: "" })
+    },
+    showImagePicker: {
+      type: [Boolean, Object],
+      default: () => ({ tooltipLabel: "Attach Image", ariaLabel: "image button" })
+    },
+    /**
+     * Send button defaults.
+     */
+    showSend: {
+      type: [Boolean, Object],
+      default: () => ({ icon: "send" })
+    },
+    /**
+     * Cancel button defaults.
+     */
+    showCancel: {
+      type: [Boolean, Object],
+      default: () => ({ text: "Cancel" })
+    },
+    /**
+     * suggestion object containing the items query function.
+     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
+     *
+     * The only required key is the items function which is used to query the contacts for suggestion.
+     * items({ query }) => { return [ContactObject]; }
+     * ContactObject format:
+     * { name: string, avatarSrc: string, id: string }
+     *
+     * When null, it does not add the plugin.
+     */
+    mentionSuggestion: {
+      type: Object,
+      default: null
+    },
+    /**
+     * suggestion object containing the items query function.
+     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
+     *
+     * The only required key is the items function which is used to query the channels for suggestion.
+     * items({ query }) => { return [ChannelObject]; }
+     * ChannelObject format:
+     * { name: string, id: string, locked: boolean }
+     *
+     * When null, it does not add the plugin. Setting locked to true will display a lock rather than hash.
+     */
+    channelSuggestion: {
+      type: Object,
+      default: null
+    },
+    /**
+     * suggestion object containing the items query function.
+     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
+     *
+     * The only required key is the items function which is used to query the slash commands for suggestion.
+     * items({ query }) => { return [SlashCommandObject]; }
+     * SlashCommandObject format:
+     * { command: string, description: string, parametersExample?: string }
+     * The "parametersExample" parameter is optional, and describes an example
+     * of the parameters that command can take.
+     *
+     * When null, it does not add the plugin.
+     */
+    slashCommandSuggestion: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Whether the input allows for block quote.
+     */
+    allowBlockquote: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for bold to be introduced in the text.
+     */
+    allowBold: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for bullet list to be introduced in the text.
+    */
+    allowBulletList: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for italic to be introduced in the text.
+     */
+    allowItalic: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for strike to be introduced in the text.
+     */
+    allowStrike: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for underline to be introduced in the text.
+     */
+    allowUnderline: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows codeblock to be introduced in the text.
+     */
+    allowCodeblock: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: [
+    /**
+     * Fires when send button is clicked
+     *
+     * @event submit
+     * @type {String}
+     */
+    "submit",
+    /**
+     * Fires when media is selected from image button
+     *
+     * @event select-media
+     * @type {Array}
+     */
+    "select-media",
+    /**
+     * Fires when media is dropped into the message input
+     *
+     * @event add-media
+     * @type {Array}
+     */
+    "add-media",
+    /**
+     * Fires when media is pasted into the message input
+     *
+     * @event paste-media
+     * @type {Array}
+     */
+    "paste-media",
+    /**
+     * Fires when cancel button is pressed (only on edit mode)
+     *
+     * @event cancel
+     * @type {Boolean}
+     */
+    "cancel",
+    /**
+     * Fires when skin tone is selected from the emoji picker
+     *
+     * @event skin-tone
+     * @type {String}
+     */
+    "skin-tone",
+    /**
+     * Fires when emoji is selected from the emoji picker
+     *
+     * @event selected-emoji
+     * @type {String}
+     */
+    "selected-emoji",
+    /**
+     * Fires when a slash command is selected
+     *
+     * @event selected-command
+     * @type {String}
+     */
+    "selected-command",
+    /**
+     * Fires when meeting pill is closed
+     *
+     * @event meeting-pill-close
+     * @type {String}
+     */
+    "meeting-pill-close",
+    /**
+     * Event to sync the value with the parent
+     * @event update:modelValue
+     * @type {String|JSON}
+     */
+    "update:modelValue"
+  ],
+  data() {
+    return {
+      additionalExtensions: [meeting_pill],
+      internalInputValue: this.modelValue,
+      // internal input content
+      imagePickerFocus: false,
+      emojiPickerFocus: false,
+      emojiPickerOpened: false
+    };
+  },
+  computed: {
+    inputLength() {
+      return this.internalInputValue.length;
+    },
+    displayCharacterLimitWarning() {
+      return Boolean(this.showCharacterLimit) && this.showCharacterLimit.count - this.inputLength <= this.showCharacterLimit.warning;
+    },
+    characterLimitTooltipEnabled() {
+      return this.showCharacterLimit.message && this.showCharacterLimit.count - this.inputLength < 0;
+    },
+    isSendDisabled() {
+      return this.disableSend || this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count;
+    },
+    computedCloseButtonProps() {
+      return {
+        ariaLabel: "Close"
+      };
+    },
+    emojiPickerHovered() {
+      return this.emojiPickerFocus || this.emojiPickerOpened;
+    }
+  },
+  watch: {
+    modelValue(newValue) {
+      this.internalInputValue = newValue;
+    },
+    emojiPickerOpened(newValue) {
+      var _a;
+      if (!newValue) {
+        (_a = this.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
+      }
+    }
+  },
+  created() {
+    if (this.modelValue && this.outputFormat === "text") {
+      this.internalInputValue = this.modelValue.replace(/\n/g, "<br>");
+    }
+  },
+  methods: {
+    // Mousedown instead of click because it fires before the blur event.
+    onMousedown(e) {
+      const isWithinInput = this.$refs.richTextEditor.$el.querySelector(".tiptap").contains(e.target);
+      if (!isWithinInput) {
+        e.preventDefault();
+        this.$refs.richTextEditor.focusEditor();
+      }
+    },
+    onDrop(e) {
+      const dt = e.dataTransfer;
+      const files = Array.from(dt.files);
+      this.$emit("add-media", files);
+    },
+    onPaste(e) {
+      if (e.clipboardData.files.length) {
+        e.stopPropagation();
+        e.preventDefault();
+        const files = [...e.clipboardData.files];
+        this.$emit("paste-media", files);
+      }
+    },
+    onSkinTone(skinTone) {
+      this.$emit("skin-tone", skinTone);
+    },
+    onSelectEmoji(emoji) {
+      if (!emoji) {
+        return;
+      }
+      this.$refs.richTextEditor.editor.commands.insertContent({
+        type: "emoji",
+        attrs: {
+          code: emoji.shortname
+        }
+      });
+      this.$emit("selected-emoji", emoji);
+    },
+    onSelectImage() {
+      this.$refs.messageInputImageUpload.$refs.input.click();
+    },
+    onImageUpload() {
+      this.$emit("select-media", this.$refs.messageInputImageUpload.$refs.input.files);
+    },
+    toggleEmojiPicker() {
+      this.emojiPickerOpened = !this.emojiPickerOpened;
+    },
+    onSend() {
+      if (this.isSendDisabled) {
+        return;
+      }
+      this.$emit("submit", this.internalInputValue);
+    },
+    onCancel() {
+      this.$emit("cancel");
+    },
+    onInput(event) {
+      this.$emit("update:modelValue", event);
+    }
+  }
+};
+const _hoisted_1 = { class: "dt-message-input__bottom-section" };
+const _hoisted_2 = { class: "dt-message-input__bottom-section-left" };
+const _hoisted_3 = { class: "dt-message-input__bottom-section-right" };
+const _hoisted_4 = { class: "d-d-flex d-ai-center" };
+const _hoisted_5 = { key: 0 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _a;
+  const _component_dt_rich_text_editor = vue.resolveComponent("dt-rich-text-editor");
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_button = vue.resolveComponent("dt-button");
+  const _component_dt_input = vue.resolveComponent("dt-input");
+  const _component_dt_emoji_picker = vue.resolveComponent("dt-emoji-picker");
+  const _component_dt_popover = vue.resolveComponent("dt-popover");
+  const _component_dt_tooltip = vue.resolveComponent("dt-tooltip");
+  const _directive_dt_scrollbar = vue.resolveDirective("dt-scrollbar");
+  const _directive_dt_tooltip = vue.resolveDirective("dt-tooltip");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    "data-qa": "dt-message-input",
+    role: "presentation",
+    class: vue.normalizeClass(["dt-message-input"]),
+    onDragover: _cache[10] || (_cache[10] = vue.withModifiers(() => {
+    }, ["prevent"])),
+    onDrop: _cache[11] || (_cache[11] = vue.withModifiers((...args) => $options.onDrop && $options.onDrop(...args), ["prevent"])),
+    onPaste: _cache[12] || (_cache[12] = (...args) => $options.onPaste && $options.onPaste(...args)),
+    onMousedown: _cache[13] || (_cache[13] = (...args) => $options.onMousedown && $options.onMousedown(...args))
+  }, [
+    vue.renderSlot(_ctx.$slots, "top"),
+    vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+      class: "dt-message-input__editor-wrapper",
+      style: vue.normalizeStyle({ "max-height": $props.maxHeight })
+    }, [
+      vue.createVNode(_component_dt_rich_text_editor, vue.mergeProps({
+        ref: "richTextEditor",
+        modelValue: $data.internalInputValue,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.internalInputValue = $event),
+        "allow-blockquote": $props.allowBlockquote,
+        "allow-bold": $props.allowBold,
+        "allow-bullet-list": $props.allowBulletList,
+        "allow-codeblock": $props.allowCodeblock,
+        "allow-italic": $props.allowItalic,
+        "allow-strike": $props.allowStrike,
+        "allow-underline": $props.allowUnderline,
+        editable: $props.editable,
+        "input-aria-label": $props.inputAriaLabel,
+        "input-class": $props.inputClass,
+        "output-format": $props.outputFormat,
+        "auto-focus": $props.autoFocus,
+        link: $props.link,
+        placeholder: $props.placeholder,
+        "prevent-typing": $props.preventTyping,
+        "mention-suggestion": $props.mentionSuggestion,
+        "channel-suggestion": $props.channelSuggestion,
+        "slash-command-suggestion": $props.slashCommandSuggestion,
+        "additional-extensions": $data.additionalExtensions
+      }, _ctx.$attrs, { onInput: $options.onInput }), null, 16, ["modelValue", "allow-blockquote", "allow-bold", "allow-bullet-list", "allow-codeblock", "allow-italic", "allow-strike", "allow-underline", "editable", "input-aria-label", "input-class", "output-format", "auto-focus", "link", "placeholder", "prevent-typing", "mention-suggestion", "channel-suggestion", "slash-command-suggestion", "additional-extensions", "onInput"])
+    ], 4)), [
+      [_directive_dt_scrollbar]
+    ]),
+    vue.renderSlot(_ctx.$slots, "middle"),
+    vue.createElementVNode("section", _hoisted_1, [
+      vue.createElementVNode("div", _hoisted_2, [
+        $props.showImagePicker ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_dt_button, {
+          key: 0,
+          "data-qa": "dt-message-input-image-btn",
+          size: "sm",
+          circle: "",
+          kind: $data.imagePickerFocus ? "default" : "muted",
+          importance: "clear",
+          "aria-label": $props.showImagePicker.ariaLabel,
+          onClick: $options.onSelectImage,
+          onMouseenter: _cache[1] || (_cache[1] = ($event) => $data.imagePickerFocus = true),
+          onMouseleave: _cache[2] || (_cache[2] = ($event) => $data.imagePickerFocus = false),
+          onFocus: _cache[3] || (_cache[3] = ($event) => $data.imagePickerFocus = true),
+          onBlur: _cache[4] || (_cache[4] = ($event) => $data.imagePickerFocus = false)
+        }, {
+          icon: vue.withCtx(() => [
+            vue.createVNode(_component_dt_icon, {
+              name: "image",
+              size: "300"
+            })
+          ]),
+          _: 1
+        }, 8, ["kind", "aria-label", "onClick"])), [
+          [_directive_dt_tooltip, (_a = $props.showImagePicker) == null ? void 0 : _a.tooltipLabel, "top-start"]
+        ]) : vue.createCommentVNode("", true),
+        vue.createVNode(_component_dt_input, {
+          ref: "messageInputImageUpload",
+          "data-qa": "dt-message-input-image-input",
+          accept: "image/*, video/*",
+          type: "file",
+          class: "dt-message-input__image-input",
+          multiple: "",
+          hidden: "",
+          onInput: $options.onImageUpload
+        }, null, 8, ["onInput"]),
+        $props.showEmojiPicker ? (vue.openBlock(), vue.createBlock(_component_dt_popover, {
+          key: 1,
+          open: $data.emojiPickerOpened,
+          "onUpdate:open": _cache[9] || (_cache[9] = ($event) => $data.emojiPickerOpened = $event),
+          "data-qa": "dt-message-input-emoji-picker-popover",
+          "initial-focus-element": "#searchInput",
+          padding: "none"
+        }, {
+          anchor: vue.withCtx(({ attrs }) => [
+            vue.withDirectives((vue.openBlock(), vue.createBlock(_component_dt_button, vue.mergeProps(attrs, {
+              "data-qa": "dt-message-input-emoji-picker-btn",
+              size: "sm",
+              circle: "",
+              kind: $options.emojiPickerHovered ? "default" : "muted",
+              importance: "clear",
+              "aria-label": $props.emojiButtonAriaLabel,
+              onClick: $options.toggleEmojiPicker,
+              onMouseenter: _cache[5] || (_cache[5] = ($event) => $data.emojiPickerFocus = true),
+              onMouseleave: _cache[6] || (_cache[6] = ($event) => $data.emojiPickerFocus = false),
+              onFocus: _cache[7] || (_cache[7] = ($event) => $data.emojiPickerFocus = true),
+              onBlur: _cache[8] || (_cache[8] = ($event) => $data.emojiPickerFocus = false)
+            }), {
+              icon: vue.withCtx(() => [
+                vue.createVNode(_component_dt_icon, {
+                  name: !$options.emojiPickerHovered ? "satisfied" : "very-satisfied",
+                  size: "300"
+                }, null, 8, ["name"])
+              ]),
+              _: 2
+            }, 1040, ["kind", "aria-label", "onClick"])), [
+              [_directive_dt_tooltip, $props.emojiTooltipMessage]
+            ])
+          ]),
+          content: vue.withCtx(({ close }) => [
+            vue.createVNode(_component_dt_emoji_picker, vue.mergeProps($props.emojiPickerProps, {
+              onSkinTone: $options.onSkinTone,
+              onSelectedEmoji: (emoji) => {
+                close();
+                $options.onSelectEmoji(emoji);
+              }
+            }), null, 16, ["onSkinTone", "onSelectedEmoji"])
+          ]),
+          _: 1
+        }, 8, ["open"])) : vue.createCommentVNode("", true),
+        vue.renderSlot(_ctx.$slots, "emojiGiphyPicker")
+      ]),
+      vue.createElementVNode("div", _hoisted_3, [
+        vue.createElementVNode("div", _hoisted_4, [
+          vue.renderSlot(_ctx.$slots, "smsCount")
+        ]),
+        Boolean($props.showCharacterLimit) ? (vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
+          key: 0,
+          class: "dt-message-input__remaining-char-tooltip",
+          placement: "top-end",
+          enabled: $options.characterLimitTooltipEnabled,
+          message: $props.showCharacterLimit.message,
+          offset: [10, 8]
+        }, {
+          anchor: vue.withCtx(() => [
+            vue.withDirectives(vue.createElementVNode("p", {
+              class: "dt-message-input__remaining-char",
+              "data-qa": "dt-message-input-character-limit"
+            }, vue.toDisplayString($props.showCharacterLimit.count - $options.inputLength), 513), [
+              [vue.vShow, $options.displayCharacterLimitWarning]
+            ])
+          ]),
+          _: 1
+        }, 8, ["enabled", "message"])) : vue.createCommentVNode("", true),
+        $props.showCancel ? (vue.openBlock(), vue.createBlock(_component_dt_button, {
+          key: 1,
+          "data-qa": "dt-message-input-cancel-button",
+          class: "dt-message-input__cancel-button",
+          size: "sm",
+          kind: "muted",
+          importance: "clear",
+          "aria-label": $props.showCancel.ariaLabel,
+          onClick: $options.onCancel
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("p", null, vue.toDisplayString($props.showCancel.text), 1)
+          ]),
+          _: 1
+        }, 8, ["aria-label", "onClick"])) : vue.createCommentVNode("", true),
+        vue.renderSlot(_ctx.$slots, "sendButton", {}, () => {
+          var _a2;
+          return [
+            $props.showSend ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_dt_button, {
+              key: 0,
+              "data-qa": "dt-message-input-send-btn",
+              size: "sm",
+              kind: "default",
+              importance: "primary",
+              class: vue.normalizeClass([
+                {
+                  "dt-message-input__send-button--disabled": $options.isSendDisabled,
+                  "d-btn--circle": $props.showSend.icon
+                }
+              ]),
+              "aria-label": $props.showSend.ariaLabel,
+              "aria-disabled": $options.isSendDisabled,
+              onClick: $options.onSend
+            }, vue.createSlots({
+              default: vue.withCtx(() => [
+                $props.showSend.text ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_5, vue.toDisplayString($props.showSend.text), 1)) : vue.createCommentVNode("", true)
+              ]),
+              _: 2
+            }, [
+              $props.showSend.icon ? {
+                name: "icon",
+                fn: vue.withCtx(() => [
+                  vue.createVNode(_component_dt_icon, {
+                    name: $props.showSend.icon,
+                    size: "300"
+                  }, null, 8, ["name"])
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["class", "aria-label", "aria-disabled", "onClick"])), [
+              [_directive_dt_tooltip, (_a2 = $props.showSend) == null ? void 0 : _a2.tooltipLabel, "top-end"]
+            ]) : vue.createCommentVNode("", true)
+          ];
+        })
+      ])
+    ])
+  ], 32);
+}
+const message_input = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = message_input;
+//# sourceMappingURL=message_input.vue.cjs.map