@copilotkit/vue 1.57.1

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

@@ -0,0 +1,129 @@
+import type { Component, VNodeChild } from "vue";
+import type { Message } from "@ag-ui/core";
+import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
+import { useCopilotKit } from "../providers/useCopilotKit";
+import { useCopilotChatConfiguration } from "../providers/useCopilotChatConfiguration";
+import type {
+  VueCustomMessageRendererPosition,
+  VueCustomMessageRendererProps,
+} from "../types";
+
+interface UseRenderCustomMessagesParams {
+  message: Message;
+  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.
+ *
+ * Matches the React `useRenderCustomMessages` API: filters registered
+ * renderers by the current agent, preferring agent-scoped renderers over
+ * global ones, and computes the full renderer props (runId, indices, state
+ * snapshot).
+ *
+ * The returned function yields `null` if no chat configuration is available
+ * (i.e. when called outside a `CopilotChat` component tree) or if no
+ * matching renderer is found.
+ */
+export function useRenderCustomMessages() {
+  const { copilotkit } = useCopilotKit();
+  const config = useCopilotChatConfiguration();
+
+  return function renderCustomMessage(
+    params: UseRenderCustomMessagesParams,
+  ): CustomMessageRendererResult | null {
+    const configValue = config.value;
+    if (!configValue) return null;
+
+    const agentId = configValue.agentId || DEFAULT_AGENT_ID;
+    const { threadId } = configValue;
+    const core = copilotkit.value;
+
+    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];
+
+    const rawMessageIndex = agent.messages.findIndex(
+      (msg) => msg.id === message.id,
+    );
+    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;
+  };
+}

package/src/v2/hooks/use-render-tool.ts

@@ -0,0 +1,128 @@
+import { h, watch } from "vue";
+import type { Component, WatchSource, VNodeChild } from "vue";
+import type { StandardSchemaV1, InferSchemaOutput } from "@copilotkit/shared";
+import { useCopilotKit } from "../providers/useCopilotKit";
+import { defineToolCallRenderer } from "../types/defineToolCallRenderer";
+import type {
+  VueToolCallRenderer,
+  VueToolCallRendererRenderProps,
+} from "../types";
+
+const EMPTY_DEPS: WatchSource<unknown>[] = [];
+
+export interface RenderToolInProgressProps<S extends StandardSchemaV1> {
+  name: string;
+  toolCallId: string;
+  parameters: Partial<InferSchemaOutput<S>>;
+  status: "inProgress";
+  result: undefined;
+}
+
+export interface RenderToolExecutingProps<S extends StandardSchemaV1> {
+  name: string;
+  toolCallId: string;
+  parameters: InferSchemaOutput<S>;
+  status: "executing";
+  result: undefined;
+}
+
+export interface RenderToolCompleteProps<S extends StandardSchemaV1> {
+  name: string;
+  toolCallId: string;
+  parameters: InferSchemaOutput<S>;
+  status: "complete";
+  result: string;
+}
+
+export type RenderToolProps<S extends StandardSchemaV1> =
+  | RenderToolInProgressProps<S>
+  | RenderToolExecutingProps<S>
+  | RenderToolCompleteProps<S>;
+
+type RenderToolConfig<S extends StandardSchemaV1> = {
+  name: string;
+  parameters?: S;
+  render:
+    | ((props: RenderToolProps<S>) => VNodeChild)
+    | Component<RenderToolProps<S>>;
+  agentId?: string;
+};
+
+export function useRenderTool(
+  config: {
+    name: "*";
+    render: ((props: any) => VNodeChild) | Component<any>;
+    agentId?: string;
+  },
+  deps?: WatchSource<unknown>[],
+): void;
+
+export function useRenderTool<S extends StandardSchemaV1>(
+  config: {
+    name: string;
+    parameters: S;
+    render:
+      | ((props: RenderToolProps<S>) => VNodeChild)
+      | Component<RenderToolProps<S>>;
+    agentId?: string;
+  },
+  deps?: WatchSource<unknown>[],
+): void;
+
+export function useRenderTool<S extends StandardSchemaV1>(
+  config: RenderToolConfig<S>,
+  deps?: WatchSource<unknown>[],
+): void {
+  const { copilotkit } = useCopilotKit();
+  const extraDeps = deps ?? EMPTY_DEPS;
+
+  watch(
+    [
+      () => copilotkit.value,
+      () => config.name,
+      () => config.agentId,
+      () => extraDeps.length,
+      ...extraDeps,
+    ],
+    () => {
+      const renderTool = (props: RenderToolProps<S>): VNodeChild => {
+        if (typeof config.render === "function") {
+          return (config.render as (props: RenderToolProps<S>) => VNodeChild)(
+            props,
+          );
+        }
+        return h(config.render, props);
+      };
+
+      const renderer =
+        config.name === "*" && !config.parameters
+          ? defineToolCallRenderer({
+              name: "*",
+              render: (props: VueToolCallRendererRenderProps<unknown>) =>
+                renderTool({
+                  ...props,
+                  parameters: props.args,
+                } as RenderToolProps<S>),
+              ...(config.agentId ? { agentId: config.agentId } : {}),
+            })
+          : defineToolCallRenderer({
+              name: config.name,
+              args: config.parameters!,
+              render: (
+                props: VueToolCallRendererRenderProps<InferSchemaOutput<S>>,
+              ) =>
+                renderTool({
+                  ...props,
+                  parameters: props.args,
+                } as RenderToolProps<S>),
+              ...(config.agentId ? { agentId: config.agentId } : {}),
+            });
+
+      copilotkit.value.addHookRenderToolCall(
+        renderer as VueToolCallRenderer<unknown>,
+      );
+      // Intentionally no cleanup removal to preserve renderers for chat history.
+    },
+    { immediate: true },
+  );
+}

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

