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

package/src/v2/components/chat/message-feedback.ts

@@ -0,0 +1,291 @@
+import type { AssistantMessage } from "@ag-ui/core";
+import type { CopilotKitCore } from "@copilotkit/core";
+import { computed, inject, onBeforeUnmount, ref, shallowRef, watch } from "vue";
+import type { ComputedRef, InjectionKey, Ref } from "vue";
+import {
+  getMessageFeedback,
+  setMessageFeedback,
+  subscribeToMessageFeedback,
+} from "../../lib/message-feedback";
+import type {
+  MessageFeedback,
+  MessageFeedbackRating,
+} from "../../lib/message-feedback";
+
+/** The chat whose assistant messages collect feedback for Learning. */
+export interface MessageFeedbackScope {
+  readonly copilotkit: CopilotKitCore;
+  readonly agentId: string;
+  readonly threadId: string;
+}
+
+/**
+ * Provided by the message view while Learning is on for this chat. Assistant
+ * messages without it show thumbs only when the app passes its own handlers
+ * or thumb slots.
+ * @internal
+ */
+export const MessageFeedbackScopeKey: InjectionKey<
+  Ref<MessageFeedbackScope | null>
+> = Symbol("CopilotMessageFeedbackScope");
+
+// Cores that captured since Learning was configured, for chats that mount
+// while capture reconnects or is stopped. A Core leaves when its config goes.
+const capturedCores = new WeakSet<CopilotKitCore>();
+
+const rememberCapture = (copilotkit: CopilotKitCore) => {
+  if (capturedCores.has(copilotkit)) return;
+  capturedCores.add(copilotkit);
+  const unsubscribe = copilotkit.ɵsubscribeToLearningConfigured(() => {
+    if (copilotkit.ɵlearningConfigured) return;
+    capturedCores.delete(copilotkit);
+    unsubscribe();
+  });
+};
+
+/**
+ * Whether the thumbs record feedback for Learning. True once a Trajectory of
+ * this Core has started and as long as Learning stays configured, also while
+ * capture reconnects or is stopped, so the buttons do not flicker. Ratings
+ * given meanwhile still show but, like any Trajectory event, are not sent.
+ * @internal
+ */
+export function useLearningFeedbackEnabled(
+  copilotkit: Ref<CopilotKitCore>,
+): ComputedRef<boolean> {
+  const configured = ref(false);
+  const capturing = ref(false);
+
+  watch(
+    copilotkit,
+    (core, _previous, onCleanup) => {
+      const read = () => {
+        configured.value = core.ɵlearningConfigured;
+        capturing.value = core.trajectoryId !== null;
+        if (capturing.value) rememberCapture(core);
+      };
+      read();
+      const unsubscribeConfigured = core.ɵsubscribeToLearningConfigured(read);
+      const subscription = core.subscribe({ onTrajectoryChanged: read });
+      onCleanup(() => {
+        unsubscribeConfigured();
+        subscription.unsubscribe();
+      });
+    },
+    { immediate: true },
+  );
+
+  return computed(
+    () =>
+      configured.value &&
+      (capturing.value || capturedCores.has(copilotkit.value)),
+  );
+}
+
+/** Current feedback for one assistant message, and how to change it. */
+export interface MessageFeedbackControls {
+  readonly feedback: MessageFeedback | undefined;
+  /** Gives `rating`; a different rating than before starts without a comment. */
+  readonly rate: (rating: MessageFeedbackRating) => void;
+  /** Removes the rating and its comment. */
+  readonly clear: () => void;
+  /** Sets the current rating's comment; an empty one removes it. */
+  readonly comment: (comment: string) => void;
+}
+
+/** Feedback controls for `message`, or `null` when this chat collects none. */
+export function useMessageFeedback(
+  message: Ref<AssistantMessage>,
+): ComputedRef<MessageFeedbackControls | null> {
+  const scope = inject(MessageFeedbackScopeKey, ref(null));
+  // Bumped by the store whenever a rating in this Thread changes.
+  const version = ref(0);
+
+  watch(
+    scope,
+    (current, _previous, onCleanup) => {
+      if (!current) return;
+      onCleanup(
+        subscribeToMessageFeedback(current.agentId, current.threadId, () => {
+          version.value++;
+        }),
+      );
+    },
+    { immediate: true },
+  );
+
+  return computed(() => {
+    const current = scope.value;
+    if (!current) return null;
+    void version.value;
+    const target = message.value;
+    const feedback = getMessageFeedback(
+      current.agentId,
+      current.threadId,
+      target.id,
+    );
+    const save = (next: MessageFeedback | null) =>
+      setMessageFeedback({ ...current, message: target, feedback: next });
+    return {
+      feedback,
+      rate: (rating) => {
+        if (feedback?.rating !== rating) save({ rating });
+      },
+      clear: () => {
+        if (feedback) save(null);
+      },
+      comment: (comment) => {
+        if (feedback) save({ rating: feedback.rating, comment });
+      },
+    };
+  });
+}
+
+/**
+ * How long the pointer may be away from the rating and its comment before the
+ * comment closes: enough to cross the gap between them, short enough that
+ * passing over a rating does not leave it open.
+ */
+export const FEEDBACK_COMMENT_CLOSE_DELAY_MS = 150;
+
+/** The comment popover of one rated message: when it shows and what it holds. */
+export interface FeedbackComment {
+  readonly open: Ref<boolean>;
+  /** The comment being edited. */
+  readonly draft: Ref<string>;
+  /** Grows each time the field should take focus: after a keyboard rating. */
+  readonly focusRequest: Ref<number>;
+  /** Whether a focus request waits; reading it answers the request. */
+  readonly takeFocusRequest: () => boolean;
+  /** The comment field, for moving focus into it. */
+  readonly input: Ref<HTMLInputElement | null>;
+  /** Opens with `comment` in the field. */
+  readonly show: (options: { comment: string; focus: boolean }) => void;
+  /** The pointer or focus reached the rating or the popover. */
+  readonly enter: (via?: "pointer" | "focus") => void;
+  /**
+   * It left them: close soon, unless the user is editing the comment or, when
+   * focus left, the pointer is still on the rating or the popover.
+   */
+  readonly leave: (via?: "pointer" | "focus") => void;
+  /** Tracks whether focus is in the comment form. */
+  readonly setEditing: (editing: boolean) => void;
+  /** Closes, saving a changed comment unless `save` is false. */
+  readonly close: (options?: { save?: boolean }) => void;
+  /** Moves focus back to the thumb without opening the comment again. */
+  readonly returnFocus: (target: HTMLElement | null) => void;
+}
+
+/**
+ * Drives the comment popover of a rated message, as React's
+ * `useFeedbackComment` does.
+ *
+ * It opens when a rating is given and whenever the pointer or keyboard focus
+ * reaches the chosen thumb, with the saved comment in the field. It closes by
+ * itself shortly after the pointer leaves the thumb and the popover, unless
+ * focus is in the field: then it stays until focus moves away, Enter, or
+ * Escape. Closing saves a changed comment; Escape, a click on a thumb, and
+ * removing the rating discard it.
+ * @internal
+ */
+export function useFeedbackComment(
+  controls: Ref<MessageFeedbackControls | null>,
+): FeedbackComment {
+  const open = ref(false);
+  const draft = ref("");
+  const focusRequest = ref(0);
+  const input = shallowRef<HTMLInputElement | null>(null);
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let editing = false;
+  let focusWaiting = false;
+  // Whether the pointer is on the chosen thumb or the popover. Browsers that
+  // do not focus a clicked button move focus to nothing while it stays there.
+  let pointerOver = false;
+  // Set while focus moves back to the thumb, whose focus would open it again.
+  let returning = false;
+
+  const takeFocusRequest = () => {
+    const waiting = focusWaiting;
+    focusWaiting = false;
+    return waiting;
+  };
+
+  const cancelClose = () => {
+    if (timer === undefined) return;
+    clearTimeout(timer);
+    timer = undefined;
+  };
+
+  const savedComment = () => controls.value?.feedback?.comment ?? "";
+
+  const close = ({ save = true }: { save?: boolean } = {}) => {
+    cancelClose();
+    focusWaiting = false;
+    pointerOver = false;
+    if (!open.value) return;
+    const current = controls.value;
+    if (save && current?.feedback && draft.value.trim() !== savedComment())
+      current.comment(draft.value);
+    editing = false;
+    open.value = false;
+  };
+
+  const show = ({ comment, focus }: { comment: string; focus: boolean }) => {
+    cancelClose();
+    draft.value = comment;
+    if (focus) {
+      focusWaiting = true;
+      focusRequest.value++;
+    }
+    open.value = true;
+  };
+
+  // A message that unmounts (scrolled out of a virtual list) keeps its edit.
+  onBeforeUnmount(() => {
+    cancelClose();
+    const current = controls.value;
+    if (
+      open.value &&
+      current?.feedback &&
+      draft.value.trim() !== savedComment()
+    )
+      current.comment(draft.value);
+  });
+
+  return {
+    open,
+    draft,
+    focusRequest,
+    takeFocusRequest,
+    input,
+    show,
+    enter: (via = "focus") => {
+      cancelClose();
+      if (via === "pointer") pointerOver = true;
+      if (returning) return;
+      if (!open.value && controls.value?.feedback)
+        show({ comment: savedComment(), focus: false });
+    },
+    leave: (via = "focus") => {
+      if (via === "pointer") pointerOver = false;
+      else if (pointerOver) return;
+      cancelClose();
+      timer = setTimeout(() => {
+        timer = undefined;
+        if (!editing) close();
+      }, FEEDBACK_COMMENT_CLOSE_DELAY_MS);
+    },
+    setEditing: (value) => {
+      editing = value;
+    },
+    close,
+    returnFocus: (target) => {
+      returning = true;
+      try {
+        target?.focus();
+      } finally {
+        returning = false;
+      }
+    },
+  };
+}

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

