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

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

@@ -1,5 +1,15 @@
 <script setup lang="ts">
-import { computed, h, onMounted, provide, ref, useSlots, watch } from "vue";
+import {
+  computed,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  ref,
+  shallowRef,
+  useSlots,
+  watch,
+} from "vue";
 import type { Component, FunctionalComponent, VNode, VNodeChild } from "vue";
 import type {
   ActivityMessage,
@@ -17,24 +27,16 @@ import {
 } from "@copilotkit/shared";
 import {
   ɵdeduplicateMessages,
-  ɵgetToolCallLayouts,
+  ɵcreateMessageViewModel,
+  ɵduplicateMessagesWarning,
   ɵgetToolCallRendererNames,
-  ɵgetTurnWork,
-  ɵgetWorkOpenState,
-  ɵisTurnWorkOpen,
-  ɵisTurnWorking,
-  ɵrecordWorkTime,
   ɵresolveActivityRenderer,
   ɵresolveCustomMessageRenderers,
-  ɵgetLatestTurnKey,
 } from "@copilotkit/core";
 import type {
   CopilotChatToolCallDisplay,
   ToolCallEntry,
   ɵToolCallDisplayContextValue,
-  ɵToolCallLayout,
-  ɵTurnWork,
-  ɵWorkTime,
 } from "@copilotkit/core";
 import type {
   InterruptRenderProps,
@@ -219,17 +221,30 @@ const deduplicatedMessages = computed(() =>
 // Groups of calls can span messages (an agent often sends each call as its
 // own message), so they're laid out here for the whole list and handed to
 // each message's tool calls view through provide/inject.
-const toolCallLayouts = computed<ReadonlyMap<string, ɵToolCallLayout>>(() =>
-  props.toolCallDisplay === "separate"
-    ? new Map()
-    : ɵgetToolCallLayouts(
-        deduplicatedMessages.value,
-        props.messages,
-        ɵgetToolCallRendererNames(copilotkit.value.renderToolCalls, {
-          slotNames: forwardedSlotNames.value,
-        }),
-      ),
+const rendererNames = computed(() =>
+  ɵgetToolCallRendererNames(copilotkit.value.renderToolCalls, {
+    slotNames: forwardedSlotNames.value,
+  }),
 );
+// The list's tool-call layout and turn state live in core. A user's open or
+// close of a reply's work is the only change it reports by itself.
+const viewModel = ɵcreateMessageViewModel();
+const toggledTurns = shallowRef(viewModel.getSnapshot());
+const unsubscribeViewModel = viewModel.subscribe(() => {
+  toggledTurns.value = viewModel.getSnapshot();
+});
+onBeforeUnmount(unsubscribeViewModel);
+const viewState = computed(() => {
+  void toggledTurns.value;
+  return viewModel.update({
+    display: props.toolCallDisplay,
+    messages: props.messages,
+    rendered: deduplicatedMessages.value,
+    isRunning: props.isRunning,
+    rendererNames: rendererNames.value,
+    now: Date.now(),
+  });
+});
 const learningFeedbackEnabled = useLearningFeedbackEnabled(copilotkit);
 provide(
   MessageFeedbackScopeKey,
@@ -247,74 +262,18 @@ provide(
   ),
 );
 
-const turnWork = computed(() =>
-  props.toolCallDisplay === "turn"
-    ? ɵgetTurnWork(deduplicatedMessages.value, toolCallLayouts.value)
-    : undefined,
-);
-const turnByFirstMessage = computed(() => {
-  const byFirst = new Map<string, ɵTurnWork>();
-  for (const turn of turnWork.value?.values() ?? []) {
-    byFirst.set(turn.firstMessageId, turn);
-  }
-  return byFirst;
-});
-
-const lastRenderedMessage = computed(
-  () => deduplicatedMessages.value[deduplicatedMessages.value.length - 1],
-);
+const turnByFirstMessage = computed(() => viewState.value.turnByFirstMessage);
 // The latest reply is keyed by the user message it answers (see getTurnWork).
-const latestTurnKey = computed(() =>
-  ɵgetLatestTurnKey(deduplicatedMessages.value),
-);
-
-// Work shows while the agent is on it and folds once the reply is done,
-// unless the user has opened or closed it themselves.
-const toggledTurns = ref<ReadonlyMap<string, boolean>>(new Map());
-const turnOpenState = computed(() => ({
-  toggledTurns: toggledTurns.value,
-  isRunning: props.isRunning,
-  latestTurnKey: latestTurnKey.value,
-}));
-
-// How long the agent worked, for "Worked for 9s". Only known for replies this
-// client watched start from the user's message; a restored thread shows the
-// tool count instead.
-const workTimes = new Map<string, ɵWorkTime>();
-const workTimesVersion = ref(0);
-watch(
-  [
-    () => props.toolCallDisplay,
-    () => props.isRunning,
-    latestTurnKey,
-    () => lastRenderedMessage.value?.role,
-  ],
-  ([display, isRunning, turnKey, lastRole]) => {
-    if (display !== "turn") return;
-    ɵrecordWorkTime(workTimes, {
-      isRunning,
-      latestTurnKey: turnKey,
-      lastMessageRole: lastRole,
-      now: Date.now(),
-    });
-    workTimesVersion.value++;
-  },
-  { immediate: true },
-);
-
-// Whether each working-phase message's work, and its text, shows.
-const workOpenState = computed(() =>
-  ɵgetWorkOpenState(turnWork.value?.values() ?? [], turnOpenState.value),
-);
+const latestTurnKey = computed(() => viewState.value.latestTurnKey);
 
 provide(
   ToolCallDisplayContextKey,
   computed<ɵToolCallDisplayContextValue>(() => ({
     display: props.toolCallDisplay,
     isRunning: props.isRunning,
-    layouts: toolCallLayouts.value,
-    workOpen: workOpenState.value.workOpen,
-    workTextOpen: workOpenState.value.workTextOpen,
+    layouts: viewState.value.layouts,
+    workOpen: viewState.value.workOpen,
+    workTextOpen: viewState.value.workTextOpen,
   })),
 );
 
@@ -323,10 +282,10 @@ const WorkSummaryRow: FunctionalComponent<{
   turnKey: string;
   calls: ToolCallEntry[];
 }> = ({ turnKey, calls }) => {
-  void workTimesVersion.value;
-  const isWorking = ɵisTurnWorking(turnKey, turnOpenState.value);
-  const isOpen = ɵisTurnWorkOpen(turnKey, turnOpenState.value);
-  const times = workTimes.get(turnKey);
+  void viewState.value;
+  const isWorking = viewModel.isTurnWorking(turnKey);
+  const isOpen = viewModel.isTurnOpen(turnKey);
+  const times = viewModel.getWorkTime(turnKey);
   const summaryProps: CopilotChatWorkSummarySlotProps = {
     isWorking,
     isOpen,
@@ -334,7 +293,7 @@ const WorkSummaryRow: FunctionalComponent<{
     elapsedMs: times?.elapsedMs,
     workingSince: times?.workingSince,
     onClick: () => {
-      toggledTurns.value = new Map(toggledTurns.value).set(turnKey, !isOpen);
+      viewModel.toggleTurn(turnKey);
     },
   };
   const slot = componentSlots["work-summary"];
@@ -371,34 +330,15 @@ watch(
   (messages) => commitRowKeyStore(rowKeyStore, messages),
   { flush: "post" },
 );
-const lastMessage = computed(() => props.messages[props.messages.length - 1]);
-// In the "turn" display the "Working" line at the top of the reply is the
-// progress indicator; before the reply's first message it sits where the
-// cursor would.
-const showCursor = computed(
-  () =>
-    props.isRunning &&
-    lastMessage.value?.role !== "reasoning" &&
-    props.toolCallDisplay !== "turn",
-);
-const pendingWorkSummary = computed(
-  () =>
-    props.toolCallDisplay === "turn" &&
-    props.isRunning &&
-    lastRenderedMessage.value?.role === "user",
-);
+const showCursor = computed(() => viewState.value.showCursor);
+const pendingWorkSummary = computed(() => viewState.value.pendingWorkSummary);
 
 watch(
   [() => props.messages.length, () => deduplicatedMessages.value.length],
   ([messageCount, deduplicatedCount]) => {
-    if (
-      process.env.NODE_ENV === "development" &&
-      deduplicatedCount < messageCount
-    ) {
-      console.warn(
-        `CopilotChatMessageView: Deduplicated ${messageCount - deduplicatedCount} message(s) with duplicate IDs.`,
-      );
-    }
+    if (process.env.NODE_ENV !== "development") return;
+    const warning = ɵduplicateMessagesWarning(messageCount, deduplicatedCount);
+    if (warning) console.warn(warning);
   },
   { immediate: true },
 );
@@ -607,7 +547,7 @@ function resolveActivityRenderer(
         v-else-if="message.role === 'reasoning'"
         :open="
           toolCallDisplay === 'turn'
-            ? (workOpenState.workOpen.get(message.id) ?? true)
+            ? (viewState.workOpen.get(message.id) ?? true)
             : undefined
         "
       >

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

@@ -13,11 +13,10 @@ import { computed, provide, ref } from "vue";
 import {
   ɵformatLabel,
   ɵformatToolNames,
-  ɵgetToolCallPreview,
-  ɵgetToolCallRowStatus,
+  ɵgetToolCallGroupState,
   ɵformatCountLabel,
 } from "@copilotkit/core";
-import type { ToolCallEntry, ɵToolCallRowStatus } from "@copilotkit/core";
+import type { ToolCallEntry } from "@copilotkit/core";
 import { useCopilotId } from "../ui/use-id";
 import { ToolCallGroupContextKey } from "./tool-call-display-context";
 import type { ToolCallGroupContextValue } from "./tool-call-display-context";
@@ -59,40 +58,15 @@ const toggle = () => {
   open.value = !open.value;
 };
 
-const latest = computed(() => props.calls[props.calls.length - 1]);
-// Only an active group has a call in progress. Between calls nothing is
-// running, so the latest call stays the subject (or the label flickers).
-const current = computed(() =>
-  props.isActive
-    ? (props.calls.find((call) => !call.toolMessage) ?? latest.value)
-    : undefined,
-);
-const preview = computed(() =>
-  current.value ? ɵgetToolCallPreview(current.value) : undefined,
-);
-const done = computed(
-  () => props.calls.filter((call) => call.toolMessage).length,
-);
-const statuses = computed(() =>
-  props.calls.map((call) => ɵgetToolCallRowStatus(call, props.isActive)),
-);
-const failedIds = computed(
-  () =>
-    new Set(
-      props.calls
-        .filter((_, index) => statuses.value[index] === "failed")
-        .map((call) => call.toolCall.id),
-    ),
-);
-const status = computed<ɵToolCallRowStatus>(() =>
-  current.value
-    ? "running"
-    : failedIds.value.size > 0
-      ? "failed"
-      : statuses.value.includes("stopped")
-        ? "stopped"
-        : "done",
+const state = computed(() =>
+  ɵgetToolCallGroupState(props.calls, props.isActive, open.value),
 );
+const latest = computed(() => state.value.latest);
+const current = computed(() => state.value.current);
+const preview = computed(() => state.value.preview);
+const done = computed(() => state.value.done);
+const failedIds = computed(() => state.value.failedIds);
+const status = computed(() => state.value.status);
 const single = computed(
   () =>
     props.appearance === "line" && props.calls.length === 1 && !current.value,
@@ -103,20 +77,15 @@ provide(
   computed<ToolCallGroupContextValue>(() => ({
     appearance: props.appearance,
     failedIds: failedIds.value,
+    statusById: state.value.statusById,
     active: props.isActive,
   })),
 );
 
 // Stack: a lone call is the top card of a stack with nothing behind it yet.
-const behind = computed(() =>
-  open.value ? 0 : Math.min(props.calls.length - 1, 2),
-);
-const latestStatus = computed(() =>
-  latest.value ? ɵgetToolCallRowStatus(latest.value, props.isActive) : "done",
-);
-const latestPreview = computed(() =>
-  latest.value ? ɵgetToolCallPreview(latest.value) : undefined,
-);
+const behind = computed(() => state.value.behind);
+const latestStatus = computed(() => state.value.latestStatus);
+const latestPreview = computed(() => state.value.latestPreview);
 const runningLabel = computed(() =>
   current.value
     ? ɵformatLabel(labels.value.toolCallRunningLabel, {

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import type { Message, ToolCall } from "@ag-ui/core";
-import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
-import { ɵresolveToolCallRenderer } from "@copilotkit/core";
+import {
+  ɵresolveToolCallAgentId,
+  ɵresolveToolCallRenderer,
+} from "@copilotkit/core";
 import { useCopilotKit } from "../../providers/useCopilotKit";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import type { CopilotChatToolCallRenderSlotProps } from "./types";
@@ -54,7 +56,7 @@ function getCoreProps() {
 }
 
 function getRenderConfig() {
-  const agentId = config.value?.agentId ?? DEFAULT_AGENT_ID;
+  const agentId = ɵresolveToolCallAgentId(config.value?.agentId, undefined);
   return ɵresolveToolCallRenderer(
     copilotkit.value.renderToolCalls,
     props.toolCall.function.name,
@@ -63,7 +65,7 @@ function getRenderConfig() {
 }
 
 function getMemoDeps() {
-  const agentId = config.value?.agentId ?? DEFAULT_AGENT_ID;
+  const agentId = ɵresolveToolCallAgentId(config.value?.agentId, undefined);
   return getToolCallMemoDeps(
     props.toolCall,
     props.messages,

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

@@ -4,8 +4,10 @@ import type { PropType } from "vue";
 import type { Slots, VNode } from "vue";
 import type { AssistantMessage, Message } from "@ag-ui/core";
 import {
+  ɵgetToolCallGroupState,
   ɵgetToolCallLayouts,
   ɵgetToolCallRendererNames,
+  ɵtoolCallAppearance,
 } from "@copilotkit/core";
 import type {
   CopilotChatToolCallDisplay,
@@ -13,7 +15,6 @@ import type {
 } from "@copilotkit/core";
 import { useCopilotKit } from "../../providers/useCopilotKit";
 import type {
-  CopilotChatToolCallGroupAppearance,
   CopilotChatToolCallRenderSlotProps,
   CopilotChatToolCallsGroupSlotProps,
 } from "./types";
@@ -54,14 +55,6 @@ defineSlots<{
 
 type ToolCallSlotName = "tool-call" | `tool-call-${string}`;
 
-const appearances: Partial<
-  Record<CopilotChatToolCallDisplay, CopilotChatToolCallGroupAppearance>
-> = {
-  grouped: "card",
-  line: "line",
-  stacked: "stack",
-};
-
 const componentSlots = useSlots() as Slots;
 const { copilotkit } = useCopilotKit();
 const context = inject(ToolCallDisplayContextKey, null);
@@ -101,7 +94,7 @@ const layout = computed(() => {
 const groupActive = (trailing: boolean) =>
   trailing && (context ? context.value.isRunning : true);
 
-const appearance = computed(() => appearances[display.value] ?? "card");
+const appearance = computed(() => ɵtoolCallAppearance(display.value) ?? "card");
 
 const workOpen = computed(() => context?.value.workOpen.get(props.message.id));
 
@@ -117,15 +110,19 @@ const TurnRows = defineComponent({
   setup(rowProps, { slots }) {
     provide(
       ToolCallGroupContextKey,
-      computed<ToolCallGroupContextValue>(() => ({
-        appearance: "line",
-        failedIds: new Set(
-          rowProps.calls
-            .filter((call) => call.toolMessage?.error)
-            .map((call) => call.toolCall.id),
-        ),
-        active: rowProps.active,
-      })),
+      computed<ToolCallGroupContextValue>(() => {
+        const { failedIds, statusById } = ɵgetToolCallGroupState(
+          rowProps.calls,
+          rowProps.active,
+          false,
+        );
+        return {
+          appearance: "line",
+          failedIds,
+          statusById,
+          active: rowProps.active,
+        };
+      }),
     );
     return () => slots.default?.();
   },

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

@@ -9,6 +9,11 @@ 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 { useChatLabels } from "./use-chat-labels";
@@ -19,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,
@@ -30,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,
@@ -140,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",
 );
@@ -167,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,
 );
@@ -191,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,
@@ -300,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() {