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

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

@@ -7,6 +7,8 @@ import {
 } from "@copilotkit/shared";
 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";
 
@@ -25,7 +27,16 @@ const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
 const activeLightboxAttachment = ref<Attachment | null>(null);
 const documentBlobUrl = ref<string | null>(null);
 
-const isLightboxOpen = computed(() => activeLightboxAttachment.value !== null);
+const lightboxLabel = computed(() => {
+  const attachment = activeLightboxAttachment.value;
+  if (!attachment) return undefined;
+  if (attachment.filename) return attachment.filename;
+  return attachment.type === "image"
+    ? "Image attachment"
+    : attachment.type === "video"
+      ? "Video attachment"
+      : "Document";
+});
 const isPreviewableDocument = computed(() => {
   const attachment = activeLightboxAttachment.value;
   if (!attachment || attachment.type !== "document") return false;
@@ -78,20 +89,6 @@ watch(
   { immediate: true },
 );
 
-watch(isLightboxOpen, (open, _previous, onCleanup) => {
-  if (!open || typeof document === "undefined") return;
-
-  const handleKeydown = (event: KeyboardEvent) => {
-    if (event.key === "Escape") {
-      closeLightbox();
-    }
-  };
-  document.addEventListener("keydown", handleKeydown);
-  onCleanup(() => {
-    document.removeEventListener("keydown", handleKeydown);
-  });
-});
-
 onBeforeUnmount(() => {
   if (documentBlobUrl.value) {
     URL.revokeObjectURL(documentBlobUrl.value);
@@ -120,12 +117,12 @@ function closeLightbox() {
 
 function cardClassName(attachment: Attachment) {
   if (attachment.type === "image" || attachment.type === "video") {
-    return "cpk:w-[72px] cpk:h-[72px]";
+    return "cpk-attachment-queue-item-media";
   }
   if (attachment.type === "audio") {
-    return "cpk:min-w-[200px] cpk:max-w-[280px] cpk:flex-col cpk:p-1 cpk:pr-8";
+    return "cpk-attachment-queue-item-audio";
   }
-  return "cpk:p-2 cpk:px-3 cpk:pr-8 cpk:max-w-[240px]";
+  return "cpk-attachment-queue-item-document";
 }
 
 function isPdf(mimeType: string | undefined): boolean {
@@ -160,92 +157,87 @@ function createBlobUrl(
 <template>
   <div
     v-if="props.attachments.length > 0"
-    class="cpk:flex cpk:flex-wrap cpk:gap-2 cpk:p-2"
+    class="cpk-attachment-queue"
     :class="props.className"
     data-testid="copilot-chat-attachment-queue"
   >
     <div
       v-for="attachment in props.attachments"
       :key="attachment.id"
-      class="cpk:relative cpk:inline-flex cpk:rounded-lg cpk:overflow-hidden cpk:border cpk:border-border"
+      class="cpk-attachment-queue-item"
       :class="cardClassName(attachment)"
       data-testid="copilot-chat-attachment-item"
       :data-card-type="attachment.type"
     >
       <div
         v-if="attachment.status === 'uploading'"
-        class="cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:bg-black/40 cpk:z-10"
+        class="cpk-attachment-queue-uploading-overlay"
         data-testid="copilot-chat-attachment-uploading-overlay"
       >
-        <div
-          class="cpk:w-5 cpk:h-5 cpk:border-2 cpk:border-white cpk:border-t-transparent cpk:rounded-full cpk:animate-spin"
-        />
+        <div class="cpk-attachment-queue-uploading-spinner" />
       </div>
 
       <template v-if="attachment.status === 'ready'">
         <button
           v-if="attachment.type === 'image'"
           type="button"
-          class="cpk:w-full cpk:h-full cpk:border-none cpk:bg-transparent cpk:p-0 cpk:cursor-pointer"
+          class="cpk-attachment-queue-preview-button"
           data-testid="copilot-chat-attachment-image-button"
           @click="openLightbox(attachment)"
         >
           <img
             :src="getSourceUrl(attachment.source)"
             :alt="attachment.filename || 'Image attachment'"
-            class="cpk:w-full cpk:h-full cpk:object-cover"
+            class="cpk-attachment-queue-image"
             data-testid="copilot-chat-attachment-image-thumbnail"
           />
         </button>
 
-        <div
-          v-else-if="attachment.type === 'video'"
-          class="cpk:w-full cpk:h-full cpk:relative"
-        >
-          <img
-            v-if="attachment.thumbnail"
-            :src="attachment.thumbnail"
-            :alt="attachment.filename || 'Video thumbnail'"
-            class="cpk:w-full cpk:h-full cpk:object-cover"
-            data-testid="copilot-chat-attachment-video-thumbnail"
-          />
-          <video
-            v-else
-            :src="getSourceUrl(attachment.source)"
-            preload="metadata"
-            muted
-            class="cpk:w-full cpk:h-full cpk:object-cover"
-            data-testid="copilot-chat-attachment-video-fallback"
-          />
+        <template v-else-if="attachment.type === 'video'">
+          <div class="cpk-attachment-queue-video">
+            <img
+              v-if="attachment.thumbnail"
+              :src="attachment.thumbnail"
+              :alt="attachment.filename || 'Video thumbnail'"
+              class="cpk-attachment-queue-video-thumbnail"
+              data-testid="copilot-chat-attachment-video-thumbnail"
+            />
+            <video
+              v-else
+              :src="getSourceUrl(attachment.source)"
+              preload="metadata"
+              muted
+              class="cpk-attachment-queue-video-thumbnail"
+              data-testid="copilot-chat-attachment-video-fallback"
+            />
+          </div>
           <button
             type="button"
-            class="cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:z-10 cpk:cursor-pointer cpk:bg-black/20 cpk:border-none cpk:p-0"
+            class="cpk-attachment-queue-video-play-button"
             :aria-label="labels.attachmentPlayVideoButtonLabel"
             data-testid="copilot-chat-attachment-video-play"
             @click="openLightbox(attachment)"
           >
-            <div
-              class="cpk:w-8 cpk:h-8 cpk:rounded-full cpk:bg-black/60 cpk:flex cpk:items-center cpk:justify-center cpk:text-white cpk:text-xs cpk:font-semibold"
-            >
-              ▶
+            <div class="cpk-attachment-queue-video-play-badge">
+              <IconPlay class="cpk-attachment-queue-video-play-icon" />
             </div>
           </button>
-        </div>
+        </template>
 
         <div
           v-else-if="attachment.type === 'audio'"
-          class="cpk:flex cpk:flex-col cpk:gap-1 cpk:w-full"
+          class="cpk-attachment-queue-audio"
         >
           <audio
             :src="getSourceUrl(attachment.source)"
             controls
             preload="metadata"
-            class="cpk:w-full cpk:h-8"
+            class="cpk-attachment-queue-audio-player"
             data-testid="copilot-chat-attachment-audio-player"
           />
           <span
             v-if="attachment.filename"
-            class="cpk:text-xs cpk:font-medium cpk:overflow-hidden cpk:text-ellipsis cpk:whitespace-nowrap"
+            class="cpk-attachment-queue-audio-filename"
           >
             {{ attachment.filename }}
           </span>
@@ -254,13 +246,12 @@ function createBlobUrl(
         <button
           v-else
           type="button"
-          class="cpk:flex cpk:items-center cpk:gap-2 cpk:w-full cpk:border-none cpk:bg-transparent cpk:p-0 cpk:text-left"
-          :class="
-            isPdf(attachment.source.mimeType) ||
-            isText(attachment.source.mimeType)
-              ? 'cpk:cursor-pointer'
-              : 'cpk:cursor-default'
-          "
+          class="cpk-attachment-queue-preview-button cpk-attachment-queue-document"
+          :class="{
+            'cpk-attachment-queue-document-previewable':
+              isPdf(attachment.source.mimeType) ||
+              isText(attachment.source.mimeType),
+          }"
           data-testid="copilot-chat-attachment-document-button"
           @click="
             (isPdf(attachment.source.mimeType) ||
@@ -268,21 +259,19 @@ function createBlobUrl(
             openLightbox(attachment)
           "
         >
-          <div
-            class="cpk:w-8 cpk:h-8 cpk:rounded-md cpk:bg-primary cpk:text-primary-foreground cpk:flex cpk:items-center cpk:justify-center cpk:text-[10px] cpk:font-semibold cpk:shrink-0"
-          >
+          <div class="cpk-attachment-queue-document-icon">
             {{ getDocumentIcon(attachment.source.mimeType ?? "") }}
           </div>
-          <div class="cpk:flex cpk:flex-col cpk:min-w-0">
+          <div class="cpk-attachment-queue-document-info">
             <span
-              class="cpk:text-xs cpk:font-medium cpk:break-all cpk:leading-tight"
+              class="cpk-attachment-queue-document-name"
               data-testid="copilot-chat-attachment-document-filename"
             >
               {{ attachment.filename || "Document" }}
             </span>
             <span
               v-if="attachment.size != null"
-              class="cpk:text-[11px] cpk:text-muted-foreground"
+              class="cpk-attachment-queue-document-size"
             >
               {{ formatFileSize(attachment.size) }}
             </span>
@@ -292,13 +281,13 @@ function createBlobUrl(
 
       <div
         v-else
-        class="cpk:w-full cpk:h-full cpk:bg-muted-foreground/20"
+        class="cpk-attachment-queue-placeholder"
         data-testid="copilot-chat-attachment-placeholder"
       />
 
       <button
         type="button"
-        class="cpk:absolute cpk:bg-black/60 cpk:text-white cpk:border-none cpk:rounded-full cpk:w-5 cpk:h-5 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:text-[10px] cpk:z-20 cpk:top-1 cpk:right-1"
+        class="cpk-attachment-queue-remove-button"
         :aria-label="labels.attachmentRemoveButtonLabel"
         @click="emit('remove-attachment', attachment.id)"
       >
@@ -307,110 +296,94 @@ function createBlobUrl(
     </div>
   </div>
 
-  <Teleport to="body">
-    <div
-      v-if="activeLightboxAttachment"
-      class="cpk:fixed cpk:inset-0 cpk:z-[9999] cpk:flex cpk:items-center cpk:justify-center cpk:bg-black/80"
-      data-testid="copilot-chat-attachment-lightbox"
-      @click="closeLightbox"
-    >
-      <button
-        type="button"
-        class="cpk:absolute cpk:top-4 cpk:right-4 cpk:text-white cpk:bg-white/10 cpk:hover:bg-white/20 cpk:rounded-full cpk:w-10 cpk:h-10 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:border-none"
-        :aria-label="labels.attachmentPreviewCloseButtonLabel"
-        @click.stop="closeLightbox"
-      >
-        ✕
-      </button>
+  <CopilotChatLightbox
+    v-if="activeLightboxAttachment"
+    :label="lightboxLabel"
+    @close="closeLightbox"
+  >
+    <img
+      v-if="activeLightboxAttachment.type === 'image'"
+      :src="getSourceUrl(activeLightboxAttachment.source)"
+      :alt="activeLightboxAttachment.filename || 'Image attachment'"
+      class="cpk-attachment-queue-lightbox-image"
+      data-testid="copilot-chat-attachment-lightbox-image"
+    />
 
-      <div data-testid="copilot-chat-attachment-lightbox-content" @click.stop>
-        <img
-          v-if="activeLightboxAttachment.type === 'image'"
-          :src="getSourceUrl(activeLightboxAttachment.source)"
-          :alt="activeLightboxAttachment.filename || 'Image attachment'"
-          class="cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:object-contain cpk:rounded-lg"
-          data-testid="copilot-chat-attachment-lightbox-image"
-        />
+    <video
+      v-else-if="activeLightboxAttachment.type === 'video'"
+      :src="getSourceUrl(activeLightboxAttachment.source)"
+      controls
+      autoplay
+      class="cpk-attachment-queue-lightbox-video"
+      data-testid="copilot-chat-attachment-lightbox-video"
+    />
 
-        <video
-          v-else-if="activeLightboxAttachment.type === 'video'"
-          :src="getSourceUrl(activeLightboxAttachment.source)"
-          controls
-          autoplay
-          class="cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:rounded-lg"
-          data-testid="copilot-chat-attachment-lightbox-video"
-        />
+    <template v-else-if="activeLightboxAttachment.type === 'document'">
+      <iframe
+        v-if="
+          isPreviewableDocument &&
+          isPdf(activeLightboxAttachment.source.mimeType) &&
+          lightboxDocumentSource
+        "
+        :src="lightboxDocumentSource"
+        :title="activeLightboxAttachment.filename || 'PDF preview'"
+        class="cpk-attachment-queue-pdf-preview"
+        data-testid="copilot-chat-attachment-lightbox-document-iframe"
+      />
 
-        <template v-else-if="activeLightboxAttachment.type === 'document'">
-          <iframe
-            v-if="
-              isPreviewableDocument &&
-              isPdf(activeLightboxAttachment.source.mimeType) &&
-              lightboxDocumentSource
-            "
-            :src="lightboxDocumentSource"
-            :title="activeLightboxAttachment.filename || 'PDF preview'"
-            class="cpk:w-[90vw] cpk:h-[90vh] cpk:max-w-[1000px] cpk:rounded-lg cpk:bg-white"
-            data-testid="copilot-chat-attachment-lightbox-document-iframe"
-          />
+      <div
+        v-else-if="
+          isPreviewableDocument &&
+          isText(activeLightboxAttachment.source.mimeType)
+        "
+        class="cpk-attachment-queue-text-preview"
+      >
+        <div
+          v-if="activeLightboxAttachment.filename"
+          class="cpk-attachment-queue-text-preview-filename"
+        >
+          {{ activeLightboxAttachment.filename }}
+        </div>
+        <pre
+          v-if="decodedTextPreview !== null"
+          class="cpk-attachment-queue-text-preview-content"
+          data-testid="copilot-chat-attachment-lightbox-document-text"
+          >{{ decodedTextPreview }}</pre
+        >
+        <iframe
+          v-else-if="lightboxDocumentSource"
+          :src="lightboxDocumentSource"
+          :title="activeLightboxAttachment.filename || 'Text preview'"
+          class="cpk-attachment-queue-text-preview-frame"
+          data-testid="copilot-chat-attachment-lightbox-document-iframe"
+        />
+      </div>
 
-          <div
-            v-else-if="
-              isPreviewableDocument &&
-              isText(activeLightboxAttachment.source.mimeType)
-            "
-            class="cpk:w-[90vw] cpk:max-w-[800px] cpk:max-h-[90vh] cpk:overflow-auto cpk:rounded-lg cpk:bg-white cpk:dark:bg-gray-900 cpk:p-6"
-          >
-            <pre
-              v-if="decodedTextPreview !== null"
-              class="cpk:text-sm cpk:whitespace-pre-wrap cpk:wrap-break-word cpk:text-gray-800 cpk:dark:text-gray-200 cpk:font-mono cpk:m-0"
-              data-testid="copilot-chat-attachment-lightbox-document-text"
-              >{{ decodedTextPreview }}</pre
-            >
-            <iframe
-              v-else-if="lightboxDocumentSource"
-              :src="lightboxDocumentSource"
-              :title="activeLightboxAttachment.filename || 'Text preview'"
-              class="cpk:w-full cpk:h-[80vh] cpk:border-none"
-              data-testid="copilot-chat-attachment-lightbox-document-iframe"
-            />
+      <div
+        v-else
+        class="cpk-attachment-queue-document-card"
+        data-testid="copilot-chat-attachment-lightbox-document-fallback"
+      >
+        <div class="cpk-attachment-queue-document-card-icon">
+          {{ getDocumentIcon(activeLightboxAttachment.source.mimeType ?? "") }}
+        </div>
+        <div class="cpk-attachment-queue-document-card-details">
+          <div class="cpk-attachment-queue-document-card-name">
+            {{ activeLightboxAttachment.filename || "Document" }}
           </div>
-
-          <div
-            v-else
-            class="cpk:flex cpk:flex-col cpk:items-center cpk:gap-4 cpk:p-8 cpk:rounded-lg cpk:bg-white cpk:dark:bg-gray-900"
-            data-testid="copilot-chat-attachment-lightbox-document-fallback"
-          >
-            <div
-              class="cpk:w-16 cpk:h-16 cpk:rounded-xl cpk:bg-primary cpk:text-primary-foreground cpk:flex cpk:items-center cpk:justify-center cpk:text-xl cpk:font-bold"
-            >
-              {{
-                getDocumentIcon(activeLightboxAttachment.source.mimeType ?? "")
-              }}
-            </div>
-            <div class="cpk:text-center">
-              <div
-                class="cpk:text-base cpk:font-medium cpk:text-gray-800 cpk:dark:text-gray-200"
-              >
-                {{ activeLightboxAttachment.filename || "Document" }}
-              </div>
-              <div
-                class="cpk:text-sm cpk:text-gray-500 cpk:dark:text-gray-400 cpk:mt-1"
-              >
-                {{ activeLightboxAttachment.source.mimeType || "Unknown type" }}
-                {{
-                  activeLightboxAttachment.size != null
-                    ? ` · ${formatFileSize(activeLightboxAttachment.size)}`
-                    : ""
-                }}
-              </div>
-            </div>
-            <div class="cpk:text-xs cpk:text-gray-400 cpk:dark:text-gray-500">
-              No preview available for this file type
-            </div>
+          <div class="cpk-attachment-queue-document-card-meta">
+            {{ activeLightboxAttachment.source.mimeType || "Unknown type" }}
+            {{
+              activeLightboxAttachment.size != null
+                ? ` · ${formatFileSize(activeLightboxAttachment.size)}`
+                : ""
+            }}
           </div>
-        </template>
+        </div>
+        <div class="cpk-attachment-queue-document-card-note">
+          No preview available for this file type
+        </div>
       </div>
-    </div>
-  </Teleport>
+    </template>
+  </CopilotChatLightbox>
 </template>

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

@@ -2,6 +2,8 @@
 import { computed, ref } from "vue";
 import { getDocumentIcon, getSourceUrl } from "@copilotkit/shared";
 import type { CopilotChatAttachmentRendererProps } from "./types";
+import CopilotChatLightbox from "./CopilotChatLightbox.vue";
+import { useLightbox } from "./use-lightbox";
 
 const props = withDefaults(defineProps<CopilotChatAttachmentRendererProps>(), {
   filename: undefined,
@@ -13,21 +15,59 @@ const sourceUrl = computed(() => getSourceUrl(props.source));
 const documentLabel = computed(
   () => props.filename || props.source.mimeType || "Unknown type",
 );
+const documentAriaLabel = computed(
+  () => props.filename || props.source.mimeType || "Document attachment",
+);
+
+const imageButton = ref<HTMLButtonElement | null>(null);
+const {
+  thumbnailRef,
+  vtName,
+  open: lightboxOpen,
+  openLightbox,
+  closeLightbox,
+} = useLightbox();
 </script>
 
 <template>
-  <img
+  <!-- React opens the lightbox from the <img>; a button around it lets
+       keyboard users open it too. The button has no look of its own. -->
+  <button
     v-if="props.type === 'image' && !imageLoadFailed"
-    :src="sourceUrl"
-    alt="Image attachment"
-    class="cpk:max-w-full cpk:h-auto cpk:rounded-lg"
-    :class="props.className"
-    data-testid="copilot-chat-attachment-renderer-image"
-    @error="imageLoadFailed = true"
-  />
+    ref="imageButton"
+    type="button"
+    class="cpk-attachment-renderer-image-button"
+    data-testid="copilot-chat-attachment-renderer-image-button"
+    @click="openLightbox"
+  >
+    <img
+      ref="thumbnailRef"
+      :src="sourceUrl"
+      alt="Image attachment"
+      class="cpk-attachment-renderer cpk-attachment-renderer-image"
+      :class="props.className"
+      data-testid="copilot-chat-attachment-renderer-image"
+      @error="imageLoadFailed = true"
+    />
+    <!-- Teleported to the body; inside the button only to keep one root. -->
+    <CopilotChatLightbox
+      v-if="lightboxOpen"
+      label="Image attachment"
+      :return-focus-to="imageButton"
+      @close="closeLightbox"
+    >
+      <img
+        :style="{ viewTransitionName: vtName }"
+        :src="sourceUrl"
+        alt="Image attachment"
+        class="cpk-attachment-renderer-lightbox-image"
+        data-testid="copilot-chat-attachment-renderer-lightbox-image"
+      />
+    </CopilotChatLightbox>
+  </button>
   <div
     v-else-if="props.type === 'image'"
-    class="cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:rounded-lg cpk:bg-muted cpk:p-4 cpk:text-sm cpk:text-muted-foreground"
+    class="cpk-attachment-renderer cpk-attachment-renderer-image-error"
     :class="props.className"
     data-testid="copilot-chat-attachment-renderer-image-fallback"
   >
@@ -36,7 +76,7 @@ const documentLabel = computed(
 
   <div
     v-else-if="props.type === 'audio'"
-    class="cpk:flex cpk:flex-col cpk:gap-1"
+    class="cpk-attachment-renderer cpk-attachment-renderer-audio"
     :class="props.className"
     data-testid="copilot-chat-attachment-renderer-audio"
   >
@@ -44,11 +84,11 @@ const documentLabel = computed(
       :src="sourceUrl"
       controls
       preload="metadata"
-      class="cpk:max-w-[300px] cpk:w-full cpk:h-10"
+      class="cpk-attachment-renderer-audio-player"
     />
     <span
       v-if="props.filename"
-      class="cpk:text-xs cpk:text-muted-foreground cpk:truncate cpk:max-w-[300px]"
+      class="cpk-attachment-renderer-audio-filename"
       data-testid="copilot-chat-attachment-renderer-audio-filename"
     >
       {{ props.filename }}
@@ -60,28 +100,37 @@ const documentLabel = computed(
     :src="sourceUrl"
     controls
     preload="metadata"
-    class="cpk:max-w-[400px] cpk:w-full cpk:rounded-lg"
+    class="cpk-attachment-renderer cpk-attachment-renderer-video"
     :class="props.className"
     data-testid="copilot-chat-attachment-renderer-video"
   />
 
-  <div
+  <!-- `download` is honoured for same-origin, data: and blob: URLs. Browsers
+       ignore it for cross-origin URLs unless the server sends
+       `Content-Disposition: attachment`; `target="_blank"` keeps those from
+       navigating the chat away and opens the file in a new tab instead. -->
+  <a
     v-else
-    class="cpk:inline-flex cpk:items-center cpk:gap-2 cpk:px-3 cpk:py-2 cpk:border cpk:border-border cpk:rounded-lg cpk:bg-muted"
+    :href="sourceUrl"
+    :download="props.filename ?? ''"
+    target="_blank"
+    rel="noopener noreferrer"
+    :aria-label="documentAriaLabel"
+    class="cpk-attachment-renderer cpk-attachment-renderer-document"
     :class="props.className"
     data-testid="copilot-chat-attachment-renderer-document"
   >
     <span
-      class="cpk:text-xs cpk:font-bold cpk:uppercase"
+      class="cpk-attachment-renderer-document-icon"
       data-testid="copilot-chat-attachment-renderer-document-icon"
     >
       {{ getDocumentIcon(props.source.mimeType ?? "") }}
     </span>
     <span
-      class="cpk:text-sm cpk:text-muted-foreground cpk:truncate"
+      class="cpk-attachment-renderer-document-name"
       data-testid="copilot-chat-attachment-renderer-document-label"
     >
       {{ documentLabel }}
     </span>
-  </div>
+  </a>
 </template>

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

@@ -263,7 +263,7 @@ defineExpose({
 </script>
 
 <template>
-  <div data-copilotkit class="cpk:w-full cpk:px-5 cpk:py-3" v-bind="attrs">
-    <canvas ref="canvasRef" class="cpk:block cpk:h-[26px] cpk:w-full" />
+  <div data-copilotkit class="cpk-audio-recorder" v-bind="attrs">
+    <canvas ref="canvasRef" class="cpk-audio-recorder-canvas" />
   </div>
 </template>