@copilotkit/vue 2.0.0-rc.3 → 2.0.0-rc.30

package/src/v2/components/chat/__tests__/normalize-auto-scroll.test.ts

@@ -1,39 +0,0 @@
-import { describe, it, expect } from "vitest";
-import {
-  normalizeAutoScroll,
-  type AutoScrollMode,
-} from "../normalize-auto-scroll";
-
-// Strict counterpart of React `normalize-auto-scroll.test.ts`.
-// Keep case order and wording aligned 1:1 with the React suite.
-describe("normalizeAutoScroll", () => {
-  it("returns 'pin-to-bottom' for undefined (default)", () => {
-    expect(normalizeAutoScroll(undefined)).toBe("pin-to-bottom");
-  });
-
-  it("maps true -> 'pin-to-bottom'", () => {
-    expect(normalizeAutoScroll(true)).toBe("pin-to-bottom");
-  });
-
-  it("maps false -> 'none'", () => {
-    expect(normalizeAutoScroll(false)).toBe("none");
-  });
-
-  it("passes 'pin-to-bottom' through", () => {
-    expect(normalizeAutoScroll("pin-to-bottom")).toBe("pin-to-bottom");
-  });
-
-  it("passes 'pin-to-send' through", () => {
-    expect(normalizeAutoScroll("pin-to-send")).toBe("pin-to-send");
-  });
-
-  it("passes 'none' through", () => {
-    expect(normalizeAutoScroll("none")).toBe("none");
-  });
-
-  it("falls back to 'pin-to-bottom' for unknown strings", () => {
-    expect(normalizeAutoScroll("bogus" as AutoScrollMode)).toBe(
-      "pin-to-bottom",
-    );
-  });
-});

package/src/v2/components/chat/normalize-auto-scroll.ts

@@ -1,17 +0,0 @@
-export type AutoScrollMode = "pin-to-bottom" | "pin-to-send" | "none";
-
-const VALID: readonly AutoScrollMode[] = [
-  "pin-to-bottom",
-  "pin-to-send",
-  "none",
-];
-
-export function normalizeAutoScroll(
-  value: AutoScrollMode | boolean | undefined,
-): AutoScrollMode {
-  if (value === undefined) return "pin-to-bottom";
-  if (value === true) return "pin-to-bottom";
-  if (value === false) return "none";
-  if ((VALID as readonly string[]).includes(value)) return value;
-  return "pin-to-bottom";
-}

package/src/v2/components/chat/tool-call-layout.ts

