@sdata/web-vue 3.23.0 → 3.24.1

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

@@ -0,0 +1,148 @@
+/******** 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;
+}
+
+:where(body, [sd-theme])[sd-theme=dark] .sd-model-selector-logo {
+  filter: brightness(0) invert(1);
+}

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,163 @@
+@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};
+      }
+    }
+  }
+}
+
+#{theme.$sd-theme-tag}[sd-theme='dark'] {
+  .#{$model-selector-prefix-cls}-logo {
+    filter: brightness(0) invert(1);
+  }
+}

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/qr-code/qr-code.vue_vue_type_script_setup_true_lang.js

@@ -3,8 +3,9 @@ import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/es
 import { getPrefixCls } from "../_utils/global-config.js";
 import { useI18n } from "../locale/index.js";
 import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/asyncToGenerator.js";
+import { useThemeMode } from "../_hooks/use-theme-mode.js";
 import qr_code_status_default from "./qr-code-status.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, useSlots, watch } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, useSlots, useTemplateRef, watch } from "vue";
 import QRCode from "qrcode";
 //#region components/qr-code/qr-code.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
@@ -68,7 +69,7 @@ var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		*/
 		color: {
 			type: String,
-			default: "#1D2129"
+			default: ""
 		},
 		/**
 		* @zh 二维码背景色
@@ -162,6 +163,7 @@ var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		const configCtx = inject(configProviderInjectionKey, void 0);
 		const resolvedSpinProps = computed(() => _objectSpread2(_objectSpread2({}, configCtx === null || configCtx === void 0 ? void 0 : configCtx.qrCodeSpinProps), props.spinProps));
 		const prefixCls = getPrefixCls("qr-code");
+		const themeMode = useThemeMode(useTemplateRef("root"));
 		const canvasRef = ref();
 		const svgMarkup = ref("");
 		const handleRefresh = () => {
@@ -195,15 +197,22 @@ var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		const rootStyle = computed(() => ({
 			width: `${props.size}px`,
 			height: `${props.size}px`,
-			backgroundColor: props.bgColor
+			backgroundColor: props.bgColor === "transparent" ? void 0 : props.bgColor
 		}));
-		const qrBgColor = computed(() => props.bgColor === "transparent" ? "#ffffff" : props.bgColor);
+		const qrColor = computed(() => {
+			if (props.color) return props.color;
+			return themeMode.value === "dark" ? "#f6f6f6" : "#1d2129";
+		});
+		const qrBgColor = computed(() => {
+			if (props.bgColor !== "transparent") return props.bgColor;
+			return themeMode.value === "dark" ? "#232324" : "#ffffff";
+		});
 		const qrOptions = computed(() => ({
 			errorCorrectionLevel: props.errorLevel,
 			margin: props.marginSize,
 			width: props.size,
 			color: {
-				dark: props.color,
+				dark: qrColor.value,
 				light: qrBgColor.value
 			}
 		}));
@@ -259,7 +268,8 @@ var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			props.bgColor,
 			props.errorLevel,
 			props.marginSize,
-			props.boostLevel
+			props.boostLevel,
+			themeMode.value
 		], () => {
 			renderCode();
 		}, {
@@ -269,6 +279,7 @@ var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		return (_ctx, _cache) => {
 			return hasValue.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
+				ref: "root",
 				class: normalizeClass(rootClass.value),
 				style: normalizeStyle(rootStyle.value)
 			}, [

package/es/qr-code/style/index.css

@@ -67,7 +67,7 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  background: rgba(255, 255, 255, 0.88);
+  background: color-mix(in srgb, var(--sd-color-bg-2) 88%, transparent);
 }
 .sd-qr-code-status {
   display: inline-flex;

package/es/qr-code/style/token.scss

@@ -9,7 +9,7 @@ $qr-code-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bo
 
 $qr-code-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
 
-$qr-code-color-mask-bg: rgb(255 255 255 / 88%);
+$qr-code-color-mask-bg: color-mix(in srgb, #{$qr-code-color-bg} 88%, transparent);
 
 $qr-code-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
 

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/rich-text-editor/style/index.css

@@ -22,7 +22,7 @@
   color: var(--sd-color-neutral-10);
   font-size: 14px;
   line-height: 1.5715;
-  background: #fff;
+  background: var(--sd-color-bg-2);
   border: 1px solid var(--sd-color-neutral-3);
   border-radius: var(--sd-border-radius-medium);
   transition: border-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);

package/es/rich-text-editor/style/token.scss

@@ -1,4 +1,5 @@
 @use '@style/theme/index.scss' as global;
+@use 'sass:string';
 
 @forward '@style/theme/index.scss';
 
@@ -16,7 +17,7 @@ $rich-text-editor-code-padding: global.$spacing-2;
 $rich-text-editor-color-text: global.$color-text-1;
 $rich-text-editor-color-text-disabled: global.$color-text-4;
 $rich-text-editor-color-placeholder: global.$color-text-4;
-$rich-text-editor-color-background: global.$color-bg-2;
+$rich-text-editor-color-background: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
 $rich-text-editor-color-background-disabled: global.$color-fill-2;
 $rich-text-editor-color-border: global.$color-border-2;
 $rich-text-editor-color-border-hover: global.$color-primary-5;

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/sender.vue_vue_type_script_setup_true_lang.js

@@ -29,7 +29,7 @@ var sender_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		submitType: { default: "enter" },
 		disabled: { type: Boolean },
 		slotConfig: {},
-		allowSpeech: { type: Boolean },
+		allowSpeech: { type: [Boolean, Object] },
 		autoSize: {
 			type: [Boolean, Object],
 			default: () => ({ maxRows: 8 })

package/es/sender/style/index.css

@@ -22,7 +22,7 @@
   position: relative;
   width: 100%;
   overflow: hidden;
-  background: #fff;
+  background: var(--sd-color-bg-2);
   border: 1px solid color-mix(in srgb, var(--sd-color-neutral-3) 10%, transparent);
   border-radius: calc(var(--sd-border-radius-medium) * 2);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);

package/es/sender/style/token.scss

@@ -1,4 +1,5 @@
 @use '@style/theme/index.scss' as global;
+@use 'sass:string';
 
 @forward '@style/theme/index.scss';
 
@@ -22,7 +23,7 @@ $sender-color-primary-hover: global.$color-primary-5;
 $sender-color-text: global.$color-text-1;
 $sender-color-text-disabled: global.$color-text-4;
 $sender-color-text-placeholder: global.$color-text-4;
-$sender-color-bg: global.$color-bg-2;
+$sender-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
 $sender-color-bg-disabled: global.$color-fill-2;
 $sender-color-header-bg: global.$color-fill-2;
 $sender-color-border: global.$color-border-2;

package/es/sender/types.d.ts

@@ -1,3 +1,4 @@
+import type { UnknownRecord } from 'type-fest';
 import type { CSSProperties, Component, VNodeChild } from 'vue';
 import type { TooltipProps } from '../tooltip';
 import type { RecorderCore, RecorderCoreInstance, RecorderCoreOptions } from './recorder-core';
@@ -8,7 +9,7 @@ export type SenderSemanticType = 'root' | 'prefix' | 'input' | 'suffix' | 'foote
 export interface SenderComponents {
     input?: Component;
 }
-export type SenderAllowSpeech = boolean | RecorderCoreOptions;
+export type SenderAllowSpeech = boolean | RecorderCoreOptions | UnknownRecord;
 export interface SenderSkillClosableConfig {
     closeIcon?: VNodeChild;
     onClose?: (event: MouseEvent) => void;