@dialpad/dialtone-vue 2.152.0 → 2.153.0

package/dist/lib/message-input.js

@@ -10,22 +10,22 @@ import { DtPopover } from "./popover.js";
 import { DtRichTextEditor, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES, RICH_TEXT_EDITOR_OUTPUT_FORMATS } from "./rich-text-editor.js";
 import { DtTooltip } from "./tooltip.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-TdxqLsS2.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "vue";
 import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/tab-V4cb44Ry.js";
+import "../chunks/tab-muPOS7JE.js";
 import "@dialpad/dialtone-emojis";
 import "../common/constants.js";
 import "../common/utils.js";
-import "../chunks/input-6kbd8Pju.js";
+import "../chunks/input-PhJeBN6r.js";
 import "../common/validators.js";
 import "./validation-messages.js";
-import "../chunks/popover_constants-WsOUIY-m.js";
+import "../chunks/popover_constants-6YkPPbnk.js";
 import "tippy.js";
 import "@linusborg/vue-simple-portal";
-import "../chunks/modal-XOr4kiNZ.js";
-import "../chunks/sr_only_close_button-81bHIpPu.js";
+import "../chunks/modal-8X6poIZW.js";
+import "../chunks/sr_only_close_button-IjMVfBDE.js";
 import "./lazy-show.js";
 import "@tiptap/extension-blockquote";
 import "@tiptap/extension-code-block";
@@ -45,7 +45,7 @@ import "@tiptap/extension-text";
 import "@tiptap/extension-text-align";
 import "@tiptap/extension-history";
 import "./emoji.js";
-import "../chunks/index-ODod4Oj_.js";
+import "../chunks/index-i65YVk-U.js";
 import "emoji-toolkit/emoji_strategy.json";
 import "./skeleton.js";
 import "@tiptap/pm/state";
@@ -78,25 +78,61 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("node-view-wrapper", { staticClass: "dt-message-input-meeting-pill" }, [_c("dt-item-layout", { staticClass: "dt-message-input-meeting-pill__layout", attrs: { "unstyled": "" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
-    return [_c("div", { staticClass: "dt-message-input-meeting-pill__icon" }, [_c("dt-icon", { attrs: { "name": "video", "size": "400" } })], 1)];
-  }, proxy: true }, { key: "right", fn: function() {
-    return [_c("div", { staticClass: "dt-message-input-meeting-pill__close" }, [_c("dt-button", { attrs: { "circle": "", "aria-label": _vm.node.attrs["close-button-aria-label"], "size": "xs", "importance": "clear" }, on: { "click": _vm.close }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("dt-icon", { attrs: { "name": "close", "size": "300" } })];
-    }, proxy: true }]) })], 1)];
-  }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.node.attrs.text) + " ")])], 1);
+  return _c("node-view-wrapper", {
+    staticClass: "dt-message-input-meeting-pill"
+  }, [_c("dt-item-layout", {
+    staticClass: "dt-message-input-meeting-pill__layout",
+    attrs: {
+      "unstyled": ""
+    },
+    scopedSlots: _vm._u([{
+      key: "left",
+      fn: function() {
+        return [_c("div", {
+          staticClass: "dt-message-input-meeting-pill__icon"
+        }, [_c("dt-icon", {
+          attrs: {
+            "name": "video",
+            "size": "400"
+          }
+        })], 1)];
+      },
+      proxy: true
+    }, {
+      key: "right",
+      fn: function() {
+        return [_c("div", {
+          staticClass: "dt-message-input-meeting-pill__close"
+        }, [_c("dt-button", {
+          attrs: {
+            "circle": "",
+            "aria-label": _vm.node.attrs["close-button-aria-label"],
+            "size": "xs",
+            "importance": "clear"
+          },
+          on: {
+            "click": _vm.close
+          },
+          scopedSlots: _vm._u([{
+            key: "icon",
+            fn: function() {
+              return [_c("dt-icon", {
+                attrs: {
+                  "name": "close",
+                  "size": "300"
+                }
+              })];
+            },
+            proxy: true
+          }])
+        })], 1)];
+      },
+      proxy: true
+    }])
+  }, [_vm._v(" " + _vm._s(_vm.node.attrs.text) + " ")])], 1);
 };
 var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$1,
