@n8n/chat 0.9.0 → 0.9.1

package/__stories__/App.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/vue3';
+declare const meta: {
+    title: string;
+    render: (args: ChatOptions) => {
+        setup(): {};
+        template: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Fullscreen: Story;
+export declare const Windowed: Story;

package/__stories__/App.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Windowed = exports.Fullscreen = void 0;
+var _vue = require("vue");
+var _index = require("@n8n/chat/index");
+const webhookUrl = "http://localhost:5678/webhook/f406671e-c954-4691-b39a-66c90aa2f103/chat";
+const meta = {
+  title: "Chat",
+  render: args => ({
+    setup() {
+      (0, _vue.onMounted)(() => {
+        (0, _index.createChat)(args);
+      });
+      return {};
+    },
+    template: '<div id="n8n-chat" />'
+  }),
+  parameters: {
+    layout: "fullscreen"
+  },
+  tags: ["autodocs"]
+};
+module.exports = meta;
+const Fullscreen = exports.Fullscreen = {
+  args: {
+    webhookUrl,
+    mode: "fullscreen"
+  }
+};
+const Windowed = exports.Windowed = {
+  args: {
+    webhookUrl,
+    mode: "window"
+  }
+};

package/__stories__/App.stories.mjs

@@ -0,0 +1,32 @@
+import { onMounted } from "vue";
+import { createChat } from "@n8n/chat/index";
+const webhookUrl = "http://localhost:5678/webhook/f406671e-c954-4691-b39a-66c90aa2f103/chat";
+const meta = {
+  title: "Chat",
+  render: (args) => ({
+    setup() {
+      onMounted(() => {
+        createChat(args);
+      });
+      return {};
+    },
+    template: '<div id="n8n-chat" />'
+  }),
+  parameters: {
+    layout: "fullscreen"
+  },
+  tags: ["autodocs"]
+};
+export default meta;
+export const Fullscreen = {
+  args: {
+    webhookUrl,
+    mode: "fullscreen"
+  }
+};
+export const Windowed = {
+  args: {
+    webhookUrl,
+    mode: "window"
+  }
+};

package/__tests__/index.spec.d.ts

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

package/__tests__/index.spec.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _vue = require("@testing-library/vue");
+var _utils = require("@n8n/chat/__tests__/utils");
+var _index = require("@n8n/chat/index");
+describe("createChat()", () => {
+  let app;
+  afterEach(() => {
+    vi.clearAllMocks();
+    app.unmount();
+  });
+  describe("mode", () => {
+    it("should create fullscreen chat app with default options", () => {
+      const fetchSpy = vi.spyOn(window, "fetch");
+      fetchSpy.mockImplementationOnce((0, _utils.createFetchResponse)((0, _utils.createGetLatestMessagesResponse)()));
+      app = (0, _index.createChat)({
+        mode: "fullscreen"
+      });
+      expect((0, _utils.getMountingTarget)()).toBeVisible();
+      expect((0, _utils.getChatWrapper)()).toBeVisible();
+      expect((0, _utils.getChatWindowWrapper)()).not.toBeInTheDocument();
+    });
+    it("should create window chat app with default options", () => {
+      const fetchSpy = vi.spyOn(window, "fetch");
+      fetchSpy.mockImplementationOnce((0, _utils.createFetchResponse)((0, _utils.createGetLatestMessagesResponse)()));
+      app = (0, _index.createChat)({
+        mode: "window"
+      });
+      expect((0, _utils.getMountingTarget)()).toBeDefined();
+      expect((0, _utils.getChatWindowWrapper)()).toBeVisible();
+      expect((0, _utils.getChatWrapper)()).not.toBeVisible();
+    });
+    it("should open window chat app using toggle button", async () => {
+      const fetchSpy = vi.spyOn(window, "fetch");
+      fetchSpy.mockImplementationOnce((0, _utils.createFetchResponse)((0, _utils.createGetLatestMessagesResponse)()));
+      app = (0, _index.createChat)();
+      expect((0, _utils.getMountingTarget)()).toBeVisible();
+      expect((0, _utils.getChatWindowWrapper)()).toBeVisible();
+      const trigger = (0, _utils.getChatWindowToggle)();
+      await _vue.fireEvent.click(trigger);
+      expect((0, _utils.getChatWrapper)()).toBeVisible();
+    });
+  });
+  describe("loadPreviousMessages", () => {
+    it("should load previous messages on mount", async () => {
+      const fetchSpy = vi.spyOn(global, "fetch");
+      fetchSpy.mockImplementation((0, _utils.createFetchResponse)((0, _utils.createGetLatestMessagesResponse)()));
+      app = (0, _index.createChat)({
+        mode: "fullscreen",
+        showWelcomeScreen: true
+      });
+      const getStartedButton = (0, _utils.getGetStartedButton)();
+      await _vue.fireEvent.click(getStartedButton);
+      expect(fetchSpy.mock.calls[0][1]).toEqual(expect.objectContaining({
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: expect.stringContaining('"action":"loadPreviousSession"'),
+        mode: "cors",
+        cache: "no-cache"
+      }));
+    });
+  });
+  describe("initialMessages", () => {
+    it.each(["fullscreen", "window"])("should show initial default messages in %s mode", async mode => {
+      const fetchSpy = vi.spyOn(window, "fetch");
+      fetchSpy.mockImplementationOnce((0, _utils.createFetchResponse)((0, _utils.createGetLatestMessagesResponse)()));
+      const initialMessages = ["Hello tester!", "How are you?"];
+      app = (0, _index.createChat)({
+        mode,
+        initialMessages
+      });
+      if (mode === "window") {
+        const trigger = (0, _utils.getChatWindowToggle)();
+        await _vue.fireEvent.click(trigger);
+      }
+      expect((0, _utils.getChatMessages)().length).toBe(initialMessages.length);
+      expect((0, _utils.getChatMessageByText)(initialMessages[0])).toBeInTheDocument();
+      expect((0, _utils.getChatMessageByText)(initialMessages[1])).toBeInTheDocument();
+    });
+  });
+  describe("sendMessage", () => {
+    it.each(["window", "fullscreen"])("should send a message and render a text message in %s mode", async mode => {
+      const input = "Hello User World!";
+      const output = "Hello Bot World!";
+      const fetchSpy = vi.spyOn(window, "fetch");
+      fetchSpy.mockImplementationOnce((0, _utils.createFetchResponse)(_utils.createGetLatestMessagesResponse)).mockImplementationOnce((0, _utils.createFetchResponse)((0, _utils.createSendMessageResponse)(output)));
+      app = (0, _index.createChat)({
+        mode
+      });
+      if (mode === "window") {
+        const trigger = (0, _utils.getChatWindowToggle)();
+        await _vue.fireEvent.click(trigger);
+      }
+      expect((0, _utils.getChatMessageTyping)()).not.toBeInTheDocument();
+      expect((0, _utils.getChatMessages)().length).toBe(2);
+      await (0, _vue.waitFor)(() => expect((0, _utils.getChatInputTextarea)()).toBeInTheDocument());
+      const textarea = (0, _utils.getChatInputTextarea)();
+      const sendButton = (0, _utils.getChatInputSendButton)();
+      await _vue.fireEvent.update(textarea, input);
+      expect(sendButton).not.toBeDisabled();
+      await _vue.fireEvent.click(sendButton);
+      expect(fetchSpy.mock.calls[1][1]).toEqual(expect.objectContaining({
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: expect.stringMatching(/"action":"sendMessage"/),
+        mode: "cors",
+        cache: "no-cache"
+      }));
+      expect(fetchSpy.mock.calls[1][1]?.body).toContain(`"${input}"`);
+      expect((0, _utils.getChatMessages)().length).toBe(3);
+      expect((0, _utils.getChatMessageByText)(input)).toBeInTheDocument();
+      expect((0, _utils.getChatMessageTyping)()).toBeVisible();
+      await (0, _vue.waitFor)(() => expect((0, _utils.getChatMessageTyping)()).not.toBeInTheDocument());
+      expect((0, _utils.getChatMessageByText)(output)).toBeInTheDocument();
+    });
+    it.each(["fullscreen", "window"])("should send a message and render a code markdown message in %s mode", async mode => {
+      const input = "Teach me javascript!";
+      const output = '# Code\n```js\nconsole.log("Hello World!");\n```';
+      const fetchSpy = vi.spyOn(window, "fetch");
+      fetchSpy.mockImplementationOnce((0, _utils.createFetchResponse)(_utils.createGetLatestMessagesResponse)).mockImplementationOnce((0, _utils.createFetchResponse)((0, _utils.createSendMessageResponse)(output)));
+      app = (0, _index.createChat)({
+        mode
+      });
+      if (mode === "window") {
+        const trigger = (0, _utils.getChatWindowToggle)();
+        await _vue.fireEvent.click(trigger);
+      }
+      await (0, _vue.waitFor)(() => expect((0, _utils.getChatInputTextarea)()).toBeInTheDocument());
+      const textarea = (0, _utils.getChatInputTextarea)();
+      const sendButton = (0, _utils.getChatInputSendButton)();
+      await _vue.fireEvent.update(textarea, input);
+      await _vue.fireEvent.click(sendButton);
+      expect((0, _utils.getChatMessageByText)(input)).toBeInTheDocument();
+      expect((0, _utils.getChatMessages)().length).toBe(3);
+      await (0, _vue.waitFor)(() => expect((0, _utils.getChatMessageTyping)()).not.toBeInTheDocument());
+      const lastMessage = (0, _utils.getChatMessage)(-1);
+      expect(lastMessage).toBeInTheDocument();
+      expect(lastMessage.querySelector("h1")).toHaveTextContent("Code");
+      expect(lastMessage.querySelector("code")).toHaveTextContent('console.log("Hello World!");');
+    });
+  });
+});

package/__tests__/index.spec.mjs

@@ -0,0 +1,172 @@
+import { fireEvent, waitFor } from "@testing-library/vue";
+import {
+  createFetchResponse,
+  createGetLatestMessagesResponse,
+  createSendMessageResponse,
+  getChatInputSendButton,
+  getChatInputTextarea,
+  getChatMessage,
+  getChatMessageByText,
+  getChatMessages,
+  getChatMessageTyping,
+  getChatWindowToggle,
+  getChatWindowWrapper,
+  getChatWrapper,
+  getGetStartedButton,
+  getMountingTarget
+} from "@n8n/chat/__tests__/utils";
+import { createChat } from "@n8n/chat/index";
+describe("createChat()", () => {
+  let app;
+  afterEach(() => {
+    vi.clearAllMocks();
+    app.unmount();
+  });
+  describe("mode", () => {
+    it("should create fullscreen chat app with default options", () => {
+      const fetchSpy = vi.spyOn(window, "fetch");
+      fetchSpy.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse()));
+      app = createChat({
+        mode: "fullscreen"
+      });
+      expect(getMountingTarget()).toBeVisible();
+      expect(getChatWrapper()).toBeVisible();
+      expect(getChatWindowWrapper()).not.toBeInTheDocument();
+    });
+    it("should create window chat app with default options", () => {
+      const fetchSpy = vi.spyOn(window, "fetch");
+      fetchSpy.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse()));
+      app = createChat({
+        mode: "window"
+      });
+      expect(getMountingTarget()).toBeDefined();
+      expect(getChatWindowWrapper()).toBeVisible();
+      expect(getChatWrapper()).not.toBeVisible();
+    });
+    it("should open window chat app using toggle button", async () => {
+      const fetchSpy = vi.spyOn(window, "fetch");
+      fetchSpy.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse()));
+      app = createChat();
+      expect(getMountingTarget()).toBeVisible();
+      expect(getChatWindowWrapper()).toBeVisible();
+      const trigger = getChatWindowToggle();
+      await fireEvent.click(trigger);
+      expect(getChatWrapper()).toBeVisible();
+    });
+  });
+  describe("loadPreviousMessages", () => {
+    it("should load previous messages on mount", async () => {
+      const fetchSpy = vi.spyOn(global, "fetch");
+      fetchSpy.mockImplementation(createFetchResponse(createGetLatestMessagesResponse()));
+      app = createChat({
+        mode: "fullscreen",
+        showWelcomeScreen: true
+      });
+      const getStartedButton = getGetStartedButton();
+      await fireEvent.click(getStartedButton);
+      expect(fetchSpy.mock.calls[0][1]).toEqual(
+        expect.objectContaining({
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: expect.stringContaining('"action":"loadPreviousSession"'),
+          mode: "cors",
+          cache: "no-cache"
+        })
+      );
+    });
+  });
+  describe("initialMessages", () => {
+    it.each(["fullscreen", "window"])(
+      "should show initial default messages in %s mode",
+      async (mode) => {
+        const fetchSpy = vi.spyOn(window, "fetch");
+        fetchSpy.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse()));
+        const initialMessages = ["Hello tester!", "How are you?"];
+        app = createChat({
+          mode,
+          initialMessages
+        });
+        if (mode === "window") {
+          const trigger = getChatWindowToggle();
+          await fireEvent.click(trigger);
+        }
+        expect(getChatMessages().length).toBe(initialMessages.length);
+        expect(getChatMessageByText(initialMessages[0])).toBeInTheDocument();
+        expect(getChatMessageByText(initialMessages[1])).toBeInTheDocument();
+      }
+    );
+  });
+  describe("sendMessage", () => {
+    it.each(["window", "fullscreen"])(
+      "should send a message and render a text message in %s mode",
+      async (mode) => {
+        const input = "Hello User World!";
+        const output = "Hello Bot World!";
+        const fetchSpy = vi.spyOn(window, "fetch");
+        fetchSpy.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse)).mockImplementationOnce(createFetchResponse(createSendMessageResponse(output)));
+        app = createChat({
+          mode
+        });
+        if (mode === "window") {
+          const trigger = getChatWindowToggle();
+          await fireEvent.click(trigger);
+        }
+        expect(getChatMessageTyping()).not.toBeInTheDocument();
+        expect(getChatMessages().length).toBe(2);
+        await waitFor(() => expect(getChatInputTextarea()).toBeInTheDocument());
+        const textarea = getChatInputTextarea();
+        const sendButton = getChatInputSendButton();
+        await fireEvent.update(textarea, input);
+        expect(sendButton).not.toBeDisabled();
+        await fireEvent.click(sendButton);
+        expect(fetchSpy.mock.calls[1][1]).toEqual(
+          expect.objectContaining({
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: expect.stringMatching(/"action":"sendMessage"/),
+            mode: "cors",
+            cache: "no-cache"
+          })
+        );
+        expect(fetchSpy.mock.calls[1][1]?.body).toContain(`"${input}"`);
+        expect(getChatMessages().length).toBe(3);
+        expect(getChatMessageByText(input)).toBeInTheDocument();
+        expect(getChatMessageTyping()).toBeVisible();
+        await waitFor(() => expect(getChatMessageTyping()).not.toBeInTheDocument());
+        expect(getChatMessageByText(output)).toBeInTheDocument();
+      }
+    );
+    it.each(["fullscreen", "window"])(
+      "should send a message and render a code markdown message in %s mode",
+      async (mode) => {
+        const input = "Teach me javascript!";
+        const output = '# Code\n```js\nconsole.log("Hello World!");\n```';
+        const fetchSpy = vi.spyOn(window, "fetch");
+        fetchSpy.mockImplementationOnce(createFetchResponse(createGetLatestMessagesResponse)).mockImplementationOnce(createFetchResponse(createSendMessageResponse(output)));
+        app = createChat({
+          mode
+        });
+        if (mode === "window") {
+          const trigger = getChatWindowToggle();
+          await fireEvent.click(trigger);
+        }
+        await waitFor(() => expect(getChatInputTextarea()).toBeInTheDocument());
+        const textarea = getChatInputTextarea();
+        const sendButton = getChatInputSendButton();
+        await fireEvent.update(textarea, input);
+        await fireEvent.click(sendButton);
+        expect(getChatMessageByText(input)).toBeInTheDocument();
+        expect(getChatMessages().length).toBe(3);
+        await waitFor(() => expect(getChatMessageTyping()).not.toBeInTheDocument());
+        const lastMessage = getChatMessage(-1);
+        expect(lastMessage).toBeInTheDocument();
+        expect(lastMessage.querySelector("h1")).toHaveTextContent("Code");
+        expect(lastMessage.querySelector("code")).toHaveTextContent('console.log("Hello World!");');
+      }
+    );
+  });
+});

