@copilotkit/vue 2.0.0-rc.6 → 2.0.0-rc.8

package/src/v2/components/chat/__tests__/CopilotChatMessageView.toolCallDisplay.test.ts

@@ -11,12 +11,7 @@ import type { VueToolCallRenderer } from "../../../types";
 import { useDefaultRenderTool } from "../../../hooks/use-default-render-tool";
 import CopilotChatMessageView from "../CopilotChatMessageView.vue";
 import CopilotChatToolCallsView from "../CopilotChatToolCallsView.vue";
-import {
-  getToolCallLayouts,
-  getToolCallRendererNames,
-  getTurnWork,
-} from "../tool-call-layout";
-import type { CopilotChatToolCallDisplay } from "../tool-call-layout";
+import type { CopilotChatToolCallDisplay } from "@copilotkit/core";
 
 // Ported from React's CopilotChatMessageView.toolCallDisplay tests.
 
@@ -55,13 +50,6 @@ const weather = defineToolCallRenderer({
   render: () => h("div", { "data-testid": "weather-card" }, "Weather"),
 });
 
-const names = {
-  named: new Set(["weather"]),
-  groupedNames: new Set<string>(),
-  wildcard: true,
-  wildcardGroups: true,
-};
-
 interface ViewState {
   messages: Ref<Message[]>;
   isRunning: Ref<boolean>;
@@ -118,92 +106,6 @@ function renderView(
 const firstButton = (element: HTMLElement) =>
   within(element).getAllByRole("button")[0]!;
 
-describe("getToolCallLayouts", () => {
-  it("groups calls made in a row across messages, owned by the first", () => {
-    const messages = [
-      question,
-      callMessage("a"),
-      result("a"),
-      callMessage("b"),
-      result("b"),
-    ];
-    const layouts = getToolCallLayouts(messages, messages, names);
-
-    const first = layouts.get("m-a")!.segments;
-    expect(first).toHaveLength(1);
-    expect(first[0]).toMatchObject({ kind: "group", trailing: true });
-    expect(
-      first[0]!.kind === "group" && first[0]!.calls.map((c) => c.toolCall.id),
-    ).toEqual(["a", "b"]);
-    expect(layouts.get("m-b")!.segments).toEqual([]);
-  });
-
-  it("starts a new group after text or a call with its own renderer", () => {
-    const messages = [
-      question,
-      callMessage("a"),
-      say("t", "Checking more."),
-      callMessage("b"),
-      callMessage("w", "weather"),
-      callMessage("c"),
-    ];
-    const layouts = getToolCallLayouts(messages, messages, names);
-    const kinds = ["m-a", "m-b", "m-w", "m-c"].map((id) =>
-      layouts.get(id)!.segments.map((segment) => segment.kind),
-    );
-    expect(kinds).toEqual([["group"], ["group"], ["call"], ["group"]]);
-  });
-
-  it("changes its signature when a result arrives for a call it holds", () => {
-    const before = [question, callMessage("a"), callMessage("b")];
-    const after = [...before, result("b")];
-    const signature = (messages: Message[]) =>
-      getToolCallLayouts(messages, messages, names).get("m-a")!.signature;
-    expect(signature(after)).not.toBe(signature(before));
-  });
-});
-
-describe("getTurnWork", () => {
-  it("treats everything up to the last call as work, and the rest as the reply", () => {
-    const messages = [
-      question,
-      say("t1", "Looking."),
-      callMessage("a"),
-      result("a"),
-      say("t2", "The answer."),
-    ];
-    const layouts = getToolCallLayouts(messages, messages, names);
-    const turn = getTurnWork(messages, layouts).get("u1")!;
-    expect([...turn.workMessageIds]).toEqual(["t1", "m-a"]);
-    expect(turn.firstMessageId).toBe("t1");
-    expect(turn.calls).toHaveLength(1);
-  });
-});
-
-describe("getToolCallRendererNames", () => {
-  const renderers = [
-    { name: "*", group: true },
-    { name: "search", group: true },
-  ];
-
-  it("reads the renderers' group opt-in", () => {
-    const result = getToolCallRendererNames(renderers);
-    expect([...result.groupedNames]).toEqual(["search"]);
-    expect(result.wildcardGroups).toBe(true);
-  });
-
-  it("never groups calls a tool-call slot draws", () => {
-    const named = getToolCallRendererNames(renderers, ["tool-call-search"]);
-    expect(named.named.has("search")).toBe(true);
-    expect(named.groupedNames.has("search")).toBe(false);
-    expect(named.wildcardGroups).toBe(true);
-
-    const wildcard = getToolCallRendererNames(renderers, ["tool-call"]);
-    expect(wildcard.groupedNames.size).toBe(0);
-    expect(wildcard.wildcardGroups).toBe(false);
-  });
-});
-
 describe("CopilotChatMessageView toolCallDisplay", () => {
   const burst = [
     question,

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

@@ -1,7 +1,7 @@
 import type { Message, ToolCall, ToolMessage } from "@ag-ui/core";
 import { contentToText } from "@ag-ui/core";
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
-import { ToolCallStatus } from "@copilotkit/core";
+import { ToolCallStatus, ɵresolveToolCallRenderer } from "@copilotkit/core";
 import { partialJSONParse } from "@copilotkit/shared";
 import type { CopilotChatToolCallRenderSlotProps } from "./types";
 import type {
@@ -24,23 +24,6 @@ export function getToolCallSlotName(toolName: string): `tool-call-${string}` {
   return `tool-call-${toolName}`;
 }
 
-export function getCoreRenderConfig(
-  toolCall: ToolCall,
-  renderToolCalls: readonly VueToolCallRenderer<unknown>[],
-  agentId: string,
-): VueToolCallRenderer<unknown> | undefined {
-  const exactMatches = renderToolCalls.filter(
-    (renderConfig) => renderConfig.name === toolCall.function.name,
-  );
-
-  return (
-    exactMatches.find((renderConfig) => renderConfig.agentId === agentId) ??
-    exactMatches.find((renderConfig) => !renderConfig.agentId) ??
-    exactMatches[0] ??
-    renderToolCalls.find((renderConfig) => renderConfig.name === "*")
-  );
-}
-
 export function getToolCallRenderProps(
   toolCall: ToolCall,
   messages: Message[],
@@ -122,6 +105,7 @@ export function getToolCallMemoDeps(
     toolCall.function.arguments,
     findToolMessage(messages, toolCall.id)?.content,
     executingToolCallIds.has(toolCall.id),
-    getCoreRenderConfig(toolCall, renderToolCalls, agentId)?.render,
+    ɵresolveToolCallRenderer(renderToolCalls, toolCall.function.name, agentId)
+      ?.render,
   ];
 }

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

@@ -1,5 +1,4 @@
 export * from "./types";
-export { default as BasicMarkdown } from "./BasicMarkdown.vue";
 export { default as StreamingMarkdownDefault } from "./StreamingMarkdownDefault.vue";
 export { default as CopilotChatAssistantMessage } from "./CopilotChatAssistantMessage.vue";
 export { default as CopilotChatAudioRecorder } from "./CopilotChatAudioRecorder.vue";

package/src/v2/components/chat/tool-call-display-context.ts

@@ -1,34 +1,13 @@
 import type { ComputedRef, InjectionKey } from "vue";
-import type {
-  CopilotChatToolCallDisplay,
-  ToolCallLayout,
-} from "./tool-call-layout";
+import type { ɵToolCallDisplayContextValue } from "@copilotkit/core";
 
 /**
  * Provided by the message view so each message's tool calls follow the view's
  * `toolCallDisplay` without every layer passing it along.
  * @internal
  */
-export interface ToolCallDisplayContextValue {
-  display: CopilotChatToolCallDisplay;
-  isRunning: boolean;
-  /** Each assistant message's tool calls, laid out across the whole list. */
-  layouts: ReadonlyMap<string, ToolCallLayout>;
-  /**
-   * `"turn"` display: for each message in a reply's working phase, whether
-   * that work is showing. Messages not in here are the reply itself.
-   */
-  workOpen: ReadonlyMap<string, boolean>;
-  /**
-   * Like `workOpen`, for the messages' text: text that ends the reply stays
-   * out of it even when its message also calls a tool.
-   */
-  workTextOpen: ReadonlyMap<string, boolean>;
-}
-
-/** @internal */
 export const ToolCallDisplayContextKey: InjectionKey<
-  ComputedRef<ToolCallDisplayContextValue>
+  ComputedRef<ɵToolCallDisplayContextValue>
 > = Symbol("CopilotChatToolCallDisplay");
 
 /**

package/src/v2/components/chat/tool-call-group-parts.ts

@@ -1,6 +1,16 @@
 import { defineComponent, h, onMounted, ref, watch } from "vue";
 import type { PropType } from "vue";
-import { partialJSONParse } from "@copilotkit/shared";
+import {
+  ɵcountFailedToolCalls,
+  ɵformatLabel,
+  ɵgetArgumentPreview,
+  ɵstringifyToolCallPayload,
+} from "@copilotkit/core";
+import type {
+  CopilotChatLabels,
+  ToolCallEntry,
+  ɵToolCallRowStatus,
+} from "@copilotkit/core";
 import {
   IconCheck,
   IconChevronRight,
@@ -9,83 +19,25 @@ import {
   IconX,
 } from "../icons";
 import { useCopilotId } from "../ui/use-id";
-import type { ToolCallEntry } from "./tool-call-layout";
-
-/** A call that never got a result after the run ended (Stop, an error) is "stopped". */
-export type ToolCallStatusName = "running" | "done" | "failed" | "stopped";
+import { useChatLabels } from "./use-chat-labels";
 
 /**
- * A call without a result is running only while the group is active: once
- * the run has moved on or ended, its result is never coming.
+ * The label for a tool call's status ("Running", "Done", ...).
  * @internal
  */
-export const entryStatus = (
-  { toolMessage }: ToolCallEntry,
-  active: boolean,
-): ToolCallStatusName =>
-  toolMessage
-    ? toolMessage.error
-      ? "failed"
-      : "done"
-    : active
-      ? "running"
-      : "stopped";
-
-/** @internal */
-export const statusLabels: Record<ToolCallStatusName, string> = {
-  running: "Running",
-  done: "Done",
-  failed: "Failed",
-  stopped: "Stopped",
-};
-
-/** The first non-empty string argument: usually a command, path or query. */
-export function argumentPreview(parameters: unknown): string | undefined {
-  if (!parameters || typeof parameters !== "object") return undefined;
-  const value = Object.values(parameters).find(
-    (v): v is string => typeof v === "string" && v.trim().length > 0,
-  );
-  return value?.replace(/\s+/g, " ");
-}
-
-/** @internal */
-export const entryPreview = (entry: ToolCallEntry) =>
-  argumentPreview(partialJSONParse(entry.toolCall.function.arguments));
-
-/** "run_command ×2, read_file" */
-export function toolNames(calls: ToolCallEntry[]): string {
-  const counts = new Map<string, number>();
-  for (const { toolCall } of calls) {
-    const name = toolCall.function.name;
-    counts.set(name, (counts.get(name) ?? 0) + 1);
-  }
-  return [...counts]
-    .map(([name, count]) => (count > 1 ? `${name} ×${count}` : name))
-    .join(", ");
-}
-
-/** @internal */
-export const pluralize = (count: number, noun: string) =>
-  `${count} ${noun}${count === 1 ? "" : "s"}`;
-
-/**
- * Guarded JSON.stringify for the payload blocks. A circular reference would
- * otherwise crash the render.
- */
-function stringifyPayload(value: unknown): string {
-  if (typeof value === "string") return value;
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch (err) {
-    console.warn(
-      "[CopilotKit] Failed to JSON.stringify tool-call payload; falling back to String():",
-      err,
-    );
-    try {
-      return String(value);
-    } catch {
-      return "[unserializable]";
-    }
+export function toolCallStatusLabel(
+  labels: Readonly<CopilotChatLabels>,
+  status: ɵToolCallRowStatus,
+) {
+  switch (status) {
+    case "running":
+      return labels.toolCallStatusRunningLabel;
+    case "done":
+      return labels.toolCallStatusDoneLabel;
+    case "failed":
+      return labels.toolCallStatusFailedLabel;
+    case "stopped":
+      return labels.toolCallStatusStoppedLabel;
   }
 }
 
@@ -125,7 +77,7 @@ export const ToolCallStatusIcon = defineComponent({
   name: "ToolCallStatusIcon",
   props: {
     status: {
-      type: String as PropType<ToolCallStatusName>,
+      type: String as PropType<ɵToolCallRowStatus>,
       required: true,
     },
   },
@@ -173,15 +125,14 @@ export const ToolCallFailedCount = defineComponent({
     calls: { type: Array as PropType<ToolCallEntry[]>, required: true },
   },
   setup(props) {
+    const labels = useChatLabels();
     return () => {
-      const failed = props.calls.filter(
-        (call) => call.toolMessage?.error,
-      ).length;
+      const failed = ɵcountFailedToolCalls(props.calls);
       if (!failed) return null;
       return h(
         "span",
         { class: "cpk-tool-call-failed-count" },
-        `${failed} failed`,
+        ɵformatLabel(labels.value.toolCallFailedCountLabel, { count: failed }),
       );
     };
   },
@@ -190,7 +141,11 @@ export const ToolCallFailedCount = defineComponent({
 function payload(label: string, value: unknown) {
   return h("div", [
     h("div", { class: "cpk-tool-call-payload-label" }, label),
-    h("pre", { class: "cpk-tool-call-payload-code" }, stringifyPayload(value)),
+    h(
+      "pre",
+      { class: "cpk-tool-call-payload-code" },
+      ɵstringifyToolCallPayload(value),
+    ),
   ]);
 }
 
@@ -206,7 +161,7 @@ export const ToolCallRow = defineComponent({
     parameters: { type: null, default: undefined },
     result: { type: null, default: undefined },
     status: {
-      type: String as PropType<ToolCallStatusName>,
+      type: String as PropType<ɵToolCallRowStatus>,
       required: true,
     },
     appearance: {
@@ -217,8 +172,9 @@ export const ToolCallRow = defineComponent({
   setup(props) {
     const open = ref(false);
     const detailsId = useCopilotId("cpk-tool-call-row");
+    const labels = useChatLabels();
     return () => {
-      const preview = argumentPreview(props.parameters);
+      const preview = ɵgetArgumentPreview(props.parameters);
       // Rows draw their own divider: a wrapper with `display: contents`
       // around each call would escape a parent's divide-y.
       return h(
@@ -261,7 +217,7 @@ export const ToolCallRow = defineComponent({
                   "data-testid": "copilot-tool-render-status",
                   class: "cpk-tool-call-row-status",
                 },
-                statusLabels[props.status],
+                toolCallStatusLabel(labels.value, props.status),
               ),
               h(IconChevronRight, {
                 "aria-hidden": "true",
@@ -278,9 +234,12 @@ export const ToolCallRow = defineComponent({
               "div",
               { class: "cpk-tool-call-payloads cpk-tool-call-row-payloads" },
               [
-                payload("Arguments", props.parameters ?? {}),
+                payload(
+                  labels.value.toolCallArgumentsLabel,
+                  props.parameters ?? {},
+                ),
                 props.result !== undefined
-                  ? payload("Result", props.result)
+                  ? payload(labels.value.toolCallResultLabel, props.result)
                   : null,
               ],
             ),

package/src/v2/components/chat/turn-work.ts

@@ -3,15 +3,6 @@ import type { FunctionalComponent } from "vue";
 import { CopilotChatCollapsible } from "./tool-call-group-parts";
 import { ToolCallDisplayContextKey } from "./tool-call-display-context";
 
-/** "45s", "1m 5s", "2m". Used for the live timer and the final duration. */
-export function formatDuration(ms: number): string {
-  const seconds = Math.max(0, Math.floor(ms / 1000));
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.floor(seconds / 60);
-  const rest = seconds % 60;
-  return rest ? `${minutes}m ${rest}s` : `${minutes}m`;
-}
-
 /**
  * Folds its content away with a reply's work in the `"turn"` display. Without
  * `open` (any other display) it renders the content as is.

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 } from "./normalize-auto-scroll";
 
 export type CopilotChatInputMode = "input" | "transcribe" | "processing";
 export type { Attachment, AttachmentsConfig, AttachmentModality };

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/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");
   });
 });