@kdcloudjs/shoelace 1.0.34 → 1.0.35

package/dist/chunks/chunk.C6ZS2MBB.js

@@ -0,0 +1,1200 @@
+import {
+  SlTextarea
+} from "./chunk.LIHNKIEB.js";
+import {
+  sender_styles_default
+} from "./chunk.RENK3RWB.js";
+import {
+  SlSelect
+} from "./chunk.R7PWME2Z.js";
+import {
+  SlTag
+} from "./chunk.XS6ROJPT.js";
+import {
+  SlOption
+} from "./chunk.KB246HIU.js";
+import {
+  SlInput
+} from "./chunk.L5QWVAJD.js";
+import {
+  SlButton
+} from "./chunk.RLY5M6TS.js";
+import {
+  SlSpinner
+} from "./chunk.2UDD3U2N.js";
+import {
+  SlIconButton
+} from "./chunk.BRIKUEV2.js";
+import {
+  SlIcon
+} from "./chunk.HLWNNXQW.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.Z7SZHKVL.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/sender/sender.component.ts
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var SlSender = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    /** slot-area 失焦前保存的光标位置 */
+    this._savedRange = null;
+    this.value = "";
+    this.placeholder = "";
+    this.loading = false;
+    this.disabled = false;
+    this.readOnly = false;
+    this.rows = 1;
+    this.submitType = "enter";
+    this.allowSpeech = false;
+    this.speechRecording = false;
+    // SpeechRecognition 实例，用于浏览器内置语音输入
+    this.recognition = null;
+    // 麦克风权限状态缓存
+    this.permissionState = null;
+    // PermissionStatus 引用，用于移除 onchange 监听
+    this.permissionStatus = null;
+    // 强制停止时忽略下一次转写结果
+    this.forceBreak = false;
+    // 动态插入元素的事件监听器引用，用于显式清理
+    this.dynamicListeners = [];
+    this.slotValues = /* @__PURE__ */ new Map();
+    this.hasHeaderContent = false;
+    this.hasFooterContent = false;
+    this.handleInput = (event) => {
+      this.value = event.target.value;
+      this.dispatchEvent(new CustomEvent("sl-change", {
+        detail: { value: this.value, slotConfig: [], skill: this.skill },
+        bubbles: true,
+        composed: true
+      }));
+    };
+    this.handleFocus = () => {
+      this.emit("sl-focus");
+    };
+    this.handleBlur = () => {
+      var _a, _b, _c;
+      if (this.isSlotMode) {
+        const selection = (_c = (_b = (_a = this.shadowRoot) == null ? void 0 : _a.getSelection) == null ? void 0 : _b.call(_a)) != null ? _c : document.getSelection();
+        if (selection && selection.rangeCount > 0) {
+          const range = selection.getRangeAt(0);
+          const slotArea = this.slotArea;
+          if (slotArea && slotArea.contains(range.commonAncestorContainer)) {
+            this._savedRange = range.cloneRange();
+          }
+        }
+      }
+      this.emit("sl-blur");
+    };
+    /** 处理 slot 区域的自由文本输入 */
+    this.handleSlotAreaInput = () => {
+      const snapshot = this.getEditorSnapshot();
+      this.value = snapshot.value;
+      this.dispatchEvent(new CustomEvent("sl-change", {
+        detail: snapshot,
+        bubbles: true,
+        composed: true
+      }));
+    };
+    this.handlePaste = (event) => {
+      var _a;
+      this.dispatchEvent(new CustomEvent("sl-paste", {
+        detail: { event },
+        bubbles: true,
+        composed: true
+      }));
+      const files = (_a = event.clipboardData) == null ? void 0 : _a.files;
+      if (files == null ? void 0 : files.length) {
+        this.dispatchEvent(new CustomEvent("sl-paste-file", {
+          detail: { files },
+          bubbles: true,
+          composed: true
+        }));
+      }
+    };
+    this.handleSlotValueChange = (key, value) => {
+      this.slotValues.set(key, value);
+      this.requestUpdate();
+      this.updateComplete.then(() => {
+        const snapshot = this.getEditorSnapshot();
+        this.value = snapshot.value;
+        this.dispatchEvent(new CustomEvent("sl-change", {
+          detail: snapshot,
+          bubbles: true,
+          composed: true
+        }));
+      });
+    };
+  }
+  /**
+   * 聚焦输入区域，支持 cursor 选项控制光标位置。
+   * - 'end'（默认）：光标移到内容末尾
+   * - 'start'：光标移到内容开头
+   * - 'all'：全选内容
+   * - 'slot'：聚焦第一个 slot input，若不存在则等同 'end'
+   */
+  focus(options) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const preventScroll = (_a = options == null ? void 0 : options.preventScroll) != null ? _a : false;
+    const cursor = (_b = options == null ? void 0 : options.cursor) != null ? _b : "end";
+    if (this.isSlotMode) {
+      const slotArea = this.slotArea;
+      if (!slotArea) return;
+      if (cursor === "slot") {
+        const firstSlotInput = (_c = this.shadowRoot) == null ? void 0 : _c.querySelector(
+          ".sender__slot-area sl-input, .sender__slot-area sl-select, .sender__slot-area .sender__slot-content"
+        );
+        if (firstSlotInput) {
+          firstSlotInput.focus({ preventScroll });
+          return;
+        }
+        this.focusSlotAreaAt(slotArea, "end", preventScroll);
+        return;
+      }
+      if (cursor === "all") {
+        slotArea.focus({ preventScroll });
+        const selection = document.getSelection();
+        if (selection) {
+          const range = document.createRange();
+          range.selectNodeContents(slotArea);
+          const skillEl = slotArea.querySelector(".sender__skill");
+          if (skillEl) {
+            const idx = Array.from(slotArea.childNodes).indexOf(skillEl);
+            if (idx >= 0) range.setStart(slotArea, idx + 1);
+          }
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+        return;
+      }
+      this.focusSlotAreaAt(slotArea, cursor, preventScroll);
+      return;
+    }
+    const textareaEl = (_e = (_d = this.textarea) == null ? void 0 : _d.shadowRoot) == null ? void 0 : _e.querySelector("textarea");
+    if (!textareaEl) {
+      (_f = this.textarea) == null ? void 0 : _f.focus({ preventScroll });
+      return;
+    }
+    (_g = this.textarea) == null ? void 0 : _g.focus({ preventScroll });
+    if (cursor === "start") {
+      textareaEl.setSelectionRange(0, 0);
+    } else if (cursor === "all") {
+      textareaEl.setSelectionRange(0, textareaEl.value.length);
+    } else {
+      const len = textareaEl.value.length;
+      textareaEl.setSelectionRange(len, len);
+    }
+  }
+  /** slot 模式下将光标定位到 slotArea 的 start 或 end */
+  focusSlotAreaAt(slotArea, position, preventScroll) {
+    slotArea.focus({ preventScroll });
+    const selection = document.getSelection();
+    if (!selection) return;
+    const range = document.createRange();
+    range.selectNodeContents(slotArea);
+    if (position === "start") {
+      const skillEl = slotArea.querySelector(".sender__skill");
+      if (skillEl) {
+        const idx = Array.from(slotArea.childNodes).indexOf(skillEl);
+        if (idx >= 0) range.setStart(slotArea, idx + 1);
+      }
+      range.collapse(true);
+    } else {
+      range.collapse(false);
+    }
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+  /** 移除输入区域焦点 */
+  blur() {
+    var _a, _b;
+    if (this.isSlotMode) {
+      (_a = this.slotArea) == null ? void 0 : _a.blur();
+    } else {
+      (_b = this.textarea) == null ? void 0 : _b.blur();
+    }
+  }
+  /** 清空输入内容，slot 模式下同时重置 slotValues */
+  clear() {
+    this.handleClear();
+  }
+  /** 获取当前输入值，slot 模式下返回完整的 { value, slotConfig, skill } */
+  getValue() {
+    if (this.isSlotMode) {
+      return this.getEditorSnapshot();
+    }
+    return { value: this.value, slotConfig: [], skill: void 0 };
+  }
+  /**
+   * 插入文本或 slot 配置项到输入区域
+   * slot 模式下将 slotConfig 项渲染为 DOM 节点插入到 slot-area
+   * 普通模式下将各项文本拼接后插入到 textarea
+   */
+  insert(slotConfig, position = "end", _replaceCharacters, preventScroll) {
+    if (!slotConfig || slotConfig.length === 0) return;
+    if (this.isSlotMode) {
+      this.insertSlotNodes(slotConfig, position, preventScroll);
+    } else {
+      const text = slotConfig.filter((item) => item.type === "text").map((item) => {
+        var _a;
+        return (_a = item.value) != null ? _a : "";
+      }).join("");
+      if (!text) return;
+      this.insertTextToTextarea(text, position);
+    }
+    const snapshot = this.isSlotMode ? this.getEditorSnapshot() : { value: this.value, slotConfig: [], skill: void 0 };
+    this.dispatchEvent(new CustomEvent("sl-change", {
+      detail: snapshot,
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /** 普通模式下插入文本到 textarea */
+  insertTextToTextarea(text, position) {
+    var _a, _b;
+    if (position === "start") {
+      this.value = text + this.value;
+    } else if (position === "end") {
+      this.value = this.value + text;
+    } else {
+      const textareaEl = (_b = (_a = this.textarea) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("textarea");
+      if (textareaEl && typeof textareaEl.selectionStart === "number") {
+        const start = textareaEl.selectionStart;
+        const end = textareaEl.selectionEnd;
+        this.value = this.value.slice(0, start) + text + this.value.slice(end);
+        this.updateComplete.then(() => {
+          const newPos = start + text.length;
+          textareaEl.setSelectionRange(newPos, newPos);
+        });
+      } else {
+        this.value = this.value + text;
+      }
+    }
+  }
+  /** slot 模式下将 slotConfig 项创建为 DOM 节点并插入到 slot-area */
+  insertSlotNodes(configs, position, preventScroll) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const slotArea = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".sender__slot-area");
+    if (!slotArea) return;
+    const fragment = document.createDocumentFragment();
+    configs.forEach((config, i) => {
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o;
+      if (config.type === "text") {
+        fragment.appendChild(document.createTextNode(String((_a2 = config.value) != null ? _a2 : "")));
+        return;
+      }
+      const key = (_b2 = config.key) != null ? _b2 : `insert-${Date.now()}-${i}`;
+      const defaultValue = this.getSlotDefaultValue(config);
+      if (defaultValue !== void 0) {
+        this.slotValues.set(key, defaultValue);
+      }
+      if (config.type === "tag") {
+        const tag = document.createElement("sl-tag");
+        tag.setAttribute("size", "small");
+        tag.setAttribute("data-slot-key", key);
+        tag.className = "sender__slot-tag";
+        tag.textContent = String((_f2 = (_e2 = (_c2 = config.props) == null ? void 0 : _c2.label) != null ? _e2 : (_d2 = config.props) == null ? void 0 : _d2.value) != null ? _f2 : "");
+        fragment.appendChild(tag);
+      } else if (config.type === "input") {
+        const input = document.createElement("sl-input");
+        input.setAttribute("size", "small");
+        input.setAttribute("data-slot-key", key);
+        input.className = "sender__slot-input";
+        if ((_g2 = config.props) == null ? void 0 : _g2.placeholder) input.setAttribute("placeholder", config.props.placeholder);
+        if ((_h = config.props) == null ? void 0 : _h.defaultValue) input.value = String(config.props.defaultValue);
+        const inputHandler = () => {
+          this.handleSlotValueChange(key, input.value);
+        };
+        input.addEventListener("sl-input", inputHandler);
+        this.dynamicListeners.push({ el: input, event: "sl-input", handler: inputHandler });
+        fragment.appendChild(input);
+      } else if (config.type === "select") {
+        const select = document.createElement("sl-select");
+        select.setAttribute("size", "small");
+        select.setAttribute("data-slot-key", key);
+        select.className = "sender__slot-select";
+        if ((_i = config.props) == null ? void 0 : _i.placeholder) select.setAttribute("placeholder", config.props.placeholder);
+        ((_k = (_j = config.props) == null ? void 0 : _j.options) != null ? _k : []).forEach((opt) => {
+          const option = document.createElement("sl-option");
+          option.setAttribute("value", opt.value);
+          option.textContent = String(opt.label);
+          select.appendChild(option);
+        });
+        if ((_l = config.props) == null ? void 0 : _l.defaultValue) select.value = String(config.props.defaultValue);
+        const selectHandler = () => {
+          this.handleSlotValueChange(key, select.value);
+        };
+        select.addEventListener("sl-change", selectHandler);
+        this.dynamicListeners.push({ el: select, event: "sl-change", handler: selectHandler });
+        fragment.appendChild(select);
+      } else if (config.type === "content") {
+        const span = document.createElement("span");
+        span.className = "sender__slot-content";
+        span.setAttribute("contenteditable", this.readOnly || this.disabled ? "false" : "true");
+        span.setAttribute("data-slot-key", key);
+        if ((_m = config.props) == null ? void 0 : _m.placeholder) span.setAttribute("data-placeholder", config.props.placeholder);
+        span.setAttribute("spellcheck", "false");
+        span.textContent = String((_o = (_n = config.props) == null ? void 0 : _n.defaultValue) != null ? _o : "");
+        const spanHandler = () => {
+          var _a3;
+          this.handleSlotValueChange(key, (_a3 = span.textContent) != null ? _a3 : "");
+        };
+        span.addEventListener("input", spanHandler);
+        this.dynamicListeners.push({ el: span, event: "input", handler: spanHandler });
+        fragment.appendChild(span);
+      }
+    });
+    if (position === "start") {
+      const skillEl = slotArea.querySelector(".sender__skill");
+      if (skillEl) {
+        skillEl.after(fragment);
+      } else {
+        slotArea.prepend(fragment);
+      }
+    } else if (position === "end") {
+      slotArea.appendChild(fragment);
+    } else {
+      let targetRange = null;
+      const selection = (_d = (_c = (_b = this.shadowRoot) == null ? void 0 : _b.getSelection) == null ? void 0 : _c.call(_b)) != null ? _d : document.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        if (slotArea.contains(range.commonAncestorContainer)) {
+          targetRange = range;
+        }
+      }
+      if (!targetRange && this._savedRange && slotArea.contains(this._savedRange.commonAncestorContainer)) {
+        targetRange = this._savedRange;
+        const sel = (_g = (_f = (_e = this.shadowRoot) == null ? void 0 : _e.getSelection) == null ? void 0 : _f.call(_e)) != null ? _g : document.getSelection();
+        if (sel) {
+          sel.removeAllRanges();
+          sel.addRange(targetRange);
+        }
+      }
+      this._savedRange = null;
+      if (targetRange) {
+        targetRange.deleteContents();
+        targetRange.insertNode(fragment);
+        targetRange.collapse(false);
+      } else {
+        slotArea.appendChild(fragment);
+      }
+    }
+    if (!preventScroll) {
+      slotArea.focus({ preventScroll: false });
+    }
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter") {
+      const isShift = event.shiftKey;
+      if (this.submitType === "enter" && !isShift || this.submitType === "shift-enter" && isShift) {
+        event.preventDefault();
+        this.handleSubmit();
+      }
+    }
+  }
+  handleSubmit() {
+    const value = this.currentValue.trim();
+    if (this.loading || this.disabled || !value) return;
+    if (this.isSlotMode) {
+      const snapshot = this.getEditorSnapshot();
+      this.dispatchEvent(new CustomEvent("sl-submit", {
+        detail: { value: snapshot.value, slotConfig: snapshot.slotConfig, skill: snapshot.skill },
+        bubbles: true,
+        composed: true
+      }));
+      return;
+    }
+    this.dispatchEvent(new CustomEvent("sl-submit", {
+      detail: { value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  handleClear() {
+    var _a, _b;
+    if (this.isSlotMode) {
+      this.cleanupDynamicListeners();
+      const slotArea = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".sender__slot-area");
+      if (slotArea) {
+        slotArea.innerHTML = "";
+      }
+      this.slotValues = /* @__PURE__ */ new Map();
+      this.value = "";
+      this.requestUpdate();
+    } else {
+      this.value = "";
+    }
+    this.emit("sl-clear");
+    if (this.isSlotMode) {
+      this.updateComplete.then(() => this.focusSlotInput());
+      return;
+    }
+    (_b = this.textarea) == null ? void 0 : _b.focus();
+  }
+  handleSkillRemove() {
+    if (!this.skill) return;
+    const closable = this.skill.closable;
+    if (typeof closable === "object" && closable.disabled) return;
+    if (typeof closable === "object" && closable.onClose) {
+      closable.onClose();
+    }
+    this.skill = void 0;
+    this.requestUpdate();
+    this.updateComplete.then(() => {
+      const snapshot = this.getEditorSnapshot();
+      this.dispatchEvent(new CustomEvent("sl-change", {
+        detail: __spreadProps(__spreadValues({}, snapshot), { skill: void 0 }),
+        bubbles: true,
+        composed: true
+      }));
+    });
+  }
+  // 触发语音按钮点击逻辑
+  handleSpeechClick() {
+    if (this.disabled || this.readOnly || !this.allowSpeech) return;
+    if (!this.speechPermission) return;
+    this.triggerSpeech(false);
+    this.emit("sl-speech-toggle");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updatePermissionState();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cleanupPermissionStatus();
+    this.stopRecognition();
+    this.cleanupDynamicListeners();
+  }
+  updated(changedProperties) {
+    var _a;
+    super.updated(changedProperties);
+    if (changedProperties.has("allowSpeech")) {
+      if (!this.allowSpeech) {
+        this.stopRecognition();
+        this.cleanupPermissionStatus();
+        this.permissionState = null;
+        if (this.speechRecording) this.speechRecording = false;
+      } else {
+        this.updatePermissionState();
+      }
+    }
+    if (changedProperties.has("slotConfig")) {
+      this.syncSlotValues((_a = this.slotConfig) != null ? _a : []);
+    }
+  }
+  // 规范化 allowSpeech 配置，区分受控与非受控
+  get speechConfig() {
+    if (typeof this.allowSpeech === "object" && this.allowSpeech) {
+      const controlledRecording = this.allowSpeech.recording;
+      const onControlledRecordingChange = this.allowSpeech.onRecordingChange;
+      const speechInControlled = typeof controlledRecording === "boolean";
+      return { controlledRecording, onControlledRecordingChange, speechInControlled };
+    }
+    return { controlledRecording: void 0, onControlledRecordingChange: void 0, speechInControlled: false };
+  }
+  // 当前录音状态（受控配置或内部状态）
+  get currentRecording() {
+    const { controlledRecording, speechInControlled } = this.speechConfig;
+    if (speechInControlled) return !!controlledRecording;
+    return this.speechRecording;
+  }
+  // 当前环境是否允许语音输入
+  get speechPermission() {
+    if (!this.allowSpeech) return false;
+    const { speechInControlled } = this.speechConfig;
+    if (speechInControlled) return true;
+    const SpeechRecognition = this.getSpeechRecognitionConstructor();
+    return !!SpeechRecognition && this.permissionState !== "denied";
+  }
+  get isSlotMode() {
+    var _a;
+    return Array.isArray(this.slotConfig) && this.slotConfig.length > 0 || !!((_a = this.skill) == null ? void 0 : _a.value);
+  }
+  get currentValue() {
+    return this.isSlotMode ? this.getSlotValueString() : this.value;
+  }
+  getSlotKey(item, index) {
+    var _a;
+    return (_a = item.key) != null ? _a : `slot-${index}`;
+  }
+  syncSlotValues(config) {
+    const nextValues = /* @__PURE__ */ new Map();
+    config.forEach((item, index) => {
+      const key = this.getSlotKey(item, index);
+      const existing = this.slotValues.get(key);
+      if (existing !== void 0) {
+        nextValues.set(key, existing);
+        return;
+      }
+      const defaultValue = this.getSlotDefaultValue(item);
+      if (defaultValue !== void 0) {
+        nextValues.set(key, defaultValue);
+      }
+    });
+    this.slotValues = nextValues;
+    this.requestUpdate();
+  }
+  focusSlotInput() {
+    var _a;
+    const slotInput = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+      ".sender__slot-area sl-input, .sender__slot-area sl-select"
+    );
+    slotInput == null ? void 0 : slotInput.focus();
+  }
+  getSlotDefaultValue(item) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (item.type === "input") return (_a = item.props) == null ? void 0 : _a.defaultValue;
+    if (item.type === "select") return (_b = item.props) == null ? void 0 : _b.defaultValue;
+    if (item.type === "content") return (_c = item.props) == null ? void 0 : _c.defaultValue;
+    if (item.type === "custom") return (_d = item.props) == null ? void 0 : _d.defaultValue;
+    if (item.type === "tag") return (_g = (_e = item.props) == null ? void 0 : _e.value) != null ? _g : (_f = item.props) == null ? void 0 : _f.label;
+    if (item.type === "text") return (_h = item.value) != null ? _h : "";
+    return void 0;
+  }
+  getSlotItemValue(item, index) {
+    var _a;
+    if (item.type === "text") return (_a = item.value) != null ? _a : "";
+    const key = this.getSlotKey(item, index);
+    if (this.slotValues.has(key)) return this.slotValues.get(key);
+    return this.getSlotDefaultValue(item);
+  }
+  getSlotValueString() {
+    var _a;
+    if (!this.isSlotMode) return "";
+    const slotArea = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".sender__slot-area");
+    if (!slotArea) return "";
+    return this.getEditorValue(slotArea).value;
+  }
+  /**
+   * 遍历 slot 区域的 DOM 子节点，提取完整的 { value, slotConfig, skill }。
+   * 参考 ant-design-x getEditorValue 实现：
+   * - 文本节点：计入 value，并作为 { type: 'text', value } 加入 slotConfig
+   * - skill 节点：跳过文本值，记录 skill
+   * - slot 组件节点：从 slotValues / DOM 读取最新值，计入 value 和 slotConfig
+   * - 其他元素：取 textContent
+   */
+  getEditorValue(container) {
+    const parts = [];
+    const currentSlotConfig = [];
+    let currentSkill;
+    container.childNodes.forEach((node) => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      if (node.nodeType === Node.TEXT_NODE) {
+        const text = (_a = node.textContent) != null ? _a : "";
+        if (!text || /^\s+$/.test(text)) {
+          return;
+        }
+        parts.push(text);
+        currentSlotConfig.push({ type: "text", value: text });
+        return;
+      }
+      if (node.nodeType !== Node.ELEMENT_NODE) return;
+      const el = node;
+      if (el.classList.contains("sender__skill")) {
+        if (this.skill) {
+          currentSkill = this.skill;
+        }
+        return;
+      }
+      if (el.classList.contains("sender__slot-content")) {
+        const text = (_b = el.textContent) != null ? _b : "";
+        const key = (_c = el.dataset) == null ? void 0 : _c.slotKey;
+        parts.push(text);
+        const config = key ? this.getSlotConfigByKey(key) : void 0;
+        if (config) {
+          currentSlotConfig.push(__spreadProps(__spreadValues({}, config), { value: text }));
+        }
+        return;
+      }
+      if (el.tagName === "SL-INPUT") {
+        const key = this.getSlotKeyFromElement(el);
+        const rawValue = key && this.slotValues.has(key) ? this.slotValues.get(key) : el.value;
+        const config = key ? this.getSlotConfigByKey(key) : void 0;
+        const text = (config == null ? void 0 : config.formatResult) ? config.formatResult(rawValue) : String(rawValue != null ? rawValue : "");
+        parts.push(text);
+        if (config) {
+          currentSlotConfig.push(__spreadProps(__spreadValues({}, config), { value: rawValue }));
+        }
+        return;
+      }
+      if (el.tagName === "SL-SELECT") {
+        const key = this.getSlotKeyFromElement(el);
+        const rawValue = key && this.slotValues.has(key) ? this.slotValues.get(key) : el.value;
+        const config = key ? this.getSlotConfigByKey(key) : void 0;
+        const text = (config == null ? void 0 : config.formatResult) ? config.formatResult(rawValue) : String(rawValue != null ? rawValue : "");
+        parts.push(text);
+        if (config) {
+          currentSlotConfig.push(__spreadProps(__spreadValues({}, config), { value: rawValue }));
+        }
+        return;
+      }
+      if (el.tagName === "SL-TAG") {
+        const text = (_e = (_d = el.textContent) == null ? void 0 : _d.trim()) != null ? _e : "";
+        const key = this.getSlotKeyFromElement(el);
+        parts.push(text);
+        const config = key ? this.getSlotConfigByKey(key) : void 0;
+        if (config) {
+          currentSlotConfig.push(__spreadProps(__spreadValues({}, config), { value: text }));
+        }
+        return;
+      }
+      if (el.tagName === "BR") {
+        parts.push("\n");
+        currentSlotConfig.push({ type: "text", value: "\n" });
+        return;
+      }
+      if (el.tagName === "DIV") {
+        const text = (_f = el.innerText) != null ? _f : "";
+        if (text) {
+          parts.push("\n" + text);
+          currentSlotConfig.push({ type: "text", value: "\n" + text });
+        }
+        return;
+      }
+      parts.push((_g = el.textContent) != null ? _g : "");
+    });
+    return {
+      value: parts.join(""),
+      slotConfig: currentSlotConfig,
+      skill: currentSkill
+    };
+  }
+  /** 获取 slot 区域的完整快照（value + slotConfig + skill），从 DOM 遍历得到最新状态 */
+  getEditorSnapshot() {
+    var _a;
+    const slotArea = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".sender__slot-area");
+    if (!slotArea) return { value: "", slotConfig: [], skill: this.skill };
+    return this.getEditorValue(slotArea);
+  }
+  /** 根据 slot 区域中的 DOM 元素，反查对应的 slotConfig key */
+  getSlotKeyFromElement(el) {
+    var _a;
+    return (_a = el.dataset) == null ? void 0 : _a.slotKey;
+  }
+  /** 根据 key 查找对应的 slotConfig 项 */
+  getSlotConfigByKey(key) {
+    if (!this.slotConfig) return void 0;
+    return this.slotConfig.find((item, index) => this.getSlotKey(item, index) === key);
+  }
+  // 获取厂商前缀的 SpeechRecognition 构造函数
+  getSpeechRecognitionConstructor() {
+    if (typeof window === "undefined") return null;
+    const speechWindow = window;
+    return speechWindow.SpeechRecognition || speechWindow.webkitSpeechRecognition || null;
+  }
+  // 非受控模式下查询麦克风权限
+  updatePermissionState() {
+    const { speechInControlled } = this.speechConfig;
+    if (!this.allowSpeech || speechInControlled) return;
+    this.cleanupPermissionStatus();
+    if (!navigator.permissions) return;
+    navigator.permissions.query({ name: "microphone" }).then((permissionStatus) => {
+      this.permissionState = permissionStatus.state;
+      permissionStatus.onchange = () => {
+        this.permissionState = permissionStatus.state;
+      };
+      this.permissionStatus = permissionStatus;
+    }).catch(() => {
+      this.permissionState = null;
+    });
+  }
+  // 移除权限监听，避免泄漏
+  cleanupPermissionStatus() {
+    if (this.permissionStatus) {
+      this.permissionStatus.onchange = null;
+      this.permissionStatus = null;
+    }
+  }
+  // 移除动态插入元素上的事件监听器，避免内存泄漏
+  cleanupDynamicListeners() {
+    for (const { el, event, handler } of this.dynamicListeners) {
+      el.removeEventListener(event, handler);
+    }
+    this.dynamicListeners = [];
+  }
+  // 按需创建识别实例并绑定事件
+  ensureRecognition() {
+    if (!this.allowSpeech || this.speechConfig.speechInControlled) return;
+    const SpeechRecognition = this.getSpeechRecognitionConstructor();
+    if (!SpeechRecognition || this.recognition) return;
+    const recognition = new SpeechRecognition();
+    recognition.onstart = () => {
+      this.speechRecording = true;
+    };
+    recognition.onend = () => {
+      this.speechRecording = false;
+    };
+    recognition.onresult = (event) => {
+      var _a, _b, _c;
+      if (!this.forceBreak) {
+        const transcript = (_c = (_b = (_a = event.results) == null ? void 0 : _a[0]) == null ? void 0 : _b[0]) == null ? void 0 : _c.transcript;
+        if (transcript) this.applyTranscript(transcript);
+      }
+      this.forceBreak = false;
+    };
+    this.recognition = recognition;
+  }
+  // 停止识别并释放实例
+  stopRecognition() {
+    if (this.recognition && this.currentRecording) {
+      this.recognition.stop();
+    }
+    this.recognition = null;
+  }
+  // 切换录音；forceBreak 为 true 时停止且不消费转写结果
+  triggerSpeech(forceBreak) {
+    if (!this.speechPermission) return;
+    if (forceBreak && !this.currentRecording) return;
+    this.forceBreak = forceBreak;
+    const { speechInControlled, onControlledRecordingChange } = this.speechConfig;
+    if (speechInControlled) {
+      onControlledRecordingChange == null ? void 0 : onControlledRecordingChange(!this.currentRecording);
+      return;
+    }
+    this.ensureRecognition();
+    if (!this.recognition) return;
+    if (this.currentRecording) {
+      this.recognition.stop();
+    } else {
+      this.recognition.start();
+    }
+  }
+  // 将语音转写内容追加到输入框
+  applyTranscript(transcript) {
+    var _a, _b;
+    if (this.disabled || this.readOnly) return;
+    if (this.isSlotMode) {
+      this.insert([{ type: "text", value: transcript }], "cursor");
+      return;
+    }
+    const textareaEl = (_b = (_a = this.textarea) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("textarea");
+    if (textareaEl && typeof textareaEl.selectionStart === "number") {
+      const start = textareaEl.selectionStart;
+      const end = textareaEl.selectionEnd;
+      this.value = this.value.slice(0, start) + transcript + this.value.slice(end);
+      this.updateComplete.then(() => {
+        const newPos = start + transcript.length;
+        textareaEl.setSelectionRange(newPos, newPos);
+      });
+    } else {
+      this.value = this.value ? `${this.value} ${transcript}` : transcript;
+    }
+    this.dispatchEvent(new CustomEvent("sl-change", {
+      detail: { value: this.value, slotConfig: [], skill: this.skill },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  renderSendButton(props) {
+    var _a, _b;
+    const loading = (_a = props == null ? void 0 : props.loading) != null ? _a : this.loading;
+    const disabled = (_b = props == null ? void 0 : props.disabled) != null ? _b : this.disabled || !this.currentValue.trim();
+    const name = loading ? "app" : "arrow-up-short";
+    return html`
+      <sl-icon-button
+        class="send-button"
+        name=${name}
+        ?disabled=${disabled}
+        @click=${this.handleSubmit}
+      >
+      </sl-icon-button>
+    `;
+  }
+  renderClearButton(props) {
+    var _a;
+    const disabled = (_a = props == null ? void 0 : props.disabled) != null ? _a : this.disabled || !this.currentValue;
+    return html`
+      <sl-icon-button
+        name="trash"
+        ?disabled=${disabled}
+        @click=${this.handleClear}
+      >
+      </sl-icon-button>
+    `;
+  }
+  renderRecordingIcon() {
+    return html`
+      <span class="sender__recording-icon" aria-label="Recording">
+        <span class="sender__recording-bar"></span>
+        <span class="sender__recording-bar"></span>
+        <span class="sender__recording-bar"></span>
+        <span class="sender__recording-bar"></span>
+      </span>
+    `;
+  }
+  renderSpeechButton(props) {
+    var _a, _b;
+    if (!this.allowSpeech) return null;
+    const disabled = (_a = props == null ? void 0 : props.disabled) != null ? _a : this.disabled || this.readOnly || !this.speechPermission;
+    const onClick = (_b = props == null ? void 0 : props.onClick) != null ? _b : this.handleSpeechClick.bind(this);
+    if (this.currentRecording) {
+      return html`
+        <button
+          class="sender__speech-btn sender__speech-btn--recording"
+          @click=${onClick}
+          ?disabled=${disabled}
+          aria-label="Stop recording"
+        >
+          ${this.renderRecordingIcon()}
+        </button>
+      `;
+    }
+    return html`
+      <sl-icon-button
+        name="mic"
+        class="sender__speech-btn"
+        @click=${onClick}
+        ?disabled=${disabled}
+      >
+      </sl-icon-button>
+    `;
+  }
+  renderLoadingButton(props) {
+    var _a, _b;
+    const disabled = (_a = props == null ? void 0 : props.disabled) != null ? _a : this.disabled;
+    const onClick = (_b = props == null ? void 0 : props.onClick) != null ? _b : this.handleSubmit.bind(this);
+    return html`
+      <sl-icon-button
+        name="send"
+        ?loading=${true}
+        ?disabled=${disabled}
+        @click=${this.handleSubmit}
+      >
+      </sl-icon-button>
+    `;
+  }
+  get actionComponents() {
+    return {
+      SendButton: (props) => this.renderSendButton(props),
+      ClearButton: (props) => this.renderClearButton(props),
+      LoadingButton: (props) => this.renderLoadingButton(props),
+      SpeechButton: (props) => this.renderSpeechButton(props)
+    };
+  }
+  renderFooter() {
+    const defaultFooter = html`
+      <div
+        class=${classMap({
+      sender__footer: true,
+      sender__footer_content: this.hasFooterContent
+    })}
+        part="footer"
+      >
+        <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
+      </div>
+    `;
+    if (this.footer === false) return null;
+    if (typeof this.footer === "function") {
+      return this.footer(defaultFooter, { components: this.actionComponents });
+    }
+    if (this.footer !== void 0) return this.footer;
+    return defaultFooter;
+  }
+  handleFooterSlotChange() {
+    var _a;
+    const slot = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector('slot[name="footer"]');
+    this.hasFooterContent = !!slot && slot.assignedNodes({ flatten: true }).length > 0;
+  }
+  handleHeaderSlotChange() {
+    var _a;
+    const slot = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector('slot[name="header"]');
+    this.hasHeaderContent = !!slot && slot.assignedNodes({ flatten: true }).length > 0;
+  }
+  renderHeader() {
+    const defaultHeader = html`
+      <div
+        class=${classMap({
+      sender__header: true,
+      sender__header_content: this.hasHeaderContent
+    })}
+        part="header"
+      >
+        <slot name="header" @slotchange=${this.handleHeaderSlotChange}></slot>
+      </div>
+    `;
+    if (this.header === false) return null;
+    if (typeof this.header === "function") {
+      return this.header(defaultHeader, { components: this.actionComponents });
+    }
+    if (this.header !== void 0) return this.header;
+    return defaultHeader;
+  }
+  renderPrefix() {
+    const defaultPrefix = html`<slot name="prefix"></slot>`;
+    if (this.prefixContent === false) return null;
+    if (typeof this.prefixContent === "function") {
+      return this.prefixContent(defaultPrefix, { components: this.actionComponents });
+    }
+    if (this.prefixContent !== void 0) return this.prefixContent;
+    return defaultPrefix;
+  }
+  renderSuffix() {
+    const defaultActions = html`
+      <div class="sender__actions" part="actions">
+        <slot name="suffix">
+          ${this.renderSpeechButton()}
+          ${this.renderSendButton()}
+        </slot>
+        </div>
+        `;
+    if (this.suffixContent === false) return null;
+    if (typeof this.suffixContent === "function") {
+      return this.suffixContent(defaultActions, { components: this.actionComponents });
+    }
+    if (this.suffixContent !== void 0) return this.suffixContent;
+    return defaultActions;
+  }
+  renderSlotItem(item, index) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+    const key = this.getSlotKey(item, index);
+    if (item.type === "text") {
+      return html`${(_a = item.value) != null ? _a : ""}`;
+    }
+    if (item.type === "content") {
+      const value = (_b = this.getSlotItemValue(item, index)) != null ? _b : "";
+      return html`
+        <span
+          class="sender__slot-content"
+          contenteditable=${this.readOnly || this.disabled ? "false" : "true"}
+          data-slot-key=${key}
+          data-placeholder=${(_d = (_c = item.props) == null ? void 0 : _c.placeholder) != null ? _d : ""}
+          spellcheck="false"
+          @input=${(event) => {
+        var _a2;
+        const target = event.target;
+        this.handleSlotValueChange(key, (_a2 = target.textContent) != null ? _a2 : "");
+      }}
+          @keydown=${(event) => this.handleKeyDown(event)}
+          @paste=${(event) => {
+        var _a2, _b2;
+        event.preventDefault();
+        const text = (_b2 = (_a2 = event.clipboardData) == null ? void 0 : _a2.getData("text/plain")) != null ? _b2 : "";
+        document.execCommand("insertText", false, text);
+      }}
+        >${String(value)}</span>
+      `;
+    }
+    if (item.type === "input") {
+      const value = (_e = this.getSlotItemValue(item, index)) != null ? _e : "";
+      return html`
+        <sl-input
+          class="sender__slot-input"
+          data-slot-key=${key}
+          .value=${String(value != null ? value : "")}
+          placeholder=${(_g = (_f = item.props) == null ? void 0 : _f.placeholder) != null ? _g : ""}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readOnly}
+          @sl-input=${(event) => {
+        const target = event.target;
+        this.handleSlotValueChange(key, target.value);
+      }}
+        ></sl-input>
+      `;
+    }
+    if (item.type === "select") {
+      const value = this.getSlotItemValue(item, index);
+      return html`
+        <sl-select
+          class="sender__slot-select"
+          data-slot-key=${key}
+          .value=${String(value != null ? value : "")}
+          placeholder=${(_i = (_h = item.props) == null ? void 0 : _h.placeholder) != null ? _i : ""}
+          ?disabled=${this.disabled}
+          @sl-change=${(event) => {
+        const target = event.target;
+        this.handleSlotValueChange(key, target.value);
+      }}
+        >
+          ${((_k = (_j = item.props) == null ? void 0 : _j.options) != null ? _k : []).map((option) => html`<sl-option value=${option.value}>${option.label}</sl-option>`)}
+        </sl-select>
+      `;
+    }
+    if (item.type === "tag") {
+      return html`
+        <sl-tag class="sender__slot-tag" variant="primary" data-slot-key=${key}>
+          ${(_o = (_n = (_l = item.props) == null ? void 0 : _l.label) != null ? _n : (_m = item.props) == null ? void 0 : _m.value) != null ? _o : ""}
+        </sl-tag>
+      `;
+    }
+    if (item.type === "custom") {
+      const value = this.getSlotItemValue(item, index);
+      const onChange = (nextValue) => this.handleSlotValueChange(key, nextValue);
+      return (_q = (_p = item.customRender) == null ? void 0 : _p.call(item, value, onChange, { disabled: this.disabled, readOnly: this.readOnly }, item)) != null ? _q : null;
+    }
+    return null;
+  }
+  renderSlotConfig() {
+    var _a;
+    if (!this.isSlotMode) return null;
+    return html`
+      <div
+        class="sender__slot-area"
+        part="slot-area"
+        contenteditable=${this.readOnly || this.disabled ? "false" : "true"}
+        @keydown=${this.handleKeyDown}
+        @paste=${this.handlePaste}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        @input=${this.handleSlotAreaInput}
+      >
+        ${this.renderSkill()}
+        ${(_a = this.slotConfig) == null ? void 0 : _a.map((item, index) => this.renderSlotItem(item, index))}
+      </div>
+    `;
+  }
+  renderSkill() {
+    var _a;
+    if (!this.skill) return null;
+    const displayTitle = (_a = this.skill.title) != null ? _a : this.skill.value;
+    const closable = this.skill.closable;
+    const showClose = !!closable;
+    const closeDisabled = typeof closable === "object" && closable.disabled;
+    const closeIcon = typeof closable === "object" && closable.closeIcon ? closable.closeIcon : "x-lg";
+    return html`
+      <span class="sender__skill" part="skill" contenteditable="true">
+        <span class="sender__skill-tag" contenteditable="false">
+          <span class="sender__skill-text">${displayTitle}</span>
+          ${showClose ? html`
+            <span
+              class="sender__skill-close ${closeDisabled ? "sender__skill-close--disabled" : ""}"
+              role="button"
+              aria-label="Remove skill"
+              tabindex=${closeDisabled ? -1 : 0}
+              @click=${() => !closeDisabled && this.handleSkillRemove()}
+              @keydown=${(e) => {
+      if (!closeDisabled && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        this.handleSkillRemove();
+      }
+    }}
+            >
+              <sl-icon name=${closeIcon}></sl-icon>
+            </span>
+          ` : null}
+        </span>
+      </span>
+    `;
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      sender: true,
+      "sender--disabled": this.disabled
+    })}
+        part="base"
+      >
+        ${this.renderHeader()}
+
+        <div class="sender__content">
+          <div class="sender__input-area">
+            ${this.renderPrefix()}
+            ${this.isSlotMode ? this.renderSlotConfig() : html`
+                  <sl-textarea
+                    part="input"
+                    .value=${this.value}
+                    placeholder=${this.placeholder}
+                    ?disabled=${this.disabled}
+                    ?readonly=${this.readOnly}
+                    resize="none"
+                    rows=${this.rows}
+                    @sl-input=${this.handleInput}
+                    @keydown=${this.handleKeyDown}
+                    @paste=${this.handlePaste}
+                    @sl-focus=${this.handleFocus}
+                    @sl-blur=${this.handleBlur}
+                  ></sl-textarea>
+                `}
+            ${this.renderSuffix()}
+          </div>
+        </div>
+
+        ${this.renderFooter()}
+      </div>
+    `;
+  }
+};
+SlSender.styles = [component_styles_default, sender_styles_default];
+SlSender.dependencies = {
+  "sl-textarea": SlTextarea,
+  "sl-input": SlInput,
+  "sl-select": SlSelect,
+  "sl-option": SlOption,
+  "sl-tag": SlTag,
+  "sl-button": SlButton,
+  "sl-icon-button": SlIconButton,
+  "sl-icon": SlIcon,
+  "sl-spinner": SlSpinner
+};
+__decorateClass([
+  query("sl-textarea")
+], SlSender.prototype, "textarea", 2);
+__decorateClass([
+  query(".sender__slot-area")
+], SlSender.prototype, "slotArea", 2);
+__decorateClass([
+  property({ type: String })
+], SlSender.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], SlSender.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlSender.prototype, "loading", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlSender.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "read-only" })
+], SlSender.prototype, "readOnly", 2);
+__decorateClass([
+  property({ type: Number })
+], SlSender.prototype, "rows", 2);
+__decorateClass([
+  property({ type: String, attribute: "submit-type" })
+], SlSender.prototype, "submitType", 2);
+__decorateClass([
+  property({ type: Array })
+], SlSender.prototype, "slotConfig", 2);
+__decorateClass([
+  property({ type: Object })
+], SlSender.prototype, "skill", 2);
+__decorateClass([
+  property({ type: Object })
+], SlSender.prototype, "footer", 2);
+__decorateClass([
+  property({ type: Object })
+], SlSender.prototype, "header", 2);
+__decorateClass([
+  property({ type: Object })
+], SlSender.prototype, "prefixContent", 2);
+__decorateClass([
+  property({ type: Object })
+], SlSender.prototype, "suffixContent", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "allow-speech" })
+], SlSender.prototype, "allowSpeech", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "speech-recording" })
+], SlSender.prototype, "speechRecording", 2);
+__decorateClass([
+  state()
+], SlSender.prototype, "hasHeaderContent", 2);
+__decorateClass([
+  state()
+], SlSender.prototype, "hasFooterContent", 2);
+
+export {
+  SlSender
+};