@sdata/web-vue 3.22.3 → 3.24.0

package/es/model-selector/style/index.css

@@ -0,0 +1,144 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-model-selector {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--sd-color-text-1);
+  font-size: 14px;
+  background: var(--sd-color-bg-popup);
+  border-radius: var(--sd-border-radius-medium);
+}
+.sd-model-selector-modal {
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--sd-color-fill-3);
+  border-radius: var(--sd-border-radius-medium);
+}
+.sd-model-selector-modal .sd-modal-header {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+.sd-model-selector-body {
+  padding: 0;
+}
+.sd-model-selector-trigger {
+  flex: none;
+}
+.sd-model-selector-input-container {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: 6px 12px;
+}
+.sd-model-selector-list {
+  --sd-model-selector-list-max-height: 400px;
+  --sd-model-selector-list-viewport-offset: 160px;
+}
+.sd-model-selector-list-content {
+  padding: 6px;
+  overscroll-behavior: contain;
+}
+.sd-model-selector-group + .sd-model-selector-group {
+  margin-top: 6px;
+}
+.sd-model-selector-group-heading {
+  padding: 6px 12px;
+  color: var(--sd-color-text-3);
+  font-weight: 500;
+  font-size: 12px;
+}
+.sd-model-selector-group-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.sd-model-selector-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 40px;
+  padding: 0 12px;
+  border-radius: var(--sd-border-radius-medium);
+  cursor: pointer;
+  user-select: none;
+}
+.sd-model-selector-item--active:not(.sd-model-selector-item--disabled) {
+  background: var(--sd-color-fill-2);
+}
+.sd-model-selector-item--disabled {
+  color: var(--sd-color-text-4);
+  cursor: not-allowed;
+}
+.sd-model-selector-item--selected {
+  font-weight: 500;
+}
+.sd-model-selector-empty {
+  padding: 40px 12px;
+}
+.sd-model-selector-separator {
+  margin: 6px 0;
+}
+.sd-model-selector-shortcut {
+  flex: none;
+  order: 2;
+  margin-left: auto;
+  color: var(--sd-color-text-3);
+  font: inherit;
+  font-size: 12px;
+}
+.sd-model-selector-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: left;
+  text-overflow: ellipsis;
+}
+.sd-model-selector-logo {
+  display: block;
+  flex: none;
+  object-fit: contain;
+}
+.sd-model-selector-logo-group {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  order: 1;
+  margin-left: auto;
+}
+.sd-model-selector-logo-group > .sd-model-selector-logo {
+  box-sizing: content-box;
+  padding: 1px;
+  background: var(--sd-color-bg-popup);
+  border: 1px solid var(--sd-color-fill-3);
+  border-radius: 50%;
+}
+.sd-model-selector-logo-group > .sd-model-selector-logo + .sd-model-selector-logo {
+  margin-left: -6px;
+}

package/es/model-selector/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.scss';
+import './index.scss';

package/es/model-selector/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.scss";
+import "./index.scss";

package/es/model-selector/style/index.scss