package/__tests__/setup.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@testing-library/jest-dom");

package/__tests__/setup.mjs

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/__tests__/utils/create.d.ts

@@ -0,0 +1,5 @@
+import { createChat } from '@n8n/chat/index';
+export declare function createTestChat(options?: Parameters<typeof createChat>[0]): {
+    unmount: () => void;
+    container: Element;
+};

package/__tests__/utils/create.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createTestChat = createTestChat;
+var _index = require("@n8n/chat/index");
+function createTestChat(options = {}) {
+  const app = (0, _index.createChat)(options);
+  const container = app._container;
+  const unmount = () => app.unmount();
+  return {
+    unmount,
+    container
+  };
+}

package/__tests__/utils/create.mjs

@@ -0,0 +1,10 @@
+import { createChat } from "@n8n/chat/index";
+export function createTestChat(options = {}) {
+  const app = createChat(options);
+  const container = app._container;
+  const unmount = () => app.unmount();
+  return {
+    unmount,
+    container
+  };
+}

package/__tests__/utils/fetch.d.ts

@@ -0,0 +1,3 @@
+export declare function createFetchResponse<T>(data: T): () => Promise<Response>;
+export declare const createGetLatestMessagesResponse: (data?: LoadPreviousSessionResponse) => LoadPreviousSessionResponse;
+export declare const createSendMessageResponse: (output: SendMessageResponse) => SendMessageResponse;

