@sdata/web-vue 3.19.0 → 3.20.0

package/es/sender/sender.vue_vue_type_script_setup_true_lang.js

@@ -12,7 +12,8 @@ import IconArrowUp from "../icon/icon-arrow-up/index.js";
 import IconMute from "../icon/icon-mute/index.js";
 import IconVoice from "../icon/icon-voice/index.js";
 import { useSpeech } from "./use-speech.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, h, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, provide, renderSlot, resolveDynamicComponent, shallowRef, toRef, unref, useAttrs, watch, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, h, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, provide, renderSlot, resolveDynamicComponent, shallowRef, toRef, unref, useAttrs, watch, withCtx } from "vue";
+import { createReusableTemplate } from "@vueuse/core";
 import { INSERT_LINE_BREAK_COMMAND } from "lexical";
 //#region components/sender/sender.vue?vue&type=script&setup=true&lang.ts
 var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
@@ -39,6 +40,7 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			type: Boolean,
 			default: true
 		},
+		suffixPlacement: { default: "content" },
 		components: {},
 		classNames: { default: () => ({}) },
 		styles: { default: () => ({}) },
@@ -53,12 +55,20 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		"paste",
 		"pasteFile",
 		"focus",
-		"blur"
+		"blur",
+		"speechStart",
+		"speechData",
+		"speechEnd",
+		"speechError",
+		"speechTransportOpen",
+		"speechTransportMessage",
+		"speechTransportClose"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const { t } = useI18n();
+		const [DefineSuffix, ReuseSuffix] = createReusableTemplate();
 		const RenderContent = defineComponent({
 			name: "SenderRenderContent",
 			props: { content: { type: null } },
@@ -394,11 +404,14 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			if (cancelDisabled.value || props.disabled) return;
 			emit("cancel");
 		};
-		const { available: speechAvailable, recording, requesting: speechRequesting, statusText: speechStatusText, trigger: triggerSpeech } = useSpeech(toRef(props, "allowSpeech"), (transcript) => {
-			if (isSlotMode.value) {
-				var _slotInputRef$value3;
-				(_slotInputRef$value3 = slotInputRef.value) === null || _slotInputRef$value3 === void 0 || _slotInputRef$value3.insertText(transcript, { position: "end" });
-			} else setNormalValue(`${mergedValue.value} ${transcript}`);
+		const { available: speechAvailable, recording, requesting: speechRequesting, statusText: speechStatusText, trigger: triggerSpeech } = useSpeech(toRef(props, "allowSpeech"), {
+			onStart: (event) => emit("speechStart", event),
+			onData: (event) => emit("speechData", event),
+			onEnd: (event) => emit("speechEnd", event),
+			onError: (event) => emit("speechError", event),
+			onTransportOpen: (event) => emit("speechTransportOpen", event),
+			onTransportMessage: (event) => emit("speechTransportMessage", event),
+			onTransportClose: (event) => emit("speechTransportClose", event)
 		});
 		const actionContext = computed(() => ({
 			send: triggerSend,
@@ -438,10 +451,10 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				return;
 			}
 			if (!modifierPressed) {
-				var _slotInputRef$value4;
+				var _slotInputRef$value3;
 				event.preventDefault();
 				event.stopPropagation();
-				(_slotInputRef$value4 = slotInputRef.value) === null || _slotInputRef$value4 === void 0 || _slotInputRef$value4.dispatchCommand(INSERT_LINE_BREAK_COMMAND, void 0);
+				(_slotInputRef$value3 = slotInputRef.value) === null || _slotInputRef$value3 === void 0 || _slotInputRef$value3.dispatchCommand(INSERT_LINE_BREAK_COMMAND, void 0);
 			}
 		};
 		const handlePaste = (event) => {
@@ -475,18 +488,18 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		const focus = (options) => {
 			var _textareaRef$value, _textareaRef$value$fo, _options$cursor;
 			if (isSlotMode.value) {
-				var _slotInputRef$value6;
+				var _slotInputRef$value5;
 				const { cursor = "end", preventScroll = false, key } = options !== null && options !== void 0 ? options : {};
 				if (cursor === "slot") {
-					var _slotInputRef$value5, _ref2;
-					const root = (_slotInputRef$value5 = slotInputRef.value) === null || _slotInputRef$value5 === void 0 ? void 0 : _slotInputRef$value5.rootElement;
+					var _slotInputRef$value4, _ref2;
+					const root = (_slotInputRef$value4 = slotInputRef.value) === null || _slotInputRef$value4 === void 0 ? void 0 : _slotInputRef$value4.rootElement;
 					const selector = key ? `[data-rich-text-component-key="${CSS.escape(key)}"]` : "[data-rich-text-component]";
 					const component = root === null || root === void 0 ? void 0 : root.querySelector(selector);
 					const control = component === null || component === void 0 ? void 0 : component.querySelector("input, textarea, button, [contenteditable=\"true\"]");
 					(_ref2 = control !== null && control !== void 0 ? control : component) === null || _ref2 === void 0 || _ref2.focus({ preventScroll });
 					return;
 				}
-				(_slotInputRef$value6 = slotInputRef.value) === null || _slotInputRef$value6 === void 0 || _slotInputRef$value6.focus(void 0, {
+				(_slotInputRef$value5 = slotInputRef.value) === null || _slotInputRef$value5 === void 0 || _slotInputRef$value5.focus(void 0, {
 					preventScroll,
 					selection: cursor === "all" ? "all" : cursor
 				});
@@ -502,8 +515,8 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			else textarea.setSelectionRange(position, position);
 		};
 		const blur = () => {
-			var _slotInputRef$value7;
-			if (isSlotMode.value) (_slotInputRef$value7 = slotInputRef.value) === null || _slotInputRef$value7 === void 0 || _slotInputRef$value7.blur();
+			var _slotInputRef$value6;
+			if (isSlotMode.value) (_slotInputRef$value6 = slotInputRef.value) === null || _slotInputRef$value6 === void 0 || _slotInputRef$value6.blur();
 			else {
 				var _textareaRef$value2, _textareaRef$value2$b;
 				const textarea = getNativeTextarea();
@@ -514,15 +527,15 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		const insert = (value, position = "cursor", replaceCharacters, preventScroll) => {
 			if (isSlotMode.value) {
 				if (typeof value === "string") {
-					var _slotInputRef$value8;
-					(_slotInputRef$value8 = slotInputRef.value) === null || _slotInputRef$value8 === void 0 || _slotInputRef$value8.insertText(value, {
+					var _slotInputRef$value7;
+					(_slotInputRef$value7 = slotInputRef.value) === null || _slotInputRef$value7 === void 0 || _slotInputRef$value7.insertText(value, {
 						position,
 						replaceCharacters
 					});
 				} else {
-					var _slotInputRef$value9;
+					var _slotInputRef$value8;
 					runtimeSlotConfig.value = [...runtimeSlotConfig.value, ...value];
-					(_slotInputRef$value9 = slotInputRef.value) === null || _slotInputRef$value9 === void 0 || _slotInputRef$value9.insertContent(value.map((config) => {
+					(_slotInputRef$value8 = slotInputRef.value) === null || _slotInputRef$value8 === void 0 || _slotInputRef$value8.insertContent(value.map((config) => {
 						var _config$value3;
 						return config.type === "text" ? (_config$value3 = config.value) !== null && _config$value3 !== void 0 ? _config$value3 : "" : createSlotNode(config);
 					}), {
@@ -645,8 +658,8 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		});
 		__expose({
 			get inputElement() {
-				var _slotInputRef$value$r, _slotInputRef$value10;
-				return isSlotMode.value ? (_slotInputRef$value$r = (_slotInputRef$value10 = slotInputRef.value) === null || _slotInputRef$value10 === void 0 ? void 0 : _slotInputRef$value10.rootElement) !== null && _slotInputRef$value$r !== void 0 ? _slotInputRef$value$r : null : getNativeTextarea();
+				var _slotInputRef$value$r, _slotInputRef$value9;
+				return isSlotMode.value ? (_slotInputRef$value$r = (_slotInputRef$value9 = slotInputRef.value) === null || _slotInputRef$value9 === void 0 ? void 0 : _slotInputRef$value9.rootElement) !== null && _slotInputRef$value$r !== void 0 ? _slotInputRef$value$r : null : getNativeTextarea();
 			},
 			get nativeElement() {
 				var _containerRef$value2;
@@ -659,7 +672,67 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			getValue
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Tooltip), {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(DefineSuffix), null, {
+				default: withCtx(() => {
+					var _props$classNames, _props$styles;
+					return [createElementVNode("div", {
+						class: normalizeClass([`${unref(prefixCls)}-actions-list`, (_props$classNames = __props.classNames) === null || _props$classNames === void 0 ? void 0 : _props$classNames.suffix]),
+						style: normalizeStyle((_props$styles = __props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.suffix)
+					}, [renderSlot(_ctx.$slots, "suffix", { actions: actionContext.value }, () => [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-actions-list-presets`) }, [__props.allowSpeech ? (openBlock(), createBlock(unref(Button), {
+						key: 0,
+						type: "text",
+						loading: unref(speechRequesting),
+						disabled: actionContext.value.speechDisabled,
+						title: unref(speechStatusText),
+						class: normalizeClass([`${unref(prefixCls)}-actions-btn`, { [`${unref(prefixCls)}-actions-btn-disabled`]: actionContext.value.speechDisabled }]),
+						"aria-label": unref(speechStatusText),
+						onClick: _cache[0] || (_cache[0] = ($event) => unref(triggerSpeech)())
+					}, {
+						icon: withCtx(() => [unref(recording) ? (openBlock(), createBlock(unref(RecordingIcon), {
+							key: 0,
+							class: normalizeClass(`${unref(prefixCls)}-actions-btn-recording-icon`)
+						}, null, 8, ["class"])) : actionContext.value.speechDisabled ? (openBlock(), createBlock(unref(IconMute), { key: 1 })) : (openBlock(), createBlock(unref(IconVoice), { key: 2 }))]),
+						_: 1
+					}, 8, [
+						"loading",
+						"disabled",
+						"title",
+						"class",
+						"aria-label"
+					])) : createCommentVNode("", true), __props.loading ? (openBlock(), createBlock(unref(Button), {
+						key: 1,
+						type: "text",
+						shape: "circle",
+						disabled: actionContext.value.cancelDisabled,
+						class: normalizeClass([`${unref(prefixCls)}-actions-btn`, `${unref(prefixCls)}-actions-btn-loading-button`]),
+						"aria-label": unref(t)("sender.stopGenerating"),
+						onClick: triggerCancel
+					}, {
+						icon: withCtx(() => [createVNode(unref(StopLoadingIcon), { class: normalizeClass(`${unref(prefixCls)}-actions-btn-loading-icon`) }, null, 8, ["class"])]),
+						_: 1
+					}, 8, [
+						"disabled",
+						"class",
+						"aria-label"
+					])) : (openBlock(), createBlock(unref(Button), {
+						key: 2,
+						type: "primary",
+						shape: "circle",
+						disabled: actionContext.value.submitDisabled,
+						class: normalizeClass([`${unref(prefixCls)}-actions-btn`, { [`${unref(prefixCls)}-actions-btn-disabled`]: actionContext.value.submitDisabled }]),
+						"aria-label": unref(t)("sender.send"),
+						onClick: triggerSend
+					}, {
+						icon: withCtx(() => [createVNode(unref(IconArrowUp))]),
+						_: 1
+					}, 8, [
+						"disabled",
+						"class",
+						"aria-label"
+					]))], 2)])], 6)];
+				}),
+				_: 3
+			}), createVNode(unref(Tooltip), {
 				"popup-visible": readonlyTipVisible.value,
 				content: unref(readonlyTipText),
 				disabled: readonlyTipDisabled.value,
@@ -667,26 +740,26 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				onPopupVisibleChange: handleReadonlyTipVisibleChange
 			}, {
 				default: withCtx(() => {
-					var _props$styles, _props$classNames, _props$styles2, _props$classNames2, _props$styles3, _props$classNames3, _props$styles4, _props$classNames4, _props$styles5, _props$classNames5, _props$styles6;
+					var _props$styles2, _props$classNames2, _props$styles3, _props$classNames3, _props$styles4, _props$classNames4, _props$styles5, _props$classNames5, _props$styles6;
 					return [createElementVNode("div", mergeProps({
 						ref_key: "containerRef",
 						ref: containerRef
 					}, _ctx.$attrs, {
 						class: rootClass.value,
-						style: (_props$styles = __props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.root,
+						style: (_props$styles2 = __props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.root,
 						onClick: _cache[5] || (_cache[5] = (...args) => unref(showReadonlyTip) && unref(showReadonlyTip)(...args)),
 						onKeydownCapture: handleReadonlyKeydown
 					}), [
 						renderSlot(_ctx.$slots, "header", { actions: actionContext.value }),
 						createElementVNode("div", {
-							class: normalizeClass([`${unref(prefixCls)}-content`, (_props$classNames = __props.classNames) === null || _props$classNames === void 0 ? void 0 : _props$classNames.content]),
-							style: normalizeStyle((_props$styles2 = __props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.content),
+							class: normalizeClass([`${unref(prefixCls)}-content`, (_props$classNames2 = __props.classNames) === null || _props$classNames2 === void 0 ? void 0 : _props$classNames2.content]),
+							style: normalizeStyle((_props$styles3 = __props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.content),
 							onMousedown: handleContentMousedown
 						}, [
 							_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", {
 								key: 0,
-								class: normalizeClass([`${unref(prefixCls)}-prefix`, (_props$classNames2 = __props.classNames) === null || _props$classNames2 === void 0 ? void 0 : _props$classNames2.prefix]),
-								style: normalizeStyle((_props$styles3 = __props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.prefix)
+								class: normalizeClass([`${unref(prefixCls)}-prefix`, (_props$classNames3 = __props.classNames) === null || _props$classNames3 === void 0 ? void 0 : _props$classNames3.prefix]),
+								style: normalizeStyle((_props$styles4 = __props.styles) === null || _props$styles4 === void 0 ? void 0 : _props$styles4.prefix)
 							}, [renderSlot(_ctx.$slots, "prefix", { actions: actionContext.value })], 6)) : createCommentVNode("", true),
 							isSlotMode.value ? (openBlock(), createBlock(unref(RichTextEditor), {
 								key: 1,
@@ -704,8 +777,8 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 								onKeydownCapture: handleSlotKeydown,
 								onKeyupCapture: __props.onKeyup,
 								onPasteCapture: handleSlotPaste,
-								onFocus: _cache[0] || (_cache[0] = ($event) => emit("focus", $event)),
-								onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event))
+								onFocus: _cache[1] || (_cache[1] = ($event) => emit("focus", $event)),
+								onBlur: _cache[2] || (_cache[2] = ($event) => emit("blur", $event))
 							}, {
 								"node-senderSkill": withCtx(({ remove }) => [activeSkill.value ? (openBlock(), createBlock(unref(SkillTag), {
 									key: 0,
@@ -774,15 +847,15 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 								disabled: __props.disabled,
 								readonly: __props.readonly,
 								"auto-size": __props.autoSize,
-								class: normalizeClass([`${unref(prefixCls)}-input`, (_props$classNames3 = __props.classNames) === null || _props$classNames3 === void 0 ? void 0 : _props$classNames3.input]),
-								style: normalizeStyle((_props$styles4 = __props.styles) === null || _props$styles4 === void 0 ? void 0 : _props$styles4.input),
+								class: normalizeClass([`${unref(prefixCls)}-input`, (_props$classNames4 = __props.classNames) === null || _props$classNames4 === void 0 ? void 0 : _props$classNames4.input]),
+								style: normalizeStyle((_props$styles5 = __props.styles) === null || _props$styles5 === void 0 ? void 0 : _props$styles5.input),
 								"onUpdate:modelValue": handleValueUpdate,
 								onInput: handleInput,
 								onKeydown: handleKeydown,
 								onKeyup: __props.onKeyup,
 								onPaste: handlePaste,
-								onFocus: _cache[2] || (_cache[2] = ($event) => emit("focus", $event)),
-								onBlur: _cache[3] || (_cache[3] = ($event) => emit("blur", $event))
+								onFocus: _cache[3] || (_cache[3] = ($event) => emit("focus", $event)),
+								onBlur: _cache[4] || (_cache[4] = ($event) => emit("blur", $event))
 							}, null, 40, [
 								"model-value",
 								"default-value",
@@ -794,68 +867,19 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 								"style",
 								"onKeyup"
 							])),
-							__props.showActions ? (openBlock(), createElementBlock("div", {
-								key: 3,
-								class: normalizeClass([`${unref(prefixCls)}-actions-list`, (_props$classNames4 = __props.classNames) === null || _props$classNames4 === void 0 ? void 0 : _props$classNames4.suffix]),
-								style: normalizeStyle((_props$styles5 = __props.styles) === null || _props$styles5 === void 0 ? void 0 : _props$styles5.suffix)
-							}, [renderSlot(_ctx.$slots, "suffix", { actions: actionContext.value }, () => [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-actions-list-presets`) }, [__props.allowSpeech ? (openBlock(), createBlock(unref(Button), {
-								key: 0,
-								type: "text",
-								loading: unref(speechRequesting),
-								disabled: actionContext.value.speechDisabled,
-								title: unref(speechStatusText),
-								class: normalizeClass([`${unref(prefixCls)}-actions-btn`, { [`${unref(prefixCls)}-actions-btn-disabled`]: actionContext.value.speechDisabled }]),
-								"aria-label": unref(speechStatusText),
-								onClick: _cache[4] || (_cache[4] = ($event) => unref(triggerSpeech)())
-							}, {
-								icon: withCtx(() => [unref(recording) ? (openBlock(), createBlock(unref(RecordingIcon), {
-									key: 0,
-									class: normalizeClass(`${unref(prefixCls)}-actions-btn-recording-icon`)
-								}, null, 8, ["class"])) : actionContext.value.speechDisabled ? (openBlock(), createBlock(unref(IconMute), { key: 1 })) : (openBlock(), createBlock(unref(IconVoice), { key: 2 }))]),
-								_: 1
-							}, 8, [
-								"loading",
-								"disabled",
-								"title",
-								"class",
-								"aria-label"
-							])) : createCommentVNode("", true), __props.loading ? (openBlock(), createBlock(unref(Button), {
-								key: 1,
-								type: "text",
-								shape: "circle",
-								disabled: actionContext.value.cancelDisabled,
-								class: normalizeClass([`${unref(prefixCls)}-actions-btn`, `${unref(prefixCls)}-actions-btn-loading-button`]),
-								"aria-label": unref(t)("sender.stopGenerating"),
-								onClick: triggerCancel
-							}, {
-								icon: withCtx(() => [createVNode(unref(StopLoadingIcon), { class: normalizeClass(`${unref(prefixCls)}-actions-btn-loading-icon`) }, null, 8, ["class"])]),
-								_: 1
-							}, 8, [
-								"disabled",
-								"class",
-								"aria-label"
-							])) : (openBlock(), createBlock(unref(Button), {
-								key: 2,
-								type: "primary",
-								shape: "circle",
-								disabled: actionContext.value.submitDisabled,
-								class: normalizeClass([`${unref(prefixCls)}-actions-btn`, { [`${unref(prefixCls)}-actions-btn-disabled`]: actionContext.value.submitDisabled }]),
-								"aria-label": unref(t)("sender.send"),
-								onClick: triggerSend
-							}, {
-								icon: withCtx(() => [createVNode(unref(IconArrowUp))]),
-								_: 1
-							}, 8, [
-								"disabled",
-								"class",
-								"aria-label"
-							]))], 2)])], 6)) : createCommentVNode("", true)
+							__props.showActions && __props.suffixPlacement === "content" ? (openBlock(), createBlock(unref(ReuseSuffix), { key: 3 })) : createCommentVNode("", true)
 						], 38),
-						_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+						_ctx.$slots.footer || __props.showActions && __props.suffixPlacement === "footer" ? (openBlock(), createElementBlock("div", {
 							key: 0,
 							class: normalizeClass([`${unref(prefixCls)}-footer`, (_props$classNames5 = __props.classNames) === null || _props$classNames5 === void 0 ? void 0 : _props$classNames5.footer]),
 							style: normalizeStyle((_props$styles6 = __props.styles) === null || _props$styles6 === void 0 ? void 0 : _props$styles6.footer)
-						}, [renderSlot(_ctx.$slots, "footer", { actions: actionContext.value })], 6)) : createCommentVNode("", true)
+						}, [_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass(`${unref(prefixCls)}-footer-content`)
+						}, [renderSlot(_ctx.$slots, "footer", { actions: actionContext.value })], 2)) : createCommentVNode("", true), __props.showActions && __props.suffixPlacement === "footer" ? (openBlock(), createElementBlock("div", {
+							key: 1,
+							class: normalizeClass(`${unref(prefixCls)}-footer-suffix`)
+						}, [createVNode(unref(ReuseSuffix))], 2)) : createCommentVNode("", true)], 6)) : createCommentVNode("", true)
 					], 16)];
 				}),
 				_: 3
@@ -863,7 +887,7 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				"popup-visible",
 				"content",
 				"disabled"
-			]);
+			])], 64);
 		};
 	}
 }));

