@dialpad/dialtone-vue 3.159.0 → 3.159.1

package/dist/packages/dialtone-vue3/recipes/conversation_view/message_input/message_input.vue.cjs

@@ -0,0 +1,730 @@
+"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