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

package/src/v2/components/ui/floating.ts

@@ -0,0 +1,321 @@
+import { onBeforeUnmount, ref, watch } from "vue";
+import type { CSSProperties, Ref } from "vue";
+
+/**
+ * Positions floating UI (tooltips, popovers, menus) next to an element, the
+ * way React's Radix primitives do: fixed to the viewport, flipped to the other
+ * side when it does not fit, and shifted along its side to stay on screen.
+ * Floating content sits in a wrapper that carries the position, so the
+ * content's own enter and exit animations can use `transform`.
+ * @internal
+ */
+
+export type FloatingSide = "top" | "right" | "bottom" | "left";
+export type FloatingAlign = "start" | "center" | "end";
+
+export interface FloatingOptions {
+  side?: FloatingSide;
+  align?: FloatingAlign;
+  /** Distance from the reference element, in px. */
+  sideOffset?: number;
+  /** Shift along the side, in px, for `start` and `end`. */
+  alignOffset?: number;
+  /** Space kept between the content and the viewport edge, in px. */
+  collisionPadding?: number;
+  /** Size of an arrow drawn on the content, in px (added to the offset). */
+  arrowSize?: number;
+}
+
+export interface FloatingPlacement {
+  x: number;
+  y: number;
+  side: FloatingSide;
+  align: FloatingAlign;
+  /** Room left between the reference element and the viewport edge. */
+  availableWidth: number;
+  availableHeight: number;
+  /** The reference element's center on the content, for its arrow. */
+  arrowX?: number;
+  arrowY?: number;
+  transformOrigin: string;
+}
+
+const OPPOSITE: Record<FloatingSide, FloatingSide> = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left",
+};
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), Math.max(min, max));
+
+/** Where content of `size` goes next to `reference` in a `viewport`. */
+export function computeFloatingPlacement(
+  reference: Pick<
+    DOMRect,
+    "top" | "left" | "right" | "bottom" | "width" | "height"
+  >,
+  size: { width: number; height: number },
+  viewport: { width: number; height: number },
+  options: FloatingOptions = {},
+): FloatingPlacement {
+  const {
+    side: preferredSide = "bottom",
+    align = "center",
+    sideOffset = 0,
+    alignOffset = 0,
+    collisionPadding = 0,
+    arrowSize = 0,
+  } = options;
+  const offset = sideOffset + arrowSize;
+
+  const space = (side: FloatingSide) =>
+    ({
+      top: reference.top,
+      bottom: viewport.height - reference.bottom,
+      left: reference.left,
+      right: viewport.width - reference.right,
+    })[side] -
+    offset -
+    collisionPadding;
+  const needed = (side: FloatingSide) =>
+    side === "top" || side === "bottom" ? size.height : size.width;
+
+  let side = preferredSide;
+  const opposite = OPPOSITE[preferredSide];
+  if (
+    space(side) < needed(side) &&
+    space(opposite) >= needed(opposite) &&
+    space(opposite) > space(side)
+  ) {
+    side = opposite;
+  }
+
+  const vertical = side === "top" || side === "bottom";
+  let x: number;
+  let y: number;
+  if (vertical) {
+    y =
+      side === "top"
+        ? reference.top - size.height - offset
+        : reference.bottom + offset;
+    x =
+      align === "start"
+        ? reference.left + alignOffset
+        : align === "end"
+          ? reference.right - size.width - alignOffset
+          : reference.left + reference.width / 2 - size.width / 2;
+    x = clamp(
+      x,
+      collisionPadding,
+      viewport.width - size.width - collisionPadding,
+    );
+  } else {
+    x =
+      side === "left"
+        ? reference.left - size.width - offset
+        : reference.right + offset;
+    y =
+      align === "start"
+        ? reference.top + alignOffset
+        : align === "end"
+          ? reference.bottom - size.height - alignOffset
+          : reference.top + reference.height / 2 - size.height / 2;
+    y = clamp(
+      y,
+      collisionPadding,
+      viewport.height - size.height - collisionPadding,
+    );
+  }
+
+  const arrowX = vertical
+    ? clamp(reference.left + reference.width / 2 - x, 0, size.width)
+    : undefined;
+  const arrowY = vertical
+    ? undefined
+    : clamp(reference.top + reference.height / 2 - y, 0, size.height);
+  const transformOrigin = vertical
+    ? `${arrowX}px ${side === "top" ? `${size.height + arrowSize}px` : `${-arrowSize}px`}`
+    : `${side === "left" ? `${size.width + arrowSize}px` : `${-arrowSize}px`} ${arrowY}px`;
+
+  return {
+    x,
+    y,
+    side,
+    align,
+    availableWidth: vertical
+      ? viewport.width - 2 * collisionPadding
+      : Math.max(0, space(side)),
+    availableHeight: vertical
+      ? Math.max(0, space(side))
+      : viewport.height - 2 * collisionPadding,
+    arrowX,
+    arrowY,
+    transformOrigin,
+  };
+}
+
+/** Whether `element` is scrolled or clipped fully out of view. */
+export function isElementClippedAway(element: Element): boolean {
+  const rect = element.getBoundingClientRect();
+  const view = element.ownerDocument.defaultView;
+  if (!view) return false;
+  let top = 0;
+  let left = 0;
+  let bottom = view.innerHeight;
+  let right = view.innerWidth;
+  for (
+    let parent = element.parentElement;
+    parent;
+    parent = parent.parentElement
+  ) {
+    const { overflowX, overflowY } = view.getComputedStyle(parent);
+    if (overflowX === "visible" && overflowY === "visible") continue;
+    const clip = parent.getBoundingClientRect();
+    top = Math.max(top, clip.top);
+    left = Math.max(left, clip.left);
+    bottom = Math.min(bottom, clip.bottom);
+    right = Math.min(right, clip.right);
+  }
+  // Strict, so an element that only touches the edge still counts as shown.
+  return (
+    rect.bottom < top ||
+    rect.top > bottom ||
+    rect.right < left ||
+    rect.left > right
+  );
+}
+
+/**
+ * Keeps `floating` placed next to `reference` while `open`: on scroll,
+ * resize, and size changes of either element.
+ */
+export function useFloating(
+  reference: Ref<HTMLElement | null | undefined>,
+  floating: Ref<HTMLElement | null | undefined>,
+  open: Ref<boolean>,
+  options: () => FloatingOptions & { hideWhenDetached?: boolean },
+) {
+  const placement = ref<FloatingPlacement | null>(null);
+  const referenceHidden = ref(false);
+  let cleanup: (() => void) | undefined;
+
+  const update = () => {
+    const referenceElement = reference.value;
+    const floatingElement = floating.value;
+    if (!referenceElement || !floatingElement) return;
+    const view = floatingElement.ownerDocument.defaultView;
+    if (!view) return;
+    const opts = options();
+    placement.value = computeFloatingPlacement(
+      referenceElement.getBoundingClientRect(),
+      {
+        width: floatingElement.offsetWidth,
+        height: floatingElement.offsetHeight,
+      },
+      { width: view.innerWidth, height: view.innerHeight },
+      opts,
+    );
+    referenceHidden.value =
+      !!opts.hideWhenDetached &&
+      (!referenceElement.isConnected || isElementClippedAway(referenceElement));
+  };
+
+  const stop = () => {
+    cleanup?.();
+    cleanup = undefined;
+  };
+
+  watch(
+    [open, reference, floating],
+    ([isOpen, referenceElement, floatingElement]) => {
+      stop();
+      if (!isOpen || !referenceElement || !floatingElement) {
+        if (!isOpen) placement.value = null;
+        return;
+      }
+      update();
+      const view = floatingElement.ownerDocument.defaultView;
+      if (!view) return;
+      let frame = 0;
+      const schedule = () => {
+        if (frame) return;
+        frame = view.requestAnimationFrame(() => {
+          frame = 0;
+          update();
+        });
+      };
+      view.addEventListener("scroll", schedule, {
+        capture: true,
+        passive: true,
+      });
+      view.addEventListener("resize", schedule);
+      const observer =
+        typeof ResizeObserver === "undefined"
+          ? undefined
+          : new ResizeObserver(schedule);
+      observer?.observe(referenceElement);
+      observer?.observe(floatingElement);
+      cleanup = () => {
+        if (frame) view.cancelAnimationFrame(frame);
+        view.removeEventListener("scroll", schedule, { capture: true });
+        view.removeEventListener("resize", schedule);
+        observer?.disconnect();
+      };
+    },
+    { flush: "post", immediate: true },
+  );
+
+  onBeforeUnmount(stop);
+
+  /** Style for the wrapper around the floating content. */
+  const wrapperStyle = (zIndex?: string | number): CSSProperties => {
+    const current = placement.value;
+    return {
+      position: "fixed",
+      left: "0px",
+      top: "0px",
+      minWidth: "max-content",
+      zIndex: zIndex ?? 50,
+      // Off screen until measured, as Radix does.
+      transform: current
+        ? `translate(${Math.round(current.x)}px, ${Math.round(current.y)}px)`
+        : "translate(0, -200%)",
+      visibility: referenceHidden.value ? "hidden" : undefined,
+      pointerEvents: referenceHidden.value ? "none" : undefined,
+    };
+  };
+
+  return { placement, referenceHidden, update, wrapperStyle };
+}
+
+/**
+ * Style for an arrow wrapper on floating content, as Radix places it: on the
+ * edge facing the reference element, centered on it.
+ */
+export function arrowWrapperStyle(
+  placement: FloatingPlacement | null,
+): CSSProperties {
+  if (!placement) return { position: "absolute", visibility: "hidden" };
+  const { side, arrowX, arrowY } = placement;
+  return {
+    position: "absolute",
+    left: arrowX !== undefined ? `${arrowX}px` : undefined,
+    top: arrowY !== undefined ? `${arrowY}px` : undefined,
+    [OPPOSITE[side]]: "0px",
+    transformOrigin: {
+      top: "",
+      right: "0 0",
+      bottom: "center 0",
+      left: "100% 0",
+    }[side],
+    transform: {
+      top: "translateY(100%)",
+      right: "translateY(50%) rotate(90deg) translateX(-50%)",
+      bottom: "rotate(180deg)",
+      left: "translateY(50%) rotate(-90deg) translateX(50%)",
+    }[side],
+    marginLeft: arrowX !== undefined ? "-5px" : undefined,
+  };
+}