@@ -0,0 +1,157 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/model-selector/style/token.scss' as *;
+
+$model-selector-prefix-cls: string.unquote('#{theme.$prefix}-model-selector');
+
+.#{$model-selector-prefix-cls} {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+  overflow: hidden;
+  color: $model-selector-color-text;
+  font-size: $model-selector-font-size;
+  background: $model-selector-color-bg;
+  border-radius: $model-selector-border-radius;
+
+  &-modal {
+    padding: 0;
+    overflow: hidden;
+    border: 1px solid $model-selector-color-border;
+    border-radius: $model-selector-border-radius;
+  }
+
+  &-modal .#{theme.$prefix}-modal-header {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    border: 0;
+    clip-path: inset(50%);
+  }
+
+  &-body {
+    padding: 0;
+  }
+
+  &-trigger {
+    flex: none;
+  }
+
+  &-input-container {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    padding: $model-selector-padding $model-selector-padding-horizontal;
+  }
+
+  &-list {
+    --#{$model-selector-prefix-cls}-list-max-height: #{$model-selector-list-max-height};
+    --#{$model-selector-prefix-cls}-list-viewport-offset: #{$model-selector-list-viewport-offset};
+
+    &-content {
+      padding: $model-selector-padding;
+      overscroll-behavior: contain;
+    }
+  }
+
+  &-group {
+    & + & {
+      margin-top: $model-selector-padding;
+    }
+
+    &-heading {
+      padding: $model-selector-padding $model-selector-padding-horizontal;
+      color: $model-selector-color-text-secondary;
+      font-weight: theme.$font-weight-500;
+      font-size: $model-selector-font-size-secondary;
+    }
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+      gap: theme.$spacing-1;
+    }
+  }
+
+  &-item {
+    display: flex;
+    gap: $model-selector-gap;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: $model-selector-item-height;
+    padding: 0 $model-selector-padding-horizontal;
+    border-radius: $model-selector-border-radius;
+    cursor: pointer;
+    user-select: none;
+
+    &--active:not(&--disabled) {
+      background: $model-selector-color-fill-hover;
+    }
+
+    &--disabled {
+      color: $model-selector-color-text-disabled;
+      cursor: not-allowed;
+    }
+
+    &--selected {
+      font-weight: theme.$font-weight-500;
+    }
+  }
+
+  &-empty {
+    padding: theme.$spacing-12 $model-selector-padding-horizontal;
+  }
+
+  &-separator {
+    margin: $model-selector-padding 0;
+  }
+
+  &-shortcut {
+    flex: none;
+    order: 2;
+    margin-left: auto;
+    color: $model-selector-color-text-secondary;
+    font: inherit;
+    font-size: $model-selector-font-size-secondary;
+  }
+
+  &-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: left;
+    text-overflow: ellipsis;
+  }
+
+  &-logo {
+    display: block;
+    flex: none;
+    object-fit: contain;
+  }
+
+  &-logo-group {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    order: 1;
+    margin-left: auto;
+
+    > .#{$model-selector-prefix-cls}-logo {
+      box-sizing: content-box;
+      padding: 1px;
+      background: $model-selector-color-bg;
+      border: 1px solid $model-selector-color-border;
+      border-radius: 50%;
+
+      & + .#{$model-selector-prefix-cls}-logo {
+        margin-left: -#{theme.$spacing-3};
+      }
+    }
+  }
+}

package/es/model-selector/style/token.scss

@@ -0,0 +1,24 @@
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+
+@forward '@style/theme/index.scss';
+
+$model-selector-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+$model-selector-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+$model-selector-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$model-selector-color-text-secondary: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
+);
+$model-selector-color-text-disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+$model-selector-color-fill-hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$model-selector-border-radius: global.$radius-medium;
+$model-selector-item-height: global.$size-10;
+$model-selector-list-max-height: global.$size-50 * 2;
+$model-selector-list-viewport-offset: global.$size-40;
+$model-selector-padding: global.$spacing-3;
+$model-selector-padding-horizontal: global.$spacing-6;
+$model-selector-gap: global.$spacing-4;
+$model-selector-font-size: global.$font-size-body-3;
+$model-selector-font-size-secondary: global.$font-size-body-1;

package/es/model-selector/types.d.ts

