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

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

@@ -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

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

@@ -1,264 +1,37 @@
 <script setup lang="ts">
-import { onBeforeUnmount, ref, useAttrs, watch } from "vue";
-import { AudioRecorderError } from "./audioRecorder";
-import type { AudioRecorderState } from "./audioRecorder";
+/**
+ * Records from the microphone and draws the live level as a scrolling
+ * waveform. The recording itself is `ɵAudioRecorder` from
+ * `@copilotkit/core`; control it through the exposed ref.
+ */
+import { onBeforeUnmount, onMounted, ref, useAttrs } from "vue";
+import { ɵAudioRecorder, ɵcreateWaveformRenderer } from "@copilotkit/core";
 
 defineOptions({ inheritAttrs: false });
 
 const attrs = useAttrs();
 const canvasRef = ref<HTMLCanvasElement | null>(null);
-const recorderState = ref<AudioRecorderState>("idle");
-const mediaRecorderRef = ref<MediaRecorder | null>(null);
-const streamRef = ref<MediaStream | null>(null);
-const analyserRef = ref<AnalyserNode | null>(null);
-const audioContextRef = ref<AudioContext | null>(null);
-const animationIdRef = ref<number | null>(null);
-const audioChunksRef = ref<Blob[]>([]);
-const amplitudeHistoryRef = ref<number[]>([]);
-const scrollOffsetRef = ref(0);
-const smoothedAmplitudeRef = ref(0);
-const fadeOpacityRef = ref(0);
+const recorder = new ɵAudioRecorder();
+let waveform: { dispose: () => void } | undefined;
 
