@copilotkit/vue 2.0.0-rc.3 → 2.0.0-rc.31

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 { DEFAULT_AGENT_ID } from "@copilotkit/shared";
+import {
+  ɵdescribeActivityRendererFailure,
+  ɵfindActivityRenderer,
+  ɵmatchActivityRenderer,
+  ɵresolveAgentId,
+} from "@copilotkit/core";
 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,52 @@ 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,
-  ]);
+  const agentId = computed(() =>
+    ɵresolveAgentId({ chatAgentId: config.value?.agentId }),
+  );
 
-  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-render-tool.ts

@@ -52,7 +52,7 @@ type RenderToolConfig<S extends StandardSchemaV1> = {
 export function useRenderTool(
   config: {
     name: "*";
-    render: ((props: any) => VNodeChild) | Component<any>;
+    render: ((props: any) => VNodeChild) | Component;
     agentId?: string;
     /** Let the chat group the calls this renderer draws (see `toolCallDisplay`). */
     group?: boolean;
@@ -126,9 +126,7 @@ export function useRenderTool<S extends StandardSchemaV1>(
               ...(config.group ? { group: true } : {}),
             });
 
-      copilotkit.value.addHookRenderToolCall(
-        renderer as VueToolCallRenderer<unknown>,
-      );
+      copilotkit.value.addHookRenderToolCall(renderer as VueToolCallRenderer);
       // Intentionally no cleanup removal to preserve renderers for chat history.
     },
     { immediate: true },

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

@@ -1,9 +1,15 @@
 import { computed, ref, toValue, watch } from "vue";
 import type { MaybeRefOrGetter, Ref } from "vue";
-import type { Suggestion } from "@copilotkit/core";
+import {
+  ɵresolveAgentId,
+  ɵ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";
 
 export interface UseSuggestionsOptions {
   agentId?: MaybeRefOrGetter<string | undefined>;
@@ -34,50 +40,25 @@ export function useSuggestions(
 ): UseSuggestionsResult {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
-  const resolvedAgentId = computed(
-    () => toValue(options.agentId) ?? config.value?.agentId ?? DEFAULT_AGENT_ID,
+  const resolvedAgentId = computed(() =>
+    ɵresolveAgentId({
+      agentId: toValue(options.agentId),
+      chatAgentId: config.value?.agentId,
+    }),
   );
 
   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 },
   );