@copilotkit/vue 1.72.1-canary.sp-longthread-perf → 1.73.0

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {
   computed,
-  getCurrentInstance,
   nextTick,
   onBeforeUnmount,
   onMounted,
@@ -74,9 +73,12 @@ defineSlots<{
     inputMode: CopilotChatInputMode;
     inputToolsMenu: (ToolsMenuItem | "-")[];
     attachments: Attachment[];
+    canStop: boolean;
+    canAddFile: boolean;
+    canTranscribe: boolean;
     onUpdateModelValue: (value: string) => void;
     onSubmitMessage: (value: string) => void;
-    onStop?: () => void;
+    onStop: () => void;
     onAddFile: () => void;
     onStartTranscribe: () => void;
     onCancelTranscribe: () => void;
@@ -96,9 +98,12 @@ defineSlots<{
     isRunning: boolean;
     inputMode: CopilotChatInputMode;
     inputToolsMenu: (ToolsMenuItem | "-")[];
+    canStop: boolean;
+    canAddFile: boolean;
+    canTranscribe: boolean;
     onUpdateModelValue: (value: string) => void;
     onSubmitMessage: (value: string) => void;
-    onStop?: () => void;
+    onStop: () => void;
     onAddFile: () => void;
     onStartTranscribe: () => void;
     onCancelTranscribe: () => void;
@@ -123,7 +128,6 @@ const emit = defineEmits<{
 
 const config = useCopilotChatConfiguration();
 const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
-const instance = getCurrentInstance();
 const componentSlots = useSlots();
 
 const scrollContainerRef = ref<HTMLElement | null>(null);
@@ -174,9 +178,6 @@ const hasSuggestions = computed(
 const hasAttachments = computed(
   () => Array.isArray(props.attachments) && props.attachments.length > 0,
 );
-const vnodeProps = computed(
-  () => (instance?.vnode.props ?? {}) as Record<string, unknown>,
-);
 const forwardedMessageViewSlotNames = computed(() =>
   Object.keys(componentSlots).filter(
     (slotName) =>
@@ -197,20 +198,6 @@ const shouldShowWelcomeScreen = computed(
     !props.isConnecting &&
     !props.hasExplicitThreadId,
 );
-const hasAddFileAction = computed(() => hasListener("onAddFile"));
-const hasStopAction = computed(() => hasListener("onStop"));
-const hasStartTranscribeAction = computed(() =>
-  hasListener("onStartTranscribe"),
-);
-const hasCancelTranscribeAction = computed(() =>
-  hasListener("onCancelTranscribe"),
-);
-const hasFinishTranscribeAction = computed(() =>
-  hasListener("onFinishTranscribe"),
-);
-const hasFinishTranscribeWithAudioAction = computed(
-  () => typeof props.onFinishTranscribeWithAudio === "function",
-);
 // Mirrors React: `paddingBottom = inputContainerHeight + (hasSuggestions ? 4 : 32)`.
 // React intentionally does NOT add bonus padding for attachments — the
 // attachment queue lives inside the input overlay, so its height is already
@@ -343,14 +330,6 @@ function handleScroll() {
   updateIsAtBottom();
 }
 
-function hasListener(listenerName: string) {
-  const listener = vnodeProps.value[listenerName];
-  if (Array.isArray(listener)) {
-    return listener.length > 0;
-  }
-  return !!listener;
-}
-
 function handleInputValueChange(value: string) {
   if (!isControlledInput.value) {
     localInputValue.value = value;
@@ -405,31 +384,35 @@ async function handleFinishTranscribeWithAudio(audioBlob: Blob) {
 const inputEventProps = computed(() => {
   const listeners: Record<string, unknown> = {
     "onUpdate:modelValue": handleInputValueChange,
-    onSubmitMessage: handleSubmitMessage,
+    onSubmitMessage: props.onSubmitMessage ? handleSubmitMessage : undefined,
   };
 
-  if (hasStopAction.value) {
+  if (props.onStop) {
     listeners.onStop = handleStop;
   }
-  if (hasAddFileAction.value) {
+  if (props.onAddFile) {
     listeners.onAddFile = handleAddFile;
   }
-  if (hasStartTranscribeAction.value) {
+  if (props.onStartTranscribe) {
     listeners.onStartTranscribe = handleStartTranscribe;
   }
-  if (hasCancelTranscribeAction.value) {
+  if (props.onCancelTranscribe) {
     listeners.onCancelTranscribe = handleCancelTranscribe;
   }
-  if (hasFinishTranscribeAction.value) {
+  if (props.onFinishTranscribe) {
     listeners.onFinishTranscribe = handleFinishTranscribe;
   }
-  if (hasFinishTranscribeWithAudioAction.value) {
+  if (props.onFinishTranscribeWithAudio) {
     listeners.onFinishTranscribeWithAudio = handleFinishTranscribeWithAudio;
   }
 
   return listeners;
 });
 
+const canStop = computed(() => !!props.onStop);
+const canAddFile = computed(() => !!props.onAddFile);
+const canTranscribe = computed(() => !!props.onStartTranscribe);
+
 onMounted(async () => {
   await nextTick();
   syncInputContainerHeight();
@@ -484,9 +467,12 @@ onBeforeUnmount(() => {
       :is-running="isRunning"
       :input-mode="inputMode"
       :input-tools-menu="inputToolsMenu"
+      :can-stop="canStop"
+      :can-add-file="canAddFile"
+      :can-transcribe="canTranscribe"
       :on-update-model-value="handleInputValueChange"
       :on-submit-message="handleSubmitMessage"
-      :on-stop="hasStopAction ? handleStop : undefined"
+      :on-stop="handleStop"
       :on-add-file="handleAddFile"
       :on-start-transcribe="handleStartTranscribe"
       :on-cancel-transcribe="handleCancelTranscribe"
@@ -527,9 +513,12 @@ onBeforeUnmount(() => {
               :input-mode="inputMode"
               :input-tools-menu="inputToolsMenu"
               :attachments="attachments ?? []"
+              :can-stop="canStop"
+              :can-add-file="canAddFile"
+              :can-transcribe="canTranscribe"
               :on-update-model-value="handleInputValueChange"
               :on-submit-message="handleSubmitMessage"
-              :on-stop="hasStopAction ? handleStop : undefined"
+              :on-stop="handleStop"
               :on-add-file="handleAddFile"
               :on-start-transcribe="handleStartTranscribe"
               :on-cancel-transcribe="handleCancelTranscribe"
@@ -713,9 +702,12 @@ onBeforeUnmount(() => {
           :input-mode="inputMode"
           :input-tools-menu="inputToolsMenu"
           :attachments="attachments ?? []"
+          :can-stop="canStop"
+          :can-add-file="canAddFile"
+          :can-transcribe="canTranscribe"
           :on-update-model-value="handleInputValueChange"
           :on-submit-message="handleSubmitMessage"
-          :on-stop="hasStopAction ? handleStop : undefined"
+          :on-stop="handleStop"
           :on-add-file="handleAddFile"
           :on-start-transcribe="handleStartTranscribe"
           :on-cancel-transcribe="handleCancelTranscribe"

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

@@ -22,16 +22,14 @@ function popupViewEventBindings(slotProps: CopilotChatViewOverrideSlotProps) {
     onSubmitMessage: slotProps.onSubmitMessage,
     onInputChange: slotProps.onInputChange,
     onSelectSuggestion: slotProps.onSelectSuggestion,
-    ...(slotProps.onStop ? { onStop: slotProps.onStop } : {}),
-    ...(slotProps.onAddFile ? { onAddFile: slotProps.onAddFile } : {}),
-    ...(slotProps.onStartTranscribe
-      ? { onStartTranscribe: slotProps.onStartTranscribe }
-      : {}),
-    ...(slotProps.onCancelTranscribe
-      ? { onCancelTranscribe: slotProps.onCancelTranscribe }
-      : {}),
-    ...(slotProps.onFinishTranscribe
-      ? { onFinishTranscribe: slotProps.onFinishTranscribe }
+    ...(slotProps.canStop ? { onStop: slotProps.onStop } : {}),
+    ...(slotProps.canAddFile ? { onAddFile: slotProps.onAddFile } : {}),
+    ...(slotProps.canTranscribe
+      ? {
+          onStartTranscribe: slotProps.onStartTranscribe,
+          onCancelTranscribe: slotProps.onCancelTranscribe,
+          onFinishTranscribe: slotProps.onFinishTranscribe,
+        }
       : {}),
   };
 }

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, getCurrentInstance, useAttrs } from "vue";
+import { computed, useAttrs } from "vue";
 import CopilotChatConfigurationProvider from "../../providers/CopilotChatConfigurationProvider.vue";
 import CopilotPopupViewInternal from "./CopilotPopupViewInternal.vue";
 import type {
@@ -66,18 +66,6 @@ const emit = defineEmits<{
 }>();
 
 const attrs = useAttrs();
-const instance = getCurrentInstance();
-const vnodeProps = computed(
-  () => (instance?.vnode.props ?? {}) as Record<string, unknown>,
-);
-
-function hasListener(listenerName: string) {
-  const listener = vnodeProps.value[listenerName];
-  if (Array.isArray(listener)) {
-    return listener.length > 0;
-  }
-  return !!listener;
-}
 
 const internalProps = computed(() => {
   const { defaultOpen: _defaultOpen, ...rest } = props;
@@ -87,7 +75,6 @@ const internalProps = computed(() => {
 const forwardedEventListeners = computed(() => {
   const listeners: Record<string, unknown> = {
     onSubmitMessage: (value: string) => emit("submit-message", value),
-    onStop: () => emit("stop"),
     onInputChange: (value: string) => emit("input-change", value),
     onSelectSuggestion: (
       suggestion: (typeof props.suggestions)[number],
@@ -95,16 +82,19 @@ const forwardedEventListeners = computed(() => {
     ) => emit("select-suggestion", suggestion, index),
   };
 
-  if (hasListener("onAddFile")) {
+  if (props.onStop) {
+    listeners.onStop = () => emit("stop");
+  }
+  if (props.onAddFile) {
     listeners.onAddFile = () => emit("add-file");
   }
-  if (hasListener("onStartTranscribe")) {
+  if (props.onStartTranscribe) {
     listeners.onStartTranscribe = () => emit("start-transcribe");
   }
-  if (hasListener("onCancelTranscribe")) {
+  if (props.onCancelTranscribe) {
     listeners.onCancelTranscribe = () => emit("cancel-transcribe");
   }
-  if (hasListener("onFinishTranscribe")) {
+  if (props.onFinishTranscribe) {
     listeners.onFinishTranscribe = () => emit("finish-transcribe");
   }
 

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {
   computed,
-  getCurrentInstance,
   nextTick,
   onBeforeUnmount,
   onMounted,
@@ -85,10 +84,6 @@ const emit = defineEmits<{
 
 const attrs = useAttrs();
 const config = useCopilotChatConfiguration();
-const instance = getCurrentInstance();
-const vnodeProps = computed(
-  () => (instance?.vnode.props ?? {}) as Record<string, unknown>,
-);
 
 const containerRef = ref<HTMLElement | null>(null);
 const isRendered = ref(config.value?.isModalOpen ?? false);
@@ -99,7 +94,6 @@ let focusTimer: ReturnType<typeof setTimeout> | undefined;
 const isPopupOpen = computed(() => config.value?.isModalOpen ?? false);
 const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
 const headerTitle = computed(() => labels.value.modalHeaderTitle);
-const hasStopAction = computed(() => hasListener("onStop"));
 const popupAnimationClass = computed(() =>
   isPopupOpen.value && !isAnimatingOut.value
     ? "cpk:pointer-events-auto cpk:translate-y-0 cpk:opacity-100 cpk:md:scale-100"
@@ -139,14 +133,6 @@ function dimensionToCss(
   return `${fallback}px`;
 }
 
-function hasListener(listenerName: string) {
-  const listener = vnodeProps.value[listenerName];
-  if (Array.isArray(listener)) {
-    return listener.length > 0;
-  }
-  return !!listener;
-}
-
 function closePopup() {
   config.value?.setModalOpen?.(false);
 }
@@ -201,19 +187,19 @@ const chatViewEventProps = computed(() => {
     onSelectSuggestion: handleSelectSuggestion,
   };
 
-  if (hasStopAction.value) {
+  if (props.onStop) {
     listeners.onStop = handleStop;
   }
-  if (hasListener("onAddFile")) {
+  if (props.onAddFile) {
     listeners.onAddFile = handleAddFile;
   }
-  if (hasListener("onStartTranscribe")) {
+  if (props.onStartTranscribe) {
     listeners.onStartTranscribe = handleStartTranscribe;
   }
-  if (hasListener("onCancelTranscribe")) {
+  if (props.onCancelTranscribe) {
     listeners.onCancelTranscribe = handleCancelTranscribe;
   }
-  if (hasListener("onFinishTranscribe")) {
+  if (props.onFinishTranscribe) {
     listeners.onFinishTranscribe = handleFinishTranscribe;
   }
 

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

@@ -18,6 +18,9 @@ const props = withDefaults(defineProps<CopilotPopupWelcomeScreenProps>(), {
   isRunning: false,
   inputMode: "input",
   inputToolsMenu: () => [],
+  canStop: undefined,
+  canAddFile: undefined,
+  canTranscribe: undefined,
   onAddFile: undefined,
   onStartTranscribe: undefined,
   onCancelTranscribe: undefined,
@@ -37,20 +40,47 @@ defineSlots<{
 const config = useCopilotChatConfiguration();
 const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
 
+function handleStop() {
+  props.onStop?.();
+}
+
+function handleAddFile() {
+  props.onAddFile?.();
+}
+
+function handleStartTranscribe() {
+  props.onStartTranscribe?.();
+}
+
+function handleCancelTranscribe() {
+  props.onCancelTranscribe?.();
+}
+
+function handleFinishTranscribe() {
+  props.onFinishTranscribe?.();
+}
+
+async function handleFinishTranscribeWithAudio(audioBlob: Blob) {
+  await props.onFinishTranscribeWithAudio?.(audioBlob);
+}
+
 const inputSlotProps = computed<CopilotPopupWelcomeScreenInputSlotProps>(
   () => ({
     modelValue: props.modelValue,
     isRunning: props.isRunning,
     inputMode: props.inputMode,
     inputToolsMenu: props.inputToolsMenu,
+    canStop: props.canStop ?? Boolean(props.onStop),
+    canAddFile: props.canAddFile ?? Boolean(props.onAddFile),
+    canTranscribe: props.canTranscribe ?? Boolean(props.onStartTranscribe),
     onUpdateModelValue: props.onUpdateModelValue,
     onSubmitMessage: props.onSubmitMessage,
-    onStop: props.onStop,
-    onAddFile: props.onAddFile,
-    onStartTranscribe: props.onStartTranscribe,
-    onCancelTranscribe: props.onCancelTranscribe,
-    onFinishTranscribe: props.onFinishTranscribe,
-    onFinishTranscribeWithAudio: props.onFinishTranscribeWithAudio,
+    onStop: handleStop,
+    onAddFile: handleAddFile,
+    onStartTranscribe: handleStartTranscribe,
+    onCancelTranscribe: handleCancelTranscribe,
+    onFinishTranscribe: handleFinishTranscribe,
+    onFinishTranscribeWithAudio: handleFinishTranscribeWithAudio,
   }),
 );
 const suggestionViewSlotProps =

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

@@ -22,16 +22,14 @@ function sidebarViewEventBindings(slotProps: CopilotChatViewOverrideSlotProps) {
     onSubmitMessage: slotProps.onSubmitMessage,
     onInputChange: slotProps.onInputChange,
     onSelectSuggestion: slotProps.onSelectSuggestion,
-    ...(slotProps.onStop ? { onStop: slotProps.onStop } : {}),
-    ...(slotProps.onAddFile ? { onAddFile: slotProps.onAddFile } : {}),
-    ...(slotProps.onStartTranscribe
-      ? { onStartTranscribe: slotProps.onStartTranscribe }
-      : {}),
-    ...(slotProps.onCancelTranscribe
-      ? { onCancelTranscribe: slotProps.onCancelTranscribe }
-      : {}),
-    ...(slotProps.onFinishTranscribe
-      ? { onFinishTranscribe: slotProps.onFinishTranscribe }
+    ...(slotProps.canStop ? { onStop: slotProps.onStop } : {}),
+    ...(slotProps.canAddFile ? { onAddFile: slotProps.onAddFile } : {}),
+    ...(slotProps.canTranscribe
+      ? {
+          onStartTranscribe: slotProps.onStartTranscribe,
+          onCancelTranscribe: slotProps.onCancelTranscribe,
+          onFinishTranscribe: slotProps.onFinishTranscribe,
+        }
       : {}),
   };
 }

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, getCurrentInstance, useAttrs } from "vue";
+import { computed, useAttrs } from "vue";
 import CopilotChatConfigurationProvider from "../../providers/CopilotChatConfigurationProvider.vue";
 import CopilotSidebarViewInternal from "./CopilotSidebarViewInternal.vue";
 import type {
@@ -71,10 +71,6 @@ const emit = defineEmits<{
 }>();
 
 const attrs = useAttrs();
-const instance = getCurrentInstance();
-const vnodeProps = computed(
-  () => (instance?.vnode.props ?? {}) as Record<string, unknown>,
-);
 
 const internalProps = computed(() => {
   const { defaultOpen: _defaultOpen, ...rest } = props;
@@ -86,18 +82,9 @@ const internalBindings = computed(() => ({
   ...forwardedEventListeners.value,
 }));
 
-function hasListener(listenerName: string) {
-  const listener = vnodeProps.value[listenerName];
-  if (Array.isArray(listener)) {
-    return listener.length > 0;
-  }
-  return !!listener;
-}
-
 const forwardedEventListeners = computed(() => {
   const listeners: Record<string, unknown> = {
     onSubmitMessage: (value: string) => emit("submit-message", value),
-    onStop: () => emit("stop"),
     onInputChange: (value: string) => emit("input-change", value),
     onSelectSuggestion: (
       suggestion: (typeof props.suggestions)[number],
@@ -105,16 +92,19 @@ const forwardedEventListeners = computed(() => {
     ) => emit("select-suggestion", suggestion, index),
   };
 
-  if (hasListener("onAddFile")) {
+  if (props.onStop) {
+    listeners.onStop = () => emit("stop");
+  }
+  if (props.onAddFile) {
     listeners.onAddFile = () => emit("add-file");
   }
-  if (hasListener("onStartTranscribe")) {
+  if (props.onStartTranscribe) {
     listeners.onStartTranscribe = () => emit("start-transcribe");
   }
-  if (hasListener("onCancelTranscribe")) {
+  if (props.onCancelTranscribe) {
     listeners.onCancelTranscribe = () => emit("cancel-transcribe");
   }
-  if (hasListener("onFinishTranscribe")) {
+  if (props.onFinishTranscribe) {
     listeners.onFinishTranscribe = () => emit("finish-transcribe");
   }
 

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {
   computed,
-  getCurrentInstance,
   nextTick,
   onBeforeUnmount,
   onMounted,
@@ -82,10 +81,6 @@ const emit = defineEmits<{
 
 const attrs = useAttrs();
 const config = useCopilotChatConfiguration();
-const instance = getCurrentInstance();
-const vnodeProps = computed(
-  () => (instance?.vnode.props ?? {}) as Record<string, unknown>,
-);
 
 const sidebarRef = ref<HTMLElement | null>(null);
 const measuredSidebarWidth = ref<number | string>(
@@ -115,7 +110,6 @@ const asideAttrs = computed(() => {
   const { class: _className, ...rest } = attrs;
   return rest;
 });
-const hasStopAction = computed(() => hasListener("onStop"));
 const asideStyle = computed(
   () =>
     ({
@@ -135,14 +129,6 @@ const bodyMarginStyle = computed(
 `,
 );
 
-function hasListener(listenerName: string) {
-  const listener = vnodeProps.value[listenerName];
-  if (Array.isArray(listener)) {
-    return listener.length > 0;
-  }
-  return !!listener;
-}
-
 function widthToCss(width: number | string): string {
   return typeof width === "number" ? `${width}px` : width;
 }
@@ -216,19 +202,19 @@ const chatViewEventProps = computed(() => {
     onSelectSuggestion: handleSelectSuggestion,
   };
 
-  if (hasStopAction.value) {
+  if (props.onStop) {
     listeners.onStop = handleStop;
   }
-  if (hasListener("onAddFile")) {
+  if (props.onAddFile) {
     listeners.onAddFile = handleAddFile;
   }
-  if (hasListener("onStartTranscribe")) {
+  if (props.onStartTranscribe) {
     listeners.onStartTranscribe = handleStartTranscribe;
   }
-  if (hasListener("onCancelTranscribe")) {
+  if (props.onCancelTranscribe) {
     listeners.onCancelTranscribe = handleCancelTranscribe;
   }
-  if (hasListener("onFinishTranscribe")) {
+  if (props.onFinishTranscribe) {
     listeners.onFinishTranscribe = handleFinishTranscribe;
   }
 

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

@@ -18,6 +18,9 @@ const props = withDefaults(defineProps<CopilotSidebarWelcomeScreenProps>(), {
   isRunning: false,
   inputMode: "input",
   inputToolsMenu: () => [],
+  canStop: undefined,
+  canAddFile: undefined,
+  canTranscribe: undefined,
   onAddFile: undefined,
   onStartTranscribe: undefined,
   onCancelTranscribe: undefined,
@@ -37,20 +40,47 @@ defineSlots<{
 const config = useCopilotChatConfiguration();
 const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
 
+function handleStop() {
+  props.onStop?.();
+}
+
+function handleAddFile() {
+  props.onAddFile?.();
+}
+
+function handleStartTranscribe() {
+  props.onStartTranscribe?.();
+}
+
+function handleCancelTranscribe() {
+  props.onCancelTranscribe?.();
+}
+
+function handleFinishTranscribe() {
+  props.onFinishTranscribe?.();
+}
+
+async function handleFinishTranscribeWithAudio(audioBlob: Blob) {
+  await props.onFinishTranscribeWithAudio?.(audioBlob);
+}
+
 const inputSlotProps = computed<CopilotSidebarWelcomeScreenInputSlotProps>(
   () => ({
     modelValue: props.modelValue,
     isRunning: props.isRunning,
     inputMode: props.inputMode,
     inputToolsMenu: props.inputToolsMenu,
+    canStop: props.canStop ?? Boolean(props.onStop),
+    canAddFile: props.canAddFile ?? Boolean(props.onAddFile),
+    canTranscribe: props.canTranscribe ?? Boolean(props.onStartTranscribe),
     onUpdateModelValue: props.onUpdateModelValue,
     onSubmitMessage: props.onSubmitMessage,
-    onStop: props.onStop,
-    onAddFile: props.onAddFile,
-    onStartTranscribe: props.onStartTranscribe,
-    onCancelTranscribe: props.onCancelTranscribe,
-    onFinishTranscribe: props.onFinishTranscribe,
-    onFinishTranscribeWithAudio: props.onFinishTranscribeWithAudio,
+    onStop: handleStop,
+    onAddFile: handleAddFile,
+    onStartTranscribe: handleStartTranscribe,
+    onCancelTranscribe: handleCancelTranscribe,
+    onFinishTranscribe: handleFinishTranscribe,
+    onFinishTranscribeWithAudio: handleFinishTranscribeWithAudio,
   }),
 );
 const suggestionViewSlotProps =