@@ -0,0 +1,55 @@
+import { defineComponent, h, ref, watch } from "vue";
+import type { PropType, Ref } from "vue";
+import type { CopilotKitCore } from "@copilotkit/core";
+
+/**
+ * Whether interaction capture is configured on the core. Driven by the
+ * learning config, not by the Trajectory, so a wrapper keyed on it does not
+ * remount the tool UI on every reconnect.
+ * @internal
+ */
+export function useLearningConfigured(
+  copilotkit: Ref<CopilotKitCore>,
+): Readonly<Ref<boolean>> {
+  const configured = ref(false);
+  watch(
+    copilotkit,
+    (core, _previous, onCleanup) => {
+      configured.value = core.ɵlearningConfigured;
+      onCleanup(
+        core.ɵsubscribeToLearningConfigured(() => {
+          configured.value = core.ɵlearningConfigured;
+        }),
+      );
+    },
+    { immediate: true },
+  );
+  return configured;
+}
+
+/**
+ * Wraps a tool call's UI in `data-tool-call-id` while learning is configured,
+ * so interaction capture can attribute clicks to the tool call. The wrapper
+ * uses `display: contents`, so it does not change the layout.
+ * @internal
+ */
+export const ToolCallCaptureScope = defineComponent({
+  name: "ToolCallCaptureScope",
+  props: {
+    toolCallId: { type: String, required: true },
+    enabled: { type: Boolean as PropType<boolean>, required: true },
+  },
+  setup(props, { slots }) {
+    return () =>
+      props.enabled
+        ? h(
+            "div",
+            {
+              "data-tool-call-id": props.toolCallId,
+              style: { display: "contents" },
+            },
+            slots.default?.(),
+          )
+        : slots.default?.();
+  },
+});

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

