@copilotkit/vue 2.0.0-rc.7 → 2.0.0-rc.9

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

@@ -15,6 +15,27 @@ import {
   createRowKeyStore,
   resolveRowRenderKeysById,
 } from "@copilotkit/shared";
+import {
+  ɵdeduplicateMessages,
+  ɵgetToolCallLayouts,
+  ɵ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,
   VueCustomMessageRendererProps,
@@ -33,18 +54,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,47 +212,22 @@ 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>>(() =>
+const toolCallLayouts = computed<ReadonlyMap<string, ɵToolCallLayout>>(() =>
   props.toolCallDisplay === "separate"
     ? new Map()
-    : getToolCallLayouts(
+    : ɵgetToolCallLayouts(
         deduplicatedMessages.value,
         props.messages,
-        getToolCallRendererNames(
-          copilotkit.value.renderToolCalls,
-          forwardedSlotNames.value,
-        ),
+        ɵgetToolCallRendererNames(copilotkit.value.renderToolCalls, {
+          slotNames: forwardedSlotNames.value,
+        }),
       ),
 );
 const learningFeedbackEnabled = useLearningFeedbackEnabled(copilotkit);
@@ -265,11 +249,11 @@ provide(
 
 const turnWork = computed(() =>
   props.toolCallDisplay === "turn"
-    ? getTurnWork(deduplicatedMessages.value, toolCallLayouts.value)
+    ? ɵgetTurnWork(deduplicatedMessages.value, toolCallLayouts.value)
     : undefined,
 );
 const turnByFirstMessage = computed(() => {
-  const byFirst = new Map<string, TurnWork>();
+  const byFirst = new Map<string, ɵTurnWork>();
   for (const turn of turnWork.value?.values() ?? []) {
     byFirst.set(turn.firstMessageId, turn);
   }
@@ -280,30 +264,23 @@ const lastRenderedMessage = computed(
   () => deduplicatedMessages.value[deduplicatedMessages.value.length - 1],
 );
 // 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;
+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 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 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(
   [
@@ -314,42 +291,25 @@ watch(
   ],
   ([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;
-      }
-    }
+    ɵrecordWorkTime(workTimes, {
+      isRunning,
+      latestTurnKey: turnKey,
+      lastMessageRole: lastRole,
+      now: Date.now(),
+    });
     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 };
-});
+// Whether each working-phase message's work, and its text, shows.
+const workOpenState = computed(() =>
+  ɵgetWorkOpenState(turnWork.value?.values() ?? [], turnOpenState.value),
+);
 
 provide(
   ToolCallDisplayContextKey,
-  computed<ToolCallDisplayContextValue>(() => ({
+  computed<ɵToolCallDisplayContextValue>(() => ({
     display: props.toolCallDisplay,
     isRunning: props.isRunning,
     layouts: toolCallLayouts.value,
@@ -364,8 +324,8 @@ const WorkSummaryRow: FunctionalComponent<{
   calls: ToolCallEntry[];
 }> = ({ turnKey, calls }) => {
   void workTimesVersion.value;
-  const isWorking = isWorkingOn(turnKey);
-  const isOpen = isWorkOpen(turnKey);
+  const isWorking = ɵisTurnWorking(turnKey, turnOpenState.value);
+  const isOpen = ɵisTurnWorkOpen(turnKey, turnOpenState.value);
   const times = workTimes.get(turnKey);
   const summaryProps: CopilotChatWorkSummarySlotProps = {
     isWorking,
@@ -534,21 +494,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 +514,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>

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

@@ -3,8 +3,9 @@ import { computed, onBeforeUnmount, ref, 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 { ɵformatLabel, ɵformatReasoningDuration } from "@copilotkit/core";
+import type { CopilotChatLabels } from "@copilotkit/core";
+import { useChatLabels } from "./use-chat-labels";
 
 const props = withDefaults(
   defineProps<{
@@ -69,13 +70,29 @@ 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`;
+/** How long the model reasoned, in the chat's labels: "4 seconds", "1m 5s". */
+function formatDuration(labels: Readonly<CopilotChatLabels>, seconds: number) {
+  const duration = ɵformatReasoningDuration(seconds);
+  switch (duration.unit) {
+    case "fewSeconds":
+      return labels.reasoningMessageDurationFewSeconds;
+    case "seconds":
+      return ɵformatLabel(labels.reasoningMessageDurationSeconds, {
+        count: duration.seconds,
+      });
+    case "minutes":
+      return ɵformatLabel(
+        duration.minutes === 1
+          ? labels.reasoningMessageDurationMinutesOne
+          : labels.reasoningMessageDurationMinutesOther,
+        { count: duration.minutes },
+      );
+    case "minutesSeconds":
+      return ɵformatLabel(labels.reasoningMessageDurationMinutesSeconds, {
+        minutes: duration.minutes,
+        seconds: duration.seconds,
+      });
+  }
 }
 
 const normalizedContent = computed(() =>
@@ -133,13 +150,14 @@ onBeforeUnmount(() => {
   clearElapsedInterval();
 });
 
-const config = useCopilotChatConfiguration();
+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)}`,
+    ? labels.value.reasoningMessageThinkingLabel
+    : ɵformatLabel(labels.value.reasoningMessageThoughtForLabel, {
+        duration: formatDuration(labels.value, elapsed.value),
+      }),
 );
 
 function toggleOpen() {

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

@@ -10,8 +10,15 @@
  * a custom wildcard renderer draws whatever it draws.
  */
 import { computed, provide, ref } from "vue";
+import {
+  ɵformatLabel,
+  ɵformatToolNames,
+  ɵgetToolCallPreview,
+  ɵgetToolCallRowStatus,
+  ɵformatCountLabel,
+} from "@copilotkit/core";
+import type { ToolCallEntry, ɵToolCallRowStatus } from "@copilotkit/core";
 import { useCopilotId } from "../ui/use-id";
-import type { ToolCallEntry } from "./tool-call-layout";
 import { ToolCallGroupContextKey } from "./tool-call-display-context";
 import type { ToolCallGroupContextValue } from "./tool-call-display-context";
 import {
@@ -19,13 +26,9 @@ import {
   ToolCallChevron,
   ToolCallFailedCount,
   ToolCallStatusIcon,
-  entryPreview,
-  entryStatus,
-  pluralize,
-  statusLabels,
-  toolNames,
+  toolCallStatusLabel,
 } from "./tool-call-group-parts";
-import type { ToolCallStatusName } from "./tool-call-group-parts";
+import { useChatLabels } from "./use-chat-labels";
 import type { CopilotChatToolCallGroupAppearance } from "./types";
 
 const props = withDefaults(
@@ -49,6 +52,7 @@ defineSlots<{
   call(props: { call: ToolCallEntry }): unknown;
 }>();
 
+const labels = useChatLabels();
 const open = ref(false);
 const bodyId = useCopilotId("cpk-tool-call-group");
 const toggle = () => {
@@ -64,13 +68,13 @@ const current = computed(() =>
     : undefined,
 );
 const preview = computed(() =>
-  current.value ? entryPreview(current.value) : undefined,
+  current.value ? ɵgetToolCallPreview(current.value) : undefined,
 );
 const done = computed(
   () => props.calls.filter((call) => call.toolMessage).length,
 );
 const statuses = computed(() =>
-  props.calls.map((call) => entryStatus(call, props.isActive)),
+  props.calls.map((call) => ɵgetToolCallRowStatus(call, props.isActive)),
 );
 const failedIds = computed(
   () =>
@@ -80,7 +84,7 @@ const failedIds = computed(
         .map((call) => call.toolCall.id),
     ),
 );
-const status = computed<ToolCallStatusName>(() =>
+const status = computed<ɵToolCallRowStatus>(() =>
   current.value
     ? "running"
     : failedIds.value.size > 0
@@ -108,10 +112,27 @@ const behind = computed(() =>
   open.value ? 0 : Math.min(props.calls.length - 1, 2),
 );
 const latestStatus = computed(() =>
-  latest.value ? entryStatus(latest.value, props.isActive) : "done",
+  latest.value ? ɵgetToolCallRowStatus(latest.value, props.isActive) : "done",
 );
 const latestPreview = computed(() =>
-  latest.value ? entryPreview(latest.value) : undefined,
+  latest.value ? ɵgetToolCallPreview(latest.value) : undefined,
+);
+const runningLabel = computed(() =>
+  current.value
+    ? ɵformatLabel(labels.value.toolCallRunningLabel, {
+        name: current.value.toolCall.function.name,
+      })
+    : "",
+);
+const usedToolsLabel = computed(() =>
+  ɵformatCountLabel(props.calls.length, {
+    one: labels.value.toolCallUsedToolsOne,
+    other: labels.value.toolCallUsedToolsOther,
+  }),
+);
+const toolNames = computed(() => ɵformatToolNames(props.calls));
+const latestStatusLabel = computed(() =>
+  toolCallStatusLabel(labels.value, latestStatus.value),
 );
 const layer = "cpk-tool-call-group-stack-layer";
 </script>
@@ -144,20 +165,18 @@ const layer = "cpk-tool-call-group-stack-layer";
       @click="toggle"
     >
       <template v-if="current">
-        <span class="cpk-tool-call-group-running cpk-shimmer"
-          >Running {{ current.toolCall.function.name }}</span
-        >
+        <span class="cpk-tool-call-group-running cpk-shimmer">{{
+          runningLabel
+        }}</span>
         <span v-if="preview" class="cpk-tool-call-group-preview">{{
           preview
         }}</span>
       </template>
       <template v-else>
-        <span class="cpk-tool-call-group-line-summary"
-          >Used {{ pluralize(calls.length, "tool") }}</span
-        >
-        <span class="cpk-tool-call-group-line-names">{{
-          toolNames(calls)
+        <span class="cpk-tool-call-group-line-summary">{{
+          usedToolsLabel
         }}</span>
+        <span class="cpk-tool-call-group-line-names">{{ toolNames }}</span>
         <ToolCallFailedCount :calls="calls" />
       </template>
       <ToolCallChevron :open="open" />
@@ -206,10 +225,15 @@ const layer = "cpk-tool-call-group-stack-layer";
         @click="toggle"
       >
         <template v-if="open">
-          {{ pluralize(calls.length, "tool call") }}
+          {{
+            ɵformatCountLabel(calls.length, {
+              one: labels.toolCallToolCallCountOne,
+              other: labels.toolCallToolCallCountOther,
+            })
+          }}
           <ToolCallFailedCount :calls="calls" />
           <span class="cpk-tool-call-group-stack-collapse">
-            Collapse
+            {{ labels.toolCallCollapseLabel }}
             <ToolCallChevron
               :open="true"
               class="cpk-tool-call-group-stack-collapse-icon"
@@ -236,13 +260,16 @@ const layer = "cpk-tool-call-group-stack-layer";
             >
             <!-- The status icon is decorative, so say the status. -->
             <span class="cpk-tool-call-group-stack-status">{{
-              statusLabels[latestStatus]
+              latestStatusLabel
             }}</span>
           </span>
           <span class="cpk-tool-call-group-stack-meta">
             <ToolCallFailedCount :calls="calls" />
             <span class="cpk-tool-call-group-stack-count">{{
-              pluralize(calls.length, "call")
+              ɵformatCountLabel(calls.length, {
+                one: labels.toolCallCallCountOne,
+                other: labels.toolCallCallCountOther,
+              })
             }}</span>
             <ToolCallChevron
               :open="false"
@@ -255,9 +282,7 @@ const layer = "cpk-tool-call-group-stack-layer";
              call change ("read_file: Running", then "read_file: Done"); the
              button only names it. -->
       <span aria-live="polite" class="cpk-tool-call-group-stack-live">{{
-        open
-          ? ""
-          : `${latest.toolCall.function.name}: ${statusLabels[latestStatus]}`
+        open ? "" : `${latest.toolCall.function.name}: ${latestStatusLabel}`
       }}</span>
     </div>
     <!-- Each call gets the collapsed stack's card, easing out of the stack. -->
@@ -292,28 +317,26 @@ const layer = "cpk-tool-call-group-stack-layer";
     >
       <ToolCallStatusIcon :status="status" />
       <template v-if="current">
-        <span class="cpk-tool-call-group-running cpk-shimmer"
-          >Running {{ current.toolCall.function.name }}</span
-        >
+        <span class="cpk-tool-call-group-running cpk-shimmer">{{
+          runningLabel
+        }}</span>
         <span v-if="preview" class="cpk-tool-call-group-preview">{{
           preview
         }}</span>
       </template>
       <template v-else>
-        <span class="cpk-tool-call-group-card-summary"
-          >Used {{ pluralize(calls.length, "tool") }}</span
-        >
-        <span class="cpk-tool-call-group-card-names">{{
-          toolNames(calls)
+        <span class="cpk-tool-call-group-card-summary">{{
+          usedToolsLabel
         }}</span>
+        <span class="cpk-tool-call-group-card-names">{{ toolNames }}</span>
       </template>
       <span class="cpk-tool-call-group-card-meta">
         <ToolCallFailedCount v-if="status === 'failed'" :calls="calls" />
         <span v-else class="cpk-tool-call-group-card-status">{{
           status !== "running"
-            ? statusLabels[status]
+            ? toolCallStatusLabel(labels, status)
             : done > 0
-              ? `${done} done`
+              ? ɵformatLabel(labels.toolCallDoneCountLabel, { count: done })
               : ""
         }}</span>
         <ToolCallChevron :open="open" />

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

@@ -1,11 +1,11 @@
 <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 { useCopilotKit } from "../../providers/useCopilotKit";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import type { CopilotChatToolCallRenderSlotProps } from "./types";
 import {
-  getCoreRenderConfig,
   getCoreRenderProps,
   getToolCallMemoDeps,
   getToolCallRenderProps,
@@ -55,9 +55,9 @@ function getCoreProps() {
 
 function getRenderConfig() {
   const agentId = config.value?.agentId ?? DEFAULT_AGENT_ID;
-  return getCoreRenderConfig(
-    props.toolCall,
+  return ɵresolveToolCallRenderer(
     copilotkit.value.renderToolCalls,
+    props.toolCall.function.name,
     agentId,
   );
 }

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

@@ -3,6 +3,14 @@ import { computed, defineComponent, h, inject, provide, useSlots } from "vue";
 import type { PropType } from "vue";
 import type { Slots, VNode } from "vue";
 import type { AssistantMessage, Message } from "@ag-ui/core";
+import {
+  ɵgetToolCallLayouts,
+  ɵgetToolCallRendererNames,
+} from "@copilotkit/core";
+import type {
+  CopilotChatToolCallDisplay,
+  ToolCallEntry,
+} from "@copilotkit/core";
 import { useCopilotKit } from "../../providers/useCopilotKit";
 import type {
   CopilotChatToolCallGroupAppearance,
@@ -17,14 +25,6 @@ import {
   ToolCallGroupContextKey,
 } from "./tool-call-display-context";
 import type { ToolCallGroupContextValue } from "./tool-call-display-context";
-import {
-  getToolCallLayouts,
-  getToolCallRendererNames,
-} from "./tool-call-layout";
-import type {
-  CopilotChatToolCallDisplay,
-  ToolCallEntry,
-} from "./tool-call-layout";
 
 const props = withDefaults(
   defineProps<{
@@ -84,13 +84,15 @@ const layout = computed(() => {
   if (display.value === "separate") return undefined;
   const viewLayout = context?.value.layouts.get(props.message.id);
   if (viewLayout) return viewLayout;
-  const rendererNames = getToolCallRendererNames(
+  const rendererNames = ɵgetToolCallRendererNames(
     copilotkit.value.renderToolCalls,
-    getToolCallSlotNames(),
-  );
-  return getToolCallLayouts([props.message], props.messages, rendererNames).get(
-    props.message.id,
+    { slotNames: getToolCallSlotNames() },
   );
+  return ɵgetToolCallLayouts(
+    [props.message],
+    props.messages,
+    rendererNames,
+  ).get(props.message.id);
 });
 
 // Whether the agent may still finish a trailing group's calls. Without a