@yh-ui/components 0.1.10 → 0.1.12

package/dist/ai-sender/__tests__/ai-sender.test.cjs

@@ -0,0 +1,388 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _testUtils = require("@vue/test-utils");
+var _vue = require("vue");
+var _aiSender = _interopRequireDefault(require("../src/ai-sender.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+(0, _vitest.describe)("YhAiSender", () => {
+  (0, _vitest.it)("should render with base class", () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default);
+    (0, _vitest.expect)(wrapper.find(".yh-ai-sender").exists()).toBe(true);
+  });
+  (0, _vitest.it)("should render textarea", () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default);
+    (0, _vitest.expect)(wrapper.find("textarea").exists()).toBe(true);
+  });
+  (0, _vitest.it)("should render send button", () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default);
+    (0, _vitest.expect)(wrapper.find(".yh-ai-sender__send-btn").exists()).toBe(true);
+  });
+  (0, _vitest.it)("should display modelValue in textarea", () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        modelValue: "hello"
+      }
+    });
+    (0, _vitest.expect)(wrapper.find("textarea").element.value).toBe("hello");
+  });
+  (0, _vitest.it)("should emit update:modelValue on input", async () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        modelValue: ""
+      }
+    });
+    await wrapper.find("textarea").setValue("new text");
+    const emitted = wrapper.emitted("update:modelValue");
+    (0, _vitest.expect)(emitted).toBeTruthy();
+    (0, _vitest.expect)(emitted[emitted.length - 1][0]).toBe("new text");
+  });
+  (0, _vitest.it)("should emit change on input", async () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        modelValue: ""
+      }
+    });
+    await wrapper.find("textarea").setValue("changed");
+    (0, _vitest.expect)(wrapper.emitted("change")).toBeTruthy();
+  });
+  (0, _vitest.it)("should apply is-disabled class when disabled=true", () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        disabled: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.classes()).toContain("is-disabled");
+  });
+  (0, _vitest.it)("should disable textarea when disabled=true", () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        disabled: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.find("textarea").element.disabled).toBe(true);
+  });
+  (0, _vitest.it)("should apply is-loading class when loading=true", () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        loading: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.classes()).toContain("is-loading");
+  });
+  (0, _vitest.it)("should disable textarea when loading=true", () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        loading: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.find("textarea").element.disabled).toBe(true);
+  });
+  (0, _vitest.it)("should emit send when button clicked with text", async () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        modelValue: "Hello"
+      }
+    });
+    await wrapper.find(".yh-ai-sender__send-btn").trigger("click");
+    (0, _vitest.expect)(wrapper.emitted("send")).toBeTruthy();
+    (0, _vitest.expect)(wrapper.emitted("send")[0][0]).toBe("Hello");
+  });
+  (0, _vitest.it)("should NOT emit send when textarea is empty", async () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        modelValue: ""
+      }
+    });
+    await wrapper.find(".yh-ai-sender__send-btn").trigger("click");
+    (0, _vitest.expect)(wrapper.emitted("send")).toBeFalsy();
+  });
+  (0, _vitest.it)("should NOT emit send when disabled", async () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        modelValue: "text",
+        disabled: true
+      }
+    });
+    await wrapper.find(".yh-ai-sender__send-btn").trigger("click");
+    (0, _vitest.expect)(wrapper.emitted("send")).toBeFalsy();
+  });
+  (0, _vitest.it)("should NOT emit send when loading", async () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        modelValue: "text",
+        loading: true
+      }
+    });
+    await wrapper.find(".yh-ai-sender__send-btn").trigger("click");
+    (0, _vitest.expect)(wrapper.emitted("send")).toBeFalsy();
+  });
+  (0, _vitest.it)("should emit send on Enter (without Shift)", async () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        modelValue: "Hello"
+      }
+    });
+    await wrapper.find("textarea").trigger("keydown", {
+      key: "Enter",
+      shiftKey: false
+    });
+    (0, _vitest.expect)(wrapper.emitted("send")).toBeTruthy();
+  });
+  (0, _vitest.it)("should NOT emit send on Shift+Enter", async () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        modelValue: "Hello"
+      }
+    });
+    await wrapper.find("textarea").trigger("keydown", {
+      key: "Enter",
+      shiftKey: true
+    });
+    (0, _vitest.expect)(wrapper.emitted("send")).toBeFalsy();
+  });
+  (0, _vitest.it)("should clear value after send", async () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        modelValue: "Hello"
+      }
+    });
+    await wrapper.find(".yh-ai-sender__send-btn").trigger("click");
+    await (0, _vue.nextTick)();
+    const emitted = wrapper.emitted("update:modelValue");
+    (0, _vitest.expect)(emitted[emitted.length - 1][0]).toBe("");
+  });
+  (0, _vitest.it)("should show clear button when clearable=true and has text", () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        modelValue: "text",
+        clearable: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-ai-sender__clear-btn").exists()).toBe(true);
+  });
+  (0, _vitest.it)("should NOT show clear button when clearable=true but empty", () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        modelValue: "",
+        clearable: true
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-ai-sender__clear-btn").exists()).toBe(false);
+  });
+  (0, _vitest.it)("should emit clear when clear button clicked", async () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        modelValue: "text",
+        clearable: true
+      }
+    });
+    await wrapper.find(".yh-ai-sender__clear-btn").trigger("click");
+    (0, _vitest.expect)(wrapper.emitted("clear")).toBeTruthy();
+  });
+  (0, _vitest.it)("should show word limit when showWordLimit=true and maxLength set", () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        modelValue: "hi",
+        showWordLimit: true,
+        maxLength: 100
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".yh-ai-sender__word-limit").exists()).toBe(true);
+    (0, _vitest.expect)(wrapper.find(".yh-ai-sender__word-limit").text()).toContain("100");
+  });
+  (0, _vitest.it)("should apply is-focused on textarea focus", async () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default);
+    await wrapper.find("textarea").trigger("focus");
+    (0, _vitest.expect)(wrapper.classes()).toContain("is-focused");
+  });
+  (0, _vitest.it)("should remove is-focused on textarea blur", async () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default);
+    await wrapper.find("textarea").trigger("focus");
+    await wrapper.find("textarea").trigger("blur");
+    (0, _vitest.expect)(wrapper.classes()).not.toContain("is-focused");
+  });
+  (0, _vitest.it)("should render prefix slot", () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      slots: {
+        prefix: '<div class="custom-prefix">P</div>'
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".custom-prefix").exists()).toBe(true);
+  });
+  (0, _vitest.it)("should render actions slot", () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      slots: {
+        actions: '<button class="custom-action">Extra</button>'
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".custom-action").exists()).toBe(true);
+  });
+  (0, _vitest.it)("should render submit slot overriding default send button", () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      slots: {
+        submit: '<button class="custom-submit">Go</button>'
+      }
+    });
+    (0, _vitest.expect)(wrapper.find(".custom-submit").exists()).toBe(true);
+  });
+  (0, _vitest.it)("should update when modelValue prop changes", async () => {
+    const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+      props: {
+        modelValue: "old"
+      }
+    });
+    await wrapper.setProps({
+      modelValue: "new text"
+    });
+    await (0, _vue.nextTick)();
+    (0, _vitest.expect)(wrapper.find("textarea").element.value).toBe("new text");
+  });
+  (0, _vitest.describe)("Slash Commands", () => {
+    const commands = [{
+      key: "help",
+      label: "Help"
+    }, {
+      key: "settings",
+      label: "Settings",
+      prompt: "Show Settings "
+    }];
+    (0, _vitest.it)("should show slash commands panel when triggering /", async () => {
+      const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+        props: {
+          commands
+        }
+      });
+      const textarea = wrapper.find("textarea");
+      await textarea.setValue("/h");
+      textarea.element.selectionStart = 2;
+      await textarea.trigger("input");
+      (0, _vitest.expect)(wrapper.find(".yh-ai-sender__command-panel").exists()).toBe(true);
+      (0, _vitest.expect)(wrapper.findAll(".yh-ai-sender__command-item").length).toBe(1);
+    });
+    (0, _vitest.it)("should navigate and select command with keyboard", async () => {
+      const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+        props: {
+          commands
+        }
+      });
+      const textarea = wrapper.find("textarea");
+      await textarea.setValue("/");
+      textarea.element.selectionStart = 1;
+      await textarea.trigger("input");
+      (0, _vitest.expect)(wrapper.find(".yh-ai-sender__command-panel").exists()).toBe(true);
+      await textarea.trigger("keydown", {
+        key: "ArrowDown"
+      });
+      await textarea.trigger("keydown", {
+        key: "ArrowUp"
+      });
+      await textarea.trigger("keydown", {
+        key: "Enter"
+      });
+      (0, _vitest.expect)(wrapper.emitted("command")[0][0]).toEqual(commands[0]);
+      (0, _vitest.expect)(textarea.element.value).toBe("/help ");
+    });
+    (0, _vitest.it)("should select command via mouse click", async () => {
+      const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+        props: {
+          commands
+        }
+      });
+      const textarea = wrapper.find("textarea");
+      await textarea.setValue("/");
+      textarea.element.selectionStart = 1;
+      await textarea.trigger("input");
+      await wrapper.find(".yh-ai-sender__command-item").trigger("click");
+      (0, _vitest.expect)(wrapper.emitted("command")).toBeTruthy();
+    });
+    (0, _vitest.it)("should hide commands on Escape", async () => {
+      const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+        props: {
+          commands
+        }
+      });
+      const textarea = wrapper.find("textarea");
+      await textarea.setValue("/");
+      textarea.element.selectionStart = 1;
+      await textarea.trigger("input");
+      await textarea.trigger("keydown", {
+        key: "Escape"
+      });
+      (0, _vitest.expect)(wrapper.find(".yh-ai-sender__command-panel").exists()).toBe(false);
+    });
+    (0, _vitest.it)("should hide commands on blur after delay", async () => {
+      _vitest.vi.useFakeTimers();
+      const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+        props: {
+          commands
+        }
+      });
+      const textarea = wrapper.find("textarea");
+      await textarea.setValue("/");
+      textarea.element.selectionStart = 1;
+      await textarea.trigger("input");
+      await textarea.trigger("blur");
+      _vitest.vi.advanceTimersByTime(250);
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-ai-sender__command-panel").exists()).toBe(false);
+      _vitest.vi.useRealTimers();
+    });
+  });
+  (0, _vitest.describe)("Attachments", () => {
+    (0, _vitest.it)("should render attachments and emit remove event", async () => {
+      const attachments = [{
+        id: "1",
+        name: "img.png",
+        type: "image/png",
+        url: "img.png"
+      }, {
+        id: "2",
+        name: "doc.pdf",
+        type: "application/pdf",
+        url: "doc.pdf",
+        status: "uploading",
+        progress: 50
+      }];
+      const wrapper = (0, _testUtils.mount)(_aiSender.default, {
+        props: {
+          attachments
+        }
+      });
+      const items = wrapper.findAll(".yh-ai-sender__attachment-item");
+      (0, _vitest.expect)(items.length).toBe(2);
+      (0, _vitest.expect)(wrapper.find(".yh-ai-sender__progress-bar").exists()).toBe(true);
+      await wrapper.find(".yh-ai-sender__attachment-remove").trigger("click");
+      (0, _vitest.expect)(wrapper.emitted("remove-attachment")[0][0]).toEqual(attachments[0]);
+    });
+  });
+  (0, _vitest.describe)("aiSenderEmits", () => {
+    (0, _vitest.it)("should validate send event", async () => {
+      const {
+        aiSenderEmits
+      } = await Promise.resolve().then(() => require("../src/ai-sender.cjs"));
+      (0, _vitest.expect)(aiSenderEmits.send("hello")).toBe(true);
+      (0, _vitest.expect)(aiSenderEmits.send("")).toBe(true);
+    });
+    (0, _vitest.it)("should pass-through other event validators", async () => {
+      const {
+        aiSenderEmits
+      } = await Promise.resolve().then(() => require("../src/ai-sender.cjs"));
+      (0, _vitest.expect)(aiSenderEmits["update:modelValue"]("text")).toBe(true);
+      (0, _vitest.expect)(aiSenderEmits.change("text")).toBe(true);
+      (0, _vitest.expect)(aiSenderEmits.command({
+        key: "a",
+        label: "b"
+      })).toBe(true);
+      (0, _vitest.expect)(aiSenderEmits.blur(new FocusEvent("blur"))).toBe(true);
+      (0, _vitest.expect)(aiSenderEmits.focus(new FocusEvent("focus"))).toBe(true);
+      (0, _vitest.expect)(aiSenderEmits.clear()).toBe(true);
+      (0, _vitest.expect)(aiSenderEmits["remove-attachment"]({
+        id: "1",
+        name: "f",
+        type: "doc",
+        url: "doc"
+      })).toBe(true);
+    });
+  });
+});