package/es/sender/style/index.css

@@ -117,10 +117,21 @@
   animation: sender-recording-bar 0.8s ease-in-out infinite;
 }
 .sd-sender-footer {
+  display: flex;
+  gap: 8px;
+  align-items: center;
   box-sizing: border-box;
   padding-block: 4px 12px;
   padding-inline: 12px;
 }
+.sd-sender-footer-content {
+  flex: auto;
+  min-width: 0;
+}
+.sd-sender-footer-suffix {
+  flex: none;
+  margin-inline-start: auto;
+}
 .sd-sender-header {
   overflow: hidden;
   border-bottom: 1px solid color-mix(in srgb, var(--sd-color-neutral-3) 10%, transparent);

package/es/sender/style/index.scss

@@ -128,9 +128,22 @@ $sender-prefix-cls: string.unquote('#{theme.$prefix}-sender');
   }
 
   &-footer {
+    display: flex;
+    gap: $sender-content-gap;
+    align-items: center;
     box-sizing: border-box;
     padding-block: $sender-footer-padding-top $sender-padding-block;
     padding-inline: $sender-padding-inline;
+
+    &-content {
+      flex: auto;
+      min-width: 0;
+    }
+
+    &-suffix {
+      flex: none;
+      margin-inline-start: auto;
+    }
   }
 
   &-header {

package/es/sender/types.d.ts

@@ -2,15 +2,64 @@ import type { CSSProperties, Component, VNodeChild } from 'vue';
 import type { TooltipProps } from '../tooltip';
 export type SenderSubmitType = 'enter' | 'shiftEnter';
 export type SenderInsertPosition = 'start' | 'end' | 'cursor';
+export type SenderSuffixPlacement = 'content' | 'footer';
 export type SenderSemanticType = 'root' | 'prefix' | 'input' | 'suffix' | 'footer' | 'switch' | 'content';
 export interface SenderComponents {
     input?: Component;
 }
-export interface SenderControlledSpeechConfig {
+export interface SenderSpeechConfig {
     recording?: boolean;
-    onRecordingChange: (recording: boolean) => void;
+    onRecordingChange?: (recording: boolean) => void;
+    audioConstraints?: MediaTrackConstraints;
+    bufferSize?: number;
+    workletUrl?: string;
+    processorName?: string;
+    processorOptions?: Record<string, unknown>;
+    url?: string;
+    protocols?: string | string[];
+    sendMetadata?: boolean;
+}
+export type SenderControlledSpeechConfig = SenderSpeechConfig;
+export type SenderAllowSpeech = boolean | SenderSpeechConfig;
+export interface SenderSpeechStartEvent {
+    source: 'capture' | 'controlled';
+    startedAt: number;
+    stream?: MediaStream;
+    audioContext?: AudioContext;
+    sampleRate?: number;
+}
+export interface SenderSpeechDataEvent {
+    buffer: ArrayBuffer;
+    sampleRate: number;
+    sequence: number;
+    timestamp: number;
+}
+export type SenderSpeechEndReason = 'manual' | 'controlled' | 'error' | 'unmount';
+export interface SenderSpeechEndEvent {
+    source: 'capture' | 'controlled';
+    reason: SenderSpeechEndReason;
+    startedAt: number;
+    endedAt: number;
+    duration: number;
+    chunks: number;
+}
+export type SenderSpeechErrorPhase = 'permission' | 'audioContext' | 'audioWorklet' | 'transport';
+export interface SenderSpeechErrorEvent {
+    error: Error;
+    phase: SenderSpeechErrorPhase;
+}
+export interface SenderSpeechTransportOpenEvent {
+    event: Event;
+    socket: WebSocket;
+}
+export interface SenderSpeechTransportMessageEvent {
+    event: MessageEvent;
+    socket: WebSocket;
+}
+export interface SenderSpeechTransportCloseEvent {
+    event: CloseEvent;
+    socket: WebSocket;
 }
-export type SenderAllowSpeech = boolean | SenderControlledSpeechConfig;
 export interface SenderSkillClosableConfig {
     closeIcon?: VNodeChild;
     onClose?: (event: MouseEvent) => void;
@@ -131,6 +180,7 @@ export interface SenderProps {
     skill?: SenderSkill;
     placeholder?: string;
     showActions?: boolean;
+    suffixPlacement?: SenderSuffixPlacement;
     components?: SenderComponents;
     classNames?: Partial<Record<SenderSemanticType, string>>;
     styles?: Partial<Record<SenderSemanticType, CSSProperties>>;
@@ -151,6 +201,13 @@ export interface SenderEmits {
     'pasteFile': [files: FileList];
     'focus': [event: FocusEvent];
     'blur': [event: FocusEvent];
+    'speechStart': [event: SenderSpeechStartEvent];
+    'speechData': [event: SenderSpeechDataEvent];
+    'speechEnd': [event: SenderSpeechEndEvent];
+    'speechError': [event: SenderSpeechErrorEvent];
+    'speechTransportOpen': [event: SenderSpeechTransportOpenEvent];
+    'speechTransportMessage': [event: SenderSpeechTransportMessageEvent];
+    'speechTransportClose': [event: SenderSpeechTransportCloseEvent];
 }
 export type SenderHeaderSemanticType = 'header' | 'content';
 export interface SenderHeaderProps {

package/es/sender/use-speech.d.ts

@@ -1,9 +1,19 @@
 import { type MaybeRefOrGetter } from 'vue';
-import type { SenderAllowSpeech } from './types';
-export declare function useSpeech(allowSpeech: MaybeRefOrGetter<SenderAllowSpeech | undefined>, onTranscript: (transcript: string) => void): {
+import type { SenderAllowSpeech, SenderSpeechDataEvent, SenderSpeechEndEvent, SenderSpeechErrorEvent, SenderSpeechStartEvent, SenderSpeechTransportCloseEvent, SenderSpeechTransportMessageEvent, SenderSpeechTransportOpenEvent } from './types';
+interface UseSpeechOptions {
+    onStart: (event: SenderSpeechStartEvent) => void;
+    onData: (event: SenderSpeechDataEvent) => void;
+    onEnd: (event: SenderSpeechEndEvent) => void;
+    onError: (event: SenderSpeechErrorEvent) => void;
+    onTransportOpen: (event: SenderSpeechTransportOpenEvent) => void;
+    onTransportMessage: (event: SenderSpeechTransportMessageEvent) => void;
+    onTransportClose: (event: SenderSpeechTransportCloseEvent) => void;
+}
+export declare function useSpeech(allowSpeech: MaybeRefOrGetter<SenderAllowSpeech | undefined>, options: UseSpeechOptions): {
     available: import("vue").ComputedRef<boolean>;
     recording: import("vue").ComputedRef<boolean>;
     requesting: import("vue").ShallowRef<boolean, boolean>;
     statusText: import("vue").ComputedRef<string>;
     trigger: (breakRecording?: boolean) => Promise<void>;
 };
+export {};