@@ -0,0 +1,16 @@
+import type { LiteralUnion } from 'type-fest';
+export declare const MODEL_SELECTOR_PROVIDERS: readonly ["moonshotai-cn", "lucidquery", "moonshotai", "zai-coding-plan", "alibaba", "xai", "vultr", "nvidia", "upstage", "groq", "github-copilot", "mistral", "vercel", "nebius", "deepseek", "alibaba-cn", "google-vertex-anthropic", "venice", "chutes", "cortecs", "github-models", "togetherai", "azure", "baseten", "huggingface", "opencode", "fastrouter", "google", "google-vertex", "cloudflare-workers-ai", "inception", "wandb", "openai", "zhipuai-coding-plan", "perplexity", "openrouter", "zenmux", "v0", "iflowcn", "synthetic", "deepinfra", "zhipuai", "submodel", "zai", "inference", "requesty", "morph", "lmstudio", "anthropic", "aihubmix", "fireworks-ai", "modelscope", "llama", "scaleway", "amazon-bedrock", "cerebras"];
+export type ModelSelectorKnownProvider = (typeof MODEL_SELECTOR_PROVIDERS)[number];
+export type ModelSelectorProvider = LiteralUnion<ModelSelectorKnownProvider, string>;
+export interface ModelSelectorItemData {
+    disabled: boolean;
+    domId: string;
+    element?: HTMLElement;
+    groupId?: symbol;
+    id: symbol;
+    keywords: string[];
+    label: string;
+    select: (event: Event) => void;
+    shortcut?: string;
+    value: string;
+}

package/es/model-selector/types.js

@@ -0,0 +1,61 @@
+//#region components/model-selector/types.ts
+var MODEL_SELECTOR_PROVIDERS = [
+	"moonshotai-cn",
+	"lucidquery",
+	"moonshotai",
+	"zai-coding-plan",
+	"alibaba",
+	"xai",
+	"vultr",
+	"nvidia",
+	"upstage",
+	"groq",
+	"github-copilot",
+	"mistral",
+	"vercel",
+	"nebius",
+	"deepseek",
+	"alibaba-cn",
+	"google-vertex-anthropic",
+	"venice",
+	"chutes",
+	"cortecs",
+	"github-models",
+	"togetherai",
+	"azure",
+	"baseten",
+	"huggingface",
+	"opencode",
+	"fastrouter",
+	"google",
+	"google-vertex",
+	"cloudflare-workers-ai",
+	"inception",
+	"wandb",
+	"openai",
+	"zhipuai-coding-plan",
+	"perplexity",
+	"openrouter",
+	"zenmux",
+	"v0",
+	"iflowcn",
+	"synthetic",
+	"deepinfra",
+	"zhipuai",
+	"submodel",
+	"zai",
+	"inference",
+	"requesty",
+	"morph",
+	"lmstudio",
+	"anthropic",
+	"aihubmix",
+	"fireworks-ai",
+	"modelscope",
+	"llama",
+	"scaleway",
+	"amazon-bedrock",
+	"cerebras"
+];
+//#endregion
+export { MODEL_SELECTOR_PROVIDERS };

package/es/model-selector/use-model-selector-context.d.ts

@@ -0,0 +1 @@
+export declare function useModelSelectorContext(componentName: string): import("./context").ModelSelectorContext;

package/es/model-selector/use-model-selector-context.js

@@ -0,0 +1,10 @@
+import { modelSelectorInjectionKey } from "./context.js";
+import { inject } from "vue";
+//#region components/model-selector/use-model-selector-context.ts
+function useModelSelectorContext(componentName) {
+	const context = inject(modelSelectorInjectionKey, void 0);
+	if (!context) throw new Error(`[${componentName}] 必须在 ModelSelector 内使用。`);
+	return context;
+}
+//#endregion
+export { useModelSelectorContext };

package/es/rich-text-editor/rich-text-editor.vue_vue_type_script_setup_true_lang.js

@@ -209,6 +209,20 @@ var rich_text_editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				return content;
 			})) !== null && _editorRef$value$getE !== void 0 ? _editorRef$value$getE : [];
 		};