package/__tests__/utils/fetch.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createFetchResponse = createFetchResponse;
+exports.createSendMessageResponse = exports.createGetLatestMessagesResponse = void 0;
+function createFetchResponse(data) {
+  return async () => ({
+    json: async () => await new Promise(resolve => resolve(data))
+  });
+}
+const createGetLatestMessagesResponse = (data = []) => ({
+  data
+});
+exports.createGetLatestMessagesResponse = createGetLatestMessagesResponse;
+const createSendMessageResponse = output => ({
+  output
+});
+exports.createSendMessageResponse = createSendMessageResponse;

package/__tests__/utils/fetch.mjs

@@ -0,0 +1,9 @@
+export function createFetchResponse(data) {
+  return async () => ({
+    json: async () => await new Promise((resolve) => resolve(data))
+  });
+}
+export const createGetLatestMessagesResponse = (data = []) => ({ data });
+export const createSendMessageResponse = (output) => ({
+  output
+});

package/__tests__/utils/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _create = require("./create");
+Object.keys(_create).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _create[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _create[key];
+    }
+  });
+});
+var _fetch = require("./fetch");
+Object.keys(_fetch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _fetch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _fetch[key];
+    }
+  });
+});
+var _selectors = require("./selectors");
+Object.keys(_selectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectors[key];
+    }
+  });
+});

