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

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

@@ -8,13 +8,20 @@ import {
   useAttrs,
   watch,
 } from "vue";
+import {
+  ɵPOPUP_ANIMATION_MS,
+  ɵbindPopupDismiss,
+  ɵ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,
@@ -30,7 +37,7 @@ defineOptions({ inheritAttrs: false });
 
 const DEFAULT_POPUP_WIDTH = 420;
 const DEFAULT_POPUP_HEIGHT = 560;
-const POPUP_ANIMATION_MS = 200;
+const POPUP_ANIMATION_MS = ɵPOPUP_ANIMATION_MS;
 
 const props = withDefaults(
   defineProps<Omit<CopilotPopupViewProps, "defaultOpen">>(),
@@ -61,14 +68,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: [];
@@ -90,7 +105,6 @@ 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);
 const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
@@ -103,8 +117,11 @@ 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,
+        DEFAULT_POPUP_WIDTH,
+      ),
+      "--copilot-popup-height": ɵdimensionToCss(
         props.height,
         DEFAULT_POPUP_HEIGHT,
       ),
@@ -117,19 +134,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);
 }
@@ -236,87 +240,20 @@ watch(
   { 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 },
 );
@@ -329,9 +266,6 @@ onBeforeUnmount(() => {
   if (animationTimer) {
     clearTimeout(animationTimer);
   }
-  if (focusTimer) {
-    clearTimeout(focusTimer);
-  }
 });
 </script>
 
@@ -385,42 +319,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>

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

@@ -8,13 +8,17 @@ import {
   useAttrs,
   watch,
 } from "vue";
+import { ɵcreateDockedSidebar, ɵdimensionToCss } from "@copilotkit/core";
+import type { ɵDockedSidebar } 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,
@@ -59,14 +63,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: [];
@@ -112,32 +124,23 @@ const asideAttrs = computed(() => {
 const asideStyle = computed(
   () =>
     ({
-      "--sidebar-width": widthToCss(resolvedSidebarWidth.value),
+      "--sidebar-width": widthCss.value,
       paddingTop: "env(safe-area-inset-top)",
       paddingBottom: "env(safe-area-inset-bottom)",
     }) as Record<string, string>,
 );
-// The page makes room on the docked edge (desktop only).
-const bodyMarginStyle = computed(() => {
-  const margin =
-    props.position === "left" ? "margin-inline-start" : "margin-inline-end";
-  return `
-@media (min-width: 768px) {
-  body {
-    ${margin}: ${widthToMargin(resolvedSidebarWidth.value)};
-    transition: ${margin} ${SIDEBAR_TRANSITION_MS}ms ease;
-  }
-}
-`;
-});
-
-function widthToCss(width: number | string): string {
-  return typeof width === "number" ? `${width}px` : width;
-}
+const widthCss = computed(() =>
+  ɵdimensionToCss(resolvedSidebarWidth.value, DEFAULT_SIDEBAR_WIDTH),
+);
 
-function widthToMargin(width: number | string): string {
-  return typeof width === "number" ? `${width}px` : width;
-}
+// The page makes room on the docked edge (desktop only).
+let dock: ɵDockedSidebar | undefined;
+watch(
+  [isSidebarOpen, () => props.position, widthCss],
+  ([open, position, width]) => {
+    dock?.set({ open, position, width });
+  },
+);
 
 function updateMeasuredWidth() {
   if (props.width !== undefined || !sidebarRef.value) {
@@ -235,6 +238,14 @@ watch(
 );
 
 onMounted(async () => {
+  dock = ɵcreateDockedSidebar(document, {
+    transitionMs: SIDEBAR_TRANSITION_MS,
+  });
+  dock.set({
+    open: isSidebarOpen.value,
+    position: props.position,
+    width: widthCss.value,
+  });
   await nextTick();
   updateMeasuredWidth();
 
@@ -253,16 +264,14 @@ onMounted(async () => {
 });
 
 onBeforeUnmount(() => {
+  dock?.dispose();
+  dock = undefined;
   resizeObserver?.disconnect();
   resizeObserver = null;
 });
 </script>
 
 <template>
-  <component :is="'style'" v-if="isSidebarOpen">
-    {{ bodyMarginStyle }}
-  </component>
-
   <slot
     name="toggle-button"
     :is-open="isSidebarOpen"
@@ -317,42 +326,12 @@ onBeforeUnmount(() => {
           :on-finish-transcribe-with-audio="onFinishTranscribeWithAudio"
           v-bind="chatViewEventProps"
         >
-          <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"
-          >
-            <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"
+            v-for="slotName in forwardedSlotNames($slots, OWN_SLOTS)"
+            :key="slotName"
+            #[slotName]="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>