@copilotkit/vue 1.57.1

package/src/v2/lib/__tests__/transcription-client.test.ts

@@ -0,0 +1,65 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TranscriptionErrorCode } from "@copilotkit/shared";
+import type { TranscriptionError } from "../transcription-client";
+import { transcribeAudio } from "../transcription-client";
+import type { CopilotKitCoreVue } from "../vue-core";
+
+describe("transcription-client", () => {
+  const originalFetch = globalThis.fetch;
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+  });
+
+  it("transcribes audio in REST mode", async () => {
+    globalThis.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        text: "Transcribed text",
+        size: 12,
+        type: "audio/webm",
+      }),
+    } satisfies Partial<Response>) as typeof fetch;
+
+    const result = await transcribeAudio(
+      {
+        runtimeUrl: "/api/copilotkit",
+        runtimeTransport: "rest",
+        headers: {},
+      } as CopilotKitCoreVue,
+      new Blob(["audio"], { type: "audio/webm" }),
+    );
+
+    expect(globalThis.fetch).toHaveBeenCalledTimes(1);
+    expect(result.text).toBe("Transcribed text");
+  });
+
+  it("maps structured error responses to TranscriptionError", async () => {
+    globalThis.fetch = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 429,
+      statusText: "Too Many Requests",
+      json: async () => ({
+        error: TranscriptionErrorCode.RATE_LIMITED,
+        message: "Rate limited",
+        retryable: true,
+      }),
+    } satisfies Partial<Response>) as typeof fetch;
+
+    await expect(
+      transcribeAudio(
+        {
+          runtimeUrl: "/api/copilotkit",
+          runtimeTransport: "rest",
+          headers: {},
+        } as CopilotKitCoreVue,
+        new Blob(["audio"], { type: "audio/webm" }),
+      ),
+    ).rejects.toMatchObject({
+      info: {
+        code: TranscriptionErrorCode.RATE_LIMITED,
+        retryable: true,
+      },
+    } satisfies Partial<TranscriptionError>);
+  });
+});

package/src/v2/lib/processPartialHtml.ts

@@ -0,0 +1,21 @@
+export function extractCompleteStyles(html: string): string {
+  const matches = html.match(/<style\b[^>]*>[\s\S]*?<\/style>/gi);
+  return matches ? matches.join("") : "";
+}
+
+export function processPartialHtml(html: string): string {
+  let result = html;
+
+  result = result.replace(/<[^>]*$/, "");
+  result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*?<\/\1>/gi, "");
+  result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*$/gi, "");
+  result = result.replace(/&[a-zA-Z0-9#]*$/, "");
+
+  const bodyMatch = result.match(/<body[^>]*>([\s\S]*)/i);
+  if (bodyMatch) {
+    result = bodyMatch[1]!;
+    result = result.replace(/<\/body>[\s\S]*/i, "");
+  }
+
+  return result;
+}

package/src/v2/lib/shallow-stable.ts

@@ -0,0 +1,54 @@
+import { shallowRef, toValue, watch } from "vue";
+import type { MaybeRefOrGetter, ShallowRef } from "vue";
+
+function shallowEqualObjects(
+  first: Record<string, unknown>,
+  second: Record<string, unknown>,
+): boolean {
+  const firstKeys = Object.keys(first);
+  const secondKeys = Object.keys(second);
+  if (firstKeys.length !== secondKeys.length) return false;
+
+  for (const key of firstKeys) {
+    if (first[key] !== second[key]) return false;
+  }
+
+  return true;
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    Object.prototype.toString.call(value) === "[object Object]"
+  );
+}
+
+/**
+ * Keeps reference identity stable for shallow-equal plain-object inputs.
+ * Non-plain objects keep strict reference equality semantics.
+ */
+export function useShallowStableRef<T>(
+  value: MaybeRefOrGetter<T>,
+): Readonly<ShallowRef<T>> {
+  const stable = shallowRef(toValue(value)) as ShallowRef<T>;
+
+  watch(
+    () => toValue(value),
+    (next) => {
+      const previous = stable.value;
+      if (previous === next) return;
+
+      if (isPlainObject(previous) && isPlainObject(next)) {
+        if (shallowEqualObjects(previous, next)) {
+          return;
+        }
+      }
+
+      stable.value = next;
+    },
+    { immediate: true },
+  );
+
+  return stable;
+}

