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

package/src/v2/components/a2ui/A2UICatalogContext.ts

@@ -1,7 +1,11 @@
 import { computed, watch } from "vue";
 import type { ShallowRef } from "vue";
 import type { Catalog, ComponentApi } from "@a2ui/web_core/v0_9";
-import { zodToJsonSchema } from "zod-to-json-schema";
+import {
+  A2UI_SCHEMA_CONTEXT_DESCRIPTION,
+  buildCatalogContextValue as buildContextValue,
+  extractCatalogComponentSchemas,
+} from "@copilotkit/a2ui-renderer/catalog-schema";
 import {
   A2UI_DEFAULT_GENERATION_GUIDELINES,
   A2UI_DEFAULT_DESIGN_GUIDELINES,
@@ -9,22 +13,9 @@ import {
 import type { CopilotKitCoreVue } from "../../lib/vue-core";
 import { vueBasicCatalog } from "./catalog";
 
-/**
- * Context description used to identify the A2UI component schema in
- * RunAgentInput.context.  Must match the constant in @ag-ui/a2ui-middleware
- * so the middleware can overwrite a frontend-provided schema with a
- * server-side one.
- *
- * Duplicated from @copilotkit/a2ui-renderer/catalog-utils to avoid pulling
- * in React dependencies.
- */
-const A2UI_SCHEMA_CONTEXT_DESCRIPTION =
-  "A2UI Component Schema — available components for generating UI surfaces. " +
-  "Use these component names and properties when creating A2UI operations.";
-
 /**
  * Build a context string describing the available A2UI catalog.
- * Vue-native equivalent of buildCatalogContextValue from a2ui-renderer.
+ * Defaults to the Vue basic catalog.
  *
  * When `options.includeSchema` is `false`, custom components are listed by name
  * only and their JSON schemas are omitted.
@@ -33,92 +24,7 @@ export function buildCatalogContextValue(
   catalog?: Catalog<ComponentApi>,
   options?: { includeSchema?: boolean },
 ): string {
-  const resolved = catalog ?? vueBasicCatalog;
-  const BASIC_CATALOG_ID =
-    "https://a2ui.org/specification/v0_9/basic_catalog.json";
-  const lines: string[] = [];
-  lines.push("Available A2UI catalog:");
-
-  if (resolved.id === BASIC_CATALOG_ID) {
-    lines.push(`- ${resolved.id} (basic catalog)`);
-    return lines.join("\n");
-  }
-
-  // Check if the resolved catalog extends the basic catalog
-  let isSuperset = true;
-  for (const name of vueBasicCatalog.components.keys()) {
-    if (!resolved.components.has(name)) {
-      isSuperset = false;
-      break;
-    }
-  }
-
-  // Identify custom components (not in basic catalog)
-  const customNames: string[] = [];
-  for (const name of resolved.components.keys()) {
-    if (!vueBasicCatalog.components.has(name)) {
-      customNames.push(name);
-    }
-  }
-
-  lines.push(`- ${resolved.id}`);
-  if (isSuperset) {
-    lines.push(
-      "  Extends the basic catalog with all standard components plus:",
-    );
-  } else {
-    lines.push("  Custom catalog (does NOT include all basic components).");
-    lines.push("  Custom components:");
-  }
-
-  for (const name of customNames) {
-    const comp = resolved.components.get(name);
-    if (!comp) continue;
-    if (options?.includeSchema === false) {
-      lines.push(`  - ${name}`);
-      continue;
-    }
-    const jsonSchema = zodToJsonSchema(comp.schema);
-    lines.push(`  - ${name}:`);
-    lines.push(
-      `    ${JSON.stringify(jsonSchema, null, 2).split("\n").join("\n    ")}`,
-    );
-  }
-
-  return lines.join("\n");
-}
-
-/**
- * Extract component schemas from a catalog in A2UI v0.9 inline format.
- * Vue-native equivalent of extractCatalogComponentSchemas.
- */
-function extractCatalogComponentSchemas(catalog?: Catalog<ComponentApi>): {
-  catalogId: string;
-  components: Record<string, Record<string, unknown>>;
-} {
-  const resolved = catalog ?? vueBasicCatalog;
-  const components: Record<string, Record<string, unknown>> = {};
-
-  for (const [name, comp] of resolved.components) {
-    const zodSchema = zodToJsonSchema(comp.schema, {
-      target: "jsonSchema2019-09",
-    }) as { properties?: Record<string, unknown>; required?: string[] };
-
-    components[name] = {
-      allOf: [
-        { $ref: "common_types.json#/$defs/ComponentCommon" },
-        {
-          properties: {
-            component: { const: name },
-            ...zodSchema.properties,
-          },
-          required: ["component", ...(zodSchema.required ?? [])],
-        },
-      ],
-    };
-  }
-
-  return { catalogId: resolved.id, components };
+  return buildContextValue(catalog ?? vueBasicCatalog, options);
 }
 
 /**
@@ -165,7 +71,9 @@ export function registerA2UICatalogContext(
   // Register schema + generation/design guidelines
   const schemaValue = computed(() => {
     if (!options.includeSchema()) return null;
-    return JSON.stringify(extractCatalogComponentSchemas(options.catalog()));
+    return JSON.stringify(
+      extractCatalogComponentSchemas(options.catalog() ?? vueBasicCatalog),
+    );
   });
 
   watch(

package/src/v2/components/a2ui/A2UIRecoveryStates.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
 import type { PropType, VNodeChild } from "vue";
-import { z } from "zod";
+import * as z from "zod";
 
 /**
  * Shared pre-paint lifecycle states for the A2UI surface renderer, ported from

package/src/v2/components/a2ui/catalog.ts

@@ -100,6 +100,7 @@ const Text = createVueComponent(TextApi, ({ props }) => {
         text,
       );
     case "body":
+    case undefined:
     default:
       return h("span", { style }, text);
   }

package/src/v2/components/a2ui/utils.ts

@@ -33,6 +33,7 @@ export const mapJustify = (j?: string): string => {
       return "flex-start";
     case "stretch":
       return "stretch";
+    case undefined:
     default:
       return "flex-start";
   }
@@ -48,6 +49,7 @@ export const mapAlign = (a?: string): string => {
       return "flex-end";
     case "stretch":
       return "stretch";
+    case undefined:
     default:
       return "stretch";
   }

package/src/v2/components/a2ui.ts

@@ -1,4 +1,4 @@
-import { z } from "zod";
+import * as z from "zod";
 
 export type A2UIOperation = Record<string, unknown>;
 

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

@@ -4,7 +4,6 @@ import {
   createAttachmentContent,
   DEFAULT_AGENT_ID,
   randomUUID,
-  TranscriptionErrorCode,
 } from "@copilotkit/shared";
 import {
   computed,
@@ -17,7 +16,14 @@ import {
   useSlots,
   watch,
 } from "vue";
-import { CopilotKitCoreErrorCode, ɵisHttpAgent } from "@copilotkit/core";
+import {
+  CopilotChatDefaultLabels,
+  CopilotKitCoreErrorCode,
+  TranscriptionError,
+  ɵisHttpAgent,
+  ɵtranscribeAudio,
+  ɵtranscriptionErrorMessageKey,
+} from "@copilotkit/core";
 import type { Suggestion } from "@copilotkit/core";
 import CopilotChatConfigurationProvider from "../../providers/CopilotChatConfigurationProvider.vue";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
@@ -28,10 +34,6 @@ import { useAgent } from "../../hooks/use-agent";
 import { useSuggestions } from "../../hooks/use-suggestions";
 import { useAttachments } from "../../hooks/use-attachments";
 import { useShallowStableRef } from "../../lib/shallow-stable";
-import {
-  transcribeAudio,
-  TranscriptionError,
-} from "../../lib/transcription-client";
 import CopilotChatView from "./CopilotChatView.vue";
 import { LastUserMessageKey } from "./last-user-message-context";
 import type { LastUserMessageState } from "./last-user-message-context";
@@ -159,6 +161,12 @@ const isConnecting = computed(
 );
 const stableLabels = useShallowStableRef(computed(() => props.labels));
 const resolvedLabels = computed(() => stableLabels.value);
+// The labels this chat shows, the same merge its configuration provider makes.
+const chatLabels = computed(() => ({
+  ...CopilotChatDefaultLabels,
+  ...existingConfig.value?.labels,
+  ...resolvedLabels.value,
+}));
 
 // `useAgent` takes no threadId: it pins one only from a surrounding chat
 // configuration, and this call sits outside the provider rendered in this
@@ -771,48 +779,19 @@ async function handleFinishTranscribeWithAudio(audioBlob: Blob) {
   isTranscribing.value = true;
   try {
     transcriptionError.value = null;
-    const result = await transcribeAudio(copilotkit.value, audioBlob);
+    const result = await ɵtranscribeAudio(copilotkit.value, audioBlob);
     const trimmedPrevious = inputValue.value.trim();
     inputValue.value = trimmedPrevious
       ? `${trimmedPrevious} ${result.text}`
       : result.text;
   } catch (error) {
     console.error("CopilotChat: Transcription failed", error);
+    const labels = chatLabels.value;
     if (error instanceof TranscriptionError) {
-      const { code, retryable, message } = error.info;
-      switch (code) {
-        case TranscriptionErrorCode.RATE_LIMITED:
-          transcriptionError.value = "Too many requests. Please wait a moment.";
-          break;
-        case TranscriptionErrorCode.AUTH_FAILED:
-          transcriptionError.value =
-            "Authentication error. Please check your configuration.";
-          break;
-        case TranscriptionErrorCode.AUDIO_TOO_LONG:
-          transcriptionError.value =
-            "Recording is too long. Please try a shorter recording.";
-          break;
-        case TranscriptionErrorCode.AUDIO_TOO_SHORT:
-          transcriptionError.value =
-            "Recording is too short. Please try again.";
-          break;
-        case TranscriptionErrorCode.INVALID_AUDIO_FORMAT:
-          transcriptionError.value = "Audio format not supported.";
-          break;
-        case TranscriptionErrorCode.SERVICE_NOT_CONFIGURED:
-          transcriptionError.value = "Transcription service is not available.";
-          break;
-        case TranscriptionErrorCode.NETWORK_ERROR:
-          transcriptionError.value =
-            "Network error. Please check your connection.";
-          break;
-        default:
-          transcriptionError.value = retryable
-            ? "Transcription failed. Please try again."
-            : message;
-      }
+      const key = ɵtranscriptionErrorMessageKey(error.info);
+      transcriptionError.value = key ? labels[key] : error.info.message;
     } else {
-      transcriptionError.value = "Transcription failed. Please try again.";
+      transcriptionError.value = labels.transcriptionErrorGenericText;
     }
   } finally {
     isTranscribing.value = false;

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

@@ -2,7 +2,6 @@
 import {
   computed,
   inject,
-  onBeforeUnmount,
   onUpdated,
   ref,
   shallowRef,
@@ -34,7 +33,12 @@ import CopilotChatInspectorButton from "./CopilotChatInspectorButton.vue";
 import { useInspectorShortcutsHidden } from "./inspector-shortcuts";
 import { InspectorKey } from "../../providers/keys";
 import { useFeedbackComment, useMessageFeedback } from "./message-feedback";
-import type { MessageFeedbackRating } from "../../lib/message-feedback";
+import {
+  ɵhasAssistantMessageText,
+  ɵshouldShowAssistantToolbar,
+} from "@copilotkit/core";
+import type { ɵMessageFeedbackRating as MessageFeedbackRating } from "@copilotkit/core";
+import { useCopyFeedback } from "./use-copy-feedback";
 import type {
   CopilotChatAssistantMessageCopyButtonSlotProps,
   CopilotChatAssistantMessageFeedbackCommentSlotProps,
@@ -109,8 +113,7 @@ 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();
 
 function normalizeContent(content: unknown): string {
   if (!content) {
@@ -146,7 +149,9 @@ function normalizeContent(content: unknown): string {
 const normalizedContent = computed(() =>
   normalizeContent(props.message.content),
 );
-const hasContent = computed(() => normalizedContent.value.trim().length > 0);
+const hasContent = computed(() =>
+  ɵhasAssistantMessageText(normalizedContent.value),
+);
 
 const providerMarkdownRenderer = useMarkdownRenderer();
 const providerIsComponent = computed(() =>
@@ -190,11 +195,14 @@ const hasRegenerate = computed(() => typeof props.onRegenerate === "function");
 const isLatestAssistantMessage = computed(
   () => props.messages[props.messages.length - 1]?.id === props.message.id,
 );
-const shouldShowToolbar = computed(
-  () =>
-    props.toolbarVisible &&
-    (hasContent.value || showInspectorShortcut.value) &&
-    !(props.isRunning && isLatestAssistantMessage.value),
+const shouldShowToolbar = computed(() =>
+  ɵshouldShowAssistantToolbar({
+    toolbarVisible: props.toolbarVisible,
+    hasContent: hasContent.value,
+    showInspectorShortcut: showInspectorShortcut.value,
+    isRunning: props.isRunning,
+    isLatest: isLatestAssistantMessage.value,
+  }),
 );
 
 // A custom thumb that calls its handler without an event gives no element:
@@ -325,34 +333,8 @@ function handleInspect() {
   });
 }
 
-function resetCopiedStateWithDelay() {
-  if (copiedResetTimeout) {
-    clearTimeout(copiedResetTimeout);
-  }
-  copied.value = true;
-  copiedResetTimeout = setTimeout(() => {
-    copied.value = false;
-    copiedResetTimeout = null;
-  }, 2000);
-}
-
 async function handleCopyMessage() {
-  const content = normalizedContent.value;
-  if (!content) return;
-
-  if (
-    typeof navigator === "undefined" ||
-    typeof navigator.clipboard?.writeText !== "function"
-  ) {
-    return;
-  }
-
-  try {
-    await navigator.clipboard.writeText(content);
-    resetCopiedStateWithDelay();
-  } catch (error) {
-    console.error("Failed to copy to clipboard:", error);
-  }
+  await copy(normalizedContent.value);
 }
 
 function handleThumbsUp(event?: MouseEvent) {
@@ -371,12 +353,6 @@ function handleReadAloud() {
 function handleRegenerate() {
   emit("regenerate", props.message);
 }
-
-onBeforeUnmount(() => {
-  if (copiedResetTimeout) {
-    clearTimeout(copiedResetTimeout);
-  }
-});
 </script>
 
 <template>

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

@@ -9,8 +9,7 @@ import type { Attachment } from "@copilotkit/shared";
 import type { CopilotChatAttachmentQueueProps } from "./types";
 import { IconPlay } from "../icons";
 import CopilotChatLightbox from "./CopilotChatLightbox.vue";
-import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
-import { CopilotChatDefaultLabels } from "../../providers/types";
+import { useChatLabels } from "./use-chat-labels";
 
 const props = withDefaults(defineProps<CopilotChatAttachmentQueueProps>(), {
   attachments: () => [],
@@ -21,8 +20,7 @@ const emit = defineEmits<{
   "remove-attachment": [id: string];
 }>();
 
-const config = useCopilotChatConfiguration();
-const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
+const labels = useChatLabels();
 
 const activeLightboxAttachment = ref<Attachment | null>(null);
 const documentBlobUrl = ref<string | null>(null);
@@ -32,10 +30,10 @@ const lightboxLabel = computed(() => {
   if (!attachment) return undefined;
   if (attachment.filename) return attachment.filename;
   return attachment.type === "image"
-    ? "Image attachment"
+    ? labels.value.attachmentImageAltText
     : attachment.type === "video"
       ? "Video attachment"
-      : "Document";
+      : labels.value.attachmentDocumentLabel;
 });
 const isPreviewableDocument = computed(() => {
   const attachment = activeLightboxAttachment.value;
@@ -267,7 +265,7 @@ function createBlobUrl(
               class="cpk-attachment-queue-document-name"
               data-testid="copilot-chat-attachment-document-filename"
             >
-              {{ attachment.filename || "Document" }}
+              {{ attachment.filename || labels.attachmentDocumentLabel }}
             </span>
             <span
               v-if="attachment.size != null"
@@ -369,10 +367,16 @@ function createBlobUrl(
         </div>
         <div class="cpk-attachment-queue-document-card-details">
           <div class="cpk-attachment-queue-document-card-name">
-            {{ activeLightboxAttachment.filename || "Document" }}
+            {{
+              activeLightboxAttachment.filename ||
+              labels.attachmentDocumentLabel
+            }}
           </div>
           <div class="cpk-attachment-queue-document-card-meta">
-            {{ activeLightboxAttachment.source.mimeType || "Unknown type" }}
+            {{
+              activeLightboxAttachment.source.mimeType ||
+              labels.attachmentUnknownTypeText
+            }}
             {{
               activeLightboxAttachment.size != null
                 ? ` · ${formatFileSize(activeLightboxAttachment.size)}`
@@ -381,7 +385,7 @@ function createBlobUrl(
           </div>
         </div>
         <div class="cpk-attachment-queue-document-card-note">
-          No preview available for this file type
+          {{ labels.attachmentNoPreviewText }}
         </div>
       </div>
     </template>

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

@@ -12,8 +12,8 @@
 import { computed, nextTick, ref, watch } from "vue";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import { CopilotChatDefaultLabels } from "../../providers/types";
-import { MESSAGE_FEEDBACK_MAX_COMMENT_LENGTH } from "../../lib/message-feedback";
-import type { MessageFeedbackRating } from "../../lib/message-feedback";
+import { ɵMESSAGE_FEEDBACK_MAX_COMMENT_LENGTH as MESSAGE_FEEDBACK_MAX_COMMENT_LENGTH } from "@copilotkit/core";
+import type { ɵMessageFeedbackRating as MessageFeedbackRating } from "@copilotkit/core";
 import CopilotPopover from "../ui/CopilotPopover.vue";
 import { IconArrowUp } from "../icons";
 import type { FeedbackComment } from "./message-feedback";

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" />