package/src/v2/components/ui/presence.ts

@@ -0,0 +1,54 @@
+import { nextTick, onBeforeUnmount, ref, watch } from "vue";
+import type { Ref } from "vue";
+
+/**
+ * Keeps closing content mounted until its exit animation ends, like Radix's
+ * Presence: the content gets `data-state="closed"`, and its CSS animation
+ * (for example `cpk-tooltip-exit`) plays before it unmounts.
+ * @internal
+ */
+export function usePresence(
+  open: Ref<boolean>,
+  element: Ref<HTMLElement | null | undefined>,
+) {
+  const present = ref(open.value);
+  let finish: (() => void) | undefined;
+
+  const stopWaiting = () => {
+    finish?.();
+    finish = undefined;
+  };
+
+  watch(open, async (isOpen) => {
+    stopWaiting();
+    if (isOpen) {
+      present.value = true;
+      return;
+    }
+    // Let `data-state="closed"` reach the DOM, so its animation starts.
+    await nextTick();
+    if (open.value) return;
+    const node = element.value;
+    const view = node?.ownerDocument.defaultView;
+    const animationName = node && view?.getComputedStyle(node).animationName;
+    if (!node || !view || !animationName || animationName === "none") {
+      present.value = false;
+      return;
+    }
+    const done = () => {
+      stopWaiting();
+      if (!open.value) present.value = false;
+    };
+    // A fallback, in case the animation is cancelled without an end event.
+    const timer = view.setTimeout(done, 400);
+    node.addEventListener("animationend", done, { once: true });
+    finish = () => {
+      view.clearTimeout(timer);
+      node.removeEventListener("animationend", done);
+    };
+  });
+
+  onBeforeUnmount(stopWaiting);
+
+  return present;
+}

