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

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

@@ -4,19 +4,27 @@ import { getDocumentIcon, getSourceUrl } from "@copilotkit/shared";
 import type { CopilotChatAttachmentRendererProps } from "./types";
 import CopilotChatLightbox from "./CopilotChatLightbox.vue";
 import { useLightbox } from "./use-lightbox";
+import { useChatLabels } from "./use-chat-labels";
 
 const props = withDefaults(defineProps<CopilotChatAttachmentRendererProps>(), {
   filename: undefined,
   className: "",
 });
 
+const labels = useChatLabels();
 const imageLoadFailed = ref(false);
 const sourceUrl = computed(() => getSourceUrl(props.source));
 const documentLabel = computed(
-  () => props.filename || props.source.mimeType || "Unknown type",
+  () =>
+    props.filename ||
+    props.source.mimeType ||
+    labels.value.attachmentUnknownTypeText,
 );
 const documentAriaLabel = computed(
-  () => props.filename || props.source.mimeType || "Document attachment",
+  () =>
+    props.filename ||
+    props.source.mimeType ||
+    labels.value.attachmentDocumentAltText,
 );
 
 const imageButton = ref<HTMLButtonElement | null>(null);
@@ -43,7 +51,7 @@ const {
     <img
       ref="thumbnailRef"
       :src="sourceUrl"
-      alt="Image attachment"
+      :alt="labels.attachmentImageAltText"
       class="cpk-attachment-renderer cpk-attachment-renderer-image"
       :class="props.className"
       data-testid="copilot-chat-attachment-renderer-image"
@@ -52,14 +60,14 @@ const {
     <!-- Teleported to the body; inside the button only to keep one root. -->
     <CopilotChatLightbox
       v-if="lightboxOpen"
-      label="Image attachment"
+      :label="labels.attachmentImageAltText"
       :return-focus-to="imageButton"
       @close="closeLightbox"
     >
       <img
         :style="{ viewTransitionName: vtName }"
         :src="sourceUrl"
-        alt="Image attachment"
+        :alt="labels.attachmentImageAltText"
         class="cpk-attachment-renderer-lightbox-image"
         data-testid="copilot-chat-attachment-renderer-lightbox-image"
       />
@@ -71,7 +79,7 @@ const {
     :class="props.className"
     data-testid="copilot-chat-attachment-renderer-image-fallback"
   >
-    <span>Failed to load image</span>
+    <span>{{ labels.attachmentImageLoadErrorText }}</span>
   </div>
 
   <div

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

@@ -8,8 +8,7 @@ import {
   useAttrs,
   watch,
 } from "vue";
-import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
-import { CopilotChatDefaultLabels } from "../../providers/types";
+import { ɵcomposerButtonState, ɵresolveComposerKey } from "@copilotkit/core";
 import {
   IconArrowUp,
   IconCheck,
@@ -29,6 +28,7 @@ import type {
 import { useCopilotId } from "../ui/use-id";
 import type { CopilotChatAudioRecorderRef } from "./audioRecorder";
 import type { CopilotChatInputMode, ToolsMenuItem } from "./types";
+import { useChatLabels } from "./use-chat-labels";
 
 defineOptions({ inheritAttrs: false });
 
@@ -107,7 +107,6 @@ const emit = defineEmits<{
 }>();
 
 const attrs = useAttrs();
-const config = useCopilotChatConfiguration();
 const shellRef = ref<HTMLElement | null>(null);
 const textareaRef = ref<HTMLTextAreaElement | null>(null);
 const gridRef = ref<HTMLElement | null>(null);
@@ -148,16 +147,13 @@ const isControlled = computed(() => props.modelValue !== undefined);
 const inputValue = computed(() =>
   isControlled.value ? (props.modelValue ?? "") : localValue.value,
 );
-const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
+const labels = useChatLabels();
 const resolvedPlaceholder = computed(
   () => props.placeholder ?? labels.value.chatInputPlaceholder,
 );
 const isExpanded = computed(
   () => props.mode === "input" && layout.value === "expanded",
 );
-const isProcessing = computed(
-  () => props.mode !== "transcribe" && props.isRunning,
-);
 const shouldShowDisclaimer = computed(
   () => props.showDisclaimer ?? props.positioning === "absolute",
 );
@@ -177,16 +173,20 @@ const hasFinishTranscribeAction = computed(
     typeof props.onFinishTranscribe === "function" ||
     typeof props.onFinishTranscribeWithAudio === "function",
 );
-const canSend = computed(
-  () =>
-    props.mode === "input" &&
-    !props.disabled &&
-    hasSubmitAction.value &&
-    inputValue.value.trim().length > 0,
-);
-const sendDisabled = computed(() =>
-  isProcessing.value ? !hasStopAction.value : !canSend.value,
+const composerInput = computed(() => ({
+  mode: props.mode,
+  isRunning: props.isRunning,
+  value: inputValue.value,
+  canSubmit: hasSubmitAction.value,
+  canStop: hasStopAction.value,
+  disabled: props.disabled,
+}));
+const composerButton = computed(() =>
+  ɵcomposerButtonState(composerInput.value),
 );
+const isProcessing = computed(() => composerButton.value.isProcessing);
+const sendDisabled = computed(() => composerButton.value.disabled);
+const showsStop = computed(() => composerButton.value.action === "stop");
 
 const containerClass = computed(() => [
   "cpk-chat-input",
@@ -408,14 +408,16 @@ function handleInput(event: Event) {
   updateSlashState(nextValue);
 }
 
+// The button stops a run whatever the input holds. Enter differs: see
+// handleKeydown.
 function handleSendButtonClick() {
-  if (isProcessing.value) {
-    if (hasStopAction.value) {
-      emit("stop");
-    }
+  if (showsStop.value) {
+    emit("stop");
     return;
   }
-  submit();
+  if (!isProcessing.value) {
+    submit();
+  }
 }
 
 function handleKeydown(event: KeyboardEvent) {
@@ -473,15 +475,23 @@ function handleKeydown(event: KeyboardEvent) {
     }
   }
 
-  if (event.key === "Enter" && !event.shiftKey && props.mode === "input") {
+  if (props.mode !== "input") {
+    return;
+  }
+
+  // Enter with text sends, also while a run is going. Enter in an empty input
+  // stops the run. Read the textarea: a controlled modelValue can lag a tick.
+  const action = ɵresolveComposerKey(event, {
+    ...composerInput.value,
+    value: textareaRef.value?.value ?? inputValue.value,
+  });
+  if (event.key === "Enter" && !event.shiftKey) {
     event.preventDefault();
-    if (isProcessing.value) {
-      if (hasStopAction.value) {
-        emit("stop");
-      }
-      return;
-    }
+  }
+  if (action === "send") {
     submit();
+  } else if (action === "stop") {
+    emit("stop");
   }
 }
 
@@ -1295,7 +1305,7 @@ onBeforeUnmount(() => {
                       type="button"
                       data-testid="copilot-chat-input-send"
                       :aria-label="
-                        isProcessing && hasStopAction
+                        showsStop
                           ? labels.chatInputToolbarStopButtonLabel
                           : labels.chatInputToolbarSendButtonLabel
                       "
@@ -1304,7 +1314,7 @@ onBeforeUnmount(() => {
                       @click="handleSendButtonClick"
                     >
                       <IconSquare
-                        v-if="isProcessing && hasStopAction"
+                        v-if="showsStop"
                         class="cpk-chat-input-stop-icon"
                       />
                       <IconArrowUp v-else class="cpk-chat-input-send-icon" />

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() {