@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/message-input.cjs

@@ -1,2 +1,709 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),g=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),b=require("./button.cjs"),k=require("./emoji-picker.cjs"),w=require("./icon.cjs"),q=require("./input.cjs"),C=require("./popover.cjs"),d=require("./rich-text-editor.cjs"),S=require("./tooltip.cjs");require("./utils.cjs");require("./constants.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("../chunks/tab-at7WWglk.js");require("@dialpad/dialtone-emojis");require("../chunks/input-0Uksk4DP.js");require("./validators.cjs");require("./validation-messages.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("./lazy-show.cjs");require("../chunks/modal-qEzlo0Sj.js");require("../chunks/sr_only_close_button-iD7s1Pbj.js");require("@tiptap/vue-3");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-IBtQ5jRJ.js");require("emoji-regex");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 B={name:"DtRecipeMessageInput",components:{DtButton:b.DtButton,DtEmojiPicker:k.DtEmojiPicker,DtIcon:w.DtIcon,DtInput:q.DtInput,DtPopover:C.DtPopover,DtRichTextEditor:d.DtRichTextEditor,DtTooltip:S.DtTooltip},mixins:[],inheritAttrs:!1,props:{modelValue:{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(o){return typeof o=="string"?d.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(o):!0}},outputFormat:{type:String,default:"text",validator(o){return d.RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(o)}},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(o){return["searchNoResultsLabel","searchResultsLabel","searchPlaceholderLabel","skinSelectorButtonTooltipLabel","tabSetLabels"].every(t=>o[t]!=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.modelValue,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:{modelValue(o){this.internalInputValue=o}},methods:{onDrag(o){o.stopPropagation(),o.preventDefault()},onDrop(o){o.stopPropagation(),o.preventDefault();const t=o.dataTransfer,i=Array.from(t.files);this.$emit("add-media",i)},onPaste(o){if(o.clipboardData.files.length){o.stopPropagation(),o.preventDefault();const t=[...o.clipboardData.files];this.$emit("paste-media",t)}},onSkinTone(o){this.$emit("skin-tone",o)},onSelectEmoji(o){if(!o){this.emojiPickerOpened=!1;return}this.$refs.richTextEditor.editor.commands.insertContent({type:"emoji",attrs:{code:o.shortname}}),this.emojiPickerOpened=!1,this.$emit("selected-emoji",o)},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(o){var t;this.hasFocus=!0,(t=this.$refs.richTextEditor)==null||t.focusEditor(),this.$emit("focus",o)},onBlur(o){this.hasFocus=!1,this.$emit("blur",o)},onInput(o){this.$emit("input",o)}}},P={class:"d-d-flex d-jc-space-between d-mx8 d-my4"},j={class:"d-d-flex"},y={class:"d-d-flex"},v={key:0};function D(o,t,i,L,l,n){const m=e.resolveComponent("dt-rich-text-editor"),u=e.resolveComponent("dt-icon"),a=e.resolveComponent("dt-button"),p=e.resolveComponent("dt-input"),s=e.resolveComponent("dt-tooltip"),h=e.resolveComponent("dt-emoji-picker"),f=e.resolveComponent("dt-popover");return e.openBlock(),e.createElementBlock("div",{"data-qa":"dt-message-input",role:"presentation",class:e.normalizeClass(["d-d-flex","d-fd-column","d-bar8","d-baw1","d-ba","d-c-text",{"d-bc-bold d-bs-sm":l.hasFocus,"d-bc-default":!l.hasFocus}]),onClick:t[15]||(t[15]=r=>{var c;return(c=o.$refs.richTextEditor)==null?void 0:c.focusEditor()}),onDragEnter:t[16]||(t[16]=(...r)=>n.onDrag&&n.onDrag(...r)),onDragOver:t[17]||(t[17]=(...r)=>n.onDrag&&n.onDrag(...r)),onDrop:t[18]||(t[18]=(...r)=>n.onDrop&&n.onDrop(...r)),onKeydown:t[19]||(t[19]=e.withKeys(e.withModifiers((...r)=>n.onSend&&n.onSend(...r),["exact"]),["enter"])),onPaste:t[20]||(t[20]=(...r)=>n.onPaste&&n.onPaste(...r))},[e.createElementVNode("div",{class:"d-of-auto d-mx16 d-mt8 d-mb4",style:e.normalizeStyle({"max-height":i.maxHeight})},[e.createVNode(m,e.mergeProps({ref:"richTextEditor",modelValue:l.internalInputValue,"onUpdate:modelValue":t[0]||(t[0]=r=>l.internalInputValue=r),"allow-blockquote":i.allowBlockquote,"allow-bold":i.allowBold,"allow-bullet-list":i.allowBulletList,"allow-italic":i.allowItalic,"allow-strike":i.allowStrike,"allow-underline":i.allowUnderline,editable:i.editable,"input-aria-label":i.inputAriaLabel,"input-class":i.inputClass,"output-format":i.outputFormat,"auto-focus":i.autoFocus,link:i.link,placeholder:i.placeholder,"mention-suggestion":i.mentionSuggestion},o.$attrs,{onFocus:n.onFocus,onBlur:n.onBlur,onInput:t[1]||(t[1]=r=>n.onInput(r))}),null,16,["modelValue","allow-blockquote","allow-bold","allow-bullet-list","allow-italic","allow-strike","allow-underline","editable","input-aria-label","input-class","output-format","auto-focus","link","placeholder","mention-suggestion","onFocus","onBlur"])],4),e.renderSlot(o.$slots,"middle"),e.createElementVNode("section",P,[e.createElementVNode("div",j,[i.showImagePicker?(e.openBlock(),e.createBlock(s,{key:0,placement:"top-start",message:i.showImagePicker.tooltipLabel,offset:[-4,-4]},{anchor:e.withCtx(()=>[e.createVNode(a,{"data-qa":"dt-message-input-image-btn",size:"sm",circle:"",kind:l.imagePickerFocus?"default":"muted",importance:"clear","aria-label":i.showImagePicker.ariaLabel,onClick:n.onSelectImage,onMouseenter:t[2]||(t[2]=r=>l.imagePickerFocus=!0),onMouseleave:t[3]||(t[3]=r=>l.imagePickerFocus=!1),onFocus:t[4]||(t[4]=r=>l.imagePickerFocus=!0),onBlur:t[5]||(t[5]=r=>l.imagePickerFocus=!1)},{icon:e.withCtx(()=>[e.createVNode(u,{name:"image",size:"300"})]),_:1},8,["kind","aria-label","onClick"]),e.createVNode(p,{ref:"messageInputImageUpload","data-qa":"dt-message-input-image-input",type:"file",class:"d-ps-absolute",multiple:"",hidden:"",onInput:n.onImageUpload},null,8,["onInput"])]),_:1},8,["message"])):e.createCommentVNode("",!0),i.showEmojiPicker?(e.openBlock(),e.createBlock(f,{key:1,"data-qa":"dt-message-input-emoji-picker-popover",open:l.emojiPickerOpened,"initial-focus-element":"#searchInput",padding:"none",onOpened:t[10]||(t[10]=r=>{l.emojiPickerOpened=r})},{anchor:e.withCtx(()=>[e.createVNode(s,{message:i.emojiTooltipMessage,offset:[0,-4]},{anchor:e.withCtx(()=>[e.createVNode(a,{"data-qa":"dt-message-input-emoji-picker-btn",size:"sm",circle:"",kind:n.emojiPickerHovered?"default":"muted",importance:"clear","aria-label":i.emojiButtonAriaLabel,offset:[0,0],onClick:n.toggleEmojiPicker,onMouseenter:t[6]||(t[6]=r=>l.emojiPickerFocus=!0),onMouseleave:t[7]||(t[7]=r=>l.emojiPickerFocus=!1),onFocus:t[8]||(t[8]=r=>l.emojiPickerFocus=!0),onBlur:t[9]||(t[9]=r=>l.emojiPickerFocus=!1)},{icon:e.withCtx(()=>[e.createVNode(u,{name:n.emojiPickerHovered?"very-satisfied":"satisfied",size:"300"},null,8,["name"])]),_:1},8,["kind","aria-label","onClick"])]),_:1},8,["message"])]),content:e.withCtx(()=>[e.createVNode(h,e.mergeProps(i.emojiPickerProps,{onSkinTone:n.onSkinTone,onSelectedEmoji:n.onSelectEmoji}),null,16,["onSkinTone","onSelectedEmoji"])]),_:1},8,["open"])):e.createCommentVNode("",!0)]),e.createElementVNode("div",y,[i.showCharacterLimit?(e.openBlock(),e.createBlock(s,{key:0,class:"dt-message-input--remaining-char-tooltip",placement:"top-end",enabled:n.characterLimitTooltipEnabled,message:i.showCharacterLimit.message,offset:[10,-8]},{anchor:e.withCtx(()=>[e.withDirectives(e.createElementVNode("p",{class:"d-fc-error d-mr16 dt-message-input--remaining-char","data-qa":"dt-message-input-character-limit"},e.toDisplayString(i.showCharacterLimit.count-n.inputLength),513),[[e.vShow,n.displayCharacterLimitWarning]])]),_:1},8,["enabled","message"])):e.createCommentVNode("",!0),i.showCancel?(e.openBlock(),e.createBlock(a,{key:1,"data-qa":"dt-message-input-cancel-button",class:"dt-message-input--cancel-button",size:"sm",kind:"muted",importance:"clear","aria-label":i.showCancel.ariaLabel,onClick:n.onCancel},{default:e.withCtx(()=>[e.createElementVNode("p",null,e.toDisplayString(i.showCancel.text),1)]),_:1},8,["aria-label","onClick"])):e.createCommentVNode("",!0),i.showSend?(e.openBlock(),e.createBlock(s,{key:2,placement:"top-end",enabled:!i.showSend,message:i.showSend.tooltipLabel,show:!n.isSendDisabled&&l.sendButtonFocus,offset:[6,-8]},{anchor:e.withCtx(()=>[e.createVNode(a,{"data-qa":"dt-message-input-send-btn",size:"sm",kind:"default",importance:"primary",class:e.normalizeClass([{"message-input-button__disabled d-fc-muted":n.isSendDisabled,"d-btn--circle":i.showSend.icon}]),"aria-label":i.showSend.ariaLabel,"aria-disabled":n.isSendDisabled,onClick:n.onSend,onMouseenter:t[11]||(t[11]=r=>l.sendButtonFocus=!0),onMouseleave:t[12]||(t[12]=r=>l.sendButtonFocus=!1),onFocus:t[13]||(t[13]=r=>l.sendButtonFocus=!0),onBlur:t[14]||(t[14]=r=>l.sendButtonFocus=!1)},e.createSlots({default:e.withCtx(()=>[i.showSend.text?(e.openBlock(),e.createElementBlock("p",v,e.toDisplayString(i.showSend.text),1)):e.createCommentVNode("",!0)]),_:2},[i.showSend.icon?{name:"icon",fn:e.withCtx(()=>[e.createVNode(u,{name:i.showSend.icon,size:"300"},null,8,["name"])]),key:"0"}:void 0]),1032,["class","aria-label","aria-disabled","onClick"])]),_:1},8,["enabled","message","show"])):e.createCommentVNode("",!0)])])],34)}const I=g._(B,[["render",D]]);exports.DtRecipeMessageInput=I;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.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("../common/utils.cjs");
+require("../common/constants.cjs");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("../chunks/tab-qc3f42Yp.js");
+require("@dialpad/dialtone-emojis");
+require("../chunks/input-ttnte8zB.js");
+require("../common/validators.cjs");
+require("./validation-messages.cjs");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("../chunks/popover_constants-JwBF9h1Z.js");
+require("tippy.js");
+require("./lazy-show.cjs");
+require("../chunks/modal-VgxXAQFP.js");
+require("../chunks/sr_only_close_button-xGrHFjwA.js");
+require("@tiptap/vue-3");
+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("./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
+     */
+    modelValue: {
+      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.modelValue,
+      // 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: {
+    modelValue(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);
+    }
+  }
+};
+const _hoisted_1 = { class: "d-d-flex d-jc-space-between d-mx8 d-my4" };
+const _hoisted_2 = { class: "d-d-flex" };
+const _hoisted_3 = { class: "d-d-flex" };
+const _hoisted_4 = { key: 0 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_rich_text_editor = vue.resolveComponent("dt-rich-text-editor");
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_button = vue.resolveComponent("dt-button");
+  const _component_dt_input = vue.resolveComponent("dt-input");
+  const _component_dt_tooltip = vue.resolveComponent("dt-tooltip");
+  const _component_dt_emoji_picker = vue.resolveComponent("dt-emoji-picker");
+  const _component_dt_popover = vue.resolveComponent("dt-popover");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    "data-qa": "dt-message-input",
+    role: "presentation",
+    class: vue.normalizeClass([
+      "d-d-flex",
+      "d-fd-column",
+      "d-bar8",
+      "d-baw1",
+      "d-ba",
+      "d-c-text",
+      { "d-bc-bold d-bs-sm": $data.hasFocus, "d-bc-default": !$data.hasFocus }
+    ]),
+    onClick: _cache[15] || (_cache[15] = ($event) => {
+      var _a;
+      return (_a = _ctx.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
+    }),
+    onDragEnter: _cache[16] || (_cache[16] = (...args) => $options.onDrag && $options.onDrag(...args)),
+    onDragOver: _cache[17] || (_cache[17] = (...args) => $options.onDrag && $options.onDrag(...args)),
+    onDrop: _cache[18] || (_cache[18] = (...args) => $options.onDrop && $options.onDrop(...args)),
+    onKeydown: _cache[19] || (_cache[19] = vue.withKeys(vue.withModifiers((...args) => $options.onSend && $options.onSend(...args), ["exact"]), ["enter"])),
+    onPaste: _cache[20] || (_cache[20] = (...args) => $options.onPaste && $options.onPaste(...args))
+  }, [
+    vue.createElementVNode("div", {
+      class: "d-of-auto d-mx16 d-mt8 d-mb4",
+      style: vue.normalizeStyle({ "max-height": $props.maxHeight })
+    }, [
+      vue.createVNode(_component_dt_rich_text_editor, vue.mergeProps({
+        ref: "richTextEditor",
+        modelValue: $data.internalInputValue,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.internalInputValue = $event),
+        "allow-blockquote": $props.allowBlockquote,
+        "allow-bold": $props.allowBold,
+        "allow-bullet-list": $props.allowBulletList,
+        "allow-italic": $props.allowItalic,
+        "allow-strike": $props.allowStrike,
+        "allow-underline": $props.allowUnderline,
+        editable: $props.editable,
+        "input-aria-label": $props.inputAriaLabel,
+        "input-class": $props.inputClass,
+        "output-format": $props.outputFormat,
+        "auto-focus": $props.autoFocus,
+        link: $props.link,
+        placeholder: $props.placeholder,
+        "mention-suggestion": $props.mentionSuggestion
+      }, _ctx.$attrs, {
+        onFocus: $options.onFocus,
+        onBlur: $options.onBlur,
+        onInput: _cache[1] || (_cache[1] = ($event) => $options.onInput($event))
+      }), null, 16, ["modelValue", "allow-blockquote", "allow-bold", "allow-bullet-list", "allow-italic", "allow-strike", "allow-underline", "editable", "input-aria-label", "input-class", "output-format", "auto-focus", "link", "placeholder", "mention-suggestion", "onFocus", "onBlur"])
+    ], 4),
+    vue.renderSlot(_ctx.$slots, "middle"),
+    vue.createElementVNode("section", _hoisted_1, [
+      vue.createElementVNode("div", _hoisted_2, [
+        $props.showImagePicker ? (vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
+          key: 0,
+          placement: "top-start",
+          message: $props.showImagePicker.tooltipLabel,
+          offset: [-4, -4]
+        }, {
+          anchor: vue.withCtx(() => [
+            vue.createVNode(_component_dt_button, {
+              "data-qa": "dt-message-input-image-btn",
+              size: "sm",
+              circle: "",
+              kind: $data.imagePickerFocus ? "default" : "muted",
+              importance: "clear",
+              "aria-label": $props.showImagePicker.ariaLabel,
+              onClick: $options.onSelectImage,
+              onMouseenter: _cache[2] || (_cache[2] = ($event) => $data.imagePickerFocus = true),
+              onMouseleave: _cache[3] || (_cache[3] = ($event) => $data.imagePickerFocus = false),
+              onFocus: _cache[4] || (_cache[4] = ($event) => $data.imagePickerFocus = true),
+              onBlur: _cache[5] || (_cache[5] = ($event) => $data.imagePickerFocus = false)
+            }, {
+              icon: vue.withCtx(() => [
+                vue.createVNode(_component_dt_icon, {
+                  name: "image",
+                  size: "300"
+                })
+              ]),
+              _: 1
+            }, 8, ["kind", "aria-label", "onClick"]),
+            vue.createVNode(_component_dt_input, {
+              ref: "messageInputImageUpload",
+              "data-qa": "dt-message-input-image-input",
+              type: "file",
+              class: "d-ps-absolute",
+              multiple: "",
+              hidden: "",
+              onInput: $options.onImageUpload
+            }, null, 8, ["onInput"])
+          ]),
+          _: 1
+        }, 8, ["message"])) : vue.createCommentVNode("", true),
+        $props.showEmojiPicker ? (vue.openBlock(), vue.createBlock(_component_dt_popover, {
+          key: 1,
+          "data-qa": "dt-message-input-emoji-picker-popover",
+          open: $data.emojiPickerOpened,
+          "initial-focus-element": "#searchInput",
+          padding: "none",
+          onOpened: _cache[10] || (_cache[10] = (open) => {
+            $data.emojiPickerOpened = open;
+          })
+        }, {
+          anchor: vue.withCtx(() => [
+            vue.createVNode(_component_dt_tooltip, {
+              message: $props.emojiTooltipMessage,
+              offset: [0, -4]
+            }, {
+              anchor: vue.withCtx(() => [
+                vue.createVNode(_component_dt_button, {
+                  "data-qa": "dt-message-input-emoji-picker-btn",
+                  size: "sm",
+                  circle: "",
+                  kind: $options.emojiPickerHovered ? "default" : "muted",
+                  importance: "clear",
+                  "aria-label": $props.emojiButtonAriaLabel,
+                  offset: [0, 0],
+                  onClick: $options.toggleEmojiPicker,
+                  onMouseenter: _cache[6] || (_cache[6] = ($event) => $data.emojiPickerFocus = true),
+                  onMouseleave: _cache[7] || (_cache[7] = ($event) => $data.emojiPickerFocus = false),
+                  onFocus: _cache[8] || (_cache[8] = ($event) => $data.emojiPickerFocus = true),
+                  onBlur: _cache[9] || (_cache[9] = ($event) => $data.emojiPickerFocus = false)
+                }, {
+                  icon: vue.withCtx(() => [
+                    vue.createVNode(_component_dt_icon, {
+                      name: !$options.emojiPickerHovered ? "satisfied" : "very-satisfied",
+                      size: "300"
+                    }, null, 8, ["name"])
+                  ]),
+                  _: 1
+                }, 8, ["kind", "aria-label", "onClick"])
+              ]),
+              _: 1
+            }, 8, ["message"])
+          ]),
+          content: vue.withCtx(() => [
+            vue.createVNode(_component_dt_emoji_picker, vue.mergeProps($props.emojiPickerProps, {
+              onSkinTone: $options.onSkinTone,
+              onSelectedEmoji: $options.onSelectEmoji
+            }), null, 16, ["onSkinTone", "onSelectedEmoji"])
+          ]),
+          _: 1
+        }, 8, ["open"])) : vue.createCommentVNode("", true)
+      ]),
+      vue.createElementVNode("div", _hoisted_3, [
+        Boolean($props.showCharacterLimit) ? (vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
+          key: 0,
+          class: "dt-message-input--remaining-char-tooltip",
+          placement: "top-end",
+          enabled: $options.characterLimitTooltipEnabled,
+          message: $props.showCharacterLimit.message,
+          offset: [10, -8]
+        }, {
+          anchor: vue.withCtx(() => [
+            vue.withDirectives(vue.createElementVNode("p", {
+              class: "d-fc-error d-mr16 dt-message-input--remaining-char",
+              "data-qa": "dt-message-input-character-limit"
+            }, vue.toDisplayString($props.showCharacterLimit.count - $options.inputLength), 513), [
+              [vue.vShow, $options.displayCharacterLimitWarning]
+            ])
+          ]),
+          _: 1
+        }, 8, ["enabled", "message"])) : vue.createCommentVNode("", true),
+        $props.showCancel ? (vue.openBlock(), vue.createBlock(_component_dt_button, {
+          key: 1,
+          "data-qa": "dt-message-input-cancel-button",
+          class: "dt-message-input--cancel-button",
+          size: "sm",
+          kind: "muted",
+          importance: "clear",
+          "aria-label": $props.showCancel.ariaLabel,
+          onClick: $options.onCancel
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("p", null, vue.toDisplayString($props.showCancel.text), 1)
+          ]),
+          _: 1
+        }, 8, ["aria-label", "onClick"])) : vue.createCommentVNode("", true),
+        $props.showSend ? (vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
+          key: 2,
+          placement: "top-end",
+          enabled: !$props.showSend,
+          message: $props.showSend.tooltipLabel,
+          show: !$options.isSendDisabled && $data.sendButtonFocus,
+          offset: [6, -8]
+        }, {
+          anchor: vue.withCtx(() => [
+            vue.createVNode(_component_dt_button, {
+              "data-qa": "dt-message-input-send-btn",
+              size: "sm",
+              kind: "default",
+              importance: "primary",
+              class: vue.normalizeClass([
+                {
+                  "message-input-button__disabled d-fc-muted": $options.isSendDisabled,
+                  "d-btn--circle": $props.showSend.icon
+                }
+              ]),
+              "aria-label": $props.showSend.ariaLabel,
+              "aria-disabled": $options.isSendDisabled,
+              onClick: $options.onSend,
+              onMouseenter: _cache[11] || (_cache[11] = ($event) => $data.sendButtonFocus = true),
+              onMouseleave: _cache[12] || (_cache[12] = ($event) => $data.sendButtonFocus = false),
+              onFocus: _cache[13] || (_cache[13] = ($event) => $data.sendButtonFocus = true),
+              onBlur: _cache[14] || (_cache[14] = ($event) => $data.sendButtonFocus = false)
+            }, vue.createSlots({
+              default: vue.withCtx(() => [
+                $props.showSend.text ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_4, vue.toDisplayString($props.showSend.text), 1)) : vue.createCommentVNode("", true)
+              ]),
+              _: 2
+            }, [
+              $props.showSend.icon ? {
+                name: "icon",
+                fn: vue.withCtx(() => [
+                  vue.createVNode(_component_dt_icon, {
+                    name: $props.showSend.icon,
+                    size: "300"
+                  }, null, 8, ["name"])
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["class", "aria-label", "aria-disabled", "onClick"])
+          ]),
+          _: 1
+        }, 8, ["enabled", "message", "show"])) : vue.createCommentVNode("", true)
+      ])
+    ])
+  ], 34);
+}
+const message_input = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.DtRecipeMessageInput = message_input;
 //# sourceMappingURL=message-input.cjs.map