@copilotkit/vue 1.57.1 → 1.57.3

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

@@ -452,127 +452,144 @@ const Button = createVueComponent(ButtonApi, ({ props, buildChild }) => {
   );
 });
 
-const TextField = createVueComponent(TextFieldApi, ({ props, state }) => {
-  const uniqueId = state.id;
-  const isLong = props.variant === "longText";
-  const type =
-    props.variant === "number"
-      ? "number"
-      : props.variant === "obscured"
-        ? "password"
-        : "text";
-
-  const inputStyle = {
-    padding: "8px",
-    width: "100%",
-    border:
-      props.validationErrors && props.validationErrors.length > 0
-        ? "1px solid red"
-        : STANDARD_BORDER,
-    borderRadius: STANDARD_RADIUS,
-    boxSizing: "border-box",
-  };
+const TextField = createVueComponent(
+  TextFieldApi,
+  ({ props, state }) => {
+    const uniqueId = state.id;
+    const isLong = props.variant === "longText";
+    const type =
+      props.variant === "number"
+        ? "number"
+        : props.variant === "obscured"
+          ? "password"
+          : "text";
+
+    const inputStyle = {
+      padding: "8px",
+      width: "100%",
+      border:
+        props.validationErrors && props.validationErrors.length > 0
+          ? "1px solid red"
+          : STANDARD_BORDER,
+      borderRadius: STANDARD_RADIUS,
+      boxSizing: "border-box",
+    };
 
-  const hasError = props.validationErrors && props.validationErrors.length > 0;
+    const hasError =
+      props.validationErrors && props.validationErrors.length > 0;
 
-  return h(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "4px",
-        width: "100%",
-        margin: LEAF_MARGIN,
+    return h(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px",
+          width: "100%",
+          margin: LEAF_MARGIN,
+        },
       },
-    },
-    [
-      props.label
-        ? h(
-            "label",
-            { for: uniqueId, style: { fontSize: "14px", fontWeight: "bold" } },
-            props.label,
-          )
-        : null,
-      isLong
-        ? h("textarea", {
-            id: uniqueId,
-            style: inputStyle,
-            value: props.value || "",
-            onInput: (e: Event) =>
-              props.setValue((e.target as HTMLTextAreaElement).value),
-          })
-        : h("input", {
-            id: uniqueId,
-            type,
-            style: inputStyle,
-            value: props.value || "",
-            onInput: (e: Event) =>
-              props.setValue((e.target as HTMLInputElement).value),
-          }),
-      hasError
-        ? h(
-            "span",
-            { style: { fontSize: "12px", color: "red" } },
-            props.validationErrors![0],
-          )
-        : null,
-    ],
-  );
-}, () => ({ id: useA2UIUniqueId() }));
+      [
+        props.label
+          ? h(
+              "label",
+              {
+                for: uniqueId,
+                style: { fontSize: "14px", fontWeight: "bold" },
+              },
+              props.label,
+            )
+          : null,
+        isLong
+          ? h("textarea", {
+              id: uniqueId,
+              style: inputStyle,
+              value: props.value || "",
+              onInput: (e: Event) =>
+                props.setValue((e.target as HTMLTextAreaElement).value),
+            })
+          : h("input", {
+              id: uniqueId,
+              type,
+              style: inputStyle,
+              value: props.value || "",
+              onInput: (e: Event) =>
+                props.setValue((e.target as HTMLInputElement).value),
+            }),
+        hasError
+          ? h(
+              "span",
+              { style: { fontSize: "12px", color: "red" } },
+              props.validationErrors![0],
+            )
+          : null,
+      ],
+    );
+  },
+  () => ({ id: useA2UIUniqueId() }),
+);
 
