@dialpad/dialtone 9.65.0 → 9.66.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-QYpmdE0R.js");
+require("../chunks/icon_constants-bvhFNOPu.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("../chunks/link_constants-x8NwdqmA.js");
-require("../chunks/tab-qc3f42Yp.js");
+require("../chunks/tab-X7IvNGTl.js");
 require("@dialpad/dialtone-emojis");
-require("../chunks/input-ttnte8zB.js");
+require("../chunks/input-dLLo3Wtg.js");
 require("../common/validators.cjs");
 require("./validation-messages.cjs");
-require("../chunks/popover_constants-XnGWXaxX.js");
+require("../chunks/popover_constants-h9MD6WUt.js");
 require("tippy.js");
-require("../chunks/modal-VgxXAQFP.js");
-require("../chunks/sr_only_close_button-xGrHFjwA.js");
+require("../chunks/modal-OaWxzqNt.js");
+require("../chunks/sr_only_close_button-gKr0Vlbz.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-lu2o2f4r.js");
+require("../chunks/index-fEp0B-5Z.js");
 require("./skeleton.cjs");
 require("@tiptap/pm/state");
 require("@tiptap/suggestion");
@@ -76,52 +76,44 @@ 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: ""
+  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
       }, {
-        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)
-        ]),
+        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
+    })]),
     _: 1
   });
 }
@@ -142,16 +134,18 @@ 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)];
   }
 });
