@dialpad/dialtone 9.65.0 → 9.66.0

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

@@ -1,6 +1,6 @@
 import { Node, mergeAttributes } from "@tiptap/core";
 import { NodeViewWrapper, nodeViewProps, VueNodeViewRenderer } from "@tiptap/vue-3";
-import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementVNode, createTextVNode, toDisplayString, resolveDirective, createElementBlock, normalizeClass, renderSlot, withDirectives, normalizeStyle, mergeProps, createCommentVNode, vShow, createSlots } from "vue";
+import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementVNode, createTextVNode, toDisplayString, resolveDirective, createElementBlock, normalizeClass, withModifiers, renderSlot, withDirectives, normalizeStyle, mergeProps, createCommentVNode, vShow, createSlots } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DtItemLayout } from "./item-layout.js";
 import { DtIcon } from "./icon.js";
@@ -13,18 +13,18 @@ import { DtTooltip } from "./tooltip.js";
 import "../common/utils.js";
 import "../common/constants.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-gIQj4mf7.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/tab-RTDgnD9-.js";
+import "../chunks/tab-aD6t0MNo.js";
 import "@dialpad/dialtone-emojis";
-import "../chunks/input-NmYDD5bn.js";
+import "../chunks/input-HIysg24t.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 "../chunks/modal-XOr4kiNZ.js";
-import "../chunks/sr_only_close_button-3EdsV-dH.js";
+import "../chunks/modal-8X6poIZW.js";
+import "../chunks/sr_only_close_button-Ji3Zlts6.js";
 import "./lazy-show.js";
 import "@tiptap/extension-blockquote";
 import "@tiptap/extension-code-block";
@@ -44,7 +44,7 @@ import "@tiptap/extension-text";
 import "@tiptap/extension-text-align";
 import "@tiptap/extension-history";
 import "./emoji.js";
-import "../chunks/index-GVD15GIB.js";
+import "../chunks/index-dfdrE-3M.js";
 import "./skeleton.js";
 import "@tiptap/pm/state";
 import "@tiptap/suggestion";
@@ -74,52 +74,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 = resolveComponent("dt-icon");
   const _component_dt_button = resolveComponent("dt-button");
   const _component_dt_item_layout = resolveComponent("dt-item-layout");
   const _component_node_view_wrapper = resolveComponent("node-view-wrapper");
-  return openBlock(), createBlock(_component_node_view_wrapper, { class: "dt-message-input-meeting-pill" }, {
-    default: withCtx(() => [
-      createVNode(_component_dt_item_layout, {
-        class: "dt-message-input-meeting-pill__layout",
-        unstyled: ""
+  return openBlock(), createBlock(_component_node_view_wrapper, {
+    class: "dt-message-input-meeting-pill"
+  }, {
+    default: withCtx(() => [createVNode(_component_dt_item_layout, {
+      class: "dt-message-input-meeting-pill__layout",
+      unstyled: ""
+    }, {
+      left: withCtx(() => [createElementVNode("div", _hoisted_1$1, [createVNode(_component_dt_icon, {
+        name: "video",
+        size: "400"
+      })])]),
+      right: withCtx(() => [createElementVNode("div", _hoisted_2$1, [createVNode(_component_dt_button, {
+        circle: "",
+        "aria-label": _ctx.node.attrs["close-button-aria-label"],
+        size: "xs",
+        importance: "clear",
+        onClick: $options.close
       }, {
-        left: withCtx(() => [
-          createElementVNode("div", _hoisted_1$1, [
-            createVNode(_component_dt_icon, {
-              name: "video",
-              size: "400"
-            })
-          ])
-        ]),
-        right: withCtx(() => [
-          createElementVNode("div", _hoisted_2$1, [
-            createVNode(_component_dt_button, {
-              circle: "",
-              "aria-label": _ctx.node.attrs["close-button-aria-label"],
-              size: "xs",
-              importance: "clear",
-              onClick: $options.close
-            }, {
-              icon: withCtx(() => [
-                createVNode(_component_dt_icon, {
-                  name: "close",
-                  size: "300"
-                })
-              ]),
-              _: 1
-            }, 8, ["aria-label", "onClick"])
-          ])
-        ]),
-        default: withCtx(() => [
-          createTextVNode(" " + toDisplayString(_ctx.node.attrs.text) + " ", 1)
-        ]),
+        icon: withCtx(() => [createVNode(_component_dt_icon, {
+          name: "close",
+          size: "300"
+        })]),
         _: 1
-      })
-    ]),
+      }, 8, ["aria-label", "onClick"])])]),
+      default: withCtx(() => [createTextVNode(" " + toDisplayString(_ctx.node.attrs.text) + " ", 1)]),
+      _: 1
+    })]),
     _: 1
   });
 }
@@ -140,16 +132,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)];
   }
 });
