@copilotkit/vue 2.0.0-rc.26 → 2.0.0-rc.27

package/src/v2/components/chat/CopilotChat.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { AGUIConnectNotImplementedError, AbstractAgent } from "@ag-ui/client";
-import { DEFAULT_AGENT_ID, randomUUID } from "@copilotkit/shared";
 import {
   computed,
   onBeforeUnmount,
@@ -14,14 +12,15 @@ import {
 } from "vue";
 import {
   CopilotChatDefaultLabels,
-  CopilotKitCoreErrorCode,
+  ɵChatConnection,
   ɵcreateChatSubmitter,
   ɵcreateLastUserMessageTracker,
-  ɵisHttpAgent,
+  ɵFreshThreadId,
+  ɵresolveAgentId,
   ɵresolveChatNotice,
-  ɵThreadSwitchCoordinator,
+  ɵsubscribeToAgentErrors,
 } from "@copilotkit/core";
-import type { Suggestion, ɵThreadSelection } from "@copilotkit/core";
+import type { Suggestion } from "@copilotkit/core";
 import CopilotChatConfigurationProvider from "../../providers/CopilotChatConfigurationProvider.vue";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import { useCopilotKit } from "../../providers/useCopilotKit";
@@ -92,29 +91,35 @@ const forwardedChatViewSlotNames = computed(() =>
   Object.keys(componentSlots).filter((slotName) => slotName !== "chat-view"),
 );
 
-const generatedThreadId = ref(randomUUID());
 const transcribeMode = ref<"input" | "transcribe" | "processing">("input");
 const inputValue = ref(props.inputValue ?? "");
 const isMounted = ref(false);
-const isUnmounting = ref(false);
-
-type ActiveConnectCycle = {
-  core: object;
-  selection: ɵThreadSelection;
-  abortController: AbortController;
-  detached: boolean;
-};
-
-const activeConnectCycle = shallowRef<ActiveConnectCycle | null>(null);
-// Keeps the agent on the thread this chat shows, orders the teardown of the
-// previous thread, and tracks connections a send must wait for.
-const threads = new ɵThreadSwitchCoordinator({
-  stopAgent: (params) => copilotkit.value.stopAgent(params),
-  subscribe: (subscriber) => copilotkit.value.subscribe(subscriber),
-});
 
-const resolvedAgentId = computed(
-  () => props.agentId ?? existingConfig.value?.agentId ?? DEFAULT_AGENT_ID,
+// Loads the thread this chat shows: keeps the agent on it, orders the
+// teardown of the previous thread, owns the connect's abort and detach, and
+// tracks connections a send must wait for.
+const connection = new ɵChatConnection({
+  core: {
+    connectAgent: (params) => copilotkit.value.connectAgent(params),
+    stopAgent: (params) => copilotkit.value.stopAgent(params),
+    subscribe: (subscriber) => copilotkit.value.subscribe(subscriber),
+  },
+  onInspectorOverrideFailed: (requestId) => failInspectorOverride(requestId),
+});
+const { threads } = connection;
+const connectionState = shallowRef(connection.getSnapshot());
+connection.subscribe(() => {
+  connectionState.value = connection.getSnapshot();
+});
+// The locally minted thread used while no thread is provided. A new one is
+// minted each time the provided thread goes away.
+const freshThreadId = new ɵFreshThreadId();
+
+const resolvedAgentId = computed(() =>
+  ɵresolveAgentId({
+    agentId: props.agentId,
+    chatAgentId: existingConfig.value?.agentId,
+  }),
 );
 // "Provided" — supplied by either the caller's prop or a wrapping
 // CopilotChatConfigurationProvider. Distinct from `resolvedThreadId`, which
@@ -124,8 +129,8 @@ const resolvedAgentId = computed(
 const providedThreadId = computed(
   () => props.threadId ?? existingConfig.value?.threadId,
 );
-const baseThreadId = computed(
-  () => providedThreadId.value ?? generatedThreadId.value,
+const baseThreadId = computed(() =>
+  freshThreadId.resolve(providedThreadId.value),
 );
 // "Explicit" means the caller actually picked this thread — via the
 // `threadId` prop on CopilotChat or a wrapping provider that flagged its
@@ -145,12 +150,14 @@ const resolvedThreadId = computed(
 const hasExplicitThreadId = computed(
   () => inspectorThreadId.value !== null || baseHasExplicitThreadId.value,
 );
-const lastConnectedThreadId = ref<string | null>(null);
-const isConnecting = computed(
-  () =>
-    hasExplicitThreadId.value &&
-    lastConnectedThreadId.value !== resolvedThreadId.value,
-);
+// An explicit thread shows as connecting until its connect has settled.
+const isConnecting = computed(() => {
+  void connectionState.value;
+  return connection.isConnecting({
+    threadId: resolvedThreadId.value,
+    explicit: hasExplicitThreadId.value,
+  });
+});
 const stableLabels = useShallowStableRef(computed(() => props.labels));
 const resolvedLabels = computed(() => stableLabels.value);
 // The labels this chat shows, the same merge its configuration provider makes.
@@ -263,61 +270,13 @@ watch(
   },
 );
 
-watch(
-  [() => props.threadId, () => existingConfig.value?.threadId],
-  ([threadId, inheritedThreadId], previousValues) => {
-    if (threadId || inheritedThreadId) {
-      return;
-    }
-
-    if (previousValues && (previousValues[0] || previousValues[1])) {
-      generatedThreadId.value = randomUUID();
-    }
-  },
-);
-
 watch(
   [() => copilotkit.value, resolvedAgentId, () => props.onError],
   ([core, agentId, onError], _old, onCleanup) => {
     if (!onError) {
       return;
     }
-
-    const subscription = core.subscribe({
-      onError: (event) => {
-        if (event.context?.agentId === agentId || !event.context?.agentId) {
-          void onError({
-            error: event.error,
-            code: event.code,
-            context: event.context,
-          });
-        }
-      },
-    });
-
-    onCleanup(() => subscription.unsubscribe());
-  },
-  { immediate: true },
-);
-
-watch(
-  [
-    () => copilotkit.value,
-    resolvedAgentId,
-    resolvedThreadId,
-    inspectorRequestId,
-  ],
-  ([core, agentId, threadId, requestId], _old, onCleanup) => {
-    if (!requestId) return;
-    const subscription = core.subscribe({
-      onError: (event) => {
-        if (event.code !== CopilotKitCoreErrorCode.AGENT_CONNECT_FAILED) return;
-        if (event.context?.agentId !== agentId) return;
-        if (event.context?.threadId !== threadId) return;
-        failInspectorOverride(requestId);
-      },
-    });
-    onCleanup(() => subscription.unsubscribe());
+    onCleanup(ɵsubscribeToAgentErrors(core, agentId, onError));
   },
   { immediate: true },
 );
@@ -332,150 +291,24 @@ watch(
     inspectorRequestId,
   ],
   (
-    [mounted, core, currentAgent, threadId, isExplicit, requestId],
+    [mounted, _core, currentAgent, threadId, isExplicit, requestId],
     _old,
     onCleanup,
   ) => {
-    if (!mounted) {
-      return;
-    }
-    if (typeof window === "undefined") {
-      return;
-    }
-    if (!currentAgent) {
+    if (!mounted || typeof window === "undefined" || !currentAgent) {
       return;
     }
-
-    // Pins the thread on the agent before anything issues a request:
-    // `CopilotKitCore.connectAgent` reads `agent.threadId` synchronously. A
-    // switch to a fresh, non-explicit thread (a "+ New" reset) empties the
-    // agent so the welcome screen shows; moving in or out of an inspector
-    // override stops the run.
-    const selection = threads.select({
+    // Pins the thread on the agent before anything issues a request, and
+    // connects a thread the caller picked. A switch to a fresh thread (a
+    // "+ New" reset) empties the agent so the welcome screen shows; moving in
+    // or out of an Inspector override stops the run.
+    const handle = connection.open({
       agent: currentAgent,
       threadId,
       explicit: isExplicit,
       inspectorRequestId: requestId,
     });
-
-    // When the caller hasn't picked a specific thread, resolvedThreadId is
-    // a UUID minted locally. The backend has never seen it, so /connect
-    // would always 404 — skip the call. A real thread is only created
-    // once the user runs the agent for the first time.
-    if (!selection.shouldConnect) {
-      return;
-    }
-
-    const abstractAgentPrototype = AbstractAgent.prototype as unknown as {
-      connect?: unknown;
-      connectAgent?: unknown;
-    };
-    const inspectableAgent = currentAgent as unknown as {
-      connect?: unknown;
-      connectAgent?: unknown;
-    };
-    const hasCustomConnect =
-      inspectableAgent.connect !== abstractAgentPrototype.connect;
-    const hasCustomConnectAgent =
-      inspectableAgent.connectAgent !== abstractAgentPrototype.connectAgent;
-    if (!hasCustomConnect && !hasCustomConnectAgent) {
-      // No custom connect to wait for — mark as connected so the welcome
-      // suppression / suggestion gating release immediately.
-      lastConnectedThreadId.value = threadId;
-      return;
-    }
-
-    const existingCycle = activeConnectCycle.value;
-    const hasSameDeps =
-      existingCycle &&
-      existingCycle.core === (core as object) &&
-      existingCycle.selection === selection;
-
-    let cycle: ActiveConnectCycle;
-    if (hasSameDeps && existingCycle) {
-      cycle = existingCycle;
-    } else {
-      const connectAbortController = new AbortController();
-      cycle = {
-        core: core as object,
-        selection,
-        abortController: connectAbortController,
-        detached: false,
-      };
-      activeConnectCycle.value = cycle;
-
-      // Tracked, so a send waits for the thread to load instead of racing it.
-      void threads.trackConnection(selection, () =>
-        threads
-          .whenTornDown()
-          .then(() => {
-            if (cycle.detached) return;
-            if (ɵisHttpAgent(currentAgent))
-              currentAgent.abortController = connectAbortController;
-            return core.connectAgent({ agent: currentAgent });
-          })
-          .catch((error: unknown) => {
-            if (cycle.detached) {
-              selection.clearDiscardedBaseline();
-              return;
-            }
-            if (error instanceof AGUIConnectNotImplementedError) {
-              return;
-            }
-            if (requestId) {
-              failInspectorOverride(requestId);
-            }
-            // The coordinator logs the failure and blocks sends on it.
-            throw error;
-          })
-          .finally(() => {
-            // Whether the connect succeeded or failed, we're no longer in
-            // the transitional "connecting" state for this thread — release
-            // the welcome / suggestion gating so the view can settle.
-            //
-            // Defer one animation frame so any trailing reactive commits
-            // from the bootstrap replay (final assistant message content)
-            // paint before isConnecting flips off. Without this, suggestions
-            // can briefly render against an incompletely-laid-out message
-            // tree and visibly snap once the last text chunk lands.
-            if (cycle.detached) {
-              selection.clearDiscardedBaseline();
-              return;
-            }
-            const raf =
-              typeof requestAnimationFrame === "function"
-                ? requestAnimationFrame
-                : (cb: () => void) => setTimeout(cb, 16);
-            raf(() => {
-              if (cycle.detached) return;
-              lastConnectedThreadId.value = selection.threadId;
-            });
-          }),
-      );
-    }
-
-    onCleanup(() => {
-      const activeCycle = activeConnectCycle.value;
-      if (!activeCycle || activeCycle !== cycle) {
-        return;
-      }
-
-      const { selection: cycleSelection } = activeCycle;
-      const shouldDetach =
-        isUnmounting.value ||
-        copilotkit.value !== activeCycle.core ||
-        agent.value !== cycleSelection.agent ||
-        resolvedThreadId.value !== cycleSelection.threadId;
-      if (!shouldDetach) {
-        return;
-      }
-
-      cycleSelection.release();
-      activeCycle.detached = true;
-      activeCycle.abortController.abort();
-      void threads.detach(cycleSelection.agent);
-      activeConnectCycle.value = null;
-    });
+    onCleanup(() => handle.release());
   },
   { immediate: true },
 );
@@ -522,10 +355,9 @@ const transcriptionError = computed(() => {
 });
 
 onBeforeUnmount(() => {
-  isUnmounting.value = true;
   unsubscribeSubmitter();
   submitter.dispose();
-  threads.dispose();
+  connection.dispose();
 });
 
 onMounted(() => {

package/src/v2/components/chat/CopilotChatAssistantMessage.vue

@@ -1,13 +1,5 @@
 <script setup lang="ts">
-import {
-  computed,
-  inject,
-  onUpdated,
-  ref,
-  shallowRef,
-  toRef,
-  watch,
-} from "vue";
+import { computed, inject, onUpdated, ref, toRef, watch } from "vue";
 import type { Component } from "vue";
 import type { AssistantMessage, Message } from "@ag-ui/core";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
@@ -34,6 +26,7 @@ import { useInspectorShortcutsHidden } from "./inspector-shortcuts";
 import { InspectorKey } from "../../providers/keys";
 import { useFeedbackComment, useMessageFeedback } from "./message-feedback";
 import {
+  ɵflattenUserMessageContent,
   ɵhasAssistantMessageText,
   ɵshouldShowAssistantToolbar,
 } from "@copilotkit/core";
@@ -115,39 +108,9 @@ const config = useCopilotChatConfiguration();
 const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
 const { copied, copy } = useCopyFeedback();
 
-function normalizeContent(content: unknown): string {
-  if (!content) {
-    return "";
-  }
-
-  if (typeof content === "string") {
-    return content;
-  }
-
-  if (Array.isArray(content)) {
-    const parts = content as Array<{ type?: unknown; text?: unknown }>;
-    return parts
-      .map((part) => {
-        if (
-          part &&
-          typeof part === "object" &&
-          "type" in part &&
-          part.type === "text" &&
-          typeof part.text === "string"
-        ) {
-          return part.text;
-        }
-        return "";
-      })
-      .filter((text) => text.length > 0)
-      .join("\n");
-  }
-
-  return "";
-}
-
+// Assistant text, also from untyped data that sends content parts.
 const normalizedContent = computed(() =>
-  normalizeContent(props.message.content),
+  ɵflattenUserMessageContent(props.message.content),
 );
 const hasContent = computed(() =>
   ɵhasAssistantMessageText(normalizedContent.value),
@@ -179,10 +142,6 @@ const feedback = useMessageFeedback(toRef(props, "message"));
 const comment = useFeedbackComment(feedback);
 const rating = computed(() => feedback.value?.feedback?.rating);
 const root = ref<HTMLElement | null>(null);
-// The chosen thumb the comment popover points at, and the rating the open
-// comment answers.
-const commentAnchor = shallowRef<HTMLElement | null>(null);
-let commentRating = rating.value;
 
 const hasThumbsUp = computed(
   () => typeof props.onThumbsUp === "function" || !!feedback.value,
@@ -207,106 +166,40 @@ const shouldShowToolbar = computed(() =>
 
 // A custom thumb that calls its handler without an event gives no element:
 // point at the chosen thumb once it renders, before the popover reads it.
-function findCommentAnchor() {
-  if (
-    comment.open.value &&
-    !commentAnchor.value?.isConnected &&
-    rating.value &&
-    root.value
-  ) {
-    commentAnchor.value =
-      root.value.querySelector<HTMLElement>(
-        `[data-copilotkit-rating="${rating.value}"]`,
-      ) ??
-      // A custom thumb that binds only `aria-pressed`.
-      root.value.querySelector<HTMLElement>('button[aria-pressed="true"]') ??
-      null;
-  }
-}
+const findCommentAnchor = () => comment.findAnchor(root.value);
 onUpdated(findCommentAnchor);
 watch(() => comment.open.value, findCommentAnchor, { flush: "post" });
 
-/** Whether focus came from the keyboard; a pointer click also focuses buttons. */
-function isFocusVisible(element: Element): boolean {
-  try {
-    return element.matches(":focus-visible");
-  } catch {
-    return false;
-  }
-}
-
-// Checks `visibility: hidden` too, which a detached popover uses.
-const HIDDEN_TOO = { checkVisibilityCSS: true, visibilityProperty: true };
-
 /**
- * Thumbs are toggles: a new rating is saved and opens its comment, and
- * clicking the chosen thumb again removes the rating. A keyboard click
- * (`detail` 0) moves focus into the comment, as there is no pointer. Custom
- * thumb slots may call the handler without an event.
- *
- * @returns Whether the app's handler should run: true for a new rating and
- * whenever this chat does not record ratings, false when one is removed.
+ * A thumb click. A keyboard click (`detail` 0) moves focus into the comment;
+ * custom thumb slots may call the handler without an event.
  */
 function rate(value: MessageFeedbackRating, event?: MouseEvent): boolean {
-  const controls = feedback.value;
-  if (!controls) return true;
-  if (rating.value === value) {
-    comment.close({ save: false });
-    controls.clear();
-    return false;
-  }
-  controls.rate(value);
-  commentRating = value;
-  commentAnchor.value =
-    event?.currentTarget instanceof HTMLElement ? event.currentTarget : null;
-  comment.show({ comment: "", focus: event?.detail === 0 });
-  return true;
+  return comment.rate(value, {
+    target:
+      event?.currentTarget instanceof HTMLElement ? event.currentTarget : null,
+    keyboard: event?.detail === 0,
+  });
 }
 
 /** Attributes that let the chosen thumb open and point at its comment. */
 function thumbFeedbackProps(
   value: MessageFeedbackRating,
 ): Record<string, unknown> {
-  if (!feedback.value) return {};
-  const thumb = { "data-copilotkit-rating": value };
-  if (rating.value !== value) return { ...thumb, "aria-pressed": false };
-  const enter = (target: HTMLElement, via: "pointer" | "focus") => {
-    if (!comment.open.value) commentRating = value;
-    commentAnchor.value = target;
-    comment.enter(via);
-  };
+  // Read so the thumbs update when the rating or the popover changes.
+  void feedback.value;
+  void comment.open.value;
+  const thumb = comment.thumb(value);
+  if (!thumb) return {};
+  const { handlers } = thumb;
+  if (!handlers) return thumb.attributes;
   return {
-    ...thumb,
-    "aria-pressed": true,
-    "aria-haspopup": "dialog",
-    "aria-expanded": comment.open.value,
-    onPointerenter: (event: PointerEvent) => {
-      if (event.pointerType !== "touch")
-        enter(event.currentTarget as HTMLElement, "pointer");
-    },
-    onPointerleave: (event: PointerEvent) => {
-      if (event.pointerType !== "touch") comment.leave("pointer");
-    },
-    // Keyboard focus opens the comment; Tab moves on into its field.
-    onFocus: (event: FocusEvent) => {
-      const target = event.currentTarget as HTMLElement;
-      if (isFocusVisible(target)) enter(target, "focus");
-    },
-    onBlur: () => comment.leave(),
-    onKeydown: (event: KeyboardEvent) => {
-      const input = comment.input.value;
-      // Not while the popover hides because its thumb scrolled away.
-      if (
-        event.key === "Tab" &&
-        !event.shiftKey &&
-        comment.open.value &&
-        input &&
-        input.checkVisibility?.(HIDDEN_TOO) !== false
-      ) {
-        event.preventDefault();
-        input.focus();
-      }
-    },
+    ...thumb.attributes,
+    onPointerenter: handlers.pointerEnter,
+    onPointerleave: handlers.pointerLeave,
+    onFocus: handlers.focus,
+    onBlur: handlers.blur,
+    onKeydown: handlers.keyDown,
   };
 }
 
@@ -315,14 +208,8 @@ const thumbsDownProps = computed(() => thumbFeedbackProps("down"));
 
 // The popover shows only with the toolbar and a rating. Hiding the toolbar
 // keeps the edit; a rating removed elsewhere or Learning turned off ends it.
-watch(
-  [() => comment.open.value, shouldShowToolbar, rating],
-  ([open, showToolbar, currentRating]) => {
-    if (!open) return;
-    // Changed or removed elsewhere: the draft answered the old rating.
-    if (currentRating !== commentRating) comment.close({ save: false });
-    else if (!showToolbar) comment.close();
-  },
+watch([() => comment.open.value, shouldShowToolbar, rating], () =>
+  comment.sync({ showsToolbar: shouldShowToolbar.value }),
 );
 
 function handleInspect() {
@@ -539,7 +426,7 @@ function handleRegenerate() {
     :comment="comment"
     :saved-comment="feedback.feedback.comment ?? ''"
     :rating="feedback.feedback.rating"
-    :anchor="commentAnchor"
+    :anchor="comment.anchor.value"
     :message-id="message.id"
   >
     <template v-if="$slots['feedback-comment']" #feedback-comment="slotProps">