@dialpad/dialtone-vue 2.127.0 → 2.127.2

package/dist/lib/message-input.cjs

@@ -1,2 +1,555 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),s=require("./button.cjs"),l=require("./emoji-picker.cjs"),u=require("./icon.cjs"),c=require("./input.cjs"),d=require("./popover.cjs"),o=require("./rich-text-editor.cjs"),p=require("./tooltip.cjs");require("vue");require("../chunks/link_constants-Kn6kP4i1.js");require("../chunks/tab-7hJQSLFx.js");require("@dialpad/dialtone-emojis");require("@dialpad/dialtone-icons/vue2");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("./constants.cjs");require("./utils.cjs");require("../chunks/input-o-fc1X4b.js");require("./validators.cjs");require("./validation-messages.cjs");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("./lazy-show.cjs");require("@linusborg/vue-simple-portal");require("../chunks/modal-qEzlo0Sj.js");require("../chunks/sr_only_close_button-ErijKGYR.js");require("@tiptap/vue-2");require("@tiptap/extension-blockquote");require("@tiptap/extension-code-block");require("@tiptap/extension-document");require("@tiptap/extension-hard-break");require("@tiptap/extension-paragraph");require("@tiptap/extension-placeholder");require("@tiptap/extension-bold");require("@tiptap/extension-bullet-list");require("@tiptap/extension-italic");require("@tiptap/extension-link");require("@tiptap/extension-list-item");require("@tiptap/extension-ordered-list");require("@tiptap/extension-strike");require("@tiptap/extension-underline");require("@tiptap/extension-text");require("@tiptap/extension-text-align");require("@tiptap/core");require("../chunks/index-sdfB7Aok.js");require("emoji-regex");require("emoji-toolkit/emoji_strategy.json");require("./skeleton.cjs");require("@tiptap/pm/state");require("@tiptap/suggestion");require("./list-item.cjs");require("../chunks/list_item_constants-Tsz5CO1m.js");require("./item-layout.cjs");require("./stack.cjs");require("../chunks/stack_constants-m9Ickqw0.js");require("@tiptap/extension-mention");require("./link.cjs");require("./avatar.cjs");require("./presence.cjs");const m={name:"DtRecipeMessageInput",components:{DtButton:s.DtButton,DtEmojiPicker:l.DtEmojiPicker,DtIcon:u.DtIcon,DtInput:c.DtInput,DtPopover:d.DtPopover,DtRichTextEditor:o.DtRichTextEditor,DtTooltip:p.DtTooltip},mixins:[],inheritAttrs:!1,props:{value:{type:[Object,String],default:""},editable:{type:Boolean,default:!0},inputAriaLabel:{type:String,required:!0,default:""},inputClass:{type:String,default:""},autoFocus:{type:[Boolean,String,Number],default:!1,validator(t){return typeof t=="string"?o.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(t):!0}},outputFormat:{type:String,default:"text",validator(t){return o.RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(t)}},link:{type:[Boolean,Object],default:!1},placeholder:{type:String,default:""},disableSend:{type:Boolean,default:!1},maxHeight:{type:String,default:"unset"},showEmojiPicker:{type:Boolean,default:!0},emojiPickerProps:{type:Object,default:()=>({}),validate(t){return["searchNoResultsLabel","searchResultsLabel","searchPlaceholderLabel","skinSelectorButtonTooltipLabel","tabSetLabels"].every(e=>t[e]!=null)}},emojiTooltipMessage:{type:String,default:"Emoji"},emojiButtonAriaLabel:{type:String,default:"emoji button"},showCharacterLimit:{type:[Boolean,Object],default:()=>({count:1500,warning:500,message:""})},showImagePicker:{type:[Boolean,Object],default:()=>({tooltipLabel:"Attach Image",ariaLabel:"image button"})},showSend:{type:[Boolean,Object],default:()=>({icon:"send"})},showCancel:{type:[Boolean,Object],default:()=>({text:"Cancel"})},mentionSuggestion:{type:Object,default:null},allowBlockquote:{type:Boolean,default:!0},allowBold:{type:Boolean,default:!0},allowBulletList:{type:Boolean,default:!0},allowItalic:{type:Boolean,default:!0},allowStrike:{type:Boolean,default:!0},allowUnderline:{type:Boolean,default:!0}},emits:["submit","select-media","add-media","paste-media","cancel","skin-tone","selected-emoji","focus","blur","input"],data(){return{internalInputValue:this.value,hasFocus:!1,imagePickerFocus:!1,emojiPickerFocus:!1,sendButtonFocus:!1,emojiPickerOpened:!1}},computed:{inputLength(){return this.internalInputValue.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}},watch:{value(t){this.internalInputValue=t}},methods:{onDrag(t){t.stopPropagation(),t.preventDefault()},onDrop(t){t.stopPropagation(),t.preventDefault();const e=t.dataTransfer,r=Array.from(e.files);this.$emit("add-media",r)},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){if(!t){this.emojiPickerOpened=!1;return}this.$refs.richTextEditor.editor.commands.insertContent({type:"emoji",attrs:{code:t.shortname}}),this.emojiPickerOpened=!1,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")},onFocus(t){var e;this.hasFocus=!0,(e=this.$refs.richTextEditor)==null||e.focusEditor(),this.$emit("focus",t)},onBlur(t){this.hasFocus=!1,this.$emit("blur",t)},onInput(t){this.$emit("input",t)}}};var f=function(){var e=this,r=e._self._c;return r("div",{class:["d-d-flex","d-fd-column","d-bar8","d-baw1","d-ba","d-c-text",{"d-bc-bold d-bs-sm":e.hasFocus,"d-bc-default":!e.hasFocus}],attrs:{"data-qa":"dt-message-input",role:"presentation"},on:{click:function(i){var n;(n=e.$refs.richTextEditor)==null||n.focusEditor()},"drag-enter":e.onDrag,"drag-over":e.onDrag,drop:e.onDrop,keydown:function(i){return!i.type.indexOf("key")&&e._k(i.keyCode,"enter",13,i.key,"Enter")||i.ctrlKey||i.shiftKey||i.altKey||i.metaKey?null:e.onSend.apply(null,arguments)},paste:e.onPaste}},[r("div",{staticClass:"d-of-auto d-mx16 d-mt8 d-mb4",style:{"max-height":e.maxHeight}},[r("dt-rich-text-editor",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.link,placeholder:e.placeholder,"mention-suggestion":e.mentionSuggestion,"allow-blockquote":e.allowBlockquote,"allow-bold":e.allowBold,"allow-bullet-list":e.allowBulletList,"allow-italic":e.allowItalic,"allow-strike":e.allowStrike,"allow-underline":e.allowUnderline},on:{focus:e.onFocus,blur:e.onBlur,input:function(i){return e.onInput(i)}},model:{value:e.internalInputValue,callback:function(i){e.internalInputValue=i},expression:"internalInputValue"}},"dt-rich-text-editor",e.$attrs,!1))],1),e._t("middle"),r("section",{staticClass:"d-d-flex d-jc-space-between d-mx8 d-my4"},[r("div",{staticClass:"d-d-flex"},[e.showImagePicker?r("dt-tooltip",{attrs:{placement:"top-start",message:e.showImagePicker.tooltipLabel,offset:[-4,-4]},scopedSlots:e._u([{key:"anchor",fn:function(){return[r("dt-button",{attrs:{"data-qa":"dt-message-input-image-btn",size:"sm",circle:"",kind:e.imagePickerFocus?"default":"muted",importance:"clear","aria-label":e.showImagePicker.ariaLabel},on:{click:e.onSelectImage,mouseenter:function(i){e.imagePickerFocus=!0},mouseleave:function(i){e.imagePickerFocus=!1},focus:function(i){e.imagePickerFocus=!0},blur:function(i){e.imagePickerFocus=!1}},scopedSlots:e._u([{key:"icon",fn:function(){return[r("dt-icon",{attrs:{name:"image",size:"300"}})]},proxy:!0}],null,!1,2561380377)}),r("dt-input",{ref:"messageInputImageUpload",staticClass:"d-ps-absolute",attrs:{"data-qa":"dt-message-input-image-input",type:"file",multiple:"",hidden:""},on:{input:e.onImageUpload}})]},proxy:!0}],null,!1,3687934814)}):e._e(),e.showEmojiPicker?r("dt-popover",{attrs:{"data-qa":"dt-message-input-emoji-picker-popover",open:e.emojiPickerOpened,"initial-focus-element":"#searchInput",padding:"none"},on:{opened:i=>{e.emojiPickerOpened=i}},scopedSlots:e._u([{key:"anchor",fn:function(){return[r("dt-tooltip",{attrs:{message:e.emojiTooltipMessage,offset:[0,-4]},scopedSlots:e._u([{key:"anchor",fn:function(){return[r("dt-button",{attrs:{"data-qa":"dt-message-input-emoji-picker-btn",size:"sm",circle:"",kind:e.emojiPickerHovered?"default":"muted",importance:"clear","aria-label":e.emojiButtonAriaLabel,offset:[0,0]},on:{click:e.toggleEmojiPicker,mouseenter:function(i){e.emojiPickerFocus=!0},mouseleave:function(i){e.emojiPickerFocus=!1},focus:function(i){e.emojiPickerFocus=!0},blur:function(i){e.emojiPickerFocus=!1}},scopedSlots:e._u([{key:"icon",fn:function(){return[r("dt-icon",{attrs:{name:e.emojiPickerHovered?"very-satisfied":"satisfied",size:"300"}})]},proxy:!0}],null,!1,352772906)})]},proxy:!0}],null,!1,3933528398)})]},proxy:!0},{key:"content",fn:function(){return[r("dt-emoji-picker",e._b({on:{"skin-tone":e.onSkinTone,"selected-emoji":e.onSelectEmoji}},"dt-emoji-picker",e.emojiPickerProps,!1))]},proxy:!0}],null,!1,1278205067)}):e._e()],1),r("div",{staticClass:"d-d-flex"},[e.showCharacterLimit?r("dt-tooltip",{staticClass:"dt-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[r("p",{directives:[{name:"show",rawName:"v-show",value:e.displayCharacterLimitWarning,expression:"displayCharacterLimitWarning"}],staticClass:"d-fc-error d-mr16 dt-message-input--remaining-char",attrs:{"data-qa":"dt-message-input-character-limit"}},[e._v(" "+e._s(e.showCharacterLimit.count-e.inputLength)+" ")])]},proxy:!0}],null,!1,2591914334)}):e._e(),e.showCancel?r("dt-button",{staticClass:"dt-message-input--cancel-button",attrs:{"data-qa":"dt-message-input-cancel-button",size:"sm",kind:"muted",importance:"clear","aria-label":e.showCancel.ariaLabel},on:{click:e.onCancel}},[r("p",[e._v(e._s(e.showCancel.text))])]):e._e(),e.showSend?r("dt-tooltip",{attrs:{placement:"top-end",enabled:!e.showSend,message:e.showSend.tooltipLabel,show:!e.isSendDisabled&&e.sendButtonFocus,offset:[6,-8]},scopedSlots:e._u([{key:"anchor",fn:function(){return[r("dt-button",{class:[{"message-input-button__disabled d-fc-muted":e.isSendDisabled,"d-btn--circle":e.showSend.icon}],attrs:{"data-qa":"dt-message-input-send-btn",size:"sm",kind:"default",importance:"primary","aria-label":e.showSend.ariaLabel,"aria-disabled":e.isSendDisabled},on:{click:e.onSend,mouseenter:function(i){e.sendButtonFocus=!0},mouseleave:function(i){e.sendButtonFocus=!1},focus:function(i){e.sendButtonFocus=!0},blur:function(i){e.sendButtonFocus=!1}},scopedSlots:e._u([e.showSend.icon?{key:"icon",fn:function(){return[r("dt-icon",{attrs:{name:e.showSend.icon,size:"300"}})]},proxy:!0}:null],null,!0)},[e.showSend.text?[r("p",[e._v(e._s(e.showSend.text))])]:e._e()],2)]},proxy:!0}],null,!1,2570122596)}):e._e()],1)])],2)},h=[],g=a.n(m,f,h,!1,null,null,null,null);const b=g.exports;exports.DtRecipeMessageInput=b;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const lib_button = require("./button.cjs");
+const lib_emojiPicker = require("./emoji-picker.cjs");
+const lib_icon = require("./icon.cjs");
+const lib_input = require("./input.cjs");
+const lib_popover = require("./popover.cjs");
+const lib_richTextEditor = require("./rich-text-editor.cjs");
+const lib_tooltip = require("./tooltip.cjs");
+require("vue");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("../chunks/tab-FcsV5VmK.js");
+require("@dialpad/dialtone-emojis");
+require("@dialpad/dialtone-icons/vue2");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("../common/constants.cjs");
+require("../common/utils.cjs");
+require("../chunks/input-Axw-wFj2.js");
+require("../common/validators.cjs");
+require("./validation-messages.cjs");
+require("../chunks/popover_constants-JwBF9h1Z.js");
+require("tippy.js");
+require("./lazy-show.cjs");
+require("@linusborg/vue-simple-portal");
+require("../chunks/modal-VgxXAQFP.js");
+require("../chunks/sr_only_close_button-ZaGdAHz7.js");
+require("@tiptap/vue-2");
+require("@tiptap/extension-blockquote");
+require("@tiptap/extension-code-block");
+require("@tiptap/extension-document");
+require("@tiptap/extension-hard-break");
+require("@tiptap/extension-paragraph");
+require("@tiptap/extension-placeholder");
+require("@tiptap/extension-bold");
+require("@tiptap/extension-bullet-list");
+require("@tiptap/extension-italic");
+require("@tiptap/extension-link");
+require("@tiptap/extension-list-item");
+require("@tiptap/extension-ordered-list");
+require("@tiptap/extension-strike");
+require("@tiptap/extension-underline");
+require("@tiptap/extension-text");
+require("@tiptap/extension-text-align");
+require("@tiptap/core");
+require("./emoji.cjs");
+require("../common/emoji.cjs");
+require("emoji-regex");
+require("emoji-toolkit/emoji_strategy.json");
+require("./skeleton.cjs");
+require("@tiptap/pm/state");
+require("@tiptap/suggestion");
+require("./list-item.cjs");
+require("../chunks/list_item_constants-EiqkqZvP.js");
+require("./item-layout.cjs");
+require("./stack.cjs");
+require("../chunks/stack_constants-SMzMWnAQ.js");
+require("@tiptap/extension-mention");
+require("./link.cjs");
+require("./avatar.cjs");
+require("./presence.cjs");
+const _sfc_main = {
+  name: "DtRecipeMessageInput",
+  components: {
+    DtButton: lib_button.DtButton,
+    DtEmojiPicker: lib_emojiPicker.DtEmojiPicker,
+    DtIcon: lib_icon.DtIcon,
+    DtInput: lib_input.DtInput,
+    DtPopover: lib_popover.DtPopover,
+    DtRichTextEditor: lib_richTextEditor.DtRichTextEditor,
+    DtTooltip: lib_tooltip.DtTooltip
+  },
+  mixins: [],
+  inheritAttrs: false,
+  props: {
+    /**
+     * 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: true
+    },
+    /**
+     * Descriptive label for the input element
+     */
+    inputAriaLabel: {
+      type: String,
+      required: true,
+      default: ""
+    },
+    /**
+     * 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: false,
+      validator(autoFocus) {
+        if (typeof autoFocus === "string") {
+          return lib_richTextEditor.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);
+        }
+        return true;
+      }
+    },
+    /**
+     * 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: "text",
+      validator(outputFormat) {
+        return lib_richTextEditor.RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);
+      }
+    },
+    /**
+     * Enables the Link extension and optionally passes configurations to it
+     */
+    link: {
+      type: [Boolean, Object],
+      default: false
+    },
+    /**
+     * Placeholder text
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Disable Send Button
+     */
+    disableSend: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 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: true
+    },
+    /**
+     * Props to pass into the emoji picker.
+     */
+    emojiPickerProps: {
+      type: Object,
+      default: () => ({}),
+      validate(emojiPickerProps) {
+        return [
+          "searchNoResultsLabel",
+          "searchResultsLabel",
+          "searchPlaceholderLabel",
+          "skinSelectorButtonTooltipLabel",
+          "tabSetLabels"
+        ].every((prop) => emojiPickerProps[prop] != 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: () => ({ icon: "send" })
+    },
+    /**
+     * 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
+    },
+    /**
+     * Whether the input allows for block quote.
+     */
+    allowBlockquote: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for bold to be introduced in the text.
+     */
+    allowBold: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for bullet list to be introduced in the text.
+    */
+    allowBulletList: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for italic to be introduced in the text.
+     */
+    allowItalic: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for strike to be introduced in the text.
+     */
+    allowStrike: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for underline to be introduced in the text.
+     */
+    allowUnderline: {
+      type: Boolean,
+      default: true
+    }
+  },
+  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",
+    /**
+     * Native focus event
+     * @event input
+     * @type {String|JSON}
+     */
+    "focus",
+    /**
+     * Native blur event
+     * @event input
+     * @type {String|JSON}
+     */
+    "blur",
+    /**
+     * Native input event
+     * @event input
+     * @type {String|JSON}
+     */
+    "input"
+  ],
+  data() {
+    return {
+      internalInputValue: this.value,
+      // internal input content
+      hasFocus: false,
+      imagePickerFocus: false,
+      emojiPickerFocus: false,
+      sendButtonFocus: false,
+      emojiPickerOpened: false
+    };
+  },
+  computed: {
+    inputLength() {
+      return this.internalInputValue.length;
+    },
+    displayCharacterLimitWarning() {
+      return Boolean(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;
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.internalInputValue = newValue;
+    }
+  },
+  methods: {
+    onDrag(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    onDrop(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      const dt = e.dataTransfer;
+      const files = Array.from(dt.files);
+      this.$emit("add-media", files);
+    },
+    onPaste(e) {
+      if (e.clipboardData.files.length) {
+        e.stopPropagation();
+        e.preventDefault();
+        const files = [...e.clipboardData.files];
+        this.$emit("paste-media", files);
+      }
+    },
+    onSkinTone(skinTone) {
+      this.$emit("skin-tone", skinTone);
+    },
+    onSelectEmoji(emoji) {
+      if (!emoji) {
+        this.emojiPickerOpened = false;
+        return;
+      }
+      this.$refs.richTextEditor.editor.commands.insertContent({
+        type: "emoji",
+        attrs: {
+          code: emoji.shortname
+        }
+      });
+      this.emojiPickerOpened = false;
+      this.$emit("selected-emoji", emoji);
+    },
+    onSelectImage() {
+      this.$refs.messageInputImageUpload.$refs.input.click();
+    },
+    onImageUpload() {
+      this.$emit("select-media", this.$refs.messageInputImageUpload.$refs.input.files);
+    },
+    toggleEmojiPicker() {
+      this.emojiPickerOpened = !this.emojiPickerOpened;
+    },
+    onSend() {
+      if (this.isSendDisabled) {
+        return;
+      }
+      this.$emit("submit", this.internalInputValue);
+    },
+    onCancel() {
+      this.$emit("cancel");
+    },
+    onFocus(event) {
+      var _a;
+      this.hasFocus = true;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
+      this.$emit("focus", event);
+    },
+    onBlur(event) {
+      this.hasFocus = false;
+      this.$emit("blur", event);
+    },
+    onInput(event) {
+      this.$emit("input", event);
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { class: [
+    "d-d-flex",
+    "d-fd-column",
+    "d-bar8",
+    "d-baw1",
+    "d-ba",
+    "d-c-text",
+    { "d-bc-bold d-bs-sm": _vm.hasFocus, "d-bc-default": !_vm.hasFocus }
+  ], attrs: { "data-qa": "dt-message-input", "role": "presentation" }, on: { "click": function($event) {
+    var _a;
+    (_a = _vm.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
+  }, "drag-enter": _vm.onDrag, "drag-over": _vm.onDrag, "drop": _vm.onDrop, "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
+      return null;
+    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey)
+      return null;
+    return _vm.onSend.apply(null, arguments);
+  }, "paste": _vm.onPaste } }, [_c("div", { staticClass: "d-of-auto d-mx16 d-mt8 d-mb4", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._b({ ref: "richTextEditor", attrs: { "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": _vm.inputClass, "output-format": _vm.outputFormat, "auto-focus": _vm.autoFocus, "link": _vm.link, "placeholder": _vm.placeholder, "mention-suggestion": _vm.mentionSuggestion, "allow-blockquote": _vm.allowBlockquote, "allow-bold": _vm.allowBold, "allow-bullet-list": _vm.allowBulletList, "allow-italic": _vm.allowItalic, "allow-strike": _vm.allowStrike, "allow-underline": _vm.allowUnderline }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": function($event) {
+    return _vm.onInput($event);
+  } }, model: { value: _vm.internalInputValue, callback: function($$v) {
+    _vm.internalInputValue = $$v;
+  }, expression: "internalInputValue" } }, "dt-rich-text-editor", _vm.$attrs, false))], 1), _vm._t("middle"), _c("section", { staticClass: "d-d-flex d-jc-space-between d-mx8 d-my4" }, [_c("div", { staticClass: "d-d-flex" }, [_vm.showImagePicker ? _c("dt-tooltip", { attrs: { "placement": "top-start", "message": _vm.showImagePicker.tooltipLabel, "offset": [-4, -4] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { attrs: { "data-qa": "dt-message-input-image-btn", "size": "sm", "circle": "", "kind": _vm.imagePickerFocus ? "default" : "muted", "importance": "clear", "aria-label": _vm.showImagePicker.ariaLabel }, on: { "click": _vm.onSelectImage, "mouseenter": function($event) {
+      _vm.imagePickerFocus = true;
+    }, "mouseleave": function($event) {
+      _vm.imagePickerFocus = false;
+    }, "focus": function($event) {
+      _vm.imagePickerFocus = true;
+    }, "blur": function($event) {
+      _vm.imagePickerFocus = false;
+    } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_c("dt-icon", { attrs: { "name": "image", "size": "300" } })];
+    }, proxy: true }], null, false, 2561380377) }), _c("dt-input", { ref: "messageInputImageUpload", staticClass: "d-ps-absolute", attrs: { "data-qa": "dt-message-input-image-input", "type": "file", "multiple": "", "hidden": "" }, on: { "input": _vm.onImageUpload } })];
+  }, proxy: true }], null, false, 3687934814) }) : _vm._e(), _vm.showEmojiPicker ? _c("dt-popover", { attrs: { "data-qa": "dt-message-input-emoji-picker-popover", "open": _vm.emojiPickerOpened, "initial-focus-element": "#searchInput", "padding": "none" }, on: { "opened": (open) => {
+    _vm.emojiPickerOpened = open;
+  } }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-tooltip", { attrs: { "message": _vm.emojiTooltipMessage, "offset": [0, -4] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+      return [_c("dt-button", { attrs: { "data-qa": "dt-message-input-emoji-picker-btn", "size": "sm", "circle": "", "kind": _vm.emojiPickerHovered ? "default" : "muted", "importance": "clear", "aria-label": _vm.emojiButtonAriaLabel, "offset": [0, 0] }, on: { "click": _vm.toggleEmojiPicker, "mouseenter": function($event) {
+        _vm.emojiPickerFocus = true;
+      }, "mouseleave": function($event) {
+        _vm.emojiPickerFocus = false;
+      }, "focus": function($event) {
+        _vm.emojiPickerFocus = true;
+      }, "blur": function($event) {
+        _vm.emojiPickerFocus = false;
+      } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+        return [_c("dt-icon", { attrs: { "name": !_vm.emojiPickerHovered ? "satisfied" : "very-satisfied", "size": "300" } })];
+      }, proxy: true }], null, false, 352772906) })];
+    }, proxy: true }], null, false, 3933528398) })];
+  }, proxy: true }, { key: "content", fn: function() {
+    return [_c("dt-emoji-picker", _vm._b({ on: { "skin-tone": _vm.onSkinTone, "selected-emoji": _vm.onSelectEmoji } }, "dt-emoji-picker", _vm.emojiPickerProps, false))];
+  }, proxy: true }], null, false, 1278205067) }) : _vm._e()], 1), _c("div", { staticClass: "d-d-flex" }, [Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", { staticClass: "dt-message-input--remaining-char-tooltip", attrs: { "placement": "top-end", "enabled": _vm.characterLimitTooltipEnabled, "message": _vm.showCharacterLimit.message, "offset": [10, -8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("p", { directives: [{ name: "show", rawName: "v-show", value: _vm.displayCharacterLimitWarning, expression: "displayCharacterLimitWarning" }], staticClass: "d-fc-error d-mr16 dt-message-input--remaining-char", attrs: { "data-qa": "dt-message-input-character-limit" } }, [_vm._v(" " + _vm._s(_vm.showCharacterLimit.count - _vm.inputLength) + " ")])];
+  }, proxy: true }], null, false, 2591914334) }) : _vm._e(), _vm.showCancel ? _c("dt-button", { staticClass: "dt-message-input--cancel-button", attrs: { "data-qa": "dt-message-input-cancel-button", "size": "sm", "kind": "muted", "importance": "clear", "aria-label": _vm.showCancel.ariaLabel }, on: { "click": _vm.onCancel } }, [_c("p", [_vm._v(_vm._s(_vm.showCancel.text))])]) : _vm._e(), _vm.showSend ? _c("dt-tooltip", { attrs: { "placement": "top-end", "enabled": !_vm.showSend, "message": _vm.showSend.tooltipLabel, "show": !_vm.isSendDisabled && _vm.sendButtonFocus, "offset": [6, -8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { class: [
+      {
+        "message-input-button__disabled d-fc-muted": _vm.isSendDisabled,
+        "d-btn--circle": _vm.showSend.icon
+      }
+    ], attrs: { "data-qa": "dt-message-input-send-btn", "size": "sm", "kind": "default", "importance": "primary", "aria-label": _vm.showSend.ariaLabel, "aria-disabled": _vm.isSendDisabled }, on: { "click": _vm.onSend, "mouseenter": function($event) {
+      _vm.sendButtonFocus = true;
+    }, "mouseleave": function($event) {
+      _vm.sendButtonFocus = false;
+    }, "focus": function($event) {
+      _vm.sendButtonFocus = true;
+    }, "blur": function($event) {
+      _vm.sendButtonFocus = false;
+    } }, scopedSlots: _vm._u([_vm.showSend.icon ? { key: "icon", fn: function() {
+      return [_c("dt-icon", { attrs: { "name": _vm.showSend.icon, "size": "300" } })];
+    }, proxy: true } : null], null, true) }, [_vm.showSend.text ? [_c("p", [_vm._v(_vm._s(_vm.showSend.text))])] : _vm._e()], 2)];
+  }, proxy: true }], null, false, 2570122596) }) : _vm._e()], 1)])], 2);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const message_input = __component__.exports;
+exports.DtRecipeMessageInput = message_input;
 //# sourceMappingURL=message-input.cjs.map