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

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

@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  useSlots,
-  watch,
-} from "vue";
+import { computed, ref, useSlots, watch } from "vue";
 import type { Message } from "@ag-ui/core";
-import type { Suggestion } from "@copilotkit/core";
+import {
+  ɵcreateStickToBottom,
+  ɵgetChatViewState,
+  ɵisContentScrolledToBottom,
+  ɵnormalizeAutoScroll,
+  ɵwatchElementHeight,
+} from "@copilotkit/core";
+import type { Suggestion, ɵStickToBottom } from "@copilotkit/core";
 import type { Attachment } from "@copilotkit/shared";
-import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
-import { CopilotChatDefaultLabels } from "../../providers/types";
+import { useChatLabels } from "./use-chat-labels";
 import { useKeyboardHeight } from "../../hooks/use-keyboard-height";
 import { usePinToSend } from "../../hooks/use-pin-to-send";
 import { IconChevronDown, IconUpload } from "../icons";
@@ -20,7 +18,6 @@ import CopilotChatInput from "./CopilotChatInput.vue";
 import CopilotChatAttachmentQueue from "./CopilotChatAttachmentQueue.vue";
 import CopilotChatMessageView from "./CopilotChatMessageView.vue";
 import CopilotChatSuggestionView from "./CopilotChatSuggestionView.vue";
