@copilotkit/vue 2.0.0-rc.1 → 2.0.0-rc.11

package/src/v2/lib/__tests__/message-feedback.test.ts

@@ -0,0 +1,152 @@
+import { CopilotKitCore } from "@copilotkit/core";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  getMessageFeedback,
+  subscribeToMessageFeedback,
+  MESSAGE_FEEDBACK_EVENT_NAME,
+  setMessageFeedback,
+  ɵresetMessageFeedbackCache,
+} from "../message-feedback";
+
+const emoji = "👍";
+
+/** A Core that records what it emits, with its agent-text choice stubbed. */
+function capturingCore({ agentText = true } = {}) {
+  const copilotkit = new CopilotKitCore({});
+  vi.spyOn(copilotkit, "ɵlearningCapturesAgentText", "get").mockReturnValue(
+    agentText,
+  );
+  const emit = vi
+    .spyOn(copilotkit, "emitTrajectoryEvent")
+    .mockImplementation(() => {});
+  return { copilotkit, emit };
+}
+
+const reply = { id: "m1", role: "assistant" as const, content: "Approved." };
+
+const rate = (
+  copilotkit: CopilotKitCore,
+  feedback: { rating: "up" | "down"; comment?: string } | null,
+  message: { id: string; role: "assistant"; content: string } = reply,
+) =>
+  setMessageFeedback({
+    copilotkit,
+    agentId: "agent",
+    threadId: "thread",
+    message,
+    feedback,
+  });
+
+describe("message feedback store", () => {
+  beforeEach(() => ɵresetMessageFeedbackCache());
+  afterEach(() => vi.restoreAllMocks());
+
+  it("cuts long text without splitting a character", () => {
+    const { copilotkit, emit } = capturingCore();
+
+    rate(
+      copilotkit,
+      { rating: "up", comment: emoji.repeat(1200) },
+      { id: "m1", role: "assistant", content: emoji.repeat(600) },
+    );
+
+    const [name, value] = emit.mock.calls[0]!;
+    expect(name).toBe(MESSAGE_FEEDBACK_EVENT_NAME);
+    expect(value).toMatchObject({
+      response: emoji.repeat(500),
+      comment: emoji.repeat(1000),
+    });
+  });
+
+  it("keeps the rating and sends each change, a removal as null", () => {
+    const { copilotkit, emit } = capturingCore();
+
+    rate(copilotkit, { rating: "up" });
+    expect(getMessageFeedback("agent", "thread", "m1")).toEqual({
+      rating: "up",
+    });
+    rate(copilotkit, null);
+
+    expect(getMessageFeedback("agent", "thread", "m1")).toBeUndefined();
+    expect(emit.mock.calls.map(([, value]) => value)).toEqual([
+      expect.objectContaining({ feedbackId: "thread:m1", rating: "up" }),
+      expect.objectContaining({ feedbackId: "thread:m1", rating: null }),
+    ]);
+  });
+
+  it("trims a comment and drops a blank one", () => {
+    const { copilotkit } = capturingCore();
+
+    rate(copilotkit, { rating: "down", comment: "   " });
+    expect(getMessageFeedback("agent", "thread", "m1")).toEqual({
+      rating: "down",
+    });
+    rate(copilotkit, { rating: "down", comment: "  padded  " });
+
+    expect(getMessageFeedback("agent", "thread", "m1")).toEqual({
+      rating: "down",
+      comment: "padded",
+    });
+  });
+
+  it("tells only the rated Thread's listeners", () => {
+    const { copilotkit } = capturingCore();
+    const rated = vi.fn();
+    const other = vi.fn();
+    subscribeToMessageFeedback("agent", "thread", rated);
+    subscribeToMessageFeedback("agent", "other", other);
+
+    rate(copilotkit, { rating: "up" });
+
+    expect(rated).toHaveBeenCalledTimes(1);
+    expect(other).not.toHaveBeenCalled();
+  });
+
+  it("keeps the object of a rating that did not change", () => {
+    const { copilotkit } = capturingCore();
+    rate(copilotkit, { rating: "up" });
+    const before = getMessageFeedback("agent", "thread", "m1");
+
+    rate(
+      copilotkit,
+      { rating: "down" },
+      { id: "m2", role: "assistant", content: "No." },
+    );
+
+    expect(getMessageFeedback("agent", "thread", "m1")).toBe(before);
+  });
+
+  it("treats message ids like object keys as plain ids", () => {
+    const { copilotkit } = capturingCore();
+
+    rate(
+      copilotkit,
+      { rating: "up" },
+      { id: "__proto__", role: "assistant", content: "" },
+    );
+
+    expect(getMessageFeedback("agent", "thread", "__proto__")).toEqual({
+      rating: "up",
+    });
+    expect(
+      getMessageFeedback("agent", "thread", "constructor"),
+    ).toBeUndefined();
+  });
+
+  it("leaves out the reply text when capture omits agent text", () => {
+    const { copilotkit, emit } = capturingCore({ agentText: false });
+
+    rate(copilotkit, { rating: "up" });
+
+    expect(emit.mock.calls[0]![1]).not.toHaveProperty("response");
+  });
+
+  it("names the reply's run when Core knows it", () => {
+    const { copilotkit, emit } = capturingCore();
+    vi.spyOn(copilotkit, "getRunIdForMessage").mockReturnValue("run-9");
+
+    rate(copilotkit, { rating: "up" });
+
+    expect(emit.mock.calls[0]![1]).toMatchObject({ runId: "run-9" });
+  });
+});