package/src/v2/components/ui/use-id.ts

@@ -0,0 +1,16 @@
+import * as vue from "vue";
+
+let counter = 0;
+
+/**
+ * A unique id for ARIA references. Uses Vue's SSR-safe `useId()` on Vue 3.5+;
+ * the peer range starts at 3.3, which has none, so older Vue gets a counter.
+ * Read through the namespace, so a Vue without the export does not fail to
+ * import this module.
+ * @internal
+ */
+export function useCopilotId(prefix = "cpk"): string {
+  const vueUseId = (vue as { useId?: () => string }).useId;
+  const id = vueUseId?.();
+  return id ? `${prefix}-${id}` : `${prefix}-${++counter}`;
+}

package/src/v2/hooks/use-default-render-tool.ts

@@ -1,8 +1,10 @@
-import { defineComponent, h, ref } from "vue";
+import { defineComponent, h, inject, ref } from "vue";
 import type { WatchSource } from "vue";
 import type { Component, VNodeChild } from "vue";
 import { ToolCallStatus } from "@copilotkit/core";
 import { useRenderTool } from "./use-render-tool";
+import { ToolCallGroupContextKey } from "../components/chat/tool-call-display-context";
+import { ToolCallRow } from "../components/chat/tool-call-group-parts";
 
 type DefaultRenderProps = {
   name: string;
@@ -135,8 +137,34 @@ const DefaultToolCallRenderer = defineComponent({
   },
   setup(props) {
     const isExpanded = ref(false);
+    const groupContext = inject(ToolCallGroupContextKey, null);
 
     return () => {
+      const group = groupContext?.value;
+      // Inside a group of calls, a row that fits the group instead of a card.
+      if (group) {
+        return h(ToolCallRow, {
+          "data-testid": "copilot-tool-render",
+          "data-tool-name": props.name,
+          "data-tool-call-id": props.toolCallId,
+          "data-status": props.status,
+          "data-args": safeStringifyForAttr(props.parameters),
+          "data-result": safeStringifyForAttr(props.result),
+          name: props.name,
+          parameters: props.parameters,
+          result: props.result,
+          status:
+            props.status === "complete"
+              ? group.failedIds.has(props.toolCallId)
+                ? "failed"
+                : "done"
+              : group.active
+                ? "running"
+                : "stopped",
+          appearance: group.appearance,
+        });
+      }
+
       const isActive =
         props.status === "inProgress" || props.status === "executing";
       const isComplete = props.status === "complete";
@@ -145,7 +173,10 @@ const DefaultToolCallRenderer = defineComponent({
         : isComplete
           ? "Done"
           : props.status;
+      const tone = isActive ? "running" : isComplete ? "done" : "other";
 
+      // Markup and classes match React's DefaultToolCallRenderer; styles live
+      // in @copilotkit/core (default-tool-call.css).
       return h(
         "div",
         {
@@ -155,77 +186,99 @@ const DefaultToolCallRenderer = defineComponent({
           "data-status": props.status,
           "data-args": safeStringifyForAttr(props.parameters),
           "data-result": safeStringifyForAttr(props.result),
-          style: { marginTop: "8px", paddingBottom: "8px" },
+          class: "cpk-default-tool-call",
         },
         [
-          h(
-            "div",
-            {
-              style: {
-                borderRadius: "12px",
-                border: "1px solid #e4e4e7",
-                backgroundColor: "#fafafa",
-                padding: "14px 16px",
-              },
-            },
-            [
-              h(
-                "button",
-                {
-                  type: "button",
-                  "aria-expanded": String(isExpanded.value),
-                  onClick: () => {
-                    isExpanded.value = !isExpanded.value;
-                  },
-                  style: {
-                    width: "100%",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    gap: "10px",
-                    cursor: "pointer",
-                    border: "none",
-                    padding: 0,
-                    margin: 0,
-                    background: "transparent",
-                    textAlign: "left",
-                  },
+          h("div", { class: "cpk-default-tool-call-card" }, [
+            h(
+              "button",
+              {
+                type: "button",
+                "aria-expanded": String(isExpanded.value),
+                onClick: () => {
+                  isExpanded.value = !isExpanded.value;
                 },
-                [
+                class: "cpk-default-tool-call-header",
+                style: { font: "inherit" },
+              },
+              [
+                h("div", { class: "cpk-default-tool-call-title" }, [
                   h(
-                    "span",
+                    "svg",
                     {
-                      "data-testid": "copilot-tool-render-name",
-                      style: { fontWeight: "600" },
+                      class: [
+                        "cpk-default-tool-call-chevron",
+                        isExpanded.value &&
+                          "cpk-default-tool-call-chevron-open",
+                      ],
+                      fill: "none",
+                      viewBox: "0 0 24 24",
+                      "stroke-width": 2,
+                      stroke: "currentColor",
                     },
-                    props.name,
+                    [
+                      h("path", {
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round",
+                        d: "M8.25 4.5l7.5 7.5-7.5 7.5",
+                      }),
+                    ],
                   ),
+                  h("span", {
+                    class: `cpk-default-tool-call-dot cpk-default-tool-call-dot-${tone}`,
+                  }),
                   h(
                     "span",
-                    { "data-testid": "copilot-tool-render-status" },
-                    statusLabel,
+                    {
+                      "data-testid": "copilot-tool-render-name",
+                      class: "cpk-default-tool-call-name",
+                    },
+                    props.name,
                   ),
-                ],
-              ),
-              isExpanded.value
-                ? h("div", { style: { marginTop: "12px" } }, [
-                    h("div", "Arguments"),
-                    h("pre", safeStringifyForPre(props.parameters ?? {})),
-                    props.result !== undefined
-                      ? h("div", [
-                          h("div", "Result"),
-                          h(
-                            "pre",
-                            typeof props.result === "string"
-                              ? props.result
-                              : safeStringifyForPre(props.result),
-                          ),
-                        ])
-                      : null,
-                  ])
-                : null,
-            ],
-          ),
+                ]),
+                h(
+                  "span",
+                  {
+                    "data-testid": "copilot-tool-render-status",
+                    class: `cpk-default-tool-call-badge cpk-default-tool-call-badge-${tone}`,
+                  },
+                  statusLabel,
+                ),
+              ],
+            ),
+            isExpanded.value
+              ? h("div", { class: "cpk-default-tool-call-details" }, [
+                  h("div", [
+                    h(
+                      "div",
+                      { class: "cpk-default-tool-call-label" },
+                      "Arguments",
+                    ),
+                    h(
+                      "pre",
+                      { class: "cpk-default-tool-call-code" },
+                      safeStringifyForPre(props.parameters ?? {}),
+                    ),
+                  ]),
+                  props.result !== undefined
+                    ? h("div", [
+                        h(
+                          "div",
+                          { class: "cpk-default-tool-call-label" },
+                          "Result",
+                        ),
+                        h(
+                          "pre",
+                          { class: "cpk-default-tool-call-code" },
+                          typeof props.result === "string"
+                            ? props.result
+                            : safeStringifyForPre(props.result),
+                        ),
+                      ])
+                    : null,
+                ])
+              : null,
+          ]),
         ],
       );
     };
@@ -259,6 +312,12 @@ export function useDefaultRenderTool(
     render?:
       | ((props: DefaultRenderProps) => VNodeChild)
       | Component<DefaultRenderProps>;
+    /**
+     * Let the chat group calls your `render` draws, like it groups the
+     * built-in card's (see `toolCallDisplay` on `CopilotChatMessageView`).
+     * Off by default for a custom `render`, since it may draw nothing.
+     */
+    group?: boolean;
   },
   deps?: WatchSource<unknown>[],
 ): void {
@@ -312,6 +371,8 @@ export function useDefaultRenderTool(
     {
       name: "*",
       render: registeredRender,
+      // The built-in card draws a row inside a group; a custom render opts in.
+      group: userRender ? config?.group === true : true,
     },
     deps,
   );

package/src/v2/hooks/use-render-tool.ts

@@ -46,6 +46,7 @@ type RenderToolConfig<S extends StandardSchemaV1> = {
     | ((props: RenderToolProps<S>) => VNodeChild)
     | Component<RenderToolProps<S>>;
   agentId?: string;
+  group?: boolean;
 };
 
 export function useRenderTool(
@@ -53,6 +54,8 @@ export function useRenderTool(
     name: "*";
     render: ((props: any) => VNodeChild) | Component<any>;
     agentId?: string;
+    /** Let the chat group the calls this renderer draws (see `toolCallDisplay`). */
+    group?: boolean;
   },
   deps?: WatchSource<unknown>[],
 ): void;
@@ -65,6 +68,8 @@ export function useRenderTool<S extends StandardSchemaV1>(
       | ((props: RenderToolProps<S>) => VNodeChild)
       | Component<RenderToolProps<S>>;
     agentId?: string;
+    /** Let the chat group the calls this renderer draws (see `toolCallDisplay`). */
+    group?: boolean;
   },
   deps?: WatchSource<unknown>[],
 ): void;
@@ -81,6 +86,7 @@ export function useRenderTool<S extends StandardSchemaV1>(
       () => copilotkit.value,
       () => config.name,
       () => config.agentId,
+      () => config.group,
       () => extraDeps.length,
       ...extraDeps,
     ],
@@ -104,6 +110,7 @@ export function useRenderTool<S extends StandardSchemaV1>(
                   parameters: props.args,
                 } as RenderToolProps<S>),
               ...(config.agentId ? { agentId: config.agentId } : {}),
+              ...(config.group ? { group: true } : {}),
             })
           : defineToolCallRenderer({
               name: config.name,
@@ -116,6 +123,7 @@ export function useRenderTool<S extends StandardSchemaV1>(
                   parameters: props.args,
                 } as RenderToolProps<S>),
               ...(config.agentId ? { agentId: config.agentId } : {}),
+              ...(config.group ? { group: true } : {}),
             });
 
       copilotkit.value.addHookRenderToolCall(

package/src/v2/index.ts

@@ -16,6 +16,9 @@ export * from "./components";
 export { vueBasicCatalog } from "./components/a2ui/catalog";
 export * from "./hooks";
 export * from "./providers";
+export { CopilotKitStyles } from "./styles/CopilotKitStyles";
+export type { A2UIMessageRendererOptions } from "./components/A2UIMessageRenderer";
+export type { A2UIRecoveryRendererOptions } from "./components/a2ui/A2UIRecoveryStates";
 export * from "./types";
 export * from "./lib/vue-core";
 export * from "./lib/processPartialHtml";