+		/**
+		* 将折叠选区向前扩展到待替换文本，后续 insertText/insertNodes 会在同一次
+		* Lexical 更新中原子删除选区并插入新内容，避免 spliceText 后继续使用旧选区。
+		* @param selection 当前 Lexical 文本选区。
+		* @param replaceCharacters 光标前需要被替换的文本。
+		*/
+		const selectReplacementCharacters = (selection, replaceCharacters) => {
+			if (!replaceCharacters || !selection.isCollapsed()) return;
+			const anchorNode = selection.anchor.getNode();
+			const offset = selection.anchor.offset;
+			if (!$isTextNode(anchorNode) || !anchorNode.getTextContent().slice(0, offset).endsWith(replaceCharacters)) return;
+			const start = offset - replaceCharacters.length;
+			selection.setTextNodeRange(anchorNode, start, anchorNode, offset);
+		};
 		const insertContent = (content, options = {}) => {
 			var _editorRef$value3;
 			const { position = "cursor", replaceCharacters } = options, updateOptions = _objectWithoutProperties(options, _excluded);
@@ -218,15 +232,7 @@ var rich_text_editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				if (position === "end") root.selectEnd();
 				const selection = $getSelection();
 				if ($isRangeSelection(selection)) {
-					if (replaceCharacters && selection.isCollapsed()) {
-						const anchorNode = selection.anchor.getNode();
-						const offset = selection.anchor.offset;
-						if ($isTextNode(anchorNode) && anchorNode.getTextContent().slice(0, offset).endsWith(replaceCharacters)) {
-							const start = offset - replaceCharacters.length;
-							anchorNode.spliceText(start, replaceCharacters.length, "", true);
-							anchorNode.select(start, start);
-						}
-					}
+					selectReplacementCharacters(selection, replaceCharacters);
 					selection.insertNodes(createContentNodes(content));
 					return;
 				}
@@ -293,15 +299,7 @@ var rich_text_editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				if (position === "end") root.selectEnd();
 				const selection = $getSelection();
 				if ($isRangeSelection(selection)) {
-					if (replaceCharacters && selection.isCollapsed()) {
-						const anchorNode = selection.anchor.getNode();
-						const offset = selection.anchor.offset;
-						if ($isTextNode(anchorNode) && anchorNode.getTextContent().slice(0, offset).endsWith(replaceCharacters)) {
-							const start = offset - replaceCharacters.length;
-							anchorNode.spliceText(start, replaceCharacters.length, "", true);
-							anchorNode.select(start, start);
-						}
-					}
+					selectReplacementCharacters(selection, replaceCharacters);
 					selection.insertText(text);
 					return;
 				}

package/es/sd-vue.js

@@ -115,6 +115,7 @@ import item_default from "./menu/item.js";
 import item_group_default from "./menu/item-group.js";
 import sub_menu_default from "./menu/sub-menu.js";
 import Menu from "./menu/index.js";
+import ModelSelector from "./model-selector/index.js";
 import Notification from "./notification/index.js";
 import OverflowList from "./overflow-list/index.js";
 import PageHeader from "./page-header/index.js";
@@ -213,6 +214,7 @@ var components = {
 	Drawer,
 	Message,
 	Modal,
+	ModelSelector,
 	Notification,
 	Popconfirm,
 	Progress,

package/es/sender/index.d.ts

@@ -112,8 +112,10 @@ export declare const SenderSwitch: {
         unchecked?: (props: {}) => any;
     };
 });
+export { default as RecorderCore } from './recorder-core';
+export type { RecorderCore as RecorderCoreConstructor, RecorderCoreInstance, RecorderCoreOptions, } from './recorder-core';
 export type SenderInstance = InstanceType<typeof _Sender>;
 export type SenderHeaderInstance = InstanceType<typeof _SenderHeader>;
 export type SenderSwitchInstance = InstanceType<typeof _SenderSwitch>;
