@yh-ui/components 0.1.21 → 0.1.23

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

@@ -1,624 +0,0 @@
-"use strict";
-
-var _vitest = require("vitest");
-var _testUtils = require("@vue/test-utils");
-var _aiBubble = _interopRequireDefault(require("../src/ai-bubble.vue"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-(0, _vitest.describe)("YhAiBubble", () => {
-  (0, _vitest.beforeEach)(() => {
-    _vitest.vi.clearAllMocks();
-  });
-  (0, _vitest.afterEach)(() => {
-    _vitest.vi.restoreAllMocks();
-  });
-  (0, _vitest.it)("should render with base class", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hello",
-        role: "assistant"
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should apply role class for user", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hi",
-        role: "user"
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-ai-bubble--user");
-  });
-  (0, _vitest.it)("should apply role class for assistant", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hi",
-        role: "assistant"
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-ai-bubble--assistant");
-  });
-  (0, _vitest.it)("should not render avatar for system role", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "sys msg",
-        role: "system"
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble__avatar").exists()).toBe(false);
-  });
-  (0, _vitest.it)("should default placement to end for user role", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hi",
-        role: "user"
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-ai-bubble--placement-end");
-  });
-  (0, _vitest.it)("should default placement to start for assistant role", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hi",
-        role: "assistant"
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-ai-bubble--placement-start");
-  });
-  (0, _vitest.it)("should override placement via prop", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hi",
-        role: "user",
-        placement: "start"
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-ai-bubble--placement-start");
-  });
-  (0, _vitest.it)("should apply shape class", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hi",
-        shape: "round"
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-ai-bubble--shape-round");
-  });
-  (0, _vitest.it)("should apply variant class", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hi",
-        variant: "borderless"
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("yh-ai-bubble--variant-borderless");
-  });
-  (0, _vitest.it)("should show loading indicator when loading=true and content is empty", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        loading: true,
-        content: ""
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("is-loading");
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble__typing-indicator").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should not show typing indicator when content exists even if loading=true", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        loading: true,
-        content: "some text"
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble__typing-indicator").exists()).toBe(false);
-  });
-  (0, _vitest.it)("should render plain text when markdown=false", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "plain text",
-        markdown: false
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble__text").text()).toBe("plain text");
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble__markdown").exists()).toBe(false);
-  });
-  (0, _vitest.it)("should render markdown container when markdown=true", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hello",
-        markdown: true
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble__markdown").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should render time when provided", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hi",
-        time: "10:00"
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble__time").text()).toBe("10:00");
-  });
-  (0, _vitest.it)("should not render header without time and header slot", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hi"
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble__header").exists()).toBe(false);
-  });
-  (0, _vitest.it)("should apply is-typing class when typing=true", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hi",
-        typing: true
-      }
-    });
-    (0, _vitest.expect)(wrapper.classes()).toContain("is-typing");
-  });
-  (0, _vitest.it)("should render content via default slot", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      slots: {
-        default: '<span class="custom-content">Custom</span>'
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".custom-content").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should render footer slot when provided", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hi"
-      },
-      slots: {
-        footer: '<div class="custom-footer">Actions</div>'
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble__footer").exists()).toBe(true);
-    (0, _vitest.expect)(wrapper.find(".custom-footer").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should render header slot when provided", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hi"
-      },
-      slots: {
-        header: '<span class="custom-header">Header</span>'
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble__header").exists()).toBe(true);
-    (0, _vitest.expect)(wrapper.find(".custom-header").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should render avatar slot when provided", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hi",
-        role: "user"
-      },
-      slots: {
-        avatar: '<img class="custom-avatar" src="test.png" />'
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".custom-avatar").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should render multimodal content - image", () => {
-    const multimodal = [{
-      type: "image",
-      url: "img.png",
-      title: "test image"
-    }];
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "",
-        multimodal
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble__image-grid").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should render multimodal content - audio", async () => {
-    const multimodal = [{
-      type: "audio",
-      url: "audio.mp3",
-      title: "test audio"
-    }];
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "",
-        multimodal
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble__audio-player").exists()).toBe(true);
-    const playMock = _vitest.vi.fn().mockResolvedValue(void 0);
-    const pauseMock = _vitest.vi.fn();
-    class MockAudio {
-      play = playMock;
-      pause = pauseMock;
-      onended = null;
-    }
-    _vitest.vi.stubGlobal("Audio", MockAudio);
-    await wrapper.find(".yh-ai-bubble__audio-player button").trigger("click");
-    (0, _vitest.expect)(playMock).toHaveBeenCalled();
-    await wrapper.find(".yh-ai-bubble__audio-player button").trigger("click");
-    (0, _vitest.expect)(pauseMock).toHaveBeenCalled();
-  });
-  (0, _vitest.it)("should render multimodal content - file", () => {
-    const multimodal = [{
-      type: "file",
-      url: "test.pdf",
-      title: "test.pdf",
-      size: "10KB"
-    }];
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "",
-        multimodal
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble__file-card").exists()).toBe(true);
-    (0, _vitest.expect)(wrapper.html()).toContain("10KB");
-  });
-  (0, _vitest.it)("should render JSON structured data", () => {
-    const structuredData = {
-      type: "json",
-      data: {
-        name: "test"
-      }
-    };
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "",
-        structuredData
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble__json-viewer").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should render thought-chain structured data", () => {
-    const structuredData = {
-      type: "thought-chain",
-      data: []
-    };
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "",
-        structuredData
-      }
-    });
-    (0, _vitest.expect)(wrapper.findComponent({
-      name: "YhAiThoughtChain"
-    }).exists()).toBe(true);
-  });
-  (0, _vitest.it)("should handle citation click", async () => {
-    const onCitationClick = _vitest.vi.fn();
-    const cita = {
-      id: 1,
-      title: "link",
-      url: "http://x.com"
-    };
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "test [1]",
-        citations: [cita],
-        onCitationClick
-      }
-    });
-    await wrapper.find(".yh-ai-bubble__citation-item").trigger("click");
-    (0, _vitest.expect)(onCitationClick).toHaveBeenCalledWith(cita);
-    const openSpy = _vitest.vi.spyOn(window, "open").mockImplementation(() => null);
-    const wrapper2 = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "test",
-        citations: [cita]
-      }
-    });
-    await wrapper2.find(".yh-ai-bubble__citation-item").trigger("click");
-    (0, _vitest.expect)(openSpy).toHaveBeenCalledWith("http://x.com", "_blank");
-  });
-  (0, _vitest.it)("should show citation tooltip on hover", async () => {
-    _vitest.vi.useFakeTimers();
-    const cita = {
-      id: "1",
-      title: "ref 1",
-      content: "detailed info"
-    };
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "test",
-        citations: [cita]
-      }
-    });
-    const mockEvent = {
-      target: {
-        classList: {
-          contains: c => c === "yh-ai-citation"
-        },
-        getAttribute: a => a === "data-id" ? "1" : null,
-        getBoundingClientRect: () => ({
-          top: 100,
-          left: 100,
-          width: 20
-        })
-      }
-    };
-    wrapper.vm.handleCitationHover(mockEvent);
-    (0, _vitest.expect)(wrapper.vm.hoveredCitation).toEqual(cita);
-    wrapper.vm.handleCitationLeave(mockEvent);
-    _vitest.vi.advanceTimersByTime(300);
-    (0, _vitest.expect)(wrapper.vm.hoveredCitation).toBeNull();
-    _vitest.vi.useRealTimers();
-  });
-  (0, _vitest.it)("should handle code block actions - collapse", async () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default);
-    const mockEvent = {
-      target: {
-        classList: {
-          contains: c => c === "collapse-btn" || c === "code-action-btn"
-        },
-        getAttribute: a => a === "data-id" ? "cb-1" : null
-      }
-    };
-    await wrapper.vm.handleCodeBlockAction(mockEvent);
-    (0, _vitest.expect)(wrapper.vm.expandedCodeBlocks.has("cb-1")).toBe(true);
-  });
-  (0, _vitest.it)("should trigger download on button click", async () => {
-    const openSpy = _vitest.vi.spyOn(window, "open").mockImplementation(() => null);
-    const multimodal = [{
-      type: "file",
-      url: "test.zip",
-      title: "test"
-    }];
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "",
-        multimodal
-      }
-    });
-    await wrapper.find(".yh-ai-bubble__file-card button").trigger("click");
-    (0, _vitest.expect)(openSpy).toHaveBeenCalledWith("test.zip", "_blank");
-  });
-  (0, _vitest.it)("getFileIcon should return correct icons", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default);
-    const getFileIcon = wrapper.vm.getFileIcon;
-    (0, _vitest.expect)(getFileIcon("test.pdf")).toBe("file-pdf");
-    (0, _vitest.expect)(getFileIcon("test.xlsx")).toBe("file-excel");
-    (0, _vitest.expect)(getFileIcon("test.docx")).toBe("file-word");
-    (0, _vitest.expect)(getFileIcon("test.mp4")).toBe("file-video");
-    (0, _vitest.expect)(getFileIcon("test.mp3")).toBe("file-audio");
-    (0, _vitest.expect)(getFileIcon("test.txt")).toBe("file-txt");
-    (0, _vitest.expect)(getFileIcon("unknown")).toBe("document");
-  });
-  (0, _vitest.it)("should handle code block actions - copy", async () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "```js\nconsole.log(1)\n```"
-      }
-    });
-    const copySpy = _vitest.vi.spyOn(navigator.clipboard, "writeText").mockResolvedValue(void 0);
-    const mockEvent = {
-      target: {
-        classList: {
-          contains: c => c === "code-action-btn" || c === "copy-btn"
-        },
-        getAttribute: a => {
-          if (a === "data-code") return encodeURIComponent("console.log(1)");
-          if (a === "data-id") return "cb-1";
-          return null;
-        }
-      }
-    };
-    await wrapper.vm.handleCodeBlockAction(mockEvent);
-    (0, _vitest.expect)(copySpy).toHaveBeenCalledWith("console.log(1)");
-  });
-  (0, _vitest.it)("should handle code block actions - run", async () => {
-    const onRunCode = _vitest.vi.fn().mockResolvedValue({
-      output: "done"
-    });
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "```js\n1+1\n```",
-        onRunCode
-      }
-    });
-    const mockEvent = {
-      target: {
-        classList: {
-          contains: c => c === "code-action-btn" || c === "run-btn"
-        },
-        getAttribute: a => {
-          if (a === "data-code") return encodeURIComponent("1+1");
-          if (a === "data-lang") return "js";
-          if (a === "data-id") return "cb-1";
-          return null;
-        }
-      }
-    };
-    await wrapper.vm.handleCodeBlockAction(mockEvent);
-    (0, _vitest.expect)(onRunCode).toHaveBeenCalled();
-  });
-  (0, _vitest.it)("should toggle code block expansion", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default);
-    wrapper.vm.toggleCodeBlock("cb-1");
-    (0, _vitest.expect)(wrapper.vm.expandedCodeBlocks.has("cb-1")).toBe(true);
-    wrapper.vm.toggleCodeBlock("cb-1");
-    (0, _vitest.expect)(wrapper.vm.expandedCodeBlocks.has("cb-1")).toBe(false);
-  });
-  (0, _vitest.it)("should handle explain code block", async () => {
-    const onExplainCode = _vitest.vi.fn().mockResolvedValue("explanation");
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        onExplainCode
-      }
-    });
-    const mockEvent = {
-      target: {
-        classList: {
-          contains: c => c === "explain-btn" || c === "code-action-btn"
-        },
-        getAttribute: a => {
-          if (a === "data-code") return "code";
-          if (a === "data-lang") return "js";
-          if (a === "data-id") return "cb-1";
-          return null;
-        }
-      }
-    };
-    await wrapper.vm.handleCodeBlockAction(mockEvent);
-    (0, _vitest.expect)(onExplainCode).toHaveBeenCalled();
-    (0, _vitest.expect)(wrapper.vm.codeOutput["cb-1"]).toEqual(["explanation"]);
-  });
-  (0, _vitest.it)("should handle code block actions - edit", async () => {
-    const mockEditor = {
-      dispose: _vitest.vi.fn(),
-      getValue: _vitest.vi.fn().mockReturnValue("edited code")
-    };
-    const mockMonaco = {
-      editor: {
-        create: _vitest.vi.fn().mockReturnValue(mockEditor)
-      }
-    };
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default);
-    wrapper.vm.monaco = mockMonaco;
-    const mockEvent = {
-      target: {
-        classList: {
-          contains: c => c === "code-action-btn" || c === "edit-btn"
-        },
-        getAttribute: a => {
-          if (a === "data-code") return encodeURIComponent("raw context");
-          if (a === "data-lang") return "javascript";
-          if (a === "data-id") return "cb-1";
-          return null;
-        }
-      }
-    };
-    await wrapper.vm.handleCodeBlockAction(mockEvent);
-    (0, _vitest.expect)(wrapper.vm.editingCodeBlock).toBe("cb-1");
-    await wrapper.vm.saveEditCode("cb-1");
-    (0, _vitest.expect)(wrapper.vm.editingCodeBlock).toBeNull();
-  });
-  (0, _vitest.it)("should handle onRunCode with async iterator", async () => {
-    const mockGenerator = async function* () {
-      yield {
-        output: "chunk 1"
-      };
-      yield {
-        output: "chunk 2"
-      };
-    };
-    const onRunCode = _vitest.vi.fn().mockResolvedValue(mockGenerator());
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        onRunCode
-      }
-    });
-    const mockEvent = {
-      target: {
-        classList: {
-          contains: c => c === "run-btn" || c === "code-action-btn"
-        },
-        getAttribute: a => {
-          if (a === "data-code") return "code";
-          if (a === "data-lang") return "js";
-          if (a === "data-id") return "cb-1";
-          return null;
-        }
-      }
-    };
-    await wrapper.vm.handleCodeBlockAction(mockEvent);
-    (0, _vitest.expect)(onRunCode).toHaveBeenCalled();
-  });
-  (0, _vitest.it)("should support streaming increments", async () => {
-    _vitest.vi.useFakeTimers();
-    const onStreamComplete = _vitest.vi.fn();
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hello world",
-        typing: true,
-        streaming: true,
-        streamSpeed: 2,
-        streamInterval: 10,
-        onStreamComplete
-      }
-    });
-    _vitest.vi.advanceTimersByTime(100);
-    await wrapper.vm.$nextTick();
-    (0, _vitest.expect)(onStreamComplete).toHaveBeenCalled();
-    _vitest.vi.useRealTimers();
-  });
-  (0, _vitest.it)("should render table structured data", () => {
-    const structuredData = {
-      type: "table",
-      data: {
-        headers: ["A", "B"],
-        rows: [["1", "2"]]
-      }
-    };
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "",
-        structuredData
-      }
-    });
-    (0, _vitest.expect)(wrapper.find("table").exists()).toBe(true);
-    (0, _vitest.expect)(wrapper.find("th").text()).toBe("A");
-  });
-  (0, _vitest.it)("should handle markdown=true but no mdi initialized", async () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "hi",
-        markdown: true
-      }
-    });
-    (0, _vitest.expect)(wrapper.find(".yh-ai-bubble__markdown").exists()).toBe(true);
-  });
-  (0, _vitest.it)("should handle multimodal download", async () => {
-    const openSpy = _vitest.vi.spyOn(window, "open").mockImplementation(() => null);
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default);
-    wrapper.vm.handleDownload("test.zip");
-    (0, _vitest.expect)(openSpy).toHaveBeenCalledWith("test.zip", "_blank");
-  });
-  (0, _vitest.it)("should hit onBeforeUnmount", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "test"
-      }
-    });
-    wrapper.unmount();
-  });
-  (0, _vitest.it)("should test escapeHtml utility", () => {
-    const wrapper = (0, _testUtils.mount)(_aiBubble.default);
-    const escapeHtml = wrapper.vm.escapeHtml;
-    (0, _vitest.expect)(escapeHtml(`<div>&"'</div>`)).toBe("&lt;div&gt;&amp;&quot;&#39;&lt;/div&gt;");
-  });
-  (0, _vitest.it)("should support sentence stream mode", async () => {
-    _vitest.vi.useFakeTimers();
-    const onStreamComplete = _vitest.vi.fn();
-    (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "Sentence one. Sentence two!",
-        typing: true,
-        streaming: true,
-        streamMode: "sentence",
-        onStreamComplete
-      }
-    });
-    _vitest.vi.advanceTimersByTime(1e3);
-    (0, _vitest.expect)(onStreamComplete).toHaveBeenCalled();
-    _vitest.vi.useRealTimers();
-  });
-  (0, _vitest.it)("should support paragraph stream mode", async () => {
-    _vitest.vi.useFakeTimers();
-    const onStreamComplete = _vitest.vi.fn();
-    (0, _testUtils.mount)(_aiBubble.default, {
-      props: {
-        content: "Para one\n\nPara two",
-        typing: true,
-        streaming: true,
-        streamMode: "paragraph",
-        onStreamComplete
-      }
-    });
-    _vitest.vi.advanceTimersByTime(1e3);
-    (0, _vitest.expect)(onStreamComplete).toHaveBeenCalled();
-    _vitest.vi.useRealTimers();
-  });
-});