@copilotkit/vue 2.0.0-rc.6 → 2.0.0-rc.8

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

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

@@ -11,8 +11,7 @@ import {
 import type { Message } from "@ag-ui/core";
 import type { Suggestion } from "@copilotkit/core";
 import type { Attachment } from "@copilotkit/shared";
-import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
-import { CopilotChatDefaultLabels } from "../../providers/types";
+import { useChatLabels } from "./use-chat-labels";
 import { useKeyboardHeight } from "../../hooks/use-keyboard-height";
 import { usePinToSend } from "../../hooks/use-pin-to-send";
 import { IconChevronDown, IconUpload } from "../icons";
@@ -127,8 +126,7 @@ const emit = defineEmits<{
   "finish-transcribe": [];
 }>();
 
-const config = useCopilotChatConfiguration();
-const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
+const labels = useChatLabels();
 const componentSlots = useSlots();
 
 const scrollContainerRef = ref<HTMLElement | null>(null);
@@ -457,7 +455,9 @@ onBeforeUnmount(() => {
     >
       <div class="cpk-chat-view-drop-overlay-content">
         <IconUpload class="cpk-chat-view-drop-overlay-icon" />
-        <span class="cpk-chat-view-drop-overlay-label">Drop files here</span>
+        <span class="cpk-chat-view-drop-overlay-label">{{
+          labels.chatDropFilesLabel
+        }}</span>
       </div>
     </div>
     <slot

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

@@ -5,10 +5,15 @@
  * for 9s · 7 tools" and toggles the work it folded away.
  */
 import { computed, ref, watch } from "vue";
+import {
+  ɵcountFailedToolCalls,
+  ɵformatLabel,
+  ɵformatWorkDuration,
+  ɵformatCountLabel,
+} from "@copilotkit/core";
 import { IconChevronRight } from "../icons";
 import type { CopilotChatWorkSummarySlotProps } from "./types";
-import { pluralize } from "./tool-call-group-parts";
-import { formatDuration } from "./turn-work";
+import { useChatLabels } from "./use-chat-labels";
 
 // `onClick` falls through to the button.
 const props = defineProps<Omit<CopilotChatWorkSummarySlotProps, "onClick">>();
@@ -28,9 +33,8 @@ watch(
   { immediate: true },
 );
 
-const failed = computed(
-  () => props.calls.filter((call) => call.toolMessage?.error).length,
-);
+const labels = useChatLabels();
+const failed = computed(() => ɵcountFailedToolCalls(props.calls));
 const liveMs = computed(() =>
   props.elapsedMs !== undefined && props.workingSince !== undefined
     ? props.elapsedMs + Math.max(0, now.value - props.workingSince)
@@ -39,9 +43,33 @@ const liveMs = computed(() =>
 // A finished reply worked for at least a second.
 const duration = computed(() =>
   props.elapsedMs !== undefined
-    ? formatDuration(Math.max(1000, props.elapsedMs))
+    ? ɵformatWorkDuration(Math.max(1000, props.elapsedMs))
     : undefined,
 );
+const toolCount = computed(() =>
+  ɵformatCountLabel(props.calls.length, {
+    one: labels.value.toolCallToolCountOne,
+    other: labels.value.toolCallToolCountOther,
+  }),
+);
+const doneLabel = computed(() =>
+  duration.value
+    ? ɵformatLabel(labels.value.workSummaryWorkedForLabel, {
+        duration: duration.value,
+      })
+    : ɵformatCountLabel(props.calls.length, {
+        one: labels.value.toolCallUsedToolsOne,
+        other: labels.value.toolCallUsedToolsOther,
+      }),
+);
+const liveDuration = computed(() =>
+  liveMs.value !== undefined ? ɵformatWorkDuration(liveMs.value) : undefined,
+);
+const failedLabel = computed(() =>
+  ɵformatLabel(labels.value.toolCallFailedCountLabel, {
+    count: failed.value,
+  }),
+);
 </script>
 
 <template>
@@ -54,25 +82,23 @@ const duration = computed(() =>
     class="cpk-work-summary"
   >
     <template v-if="isWorking">
-      <span class="cpk-work-summary-label cpk-shimmer">Working</span>
+      <span class="cpk-work-summary-label cpk-shimmer">{{
+        labels.workSummaryWorkingLabel
+      }}</span>
       <span
-        v-if="liveMs !== undefined"
+        v-if="liveDuration !== undefined"
         class="cpk-work-summary-detail cpk-work-summary-timer"
-        >{{ formatDuration(liveMs) }}</span
+        >{{ liveDuration }}</span
       >
     </template>
     <template v-else>
-      <span class="cpk-work-summary-label">{{
-        duration
-          ? `Worked for ${duration}`
-          : `Used ${pluralize(calls.length, "tool")}`
-      }}</span>
+      <span class="cpk-work-summary-label">{{ doneLabel }}</span>
       <span v-if="duration" class="cpk-work-summary-detail">{{
-        pluralize(calls.length, "tool")
+        toolCount
+      }}</span>
+      <span v-if="failed > 0" class="cpk-work-summary-failed">{{
+        failedLabel
       }}</span>
-      <span v-if="failed > 0" class="cpk-work-summary-failed"
-        >{{ failed }} failed</span
-      >
     </template>
     <IconChevronRight
       aria-hidden="true"

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__/CopilotChatInput.test.ts

@@ -559,6 +559,38 @@ describe("CopilotChatInput", () => {
     expect(screen.getByRole("button", { name: "Stop" })).toBe(getSendButton());
   });
 
+  describe("Enter while the agent runs", () => {
+    async function pressEnterWhileRunning(modelValue: string) {
+      const onStop = vi.fn();
+      renderWithProvider({
+        props: { modelValue, isRunning: true },
+        listeners: { onSubmitMessage: mockOnSubmitMessage, onStop },
+      });
+      await fireEvent.keyDown(
+        screen.getByPlaceholderText("Type a message..."),
+        {
+          key: "Enter",
+          shiftKey: false,
+        },
+      );
+      return onStop;
+    }
+
+    it("sends the typed text and does not stop the run", async () => {
+      const onStop = await pressEnterWhileRunning("  next question  ");
+
+      expect(mockOnSubmitMessage).toHaveBeenCalledWith("next question");
+      expect(onStop).not.toHaveBeenCalled();
+    });
+
+    it("stops the run when the input is empty", async () => {
+      const onStop = await pressEnterWhileRunning("");
+
+      expect(onStop).toHaveBeenCalledOnce();
+      expect(mockOnSubmitMessage).not.toHaveBeenCalled();
+    });
+  });
+
   it("names the send button with the configured labels", () => {
     renderWithProvider({
       template: `
@@ -799,7 +831,7 @@ describe("CopilotChatInput", () => {
 
     await fireEvent.click(addButton);
     const menuItem = await screen.findByRole("menuitem", {
-      name: "Add photos or files",
+      name: "Add attachments",
     });
     await fireEvent.click(menuItem);
     expect(handleAddFile).toHaveBeenCalledTimes(1);