package/__tests__/utils/index.mjs

@@ -0,0 +1,3 @@
+export * from "./create.mjs";
+export * from "./fetch.mjs";
+export * from "./selectors.mjs";

package/__tests__/utils/selectors.d.ts

@@ -0,0 +1,12 @@
+export declare function getMountingTarget(target?: any): any;
+export declare function getChatWindowWrapper(): Element | null;
+export declare function getChatWindowToggle(): Element | null;
+export declare function getChatWrapper(): Element | null;
+export declare function getChatMessages(): NodeListOf<Element>;
+export declare function getChatMessage(index: number): Element;
+export declare function getChatMessageByText(text: string): HTMLElement | null;
+export declare function getChatMessageTyping(): Element | null;
+export declare function getGetStartedButton(): Element | null;
+export declare function getChatInput(): Element | null;
+export declare function getChatInputTextarea(): Element | null;
+export declare function getChatInputSendButton(): Element | null;

package/__tests__/utils/selectors.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getChatInput = getChatInput;
+exports.getChatInputSendButton = getChatInputSendButton;
+exports.getChatInputTextarea = getChatInputTextarea;
+exports.getChatMessage = getChatMessage;
+exports.getChatMessageByText = getChatMessageByText;
+exports.getChatMessageTyping = getChatMessageTyping;
+exports.getChatMessages = getChatMessages;
+exports.getChatWindowToggle = getChatWindowToggle;
+exports.getChatWindowWrapper = getChatWindowWrapper;
+exports.getChatWrapper = getChatWrapper;
+exports.getGetStartedButton = getGetStartedButton;
+exports.getMountingTarget = getMountingTarget;
+var _vue = require("@testing-library/vue");
+var _constants = require("@n8n/chat/constants");
+function getMountingTarget(target = _constants.defaultMountingTarget) {
+  return document.querySelector(target);
+}
+function getChatWindowWrapper() {
+  return document.querySelector(".chat-window-wrapper");
+}
+function getChatWindowToggle() {
+  return document.querySelector(".chat-window-toggle");
+}
+function getChatWrapper() {
+  return document.querySelector(".chat-wrapper");
+}
+function getChatMessages() {
+  return document.querySelectorAll(".chat-message:not(.chat-message-typing)");
+}
+function getChatMessage(index) {
+  const messages = getChatMessages();
+  return index < 0 ? messages[messages.length + index] : messages[index];
+}
+function getChatMessageByText(text) {
+  return _vue.screen.queryByText(text, {
+    selector: ".chat-message:not(.chat-message-typing) .chat-message-markdown p"
+  });
+}
+function getChatMessageTyping() {
+  return document.querySelector(".chat-message-typing");
+}
+function getGetStartedButton() {
+  return document.querySelector(".chat-get-started .chat-button");
+}
+function getChatInput() {
+  return document.querySelector(".chat-input");
+}
+function getChatInputTextarea() {
+  return document.querySelector(".chat-input textarea");
+}
+function getChatInputSendButton() {
+  return document.querySelector(".chat-input .chat-input-send-button");
+}

