@copilotkit/vue 2.0.0-rc.0 → 2.0.0-rc.2

package/src/v2/components/ui/CopilotTooltip.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+/**
+ * React's `<Tooltip>` (Radix) for Vue: a label that shows next to its trigger
+ * on hover and on keyboard focus, and hides on pointer leave, blur, a click,
+ * Escape, or a scroll that moves the trigger. The default slot renders the
+ * trigger and must bind `triggerProps` on a focusable element.
+ *
+ * @internal
+ */
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import type { FloatingAlign, FloatingSide } from "./floating";
+import { arrowWrapperStyle, useFloating } from "./floating";
+import { usePresence } from "./presence";
+import { useCopilotId } from "./use-id";
+
+const props = withDefaults(
+  defineProps<{
+    /** Text of the tooltip; the `content` slot replaces it. */
+    content?: string;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    sideOffset?: number;
+    /** Hover time before it opens, in ms. Focus opens it at once. */
+    delayDuration?: number;
+    /** Keeps it closed, for example while the trigger's own popup shows. */
+    suppressed?: boolean;
+    contentClass?: string;
+  }>(),
+  {
+    content: undefined,
+    side: "top",
+    align: "center",
+    sideOffset: 0,
+    delayDuration: 0,
+    suppressed: false,
+    contentClass: undefined,
+  },
+);
+
+defineSlots<{
+  default(props: {
+    triggerProps: Record<string, unknown>;
+    open: boolean;
+  }): unknown;
+  content?(): unknown;
+}>();
+
+// Matches `.cpk-tooltip-arrow` (0.625rem); Radix adds it to the offset.
+const ARROW_SIZE = 10;
+// Time the pointer has to cross from the trigger onto the tooltip.
+const HOVER_GRACE_MS = 100;
+
+const id = useCopilotId("cpk-tooltip");
+const wantsOpen = ref(false);
+const open = computed(() => wantsOpen.value && !props.suppressed);
+const trigger = ref<HTMLElement | null>(null);
+const wrapper = ref<HTMLElement | null>(null);
+const contentElement = ref<HTMLElement | null>(null);
+const present = usePresence(open, contentElement);
+
+const { placement, wrapperStyle } = useFloating(trigger, wrapper, open, () => ({
+  side: props.side,
+  align: props.align,
+  sideOffset: props.sideOffset,
+  arrowSize: ARROW_SIZE,
+}));
+
+let openTimer: ReturnType<typeof setTimeout> | undefined;
+let closeTimer: ReturnType<typeof setTimeout> | undefined;
+let pointerDown = false;
+// Set once the pointer has opened it, until the pointer leaves: after a click
+// closes it, moving over the trigger again does not reopen it.
+let pointerMoveOpened = false;
+
+const clearTimers = () => {
+  clearTimeout(openTimer);
+  clearTimeout(closeTimer);
+  openTimer = undefined;
+  closeTimer = undefined;
+};
+
+const show = () => {
+  clearTimers();
+  if (!props.suppressed) wantsOpen.value = true;
+};
+
+const hide = () => {
+  clearTimers();
+  wantsOpen.value = false;
+};
+
+// A request to open while suppressed is dropped, so the tooltip does not
+// reappear when the suppression ends under a pointer that already left.
+watch(
+  () => props.suppressed,
+  (suppressed) => {
+    if (suppressed) hide();
+  },
+);
+
+const onPointerMove = (event: PointerEvent) => {
+  if (event.pointerType === "touch") return;
+  trigger.value = event.currentTarget as HTMLElement;
+  clearTimeout(closeTimer);
+  closeTimer = undefined;
+  if (pointerMoveOpened || pointerDown) return;
+  pointerMoveOpened = true;
+  if (props.delayDuration > 0) {
+    openTimer = setTimeout(show, props.delayDuration);
+  } else {
+    show();
+  }
+};
+
+const scheduleClose = () => {
+  clearTimeout(openTimer);
+  openTimer = undefined;
+  clearTimeout(closeTimer);
+  closeTimer = setTimeout(hide, HOVER_GRACE_MS);
+};
+
+const onPointerLeave = (event: PointerEvent) => {
+  if (event.pointerType === "touch") return;
+  pointerMoveOpened = false;
+  const next = event.relatedTarget;
+  if (next instanceof Node && contentElement.value?.contains(next)) return;
+  scheduleClose();
+};
+
+const onPointerUp = () => {
+  pointerDown = false;
+};
+
+const onPointerDown = () => {
+  pointerDown = true;
+  document.addEventListener("pointerup", onPointerUp, { once: true });
+  hide();
+};
+
+const onFocus = (event: FocusEvent) => {
+  trigger.value = event.currentTarget as HTMLElement;
+  if (!pointerDown) show();
+};
+
+const triggerProps = computed(() => ({
+  "data-state": open.value ? "delayed-open" : "closed",
+  "aria-describedby": open.value ? id : undefined,
+  onPointermove: onPointerMove,
+  onPointerleave: onPointerLeave,
+  onPointerdown: onPointerDown,
+  onFocus,
+  onBlur: hide,
+  onClick: hide,
+}));
+
+const onKeyDown = (event: KeyboardEvent) => {
+  if (event.key === "Escape") hide();
+};
+
+const onScroll = (event: Event) => {
+  const target = event.target;
+  if (target instanceof Node && target.contains(trigger.value)) hide();
+};
+
+watch(
+  open,
+  (isOpen) => {
+    if (typeof document === "undefined") return;
+    if (isOpen) {
+      document.addEventListener("keydown", onKeyDown);
+      window.addEventListener("scroll", onScroll, { capture: true });
+    } else {
+      document.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("scroll", onScroll, { capture: true });
+    }
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => {
+  clearTimers();
+  if (typeof document === "undefined") return;
+  document.removeEventListener("keydown", onKeyDown);
+  document.removeEventListener("pointerup", onPointerUp);
+  window.removeEventListener("scroll", onScroll, { capture: true });
+});
+
+const contentStyle = computed(() => ({
+  "--radix-tooltip-content-transform-origin":
+    placement.value?.transformOrigin ?? "center",
+}));
+</script>
+
+<template>
+  <slot :trigger-props="triggerProps" :open="open" />
+  <Teleport to="body">
+    <div
+      v-if="present"
+      ref="wrapper"
+      data-radix-popper-content-wrapper
+      :style="wrapperStyle()"
+    >
+      <div
+        :id="id"
+        ref="contentElement"
+        data-copilotkit
+        data-slot="tooltip-content"
+        role="tooltip"
+        class="cpk-tooltip"
+        :class="contentClass"
+        :data-state="open ? 'delayed-open' : 'closed'"
+        :data-side="placement?.side ?? side"
+        :data-align="placement?.align ?? align"
+        :style="contentStyle"
+        @pointerenter="clearTimers"
+        @pointerleave="scheduleClose"
+      >
+        <slot name="content">
+          <p>{{ content }}</p>
+        </slot>
+        <span :style="arrowWrapperStyle(placement)">
+          <svg
+            class="cpk-tooltip-arrow"
+            width="10"
+            height="5"
+            viewBox="0 0 30 10"
+            preserveAspectRatio="none"
+            aria-hidden="true"
+            style="display: block"
+          >
+            <polygon points="0,0 30,0 15,10" />
+          </svg>
+        </span>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/src/v2/components/ui/__tests__/CopilotTooltip.test.ts

@@ -0,0 +1,168 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { defineComponent, h, nextTick, ref } from "vue";
+import { fireEvent, render, screen } from "@testing-library/vue";
+import CopilotTooltip from "../CopilotTooltip.vue";
+import { computeFloatingPlacement } from "../floating";
+
+function renderTooltip(props: Record<string, unknown> = {}) {
+  return render(
+    defineComponent({
+      setup() {
+        return () =>
+          h(
+            CopilotTooltip,
+            { content: "Copy", side: "bottom", ...props },
+            {
+              default: ({
+                triggerProps,
+              }: {
+                triggerProps: Record<string, unknown>;
+              }) =>
+                h("button", {
+                  type: "button",
+                  "aria-label": "Copy",
+                  ...triggerProps,
+                }),
+            },
+          );
+      },
+    }),
+  );
+}
+
+const pointer = (type: string) =>
+  Object.assign(new Event(type, { bubbles: true }), { pointerType: "mouse" });
+
+describe("CopilotTooltip", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    document.body.innerHTML = "";
+  });
+
+  it("opens on keyboard focus, describes the trigger, and closes on blur", async () => {
+    renderTooltip();
+    const button = screen.getByRole("button", { name: "Copy" });
+    expect(screen.queryByRole("tooltip")).toBeNull();
+
+    await fireEvent.focus(button);
+    const tooltip = screen.getByRole("tooltip");
+    expect(tooltip.textContent).toContain("Copy");
+    expect(tooltip.classList.contains("cpk-tooltip")).toBe(true);
+    expect(tooltip.getAttribute("data-side")).toBe("bottom");
+    expect(button.getAttribute("aria-describedby")).toBe(tooltip.id);
+
+    await fireEvent.blur(button);
+    await nextTick();
+    expect(screen.queryByRole("tooltip")).toBeNull();
+    expect(button.getAttribute("aria-describedby")).toBeNull();
+  });
+
+  it("opens on hover and closes when the pointer leaves", async () => {
+    vi.useFakeTimers();
+    renderTooltip();
+    const button = screen.getByRole("button", { name: "Copy" });
+
+    button.dispatchEvent(pointer("pointermove"));
+    await nextTick();
+    expect(screen.getByRole("tooltip")).toBeTruthy();
+
+    button.dispatchEvent(pointer("pointerleave"));
+    await vi.advanceTimersByTimeAsync(200);
+    await nextTick();
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+
+  it("closes on Escape without moving focus", async () => {
+    renderTooltip();
+    const button = screen.getByRole("button", { name: "Copy" });
+    button.focus();
+    await fireEvent.focus(button);
+    expect(screen.getByRole("tooltip")).toBeTruthy();
+
+    await fireEvent.keyDown(document, { key: "Escape" });
+    await nextTick();
+    expect(screen.queryByRole("tooltip")).toBeNull();
+    expect(document.activeElement).toBe(button);
+  });
+
+  it("stays closed while suppressed", async () => {
+    const suppressed = ref(true);
+    render(
+      defineComponent({
+        setup() {
+          return () =>
+            h(
+              CopilotTooltip,
+              { content: "Rate", suppressed: suppressed.value },
+              {
+                default: ({
+                  triggerProps,
+                }: {
+                  triggerProps: Record<string, unknown>;
+                }) => h("button", { type: "button", ...triggerProps }, "Rate"),
+              },
+            );
+        },
+      }),
+    );
+    const button = screen.getByRole("button", { name: "Rate" });
+    await fireEvent.focus(button);
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+});
+
+describe("computeFloatingPlacement", () => {
+  const viewport = { width: 1000, height: 800 };
+  const size = { width: 100, height: 40 };
+
+  it("places content below and centered, with the offset", () => {
+    const reference = {
+      top: 100,
+      bottom: 120,
+      left: 200,
+      right: 240,
+      width: 40,
+      height: 20,
+    };
+    const placement = computeFloatingPlacement(reference, size, viewport, {
+      side: "bottom",
+      sideOffset: 4,
+      arrowSize: 10,
+    });
+    expect(placement.side).toBe("bottom");
+    expect(placement.y).toBe(134);
+    expect(placement.x).toBe(170);
+  });
+
+  it("flips to the other side when there is no room", () => {
+    const reference = {
+      top: 770,
+      bottom: 790,
+      left: 200,
+      right: 240,
+      width: 40,
+      height: 20,
+    };
+    const placement = computeFloatingPlacement(reference, size, viewport, {
+      side: "bottom",
+    });
+    expect(placement.side).toBe("top");
+    expect(placement.y).toBe(730);
+  });
+
+  it("shifts content back inside the viewport", () => {
+    const reference = {
+      top: 100,
+      bottom: 120,
+      left: 0,
+      right: 20,
+      width: 20,
+      height: 20,
+    };
+    const placement = computeFloatingPlacement(reference, size, viewport, {
+      side: "bottom",
+      collisionPadding: 8,
+    });
+    expect(placement.x).toBe(8);
+  });
+});

package/src/v2/components/ui/dropdown-menu.ts

@@ -0,0 +1,15 @@
+/** An entry of a `CopilotDropdownMenuContent`: an item, a submenu, or "-". @internal */
+export type CopilotDropdownMenuEntry = CopilotDropdownMenuItem | "-";
+
+/** @internal */
+export interface CopilotDropdownMenuItem {
+  label: string;
+  action?: () => void;
+  /** Makes the item a submenu trigger. */
+  items?: CopilotDropdownMenuEntry[];
+  /** Extra classes on the item. */
+  class?: string;
+}
+
+/** Why a dropdown menu closed by itself. @internal */
+export type CopilotDropdownMenuDismissReason = "escape" | "tab" | "outside";