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

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/CopilotChatUserMessage.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref } from "vue";
+import { computed } from "vue";
 import type { UserMessage } from "@ag-ui/core";
-import type {
-  AudioInputPart,
-  DocumentInputPart,
-  ImageInputPart,
-  VideoInputPart,
-} from "@copilotkit/shared";
+import {
+  ɵflattenUserMessageContent,
+  ɵgetBranchNavState,
+  ɵgetUserMessageMediaFilename,
+  ɵgetUserMessageMediaParts,
+} from "@copilotkit/core";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import { CopilotChatDefaultLabels } from "../../providers/types";
 import {
@@ -18,6 +18,7 @@ import {
 } from "../icons";
 import CopilotTooltip from "../ui/CopilotTooltip.vue";
 import CopilotChatAttachmentRenderer from "./CopilotChatAttachmentRenderer.vue";
+import { useCopyFeedback } from "./use-copy-feedback";
 import type {
   CopilotChatUserMessageBranchNavigationSlotProps,
   CopilotChatUserMessageCopyButtonSlotProps,
@@ -66,117 +67,34 @@ const emit = defineEmits<{
 
 const config = useCopilotChatConfiguration();
 const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
-const copied = ref(false);
-let copiedResetTimeout: ReturnType<typeof setTimeout> | null = null;
+const { copied, copy } = useCopyFeedback();
 
 // Styles live in @copilotkit/core (ui/button.css, user-message.css).
 const toolbarButtonClass =
   "cpk-button cpk-button-assistant-message-toolbar cpk-button-size-default";
 
-function flattenUserMessageContent(content?: UserMessage["content"]): string {
-  if (!content) {
-    return "";
-  }
-
-  if (typeof content === "string") {
-    return content;
-  }
-
-  return content
-    .map((part) => {
-      if (
-        part &&
-        typeof part === "object" &&
-        "type" in part &&
-        (part as { type?: unknown }).type === "text" &&
-        typeof (part as { text?: unknown }).text === "string"
-      ) {
-        return (part as { text: string }).text;
-      }
-      return "";
-    })
-    .filter((text) => text.length > 0)
-    .join("\n");
-}
-
-type MediaPart =
-  | ImageInputPart
-  | AudioInputPart
-  | VideoInputPart
-  | DocumentInputPart;
-
-function getMediaParts(content: UserMessage["content"]): MediaPart[] {
-  if (!content || typeof content === "string") return [];
-  return content.filter(
-    (part): part is MediaPart =>
-      part.type === "image" ||
-      part.type === "audio" ||
-      part.type === "video" ||
-      part.type === "document",
-  );
-}
-
-function getFilename(part: MediaPart): string | undefined {
-  const meta = part.metadata;
-  if (
-    meta != null &&
-    typeof meta === "object" &&
-    "filename" in meta &&
-    typeof meta.filename === "string"
-  ) {
-    return meta.filename;
-  }
-  return undefined;
-}
-
-const mediaParts = computed(() => getMediaParts(props.message.content));
+const mediaParts = computed(() =>
+  ɵgetUserMessageMediaParts(props.message.content),
+);
 
 const flattenedContent = computed(() =>
-  flattenUserMessageContent(props.message.content),
+  ɵflattenUserMessageContent(props.message.content),
 );
 const isMultiline = computed(() => flattenedContent.value.includes("\n"));
 const hasEditAction = computed(() => typeof props.onEditMessage === "function");
-const showBranchNavigation = computed(
-  () =>
-    props.numberOfBranches > 1 && typeof props.onSwitchToBranch === "function",
-);
-
-const canGoPrev = computed(
-  () => showBranchNavigation.value && props.branchIndex > 0,
-);
-const canGoNext = computed(
-  () =>
-    showBranchNavigation.value &&
-    props.branchIndex < props.numberOfBranches - 1,
+const branchNav = computed(() =>
+  ɵgetBranchNavState({
+    branchIndex: props.branchIndex,
+    numberOfBranches: props.numberOfBranches,
+    canSwitch: typeof props.onSwitchToBranch === "function",
+  }),
 );
-
-function resetCopiedStateWithDelay() {
-  if (copiedResetTimeout) {
-    clearTimeout(copiedResetTimeout);
-  }
-  copied.value = true;
-  copiedResetTimeout = setTimeout(() => {
-    copied.value = false;
-    copiedResetTimeout = null;
-  }, 2000);
-}
+const showBranchNavigation = computed(() => branchNav.value.show);
+const canGoPrev = computed(() => branchNav.value.canGoPrev);
+const canGoNext = computed(() => branchNav.value.canGoNext);
 
 async function handleCopyMessage() {
-  if (!flattenedContent.value) return;
-
-  if (
-    typeof navigator === "undefined" ||
-    typeof navigator.clipboard?.writeText !== "function"
-  ) {
-    return;
-  }
-
-  try {
-    await navigator.clipboard.writeText(flattenedContent.value);
-    resetCopiedStateWithDelay();
-  } catch (error) {
-    console.error("Failed to copy to clipboard:", error);
-  }
+  await copy(flattenedContent.value);
 }
 
 function handleEditMessage() {
@@ -212,12 +130,6 @@ function goNext() {
   }
   switchToBranch(props.branchIndex + 1);
 }
-
-onBeforeUnmount(() => {
-  if (copiedResetTimeout) {
-    clearTimeout(copiedResetTimeout);
-  }
-});
 </script>
 
 <template>
@@ -255,7 +167,7 @@ onBeforeUnmount(() => {
           :key="index"
           :type="part.type"
           :source="part.source"
-          :filename="getFilename(part)"
+          :filename="ɵgetUserMessageMediaFilename(part)"
         />
       </div>
 

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,10 @@
  * for 9s · 7 tools" and toggles the work it folded away.
  */
 import { computed, ref, watch } from "vue";
+import { ɵgetWorkSummaryText } 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,19 +28,16 @@ watch(
   { immediate: true },
 );
 
-const failed = computed(
-  () => props.calls.filter((call) => call.toolMessage?.error).length,
-);
-const liveMs = computed(() =>
-  props.elapsedMs !== undefined && props.workingSince !== undefined
-    ? props.elapsedMs + Math.max(0, now.value - props.workingSince)
-    : undefined,
-);
-// A finished reply worked for at least a second.
-const duration = computed(() =>
-  props.elapsedMs !== undefined
-    ? formatDuration(Math.max(1000, props.elapsedMs))
-    : undefined,
+const labels = useChatLabels();
+const text = computed(() =>
+  ɵgetWorkSummaryText({
+    isWorking: props.isWorking,
+    calls: props.calls,
+    elapsedMs: props.elapsedMs,
+    workingSince: props.workingSince,
+    now: now.value,
+    labels: labels.value,
+  }),
 );
 </script>
 
@@ -53,27 +50,20 @@ const duration = computed(() =>
     :aria-expanded="isOpen ? 'true' : 'false'"
     class="cpk-work-summary"
   >
-    <template v-if="isWorking">
-      <span class="cpk-work-summary-label cpk-shimmer">Working</span>
-      <span
-        v-if="liveMs !== undefined"
-        class="cpk-work-summary-detail cpk-work-summary-timer"
-        >{{ formatDuration(liveMs) }}</span
-      >
-    </template>
-    <template v-else>
-      <span class="cpk-work-summary-label">{{
-        duration
-          ? `Worked for ${duration}`
-          : `Used ${pluralize(calls.length, "tool")}`
-      }}</span>
-      <span v-if="duration" class="cpk-work-summary-detail">{{
-        pluralize(calls.length, "tool")
-      }}</span>
-      <span v-if="failed > 0" class="cpk-work-summary-failed"
-        >{{ failed }} failed</span
-      >
-    </template>
+    <span :class="['cpk-work-summary-label', isWorking && 'cpk-shimmer']">{{
+      text.label
+    }}</span>
+    <span
+      v-if="text.detail !== null"
+      :class="[
+        'cpk-work-summary-detail',
+        isWorking && 'cpk-work-summary-timer',
+      ]"
+      >{{ text.detail }}</span
+    >
+    <span v-if="text.failed !== null" class="cpk-work-summary-failed">{{
+      text.failed
+    }}</span>
     <IconChevronRight
       aria-hidden="true"
       :class="[

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

@@ -2,7 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, ref, useAttrs } from "vue";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import { CopilotChatDefaultLabels } from "../../providers/types";
-import { MOBILE_MAX_WIDTH_QUERY } from "../../lib/is-mobile-viewport";
+import { ɵwatchMobileViewport } from "@copilotkit/core";
 import CopilotModalHeaderCloseButton from "./CopilotModalHeaderCloseButton";
 import CopilotModalHeaderTitle from "./CopilotModalHeaderTitle";
 import { IconPanelLeftOpen } from "../icons";
@@ -45,34 +45,22 @@ function handleClose() {
   config.value?.setModalOpen?.(false);
 }
 
-// Tracks whether the viewport is in the mobile range (MOBILE_MAX_WIDTH_QUERY) — the same
-// breakpoint the drawer + chat coordination use. SSR-safe: starts `false`
-// (desktop) so the server render and first client render agree, then syncs
-// on mount and on viewport changes.
+// Tracks whether the viewport is in the mobile range — the same breakpoint
+// the drawer + chat coordination use. SSR-safe: starts `false` (desktop) so
+// the server render and first client render agree, then syncs on mount and
+// on viewport changes.
 const isMobile = ref(false);
-let mobileMediaQuery: MediaQueryList | null = null;
-
-function syncIsMobile() {
-  if (mobileMediaQuery) {
-    isMobile.value = mobileMediaQuery.matches;
-  }
-}
+let stopWatchingMobile: (() => void) | undefined;
 
 onMounted(() => {
-  if (
-    typeof window === "undefined" ||
-    typeof window.matchMedia !== "function"
-  ) {
-    return;
-  }
-  mobileMediaQuery = window.matchMedia(MOBILE_MAX_WIDTH_QUERY);
-  mobileMediaQuery.addEventListener("change", syncIsMobile);
-  syncIsMobile();
+  stopWatchingMobile = ɵwatchMobileViewport((mobile) => {
+    isMobile.value = mobile;
+  });
 });
 
 onBeforeUnmount(() => {
-  mobileMediaQuery?.removeEventListener("change", syncIsMobile);
-  mobileMediaQuery = null;
+  stopWatchingMobile?.();
+  stopWatchingMobile = undefined;
 });
 
 // The thread-list launcher renders ONLY when a <CopilotThreadsDrawer> wrapper