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

package/src/v2/providers/CopilotChatConfigurationProvider.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, provide, ref, watch } from "vue";
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  shallowRef,
+  watch,
+} from "vue";
+import { ɵChatConfigurationStore } from "@copilotkit/core";
 import type { ComputedRef } from "vue";
-import { DEFAULT_AGENT_ID, randomUUID } from "@copilotkit/shared";
-import type { OpenThreadRegistration } from "@copilotkit/core";
 import { CopilotChatConfigurationKey, CopilotKitKey } from "./keys";
+import { ChatConfigurationStoreKey } from "./chat-configuration-store-key";
 import { CopilotChatDefaultLabels } from "./types";
 import type { CopilotChatConfigurationValue, CopilotChatLabels } from "./types";
 import type { CopilotChatConfigurationProviderProps } from "./CopilotChatConfigurationProvider.types";
 import { useShallowStableRef } from "../lib/shallow-stable";
-import { isMobileViewport } from "../lib/is-mobile-viewport";
 
-// Vue normalizes optional Boolean props to `false` when not supplied; declare
-// `undefined` defaults so we can faithfully distinguish "caller passed false"
-// from "caller did not pass the prop", matching React's prop semantics.
 const props = withDefaults(
   defineProps<CopilotChatConfigurationProviderProps>(),
   {
@@ -25,210 +29,68 @@ const parentConfig = inject<ComputedRef<CopilotChatConfigurationValue> | null>(
   CopilotChatConfigurationKey,
   null,
 );
-const parentConfigValue = computed(() => parentConfig?.value ?? null);
 
-// Caller-authoritative when a threadId prop is supplied AND not explicitly
-// flagged non-explicit. A <CopilotKit>-seeded non-explicit id
-// (threadId + hasExplicitThreadId=false) stays overridable — the round-2 fix.
-const propIsAuthoritative = computed(
-  () => props.threadId !== undefined && props.hasExplicitThreadId !== false,
+// Core owns thread, agent, modal and drawer resolution across the provider
+// chain; this component feeds it props and projects its snapshot.
+const readOptions = () => ({
+  agentId: props.agentId,
+  threadId: props.threadId,
+  hasExplicitThreadId: props.hasExplicitThreadId,
+  isModalDefaultOpen: props.isModalDefaultOpen,
+});
+const store = new ɵChatConfigurationStore(
+  readOptions(),
+  inject(ChatConfigurationStoreKey, null),
 );
-
-// Imperative active-thread override (a picked row or a fresh startNewThread).
-const activeThreadOverride = ref<{
-  threadId: string;
-  explicit: boolean;
-} | null>(null);
+const snapshot = shallowRef(store.getSnapshot());
+const unsubscribe = store.subscribe(() => {
+  snapshot.value = store.getSnapshot();
+});
+watch(readOptions, (options) => store.update(options));
+onBeforeUnmount(() => {
+  unsubscribe();
+  store.dispose();
+});
 
 const stableLabels = useShallowStableRef(computed(() => props.labels));
 
 const mergedLabels = computed<CopilotChatLabels>(() => ({
   ...CopilotChatDefaultLabels,
-  ...parentConfigValue.value?.labels,
+  ...parentConfig?.value?.labels,
   ...stableLabels.value,
 }));
 
-const resolvedAgentId = computed(
-  () => props.agentId ?? parentConfigValue.value?.agentId ?? DEFAULT_AGENT_ID,
-);
-
-const fallbackThreadId = randomUUID();
-const resolvedThreadId = computed(() => {
-  if (propIsAuthoritative.value) return props.threadId as string;
-  if (activeThreadOverride.value) return activeThreadOverride.value.threadId;
-  if (props.threadId) return props.threadId;
-  if (parentConfigValue.value?.threadId)
-    return parentConfigValue.value.threadId;
-  return fallbackThreadId;
-});
-
 // Tell Core which Thread this view shows, so captured interactions can link
-// to it. This provider also works without a CopilotKitProvider, and then there
-// is nothing to register with. Registration starts on mount, so a server
-// render never registers a Thread that it can't unregister.
+// to it. Works without a CopilotKitProvider: then there is nothing to register.
 const copilotKitContext = inject(CopilotKitKey, null);
-let openThread: OpenThreadRegistration | null = null;
 onMounted(() => {
   watch(
-    () => [copilotKitContext?.copilotkit.value, resolvedAgentId.value] as const,
-    ([core, agentId], _previous, onCleanup) => {
+    () => copilotKitContext?.copilotkit.value,
+    (core, _previous, onCleanup) => {
       if (!core) return;
-      const registration = core.registerOpenThread({
-        agentId,
-        threadId: resolvedThreadId.value,
-      });
-      openThread = registration;
-      onCleanup(() => {
-        registration.unregister();
-        openThread = null;
-      });
+      onCleanup(store.bindOpenThread(core));
     },
     { immediate: true },
   );
-  watch(resolvedThreadId, (threadId) => openThread?.update(threadId));
-});
-
-const resolvedHasExplicitThreadId = computed(() => {
-  if (propIsAuthoritative.value) return true;
-  const own = activeThreadOverride.value
-    ? activeThreadOverride.value.explicit
-    : props.hasExplicitThreadId !== undefined
-      ? props.hasExplicitThreadId
-      : !!props.threadId;
-  return own || !!parentConfigValue.value?.hasExplicitThreadId;
-});
-
-const shouldCreateModalState = computed(
-  () => props.isModalDefaultOpen !== undefined,
-);
-const resolvedDefaultOpen = computed(() => props.isModalDefaultOpen ?? true);
-
-const internalModalOpen = ref<boolean>(
-  parentConfigValue.value?.isModalOpen ?? resolvedDefaultOpen.value,
-);
-
-function setInternalModalOpen(open: boolean) {
-  internalModalOpen.value = open;
-}
-
-const resolvedIsModalOpen = computed(() =>
-  shouldCreateModalState.value
-    ? internalModalOpen.value
-    : parentConfigValue.value?.isModalOpen,
-);
-const resolvedSetModalOpen = computed(() =>
-  shouldCreateModalState.value
-    ? setInternalModalOpen
-    : parentConfigValue.value?.setModalOpen,
-);
-
-function setActiveThreadId(threadId: string, options?: { explicit?: boolean }) {
-  if (propIsAuthoritative.value) {
-    console.warn(
-      "[CopilotKit] Ignoring setActiveThreadId(): threadId is controlled " +
-        "via the `threadId` prop on CopilotChatConfigurationProvider.",
-    );
-    return;
-  }
-  activeThreadOverride.value = {
-    threadId,
-    explicit: options?.explicit ?? true,
-  };
-}
-
-function startNewThread() {
-  if (propIsAuthoritative.value) {
-    console.warn(
-      "[CopilotKit] Ignoring startNewThread(): threadId is controlled via " +
-        "the `threadId` prop on CopilotChatConfigurationProvider.",
-    );
-    return;
-  }
-  activeThreadOverride.value = { threadId: randomUUID(), explicit: false };
-}
-
-// Drawer presence + open state. The top-most provider owns the state; a nested
-// provider proxies its parent so the whole chain shares one drawer.
-const ownDrawerOpen = ref(false);
-const ownDrawerCount = ref(0);
-
-function ownSetDrawerOpen(open: boolean) {
-  ownDrawerOpen.value = open;
-  // Mobile mutual-exclusion: opening the drawer closes the chat modal.
-  if (open && isMobileViewport()) {
-    resolvedSetModalOpen.value?.(false);
-  }
-}
-
-function ownRegisterDrawer(): () => void {
-  ownDrawerCount.value += 1;
-  return () => {
-    ownDrawerCount.value = Math.max(0, ownDrawerCount.value - 1);
-  };
-}
-
-const resolvedDrawerOpen = computed(() =>
-  parentConfigValue.value
-    ? parentConfigValue.value.drawerOpen
-    : ownDrawerOpen.value,
-);
-const resolvedSetDrawerOpen = computed(() =>
-  parentConfigValue.value
-    ? parentConfigValue.value.setDrawerOpen
-    : ownSetDrawerOpen,
-);
-const resolvedDrawerRegistered = computed(() =>
-  parentConfigValue.value
-    ? parentConfigValue.value.drawerRegistered
-    : ownDrawerCount.value > 0,
-);
-const resolvedRegisterDrawer = computed(() =>
-  parentConfigValue.value
-    ? parentConfigValue.value.registerDrawer
-    : ownRegisterDrawer,
-);
-
-// Public modal setter (mobile mutual-exclusion, other direction: opening the
-// chat modal closes the drawer). Preserve the contract that it is `undefined`
-// when this provider owns no modal state AND no parent provides one —
-// CopilotChatToggleButton relies on that absence to fall back to its own
-// local open-state. When a real modal setter exists (own `isModalDefaultOpen`
-// state or an inherited parent setter), wrap it so opening the modal on
-// mobile also closes the drawer.
-//
-// Note: this diverges from the React reference (CopilotChatConfigurationProvider.tsx),
-// which keeps `setModalOpen` always-defined and always backed by internal state. We
-// intentionally take the minimal Vue-local fix here — preserving the `undefined`
-// contract CopilotChatToggleButton depends on — rather than also reworking
-// `resolvedIsModalOpen`'s backing, to avoid changing bare-provider modal-open
-// semantics.
-const publicSetModalOpen = computed(() => {
-  const base = resolvedSetModalOpen.value; // undefined when no modal state + no parent
-  if (!base) return undefined;
-  return (open: boolean) => {
-    if (open && isMobileViewport()) {
-      resolvedSetDrawerOpen.value?.(false);
-    }
-    base(open);
-  };
 });
 
 const configurationValue = computed<CopilotChatConfigurationValue>(() => ({
   labels: mergedLabels.value,
-  agentId: resolvedAgentId.value,
-  threadId: resolvedThreadId.value,
-  hasExplicitThreadId: resolvedHasExplicitThreadId.value,
-  isModalOpen: resolvedIsModalOpen.value,
-  setModalOpen: publicSetModalOpen.value,
-  drawerOpen: resolvedDrawerOpen.value,
-  setDrawerOpen: resolvedSetDrawerOpen.value,
-  drawerRegistered: resolvedDrawerRegistered.value,
-  registerDrawer: resolvedRegisterDrawer.value,
-  setActiveThreadId,
-  startNewThread,
+  agentId: snapshot.value.agentId,
+  threadId: snapshot.value.threadId,
+  hasExplicitThreadId: snapshot.value.hasExplicitThreadId,
+  isModalOpen: snapshot.value.isModalOpen,
+  setModalOpen: store.setModalOpen,
+  drawerOpen: snapshot.value.drawerOpen,
+  setDrawerOpen: store.setDrawerOpen,
+  drawerRegistered: snapshot.value.drawerRegistered,
+  registerDrawer: store.registerDrawer,
+  setActiveThreadId: store.setActiveThreadId,
+  startNewThread: store.startNewThread,
 }));
 
 provide(CopilotChatConfigurationKey, configurationValue);
+provide(ChatConfigurationStoreKey, store);
 </script>
 
 <template>

package/src/v2/providers/CopilotKitProvider.types.ts

@@ -1,12 +1,10 @@
 import type { A2UIRecoveryRendererOptions } from "../components/a2ui/A2UIRecoveryStates";
-import type { AbstractAgent } from "@ag-ui/client";
 import type {
-  CopilotKitCoreErrorCode,
-  CopilotKitHeadersSource,
-  CopilotKitMessageFilter,
-  LearningConfig,
+  ɵA2UIActionInterceptor,
+  ɵA2UIBaseOptions,
+  ɵCopilotKitLearningOptions,
+  ɵCopilotKitProviderBaseOptions,
 } from "@copilotkit/core";
-import type { DebugConfig } from "@copilotkit/shared";
 import type {
   A2UITheme,
   SandboxFunction,
@@ -19,15 +17,7 @@ import type {
 import type { Component } from "vue";
 import type { MarkdownRendererValue } from "./markdown-renderer";
 
-export interface CopilotKitProviderProps {
-  runtimeUrl?: string;
-  /**
-   * Headers sent with every request. A record, or a sync or async builder
-   * that runs when each request is sent. An inline arrow is fine. The builder
-   * should be cheap; cache tokens in it.
-   */
-  headers?: CopilotKitHeadersSource;
-  credentials?: RequestCredentials;
+export interface CopilotKitProviderProps extends ɵCopilotKitProviderBaseOptions {
   /**
    * CSP nonce for the `<style>` tag CopilotKit adds. Set it when your
    * Content-Security-Policy limits `style-src` to a nonce.
@@ -39,42 +29,6 @@ export interface CopilotKitProviderProps {
    * @default true
    */
   injectStyles?: boolean;
-  /**
-   * Rewrites the message list sent to runtime agents on every run.
-   *
-   * CopilotKit sends the whole thread each time. When your agent already
-   * stores the conversation, most of that payload is waste, and an agent that
-   * merges the inbound list with its own store can show the model every turn
-   * twice. Return the messages to send:
-   *
-   * ```vue
-   * <CopilotKitProvider
-   *   runtime-url="/api/copilotkit"
-   *   :message-filter="(messages) => messages.slice(-1)"
-   * />
-   * ```
-   *
-   * The filter changes the request body only. The transcript the UI renders is
-   * untouched. Broken tool-call pairs are repaired before the request is sent,
-   * so a filter this blunt cannot strand a tool result mid-HITL.
-   *
-   * Agents reached through your CopilotRuntime honor this. An agent your app
-   * passes in directly does not, and neither Intelligence runs nor suggestion
-   * runs are ever filtered.
-   */
-  messageFilter?: CopilotKitMessageFilter;
-  defaultThrottleMs?: number;
-  publicApiKey?: string;
-  publicLicenseKey?: string;
-  /**
-   * Signed license token for offline verification of CopilotKit Intelligence features.
-   * Obtain from https://dashboard.operations.copilotkit.ai.
-   */
-  licenseToken?: string;
-  properties?: Record<string, unknown>;
-  useSingleEndpoint?: boolean;
-  agents__unsafe_dev_only?: Record<string, AbstractAgent>;
-  selfManagedAgents?: Record<string, AbstractAgent>;
   renderToolCalls?: VueToolCallRenderer<any>[];
   renderActivityMessages?: VueActivityMessageRenderer<unknown>[];
   renderCustomMessages?: VueCustomMessageRenderer[];
@@ -90,49 +44,23 @@ export interface CopilotKitProviderProps {
    * always disabled in production and during server rendering.
    */
   enableInspector?: boolean;
-  onError?: (event: {
-    error: Error;
-    code: CopilotKitCoreErrorCode;
-    context: Record<string, any>;
-  }) => void | Promise<void>;
-  a2ui?: {
+  a2ui?: ɵA2UIBaseOptions & {
     theme?: A2UITheme;
     catalog?: any;
     loadingComponent?: Component;
-    /**
-     * When true (the default), the full component schemas from the catalog are
-     * sent as agent context so the agent knows what components and props are
-     * available. The A2UI middleware can overwrite this with a server-side
-     * schema if configured.
-     *
-     * When false, the agent context still describes the catalog, but only by its
-     * catalog ID and the names of its custom components, without their JSON
-     * schemas. The component schema entry and the A2UI generation and design
-     * guidelines are not sent. With the CopilotKit LangGraph middleware's
-     * injected A2UI tool, the A2UI subagent then gets the component names only;
-     * a host can still give it a composition guide through the middleware's
-     * guidelines (`a2uiParams.guidelines.compositionGuide` in TypeScript,
-     * `a2ui_params["guidelines"]["composition_guide"]` in Python).
-     */
-    includeSchema?: boolean;
     /**
      * Options for the A2UI error-recovery status UI: how long before the
      * transient "Retrying…" hint appears, after how many attempts, and how
      * much retry/debug detail to surface. When omitted, defaults apply.
      */
     recovery?: A2UIRecoveryRendererOptions;
-  };
-  /** Configuration for the built-in MCP Apps renderer. */
-  mcpApps?: {
     /**
-     * Restore `allow-same-origin` on the MCP App sandbox. Default `false`.
-     *
-     * **Unsafe.** The widget then runs with your page's origin: it can read
-     * your cookies, storage and DOM, and call your APIs as the signed-in user.
-     * Only set it for widgets you wrote and trust that need `localStorage`,
-     * `IndexedDB` or cookies. By default widgets get an opaque origin.
+     * Intercept A2UI user actions before they reach the agent: return `null`
+     * to handle an action client-side (e.g. a `navigate` event), return an
+     * action to forward that one instead, or return nothing to forward it
+     * unchanged.
      */
-    allowSameOriginFallback?: boolean;
+    onAction?: ɵA2UIActionInterceptor;
   };
   /**
    * Global markdown renderer for assistant/reasoning messages. Either a Vue
@@ -143,50 +71,7 @@ export interface CopilotKitProviderProps {
    * a per-message slot still wins.
    */
   markdownRenderer?: MarkdownRendererValue;
-  /**
-   * Enable debug logging for the client-side event pipeline.
-   *
-   * Accepts:
-   * - `true` / `false` to toggle events + lifecycle logging (verbose off).
-   * - `{ events?: boolean; lifecycle?: boolean; verbose?: boolean }` for granular control.
-   */
-  debug?: DebugConfig;
-  /**
-   * Turns on interaction capture (`@copilotkit/learning`). `learning` (short
-   * for `:learning="true"`) records with the default options; pass an object
-   * for options. `false` or omitting the prop turns capture off and cancels
-   * startup. Without a sink, Core authenticates with the runtime and sends
-   * browser events to Intelligence; a custom sink keeps the standalone
-   * collector behavior. Updated settings apply to the next Trajectory.
-   *
-   * Capture starts after mount. Set `trajectoryId` to use your own ID;
-   * otherwise the provider generates one. The generated ID stays the same
-   * across rerenders, reconnects and option changes; turning capture off,
-   * setting `autoStart: false` or supplying a `trajectoryId` ends it, and the
-   * next generated Trajectory gets a new ID. Read the active ID from
-   * `copilotkit.trajectoryId`.
-   *
-   * Set `autoStart: false` to start capture yourself with `startTrajectory()`.
-   * Capture stops on unmount, including manually started Trajectories.
-   *
-   * @example
-   * <CopilotKitProvider runtime-url="/api/copilotkit" learning>
-   */
-  learning?: boolean | CopilotKitLearningOptions;
 }
 
 /** The object form of the `learning` prop. */
-export type CopilotKitLearningOptions = LearningConfig & {
-  /**
-   * Starts a Trajectory after mount. Defaults to `true`; set `false` to call
-   * `startTrajectory()` yourself.
-   */
-  autoStart?: boolean;
-  trajectoryId?: string;
-  /**
-   * Used only by explicit custom sinks. Authenticated capture warns and ignores
-   * this option; assign Learning Spaces on the server with
-   * `getTrajectoryLearningContainerIds` on `CopilotKitIntelligence`.
-   */
-  learningContainerIds?: string[];
-};
+export type CopilotKitLearningOptions = ɵCopilotKitLearningOptions;