@dialpad/dialtone 9.126.6 → 9.127.0

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

@@ -1,46 +1,57 @@
-import q from "./last-active-nodes.js";
-import { removeClassStyleAttrs as z, addClassStyleAttrs as N, returnFirstEl as U } from "../../common/utils/index.js";
-import { Node as H, mergeAttributes as W } from "@tiptap/core";
-import { NodeViewWrapper as K, nodeViewProps as X, VueNodeViewRenderer as Q } from "../../node_modules/@tiptap/vue-3.js";
-import { DtIconClose as G, DtIconVideo as Y, DtIconImage as J, DtIconVerySatisfied as Z, DtIconSatisfied as $, DtIconSend as ee } from "@dialpad/dialtone-icons/vue3";
-import { resolveComponent as s, openBlock as r, createBlock as u, withCtx as a, createVNode as c, createElementVNode as m, createTextVNode as te, toDisplayString as T, resolveDirective as O, createElementBlock as w, mergeProps as _, withModifiers as I, renderSlot as g, createCommentVNode as h, withDirectives as f, normalizeStyle as ie, vShow as oe, normalizeClass as ne, createSlots as le } from "vue";
-import { _ as B } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import se from "../item-layout/item-layout.js";
+import R from "./last-active-nodes.js";
+import { removeClassStyleAttrs as U, addClassStyleAttrs as z, returnFirstEl as q } from "../../common/utils/index.js";
+import { Node as H, mergeAttributes as G } from "@tiptap/core";
+import { NodeViewWrapper as K, nodeViewProps as W, VueNodeViewRenderer as X } from "../../node_modules/@tiptap/vue-3.js";
+import { DtIconClose as Q, DtIconVideo as J, DtIconImage as Y, DtIconVerySatisfied as Z, DtIconSatisfied as $, DtIconSend as ee } from "@dialpad/dialtone-icons/vue3";
+import { DialtoneLocalization as C } from "../../localization/index.js";
+import { resolveComponent as l, openBlock as r, createBlock as d, withCtx as a, createVNode as c, createElementVNode as m, createTextVNode as te, toDisplayString as T, resolveDirective as E, createElementBlock as y, mergeProps as _, withModifiers as w, renderSlot as p, createCommentVNode as h, withDirectives as f, normalizeStyle as ie, vShow as ne, normalizeClass as oe, createSlots as se } from "vue";
+import { _ as v } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import le from "../item-layout/item-layout.js";
 import P from "../button/button.js";
 import ae from "./message-input-topbar.js";
 import re from "./message-input-link.js";
-import { EDITOR_SUPPORTED_LINK_PROTOCOLS as ce, EDITOR_DEFAULT_LINK_PREFIX as de } from "../editor/editor-constants.js";
-import ue from "../emoji-picker/emoji-picker.js";
+import { EDITOR_SUPPORTED_LINK_PROTOCOLS as ce, EDITOR_DEFAULT_LINK_PREFIX as ue } from "../editor/editor-constants.js";
+import de from "../emoji-picker/emoji-picker.js";
 import me from "../input/input.js";
 import pe from "../popover/popover.js";
-import ge from "../rich-text-editor/rich-text-editor.js";
-import he from "../tooltip/tooltip.js";
+import he from "../rich-text-editor/rich-text-editor.js";
+import ge from "../tooltip/tooltip.js";
 import be from "../stack/stack.js";
-import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as ke, RICH_TEXT_EDITOR_OUTPUT_FORMATS as fe } from "../rich-text-editor/rich-text-editor-constants.js";
+import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as fe, RICH_TEXT_EDITOR_OUTPUT_FORMATS as ke } from "../rich-text-editor/rich-text-editor-constants.js";
 const _e = {
   name: "MeetingPill",
   components: {
     NodeViewWrapper: K,
-    DtItemLayout: se,
-    DtIconClose: G,
+    DtItemLayout: le,
+    DtIconClose: Q,
     DtButton: P,
-    DtIconVideo: Y
+    DtIconVideo: J
   },
-  props: X,
+  props: W,
   emits: ["meeting-pill-close"],
+  data() {
+    return {
+      i18n: new C()
+    };
+  },
+  computed: {
+    closeButtonTitle() {
+      return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
+    }
+  },
   methods: {
     close(t) {
-      var i, d, n;
-      const e = (n = (d = (i = this.editor) == null ? void 0 : i.storage) == null ? void 0 : d.meetingPill) == null ? void 0 : n.onClose;
+      var i, u, o;
+      const e = (o = (u = (i = this.editor) == null ? void 0 : i.storage) == null ? void 0 : u.meetingPill) == null ? void 0 : o.onClose;
       e && typeof e == "function" && e(t);
     }
   }
 }, Te = { class: "d-recipe-message-input-meeting-pill__icon" }, Se = { class: "d-recipe-message-input-meeting-pill__close" };