package/src/v2/lib/transcription-client.ts

@@ -0,0 +1,151 @@
+import type { CopilotKitCoreVue } from "./vue-core";
+import { TranscriptionErrorCode } from "@copilotkit/shared";
+import type { TranscriptionErrorResponse } from "@copilotkit/shared";
+
+export interface TranscriptionResult {
+  text: string;
+  size: number;
+  type: string;
+}
+
+export interface TranscriptionErrorInfo {
+  code: TranscriptionErrorCode;
+  message: string;
+  retryable: boolean;
+}
+
+export { TranscriptionErrorCode };
+
+async function blobToBase64(blob: Blob): Promise<string> {
+  return await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = reader.result as string;
+      resolve(result.split(",")[1] ?? "");
+    };
+    reader.addEventListener("error", () =>
+      reject(new Error("Failed to read audio data")),
+    );
+    reader.readAsDataURL(blob);
+  });
+}
+
+function isTranscriptionErrorResponse(
+  data: unknown,
+): data is TranscriptionErrorResponse {
+  return (
+    typeof data === "object" &&
+    data !== null &&
+    "error" in data &&
+    "message" in data &&
+    typeof (data as TranscriptionErrorResponse).error === "string" &&
+    typeof (data as TranscriptionErrorResponse).message === "string"
+  );
+}
+
+function parseTranscriptionError(
+  response: TranscriptionErrorResponse,
+): TranscriptionErrorInfo {
+  return {
+    code: response.error,
+    message: response.message,
+    retryable: response.retryable ?? false,
+  };
+}
+
+export class TranscriptionError extends Error {
+  public readonly info: TranscriptionErrorInfo;
+
+  constructor(info: TranscriptionErrorInfo) {
+    super(info.message);
+    this.name = "TranscriptionError";
+    this.info = info;
+  }
+}
+
+export async function transcribeAudio(
+  core: CopilotKitCoreVue,
+  audioBlob: Blob,
+  filename: string = "recording.webm",
+): Promise<TranscriptionResult> {
+  const runtimeUrl = core.runtimeUrl;
+  if (!runtimeUrl) {
+    throw new TranscriptionError({
+      code: TranscriptionErrorCode.INVALID_REQUEST,
+      message: "Runtime URL is not configured",
+      retryable: false,
+    });
+  }
+
+  const headers: Record<string, string> = { ...core.headers };
+  let response: Response;
+
+  try {
+    if (core.runtimeTransport === "single") {
+      const base64Audio = await blobToBase64(audioBlob);
+
+      headers["Content-Type"] = "application/json";
+
+      response = await fetch(runtimeUrl, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          method: "transcribe",
+          body: {
+            audio: base64Audio,
+            mimeType: audioBlob.type || "audio/webm",
+            filename,
+          },
+        }),
+      });
+    } else {
+      delete headers["Content-Type"];
+
+      const formData = new FormData();
+      formData.append("audio", audioBlob, filename);
+
+      response = await fetch(`${runtimeUrl}/transcribe`, {
+        method: "POST",
+        headers,
+        body: formData,
+      });
+    }
+  } catch (error) {
+    throw new TranscriptionError({
+      code: TranscriptionErrorCode.NETWORK_ERROR,
+      message:
+        error instanceof Error ? error.message : "Network request failed",
+      retryable: true,
+    });
+  }
+
+  if (!response.ok) {
+    let errorData: unknown;
+    try {
+      errorData = await response.json();
+    } catch {
+      throw new TranscriptionError({
+        code: TranscriptionErrorCode.PROVIDER_ERROR,
+        message: `HTTP ${response.status}: ${response.statusText}`,
+        retryable: response.status >= 500,
+      });
+    }
+
+    if (isTranscriptionErrorResponse(errorData)) {
+      throw new TranscriptionError(parseTranscriptionError(errorData));
+    }
+
+    throw new TranscriptionError({
+      code: TranscriptionErrorCode.PROVIDER_ERROR,
+      message:
+        typeof errorData === "object" &&
+        errorData !== null &&
+        "message" in errorData
+          ? String((errorData as { message: unknown }).message)
+          : "Transcription failed",
+      retryable: response.status >= 500,
+    });
+  }
+
+  return (await response.json()) as TranscriptionResult;
+}