package/dist/ai-sender/__tests__/ai-sender.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ai-sender/__tests__/ai-sender.test.mjs

@@ -0,0 +1,248 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import AiSender from "../src/ai-sender.vue";
+describe("YhAiSender", () => {
+  it("should render with base class", () => {
+    const wrapper = mount(AiSender);
+    expect(wrapper.find(".yh-ai-sender").exists()).toBe(true);
+  });
+  it("should render textarea", () => {
+    const wrapper = mount(AiSender);
+    expect(wrapper.find("textarea").exists()).toBe(true);
+  });
+  it("should render send button", () => {
+    const wrapper = mount(AiSender);
+    expect(wrapper.find(".yh-ai-sender__send-btn").exists()).toBe(true);
+  });
+  it("should display modelValue in textarea", () => {
+    const wrapper = mount(AiSender, { props: { modelValue: "hello" } });
+    expect(wrapper.find("textarea").element.value).toBe("hello");
+  });
+  it("should emit update:modelValue on input", async () => {
+    const wrapper = mount(AiSender, { props: { modelValue: "" } });
+    await wrapper.find("textarea").setValue("new text");
+    const emitted = wrapper.emitted("update:modelValue");
+    expect(emitted).toBeTruthy();
+    expect(emitted[emitted.length - 1][0]).toBe("new text");
+  });
+  it("should emit change on input", async () => {
+    const wrapper = mount(AiSender, { props: { modelValue: "" } });
+    await wrapper.find("textarea").setValue("changed");
+    expect(wrapper.emitted("change")).toBeTruthy();
+  });
+  it("should apply is-disabled class when disabled=true", () => {
+    const wrapper = mount(AiSender, { props: { disabled: true } });
+    expect(wrapper.classes()).toContain("is-disabled");
+  });
+  it("should disable textarea when disabled=true", () => {
+    const wrapper = mount(AiSender, { props: { disabled: true } });
+    expect(wrapper.find("textarea").element.disabled).toBe(true);
+  });
+  it("should apply is-loading class when loading=true", () => {
+    const wrapper = mount(AiSender, { props: { loading: true } });
+    expect(wrapper.classes()).toContain("is-loading");
+  });
+  it("should disable textarea when loading=true", () => {
+    const wrapper = mount(AiSender, { props: { loading: true } });
+    expect(wrapper.find("textarea").element.disabled).toBe(true);
+  });
+  it("should emit send when button clicked with text", async () => {
+    const wrapper = mount(AiSender, { props: { modelValue: "Hello" } });
+    await wrapper.find(".yh-ai-sender__send-btn").trigger("click");
+    expect(wrapper.emitted("send")).toBeTruthy();
+    expect(wrapper.emitted("send")[0][0]).toBe("Hello");
+  });
+  it("should NOT emit send when textarea is empty", async () => {
+    const wrapper = mount(AiSender, { props: { modelValue: "" } });
+    await wrapper.find(".yh-ai-sender__send-btn").trigger("click");
+    expect(wrapper.emitted("send")).toBeFalsy();
+  });
+  it("should NOT emit send when disabled", async () => {
+    const wrapper = mount(AiSender, { props: { modelValue: "text", disabled: true } });
+    await wrapper.find(".yh-ai-sender__send-btn").trigger("click");
+    expect(wrapper.emitted("send")).toBeFalsy();
+  });
+  it("should NOT emit send when loading", async () => {
+    const wrapper = mount(AiSender, { props: { modelValue: "text", loading: true } });
+    await wrapper.find(".yh-ai-sender__send-btn").trigger("click");
+    expect(wrapper.emitted("send")).toBeFalsy();
+  });
+  it("should emit send on Enter (without Shift)", async () => {
+    const wrapper = mount(AiSender, { props: { modelValue: "Hello" } });
+    await wrapper.find("textarea").trigger("keydown", { key: "Enter", shiftKey: false });
+    expect(wrapper.emitted("send")).toBeTruthy();
+  });
+  it("should NOT emit send on Shift+Enter", async () => {
+    const wrapper = mount(AiSender, { props: { modelValue: "Hello" } });
+    await wrapper.find("textarea").trigger("keydown", { key: "Enter", shiftKey: true });
+    expect(wrapper.emitted("send")).toBeFalsy();
+  });
+  it("should clear value after send", async () => {
+    const wrapper = mount(AiSender, { props: { modelValue: "Hello" } });
+    await wrapper.find(".yh-ai-sender__send-btn").trigger("click");
+    await nextTick();
+    const emitted = wrapper.emitted("update:modelValue");
+    expect(emitted[emitted.length - 1][0]).toBe("");
+  });
+  it("should show clear button when clearable=true and has text", () => {
+    const wrapper = mount(AiSender, {
+      props: { modelValue: "text", clearable: true }
+    });
+    expect(wrapper.find(".yh-ai-sender__clear-btn").exists()).toBe(true);
+  });
+  it("should NOT show clear button when clearable=true but empty", () => {
+    const wrapper = mount(AiSender, {
+      props: { modelValue: "", clearable: true }
+    });
+    expect(wrapper.find(".yh-ai-sender__clear-btn").exists()).toBe(false);
+  });
+  it("should emit clear when clear button clicked", async () => {
+    const wrapper = mount(AiSender, {
+      props: { modelValue: "text", clearable: true }
+    });
+    await wrapper.find(".yh-ai-sender__clear-btn").trigger("click");
+    expect(wrapper.emitted("clear")).toBeTruthy();
+  });
+  it("should show word limit when showWordLimit=true and maxLength set", () => {
+    const wrapper = mount(AiSender, {
+      props: { modelValue: "hi", showWordLimit: true, maxLength: 100 }
+    });
+    expect(wrapper.find(".yh-ai-sender__word-limit").exists()).toBe(true);
+    expect(wrapper.find(".yh-ai-sender__word-limit").text()).toContain("100");
+  });
+  it("should apply is-focused on textarea focus", async () => {
+    const wrapper = mount(AiSender);
+    await wrapper.find("textarea").trigger("focus");
+    expect(wrapper.classes()).toContain("is-focused");
+  });
+  it("should remove is-focused on textarea blur", async () => {
+    const wrapper = mount(AiSender);
+    await wrapper.find("textarea").trigger("focus");
+    await wrapper.find("textarea").trigger("blur");
+    expect(wrapper.classes()).not.toContain("is-focused");
+  });
+  it("should render prefix slot", () => {
+    const wrapper = mount(AiSender, {
+      slots: { prefix: '<div class="custom-prefix">P</div>' }
+    });
+    expect(wrapper.find(".custom-prefix").exists()).toBe(true);
+  });
+  it("should render actions slot", () => {
+    const wrapper = mount(AiSender, {
+      slots: { actions: '<button class="custom-action">Extra</button>' }
+    });
+    expect(wrapper.find(".custom-action").exists()).toBe(true);
+  });
+  it("should render submit slot overriding default send button", () => {
+    const wrapper = mount(AiSender, {
+      slots: { submit: '<button class="custom-submit">Go</button>' }
+    });
+    expect(wrapper.find(".custom-submit").exists()).toBe(true);
+  });
+  it("should update when modelValue prop changes", async () => {
+    const wrapper = mount(AiSender, { props: { modelValue: "old" } });
+    await wrapper.setProps({ modelValue: "new text" });
+    await nextTick();
+    expect(wrapper.find("textarea").element.value).toBe("new text");
+  });
+  describe("Slash Commands", () => {
+    const commands = [
+      { key: "help", label: "Help" },
+      { key: "settings", label: "Settings", prompt: "Show Settings " }
+    ];
+    it("should show slash commands panel when triggering /", async () => {
+      const wrapper = mount(AiSender, { props: { commands } });
+      const textarea = wrapper.find("textarea");
+      await textarea.setValue("/h");
+      textarea.element.selectionStart = 2;
+      await textarea.trigger("input");
+      expect(wrapper.find(".yh-ai-sender__command-panel").exists()).toBe(true);
+      expect(wrapper.findAll(".yh-ai-sender__command-item").length).toBe(1);
+    });
+    it("should navigate and select command with keyboard", async () => {
+      const wrapper = mount(AiSender, { props: { commands } });
+      const textarea = wrapper.find("textarea");
+      await textarea.setValue("/");
+      textarea.element.selectionStart = 1;
+      await textarea.trigger("input");
+      expect(wrapper.find(".yh-ai-sender__command-panel").exists()).toBe(true);
+      await textarea.trigger("keydown", { key: "ArrowDown" });
+      await textarea.trigger("keydown", { key: "ArrowUp" });
+      await textarea.trigger("keydown", { key: "Enter" });
+      expect(wrapper.emitted("command")[0][0]).toEqual(commands[0]);
+      expect(textarea.element.value).toBe("/help ");
+    });
+    it("should select command via mouse click", async () => {
+      const wrapper = mount(AiSender, { props: { commands } });
+      const textarea = wrapper.find("textarea");
+      await textarea.setValue("/");
+      textarea.element.selectionStart = 1;
+      await textarea.trigger("input");
+      await wrapper.find(".yh-ai-sender__command-item").trigger("click");
+      expect(wrapper.emitted("command")).toBeTruthy();
+    });
+    it("should hide commands on Escape", async () => {
+      const wrapper = mount(AiSender, { props: { commands } });
+      const textarea = wrapper.find("textarea");
+      await textarea.setValue("/");
+      textarea.element.selectionStart = 1;
+      await textarea.trigger("input");
+      await textarea.trigger("keydown", { key: "Escape" });
+      expect(wrapper.find(".yh-ai-sender__command-panel").exists()).toBe(false);
+    });
+    it("should hide commands on blur after delay", async () => {
+      vi.useFakeTimers();
+      const wrapper = mount(AiSender, { props: { commands } });
+      const textarea = wrapper.find("textarea");
+      await textarea.setValue("/");
+      textarea.element.selectionStart = 1;
+      await textarea.trigger("input");
+      await textarea.trigger("blur");
+      vi.advanceTimersByTime(250);
+      await nextTick();
+      expect(wrapper.find(".yh-ai-sender__command-panel").exists()).toBe(false);
+      vi.useRealTimers();
+    });
+  });
+  describe("Attachments", () => {
+    it("should render attachments and emit remove event", async () => {
+      const attachments = [
+        { id: "1", name: "img.png", type: "image/png", url: "img.png" },
+        {
+          id: "2",
+          name: "doc.pdf",
+          type: "application/pdf",
+          url: "doc.pdf",
+          status: "uploading",
+          progress: 50
+        }
+      ];
+      const wrapper = mount(AiSender, { props: { attachments } });
+      const items = wrapper.findAll(".yh-ai-sender__attachment-item");
+      expect(items.length).toBe(2);
+      expect(wrapper.find(".yh-ai-sender__progress-bar").exists()).toBe(true);
+      await wrapper.find(".yh-ai-sender__attachment-remove").trigger("click");
+      expect(wrapper.emitted("remove-attachment")[0][0]).toEqual(attachments[0]);
+    });
+  });
+  describe("aiSenderEmits", () => {
+    it("should validate send event", async () => {
+      const { aiSenderEmits } = await import("../src/ai-sender.mjs");
+      expect(aiSenderEmits.send("hello")).toBe(true);
+      expect(aiSenderEmits.send("")).toBe(true);
+    });
+    it("should pass-through other event validators", async () => {
+      const { aiSenderEmits } = await import("../src/ai-sender.mjs");
+      expect(aiSenderEmits["update:modelValue"]("text")).toBe(true);
+      expect(aiSenderEmits.change("text")).toBe(true);
+      expect(aiSenderEmits.command({ key: "a", label: "b" })).toBe(true);
+      expect(aiSenderEmits.blur(new FocusEvent("blur"))).toBe(true);
+      expect(aiSenderEmits.focus(new FocusEvent("focus"))).toBe(true);
+      expect(aiSenderEmits.clear()).toBe(true);
+      expect(
+        aiSenderEmits["remove-attachment"]({ id: "1", name: "f", type: "doc", url: "doc" })
+      ).toBe(true);
+    });
+  });
+});

package/dist/ai-sender/index.cjs

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  YhAiSender: true
+};
+module.exports = exports.YhAiSender = void 0;
+var _utils = require("@yh-ui/utils");
+var _aiSender = _interopRequireDefault(require("./src/ai-sender.vue"));
+var _aiSender2 = require("./src/ai-sender.cjs");
+Object.keys(_aiSender2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _aiSender2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _aiSender2[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const YhAiSender = exports.YhAiSender = (0, _utils.withInstall)(_aiSender.default);
+module.exports = YhAiSender;

package/dist/ai-sender/index.d.ts

@@ -0,0 +1,3 @@
+export declare const YhAiSender: any;
+export default YhAiSender;
+export * from './src/ai-sender';

package/dist/ai-sender/index.mjs

@@ -0,0 +1,5 @@
+import { withInstall } from "@yh-ui/utils";
+import AiSender from "./src/ai-sender.vue";
+export const YhAiSender = withInstall(AiSender);
+export default YhAiSender;
+export * from "./src/ai-sender.mjs";