@@ -0,0 +1,28 @@
+import type { ComputedRef, InjectionKey } from "vue";
+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 const ToolCallDisplayContextKey: InjectionKey<
+  ComputedRef<ɵToolCallDisplayContextValue>
+> = Symbol("CopilotChatToolCallDisplay");
+
+/**
+ * Provided by a group around the calls it shows, so CopilotKit's built-in tool
+ * card draws itself as a compact row that fits the group instead of a card.
+ * @internal
+ */
+export interface ToolCallGroupContextValue {
+  appearance: "card" | "line" | "stack";
+  failedIds: ReadonlySet<string>;
+  /** The agent may still finish the group's calls; see `isActive`. */
+  active: boolean;
+}
+
+/** @internal */
+export const ToolCallGroupContextKey: InjectionKey<
+  ComputedRef<ToolCallGroupContextValue | null>
+> = Symbol("CopilotChatToolCallGroup");

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

@@ -0,0 +1,251 @@
+import { defineComponent, h, onMounted, ref, watch } from "vue";
+import type { PropType } from "vue";
+import {
+  ɵcountFailedToolCalls,
+  ɵformatLabel,
+  ɵgetArgumentPreview,
+  ɵstringifyToolCallPayload,
+} from "@copilotkit/core";
+import type {
+  CopilotChatLabels,
+  ToolCallEntry,
+  ɵToolCallRowStatus,
+} from "@copilotkit/core";
+import {
+  IconCheck,
+  IconChevronRight,
+  IconCircle,
+  IconLoader2,
+  IconX,
+} from "../icons";
+import { useCopilotId } from "../ui/use-id";
+import { useChatLabels } from "./use-chat-labels";
+
+/**
+ * The label for a tool call's status ("Running", "Done", ...).
+ * @internal
+ */
+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;
+  }
+}
+
+/**
+ * Height transition between closed and its content's height. Closed content
+ * stays mounted (so its state survives) but is inert.
+ * @internal
+ */
+export const CopilotChatCollapsible = defineComponent({
+  name: "CopilotChatCollapsible",
+  props: {
+    open: { type: Boolean, required: true },
+    id: { type: String, default: undefined },
+  },
+  setup(props, { slots }) {
+    const root = ref<HTMLElement | null>(null);
+    // Set as an attribute, so closed content leaves the tab order everywhere.
+    const syncInert = () => root.value?.toggleAttribute("inert", !props.open);
+    onMounted(syncInert);
+    watch(() => props.open, syncInert, { flush: "post" });
+    return () =>
+      h(
+        "div",
+        {
+          ref: root,
+          id: props.id,
+          class: "cpk-collapsible",
+          style: { gridTemplateRows: props.open ? "1fr" : "0fr" },
+        },
+        [h("div", { class: "cpk-collapsible-content" }, slots.default?.())],
+      );
+  },
+});
+
+/** @internal */
+export const ToolCallStatusIcon = defineComponent({
+  name: "ToolCallStatusIcon",
+  props: {
+    status: {
+      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",
+          ],
+        },
+      );
+  },
+});
+
+/** @internal */
+export const ToolCallChevron = defineComponent({
+  name: "ToolCallChevron",
+  props: { open: { type: Boolean, required: true } },
+  setup(props) {
+    return () =>
+      h(IconChevronRight, {
+        "aria-hidden": "true",
+        class: [
+          "cpk-tool-call-chevron",
+          props.open && "cpk-tool-call-chevron-open",
+        ],
+      });
+  },
+});
+
+/** "2 failed", or nothing. @internal */
+export const ToolCallFailedCount = defineComponent({
+  name: "ToolCallFailedCount",
+  props: {
+    calls: { type: Array as PropType<ToolCallEntry[]>, required: true },
+  },
+  setup(props) {
+    const labels = useChatLabels();
+    return () => {
+      const failed = ɵcountFailedToolCalls(props.calls);
+      if (!failed) return null;
+      return h(
+        "span",
+        { class: "cpk-tool-call-failed-count" },
+        ɵformatLabel(labels.value.toolCallFailedCountLabel, { count: failed }),
+      );
+    };
+  },
+});
+
+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" },
+      ɵstringifyToolCallPayload(value),
+    ),
+  ]);
+}
+
+/**
+ * The built-in tool card drawn as a row inside a group: status, name and main
+ * argument, opening to the payloads.
+ * @internal
+ */
+export const ToolCallRow = defineComponent({
+  name: "ToolCallRow",
+  props: {
+    name: { type: String, required: true },
+    parameters: { type: null, default: undefined },
+    result: { type: null, default: undefined },
+    status: {
+      type: String as PropType<ɵToolCallRowStatus>,
+      required: true,
+    },
+    appearance: {
+      type: String as PropType<"card" | "line" | "stack">,
+      required: true,
+    },
+  },
+  setup(props) {
+    const open = ref(false);
+    const detailsId = useCopilotId("cpk-tool-call-row");
+    const labels = useChatLabels();
+    return () => {
+      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(
+        "div",
+        {
+          "data-copilotkit": "",
+          class: ["cpk-tool-call-row", `cpk-tool-call-row-${props.appearance}`],
+        },
+        [
+          h(
+            "button",
+            {
+              type: "button",
+              "aria-expanded": open.value ? "true" : "false",
+              "aria-controls": detailsId,
+              onClick: () => {
+                open.value = !open.value;
+              },
+              class: "cpk-tool-call-row-button",
+            },
+            [
+              h(ToolCallStatusIcon, { status: props.status }),
+              h(
+                "span",
+                {
+                  "data-testid": "copilot-tool-render-name",
+                  class: [
+                    "cpk-tool-call-row-name",
+                    props.status === "running" && "cpk-shimmer",
+                  ],
+                },
+                props.name,
+              ),
+              preview
+                ? h("span", { class: "cpk-tool-call-row-preview" }, preview)
+                : null,
+              h(
+                "span",
+                {
+                  "data-testid": "copilot-tool-render-status",
+                  class: "cpk-tool-call-row-status",
+                },
+                toolCallStatusLabel(labels.value, props.status),
+              ),
+              h(IconChevronRight, {
+                "aria-hidden": "true",
+                class: [
+                  "cpk-tool-call-chevron",
+                  open.value && "cpk-tool-call-chevron-open",
+                  "cpk-tool-call-row-chevron",
+                ],
+              }),
+            ],
+          ),
+          h(CopilotChatCollapsible, { open: open.value, id: detailsId }, () => [
+            h(
+              "div",
+              { class: "cpk-tool-call-payloads cpk-tool-call-row-payloads" },
+              [
+                payload(
+                  labels.value.toolCallArgumentsLabel,
+                  props.parameters ?? {},
+                ),
+                props.result !== undefined
+                  ? payload(labels.value.toolCallResultLabel, props.result)
+                  : null,
+              ],
+            ),
+          ]),
+        ],
+      );
+    };
+  },
+});

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