-const CheckBox = createVueComponent(CheckBoxApi, ({ props, state }) => {
-  const uniqueId = state.id;
-  const hasError = props.validationErrors && props.validationErrors.length > 0;
+const CheckBox = createVueComponent(
+  CheckBoxApi,
+  ({ props, state }) => {
+    const uniqueId = state.id;
+    const hasError =
+      props.validationErrors && props.validationErrors.length > 0;
 
-  return h(
-    "div",
-    {
-      style: { display: "flex", flexDirection: "column", margin: LEAF_MARGIN },
-    },
-    [
-      h(
-        "div",
-        { style: { display: "flex", alignItems: "center", gap: "8px" } },
-        [
-          h("input", {
-            id: uniqueId,
-            type: "checkbox",
-            checked: !!props.value,
-            onChange: (e: Event) =>
-              props.setValue((e.target as HTMLInputElement).checked),
-            style: {
-              cursor: "pointer",
-              outline: hasError ? "1px solid red" : "none",
-            },
-          }),
-          props.label
-            ? h(
-                "label",
-                {
-                  for: uniqueId,
-                  style: {
-                    cursor: "pointer",
-                    color: hasError ? "red" : "inherit",
+    return h(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          margin: LEAF_MARGIN,
+        },
+      },
+      [
+        h(
+          "div",
+          { style: { display: "flex", alignItems: "center", gap: "8px" } },
+          [
+            h("input", {
+              id: uniqueId,
+              type: "checkbox",
+              checked: !!props.value,
+              onChange: (e: Event) =>
+                props.setValue((e.target as HTMLInputElement).checked),
+              style: {
+                cursor: "pointer",
+                outline: hasError ? "1px solid red" : "none",
+              },
+            }),
+            props.label
+              ? h(
+                  "label",
+                  {
+                    for: uniqueId,
+                    style: {
+                      cursor: "pointer",
+                      color: hasError ? "red" : "inherit",
+                    },
                   },
-                },
-                props.label,
-              )
-            : null,
-        ],
-      ),
-      hasError
-        ? h(
-            "span",
-            {
-              style: { fontSize: "12px", color: "red", marginTop: "4px" },
-            },
-            props.validationErrors?.[0],
-          )
-        : null,
-    ],
-  );
-}, () => ({ id: useA2UIUniqueId() }));
+                  props.label,
+                )
+              : null,
+          ],
+        ),
+        hasError
+          ? h(
+              "span",
+              {
+                style: { fontSize: "12px", color: "red", marginTop: "4px" },
+              },
+              props.validationErrors?.[0],
+            )
+          : null,
+      ],
+    );
+  },
+  () => ({ id: useA2UIUniqueId() }),
+);
 
 const ChoicePicker = createVueComponent(
   ChoicePickerApi,
@@ -704,106 +721,114 @@ const ChoicePicker = createVueComponent(
   () => ({ filter: ref("") }),
 );
 
-const Slider = createVueComponent(SliderApi, ({ props, state }) => {
-  const uniqueId = state.id;
+const Slider = createVueComponent(
+  SliderApi,
+  ({ props, state }) => {
+    const uniqueId = state.id;
 
-  return h(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "4px",
-        margin: LEAF_MARGIN,
-        width: "100%",
+    return h(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px",
+          margin: LEAF_MARGIN,
+          width: "100%",
+        },
       },
-    },
-    [
-      h(
-        "div",
-        { style: { display: "flex", justifyContent: "space-between" } },
-        [
-          props.label
-            ? h(
-                "label",
-                {
-                  for: uniqueId,
-                  style: { fontSize: "14px", fontWeight: "bold" },
-                },
-                props.label,
-              )
-            : null,
-          h(
-            "span",
-            { style: { fontSize: "12px", color: "#666" } },
-            String(props.value),
-          ),
-        ],
-      ),
-      h("input", {
-        id: uniqueId,
-        type: "range",
-        min: props.min ?? 0,
-        max: props.max,
-        value: props.value ?? 0,
-        onInput: (e: Event) =>
-          props.setValue(Number((e.target as HTMLInputElement).value)),
-        style: { width: "100%", cursor: "pointer" },
-      }),
-    ],
-  );
-}, () => ({ id: useA2UIUniqueId() }));
-
-const DateTimeInput = createVueComponent(DateTimeInputApi, ({ props, state }) => {
-  const uniqueId = state.id;
-
-  let type = "datetime-local";
-  if (props.enableDate && !props.enableTime) type = "date";
-  if (!props.enableDate && props.enableTime) type = "time";
+      [
+        h(
+          "div",
+          { style: { display: "flex", justifyContent: "space-between" } },
+          [
+            props.label
+              ? h(
+                  "label",
+                  {
+                    for: uniqueId,
+                    style: { fontSize: "14px", fontWeight: "bold" },
+                  },
+                  props.label,
+                )
+              : null,
+            h(
+              "span",
+              { style: { fontSize: "12px", color: "#666" } },
+              String(props.value),
+            ),
+          ],
+        ),
+        h("input", {
+          id: uniqueId,
+          type: "range",
+          min: props.min ?? 0,
+          max: props.max,
+          value: props.value ?? 0,
+          onInput: (e: Event) =>
+            props.setValue(Number((e.target as HTMLInputElement).value)),
+          style: { width: "100%", cursor: "pointer" },
+        }),
+      ],
+    );
+  },
+  () => ({ id: useA2UIUniqueId() }),
+);
 
