@copilotkit/vue 2.0.0-rc.7 → 2.0.0-rc.9

package/src/v2/components/__tests__/OpenGenerativeUIRenderer.test.ts

@@ -1,4 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type * as CoreModule from "@copilotkit/core";
 import { render } from "@testing-library/vue";
 import { ref } from "vue";
 import type { Ref } from "vue";
@@ -37,12 +38,25 @@ const mockCreate = vi.fn<MockCreateFn>(() => ({
   destroy: mockDestroy,
 }));
 
-vi.mock("@jetbrains/websandbox", () => ({
-  default: {
-    create: (localApi: Record<string, unknown>, options: SandboxOptions) =>
-      mockCreate(localApi, options),
-  },
-}));
+// Run the real core controller against a fake websandbox
+vi.mock("@copilotkit/core", async (importOriginal) => {
+  const actual = await importOriginal<typeof CoreModule>();
+  class TestOpenGenerativeUIController
+    extends actual.ɵOpenGenerativeUIController
+  {
+    constructor() {
+      super({
+        loadWebsandbox: async () => ({
+          create: (localApi, options) => mockCreate(localApi, options),
+        }),
+      });
+    }
+  }
+  return {
+    ...actual,
+    ɵOpenGenerativeUIController: TestOpenGenerativeUIController,
+  };
+});
 
 async function flushImport() {
   await new Promise((resolve) => setTimeout(resolve, 0));
@@ -178,6 +192,41 @@ describe("OpenGenerativeUIRenderer", () => {
     expect(options.frameContent).toContain("v2");
   });
 
+  it("sizes the container to the height the final sandbox reports", async () => {
+    const iframe = document.createElement("iframe");
+    mockCreate.mockImplementationOnce((_localApi, options) => {
+      (options.frameContainer as HTMLElement).appendChild(iframe);
+      return {
+        iframe,
+        promise: Promise.resolve(),
+        run: mockRun,
+        destroy: mockDestroy,
+      };
+    });
+    const { getByTestId } = renderRenderer({
+      initialHeight: 150,
+      html: ["<body><p>Chart</p></body>"],
+      htmlComplete: true,
+      generating: false,
+    });
+    await flushImport();
+    expect(getByTestId("open-generative-ui-renderer").style.height).toBe(
+      "150px",
+    );
+
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        source: iframe.contentWindow,
+        data: { type: "__ck_resize", height: 420 },
+      }),
+    );
+    await flushImport();
+
+    expect(getByTestId("open-generative-ui-renderer").style.height).toBe(
+      "420px",
+    );
+  });
+
   it("destroys sandbox on unmount", async () => {
     const mounted = renderRenderer({
       html: ["<head></head><body>bye</body>"],

package/src/v2/components/a2ui/A2UIBuiltInToolCallRenderer.ts

@@ -1,6 +1,6 @@
 import { watch } from "vue";
 import type { ShallowRef } from "vue";
-import { z } from "zod";
+import * as z from "zod";
 import type { CopilotKitCoreVue } from "../../lib/vue-core";
 import { defineToolCallRenderer } from "../../types/defineToolCallRenderer";
 

package/src/v2/components/a2ui/A2UICatalogContext.ts

@@ -1,7 +1,11 @@
 import { computed, watch } from "vue";
 import type { ShallowRef } from "vue";
 import type { Catalog, ComponentApi } from "@a2ui/web_core/v0_9";
-import { zodToJsonSchema } from "zod-to-json-schema";
+import {
+  A2UI_SCHEMA_CONTEXT_DESCRIPTION,
+  buildCatalogContextValue as buildContextValue,
+  extractCatalogComponentSchemas,
+} from "@copilotkit/a2ui-renderer/catalog-schema";
 import {
   A2UI_DEFAULT_GENERATION_GUIDELINES,
   A2UI_DEFAULT_DESIGN_GUIDELINES,
@@ -9,22 +13,9 @@ import {
 import type { CopilotKitCoreVue } from "../../lib/vue-core";
 import { vueBasicCatalog } from "./catalog";
 
-/**
- * Context description used to identify the A2UI component schema in
- * RunAgentInput.context.  Must match the constant in @ag-ui/a2ui-middleware
- * so the middleware can overwrite a frontend-provided schema with a
- * server-side one.
- *
- * Duplicated from @copilotkit/a2ui-renderer/catalog-utils to avoid pulling
- * in React dependencies.
- */
-const A2UI_SCHEMA_CONTEXT_DESCRIPTION =
-  "A2UI Component Schema — available components for generating UI surfaces. " +
-  "Use these component names and properties when creating A2UI operations.";
-
 /**
  * Build a context string describing the available A2UI catalog.
- * Vue-native equivalent of buildCatalogContextValue from a2ui-renderer.
+ * Defaults to the Vue basic catalog.
  *
  * When `options.includeSchema` is `false`, custom components are listed by name
  * only and their JSON schemas are omitted.
@@ -33,92 +24,7 @@ export function buildCatalogContextValue(
   catalog?: Catalog<ComponentApi>,
   options?: { includeSchema?: boolean },
 ): string {
-  const resolved = catalog ?? vueBasicCatalog;
-  const BASIC_CATALOG_ID =
-    "https://a2ui.org/specification/v0_9/basic_catalog.json";
-  const lines: string[] = [];
-  lines.push("Available A2UI catalog:");
-
-  if (resolved.id === BASIC_CATALOG_ID) {
-    lines.push(`- ${resolved.id} (basic catalog)`);
-    return lines.join("\n");
-  }
-
-  // Check if the resolved catalog extends the basic catalog
-  let isSuperset = true;
-  for (const name of vueBasicCatalog.components.keys()) {
-    if (!resolved.components.has(name)) {
-      isSuperset = false;
-      break;
-    }
-  }
-
-  // Identify custom components (not in basic catalog)
-  const customNames: string[] = [];
-  for (const name of resolved.components.keys()) {
-    if (!vueBasicCatalog.components.has(name)) {
-      customNames.push(name);
-    }
-  }
-
-  lines.push(`- ${resolved.id}`);
-  if (isSuperset) {
-    lines.push(
-      "  Extends the basic catalog with all standard components plus:",
-    );
-  } else {
-    lines.push("  Custom catalog (does NOT include all basic components).");
-    lines.push("  Custom components:");
-  }
-
-  for (const name of customNames) {
-    const comp = resolved.components.get(name);
-    if (!comp) continue;
-    if (options?.includeSchema === false) {
-      lines.push(`  - ${name}`);
-      continue;
-    }
-    const jsonSchema = zodToJsonSchema(comp.schema);
-    lines.push(`  - ${name}:`);
-    lines.push(
-      `    ${JSON.stringify(jsonSchema, null, 2).split("\n").join("\n    ")}`,
-    );
-  }
-
-  return lines.join("\n");
-}
-
-/**
- * Extract component schemas from a catalog in A2UI v0.9 inline format.
- * Vue-native equivalent of extractCatalogComponentSchemas.
- */
-function extractCatalogComponentSchemas(catalog?: Catalog<ComponentApi>): {
-  catalogId: string;
-  components: Record<string, Record<string, unknown>>;
-} {
-  const resolved = catalog ?? vueBasicCatalog;
-  const components: Record<string, Record<string, unknown>> = {};
-
-  for (const [name, comp] of resolved.components) {
-    const zodSchema = zodToJsonSchema(comp.schema, {
-      target: "jsonSchema2019-09",
-    }) as { properties?: Record<string, unknown>; required?: string[] };
-
-    components[name] = {
-      allOf: [
-        { $ref: "common_types.json#/$defs/ComponentCommon" },
-        {
-          properties: {
-            component: { const: name },
-            ...zodSchema.properties,
-          },
-          required: ["component", ...(zodSchema.required ?? [])],
-        },
-      ],
-    };
-  }
-
-  return { catalogId: resolved.id, components };
+  return buildContextValue(catalog ?? vueBasicCatalog, options);
 }
 
 /**
@@ -165,7 +71,9 @@ export function registerA2UICatalogContext(
   // Register schema + generation/design guidelines
   const schemaValue = computed(() => {
     if (!options.includeSchema()) return null;
-    return JSON.stringify(extractCatalogComponentSchemas(options.catalog()));
+    return JSON.stringify(
+      extractCatalogComponentSchemas(options.catalog() ?? vueBasicCatalog),
+    );
   });
 
   watch(

package/src/v2/components/a2ui/A2UIRecoveryStates.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
 import type { PropType, VNodeChild } from "vue";
-import { z } from "zod";
+import * as z from "zod";
 
 /**
  * Shared pre-paint lifecycle states for the A2UI surface renderer, ported from

package/src/v2/components/a2ui.ts

@@ -1,4 +1,4 @@
-import { z } from "zod";
+import * as z from "zod";
 
 export type A2UIOperation = Record<string, unknown>;
 

package/src/v2/components/chat/CopilotChat.vue

@@ -4,7 +4,6 @@ import {
   createAttachmentContent,
   DEFAULT_AGENT_ID,
   randomUUID,
-  TranscriptionErrorCode,
 } from "@copilotkit/shared";
 import {
   computed,
@@ -17,7 +16,14 @@ import {
   useSlots,
   watch,
 } from "vue";
-import { CopilotKitCoreErrorCode, ɵisHttpAgent } from "@copilotkit/core";
+import {
+  CopilotChatDefaultLabels,
+  CopilotKitCoreErrorCode,
+  TranscriptionError,
+  ɵisHttpAgent,
+  ɵtranscribeAudio,
+  ɵtranscriptionErrorMessageKey,
+} from "@copilotkit/core";
 import type { Suggestion } from "@copilotkit/core";
 import CopilotChatConfigurationProvider from "../../providers/CopilotChatConfigurationProvider.vue";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
@@ -28,10 +34,6 @@ import { useAgent } from "../../hooks/use-agent";
 import { useSuggestions } from "../../hooks/use-suggestions";
 import { useAttachments } from "../../hooks/use-attachments";
 import { useShallowStableRef } from "../../lib/shallow-stable";
-import {
-  transcribeAudio,
-  TranscriptionError,
-} from "../../lib/transcription-client";
 import CopilotChatView from "./CopilotChatView.vue";
 import { LastUserMessageKey } from "./last-user-message-context";
 import type { LastUserMessageState } from "./last-user-message-context";
@@ -159,6 +161,12 @@ const isConnecting = computed(
 );
 const stableLabels = useShallowStableRef(computed(() => props.labels));
 const resolvedLabels = computed(() => stableLabels.value);
+// The labels this chat shows, the same merge its configuration provider makes.
+const chatLabels = computed(() => ({
+  ...CopilotChatDefaultLabels,
+  ...existingConfig.value?.labels,
+  ...resolvedLabels.value,
+}));
 
 // `useAgent` takes no threadId: it pins one only from a surrounding chat
 // configuration, and this call sits outside the provider rendered in this
@@ -771,48 +779,19 @@ async function handleFinishTranscribeWithAudio(audioBlob: Blob) {
   isTranscribing.value = true;
   try {
     transcriptionError.value = null;
-    const result = await transcribeAudio(copilotkit.value, audioBlob);
+    const result = await ɵtranscribeAudio(copilotkit.value, audioBlob);
     const trimmedPrevious = inputValue.value.trim();
     inputValue.value = trimmedPrevious
       ? `${trimmedPrevious} ${result.text}`
       : result.text;
   } catch (error) {
     console.error("CopilotChat: Transcription failed", error);
+    const labels = chatLabels.value;
     if (error instanceof TranscriptionError) {
-      const { code, retryable, message } = error.info;
-      switch (code) {
-        case TranscriptionErrorCode.RATE_LIMITED:
-          transcriptionError.value = "Too many requests. Please wait a moment.";
-          break;
-        case TranscriptionErrorCode.AUTH_FAILED:
-          transcriptionError.value =
-            "Authentication error. Please check your configuration.";
-          break;
-        case TranscriptionErrorCode.AUDIO_TOO_LONG:
-          transcriptionError.value =
-            "Recording is too long. Please try a shorter recording.";
-          break;
-        case TranscriptionErrorCode.AUDIO_TOO_SHORT:
-          transcriptionError.value =
-            "Recording is too short. Please try again.";
-          break;
-        case TranscriptionErrorCode.INVALID_AUDIO_FORMAT:
-          transcriptionError.value = "Audio format not supported.";
-          break;
-        case TranscriptionErrorCode.SERVICE_NOT_CONFIGURED:
-          transcriptionError.value = "Transcription service is not available.";
-          break;
-        case TranscriptionErrorCode.NETWORK_ERROR:
-          transcriptionError.value =
-            "Network error. Please check your connection.";
-          break;
-        default:
-          transcriptionError.value = retryable
-            ? "Transcription failed. Please try again."
-            : message;
-      }
+      const key = ɵtranscriptionErrorMessageKey(error.info);
+      transcriptionError.value = key ? labels[key] : error.info.message;
     } else {
-      transcriptionError.value = "Transcription failed. Please try again.";
+      transcriptionError.value = labels.transcriptionErrorGenericText;
     }
   } finally {
     isTranscribing.value = false;

package/src/v2/components/chat/CopilotChatAttachmentQueue.vue

@@ -9,8 +9,7 @@ import type { Attachment } from "@copilotkit/shared";
 import type { CopilotChatAttachmentQueueProps } from "./types";
 import { IconPlay } from "../icons";
 import CopilotChatLightbox from "./CopilotChatLightbox.vue";
-import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
-import { CopilotChatDefaultLabels } from "../../providers/types";
+import { useChatLabels } from "./use-chat-labels";
 
 const props = withDefaults(defineProps<CopilotChatAttachmentQueueProps>(), {
   attachments: () => [],
@@ -21,8 +20,7 @@ const emit = defineEmits<{
   "remove-attachment": [id: string];
 }>();
 
-const config = useCopilotChatConfiguration();
-const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
+const labels = useChatLabels();
 
 const activeLightboxAttachment = ref<Attachment | null>(null);
 const documentBlobUrl = ref<string | null>(null);
@@ -32,10 +30,10 @@ const lightboxLabel = computed(() => {
   if (!attachment) return undefined;
   if (attachment.filename) return attachment.filename;
   return attachment.type === "image"
-    ? "Image attachment"
+    ? labels.value.attachmentImageAltText
     : attachment.type === "video"
       ? "Video attachment"
-      : "Document";
+      : labels.value.attachmentDocumentLabel;
 });
 const isPreviewableDocument = computed(() => {
   const attachment = activeLightboxAttachment.value;
@@ -267,7 +265,7 @@ function createBlobUrl(
               class="cpk-attachment-queue-document-name"
               data-testid="copilot-chat-attachment-document-filename"
             >
-              {{ attachment.filename || "Document" }}
+              {{ attachment.filename || labels.attachmentDocumentLabel }}
             </span>
             <span
               v-if="attachment.size != null"
@@ -369,10 +367,16 @@ function createBlobUrl(
         </div>
         <div class="cpk-attachment-queue-document-card-details">
           <div class="cpk-attachment-queue-document-card-name">
-            {{ activeLightboxAttachment.filename || "Document" }}
+            {{
+              activeLightboxAttachment.filename ||
+              labels.attachmentDocumentLabel
+            }}
           </div>
           <div class="cpk-attachment-queue-document-card-meta">
-            {{ activeLightboxAttachment.source.mimeType || "Unknown type" }}
+            {{
+              activeLightboxAttachment.source.mimeType ||
+              labels.attachmentUnknownTypeText
+            }}
             {{
               activeLightboxAttachment.size != null
                 ? ` · ${formatFileSize(activeLightboxAttachment.size)}`
@@ -381,7 +385,7 @@ function createBlobUrl(
           </div>
         </div>
         <div class="cpk-attachment-queue-document-card-note">
-          No preview available for this file type
+          {{ labels.attachmentNoPreviewText }}
         </div>
       </div>
     </template>

package/src/v2/components/chat/CopilotChatAttachmentRenderer.vue

@@ -4,19 +4,27 @@ import { getDocumentIcon, getSourceUrl } from "@copilotkit/shared";
 import type { CopilotChatAttachmentRendererProps } from "./types";
 import CopilotChatLightbox from "./CopilotChatLightbox.vue";
 import { useLightbox } from "./use-lightbox";
+import { useChatLabels } from "./use-chat-labels";
 
 const props = withDefaults(defineProps<CopilotChatAttachmentRendererProps>(), {
   filename: undefined,
   className: "",
 });
 
+const labels = useChatLabels();
 const imageLoadFailed = ref(false);
 const sourceUrl = computed(() => getSourceUrl(props.source));
 const documentLabel = computed(
-  () => props.filename || props.source.mimeType || "Unknown type",
+  () =>
+    props.filename ||
+    props.source.mimeType ||
+    labels.value.attachmentUnknownTypeText,
 );
 const documentAriaLabel = computed(
-  () => props.filename || props.source.mimeType || "Document attachment",
+  () =>
+    props.filename ||
+    props.source.mimeType ||
+    labels.value.attachmentDocumentAltText,
 );
 
 const imageButton = ref<HTMLButtonElement | null>(null);
@@ -43,7 +51,7 @@ const {
     <img
       ref="thumbnailRef"
       :src="sourceUrl"
-      alt="Image attachment"
+      :alt="labels.attachmentImageAltText"
       class="cpk-attachment-renderer cpk-attachment-renderer-image"
       :class="props.className"
       data-testid="copilot-chat-attachment-renderer-image"
@@ -52,14 +60,14 @@ const {
     <!-- Teleported to the body; inside the button only to keep one root. -->
     <CopilotChatLightbox
       v-if="lightboxOpen"
-      label="Image attachment"
+      :label="labels.attachmentImageAltText"
       :return-focus-to="imageButton"
       @close="closeLightbox"
     >
       <img
         :style="{ viewTransitionName: vtName }"
         :src="sourceUrl"
-        alt="Image attachment"
+        :alt="labels.attachmentImageAltText"
         class="cpk-attachment-renderer-lightbox-image"
         data-testid="copilot-chat-attachment-renderer-lightbox-image"
       />
@@ -71,7 +79,7 @@ const {
     :class="props.className"
     data-testid="copilot-chat-attachment-renderer-image-fallback"
   >
-    <span>Failed to load image</span>
+    <span>{{ labels.attachmentImageLoadErrorText }}</span>
   </div>
 
   <div

package/src/v2/components/chat/CopilotChatInput.vue

@@ -8,8 +8,7 @@ import {
   useAttrs,
   watch,
 } from "vue";
-import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
-import { CopilotChatDefaultLabels } from "../../providers/types";
+import { ɵcomposerButtonState, ɵresolveComposerKey } from "@copilotkit/core";
 import {
   IconArrowUp,
   IconCheck,
@@ -29,6 +28,7 @@ import type {
 import { useCopilotId } from "../ui/use-id";
 import type { CopilotChatAudioRecorderRef } from "./audioRecorder";
 import type { CopilotChatInputMode, ToolsMenuItem } from "./types";
+import { useChatLabels } from "./use-chat-labels";
 
 defineOptions({ inheritAttrs: false });
 
@@ -107,7 +107,6 @@ const emit = defineEmits<{
 }>();
 
 const attrs = useAttrs();
-const config = useCopilotChatConfiguration();
 const shellRef = ref<HTMLElement | null>(null);
 const textareaRef = ref<HTMLTextAreaElement | null>(null);
 const gridRef = ref<HTMLElement | null>(null);
@@ -148,16 +147,13 @@ const isControlled = computed(() => props.modelValue !== undefined);
 const inputValue = computed(() =>
   isControlled.value ? (props.modelValue ?? "") : localValue.value,
 );
-const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
+const labels = useChatLabels();
 const resolvedPlaceholder = computed(
   () => props.placeholder ?? labels.value.chatInputPlaceholder,
 );
 const isExpanded = computed(
   () => props.mode === "input" && layout.value === "expanded",
 );
-const isProcessing = computed(
-  () => props.mode !== "transcribe" && props.isRunning,
-);
 const shouldShowDisclaimer = computed(
   () => props.showDisclaimer ?? props.positioning === "absolute",
 );
@@ -177,16 +173,20 @@ const hasFinishTranscribeAction = computed(
     typeof props.onFinishTranscribe === "function" ||
     typeof props.onFinishTranscribeWithAudio === "function",
 );
-const canSend = computed(
-  () =>
-    props.mode === "input" &&
-    !props.disabled &&
-    hasSubmitAction.value &&
-    inputValue.value.trim().length > 0,
-);
-const sendDisabled = computed(() =>
-  isProcessing.value ? !hasStopAction.value : !canSend.value,
+const composerInput = computed(() => ({
+  mode: props.mode,
+  isRunning: props.isRunning,
+  value: inputValue.value,
+  canSubmit: hasSubmitAction.value,
+  canStop: hasStopAction.value,
+  disabled: props.disabled,
+}));
+const composerButton = computed(() =>
+  ɵcomposerButtonState(composerInput.value),
 );
+const isProcessing = computed(() => composerButton.value.isProcessing);
+const sendDisabled = computed(() => composerButton.value.disabled);
+const showsStop = computed(() => composerButton.value.action === "stop");
 
 const containerClass = computed(() => [
   "cpk-chat-input",
@@ -408,14 +408,16 @@ function handleInput(event: Event) {
   updateSlashState(nextValue);
 }
 
+// The button stops a run whatever the input holds. Enter differs: see
+// handleKeydown.
 function handleSendButtonClick() {
-  if (isProcessing.value) {
-    if (hasStopAction.value) {
-      emit("stop");
-    }
+  if (showsStop.value) {
+    emit("stop");
     return;
   }
-  submit();
+  if (!isProcessing.value) {
+    submit();
+  }
 }
 
 function handleKeydown(event: KeyboardEvent) {
@@ -473,15 +475,23 @@ function handleKeydown(event: KeyboardEvent) {
     }
   }
 
-  if (event.key === "Enter" && !event.shiftKey && props.mode === "input") {
+  if (props.mode !== "input") {
+    return;
+  }
+
+  // Enter with text sends, also while a run is going. Enter in an empty input
+  // stops the run. Read the textarea: a controlled modelValue can lag a tick.
+  const action = ɵresolveComposerKey(event, {
+    ...composerInput.value,
+    value: textareaRef.value?.value ?? inputValue.value,
+  });
+  if (event.key === "Enter" && !event.shiftKey) {
     event.preventDefault();
-    if (isProcessing.value) {
-      if (hasStopAction.value) {
-        emit("stop");
-      }
-      return;
-    }
+  }
+  if (action === "send") {
     submit();
+  } else if (action === "stop") {
+    emit("stop");
   }
 }
 
@@ -1295,7 +1305,7 @@ onBeforeUnmount(() => {
                       type="button"
                       data-testid="copilot-chat-input-send"
                       :aria-label="
-                        isProcessing && hasStopAction
+                        showsStop
                           ? labels.chatInputToolbarStopButtonLabel
                           : labels.chatInputToolbarSendButtonLabel
                       "
@@ -1304,7 +1314,7 @@ onBeforeUnmount(() => {
                       @click="handleSendButtonClick"
                     >
                       <IconSquare
-                        v-if="isProcessing && hasStopAction"
+                        v-if="showsStop"
                         class="cpk-chat-input-stop-icon"
                       />
                       <IconArrowUp v-else class="cpk-chat-input-send-icon" />