@@ -0,0 +1,98 @@
+import { computed, ref, toValue, watch } from "vue";
+import type { MaybeRefOrGetter, Ref } from "vue";
+import type { 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>;
+}
+
+export interface UseSuggestionsResult {
+  suggestions: Ref<Suggestion[]>;
+  isLoading: Ref<boolean>;
+  reloadSuggestions: () => void;
+  clearSuggestions: () => void;
+}
+
+/**
+ * Provides reactive access to agent suggestions.
+ *
+ * It tracks suggestion updates for the resolved agent and exposes helpers to
+ * reload or clear suggestions.
+ *
+ * @example
+ * ```ts
+ * const { suggestions, isLoading, reloadSuggestions } = useSuggestions({
+ *   agentId: "default",
+ * });
+ * ```
+ */
+export function useSuggestions(
+  options: UseSuggestionsOptions = {},
+): UseSuggestionsResult {
+  const { copilotkit } = useCopilotKit();
+  const config = useCopilotChatConfiguration();
+  const resolvedAgentId = computed(
+    () => toValue(options.agentId) ?? config.value?.agentId ?? DEFAULT_AGENT_ID,
+  );
+
+  const suggestions = ref<Suggestion[]>([]);
+  const isLoading = ref(false);
+
+  const initState = () => {
+    const result = copilotkit.value.getSuggestions(resolvedAgentId.value);
+    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());
+    },
+    { immediate: true },
+  );
+
+  const reloadSuggestions = () => {
+    copilotkit.value.reloadSuggestions(resolvedAgentId.value);
+  };
+  const clearSuggestions = () => {
+    copilotkit.value.clearSuggestions(resolvedAgentId.value);
+  };
+
+  return {
+    suggestions,
+    isLoading,
+    reloadSuggestions,
+    clearSuggestions,
+  };
+}

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