-  const style = {
-    padding: "8px",
-    width: "100%",
-    border: STANDARD_BORDER,
-    borderRadius: STANDARD_RADIUS,
-    boxSizing: "border-box",
-  };
+const DateTimeInput = createVueComponent(
+  DateTimeInputApi,
+  ({ props, state }) => {
+    const uniqueId = state.id;
+
+    let type = "datetime-local";
+    if (props.enableDate && !props.enableTime) type = "date";
+    if (!props.enableDate && props.enableTime) type = "time";
+
+    const style = {
+      padding: "8px",
+      width: "100%",
+      border: STANDARD_BORDER,
+      borderRadius: STANDARD_RADIUS,
+      boxSizing: "border-box",
+    };
 
-  return h(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "4px",
-        width: "100%",
-        margin: LEAF_MARGIN,
+    return h(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px",
+          width: "100%",
+          margin: LEAF_MARGIN,
+        },
       },
-    },
-    [
-      props.label
-        ? h(
-            "label",
-            {
-              for: uniqueId,
-              style: { fontSize: "14px", fontWeight: "bold" },
-            },
-            props.label,
-          )
-        : null,
-      h("input", {
-        id: uniqueId,
-        type,
-        style,
-        value: props.value || "",
-        onInput: (e: Event) =>
-          props.setValue((e.target as HTMLInputElement).value),
-        min: typeof props.min === "string" ? props.min : undefined,
-        max: typeof props.max === "string" ? props.max : undefined,
-      }),
-    ],
-  );
-}, () => ({ id: useA2UIUniqueId() }));
+      [
+        props.label
+          ? h(
+              "label",
+              {
+                for: uniqueId,
+                style: { fontSize: "14px", fontWeight: "bold" },
+              },
+              props.label,
+            )
+          : null,
+        h("input", {
+          id: uniqueId,
+          type,
+          style,
+          value: props.value || "",
+          onInput: (e: Event) =>
+            props.setValue((e.target as HTMLInputElement).value),
+          min: typeof props.min === "string" ? props.min : undefined,
+          max: typeof props.max === "string" ? props.max : undefined,
+        }),
+      ],
+    );
+  },
+  () => ({ id: useA2UIUniqueId() }),
+);
 
 // ============================================================
 // Catalog Assembly

package/src/v2/components/chat/__tests__/CopilotChatActivityRendering.e2e.test.ts

