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

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

@@ -1,23 +1,30 @@
 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";
+  ɵFeedbackCommentController,
+  ɵgetMessageFeedbackControls,
+  ɵisLearningFeedbackEnabled,
+  ɵsubscribeToLearningFeedbackEnabled,
+  ɵsubscribeToMessageFeedback,
+} from "@copilotkit/core";
+import type {
+  ɵMessageFeedbackControls,
+  ɵMessageFeedbackScope,
+} from "@copilotkit/core";
+import { computed, inject, onBeforeUnmount, ref, shallowRef, watch } from "vue";
 import type {
-  MessageFeedback,
-  MessageFeedbackRating,
-} from "../../lib/message-feedback";
+  ComputedRef,
+  InjectionKey,
+  Ref,
+  ShallowRef,
+  WritableComputedRef,
+} from "vue";
 
 /** The chat whose assistant messages collect feedback for Learning. */
-export interface MessageFeedbackScope {
-  readonly copilotkit: CopilotKitCore;
-  readonly agentId: string;
-  readonly threadId: string;
-}
+export type MessageFeedbackScope = ɵMessageFeedbackScope;
+
+/** Current feedback for one assistant message, and how to change it. */
+export type MessageFeedbackControls = ɵMessageFeedbackControls;
 
 /**
  * Provided by the message view while Learning is on for this chat. Assistant
@@ -29,68 +36,27 @@ 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.
+ * Whether the thumbs record feedback for Learning. See core's
+ * `ɵisLearningFeedbackEnabled` for the rules.
  * @internal
  */
 export function useLearningFeedbackEnabled(
   copilotkit: Ref<CopilotKitCore>,
 ): ComputedRef<boolean> {
-  const configured = ref(false);
-  const capturing = ref(false);
-
+  const enabled = ref(false);
   watch(
     copilotkit,
     (core, _previous, onCleanup) => {
       const read = () => {
-        configured.value = core.ɵlearningConfigured;
-        capturing.value = core.trajectoryId !== null;
-        if (capturing.value) rememberCapture(core);
+        enabled.value = ɵisLearningFeedbackEnabled(core);
       };
       read();
-      const unsubscribeConfigured = core.ɵsubscribeToLearningConfigured(read);
-      const subscription = core.subscribe({ onTrajectoryChanged: read });
-      onCleanup(() => {
-        unsubscribeConfigured();
-        subscription.unsubscribe();
-      });
+      onCleanup(ɵsubscribeToLearningFeedbackEnabled(core, read));
     },
     { 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;
+  return computed(() => enabled.value);
 }
 
 /** Feedback controls for `message`, or `null` when this chat collects none. */
@@ -106,7 +72,7 @@ export function useMessageFeedback(
     (current, _previous, onCleanup) => {
       if (!current) return;
       onCleanup(
-        subscribeToMessageFeedback(current.agentId, current.threadId, () => {
+        ɵsubscribeToMessageFeedback(current.agentId, current.threadId, () => {
           version.value++;
         }),
       );
@@ -118,174 +84,73 @@ export function useMessageFeedback(
     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 });
-      },
-    };
+    return ɵgetMessageFeedbackControls(current, message.value);
   });
 }
 
-/**
- * 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>;
+  readonly open: ComputedRef<boolean>;
   /** The comment being edited. */
-  readonly draft: Ref<string>;
+  readonly draft: WritableComputedRef<string>;
   /** Grows each time the field should take focus: after a keyboard rating. */
-  readonly focusRequest: Ref<number>;
+  readonly focusRequest: ComputedRef<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>;
+  readonly input: ShallowRef<HTMLInputElement | null>;
   /** Opens with `comment` in the field. */
-  readonly show: (options: { comment: string; focus: boolean }) => void;
+  readonly show: ɵFeedbackCommentController["show"];
   /** The pointer or focus reached the rating or the popover. */
-  readonly enter: (via?: "pointer" | "focus") => void;
+  readonly enter: ɵFeedbackCommentController["enter"];
   /**
    * 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;
+  readonly leave: ɵFeedbackCommentController["leave"];
   /** 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;
+  readonly close: ɵFeedbackCommentController["close"];
   /** 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.
+ * Drives the comment popover of a rated message with core's
+ * `ɵFeedbackCommentController`, which holds the open and close rules.
  * @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;
-  };
-
+  const controller = new ɵFeedbackCommentController({
+    getControls: () => controls.value,
+  });
+  const state = shallowRef(controller.getSnapshot());
+  const unsubscribe = controller.subscribe(() => {
+    state.value = controller.getSnapshot();
+  });
   // 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);
+    controller.dispose();
+    unsubscribe();
   });
 
   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;
-      }
-    },
+    open: computed(() => state.value.open),
+    draft: computed({
+      get: () => state.value.draft,
+      set: controller.setDraft,
+    }),
+    focusRequest: computed(() => state.value.focusRequest),
+    takeFocusRequest: controller.takeFocusRequest,
+    input: shallowRef<HTMLInputElement | null>(null),
+    show: controller.show,
+    enter: controller.enter,
+    leave: controller.leave,
+    setEditing: controller.setEditing,
+    close: controller.close,
+    returnFocus: controller.returnFocus,
   };
 }

package/src/v2/components/chat/normalize-auto-scroll.ts

@@ -1,17 +1,3 @@
-export type AutoScrollMode = "pin-to-bottom" | "pin-to-send" | "none";
-
-const VALID: readonly AutoScrollMode[] = [
-  "pin-to-bottom",
-  "pin-to-send",
-  "none",
-];
-
-export function normalizeAutoScroll(
-  value: AutoScrollMode | boolean | undefined,
-): AutoScrollMode {
-  if (value === undefined) return "pin-to-bottom";
-  if (value === true) return "pin-to-bottom";
-  if (value === false) return "none";
-  if ((VALID as readonly string[]).includes(value)) return value;
-  return "pin-to-bottom";
-}
+// The rules live in core. This module keeps the import path stable.
+export { ɵnormalizeAutoScroll as normalizeAutoScroll } from "@copilotkit/core";
+export type { ɵAutoScrollMode as AutoScrollMode } from "@copilotkit/core";

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 };
@@ -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,
+  );
+}