-import { normalizeAutoScroll } from "./normalize-auto-scroll";
 import type {
   CopilotChatInputMode,
   CopilotChatInterruptSlotProps,
@@ -31,7 +28,6 @@ import type {
 // Vertical gap between the scroll-to-bottom button and the input container.
 // Mirrors React `CopilotChatView` `SCROLL_BUTTON_OFFSET`.
 const SCROLL_BUTTON_OFFSET = 16;
-const SCROLL_BOTTOM_THRESHOLD = 12;
 
 const props = withDefaults(defineProps<CopilotChatViewProps>(), {
   messageFeedback: true,
@@ -127,8 +123,7 @@ const emit = defineEmits<{
   "finish-transcribe": [];
 }>();
 
-const config = useCopilotChatConfiguration();
-const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
+const labels = useChatLabels();
 const componentSlots = useSlots();
 
 const scrollContainerRef = ref<HTMLElement | null>(null);
@@ -137,13 +132,16 @@ const spacerRef = ref<HTMLElement | null>(null);
 const inputContainerRef = ref<HTMLElement | null>(null);
 const inputContainerHeight = ref(0);
 const isAtBottom = ref(true);
+// The end of the messages is in view. Without following ("pin-to-send" and
+// "none"), this, not the scroll height, decides the scroll-to-bottom button.
+const isContentAtBottom = ref(true);
 const isControlledInput = computed(() => props.inputValue !== undefined);
 const localInputValue = ref(props.inputValue ?? "");
 
 // Normalize the `autoScroll` prop into the canonical mode triplet
 // (`pin-to-bottom` | `pin-to-send` | `none`). Boolean back-compat is
-// preserved by `normalizeAutoScroll` (parity with React).
-const autoScrollMode = computed(() => normalizeAutoScroll(props.autoScroll));
+// preserved by `ɵnormalizeAutoScroll` (parity with React).
+const autoScrollMode = computed(() => ɵnormalizeAutoScroll(props.autoScroll));
 const isPinToBottomMode = computed(
   () => autoScrollMode.value === "pin-to-bottom",
 );
@@ -169,13 +167,23 @@ const effectiveKeyboardHeight = computed(() =>
 const resolvedInputValue = computed(() =>
   isControlledInput.value ? (props.inputValue ?? "") : localInputValue.value,
 );
-const hasSuggestions = computed(
-  () =>
-    !props.isConnecting &&
-    !props.isRunning &&
-    Array.isArray(props.suggestions) &&
-    props.suggestions.length > 0,
+// Suggestions, the welcome screen and the bottom padding follow core's rules:
+// no suggestions while connecting or running, no generic welcome for a
+// connecting or caller-picked thread.
+const viewState = computed(() =>
+  ɵgetChatViewState({
+    messageCount: props.messages.length,
+    suggestionCount: Array.isArray(props.suggestions)
+      ? props.suggestions.length
+      : 0,
+    isRunning: props.isRunning,
+    isConnecting: props.isConnecting,
+    hasExplicitThreadId: props.hasExplicitThreadId,
+    welcomeScreenEnabled: props.welcomeScreen !== false,
+    inputContainerHeight: inputContainerHeight.value,
+  }),
 );
+const hasSuggestions = computed(() => viewState.value.hasSuggestions);
 const hasAttachments = computed(
   () => Array.isArray(props.attachments) && props.attachments.length > 0,
 );
@@ -193,142 +201,119 @@ const forwardedMessageViewSlotNames = computed(() =>
   ),
 );
 const shouldShowWelcomeScreen = computed(
-  () =>
-    props.messages.length === 0 &&
-    props.welcomeScreen !== false &&
-    !props.isConnecting &&
-    !props.hasExplicitThreadId,
+  () => viewState.value.showWelcomeScreen,
 );
-// 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
-// captured by the overlay's measured `inputContainerHeight`.
+// No bonus padding for attachments: the attachment queue lives inside the
+// input overlay, so its height is already in `inputContainerHeight`.
 const messagePaddingBottom = computed(
-  () => `${inputContainerHeight.value + (hasSuggestions.value ? 4 : 32)}px`,
+  () => `${viewState.value.paddingBottom}px`,
 );
 const showScrollToBottomButton = computed(
-  () => !shouldShowWelcomeScreen.value && !isAtBottom.value,
+  () =>
+    !shouldShowWelcomeScreen.value &&
+    !(isPinToBottomMode.value ? isAtBottom.value : isContentAtBottom.value),
 );
 
-let inputResizeObserver: ResizeObserver | null = null;
-let contentResizeObserver: ResizeObserver | null = null;
-
-function attachInputOverlayObserver() {
-  if (typeof ResizeObserver === "undefined") return;
-
-  inputResizeObserver?.disconnect();
-  inputResizeObserver = null;
-
-  const el = inputContainerRef.value;
-  if (!el) return;
-
-  inputResizeObserver = new ResizeObserver((entries) => {
-    const wasAtBottom = isAtBottom.value;
-    const measured = entries[0]?.contentRect?.height;
-    if (typeof measured === "number") {
-      inputContainerHeight.value = measured;
-    } else {
-      syncInputContainerHeight();
-    }
-    updateIsAtBottom();
-    if (isPinToBottomMode.value && wasAtBottom) {
-      scrollToBottom("auto");
+// Core keeps the list at the bottom while content arrives in `pin-to-bottom`
+// mode, and tracks the position for the scroll-to-bottom button in every
+// mode. It attaches when the scroll container mounts, also after the welcome
+// screen gives way to the chat.
+let stickToBottom: ɵStickToBottom | null = null;
+watch(
+  [scrollContainerRef, scrollContentRef],
+  ([scrollElement, contentElement], _old, onCleanup) => {
+    if (!scrollElement) {
+      isAtBottom.value = true;
+      return;
     }
-  });
-  inputResizeObserver.observe(el);
-}
-
-function attachScrollContentObserver() {
-  if (typeof ResizeObserver === "undefined") return;
-
-  contentResizeObserver?.disconnect();
-  contentResizeObserver = null;
-
-  const el = scrollContentRef.value;
-  if (!el) return;
+    const controller = ɵcreateStickToBottom({
+      scrollElement,
+      contentElement: contentElement ?? scrollElement,
+      follow: isPinToBottomMode.value,
+      onChange: (value) => {
+        isAtBottom.value = value;
+      },
+    });
+    stickToBottom = controller;
+    isAtBottom.value = controller.isAtBottom;
+    onCleanup(() => {
+      controller.dispose();
+      if (stickToBottom === controller) stickToBottom = null;
+    });
+  },
+  { flush: "post" },
+);
 
-  contentResizeObserver = new ResizeObserver(() => {
-    const wasAtBottom = isAtBottom.value;
-    updateIsAtBottom();
-    if (isPinToBottomMode.value && wasAtBottom) {
-      scrollToBottom("auto");
-    }
-  });
-  contentResizeObserver.observe(el);
+watch(isPinToBottomMode, (follow) => stickToBottom?.setFollow(follow));
+
+// Without following, the button shows while messages sit below the viewport.
+// That is the end of the messages, not the scroll height: in "pin-to-send"
+// mode an empty spacer under them lets a sent message reach the top, and
+// scrolling into it would only clear the screen (parity with React).
+function checkContentAtBottom() {
+  const scrollElement = scrollContainerRef.value;
+  const contentElement = scrollContentRef.value;
+  isContentAtBottom.value =
+    !scrollElement ||
+    !contentElement ||
+    ɵisContentScrolledToBottom(scrollElement, contentElement);
 }
 
-// When the welcome screen disappears and the main chat view (with the input
-// overlay) appears, the template-ref elements become non-null. Re-attach
-// observers that were skipped during the initial mount.
-watch(shouldShowWelcomeScreen, async (show) => {
-  if (show) return;
-  await nextTick();
-  syncInputContainerHeight();
-  attachInputOverlayObserver();
-  attachScrollContentObserver();
-});
-
 watch(
-  () => props.inputValue,
-  (next) => {
-    if (isControlledInput.value) {
-      localInputValue.value = next ?? "";
-    }
+  [scrollContainerRef, scrollContentRef],
+  ([scrollElement, contentElement], _old, onCleanup) => {
+    checkContentAtBottom();
+    if (!scrollElement) return;
+    scrollElement.addEventListener("scroll", checkContentAtBottom);
+    // A reply that streams past the bottom needs the button before anyone
+    // scrolls, so check again when the viewport or the messages resize.
+    const resizeObserver =
+      typeof ResizeObserver === "undefined"
+        ? null
+        : new ResizeObserver(checkContentAtBottom);
+    resizeObserver?.observe(scrollElement);
+    if (contentElement) resizeObserver?.observe(contentElement);
+    onCleanup(() => {
+      scrollElement.removeEventListener("scroll", checkContentAtBottom);
+      resizeObserver?.disconnect();
+    });
   },
+  { flush: "post" },
 );
 
+// The input overlay's height becomes the bottom padding of the messages.
 watch(
-  [() => props.messages, () => props.suggestions, () => props.isRunning],
-  async () => {
-    const wasAtBottom = isAtBottom.value;
-    await nextTick();
-    if (!isPinToBottomMode.value || !wasAtBottom) {
+  inputContainerRef,
+  (element, _old, onCleanup) => {
+    if (!element) {
+      inputContainerHeight.value = 0;
       return;
     }
-    scrollToBottom("auto");
-    if (typeof requestAnimationFrame === "function") {
-      requestAnimationFrame(() => {
-        scrollToBottom("auto");
-      });
-    }
+    onCleanup(
+      ɵwatchElementHeight(element, ({ height }) => {
+        inputContainerHeight.value = height;
+      }),
+    );
   },
-  { deep: true },
+  { flush: "post" },
 );
 
-function updateIsAtBottom() {
-  const element = scrollContainerRef.value;
-  if (!element) {
-    isAtBottom.value = true;
-    return;
-  }
-
-  const distance =
-    element.scrollHeight - element.scrollTop - element.clientHeight;
-  isAtBottom.value = distance <= SCROLL_BOTTOM_THRESHOLD;
-}
-
-function syncInputContainerHeight() {
-  const element = inputContainerRef.value;
-  inputContainerHeight.value = element?.offsetHeight ?? 0;
-}
+watch(
+  () => props.inputValue,
+  (next) => {
+    if (isControlledInput.value) {
+      localInputValue.value = next ?? "";
+    }
+  },
+);
 
 function scrollToBottom(behavior: ScrollBehavior = "smooth") {
-  const element = scrollContainerRef.value;
-  if (!element) return;
-
-  if (typeof element.scrollTo === "function") {
-    element.scrollTo({
-      top: element.scrollHeight,
-      behavior,
-    });
-  } else {
-    element.scrollTop = element.scrollHeight;
-  }
-  updateIsAtBottom();
+  stickToBottom?.scrollToBottom(behavior);
 }
 
 function handleScroll() {
-  updateIsAtBottom();
+  stickToBottom?.update();
+  checkContentAtBottom();
 }
 
 function handleInputValueChange(value: string) {
@@ -413,30 +398,6 @@ const inputEventProps = computed(() => {
 const canStop = computed(() => !!props.onStop);
 const canAddFile = computed(() => !!props.onAddFile);
 const canTranscribe = computed(() => !!props.onStartTranscribe);
-
-onMounted(async () => {
-  await nextTick();
-  syncInputContainerHeight();
-  updateIsAtBottom();
-  if (isPinToBottomMode.value) {
-    scrollToBottom("auto");
-    if (typeof requestAnimationFrame === "function") {
-      requestAnimationFrame(() => {
-        scrollToBottom("auto");
-      });
-    }
-  }
-
-  attachInputOverlayObserver();
-  attachScrollContentObserver();
-});
-
-onBeforeUnmount(() => {
-  inputResizeObserver?.disconnect();
-  contentResizeObserver?.disconnect();
-  inputResizeObserver = null;
-  contentResizeObserver = null;
-});
 </script>
 
 <template>
@@ -457,7 +418,9 @@ onBeforeUnmount(() => {
     >
       <div class="cpk-chat-view-drop-overlay-content">
         <IconUpload class="cpk-chat-view-drop-overlay-icon" />
-        <span class="cpk-chat-view-drop-overlay-label">Drop files here</span>
+        <span class="cpk-chat-view-drop-overlay-label">{{
+          labels.chatDropFilesLabel
+        }}</span>
       </div>
     </div>
     <slot
@@ -578,7 +541,6 @@ onBeforeUnmount(() => {
           ref="scrollContainerRef"
           data-testid="copilot-chat-view-scroll"
           class="cpk-chat-view-scroll-area cpk-chat-view-scroll-viewport"
-          @scroll="handleScroll"
         >
           <div class="cpk-chat-view-scroll-content">
             <div

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

@@ -5,10 +5,10 @@
  * for 9s · 7 tools" and toggles the work it folded away.
  */
 import { computed, ref, watch } from "vue";
+import { ɵgetWorkSummaryText } from "@copilotkit/core";
 import { IconChevronRight } from "../icons";
 import type { CopilotChatWorkSummarySlotProps } from "./types";
-import { pluralize } from "./tool-call-group-parts";
-import { formatDuration } from "./turn-work";
+import { useChatLabels } from "./use-chat-labels";
 
 // `onClick` falls through to the button.
 const props = defineProps<Omit<CopilotChatWorkSummarySlotProps, "onClick">>();
@@ -28,19 +28,16 @@ watch(
   { immediate: true },
 );
 
-const failed = computed(
-  () => props.calls.filter((call) => call.toolMessage?.error).length,
-);
-const liveMs = computed(() =>
-  props.elapsedMs !== undefined && props.workingSince !== undefined
-    ? props.elapsedMs + Math.max(0, now.value - props.workingSince)
-    : undefined,
-);
-// A finished reply worked for at least a second.
-const duration = computed(() =>
-  props.elapsedMs !== undefined
-    ? formatDuration(Math.max(1000, props.elapsedMs))
-    : undefined,
+const labels = useChatLabels();
+const text = computed(() =>
+  ɵgetWorkSummaryText({
+    isWorking: props.isWorking,
+    calls: props.calls,
+    elapsedMs: props.elapsedMs,
+    workingSince: props.workingSince,
+    now: now.value,
+    labels: labels.value,
+  }),
 );
 </script>
 
@@ -53,27 +50,20 @@ const duration = computed(() =>
     :aria-expanded="isOpen ? 'true' : 'false'"
     class="cpk-work-summary"
   >
-    <template v-if="isWorking">
-      <span class="cpk-work-summary-label cpk-shimmer">Working</span>
-      <span
-        v-if="liveMs !== undefined"
-        class="cpk-work-summary-detail cpk-work-summary-timer"
-        >{{ formatDuration(liveMs) }}</span
-      >
-    </template>
-    <template v-else>
-      <span class="cpk-work-summary-label">{{
-        duration
-          ? `Worked for ${duration}`
-          : `Used ${pluralize(calls.length, "tool")}`
-      }}</span>
-      <span v-if="duration" class="cpk-work-summary-detail">{{
-        pluralize(calls.length, "tool")
-      }}</span>
-      <span v-if="failed > 0" class="cpk-work-summary-failed"
-        >{{ failed }} failed</span
-      >
-    </template>
+    <span :class="['cpk-work-summary-label', isWorking && 'cpk-shimmer']">{{
+      text.label
+    }}</span>
+    <span
+      v-if="text.detail !== null"
+      :class="[
+        'cpk-work-summary-detail',
+        isWorking && 'cpk-work-summary-timer',
+      ]"
+      >{{ text.detail }}</span
+    >
+    <span v-if="text.failed !== null" class="cpk-work-summary-failed">{{
+      text.failed
+    }}</span>
     <IconChevronRight
       aria-hidden="true"
       :class="[

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

@@ -2,7 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, ref, useAttrs } from "vue";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import { CopilotChatDefaultLabels } from "../../providers/types";
-import { MOBILE_MAX_WIDTH_QUERY } from "../../lib/is-mobile-viewport";
+import { ɵwatchMobileViewport } from "@copilotkit/core";
 import CopilotModalHeaderCloseButton from "./CopilotModalHeaderCloseButton";
 import CopilotModalHeaderTitle from "./CopilotModalHeaderTitle";
 import { IconPanelLeftOpen } from "../icons";
@@ -45,34 +45,22 @@ function handleClose() {
   config.value?.setModalOpen?.(false);
 }
 
-// Tracks whether the viewport is in the mobile range (MOBILE_MAX_WIDTH_QUERY) — the same
-// breakpoint the drawer + chat coordination use. SSR-safe: starts `false`
-// (desktop) so the server render and first client render agree, then syncs
-// on mount and on viewport changes.
+// Tracks whether the viewport is in the mobile range — the same breakpoint
+// the drawer + chat coordination use. SSR-safe: starts `false` (desktop) so
+// the server render and first client render agree, then syncs on mount and
+// on viewport changes.
 const isMobile = ref(false);
-let mobileMediaQuery: MediaQueryList | null = null;
-
-function syncIsMobile() {
-  if (mobileMediaQuery) {
-    isMobile.value = mobileMediaQuery.matches;
-  }
-}
+let stopWatchingMobile: (() => void) | undefined;
 
 onMounted(() => {
-  if (
-    typeof window === "undefined" ||
-    typeof window.matchMedia !== "function"
-  ) {
-    return;
-  }
-  mobileMediaQuery = window.matchMedia(MOBILE_MAX_WIDTH_QUERY);
-  mobileMediaQuery.addEventListener("change", syncIsMobile);
-  syncIsMobile();
+  stopWatchingMobile = ɵwatchMobileViewport((mobile) => {
+    isMobile.value = mobile;
+  });
 });
 
 onBeforeUnmount(() => {
-  mobileMediaQuery?.removeEventListener("change", syncIsMobile);
-  mobileMediaQuery = null;
+  stopWatchingMobile?.();
+  stopWatchingMobile = undefined;
 });
 
 // The thread-list launcher renders ONLY when a <CopilotThreadsDrawer> wrapper

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

@@ -4,9 +4,14 @@ import CopilotChat from "./CopilotChat.vue";
 import CopilotPopupView from "./CopilotPopupView.vue";
 import CopilotPopupWelcomeScreen from "./CopilotPopupWelcomeScreen.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,
   CopilotPopupProps,
@@ -53,14 +58,28 @@ defineSlots<{
   "toggle-button"?: (props: CopilotPopupViewToggleButtonSlotProps) => 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: [];
@@ -125,15 +144,12 @@ watch(
         :on-finish-transcribe-with-audio="slotProps.onFinishTranscribeWithAudio"
         v-bind="popupViewEventBindings(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">
@@ -159,24 +175,6 @@ watch(
             </template>
           </CopilotPopupWelcomeScreen>
         </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>
       </CopilotPopupView>
     </template>
   </CopilotChat>