package/src/v2/lib/vue-core.ts

@@ -0,0 +1,161 @@
+import { nextTick } from "vue";
+import type {
+  VueActivityMessageRenderer,
+  VueToolCallRenderer,
+  VueCustomMessageRenderer,
+} from "../types";
+import type { InterruptRenderProps } from "../types/interrupt";
+import { CopilotKitCore } from "@copilotkit/core";
+import type {
+  CopilotKitCoreConfig,
+  CopilotKitCoreSubscriber,
+  CopilotKitCoreSubscription,
+} from "@copilotkit/core";
+
+export interface CopilotKitCoreVueConfig extends CopilotKitCoreConfig {
+  renderToolCalls?: VueToolCallRenderer<unknown>[];
+  renderActivityMessages?: VueActivityMessageRenderer<unknown>[];
+  renderCustomMessages?: VueCustomMessageRenderer[];
+}
+
+export interface CopilotKitCoreVueSubscriber extends CopilotKitCoreSubscriber {
+  onRenderToolCallsChanged?: (event: {
+    copilotkit: CopilotKitCoreVue;
+    renderToolCalls: VueToolCallRenderer<unknown>[];
+  }) => void | Promise<void>;
+  onRenderCustomMessagesChanged?: (event: {
+    copilotkit: CopilotKitCoreVue;
+    renderCustomMessages: VueCustomMessageRenderer[];
+  }) => void | Promise<void>;
+  onInterruptStateChanged?: (event: {
+    copilotkit: CopilotKitCoreVue;
+    interruptState: InterruptRenderProps<unknown, unknown> | null;
+  }) => void | Promise<void>;
+}
+
+export class CopilotKitCoreVue extends CopilotKitCore {
+  private _renderToolCalls: VueToolCallRenderer<unknown>[] = [];
+  private _hookRenderToolCalls: Map<string, VueToolCallRenderer<unknown>> =
+    new Map();
+  private _cachedMergedRenderToolCalls: VueToolCallRenderer<unknown>[] | null =
+    null;
+  private _renderCustomMessages: VueCustomMessageRenderer[] = [];
+  private _renderActivityMessages: VueActivityMessageRenderer<unknown>[] = [];
+  private _interruptState: InterruptRenderProps<unknown, unknown> | null = null;
+
+  constructor(config: CopilotKitCoreVueConfig) {
+    super(config);
+    this._renderToolCalls = config.renderToolCalls ?? [];
+    this._renderCustomMessages = config.renderCustomMessages ?? [];
+    this._renderActivityMessages = config.renderActivityMessages ?? [];
+  }
+
+  get renderCustomMessages(): Readonly<VueCustomMessageRenderer[]> {
+    return this._renderCustomMessages;
+  }
+
+  get renderActivityMessages(): Readonly<
+    VueActivityMessageRenderer<unknown>[]
+  > {
+    return this._renderActivityMessages;
+  }
+
+  setRenderActivityMessages(
+    renderers: VueActivityMessageRenderer<unknown>[],
+  ): void {
+    this._renderActivityMessages = [...renderers];
+  }
+
+  setRenderCustomMessages(renderers: VueCustomMessageRenderer[]): void {
+    this._renderCustomMessages = [...renderers];
+    void this.notifySubscribers((subscriber) => {
+      const vueSubscriber = subscriber as CopilotKitCoreVueSubscriber;
+      vueSubscriber.onRenderCustomMessagesChanged?.({
+        copilotkit: this,
+        renderCustomMessages: [...this.renderCustomMessages],
+      });
+    }, "Subscriber onRenderCustomMessagesChanged error:");
+  }
+
+  get propRenderToolCalls(): Readonly<VueToolCallRenderer<unknown>[]> {
+    return this._renderToolCalls;
+  }
+
+  get renderToolCalls(): Readonly<VueToolCallRenderer<unknown>[]> {
+    if (this._hookRenderToolCalls.size === 0) {
+      return this._renderToolCalls;
+    }
+    if (this._cachedMergedRenderToolCalls) {
+      return this._cachedMergedRenderToolCalls;
+    }
+    const merged = new Map<string, VueToolCallRenderer<unknown>>();
+    for (const rc of this._renderToolCalls) {
+      merged.set(`${rc.agentId ?? ""}:${rc.name}`, rc);
+    }
+    for (const [key, rc] of this._hookRenderToolCalls) {
+      merged.set(key, rc);
+    }
+    this._cachedMergedRenderToolCalls = Array.from(merged.values());
+    return this._cachedMergedRenderToolCalls;
+  }
+
+  get interruptState(): InterruptRenderProps<unknown, unknown> | null {
+    return this._interruptState;
+  }
+
+  setRenderToolCalls(renderToolCalls: VueToolCallRenderer<unknown>[]): void {
+    this._renderToolCalls = [...renderToolCalls];
+    this._cachedMergedRenderToolCalls = null;
+    this._notifyRenderToolCallsChanged();
+  }
+
+  addHookRenderToolCall(entry: VueToolCallRenderer<unknown>): void {
+    const key = `${entry.agentId ?? ""}:${entry.name}`;
+    this._hookRenderToolCalls.set(key, entry);
+    this._cachedMergedRenderToolCalls = null;
+    this._notifyRenderToolCallsChanged();
+  }
+
+  removeHookRenderToolCall(name: string, agentId?: string): void {
+    const key = `${agentId ?? ""}:${name}`;
+    if (this._hookRenderToolCalls.delete(key)) {
+      this._cachedMergedRenderToolCalls = null;
+      this._notifyRenderToolCallsChanged();
+    }
+  }
+
+  private _notifyRenderToolCallsChanged(): void {
+    void this.notifySubscribers((subscriber) => {
+      const vueSubscriber = subscriber as CopilotKitCoreVueSubscriber;
+      if (vueSubscriber.onRenderToolCallsChanged) {
+        vueSubscriber.onRenderToolCallsChanged({
+          copilotkit: this,
+          renderToolCalls: [...this.renderToolCalls],
+        });
+      }
+    }, "Subscriber onRenderToolCallsChanged error:");
+  }
+
+  setInterruptState(
+    interruptState: InterruptRenderProps<unknown, unknown> | null,
+  ): void {
+    this._interruptState = interruptState;
+    void this.notifySubscribers((subscriber) => {
+      const vueSubscriber = subscriber as CopilotKitCoreVueSubscriber;
+      vueSubscriber.onInterruptStateChanged?.({
+        copilotkit: this,
+        interruptState: this._interruptState,
+      });
+    }, "Subscriber onInterruptStateChanged error:");
+  }
+
+  subscribe(
+    subscriber: CopilotKitCoreVueSubscriber,
+  ): CopilotKitCoreSubscription {
+    return super.subscribe(subscriber);
+  }
+
+  async waitForPendingFrameworkUpdates(): Promise<void> {
+    await nextTick();
+  }
+}

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

