@dialpad/dialtone-vue 3.220.0 → 3.221.0-next.1

package/dist/message_input-GihDjqTJ.js

@@ -0,0 +1,667 @@
+import { removeClassStyleAttrs as e, returnFirstEl as t } from "./common/utils/index.js";
+import { t as n } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { DialtoneLocalization as r } from "./localization/index.js";
+import i from "./lib/button/button.js";
+import a from "./lib/item-layout/item-layout.js";
+import o from "./lib/stack/stack.js";
+import s from "./lib/tooltip/tooltip.js";
+import c from "./lib/popover/popover.js";
+import l from "./lib/input/input.js";
+import { t as u } from "./EmojiPicker-BllVwJf4.js";
+import { NodeViewWrapper as d, VueNodeViewRenderer as f, nodeViewProps as p } from "./node_modules/@tiptap/vue-3.js";
+import { t as m } from "./RichTextEditor-D5D8AvLl.js";
+import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as h, RICH_TEXT_EDITOR_OUTPUT_FORMATS as g } from "./lib/rich-text-editor/rich-text-editor-constants.js";
+import { EDITOR_DEFAULT_LINK_PREFIX as _, EDITOR_SUPPORTED_LINK_PROTOCOLS as v } from "./lib/editor/editor-constants.js";
+import y from "./lib/message-input/last-active-nodes.js";
+import b from "./lib/message-input/message-input-topbar.js";
+import ee from "./lib/message-input/message-input-link.js";
+import { createBlock as x, createCommentVNode as S, createElementBlock as C, createElementVNode as w, createSlots as T, createTextVNode as E, createVNode as D, mergeProps as O, normalizeClass as k, normalizeStyle as A, openBlock as j, renderSlot as M, resolveComponent as N, resolveDirective as P, toDisplayString as F, vShow as I, withCtx as L, withDirectives as R, withModifiers as z } from "vue";
+import { DtIconClose as B, DtIconImage as V, DtIconSatisfied as H, DtIconSend as U, DtIconVerySatisfied as W, DtIconVideo as G } from "@dialpad/dialtone-icons/vue";
+import { Node as K, mergeAttributes as q } from "@tiptap/core";
+//#region recipes/conversation_view/message_input/extensions/meeting_pill/MeetingPill.vue
+var J = {
+	name: "MeetingPill",
+	components: {
+		NodeViewWrapper: d,
+		DtItemLayout: a,
+		DtIconClose: B,
+		DtButton: i,
+		DtIconVideo: G
+	},
+	props: p,
+	emits: ["meeting-pill-close"],
+	data() {
+		return { i18n: new r() };
+	},
+	computed: { closeButtonTitle() {
+		return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
+	} },
+	methods: { close(e) {
+		let t = this.editor?.storage?.meetingPill?.onClose;
+		t && typeof t == "function" && t(e);
+	} }
+}, Y = { class: "d-recipe-message-input-meeting-pill__icon" }, X = { class: "d-recipe-message-input-meeting-pill__close" };
+function Z(e, t, n, r, i, a) {
+	let o = N("dt-icon-video"), s = N("dt-icon-close"), c = N("dt-button"), l = N("dt-item-layout"), u = N("node-view-wrapper");
+	return j(), x(u, { class: "d-recipe-message-input-meeting-pill" }, {
+		default: L(() => [D(l, {
+			class: "d-recipe-message-input-meeting-pill__layout",
+			unstyled: ""
+		}, {
+			start: L(() => [w("div", Y, [D(o, { size: "400" })])]),
+			end: L(() => [w("div", X, [D(c, {
+				circle: "",
+				importance: "clear",
+				size: 100,
+				"aria-label": a.closeButtonTitle,
+				title: a.closeButtonTitle,
+				onClick: a.close
+			}, {
+				icon: L(() => [D(s, { size: "300" })]),
+				_: 1
+			}, 8, [
+				"aria-label",
+				"title",
+				"onClick"
+			])])]),
+			default: L(() => [E(" " + F(e.node.attrs.text) + " ", 1)]),
+			_: 1
+		})]),
+		_: 1
+	});
+}
+var Q = /* @__PURE__ */ n(J, [["render", Z]]), $ = K.create({
+	name: "meetingPill",
+	atom: !0,
+	group: "inline",
+	inline: !0,
+	addOptions() {
+		return { onClose: () => {} };
+	},
+	addStorage() {
+		return { onClose: this.options.onClose };
+	},
+	addNodeView() {
+		return f(Q);
+	},
+	addAttributes() {
+		return { text: { default: "Please pass in \"text\" attribute" } };
+	},
+	parseHTML() {
+		return [{ tag: "meeting-pill" }];
+	},
+	renderText() {
+		return "/dpm";
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return ["meeting-pill", q(e)];
+	}
+}), te = {
+	compatConfig: { MODE: 3 },
+	name: "DtRecipeMessageInput",
+	components: {
+		DtButton: i,
+		DtEmojiPicker: u,
+		DtInput: l,
+		DtPopover: c,
+		DtRecipeMessageInputTopbar: b,
+		DtRecipeMessageInputLink: ee,
+		DtRichTextEditor: m,
+		DtTooltip: s,
+		DtStack: o,
+		DtIconImage: V,
+		DtIconVerySatisfied: W,
+		DtIconSatisfied: H,
+		DtIconSend: U
+	},
+	inheritAttrs: !1,
+	props: {
+		richText: {
+			type: Boolean,
+			default: !0
+		},
+		modelValue: {
+			type: [Object, String],
+			default: ""
+		},
+		editable: {
+			type: Boolean,
+			default: !0
+		},
+		inputAriaLabel: {
+			type: String,
+			required: !0,
+			default: ""
+		},
+		allowTyping: {
+			type: Boolean,
+			default: !0
+		},
+		inputClass: {
+			type: String,
+			default: ""
+		},
+		autoFocus: {
+			type: [
+				Boolean,
+				String,
+				Number
+			],
+			default: !1,
+			validator(e) {
+				return typeof e == "string" ? h.includes(e) : !0;
+			}
+		},
+		outputFormat: {
+			type: String,
+			default: "json",
+			validator(e) {
+				return g.includes(e);
+			}
+		},
+		placeholder: {
+			type: String,
+			default: ""
+		},
+		disableSend: {
+			type: Boolean,
+			default: !1
+		},
+		maxHeight: {
+			type: String,
+			default: "unset"
+		},
+		showEmojiPicker: {
+			type: Boolean,
+			default: !0
+		},
+		emojiPickerProps: {
+			type: Object,
+			default: () => ({})
+		},
+		showCharacterLimit: {
+			type: [Boolean, Object],
+			default: () => ({
+				count: 1500,
+				warning: 500,
+				message: ""
+			})
+		},
+		showImagePicker: {
+			type: [Boolean, Object],
+			default: () => ({})
+		},
+		showSend: {
+			type: [Boolean, Object],
+			default: () => ({})
+		},
+		showCancel: {
+			type: [Boolean, Object],
+			default: () => ({})
+		},
+		mentionSuggestion: {
+			type: Object,
+			default: null
+		},
+		channelSuggestion: {
+			type: Object,
+			default: null
+		},
+		slashCommandSuggestion: {
+			type: Object,
+			default: null
+		},
+		boldButtonOptions: {
+			type: Object,
+			default: () => ({ keyboardShortcutText: "Mod + B" })
+		},
+		italicButtonOptions: {
+			type: Object,
+			default: () => ({ keyboardShortcutText: "Mod + I" })
+		},
+		strikeButtonOptions: {
+			type: Object,
+			default: () => ({ keyboardShortcutText: "Mod + Shift + S" })
+		},
+		linkButtonOptions: {
+			type: Object,
+			default: () => ({
+				keyboardShortcutText: "Mod + K",
+				linkPlaceholder: "e.g. https://www.dialpad.com"
+			})
+		},
+		bulletListButtonOptions: {
+			type: Object,
+			default: () => ({ keyboardShortcutText: "Mod + Shift + 8" })
+		},
+		orderedListButtonOptions: {
+			type: Object,
+			default: () => ({ keyboardShortcutText: "Mod + Shift + 7" })
+		},
+		blockQuoteButtonOptions: {
+			type: Object,
+			default: () => ({ keyboardShortcutText: "Mod + Shift + B" })
+		},
+		codeButtonOptions: {
+			type: Object,
+			default: () => ({ keyboardShortcutText: "Mod + E" })
+		},
+		codeBlockButtonOptions: {
+			type: Object,
+			default: () => ({ keyboardShortcutText: "Mod + Alt + C" })
+		}
+	},
+	emits: [
+		"submit",
+		"select-media",
+		"add-media",
+		"paste-media",
+		"cancel",
+		"skin-tone",
+		"selected-emoji",
+		"selected-command",
+		"meeting-pill-close",
+		"update:modelValue",
+		"text-input",
+		"markdown-input",
+		"add-emoji",
+		"emoji-scroll-bottom-reached"
+	],
+	data() {
+		return {
+			lastActiveNodes: y,
+			additionalExtensions: [$.configure({ onClose: (e) => {
+				this.$emit("meeting-pill-close", e);
+			} })],
+			internalInputValue: this.modelValue,
+			imagePickerFocus: !1,
+			emojiPickerFocus: !1,
+			emojiPickerOpened: !1,
+			isFocused: !1,
+			linkOptions: { class: "d-link d-c-text d-d-inline-block" },
+			linkDialogOpen: !1,
+			selectedText: "",
+			text: "",
+			showLinkBubbleMenu: !0,
+			i18n: new r()
+		};
+	},
+	computed: {
+		showSendIcon() {
+			return !this.showSend.text;
+		},
+		inputLength() {
+			return this.text.length;
+		},
+		displayCharacterLimitWarning() {
+			return !!this.showCharacterLimit && this.showCharacterLimit.count - this.inputLength <= this.showCharacterLimit.warning;
+		},
+		characterLimitTooltipEnabled() {
+			return this.showCharacterLimit.message && this.showCharacterLimit.count - this.inputLength < 0;
+		},
+		isSelectionActive() {
+			return this.selectedText, (e) => ["bulletList", "orderedList"].includes(e) ? this.richText ? this.lastActiveNodes(this.$refs.richTextEditor?.editor?.state, [{ type: "bulletList" }, { type: "orderedList" }]).includes(e) && this.isFocused : !1 : this.$refs.richTextEditor?.editor?.isActive(e) && this.isFocused;
+		},
+		isSendDisabled() {
+			return this.disableSend || this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count;
+		},
+		emojiPickerHovered() {
+			return this.emojiPickerFocus || this.emojiPickerOpened;
+		},
+		sendIconSize() {
+			return "300";
+		},
+		sendButtonLabel() {
+			return this.i18n.$t("DIALTONE_MESSAGE_INPUT_SEND_BUTTON_ARIA_LABEL");
+		},
+		imagePickerButtonLabel() {
+			return this.i18n.$t("DIALTONE_MESSAGE_INPUT_IMAGE_PICKER_BUTTON_ARIA_LABEL");
+		},
+		emojiPickerButtonLabel() {
+			return this.i18n.$t("DIALTONE_MESSAGE_INPUT_EMOJI_PICKER_BUTTON_ARIA_LABEL");
+		},
+		cancelButtonLabel() {
+			return this.i18n.$t("DIALTONE_MESSAGE_INPUT_CANCEL_BUTTON_ARIA_LABEL");
+		}
+	},
+	watch: {
+		modelValue(e) {
+			this.internalInputValue = e;
+		},
+		emojiPickerOpened(e) {
+			e || this.$refs.richTextEditor?.focusEditor();
+		}
+	},
+	created() {
+		this.modelValue && this.outputFormat === "text" ? this.internalInputValue = this.modelValue.replace(/\n/g, "<br>") : this.internalInputValue = this.modelValue;
+	},
+	methods: {
+		removeClassStyleAttrs: e,
+		linkDialogOpened(e) {
+			this.linkDialogOpen = e, e === !0 ? this.initLinkDialog() : (this.showLinkBubbleMenu = !0, this.$refs.richTextEditor?.focusEditor());
+		},
+		handleTopbarClick(e) {
+			let t = this.$refs.richTextEditor?.editor, n = {
+				bold: () => t?.chain().focus().toggleBold().run(),
+				italic: () => t?.chain().focus().toggleItalic().run(),
+				strike: () => t?.chain().focus().toggleStrike().run(),
+				bulletList: () => t?.chain().focus().toggleBulletList().run(),
+				orderedList: () => t?.chain().focus().toggleOrderedList().run(),
+				blockquote: () => t?.chain().focus().toggleBlockquote().run(),
+				code: () => t?.chain().focus().toggleCode().run(),
+				codeBlock: () => t?.chain().focus().toggleCodeBlock().run()
+			};
+			t && n[e] && n[e]();
+		},
+		initLinkDialog() {
+			this.$refs.link.setInitialValues(this.selectedText, this.$refs.richTextEditor?.editor?.getAttributes("link")?.href), this.showLinkBubbleMenu = !1, this.linkDialogOpen = !0;
+		},
+		removeLink() {
+			this.$refs.richTextEditor?.removeLink(), this.linkDialogOpen = !1;
+		},
+		setLink(e, t) {
+			this.$refs.richTextEditor.setLink(t, e, this.linkOptions, v, _), this.linkDialogOpen = !1;
+		},
+		onMousedown(e) {
+			t(this.$refs.richTextEditor.$el).querySelector(".tiptap").contains(e.target) || (e.preventDefault(), this.$refs.richTextEditor.focusEditor());
+		},
+		onDrop(e) {
+			let t = e.dataTransfer, n = Array.from(t.files);
+			this.$emit("add-media", n);
+		},
+		onPaste(e) {
+			if (e.clipboardData.files.length) {
+				e.stopPropagation(), e.preventDefault();
+				let t = [...e.clipboardData.files];
+				this.$emit("paste-media", t);
+			}
+		},
+		onSkinTone(e) {
+			this.$emit("skin-tone", e);
+		},
+		onSelectEmoji(e, t) {
+			e && (e.shift_key || t(), this.$refs.richTextEditor.editor.commands.insertContent({
+				type: "emoji",
+				attrs: {
+					code: e.shortname,
+					image: e.image,
+					name: e.name
+				}
+			}), this.$emit("selected-emoji", e));
+		},
+		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");
+		},
+		onUpdateModelValue(e) {
+			this.$emit("update:modelValue", e);
+		},
+		onTextInput(e) {
+			this.text = e, this.$emit("text-input", e);
+		},
+		onMarkdownInput(e) {
+			this.$emit("markdown-input", e);
+		}
+	}
+}, ne = { class: "d-recipe-message-input__bottom-section" }, re = { class: "d-recipe-message-input__bottom-section-left" }, ie = { class: "d-recipe-message-input__bottom-section-right" }, ae = { class: "d-recipe-message-input__schedule-message" }, oe = { class: "d-recipe-message-input__sms-count" }, se = { key: 0 };
+function ce(e, t, n, r, i, a) {
+	let o = N("dt-recipe-message-input-link"), s = N("dt-recipe-message-input-topbar"), c = N("dt-rich-text-editor"), l = N("dt-icon-image"), u = N("dt-button"), d = N("dt-input"), f = N("dt-icon-very-satisfied"), p = N("dt-icon-satisfied"), m = N("dt-emoji-picker"), h = N("dt-popover"), g = N("dt-stack"), _ = N("dt-tooltip"), v = N("dt-icon-send"), y = P("dt-scrollbar"), b = P("dt-tooltip");
+	return j(), C("div", {
+		"data-qa": "dt-recipe-message-input",
+		role: "presentation",
+		class: k(["d-recipe-message-input", e.$attrs.class]),
+		style: A(e.$attrs.style),
+		onDragover: t[16] || (t[16] = z(() => {}, ["prevent"])),
+		onDrop: t[17] || (t[17] = z((...e) => a.onDrop && a.onDrop(...e), ["prevent"])),
+		onPaste: t[18] || (t[18] = (...e) => a.onPaste && a.onPaste(...e)),
+		onMousedown: t[19] || (t[19] = (...e) => a.onMousedown && a.onMousedown(...e))
+	}, [
+		e.$slots.blockStart ? M(e.$slots, "blockStart", { key: 0 }) : M(e.$slots, "top", { key: 1 }),
+		n.richText ? (j(), x(s, {
+			key: 2,
+			"bold-button-options": n.boldButtonOptions,
+			"italic-button-options": n.italicButtonOptions,
+			"strike-button-options": n.strikeButtonOptions,
+			"bullet-list-button-options": n.bulletListButtonOptions,
+			"ordered-list-button-options": n.orderedListButtonOptions,
+			"block-quote-button-options": n.blockQuoteButtonOptions,
+			"code-button-options": n.codeButtonOptions,
+			"code-block-button-options": n.codeBlockButtonOptions,
+			"is-selection-active": a.isSelectionActive,
+			onClick: a.handleTopbarClick
+		}, {
+			link: L(() => [D(o, {
+				ref: "link",
+				open: i.linkDialogOpen,
+				"link-button-options": n.linkButtonOptions,
+				"is-selection-active": a.isSelectionActive,
+				onOpened: a.linkDialogOpened,
+				onSetLink: a.setLink,
+				onRemoveLink: a.removeLink
+			}, null, 8, [
+				"open",
+				"link-button-options",
+				"is-selection-active",
+				"onOpened",
+				"onSetLink",
+				"onRemoveLink"
+			])]),
+			_: 1
+		}, 8, [
+			"bold-button-options",
+			"italic-button-options",
+			"strike-button-options",
+			"bullet-list-button-options",
+			"ordered-list-button-options",
+			"block-quote-button-options",
+			"code-button-options",
+			"code-block-button-options",
+			"is-selection-active",
+			"onClick"
+		])) : S("", !0),
+		R((j(), C("div", {
+			class: "d-recipe-message-input__editor-wrapper",
+			style: A({ "max-height": n.maxHeight })
+		}, [D(c, O({
+			ref: "richTextEditor",
+			modelValue: i.internalInputValue,
+			"onUpdate:modelValue": t[0] || (t[0] = (e) => i.internalInputValue = e),
+			"allow-blockquote": n.richText,
+			"allow-bold": n.richText,
+			"allow-bullet-list": n.richText,
+			"allow-code": n.richText,
+			"allow-codeblock": n.richText,
+			"allow-italic": n.richText,
+			"allow-strike": n.richText,
+			"allow-underline": n.richText,
+			"paste-rich-text": n.richText,
+			editable: n.editable,
+			"input-aria-label": n.inputAriaLabel,
+			"input-class": n.inputClass,
+			"output-format": n.outputFormat,
+			"auto-focus": n.autoFocus,
+			link: n.richText,
+			placeholder: n.placeholder,
+			"allow-typing": n.allowTyping,
+			"mention-suggestion": n.mentionSuggestion,
+			"channel-suggestion": n.channelSuggestion,
+			"slash-command-suggestion": n.slashCommandSuggestion,
+			"additional-extensions": i.additionalExtensions,
+			"show-link-bubble-menu": i.showLinkBubbleMenu
+		}, a.removeClassStyleAttrs(e.$attrs), {
+			"onUpdate:modelValue": a.onUpdateModelValue,
+			onTextInput: a.onTextInput,
+			onMarkdownInput: a.onMarkdownInput,
+			onEnter: a.onSend,
+			onSelected: t[1] || (t[1] = (e) => i.selectedText = e),
+			onSelectedCommand: t[2] || (t[2] = (t) => e.$emit("selected-command", t)),
+			onEditLink: a.initLinkDialog,
+			onFocus: t[3] || (t[3] = (e) => i.isFocused = !0),
+			onBlur: t[4] || (t[4] = (e) => i.isFocused = !1)
+		}), null, 16, /* @__PURE__ */ "modelValue.allow-blockquote.allow-bold.allow-bullet-list.allow-code.allow-codeblock.allow-italic.allow-strike.allow-underline.paste-rich-text.editable.input-aria-label.input-class.output-format.auto-focus.link.placeholder.allow-typing.mention-suggestion.channel-suggestion.slash-command-suggestion.additional-extensions.show-link-bubble-menu.onUpdate:modelValue.onTextInput.onMarkdownInput.onEnter.onEditLink".split("."))], 4)), [[y]]),
+		M(e.$slots, "middle"),
+		w("section", ne, [w("div", re, [D(g, {
+			gap: "25",
+			direction: "row",
+			class: "d-recipe-message-input__bottom-section-left-stack"
+		}, {
+			default: L(() => [
+				n.showImagePicker ? R((j(), x(u, {
+					key: 0,
+					"data-qa": "dt-recipe-message-input-image-btn",
+					size: 200,
+					class: "d-recipe-message-input__button",
+					kind: "muted",
+					importance: "clear",
+					"aria-label": a.imagePickerButtonLabel,
+					onClick: a.onSelectImage,
+					onMouseenter: t[5] || (t[5] = (e) => i.imagePickerFocus = !0),
+					onMouseleave: t[6] || (t[6] = (e) => i.imagePickerFocus = !1),
+					onFocus: t[7] || (t[7] = (e) => i.imagePickerFocus = !0),
+					onBlur: t[8] || (t[8] = (e) => i.imagePickerFocus = !1)
+				}, {
+					icon: L(() => [D(l, { size: "300" })]),
+					_: 1
+				}, 8, ["aria-label", "onClick"])), [[
+					b,
+					a.imagePickerButtonLabel,
+					"top-start"
+				]]) : S("", !0),
+				D(d, {
+					ref: "messageInputImageUpload",
+					"data-qa": "dt-recipe-message-input-image-input",
+					accept: "image/*, video/*",
+					type: "file",
+					class: "d-recipe-message-input__image-input",
+					multiple: "",
+					hidden: "",
+					onInput: a.onImageUpload
+				}, null, 8, ["onInput"]),
+				n.showEmojiPicker ? (j(), x(h, {
+					key: 1,
+					open: i.emojiPickerOpened,
+					"onUpdate:open": t[15] || (t[15] = (e) => i.emojiPickerOpened = e),
+					"data-qa": "dt-recipe-message-input-emoji-picker-popover",
+					"initial-focus-element": "#searchInput",
+					padding: "none"
+				}, {
+					anchor: L(({ attrs: e }) => [R((j(), x(u, O(e, {
+						"data-qa": "dt-recipe-message-input-emoji-picker-btn",
+						size: 200,
+						class: "d-recipe-message-input__button",
+						kind: "muted",
+						importance: "clear",
+						"aria-label": a.emojiPickerButtonLabel,
+						onClick: a.toggleEmojiPicker,
+						onMouseenter: t[9] || (t[9] = (e) => i.emojiPickerFocus = !0),
+						onMouseleave: t[10] || (t[10] = (e) => i.emojiPickerFocus = !1),
+						onFocus: t[11] || (t[11] = (e) => i.emojiPickerFocus = !0),
+						onBlur: t[12] || (t[12] = (e) => i.emojiPickerFocus = !1)
+					}), {
+						icon: L(() => [a.emojiPickerHovered ? (j(), x(f, {
+							key: 0,
+							size: "300"
+						})) : (j(), x(p, {
+							key: 1,
+							size: "300"
+						}))]),
+						_: 1
+					}, 16, ["aria-label", "onClick"])), [[b, a.emojiPickerButtonLabel]])]),
+					content: L(({ close: r }) => [D(m, O(n.emojiPickerProps, {
+						onAddEmoji: t[13] || (t[13] = (t) => e.$emit("add-emoji")),
+						onSkinTone: a.onSkinTone,
+						onSelectedEmoji: (e) => a.onSelectEmoji(e, r),
+						onScrollBottomReached: t[14] || (t[14] = (t) => e.$emit("emoji-scroll-bottom-reached"))
+					}), null, 16, ["onSkinTone", "onSelectedEmoji"])]),
+					_: 1
+				}, 8, ["open"])) : S("", !0),
+				M(e.$slots, "emojiGiphyPicker"),
+				M(e.$slots, "customActionIcons"),
+				M(e.$slots, "messagePolish")
+			]),
+			_: 3
+		})]), w("div", ie, [D(g, {
+			direction: "row",
+			gap: "50"
+		}, {
+			default: L(() => [
+				w("div", ae, [M(e.$slots, "scheduleMessage")]),
+				w("div", oe, [M(e.$slots, "smsCount")]),
+				n.showCharacterLimit ? (j(), x(_, {
+					key: 0,
+					class: "d-recipe-message-input__remaining-char-tooltip",
+					placement: "top-end",
+					enabled: a.characterLimitTooltipEnabled,
+					message: n.showCharacterLimit.message,
+					offset: [10, 8]
+				}, {
+					anchor: L(() => [R(w("p", {
+						class: "d-recipe-message-input__remaining-char",
+						"data-qa": "dt-recipe-message-input-character-limit"
+					}, F(n.showCharacterLimit.count - a.inputLength), 513), [[I, a.displayCharacterLimitWarning]])]),
+					_: 1
+				}, 8, ["enabled", "message"])) : S("", !0),
+				n.showCancel ? R((j(), x(u, {
+					key: 1,
+					"data-qa": "dt-recipe-message-input-cancel-button",
+					class: "d-recipe-message-input__button d-recipe-message-input__cancel-button",
+					size: 200,
+					kind: "muted",
+					importance: "clear",
+					"aria-label": a.cancelButtonLabel,
+					onClick: a.onCancel
+				}, {
+					default: L(() => [w("p", null, F(a.cancelButtonLabel), 1)]),
+					_: 1
+				}, 8, ["aria-label", "onClick"])), [[b, a.cancelButtonLabel]]) : S("", !0),
+				M(e.$slots, "sendButton", {}, () => [n.showSend ? R((j(), x(u, {
+					key: 0,
+					"data-qa": "dt-recipe-message-input-send-btn",
+					size: 200,
+					kind: "default",
+					importance: "primary",
+					class: k(["d-recipe-message-input__button d-recipe-message-input__send-button", {
+						"d-recipe-message-input__send-button--disabled": a.isSendDisabled,
+						"d-btn--icon-only": a.showSendIcon
+					}]),
+					"aria-label": a.sendButtonLabel,
+					"aria-disabled": a.isSendDisabled,
+					onClick: a.onSend
+				}, T({
+					default: L(() => [n.showSend.text ? (j(), C("p", se, F(n.showSend.text), 1)) : S("", !0)]),
+					_: 2
+				}, [a.showSendIcon ? {
+					name: "icon",
+					fn: L(() => [M(e.$slots, "sendIcon", { iconSize: a.sendIconSize }, () => [D(v, { size: a.sendIconSize }, null, 8, ["size"])])]),
+					key: "0"
+				} : void 0]), 1032, [
+					"class",
+					"aria-label",
+					"aria-disabled",
+					"onClick"
+				])), [[
+					b,
+					a.sendButtonLabel,
+					"top-end"
+				]]) : S("", !0)])
+			]),
+			_: 3
+		})])])
+	], 38);
+}
+var le = /* @__PURE__ */ n(te, [["render", ce]]);
+//#endregion
+export { le as t };
+
+//# sourceMappingURL=message_input-GihDjqTJ.js.map