@dialpad/dialtone 9.110.2 → 9.111.1

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

@@ -0,0 +1,740 @@
+import l from "./last-active-nodes.js";
+import { Node as c, mergeAttributes as u } from "@tiptap/core";
+import { NodeViewWrapper as d, nodeViewProps as p, VueNodeViewRenderer as m } from "../../node_modules/@tiptap/vue-2.js";
+import { DtIconClose as h, DtIconVideo as g, DtIconImage as f, DtIconVerySatisfied as b, DtIconSatisfied as k, DtIconSend as _ } from "@dialpad/dialtone-icons/vue2";
+import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import x from "../item-layout/item-layout.js";
+import r from "../button/button.js";
+import T from "./message-input-topbar.js";
+import v from "./message-input-link.js";
+import { EDITOR_SUPPORTED_LINK_PROTOCOLS as L, EDITOR_DEFAULT_LINK_PREFIX as y } from "../editor/editor-constants.js";
+import S from "../emoji-picker/emoji-picker.js";
+import w from "../input/input.js";
+import O from "../popover/popover.js";
+import I from "../rich-text-editor/rich-text-editor.js";
+import C from "../tooltip/tooltip.js";
+import j from "../stack/stack.js";
+import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as B, RICH_TEXT_EDITOR_OUTPUT_FORMATS as P } from "../rich-text-editor/rich-text-editor-constants.js";
+const D = {
+  name: "MeetingPill",
+  components: {
+    NodeViewWrapper: d,
+    DtItemLayout: x,
+    DtIconClose: h,
+    DtButton: r,
+    DtIconVideo: g
+  },
+  props: p,
+  emits: ["meeting-pill-close"],
+  methods: {
+    close(t) {
+      this.$parent.$emit("meeting-pill-close", t);
+    }
+  }
+};
+var $ = function() {
+  var e = this, i = e._self._c;
+  return i("node-view-wrapper", { staticClass: "d-recipe-message-input-meeting-pill" }, [i("dt-item-layout", { staticClass: "d-recipe-message-input-meeting-pill__layout", attrs: { unstyled: "" }, scopedSlots: e._u([{ key: "left", fn: function() {
+    return [i("div", { staticClass: "d-recipe-message-input-meeting-pill__icon" }, [i("dt-icon-video", { attrs: { size: "400" } })], 1)];
+  }, proxy: !0 }, { key: "right", fn: function() {
+    return [i("div", { staticClass: "d-recipe-message-input-meeting-pill__close" }, [i("dt-button", { attrs: { circle: "", "aria-label": e.node.attrs["close-button-aria-label"], size: "xs", importance: "clear" }, on: { click: e.close }, scopedSlots: e._u([{ key: "icon", fn: function() {
+      return [i("dt-icon-close", { attrs: { size: "300" } })];
+    }, proxy: !0 }]) })], 1)];
+  }, proxy: !0 }]) }, [e._v(" " + e._s(e.node.attrs.text) + " ")])], 1);
+}, E = [], M = /* @__PURE__ */ a(
+  D,
+  $,
+  E
+);
+const F = M.exports, A = c.create({
+  atom: !0,
+  group: "inline",
+  inline: !0,
+  addNodeView() {
+    return m(F);
+  },
+  addAttributes() {
+    return {
+      text: {
+        default: 'Please pass in "text" attribute'
+      },
+      "close-button-aria-label": {}
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "meeting-pill"
+      }
+    ];
+  },
+  renderText({ node: t }) {
+    return "/dpm";
+  },
+  renderHTML({ HTMLAttributes: t }) {
+    return ["meeting-pill", u(t)];
+  }
+}), R = {
+  name: "DtRecipeMessageInput",
+  components: {
+    DtButton: r,
+    DtEmojiPicker: S,
+    DtInput: w,
+    DtPopover: O,
+    DtRecipeMessageInputTopbar: T,
+    DtRecipeMessageInputLink: v,
+    DtRichTextEditor: I,
+    DtTooltip: C,
+    DtStack: j,
+    DtIconImage: f,
+    DtIconVerySatisfied: b,
+    DtIconSatisfied: k,
+    DtIconSend: _
+  },
+  mixins: [],
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Displays all the buttons for rich text formatting above the message input, and enables it within the editor.
+     * Rich text formatting for the purposes of this component is defined as:
+     *
+     * bold, italic, strikethrough, lists, blockquotes, inline code tags, and code blocks.
+     *
+     * If you are sending a message to a phone rather than a Dialpad to Dialpad message, you should have this as false.
+     */
+    richText: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Value of the input. The object format should match TipTap's JSON
+     * document structure: https://tiptap.dev/guide/output#option-1-json
+     */
+    value: {
+      type: [Object, String],
+      default: ""
+    },
+    /**
+     * Whether the input is editable
+     */
+    editable: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Descriptive label for the input element
+     */
+    inputAriaLabel: {
+      type: String,
+      required: !0,
+      default: ""
+    },
+    /**
+     * Prevents the user from typing any further. Deleting text will still work.
+     */
+    preventTyping: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Additional class name for the input element. Only accepts a String value
+     * because this is passed to the editor via options. For multiple classes,
+     * join them into one string, e.g. "d-p8 d-hmx96"
+     */
+    inputClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether the input should receive focus after the component has been
+     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.
+     * - `start`  Sets the focus to the beginning of the input
+     * - `end`    Sets the focus to the end of the input
+     * - `all`    Selects the whole contents of the input
+     * - `Number` Sets the focus to a specific position in the input
+     * - `true`   Defaults to `start`
+     * - `false`  Disables autofocus
+     * @values true, false, start, end, all, number
+     */
+    autoFocus: {
+      type: [Boolean, String, Number],
+      default: !1,
+      validator(t) {
+        return typeof t == "string" ? B.includes(t) : !0;
+      }
+    },
+    /**
+     * The output format that the editor uses when emitting the "@input" event.
+     * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for
+     * examples.
+     * @values text, json, html
+     */
+    outputFormat: {
+      type: String,
+      default: "json",
+      validator(t) {
+        return P.includes(t);
+      }
+    },
+    /**
+     * Placeholder text
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Disable Send Button
+     */
+    disableSend: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Content area needs to dynamically adjust height based on the conversation area height.
+     * can be vh|px|rem|em|%
+     */
+    maxHeight: {
+      type: String,
+      default: "unset"
+    },
+    // Emoji picker props
+    showEmojiPicker: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Props to pass into the emoji picker.
+     */
+    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"
+    },
+    /**
+     * Enable character Limit warning
+     */
+    showCharacterLimit: {
+      type: [Boolean, Object],
+      default: () => ({ count: 1500, warning: 500, message: "" })
+    },
+    showImagePicker: {
+      type: [Boolean, Object],
+      default: () => ({ tooltipLabel: "Attach Image", ariaLabel: "image button" })
+    },
+    /**
+     * Send button defaults.
+     */
+    showSend: {
+      type: [Boolean, Object],
+      default: () => ({})
+    },
+    /**
+     * Cancel button defaults.
+     */
+    showCancel: {
+      type: [Boolean, Object],
+      default: () => ({ text: "Cancel" })
+    },
+    /**
+     * suggestion object containing the items query function.
+     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
+     *
+     * The only required key is the items function which is used to query the contacts for suggestion.
+     * items({ query }) => { return [ContactObject]; }
+     * ContactObject format:
+     * { name: string, avatarSrc: string, id: string }
+     *
+     * When null, it does not add the plugin.
+     */
+    mentionSuggestion: {
+      type: Object,
+      default: null
+    },
+    /**
+     * suggestion object containing the items query function.
+     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
+     *
+     * The only required key is the items function which is used to query the channels for suggestion.
+     * items({ query }) => { return [ChannelObject]; }
+     * ChannelObject format:
+     * { name: string, id: string, locked: boolean }
+     *
+     * When null, it does not add the plugin. Setting locked to true will display a lock rather than hash.
+     */
+    channelSuggestion: {
+      type: Object,
+      default: null
+    },
+    /**
+     * suggestion object containing the items query function.
+     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
+     *
+     * The only required key is the items function which is used to query the slash commands for suggestion.
+     * items({ query }) => { return [SlashCommandObject]; }
+     * SlashCommandObject format:
+     * { command: string, description: string, parametersExample?: string }
+     * The "parametersExample" parameter is optional, and describes an example
+     * of the parameters that command can take.
+     *
+     * When null, it does not add the plugin.
+     */
+    slashCommandSuggestion: {
+      type: Object,
+      default: null
+    },
+    /**
+     * descriptive text fields for the bold button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     */
+    boldButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle bold on selected text",
+        tooltipText: "Bold",
+        keyboardShortcutText: "Mod + B"
+      })
+    },
+    /**
+     * descriptive text fields for the italic button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     */
+    italicButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle italic on selected text",
+        tooltipText: "Italic",
+        keyboardShortcutText: "Mod + I"
+      })
+    },
+    /**
+     * descriptive text fields for the strikethrough button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     */
+    strikeButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle strikethrough on selected text",
+        tooltipText: "Strikethrough",
+        keyboardShortcutText: "Mod + Shift + S"
+      })
+    },
+    /**
+     * descriptive text fields for the link button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: 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"
+      })
+    },
+    /**
+     * descriptive text fields for the bullet list button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     */
+    bulletListButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle bullet list on selected text",
+        tooltipText: "Bullet list",
+        keyboardShortcutText: "Mod + Shift + 8"
+      })
+    },
+    /**
+     * descriptive text fields for the ordered list button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     */
+    orderedListButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle ordered list on selected text",
+        tooltipText: "Ordered list",
+        keyboardShortcutText: "Mod + Shift + 7"
+      })
+    },
+    /**
+     * descriptive text fields for the italic button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     */
+    blockQuoteButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle Blockquote on selected text",
+        tooltipText: "Blockquote",
+        keyboardShortcutText: "Mod + Shift + B"
+      })
+    },
+    /**
+     * descriptive text fields for the code button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     */
+    codeButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle code tag on selected text",
+        tooltipText: "Code",
+        keyboardShortcutText: "Mod + E"
+      })
+    },
+    /**
+     * descriptive text fields for the code block button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     */
+    codeBlockButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle code block on selected text",
+        tooltipText: "Code block",
+        keyboardShortcutText: "Mod + Alt + C"
+      })
+    }
+  },
+  emits: [
+    /**
+     * Fires when send button is clicked
+     *
+     * @event submit
+     * @type {String}
+     */
+    "submit",
+    /**
+     * Fires when media is selected from image button
+     *
+     * @event select-media
+     * @type {Array}
+     */
+    "select-media",
+    /**
+     * Fires when media is dropped into the message input
+     *
+     * @event add-media
+     * @type {Array}
+     */
+    "add-media",
+    /**
+     * Fires when media is pasted into the message input
+     *
+     * @event paste-media
+     * @type {Array}
+     */
+    "paste-media",
+    /**
+     * Fires when cancel button is pressed (only on edit mode)
+     *
+     * @event cancel
+     * @type {Boolean}
+     */
+    "cancel",
+    /**
+     * Fires when skin tone is selected from the emoji picker
+     *
+     * @event skin-tone
+     * @type {String}
+     */
+    "skin-tone",
+    /**
+     * Fires when emoji is selected from the emoji picker
+     *
+     * @event selected-emoji
+     * @type {String}
+     */
+    "selected-emoji",
+    /**
+     * Fires when a slash command is selected
+     *
+     * @event selected-command
+     * @type {String}
+     */
+    "selected-command",
+    /**
+     * Fires when meeting pill is closed
+     *
+     * @event meeting-pill-close
+     * @type {String}
+     */
+    "meeting-pill-close",
+    /**
+     * Event to sync the value with the parent
+     * @event update:value
+     * @type {String|JSON}
+     */
+    "update:value",
+    /**
+     * Emitted when input changes, returns text content only
+     * @event text-input
+     * @type {String}
+     */
+    "text-input"
+  ],
+  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: l,
+      additionalExtensions: [A],
+      internalInputValue: this.value,
+      // internal input content
+      imagePickerFocus: !1,
+      emojiPickerFocus: !1,
+      emojiPickerOpened: !1,
+      isFocused: !1,
+      linkOptions: {
+        class: "d-link d-c-text d-d-inline-block"
+      },
+      linkDialogOpen: !1,
+      selectedText: "",
+      text: "",
+      hideLinkBubbleMenu: !1
+    };
+  },
+  computed: {
+    showSendIcon() {
+      return !this.showSend.text;
+    },
+    inputLength() {
+      return this.text.length;
+    },
+    displayCharacterLimitWarning() {
+      return !!this.showCharacterLimit && this.showCharacterLimit.count - this.inputLength <= this.showCharacterLimit.warning;
+    },
+    characterLimitTooltipEnabled() {
+      return this.showCharacterLimit.message && this.showCharacterLimit.count - this.inputLength < 0;
+    },
+    isSendDisabled() {
+      return this.disableSend || this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count;
+    },
+    computedCloseButtonProps() {
+      return {
+        ariaLabel: "Close"
+      };
+    },
+    emojiPickerHovered() {
+      return this.emojiPickerFocus || this.emojiPickerOpened;
+    },
+    sendIconSize() {
+      return "300";
+    }
+  },
+  watch: {
+    value(t) {
+      this.internalInputValue = t;
+    },
+    emojiPickerOpened(t) {
+      var e;
+      t || (e = this.$refs.richTextEditor) == null || e.focusEditor();
+    }
+  },
+  created() {
+    this.value && this.outputFormat === "text" ? this.internalInputValue = this.value.replace(/\n/g, "<br>") : this.internalInputValue = this.value;
+  },
+  methods: {
+    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 n;
+      const e = (n = this.$refs.richTextEditor) == null ? void 0 : n.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(),
+        bulletList: () => e == null ? void 0 : e.chain().focus().toggleBulletList().run(),
+        orderedList: () => e == null ? void 0 : e.chain().focus().toggleOrderedList().run(),
+        blockquote: () => e == null ? void 0 : e.chain().focus().toggleBlockquote().run(),
+        code: () => e == null ? void 0 : e.chain().focus().toggleCode().run(),
+        codeBlock: () => e == null ? void 0 : e.chain().focus().toggleCodeBlock().run()
+      };
+      e && i[t] && i[t]();
+    },
+    // 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, n, 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 = (n = this.$refs.richTextEditor) == null ? void 0 : n.editor) == null ? void 0 : o.isActive(t)) && this.isFocused;
+    },
+    initLinkDialog() {
+      var t, e, i;
+      this.$refs.link.setInitialValues(this.selectedText, (i = (e = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : e.getAttributes("link")) == null ? void 0 : i.href), this.hideLinkBubbleMenu = !0, this.linkDialogOpen = !0;
+    },
+    removeLink() {
+      var t;
+      (t = this.$refs.richTextEditor) == null || t.removeLink(), this.linkDialogOpen = !1;
+    },
+    setLink(t, e) {
+      this.$refs.richTextEditor.setLink(
+        e,
+        t,
+        this.linkOptions,
+        L,
+        y
+      ), this.linkDialogOpen = !1;
+    },
+    // Mousedown instead of click because it fires before the blur event.
+    onMousedown(t) {
+      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);
+      this.$emit("add-media", i);
+    },
+    onPaste(t) {
+      if (t.clipboardData.files.length) {
+        t.stopPropagation(), t.preventDefault();
+        const e = [...t.clipboardData.files];
+        this.$emit("paste-media", e);
+      }
+    },
+    onSkinTone(t) {
+      this.$emit("skin-tone", t);
+    },
+    onSelectEmoji(t, e) {
+      t && (t.shift_key || e(), this.$refs.richTextEditor.editor.commands.insertContent({
+        type: "emoji",
+        attrs: {
+          code: t.shortname
+        }
+      }), this.$emit("selected-emoji", t));
+    },
+    onSelectImage() {
+      this.$refs.messageInputImageUpload.$refs.input.click();
+    },
+    onImageUpload() {
+      this.$emit("select-media", this.$refs.messageInputImageUpload.$refs.input.files);
+    },
+    toggleEmojiPicker() {
+      this.emojiPickerOpened = !this.emojiPickerOpened;
+    },
+    onSend() {
+      this.isSendDisabled || this.$emit("submit", this.internalInputValue);
+    },
+    onCancel() {
+      this.$emit("cancel");
+    },
+    onInput(t) {
+      this.$emit("update:value", t);
+    },
+    onTextInput(t) {
+      this.text = t, this.$emit("text-input", t);
+    }
+  }
+};
+var q = function() {
+  var n;
+  var e = this, i = e._self._c;
+  return i("div", { staticClass: "d-recipe-message-input", attrs: { "data-qa": "dt-recipe-message-input", role: "presentation" }, on: { dragover: function(o) {
+    o.preventDefault();
+  }, drop: function(o) {
+    return o.preventDefault(), e.onDrop.apply(null, arguments);
+  }, paste: e.onPaste, mousedown: e.onMousedown } }, [e._t("top"), e.richText ? i("dt-recipe-message-input-topbar", { key: e.selectedText, attrs: { "bold-button-options": e.boldButtonOptions, "italic-button-options": e.italicButtonOptions, "strike-button-options": e.strikeButtonOptions, "bullet-list-button-options": e.bulletListButtonOptions, "ordered-list-button-options": e.orderedListButtonOptions, "block-quote-button-options": e.blockQuoteButtonOptions, "code-button-options": e.codeButtonOptions, "code-block-button-options": e.codeBlockButtonOptions, "is-selection-active": e.isSelectionActive }, on: { click: e.handleTopbarClick }, scopedSlots: e._u([{ key: "link", fn: function() {
+    return [i("dt-recipe-message-input-link", { ref: "link", attrs: { open: e.linkDialogOpen, "link-button-options": e.linkButtonOptions, "is-selection-active": e.isSelectionActive }, on: { opened: e.linkDialogOpened, "set-link": e.setLink, "remove-link": e.removeLink } })];
+  }, proxy: !0 }], null, !1, 1527282285) }) : e._e(), i("div", { directives: [{ name: "dt-scrollbar", rawName: "v-dt-scrollbar" }], staticClass: "d-recipe-message-input__editor-wrapper", style: { "max-height": e.maxHeight } }, [i("dt-rich-text-editor", e._g(e._b({ ref: "richTextEditor", attrs: { editable: e.editable, "input-aria-label": e.inputAriaLabel, "input-class": e.inputClass, "output-format": e.outputFormat, "auto-focus": e.autoFocus, link: e.richText, placeholder: e.placeholder, "prevent-typing": e.preventTyping, "mention-suggestion": e.mentionSuggestion, "channel-suggestion": e.channelSuggestion, "slash-command-suggestion": e.slashCommandSuggestion, "allow-blockquote": e.richText, "allow-bold": e.richText, "allow-bullet-list": e.richText, "allow-code": e.richText, "allow-codeblock": e.richText, "allow-italic": e.richText, "allow-strike": e.richText, "allow-underline": e.richText, "additional-extensions": e.additionalExtensions, "hide-link-bubble-menu": e.hideLinkBubbleMenu }, on: { input: e.onInput, "text-input": e.onTextInput, enter: e.onSend, selected: function(o) {
+    e.selectedText = o;
+  }, "edit-link": e.initLinkDialog, focus: function(o) {
+    e.isFocused = !0;
+  }, blur: function(o) {
+    e.isFocused = !1;
+  } }, model: { value: e.internalInputValue, callback: function(o) {
+    e.internalInputValue = o;
+  }, expression: "internalInputValue" } }, "dt-rich-text-editor", e.$attrs, !1), e.$listeners))], 1), e._t("middle"), i("section", { staticClass: "d-recipe-message-input__bottom-section" }, [i("div", { staticClass: "d-recipe-message-input__bottom-section-left" }, [i("dt-stack", { attrs: { direction: "row", gap: "200" } }, [e.showImagePicker ? i("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-start", value: (n = e.showImagePicker) == null ? void 0 : n.tooltipLabel, expression: "showImagePicker?.tooltipLabel", arg: "top-start" }], staticClass: "d-recipe-message-input__button", attrs: { "data-qa": "dt-recipe-message-input-image-btn", size: "sm", kind: "muted", importance: "clear", "aria-label": e.showImagePicker.ariaLabel }, on: { click: e.onSelectImage, mouseenter: function(o) {
+    e.imagePickerFocus = !0;
+  }, mouseleave: function(o) {
+    e.imagePickerFocus = !1;
+  }, focus: function(o) {
+    e.imagePickerFocus = !0;
+  }, blur: function(o) {
+    e.imagePickerFocus = !1;
+  } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [i("dt-icon-image", { attrs: { size: "300" } })];
+  }, proxy: !0 }], null, !1, 4195307205) }) : e._e(), i("dt-input", { ref: "messageInputImageUpload", staticClass: "d-recipe-message-input__image-input", attrs: { "data-qa": "dt-recipe-message-input-image-input", accept: "image/*, video/*", type: "file", multiple: "", hidden: "" }, on: { input: e.onImageUpload } }), e.showEmojiPicker ? i("dt-popover", { attrs: { "open.sync": "emojiPickerOpened", "data-qa": "dt-recipe-message-input-emoji-picker-popover", "initial-focus-element": "#searchInput", padding: "none" }, scopedSlots: e._u([{ key: "anchor", fn: function({ attrs: o }) {
+    return [i("dt-button", e._b({ directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: e.emojiTooltipMessage, expression: "emojiTooltipMessage" }], staticClass: "d-recipe-message-input__button", attrs: { "data-qa": "dt-recipe-message-input-emoji-picker-btn", size: "sm", kind: "muted", importance: "clear", "aria-label": e.emojiButtonAriaLabel }, on: { click: e.toggleEmojiPicker, mouseenter: function(s) {
+      e.emojiPickerFocus = !0;
+    }, mouseleave: function(s) {
+      e.emojiPickerFocus = !1;
+    }, focus: function(s) {
+      e.emojiPickerFocus = !0;
+    }, blur: function(s) {
+      e.emojiPickerFocus = !1;
+    } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+      return [e.emojiPickerHovered ? i("dt-icon-very-satisfied", { attrs: { size: "300" } }) : i("dt-icon-satisfied", { attrs: { size: "300" } })];
+    }, proxy: !0 }], null, !0) }, "dt-button", o, !1))];
+  } }, { key: "content", fn: function({ close: o }) {
+    return [i("dt-emoji-picker", e._b({ on: { "skin-tone": e.onSkinTone, "selected-emoji": (s) => e.onSelectEmoji(s, o) } }, "dt-emoji-picker", e.emojiPickerProps, !1))];
+  } }], null, !1, 3974835042) }) : e._e(), e._t("emojiGiphyPicker"), e._t("customActionIcons")], 2)], 1), i("div", { staticClass: "d-recipe-message-input__bottom-section-right" }, [i("dt-stack", { attrs: { direction: "row", gap: "300" } }, [i("div", { staticClass: "d-recipe-message-input__sms-count" }, [e._t("smsCount")], 2), e.showCharacterLimit ? i("dt-tooltip", { staticClass: "d-recipe-message-input__remaining-char-tooltip", attrs: { placement: "top-end", enabled: e.characterLimitTooltipEnabled, message: e.showCharacterLimit.message, offset: [10, 8] }, scopedSlots: e._u([{ key: "anchor", fn: function() {
+    return [i("p", { directives: [{ name: "show", rawName: "v-show", value: e.displayCharacterLimitWarning, expression: "displayCharacterLimitWarning" }], staticClass: "d-recipe-message-input__remaining-char", attrs: { "data-qa": "dt-recipe-message-input-character-limit" } }, [e._v(" " + e._s(e.showCharacterLimit.count - e.inputLength) + " ")])];
+  }, proxy: !0 }], null, !1, 1021505058) }) : e._e(), e.showCancel ? i("dt-button", { staticClass: "d-recipe-message-input__button d-recipe-message-input__cancel-button", attrs: { "data-qa": "dt-recipe-message-input-cancel-button", size: "sm", kind: "muted", importance: "clear", "aria-label": e.showCancel.ariaLabel }, on: { click: e.onCancel } }, [i("p", [e._v(e._s(e.showCancel.text))])]) : e._e(), e._t("sendButton", function() {
+    var o;
+    return [e.showSend ? i("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-end", value: (o = e.showSend) == null ? void 0 : o.tooltipLabel, expression: "showSend?.tooltipLabel", arg: "top-end" }], class: [
+      "d-recipe-message-input__button d-recipe-message-input__send-button",
+      {
+        "d-recipe-message-input__send-button--disabled": e.isSendDisabled,
+        "d-btn--icon-only": e.showSendIcon
+      }
+    ], attrs: { "data-qa": "dt-recipe-message-input-send-btn", size: "sm", kind: "default", importance: "primary", "aria-label": e.showSend.ariaLabel, "aria-disabled": e.isSendDisabled }, on: { click: e.onSend }, scopedSlots: e._u([e.showSendIcon ? { key: "icon", fn: function() {
+      return [e._t("sendIcon", function() {
+        return [i("dt-icon-send", { attrs: { size: e.sendIconSize } })];
+      }, { iconSize: e.sendIconSize })];
+    }, proxy: !0 } : null], null, !0) }, [e.showSend.text ? [i("p", [e._v(e._s(e.showSend.text))])] : e._e()], 2) : e._e()];
+  })], 2)], 1)])], 2);
+}, z = [], V = /* @__PURE__ */ a(
+  R,
+  q,
+  z
+);
+const ae = V.exports;
+export {
+  ae as default
+};
+//# sourceMappingURL=message-input.js.map