@dialpad/dialtone/dist/vue3/message_input-DO6pV_GG.js

Dialpad's Dialtone design system monorepo

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-DYu2R0kw.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-DO6pV_GG.js.map