@dialpad/dialtone-vue 3.218.3 → 3.218.5

package/dist/message_input-DfcdjT6O.js

@@ -0,0 +1,668 @@
+import { addClassStyleAttrs as e, removeClassStyleAttrs as t, returnFirstEl as n } from "./common/utils/index.js";
+import { t as r } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { DialtoneLocalization as i } from "./localization/index.js";
+import a from "./lib/button/button.js";
+import o from "./lib/item-layout/item-layout.js";
+import s from "./lib/stack/stack.js";
+import c from "./lib/tooltip/tooltip.js";
+import l from "./lib/popover/popover.js";
+import u from "./lib/input/input.js";
+import { t as d } from "./emoji_picker-tVHfpHDk.js";
+import { NodeViewWrapper as f, VueNodeViewRenderer as p, nodeViewProps as m } from "./node_modules/@tiptap/vue-3.js";
+import { t as h } from "./rich_text_editor-Cu0E6GWr.js";
+import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as g, RICH_TEXT_EDITOR_OUTPUT_FORMATS as _ } from "./lib/rich-text-editor/rich-text-editor-constants.js";
+import { EDITOR_DEFAULT_LINK_PREFIX as v, EDITOR_SUPPORTED_LINK_PROTOCOLS as y } from "./lib/editor/editor-constants.js";
+import b from "./lib/message-input/last-active-nodes.js";
+import x from "./lib/message-input/message-input-topbar.js";
+import ee from "./lib/message-input/message-input-link.js";
+import { createBlock as S, createCommentVNode as C, createElementBlock as w, createElementVNode as T, createSlots as E, createTextVNode as D, createVNode as O, mergeProps as k, normalizeClass as A, normalizeStyle as j, openBlock as M, renderSlot as N, resolveComponent as P, resolveDirective as F, toDisplayString as I, vShow as L, withCtx as R, withDirectives as z, withModifiers as B } from "vue";
+import { DtIconClose as V, DtIconImage as H, DtIconSatisfied as U, DtIconSend as W, DtIconVerySatisfied as G, DtIconVideo as K } from "@dialpad/dialtone-icons/vue3";
+import { Node as q, mergeAttributes as J } from "@tiptap/core";
+//#region recipes/conversation_view/message_input/extensions/meeting_pill/MeetingPill.vue
+var Y = {
+	name: "MeetingPill",
+	components: {
+		NodeViewWrapper: f,
+		DtItemLayout: o,
+		DtIconClose: V,
+		DtButton: a,
+		DtIconVideo: K
+	},
+	props: m,
+	emits: ["meeting-pill-close"],
+	data() {
+		return { i18n: new i() };
+	},
+	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);
+	} }
+}, X = { class: "d-recipe-message-input-meeting-pill__icon" }, Z = { class: "d-recipe-message-input-meeting-pill__close" };
+function Q(e, t, n, r, i, a) {
+	let o = P("dt-icon-video"), s = P("dt-icon-close"), c = P("dt-button"), l = P("dt-item-layout"), u = P("node-view-wrapper");
+	return M(), S(u, { class: "d-recipe-message-input-meeting-pill" }, {
+		default: R(() => [O(l, {
+			class: "d-recipe-message-input-meeting-pill__layout",
+			unstyled: ""
+		}, {
+			left: R(() => [T("div", X, [O(o, { size: "400" })])]),
+			right: R(() => [T("div", Z, [O(c, {
+				circle: "",
+				importance: "clear",
+				size: "xs",
+				"aria-label": a.closeButtonTitle,
+				title: a.closeButtonTitle,
+				onClick: a.close
+			}, {
+				icon: R(() => [O(s, { size: "300" })]),
+				_: 1
+			}, 8, [
+				"aria-label",
+				"title",
+				"onClick"
+			])])]),
+			default: R(() => [D(" " + I(e.node.attrs.text) + " ", 1)]),
+			_: 1
+		})]),
+		_: 1
+	});
+}
+var $ = /* @__PURE__ */ r(Y, [["render", Q]]), te = q.create({
+	name: "meetingPill",
+	atom: !0,
+	group: "inline",
+	inline: !0,
+	addOptions() {
+		return { onClose: () => {} };
+	},
+	addStorage() {
+		return { onClose: this.options.onClose };
+	},
+	addNodeView() {
+		return p($);
+	},
+	addAttributes() {
+		return { text: { default: "Please pass in \"text\" attribute" } };
+	},
+	parseHTML() {
+		return [{ tag: "meeting-pill" }];
+	},
+	renderText() {
+		return "/dpm";
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return ["meeting-pill", J(e)];
+	}
+}), ne = {
+	compatConfig: { MODE: 3 },
+	name: "DtRecipeMessageInput",
+	components: {
+		DtButton: a,
+		DtEmojiPicker: d,
+		DtInput: u,
+		DtPopover: l,
+		DtRecipeMessageInputTopbar: x,
+		DtRecipeMessageInputLink: ee,
+		DtRichTextEditor: h,
+		DtTooltip: c,
+		DtStack: s,
+		DtIconImage: H,
+		DtIconVerySatisfied: G,
+		DtIconSatisfied: U,
+		DtIconSend: W
+	},
+	inheritAttrs: !1,
+	props: {
+		richText: {
+			type: Boolean,
+			default: !0
+		},
+		modelValue: {
+			type: [Object, String],
+			default: ""
+		},
+		editable: {
+			type: Boolean,
+			default: !0
+		},
+		inputAriaLabel: {
+			type: String,
+			required: !0,
+			default: ""
+		},
+		preventTyping: {
+			type: Boolean,
+			default: !1
+		},
+		inputClass: {
+			type: String,
+			default: ""
+		},
+		autoFocus: {
+			type: [
+				Boolean,
+				String,
+				Number
+			],
+			default: !1,
+			validator(e) {
+				return typeof e == "string" ? g.includes(e) : !0;
+			}
+		},
+		outputFormat: {
+			type: String,
+			default: "json",
+			validator(e) {
+				return _.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: b,
+			additionalExtensions: [te.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: "",
+			hideLinkBubbleMenu: !1,
+			i18n: new i()
+		};
+	},
+	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: t,
+		addClassStyleAttrs: e,
+		linkDialogOpened(e) {
+			this.linkDialogOpen = e, e === !0 ? this.initLinkDialog() : (this.hideLinkBubbleMenu = !1, 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.hideLinkBubbleMenu = !0, this.linkDialogOpen = !0;
+		},
+		removeLink() {
+			this.$refs.richTextEditor?.removeLink(), this.linkDialogOpen = !1;
+		},
+		setLink(e, t) {
+			this.$refs.richTextEditor.setLink(t, e, this.linkOptions, y, v), this.linkDialogOpen = !1;
+		},
+		onMousedown(e) {
+			n(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");
+		},
+		onInput(e) {
+			this.$emit("update:modelValue", e);
+		},
+		onTextInput(e) {
+			this.text = e, this.$emit("text-input", e);
+		},
+		onMarkdownInput(e) {
+			this.$emit("markdown-input", e);
+		}
+	}
+}, re = { class: "d-recipe-message-input__bottom-section" }, ie = { class: "d-recipe-message-input__bottom-section-left" }, ae = { class: "d-recipe-message-input__bottom-section-right" }, oe = { class: "d-recipe-message-input__schedule-message" }, se = { class: "d-recipe-message-input__sms-count" }, ce = { key: 0 };
+function le(e, t, n, r, i, a) {
+	let o = P("dt-recipe-message-input-link"), s = P("dt-recipe-message-input-topbar"), c = P("dt-rich-text-editor"), l = P("dt-icon-image"), u = P("dt-button"), d = P("dt-input"), f = P("dt-icon-very-satisfied"), p = P("dt-icon-satisfied"), m = P("dt-emoji-picker"), h = P("dt-popover"), g = P("dt-stack"), _ = P("dt-tooltip"), v = P("dt-icon-send"), y = F("dt-scrollbar"), b = F("dt-tooltip");
+	return M(), w("div", k({
+		"data-qa": "dt-recipe-message-input",
+		role: "presentation",
+		class: "d-recipe-message-input"
+	}, a.addClassStyleAttrs(e.$attrs), {
+		onDragover: t[16] || (t[16] = B(() => {}, ["prevent"])),
+		onDrop: t[17] || (t[17] = B((...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))
+	}), [
+		N(e.$slots, "top"),
+		n.richText ? (M(), S(s, {
+			key: 0,
+			"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: R(() => [O(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"
+		])) : C("", !0),
+		z((M(), w("div", {
+			class: "d-recipe-message-input__editor-wrapper",
+			style: j({ "max-height": n.maxHeight })
+		}, [O(c, k({
+			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,
+			"prevent-typing": n.preventTyping,
+			"mention-suggestion": n.mentionSuggestion,
+			"channel-suggestion": n.channelSuggestion,
+			"slash-command-suggestion": n.slashCommandSuggestion,
+			"additional-extensions": i.additionalExtensions,
+			"hide-link-bubble-menu": i.hideLinkBubbleMenu
+		}, a.removeClassStyleAttrs(e.$attrs), {
+			onInput: a.onInput,
+			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.prevent-typing.mention-suggestion.channel-suggestion.slash-command-suggestion.additional-extensions.hide-link-bubble-menu.onInput.onTextInput.onMarkdownInput.onEnter.onEditLink".split("."))], 4)), [[y]]),
+		N(e.$slots, "middle"),
+		T("section", re, [T("div", ie, [O(g, {
+			gap: "200",
+			direction: "row",
+			class: "d-recipe-message-input__bottom-section-left-stack"
+		}, {
+			default: R(() => [
+				n.showImagePicker ? z((M(), S(u, {
+					key: 0,
+					"data-qa": "dt-recipe-message-input-image-btn",
+					size: "sm",
+					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: R(() => [O(l, { size: "300" })]),
+					_: 1
+				}, 8, ["aria-label", "onClick"])), [[
+					b,
+					a.imagePickerButtonLabel,
+					"top-start"
+				]]) : C("", !0),
+				O(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 ? (M(), S(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: R(({ attrs: e }) => [z((M(), S(u, k(e, {
+						"data-qa": "dt-recipe-message-input-emoji-picker-btn",
+						size: "sm",
+						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: R(() => [a.emojiPickerHovered ? (M(), S(f, {
+							key: 0,
+							size: "300"
+						})) : (M(), S(p, {
+							key: 1,
+							size: "300"
+						}))]),
+						_: 1
+					}, 16, ["aria-label", "onClick"])), [[b, a.emojiPickerButtonLabel]])]),
+					content: R(({ close: r }) => [O(m, k(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"])) : C("", !0),
+				N(e.$slots, "emojiGiphyPicker"),
+				N(e.$slots, "customActionIcons"),
+				N(e.$slots, "messagePolish")
+			]),
+			_: 3
+		})]), T("div", ae, [O(g, {
+			direction: "row",
+			gap: "300"
+		}, {
+			default: R(() => [
+				T("div", oe, [N(e.$slots, "scheduleMessage")]),
+				T("div", se, [N(e.$slots, "smsCount")]),
+				n.showCharacterLimit ? (M(), S(_, {
+					key: 0,
+					class: "d-recipe-message-input__remaining-char-tooltip",
+					placement: "top-end",
+					enabled: a.characterLimitTooltipEnabled,
+					message: n.showCharacterLimit.message,
+					offset: [10, 8]
+				}, {
+					anchor: R(() => [z(T("p", {
+						class: "d-recipe-message-input__remaining-char",
+						"data-qa": "dt-recipe-message-input-character-limit"
+					}, I(n.showCharacterLimit.count - a.inputLength), 513), [[L, a.displayCharacterLimitWarning]])]),
+					_: 1
+				}, 8, ["enabled", "message"])) : C("", !0),
+				n.showCancel ? z((M(), S(u, {
+					key: 1,
+					"data-qa": "dt-recipe-message-input-cancel-button",
+					class: "d-recipe-message-input__button d-recipe-message-input__cancel-button",
+					size: "sm",
+					kind: "muted",
+					importance: "clear",
+					"aria-label": a.cancelButtonLabel,
+					onClick: a.onCancel
+				}, {
+					default: R(() => [T("p", null, I(a.cancelButtonLabel), 1)]),
+					_: 1
+				}, 8, ["aria-label", "onClick"])), [[b, a.cancelButtonLabel]]) : C("", !0),
+				N(e.$slots, "sendButton", {}, () => [n.showSend ? z((M(), S(u, {
+					key: 0,
+					"data-qa": "dt-recipe-message-input-send-btn",
+					size: "sm",
+					kind: "default",
+					importance: "primary",
+					class: A(["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
+				}, E({
+					default: R(() => [n.showSend.text ? (M(), w("p", ce, I(n.showSend.text), 1)) : C("", !0)]),
+					_: 2
+				}, [a.showSendIcon ? {
+					name: "icon",
+					fn: R(() => [N(e.$slots, "sendIcon", { iconSize: a.sendIconSize }, () => [O(v, { size: a.sendIconSize }, null, 8, ["size"])])]),
+					key: "0"
+				} : void 0]), 1032, [
+					"class",
+					"aria-label",
+					"aria-disabled",
+					"onClick"
+				])), [[
+					b,
+					a.sendButtonLabel,
+					"top-end"
+				]]) : C("", !0)])
+			]),
+			_: 3
+		})])])
+	], 16);
+}
+var ue = /* @__PURE__ */ r(ne, [["render", le]]);
+//#endregion
+export { ue as t };
+
+//# sourceMappingURL=message_input-DfcdjT6O.js.map