@copilotkit/vue 2.0.0-rc.3 → 2.0.0-rc.31

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed, useAttrs } from "vue";
 import CopilotChatConfigurationProvider from "../../providers/CopilotChatConfigurationProvider.vue";
+import { forwardedSlotNames } from "./forwarded-slots";
 import CopilotPopupViewInternal from "./CopilotPopupViewInternal.vue";
 import type {
   CopilotChatFeatherSlotProps,
+  CopilotChatInterruptSlotProps,
   CopilotChatMessageViewSlotProps,
   CopilotChatScrollToBottomButtonSlotProps,
   CopilotChatScrollViewSlotProps,
@@ -44,12 +46,16 @@ defineSlots<{
   "scroll-to-bottom-button"?: (
     props: CopilotChatScrollToBottomButtonSlotProps,
   ) => unknown;
+  interrupt?: (props: CopilotChatInterruptSlotProps) => unknown;
   input?: (props: CopilotSidebarWelcomeScreenInputSlotProps) => unknown;
   "suggestion-view"?: (
     props: CopilotSidebarWelcomeScreenSuggestionViewSlotProps,
   ) => unknown;
   "welcome-screen"?: (props: CopilotChatWelcomeScreenSlotProps) => unknown;
   "welcome-message"?: () => unknown;
+  // Any other slot goes to the chat view, as on CopilotChat.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: ((props: any) => unknown) | undefined;
 }>();
 
 const emit = defineEmits<{
@@ -112,47 +118,12 @@ const internalBindings = computed(() => ({
 <template>
   <CopilotChatConfigurationProvider :is-modal-default-open="defaultOpen">
     <CopilotPopupViewInternal v-bind="internalBindings">
-      <template v-if="$slots.header" #header="slotProps">
-        <slot name="header" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['toggle-button']" #toggle-button="slotProps">
-        <slot name="toggle-button" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['message-view']" #message-view="slotProps">
-        <slot name="message-view" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['scroll-view']" #scroll-view="slotProps">
-        <slot name="scroll-view" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots.feather" #feather="slotProps">
-        <slot name="feather" v-bind="slotProps" />
-      </template>
-
       <template
-        v-if="$slots['scroll-to-bottom-button']"
-        #scroll-to-bottom-button="slotProps"
+        v-for="slotName in forwardedSlotNames($slots)"
+        :key="slotName"
+        #[slotName]="slotProps"
       >
-        <slot name="scroll-to-bottom-button" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots.input" #input="slotProps">
-        <slot name="input" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['suggestion-view']" #suggestion-view="slotProps">
-        <slot name="suggestion-view" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['welcome-screen']" #welcome-screen="slotProps">
-        <slot name="welcome-screen" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['welcome-message']" #welcome-message>
-        <slot name="welcome-message" />
+        <slot :name="slotName" v-bind="slotProps" />
       </template>
     </CopilotPopupViewInternal>
   </CopilotChatConfigurationProvider>

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

@@ -1,20 +1,21 @@
 <script setup lang="ts">
+import { computed, onBeforeUnmount, ref, useAttrs, watch } from "vue";
 import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  useAttrs,
-  watch,
-} from "vue";
+  ɵPOPUP_DEFAULT_HEIGHT,
+  ɵPOPUP_DEFAULT_WIDTH,
+  ɵbindPopupDismiss,
+  ɵcreateExitPresence,
+  ɵdimensionToCss,
+} from "@copilotkit/core";
 import { CopilotChatDefaultLabels } from "../../providers/types";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import CopilotChatToggleButton from "./CopilotChatToggleButton.vue";
 import CopilotChatView from "./CopilotChatView.vue";
 import CopilotModalHeader from "./CopilotModalHeader.vue";
+import { forwardedSlotNames } from "./forwarded-slots";
 import type {
   CopilotChatFeatherSlotProps,
+  CopilotChatInterruptSlotProps,
   CopilotChatMessageViewSlotProps,
   CopilotChatScrollToBottomButtonSlotProps,
   CopilotChatScrollViewSlotProps,
@@ -28,10 +29,6 @@ import type {
 
 defineOptions({ inheritAttrs: false });
 
-const DEFAULT_POPUP_WIDTH = 420;
-const DEFAULT_POPUP_HEIGHT = 560;
-const POPUP_ANIMATION_MS = 200;
-
 const props = withDefaults(
   defineProps<Omit<CopilotPopupViewProps, "defaultOpen">>(),
   {
@@ -61,14 +58,22 @@ defineSlots<{
   "scroll-to-bottom-button"?: (
     props: CopilotChatScrollToBottomButtonSlotProps,
   ) => unknown;
+  interrupt?: (props: CopilotChatInterruptSlotProps) => unknown;
   input?: (props: CopilotSidebarWelcomeScreenInputSlotProps) => unknown;
   "suggestion-view"?: (
     props: CopilotSidebarWelcomeScreenSuggestionViewSlotProps,
   ) => unknown;
   "welcome-screen"?: (props: CopilotChatWelcomeScreenSlotProps) => unknown;
   "welcome-message"?: () => unknown;
+  // Any other slot goes to the chat view, as on CopilotChat.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: ((props: any) => unknown) | undefined;
 }>();
 
+// Slots this component renders itself. It passes every other slot to the
+// chat view.
+const OWN_SLOTS = ["header", "toggle-button"] as const;
+
 const emit = defineEmits<{
   "submit-message": [value: string];
   stop: [];
@@ -87,12 +92,19 @@ const attrs = useAttrs();
 const config = useCopilotChatConfiguration();
 
 const containerRef = ref<HTMLElement | null>(null);
-const isRendered = ref(config.value?.isModalOpen ?? false);
-const isAnimatingOut = ref(false);
-let animationTimer: ReturnType<typeof setTimeout> | undefined;
-let focusTimer: ReturnType<typeof setTimeout> | undefined;
-
 const isPopupOpen = computed(() => config.value?.isModalOpen ?? false);
+
+// Core keeps the closed popup rendered while its exit animation plays.
+const presence = ɵcreateExitPresence(isPopupOpen.value);
+const isRendered = ref(presence.getState().isRendered);
+const isAnimatingOut = ref(presence.getState().isClosing);
+presence.subscribe((state) => {
+  isRendered.value = state.isRendered;
+  isAnimatingOut.value = state.isClosing;
+});
+watch(isPopupOpen, (open) => presence.setOpen(open));
+onBeforeUnmount(() => presence.dispose());
+
 const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
 const headerTitle = computed(() => labels.value.modalHeaderTitle);
 const popupAnimationClass = computed(() =>
@@ -103,10 +115,13 @@ const popupAnimationClass = computed(() =>
 const popupStyle = computed(
   () =>
     ({
-      "--copilot-popup-width": dimensionToCss(props.width, DEFAULT_POPUP_WIDTH),
-      "--copilot-popup-height": dimensionToCss(
+      "--copilot-popup-width": ɵdimensionToCss(
+        props.width,
+        ɵPOPUP_DEFAULT_WIDTH,
+      ),
+      "--copilot-popup-height": ɵdimensionToCss(
         props.height,
-        DEFAULT_POPUP_HEIGHT,
+        ɵPOPUP_DEFAULT_HEIGHT,
       ),
       "--copilot-popup-max-width": "calc(100vw - 3rem)",
       "--copilot-popup-max-height": "calc(100dvh - 7.5rem)",
@@ -117,19 +132,6 @@ const popupStyle = computed(
     }) as Record<string, string>,
 );
 
-function dimensionToCss(
-  value: number | string | undefined,
-  fallback: number,
-): string {
-  if (typeof value === "number" && Number.isFinite(value)) {
-    return `${value}px`;
-  }
-  if (typeof value === "string" && value.trim().length > 0) {
-    return value;
-  }
-  return `${fallback}px`;
-}
-
 function closePopup() {
   config.value?.setModalOpen?.(false);
 }
@@ -208,131 +210,23 @@ const chatViewBindings = computed(() => ({
   ...chatViewEventProps.value,
 }));
 
-watch(
-  isPopupOpen,
-  (open) => {
-    if (animationTimer) {
-      clearTimeout(animationTimer);
-      animationTimer = undefined;
-    }
-
-    if (open) {
-      isRendered.value = true;
-      isAnimatingOut.value = false;
-      return;
-    }
-
-    if (!isRendered.value) {
-      return;
-    }
-
-    isAnimatingOut.value = true;
-    animationTimer = setTimeout(() => {
-      isRendered.value = false;
-      isAnimatingOut.value = false;
-      animationTimer = undefined;
-    }, POPUP_ANIMATION_MS);
-  },
-  { immediate: true },
-);
-
-watch(
-  isPopupOpen,
-  (open, _old, onCleanup) => {
-    if (!open || typeof window === "undefined") {
-      return;
-    }
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        closePopup();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    onCleanup(() => {
-      window.removeEventListener("keydown", handleKeyDown);
-    });
-  },
-  { immediate: true },
-);
-
-watch(
-  isPopupOpen,
-  (open, _old, onCleanup) => {
-    if (!open) {
-      return;
-    }
-
-    focusTimer = setTimeout(() => {
-      if (typeof document === "undefined") {
-        return;
-      }
-      const container = containerRef.value;
-      if (container && !container.contains(document.activeElement)) {
-        container.focus({ preventScroll: true });
-      }
-    }, POPUP_ANIMATION_MS);
-
-    onCleanup(() => {
-      if (focusTimer) {
-        clearTimeout(focusTimer);
-        focusTimer = undefined;
-      }
-    });
-  },
-  { immediate: true },
-);
-
+// Escape, a click outside (when enabled), and focus once the popup opens.
 watch(
   [isPopupOpen, () => props.clickOutsideToClose],
-  ([open, allowClose], _old, onCleanup) => {
-    if (!open || !allowClose || typeof document === "undefined") {
+  ([open, clickOutsideToClose], _old, onCleanup) => {
+    if (!open) {
       return;
     }
-
-    const handlePointerDown = (event: PointerEvent) => {
-      const target = event.target as Node | null;
-      if (!target) {
-        return;
-      }
-
-      const container = containerRef.value;
-      if (container?.contains(target)) {
-        return;
-      }
-
-      const toggleButton = document.querySelector(
-        "[data-slot='chat-toggle-button']",
-      );
-      if (toggleButton?.contains(target)) {
-        return;
-      }
-
-      closePopup();
-    };
-
-    document.addEventListener("pointerdown", handlePointerDown);
-    onCleanup(() => {
-      document.removeEventListener("pointerdown", handlePointerDown);
-    });
+    onCleanup(
+      ɵbindPopupDismiss({
+        getContainer: () => containerRef.value,
+        onDismiss: closePopup,
+        clickOutsideToClose: clickOutsideToClose === true,
+      }),
+    );
   },
   { immediate: true },
 );
-
-onMounted(async () => {
-  await nextTick();
-});
-
-onBeforeUnmount(() => {
-  if (animationTimer) {
-    clearTimeout(animationTimer);
-  }
-  if (focusTimer) {
-    clearTimeout(focusTimer);
-  }
-});
 </script>
 
 <template>
@@ -385,42 +279,12 @@ onBeforeUnmount(() => {
           :on-finish-transcribe-with-audio="onFinishTranscribeWithAudio"
           v-bind="chatViewBindings"
         >
-          <template v-if="$slots['message-view']" #message-view="slotProps">
-            <slot name="message-view" v-bind="slotProps" />
-          </template>
-
-          <template v-if="$slots['scroll-view']" #scroll-view="slotProps">
-            <slot name="scroll-view" v-bind="slotProps" />
-          </template>
-
-          <template v-if="$slots.feather" #feather>
-            <slot name="feather" />
-          </template>
-
           <template
-            v-if="$slots['scroll-to-bottom-button']"
-            #scroll-to-bottom-button="slotProps"
+            v-for="slotName in forwardedSlotNames($slots, OWN_SLOTS)"
+            :key="slotName"
+            #[slotName]="slotProps"
           >
-            <slot name="scroll-to-bottom-button" v-bind="slotProps" />
-          </template>
-
-          <template v-if="$slots.input" #input="slotProps">
-            <slot name="input" v-bind="slotProps" />
-          </template>
-
-          <template
-            v-if="$slots['suggestion-view']"
-            #suggestion-view="slotProps"
-          >
-            <slot name="suggestion-view" v-bind="slotProps" />
-          </template>
-
-          <template v-if="$slots['welcome-screen']" #welcome-screen="slotProps">
-            <slot name="welcome-screen" v-bind="slotProps" />
-          </template>
-
-          <template v-if="$slots['welcome-message']" #welcome-message>
-            <slot name="welcome-message" />
+            <slot :name="slotName" v-bind="slotProps" />
           </template>
         </CopilotChatView>
       </div>

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

@@ -4,9 +4,14 @@ import CopilotChat from "./CopilotChat.vue";
 import CopilotSidebarView from "./CopilotSidebarView.vue";
 import CopilotSidebarWelcomeScreen from "./CopilotSidebarWelcomeScreen.vue";
 import InlineFeatureWarning from "../InlineFeatureWarning.vue";
+import { forwardedSlotNames } from "./forwarded-slots";
 import { useLicenseContext } from "../../providers/useLicenseContext";
 import type {
+  CopilotChatFeatherSlotProps,
+  CopilotChatInterruptSlotProps,
   CopilotChatMessageViewSlotProps,
+  CopilotChatScrollToBottomButtonSlotProps,
+  CopilotChatScrollViewSlotProps,
   CopilotChatViewOverrideSlotProps,
   CopilotChatWelcomeScreenSlotProps,
   CopilotSidebarProps,
@@ -52,14 +57,28 @@ defineSlots<{
   "toggle-button"?: (props: CopilotSidebarViewToggleButtonSlotProps) => unknown;
   "chat-view"?: (props: CopilotChatViewOverrideSlotProps) => unknown;
   "message-view"?: (props: CopilotChatMessageViewSlotProps) => unknown;
+  "scroll-view"?: (props: CopilotChatScrollViewSlotProps) => unknown;
+  feather?: (props: CopilotChatFeatherSlotProps) => unknown;
+  "scroll-to-bottom-button"?: (
+    props: CopilotChatScrollToBottomButtonSlotProps,
+  ) => unknown;
+  interrupt?: (props: CopilotChatInterruptSlotProps) => unknown;
   input?: (props: CopilotSidebarWelcomeScreenInputSlotProps) => unknown;
   "suggestion-view"?: (
     props: CopilotSidebarWelcomeScreenSuggestionViewSlotProps,
   ) => unknown;
   "welcome-screen"?: (props: CopilotChatWelcomeScreenSlotProps) => unknown;
   "welcome-message"?: () => unknown;
+  // Any other slot goes to the chat view, as on CopilotChat.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: ((props: any) => unknown) | undefined;
 }>();
 
+// Slots this component renders itself and does not pass to the view. It passes
+// every other slot to the view. It also renders `input` and `suggestion-view`
+// in its welcome screen, so those two go to both places.
+const OWN_SLOTS = ["chat-view", "welcome-screen", "welcome-message"] as const;
+
 defineEmits<{
   "submit-message": [value: string];
   stop: [];
@@ -123,15 +142,12 @@ watch(
         :on-finish-transcribe-with-audio="slotProps.onFinishTranscribeWithAudio"
         v-bind="sidebarViewEventBindings(slotProps)"
       >
-        <template v-if="$slots.header" #header="headerProps">
-          <slot name="header" v-bind="headerProps" />
-        </template>
-
         <template
-          v-if="$slots['toggle-button']"
-          #toggle-button="toggleButtonProps"
+          v-for="slotName in forwardedSlotNames($slots, OWN_SLOTS)"
+          :key="slotName"
+          #[slotName]="forwardedProps"
         >
-          <slot name="toggle-button" v-bind="toggleButtonProps" />
+          <slot :name="slotName" v-bind="forwardedProps" />
         </template>
 
         <template #welcome-screen="welcomeScreenProps">
@@ -157,24 +173,6 @@ watch(
             </template>
           </CopilotSidebarWelcomeScreen>
         </template>
-
-        <template
-          v-if="$slots['message-view']"
-          #message-view="messageViewProps"
-        >
-          <slot name="message-view" v-bind="messageViewProps" />
-        </template>
-
-        <template v-if="$slots.input" #input="inputProps">
-          <slot name="input" v-bind="inputProps" />
-        </template>
-
-        <template
-          v-if="$slots['suggestion-view']"
-          #suggestion-view="suggestionViewProps"
-        >
-          <slot name="suggestion-view" v-bind="suggestionViewProps" />
-        </template>
       </CopilotSidebarView>
     </template>
   </CopilotChat>

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed, useAttrs } from "vue";
 import CopilotChatConfigurationProvider from "../../providers/CopilotChatConfigurationProvider.vue";
+import { forwardedSlotNames } from "./forwarded-slots";
 import CopilotSidebarViewInternal from "./CopilotSidebarViewInternal.vue";
 import type {
   CopilotChatFeatherSlotProps,
+  CopilotChatInterruptSlotProps,
   CopilotChatWelcomeScreenSlotProps,
   CopilotChatMessageViewSlotProps,
   CopilotChatScrollToBottomButtonSlotProps,
@@ -50,12 +52,16 @@ defineSlots<{
   "scroll-to-bottom-button"?: (
     props: CopilotChatScrollToBottomButtonSlotProps,
   ) => unknown;
+  interrupt?: (props: CopilotChatInterruptSlotProps) => unknown;
   input?: (props: CopilotSidebarWelcomeScreenInputSlotProps) => unknown;
   "suggestion-view"?: (
     props: CopilotSidebarWelcomeScreenSuggestionViewSlotProps,
   ) => unknown;
   "welcome-screen"?: (props: CopilotChatWelcomeScreenSlotProps) => unknown;
   "welcome-message"?: () => unknown;
+  // Any other slot goes to the chat view, as on CopilotChat.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: ((props: any) => unknown) | undefined;
 }>();
 
 const emit = defineEmits<{
@@ -117,47 +123,12 @@ const forwardedEventListeners = computed(() => {
 <template>
   <CopilotChatConfigurationProvider :is-modal-default-open="defaultOpen">
     <CopilotSidebarViewInternal v-bind="internalBindings">
-      <template v-if="$slots.header" #header="slotProps">
-        <slot name="header" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['toggle-button']" #toggle-button="slotProps">
-        <slot name="toggle-button" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['message-view']" #message-view="slotProps">
-        <slot name="message-view" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['scroll-view']" #scroll-view="slotProps">
-        <slot name="scroll-view" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots.feather" #feather="slotProps">
-        <slot name="feather" v-bind="slotProps" />
-      </template>
-
       <template
-        v-if="$slots['scroll-to-bottom-button']"
-        #scroll-to-bottom-button="slotProps"
+        v-for="slotName in forwardedSlotNames($slots)"
+        :key="slotName"
+        #[slotName]="slotProps"
       >
-        <slot name="scroll-to-bottom-button" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots.input" #input="slotProps">
-        <slot name="input" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['suggestion-view']" #suggestion-view="slotProps">
-        <slot name="suggestion-view" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['welcome-screen']" #welcome-screen="slotProps">
-        <slot name="welcome-screen" v-bind="slotProps" />
-      </template>
-
-      <template v-if="$slots['welcome-message']" #welcome-message>
-        <slot name="welcome-message" />
+        <slot :name="slotName" v-bind="slotProps" />
       </template>
     </CopilotSidebarViewInternal>
   </CopilotChatConfigurationProvider>