@@ -1,304 +0,0 @@
-import type { Message, ToolCall, ToolMessage } from "@ag-ui/core";
-
-/**
- * How the chat shows tool calls.
- *
- * - `"grouped"` (default): calls made in a row share one card, collapsed to a
- *   summary ("Used 3 tools") that opens to a row per call.
- * - `"line"`: the same grouping as a quiet line of text, like the reasoning
- *   message's "Thought for 4 seconds".
- * - `"stacked"`: the latest call on top of a stack of the earlier ones; click
- *   to fan the stack out into its cards.
- * - `"turn"`: the agent works in the open (narration, then a row per call),
- *   and when the reply is done everything before it folds into "Worked for 9s".
- * - `"separate"`: every call gets its own card, as before grouping existed.
- *
- * Only calls drawn by a renderer that opts into grouping (`group: true`) are
- * grouped; CopilotKit's built-in card from `useDefaultRenderTool()` does. Any
- * other call always shows on its own and splits the group around it.
- */
-export type CopilotChatToolCallDisplay =
-  | "grouped"
-  | "line"
-  | "stacked"
-  | "turn"
-  | "separate";
-
-/** One tool call and, once it has finished, the message carrying its result. */
-export interface ToolCallEntry {
-  toolCall: ToolCall;
-  toolMessage?: ToolMessage;
-}
-
-export type ToolCallSegment =
-  /** Consecutive calls drawn by renderers that opted into grouping. */
-  | {
-      kind: "group";
-      id: string;
-      calls: ToolCallEntry[];
-      /** Nothing renders after this group yet, so a running agent may add to it. */
-      trailing: boolean;
-    }
-  /**
-   * A call drawn by a renderer that didn't opt into grouping, or with no
-   * renderer at all. The latter renders nothing (and warns in development)
-   * without breaking a group.
-   */
-  | { kind: "call"; id: string; call: ToolCallEntry; rendered: boolean };
-
-/** What one assistant message's tool-call area renders. */
-export interface ToolCallLayout {
-  segments: ToolCallSegment[];
-  /** Changes whenever anything this layout renders changes; for memoization. */
-  signature: string;
-}
-
-/** Which tool-call renderers are registered. */
-export interface ToolCallRendererNames {
-  /** Tool names with a renderer of their own. */
-  named: ReadonlySet<string>;
-  /** Of those, the ones whose renderer opted into grouping. */
-  groupedNames: ReadonlySet<string>;
-  /** A wildcard (`"*"`) renderer is registered. */
-  wildcard: boolean;
-  /** The wildcard renderer opted into grouping (the built-in card does). */
-  wildcardGroups: boolean;
-}
-
-function contentLength(content: ToolMessage["content"]): number {
-  return typeof content === "string"
-    ? content.length
-    : JSON.stringify(content ?? "").length;
-}
-
-const entrySignature = ({ toolCall, toolMessage }: ToolCallEntry) =>
-  [
-    toolCall.id,
-    toolCall.function.name,
-    toolCall.function.arguments.length,
-    toolMessage
-      ? `${contentLength(toolMessage.content)}${toolMessage.error ? "!" : ""}`
-      : "-",
-  ].join(":");
-
-function signatureOf(segments: ToolCallSegment[]): string {
-  return segments
-    .map((segment) =>
-      segment.kind === "call"
-        ? `c(${entrySignature(segment.call)})`
-        : `g${segment.trailing ? "*" : ""}(${segment.calls.map(entrySignature).join(",")})`,
-    )
-    .join("|");
-}
-
-/** Index of tool results by the call they answer. */
-export function getToolResults(messages: Message[]): Map<string, ToolMessage> {
-  const results = new Map<string, ToolMessage>();
-  for (const message of messages) {
-    if (message.role === "tool") results.set(message.toolCallId, message);
-  }
-  return results;
-}
-
-/**
- * Lays out the tool calls of every assistant message in `rendered`.
- *
- * Calls drawn by a renderer that opted into grouping join the group that's
- * open; anything else that shows between them closes it: assistant text, a
- * user, reasoning or activity message, or a call drawn by any other renderer. A group belongs to
- * the message where it starts, so later messages whose calls joined it render
- * no tool calls themselves.
- *
- * @param rendered - The messages as the chat renders them, in order.
- * @param all - Every message, for finding tool results (a transform may hide them).
- * @param renderers - The registered renderers.
- */
-export function getToolCallLayouts(
-  rendered: Message[],
-  all: Message[],
-  renderers: ToolCallRendererNames,
-): Map<string, ToolCallLayout> {
-  const results = getToolResults(all);
-  const layouts = new Map<string, ToolCallSegment[]>();
-  let open: Extract<ToolCallSegment, { kind: "group" }> | undefined;
-
-  for (const message of rendered) {
-    if (message.role === "tool") continue;
-    if (message.role !== "assistant") {
-      open = undefined;
-      continue;
-    }
-    if (typeof message.content === "string" && message.content.trim()) {
-      open = undefined;
-    }
-
-    const segments: ToolCallSegment[] = [];
-    layouts.set(message.id, segments);
-    // Streaming can repeat a call: keep its first position, last content.
-    const toolCalls = new Map<string, ToolCall>();
-    for (const toolCall of message.toolCalls ?? []) {
-      toolCalls.set(toolCall.id, toolCall);
-    }
-    for (const toolCall of toolCalls.values()) {
-      const entry = { toolCall, toolMessage: results.get(toolCall.id) };
-
-      const name = toolCall.function.name;
-      const named = renderers.named.has(name);
-      const rendered = named || renderers.wildcard;
-      const groups = named
-        ? renderers.groupedNames.has(name)
-        : renderers.wildcardGroups;
-
-      if (!rendered || !groups) {
-        if (rendered) open = undefined;
-        segments.push({ kind: "call", id: toolCall.id, call: entry, rendered });
-      } else if (open) {
-        open.calls.push(entry);
-      } else {
-        open = {
-          kind: "group",
-          id: toolCall.id,
-          calls: [entry],
-          trailing: false,
-        };
-        segments.push(open);
-      }
-    }
-  }
-  if (open) open.trailing = true;
-
-  const layout = new Map<string, ToolCallLayout>();
-  for (const [id, segments] of layouts) {
-    layout.set(id, { segments, signature: signatureOf(segments) });
-  }
-  return layout;
-}
-
-const TOOL_CALL_SLOT_PREFIX = "tool-call-";
-
-/**
- * Which renderers draw tool calls, from the registered renderers and the
- * view's tool-call slots. A slot wins over a registered renderer and never
- * groups, since the chat can't tell what it draws: `#tool-call-<name>` takes
- * that tool, and `#tool-call` takes every tool.
- *
- * @param renderers - The registered renderers (`copilotkit.renderToolCalls`).
- * @param slotNames - The names of the slots the view was given.
- */
-export function getToolCallRendererNames(
-  renderers: readonly { name: string; group?: boolean }[],
-  slotNames: readonly string[] = [],
-): ToolCallRendererNames {
-  const wildcardSlot = slotNames.includes("tool-call");
-  const slotTools = slotNames
-    .filter((name) => name.startsWith(TOOL_CALL_SLOT_PREFIX))
-    .map((name) => name.slice(TOOL_CALL_SLOT_PREFIX.length));
-  const named = renderers.filter((renderer) => renderer.name !== "*");
-  const wildcards = renderers.filter((renderer) => renderer.name === "*");
-  return {
-    named: new Set([...named.map((renderer) => renderer.name), ...slotTools]),
-    groupedNames: new Set(
-      wildcardSlot
-        ? []
-        : named
-            .filter(
-              (renderer) =>
-                renderer.group && !slotTools.includes(renderer.name),
-            )
-            .map((renderer) => renderer.name),
-    ),
-    wildcard: wildcards.length > 0 || wildcardSlot,
-    wildcardGroups:
-      !wildcardSlot && wildcards.some((renderer) => renderer.group),
-  };
-}
-
-/** A reply's working phase, for the `"turn"` display. */
-export interface TurnWork {
-  /** Stable across the turn's life: the id of the user message it answers. */
-  key: string;
-  /** The first assistant-side message, where the "Worked for" line goes. */
-  firstMessageId: string;
-  /** Everything up to and including the last message with a tool call. */
-  workMessageIds: ReadonlySet<string>;
-  /**
-   * The reply's last assistant message, when it has text and is part of the
-   * work (it also calls a tool). Its text is the answer, so it stays out.
-   */
-  replyTextMessageId?: string;
-  calls: ToolCallEntry[];
-  /** No user message follows, so the agent may still be working on it. */
-  isLatest: boolean;
-}
-
-/**
- * Finds the working phase of every reply in `rendered`: its messages up to the
- * last one that calls a tool. Text in there was narration; what follows is the
- * reply itself. Replies that called no tools are omitted, except the latest,
- * which may be about to.
- */
-export function getTurnWork(
-  rendered: Message[],
-  layouts: ReadonlyMap<string, ToolCallLayout>,
-): Map<string, TurnWork> {
-  const turns = new Map<string, TurnWork>();
-  let start = 0;
-  while (start < rendered.length) {
-    let end = start;
-    while (end < rendered.length && rendered[end]!.role !== "user") end++;
-    const key = start > 0 ? rendered[start - 1]!.id : "start";
-    const visible = rendered
-      .slice(start, end)
-      .filter((message) => message.role !== "tool");
-    const isLatest = end === rendered.length;
-
-    // A message's calls may sit in a group an earlier message owns, so
-    // collect every shown call first, then find the last message making one.
-    const calls: ToolCallEntry[] = [];
-    for (const message of visible) {
-      for (const segment of layouts.get(message.id)?.segments ?? []) {
-        if (segment.kind === "group") calls.push(...segment.calls);
-        else if (segment.rendered) calls.push(segment.call);
-      }
-    }
-    const shown = new Set(calls.map((entry) => entry.toolCall.id));
-    let lastWork = -1;
-    visible.forEach((message, index) => {
-      if (
-        message.role === "assistant" &&
-        message.toolCalls?.some((call) => shown.has(call.id))
-      ) {
-        lastWork = index;
-      }
-    });
-
-    const first = visible[0];
-    if (first && (calls.length > 0 || isLatest)) {
-      let lastAssistant = -1;
-      visible.forEach((message, index) => {
-        if (message.role === "assistant") lastAssistant = index;
-      });
-      const replyText = visible[lastAssistant]?.content;
-      const endsWithWork =
-        lastAssistant >= 0 &&
-        lastAssistant <= lastWork &&
-        typeof replyText === "string" &&
-        replyText.trim().length > 0;
-
-      turns.set(key, {
-        key,
-        firstMessageId: first.id,
-        workMessageIds: new Set(
-          visible.slice(0, lastWork + 1).map((message) => message.id),
-        ),
-        replyTextMessageId: endsWithWork
-          ? visible[lastAssistant]!.id
-          : undefined,
-        calls,
-        isLatest,
-      });
-    }
-    start = end + 1;
-  }
-  return turns;
-}

