@copilotkit/vue 1.80.0 → 1.82.0

package/src/v2/components/chat/__tests__/CopilotChatView.rootWidth.test.ts

@@ -0,0 +1,69 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+import { h } from "vue";
+import { mount } from "@vue/test-utils";
+import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
+import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
+import CopilotChatView from "../CopilotChatView.vue";
+
+const CHAT_ROOT_SELECTOR = ".copilotKitChat[data-copilotkit]";
+
+// Resolve from this file, so the read does not depend on the working directory.
+// (A `new URL(...)` object fails here: under jsdom it is not Node's URL.)
+const globalsCss = readFileSync(
+  resolve(
+    dirname(fileURLToPath(import.meta.url)),
+    "../../../../styles/globals.css",
+  ),
+  { encoding: "utf8" },
+);
+
+/** Returns the body of the first `@layer <name> { ... }` block. */
+function layerBody(css: string, name: string): string {
+  const start = css.indexOf(`@layer ${name} {`);
+  if (start === -1) return "";
+  let depth = 0;
+  for (let i = css.indexOf("{", start); i < css.length; i++) {
+    if (css[i] === "{") depth++;
+    if (css[i] === "}" && --depth === 0) {
+      return css.slice(css.indexOf("{", start) + 1, i);
+    }
+  }
+  return "";
+}
+
+function mountChatView(props: Record<string, unknown>) {
+  return mount(CopilotKitProvider, {
+    props: { runtimeUrl: "/api/copilotkit" },
+    slots: {
+      default: () =>
+        h(
+          CopilotChatConfigurationProvider,
+          { threadId: "t1" },
+          { default: () => h(CopilotChatView, props) },
+        ),
+    },
+  });
+}
+
+// PE-1053, the Vue side of PE-788: the chat root is an inline-size container
+// (`cpk:@container`), so its content gives it no intrinsic width. As a flex
+// item in a row its auto width collapsed to a narrow column. jsdom does no
+// layout, so these tests pin the two halves of the fix: the base-layer width
+// rule, and a chat root that the rule's selector matches.
+describe("CopilotChatView root width (PE-1053)", () => {
+  it("fills its container from the base layer, so app widths still win", () => {
+    const base = layerBody(globalsCss, "base").replace(/\s+/g, " ");
+    expect(base).toContain(`${CHAT_ROOT_SELECTOR} { width: 100%; }`);
+  });
+
+  // The welcome screen and the message view share this one root element.
+  it("the chat root matches the width rule", () => {
+    const wrapper = mountChatView({ messages: [] });
+    const root = wrapper.find("[data-testid='copilot-chat-view']");
+    expect(root.exists()).toBe(true);
+    expect(root.element.matches(CHAT_ROOT_SELECTOR)).toBe(true);
+  });
+});

package/src/v2/providers/CopilotKitProvider.types.ts

@@ -90,6 +90,21 @@ export interface CopilotKitProviderProps {
     theme?: A2UITheme;
     catalog?: any;
     loadingComponent?: Component;
+    /**
+     * When true (the default), the full component schemas from the catalog are
+     * sent as agent context so the agent knows what components and props are
+     * available. The A2UI middleware can overwrite this with a server-side
+     * schema if configured.
+     *
+     * When false, the agent context still describes the catalog, but only by its
+     * catalog ID and the names of its custom components, without their JSON
+     * schemas. The component schema entry and the A2UI generation and design
+     * guidelines are not sent. With the CopilotKit LangGraph middleware's
+     * injected A2UI tool, the A2UI subagent then gets the component names only;
+     * a host can still give it a composition guide through the middleware's
+     * guidelines (`a2uiParams.guidelines.compositionGuide` in TypeScript,
+     * `a2ui_params["guidelines"]["composition_guide"]` in Python).
+     */
     includeSchema?: boolean;
   };
   /** Configuration for the built-in MCP Apps renderer. */

package/src/v2/providers/__tests__/CopilotKitProvider.a2ui.test.ts

@@ -1,6 +1,9 @@
 import { describe, expect, it } from "vitest";
 import { defineComponent, h, ref } from "vue";
 import { mount } from "@vue/test-utils";
+import { z } from "zod";
+import { Catalog } from "@a2ui/web_core/v0_9";
+import type { ComponentApi } from "@a2ui/web_core/v0_9";
 import CopilotKitProvider from "../CopilotKitProvider.vue";
 import { useCopilotKit } from "../useCopilotKit";
 
@@ -76,3 +79,50 @@ describe("CopilotKitProvider a2ui catalog auto-enable", () => {
     expect(a2uiRenderer).toBeUndefined();
   });
 });
+
+const CAPABILITIES_DESCRIPTION =
+  "A2UI catalog capabilities: available catalog IDs and custom component definitions the client can render.";
+
+function makeCustomCatalog(): Catalog<ComponentApi> {
+  return new Catalog<ComponentApi>(
+    "copilotkit://custom-catalog",
+    [{ name: "FlightCard", schema: z.object({ airline: z.string() }) }],
+    [],
+  );
+}
+
+function capabilitiesValue(
+  core: ReturnType<typeof mountProvider>["observedCore"]["value"],
+): string | undefined {
+  return Object.values(core?.context ?? {}).find(
+    (entry) => entry.description === CAPABILITIES_DESCRIPTION,
+  )?.value;
+}
+
+describe("CopilotKitProvider a2ui catalog context", () => {
+  it("lists custom components by name only when includeSchema is false", () => {
+    const { observedCore } = mountProvider({
+      a2ui: { catalog: makeCustomCatalog(), includeSchema: false },
+    });
+
+    expect(capabilitiesValue(observedCore.value)).toBe(
+      [
+        "Available A2UI catalog:",
+        "- copilotkit://custom-catalog",
+        "  Custom catalog (does NOT include all basic components).",
+        "  Custom components:",
+        "  - FlightCard",
+      ].join("\n"),
+    );
+  });
+
+  it("includes custom component schemas by default", () => {
+    const { observedCore } = mountProvider({
+      a2ui: { catalog: makeCustomCatalog() },
+    });
+
+    const value = capabilitiesValue(observedCore.value);
+    expect(value).toContain("  - FlightCard:\n    {");
+    expect(value).toContain('"airline"');
+  });
+});

package/src/v2/providers/types.ts

@@ -25,6 +25,15 @@ export const CopilotChatDefaultLabels = {
   chatScrollToBottomLabel: "Scroll to bottom",
   modalHeaderTitle: "CopilotKit Chat",
   welcomeMessageText: "How can I help you today?",
+  reasoningMessageThinkingLabel: "Thinking…",
+  chatInputSlashMenuLabel: "Slash commands",
+  chatInputSlashMenuEmptyText: "No commands found",
+  attachmentRemoveButtonLabel: "Remove attachment",
+  attachmentPlayVideoButtonLabel: "Play video",
+  attachmentPreviewCloseButtonLabel: "Close preview",
+  modalHeaderCloseButtonLabel: "Close",
+  modalHeaderThreadsButtonLabel: "Open threads",
+  sidebarLabel: "Copilot chat sidebar",
 } as const;
 
 export type CopilotChatLabels = typeof CopilotChatDefaultLabels;