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

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

@@ -20,6 +20,11 @@ import type {
 import CopilotTooltip from "../ui/CopilotTooltip.vue";
 import { useCopilotId } from "../ui/use-id";
 import { hideInspectorShortcuts } from "./inspector-shortcuts";
+import {
+  ɵHoverMenuController,
+  ɵinspectorKiteFill,
+  ɵinspectorKiteIcon,
+} from "@copilotkit/core";
 
 defineOptions({ inheritAttrs: false });
 
@@ -37,32 +42,20 @@ const menuId = useCopilotId("cpk-inspector-menu");
 const triggerId = useCopilotId("cpk-inspector-button");
 const kiteId = useCopilotId("cpk-inspector-kite");
 const trigger = shallowRef<HTMLButtonElement | null>(null);
-const open = ref(false);
-const dark = ref(false);
 const initialFocus = ref<"first" | "none">("none");
-let closeTimer: ReturnType<typeof setTimeout> | null = null;
-// Hover opens it without moving focus, and leaving closes it again.
-let openedByHover = false;
-
-const cancelClose = () => {
-  if (closeTimer !== null) clearTimeout(closeTimer);
-  closeTimer = null;
-};
-onBeforeUnmount(cancelClose);
-
-const changeOpen = (next: boolean) => {
-  cancelClose();
-  if (next) dark.value = !!trigger.value?.closest(".dark");
-  open.value = next;
-};
-
-const scheduleClose = () => {
-  cancelClose();
-  closeTimer = setTimeout(() => {
-    // Keep the panel available while the keyboard is interacting with it.
-    if (openedByHover) open.value = false;
-  }, 180);
-};
+const menu = new ɵHoverMenuController();
+const menuState = shallowRef(menu.getSnapshot());
+const unsubscribeMenu = menu.subscribe(() => {
+  menuState.value = menu.getSnapshot();
+});
+onBeforeUnmount(() => {
+  unsubscribeMenu();
+  menu.dispose();
+});
+const open = computed(() => menuState.value.open);
+const dark = computed(() => menuState.value.dark);
+const { cancelClose, scheduleClose, keyboardUsed } = menu;
+const changeOpen = (next: boolean) => menu.setOpen(next, trigger.value);
 
 const items = computed<CopilotDropdownMenuEntry[]>(() => [
   {
@@ -82,9 +75,8 @@ const isInspectItem = (item: CopilotDropdownMenuItem) =>
 
 function onPointerEnter(event: PointerEvent) {
   if (props.disabled || event.pointerType === "touch") return;
-  openedByHover = true;
   initialFocus.value = "none";
-  changeOpen(true);
+  menu.pointerEnter({ pointerType: event.pointerType, trigger: trigger.value });
 }
 
 function onClick() {
@@ -93,7 +85,7 @@ function onClick() {
 }
 
 function onKeyDown(event: KeyboardEvent) {
-  openedByHover = false;
+  keyboardUsed();
   if (event.key === "Enter" || event.key === " ") {
     // Enter and Space inspect, as a click does, instead of opening the menu.
     event.preventDefault();
@@ -103,7 +95,7 @@ function onKeyDown(event: KeyboardEvent) {
     initialFocus.value = "first";
     if (open.value) {
       // Open already from hover: move into it.
-      open.value = false;
+      changeOpen(false);
       queueMicrotask(() => changeOpen(true));
     } else {
       changeOpen(true);
@@ -112,14 +104,14 @@ function onKeyDown(event: KeyboardEvent) {
 }
 
 function onSelect(item: CopilotDropdownMenuItem) {
-  const returnFocus = !openedByHover;
+  const returnFocus = !menu.openedByHover;
   changeOpen(false);
   item.action?.();
   if (returnFocus && !isInspectItem(item)) trigger.value?.focus();
 }
 
 function onDismiss(reason: CopilotDropdownMenuDismissReason) {
-  const returnFocus = !openedByHover && reason !== "outside";
+  const returnFocus = !menu.openedByHover && reason !== "outside";
   changeOpen(false);
   if (returnFocus) trigger.value?.focus();
 }
@@ -178,7 +170,7 @@ const descriptionFor = (item: CopilotDropdownMenuItem) =>
     @dismiss="onDismiss"
     @pointer-enter="cancelClose"
     @pointer-leave="scheduleClose"
-    @keydown="openedByHover = false"
+    @keydown="keyboardUsed"
   >
     <template #header>
       <div
@@ -226,90 +218,35 @@ const descriptionFor = (item: CopilotDropdownMenuItem) =>
         v-if="isInspectItem(item)"
         aria-hidden="true"
         class="cpk-inspector-button-kite-icon cpk-inspector-button-menu-item-icon"
-        viewBox="4.57 3.36 17.8 17.8"
+        :viewBox="ɵinspectorKiteIcon.viewBox"
         fill="none"
       >
         <path
-          d="M6.36084 10.9855C8.34277 8.393 9.98843 5.82939 10.6204 3.75914C10.6382 3.70281 10.7043 3.67888 10.7534 3.7114C12.9536 5.16894 16.9635 6.12833 20.5086 6.15085C20.5703 6.15124 20.6124 6.2114 20.5895 6.26829C19.4109 9.25938 17.9705 14.6189 17.9148 20.7392C17.9148 20.8301 17.7873 20.8627 17.7419 20.7837C15.7236 17.2522 9.26021 12.2898 6.39414 11.1186C6.34112 11.0968 6.32556 11.0313 6.36084 10.9855Z"
-          :fill="`url(#${kiteId}-paint0_linear)`"
-        />
-        <path
-          d="M13.0475 9.39974C9.95016 10.3806 7.11935 10.9259 6.44331 11.0498C6.40027 11.0577 6.39115 11.1172 6.43152 11.134C9.3203 12.3347 15.7516 17.2826 17.7511 20.7998C17.7551 20.8075 17.7647 20.8103 17.7728 20.8068C17.7809 20.803 17.7853 20.793 17.7819 20.7844L13.0475 9.39974Z"
-          :fill="`url(#${kiteId}-paint1_linear)`"
-        />
-        <path
-          d="M10.762 3.705C13.4137 5.15161 16.4787 5.80132 20.545 6.14367C20.5703 6.14585 20.5787 6.18008 20.5557 6.19197C20.0359 6.45923 17.0574 7.97512 14.8455 8.78701C14.2524 9.00453 13.6564 9.20632 13.0692 9.39249C13.0562 9.39656 13.0419 9.39015 13.0369 9.37774L10.7005 3.75979C10.6849 3.72196 10.7257 3.68538 10.762 3.705Z"
-          :fill="`url(#${kiteId}-paint2_linear)`"
-        />
-        <path
-          d="M10.7145 3.79041L17.8305 20.7659"
-          stroke="#513C9F"
-          stroke-width="0.17284"
-          stroke-linecap="round"
-        />
-        <path
-          d="M6.44531 11.0476C6.44531 11.0476 10.375 10.3422 14.0686 9.06804C17.7623 7.7939 20.5122 6.23373 20.5122 6.23373"
-          stroke="#513C9F"
-          stroke-width="0.17284"
-          stroke-linecap="round"
-        />
-        <path
-          d="M11.6914 5.93518L9.05534 14.7068M9.05534 14.7068H15.3203M9.05534 14.7068L0.15625 26.3646"
-          stroke="#ABABAB"
-          stroke-width="0.302474"
-          stroke-linecap="round"
-        />
-        <path
-          d="M6.02539 23.9646L4.85806 24.1287C5.46272 25.7287 6.70381 26.4276 8.18528 26.4276C11.8147 26.4276 10.707 22.3227 12.8103 22.3227C14.3358 22.3227 13.7155 25.6498 16.9992 25.6498C19.0029 25.6498 19.2028 23.631 18.8607 22.7625C18.8589 22.7572 18.8568 22.7524 18.8538 22.7476L18.3166 21.9253C18.2817 21.8706 18.1968 21.8912 18.1907 21.9562L18.0908 22.9529C18.0838 23.0222 18.0857 23.0913 18.0936 23.1605C18.1764 23.8491 18.2291 25.5202 16.9992 25.5202C15.7015 25.5202 15.3895 22.2362 12.8103 22.2362C9.78393 22.2362 10.1726 26.298 8.31487 26.298C7.08938 26.298 6.15447 24.9153 6.02539 23.9646Z"
-          :fill="`url(#${kiteId}-paint3_linear)`"
+          v-for="path in ɵinspectorKiteIcon.paths"
+          :key="path.d"
+          :d="path.d"
+          :fill="ɵinspectorKiteFill(kiteId, path)"
+          :stroke="path.stroke"
+          :stroke-width="path.strokeWidth"
+          :stroke-linecap="path.strokeLinecap"
         />
         <defs>
           <linearGradient
-            :id="`${kiteId}-paint0_linear`"
-            x1="15.5372"
-            y1="5.0278"
-            x2="12.0802"
-            y2="14.534"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stop-color="#6430AB" />
-            <stop offset="1" stop-color="#AA89D8" />
-          </linearGradient>
-          <linearGradient
-            :id="`${kiteId}-paint1_linear`"
-            x1="12.8583"
-            y1="10.3858"
-            x2="8.40764"
-            y2="18.9846"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stop-color="#005DBB" />
-            <stop offset="1" stop-color="#3D92E8" />
-          </linearGradient>
-          <linearGradient
-            :id="`${kiteId}-paint2_linear`"
-            x1="14.8452"
-            y1="5.02774"
-            x2="13.5047"
-            y2="9.21911"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stop-color="#1B70C4" />
-            <stop offset="1" stop-color="#54A4F2" />
-          </linearGradient>
-          <linearGradient
-            :id="`${kiteId}-paint3_linear`"
-            x1="4.85806"
-            y1="24.2455"
-            x2="18.9963"
-            y2="24.2455"
+            v-for="gradient in ɵinspectorKiteIcon.gradients"
+            :id="`${kiteId}-${gradient.id}`"
+            :key="gradient.id"
+            :x1="gradient.x1"
+            :y1="gradient.y1"
+            :x2="gradient.x2"
+            :y2="gradient.y2"
             gradientUnits="userSpaceOnUse"
           >
-            <stop stop-color="#4497EA" />
-            <stop offset="0.254755" stop-color="#1463B2" />
-            <stop offset="0.498725" stop-color="#0A437D" />
-            <stop offset="0.666667" stop-color="#2476C8" />
-            <stop offset="0.972542" stop-color="#0C549A" />
+            <stop
+              v-for="stop in gradient.stops"
+              :key="`${stop.offset ?? '0'}-${stop.color}`"
+              :offset="stop.offset"
+              :stop-color="stop.color"
+            />
           </linearGradient>
         </defs>
       </svg>

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

@@ -9,6 +9,7 @@
  * the element that opened it (or `returnFocusTo`) when it closes.
  */
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
+import { ɵbindDialogFocus } from "@copilotkit/core";
 import { IconX } from "../icons";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import { CopilotChatDefaultLabels } from "../../providers/types";
@@ -29,49 +30,28 @@ const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
 
 const root = ref<HTMLElement | null>(null);
 const closeButton = ref<HTMLButtonElement | null>(null);
-let previouslyFocused: HTMLElement | null = null;
-
-const FOCUSABLE =
-  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), audio[controls], video[controls], iframe, [tabindex]:not([tabindex="-1"])';
+let releaseFocus: (() => void) | undefined;
 
 function handleKeydown(event: KeyboardEvent) {
   if (event.key === "Escape") emit("close");
 }
 
-/** Keeps Tab inside the lightbox while it is open. */
-function handleTab(event: KeyboardEvent) {
-  if (event.key !== "Tab" || !root.value) return;
-  const focusables = Array.from(
-    root.value.querySelectorAll<HTMLElement>(FOCUSABLE),
-  );
-  const first = focusables[0];
-  const last = focusables[focusables.length - 1];
-  if (!first || !last) return;
-  const active = document.activeElement;
-  if (event.shiftKey && (active === first || !root.value.contains(active))) {
-    event.preventDefault();
-    last.focus();
-  } else if (!event.shiftKey && active === last) {
-    event.preventDefault();
-    first.focus();
-  }
-}
-
 onMounted(() => {
   if (typeof document === "undefined") return;
-  previouslyFocused =
-    document.activeElement instanceof HTMLElement
-      ? document.activeElement
-      : null;
   document.addEventListener("keydown", handleKeydown);
-  void nextTick(() => closeButton.value?.focus());
+  void nextTick(() => {
+    if (!root.value) return;
+    releaseFocus = ɵbindDialogFocus(root.value, {
+      initialFocus: closeButton.value,
+      returnFocusTo: props.returnFocusTo,
+    });
+  });
 });
 
 onBeforeUnmount(() => {
   if (typeof document === "undefined") return;
   document.removeEventListener("keydown", handleKeydown);
-  const target = props.returnFocusTo ?? previouslyFocused;
-  if (target?.isConnected) target.focus();
+  releaseFocus?.();
 });
 </script>
 
@@ -85,7 +65,6 @@ onBeforeUnmount(() => {
       :aria-label="label"
       data-testid="copilot-chat-attachment-lightbox"
       @click="emit('close')"
-      @keydown="handleTab"
     >
       <button
         ref="closeButton"

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,
@@ -15,6 +25,19 @@ import {
   createRowKeyStore,
   resolveRowRenderKeysById,
 } from "@copilotkit/shared";
+import {
+  ɵdeduplicateMessages,
+  ɵcreateMessageViewModel,
+  ɵduplicateMessagesWarning,
+  ɵgetToolCallRendererNames,
+  ɵresolveActivityRenderer,
+  ɵresolveCustomMessageRenderers,
+} from "@copilotkit/core";
+import type {
+  CopilotChatToolCallDisplay,
+  ToolCallEntry,
+  ɵToolCallDisplayContextValue,
+} from "@copilotkit/core";
 import type {
   InterruptRenderProps,
   VueCustomMessageRendererProps,
@@ -33,18 +56,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 {
@@ -203,49 +214,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 +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(() => {
-  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 +282,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 +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"];
@@ -411,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 },
 );
@@ -534,21 +434,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 +454,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 +547,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
         "
       >