@@ -0,0 +1,208 @@
+import { computed, onScopeDispose, ref, toValue, watch } from "vue";
+import type { MaybeRefOrGetter, Ref } from "vue";
+import {
+  CopilotKitCoreRuntimeConnectionStatus,
+  ɵcreateThreadStore,
+  ɵselectHasNextPage,
+  ɵselectIsFetchingNextPage,
+  ɵselectThreads,
+  ɵselectThreadsError,
+  ɵselectThreadsIsLoading,
+} from "@copilotkit/core";
+import type { ɵThreadRuntimeContext, ɵThreadStore } from "@copilotkit/core";
+import { useCopilotKit } from "../providers/useCopilotKit";
+
+export interface Thread {
+  id: string;
+  agentId: string;
+  name: string | null;
+  archived: boolean;
+  createdAt: string;
+  updatedAt: string;
+  /**
+   * ISO-8601 timestamp of the most recent agent run on this thread. Absent
+   * when the thread has never been run. Prefer this over `updatedAt` for
+   * user-facing "last activity" displays — it is not bumped by metadata-only
+   * actions like rename or archive.
+   */
+  lastRunAt?: string;
+}
+
+export interface UseThreadsInput {
+  agentId: MaybeRefOrGetter<string>;
+  includeArchived?: MaybeRefOrGetter<boolean | undefined>;
+  limit?: MaybeRefOrGetter<number | undefined>;
+}
+
+export interface UseThreadsResult {
+  threads: Ref<Thread[]>;
+  isLoading: Ref<boolean>;
+  error: Ref<Error | null>;
+  hasMoreThreads: Ref<boolean>;
+  isFetchingMoreThreads: Ref<boolean>;
+  fetchMoreThreads: () => void;
+  renameThread: (threadId: string, name: string) => Promise<void>;
+  archiveThread: (threadId: string) => Promise<void>;
+  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 Intelligence platform 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: globalThis.fetch,
+  });
+
+  const resolvedAgentId = computed(() => toValue(input.agentId));
+  const resolvedIncludeArchived = computed(() =>
+    toValue(input.includeArchived),
+  );
+  const resolvedLimit = computed(() => toValue(input.limit));
+  const headersKey = computed(() =>
+    JSON.stringify(
+      Object.entries(copilotkit.value.headers ?? {}).sort(([left], [right]) =>
+        left.localeCompare(right),
+      ),
+    ),
+  );
+
+  const threads = ref<Thread[]>([]);
+  const storeIsLoading = ref(false);
+  const storeError = ref<Error | null>(null);
+  const hasMoreThreads = ref(false);
+  const isFetchingMoreThreads = ref(false);
+
+  bindThreadStoreSelector(store, ɵselectThreads, threads as Ref<Thread[]>);
+  bindThreadStoreSelector(store, ɵselectThreadsIsLoading, storeIsLoading);
+  bindThreadStoreSelector(store, ɵselectThreadsError, storeError);
+  bindThreadStoreSelector(store, ɵselectHasNextPage, hasMoreThreads);
+  bindThreadStoreSelector(
+    store,
+    ɵselectIsFetchingNextPage,
+    isFetchingMoreThreads,
+  );
+
+  store.start();
+  onScopeDispose(() => {
+    store.stop();
+  });
+
+  // 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(
+    [
+      () => copilotkit.value.runtimeUrl,
+      () => copilotkit.value.runtimeConnectionStatus,
+      headersKey,
+      () => copilotkit.value.intelligence?.wsUrl,
+      resolvedAgentId,
+      resolvedIncludeArchived,
+      resolvedLimit,
+    ],
+    ([runtimeUrl, runtimeStatus, , wsUrl, agentId, includeArchived, limit]) => {
+      if (!runtimeUrl) {
+        store.setContext(null);
+        return;
+      }
+
+      if (runtimeStatus !== CopilotKitCoreRuntimeConnectionStatus.Connected) {
+        return;
+      }
+
+      const context: ɵThreadRuntimeContext = {
+        runtimeUrl,
+        headers: { ...copilotkit.value.headers },
+        wsUrl,
+        agentId,
+        includeArchived,
+        limit,
+      };
+
+      store.setContext(context);
+      hasDispatchedContext.value = true;
+    },
+    { immediate: true },
+  );
+
+  const runtimeError = computed<Error | null>(() =>
+    copilotkit.value.runtimeUrl
+      ? null
+      : new Error("Runtime URL is not configured"),
+  );
+
+  const preConnectLoading = computed(
+    () => !!copilotkit.value.runtimeUrl && !hasDispatchedContext.value,
+  );
+
+  const isLoading = computed(() =>
+    runtimeError.value
+      ? false
+      : preConnectLoading.value || storeIsLoading.value,
+  );
+
+  const error = computed<Error | null>(
+    () => runtimeError.value ?? storeError.value,
+  );
+
+  return {
+    threads: computed(() =>
+      threads.value.map(
+        ({ id, agentId, name, archived, createdAt, updatedAt, lastRunAt }) => ({
+          id,
+          agentId,
+          name,
+          archived,
+          createdAt,
+          updatedAt,
+          ...(lastRunAt !== undefined ? { lastRunAt } : {}),
+        }),
+      ),
+    ),
+    isLoading,
+    error,
+    hasMoreThreads,
+    isFetchingMoreThreads,
+    fetchMoreThreads: () => store.fetchNextPage(),
+    renameThread: (threadId: string, name: string) =>
+      store.renameThread(threadId, name),
+    archiveThread: (threadId: string) => store.archiveThread(threadId),
+    deleteThread: (threadId: string) => store.deleteThread(threadId),
+  };
+}

