@dialpad/dialtone-vue 2.123.1 → 2.125.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +1 -1
- package/CHANGELOG.md +30 -0
- package/dist/dialtone-vue.cjs +3 -2
- package/dist/dialtone-vue.cjs.map +1 -0
- package/dist/dialtone-vue.js +13 -7
- package/dist/dialtone-vue.js.map +1 -0
- package/dist/directives.cjs +1 -0
- package/dist/directives.cjs.map +1 -0
- package/dist/directives.js +1 -0
- package/dist/directives.js.map +1 -0
- package/dist/emoji.cjs +1 -0
- package/dist/emoji.cjs.map +1 -0
- package/dist/emoji.js +1 -0
- package/dist/emoji.js.map +1 -0
- package/dist/emoji_picker-kiTOKaq8.js +1 -0
- package/dist/emoji_picker-kiTOKaq8.js.map +1 -0
- package/dist/emoji_picker-njWWAm6V.cjs +1 -0
- package/dist/emoji_picker-njWWAm6V.cjs.map +1 -0
- package/dist/emoji_text_wrapper-48ClwKvf.js +1 -0
- package/dist/emoji_text_wrapper-48ClwKvf.js.map +1 -0
- package/dist/emoji_text_wrapper-ZlynvHnd.cjs +1 -0
- package/dist/emoji_text_wrapper-ZlynvHnd.cjs.map +1 -0
- package/dist/index-OF94C6nQ.js +1 -0
- package/dist/index-OF94C6nQ.js.map +1 -0
- package/dist/index-Wx7Jagcr.cjs +1 -0
- package/dist/index-Wx7Jagcr.cjs.map +1 -0
- package/dist/message_input.cjs +2 -1
- package/dist/message_input.cjs.map +1 -0
- package/dist/message_input.js +45 -28
- package/dist/message_input.js.map +1 -0
- package/dist/{rich_text_editor-hUaQyiPu.cjs → rich_text_editor-RVMsCB8N.cjs} +16 -15
- package/dist/rich_text_editor-RVMsCB8N.cjs.map +1 -0
- package/dist/{rich_text_editor-tzOBsCIH.js → rich_text_editor-eMvTs_Gp.js} +8 -7
- package/dist/rich_text_editor-eMvTs_Gp.js.map +1 -0
- package/dist/style.css +1 -1
- package/dist/tooltip-88U5vFMA.js +1 -0
- package/dist/tooltip-88U5vFMA.js.map +1 -0
- package/dist/tooltip-i2wxFIIi.cjs +1 -0
- package/dist/tooltip-i2wxFIIi.cjs.map +1 -0
- package/dist/types/components/rich_text_editor/extensions/mentions/suggestion.d.ts +1 -0
- package/dist/types/components/rich_text_editor/extensions/mentions/suggestion.d.ts.map +1 -1
- package/dist/types/components/rich_text_editor/extensions/suggestion/SuggestionList.vue.d.ts +1 -1
- package/dist/types/recipes/conversation_view/editor/editor.vue.d.ts +9 -0
- package/dist/types/recipes/conversation_view/editor/editor.vue.d.ts.map +1 -1
- package/dist/types/recipes/conversation_view/message_input/message_input.vue.d.ts +2 -1
- package/dist/types/recipes/conversation_view/message_input/message_input.vue.d.ts.map +1 -1
- package/package.json +4 -4
package/dist/message_input.cjs
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./rich_text_editor-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./rich_text_editor-RVMsCB8N.cjs"),o=require("./index-Wx7Jagcr.cjs"),l=require("./emoji_picker-njWWAm6V.cjs"),r=require("./tooltip-i2wxFIIi.cjs");require("vue");const u={name:"DtRecipeMessageInput",components:{DtButton:o.DtButton,DtEmojiPicker:l.DtEmojiPicker,DtIcon:o.DtIcon,DtInput:o.DtInput,DtPopover:a.DtPopover,DtRichTextEditor:a.DtRichTextEditor,DtTooltip:r.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"?a.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(t):!0}},outputFormat:{type:String,default:"text",validator(t){return a.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}},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,n=Array.from(e.files);this.$emit("add-media",n)},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 c=function(){var e=this,n=e._self._c;return n("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 s;(s=e.$refs.richTextEditor)==null||s.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}},[n("div",{staticClass:"d-of-auto d-mx16 d-mt8 d-mb4",style:{"max-height":e.maxHeight}},[n("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},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"),n("section",{staticClass:"d-d-flex d-jc-space-between d-mx8 d-my4"},[n("div",{staticClass:"d-d-flex"},[e.showImagePicker?n("dt-tooltip",{attrs:{placement:"top-start",message:e.showImagePicker.tooltipLabel,offset:[-4,-4]},scopedSlots:e._u([{key:"anchor",fn:function(){return[n("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[n("dt-icon",{attrs:{name:"image",size:"300"}})]},proxy:!0}],null,!1,2561380377)}),n("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?n("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[n("dt-tooltip",{attrs:{message:e.emojiTooltipMessage,offset:[0,-4]},scopedSlots:e._u([{key:"anchor",fn:function(){return[n("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[n("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[n("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),n("div",{staticClass:"d-d-flex"},[e.showCharacterLimit?n("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[n("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?n("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}},[n("p",[e._v(e._s(e.showCancel.text))])]):e._e(),e.showSend?n("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[n("dt-button",{class:["d-btn--circle",{"message-input-button__disabled d-fc-muted":e.isSendDisabled}],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[n("dt-icon",{attrs:{name:e.showSend.icon,size:"300"}})]},proxy:!0}:null],null,!0)},[e.showSend.text?[n("p",[e._v(e._s(e.showSend.text))])]:e._e()],2)]},proxy:!0}],null,!1,2968465028)}):e._e()],1)])],2)},d=[],p=r.normalizeComponent(u,c,d,!1,null,null,null,null);const m=p.exports;exports.DtRichTextEditor=a.DtRichTextEditor;exports.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES=a.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES;exports.RICH_TEXT_EDITOR_OUTPUT_FORMATS=a.RICH_TEXT_EDITOR_OUTPUT_FORMATS;exports.DtRecipeMessageInput=m;
|
|
2
|
+
//# sourceMappingURL=message_input.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"message_input.cjs","sources":["../recipes/conversation_view/message_input/message_input.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n data-qa=\"dt-message-input\"\n role=\"presentation\"\n :class=\"['d-d-flex', 'd-fd-column', 'd-bar8', 'd-baw1', 'd-ba', 'd-c-text',\n { 'd-bc-bold d-bs-sm': hasFocus, 'd-bc-default': !hasFocus }]\"\n @click=\"$refs.richTextEditor?.focusEditor()\"\n @drag-enter=\"onDrag\"\n @drag-over=\"onDrag\"\n @drop=\"onDrop\"\n @keydown.enter.exact=\"onSend\"\n @paste=\"onPaste\"\n >\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n class=\"d-of-auto d-mx16 d-mt8 d-mb4\"\n :style=\"{ 'max-height': maxHeight }\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"inputClass\"\n :output-format=\"outputFormat\"\n :auto-focus=\"autoFocus\"\n :link=\"link\"\n :placeholder=\"placeholder\"\n :mention-suggestion=\"mentionSuggestion\"\n v-bind=\"$attrs\"\n @focus=\"onFocus\"\n @blur=\"onBlur\"\n @input=\"onInput($event)\"\n />\n </div>\n <!-- @slot Slot for attachment carousel -->\n <slot name=\"middle\" />\n <!-- Section for the bottom UI -->\n <section class=\"d-d-flex d-jc-space-between d-mx8 d-my4\">\n <!-- Left content -->\n <div class=\"d-d-flex\">\n <dt-tooltip\n v-if=\"showImagePicker\"\n placement=\"top-start\"\n :message=\"showImagePicker.tooltipLabel\"\n :offset=\"[-4, -4]\"\n >\n <template #anchor>\n <dt-button\n data-qa=\"dt-message-input-image-btn\"\n size=\"sm\"\n circle\n :kind=\"imagePickerFocus ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"showImagePicker.ariaLabel\"\n @click=\"onSelectImage\"\n @mouseenter=\"imagePickerFocus = true\"\n @mouseleave=\"imagePickerFocus = false\"\n @focus=\"imagePickerFocus = true\"\n @blur=\"imagePickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n name=\"image\"\n size=\"300\"\n />\n </template>\n </dt-button>\n <dt-input\n ref=\"messageInputImageUpload\"\n data-qa=\"dt-message-input-image-input\"\n type=\"file\"\n class=\"d-ps-absolute\"\n multiple\n hidden\n @input=\"onImageUpload\"\n />\n </template>\n </dt-tooltip>\n <dt-popover\n v-if=\"showEmojiPicker\"\n data-qa=\"dt-message-input-emoji-picker-popover\"\n :open=\"emojiPickerOpened\"\n initial-focus-element=\"#searchInput\"\n padding=\"none\"\n @opened=\"(open) => { emojiPickerOpened = open }\"\n >\n <template #anchor>\n <dt-tooltip\n :message=\"emojiTooltipMessage\"\n :offset=\"[0, -4]\"\n >\n <template #anchor>\n <dt-button\n data-qa=\"dt-message-input-emoji-picker-btn\"\n size=\"sm\"\n circle\n :kind=\"emojiPickerHovered ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"emojiButtonAriaLabel\"\n :offset=\"[0, 0]\"\n @click=\"toggleEmojiPicker\"\n @mouseenter=\"emojiPickerFocus = true\"\n @mouseleave=\"emojiPickerFocus = false\"\n @focus=\"emojiPickerFocus = true\"\n @blur=\"emojiPickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n :name=\"!emojiPickerHovered ? 'satisfied' : 'very-satisfied'\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </template>\n <template #content>\n <dt-emoji-picker\n v-bind=\"emojiPickerProps\"\n @skin-tone=\"onSkinTone\"\n @selected-emoji=\"onSelectEmoji\"\n />\n </template>\n </dt-popover>\n </div>\n <!-- Right content -->\n <div class=\"d-d-flex\">\n <!-- Optionally displayed remaining character counter -->\n <dt-tooltip\n v-if=\"Boolean(showCharacterLimit)\"\n class=\"dt-message-input--remaining-char-tooltip\"\n placement=\"top-end\"\n :enabled=\"characterLimitTooltipEnabled\"\n :message=\"showCharacterLimit.message\"\n :offset=\"[10, -8]\"\n >\n <template #anchor>\n <p\n v-show=\"displayCharacterLimitWarning\"\n class=\"d-fc-error d-mr16 dt-message-input--remaining-char\"\n data-qa=\"dt-message-input-character-limit\"\n >\n {{ showCharacterLimit.count - inputLength }}\n </p>\n </template>\n </dt-tooltip>\n\n <!-- Cancel button for edit mode -->\n <dt-button\n v-if=\"showCancel\"\n data-qa=\"dt-message-input-cancel-button\"\n class=\"dt-message-input--cancel-button\"\n size=\"sm\"\n kind=\"muted\"\n importance=\"clear\"\n :aria-label=\"showCancel.ariaLabel\"\n @click=\"onCancel\"\n >\n <p>{{ showCancel.text }}</p>\n </dt-button>\n\n <!-- Send button -->\n <dt-tooltip\n v-if=\"showSend\"\n placement=\"top-end\"\n :enabled=\"!showSend\"\n :message=\"showSend.tooltipLabel\"\n :show=\"!isSendDisabled && sendButtonFocus\"\n :offset=\"[6, -8]\"\n >\n <template #anchor>\n <!-- Right positioned UI - send button -->\n <dt-button\n data-qa=\"dt-message-input-send-btn\"\n size=\"sm\"\n kind=\"default\"\n importance=\"primary\"\n :class=\"[\n 'd-btn--circle',\n {\n 'message-input-button__disabled d-fc-muted': isSendDisabled,\n },\n ]\"\n :aria-label=\"showSend.ariaLabel\"\n :aria-disabled=\"isSendDisabled\"\n @click=\"onSend\"\n @mouseenter=\"sendButtonFocus = true\"\n @mouseleave=\"sendButtonFocus = false\"\n @focus=\"sendButtonFocus = true\"\n @blur=\"sendButtonFocus = false\"\n >\n <template\n v-if=\"showSend.icon\"\n #icon\n >\n <dt-icon\n :name=\"showSend.icon\"\n size=\"300\"\n />\n </template>\n <template\n v-if=\"showSend.text\"\n >\n <p>{{ showSend.text }}</p>\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </div>\n </section>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n DtRichTextEditor,\n RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport { DtEmojiPicker } from '@/components/emoji_picker';\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\n\nexport default {\n name: 'DtRecipeMessageInput',\n\n components: {\n DtButton,\n DtEmojiPicker,\n DtIcon,\n DtInput,\n DtPopover,\n DtRichTextEditor,\n DtTooltip,\n },\n\n mixins: [],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Value of the input. The object format should match TipTap's JSON\n * document structure: https://tiptap.dev/guide/output#option-1-json\n */\n value: {\n type: [Object, String],\n default: '',\n },\n\n /**\n * Whether the input is editable\n */\n editable: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Descriptive label for the input element\n */\n inputAriaLabel: {\n type: String,\n required: true,\n default: '',\n },\n\n /**\n * Additional class name for the input element. Only accepts a String value\n * because this is passed to the editor via options. For multiple classes,\n * join them into one string, e.g. \"d-p8 d-hmx96\"\n */\n inputClass: {\n type: String,\n default: '',\n },\n\n /**\n * Whether the input should receive focus after the component has been\n * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n * - `start` Sets the focus to the beginning of the input\n * - `end` Sets the focus to the end of the input\n * - `all` Selects the whole contents of the input\n * - `Number` Sets the focus to a specific position in the input\n * - `true` Defaults to `start`\n * - `false` Disables autofocus\n * @values true, false, start, end, all, number\n */\n autoFocus: {\n type: [Boolean, String, Number],\n default: false,\n validator (autoFocus) {\n if (typeof autoFocus === 'string') {\n return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n }\n return true;\n },\n },\n\n /**\n * The output format that the editor uses when emitting the \"@input\" event.\n * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for\n * examples.\n * @values text, json, html\n */\n outputFormat: {\n type: String,\n default: 'text',\n validator (outputFormat) {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);\n },\n },\n\n /**\n * Enables the Link extension and optionally passes configurations to it\n */\n link: {\n type: [Boolean, Object],\n default: false,\n },\n\n /**\n * Placeholder text\n */\n placeholder: {\n type: String,\n default: '',\n },\n\n /**\n * Disable Send Button\n */\n disableSend: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Content area needs to dynamically adjust height based on the conversation area height.\n * can be vh|px|rem|em|%\n */\n maxHeight: {\n type: String,\n default: 'unset',\n },\n\n // Emoji picker props\n showEmojiPicker: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Props to pass into the emoji picker.\n */\n emojiPickerProps: {\n type: Object,\n default: () => ({}),\n validate (emojiPickerProps) {\n return [\n 'searchNoResultsLabel',\n 'searchResultsLabel',\n 'searchPlaceholderLabel',\n 'skinSelectorButtonTooltipLabel',\n 'tabSetLabels',\n ].every(prop => emojiPickerProps[prop] != null);\n },\n },\n\n /**\n * Emoji button tooltip label\n */\n emojiTooltipMessage: {\n type: String,\n default: 'Emoji',\n },\n\n // Aria label for buttons\n /**\n * Emoji button aria label\n */\n emojiButtonAriaLabel: {\n type: String,\n default: 'emoji button',\n },\n\n /**\n * Enable character Limit warning\n */\n showCharacterLimit: {\n type: [Boolean, Object],\n default: () => ({ count: 1500, warning: 500, message: '' }),\n },\n\n showImagePicker: {\n type: [Boolean, Object],\n default: () => ({ tooltipLabel: 'Attach Image', ariaLabel: 'image button' }),\n },\n\n /**\n * Send button defaults.\n */\n showSend: {\n type: [Boolean, Object],\n default: () => ({ icon: 'send' }),\n },\n\n /**\n * Cancel button defaults.\n */\n showCancel: {\n type: [Boolean, Object],\n default: () => ({ text: 'Cancel' }),\n },\n\n /**\n * suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n *\n * The only required key is the items function which is used to query the contacts for suggestion.\n * items({ query }) => { return [ContactObject]; }\n * ContactObject format:\n * { name: string, avatarSrc: string, id: string }\n *\n * When null, it does not add the plugin.\n */\n mentionSuggestion: {\n type: Object,\n default: null,\n },\n },\n\n emits: [\n /**\n * Fires when send button is clicked\n *\n * @event submit\n * @type {String}\n */\n 'submit',\n\n /**\n * Fires when media is selected from image button\n *\n * @event select-media\n * @type {Array}\n */\n 'select-media',\n\n /**\n * Fires when media is dropped into the message input\n *\n * @event add-media\n * @type {Array}\n */\n 'add-media',\n\n /**\n * Fires when media is pasted into the message input\n *\n * @event paste-media\n * @type {Array}\n */\n 'paste-media',\n\n /**\n * Fires when cancel button is pressed (only on edit mode)\n *\n * @event cancel\n * @type {Boolean}\n */\n 'cancel',\n\n /**\n * Fires when skin tone is selected from the emoji picker\n *\n * @event skin-tone\n * @type {String}\n */\n 'skin-tone',\n\n /**\n * Fires when emoji is selected from the emoji picker\n *\n * @event selected-emoji\n * @type {String}\n */\n 'selected-emoji',\n\n /**\n * Native focus event\n * @event input\n * @type {String|JSON}\n */\n 'focus',\n\n /**\n * Native blur event\n * @event input\n * @type {String|JSON}\n */\n 'blur',\n\n /**\n * Native input event\n * @event input\n * @type {String|JSON}\n */\n 'input',\n ],\n\n data () {\n return {\n internalInputValue: this.value, // internal input content\n hasFocus: false,\n imagePickerFocus: false,\n emojiPickerFocus: false,\n sendButtonFocus: false,\n emojiPickerOpened: false,\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n displayCharacterLimitWarning () {\n return Boolean(this.showCharacterLimit) &&\n ((this.showCharacterLimit.count - this.inputLength) <= this.showCharacterLimit.warning);\n },\n\n characterLimitTooltipEnabled () {\n return this.showCharacterLimit.message && (this.showCharacterLimit.count - this.inputLength < 0);\n },\n\n isSendDisabled () {\n return this.disableSend ||\n (this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count);\n },\n\n computedCloseButtonProps () {\n return {\n ariaLabel: 'Close',\n };\n },\n\n emojiPickerHovered () {\n return this.emojiPickerFocus || this.emojiPickerOpened;\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n },\n\n methods: {\n onDrag (e) {\n e.stopPropagation();\n e.preventDefault();\n },\n\n onDrop (e) {\n e.stopPropagation();\n e.preventDefault();\n\n const dt = e.dataTransfer;\n const files = Array.from(dt.files);\n this.$emit('add-media', files);\n },\n\n onPaste (e) {\n if (e.clipboardData.files.length) {\n e.stopPropagation();\n e.preventDefault();\n const files = [...e.clipboardData.files];\n this.$emit('paste-media', files);\n }\n },\n\n onSkinTone (skinTone) {\n this.$emit('skin-tone', skinTone);\n },\n\n onSelectEmoji (emoji) {\n if (!emoji) {\n this.emojiPickerOpened = false;\n return;\n }\n\n // Insert emoji into the editor\n this.$refs.richTextEditor.editor.commands.insertContent({\n type: 'emoji',\n attrs: {\n code: emoji.shortname,\n },\n });\n this.emojiPickerOpened = false;\n this.$emit('selected-emoji', emoji);\n },\n\n onSelectImage () {\n this.$refs.messageInputImageUpload.$refs.input.click();\n },\n\n onImageUpload () {\n this.$emit('select-media', this.$refs.messageInputImageUpload.$refs.input.files);\n },\n\n toggleEmojiPicker () {\n this.emojiPickerOpened = !this.emojiPickerOpened;\n },\n\n onSend () {\n if (this.isSendDisabled) {\n return;\n }\n this.$emit('submit', this.internalInputValue);\n },\n\n onCancel () {\n this.$emit('cancel');\n },\n\n onFocus (event) {\n this.hasFocus = true;\n this.$refs.richTextEditor?.focusEditor();\n this.$emit('focus', event);\n },\n\n onBlur (event) {\n this.hasFocus = false;\n this.$emit('blur', event);\n },\n\n onInput (event) {\n this.$emit('input', event);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input--remaining-char-tooltip {\n margin-top: auto;\n margin-bottom: auto;\n}\n.dt-message-input--remaining-char {\n font-size: 1.2rem;\n}\n\n.message-input-button__disabled {\n background-color: unset;\n color: var(--theme-sidebar-icon-color);\n cursor: default;\n}\n\n.dt-message-input--cancel-button {\n margin-right: var(--dt-space-300);\n}\n</style>\n"],"names":["_sfc_main","DtButton","DtEmojiPicker","DtIcon","DtInput","DtPopover","DtRichTextEditor","DtTooltip","autoFocus","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","outputFormat","RICH_TEXT_EDITOR_OUTPUT_FORMATS","emojiPickerProps","prop","newValue","e","dt","files","skinTone","emoji","event","_a"],"mappings":"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"}
|
package/dist/message_input.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { D as o, a as s, R as r, b as l } from "./rich_text_editor-
|
|
1
|
+
import { D as o, a as s, R as r, b as l } from "./rich_text_editor-eMvTs_Gp.js";
|
|
2
2
|
import { t as u, w as c, x as d } from "./index-OF94C6nQ.js";
|
|
3
3
|
import { D as m } from "./emoji_picker-kiTOKaq8.js";
|
|
4
4
|
import { n as p, D as f } from "./tooltip-88U5vFMA.js";
|
|
@@ -208,6 +208,13 @@ const h = {
|
|
|
208
208
|
* @type {Array}
|
|
209
209
|
*/
|
|
210
210
|
"add-media",
|
|
211
|
+
/**
|
|
212
|
+
* Fires when media is pasted into the message input
|
|
213
|
+
*
|
|
214
|
+
* @event paste-media
|
|
215
|
+
* @type {Array}
|
|
216
|
+
*/
|
|
217
|
+
"paste-media",
|
|
211
218
|
/**
|
|
212
219
|
* Fires when cancel button is pressed (only on edit mode)
|
|
213
220
|
*
|
|
@@ -292,8 +299,15 @@ const h = {
|
|
|
292
299
|
},
|
|
293
300
|
onDrop(t) {
|
|
294
301
|
t.stopPropagation(), t.preventDefault();
|
|
295
|
-
const e = t.dataTransfer,
|
|
296
|
-
this.$emit("add-media",
|
|
302
|
+
const e = t.dataTransfer, i = Array.from(e.files);
|
|
303
|
+
this.$emit("add-media", i);
|
|
304
|
+
},
|
|
305
|
+
onPaste(t) {
|
|
306
|
+
if (t.clipboardData.files.length) {
|
|
307
|
+
t.stopPropagation(), t.preventDefault();
|
|
308
|
+
const e = [...t.clipboardData.files];
|
|
309
|
+
this.$emit("paste-media", e);
|
|
310
|
+
}
|
|
297
311
|
},
|
|
298
312
|
onSkinTone(t) {
|
|
299
313
|
this.$emit("skin-tone", t);
|
|
@@ -326,7 +340,8 @@ const h = {
|
|
|
326
340
|
this.$emit("cancel");
|
|
327
341
|
},
|
|
328
342
|
onFocus(t) {
|
|
329
|
-
|
|
343
|
+
var e;
|
|
344
|
+
this.hasFocus = !0, (e = this.$refs.richTextEditor) == null || e.focusEditor(), this.$emit("focus", t);
|
|
330
345
|
},
|
|
331
346
|
onBlur(t) {
|
|
332
347
|
this.hasFocus = !1, this.$emit("blur", t);
|
|
@@ -346,37 +361,38 @@ var g = function() {
|
|
|
346
361
|
"d-ba",
|
|
347
362
|
"d-c-text",
|
|
348
363
|
{ "d-bc-bold d-bs-sm": e.hasFocus, "d-bc-default": !e.hasFocus }
|
|
349
|
-
], attrs: { "data-qa": "dt-message-input", role: "presentation" }, on: { click: function(
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
364
|
+
], attrs: { "data-qa": "dt-message-input", role: "presentation" }, on: { click: function(a) {
|
|
365
|
+
var n;
|
|
366
|
+
(n = e.$refs.richTextEditor) == null || n.focusEditor();
|
|
367
|
+
}, "drag-enter": e.onDrag, "drag-over": e.onDrag, drop: e.onDrop, keydown: function(a) {
|
|
368
|
+
return !a.type.indexOf("key") && e._k(a.keyCode, "enter", 13, a.key, "Enter") || a.ctrlKey || a.shiftKey || a.altKey || a.metaKey ? null : e.onSend.apply(null, arguments);
|
|
369
|
+
}, paste: e.onPaste } }, [i("div", { staticClass: "d-of-auto d-mx16 d-mt8 d-mb4", style: { "max-height": e.maxHeight } }, [i("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 }, on: { focus: e.onFocus, blur: e.onBlur, input: function(a) {
|
|
370
|
+
return e.onInput(a);
|
|
371
|
+
} }, model: { value: e.internalInputValue, callback: function(a) {
|
|
372
|
+
e.internalInputValue = a;
|
|
357
373
|
}, expression: "internalInputValue" } }, "dt-rich-text-editor", e.$attrs, !1))], 1), e._t("middle"), i("section", { staticClass: "d-d-flex d-jc-space-between d-mx8 d-my4" }, [i("div", { staticClass: "d-d-flex" }, [e.showImagePicker ? i("dt-tooltip", { attrs: { placement: "top-start", message: e.showImagePicker.tooltipLabel, offset: [-4, -4] }, scopedSlots: e._u([{ key: "anchor", fn: function() {
|
|
358
|
-
return [i("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(
|
|
374
|
+
return [i("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(a) {
|
|
359
375
|
e.imagePickerFocus = !0;
|
|
360
|
-
}, mouseleave: function(
|
|
376
|
+
}, mouseleave: function(a) {
|
|
361
377
|
e.imagePickerFocus = !1;
|
|
362
|
-
}, focus: function(
|
|
378
|
+
}, focus: function(a) {
|
|
363
379
|
e.imagePickerFocus = !0;
|
|
364
|
-
}, blur: function(
|
|
380
|
+
}, blur: function(a) {
|
|
365
381
|
e.imagePickerFocus = !1;
|
|
366
382
|
} }, scopedSlots: e._u([{ key: "icon", fn: function() {
|
|
367
383
|
return [i("dt-icon", { attrs: { name: "image", size: "300" } })];
|
|
368
384
|
}, proxy: !0 }], null, !1, 2561380377) }), i("dt-input", { ref: "messageInputImageUpload", staticClass: "d-ps-absolute", attrs: { "data-qa": "dt-message-input-image-input", type: "file", multiple: "", hidden: "" }, on: { input: e.onImageUpload } })];
|
|
369
|
-
}, proxy: !0 }], null, !1, 3687934814) }) : e._e(), e.showEmojiPicker ? i("dt-popover", { attrs: { "data-qa": "dt-message-input-emoji-picker-popover", open: e.emojiPickerOpened, "initial-focus-element": "#searchInput", padding: "none" }, on: { opened: (
|
|
370
|
-
e.emojiPickerOpened =
|
|
385
|
+
}, proxy: !0 }], null, !1, 3687934814) }) : e._e(), e.showEmojiPicker ? i("dt-popover", { attrs: { "data-qa": "dt-message-input-emoji-picker-popover", open: e.emojiPickerOpened, "initial-focus-element": "#searchInput", padding: "none" }, on: { opened: (a) => {
|
|
386
|
+
e.emojiPickerOpened = a;
|
|
371
387
|
} }, scopedSlots: e._u([{ key: "anchor", fn: function() {
|
|
372
388
|
return [i("dt-tooltip", { attrs: { message: e.emojiTooltipMessage, offset: [0, -4] }, scopedSlots: e._u([{ key: "anchor", fn: function() {
|
|
373
|
-
return [i("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(
|
|
389
|
+
return [i("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(a) {
|
|
374
390
|
e.emojiPickerFocus = !0;
|
|
375
|
-
}, mouseleave: function(
|
|
391
|
+
}, mouseleave: function(a) {
|
|
376
392
|
e.emojiPickerFocus = !1;
|
|
377
|
-
}, focus: function(
|
|
393
|
+
}, focus: function(a) {
|
|
378
394
|
e.emojiPickerFocus = !0;
|
|
379
|
-
}, blur: function(
|
|
395
|
+
}, blur: function(a) {
|
|
380
396
|
e.emojiPickerFocus = !1;
|
|
381
397
|
} }, scopedSlots: e._u([{ key: "icon", fn: function() {
|
|
382
398
|
return [i("dt-icon", { attrs: { name: e.emojiPickerHovered ? "very-satisfied" : "satisfied", size: "300" } })];
|
|
@@ -392,13 +408,13 @@ var g = function() {
|
|
|
392
408
|
{
|
|
393
409
|
"message-input-button__disabled d-fc-muted": e.isSendDisabled
|
|
394
410
|
}
|
|
395
|
-
], 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(
|
|
411
|
+
], 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(a) {
|
|
396
412
|
e.sendButtonFocus = !0;
|
|
397
|
-
}, mouseleave: function(
|
|
413
|
+
}, mouseleave: function(a) {
|
|
398
414
|
e.sendButtonFocus = !1;
|
|
399
|
-
}, focus: function(
|
|
415
|
+
}, focus: function(a) {
|
|
400
416
|
e.sendButtonFocus = !0;
|
|
401
|
-
}, blur: function(
|
|
417
|
+
}, blur: function(a) {
|
|
402
418
|
e.sendButtonFocus = !1;
|
|
403
419
|
} }, scopedSlots: e._u([e.showSend.icon ? { key: "icon", fn: function() {
|
|
404
420
|
return [i("dt-icon", { attrs: { name: e.showSend.icon, size: "300" } })];
|
|
@@ -414,10 +430,11 @@ var g = function() {
|
|
|
414
430
|
null,
|
|
415
431
|
null
|
|
416
432
|
);
|
|
417
|
-
const
|
|
433
|
+
const v = k.exports;
|
|
418
434
|
export {
|
|
419
|
-
|
|
435
|
+
v as DtRecipeMessageInput,
|
|
420
436
|
s as DtRichTextEditor,
|
|
421
437
|
r as RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,
|
|
422
438
|
l as RICH_TEXT_EDITOR_OUTPUT_FORMATS
|
|
423
439
|
};
|
|
440
|
+
//# sourceMappingURL=message_input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"message_input.js","sources":["../recipes/conversation_view/message_input/message_input.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n data-qa=\"dt-message-input\"\n role=\"presentation\"\n :class=\"['d-d-flex', 'd-fd-column', 'd-bar8', 'd-baw1', 'd-ba', 'd-c-text',\n { 'd-bc-bold d-bs-sm': hasFocus, 'd-bc-default': !hasFocus }]\"\n @click=\"$refs.richTextEditor?.focusEditor()\"\n @drag-enter=\"onDrag\"\n @drag-over=\"onDrag\"\n @drop=\"onDrop\"\n @keydown.enter.exact=\"onSend\"\n @paste=\"onPaste\"\n >\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n class=\"d-of-auto d-mx16 d-mt8 d-mb4\"\n :style=\"{ 'max-height': maxHeight }\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"inputClass\"\n :output-format=\"outputFormat\"\n :auto-focus=\"autoFocus\"\n :link=\"link\"\n :placeholder=\"placeholder\"\n :mention-suggestion=\"mentionSuggestion\"\n v-bind=\"$attrs\"\n @focus=\"onFocus\"\n @blur=\"onBlur\"\n @input=\"onInput($event)\"\n />\n </div>\n <!-- @slot Slot for attachment carousel -->\n <slot name=\"middle\" />\n <!-- Section for the bottom UI -->\n <section class=\"d-d-flex d-jc-space-between d-mx8 d-my4\">\n <!-- Left content -->\n <div class=\"d-d-flex\">\n <dt-tooltip\n v-if=\"showImagePicker\"\n placement=\"top-start\"\n :message=\"showImagePicker.tooltipLabel\"\n :offset=\"[-4, -4]\"\n >\n <template #anchor>\n <dt-button\n data-qa=\"dt-message-input-image-btn\"\n size=\"sm\"\n circle\n :kind=\"imagePickerFocus ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"showImagePicker.ariaLabel\"\n @click=\"onSelectImage\"\n @mouseenter=\"imagePickerFocus = true\"\n @mouseleave=\"imagePickerFocus = false\"\n @focus=\"imagePickerFocus = true\"\n @blur=\"imagePickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n name=\"image\"\n size=\"300\"\n />\n </template>\n </dt-button>\n <dt-input\n ref=\"messageInputImageUpload\"\n data-qa=\"dt-message-input-image-input\"\n type=\"file\"\n class=\"d-ps-absolute\"\n multiple\n hidden\n @input=\"onImageUpload\"\n />\n </template>\n </dt-tooltip>\n <dt-popover\n v-if=\"showEmojiPicker\"\n data-qa=\"dt-message-input-emoji-picker-popover\"\n :open=\"emojiPickerOpened\"\n initial-focus-element=\"#searchInput\"\n padding=\"none\"\n @opened=\"(open) => { emojiPickerOpened = open }\"\n >\n <template #anchor>\n <dt-tooltip\n :message=\"emojiTooltipMessage\"\n :offset=\"[0, -4]\"\n >\n <template #anchor>\n <dt-button\n data-qa=\"dt-message-input-emoji-picker-btn\"\n size=\"sm\"\n circle\n :kind=\"emojiPickerHovered ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"emojiButtonAriaLabel\"\n :offset=\"[0, 0]\"\n @click=\"toggleEmojiPicker\"\n @mouseenter=\"emojiPickerFocus = true\"\n @mouseleave=\"emojiPickerFocus = false\"\n @focus=\"emojiPickerFocus = true\"\n @blur=\"emojiPickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n :name=\"!emojiPickerHovered ? 'satisfied' : 'very-satisfied'\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </template>\n <template #content>\n <dt-emoji-picker\n v-bind=\"emojiPickerProps\"\n @skin-tone=\"onSkinTone\"\n @selected-emoji=\"onSelectEmoji\"\n />\n </template>\n </dt-popover>\n </div>\n <!-- Right content -->\n <div class=\"d-d-flex\">\n <!-- Optionally displayed remaining character counter -->\n <dt-tooltip\n v-if=\"Boolean(showCharacterLimit)\"\n class=\"dt-message-input--remaining-char-tooltip\"\n placement=\"top-end\"\n :enabled=\"characterLimitTooltipEnabled\"\n :message=\"showCharacterLimit.message\"\n :offset=\"[10, -8]\"\n >\n <template #anchor>\n <p\n v-show=\"displayCharacterLimitWarning\"\n class=\"d-fc-error d-mr16 dt-message-input--remaining-char\"\n data-qa=\"dt-message-input-character-limit\"\n >\n {{ showCharacterLimit.count - inputLength }}\n </p>\n </template>\n </dt-tooltip>\n\n <!-- Cancel button for edit mode -->\n <dt-button\n v-if=\"showCancel\"\n data-qa=\"dt-message-input-cancel-button\"\n class=\"dt-message-input--cancel-button\"\n size=\"sm\"\n kind=\"muted\"\n importance=\"clear\"\n :aria-label=\"showCancel.ariaLabel\"\n @click=\"onCancel\"\n >\n <p>{{ showCancel.text }}</p>\n </dt-button>\n\n <!-- Send button -->\n <dt-tooltip\n v-if=\"showSend\"\n placement=\"top-end\"\n :enabled=\"!showSend\"\n :message=\"showSend.tooltipLabel\"\n :show=\"!isSendDisabled && sendButtonFocus\"\n :offset=\"[6, -8]\"\n >\n <template #anchor>\n <!-- Right positioned UI - send button -->\n <dt-button\n data-qa=\"dt-message-input-send-btn\"\n size=\"sm\"\n kind=\"default\"\n importance=\"primary\"\n :class=\"[\n 'd-btn--circle',\n {\n 'message-input-button__disabled d-fc-muted': isSendDisabled,\n },\n ]\"\n :aria-label=\"showSend.ariaLabel\"\n :aria-disabled=\"isSendDisabled\"\n @click=\"onSend\"\n @mouseenter=\"sendButtonFocus = true\"\n @mouseleave=\"sendButtonFocus = false\"\n @focus=\"sendButtonFocus = true\"\n @blur=\"sendButtonFocus = false\"\n >\n <template\n v-if=\"showSend.icon\"\n #icon\n >\n <dt-icon\n :name=\"showSend.icon\"\n size=\"300\"\n />\n </template>\n <template\n v-if=\"showSend.text\"\n >\n <p>{{ showSend.text }}</p>\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </div>\n </section>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n DtRichTextEditor,\n RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport { DtEmojiPicker } from '@/components/emoji_picker';\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\n\nexport default {\n name: 'DtRecipeMessageInput',\n\n components: {\n DtButton,\n DtEmojiPicker,\n DtIcon,\n DtInput,\n DtPopover,\n DtRichTextEditor,\n DtTooltip,\n },\n\n mixins: [],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Value of the input. The object format should match TipTap's JSON\n * document structure: https://tiptap.dev/guide/output#option-1-json\n */\n value: {\n type: [Object, String],\n default: '',\n },\n\n /**\n * Whether the input is editable\n */\n editable: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Descriptive label for the input element\n */\n inputAriaLabel: {\n type: String,\n required: true,\n default: '',\n },\n\n /**\n * Additional class name for the input element. Only accepts a String value\n * because this is passed to the editor via options. For multiple classes,\n * join them into one string, e.g. \"d-p8 d-hmx96\"\n */\n inputClass: {\n type: String,\n default: '',\n },\n\n /**\n * Whether the input should receive focus after the component has been\n * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n * - `start` Sets the focus to the beginning of the input\n * - `end` Sets the focus to the end of the input\n * - `all` Selects the whole contents of the input\n * - `Number` Sets the focus to a specific position in the input\n * - `true` Defaults to `start`\n * - `false` Disables autofocus\n * @values true, false, start, end, all, number\n */\n autoFocus: {\n type: [Boolean, String, Number],\n default: false,\n validator (autoFocus) {\n if (typeof autoFocus === 'string') {\n return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n }\n return true;\n },\n },\n\n /**\n * The output format that the editor uses when emitting the \"@input\" event.\n * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for\n * examples.\n * @values text, json, html\n */\n outputFormat: {\n type: String,\n default: 'text',\n validator (outputFormat) {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);\n },\n },\n\n /**\n * Enables the Link extension and optionally passes configurations to it\n */\n link: {\n type: [Boolean, Object],\n default: false,\n },\n\n /**\n * Placeholder text\n */\n placeholder: {\n type: String,\n default: '',\n },\n\n /**\n * Disable Send Button\n */\n disableSend: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Content area needs to dynamically adjust height based on the conversation area height.\n * can be vh|px|rem|em|%\n */\n maxHeight: {\n type: String,\n default: 'unset',\n },\n\n // Emoji picker props\n showEmojiPicker: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Props to pass into the emoji picker.\n */\n emojiPickerProps: {\n type: Object,\n default: () => ({}),\n validate (emojiPickerProps) {\n return [\n 'searchNoResultsLabel',\n 'searchResultsLabel',\n 'searchPlaceholderLabel',\n 'skinSelectorButtonTooltipLabel',\n 'tabSetLabels',\n ].every(prop => emojiPickerProps[prop] != null);\n },\n },\n\n /**\n * Emoji button tooltip label\n */\n emojiTooltipMessage: {\n type: String,\n default: 'Emoji',\n },\n\n // Aria label for buttons\n /**\n * Emoji button aria label\n */\n emojiButtonAriaLabel: {\n type: String,\n default: 'emoji button',\n },\n\n /**\n * Enable character Limit warning\n */\n showCharacterLimit: {\n type: [Boolean, Object],\n default: () => ({ count: 1500, warning: 500, message: '' }),\n },\n\n showImagePicker: {\n type: [Boolean, Object],\n default: () => ({ tooltipLabel: 'Attach Image', ariaLabel: 'image button' }),\n },\n\n /**\n * Send button defaults.\n */\n showSend: {\n type: [Boolean, Object],\n default: () => ({ icon: 'send' }),\n },\n\n /**\n * Cancel button defaults.\n */\n showCancel: {\n type: [Boolean, Object],\n default: () => ({ text: 'Cancel' }),\n },\n\n /**\n * suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n *\n * The only required key is the items function which is used to query the contacts for suggestion.\n * items({ query }) => { return [ContactObject]; }\n * ContactObject format:\n * { name: string, avatarSrc: string, id: string }\n *\n * When null, it does not add the plugin.\n */\n mentionSuggestion: {\n type: Object,\n default: null,\n },\n },\n\n emits: [\n /**\n * Fires when send button is clicked\n *\n * @event submit\n * @type {String}\n */\n 'submit',\n\n /**\n * Fires when media is selected from image button\n *\n * @event select-media\n * @type {Array}\n */\n 'select-media',\n\n /**\n * Fires when media is dropped into the message input\n *\n * @event add-media\n * @type {Array}\n */\n 'add-media',\n\n /**\n * Fires when media is pasted into the message input\n *\n * @event paste-media\n * @type {Array}\n */\n 'paste-media',\n\n /**\n * Fires when cancel button is pressed (only on edit mode)\n *\n * @event cancel\n * @type {Boolean}\n */\n 'cancel',\n\n /**\n * Fires when skin tone is selected from the emoji picker\n *\n * @event skin-tone\n * @type {String}\n */\n 'skin-tone',\n\n /**\n * Fires when emoji is selected from the emoji picker\n *\n * @event selected-emoji\n * @type {String}\n */\n 'selected-emoji',\n\n /**\n * Native focus event\n * @event input\n * @type {String|JSON}\n */\n 'focus',\n\n /**\n * Native blur event\n * @event input\n * @type {String|JSON}\n */\n 'blur',\n\n /**\n * Native input event\n * @event input\n * @type {String|JSON}\n */\n 'input',\n ],\n\n data () {\n return {\n internalInputValue: this.value, // internal input content\n hasFocus: false,\n imagePickerFocus: false,\n emojiPickerFocus: false,\n sendButtonFocus: false,\n emojiPickerOpened: false,\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n displayCharacterLimitWarning () {\n return Boolean(this.showCharacterLimit) &&\n ((this.showCharacterLimit.count - this.inputLength) <= this.showCharacterLimit.warning);\n },\n\n characterLimitTooltipEnabled () {\n return this.showCharacterLimit.message && (this.showCharacterLimit.count - this.inputLength < 0);\n },\n\n isSendDisabled () {\n return this.disableSend ||\n (this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count);\n },\n\n computedCloseButtonProps () {\n return {\n ariaLabel: 'Close',\n };\n },\n\n emojiPickerHovered () {\n return this.emojiPickerFocus || this.emojiPickerOpened;\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n },\n\n methods: {\n onDrag (e) {\n e.stopPropagation();\n e.preventDefault();\n },\n\n onDrop (e) {\n e.stopPropagation();\n e.preventDefault();\n\n const dt = e.dataTransfer;\n const files = Array.from(dt.files);\n this.$emit('add-media', files);\n },\n\n onPaste (e) {\n if (e.clipboardData.files.length) {\n e.stopPropagation();\n e.preventDefault();\n const files = [...e.clipboardData.files];\n this.$emit('paste-media', files);\n }\n },\n\n onSkinTone (skinTone) {\n this.$emit('skin-tone', skinTone);\n },\n\n onSelectEmoji (emoji) {\n if (!emoji) {\n this.emojiPickerOpened = false;\n return;\n }\n\n // Insert emoji into the editor\n this.$refs.richTextEditor.editor.commands.insertContent({\n type: 'emoji',\n attrs: {\n code: emoji.shortname,\n },\n });\n this.emojiPickerOpened = false;\n this.$emit('selected-emoji', emoji);\n },\n\n onSelectImage () {\n this.$refs.messageInputImageUpload.$refs.input.click();\n },\n\n onImageUpload () {\n this.$emit('select-media', this.$refs.messageInputImageUpload.$refs.input.files);\n },\n\n toggleEmojiPicker () {\n this.emojiPickerOpened = !this.emojiPickerOpened;\n },\n\n onSend () {\n if (this.isSendDisabled) {\n return;\n }\n this.$emit('submit', this.internalInputValue);\n },\n\n onCancel () {\n this.$emit('cancel');\n },\n\n onFocus (event) {\n this.hasFocus = true;\n this.$refs.richTextEditor?.focusEditor();\n this.$emit('focus', event);\n },\n\n onBlur (event) {\n this.hasFocus = false;\n this.$emit('blur', event);\n },\n\n onInput (event) {\n this.$emit('input', event);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input--remaining-char-tooltip {\n margin-top: auto;\n margin-bottom: auto;\n}\n.dt-message-input--remaining-char {\n font-size: 1.2rem;\n}\n\n.message-input-button__disabled {\n background-color: unset;\n color: var(--theme-sidebar-icon-color);\n cursor: default;\n}\n\n.dt-message-input--cancel-button {\n margin-right: var(--dt-space-300);\n}\n</style>\n"],"names":["_sfc_main","DtButton","DtEmojiPicker","DtIcon","DtInput","DtPopover","DtRichTextEditor","DtTooltip","autoFocus","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","outputFormat","RICH_TEXT_EDITOR_OUTPUT_FORMATS","emojiPickerProps","prop","newValue","e","dt","files","skinTone","emoji","event","_a"],"mappings":"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"}
|