package/src/v2/lib/__tests__/is-mobile-viewport.test.ts

@@ -1,48 +0,0 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { isMobileViewport } from "../is-mobile-viewport";
-
-describe("isMobileViewport", () => {
-  const originalMatchMedia = window.matchMedia;
-
-  afterEach(() => {
-    window.matchMedia = originalMatchMedia;
-    vi.restoreAllMocks();
-  });
-
-  it("returns false when window.matchMedia is undefined", () => {
-    // @ts-expect-error - simulating an environment without matchMedia support.
-    delete window.matchMedia;
-
-    expect(isMobileViewport()).toBe(false);
-  });
-
-  it("returns true when the mobile media query matches", () => {
-    window.matchMedia = vi.fn().mockReturnValue({
-      matches: true,
-      media: "(max-width: 767px)",
-      onchange: null,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    } as unknown as MediaQueryList);
-
-    expect(isMobileViewport()).toBe(true);
-  });
-
-  it("returns false when the mobile media query does not match", () => {
-    window.matchMedia = vi.fn().mockReturnValue({
-      matches: false,
-      media: "(max-width: 767px)",
-      onchange: null,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    } as unknown as MediaQueryList);
-
-    expect(isMobileViewport()).toBe(false);
-  });
-});

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

@@ -1,152 +0,0 @@
-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/__tests__/processPartialHtml.test.ts

