@dialpad/dialtone-vue 3.159.0 → 3.159.1

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

@@ -1,730 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const meeting_pill = require("./extensions/meeting_pill/meeting_pill.cjs");
-const vue3 = require("@dialpad/dialtone-icons/vue3");
-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 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 stack = require("../../../components/stack/stack.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.default,
-    DtEmojiPicker: emoji_picker.default,
-    DtInput: input.default,
-    DtPopover: popover.default,
-    DtRichTextEditor: rich_text_editor.default,
-    DtTooltip: tooltip.default,
-    DtStack: stack.default,
-    DtIconImage: vue3.DtIconImage,
-    DtIconVerySatisfied: vue3.DtIconVerySatisfied,
-    DtIconSatisfied: vue3.DtIconSatisfied,
-    DtIconSend: vue3.DtIconSend
-  },
-  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: () => ({})
-    },
-    /**
-     * 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.default],
-      internalInputValue: this.modelValue,
-      // internal input content
-      imagePickerFocus: false,
-      emojiPickerFocus: false,
-      emojiPickerOpened: false
-    };
-  },
-  computed: {
-    showSendIcon() {
-      return !this.showSend.text;
-    },
-    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;
-    },
-    sendIconSize() {
-      return "300";
-    }
-  },
-  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) {
-  const _component_dt_rich_text_editor = vue.resolveComponent("dt-rich-text-editor");
-  const _component_dt_icon_image = vue.resolveComponent("dt-icon-image");
-  const _component_dt_button = vue.resolveComponent("dt-button");
-  const _component_dt_input = vue.resolveComponent("dt-input");
-  const _component_dt_icon_very_satisfied = vue.resolveComponent("dt-icon-very-satisfied");
-  const _component_dt_icon_satisfied = vue.resolveComponent("dt-icon-satisfied");
-  const _component_dt_emoji_picker = vue.resolveComponent("dt-emoji-picker");
-  const _component_dt_popover = vue.resolveComponent("dt-popover");
-  const _component_dt_stack = vue.resolveComponent("dt-stack");
-  const _component_dt_tooltip = vue.resolveComponent("dt-tooltip");
-  const _component_dt_icon_send = vue.resolveComponent("dt-icon-send");
-  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, [
-        vue.createVNode(_component_dt_stack, {
-          gap: "200",
-          direction: "row"
-        }, {
-          default: vue.withCtx(() => {
-            var _a;
-            return [
-              $props.showImagePicker ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_dt_button, {
-                key: 0,
-                "data-qa": "dt-message-input-image-btn",
-                size: "sm",
-                class: "dt-message-input__button",
-                kind: "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_image, { size: "300" })
-                ]),
-                _: 1
-              }, 8, ["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",
-                    class: "dt-message-input__button",
-                    kind: "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(() => [
-                      $options.emojiPickerHovered ? (vue.openBlock(), vue.createBlock(_component_dt_icon_very_satisfied, {
-                        key: 0,
-                        size: "300"
-                      })) : (vue.openBlock(), vue.createBlock(_component_dt_icon_satisfied, {
-                        key: 1,
-                        size: "300"
-                      }))
-                    ]),
-                    _: 2
-                  }, 1040, ["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")
-            ];
-          }),
-          _: 3
-        })
-      ]),
-      vue.createElementVNode("div", _hoisted_3, [
-        vue.createVNode(_component_dt_stack, {
-          direction: "row",
-          gap: "300"
-        }, {
-          default: vue.withCtx(() => [
-            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__button 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 _a;
-              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__button dt-message-input__send-button",
-                    {
-                      "dt-message-input__send-button--disabled": $options.isSendDisabled,
-                      "d-btn--icon-only": $options.showSendIcon
-                    }
-                  ]),
-                  "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
-                }, [
-                  $options.showSendIcon ? {
-                    name: "icon",
-                    fn: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "sendIcon", { iconSize: $options.sendIconSize }, () => [
-                        vue.createVNode(_component_dt_icon_send, { size: $options.sendIconSize }, null, 8, ["size"])
-                      ])
-                    ]),
-                    key: "0"
-                  } : void 0
-                ]), 1032, ["class", "aria-label", "aria-disabled", "onClick"])), [
-                  [_directive_dt_tooltip, (_a = $props.showSend) == null ? void 0 : _a.tooltipLabel, "top-end"]
-                ]) : vue.createCommentVNode("", true)
-              ];
-            })
-          ]),
-          _: 3
-        })
-      ])
-    ])
-  ], 32);
-}
-const message_input = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
-exports.default = message_input;
-//# sourceMappingURL=message_input.vue.cjs.map