@copilotkit/vue 2.0.0-rc.20 → 2.0.0-rc.21

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

@@ -5,23 +5,10 @@ import {
   ref,
   shallowRef,
   toValue,
-  watch,
 } from "vue";
 import type { MaybeRefOrGetter, Ref } from "vue";
-import {
-  randomUUID,
-  getModalityFromMimeType,
-  exceedsMaxSize,
-  readFileAsBase64,
-  generateVideoThumbnail,
-  matchesAcceptFilter,
-  formatFileSize,
-} from "@copilotkit/shared";
-import type {
-  Attachment,
-  AttachmentUploadResult,
-  AttachmentsConfig,
-} from "@copilotkit/shared";
+import { ɵAttachmentQueue } from "@copilotkit/core";
+import type { Attachment, AttachmentsConfig } from "@copilotkit/shared";
 
 export interface UseAttachmentsProps {
   config?: MaybeRefOrGetter<AttachmentsConfig | undefined>;
@@ -33,6 +20,7 @@ export interface UseAttachmentsReturn {
   dragOver: Ref<boolean>;
   fileInputRef: Ref<HTMLInputElement | null>;
   containerRef: Ref<HTMLElement | null>;
+  /** Process files (validate, upload, add to state). No-op while attachments are disabled. */
   processFiles: (files: File[]) => Promise<void>;
   handleFileUpload: (event: Event) => Promise<void>;
   handleDragOver: (event: DragEvent) => void;
@@ -42,133 +30,43 @@ export interface UseAttachmentsReturn {
   consumeAttachments: () => Attachment[];
 }
 
+/**
+ * Manages file attachment state — uploads, drag-and-drop, paste. The queue
+ * itself (validation, uploads, ready state) lives in `@copilotkit/core`'s
+ * `ɵAttachmentQueue`; this composable adds the DOM wiring and projects the
+ * queue into a `shallowRef`.
+ */
 export function useAttachments(
   props: UseAttachmentsProps,
 ): UseAttachmentsReturn {
-  const attachments = shallowRef<Attachment[]>([]);
+  const queue = new ɵAttachmentQueue(() => toValue(props.config));
+  const attachments = shallowRef<Attachment[]>(queue.getSnapshot());
+  const unsubscribe = queue.subscribe(() => {
+    attachments.value = queue.getSnapshot();
+  });
   const dragOver = ref(false);
   const fileInputRef = ref<HTMLInputElement | null>(null);
   const containerRef = ref<HTMLElement | null>(null);
-  const configRef = ref<AttachmentsConfig | undefined>(toValue(props.config));
-  const attachmentsRef = shallowRef<Attachment[]>(attachments.value);
-  const enabled = computed(() => configRef.value?.enabled ?? false);
-
-  watch(
-    () => toValue(props.config),
-    (next) => {
-      configRef.value = next;
-    },
-    { immediate: true },
-  );
-
-  const setAttachments = (next: Attachment[]) => {
-    attachments.value = next;
-    attachmentsRef.value = next;
-  };
-
-  const updateAttachments = (
-    updater: (previous: Attachment[]) => Attachment[],
-  ) => {
-    setAttachments(updater(attachmentsRef.value));
-  };
-
-  async function processFiles(files: File[]) {
-    const config = configRef.value;
-    const accept = config?.accept ?? "*/*";
-    const maxSize = config?.maxSize ?? 20 * 1024 * 1024;
-
-    const rejectedFiles = files.filter(
-      (file) => !matchesAcceptFilter(file, accept),
-    );
-    for (const file of rejectedFiles) {
-      config?.onUploadFailed?.({
-        reason: "invalid-type",
-        file,
-        message: `File "${file.name}" is not accepted. Supported types: ${accept}`,
-      });
-    }
-
-    const validFiles = files.filter((file) =>
-      matchesAcceptFilter(file, accept),
-    );
-    for (const file of validFiles) {
-      if (exceedsMaxSize(file, maxSize)) {
-        config?.onUploadFailed?.({
-          reason: "file-too-large",
-          file,
-          message: `File "${file.name}" exceeds the maximum size of ${formatFileSize(maxSize)}`,
-        });
-        continue;
-      }
-
-      const modality = getModalityFromMimeType(file.type);
-      const placeholderId = randomUUID();
-      updateAttachments((previous) => [
-        ...previous,
-        {
-          id: placeholderId,
-          type: modality,
-          source: { type: "data", value: "", mimeType: file.type },
-          filename: file.name,
-          size: file.size,
-          status: "uploading",
-        },
-      ]);
+  const enabled = computed(() => toValue(props.config)?.enabled ?? false);
 
-      try {
-        let source: Attachment["source"];
-        let uploadMetadata: Record<string, unknown> | undefined;
-        if (config?.onUpload) {
-          const uploadResult: AttachmentUploadResult =
-            await config.onUpload(file);
-          const { metadata, ...uploadSource } = uploadResult;
-          source = uploadSource;
-          uploadMetadata = metadata;
-        } else {
-          const base64 = await readFileAsBase64(file);
-          source = { type: "data", value: base64, mimeType: file.type };
-        }
-
-        let thumbnail: string | undefined;
-        if (modality === "video") {
-          thumbnail = await generateVideoThumbnail(file);
-        }
+  function processFiles(files: File[]) {
+    return queue.processFiles(files);
+  }
 
-        updateAttachments((previous) =>
-          previous.map((attachment) =>
-            attachment.id === placeholderId
-              ? {
-                  ...attachment,
-                  source,
-                  status: "ready",
-                  thumbnail,
-                  metadata: uploadMetadata,
-                }
-              : attachment,
-          ),
-        );
-      } catch (error) {
-        updateAttachments((previous) =>
-          previous.filter((attachment) => attachment.id !== placeholderId),
-        );
-        console.error(`[CopilotKit] Failed to upload "${file.name}":`, error);
-        config?.onUploadFailed?.({
-          reason: "upload-failed",
-          file,
-          message:
-            error instanceof Error
-              ? error.message
-              : `Failed to upload "${file.name}"`,
-        });
-      }
+  async function processSafely(files: File[], label: string) {
+    try {
+      await queue.processFiles(files);
+    } catch (error) {
+      console.error(`[CopilotKit] ${label}:`, error);
     }
   }
 
   async function handleFileUpload(event: Event) {
-    const target = event.target as HTMLInputElement | null;
-    if (!target?.files?.length) return;
-    await processFiles(Array.from(target.files));
-    if (target) target.value = "";
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement) || !target.files?.length) return;
+    await processSafely(Array.from(target.files), "Upload error");
+    // Clear the picker so choosing the same file again fires `change`.
+    target.value = "";
   }
 
   function handleDragOver(event: DragEvent) {
@@ -188,56 +86,32 @@ export function useAttachments(
     event.preventDefault();
     event.stopPropagation();
     dragOver.value = false;
-    if (!enabled.value) return;
-
     const files = Array.from(event.dataTransfer?.files ?? []);
-    if (files.length > 0) {
-      await processFiles(files);
-    }
+    if (files.length > 0) await processSafely(files, "Drop error");
   }
 
   function removeAttachment(id: string) {
-    updateAttachments((previous) =>
-      previous.filter((attachment) => attachment.id !== id),
-    );
+    queue.remove(id);
   }
 
   function consumeAttachments() {
-    const ready = attachmentsRef.value.filter(
-      (attachment) => attachment.status === "ready",
-    );
-    if (ready.length === 0) {
-      return ready;
-    }
-    updateAttachments((previous) =>
-      previous.filter((attachment) => attachment.status !== "ready"),
-    );
-    if (fileInputRef.value) {
+    const ready = queue.consumeReady();
+    if (ready.length > 0 && fileInputRef.value) {
       fileInputRef.value.value = "";
     }
     return ready;
   }
 
   async function handlePaste(event: ClipboardEvent) {
-    if (!enabled.value) return;
-
-    const target = event.target as HTMLElement | null;
-    if (!target || !containerRef.value?.contains(target)) return;
-
-    const accept = configRef.value?.accept ?? "*/*";
-    const items = Array.from(event.clipboardData?.items ?? []);
-    const fileItems = items.filter((item) => {
-      if (item.kind !== "file") return false;
-      const file = item.getAsFile();
-      return file !== null && matchesAcceptFilter(file, accept);
-    });
-    if (fileItems.length === 0) return;
-
+    const target = event.target;
+    if (!(target instanceof Node) || !containerRef.value?.contains(target))
+      return;
+    const files = queue.filterPastedFiles(
+      Array.from(event.clipboardData?.items ?? []),
+    );
+    if (files.length === 0) return;
     event.preventDefault();
-    const files = fileItems
-      .map((item) => item.getAsFile())
-      .filter((file): file is File => file !== null);
-    await processFiles(files);
+    await processSafely(files, "Paste error");
   }
 
   function onPaste(event: ClipboardEvent) {
@@ -254,6 +128,8 @@ export function useAttachments(
     if (typeof document !== "undefined") {
       document.removeEventListener("paste", onPaste);
     }
+    unsubscribe();
+    queue.dispose();
   });
 
   return {

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

@@ -1,6 +1,7 @@
 import type { AgentCapabilities } from "@ag-ui/core";
 import { computed } from "vue";
 import type { ComputedRef } from "vue";
+import { ɵgetAgentCapabilities } from "@copilotkit/core";
 import { useAgent } from "./use-agent";
 
 /**
@@ -20,11 +21,5 @@ export function useCapabilities(
 ): ComputedRef<AgentCapabilities | undefined> {
   const { agent } = useAgent({ agentId });
 
-  return computed(() => {
-    const a = agent.value;
-    if (a && "capabilities" in a) {
-      return (a as { capabilities?: AgentCapabilities }).capabilities;
-    }
-    return undefined;
-  });
+  return computed(() => ɵgetAgentCapabilities(agent.value));
 }

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

@@ -2,6 +2,7 @@ import type { StandardSchemaV1, InferSchemaOutput } from "@copilotkit/shared";
 import type { Component } from "vue";
 import { h } from "vue";
 import type { WatchSource } from "vue";
+import { ɵcomponentToolDescription } from "@copilotkit/core";
 import { useFrontendTool } from "./use-frontend-tool";
 
 type InferRenderProps<T> = T extends StandardSchemaV1
@@ -17,13 +18,14 @@ export function useComponent<
     parameters?: TSchema;
     render: Component<NoInfer<InferRenderProps<TSchema>>>;
     agentId?: string;
+    followUp?: boolean;
   },
   deps?: WatchSource<unknown>[],
 ): void {
-  const prefix = `Use this tool to display the "${config.name}" component in the chat. This tool renders a visual UI component for the user.`;
-  const fullDescription = config.description
-    ? `${prefix}\n\n${config.description}`
-    : prefix;
+  const fullDescription = ɵcomponentToolDescription(
+    config.name,
+    config.description,
+  );
 
   useFrontendTool(
     {
@@ -40,6 +42,7 @@ export function useComponent<
         );
       },
       agentId: config.agentId,
+      followUp: config.followUp,
     },
     deps,
   );

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

@@ -1,49 +1,17 @@
-import { computed, ref, watch } from "vue";
+import { computed, watch } from "vue";
 import type { WatchSource } from "vue";
 import { useCopilotKit } from "../providers/useCopilotKit";
 import { useCopilotChatConfiguration } from "../providers/useCopilotChatConfiguration";
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
-import type {
-  DynamicSuggestionsConfig,
-  Suggestion,
-  StaticSuggestionsConfig,
-  SuggestionsConfig,
-} from "@copilotkit/core";
-
-type StaticSuggestionInput = Omit<Suggestion, "isLoading"> &
-  Partial<Pick<Suggestion, "isLoading">>;
-
-type StaticSuggestionsConfigInput = Omit<
-  StaticSuggestionsConfig,
-  "suggestions"
-> & {
-  suggestions: StaticSuggestionInput[];
-};
-
-type SuggestionsConfigInput =
-  | DynamicSuggestionsConfig
-  | StaticSuggestionsConfigInput;
-
-function isDynamicConfig(
-  config: SuggestionsConfigInput,
-): config is DynamicSuggestionsConfig {
-  return "instructions" in config;
-}
-
-function normalizeStaticSuggestions(
-  suggestions: StaticSuggestionInput[],
-): Suggestion[] {
-  return suggestions.map((s) => ({
-    ...s,
-    isLoading: s.isLoading ?? false,
-  }));
-}
+import { ɵbindSuggestionsConfig } from "@copilotkit/core";
+import type { ɵSuggestionsConfigInput } from "@copilotkit/core";
 
 /**
  * Registers a suggestions configuration (dynamic or static) for the current
  * chat context.
  *
- * Configuration is kept in sync reactively and removed on scope cleanup.
+ * Configuration is kept in sync reactively and removed on scope cleanup. Pass
+ * `deps` to reload suggestions when values the config reads change.
  *
  * @example
  * ```ts
@@ -54,197 +22,39 @@ function normalizeStaticSuggestions(
  * ```
  */
 export function useConfigureSuggestions(
-  config: SuggestionsConfigInput | null | undefined,
+  config: ɵSuggestionsConfigInput | null | undefined,
   deps?: WatchSource<unknown>[],
 ): void {
   const { copilotkit } = useCopilotKit();
   const chatConfig = useCopilotChatConfiguration();
-  const extraDeps = deps ?? [];
-
-  const resolvedConsumerAgentId = computed(
+  const chatAgentId = computed(
     () => chatConfig.value?.agentId ?? DEFAULT_AGENT_ID,
   );
-  const rawConsumerAgentId = computed(() =>
-    config ? (config as SuggestionsConfigInput).consumerAgentId : undefined,
-  );
-
-  const normalizedConfig = computed<SuggestionsConfig | null>(() => {
-    if (
-      !config ||
-      (config as { available?: string }).available === "disabled"
-    ) {
-      return null;
-    }
-    if (isDynamicConfig(config)) {
-      return { ...config };
-    }
-    const normalizedSuggestions = normalizeStaticSuggestions(
-      config.suggestions,
-    );
-    return { ...config, suggestions: normalizedSuggestions };
-  });
-  const serializedConfig = computed(() =>
-    normalizedConfig.value ? JSON.stringify(normalizedConfig.value) : null,
-  );
-
-  const targetAgentId = computed(() => {
-    if (!normalizedConfig.value) return resolvedConsumerAgentId.value;
-    const consumer = (
-      normalizedConfig.value as
-        | StaticSuggestionsConfig
-        | DynamicSuggestionsConfig
-    ).consumerAgentId;
-    if (!consumer || consumer === "*") return resolvedConsumerAgentId.value;
-    return consumer;
-  });
-
-  const isGlobalConfig = computed(
-    () =>
-      rawConsumerAgentId.value === undefined ||
-      rawConsumerAgentId.value === "*",
-  );
-  const pendingGlobalReload = ref(false);
-  const pendingReloadTimer = ref<ReturnType<typeof setTimeout> | null>(null);
-  const previousSerializedConfig = ref<string | null>(null);
-
-  const flushPendingGlobalReload = () => {
-    if (!pendingGlobalReload.value || !isGlobalConfig.value) {
-      return;
-    }
-    const hasRunning = Object.values(copilotkit.value.agents ?? {}).some(
-      (entry) => !!entry.agentId && entry.isRunning,
-    );
-    if (hasRunning) {
-      pendingReloadTimer.value = setTimeout(() => {
-        pendingReloadTimer.value = null;
-        flushPendingGlobalReload();
-      }, 0);
-      return;
-    }
-
-    pendingGlobalReload.value = false;
-    requestReload();
-  };
-
-  const requestReload = () => {
-    if (!normalizedConfig.value) {
-      return;
-    }
-
-    if (isGlobalConfig.value) {
-      let skippedBecauseRunning = false;
-      const agents = Object.values(copilotkit.value.agents ?? {});
-      for (const entry of agents) {
-        const aid = entry.agentId;
-        if (!aid) {
-          continue;
-        }
-        if (!entry.isRunning) {
-          copilotkit.value.reloadSuggestions(aid);
-        } else {
-          skippedBecauseRunning = true;
-        }
-      }
-      pendingGlobalReload.value = skippedBecauseRunning;
-      if (skippedBecauseRunning && pendingReloadTimer.value === null) {
-        pendingReloadTimer.value = setTimeout(() => {
-          pendingReloadTimer.value = null;
-          flushPendingGlobalReload();
-        }, 0);
-      }
-      return;
-    }
-
-    if (targetAgentId.value) {
-      copilotkit.value.reloadSuggestions(targetAgentId.value);
-    }
-  };
-
-  watch(
-    [() => copilotkit.value, serializedConfig],
-    ([_core, serialized], _old, onCleanup) => {
-      if (!serialized || !normalizedConfig.value) {
-        return;
-      }
-
-      const core = copilotkit.value;
-      const cfg = normalizedConfig.value;
-      const id = core.addSuggestionsConfig(cfg);
-      requestReload();
-
-      onCleanup(() => core.removeSuggestionsConfig(id));
-    },
-    { immediate: true },
-  );
-
-  watch(
-    [normalizedConfig, serializedConfig],
-    ([cfg, serialized]) => {
-      if (!cfg) {
-        previousSerializedConfig.value = null;
-        return;
-      }
-
-      if (serialized && previousSerializedConfig.value === serialized) {
-        return;
-      }
-
-      if (serialized) {
-        previousSerializedConfig.value = serialized;
-      }
-
-      requestReload();
-    },
-    { immediate: false },
-  );
-
-  watch(
-    [normalizedConfig, () => extraDeps.length, ...extraDeps],
-    ([cfg]) => {
-      if (!cfg || extraDeps.length === 0) {
-        return;
-      }
-      requestReload();
-    },
-    { immediate: true },
-  );
+  const extraDeps = deps ?? [];
 
   watch(
-    [() => copilotkit.value, pendingGlobalReload],
-    (_vals, _old, onCleanup) => {
-      onCleanup(() => {
-        if (pendingReloadTimer.value !== null) {
-          clearTimeout(pendingReloadTimer.value);
-          pendingReloadTimer.value = null;
-        }
+    () => copilotkit.value,
+    (core, _old, onCleanup) => {
+      const binding = ɵbindSuggestionsConfig(core, config, {
+        chatAgentId: chatAgentId.value,
       });
-    },
-    { immediate: true },
-  );
-
-  watch(
-    [() => copilotkit.value, isGlobalConfig],
-    ([core, global], _old, onCleanup) => {
-      if (!global) {
-        return;
-      }
-
-      const agentSubscriptions = Object.values(core.agents ?? {})
-        .filter((agent): agent is NonNullable<typeof agent> => !!agent)
-        .map((agent) =>
-          agent.subscribe({
-            onRunStartedEvent: flushPendingGlobalReload,
-            onRunFinishedEvent: flushPendingGlobalReload,
-            onRunFinalized: flushPendingGlobalReload,
-            onRunFailed: flushPendingGlobalReload,
-            onRunErrorEvent: flushPendingGlobalReload,
-          }),
-        );
-
+      // Deep, so a `reactive()` config that changes in place is applied. The
+      // binding compares configs by content, so other re-runs are no-ops.
+      const stopConfig = watch(
+        [() => config, chatAgentId],
+        ([nextConfig, nextChatAgentId]) => {
+          binding.update(nextConfig, { chatAgentId: nextChatAgentId });
+        },
+        { deep: true },
+      );
+      const stopDeps =
+        extraDeps.length > 0
+          ? watch(extraDeps, () => binding.reload())
+          : undefined;
       onCleanup(() => {
-        for (const sub of agentSubscriptions) {
-          sub.unsubscribe();
-        }
+        stopConfig();
+        stopDeps?.();
+        binding.dispose();
       });
     },
     { immediate: true },