-function Le(t, e, i, d, n, o) {
-  const S = s("dt-icon-video"), L = s("dt-icon-close"), x = s("dt-button"), y = s("dt-item-layout"), b = s("node-view-wrapper");
-  return r(), u(b, { class: "d-recipe-message-input-meeting-pill" }, {
+function Le(t, e, i, u, o, n) {
+  const S = l("dt-icon-video"), L = l("dt-icon-close"), I = l("dt-button"), O = l("dt-item-layout"), g = l("node-view-wrapper");
+  return r(), d(g, { class: "d-recipe-message-input-meeting-pill" }, {
     default: a(() => [
-      c(y, {
+      c(O, {
         class: "d-recipe-message-input-meeting-pill__layout",
         unstyled: ""
       }, {
@@ -51,18 +62,19 @@ function Le(t, e, i, d, n, o) {
         ]),
         right: a(() => [
           m("div", Se, [
-            c(x, {
+            c(I, {
               circle: "",
-              "aria-label": t.node.attrs["close-button-aria-label"],
-              size: "xs",
               importance: "clear",
-              onClick: o.close
+              size: "xs",
+              "aria-label": n.closeButtonTitle,
+              title: n.closeButtonTitle,
+              onClick: n.close
             }, {
               icon: a(() => [
                 c(L, { size: "300" })
               ]),
               _: 1
-            }, 8, ["aria-label", "onClick"])
+            }, 8, ["aria-label", "title", "onClick"])
           ])
         ]),
         default: a(() => [
@@ -74,7 +86,7 @@ function Le(t, e, i, d, n, o) {
     _: 1
   });
 }
-const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
+const Ie = /* @__PURE__ */ v(_e, [["render", Le]]), Oe = H.create({
   name: "meetingPill",
   atom: !0,
   group: "inline",
@@ -91,14 +103,13 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
     };
   },
   addNodeView() {
-    return Q(xe);
+    return X(Ie);
   },
   addAttributes() {
     return {
       text: {
         default: 'Please pass in "text" attribute'
-      },
-      "close-button-aria-label": {}
+      }
     };
   },
   parseHTML() {
@@ -112,27 +123,26 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
     return "/dpm";
   },
   renderHTML({ HTMLAttributes: t }) {
-    return ["meeting-pill", W(t)];
+    return ["meeting-pill", G(t)];
   }
-}), Ce = {
+}), ye = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeMessageInput",
   components: {
     DtButton: P,
-    DtEmojiPicker: ue,
+    DtEmojiPicker: de,
     DtInput: me,
     DtPopover: pe,
     DtRecipeMessageInputTopbar: ae,
     DtRecipeMessageInputLink: re,
-    DtRichTextEditor: ge,
-    DtTooltip: he,
+    DtRichTextEditor: he,
+    DtTooltip: ge,
     DtStack: be,
-    DtIconImage: J,
+    DtIconImage: Y,
     DtIconVerySatisfied: Z,
     DtIconSatisfied: $,
     DtIconSend: ee
   },
-  mixins: [],
   inheritAttrs: !1,
   props: {
     /**
@@ -201,7 +211,7 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
       type: [Boolean, String, Number],
       default: !1,
       validator(t) {
-        return typeof t == "string" ? ke.includes(t) : !0;
+        return typeof t == "string" ? fe.includes(t) : !0;
       }
     },
     /**
@@ -214,7 +224,7 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
       type: String,
       default: "json",
       validator(t) {
-        return fe.includes(t);
+        return ke.includes(t);
       }
     },
     /**
@@ -249,31 +259,7 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
      */
     emojiPickerProps: {
       type: Object,
-      default: () => ({}),
-      validate(t) {
-        return [
-          "searchNoResultsLabel",
-          "searchResultsLabel",
-          "searchPlaceholderLabel",
-          "skinSelectorButtonTooltipLabel",
-          "tabSetLabels"
-        ].every((e) => t[e] != null);
-      }
-    },
-    /**
-     * Emoji button tooltip label
-     */
-    emojiTooltipMessage: {
-      type: String,
-      default: "Emoji"
-    },
-    // Aria label for buttons
-    /**
-     * Emoji button aria label
-     */
-    emojiButtonAriaLabel: {
-      type: String,
-      default: "emoji button"
+      default: () => ({})
     },
     /**
      * Enable character Limit warning
@@ -284,24 +270,28 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
     },
     showImagePicker: {
       type: [Boolean, Object],
-      default: () => ({
-        tooltipLabel: "Attach Image",
-        ariaLabel: "image button"
-      })
+      default: () => ({})
     },
     /**
      * Send button defaults.
+     * TODO (Dialtone 10):
+     * - Change to `showSendButton`, boolean only.
      */
     showSend: {
       type: [Boolean, Object],
       default: () => ({})
     },
+    /**
+     * TODO (Dialtone 10):
+     * - Add a prop `iconOnly` default: true to control if localized send button text should be shown
+     */
     /**
      * Cancel button defaults.
+     * TODO (Dialtone 10): Change to `showCancelButton`, boolean only.
      */
     showCancel: {
       type: [Boolean, Object],
-      default: () => ({ text: "Cancel" })
+      default: () => ({})
     },
     /**
      * suggestion object containing the items query function.
@@ -354,13 +344,11 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
      * descriptive text fields for the bold button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     boldButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle bold on selected text",
-        tooltipText: "Bold",
         keyboardShortcutText: "Mod + B"
       })
     },
@@ -368,13 +356,11 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
      * descriptive text fields for the italic button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     italicButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle italic on selected text",
-        tooltipText: "Italic",
         keyboardShortcutText: "Mod + I"
       })
     },
@@ -382,13 +368,11 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
      * descriptive text fields for the strikethrough button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     strikeButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle strikethrough on selected text",
-        tooltipText: "Strikethrough",
         keyboardShortcutText: "Mod + Shift + S"
       })
     },
@@ -396,36 +380,25 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
      * descriptive text fields for the link button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     linkButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Create or edit link on selected text",
-        tooltipText: "Link",
         // TODO: implement mod k
         keyboardShortcutText: "Mod + K",
-        dialogTitle: "Add a link",
-        textLabel: "Text to display (optional)",
-        linkLabel: "Link",
-        linkPlaceholder: "e.g. https://www.dialpad.com",
-        removeLabel: "Remove",
-        cancelLabel: "Cancel",
-        confirmLabel: "Done",
-        visuallyHiddenCloseText: "Close link dialog"
+        linkPlaceholder: "e.g. https://www.dialpad.com"
       })
     },
     /**
      * descriptive text fields for the bullet list button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     bulletListButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle bullet list on selected text",
-        tooltipText: "Bullet list",
         keyboardShortcutText: "Mod + Shift + 8"
       })
     },
@@ -433,13 +406,11 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
      * descriptive text fields for the ordered list button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     orderedListButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle ordered list on selected text",
-        tooltipText: "Ordered list",
         keyboardShortcutText: "Mod + Shift + 7"
       })
     },
@@ -447,13 +418,11 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
      * descriptive text fields for the italic button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     blockQuoteButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle Blockquote on selected text",
-        tooltipText: "Blockquote",
         keyboardShortcutText: "Mod + Shift + B"
       })
     },
@@ -461,13 +430,11 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
      * descriptive text fields for the code button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     codeButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle code tag on selected text",
-        tooltipText: "Code",
         keyboardShortcutText: "Mod + E"
       })
     },
@@ -475,13 +442,11 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
      * descriptive text fields for the code block button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     codeBlockButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle code block on selected text",
-        tooltipText: "Code block",
         keyboardShortcutText: "Mod + Alt + C"
       })
     }
@@ -561,15 +526,21 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
      * @event text-input
      * @type {String}
      */
-    "text-input"
+    "text-input",
+    /**
+     * Emitted when the 'Add emoji' button is clicked
+     * @event add-emoji
+     * @type {Boolean}
+     */
+    "add-emoji"
   ],
   data() {
     return {
       // If an ordered list is nested within an unordered list, we only want to show the currently selected list as
       // active. This function performs the logic to determine the farthest active node from the root.
-      lastActiveNodes: q,
+      lastActiveNodes: R,
       additionalExtensions: [
-        ye.configure({
+        Oe.configure({
           onClose: (t) => {
             this.$emit("meeting-pill-close", t);
           }
@@ -587,7 +558,8 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
       linkDialogOpen: !1,
       selectedText: "",
       text: "",
-      hideLinkBubbleMenu: !1
+      hideLinkBubbleMenu: !1,
+      i18n: new C()
     };
   },
   computed: {
@@ -606,16 +578,23 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
     isSendDisabled() {
       return this.disableSend || this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count;
     },
-    computedCloseButtonProps() {
-      return {
-        ariaLabel: "Close"
-      };
-    },
     emojiPickerHovered() {
       return this.emojiPickerFocus || this.emojiPickerOpened;
     },
     sendIconSize() {
       return "300";
+    },
+    sendButtonLabel() {
+      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_SEND_BUTTON_ARIA_LABEL");
+    },
+    imagePickerButtonLabel() {
+      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_IMAGE_PICKER_BUTTON_ARIA_LABEL");
+    },
+    emojiPickerButtonLabel() {
+      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_EMOJI_PICKER_BUTTON_ARIA_LABEL");
+    },
+    cancelButtonLabel() {
+      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_CANCEL_BUTTON_ARIA_LABEL");
     }
   },
   watch: {
@@ -631,16 +610,16 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
     this.modelValue && this.outputFormat === "text" ? this.internalInputValue = this.modelValue.replace(/\n/g, "<br>") : this.internalInputValue = this.modelValue;
   },
   methods: {
-    removeClassStyleAttrs: z,
-    addClassStyleAttrs: N,
+    removeClassStyleAttrs: U,
+    addClassStyleAttrs: z,
     linkDialogOpened(t) {
       var e;
       this.linkDialogOpen = t, t === !0 ? this.initLinkDialog() : (this.hideLinkBubbleMenu = !1, (e = this.$refs.richTextEditor) == null || e.focusEditor());
     },
     // eslint-disable-next-line complexity
     handleTopbarClick(t) {
-      var d;
-      const e = (d = this.$refs.richTextEditor) == null ? void 0 : d.editor, i = {
+      var u;
+      const e = (u = this.$refs.richTextEditor) == null ? void 0 : u.editor, i = {
         bold: () => e == null ? void 0 : e.chain().focus().toggleBold().run(),
         italic: () => e == null ? void 0 : e.chain().focus().toggleItalic().run(),
         strike: () => e == null ? void 0 : e.chain().focus().toggleStrike().run(),
@@ -654,8 +633,8 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
     },
     // Checks if the node currently selected is active ex/ the bold button is active if the selected text is bold
     isSelectionActive(t) {
-      var e, i, d, n;
-      return ["bulletList", "orderedList"].includes(t) ? this.lastActiveNodes((i = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : i.state, [{ type: "bulletList" }, { type: "orderedList" }]).includes(t) && this.isFocused : ((n = (d = this.$refs.richTextEditor) == null ? void 0 : d.editor) == null ? void 0 : n.isActive(t)) && this.isFocused;
+      var e, i, u, o;
+      return ["bulletList", "orderedList"].includes(t) ? this.lastActiveNodes((i = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : i.state, [{ type: "bulletList" }, { type: "orderedList" }]).includes(t) && this.isFocused : ((o = (u = this.$refs.richTextEditor) == null ? void 0 : u.editor) == null ? void 0 : o.isActive(t)) && this.isFocused;
     },
     initLinkDialog() {
       var t, e, i;
@@ -671,12 +650,12 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
         t,
         this.linkOptions,
         ce,
-        de
+        ue
       ), this.linkDialogOpen = !1;
     },
     // Mousedown instead of click because it fires before the blur event.
     onMousedown(t) {
-      U(this.$refs.richTextEditor.$el).querySelector(".tiptap").contains(t.target) || (t.preventDefault(), this.$refs.richTextEditor.focusEditor());
+      q(this.$refs.richTextEditor.$el).querySelector(".tiptap").contains(t.target) || (t.preventDefault(), this.$refs.richTextEditor.focusEditor());
     },
     onDrop(t) {
       const e = t.dataTransfer, i = Array.from(e.files);
@@ -725,23 +704,23 @@ const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
       this.text = t, this.$emit("text-input", t);
     }
   }
-}, we = { class: "d-recipe-message-input__bottom-section" }, ve = { class: "d-recipe-message-input__bottom-section-left" }, Oe = { class: "d-recipe-message-input__bottom-section-right" }, Ie = { class: "d-recipe-message-input__sms-count" }, Be = { key: 0 };
-function Pe(t, e, i, d, n, o) {
-  const S = s("dt-recipe-message-input-link"), L = s("dt-recipe-message-input-topbar"), x = s("dt-rich-text-editor"), y = s("dt-icon-image"), b = s("dt-button"), j = s("dt-input"), D = s("dt-icon-very-satisfied"), E = s("dt-icon-satisfied"), M = s("dt-emoji-picker"), V = s("dt-popover"), v = s("dt-stack"), F = s("dt-tooltip"), A = s("dt-icon-send"), R = O("dt-scrollbar"), C = O("dt-tooltip");
-  return r(), w("div", _({
+}, Be = { class: "d-recipe-message-input__bottom-section" }, Ee = { class: "d-recipe-message-input__bottom-section-left" }, we = { class: "d-recipe-message-input__bottom-section-right" }, Ce = { class: "d-recipe-message-input__sms-count" }, ve = { key: 0 };
+function Pe(t, e, i, u, o, n) {
+  const S = l("dt-recipe-message-input-link"), L = l("dt-recipe-message-input-topbar"), I = l("dt-rich-text-editor"), O = l("dt-icon-image"), g = l("dt-button"), x = l("dt-input"), D = l("dt-icon-very-satisfied"), j = l("dt-icon-satisfied"), A = l("dt-emoji-picker"), M = l("dt-popover"), B = l("dt-stack"), V = l("dt-tooltip"), N = l("dt-icon-send"), F = E("dt-scrollbar"), k = E("dt-tooltip");
+  return r(), y("div", _({
     "data-qa": "dt-recipe-message-input",
     role: "presentation",
     class: "d-recipe-message-input"
-  }, o.addClassStyleAttrs(t.$attrs), {
-    onDragover: e[13] || (e[13] = I(() => {
+  }, n.addClassStyleAttrs(t.$attrs), {
+    onDragover: e[14] || (e[14] = w(() => {
     }, ["prevent"])),
-    onDrop: e[14] || (e[14] = I((...l) => o.onDrop && o.onDrop(...l), ["prevent"])),
-    onPaste: e[15] || (e[15] = (...l) => o.onPaste && o.onPaste(...l)),
-    onMousedown: e[16] || (e[16] = (...l) => o.onMousedown && o.onMousedown(...l))
+    onDrop: e[15] || (e[15] = w((...s) => n.onDrop && n.onDrop(...s), ["prevent"])),
+    onPaste: e[16] || (e[16] = (...s) => n.onPaste && n.onPaste(...s)),
+    onMousedown: e[17] || (e[17] = (...s) => n.onMousedown && n.onMousedown(...s))
   }), [
-    g(t.$slots, "top"),
-    i.richText ? (r(), u(L, {
-      key: n.selectedText,
+    p(t.$slots, "top"),
+    i.richText ? (r(), d(L, {
+      key: o.selectedText,
       "bold-button-options": i.boldButtonOptions,
       "italic-button-options": i.italicButtonOptions,
       "strike-button-options": i.strikeButtonOptions,
@@ -750,30 +729,30 @@ function Pe(t, e, i, d, n, o) {
       "block-quote-button-options": i.blockQuoteButtonOptions,
       "code-button-options": i.codeButtonOptions,
       "code-block-button-options": i.codeBlockButtonOptions,
-      "is-selection-active": o.isSelectionActive,
-      onClick: o.handleTopbarClick
+      "is-selection-active": n.isSelectionActive,
+      onClick: n.handleTopbarClick
     }, {
       link: a(() => [
         c(S, {
           ref: "link",
-          open: n.linkDialogOpen,
+          open: o.linkDialogOpen,
           "link-button-options": i.linkButtonOptions,
-          "is-selection-active": o.isSelectionActive,
-          onOpened: o.linkDialogOpened,
-          onSetLink: o.setLink,
-          onRemoveLink: o.removeLink
+          "is-selection-active": n.isSelectionActive,
+          onOpened: n.linkDialogOpened,
+          onSetLink: n.setLink,
+          onRemoveLink: n.removeLink
         }, null, 8, ["open", "link-button-options", "is-selection-active", "onOpened", "onSetLink", "onRemoveLink"])
       ]),
       _: 1
     }, 8, ["bold-button-options", "italic-button-options", "strike-button-options", "bullet-list-button-options", "ordered-list-button-options", "block-quote-button-options", "code-button-options", "code-block-button-options", "is-selection-active", "onClick"])) : h("", !0),
-    f((r(), w("div", {
+    f((r(), y("div", {
       class: "d-recipe-message-input__editor-wrapper",
       style: ie({ "max-height": i.maxHeight })
     }, [
-      c(x, _({
+      c(I, _({
         ref: "richTextEditor",
-        modelValue: n.internalInputValue,
-        "onUpdate:modelValue": e[0] || (e[0] = (l) => n.internalInputValue = l),
+        modelValue: o.internalInputValue,
+        "onUpdate:modelValue": e[0] || (e[0] = (s) => o.internalInputValue = s),
         "allow-blockquote": i.richText,
         "allow-bold": i.richText,
         "allow-bullet-list": i.richText,
@@ -794,126 +773,124 @@ function Pe(t, e, i, d, n, o) {
         "mention-suggestion": i.mentionSuggestion,
         "channel-suggestion": i.channelSuggestion,
         "slash-command-suggestion": i.slashCommandSuggestion,
-        "additional-extensions": n.additionalExtensions,
-        "hide-link-bubble-menu": n.hideLinkBubbleMenu
-      }, o.removeClassStyleAttrs(t.$attrs), {
-        onInput: o.onInput,
-        onTextInput: o.onTextInput,
-        onEnter: o.onSend,
-        onSelected: e[1] || (e[1] = (l) => n.selectedText = l),
-        onSelectedCommand: e[2] || (e[2] = (l) => t.$emit("selected-command", l)),
-        onEditLink: o.initLinkDialog,
-        onFocus: e[3] || (e[3] = (l) => n.isFocused = !0),
-        onBlur: e[4] || (e[4] = (l) => n.isFocused = !1)
+        "additional-extensions": o.additionalExtensions,
+        "hide-link-bubble-menu": o.hideLinkBubbleMenu
+      }, n.removeClassStyleAttrs(t.$attrs), {
+        onInput: n.onInput,
+        onTextInput: n.onTextInput,
+        onEnter: n.onSend,
+        onSelected: e[1] || (e[1] = (s) => o.selectedText = s),
+        onSelectedCommand: e[2] || (e[2] = (s) => t.$emit("selected-command", s)),
+        onEditLink: n.initLinkDialog,
+        onFocus: e[3] || (e[3] = (s) => o.isFocused = !0),
+        onBlur: e[4] || (e[4] = (s) => o.isFocused = !1)
       }), null, 16, ["modelValue", "allow-blockquote", "allow-bold", "allow-bullet-list", "allow-code", "allow-codeblock", "allow-italic", "allow-strike", "allow-underline", "paste-rich-text", "editable", "input-aria-label", "input-class", "output-format", "auto-focus", "link", "placeholder", "prevent-typing", "mention-suggestion", "channel-suggestion", "slash-command-suggestion", "additional-extensions", "hide-link-bubble-menu", "onInput", "onTextInput", "onEnter", "onEditLink"])
     ], 4)), [
-      [R]
+      [F]
     ]),
-    g(t.$slots, "middle"),
-    m("section", we, [
-      m("div", ve, [
-        c(v, {
+    p(t.$slots, "middle"),
+    m("section", Be, [
+      m("div", Ee, [
+        c(B, {
           gap: "200",
           direction: "row"
         }, {
-          default: a(() => {
-            var l;
-            return [
-              i.showImagePicker ? f((r(), u(b, {
-                key: 0,
-                "data-qa": "dt-recipe-message-input-image-btn",
-                size: "sm",
-                class: "d-recipe-message-input__button",
-                kind: "muted",
-                importance: "clear",
-                "aria-label": i.showImagePicker.ariaLabel,
-                onClick: o.onSelectImage,
-                onMouseenter: e[5] || (e[5] = (p) => n.imagePickerFocus = !0),
-                onMouseleave: e[6] || (e[6] = (p) => n.imagePickerFocus = !1),
-                onFocus: e[7] || (e[7] = (p) => n.imagePickerFocus = !0),
-                onBlur: e[8] || (e[8] = (p) => n.imagePickerFocus = !1)
-              }, {
-                icon: a(() => [
-                  c(y, { size: "300" })
-                ]),
-                _: 1
-              }, 8, ["aria-label", "onClick"])), [
-                [C, (l = i.showImagePicker) == null ? void 0 : l.tooltipLabel, "top-start"]
-              ]) : h("", !0),
-              c(j, {
-                ref: "messageInputImageUpload",
-                "data-qa": "dt-recipe-message-input-image-input",
-                accept: "image/*, video/*",
-                type: "file",
-                class: "d-recipe-message-input__image-input",
-                multiple: "",
-                hidden: "",
-                onInput: o.onImageUpload
-              }, null, 8, ["onInput"]),
-              i.showEmojiPicker ? (r(), u(V, {
-                key: 1,
-                "open.sync": "emojiPickerOpened",
-                "data-qa": "dt-recipe-message-input-emoji-picker-popover",
-                "initial-focus-element": "#searchInput",
-                padding: "none"
-              }, {
-                anchor: a(({ attrs: p }) => [
-                  f((r(), u(b, _(p, {
-                    "data-qa": "dt-recipe-message-input-emoji-picker-btn",
-                    size: "sm",
-                    class: "d-recipe-message-input__button",
-                    kind: "muted",
-                    importance: "clear",
-                    "aria-label": i.emojiButtonAriaLabel,
-                    onClick: o.toggleEmojiPicker,
-                    onMouseenter: e[9] || (e[9] = (k) => n.emojiPickerFocus = !0),
-                    onMouseleave: e[10] || (e[10] = (k) => n.emojiPickerFocus = !1),
-                    onFocus: e[11] || (e[11] = (k) => n.emojiPickerFocus = !0),
-                    onBlur: e[12] || (e[12] = (k) => n.emojiPickerFocus = !1)
-                  }), {
-                    icon: a(() => [
-                      o.emojiPickerHovered ? (r(), u(D, {
-                        key: 0,
-                        size: "300"
-                      })) : (r(), u(E, {
-                        key: 1,
-                        size: "300"
-                      }))
-                    ]),
-                    _: 2
-                  }, 1040, ["aria-label", "onClick"])), [
-                    [C, i.emojiTooltipMessage]
-                  ])
-                ]),
-                content: a(({ close: p }) => [
-                  c(M, _(i.emojiPickerProps, {
-                    onSkinTone: o.onSkinTone,
-                    onSelectedEmoji: (k) => o.onSelectEmoji(k, p)
-                  }), null, 16, ["onSkinTone", "onSelectedEmoji"])
-                ]),
-                _: 1
-              })) : h("", !0),
-              g(t.$slots, "emojiGiphyPicker"),
-              g(t.$slots, "customActionIcons")
-            ];
-          }),
+          default: a(() => [
+            i.showImagePicker ? f((r(), d(g, {
+              key: 0,
+              "data-qa": "dt-recipe-message-input-image-btn",
+              size: "sm",
+              class: "d-recipe-message-input__button",
+              kind: "muted",
+              importance: "clear",
+              "aria-label": n.imagePickerButtonLabel,
+              onClick: n.onSelectImage,
+              onMouseenter: e[5] || (e[5] = (s) => o.imagePickerFocus = !0),
+              onMouseleave: e[6] || (e[6] = (s) => o.imagePickerFocus = !1),
+              onFocus: e[7] || (e[7] = (s) => o.imagePickerFocus = !0),
+              onBlur: e[8] || (e[8] = (s) => o.imagePickerFocus = !1)
+            }, {
+              icon: a(() => [
+                c(O, { size: "300" })
+              ]),
+              _: 1
+            }, 8, ["aria-label", "onClick"])), [
+              [k, n.imagePickerButtonLabel, "top-start"]
+            ]) : h("", !0),
+            c(x, {
+              ref: "messageInputImageUpload",
+              "data-qa": "dt-recipe-message-input-image-input",
+              accept: "image/*, video/*",
+              type: "file",
+              class: "d-recipe-message-input__image-input",
+              multiple: "",
+              hidden: "",
+              onInput: n.onImageUpload
+            }, null, 8, ["onInput"]),
+            i.showEmojiPicker ? (r(), d(M, {
+              key: 1,
+              "open.sync": "emojiPickerOpened",
+              "data-qa": "dt-recipe-message-input-emoji-picker-popover",
+              "initial-focus-element": "#searchInput",
+              padding: "none"
+            }, {
+              anchor: a(({ attrs: s }) => [
+                f((r(), d(g, _(s, {
+                  "data-qa": "dt-recipe-message-input-emoji-picker-btn",
+                  size: "sm",
+                  class: "d-recipe-message-input__button",
+                  kind: "muted",
+                  importance: "clear",
+                  "aria-label": n.emojiPickerButtonLabel,
+                  onClick: n.toggleEmojiPicker,
+                  onMouseenter: e[9] || (e[9] = (b) => o.emojiPickerFocus = !0),
+                  onMouseleave: e[10] || (e[10] = (b) => o.emojiPickerFocus = !1),
+                  onFocus: e[11] || (e[11] = (b) => o.emojiPickerFocus = !0),
+                  onBlur: e[12] || (e[12] = (b) => o.emojiPickerFocus = !1)
+                }), {
+                  icon: a(() => [
+                    n.emojiPickerHovered ? (r(), d(D, {
+                      key: 0,
+                      size: "300"
+                    })) : (r(), d(j, {
+                      key: 1,
+                      size: "300"
+                    }))
+                  ]),
+                  _: 2
+                }, 1040, ["aria-label", "onClick"])), [
+                  [k, n.emojiPickerButtonLabel]
+                ])
+              ]),
+              content: a(({ close: s }) => [
+                c(A, _(i.emojiPickerProps, {
+                  onAddEmoji: e[13] || (e[13] = (b) => t.$emit("add-emoji")),
+                  onSkinTone: n.onSkinTone,
+                  onSelectedEmoji: (b) => n.onSelectEmoji(b, s)
+                }), null, 16, ["onSkinTone", "onSelectedEmoji"])
+              ]),
+              _: 1
+            })) : h("", !0),
+            p(t.$slots, "emojiGiphyPicker"),
+            p(t.$slots, "customActionIcons")
+          ]),
           _: 3
         })
       ]),
-      m("div", Oe, [
-        c(v, {
+      m("div", we, [
+        c(B, {
           direction: "row",
           gap: "300"
         }, {
           default: a(() => [
-            m("div", Ie, [
-              g(t.$slots, "smsCount")
+            m("div", Ce, [
+              p(t.$slots, "smsCount")
             ]),
-            i.showCharacterLimit ? (r(), u(F, {
+            i.showCharacterLimit ? (r(), d(V, {
               key: 0,
               class: "d-recipe-message-input__remaining-char-tooltip",
               placement: "top-end",
-              enabled: o.characterLimitTooltipEnabled,
+              enabled: n.characterLimitTooltipEnabled,
               message: i.showCharacterLimit.message,
               offset: [10, 8]
             }, {
@@ -921,66 +898,65 @@ function Pe(t, e, i, d, n, o) {
                 f(m("p", {
                   class: "d-recipe-message-input__remaining-char",
                   "data-qa": "dt-recipe-message-input-character-limit"
-                }, T(i.showCharacterLimit.count - o.inputLength), 513), [
-                  [oe, o.displayCharacterLimitWarning]
+                }, T(i.showCharacterLimit.count - n.inputLength), 513), [
+                  [ne, n.displayCharacterLimitWarning]
                 ])
               ]),
               _: 1
             }, 8, ["enabled", "message"])) : h("", !0),
-            i.showCancel ? (r(), u(b, {
+            i.showCancel ? f((r(), d(g, {
               key: 1,
               "data-qa": "dt-recipe-message-input-cancel-button",
               class: "d-recipe-message-input__button d-recipe-message-input__cancel-button",
               size: "sm",
               kind: "muted",
               importance: "clear",
-              "aria-label": i.showCancel.ariaLabel,
-              onClick: o.onCancel
+              "aria-label": n.cancelButtonLabel,
+              onClick: n.onCancel
             }, {
               default: a(() => [
-                m("p", null, T(i.showCancel.text), 1)
+                m("p", null, T(n.cancelButtonLabel), 1)
               ]),
               _: 1
-            }, 8, ["aria-label", "onClick"])) : h("", !0),
-            g(t.$slots, "sendButton", {}, () => {
-              var l;
-              return [
-                i.showSend ? f((r(), u(b, {
-                  key: 0,
-                  "data-qa": "dt-recipe-message-input-send-btn",
-                  size: "sm",
-                  kind: "default",
-                  importance: "primary",
-                  class: ne([
-                    "d-recipe-message-input__button d-recipe-message-input__send-button",
-                    {
-                      "d-recipe-message-input__send-button--disabled": o.isSendDisabled,
-                      "d-btn--icon-only": o.showSendIcon
-                    }
-                  ]),
-                  "aria-label": i.showSend.ariaLabel,
-                  "aria-disabled": o.isSendDisabled,
-                  onClick: o.onSend
-                }, le({
-                  default: a(() => [
-                    i.showSend.text ? (r(), w("p", Be, T(i.showSend.text), 1)) : h("", !0)
+            }, 8, ["aria-label", "onClick"])), [
+              [k, n.cancelButtonLabel]
+            ]) : h("", !0),
+            p(t.$slots, "sendButton", {}, () => [
+              i.showSend ? f((r(), d(g, {
+                key: 0,
+                "data-qa": "dt-recipe-message-input-send-btn",
+                size: "sm",
+                kind: "default",
+                importance: "primary",
+                class: oe([
+                  "d-recipe-message-input__button d-recipe-message-input__send-button",
+                  {
+                    "d-recipe-message-input__send-button--disabled": n.isSendDisabled,
+                    "d-btn--icon-only": n.showSendIcon
+                  }
+                ]),
+                "aria-label": n.sendButtonLabel,
+                "aria-disabled": n.isSendDisabled,
+                onClick: n.onSend
+              }, se({
+                default: a(() => [
+                  i.showSend.text ? (r(), y("p", ve, T(i.showSend.text), 1)) : h("", !0)
+                ]),
+                _: 2
+              }, [
+                n.showSendIcon ? {
+                  name: "icon",
+                  fn: a(() => [
+                    p(t.$slots, "sendIcon", { iconSize: n.sendIconSize }, () => [
+                      c(N, { size: n.sendIconSize }, null, 8, ["size"])
+                    ])
                   ]),
-                  _: 2
-                }, [
-                  o.showSendIcon ? {
-                    name: "icon",
-                    fn: a(() => [
-                      g(t.$slots, "sendIcon", { iconSize: o.sendIconSize }, () => [
-                        c(A, { size: o.sendIconSize }, null, 8, ["size"])
-                      ])
-                    ]),
-                    key: "0"
-                  } : void 0
-                ]), 1032, ["class", "aria-label", "aria-disabled", "onClick"])), [
-                  [C, (l = i.showSend) == null ? void 0 : l.tooltipLabel, "top-end"]
-                ]) : h("", !0)
-              ];
-            })
+                  key: "0"
+                } : void 0
+              ]), 1032, ["class", "aria-label", "aria-disabled", "onClick"])), [
+                [k, n.sendButtonLabel, "top-end"]
+              ]) : h("", !0)
+            ])
           ]),
           _: 3
         })
@@ -988,8 +964,8 @@ function Pe(t, e, i, d, n, o) {
     ])
   ], 16);
 }
-const Je = /* @__PURE__ */ B(Ce, [["render", Pe]]);
+const Ze = /* @__PURE__ */ v(ye, [["render", Pe]]);
 export {
-  Je as default
+  Ze as default
 };
 //# sourceMappingURL=message-input.js.map