package/src/v2/index.ts

@@ -0,0 +1,11 @@
+// Re-export core (framework-agnostic)
+export * from "@copilotkit/core";
+export * from "@ag-ui/client";
+
+// Local V2 vue code
+export * from "./components";
+export * from "./hooks";
+export * from "./providers";
+export * from "./types";
+export * from "./lib/vue-core";
+export * from "./lib/processPartialHtml";

package/src/v2/lib/__tests__/processPartialHtml.test.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect } from "vitest";
+import {
+  processPartialHtml,
+  extractCompleteStyles,
+} from "../processPartialHtml";
+
+describe("processPartialHtml", () => {
+  it("returns empty string for empty input", () => {
+    expect(processPartialHtml("")).toBe("");
+  });
+
+  it("strips incomplete tag at end", () => {
+    expect(processPartialHtml('<div>Hello<span class="fo')).toBe("<div>Hello");
+  });
+
+  it("strips complete <style> blocks", () => {
+    const input =
+      "<div>Hello</div><style>.foo { color: red; }</style><p>World</p>";
+    expect(processPartialHtml(input)).toBe("<div>Hello</div><p>World</p>");
+  });
+
+  it("strips complete <script> blocks", () => {
+    const input = '<div>Hello</div><script>alert("hi")</script><p>World</p>';
+    expect(processPartialHtml(input)).toBe("<div>Hello</div><p>World</p>");
+  });
+
+  it("strips incomplete <style> block", () => {
+    const input = "<div>Hello</div><style>.foo { color:";
+    expect(processPartialHtml(input)).toBe("<div>Hello</div>");
+  });
+
+  it("strips incomplete <script> block", () => {
+    const input = '<div>Hello</div><script>const x = "val';
+    expect(processPartialHtml(input)).toBe("<div>Hello</div>");
+  });
+
+  it("strips incomplete HTML entities", () => {
+    expect(processPartialHtml("<p>Hello &amp")).toBe("<p>Hello ");
+    expect(processPartialHtml("<p>Hello &#123")).toBe("<p>Hello ");
+  });
+
+  it("preserves complete entities", () => {
+    expect(processPartialHtml("<p>Hello &amp; World</p>")).toBe(
+      "<p>Hello &amp; World</p>",
+    );
+  });
+
+  it("extracts body content from full HTML document", () => {
+    const input =
+      "<html><head><title>Test</title></head><body><p>Content</p></body></html>";
+    expect(processPartialHtml(input)).toBe("<p>Content</p>");
+  });
+
+  it("handles <body> with attributes", () => {
+    const input = '<body class="dark"><p>Content</p></body>';
+    expect(processPartialHtml(input)).toBe("<p>Content</p>");
+  });
+
+  it("handles no <body> tag", () => {
+    const input = "<div><p>Just content</p></div>";
+    expect(processPartialHtml(input)).toBe("<div><p>Just content</p></div>");
+  });
+});
+
+describe("extractCompleteStyles", () => {
+  it("returns empty string for no styles", () => {
+    expect(extractCompleteStyles("<div>Hello</div>")).toBe("");
+  });
+
+  it("extracts a single complete style block", () => {
+    const input =
+      "<div>Hello</div><style>.foo { color: red; }</style><p>World</p>";
+    expect(extractCompleteStyles(input)).toBe(
+      "<style>.foo { color: red; }</style>",
+    );
+  });
+
+  it("extracts multiple complete style blocks", () => {
+    const input = "<style>a{}</style><div>X</div><style>b{}</style>";
+    expect(extractCompleteStyles(input)).toBe(
+      "<style>a{}</style><style>b{}</style>",
+    );
+  });
+});