@@ -1,84 +0,0 @@
-import { describe, it, expect } from "vitest";
-import {
-  processPartialHtml,
-  extractCompleteStyles,
-} from "../processPartialHtml";
-
-describe("processPartialHtml", () => {
-  it("returns empty string for empty input", () => {
-    expect(processPartialHtml("")).toBe("");
-  });
-
-  it("strips incomplete tag at end", () => {
-    expect(processPartialHtml('<div>Hello<span class="fo')).toBe("<div>Hello");
-  });
-
-  it("strips complete <style> blocks", () => {
-    const input =
-      "<div>Hello</div><style>.foo { color: red; }</style><p>World</p>";
-    expect(processPartialHtml(input)).toBe("<div>Hello</div><p>World</p>");
-  });
-
-  it("strips complete <script> blocks", () => {
-    const input = '<div>Hello</div><script>alert("hi")</script><p>World</p>';
-    expect(processPartialHtml(input)).toBe("<div>Hello</div><p>World</p>");
-  });
-
-  it("strips incomplete <style> block", () => {
-    const input = "<div>Hello</div><style>.foo { color:";
-    expect(processPartialHtml(input)).toBe("<div>Hello</div>");
-  });
-
-  it("strips incomplete <script> block", () => {
-    const input = '<div>Hello</div><script>const x = "val';
-    expect(processPartialHtml(input)).toBe("<div>Hello</div>");
-  });
-
-  it("strips incomplete HTML entities", () => {
-    expect(processPartialHtml("<p>Hello &amp")).toBe("<p>Hello ");
-    expect(processPartialHtml("<p>Hello &#123")).toBe("<p>Hello ");
-  });
-
-  it("preserves complete entities", () => {
-    expect(processPartialHtml("<p>Hello &amp; World</p>")).toBe(
-      "<p>Hello &amp; World</p>",
-    );
-  });
-
-  it("extracts body content from full HTML document", () => {
-    const input =
-      "<html><head><title>Test</title></head><body><p>Content</p></body></html>";
-    expect(processPartialHtml(input)).toBe("<p>Content</p>");
-  });
-
-  it("handles <body> with attributes", () => {
-    const input = '<body class="dark"><p>Content</p></body>';
-    expect(processPartialHtml(input)).toBe("<p>Content</p>");
-  });
-
-  it("handles no <body> tag", () => {
-    const input = "<div><p>Just content</p></div>";
-    expect(processPartialHtml(input)).toBe("<div><p>Just content</p></div>");
-  });
-});
-
-describe("extractCompleteStyles", () => {
-  it("returns empty string for no styles", () => {
-    expect(extractCompleteStyles("<div>Hello</div>")).toBe("");
-  });
-
-  it("extracts a single complete style block", () => {
-    const input =
-      "<div>Hello</div><style>.foo { color: red; }</style><p>World</p>";
-    expect(extractCompleteStyles(input)).toBe(
-      "<style>.foo { color: red; }</style>",
-    );
-  });
-
-  it("extracts multiple complete style blocks", () => {
-    const input = "<style>a{}</style><div>X</div><style>b{}</style>";
-    expect(extractCompleteStyles(input)).toBe(
-      "<style>a{}</style><style>b{}</style>",
-    );
-  });
-});