@@ -283,13 +277,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);
       }
     },
     /**
@@ -312,25 +300,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.
@@ -544,13 +543,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);
@@ -601,11 +602,21 @@ 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");
@@ -621,209 +632,160 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "dt-message-input",
     role: "presentation",
     class: vue.normalizeClass(["dt-message-input"]),
-    onDragEnter: _cache[10] || (_cache[10] = (...args) => $options.onDrag && $options.onDrag(...args)),
-    onDragOver: _cache[11] || (_cache[11] = (...args) => $options.onDrag && $options.onDrag(...args)),
-    onDrop: _cache[12] || (_cache[12] = (...args) => $options.onDrop && $options.onDrop(...args)),
-    onPaste: _cache[13] || (_cache[13] = (...args) => $options.onPaste && $options.onPaste(...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, {
-        onFocus: _ctx.onFocus,
-        onBlur: _ctx.onBlur,
-        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", "onFocus", "onBlur", "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);
+    onDragover: _cache[10] || (_cache[10] = vue.withModifiers(() => {
+    }, ["prevent"])),
+    onDrop: _cache[11] || (_cache[11] = vue.withModifiers((...args) => $options.onDrop && $options.onDrop(...args), ["prevent"])),
+    onPaste: _cache[12] || (_cache[12] = (...args) => $options.onPaste && $options.onPaste(...args)),
+    onMousedown: _cache[13] || (_cache[13] = (...args) => $options.onMousedown && $options.onMousedown(...args))
+  }, [vue.renderSlot(_ctx.$slots, "top"), vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+    class: "dt-message-input__editor-wrapper",
+    style: vue.normalizeStyle({
+      "max-height": $props.maxHeight
+    })
+  }, [vue.createVNode(_component_dt_rich_text_editor, vue.mergeProps({
+    ref: "richTextEditor",
+    modelValue: $data.internalInputValue,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.internalInputValue = $event),
+    "allow-blockquote": $props.allowBlockquote,
+    "allow-bold": $props.allowBold,
+    "allow-bullet-list": $props.allowBulletList,
+    "allow-codeblock": $props.allowCodeblock,
+    "allow-italic": $props.allowItalic,
+    "allow-strike": $props.allowStrike,
+    "allow-underline": $props.allowUnderline,
+    editable: $props.editable,
+    "input-aria-label": $props.inputAriaLabel,
+    "input-class": $props.inputClass,
+    "output-format": $props.outputFormat,
+    "auto-focus": $props.autoFocus,
+    link: $props.link,
+    placeholder: $props.placeholder,
+    "prevent-typing": $props.preventTyping,
+    "mention-suggestion": $props.mentionSuggestion,
+    "channel-suggestion": $props.channelSuggestion,
+    "slash-command-suggestion": $props.slashCommandSuggestion,
+    "additional-extensions": $data.additionalExtensions
+  }, _ctx.$attrs, {
+    onInput: $options.onInput
+  }), null, 16, ["modelValue", "allow-blockquote", "allow-bold", "allow-bullet-list", "allow-codeblock", "allow-italic", "allow-strike", "allow-underline", "editable", "input-aria-label", "input-class", "output-format", "auto-focus", "link", "placeholder", "prevent-typing", "mention-suggestion", "channel-suggestion", "slash-command-suggestion", "additional-extensions", "onInput"])], 4)), [[_directive_dt_scrollbar]]), vue.renderSlot(_ctx.$slots, "middle"), vue.createElementVNode("section", _hoisted_1, [vue.createElementVNode("div", _hoisted_2, [$props.showImagePicker ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_dt_button, {
+    key: 0,
+    "data-qa": "dt-message-input-image-btn",
+    size: "sm",
+    circle: "",
+    kind: $data.imagePickerFocus ? "default" : "muted",
+    importance: "clear",
+    "aria-label": $props.showImagePicker.ariaLabel,
+    onClick: $options.onSelectImage,
+    onMouseenter: _cache[1] || (_cache[1] = ($event) => $data.imagePickerFocus = true),
+    onMouseleave: _cache[2] || (_cache[2] = ($event) => $data.imagePickerFocus = false),
+    onFocus: _cache[3] || (_cache[3] = ($event) => $data.imagePickerFocus = true),
+    onBlur: _cache[4] || (_cache[4] = ($event) => $data.imagePickerFocus = false)
+  }, {
+    icon: vue.withCtx(() => [vue.createVNode(_component_dt_icon, {
+      name: "image",
+      size: "300"
+    })]),
+    _: 1
+  }, 8, ["kind", "aria-label", "onClick"])), [[_directive_dt_tooltip, (_a = $props.showImagePicker) == null ? void 0 : _a.tooltipLabel, "top-start"]]) : vue.createCommentVNode("", true), vue.createVNode(_component_dt_input, {
+    ref: "messageInputImageUpload",
+    "data-qa": "dt-message-input-image-input",
+    accept: "image/*, video/*",
+    type: "file",
+    class: "dt-message-input__image-input",
+    multiple: "",
+    hidden: "",
+    onInput: $options.onImageUpload
+  }, null, 8, ["onInput"]), $props.showEmojiPicker ? (vue.openBlock(), vue.createBlock(_component_dt_popover, {
+    key: 1,
+    open: $data.emojiPickerOpened,
+    "onUpdate:open": _cache[9] || (_cache[9] = ($event) => $data.emojiPickerOpened = $event),
+    "data-qa": "dt-message-input-emoji-picker-popover",
+    "initial-focus-element": "#searchInput",
+    padding: "none"
+  }, {
+    anchor: vue.withCtx(({
+      attrs
+    }) => [vue.withDirectives((vue.openBlock(), vue.createBlock(_component_dt_button, vue.mergeProps(attrs, {
+      "data-qa": "dt-message-input-emoji-picker-btn",
+      size: "sm",
+      circle: "",
+      kind: $options.emojiPickerHovered ? "default" : "muted",
+      importance: "clear",
+      "aria-label": $props.emojiButtonAriaLabel,
+      onClick: $options.toggleEmojiPicker,
+      onMouseenter: _cache[5] || (_cache[5] = ($event) => $data.emojiPickerFocus = true),
+      onMouseleave: _cache[6] || (_cache[6] = ($event) => $data.emojiPickerFocus = false),
+      onFocus: _cache[7] || (_cache[7] = ($event) => $data.emojiPickerFocus = true),
+      onBlur: _cache[8] || (_cache[8] = ($event) => $data.emojiPickerFocus = false)
+    }), {
+      icon: vue.withCtx(() => [vue.createVNode(_component_dt_icon, {
+        name: !$options.emojiPickerHovered ? "satisfied" : "very-satisfied",
+        size: "300"
+      }, null, 8, ["name"])]),
+      _: 2
+    }, 1040, ["kind", "aria-label", "onClick"])), [[_directive_dt_tooltip, $props.emojiTooltipMessage]])]),
+    content: vue.withCtx(({
+      close
+    }) => [vue.createVNode(_component_dt_emoji_picker, vue.mergeProps($props.emojiPickerProps, {
+      onSkinTone: $options.onSkinTone,
+      onSelectedEmoji: (emoji) => {
+        close();
+        $options.onSelectEmoji(emoji);
+      }
+    }), null, 16, ["onSkinTone", "onSelectedEmoji"])]),
+    _: 1
+  }, 8, ["open"])) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "emojiGiphyPicker")]), vue.createElementVNode("div", _hoisted_3, [vue.createElementVNode("div", _hoisted_4, [vue.renderSlot(_ctx.$slots, "smsCount")]), Boolean($props.showCharacterLimit) ? (vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
+    key: 0,
+    class: "dt-message-input__remaining-char-tooltip",
+    placement: "top-end",
+    enabled: $options.characterLimitTooltipEnabled,
+    message: $props.showCharacterLimit.message,
+    offset: [10, 8]
+  }, {
+    anchor: vue.withCtx(() => [vue.withDirectives(vue.createElementVNode("p", {
+      class: "dt-message-input__remaining-char",
+      "data-qa": "dt-message-input-character-limit"
+    }, vue.toDisplayString($props.showCharacterLimit.count - $options.inputLength), 513), [[vue.vShow, $options.displayCharacterLimitWarning]])]),
+    _: 1
+  }, 8, ["enabled", "message"])) : vue.createCommentVNode("", true), $props.showCancel ? (vue.openBlock(), vue.createBlock(_component_dt_button, {
+    key: 1,
+    "data-qa": "dt-message-input-cancel-button",
+    class: "dt-message-input__cancel-button",
+    size: "sm",
+    kind: "muted",
+    importance: "clear",
+    "aria-label": $props.showCancel.ariaLabel,
+    onClick: $options.onCancel
+  }, {
+    default: vue.withCtx(() => [vue.createElementVNode("p", null, vue.toDisplayString($props.showCancel.text), 1)]),
+    _: 1
+  }, 8, ["aria-label", "onClick"])) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "sendButton", {}, () => {
+    var _a2;
+    return [$props.showSend ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_dt_button, {
+      key: 0,
+      "data-qa": "dt-message-input-send-btn",
+      size: "sm",
+      kind: "default",
+      importance: "primary",
+      class: vue.normalizeClass([{
+        "dt-message-input__send-button--disabled": $options.isSendDisabled,
+        "d-btn--circle": $props.showSend.icon
+      }]),
+      "aria-label": $props.showSend.ariaLabel,
+      "aria-disabled": $options.isSendDisabled,
+      onClick: $options.onSend
+    }, vue.createSlots({
+      default: vue.withCtx(() => [$props.showSend.text ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_5, vue.toDisplayString($props.showSend.text), 1)) : vue.createCommentVNode("", true)]),
+      _: 2
+    }, [$props.showSend.icon ? {
+      name: "icon",
+      fn: vue.withCtx(() => [vue.createVNode(_component_dt_icon, {
+        name: $props.showSend.icon,
+        size: "300"
+      }, null, 8, ["name"])]),
+      key: "0"
+    } : void 0]), 1032, ["class", "aria-label", "aria-disabled", "onClick"])), [[_directive_dt_tooltip, (_a2 = $props.showSend) == null ? void 0 : _a2.tooltipLabel, "top-end"]]) : vue.createCommentVNode("", true)];
+  })])])], 32);
 }
 const message_input = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtRecipeMessageInput = message_input;