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

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

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref } from "vue";
 import type { UserMessage } from "@ag-ui/core";
+import type {
+  AudioInputPart,
+  DocumentInputPart,
+  ImageInputPart,
+  VideoInputPart,
+} from "@copilotkit/shared";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import { CopilotChatDefaultLabels } from "../../providers/types";
 import {
@@ -10,6 +16,8 @@ import {
   IconCopy,
   IconEdit,
 } from "../icons";
+import CopilotTooltip from "../ui/CopilotTooltip.vue";
+import CopilotChatAttachmentRenderer from "./CopilotChatAttachmentRenderer.vue";
 import type {
   CopilotChatUserMessageBranchNavigationSlotProps,
   CopilotChatUserMessageCopyButtonSlotProps,
@@ -61,12 +69,9 @@ const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
 const copied = ref(false);
 let copiedResetTimeout: ReturnType<typeof setTimeout> | null = null;
 
-const toolbarButtonClass = [
-  "cpk:inline-flex cpk:h-8 cpk:w-8 cpk:items-center cpk:justify-center cpk:rounded-md cpk:p-0",
-  "cpk:cursor-pointer cpk:text-[rgb(93,93,93)] cpk:transition-colors cpk:hover:bg-[#E8E8E8]",
-  "cpk:hover:text-[rgb(93,93,93)] cpk:dark:text-[rgb(243,243,243)] cpk:dark:hover:bg-[#303030]",
-  "cpk:dark:hover:text-[rgb(243,243,243)] cpk:disabled:pointer-events-none cpk:disabled:opacity-50",
-].join(" ");
+// Styles live in @copilotkit/core (ui/button.css, user-message.css).
+const toolbarButtonClass =
+  "cpk-button cpk-button-assistant-message-toolbar cpk-button-size-default";
 
 function flattenUserMessageContent(content?: UserMessage["content"]): string {
   if (!content) {
@@ -94,6 +99,38 @@ function flattenUserMessageContent(content?: UserMessage["content"]): string {
     .join("\n");
 }
 
+type MediaPart =
+  | ImageInputPart
+  | AudioInputPart
+  | VideoInputPart
+  | DocumentInputPart;
+
+function getMediaParts(content: UserMessage["content"]): MediaPart[] {
+  if (!content || typeof content === "string") return [];
+  return content.filter(
+    (part): part is MediaPart =>
+      part.type === "image" ||
+      part.type === "audio" ||
+      part.type === "video" ||
+      part.type === "document",
+  );
+}
+
+function getFilename(part: MediaPart): string | undefined {
+  const meta = part.metadata;
+  if (
+    meta != null &&
+    typeof meta === "object" &&
+    "filename" in meta &&
+    typeof meta.filename === "string"
+  ) {
+    return meta.filename;
+  }
+  return undefined;
+}
+
+const mediaParts = computed(() => getMediaParts(props.message.content));
+
 const flattenedContent = computed(() =>
   flattenUserMessageContent(props.message.content),
 );
@@ -204,21 +241,31 @@ onBeforeUnmount(() => {
     <div
       data-copilotkit
       data-testid="copilot-user-message"
-      class="cpk:flex cpk:flex-col cpk:items-end cpk:group cpk:pt-10"
+      class="copilotKitMessage copilotKitUserMessage cpk-user-message"
       :data-message-id="message.id"
       v-bind="$attrs"
     >
+      <div
+        v-if="mediaParts.length > 0"
+        class="cpk-user-message-attachments"
+        data-testid="copilot-user-message-attachments"
+      >
+        <CopilotChatAttachmentRenderer
+          v-for="(part, index) in mediaParts"
+          :key="index"
+          :type="part.type"
+          :source="part.source"
+          :filename="getFilename(part)"
+        />
+      </div>
+
       <slot
         name="message-renderer"
         :message="message"
         :content="flattenedContent"
         :is-multiline="isMultiline"
       >
-        <div
-          class="cpk:prose cpk:dark:prose-invert cpk:bg-muted cpk:relative cpk:max-w-[80%] cpk:rounded-[18px] cpk:px-4 cpk:py-1.5 cpk:inline-block cpk:whitespace-pre-wrap"
-          :data-multiline="isMultiline ? 'true' : undefined"
-          :class="{ 'cpk:py-3': isMultiline }"
-        >
+        <div class="cpk-user-message-bubble">
           {{ flattenedContent }}
         </div>
       </slot>
@@ -230,9 +277,10 @@ onBeforeUnmount(() => {
         :has-edit-action="hasEditAction"
       >
         <div
-          class="cpk:w-full cpk:bg-transparent cpk:flex cpk:items-center cpk:justify-end cpk:-mr-[5px] cpk:mt-[4px] cpk:invisible cpk:group-hover:visible"
+          data-testid="copilot-user-toolbar"
+          class="cpk-user-message-toolbar"
         >
-          <div class="cpk:flex cpk:items-center cpk:gap-1 cpk:justify-end">
+          <div class="cpk-user-message-toolbar-items">
             <slot name="toolbar-items" />
 
             <slot
@@ -241,17 +289,26 @@ onBeforeUnmount(() => {
               :copied="copied"
               :label="labels.userMessageToolbarCopyMessageLabel"
             >
-              <button
-                data-testid="copilot-user-copy-button"
-                type="button"
-                :class="toolbarButtonClass"
-                :aria-label="labels.userMessageToolbarCopyMessageLabel"
-                :title="labels.userMessageToolbarCopyMessageLabel"
-                @click="handleCopyMessage"
+              <CopilotTooltip
+                v-slot="{ triggerProps }"
+                :content="labels.userMessageToolbarCopyMessageLabel"
+                side="bottom"
               >
-                <IconCheck v-if="copied" class="cpk:size-[18px]" />
-                <IconCopy v-else class="cpk:size-[18px]" />
-              </button>
+                <button
+                  data-testid="copilot-user-copy-button"
+                  type="button"
+                  :class="toolbarButtonClass"
+                  :aria-label="labels.userMessageToolbarCopyMessageLabel"
+                  v-bind="triggerProps"
+                  @click="handleCopyMessage"
+                >
+                  <IconCheck
+                    v-if="copied"
+                    class="cpk-user-message-toolbar-icon"
+                  />
+                  <IconCopy v-else class="cpk-user-message-toolbar-icon" />
+                </button>
+              </CopilotTooltip>
             </slot>
 
             <slot
@@ -260,15 +317,22 @@ onBeforeUnmount(() => {
               :on-edit="handleEditMessage"
               :label="labels.userMessageToolbarEditMessageLabel"
             >
-              <button
-                type="button"
-                :class="toolbarButtonClass"
-                :aria-label="labels.userMessageToolbarEditMessageLabel"
-                :title="labels.userMessageToolbarEditMessageLabel"
-                @click="handleEditMessage"
+              <CopilotTooltip
+                v-slot="{ triggerProps }"
+                :content="labels.userMessageToolbarEditMessageLabel"
+                side="bottom"
               >
-                <IconEdit class="cpk:size-[18px]" />
-              </button>
+                <button
+                  data-testid="copilot-edit-button"
+                  type="button"
+                  :class="toolbarButtonClass"
+                  :aria-label="labels.userMessageToolbarEditMessageLabel"
+                  v-bind="triggerProps"
+                  @click="handleEditMessage"
+                >
+                  <IconEdit class="cpk-user-message-toolbar-icon" />
+                </button>
+              </CopilotTooltip>
             </slot>
 
             <slot
@@ -284,33 +348,32 @@ onBeforeUnmount(() => {
               :go-prev="goPrev"
               :go-next="goNext"
             >
-              <div class="cpk:flex cpk:items-center cpk:gap-1">
+              <div
+                data-testid="copilot-branch-navigation"
+                class="cpk-user-message-branch-navigation"
+              >
                 <button
                   type="button"
                   :class="toolbarButtonClass"
-                  class="cpk:h-6 cpk:w-6 cpk:p-0"
+                  class="cpk-user-message-branch-button"
                   :disabled="!canGoPrev"
                   :aria-label="labels.userMessageToolbarPreviousBranchLabel"
-                  :title="labels.userMessageToolbarPreviousBranchLabel"
                   @click="goPrev"
                 >
-                  <IconChevronLeft class="cpk:size-[20px]" />
+                  <IconChevronLeft class="cpk-user-message-branch-icon" />
                 </button>
-                <span
-                  class="cpk:text-sm cpk:text-muted-foreground cpk:px-0 cpk:font-medium"
-                >
+                <span class="cpk-user-message-branch-counter">
                   {{ branchIndex + 1 }}/{{ numberOfBranches }}
                 </span>
                 <button
                   type="button"
                   :class="toolbarButtonClass"
-                  class="cpk:h-6 cpk:w-6 cpk:p-0"
+                  class="cpk-user-message-branch-button"
                   :disabled="!canGoNext"
                   :aria-label="labels.userMessageToolbarNextBranchLabel"
-                  :title="labels.userMessageToolbarNextBranchLabel"
                   @click="goNext"
                 >
-                  <IconChevronRight class="cpk:size-[20px]" />
+                  <IconChevronRight class="cpk-user-message-branch-icon" />
                 </button>
               </div>
             </slot>

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

@@ -15,7 +15,7 @@ import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfi
 import { CopilotChatDefaultLabels } from "../../providers/types";
 import { useKeyboardHeight } from "../../hooks/use-keyboard-height";
 import { usePinToSend } from "../../hooks/use-pin-to-send";
-import { IconChevronDown } from "../icons";
+import { IconChevronDown, IconUpload } from "../icons";
 import CopilotChatInput from "./CopilotChatInput.vue";
 import CopilotChatAttachmentQueue from "./CopilotChatAttachmentQueue.vue";
 import CopilotChatMessageView from "./CopilotChatMessageView.vue";
@@ -34,6 +34,7 @@ const SCROLL_BUTTON_OFFSET = 16;
 const SCROLL_BOTTOM_THRESHOLD = 12;
 
 const props = withDefaults(defineProps<CopilotChatViewProps>(), {
+  messageFeedback: true,
   messages: () => [],
   autoScroll: true,
   isRunning: false,
@@ -441,8 +442,9 @@ onBeforeUnmount(() => {
 <template>
   <div
     data-copilotkit
-    class="copilotKitChat cpk:@container cpk:relative cpk:h-full"
+    class="copilotKitChat cpk-chat-view"
     data-testid="copilot-chat-view"
+    :data-copilot-running="isRunning ? 'true' : 'false'"
     v-bind="$attrs"
     @dragover="handleDragOver"
     @dragleave="handleDragLeave"
@@ -450,12 +452,13 @@ onBeforeUnmount(() => {
   >
     <div
       v-if="dragOver"
-      class="cpk:absolute cpk:inset-0 cpk:z-50 cpk:pointer-events-none cpk:flex cpk:items-center cpk:justify-center cpk:bg-primary/5 cpk:border-2 cpk:border-dashed cpk:border-primary/40 cpk:rounded-lg cpk:m-2"
+      class="cpk-chat-view-drop-overlay"
       data-testid="copilot-chat-drop-overlay"
     >
-      <span class="cpk:text-sm cpk:font-medium cpk:text-primary/70">
-        Drop files here
-      </span>
+      <div class="cpk-chat-view-drop-overlay-content">
+        <IconUpload class="cpk-chat-view-drop-overlay-icon" />
+        <span class="cpk-chat-view-drop-overlay-label">Drop files here</span>
+      </div>
     </div>
     <slot
       v-if="shouldShowWelcomeScreen"
@@ -481,27 +484,25 @@ onBeforeUnmount(() => {
       :on-select-suggestion="handleSelectSuggestion"
     >
       <div
-        class="cpk:flex cpk:h-full cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4"
+        class="cpk-chat-view-welcome-screen"
         data-testid="copilot-chat-view-welcome-screen"
       >
-        <div
-          class="cpk:w-full cpk:max-w-3xl cpk:flex cpk:flex-col cpk:items-center"
-        >
-          <div class="cpk:mb-6">
+        <div class="cpk-chat-view-welcome-screen-content">
+          <div class="cpk-chat-view-welcome-screen-message">
             <slot name="welcome-message">
-              <h1
-                class="cpk:text-xl cpk:sm:text-2xl cpk:font-medium cpk:text-foreground cpk:text-center"
-              >
+              <h1 class="cpk-chat-view-welcome-message">
                 {{ labels.welcomeMessageText }}
               </h1>
             </slot>
           </div>
 
-          <div class="cpk:w-full">
+          <div
+            class="cpk-chat-view-welcome-screen-input cpk-chat-view-welcome-input-group"
+          >
             <CopilotChatAttachmentQueue
               v-if="hasAttachments"
               :attachments="attachments ?? []"
-              class-name="cpk:mb-2"
+              class-name="cpk-chat-view-welcome-attachment-queue"
               @remove-attachment="
                 (id: string) => onRemoveAttachment && onRemoveAttachment(id)
               "
@@ -540,7 +541,7 @@ onBeforeUnmount(() => {
 
           <div
             v-if="hasSuggestions"
-            class="cpk:mt-4 cpk:flex cpk:justify-center"
+            class="cpk-chat-view-welcome-screen-suggestions"
           >
             <slot
               name="suggestion-view"
@@ -549,6 +550,7 @@ onBeforeUnmount(() => {
               :on-select-suggestion="handleSelectSuggestion"
             >
               <CopilotChatSuggestionView
+                class="cpk-chat-view-suggestion-view"
                 :suggestions="suggestions"
                 :loading-indexes="suggestionLoadingIndexes"
                 @select-suggestion="handleSelectSuggestion"
@@ -575,18 +577,16 @@ onBeforeUnmount(() => {
         <div
           ref="scrollContainerRef"
           data-testid="copilot-chat-view-scroll"
-          class="cpk:h-full cpk:max-h-full cpk:min-h-0 cpk:overflow-y-scroll cpk:overflow-x-hidden cpk:relative"
+          class="cpk-chat-view-scroll-area cpk-chat-view-scroll-viewport"
           @scroll="handleScroll"
         >
-          <div
-            class="cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6"
-          >
+          <div class="cpk-chat-view-scroll-content">
             <div
               ref="scrollContentRef"
               data-testid="copilot-scroll-content"
               :style="{ paddingBottom: messagePaddingBottom }"
             >
-              <div class="cpk:max-w-3xl cpk:mx-auto">
+              <div class="cpk-chat-view-feed">
                 <slot
                   name="message-view"
                   :messages="messages"
@@ -595,6 +595,8 @@ onBeforeUnmount(() => {
                   <CopilotChatMessageView
                     :messages="messages"
                     :is-running="isRunning"
+                    :tool-call-display="toolCallDisplay"
+                    :message-feedback="messageFeedback"
                   >
                     <template
                       v-for="slotName in forwardedMessageViewSlotNames"
@@ -605,10 +607,7 @@ onBeforeUnmount(() => {
                     </template>
                   </CopilotChatMessageView>
                 </slot>
-                <div
-                  v-if="hasSuggestions"
-                  class="cpk:mt-4 cpk:pl-0 cpk:pr-4 cpk:@3xl:px-0"
-                >
+                <div v-if="hasSuggestions" class="cpk-chat-view-suggestions">
                   <slot
                     name="suggestion-view"
                     :suggestions="suggestions"
@@ -616,7 +615,7 @@ onBeforeUnmount(() => {
                     :on-select-suggestion="handleSelectSuggestion"
                   >
                     <CopilotChatSuggestionView
-                      class="cpk:mb-3 cpk:lg:ml-4 cpk:lg:mr-4 cpk:ml-0 cpk:mr-0"
+                      class="cpk-chat-view-suggestion-view"
                       :suggestions="suggestions"
                       :loading-indexes="suggestionLoadingIndexes"
                       @select-suggestion="handleSelectSuggestion"
@@ -653,7 +652,7 @@ onBeforeUnmount(() => {
 
       <div
         v-if="showScrollToBottomButton"
-        class="cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none"
+        class="cpk-chat-view-scroll-to-bottom"
         :style="{ bottom: `${inputContainerHeight + SCROLL_BUTTON_OFFSET}px` }"
       >
         <slot name="scroll-to-bottom-button" :on-click="() => scrollToBottom()">
@@ -661,12 +660,11 @@ onBeforeUnmount(() => {
             type="button"
             data-testid="copilot-chat-view-scroll-to-bottom"
             :aria-label="labels.chatScrollToBottomLabel"
-            class="cpk:rounded-full cpk:w-10 cpk:h-10 cpk:p-0 cpk:pointer-events-auto cpk:bg-white cpk:dark:bg-gray-900 cpk:shadow-lg cpk:border cpk:border-gray-200 cpk:dark:border-gray-700 cpk:hover:bg-gray-50 cpk:dark:hover:bg-gray-800 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer"
+            data-slot="button"
+            class="cpk-button cpk-button-outline cpk-button-size-sm cpk-chat-view-scroll-to-bottom-button"
             @click="scrollToBottom()"
           >
-            <IconChevronDown
-              class="cpk:w-4 cpk:h-4 cpk:text-gray-600 cpk:dark:text-white"
-            />
+            <IconChevronDown class="cpk-chat-view-scroll-to-bottom-icon" />
           </button>
         </slot>
       </div>
@@ -681,16 +679,13 @@ onBeforeUnmount(() => {
       -->
       <div
         ref="inputContainerRef"
-        class="cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-0 cpk:z-20 cpk:pointer-events-none"
+        class="cpk-chat-view-input-overlay"
         data-testid="copilot-input-overlay"
       >
-        <div
-          v-if="hasAttachments"
-          class="cpk:max-w-3xl cpk:mx-auto cpk:w-full cpk:pointer-events-auto"
-        >
+        <div v-if="hasAttachments" class="cpk-chat-view-attachments">
           <CopilotChatAttachmentQueue
             :attachments="attachments ?? []"
-            class-name="cpk:px-4"
+            class-name="cpk-chat-view-attachment-queue"
             @remove-attachment="
               (id: string) => onRemoveAttachment && onRemoveAttachment(id)
             "

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

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+/**
+ * The line at the top of a reply in the `"turn"` tool-call display. While the
+ * agent works it reads "Working 4s"; once the reply is done it reads "Worked
+ * for 9s · 7 tools" and toggles the work it folded away.
+ */
+import { computed, ref, watch } from "vue";
+import { IconChevronRight } from "../icons";
+import type { CopilotChatWorkSummarySlotProps } from "./types";
+import { pluralize } from "./tool-call-group-parts";
+import { formatDuration } from "./turn-work";
+
+// `onClick` falls through to the button.
+const props = defineProps<Omit<CopilotChatWorkSummarySlotProps, "onClick">>();
+
+// The current time, updated every second while the agent works.
+const now = ref(Date.now());
+watch(
+  () => props.isWorking,
+  (working, _previous, onCleanup) => {
+    if (!working) return;
+    now.value = Date.now();
+    const timer = setInterval(() => {
+      now.value = Date.now();
+    }, 1000);
+    onCleanup(() => clearInterval(timer));
+  },
+  { immediate: true },
+);
+
+const failed = computed(
+  () => props.calls.filter((call) => call.toolMessage?.error).length,
+);
+const liveMs = computed(() =>
+  props.elapsedMs !== undefined && props.workingSince !== undefined
+    ? props.elapsedMs + Math.max(0, now.value - props.workingSince)
+    : undefined,
+);
+// A finished reply worked for at least a second.
+const duration = computed(() =>
+  props.elapsedMs !== undefined
+    ? formatDuration(Math.max(1000, props.elapsedMs))
+    : undefined,
+);
+</script>
+
+<template>
+  <button
+    type="button"
+    data-copilotkit
+    data-testid="copilot-work-summary"
+    :data-state="isWorking ? 'working' : 'done'"
+    :aria-expanded="isOpen ? 'true' : 'false'"
+    class="cpk-work-summary"
+  >
+    <template v-if="isWorking">
+      <span class="cpk-work-summary-label cpk-shimmer">Working</span>
+      <span
+        v-if="liveMs !== undefined"
+        class="cpk-work-summary-detail cpk-work-summary-timer"
+        >{{ formatDuration(liveMs) }}</span
+      >
+    </template>
+    <template v-else>
+      <span class="cpk-work-summary-label">{{
+        duration
+          ? `Worked for ${duration}`
+          : `Used ${pluralize(calls.length, "tool")}`
+      }}</span>
+      <span v-if="duration" class="cpk-work-summary-detail">{{
+        pluralize(calls.length, "tool")
+      }}</span>
+      <span v-if="failed > 0" class="cpk-work-summary-failed"
+        >{{ failed }} failed</span
+      >
+    </template>
+    <IconChevronRight
+      aria-hidden="true"
+      :class="[
+        'cpk-work-summary-chevron',
+        isOpen && 'cpk-work-summary-chevron-open',
+      ]"
+    />
+  </button>
+</template>

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

@@ -33,8 +33,7 @@ const resolvedTitle = computed(
     CopilotChatDefaultLabels.modalHeaderTitle,
 );
 const headerClass = computed(() => [
-  "cpk:flex cpk:items-center cpk:justify-between cpk:border-b cpk:border-border cpk:px-4 cpk:py-4",
-  "cpk:bg-background/95 cpk:backdrop-blur cpk:supports-[backdrop-filter]:bg-background/80",
+  "copilotKitHeader cpk-modal-header",
   attrs.class,
 ]);
 const headerAttrs = computed(() => {
@@ -99,13 +98,13 @@ function toggleDrawer() {
     v-bind="headerAttrs"
   >
     <slot name="layout" :title="resolvedTitle" :on-close="handleClose">
-      <div class="cpk:flex cpk:w-full cpk:items-center cpk:gap-2">
-        <div class="cpk:flex cpk:flex-1 cpk:justify-start">
+      <div class="cpk-modal-header-content">
+        <div class="cpk-modal-header-start">
           <button
             v-if="showDrawerLauncher"
             type="button"
             data-testid="drawer-launcher"
-            class="cpk:inline-flex cpk:size-8 cpk:items-center cpk:justify-center cpk:rounded-full cpk:text-muted-foreground cpk:transition cpk:cursor-pointer cpk:hover:bg-muted cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring"
+            class="cpk-modal-header-drawer-launcher"
             :aria-expanded="config?.drawerOpen ?? false"
             :aria-label="
               config?.labels.modalHeaderThreadsButtonLabel ??
@@ -113,18 +112,21 @@ function toggleDrawer() {
             "
             @click="toggleDrawer"
           >
-            <IconPanelLeftOpen class="cpk:h-4 cpk:w-4" aria-hidden="true" />
+            <IconPanelLeftOpen
+              class="cpk-modal-header-drawer-launcher-icon"
+              aria-hidden="true"
+            />
           </button>
           <span v-else aria-hidden="true" />
         </div>
-        <div class="cpk:flex cpk:flex-1 cpk:justify-center cpk:text-center">
+        <div class="cpk-modal-header-center">
           <slot name="title-content" :title="resolvedTitle">
             <CopilotModalHeaderTitle>
               {{ resolvedTitle }}
             </CopilotModalHeaderTitle>
           </slot>
         </div>
-        <div class="cpk:flex cpk:flex-1 cpk:justify-end">
+        <div class="cpk-modal-header-end">
           <slot name="close-button" :on-close="handleClose">
             <CopilotModalHeaderCloseButton @click="handleClose" />
           </slot>

package/src/v2/components/chat/CopilotModalHeaderCloseButton.ts

@@ -32,16 +32,17 @@ export default defineComponent({
         {
           ...rest,
           type: typeof type === "string" ? type : "button",
-          class: [
-            "cpk:inline-flex cpk:size-8 cpk:items-center cpk:justify-center cpk:rounded-full cpk:text-muted-foreground cpk:transition cpk:cursor-pointer",
-            "cpk:hover:bg-muted cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring",
-            className,
-          ],
+          class: ["cpk-modal-header-close-button", className],
           "aria-label": ariaLabel.value,
         },
         slots.default
           ? slots.default()
-          : [h(IconX, { class: "cpk:h-4 cpk:w-4", "aria-hidden": true })],
+          : [
+              h(IconX, {
+                class: "cpk-modal-header-close-icon",
+                "aria-hidden": true,
+              }),
+            ],
       );
     };
   },

package/src/v2/components/chat/CopilotModalHeaderTitle.ts

@@ -10,10 +10,7 @@ export default defineComponent({
         "div",
         {
           ...rest,
-          class: [
-            "cpk:w-full cpk:text-base cpk:font-medium cpk:leading-none cpk:tracking-tight cpk:text-foreground",
-            className,
-          ],
+          class: ["cpk-modal-header-title", className],
         },
         slots.default ? slots.default() : [],
       );

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

@@ -36,6 +36,7 @@ function popupViewEventBindings(slotProps: CopilotChatViewOverrideSlotProps) {
 
 const props = withDefaults(defineProps<CopilotPopupProps>(), {
   autoScroll: true,
+  messageFeedback: true,
   welcomeScreen: true,
   inputValue: undefined,
   inputMode: "input",
@@ -116,6 +117,8 @@ watch(
         :input-mode="slotProps.inputMode"
         :input-tools-menu="slotProps.inputToolsMenu"
         :width="width"
+        :tool-call-display="slotProps.toolCallDisplay"
+        :message-feedback="slotProps.messageFeedback"
         :height="height"
         :click-outside-to-close="clickOutsideToClose"
         :default-open="defaultOpen"

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

@@ -20,6 +20,7 @@ defineOptions({ inheritAttrs: false });
 const props = withDefaults(defineProps<CopilotPopupViewProps>(), {
   messages: () => [],
   autoScroll: true,
+  messageFeedback: true,
   isRunning: false,
   suggestions: () => [],
   suggestionLoadingIndexes: () => [],