package/src/v2/lib/message-feedback.ts

@@ -0,0 +1,120 @@
+import type { AssistantMessage } from "@ag-ui/core";
+import type { CopilotKitCore } from "@copilotkit/core";
+
+/** Trajectory event name for a rating of one assistant message. */
+export const MESSAGE_FEEDBACK_EVENT_NAME = "message.feedback";
+
+/** Longest comment kept, in characters; the rest is cut so the event stays small. */
+export const MESSAGE_FEEDBACK_MAX_COMMENT_LENGTH = 1000;
+
+/** Longest excerpt of the rated response sent with the rating, in characters. */
+const RESPONSE_EXCERPT_LENGTH = 500;
+
+export type MessageFeedbackRating = "up" | "down";
+
+/** The rating this page gave one assistant message. */
+export interface MessageFeedback {
+  readonly rating: MessageFeedbackRating;
+  readonly comment?: string;
+}
+
+// Ratings given on this page, by message. Kept outside Vue, so a rated
+// message that scrolls out of a virtual list still shows its rating when it
+// comes back. Intelligence holds the ratings across page loads.
+const ratings = new Map<string, MessageFeedback>();
+const listeners = new Map<string, Set<() => void>>();
+
+const threadKey = (agentId: string, threadId: string) =>
+  JSON.stringify([agentId, threadId]);
+
+const messageKey = (agentId: string, threadId: string, messageId: string) =>
+  JSON.stringify([agentId, threadId, messageId]);
+
+/** Cuts `text` to `max` characters without splitting a surrogate pair. */
+const clip = (text: string, max: number): string => {
+  const characters = Array.from(text);
+  return characters.length > max ? characters.slice(0, max).join("") : text;
+};
+
+/** The comment as kept and sent: trimmed and capped, or none. */
+const normalizeComment = (comment: unknown): string | undefined => {
+  if (typeof comment !== "string") return undefined;
+  const text = clip(comment.trim(), MESSAGE_FEEDBACK_MAX_COMMENT_LENGTH);
+  return text === "" ? undefined : text;
+};
+
+/** The rating this page gave one message, if any. */
+export function getMessageFeedback(
+  agentId: string,
+  threadId: string,
+  messageId: string,
+): MessageFeedback | undefined {
+  return ratings.get(messageKey(agentId, threadId, messageId));
+}
+
+/** Calls `listener` whenever a rating in this Thread changes. */
+export function subscribeToMessageFeedback(
+  agentId: string,
+  threadId: string,
+  listener: () => void,
+): () => void {
+  const key = threadKey(agentId, threadId);
+  let set = listeners.get(key);
+  if (set === undefined) {
+    set = new Set();
+    listeners.set(key, set);
+  }
+  set.add(listener);
+  return () => {
+    set.delete(listener);
+    if (set.size === 0) listeners.delete(key);
+  };
+}
+
+/**
+ * Sets (or, with `null`, clears) this page's rating of one message and sends
+ * it to the active Trajectory. Every change is a new event; the newest event
+ * for a `feedbackId` is the current one. Like any Trajectory event, a change
+ * made while no Trajectory captures, for example during a reconnect, is not
+ * sent; the page still shows it.
+ */
+export function setMessageFeedback(params: {
+  copilotkit: CopilotKitCore;
+  agentId: string;
+  threadId: string;
+  message: AssistantMessage;
+  feedback: MessageFeedback | null;
+}): void {
+  const { copilotkit, agentId, threadId, message } = params;
+  const comment = normalizeComment(params.feedback?.comment);
+  const feedback: MessageFeedback | null = params.feedback && {
+    rating: params.feedback.rating,
+    ...(comment ? { comment } : {}),
+  };
+
+  const key = messageKey(agentId, threadId, message.id);
+  if (feedback) ratings.set(key, feedback);
+  else ratings.delete(key);
+  for (const listener of listeners.get(threadKey(agentId, threadId)) ?? [])
+    listener();
+
+  const runId = copilotkit.getRunIdForMessage(agentId, threadId, message.id);
+  copilotkit.emitTrajectoryEvent(MESSAGE_FEEDBACK_EVENT_NAME, {
+    feedbackId: `${threadId}:${message.id}`,
+    threadId,
+    messageId: message.id,
+    agentId,
+    ...(runId ? { runId } : {}),
+    rating: feedback?.rating ?? null,
+    ...(feedback?.comment ? { comment: feedback.comment } : {}),
+    // A custom sink set to omit agent text gets no excerpt of the reply.
+    ...(copilotkit.ɵlearningCapturesAgentText
+      ? { response: clip(message.content ?? "", RESPONSE_EXCERPT_LENGTH) }
+      : {}),
+  });
+}
+
+/** @internal Forgets every rating, so each test starts empty. */
+export function ɵresetMessageFeedbackCache(): void {
+  ratings.clear();
+}