-export type { SenderActionContext, SenderAllowSpeech, SenderComponents, SenderContentSlotConfig, SenderControlledSpeechConfig, SenderCustomSlotConfig, SenderCustomSlotRender, SenderCustomSlotState, SenderEmits, SenderFocusOptions, SenderHeaderSemanticType, SenderHeaderProps, SenderInsertPosition, SenderInputSlotConfig, SenderProps, SenderRef, SenderResolvedSlotConfig, SenderSelectSlotConfig, SenderSemanticType, SenderSkill, SenderSkillClosableConfig, SenderSpeechConfig, SenderSpeechDataEvent, SenderSpeechEndEvent, SenderSpeechEndReason, SenderSpeechErrorEvent, SenderSpeechErrorPhase, SenderSpeechStartEvent, SenderSpeechTransportCloseEvent, SenderSpeechTransportMessageEvent, SenderSpeechTransportOpenEvent, SenderSlotConfig, SenderSlotConfigBase, SenderSubmitType, SenderSuffixPlacement, SenderSwitchProps, SenderTagSlotConfig, SenderTextSlotConfig, SenderValue, } from './types';
+export type { SenderActionContext, SenderAllowSpeech, SenderComponents, SenderContentSlotConfig, SenderCustomSlotConfig, SenderCustomSlotRender, SenderCustomSlotState, SenderEmits, SenderFocusOptions, SenderHeaderSemanticType, SenderHeaderProps, SenderInsertPosition, SenderInputSlotConfig, SenderProps, SenderRef, SenderResolvedSlotConfig, SenderSelectSlotConfig, SenderSemanticType, SenderSkill, SenderSkillClosableConfig, SenderSlotConfig, SenderSlotConfigBase, SenderSubmitType, SenderSuffixPlacement, SenderSwitchProps, SenderTagSlotConfig, SenderTextSlotConfig, SenderValue, } from './types';
 export default Sender;

package/es/sender/index.js

@@ -1,6 +1,7 @@
 import { getComponentPrefix, setGlobalConfig } from "../_utils/global-config.js";
 import sender_header_default from "./sender-header.js";
 import sender_switch_default from "./sender-switch.js";
