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

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>

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

@@ -13,8 +13,10 @@ import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfi
 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,
@@ -61,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: [];
@@ -385,42 +395,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

@@ -13,8 +13,10 @@ import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfi
 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 +61,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: [];
@@ -317,42 +327,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"
+            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/StreamingMarkdownDefault.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, h, watchEffect } from "vue";
-import { StreamingMarkdownRenderer } from "@copilotkit/markdown-renderer/vue";
-import type { VueStreamingMarkdownNodeRenderer } from "@copilotkit/markdown-renderer/vue";
-import { warnUnsupportedRichSyntaxOnce } from "@copilotkit/markdown-renderer";
-import type { StreamingMarkdownParserOptions } from "@copilotkit/markdown-renderer";
+import { StreamingMarkdownRenderer } from "@copilotkit/markdown/vue";
+import type { VueStreamingMarkdownNodeRenderer } from "@copilotkit/markdown/vue";
+import { warnUnsupportedRichSyntaxOnce } from "@copilotkit/markdown";
+import type { StreamingMarkdownParserOptions } from "@copilotkit/markdown";
 import type { DefaultMarkdownRendererProps } from "../../providers/markdown-renderer";
 
 const props = withDefaults(

package/src/v2/components/chat/__tests__/CopilotChat.labels.test.ts

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { defineComponent, nextTick, onMounted } from "vue";
 import { fireEvent, render, screen } from "@testing-library/vue";
-import type { Message, ReasoningMessage } from "@ag-ui/core";
+import type { ReasoningMessage } from "@ag-ui/core";
 import type { Attachment } from "@copilotkit/shared";
 import CopilotKitProvider from "../../../providers/CopilotKitProvider.vue";
 import CopilotChatConfigurationProvider from "../../../providers/CopilotChatConfigurationProvider.vue";
@@ -16,6 +16,8 @@ import { CopilotModalHeader, CopilotSidebarView } from "../index";
 // hard-coded English.
 const germanLabels: Partial<Record<keyof CopilotChatLabels, string>> = {
   reasoningMessageThinkingLabel: "Denkt nach…",
+  reasoningMessageThoughtForLabel: "Gedacht für {duration}",
+  reasoningMessageDurationFewSeconds: "ein paar Sekunden",
   chatInputSlashMenuLabel: "Befehle",
   chatInputSlashMenuEmptyText: "Keine Befehle gefunden",
   attachmentRemoveButtonLabel: "Anhang entfernen",
@@ -26,11 +28,11 @@ const germanLabels: Partial<Record<keyof CopilotChatLabels, string>> = {
   sidebarLabel: "Chat-Seitenleiste",
 };
 
-const reasoning = {
+const reasoning: ReasoningMessage = {
   id: "reasoning-1",
   role: "reasoning",
   content: "",
-} as ReasoningMessage;
+};
 
 const video: Attachment = {
   id: "clip",
@@ -66,7 +68,7 @@ function renderWithLabels(template: string) {
       return {
         labels: germanLabels,
         reasoning,
-        reasoningMessages: [reasoning] as Message[],
+        reasoningMessages: [reasoning],
         attachments: [video],
         toolsMenu: [{ label: "Say hi", action: vi.fn() }],
       };
@@ -112,6 +114,19 @@ describe("chat strings from labels", () => {
     expect(screen.queryByText("Thinking…")).toBeNull();
   });
 
+  it("uses the configured duration labels once the model is done", () => {
+    renderWithLabels(`
+      <CopilotChatReasoningMessage
+        :message="reasoning"
+        :messages="reasoningMessages"
+        :is-running="false"
+      />
+    `);
+
+    expect(screen.getByText("Gedacht für ein paar Sekunden")).toBeDefined();
+    expect(screen.queryByText(/Thought for/)).toBeNull();
+  });
+
   it("passes the elapsed reasoning time to a custom header", async () => {
     vi.useFakeTimers();
     renderWithLabels(`

package/src/v2/components/chat/__tests__/CopilotChatActivityRendering.e2e.test.ts

@@ -7,6 +7,7 @@ import {
 } from "@testing-library/vue";
 import { defineComponent, ref, toRaw } from "vue";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import type * as CoreModule from "@copilotkit/core";
 import type { AbstractAgent } from "@ag-ui/client";
 import { EventType } from "@ag-ui/client";
 import type { A2UITheme as Theme } from "../../../types";
@@ -160,11 +161,25 @@ vi.mock("phoenix", () => ({
   Socket: MockPhoenixSocket,
 }));
 
-vi.mock("@jetbrains/websandbox", () => ({
-  default: {
-    create: (...args: unknown[]) => mockWebsandboxCreate(...args),
-  },
-}));
+// Run the real core controller against a fake websandbox
+vi.mock("@copilotkit/core", async (importOriginal) => {
+  const actual = await importOriginal<typeof CoreModule>();
+  class TestOpenGenerativeUIController
+    extends actual.ɵOpenGenerativeUIController
+  {
+    constructor() {
+      super({
+        loadWebsandbox: async () => ({
+          create: (...args) => mockWebsandboxCreate(...args),
+        }),
+      });
+    }
+  }
+  return {
+    ...actual,
+    ɵOpenGenerativeUIController: TestOpenGenerativeUIController,
+  };
+});
 
 function jsonResponse(body: unknown, status = 200): Response {
   return {
@@ -667,13 +682,15 @@ describe("CopilotChat activity message rendering", () => {
 
     renderOpenGenerativeUIChat();
 
+    // The restored chat can remount the activity while it reconnects, so wait
+    // until exactly one sandbox, the restored one, is alive.
     await waitFor(() => {
-      expect(mockWebsandboxCreate).toHaveBeenCalledTimes(2);
+      const created = mockWebsandboxCreate.mock.calls.length;
+      expect(created).toBeGreaterThanOrEqual(2);
+      expect(mockWebsandboxDestroy).toHaveBeenCalledTimes(created - 1);
     });
-    expect(mockWebsandboxCreate.mock.calls[1]?.[1]).toMatchObject({
+    expect(mockWebsandboxCreate.mock.calls.at(-1)?.[1]).toMatchObject({
       frameContent: restoredHtml,
     });
-
-    expect(mockWebsandboxDestroy).toHaveBeenCalledTimes(1);
   });
 });

package/src/v2/components/chat/__tests__/CopilotChatAssistantMessage.learningFeedback.test.ts

@@ -10,12 +10,12 @@ import { useCopilotKit } from "../../../providers/useCopilotKit";
 import CopilotChatMessageView from "../CopilotChatMessageView.vue";
 import CopilotChatAssistantMessage from "../CopilotChatAssistantMessage.vue";
 import {
-  MESSAGE_FEEDBACK_EVENT_NAME,
-  getMessageFeedback,
-  setMessageFeedback,
+  ɵFEEDBACK_COMMENT_CLOSE_DELAY_MS as FEEDBACK_COMMENT_CLOSE_DELAY_MS,
+  ɵMESSAGE_FEEDBACK_EVENT_NAME as MESSAGE_FEEDBACK_EVENT_NAME,
+  ɵgetMessageFeedback as getMessageFeedback,
+  ɵsetMessageFeedback as setMessageFeedback,
   ɵresetMessageFeedbackCache,
-} from "../../../lib/message-feedback";
-import { FEEDBACK_COMMENT_CLOSE_DELAY_MS } from "../message-feedback";
+} from "@copilotkit/core";
 
 const THREAD_ID = "thread-1";
 const AGENT_ID = "agent-1";