@dialpad/dialtone 9.66.0 → 9.67.0

package/dist/vue3/lib/message-input.cjs

@@ -15,18 +15,18 @@ const lib_tooltip = require("./tooltip.cjs");
 require("../common/utils.cjs");
 require("../common/constants.cjs");
 require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("../chunks/link_constants-x8NwdqmA.js");
-require("../chunks/tab-X7IvNGTl.js");
+require("../chunks/tab-qc3f42Yp.js");
 require("@dialpad/dialtone-emojis");
-require("../chunks/input-dLLo3Wtg.js");
+require("../chunks/input-ttnte8zB.js");
 require("../common/validators.cjs");
 require("./validation-messages.cjs");
-require("../chunks/popover_constants-h9MD6WUt.js");
+require("../chunks/popover_constants-XnGWXaxX.js");
 require("tippy.js");
-require("../chunks/modal-OaWxzqNt.js");
-require("../chunks/sr_only_close_button-gKr0Vlbz.js");
+require("../chunks/modal-VgxXAQFP.js");
+require("../chunks/sr_only_close_button-xGrHFjwA.js");
 require("./lazy-show.cjs");
 require("@tiptap/extension-blockquote");
 require("@tiptap/extension-code-block");
@@ -46,7 +46,7 @@ require("@tiptap/extension-text");
 require("@tiptap/extension-text-align");
 require("@tiptap/extension-history");
 require("./emoji.cjs");
-require("../chunks/index-fEp0B-5Z.js");
+require("../chunks/index-lu2o2f4r.js");
 require("./skeleton.cjs");
 require("@tiptap/pm/state");
 require("@tiptap/suggestion");
@@ -76,44 +76,52 @@ const _sfc_main$1 = {
     }
   }
 };
-const _hoisted_1$1 = {
-  class: "dt-message-input-meeting-pill__icon"
-};
-const _hoisted_2$1 = {
-  class: "dt-message-input-meeting-pill__close"
-};
+const _hoisted_1$1 = { class: "dt-message-input-meeting-pill__icon" };
+const _hoisted_2$1 = { class: "dt-message-input-meeting-pill__close" };
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = vue.resolveComponent("dt-icon");
   const _component_dt_button = vue.resolveComponent("dt-button");
   const _component_dt_item_layout = vue.resolveComponent("dt-item-layout");
   const _component_node_view_wrapper = vue.resolveComponent("node-view-wrapper");
-  return vue.openBlock(), vue.createBlock(_component_node_view_wrapper, {
-    class: "dt-message-input-meeting-pill"
-  }, {
-    default: vue.withCtx(() => [vue.createVNode(_component_dt_item_layout, {
-      class: "dt-message-input-meeting-pill__layout",
-      unstyled: ""
-    }, {
-      left: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$1, [vue.createVNode(_component_dt_icon, {
-        name: "video",
-        size: "400"
-      })])]),
-      right: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_2$1, [vue.createVNode(_component_dt_button, {
-        circle: "",
-        "aria-label": _ctx.node.attrs["close-button-aria-label"],
-        size: "xs",
-        importance: "clear",
-        onClick: $options.close
+  return vue.openBlock(), vue.createBlock(_component_node_view_wrapper, { class: "dt-message-input-meeting-pill" }, {
+    default: vue.withCtx(() => [
+      vue.createVNode(_component_dt_item_layout, {
+        class: "dt-message-input-meeting-pill__layout",
+        unstyled: ""
       }, {
-        icon: vue.withCtx(() => [vue.createVNode(_component_dt_icon, {
-          name: "close",
-          size: "300"
-        })]),
+        left: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_1$1, [
+            vue.createVNode(_component_dt_icon, {
+              name: "video",
+              size: "400"
+            })
+          ])
+        ]),
+        right: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_2$1, [
+            vue.createVNode(_component_dt_button, {
+              circle: "",
+              "aria-label": _ctx.node.attrs["close-button-aria-label"],
+              size: "xs",
+              importance: "clear",
+              onClick: $options.close
+            }, {
+              icon: vue.withCtx(() => [
+                vue.createVNode(_component_dt_icon, {
+                  name: "close",
+                  size: "300"
+                })
+              ]),
+              _: 1
+            }, 8, ["aria-label", "onClick"])
+          ])
+        ]),
+        default: vue.withCtx(() => [
+          vue.createTextVNode(" " + vue.toDisplayString(_ctx.node.attrs.text) + " ", 1)
+        ]),
         _: 1
-      }, 8, ["aria-label", "onClick"])])]),
-      default: vue.withCtx(() => [vue.createTextVNode(" " + vue.toDisplayString(_ctx.node.attrs.text) + " ", 1)]),
-      _: 1
-    })]),
+      })
+    ]),
     _: 1
   });
 }
@@ -134,18 +142,16 @@ const meetingPill = core.Node.create({
     };
   },
   parseHTML() {
-    return [{
-      tag: "meeting-pill"
-    }];
+    return [
+      {
+        tag: "meeting-pill"
+      }
+    ];
   },
-  renderText({
-    node
-  }) {
+  renderText({ node }) {
     return "/dpm";
   },
-  renderHTML({
-    HTMLAttributes
-  }) {
+  renderHTML({ HTMLAttributes }) {
     return ["meeting-pill", core.mergeAttributes(HTMLAttributes)];
   }
 });
@@ -277,7 +283,13 @@ 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);
       }
     },
     /**
@@ -300,36 +312,25 @@ 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.
@@ -602,21 +603,11 @@ const _sfc_main = {
     }
   }
 };
-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
-};
+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");
@@ -637,155 +628,201 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     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);
+  }, [
+    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._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtRecipeMessageInput = message_input;