package/__tests__/utils/selectors.mjs

@@ -0,0 +1,41 @@
+import { screen } from "@testing-library/vue";
+import { defaultMountingTarget } from "@n8n/chat/constants";
+export function getMountingTarget(target = defaultMountingTarget) {
+  return document.querySelector(target);
+}
+export function getChatWindowWrapper() {
+  return document.querySelector(".chat-window-wrapper");
+}
+export function getChatWindowToggle() {
+  return document.querySelector(".chat-window-toggle");
+}
+export function getChatWrapper() {
+  return document.querySelector(".chat-wrapper");
+}
+export function getChatMessages() {
+  return document.querySelectorAll(".chat-message:not(.chat-message-typing)");
+}
+export function getChatMessage(index) {
+  const messages = getChatMessages();
+  return index < 0 ? messages[messages.length + index] : messages[index];
+}
+export function getChatMessageByText(text) {
+  return screen.queryByText(text, {
+    selector: ".chat-message:not(.chat-message-typing) .chat-message-markdown p"
+  });
+}
+export function getChatMessageTyping() {
+  return document.querySelector(".chat-message-typing");
+}
+export function getGetStartedButton() {
+  return document.querySelector(".chat-get-started .chat-button");
+}
+export function getChatInput() {
+  return document.querySelector(".chat-input");
+}
+export function getChatInputTextarea() {
+  return document.querySelector(".chat-input textarea");
+}
+export function getChatInputSendButton() {
+  return document.querySelector(".chat-input .chat-input-send-button");
+}

package/api/generic.d.ts

@@ -0,0 +1,6 @@
+export declare function authenticatedFetch<T>(...args: Parameters<typeof fetch>): Promise<T>;
+export declare function get<T>(url: string, query?: object, options?: RequestInit): Promise<T>;
+export declare function post<T>(url: string, body?: object, options?: RequestInit): Promise<T>;
+export declare function put<T>(url: string, body?: object, options?: RequestInit): Promise<T>;
+export declare function patch<T>(url: string, body?: object, options?: RequestInit): Promise<T>;
+export declare function del<T>(url: string, body?: object, options?: RequestInit): Promise<T>;