-function cleanup() {
-  if (animationIdRef.value !== null) {
-    cancelAnimationFrame(animationIdRef.value);
-    animationIdRef.value = null;
+onMounted(() => {
+  if (canvasRef.value) {
+    waveform = ɵcreateWaveformRenderer(canvasRef.value, recorder);
   }
-
-  const recorder = mediaRecorderRef.value;
-  if (recorder && recorder.state !== "inactive") {
-    try {
-      recorder.stop();
-    } catch {
-      // ignore cleanup stop failures
-    }
-  }
-
-  if (streamRef.value) {
-    streamRef.value.getTracks().forEach((track) => track.stop());
-    streamRef.value = null;
-  }
-
-  const audioContext = audioContextRef.value;
-  if (audioContext && audioContext.state !== "closed") {
-    audioContext.close().catch(() => {
-      // ignore close errors
-    });
-  }
-
-  mediaRecorderRef.value = null;
-  analyserRef.value = null;
-  audioContextRef.value = null;
-  audioChunksRef.value = [];
-  amplitudeHistoryRef.value = [];
-  scrollOffsetRef.value = 0;
-  smoothedAmplitudeRef.value = 0;
-  fadeOpacityRef.value = 0;
-}
-
-async function start() {
-  if (recorderState.value !== "idle") {
-    throw new AudioRecorderError("Recorder is already active");
-  }
-
-  try {
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    streamRef.value = stream;
-
-    const audioContext = new AudioContext();
-    audioContextRef.value = audioContext;
-    const source = audioContext.createMediaStreamSource(stream);
-    const analyser = audioContext.createAnalyser();
-    analyser.fftSize = 2048;
-    source.connect(analyser);
-    analyserRef.value = analyser;
-
-    const mimeType = MediaRecorder.isTypeSupported("audio/webm;codecs=opus")
-      ? "audio/webm;codecs=opus"
-      : MediaRecorder.isTypeSupported("audio/webm")
-        ? "audio/webm"
-        : MediaRecorder.isTypeSupported("audio/mp4")
-          ? "audio/mp4"
-          : "";
-
-    const options = mimeType ? { mimeType } : {};
-    const recorder = new MediaRecorder(stream, options);
-    mediaRecorderRef.value = recorder;
-    audioChunksRef.value = [];
-
-    recorder.ondataavailable = (event) => {
-      if (event.data.size > 0) {
-        audioChunksRef.value.push(event.data);
-      }
-    };
-
-    recorder.start(100);
-    recorderState.value = "recording";
-  } catch (error) {
-    cleanup();
-    if (error instanceof Error && error.name === "NotAllowedError") {
-      throw new AudioRecorderError("Microphone permission denied");
-    }
-    if (error instanceof Error && error.name === "NotFoundError") {
-      throw new AudioRecorderError("No microphone found");
-    }
-    throw new AudioRecorderError(
-      error instanceof Error ? error.message : "Failed to start recording",
-    );
-  }
-}
-
-function stop() {
-  return new Promise<Blob>((resolve, reject) => {
-    const recorder = mediaRecorderRef.value;
-    if (!recorder || recorderState.value !== "recording") {
-      reject(new AudioRecorderError("No active recording"));
-      return;
-    }
-
-    recorderState.value = "processing";
-    recorder.onstop = () => {
-      const audioBlob = new Blob(audioChunksRef.value, {
-        type: recorder.mimeType || "audio/webm",
-      });
-      cleanup();
-      recorderState.value = "idle";
-      resolve(audioBlob);
-    };
-    recorder.onerror = () => {
-      cleanup();
-      recorderState.value = "idle";
-      reject(new AudioRecorderError("Recording failed"));
-    };
-    recorder.stop();
-  });
-}
-
-function calculateAmplitude(dataArray: Uint8Array) {
-  let sum = 0;
-  for (let index = 0; index < dataArray.length; index += 1) {
-    const sample = (dataArray[index] ?? 128) / 128 - 1;
-    sum += sample * sample;
-  }
-  return Math.sqrt(sum / dataArray.length);
-}
-
-function drawFrame() {
-  const canvas = canvasRef.value;
-  if (!canvas) {
-    return;
-  }
-
-  const context = canvas.getContext("2d");
-  if (!context) {
-    return;
-  }
-
-  const rect = canvas.getBoundingClientRect();
-  const dpr = window.devicePixelRatio || 1;
-  if (
-    canvas.width !== rect.width * dpr ||
-    canvas.height !== rect.height * dpr
-  ) {
-    canvas.width = rect.width * dpr;
-    canvas.height = rect.height * dpr;
-    context.scale(dpr, dpr);
-  }
-
-  const barWidth = 2;
-  const barGap = 1;
-  const barSpacing = barWidth + barGap;
-  const maxBars = Math.floor(rect.width / barSpacing) + 2;
-
-  if (analyserRef.value && recorderState.value === "recording") {
-    if (amplitudeHistoryRef.value.length === 0) {
-      amplitudeHistoryRef.value = Array.from({ length: maxBars }, () => 0);
-    }
-
-    if (fadeOpacityRef.value < 1) {
-      fadeOpacityRef.value = Math.min(1, fadeOpacityRef.value + 0.03);
-    }
-
-    scrollOffsetRef.value += 1 / 3;
-    const bufferLength = analyserRef.value.fftSize;
-    const dataArray = new Uint8Array(bufferLength);
-    analyserRef.value.getByteTimeDomainData(dataArray);
-    const rawAmplitude = calculateAmplitude(dataArray);
-    const attackSpeed = 0.12;
-    const decaySpeed = 0.08;
-    const speed =
-      rawAmplitude > smoothedAmplitudeRef.value ? attackSpeed : decaySpeed;
-    smoothedAmplitudeRef.value +=
-      (rawAmplitude - smoothedAmplitudeRef.value) * speed;
-
-    if (scrollOffsetRef.value >= barSpacing) {
-      scrollOffsetRef.value -= barSpacing;
-      amplitudeHistoryRef.value.push(smoothedAmplitudeRef.value);
-      if (amplitudeHistoryRef.value.length > maxBars) {
-        amplitudeHistoryRef.value = amplitudeHistoryRef.value.slice(-maxBars);
-      }
-    }
-  }
-
-  context.clearRect(0, 0, rect.width, rect.height);
-  const computedStyle = window.getComputedStyle(canvas);
-  context.fillStyle = computedStyle.color;
-  context.globalAlpha = fadeOpacityRef.value;
-
-  const centerY = rect.height / 2;
-  const maxAmplitude = rect.height / 2 - 2;
-  const edgeFadeWidth = 12;
-
-  for (let index = 0; index < amplitudeHistoryRef.value.length; index += 1) {
-    const amplitude = amplitudeHistoryRef.value[index] ?? 0;
-    const scaledAmplitude = Math.min(amplitude * 4, 1);
-    const barHeight = Math.max(2, scaledAmplitude * maxAmplitude * 2);
-    const x =
-      rect.width -
-      (amplitudeHistoryRef.value.length - index) * barSpacing -
-      scrollOffsetRef.value;
-    const y = centerY - barHeight / 2;
-    if (x + barWidth <= 0 || x >= rect.width) {
-      continue;
-    }
-
-    let edgeOpacity = 1;
-    if (x < edgeFadeWidth) {
-      edgeOpacity = Math.max(0, x / edgeFadeWidth);
-    } else if (x > rect.width - edgeFadeWidth) {
-      edgeOpacity = Math.max(0, (rect.width - x) / edgeFadeWidth);
-    }
-
-    context.globalAlpha = fadeOpacityRef.value * edgeOpacity;
-    context.fillRect(x, y, barWidth, barHeight);
-  }
-
-  animationIdRef.value = requestAnimationFrame(drawFrame);
-}
-
-watch(
-  recorderState,
-  () => {
-    if (animationIdRef.value !== null) {
-      cancelAnimationFrame(animationIdRef.value);
-      animationIdRef.value = null;
-    }
-    animationIdRef.value = requestAnimationFrame(drawFrame);
-  },
-  { immediate: true },
-);
+});
 
 onBeforeUnmount(() => {
-  cleanup();
+  waveform?.dispose();
+  recorder.dispose();
 });
 
 defineExpose({
   get state() {
-    return recorderState.value;
+    return recorder.getSnapshot();
   },
-  start,
-  stop,
-  dispose: cleanup,
+  start: () => recorder.start(),
+  stop: () => recorder.stop(),
+  dispose: () => recorder.dispose(),
 });
 </script>
 

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