@copilotkit/vue 2.0.0-rc.2 → 2.0.0-rc.21

package/src/v2/components/chat/types.ts

@@ -15,13 +15,13 @@ import type {
   AttachmentModality,
   InputContentSource,
 } from "@copilotkit/shared";
-import type { CopilotChatLabels } from "../../providers/types";
-import type { InterruptEvent } from "../../types";
-import type { AutoScrollMode } from "./normalize-auto-scroll";
 import type {
+  CopilotChatLabels,
   CopilotChatToolCallDisplay,
   ToolCallEntry,
-} from "./tool-call-layout";
+} from "@copilotkit/core";
+import type { InterruptEvent } from "../../types";
+import type { ɵAutoScrollMode as AutoScrollMode } from "@copilotkit/core";
 
 export type CopilotChatInputMode = "input" | "transcribe" | "processing";
 export type { Attachment, AttachmentsConfig, AttachmentModality };
@@ -179,7 +179,15 @@ export interface CopilotChatProps extends Omit<
   | "onStartTranscribe"
   | "onCancelTranscribe"
   | "onFinishTranscribe"
+  // Redeclared below, deprecated: the chat sets it from its own state
+  | "inputMode"
 > {
+  /**
+   * @deprecated Has no effect. `CopilotChat` sets the input mode from its own
+   * transcription state. To set it yourself, render `CopilotChatView` and pass
+   * `inputMode` there.
+   */
+  inputMode?: CopilotChatInputMode;
   agentId?: string;
   threadId?: string;
   throttleMs?: number;

package/src/v2/components/chat/use-chat-labels.ts

@@ -0,0 +1,16 @@
+import { computed } from "vue";
+import { CopilotChatDefaultLabels } from "@copilotkit/core";
+import type { CopilotChatLabels } from "@copilotkit/core";
+import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
+
+/**
+ * The chat labels in effect: the surrounding chat configuration's, or the
+ * default English labels outside a chat.
+ * @internal
+ */
+export function useChatLabels() {
+  const config = useCopilotChatConfiguration();
+  return computed<Readonly<CopilotChatLabels>>(
+    () => config.value?.labels ?? CopilotChatDefaultLabels,
+  );
+}

package/src/v2/components/chat/use-copy-feedback.ts

@@ -0,0 +1,21 @@
+import { onBeforeUnmount, readonly, ref } from "vue";
+import { ɵCopyFeedback } from "@copilotkit/core";
+
+/**
+ * The "copied" check mark of a copy button, from core's `ɵCopyFeedback`:
+ * `copy(text)` writes to the clipboard and shows the check mark for two
+ * seconds; a second copy restarts the wait.
+ * @internal
+ */
+export function useCopyFeedback() {
+  const feedback = new ɵCopyFeedback();
+  const copied = ref(feedback.getSnapshot());
+  const unsubscribe = feedback.subscribe(() => {
+    copied.value = feedback.getSnapshot();
+  });
+  onBeforeUnmount(() => {
+    unsubscribe();
+    feedback.dispose();
+  });
+  return { copied: readonly(copied), copy: feedback.copy };
+}

package/src/v2/components/chat/use-lightbox.ts

@@ -1,12 +1,7 @@
 import { nextTick, ref } from "vue";
+import { ɵmorphViewTransition } from "@copilotkit/core";
 import { useCopilotId } from "../ui/use-id";
 
-type DocWithVT = Document & {
-  startViewTransition?: (cb: () => void | Promise<void>) => {
-    finished: Promise<void>;
-  };
-};
-
 /**
  * Opens and closes a lightbox, using the View Transition API to morph the
  * thumbnail into the full-screen content, as React's `useLightbox`.
@@ -24,40 +19,27 @@ export function useLightbox() {
   const vtName = useCopilotId("cpk-lightbox").replace(/[^\w-]/g, "-");
 
   const openLightbox = () => {
-    const thumb = thumbnailRef.value;
-    const doc =
-      typeof document === "undefined" ? undefined : (document as DocWithVT);
-
-    if (doc?.startViewTransition && thumb) {
-      thumb.style.viewTransitionName = vtName;
-      doc.startViewTransition(async () => {
-        thumb.style.viewTransitionName = "";
+    ɵmorphViewTransition(
+      thumbnailRef.value,
+      vtName,
+      async () => {
         open.value = true;
         await nextTick();
-      });
-    } else {
-      open.value = true;
-    }
+      },
+      "open",
+    );
   };
 
   const closeLightbox = () => {
-    const thumb = thumbnailRef.value;
-    const doc =
-      typeof document === "undefined" ? undefined : (document as DocWithVT);
-
-    if (doc?.startViewTransition && thumb) {
-      const transition = doc.startViewTransition(async () => {
+    ɵmorphViewTransition(
+      thumbnailRef.value,
+      vtName,
+      async () => {
         open.value = false;
         await nextTick();
-        thumb.style.viewTransitionName = vtName;
-      });
-      const clear = () => {
-        thumb.style.viewTransitionName = "";
-      };
-      transition.finished.then(clear, clear);
-    } else {
-      open.value = false;
-    }
+      },
+      "close",
+    );
   };
 
   return { thumbnailRef, vtName, open, openLightbox, closeLightbox };

package/src/v2/components/icons/__tests__/icons.test.ts

@@ -1,86 +1,90 @@
 import { describe, expect, it } from "vitest";
+import { h } from "vue";
 import { mount } from "@vue/test-utils";
-import {
-  IconArrowUp,
-  IconCheck,
-  IconCheckCircle,
-  IconChevronDown,
-  IconChevronLeft,
-  IconChevronRight,
-  IconCircle,
-  IconCopy,
-  IconEdit,
-  IconLoader2,
-  IconMessageCircle,
-  IconMic,
-  IconPlus,
-  IconRefreshCw,
-  IconSquare,
-  IconThumbsDown,
-  IconThumbsUp,
-  IconVolume2,
-  IconX,
-} from "../index";
+import { CopilotIcon, IconCircle, IconPlay, IconX } from "../index";
 
-describe("icons adapter", () => {
-  it("exports all expected icon aliases", () => {
-    const icons = [
-      IconMessageCircle,
-      IconX,
-      IconChevronDown,
-      IconPlus,
-      IconMic,
-      IconArrowUp,
-      IconCheck,
-      IconSquare,
-      IconLoader2,
-      IconCopy,
-      IconEdit,
-      IconChevronLeft,
-      IconChevronRight,
-      IconThumbsUp,
-      IconThumbsDown,
-      IconVolume2,
-      IconRefreshCw,
-      IconCheckCircle,
-      IconCircle,
-    ];
+describe("CopilotIcon", () => {
+  it("draws the named icon with Lucide's classes and default attributes", () => {
+    const svg = mount(CopilotIcon, { props: { name: "X" } }).find("svg");
 
-    for (const icon of icons) {
-      expect(icon).toBeDefined();
-    }
+    expect(svg.classes()).toEqual(["lucide", "lucide-x"]);
+    expect(svg.attributes()).toMatchObject({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+    });
+    expect(svg.findAll("path").map((path) => path.attributes("d"))).toEqual([
+      "M18 6 6 18",
+      "m6 6 12 12",
+    ]);
   });
 
-  it("renders svg icons from aliases", () => {
-    const xWrapper = mount(IconX);
-    const loaderWrapper = mount(IconLoader2);
+  it("draws circle and polygon nodes", () => {
+    const circle = mount(IconCircle).find("svg").find("circle");
+    const polygon = mount(IconPlay).find("svg").find("polygon");
 
-    expect(xWrapper.find("svg").exists()).toBe(true);
-    expect(loaderWrapper.find("svg").exists()).toBe(true);
+    expect(circle.attributes()).toMatchObject({ cx: "12", cy: "12", r: "10" });
+    expect(polygon.attributes("points")).toBe("6 3 20 12 6 21 6 3");
   });
 
-  it("passes through classes, size, style, and accessibility attributes", () => {
-    const wrapper = mount(IconX, {
+  it("applies size, color and stroke-width", () => {
+    const svg = mount(IconX, {
+      props: { size: 18, color: "red", strokeWidth: 1.75 },
+    }).find("svg");
+
+    expect(svg.attributes()).toMatchObject({
+      width: "18",
+      height: "18",
+      stroke: "red",
+      "stroke-width": "1.75",
+    });
+  });
+
+  it("passes other attributes to the svg after the Lucide classes", () => {
+    const svg = mount(IconX, {
       attrs: {
         class: "icon-class",
-        width: "18",
-        height: "20",
-        "stroke-width": "1.5",
-        role: "img",
-        "aria-hidden": "true",
+        fill: "currentColor",
+        "data-testid": "close-icon",
         style: "color: rgb(255, 0, 0);",
       },
-    });
+    }).find("svg");
+
+    expect(svg.classes()).toEqual(["lucide", "lucide-x", "icon-class"]);
+    expect(svg.attributes("fill")).toBe("currentColor");
+    expect(svg.attributes("data-testid")).toBe("close-icon");
+    expect(svg.attributes("style")).toContain("color: rgb(255, 0, 0)");
+  });
 
-    const svg = wrapper.find("svg");
+  it("hides an unnamed icon from screen readers", () => {
+    const svg = mount(IconX).find("svg");
 
-    expect(svg.exists()).toBe(true);
-    expect(svg.classes()).toContain("icon-class");
-    expect(svg.attributes("width")).toBe("18");
-    expect(svg.attributes("height")).toBe("20");
-    expect(svg.attributes("stroke-width")).toBe("1.5");
-    expect(svg.attributes("role")).toBe("img");
     expect(svg.attributes("aria-hidden")).toBe("true");
-    expect(svg.attributes("style")).toContain("color");
+  });
+
+  it("keeps a named icon visible to screen readers", () => {
+    const labelled = mount(IconX, { attrs: { "aria-label": "Close" } }).find(
+      "svg",
+    );
+    const withRole = mount(IconX, { attrs: { role: "img" } }).find("svg");
+
+    expect(labelled.attributes("aria-hidden")).toBeUndefined();
+    expect(labelled.attributes("aria-label")).toBe("Close");
+    expect(withRole.attributes("aria-hidden")).toBeUndefined();
+  });
+
+  it("keeps an icon with slot content visible to screen readers", () => {
+    const svg = mount(IconX, {
+      slots: { default: () => h("title", "Close") },
+    }).find("svg");
+
+    expect(svg.attributes("aria-hidden")).toBeUndefined();
+    expect(svg.find("title").text()).toBe("Close");
   });
 });

package/src/v2/components/icons/index.ts

@@ -1,27 +1,109 @@
-export {
-  MessageCircle as IconMessageCircle,
-  X as IconX,
-  ChevronDown as IconChevronDown,
-  Plus as IconPlus,
-  Mic as IconMic,
-  ArrowUp as IconArrowUp,
-  Check as IconCheck,
-  Square as IconSquare,
-  Loader2 as IconLoader2,
-  Copy as IconCopy,
-  Download as IconDownload,
-  Edit as IconEdit,
-  ChevronLeft as IconChevronLeft,
-  ChevronRight as IconChevronRight,
-  ThumbsUp as IconThumbsUp,
-  ThumbsDown as IconThumbsDown,
-  Volume2 as IconVolume2,
-  RefreshCw as IconRefreshCw,
-  CheckCircle as IconCheckCircle,
-  Circle as IconCircle,
-  PanelLeftOpen as IconPanelLeftOpen,
-  Play as IconPlay,
-  Upload as IconUpload,
-  Wrench as IconWrench,
-  EyeOff as IconEyeOff,
-} from "lucide-vue-next";
+import { defineComponent, h } from "vue";
+import type { PropType } from "vue";
+import { ɵcopilotIcons, ɵcopilotIconSvgAttributes } from "@copilotkit/core";
+import type { CopilotIconName } from "@copilotkit/core";
+
+/** True when the attributes give the icon an accessible name or role. */
+function hasAccessibleAttribute(attributes: object) {
+  return Object.keys(attributes).some(
+    (key) => key.startsWith("aria-") || key === "role" || key === "title",
+  );
+}
+
+/** Props that change how an icon is drawn. Other attributes go on the `<svg>`. */
+const iconDrawProps = {
+  /** Width and height of the icon. Defaults to `24`. */
+  size: { type: [Number, String], default: 24 },
+  /** Line color. Defaults to `currentColor`. */
+  color: { type: String, default: "currentColor" },
+  /** Line width. Defaults to `2`. */
+  strokeWidth: { type: [Number, String], default: 2 },
+};
+
+/**
+ * Draws one of the chat icons as an inline `<svg>`.
+ *
+ * The `<svg>` has the classes `lucide lucide-<icon name>`, so CSS that selects
+ * them (for example `svg.lucide-arrow-up`) keeps working. The icon is hidden
+ * from screen readers unless you give it an `aria-*` attribute, a `role` or a
+ * `title`. Other attributes, such as `class` or `fill`, go on the `<svg>`.
+ *
+ * Props:
+ * - `name`: the chat icon, for example `"ArrowUp"` or `"X"`.
+ * - `size`: width and height. Defaults to `24`.
+ * - `stroke-width`: line width. Defaults to `2`.
+ * - `color`: line color. Defaults to `currentColor`.
+ *
+ * @example
+ * ```vue
+ * <CopilotIcon name="ArrowUp" class="cpk-chat-input-send-icon" />
+ * <CopilotIcon name="X" aria-label="Close" />
+ * ```
+ */
+export const CopilotIcon = defineComponent({
+  name: "CopilotIcon",
+  props: {
+    /** The chat icon to draw, for example `"ArrowUp"`. */
+    name: { type: String as PropType<CopilotIconName>, required: true },
+    ...iconDrawProps,
+  },
+  setup(props, { attrs, slots }) {
+    return () => {
+      const icon = ɵcopilotIcons[props.name];
+      const content = slots.default?.() ?? [];
+      const isDecorative =
+        content.length === 0 && !hasAccessibleAttribute(attrs);
+      return h(
+        "svg",
+        {
+          ...ɵcopilotIconSvgAttributes,
+          width: props.size,
+          height: props.size,
+          stroke: props.color,
+          "stroke-width": props.strokeWidth,
+          class: ["lucide", `lucide-${icon.name}`],
+          "aria-hidden": isDecorative ? "true" : undefined,
+        },
+        [...icon.nodes.map((node) => h(node.tag, node.attributes)), ...content],
+      );
+    };
+  },
+});
+
+/**
+ * Internal. Makes a component that draws one chat icon, such as `IconArrowUp`.
+ * It takes the same `size`, `color` and `stroke-width` props as `CopilotIcon`.
+ */
+function defineIcon(name: CopilotIconName) {
+  return defineComponent({
+    name: `Icon${name}`,
+    props: iconDrawProps,
+    setup(props, { slots }) {
+      return () => h(CopilotIcon, { name, ...props }, slots);
+    },
+  });
+}
+
+export const IconArrowUp = defineIcon("ArrowUp");
+export const IconCheck = defineIcon("Check");
+export const IconChevronDown = defineIcon("ChevronDown");
+export const IconChevronLeft = defineIcon("ChevronLeft");
+export const IconChevronRight = defineIcon("ChevronRight");
+export const IconCircle = defineIcon("Circle");
+export const IconCopy = defineIcon("Copy");
+export const IconEdit = defineIcon("Edit");
+export const IconEyeOff = defineIcon("EyeOff");
+export const IconLoader2 = defineIcon("Loader2");
+export const IconMessageCircle = defineIcon("MessageCircle");
+export const IconMic = defineIcon("Mic");
+export const IconPanelLeftOpen = defineIcon("PanelLeftOpen");
+export const IconPlay = defineIcon("Play");
+export const IconPlus = defineIcon("Plus");
+export const IconRefreshCw = defineIcon("RefreshCw");
+export const IconSquare = defineIcon("Square");
+export const IconThumbsDown = defineIcon("ThumbsDown");
+export const IconThumbsUp = defineIcon("ThumbsUp");
+export const IconUpload = defineIcon("Upload");
+export const IconVolume2 = defineIcon("Volume2");
+export const IconWrench = defineIcon("Wrench");
+export const IconX = defineIcon("X");

package/src/v2/hooks/__tests__/use-agent-error-state.test.ts

@@ -31,10 +31,10 @@ describe("useAgent error state", () => {
 
     const TestComponent = defineComponent({
       setup() {
-        const { agent } = useAgent({ agentId: "nonexistent" });
-        return { agent };
+        const { agent, isReady } = useAgent({ agentId: "nonexistent" });
+        return { agent, isReady };
       },
-      template: `<div data-testid="agent-id">{{ agent.agentId }}</div>`,
+      template: `<div data-testid="agent-id">{{ agent.agentId }}</div><div data-testid="ready">{{ isReady }}</div>`,
     });
 
     const Host = defineComponent({
@@ -59,6 +59,8 @@ describe("useAgent error state", () => {
     // Should render without crashing — agent is provisional
     const el = await screen.findByTestId("agent-id");
     expect(el.textContent).toBe("nonexistent");
+    // A provisional stand-in is not the real agent.
+    expect(screen.getByTestId("ready").textContent).toBe("false");
     expect(capturedErrors).toEqual([]);
   });
 });

package/src/v2/hooks/__tests__/use-agent-stability.test.ts

@@ -6,7 +6,23 @@ import type { AbstractAgent } from "@ag-ui/client";
 import { useCopilotKit } from "../../providers/useCopilotKit";
 import { MockStepwiseAgent } from "../../__tests__/utils/test-helpers";
 import { useAgent } from "../use-agent";
-import { CopilotKitCoreRuntimeConnectionStatus } from "@copilotkit/core";
+import {
+  CopilotKitCoreRuntimeConnectionStatus,
+  ProxiedCopilotRuntimeAgent,
+} from "@copilotkit/core";
+
+/** Core's `ɵruntimeInfo` snapshot, built from a fake core's runtime fields. */
+function runtimeInfoOf(core: {
+  runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus;
+  threadEndpoints?: unknown;
+  intelligence?: unknown;
+}) {
+  return {
+    status: core.runtimeConnectionStatus,
+    threadEndpoints: core.threadEndpoints,
+    intelligence: core.intelligence,
+  };
+}
 
 // Mock the CopilotKitProvider to control copilotkit state directly
 vi.mock("../../providers/useCopilotKit", () => ({
@@ -26,6 +42,7 @@ describe("useAgent stability during runtime connection", () => {
   type MockCopilotkit = {
     getAgent: ReturnType<typeof vi.fn>;
     runtimeUrl: string | undefined;
+    readonly ɵruntimeInfo: unknown;
     runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus;
     runtimeTransport: string;
     headers: Record<string, string>;
@@ -45,6 +62,9 @@ describe("useAgent stability during runtime connection", () => {
     copilotkitRef = ref({
       getAgent: vi.fn(() => undefined),
       runtimeUrl: "http://localhost:3000/api/copilotkit",
+      get ɵruntimeInfo() {
+        return runtimeInfoOf(this);
+      },
       runtimeConnectionStatus:
         CopilotKitCoreRuntimeConnectionStatus.Disconnected,
       runtimeTransport: "rest",
@@ -198,7 +218,6 @@ describe("useAgent stability during runtime connection", () => {
     // Phase 1: Disconnected — provisional created
     const { rerender } = render(AgentTracker, { props: { tick: 0 } });
     await nextTick();
-    const provisionalThreadId = agentInstances[0]!.threadId;
 
     // Phase 2: Connecting
     mockCopilotkit.runtimeConnectionStatus =
@@ -232,8 +251,10 @@ describe("useAgent stability during runtime connection", () => {
     // CopilotChat's connect guard ensures connect fires only once (when Connected),
     // so the agent reference change doesn't cause a duplicate connect.
     expect(agentInstances.length).toBe(2);
-    // First instance was the provisional
-    expect(agentInstances[0]!.threadId).toBe(provisionalThreadId);
+    // First instance was the provisional. The hand-off then syncs it with
+    // the registered agent, so its threadId follows the registered one.
+    expect(agentInstances[0]).toBeInstanceOf(ProxiedCopilotRuntimeAgent);
+    expect(agentInstances[0]!.threadId).toBe(registeredAgent.threadId);
     // Second instance is the registered agent
     expect(agentInstances[1]).toBe(registeredAgent);
   });

package/src/v2/hooks/__tests__/use-agent-throttle.test.ts

@@ -541,6 +541,8 @@ describe("useAgent throttleMs", () => {
   it("single notification within window does not trigger a trailing re-render", async () => {
     const renderCount = { current: 0 };
     mountHookComponent({ agent, throttleMs: 100, renderCount });
+    // The provider connects on mount, and the status change re-renders once.
+    await flushVue();
     const afterMount = renderCount.current;
     agent.setMessages([userMsg("1", "a")]);
     agent.notifyMessagesChanged();
@@ -692,8 +694,10 @@ describe("useAgent defaultThrottleMs from provider", () => {
         agent,
         defaultThrottleMs: value,
       });
+      // Core validates the value (the provider no longer logs its own copy).
       expect(errorSpy).toHaveBeenCalledWith(
-        expect.stringContaining("CopilotKitProvider: defaultThrottleMs"),
+        expect.stringContaining("CopilotKitCore.setDefaultThrottleMs"),
+        expect.any(Error),
       );
       agent.setMessages([userMsg("1", "a")]);
       agent.notifyMessagesChanged();

package/src/v2/hooks/__tests__/use-agent.test.ts

@@ -21,13 +21,15 @@ describe("useAgent", () => {
 
     const Child = defineComponent({
       setup() {
-        const { agent } = useAgent({ agentId: "test-agent" });
-        return () =>
+        const { agent, isReady } = useAgent({ agentId: "test-agent" });
+        return () => [
           h(
             "span",
             { "data-testid": "agent-id" },
             agent.value?.agentId ?? "none",
-          );
+          ),
+          h("span", { "data-testid": "ready" }, String(isReady.value)),
+        ];
       },
     });
 
@@ -38,6 +40,7 @@ describe("useAgent", () => {
     });
 
     expect(wrapper.find("[data-testid=agent-id]").text()).toBe("test-agent");
+    expect(wrapper.find("[data-testid=ready]").text()).toBe("true");
   });
 
   it("uses agentId from chat configuration when no agentId prop is provided", () => {

package/src/v2/hooks/__tests__/use-component.test.ts

@@ -106,6 +106,27 @@ describe("useComponent", () => {
     expect(forwardedDeps).toBe(deps);
   });
 
+  it("forwards followUp, as React and Angular do", () => {
+    const Harness = defineComponent({
+      setup() {
+        useComponent({
+          name: "showWeatherCard",
+          render: defineComponent({ template: `<div />` }),
+          followUp: false,
+        });
+        return {};
+      },
+      template: `<div />`,
+    });
+
+    render(Harness);
+
+    const [toolConfig] = mockUseFrontendTool.mock.calls[0] as [
+      { followUp?: boolean },
+    ];
+    expect(toolConfig.followUp).toBe(false);
+  });
+
   it("creates a render function that passes args into the component", () => {
     const DemoComponent = defineComponent({
       props: {

package/src/v2/hooks/__tests__/use-configure-suggestions.test.ts

@@ -12,7 +12,10 @@ import type { Observable } from "rxjs";
 import { useConfigureSuggestions } from "../use-configure-suggestions";
 import { useSuggestions } from "../use-suggestions";
 import { useCopilotKit } from "../../providers/useCopilotKit";
-import { mountWithProvider } from "../../__tests__/utils/mount";
+import {
+  mountWithProvider,
+  renderWithCopilotKit,
+} from "../../__tests__/utils/mount";
 import {
   StateCapturingAgent,
   SuggestionsProviderAgent,
@@ -396,4 +399,30 @@ describe("useConfigureSuggestions", () => {
 
     expect(wrapper.find("[data-testid=json]").text()).toContain("Deferred");
   });
+
+  it("loads a global static config for the chat's agent before any agent registers", async () => {
+    const Harness = defineComponent({
+      setup() {
+        useConfigureSuggestions({
+          suggestions: [{ title: "Welcome", message: "Say hi" }],
+          available: "always",
+        });
+        const { suggestions } = useSuggestions({ agentId: "support" });
+        return () =>
+          h(
+            "span",
+            { "data-testid": "titles" },
+            suggestions.value.map((suggestion) => suggestion.title).join(","),
+          );
+      },
+    });
+
+    const { wrapper } = renderWithCopilotKit(() => h(Harness), {
+      agentId: "support",
+      agents: {},
+    });
+    await nextTick();
+
+    expect(wrapper.find("[data-testid=titles]").text()).toBe("Welcome");
+  });
 });