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

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

@@ -9,10 +9,14 @@ import {
   watch,
 } from "vue";
 import type { Message } from "@ag-ui/core";
+import {
+  ɵgetChatViewState,
+  ɵisScrolledToBottom,
+  ɵnormalizeAutoScroll,
+} from "@copilotkit/core";
 import type { Suggestion } 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 +24,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 +34,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 +129,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);
@@ -142,8 +143,8 @@ 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 +170,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,18 +204,12 @@ 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,
@@ -302,9 +307,7 @@ function updateIsAtBottom() {
     return;
   }
 
-  const distance =
-    element.scrollHeight - element.scrollTop - element.clientHeight;
-  isAtBottom.value = distance <= SCROLL_BOTTOM_THRESHOLD;
+  isAtBottom.value = ɵisScrolledToBottom(element);
 }
 
 function syncInputContainerHeight() {
@@ -457,7 +460,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

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>

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>