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

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,
@@ -10,11 +20,25 @@ import type {
   UserMessage,
 } from "@ag-ui/core";
 import {
-  DEFAULT_AGENT_ID,
   commitRowKeyStore,
   createRowKeyStore,
   resolveRowRenderKeysById,
 } from "@copilotkit/shared";
+import {
+  ɵdeduplicateMessages,
+  ɵcreateMessageViewModel,
+  ɵduplicateMessagesWarning,
+  ɵgetCustomMessageRenderProps,
+  ɵgetToolCallRendererNames,
+  ɵresolveActivityRenderer,
+  ɵresolveAgentId,
+  ɵresolveCustomMessageRenderers,
+} from "@copilotkit/core";
+import type {
+  CopilotChatToolCallDisplay,
+  ToolCallEntry,
+  ɵToolCallDisplayContextValue,
+} from "@copilotkit/core";
 import type {
   InterruptRenderProps,
   VueCustomMessageRendererProps,
@@ -33,18 +57,6 @@ import {
 } from "./message-feedback";
 import type { MessageFeedbackScope } from "./message-feedback";
 import { ToolCallDisplayContextKey } from "./tool-call-display-context";
-import type { ToolCallDisplayContextValue } from "./tool-call-display-context";
-import {
-  getToolCallLayouts,
-  getToolCallRendererNames,
-  getTurnWork,
-} from "./tool-call-layout";
-import type {
-  CopilotChatToolCallDisplay,
-  ToolCallEntry,
-  ToolCallLayout,
-  TurnWork,
-} from "./tool-call-layout";
 import type { CopilotChatWorkSummarySlotProps } from "./types";
 
 interface MessageMetaProps {
@@ -145,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.
@@ -203,49 +215,37 @@ watch(
   { immediate: true },
 );
 
-function deduplicateMessages(messages: Message[]): Message[] {
-  const byId = new Map<string, Message>();
-  for (const message of messages) {
-    const existing = byId.get(message.id);
-    if (
-      existing &&
-      message.role === "assistant" &&
-      existing.role === "assistant"
-    ) {
-      const content = message.content || existing.content;
-      const toolCalls = message.toolCalls ?? existing.toolCalls;
-      byId.set(message.id, {
-        ...existing,
-        ...message,
-        content,
-        toolCalls,
-      } as AssistantMessage);
-    } else {
-      byId.set(message.id, message);
-    }
-  }
-  return [...byId.values()];
-}
-
 const deduplicatedMessages = computed(() =>
-  deduplicateMessages(props.messages),
+  ɵdeduplicateMessages(props.messages),
 );
 
 // 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,
-          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,
@@ -263,98 +263,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(() => {
-  const rendered = deduplicatedMessages.value;
-  for (let i = rendered.length - 1; i >= 0; i--) {
-    if (rendered[i]!.role === "user") return rendered[i]!.id;
-  }
-  return "start";
-});
-const isWorkingOn = (turnKey: string) =>
-  props.isRunning && turnKey === latestTurnKey.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 isWorkOpen = (turnKey: string) =>
-  toggledTurns.value.get(turnKey) ?? isWorkingOn(turnKey);
-
-// How long the agent worked, for "Worked for 9s": the sum of its runs on the
-// reply, so waiting between them (say, for an approval) doesn't count. 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,
-  { elapsedMs: number; workingSince?: number }
->();
-const workTimesVersion = ref(0);
-watch(
-  [
-    () => props.toolCallDisplay,
-    () => props.isRunning,
-    latestTurnKey,
-    () => lastRenderedMessage.value?.role,
-  ],
-  ([display, isRunning, turnKey, lastRole]) => {
-    if (display !== "turn") return;
-    const now = Date.now();
-    if (isRunning) {
-      const times = workTimes.get(turnKey);
-      if (times) times.workingSince ??= now;
-      else if (lastRole === "user")
-        workTimes.set(turnKey, { elapsedMs: 0, workingSince: now });
-    } else {
-      for (const times of workTimes.values()) {
-        if (times.workingSince === undefined) continue;
-        times.elapsedMs += now - times.workingSince;
-        times.workingSince = undefined;
-      }
-    }
-    workTimesVersion.value++;
-  },
-  { immediate: true },
-);
-
-// Whether each working-phase message's work shows. Text that ends the reply
-// stays out even when its message also calls a tool: it's the answer.
-const workOpenState = computed(() => {
-  const open = new Map<string, boolean>();
-  const textOpen = new Map<string, boolean>();
-  for (const turn of turnWork.value?.values() ?? []) {
-    const turnOpen = isWorkOpen(turn.key);
-    for (const id of turn.workMessageIds) {
-      open.set(id, turnOpen);
-      if (id !== turn.replyTextMessageId) textOpen.set(id, turnOpen);
-    }
-  }
-  return { workOpen: open, workTextOpen: textOpen };
-});
+const latestTurnKey = computed(() => viewState.value.latestTurnKey);
 
 provide(
   ToolCallDisplayContextKey,
-  computed<ToolCallDisplayContextValue>(() => ({
+  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,
   })),
 );
 
@@ -363,10 +283,10 @@ const WorkSummaryRow: FunctionalComponent<{
   turnKey: string;
   calls: ToolCallEntry[];
 }> = ({ turnKey, calls }) => {
-  void workTimesVersion.value;
-  const isWorking = isWorkingOn(turnKey);
-  const isOpen = isWorkOpen(turnKey);
-  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,
@@ -374,7 +294,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"];
@@ -411,103 +331,33 @@ 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 },
 );
 
-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
@@ -534,21 +384,12 @@ function resolveCustomMessageRenderer(
     return null;
   }
 
-  const agentId = resolvedAgentId.value;
-  const renderers = [...copilotkit.value.renderCustomMessages]
-    .filter(
-      (renderer) =>
-        renderer.agentId === undefined || renderer.agentId === agentId,
-    )
-    .sort((a, b) => {
-      const aHasAgent = a.agentId !== undefined;
-      const bHasAgent = b.agentId !== undefined;
-      if (aHasAgent === bHasAgent) return 0;
-      return aHasAgent ? -1 : 1;
-    });
-
-  const selected = renderers[0];
-  if (!selected?.render) {
+  // Try each renderer in order and use the first that has something to draw.
+  const selected = ɵresolveCustomMessageRenderers(
+    copilotkit.value.renderCustomMessages,
+    resolvedAgentId.value,
+  ).find((renderer) => renderer.render);
+  if (!selected) {
     return null;
   }
 
@@ -563,45 +404,26 @@ function resolveActivityRenderer(
 ): { renderer: Component; props: ActivitySlotProps } | null {
   stateTick.value += 0;
 
-  const agentId = resolvedAgentId.value;
-  const renderer = [...copilotkit.value.renderActivityMessages]
-    .filter(
-      (entry) =>
-        entry.activityType === message.activityType &&
-        (entry.agentId === undefined || entry.agentId === agentId),
-    )
-    .sort((a, b) => {
-      const aScoped = a.agentId !== undefined;
-      const bScoped = b.agentId !== undefined;
-      if (aScoped === bScoped) return 0;
-      return aScoped ? -1 : 1;
-    })[0];
-
-  if (!renderer) return null;
-  const parsed = renderer.content.safeParse(message.content);
-  if (!parsed.success) return null;
+  const match = ɵresolveActivityRenderer(
+    copilotkit.value.renderActivityMessages,
+    {
+      activityType: message.activityType,
+      agentId: resolvedAgentId.value,
+      content: message.content,
+    },
+  );
+  if (!match) return null;
 
   return {
-    renderer: renderer.render as Component,
+    renderer: match.renderer.render as Component,
     props: {
       activityType: message.activityType,
-      content: parsed.data,
+      content: match.content,
       message,
       agent: resolvedThreadAgent.value,
     },
   };
 }
-
-function resolveToolMessage(
-  message: Message,
-  toolCallId: string,
-): ToolMessage | undefined {
-  return props.messages.find(
-    (candidate) =>
-      candidate.role === "tool" &&
-      (candidate as ToolMessage).toolCallId === toolCallId,
-  ) as ToolMessage | undefined;
-}
 </script>
 
 <template>
@@ -675,7 +497,7 @@ function resolveToolMessage(
         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/CopilotChatReasoningMessage.vue

@@ -1,10 +1,13 @@
 <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 { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
-import { CopilotChatDefaultLabels } from "../../providers/types";
+import {
+  ɵgetReasoningHeaderLabel,
+  ɵReasoningDisclosure,
+} from "@copilotkit/core";
+import { useChatLabels } from "./use-chat-labels";
 
 const props = withDefaults(
   defineProps<{
@@ -69,15 +72,6 @@ defineSlots<{
   }) => unknown;
 }>();
 
-function formatDuration(seconds: number): string {
-  if (seconds < 1) return "a few seconds";
-  if (seconds < 60) return `${Math.round(seconds)} seconds`;
-  const mins = Math.floor(seconds / 60);
-  const secs = Math.round(seconds % 60);
-  if (secs === 0) return `${mins} minute${mins > 1 ? "s" : ""}`;
-  return `${mins}m ${secs}s`;
-}
-
 const normalizedContent = computed(() =>
   typeof props.message.content === "string" ? props.message.content : "",
 );
@@ -87,65 +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 config = useCopilotChatConfiguration();
+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
-    ? (config.value?.labels ?? CopilotChatDefaultLabels)
-        .reasoningMessageThinkingLabel
-    : `Thought for ${formatDuration(elapsed.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>