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

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

@@ -1,92 +1,31 @@
 import { defineComponent, h, onMounted, ref, watch } from "vue";
 import type { PropType } from "vue";
-import { partialJSONParse } from "@copilotkit/shared";
 import {
-  IconCheck,
-  IconChevronRight,
-  IconCircle,
-  IconLoader2,
-  IconX,
-} from "../icons";
+  ɵTOOL_CALL_STATUS_ICONS,
+  ɵTOOL_CALL_STATUS_LABEL_KEYS,
+  ɵcountFailedToolCalls,
+  ɵformatLabel,
+  ɵgetArgumentPreview,
+  ɵstringifyToolCallPayload,
+} from "@copilotkit/core";
+import type {
+  CopilotChatLabels,
+  ToolCallEntry,
+  ɵToolCallRowStatus,
+} from "@copilotkit/core";
+import { CopilotIcon, IconChevronRight } 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,
+) {
+  return labels[ɵTOOL_CALL_STATUS_LABEL_KEYS[status]];
 }
 
 /**
@@ -125,28 +64,21 @@ export const ToolCallStatusIcon = defineComponent({
   name: "ToolCallStatusIcon",
   props: {
     status: {
-      type: String as PropType<ToolCallStatusName>,
+      type: String as PropType<ɵToolCallRowStatus>,
       required: true,
     },
   },
   setup(props) {
     return () =>
-      h(
-        {
-          running: IconLoader2,
-          done: IconCheck,
-          failed: IconX,
-          stopped: IconCircle,
-        }[props.status],
-        {
-          "aria-hidden": "true",
-          class: [
-            "cpk-tool-call-status-icon",
-            props.status === "running" && "cpk-tool-call-status-icon-running",
-            props.status === "failed" && "cpk-tool-call-status-icon-failed",
-          ],
-        },
-      );
+      h(CopilotIcon, {
+        name: ɵTOOL_CALL_STATUS_ICONS[props.status],
+        "aria-hidden": "true",
+        class: [
+          "cpk-tool-call-status-icon",
+          props.status === "running" && "cpk-tool-call-status-icon-running",
+          props.status === "failed" && "cpk-tool-call-status-icon-failed",
+        ],
+      });
   },
 });
 
@@ -173,15 +105,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 +121,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 +141,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 +152,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 +197,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 +214,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 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");