@@ -392,9 +392,7 @@ describe("CopilotChat activity message rendering", () => {
     // React's useEffect which defers). The connectAgent path calls
     // setMessages([]) which would race with the submit's addMessage.
     await waitFor(() => {
-      expect(
-        screen.queryByTestId("copilot-chat-view"),
-      ).not.toBeNull();
+      expect(screen.queryByTestId("copilot-chat-view")).not.toBeNull();
     });
     await new Promise((r) => setTimeout(r, 50));
 
@@ -634,9 +632,7 @@ describe("CopilotChat activity message rendering", () => {
     // Allow the /connect bootstrap cycle to settle before submitting.
     // See the A2UI reconnect test above for the full rationale.
     await waitFor(() => {
-      expect(
-        screen.queryByTestId("copilot-chat-view"),
-      ).not.toBeNull();
+      expect(screen.queryByTestId("copilot-chat-view")).not.toBeNull();
     });
     await new Promise((r) => setTimeout(r, 50));
 

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

@@ -139,17 +139,22 @@ export function useInterrupt<TValue = unknown, TResult = never>(
 
     const interruptEventValue = interrupt.value?.value;
     interrupt.value = null;
-    void copilotkit.value.runAgent({
-      agent: resolvedAgent,
-      forwardedProps: {
-        command: {
-          resume: response,
-          interruptEvent: interruptEventValue,
+    void copilotkit.value
+      .runAgent({
+        agent: resolvedAgent,
+        forwardedProps: {
+          command: {
+            resume: response,
+            interruptEvent: interruptEventValue,
+          },
         },
-      },
-    }).catch((error) => {
-      console.error("[CopilotKit] useInterrupt: failed to resume agent:", error);
-    });
+      })
+      .catch((error) => {
+        console.error(
+          "[CopilotKit] useInterrupt: failed to resume agent:",
+          error,
+        );
+      });
   };
 
   watch(

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

@@ -26,11 +26,11 @@ interface ActivityRendererResult {
 export function useRenderActivityMessage() {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
-  const agentId = computed(
-    () => config.value?.agentId ?? DEFAULT_AGENT_ID,
-  );
+  const agentId = computed(() => config.value?.agentId ?? DEFAULT_AGENT_ID);
 
-  const renderers = computed(() => [...copilotkit.value.renderActivityMessages]);
+  const renderers = computed(() => [
+    ...copilotkit.value.renderActivityMessages,
+  ]);
 
   function findRenderer(
     activityType: string,
@@ -72,8 +72,9 @@ export function useRenderActivityMessage() {
       return null;
     }
 
-    const agent: AbstractAgent | undefined =
-      copilotkit.value.getAgent(agentId.value);
+    const agent: AbstractAgent | undefined = copilotkit.value.getAgent(
+      agentId.value,
+    );
 
     return {
       renderer: renderer.render as Component<

package/src/v2/providers/CopilotChatConfigurationProvider.vue

@@ -55,9 +55,7 @@ const resolvedHasExplicitThreadId = computed(() => {
 const shouldCreateModalState = computed(
   () => props.isModalDefaultOpen !== undefined,
 );
-const resolvedDefaultOpen = computed(
-  () => props.isModalDefaultOpen ?? true,
-);
+const resolvedDefaultOpen = computed(() => props.isModalDefaultOpen ?? true);
 
 const internalModalOpen = ref<boolean>(
   parentConfigValue.value?.isModalOpen ?? resolvedDefaultOpen.value,

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

@@ -54,7 +54,10 @@ export interface CopilotKitProviderProps {
    * 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" };
+  inspectorDefaultAnchor?: {
+    horizontal: "left" | "right";
+    vertical: "top" | "bottom";
+  };
   /**
    * Enable debug logging for the client-side event pipeline.
    *

package/src/v2/providers/CopilotKitProvider.vue

@@ -315,7 +315,8 @@ const builtInFrontendTools = computed<VueFrontendTool[]>(() => {
       parameters: GenerateSandboxedUiArgsSchema,
       handler: async () => "UI generated",
       followUp: true,
-      render: OpenGenerativeUIToolRenderer as unknown as VueFrontendTool["render"],
+      render:
+        OpenGenerativeUIToolRenderer as unknown as VueFrontendTool["render"],
     } as VueFrontendTool,
   ];
 });
@@ -327,7 +328,8 @@ const builtInActivityRenderers = computed<
     {
       activityType: MCPAppsActivityType,
       content: MCPAppsActivityContentSchema as unknown as z.ZodSchema<unknown>,
-      render: MCPAppsActivityRenderer as unknown as VueActivityMessageRenderer<unknown>["render"],
+      render:
+        MCPAppsActivityRenderer as unknown as VueActivityMessageRenderer<unknown>["render"],
     },
   ];
 
@@ -335,7 +337,8 @@ const builtInActivityRenderers = computed<
     renderers.push({
       activityType: OpenGenerativeUIActivityType,
       content: OpenGenerativeUIContentSchema as unknown as z.ZodSchema<unknown>,
-      render: OpenGenerativeUIActivityRenderer as unknown as VueActivityMessageRenderer<unknown>["render"],
+      render:
+        OpenGenerativeUIActivityRenderer as unknown as VueActivityMessageRenderer<unknown>["render"],
     });
   }
 
@@ -545,10 +548,7 @@ const a2uiLoadingComponent = computed(() => props.a2ui?.loadingComponent);
 const a2uiIncludeSchema = computed(() => props.a2ui?.includeSchema ?? true);
 
 // A2UI tool call renderer (progress indicator) — auto-registered when A2UI enabled
-registerA2UIBuiltInToolCallRenderer(
-  copilotkit,
-  () => runtimeA2UIEnabled.value,
-);
+registerA2UIBuiltInToolCallRenderer(copilotkit, () => runtimeA2UIEnabled.value);
 
 // A2UI catalog context, schema, and generation/design guidelines
 registerA2UICatalogContext(copilotkit, {