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

package/src/v2/hooks/use-render-activity-message.ts

@@ -1,19 +1,15 @@
 import { computed } from "vue";
 import type { Component } from "vue";
 import type { ActivityMessage } from "@ag-ui/core";
-import type { AbstractAgent } from "@ag-ui/client";
+import {
+  ɵdescribeActivityRendererFailure,
+  ɵfindActivityRenderer,
+  ɵmatchActivityRenderer,
+} from "@copilotkit/core";
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 import { useCopilotKit } from "../providers/useCopilotKit";
 import { useCopilotChatConfiguration } from "../providers/useCopilotChatConfiguration";
-import type {
-  VueActivityMessageRenderer,
-  VueActivityMessageRendererProps,
-} from "../types";
-
-interface ActivityRendererResult {
-  renderer: Component<VueActivityMessageRendererProps<unknown>>;
-  props: VueActivityMessageRendererProps<unknown>;
-}
+import type { VueActivityMessageRendererProps } from "../types";
 
 /**
  * Returns helpers for rendering activity messages.
@@ -21,70 +17,50 @@ interface ActivityRendererResult {
  * Matches the React `useRenderActivityMessage` API: `findRenderer` locates a
  * registered renderer by activity type (preferring agent-scoped over global,
  * with `"*"` as a wildcard fallback), and `renderActivityMessage` resolves the
- * renderer and validates the content schema.
+ * renderer and validates the content with the renderer's `content` schema
+ * (any Standard Schema, such as zod).
  */
 export function useRenderActivityMessage() {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
   const agentId = computed(() => config.value?.agentId ?? DEFAULT_AGENT_ID);
 
-  const renderers = computed(() => [
-    ...copilotkit.value.renderActivityMessages,
-  ]);
-
-  function findRenderer(
-    activityType: string,
-  ): VueActivityMessageRenderer<unknown> | null {
-    const list = renderers.value;
-    if (!list.length) {
-      return null;
-    }
-
-    const matches = list.filter(
-      (renderer) => renderer.activityType === activityType,
-    );
-
-    return (
-      matches.find((candidate) => candidate.agentId === agentId.value) ??
-      matches.find((candidate) => candidate.agentId === undefined) ??
-      list.find((candidate) => candidate.activityType === "*") ??
-      null
-    );
+  function findRenderer(activityType: string) {
+    return ɵfindActivityRenderer(copilotkit.value.renderActivityMessages, {
+      activityType,
+      agentId: agentId.value,
+    });
   }
 
-  function renderActivityMessage(
-    message: ActivityMessage,
-  ): ActivityRendererResult | null {
-    const renderer = findRenderer(message.activityType);
-
-    if (!renderer) {
-      return null;
-    }
-
-    const parseResult = renderer.content.safeParse(message.content);
+  function renderActivityMessage(message: ActivityMessage) {
+    const match = ɵmatchActivityRenderer(
+      copilotkit.value.renderActivityMessages,
+      {
+        activityType: message.activityType,
+        agentId: agentId.value,
+        content: message.content,
+      },
+    );
 
-    if (!parseResult.success) {
-      console.warn(
-        `Failed to parse content for activity message ` +
-          `'${message.activityType}':`,
-        parseResult.error,
+    if (!match.ok) {
+      // Explain why a message that has a renderer drew nothing.
+      const warning = ɵdescribeActivityRendererFailure(
+        message.activityType,
+        match,
       );
+      if (warning) console.warn(warning.message, ...warning.details);
       return null;
     }
 
-    const agent: AbstractAgent | undefined = copilotkit.value.getAgent(
-      agentId.value,
-    );
-
     return {
-      renderer: renderer.render as Component<
+      renderer: match.renderer.render as Component<
         VueActivityMessageRendererProps<unknown>
       >,
       props: {
         activityType: message.activityType,
-        content: parseResult.data,
+        content: match.content,
         message,
-        agent,
+        agent: copilotkit.value.getAgent(agentId.value),
       },
     };
   }

package/src/v2/hooks/use-render-custom-messages.ts

@@ -1,6 +1,8 @@
-import type { Component, VNodeChild } from "vue";
 import type { Message } from "@ag-ui/core";
-import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
+import {
+  ɵgetCustomMessageRenderProps,
+  ɵresolveCustomMessageRenderContext,
+} from "@copilotkit/core";
 import { useCopilotKit } from "../providers/useCopilotKit";
 import { useCopilotChatConfiguration } from "../providers/useCopilotChatConfiguration";
 import type {
@@ -13,13 +15,6 @@ interface UseRenderCustomMessagesParams {
   position: VueCustomMessageRendererPosition;
 }
 
-interface CustomMessageRendererResult {
-  renderer:
-    | Component<VueCustomMessageRendererProps>
-    | ((props: VueCustomMessageRendererProps) => VNodeChild);
-  props: VueCustomMessageRendererProps;
-}
-
 /**
  * Returns a function that resolves the appropriate custom message renderer for
  * a given message and position.
@@ -37,93 +32,34 @@ export function useRenderCustomMessages() {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
 
-  return function renderCustomMessage(
-    params: UseRenderCustomMessagesParams,
-  ): CustomMessageRendererResult | null {
+  return function renderCustomMessage(params: UseRenderCustomMessagesParams) {
     const configValue = config.value;
     if (!configValue) return null;
 
-    const agentId = configValue.agentId || DEFAULT_AGENT_ID;
-    const { threadId } = configValue;
     const core = copilotkit.value;
+    const { agentId, renderers } = ɵresolveCustomMessageRenderContext(
+      core.renderCustomMessages,
+      configValue.agentId,
+    );
+    // Agent-scoped renderers come first. Use the first one that has a
+    // render function.
+    const selected = renderers.find((candidate) => candidate.render);
+    if (!selected) return null;
 
-    const customMessageRenderers = [...core.renderCustomMessages]
-      .filter(
-        (renderer) =>
-          renderer.agentId === undefined || renderer.agentId === agentId,
-      )
-      .sort((a, b) => {
-        const aHasAgent = a.agentId !== undefined;
-        const bHasAgent = b.agentId !== undefined;
-        if (aHasAgent === bHasAgent) return 0;
-        return aHasAgent ? -1 : 1;
-      });
-
-    if (!customMessageRenderers.length) {
-      return null;
-    }
-
-    const { message, position } = params;
-    const resolvedRunId =
-      core.getRunIdForMessage(agentId, threadId, message.id) ??
-      core.getRunIdsForThread(agentId, threadId).slice(-1)[0];
-    const runId = resolvedRunId ?? `missing-run-id:${message.id}`;
     const agent = core.getAgent(agentId);
-    if (!agent) {
-      return null;
-    }
-
-    const messagesIdsInRun = resolvedRunId
-      ? agent.messages
-          .filter(
-            (msg) =>
-              core.getRunIdForMessage(agentId, threadId, msg.id) ===
-              resolvedRunId,
-          )
-          .map((msg) => msg.id)
-      : [message.id];
+    if (!agent) return null;
 
-    const rawMessageIndex = agent.messages.findIndex(
-      (msg) => msg.id === message.id,
+    const props: VueCustomMessageRendererProps = ɵgetCustomMessageRenderProps(
+      core,
+      {
+        agentId,
+        threadId: configValue.threadId,
+        agent,
+        message: params.message,
+        position: params.position,
+      },
     );
-    if (rawMessageIndex < 0) {
-      console.warn(
-        `[CopilotKit] useRenderCustomMessages: message "${message.id}" ` +
-          `not found in agent "${agentId}" messages`,
-      );
-    }
-    const messageIndex = Math.max(0, rawMessageIndex);
-    const messageIndexInRun = resolvedRunId
-      ? Math.max(messagesIdsInRun.indexOf(message.id), 0)
-      : 0;
-    const numberOfMessagesInRun = resolvedRunId ? messagesIdsInRun.length : 1;
-    const stateSnapshot = resolvedRunId
-      ? core.getStateByRun(agentId, threadId, resolvedRunId)
-      : undefined;
-
-    const props: CustomMessageRendererResult["props"] = {
-      message,
-      position,
-      runId,
-      messageIndex,
-      messageIndexInRun,
-      numberOfMessagesInRun,
-      agentId,
-      stateSnapshot,
-    };
-
-    // Iterate renderers like React: try each one and use the first that
-    // returns a non-null render function.
-    for (const candidate of customMessageRenderers) {
-      if (!candidate.render) {
-        continue;
-      }
-      return {
-        renderer: candidate.render as CustomMessageRendererResult["renderer"],
-        props,
-      };
-    }
 
-    return null;
+    return { renderer: selected.render, props };
   };
 }

package/src/v2/hooks/use-suggestions.ts

@@ -1,6 +1,10 @@
 import { computed, ref, toValue, watch } from "vue";
 import type { MaybeRefOrGetter, Ref } from "vue";
-import type { Suggestion } from "@copilotkit/core";
+import { ɵsubscribeToAgentSuggestions } from "@copilotkit/core";
+import type {
+  CopilotKitCoreGetSuggestionsResult,
+  Suggestion,
+} from "@copilotkit/core";
 import { useCopilotKit } from "../providers/useCopilotKit";
 import { useCopilotChatConfiguration } from "../providers/useCopilotChatConfiguration";
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
@@ -40,44 +44,16 @@ export function useSuggestions(
 
   const suggestions = ref<Suggestion[]>([]);
   const isLoading = ref(false);
-
-  const initState = () => {
-    const result = copilotkit.value.getSuggestions(resolvedAgentId.value);
+  const apply = (result: CopilotKitCoreGetSuggestionsResult) => {
     suggestions.value = result.suggestions;
     isLoading.value = result.isLoading;
   };
 
-  watch([() => copilotkit.value, resolvedAgentId], () => initState(), {
-    immediate: true,
-  });
-
   watch(
     [() => copilotkit.value, resolvedAgentId],
-    (_newValues, _old, onCleanup) => {
-      const core = copilotkit.value;
-      const agentId = resolvedAgentId.value;
-      const sub = core.subscribe({
-        onSuggestionsChanged: ({ agentId: changedAgentId, suggestions: s }) => {
-          if (changedAgentId !== agentId) return;
-          suggestions.value = s;
-          const result = core.getSuggestions(agentId);
-          isLoading.value = result.isLoading;
-        },
-        onSuggestionsStartedLoading: ({ agentId: changedAgentId }) => {
-          if (changedAgentId !== agentId) return;
-          isLoading.value = true;
-        },
-        onSuggestionsFinishedLoading: ({ agentId: changedAgentId }) => {
-          if (changedAgentId !== agentId) return;
-          isLoading.value = false;
-        },
-        onSuggestionsConfigChanged: () => {
-          const result = core.getSuggestions(agentId);
-          suggestions.value = result.suggestions;
-          isLoading.value = result.isLoading;
-        },
-      });
-      onCleanup(() => sub.unsubscribe());
+    ([core, agentId], _old, onCleanup) => {
+      apply(core.getSuggestions(agentId));
+      onCleanup(ɵsubscribeToAgentSuggestions(core, agentId, apply));
     },
     { immediate: true },
   );

package/src/v2/hooks/use-threads.ts

@@ -1,17 +1,6 @@
-import { computed, onScopeDispose, ref, toValue, watch } from "vue";
+import { computed, onScopeDispose, shallowRef, toValue, watch } from "vue";
 import type { MaybeRefOrGetter, Ref } from "vue";
-import {
-  CopilotKitCoreRuntimeConnectionStatus,
-  ɵcreateThreadStore,
-  ɵselectHasNextPage,
-  ɵselectIsFetchingNextPage,
-  ɵselectIsMutating,
-  ɵselectThreads,
-  ɵselectThreadsError,
-  ɵselectFetchMoreError,
-  ɵselectThreadsIsLoading,
-} from "@copilotkit/core";
-import type { ɵThreadRuntimeContext, ɵThreadStore } from "@copilotkit/core";
+import { ɵThreadsController, ɵcreateThreadStore } from "@copilotkit/core";
 import { useCopilotKit } from "../providers/useCopilotKit";
 
 export interface Thread {
@@ -67,283 +56,64 @@ export interface UseThreadsResult {
   deleteThread: (threadId: string) => Promise<void>;
 }
 
-function bindThreadStoreSelector<T>(
-  store: ɵThreadStore,
-  selector: (state: ReturnType<ɵThreadStore["getState"]>) => T,
-  target: Ref<T>,
-): void {
-  target.value = selector(store.getState());
-  const subscription = store.select(selector).subscribe(() => {
-    target.value = selector(store.getState());
-  });
-  onScopeDispose(() => subscription.unsubscribe());
-}
-
-/**
- * Vue composable for listing and managing CopilotKit Intelligence threads.
- *
- * The hook fetches threads for the runtime-authenticated user and the given
- * `agentId`, then keeps the result in sync via the core thread store's realtime
- * channel when available. Inputs accept refs/computeds to make thread context
- * changes reactive.
- */
 export function useThreads(input: UseThreadsInput): UseThreadsResult {
   const { copilotkit } = useCopilotKit();
-  const store = ɵcreateThreadStore({
-    fetch: copilotkit.value.ɵruntimeFetch,
+  const readInput = () => ({
+    core: copilotkit.value,
+    agentId: toValue(input.agentId),
+    includeArchived: toValue(input.includeArchived),
+    limit: toValue(input.limit),
+    enabled: toValue(input.enabled) ?? true,
   });
 
-  const resolvedAgentId = computed(() => toValue(input.agentId));
-  const resolvedIncludeArchived = computed(() =>
-    toValue(input.includeArchived),
-  );
-  const resolvedLimit = computed(() => toValue(input.limit));
-  const resolvedEnabled = computed(() => toValue(input.enabled) ?? true);
-
-  // Thread-endpoint capability, derived from the runtime's `/info` payload.
-  // `threadEndpoints` is `undefined` on legacy runtimes that don't advertise
-  // the capability, so we treat "not explicitly false" as supported (matching
-  // React's `!== false` semantics) to preserve legacy thread behavior.
-  const threadListEndpointSupported = computed(
-    () => copilotkit.value.threadEndpoints?.list !== false,
-  );
-  const threadMutationsSupported = computed(
-    () => copilotkit.value.threadEndpoints?.mutations !== false,
-  );
-  // Connected, but the runtime explicitly does not serve the list endpoint.
-  const threadEndpointsUnavailable = computed(
-    () =>
-      !!copilotkit.value.runtimeUrl &&
-      copilotkit.value.runtimeConnectionStatus ===
-        CopilotKitCoreRuntimeConnectionStatus.Connected &&
-      !threadListEndpointSupported.value,
-  );
-  const threadEndpointsError = computed<Error | null>(() =>
-    threadEndpointsUnavailable.value
-      ? new Error(
-          "Thread endpoints are not available on this CopilotKit runtime",
-        )
-      : null,
-  );
-  const threadMutationsError = computed<Error | null>(() =>
-    threadMutationsSupported.value
-      ? null
-      : new Error(
-          "Thread mutations are not available on this CopilotKit runtime",
-        ),
+  // Core's ɵThreadsController owns the view model: thread projection, the
+  // configuration errors, the gated and de-duplicated context dispatch, the
+  // registry claim and the mutation guard. This composable feeds it and
+  // projects its snapshot.
+  const controller = new ɵThreadsController(
+    ɵcreateThreadStore({ fetch: copilotkit.value.ɵruntimeFetch }),
+    readInput(),
   );
-
-  // Keyed on the source's generation, not on header VALUES: a builder's
-  // returned token can change on every resolution without a new source ever
-  // being set, and this must not re-dispatch the thread context on that (see
-  // #1937).
-  const headersKey = computed(() => copilotkit.value.ɵheadersGeneration);
-
-  const threads = ref<Thread[]>([]);
-  const storeIsLoading = ref(false);
-  const storeError = ref<Error | null>(null);
-  const fetchMoreError = ref<Error | null>(null);
-  const hasMoreThreads = ref(false);
-  const isFetchingMoreThreads = ref(false);
-  const isMutating = ref(false);
-
-  bindThreadStoreSelector(store, ɵselectThreads, threads as Ref<Thread[]>);
-  bindThreadStoreSelector(store, ɵselectThreadsIsLoading, storeIsLoading);
-  bindThreadStoreSelector(store, ɵselectThreadsError, storeError);
-  bindThreadStoreSelector(store, ɵselectFetchMoreError, fetchMoreError);
-  bindThreadStoreSelector(store, ɵselectHasNextPage, hasMoreThreads);
-  bindThreadStoreSelector(
-    store,
-    ɵselectIsFetchingNextPage,
-    isFetchingMoreThreads,
-  );
-  bindThreadStoreSelector(store, ɵselectIsMutating, isMutating);
-
-  store.start();
+  const snapshot = shallowRef(controller.getSnapshot());
+  const unsubscribe = controller.subscribe(() => {
+    snapshot.value = controller.getSnapshot();
+  });
+  const stop = controller.start();
   onScopeDispose(() => {
-    store.stop();
+    stop();
+    unsubscribe();
+    controller.dispose();
   });
 
-  // Register this store in core's single-slot thread-store registry so other
-  // surfaces (e.g. the chat view) can resolve the same store for the agent.
-  //
-  // Gated on `resolvedEnabled`: a disabled (e.g. unlicensed) drawer must not
-  // claim the agentId slot. The registry is single-slot/last-writer-wins, so
-  // registering an inert store would evict — and on unmount tear down — a
-  // co-mounted live store for the same agent. Staying unregistered while
-  // disabled leaves the live store's registration intact.
-  watch(
-    [resolvedEnabled, resolvedAgentId],
-    ([enabled, agentId], _prev, onCleanup) => {
-      if (!enabled) return;
-      copilotkit.value.registerThreadStore(agentId, store);
-      onCleanup(() => {
-        copilotkit.value.unregisterThreadStore(agentId);
-      });
-    },
-    { immediate: true },
-  );
-
-  // Tracks whether we've dispatched the first real context to the store.
-  // The store itself starts with `isLoading: false`, so before we dispatch
-  // consumers would otherwise see an empty, non-loading state (empty-list
-  // flash). While runtimeUrl is set and we haven't dispatched yet, we
-  // synthesize `isLoading: true` so the UI keeps its loading indicator until
-  // the first fetch is in flight (at which point the store's own
-  // isLoading takes over).
-  const hasDispatchedContext = ref(false);
-
-  // Defer setting the context until the runtime reports Connected. Before
-  // `/info` resolves we don't know `intelligence.wsUrl`, so dispatching the
-  // context early would issue a list fetch with `wsUrl: undefined`, then a
-  // second list fetch (and a `/threads/subscribe`) once the flag lands.
-  // Waiting lets the hook issue just one `/threads?…` + one `/threads/subscribe`.
-  //
-  // When `runtimeUrl` is absent we dispatch `null` to clear the store. For
-  // transient states (Disconnected/Connecting/Error with a URL still set) we
-  // leave the previously-dispatched context in place — any in-flight
-  // realtime subscription or cached thread list stays usable while the
-  // runtime recovers, and we don't re-trigger a fetch storm on transitions.
   watch(
     [
+      readInput,
       () => copilotkit.value.runtimeUrl,
       () => copilotkit.value.runtimeConnectionStatus,
-      headersKey,
+      () => copilotkit.value.ɵheadersGeneration,
       () => copilotkit.value.intelligence?.wsUrl,
-      resolvedAgentId,
-      resolvedIncludeArchived,
-      resolvedLimit,
-      resolvedEnabled,
-      threadListEndpointSupported,
+      () => copilotkit.value.threadEndpoints?.list,
+      () => copilotkit.value.threadEndpoints?.mutations,
     ],
-    ([
-      runtimeUrl,
-      runtimeStatus,
-      ,
-      wsUrl,
-      agentId,
-      includeArchived,
-      limit,
-      enabled,
-      listEndpointSupported,
-    ]) => {
-      if (!runtimeUrl || !enabled) {
-        store.setContext(null);
-        hasDispatchedContext.value = false;
-        return;
-      }
-
-      if (runtimeStatus !== CopilotKitCoreRuntimeConnectionStatus.Connected) {
-        return;
-      }
-
-      // Connected, but the runtime explicitly does not serve the list
-      // endpoint: stay inert so no `/threads` fetch fires. The
-      // `threadEndpointsError` surfaces via `error` instead.
-      if (!listEndpointSupported) {
-        store.setContext(null);
-        hasDispatchedContext.value = false;
-        return;
-      }
-
-      // No `headers` here: the store's `fetch` is `copilotkit.value.ɵruntimeFetch`,
-      // which already resolves and overlays the current core headers at send
-      // time (#1937) — a snapshot here would go stale the moment the builder
-      // returns something new.
-      const context: ɵThreadRuntimeContext = {
-        runtimeUrl,
-        wsUrl,
-        agentId,
-        includeArchived,
-        limit,
-      };
-
-      store.setContext(context);
-      hasDispatchedContext.value = true;
-    },
+    ([next]) => controller.update(next),
     { immediate: true },
   );
 
-  const runtimeError = computed<Error | null>(() =>
-    copilotkit.value.runtimeUrl
-      ? null
-      : new Error("Runtime URL is not configured"),
-  );
-
-  const preConnectLoading = computed(
-    () =>
-      !!copilotkit.value.runtimeUrl &&
-      resolvedEnabled.value &&
-      !threadEndpointsUnavailable.value &&
-      !hasDispatchedContext.value,
-  );
-
-  const isLoading = computed(() =>
-    runtimeError.value || threadEndpointsError.value
-      ? false
-      : preConnectLoading.value || storeIsLoading.value,
-  );
-
-  // Folds developer/config errors (missing runtime URL, runtime without
-  // thread endpoints) together with genuine store errors. `listError` below
-  // deliberately excludes the config errors.
-  const error = computed<Error | null>(
-    () => runtimeError.value ?? threadEndpointsError.value ?? storeError.value,
-  );
-
-  // Genuine store errors only. Unlike `error`, this omits the dev/config
-  // `runtimeError`/`threadEndpointsError` strings so they are never shown in
-  // user-facing error UI.
-  const listError = computed<Error | null>(() => storeError.value);
-
-  // Reject mutations locally (before touching the network) when the runtime
-  // reports mutations are unsupported, matching React's `guardMutation`.
-  function guardMutation<TArgs extends unknown[]>(
-    mutation: (...args: TArgs) => Promise<void>,
-  ): (...args: TArgs) => Promise<void> {
-    return (...args: TArgs) => {
-      if (threadMutationsError.value) {
-        return Promise.reject(threadMutationsError.value);
-      }
-      return mutation(...args);
-    };
-  }
-
   return {
-    threads: computed(() =>
-      threads.value.map(
-        ({ id, agentId, name, archived, createdAt, updatedAt, lastRunAt }) => ({
-          id,
-          agentId,
-          name,
-          archived,
-          createdAt,
-          updatedAt,
-          ...(lastRunAt !== undefined ? { lastRunAt } : {}),
-        }),
-      ),
-    ),
-    isLoading,
-    error,
-    listError,
-    fetchMoreError,
-    hasMoreThreads,
-    isFetchingMoreThreads,
-    isMutating,
-    fetchMoreThreads: () => store.fetchNextPage(),
-    refetchThreads: () => store.refetchThreads(),
-    startNewThread: () => store.startNewThread(),
-    renameThread: guardMutation((threadId: string, name: string) =>
-      store.renameThread(threadId, name),
-    ),
-    archiveThread: guardMutation((threadId: string) =>
-      store.archiveThread(threadId),
-    ),
-    unarchiveThread: guardMutation((threadId: string) =>
-      store.unarchiveThread(threadId),
-    ),
-    deleteThread: guardMutation((threadId: string) =>
-      store.deleteThread(threadId),
-    ),
+    threads: computed(() => snapshot.value.threads),
+    isLoading: computed(() => snapshot.value.isLoading),
+    error: computed(() => snapshot.value.error),
+    listError: computed(() => snapshot.value.listError),
+    fetchMoreError: computed(() => snapshot.value.fetchMoreError),
+    hasMoreThreads: computed(() => snapshot.value.hasMoreThreads),
+    isFetchingMoreThreads: computed(() => snapshot.value.isFetchingMoreThreads),
+    isMutating: computed(() => snapshot.value.isMutating),
+    fetchMoreThreads: controller.fetchMoreThreads,
+    refetchThreads: controller.refetchThreads,
+    startNewThread: controller.startNewThread,
+    renameThread: controller.renameThread,
+    archiveThread: controller.archiveThread,
+    unarchiveThread: controller.unarchiveThread,
+    deleteThread: controller.deleteThread,
   };
 }