-  _sfc_render$1,
-  _sfc_staticRenderFns$1,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__$1 = /* @__PURE__ */ normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, null, null, null);
 const MeetingPill = __component__$1.exports;
 const meetingPill = Node.create({
   atom: true,
@@ -114,16 +150,18 @@ const meetingPill = Node.create({
     };
   },
   parseHTML() {
-    return [
-      {
-        tag: "meeting-pill"
-      }
-    ];
+    return [{
+      tag: "meeting-pill"
+    }];
   },
-  renderText({ node }) {
+  renderText({
+    node
+  }) {
     return "/dpm";
   },
-  renderHTML({ HTMLAttributes }) {
+  renderHTML({
+    HTMLAttributes
+  }) {
     return ["meeting-pill", mergeAttributes(HTMLAttributes)];
   }
 });
@@ -255,13 +293,7 @@ const _sfc_main = {
       type: Object,
       default: () => ({}),
       validate(emojiPickerProps) {
-        return [
-          "searchNoResultsLabel",
-          "searchResultsLabel",
-          "searchPlaceholderLabel",
-          "skinSelectorButtonTooltipLabel",
-          "tabSetLabels"
-        ].every((prop) => emojiPickerProps[prop] != null);
+        return ["searchNoResultsLabel", "searchResultsLabel", "searchPlaceholderLabel", "skinSelectorButtonTooltipLabel", "tabSetLabels"].every((prop) => emojiPickerProps[prop] != null);
       }
     },
     /**
@@ -284,25 +316,36 @@ const _sfc_main = {
      */
     showCharacterLimit: {
       type: [Boolean, Object],
-      default: () => ({ count: 1500, warning: 500, message: "" })
+      default: () => ({
+        count: 1500,
+        warning: 500,
+        message: ""
+      })
     },
     showImagePicker: {
       type: [Boolean, Object],
-      default: () => ({ tooltipLabel: "Attach Image", ariaLabel: "image button" })
+      default: () => ({
+        tooltipLabel: "Attach Image",
+        ariaLabel: "image button"
+      })
     },
     /**
      * Send button defaults.
      */
     showSend: {
       type: [Boolean, Object],
-      default: () => ({ icon: "send" })
+      default: () => ({
+        icon: "send"
+      })
     },
     /**
      * Cancel button defaults.
      */
     showCancel: {
       type: [Boolean, Object],
-      default: () => ({ text: "Cancel" })
+      default: () => ({
+        text: "Cancel"
+      })
     },
     /**
      * suggestion object containing the items query function.
@@ -516,13 +559,15 @@ const _sfc_main = {
     }
   },
   methods: {
-    onDrag(e) {
-      e.stopPropagation();
-      e.preventDefault();
+    // 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) {
-      e.stopPropagation();
-      e.preventDefault();
       const dt = e.dataTransfer;
       const files = Array.from(dt.files);
       this.$emit("add-media", files);
@@ -576,62 +621,287 @@ const _sfc_main = {
 var _sfc_render = function render2() {
   var _a;
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { class: ["dt-message-input"], attrs: { "data-qa": "dt-message-input", "role": "presentation" }, on: { "drag-enter": _vm.onDrag, "drag-over": _vm.onDrag, "drop": _vm.onDrop, "paste": _vm.onPaste } }, [_vm._t("top"), _c("div", { directives: [{ name: "dt-scrollbar", rawName: "v-dt-scrollbar" }], staticClass: "dt-message-input__editor-wrapper", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._g(_vm._b({ ref: "richTextEditor", attrs: { "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": _vm.inputClass, "output-format": _vm.outputFormat, "auto-focus": _vm.autoFocus, "link": _vm.link, "placeholder": _vm.placeholder, "prevent-typing": _vm.preventTyping, "mention-suggestion": _vm.mentionSuggestion, "channel-suggestion": _vm.channelSuggestion, "slash-command-suggestion": _vm.slashCommandSuggestion, "allow-blockquote": _vm.allowBlockquote, "allow-bold": _vm.allowBold, "allow-bullet-list": _vm.allowBulletList, "allow-codeblock": _vm.allowCodeblock, "allow-italic": _vm.allowItalic, "allow-strike": _vm.allowStrike, "allow-underline": _vm.allowUnderline, "additional-extensions": _vm.additionalExtensions }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": _vm.onInput, "enter": _vm.onSend }, model: { value: _vm.internalInputValue, callback: function($$v) {
-    _vm.internalInputValue = $$v;
-  }, expression: "internalInputValue" } }, "dt-rich-text-editor", _vm.$attrs, false), _vm.$listeners))], 1), _vm._t("middle"), _c("section", { staticClass: "dt-message-input__bottom-section" }, [_c("div", { staticClass: "dt-message-input__bottom-section-left" }, [_vm.showImagePicker ? _c("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-start", value: (_a = _vm.showImagePicker) == null ? void 0 : _a.tooltipLabel, expression: "showImagePicker?.tooltipLabel", arg: "top-start" }], attrs: { "data-qa": "dt-message-input-image-btn", "size": "sm", "circle": "", "kind": _vm.imagePickerFocus ? "default" : "muted", "importance": "clear", "aria-label": _vm.showImagePicker.ariaLabel }, on: { "click": _vm.onSelectImage, "mouseenter": function($event) {
-    _vm.imagePickerFocus = true;
-  }, "mouseleave": function($event) {
-    _vm.imagePickerFocus = false;
-  }, "focus": function($event) {
-    _vm.imagePickerFocus = true;
-  }, "blur": function($event) {
-    _vm.imagePickerFocus = false;
-  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon", { attrs: { "name": "image", "size": "300" } })];
-  }, proxy: true }], null, false, 2561380377) }) : _vm._e(), _c("dt-input", { ref: "messageInputImageUpload", staticClass: "dt-message-input__image-input", attrs: { "data-qa": "dt-message-input-image-input", "accept": "image/*, video/*", "type": "file", "multiple": "", "hidden": "" }, on: { "input": _vm.onImageUpload } }), _vm.showEmojiPicker ? _c("dt-popover", { attrs: { "data-qa": "dt-message-input-emoji-picker-popover", "open": _vm.emojiPickerOpened, "initial-focus-element": "#searchInput", "padding": "none" }, on: { "update:open": function($event) {
-    _vm.emojiPickerOpened = $event;
-  } }, scopedSlots: _vm._u([{ key: "anchor", fn: function({ attrs }) {
-    return [_c("dt-button", _vm._b({ directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: _vm.emojiTooltipMessage, expression: "emojiTooltipMessage" }], attrs: { "data-qa": "dt-message-input-emoji-picker-btn", "size": "sm", "circle": "", "kind": _vm.emojiPickerHovered ? "default" : "muted", "importance": "clear", "aria-label": _vm.emojiButtonAriaLabel }, on: { "click": _vm.toggleEmojiPicker, "mouseenter": function($event) {
-      _vm.emojiPickerFocus = true;
-    }, "mouseleave": function($event) {
-      _vm.emojiPickerFocus = false;
-    }, "focus": function($event) {
-      _vm.emojiPickerFocus = true;
-    }, "blur": function($event) {
-      _vm.emojiPickerFocus = false;
-    } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("dt-icon", { attrs: { "name": !_vm.emojiPickerHovered ? "satisfied" : "very-satisfied", "size": "300" } })];
-    }, proxy: true }], null, true) }, "dt-button", attrs, false))];
-  } }, { key: "content", fn: function({ close }) {
-    return [_c("dt-emoji-picker", _vm._b({ on: { "skin-tone": _vm.onSkinTone, "selected-emoji": (emoji) => {
-      close();
-      _vm.onSelectEmoji(emoji);
-    } } }, "dt-emoji-picker", _vm.emojiPickerProps, false))];
-  } }], null, false, 3336317833) }) : _vm._e(), _vm._t("emojiGiphyPicker")], 2), _c("div", { staticClass: "dt-message-input__bottom-section-right" }, [_c("div", { staticClass: "d-d-flex d-ai-center" }, [_vm._t("smsCount")], 2), Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", { staticClass: "dt-message-input__remaining-char-tooltip", attrs: { "placement": "top-end", "enabled": _vm.characterLimitTooltipEnabled, "message": _vm.showCharacterLimit.message, "offset": [10, 8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
-    return [_c("p", { directives: [{ name: "show", rawName: "v-show", value: _vm.displayCharacterLimitWarning, expression: "displayCharacterLimitWarning" }], staticClass: "dt-message-input__remaining-char", attrs: { "data-qa": "dt-message-input-character-limit" } }, [_vm._v(" " + _vm._s(_vm.showCharacterLimit.count - _vm.inputLength) + " ")])];
-  }, proxy: true }], null, false, 3769616566) }) : _vm._e(), _vm.showCancel ? _c("dt-button", { staticClass: "dt-message-input__cancel-button", attrs: { "data-qa": "dt-message-input-cancel-button", "size": "sm", "kind": "muted", "importance": "clear", "aria-label": _vm.showCancel.ariaLabel }, on: { "click": _vm.onCancel } }, [_c("p", [_vm._v(_vm._s(_vm.showCancel.text))])]) : _vm._e(), _vm._t("sendButton", function() {
+  return _c("div", {
+    class: ["dt-message-input"],
+    attrs: {
+      "data-qa": "dt-message-input",
+      "role": "presentation"
+    },
+    on: {
+      "dragover": function($event) {
+        $event.preventDefault();
+      },
+      "drop": function($event) {
+        $event.preventDefault();
+        return _vm.onDrop.apply(null, arguments);
+      },
+      "paste": _vm.onPaste,
+      "mousedown": _vm.onMousedown
+    }
+  }, [_vm._t("top"), _c("div", {
+    directives: [{
+      name: "dt-scrollbar",
+      rawName: "v-dt-scrollbar"
+    }],
+    staticClass: "dt-message-input__editor-wrapper",
+    style: {
+      "max-height": _vm.maxHeight
+    }
+  }, [_c("dt-rich-text-editor", _vm._g(_vm._b({
+    ref: "richTextEditor",
+    attrs: {
+      "editable": _vm.editable,
+      "input-aria-label": _vm.inputAriaLabel,
+      "input-class": _vm.inputClass,
+      "output-format": _vm.outputFormat,
+      "auto-focus": _vm.autoFocus,
+      "link": _vm.link,
+      "placeholder": _vm.placeholder,
+      "prevent-typing": _vm.preventTyping,
+      "mention-suggestion": _vm.mentionSuggestion,
+      "channel-suggestion": _vm.channelSuggestion,
+      "slash-command-suggestion": _vm.slashCommandSuggestion,
+      "allow-blockquote": _vm.allowBlockquote,
+      "allow-bold": _vm.allowBold,
+      "allow-bullet-list": _vm.allowBulletList,
+      "allow-codeblock": _vm.allowCodeblock,
+      "allow-italic": _vm.allowItalic,
+      "allow-strike": _vm.allowStrike,
+      "allow-underline": _vm.allowUnderline,
+      "additional-extensions": _vm.additionalExtensions
+    },
+    on: {
+      "input": _vm.onInput,
+      "enter": _vm.onSend
+    },
+    model: {
+      value: _vm.internalInputValue,
+      callback: function($$v) {
+        _vm.internalInputValue = $$v;
+      },
+      expression: "internalInputValue"
+    }
+  }, "dt-rich-text-editor", _vm.$attrs, false), _vm.$listeners))], 1), _vm._t("middle"), _c("section", {
+    staticClass: "dt-message-input__bottom-section"
+  }, [_c("div", {
+    staticClass: "dt-message-input__bottom-section-left"
+  }, [_vm.showImagePicker ? _c("dt-button", {
+    directives: [{
+      name: "dt-tooltip",
+      rawName: "v-dt-tooltip:top-start",
+      value: (_a = _vm.showImagePicker) == null ? void 0 : _a.tooltipLabel,
+      expression: "showImagePicker?.tooltipLabel",
+      arg: "top-start"
+    }],
+    attrs: {
+      "data-qa": "dt-message-input-image-btn",
+      "size": "sm",
+      "circle": "",
+      "kind": _vm.imagePickerFocus ? "default" : "muted",
+      "importance": "clear",
+      "aria-label": _vm.showImagePicker.ariaLabel
+    },
+    on: {
+      "click": _vm.onSelectImage,
+      "mouseenter": function($event) {
+        _vm.imagePickerFocus = true;
+      },
+      "mouseleave": function($event) {
+        _vm.imagePickerFocus = false;
+      },
+      "focus": function($event) {
+        _vm.imagePickerFocus = true;
+      },
+      "blur": function($event) {
+        _vm.imagePickerFocus = false;
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "icon",
+      fn: function() {
+        return [_c("dt-icon", {
+          attrs: {
+            "name": "image",
+            "size": "300"
+          }
+        })];
+      },
+      proxy: true
+    }], null, false, 2561380377)
+  }) : _vm._e(), _c("dt-input", {
+    ref: "messageInputImageUpload",
+    staticClass: "dt-message-input__image-input",
+    attrs: {
+      "data-qa": "dt-message-input-image-input",
+      "accept": "image/*, video/*",
+      "type": "file",
+      "multiple": "",
+      "hidden": ""
+    },
+    on: {
+      "input": _vm.onImageUpload
+    }
+  }), _vm.showEmojiPicker ? _c("dt-popover", {
+    attrs: {
+      "data-qa": "dt-message-input-emoji-picker-popover",
+      "open": _vm.emojiPickerOpened,
+      "initial-focus-element": "#searchInput",
+      "padding": "none"
+    },
+    on: {
+      "update:open": function($event) {
+        _vm.emojiPickerOpened = $event;
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "anchor",
+      fn: function({
+        attrs
+      }) {
+        return [_c("dt-button", _vm._b({
+          directives: [{
+            name: "dt-tooltip",
+            rawName: "v-dt-tooltip",
+            value: _vm.emojiTooltipMessage,
+            expression: "emojiTooltipMessage"
+          }],
+          attrs: {
+            "data-qa": "dt-message-input-emoji-picker-btn",
+            "size": "sm",
+            "circle": "",
+            "kind": _vm.emojiPickerHovered ? "default" : "muted",
+            "importance": "clear",
+            "aria-label": _vm.emojiButtonAriaLabel
+          },
+          on: {
+            "click": _vm.toggleEmojiPicker,
+            "mouseenter": function($event) {
+              _vm.emojiPickerFocus = true;
+            },
+            "mouseleave": function($event) {
+              _vm.emojiPickerFocus = false;
+            },
+            "focus": function($event) {
+              _vm.emojiPickerFocus = true;
+            },
+            "blur": function($event) {
+              _vm.emojiPickerFocus = false;
+            }
+          },
+          scopedSlots: _vm._u([{
+            key: "icon",
+            fn: function() {
+              return [_c("dt-icon", {
+                attrs: {
+                  "name": !_vm.emojiPickerHovered ? "satisfied" : "very-satisfied",
+                  "size": "300"
+                }
+              })];
+            },
+            proxy: true
+          }], null, true)
+        }, "dt-button", attrs, false))];
+      }
+    }, {
+      key: "content",
+      fn: function({
+        close
+      }) {
+        return [_c("dt-emoji-picker", _vm._b({
+          on: {
+            "skin-tone": _vm.onSkinTone,
+            "selected-emoji": (emoji) => {
+              close();
+              _vm.onSelectEmoji(emoji);
+            }
+          }
+        }, "dt-emoji-picker", _vm.emojiPickerProps, false))];
+      }
+    }], null, false, 3336317833)
+  }) : _vm._e(), _vm._t("emojiGiphyPicker")], 2), _c("div", {
+    staticClass: "dt-message-input__bottom-section-right"
+  }, [_c("div", {
+    staticClass: "d-d-flex d-ai-center"
+  }, [_vm._t("smsCount")], 2), Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", {
+    staticClass: "dt-message-input__remaining-char-tooltip",
+    attrs: {
+      "placement": "top-end",
+      "enabled": _vm.characterLimitTooltipEnabled,
+      "message": _vm.showCharacterLimit.message,
+      "offset": [10, 8]
+    },
+    scopedSlots: _vm._u([{
+      key: "anchor",
+      fn: function() {
+        return [_c("p", {
+          directives: [{
+            name: "show",
+            rawName: "v-show",
+            value: _vm.displayCharacterLimitWarning,
+            expression: "displayCharacterLimitWarning"
+          }],
+          staticClass: "dt-message-input__remaining-char",
+          attrs: {
+            "data-qa": "dt-message-input-character-limit"
+          }
+        }, [_vm._v(" " + _vm._s(_vm.showCharacterLimit.count - _vm.inputLength) + " ")])];
+      },
+      proxy: true
+    }], null, false, 3769616566)
+  }) : _vm._e(), _vm.showCancel ? _c("dt-button", {
+    staticClass: "dt-message-input__cancel-button",
+    attrs: {
+      "data-qa": "dt-message-input-cancel-button",
+      "size": "sm",
+      "kind": "muted",
+      "importance": "clear",
+      "aria-label": _vm.showCancel.ariaLabel
+    },
+    on: {
+      "click": _vm.onCancel
+    }
+  }, [_c("p", [_vm._v(_vm._s(_vm.showCancel.text))])]) : _vm._e(), _vm._t("sendButton", function() {
     var _a2;
-    return [_vm.showSend ? _c("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-end", value: (_a2 = _vm.showSend) == null ? void 0 : _a2.tooltipLabel, expression: "showSend?.tooltipLabel", arg: "top-end" }], class: [
-      {
+    return [_vm.showSend ? _c("dt-button", {
+      directives: [{
+        name: "dt-tooltip",
+        rawName: "v-dt-tooltip:top-end",
+        value: (_a2 = _vm.showSend) == null ? void 0 : _a2.tooltipLabel,
+        expression: "showSend?.tooltipLabel",
+        arg: "top-end"
+      }],
+      class: [{
         "dt-message-input__send-button--disabled": _vm.isSendDisabled,
         "d-btn--circle": _vm.showSend.icon
-      }
-    ], attrs: { "data-qa": "dt-message-input-send-btn", "size": "sm", "kind": "default", "importance": "primary", "aria-label": _vm.showSend.ariaLabel, "aria-disabled": _vm.isSendDisabled }, on: { "click": _vm.onSend }, scopedSlots: _vm._u([_vm.showSend.icon ? { key: "icon", fn: function() {
-      return [_c("dt-icon", { attrs: { "name": _vm.showSend.icon, "size": "300" } })];
-    }, proxy: true } : null], null, true) }, [_vm.showSend.text ? [_c("p", [_vm._v(_vm._s(_vm.showSend.text))])] : _vm._e()], 2) : _vm._e()];
+      }],
+      attrs: {
+        "data-qa": "dt-message-input-send-btn",
+        "size": "sm",
+        "kind": "default",
+        "importance": "primary",
+        "aria-label": _vm.showSend.ariaLabel,
+        "aria-disabled": _vm.isSendDisabled
+      },
+      on: {
+        "click": _vm.onSend
+      },
+      scopedSlots: _vm._u([_vm.showSend.icon ? {
+        key: "icon",
+        fn: function() {
+          return [_c("dt-icon", {
+            attrs: {
+              "name": _vm.showSend.icon,
+              "size": "300"
+            }
+          })];
+        },
+        proxy: true
+      } : null], null, true)
+    }, [_vm.showSend.text ? [_c("p", [_vm._v(_vm._s(_vm.showSend.text))])] : _vm._e()], 2) : _vm._e()];
   })], 2)])], 2);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const message_input = __component__.exports;
 export {
   message_input as DtRecipeMessageInput