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

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

@@ -3,8 +3,8 @@ 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, ɵformatReasoningDurationLabel } from "@copilotkit/core";
+import { useChatLabels } from "./use-chat-labels";
 
 const props = withDefaults(
   defineProps<{
@@ -69,15 +69,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 : "",
 );
@@ -133,13 +124,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: ɵformatReasoningDurationLabel(elapsed.value, labels.value),
+      }),
 );
 
 function toggleOpen() {

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

@@ -10,8 +10,14 @@
  * a custom wildcard renderer draws whatever it draws.
  */
 import { computed, provide, ref } from "vue";
+import {
+  ɵformatLabel,
+  ɵformatToolNames,
+  ɵgetToolCallGroupState,
+  ɵformatCountLabel,
+} from "@copilotkit/core";
+import type { ToolCallEntry } 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 +25,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,46 +51,22 @@ defineSlots<{
   call(props: { call: ToolCallEntry }): unknown;
 }>();
 
+const labels = useChatLabels();
 const open = ref(false);
 const bodyId = useCopilotId("cpk-tool-call-group");
 const toggle = () => {
   open.value = !open.value;
 };
 
-const latest = computed(() => props.calls[props.calls.length - 1]);
-// Only an active group has a call in progress. Between calls nothing is
-// running, so the latest call stays the subject (or the label flickers).
-const current = computed(() =>
-  props.isActive
-    ? (props.calls.find((call) => !call.toolMessage) ?? latest.value)
-    : undefined,
-);
-const preview = computed(() =>
-  current.value ? entryPreview(current.value) : undefined,
-);
-const done = computed(
-  () => props.calls.filter((call) => call.toolMessage).length,
-);
-const statuses = computed(() =>
-  props.calls.map((call) => entryStatus(call, props.isActive)),
-);
-const failedIds = computed(
-  () =>
-    new Set(
-      props.calls
-        .filter((_, index) => statuses.value[index] === "failed")
-        .map((call) => call.toolCall.id),
-    ),
-);
-const status = computed<ToolCallStatusName>(() =>
-  current.value
-    ? "running"
-    : failedIds.value.size > 0
-      ? "failed"
-      : statuses.value.includes("stopped")
-        ? "stopped"
-        : "done",
+const state = computed(() =>
+  ɵgetToolCallGroupState(props.calls, props.isActive, open.value),
 );
+const latest = computed(() => state.value.latest);
+const current = computed(() => state.value.current);
+const preview = computed(() => state.value.preview);
+const done = computed(() => state.value.done);
+const failedIds = computed(() => state.value.failedIds);
+const status = computed(() => state.value.status);
 const single = computed(
   () =>
     props.appearance === "line" && props.calls.length === 1 && !current.value,
@@ -99,19 +77,31 @@ provide(
   computed<ToolCallGroupContextValue>(() => ({
     appearance: props.appearance,
     failedIds: failedIds.value,
+    statusById: state.value.statusById,
     active: props.isActive,
   })),
 );
 
 // Stack: a lone call is the top card of a stack with nothing behind it yet.
-const behind = computed(() =>
-  open.value ? 0 : Math.min(props.calls.length - 1, 2),
+const behind = computed(() => state.value.behind);
+const latestStatus = computed(() => state.value.latestStatus);
+const latestPreview = computed(() => state.value.latestPreview);
+const runningLabel = computed(() =>
+  current.value
+    ? ɵformatLabel(labels.value.toolCallRunningLabel, {
+        name: current.value.toolCall.function.name,
+      })
+    : "",
 );
-const latestStatus = computed(() =>
-  latest.value ? entryStatus(latest.value, props.isActive) : "done",
+const usedToolsLabel = computed(() =>
+  ɵformatCountLabel(props.calls.length, {
+    one: labels.value.toolCallUsedToolsOne,
+    other: labels.value.toolCallUsedToolsOther,
+  }),
 );
-const latestPreview = computed(() =>
-  latest.value ? entryPreview(latest.value) : undefined,
+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 +134,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 +194,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 +229,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 +251,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 +286,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,13 @@
 <script setup lang="ts">
 import type { Message, ToolCall } from "@ag-ui/core";
-import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
+import {
+  ɵresolveToolCallAgentId,
+  ɵresolveToolCallRenderer,
+} from "@copilotkit/core";
 import { useCopilotKit } from "../../providers/useCopilotKit";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import type { CopilotChatToolCallRenderSlotProps } from "./types";
 import {
-  getCoreRenderConfig,
   getCoreRenderProps,
   getToolCallMemoDeps,
   getToolCallRenderProps,
@@ -54,16 +56,16 @@ function getCoreProps() {
 }
 
 function getRenderConfig() {
-  const agentId = config.value?.agentId ?? DEFAULT_AGENT_ID;
-  return getCoreRenderConfig(
-    props.toolCall,
+  const agentId = ɵresolveToolCallAgentId(config.value?.agentId, undefined);
+  return ɵresolveToolCallRenderer(
     copilotkit.value.renderToolCalls,
+    props.toolCall.function.name,
     agentId,
   );
 }
 
 function getMemoDeps() {
-  const agentId = config.value?.agentId ?? DEFAULT_AGENT_ID;
+  const agentId = ɵresolveToolCallAgentId(config.value?.agentId, undefined);
   return getToolCallMemoDeps(
     props.toolCall,
     props.messages,

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

@@ -3,9 +3,18 @@ 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 {
+  ɵgetToolCallGroupState,
+  ɵgetToolCallLayouts,
+  ɵgetToolCallRendererNames,
+  ɵtoolCallAppearance,
+} from "@copilotkit/core";
+import type {
+  CopilotChatToolCallDisplay,
+  ToolCallEntry,
+} from "@copilotkit/core";
 import { useCopilotKit } from "../../providers/useCopilotKit";
 import type {
-  CopilotChatToolCallGroupAppearance,
   CopilotChatToolCallRenderSlotProps,
   CopilotChatToolCallsGroupSlotProps,
 } from "./types";
@@ -17,14 +26,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<{
@@ -54,14 +55,6 @@ defineSlots<{
 
 type ToolCallSlotName = "tool-call" | `tool-call-${string}`;
 
-const appearances: Partial<
-  Record<CopilotChatToolCallDisplay, CopilotChatToolCallGroupAppearance>
-> = {
-  grouped: "card",
-  line: "line",
-  stacked: "stack",
-};
-
 const componentSlots = useSlots() as Slots;
 const { copilotkit } = useCopilotKit();
 const context = inject(ToolCallDisplayContextKey, null);
@@ -84,13 +77,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
@@ -99,7 +94,7 @@ const layout = computed(() => {
 const groupActive = (trailing: boolean) =>
   trailing && (context ? context.value.isRunning : true);
 
-const appearance = computed(() => appearances[display.value] ?? "card");
+const appearance = computed(() => ɵtoolCallAppearance(display.value) ?? "card");
 
 const workOpen = computed(() => context?.value.workOpen.get(props.message.id));
 
@@ -115,15 +110,19 @@ const TurnRows = defineComponent({
   setup(rowProps, { slots }) {
     provide(
       ToolCallGroupContextKey,
-      computed<ToolCallGroupContextValue>(() => ({
-        appearance: "line",
-        failedIds: new Set(
-          rowProps.calls
-            .filter((call) => call.toolMessage?.error)
-            .map((call) => call.toolCall.id),
-        ),
-        active: rowProps.active,
-      })),
+      computed<ToolCallGroupContextValue>(() => {
+        const { failedIds, statusById } = ɵgetToolCallGroupState(
+          rowProps.calls,
+          rowProps.active,
+          false,
+        );
+        return {
+          appearance: "line",
+          failedIds,
+          statusById,
+          active: rowProps.active,
+        };
+      }),
     );
     return () => slots.default?.();
   },

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>