+import recorder_core_default from "./recorder-core.js";
 import sender_default from "./sender.js";
 //#region components/sender/index.ts
 var Sender = Object.assign(sender_default, {
@@ -17,4 +18,4 @@ var Sender = Object.assign(sender_default, {
 var SenderHeader = sender_header_default;
 var SenderSwitch = sender_switch_default;
 //#endregion
-export { SenderHeader, SenderSwitch, Sender as default };
+export { recorder_core_default as RecorderCore, SenderHeader, SenderSwitch, Sender as default };

package/es/sender/recorder-core.d.ts

@@ -0,0 +1,25 @@
+import Recorder from 'recorder-core';
+import 'recorder-core/src/engine/beta-amr';
+import 'recorder-core/src/engine/beta-amr-engine';
+import 'recorder-core/src/engine/beta-ogg';
+import 'recorder-core/src/engine/beta-ogg-engine';
+import 'recorder-core/src/engine/beta-webm';
+import 'recorder-core/src/engine/g711x';
+import 'recorder-core/src/engine/mp3';
+import 'recorder-core/src/engine/mp3-engine';
+import 'recorder-core/src/engine/pcm';
+import 'recorder-core/src/engine/wav';
+import 'recorder-core/src/extensions/asr.aliyun.short';
+import 'recorder-core/src/extensions/buffer_stream.player';
+import 'recorder-core/src/extensions/create-audio.nmn2pcm';
+import 'recorder-core/src/extensions/lib.fft';
+import 'recorder-core/src/extensions/dtmf.decode';
+import 'recorder-core/src/extensions/dtmf.encode';
+import 'recorder-core/src/extensions/frequency.histogram.view';
+import 'recorder-core/src/extensions/sonic';
+import 'recorder-core/src/extensions/wavesurfer.view';
+import 'recorder-core/src/extensions/waveview';
+export type RecorderCore = typeof Recorder;
+export type RecorderCoreInstance = ReturnType<RecorderCore>;
+export type RecorderCoreOptions = Parameters<RecorderCore>[0];
+export default Recorder;

package/es/sender/recorder-core.js

@@ -0,0 +1,26 @@
+import Recorder from "recorder-core";
+import "recorder-core/src/engine/beta-amr";
+import "recorder-core/src/engine/beta-amr-engine";
+import "recorder-core/src/engine/beta-ogg";
+import "recorder-core/src/engine/beta-ogg-engine";
+import "recorder-core/src/engine/beta-webm";
+import "recorder-core/src/engine/g711x";
+import "recorder-core/src/engine/mp3";
+import "recorder-core/src/engine/mp3-engine";
+import "recorder-core/src/engine/pcm";
+import "recorder-core/src/engine/wav";
+import "recorder-core/src/extensions/asr.aliyun.short";
+import "recorder-core/src/extensions/buffer_stream.player";
+import "recorder-core/src/extensions/create-audio.nmn2pcm";
+import "recorder-core/src/extensions/lib.fft";
+import "recorder-core/src/extensions/dtmf.decode";
+import "recorder-core/src/extensions/dtmf.encode";
+import "recorder-core/src/extensions/frequency.histogram.view";
+import "recorder-core/src/extensions/sonic";
+import "recorder-core/src/extensions/wavesurfer.view";
+import "recorder-core/src/extensions/waveview";
+//#region components/sender/recorder-core.ts
+Recorder.TrafficImgUrl = "";
+var recorder_core_default = Recorder;
+//#endregion
+export { recorder_core_default as default };

package/es/sender/sender.vue_vue_type_script_setup_true_lang.js

@@ -11,7 +11,7 @@ import { senderInjectionKey } from "./context.js";
 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 { useRecorder } from "./use-recorder.js";
 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";
@@ -56,13 +56,8 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		"pasteFile",
 		"focus",
 		"blur",
-		"speechStart",
-		"speechData",
 		"speechEnd",
-		"speechError",
-		"speechTransportOpen",
-		"speechTransportMessage",
-		"speechTransportClose"
+		"speechError"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
@@ -404,24 +399,19 @@ 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"), {
-			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 { Recorder, available: speechAvailable, recorder, recording, requesting: speechRequesting, stopping: speechStopping, statusText: speechStatusText, trigger: triggerSpeech } = useRecorder(toRef(props, "allowSpeech"), {
+			onStop: (blob, duration, mime) => emit("speechEnd", blob, duration, mime),
+			onError: (message, isUserNotAllow) => emit("speechError", message, isUserNotAllow)
 		});
 		const actionContext = computed(() => ({
 			send: triggerSend,
 			clear: triggerClear,
 			cancel: triggerCancel,
-			speech: () => triggerSpeech(false),
+			speech: triggerSpeech,
 			submitDisabled: Boolean(props.disabled || submitDisabled.value),
 			clearDisabled: Boolean(props.disabled || clearDisabled.value),
 			cancelDisabled: Boolean(props.disabled || cancelDisabled.value),
-			speechDisabled: Boolean(props.disabled || !speechAvailable.value || speechRequesting.value),
+			speechDisabled: Boolean(props.disabled || !speechAvailable.value || speechRequesting.value || speechStopping.value),
 			recording: recording.value,
 			loading: Boolean(props.loading)
 		}));
@@ -657,6 +647,14 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			}
 		});
 		__expose({
+			Recorder,
+			get recorder() {
+				var _recorder$value;
+				return (_recorder$value = recorder.value) !== null && _recorder$value !== void 0 ? _recorder$value : null;
+			},
+			get recording() {
+				return recording.value;
+			},
 			get inputElement() {
 				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();
@@ -681,7 +679,7 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 					}, [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),
+						loading: unref(speechRequesting) || unref(speechStopping),
 						disabled: actionContext.value.speechDisabled,
 						title: unref(speechStatusText),
 						class: normalizeClass([`${unref(prefixCls)}-actions-btn`, { [`${unref(prefixCls)}-actions-btn-disabled`]: actionContext.value.speechDisabled }]),