package/src/v2/lib/processPartialHtml.ts

@@ -1,21 +1,6 @@
-export function extractCompleteStyles(html: string): string {
-  const matches = html.match(/<style\b[^>]*>[\s\S]*?<\/style>/gi);
-  return matches ? matches.join("") : "";
-}
-
-export function processPartialHtml(html: string): string {
-  let result = html;
-
-  result = result.replace(/<[^>]*$/, "");
-  result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*?<\/\1>/gi, "");
-  result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*$/gi, "");
-  result = result.replace(/&[a-zA-Z0-9#]*$/, "");
-
-  const bodyMatch = result.match(/<body[^>]*>([\s\S]*)/i);
-  if (bodyMatch) {
-    result = bodyMatch[1]!;
-    result = result.replace(/<\/body>[\s\S]*/i, "");
-  }
-
-  return result;
-}
+// The partial-HTML helpers live in @copilotkit/core; these names stay for
+// existing imports.
+export {
+  ɵextractCompleteStyles as extractCompleteStyles,
+  ɵprocessPartialHtml as processPartialHtml,
+} from "@copilotkit/core";

package/src/v2/lib/vue-core.ts

@@ -44,7 +44,9 @@ export class CopilotKitCoreVue extends CopilotKitCore {
   private _interruptState: InterruptRenderProps<unknown, unknown> | null = null;
 
   constructor(config: CopilotKitCoreVueConfig) {
-    super(config);
+    // Tool handlers can change reactive state. `nextTick` lets Vue flush those
+    // updates before core starts the follow-up run.
+    super({ ...config, ɵwaitForFrameworkUpdates: () => nextTick() });
     this._renderToolCalls = config.renderToolCalls ?? [];
     this._renderCustomMessages = config.renderCustomMessages ?? [];
     this._renderActivityMessages = config.renderActivityMessages ?? [];
@@ -154,8 +156,4 @@ export class CopilotKitCoreVue extends CopilotKitCore {
   ): CopilotKitCoreSubscription {
     return super.subscribe(subscriber);
   }
-
-  async waitForPendingFrameworkUpdates(): Promise<void> {
-    await nextTick();
-  }
 }

package/src/v2/providers/CopilotChatConfigurationProvider.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { computed, inject, provide, ref } from "vue";
+import { computed, inject, onMounted, provide, ref, watch } from "vue";
 import type { ComputedRef } from "vue";
 import { DEFAULT_AGENT_ID, randomUUID } from "@copilotkit/shared";
-import { CopilotChatConfigurationKey } from "./keys";
+import type { OpenThreadRegistration } from "@copilotkit/core";
+import { CopilotChatConfigurationKey, CopilotKitKey } from "./keys";
 import { CopilotChatDefaultLabels } from "./types";
 import type { CopilotChatConfigurationValue, CopilotChatLabels } from "./types";
 import type { CopilotChatConfigurationProviderProps } from "./CopilotChatConfigurationProvider.types";
@@ -61,6 +62,32 @@ const resolvedThreadId = computed(() => {
   return fallbackThreadId;
 });
 
+// Tell Core which Thread this view shows, so captured interactions can link
+// to it. This provider also works without a CopilotKitProvider, and then there
+// is nothing to register with. Registration starts on mount, so a server
+// render never registers a Thread that it can't unregister.
+const copilotKitContext = inject(CopilotKitKey, null);
+let openThread: OpenThreadRegistration | null = null;
+onMounted(() => {
+  watch(
+    () => [copilotKitContext?.copilotkit.value, resolvedAgentId.value] as const,
+    ([core, agentId], _previous, onCleanup) => {
+      if (!core) return;
+      const registration = core.registerOpenThread({
+        agentId,
+        threadId: resolvedThreadId.value,
+      });
+      openThread = registration;
+      onCleanup(() => {
+        registration.unregister();
+        openThread = null;
+      });
+    },
+    { immediate: true },
+  );
+  watch(resolvedThreadId, (threadId) => openThread?.update(threadId));
+});
+
 const resolvedHasExplicitThreadId = computed(() => {
   if (propIsAuthoritative.value) return true;
   const own = activeThreadOverride.value

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

@@ -1,8 +1,10 @@
+import type { A2UIRecoveryRendererOptions } from "../components/a2ui/A2UIRecoveryStates";
 import type { AbstractAgent } from "@ag-ui/client";
 import type {
   CopilotKitCoreErrorCode,
   CopilotKitHeadersSource,
   CopilotKitMessageFilter,
+  LearningConfig,
 } from "@copilotkit/core";
 import type { DebugConfig } from "@copilotkit/shared";
 import type {
@@ -26,6 +28,17 @@ export interface CopilotKitProviderProps {
    */
   headers?: CopilotKitHeadersSource;
   credentials?: RequestCredentials;
+  /**
+   * CSP nonce for the `<style>` tag CopilotKit adds. Set it when your
+   * Content-Security-Policy limits `style-src` to a nonce.
+   */
+  nonce?: string;
+  /**
+   * Set to `false` when you import `@copilotkit/core/styles.css` yourself, so
+   * browsers cache the CSS as a file. CopilotKit then adds no `<style>` tag.
+   * @default true
+   */
+  injectStyles?: boolean;
   /**
    * Rewrites the message list sent to runtime agents on every run.
    *
@@ -71,11 +84,6 @@ export interface CopilotKitProviderProps {
     sandboxFunctions?: SandboxFunction[];
     designSkill?: string;
   };
-  /**
-   * @deprecated This prop no longer controls the Inspector. Use
-   * `enableInspector` instead.
-   */
-  showDevConsole?: boolean | "auto";
   /**
    * Disable the CopilotKit Inspector in development.
    * The Inspector is enabled by default in development browser builds and is
@@ -107,6 +115,12 @@ export interface CopilotKitProviderProps {
      * `a2ui_params["guidelines"]["composition_guide"]` in Python).
      */
     includeSchema?: boolean;
+    /**
+     * Options for the A2UI error-recovery status UI: how long before the
+     * transient "Retrying…" hint appears, after how many attempts, and how
+     * much retry/debug detail to surface. When omitted, defaults apply.
+     */
+    recovery?: A2UIRecoveryRendererOptions;
   };
   /** Configuration for the built-in MCP Apps renderer. */
   mcpApps?: {
@@ -137,4 +151,42 @@ export interface CopilotKitProviderProps {
    * - `{ events?: boolean; lifecycle?: boolean; verbose?: boolean }` for granular control.
    */
   debug?: DebugConfig;
+  /**
+   * Turns on interaction capture (`@copilotkit/learning`). `learning` (short
+   * for `:learning="true"`) records with the default options; pass an object
+   * for options. `false` or omitting the prop turns capture off and cancels
+   * startup. Without a sink, Core authenticates with the runtime and sends
+   * browser events to Intelligence; a custom sink keeps the standalone
+   * collector behavior. Updated settings apply to the next Trajectory.
+   *
+   * Capture starts after mount. Set `trajectoryId` to use your own ID;
+   * otherwise the provider generates one. The generated ID stays the same
+   * across rerenders, reconnects and option changes; turning capture off,
+   * setting `autoStart: false` or supplying a `trajectoryId` ends it, and the
+   * next generated Trajectory gets a new ID. Read the active ID from
+   * `copilotkit.trajectoryId`.
+   *
+   * Set `autoStart: false` to start capture yourself with `startTrajectory()`.
+   * Capture stops on unmount, including manually started Trajectories.
+   *
+   * @example
+   * <CopilotKitProvider runtime-url="/api/copilotkit" learning>
+   */
+  learning?: boolean | CopilotKitLearningOptions;
 }
+
+/** The object form of the `learning` prop. */
+export type CopilotKitLearningOptions = LearningConfig & {
+  /**
+   * Starts a Trajectory after mount. Defaults to `true`; set `false` to call
+   * `startTrajectory()` yourself.
+   */
+  autoStart?: boolean;
+  trajectoryId?: string;
+  /**
+   * Used only by explicit custom sinks. Authenticated capture warns and ignores
+   * this option; assign Learning Spaces on the server with
+   * `getTrajectoryLearningContainerIds` on `CopilotKitIntelligence`.
+   */
+  learningContainerIds?: string[];
+};