@@ -0,0 +1,52 @@
+import { defineComponent, h, inject } from "vue";
+import type { FunctionalComponent } from "vue";
+import { CopilotChatCollapsible } from "./tool-call-group-parts";
+import { ToolCallDisplayContextKey } from "./tool-call-display-context";
+
+/**
+ * Folds its content away with a reply's work in the `"turn"` display. Without
+ * `open` (any other display) it renders the content as is.
+ * @internal
+ */
+export const TurnWorkFold: FunctionalComponent<{ open?: boolean }> = (
+  props,
+  { slots },
+) =>
+  props.open === undefined
+    ? slots.default?.()
+    : h(CopilotChatCollapsible, { open: props.open }, slots);
+TurnWorkFold.props = ["open"];
+
+/**
+ * In the `"turn"` tool-call display, text in a reply's working phase was
+ * narration: it fades to muted once a call follows it, and folds away with the
+ * rest of the work when the reply is done. The wrapper is there for every
+ * message in that display, so text that turns into narration keeps its node
+ * (and its place) rather than remounting.
+ * @internal
+ */
+export const CopilotChatWorkText = defineComponent({
+  name: "CopilotChatWorkText",
+  props: { messageId: { type: String, required: true } },
+  setup(props, { slots }) {
+    const context = inject(ToolCallDisplayContextKey, null);
+    return () => {
+      if (context?.value.display !== "turn") return slots.default?.();
+      const open = context.value.workTextOpen.get(props.messageId);
+      return h(
+        CopilotChatCollapsible,
+        { open: open ?? true, class: "cpk-assistant-message-work-text" },
+        () => [
+          h(
+            "div",
+            {
+              class: "cpk-assistant-message-work-text-content",
+              "data-work-text": open === undefined ? "reply" : "narration",
+            },
+            slots.default?.(),
+          ),
+        ],
+      );
+    };
+  },
+});