@@ -281,13 +275,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);
       }
     },
     /**
@@ -310,25 +298,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.
@@ -542,13 +541,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);
@@ -599,11 +600,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 = resolveComponent("dt-rich-text-editor");
@@ -619,209 +630,160 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "dt-message-input",
     role: "presentation",
     class: 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))
-  }, [
-    renderSlot(_ctx.$slots, "top"),
-    withDirectives((openBlock(), createElementBlock("div", {
-      class: "dt-message-input__editor-wrapper",
-      style: normalizeStyle({ "max-height": $props.maxHeight })
-    }, [
-      createVNode(_component_dt_rich_text_editor, 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]
-    ]),
-    renderSlot(_ctx.$slots, "middle"),
-    createElementVNode("section", _hoisted_1, [
-      createElementVNode("div", _hoisted_2, [
-        $props.showImagePicker ? withDirectives((openBlock(), 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: withCtx(() => [
-            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"]
-        ]) : createCommentVNode("", true),
-        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 ? (openBlock(), 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: withCtx(({ attrs }) => [
-            withDirectives((openBlock(), createBlock(_component_dt_button, 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: withCtx(() => [
-                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: withCtx(({ close }) => [
-            createVNode(_component_dt_emoji_picker, mergeProps($props.emojiPickerProps, {
-              onSkinTone: $options.onSkinTone,
-              onSelectedEmoji: (emoji) => {
-                close();
-                $options.onSelectEmoji(emoji);
-              }
-            }), null, 16, ["onSkinTone", "onSelectedEmoji"])
-          ]),
-          _: 1
-        }, 8, ["open"])) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "emojiGiphyPicker")
-      ]),
-      createElementVNode("div", _hoisted_3, [
-        createElementVNode("div", _hoisted_4, [
-          renderSlot(_ctx.$slots, "smsCount")
-        ]),
-        Boolean($props.showCharacterLimit) ? (openBlock(), 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: withCtx(() => [
-            withDirectives(createElementVNode("p", {
-              class: "dt-message-input__remaining-char",
-              "data-qa": "dt-message-input-character-limit"
-            }, toDisplayString($props.showCharacterLimit.count - $options.inputLength), 513), [
-              [vShow, $options.displayCharacterLimitWarning]
-            ])
-          ]),
-          _: 1
-        }, 8, ["enabled", "message"])) : createCommentVNode("", true),
-        $props.showCancel ? (openBlock(), 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: withCtx(() => [
-            createElementVNode("p", null, toDisplayString($props.showCancel.text), 1)
-          ]),
-          _: 1
-        }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "sendButton", {}, () => {
-          var _a2;
-          return [
-            $props.showSend ? withDirectives((openBlock(), createBlock(_component_dt_button, {
-              key: 0,
-              "data-qa": "dt-message-input-send-btn",
-              size: "sm",
-              kind: "default",
-              importance: "primary",
-              class: 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
-            }, createSlots({
-              default: withCtx(() => [
-                $props.showSend.text ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString($props.showSend.text), 1)) : createCommentVNode("", true)
-              ]),
-              _: 2
-            }, [
-              $props.showSend.icon ? {
-                name: "icon",
-                fn: withCtx(() => [
-                  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"]
-            ]) : createCommentVNode("", true)
-          ];
-        })
-      ])
-    ])
-  ], 32);
+    onDragover: _cache[10] || (_cache[10] = withModifiers(() => {
+    }, ["prevent"])),
+    onDrop: _cache[11] || (_cache[11] = 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))
+  }, [renderSlot(_ctx.$slots, "top"), withDirectives((openBlock(), createElementBlock("div", {
+    class: "dt-message-input__editor-wrapper",
+    style: normalizeStyle({
+      "max-height": $props.maxHeight
+    })
+  }, [createVNode(_component_dt_rich_text_editor, 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]]), renderSlot(_ctx.$slots, "middle"), createElementVNode("section", _hoisted_1, [createElementVNode("div", _hoisted_2, [$props.showImagePicker ? withDirectives((openBlock(), 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: withCtx(() => [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"]]) : createCommentVNode("", true), 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 ? (openBlock(), 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: withCtx(({
+      attrs
+    }) => [withDirectives((openBlock(), createBlock(_component_dt_button, 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: withCtx(() => [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: withCtx(({
+      close
+    }) => [createVNode(_component_dt_emoji_picker, mergeProps($props.emojiPickerProps, {
+      onSkinTone: $options.onSkinTone,
+      onSelectedEmoji: (emoji) => {
+        close();
+        $options.onSelectEmoji(emoji);
+      }
+    }), null, 16, ["onSkinTone", "onSelectedEmoji"])]),
+    _: 1
+  }, 8, ["open"])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "emojiGiphyPicker")]), createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "smsCount")]), Boolean($props.showCharacterLimit) ? (openBlock(), 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: withCtx(() => [withDirectives(createElementVNode("p", {
+      class: "dt-message-input__remaining-char",
+      "data-qa": "dt-message-input-character-limit"
+    }, toDisplayString($props.showCharacterLimit.count - $options.inputLength), 513), [[vShow, $options.displayCharacterLimitWarning]])]),
+    _: 1
+  }, 8, ["enabled", "message"])) : createCommentVNode("", true), $props.showCancel ? (openBlock(), 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: withCtx(() => [createElementVNode("p", null, toDisplayString($props.showCancel.text), 1)]),
+    _: 1
+  }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "sendButton", {}, () => {
+    var _a2;
+    return [$props.showSend ? withDirectives((openBlock(), createBlock(_component_dt_button, {
+      key: 0,
+      "data-qa": "dt-message-input-send-btn",
+      size: "sm",
+      kind: "default",
+      importance: "primary",
+      class: 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
+    }, createSlots({
+      default: withCtx(() => [$props.showSend.text ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString($props.showSend.text), 1)) : createCommentVNode("", true)]),
+      _: 2
+    }, [$props.showSend.icon ? {
+      name: "icon",
+      fn: withCtx(() => [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"]]) : createCommentVNode("", true)];
+  })])])], 32);
 }
 const message_input = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {