@copilotkit/vue 2.0.0-rc.3 → 2.0.0-rc.31

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

@@ -1,14 +1,5 @@
 <script setup lang="ts">
-import {
-  computed,
-  inject,
-  onBeforeUnmount,
-  onUpdated,
-  ref,
-  shallowRef,
-  toRef,
-  watch,
-} from "vue";
+import { computed, inject, onUpdated, ref, toRef, watch } from "vue";
 import type { Component } from "vue";
 import type { AssistantMessage, Message } from "@ag-ui/core";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
@@ -34,7 +25,13 @@ 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 {
+  ɵflattenUserMessageContent,
+  ɵhasAssistantMessageText,
+  ɵshouldShowAssistantToolbar,
+} from "@copilotkit/core";
+import type { ɵMessageFeedbackRating as MessageFeedbackRating } from "@copilotkit/core";
+import { useCopyFeedback } from "./use-copy-feedback";
 import type {
   CopilotChatAssistantMessageCopyButtonSlotProps,
   CopilotChatAssistantMessageFeedbackCommentSlotProps,
@@ -109,44 +106,15 @@ const emit = defineEmits<{
 
 const config = useCopilotChatConfiguration();
 const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
-const copied = ref(false);
-let copiedResetTimeout: ReturnType<typeof setTimeout> | null = null;
-
-function normalizeContent(content: unknown): string {
-  if (!content) {
-    return "";
-  }
-
-  if (typeof content === "string") {
-    return content;
-  }
-
-  if (Array.isArray(content)) {
-    const parts = content as Array<{ type?: unknown; text?: unknown }>;
-    return parts
-      .map((part) => {
-        if (
-          part &&
-          typeof part === "object" &&
-          "type" in part &&
-          part.type === "text" &&
-          typeof part.text === "string"
-        ) {
-          return part.text;
-        }
-        return "";
-      })
-      .filter((text) => text.length > 0)
-      .join("\n");
-  }
-
-  return "";
-}
+const { copied, copy } = useCopyFeedback();
 
+// Assistant text, also from untyped data that sends content parts.
 const normalizedContent = computed(() =>
-  normalizeContent(props.message.content),
+  ɵflattenUserMessageContent(props.message.content),
+);
+const hasContent = computed(() =>
+  ɵhasAssistantMessageText(normalizedContent.value),
 );
-const hasContent = computed(() => normalizedContent.value.trim().length > 0);
 
 const providerMarkdownRenderer = useMarkdownRenderer();
 const providerIsComponent = computed(() =>
@@ -174,10 +142,6 @@ const feedback = useMessageFeedback(toRef(props, "message"));
 const comment = useFeedbackComment(feedback);
 const rating = computed(() => feedback.value?.feedback?.rating);
 const root = ref<HTMLElement | null>(null);
-// The chosen thumb the comment popover points at, and the rating the open
-// comment answers.
-const commentAnchor = shallowRef<HTMLElement | null>(null);
-let commentRating = rating.value;
 
 const hasThumbsUp = computed(
   () => typeof props.onThumbsUp === "function" || !!feedback.value,
@@ -190,115 +154,52 @@ 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:
 // point at the chosen thumb once it renders, before the popover reads it.
-function findCommentAnchor() {
-  if (
-    comment.open.value &&
-    !commentAnchor.value?.isConnected &&
-    rating.value &&
-    root.value
-  ) {
-    commentAnchor.value =
-      root.value.querySelector<HTMLElement>(
-        `[data-copilotkit-rating="${rating.value}"]`,
-      ) ??
-      // A custom thumb that binds only `aria-pressed`.
-      root.value.querySelector<HTMLElement>('button[aria-pressed="true"]') ??
-      null;
-  }
-}
+const findCommentAnchor = () => comment.findAnchor(root.value);
 onUpdated(findCommentAnchor);
 watch(() => comment.open.value, findCommentAnchor, { flush: "post" });
 
-/** Whether focus came from the keyboard; a pointer click also focuses buttons. */
-function isFocusVisible(element: Element): boolean {
-  try {
-    return element.matches(":focus-visible");
-  } catch {
-    return false;
-  }
-}
-
-// Checks `visibility: hidden` too, which a detached popover uses.
-const HIDDEN_TOO = { checkVisibilityCSS: true, visibilityProperty: true };
-
 /**
- * Thumbs are toggles: a new rating is saved and opens its comment, and
- * clicking the chosen thumb again removes the rating. A keyboard click
- * (`detail` 0) moves focus into the comment, as there is no pointer. Custom
- * thumb slots may call the handler without an event.
- *
- * @returns Whether the app's handler should run: true for a new rating and
- * whenever this chat does not record ratings, false when one is removed.
+ * A thumb click. A keyboard click (`detail` 0) moves focus into the comment;
+ * custom thumb slots may call the handler without an event.
  */
 function rate(value: MessageFeedbackRating, event?: MouseEvent): boolean {
-  const controls = feedback.value;
-  if (!controls) return true;
-  if (rating.value === value) {
-    comment.close({ save: false });
-    controls.clear();
-    return false;
-  }
-  controls.rate(value);
-  commentRating = value;
-  commentAnchor.value =
-    event?.currentTarget instanceof HTMLElement ? event.currentTarget : null;
-  comment.show({ comment: "", focus: event?.detail === 0 });
-  return true;
+  return comment.rate(value, {
+    target:
+      event?.currentTarget instanceof HTMLElement ? event.currentTarget : null,
+    keyboard: event?.detail === 0,
+  });
 }
 
 /** Attributes that let the chosen thumb open and point at its comment. */
 function thumbFeedbackProps(
   value: MessageFeedbackRating,
 ): Record<string, unknown> {
-  if (!feedback.value) return {};
-  const thumb = { "data-copilotkit-rating": value };
-  if (rating.value !== value) return { ...thumb, "aria-pressed": false };
-  const enter = (target: HTMLElement, via: "pointer" | "focus") => {
-    if (!comment.open.value) commentRating = value;
-    commentAnchor.value = target;
-    comment.enter(via);
-  };
+  // Read so the thumbs update when the rating or the popover changes.
+  void feedback.value;
+  void comment.open.value;
+  const thumb = comment.thumb(value);
+  if (!thumb) return {};
+  const { handlers } = thumb;
+  if (!handlers) return thumb.attributes;
   return {
-    ...thumb,
-    "aria-pressed": true,
-    "aria-haspopup": "dialog",
-    "aria-expanded": comment.open.value,
-    onPointerenter: (event: PointerEvent) => {
-      if (event.pointerType !== "touch")
-        enter(event.currentTarget as HTMLElement, "pointer");
-    },
-    onPointerleave: (event: PointerEvent) => {
-      if (event.pointerType !== "touch") comment.leave("pointer");
-    },
-    // Keyboard focus opens the comment; Tab moves on into its field.
-    onFocus: (event: FocusEvent) => {
-      const target = event.currentTarget as HTMLElement;
-      if (isFocusVisible(target)) enter(target, "focus");
-    },
-    onBlur: () => comment.leave(),
-    onKeydown: (event: KeyboardEvent) => {
-      const input = comment.input.value;
-      // Not while the popover hides because its thumb scrolled away.
-      if (
-        event.key === "Tab" &&
-        !event.shiftKey &&
-        comment.open.value &&
-        input &&
-        input.checkVisibility?.(HIDDEN_TOO) !== false
-      ) {
-        event.preventDefault();
-        input.focus();
-      }
-    },
+    ...thumb.attributes,
+    onPointerenter: handlers.pointerEnter,
+    onPointerleave: handlers.pointerLeave,
+    onFocus: handlers.focus,
+    onBlur: handlers.blur,
+    onKeydown: handlers.keyDown,
   };
 }
 
@@ -307,14 +208,8 @@ const thumbsDownProps = computed(() => thumbFeedbackProps("down"));
 
 // The popover shows only with the toolbar and a rating. Hiding the toolbar
 // keeps the edit; a rating removed elsewhere or Learning turned off ends it.
-watch(
-  [() => comment.open.value, shouldShowToolbar, rating],
-  ([open, showToolbar, currentRating]) => {
-    if (!open) return;
-    // Changed or removed elsewhere: the draft answered the old rating.
-    if (currentRating !== commentRating) comment.close({ save: false });
-    else if (!showToolbar) comment.close();
-  },
+watch([() => comment.open.value, shouldShowToolbar, rating], () =>
+  comment.sync({ showsToolbar: shouldShowToolbar.value }),
 );
 
 function handleInspect() {
@@ -325,34 +220,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 +240,6 @@ function handleReadAloud() {
 function handleRegenerate() {
   emit("regenerate", props.message);
 }
-
-onBeforeUnmount(() => {
-  if (copiedResetTimeout) {
-    clearTimeout(copiedResetTimeout);
-  }
-});
 </script>
 
 <template>
@@ -563,7 +426,7 @@ onBeforeUnmount(() => {
     :comment="comment"
     :saved-comment="feedback.feedback.comment ?? ''"
     :rating="feedback.feedback.rating"
-    :anchor="commentAnchor"
+    :anchor="comment.anchor.value"
     :message-id="message.id"
   >
     <template v-if="$slots['feedback-comment']" #feedback-comment="slotProps">

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

@@ -6,11 +6,15 @@ import {
   getSourceUrl,
 } from "@copilotkit/shared";
 import type { Attachment } from "@copilotkit/shared";
+import {
+  ɵcanPreviewDocument,
+  ɵcreateObjectUrlFromSource,
+  ɵdecodeTextSource,
+} from "@copilotkit/core";
 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,38 +25,32 @@ 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);
+let revokeDocumentBlobUrl = () => {};
 
 const lightboxLabel = computed(() => {
   const attachment = activeLightboxAttachment.value;
   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;
   if (!attachment || attachment.type !== "document") return false;
-  const mimeType = attachment.source.mimeType;
-  return isPdf(mimeType) || isText(mimeType);
+  return ɵcanPreviewDocument(attachment.source.mimeType) !== null;
 });
 const decodedTextPreview = computed(() => {
   const attachment = activeLightboxAttachment.value;
   if (!attachment || attachment.type !== "document") return null;
-  const mimeType = attachment.source.mimeType;
-  if (!isText(mimeType) || attachment.source.type !== "data") return null;
-  try {
-    return atob(attachment.source.value);
-  } catch {
-    return attachment.source.value;
-  }
+  if (ɵcanPreviewDocument(attachment.source.mimeType) !== "text") return null;
+  return ɵdecodeTextSource(attachment.source);
 });
 const lightboxDocumentSource = computed(() => {
   const attachment = activeLightboxAttachment.value;
@@ -64,10 +62,7 @@ const lightboxDocumentSource = computed(() => {
 watch(
   activeLightboxAttachment,
   (next, previous) => {
-    if (documentBlobUrl.value) {
-      URL.revokeObjectURL(documentBlobUrl.value);
-      documentBlobUrl.value = null;
-    }
+    revokeDocumentBlobUrl();
 
     if (
       !next ||
@@ -78,22 +73,22 @@ watch(
       return;
     }
 
-    const mimeType = next.source.mimeType;
-    if (!isPdf(mimeType) && !isText(mimeType)) {
+    if (ɵcanPreviewDocument(next.source.mimeType) === null) {
       return;
     }
 
-    const blobUrl = createBlobUrl(next.source.value, mimeType);
-    documentBlobUrl.value = blobUrl;
+    const objectUrl = ɵcreateObjectUrlFromSource(next.source);
+    documentBlobUrl.value = objectUrl?.url ?? null;
+    revokeDocumentBlobUrl = () => {
+      objectUrl?.revoke();
+      documentBlobUrl.value = null;
+    };
   },
   { immediate: true },
 );
 
 onBeforeUnmount(() => {
-  if (documentBlobUrl.value) {
-    URL.revokeObjectURL(documentBlobUrl.value);
-    documentBlobUrl.value = null;
-  }
+  revokeDocumentBlobUrl();
 });
 
 function openLightbox(attachment: Attachment) {
@@ -125,32 +120,12 @@ function cardClassName(attachment: Attachment) {
   return "cpk-attachment-queue-item-document";
 }
 
-function isPdf(mimeType: string | undefined): boolean {
-  return !!mimeType && mimeType.includes("pdf");
+function isPdf(mimeType: string | undefined) {
+  return ɵcanPreviewDocument(mimeType) === "pdf";
 }
 
-function isText(mimeType: string | undefined): boolean {
-  return !!mimeType && mimeType.startsWith("text/");
-}
-
-function createBlobUrl(
-  base64Value: string,
-  mimeType: string | undefined,
-): string | null {
-  try {
-    const binary = atob(base64Value);
-    const bytes = new Uint8Array(binary.length);
-    for (let i = 0; i < binary.length; i += 1) {
-      bytes[i] = binary.charCodeAt(i);
-    }
-    const blob = new Blob([bytes], {
-      type: mimeType || "application/octet-stream",
-    });
-    return URL.createObjectURL(blob);
-  } catch (error) {
-    console.error("[CopilotKit] Failed to decode attachment data:", error);
-    return null;
-  }
+function isText(mimeType: string | undefined) {
+  return ɵcanPreviewDocument(mimeType) === "text";
 }
 </script>
 
@@ -267,7 +242,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 +344,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 +362,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