@copilotkit/vue 2.0.0-rc.26 → 2.0.0-rc.28

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

@@ -20,7 +20,6 @@ import type {
   UserMessage,
 } from "@ag-ui/core";
 import {
-  DEFAULT_AGENT_ID,
   commitRowKeyStore,
   createRowKeyStore,
   resolveRowRenderKeysById,
@@ -29,8 +28,10 @@ import {
   ɵdeduplicateMessages,
   ɵcreateMessageViewModel,
   ɵduplicateMessagesWarning,
+  ɵgetCustomMessageRenderProps,
   ɵgetToolCallRendererNames,
   ɵresolveActivityRenderer,
+  ɵresolveAgentId,
   ɵresolveCustomMessageRenderers,
 } from "@copilotkit/core";
 import type {
@@ -156,8 +157,8 @@ const stateTick = ref(0);
 const interruptState = ref<InterruptSlotProps | null>(null);
 const componentSlots = useSlots() as Record<string, (props?: any) => unknown>;
 const forwardedSlotNames = computed(() => Object.keys(componentSlots));
-const resolvedAgentId = computed(
-  () => config.value?.agentId ?? DEFAULT_AGENT_ID,
+const resolvedAgentId = computed(() =>
+  ɵresolveAgentId({ chatAgentId: config.value?.agentId }),
 );
 const resolvedThreadAgent = computed(() => {
   // Read the registry so this recomputes when agents are added or replaced.
@@ -343,71 +344,20 @@ watch(
   { immediate: true },
 );
 
-function getMeta(
-  message: Message,
-): Omit<MessageMetaProps, "position" | "message"> {
-  stateTick.value += 0;
-  const agentId = resolvedAgentId.value;
-  const threadId = config.value?.threadId ?? "";
-  const core = copilotkit.value;
-
-  const resolvedRunId =
-    core.getRunIdForMessage(agentId, threadId, message.id) ??
-    core.getRunIdsForThread(agentId, threadId).slice(-1)[0];
-  const runId = resolvedRunId ?? `missing-run-id:${message.id}`;
-
-  const agent = resolvedThreadAgent.value ?? core.getAgent(agentId);
-
-  const messageIdsInRun =
-    resolvedRunId && agent
-      ? agent.messages
-          .filter(
-            (msg) =>
-              core.getRunIdForMessage(agentId, threadId, msg.id) ===
-              resolvedRunId,
-          )
-          .map((msg) => msg.id)
-      : [message.id];
-
-  const rawMessageIndex = agent
-    ? agent.messages.findIndex((msg) => msg.id === message.id)
-    : -1;
-  const messageIndex = rawMessageIndex >= 0 ? rawMessageIndex : 0;
-  const messageIndexInRun = resolvedRunId
-    ? Math.max(messageIdsInRun.indexOf(message.id), 0)
-    : 0;
-  const numberOfMessagesInRun = resolvedRunId ? messageIdsInRun.length : 1;
-
-  // `getStateByRun` deep-clones the whole run state, so resolve it only when
-  // a consumer reads `stateSnapshot`, and at most once per meta object.
-  let stateSnapshot: unknown;
-  let stateSnapshotResolved = false;
-
-  return {
-    runId,
-    messageIndex,
-    messageIndexInRun,
-    numberOfMessagesInRun,
-    agentId,
-    get stateSnapshot() {
-      if (!stateSnapshotResolved) {
-        stateSnapshotResolved = true;
-        stateSnapshot = resolvedRunId
-          ? core.getStateByRun(agentId, threadId, resolvedRunId)
-          : undefined;
-      }
-      return stateSnapshot;
-    },
-  };
-}
-
-// `Object.assign` onto the meta object keeps the lazy `stateSnapshot` getter.
-// A spread would call it.
+// Core builds the props with a lazy `stateSnapshot` getter, so slots that
+// never read it do not clone the run state.
 function getMessageSlotProps(
   message: Message,
   position: MessageMetaProps["position"],
 ): MessageMetaProps {
-  return Object.assign(getMeta(message), { message, position });
+  stateTick.value += 0;
+  return ɵgetCustomMessageRenderProps(copilotkit.value, {
+    agentId: resolvedAgentId.value,
+    threadId: config.value?.threadId ?? "",
+    agent: resolvedThreadAgent.value,
+    message,
+    position,
+  });
 }
 
 // Calls a `#message-before` / `#message-after` slot with the meta object

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

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
 import type { Message, ReasoningMessage } from "@ag-ui/core";
 import { IconChevronRight } from "../icons";
 import StreamingMarkdownDefault from "./StreamingMarkdownDefault.vue";
-import { ɵformatLabel, ɵformatReasoningDurationLabel } from "@copilotkit/core";
+import {
+  ɵgetReasoningHeaderLabel,
+  ɵReasoningDisclosure,
+} from "@copilotkit/core";
 import { useChatLabels } from "./use-chat-labels";
 
 const props = withDefaults(
@@ -78,66 +81,36 @@ const isLatest = computed(
 );
 const isStreaming = computed(() => !!(props.isRunning && isLatest.value));
 
-const elapsed = ref(0);
-const isOpen = ref(isStreaming.value);
-const userToggledDuringStreaming = ref(false);
-let startTimeMs: number | null = null;
-let elapsedInterval: ReturnType<typeof setInterval> | null = null;
-
-function clearElapsedInterval() {
-  if (elapsedInterval) {
-    clearInterval(elapsedInterval);
-    elapsedInterval = null;
-  }
-}
-
-function updateElapsedNow() {
-  if (startTimeMs !== null) {
-    elapsed.value = (Date.now() - startTimeMs) / 1000;
-  }
-}
-
-watch(
-  isStreaming,
-  (nextIsStreaming) => {
-    if (nextIsStreaming) {
-      if (startTimeMs === null) {
-        startTimeMs = Date.now();
-      }
-      clearElapsedInterval();
-      elapsedInterval = setInterval(updateElapsedNow, 1000);
-      userToggledDuringStreaming.value = false;
-      isOpen.value = true;
-      return;
-    }
-
-    clearElapsedInterval();
-    updateElapsedNow();
-    if (!userToggledDuringStreaming.value) {
-      isOpen.value = false;
-    }
-  },
-  { immediate: true },
-);
-
+// Open while streaming, auto-collapse when it ends unless the user toggled,
+// and the elapsed time: see core's ɵReasoningDisclosure.
+const disclosure = new ɵReasoningDisclosure({ isStreaming: isStreaming.value });
+const disclosureState = shallowRef(disclosure.getSnapshot());
+const unsubscribe = disclosure.subscribe(() => {
+  disclosureState.value = disclosure.getSnapshot();
+});
+watch(isStreaming, (next) => disclosure.setStreaming(next), {
+  immediate: true,
+});
 onBeforeUnmount(() => {
-  clearElapsedInterval();
+  unsubscribe();
+  disclosure.dispose();
 });
 
+const elapsed = computed(() => disclosureState.value.elapsedSeconds);
+const isOpen = computed(() => disclosureState.value.isOpen);
+
 const labels = useChatLabels();
 /** `labels.reasoningMessageThinkingLabel` while streaming, then "Thought for …". */
 const label = computed(() =>
-  isStreaming.value
-    ? labels.value.reasoningMessageThinkingLabel
-    : ɵformatLabel(labels.value.reasoningMessageThoughtForLabel, {
-        duration: ɵformatReasoningDurationLabel(elapsed.value, labels.value),
-      }),
+  ɵgetReasoningHeaderLabel(
+    { isStreaming: isStreaming.value, elapsedSeconds: elapsed.value },
+    labels.value,
+  ),
 );
 
 function toggleOpen() {
   if (!hasContent.value) return;
-  userToggledDuringStreaming.value = true;
-  isOpen.value = !isOpen.value;
+  disclosure.toggle();
 }
 </script>
 

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

@@ -1,20 +1,14 @@
 <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 {
+  ɵcreateStickToBottom,
   ɵgetChatViewState,
-  ɵisScrolledToBottom,
+  ɵisContentScrolledToBottom,
   ɵnormalizeAutoScroll,
+  ɵwatchElementHeight,
 } from "@copilotkit/core";
-import type { Suggestion } from "@copilotkit/core";
+import type { Suggestion, ɵStickToBottom } from "@copilotkit/core";
 import type { Attachment } from "@copilotkit/shared";
 import { useChatLabels } from "./use-chat-labels";
 import { useKeyboardHeight } from "../../hooks/use-keyboard-height";
@@ -138,6 +132,9 @@ 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 ?? "");
 
@@ -212,126 +209,111 @@ const messagePaddingBottom = computed(
   () => `${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;
-  }
-
-  isAtBottom.value = ɵisScrolledToBottom(element);
-}
-
-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) {
@@ -416,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>
@@ -583,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/CopilotPopupViewInternal.vue

@@ -1,16 +1,10 @@
 <script setup lang="ts">
+import { computed, onBeforeUnmount, ref, useAttrs, watch } from "vue";
 import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  useAttrs,
-  watch,
-} from "vue";
-import {
-  ɵPOPUP_ANIMATION_MS,
+  ɵPOPUP_DEFAULT_HEIGHT,
+  ɵPOPUP_DEFAULT_WIDTH,
   ɵbindPopupDismiss,
+  ɵcreateExitPresence,
   ɵdimensionToCss,
 } from "@copilotkit/core";
 import { CopilotChatDefaultLabels } from "../../providers/types";
@@ -35,10 +29,6 @@ import type {
 
 defineOptions({ inheritAttrs: false });
 
-const DEFAULT_POPUP_WIDTH = 420;
-const DEFAULT_POPUP_HEIGHT = 560;
-const POPUP_ANIMATION_MS = ɵPOPUP_ANIMATION_MS;
-
 const props = withDefaults(
   defineProps<Omit<CopilotPopupViewProps, "defaultOpen">>(),
   {
@@ -102,11 +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;
-
 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(() =>
@@ -119,11 +117,11 @@ const popupStyle = computed(
     ({
       "--copilot-popup-width": ɵdimensionToCss(
         props.width,
-        DEFAULT_POPUP_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)",
@@ -212,34 +210,6 @@ 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 },
-);
-
 // Escape, a click outside (when enabled), and focus once the popup opens.
 watch(
   [isPopupOpen, () => props.clickOutsideToClose],
@@ -257,16 +227,6 @@ watch(
   },
   { immediate: true },
 );
-
-onMounted(async () => {
-  await nextTick();
-});
-
-onBeforeUnmount(() => {
-  if (animationTimer) {
-    clearTimeout(animationTimer);
-  }
-});
 </script>
 
 <template>