@@ -0,0 +1,15 @@
+import type { CopilotChatLabels } from "./types";
+
+export interface CopilotChatConfigurationProviderProps {
+  labels?: Partial<CopilotChatLabels>;
+  agentId?: string;
+  threadId?: string;
+  /**
+   * Lets internal wrappers (e.g. a v1-style `CopilotKit` bridge that pipes a
+   * locally minted UUID through as `threadId`) declare that the supplied
+   * `threadId` is NOT a caller choice. When omitted, the provider infers
+   * explicitness from whether the `threadId` prop itself was supplied.
+   */
+  hasExplicitThreadId?: boolean;
+  isModalDefaultOpen?: boolean;
+}

package/src/v2/providers/CopilotChatConfigurationProvider.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed, inject, provide, ref } from "vue";
+import type { ComputedRef } from "vue";
+import { DEFAULT_AGENT_ID, randomUUID } from "@copilotkit/shared";
+import { CopilotChatConfigurationKey } from "./keys";
+import { CopilotChatDefaultLabels } from "./types";
+import type { CopilotChatConfigurationValue, CopilotChatLabels } from "./types";
+import type { CopilotChatConfigurationProviderProps } from "./CopilotChatConfigurationProvider.types";
+import { useShallowStableRef } from "../lib/shallow-stable";
+
+// 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>(),
+  {
+    hasExplicitThreadId: undefined,
+    isModalDefaultOpen: undefined,
+  },
+);
+
+const parentConfig = inject<ComputedRef<CopilotChatConfigurationValue> | null>(
+  CopilotChatConfigurationKey,
+  null,
+);
+const parentConfigValue = computed(() => parentConfig?.value ?? null);
+const stableLabels = useShallowStableRef(computed(() => props.labels));
+
+const mergedLabels = computed<CopilotChatLabels>(() => ({
+  ...CopilotChatDefaultLabels,
+  ...parentConfigValue.value?.labels,
+  ...stableLabels.value,
+}));
+
+const resolvedAgentId = computed(
+  () => props.agentId ?? parentConfigValue.value?.agentId ?? DEFAULT_AGENT_ID,
+);
+
+const fallbackThreadId = randomUUID();
+const resolvedThreadId = computed(() => {
+  if (props.threadId) return props.threadId;
+  if (parentConfigValue.value?.threadId)
+    return parentConfigValue.value.threadId;
+  return fallbackThreadId;
+});
+
+const resolvedHasExplicitThreadId = computed(() => {
+  const ownExplicit =
+    props.hasExplicitThreadId !== undefined
+      ? props.hasExplicitThreadId
+      : !!props.threadId;
+  return ownExplicit || !!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,
+);
+
+const configurationValue = computed<CopilotChatConfigurationValue>(() => ({
+  labels: mergedLabels.value,
+  agentId: resolvedAgentId.value,
+  threadId: resolvedThreadId.value,
+  hasExplicitThreadId: resolvedHasExplicitThreadId.value,
+  isModalOpen: resolvedIsModalOpen.value,
+  setModalOpen: resolvedSetModalOpen.value,
+}));
+
+provide(CopilotChatConfigurationKey, configurationValue);
+</script>
+
+<template>
+  <slot />
+</template>

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

@@ -0,0 +1,66 @@
+import type { AbstractAgent } from "@ag-ui/client";
+import type { CopilotKitCoreErrorCode } from "@copilotkit/core";
+import type { DebugConfig } from "@copilotkit/shared";
+import type {
+  A2UITheme,
+  SandboxFunction,
+  VueActivityMessageRenderer,
+  VueCustomMessageRenderer,
+  VueFrontendTool,
+  VueHumanInTheLoop,
+  VueToolCallRenderer,
+} from "../types";
+import type { Component } from "vue";
+
+export interface CopilotKitProviderProps {
+  runtimeUrl?: string;
+  headers?: Record<string, string> | (() => Record<string, string>);
+  credentials?: RequestCredentials;
+  defaultThrottleMs?: number;
+  publicApiKey?: string;
+  publicLicenseKey?: string;
+  /**
+   * Signed license token for offline verification of premium features.
+   * Obtain from https://cloud.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[];
+  frontendTools?: VueFrontendTool[];
+  humanInTheLoop?: VueHumanInTheLoop[];
+  openGenerativeUI?: {
+    sandboxFunctions?: SandboxFunction[];
+    designSkill?: string;
+  };
+  showDevConsole?: boolean | "auto";
+  onError?: (event: {
+    error: Error;
+    code: CopilotKitCoreErrorCode;
+    context: Record<string, any>;
+  }) => void | Promise<void>;
+  a2ui?: {
+    theme?: A2UITheme;
+    catalog?: any;
+    loadingComponent?: Component;
+    includeSchema?: boolean;
+  };
+  /**
+   * Default anchor corner for the inspector button and window.
+   * Only used on first load before the user drags to a custom position.
+   * Defaults to `{ horizontal: "right", vertical: "top" }`.
+   */
+  inspectorDefaultAnchor?: { horizontal: "left" | "right"; vertical: "top" | "bottom" };
+  /**
+   * 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;
+}