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

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

@@ -11,11 +11,10 @@ import {
 import type { Message } from "@ag-ui/core";
 import type { Suggestion } from "@copilotkit/core";
 import type { Attachment } from "@copilotkit/shared";
-import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
-import { CopilotChatDefaultLabels } from "../../providers/types";
+import { useChatLabels } from "./use-chat-labels";
 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 +33,7 @@ const SCROLL_BUTTON_OFFSET = 16;
 const SCROLL_BOTTOM_THRESHOLD = 12;
 
 const props = withDefaults(defineProps<CopilotChatViewProps>(), {
+  messageFeedback: true,
   messages: () => [],
   autoScroll: true,
   isRunning: false,
@@ -126,8 +126,7 @@ const emit = defineEmits<{
   "finish-transcribe": [];
 }>();
 
-const config = useCopilotChatConfiguration();
-const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
+const labels = useChatLabels();
 const componentSlots = useSlots();
 
 const scrollContainerRef = ref<HTMLElement | null>(null);
@@ -441,8 +440,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 +450,15 @@ 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">{{
+          labels.chatDropFilesLabel
+        }}</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,111 @@
+<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 {
+  ɵcountFailedToolCalls,
+  ɵformatLabel,
+  ɵformatWorkDuration,
+  ɵformatCountLabel,
+} from "@copilotkit/core";
+import { IconChevronRight } from "../icons";
+import type { CopilotChatWorkSummarySlotProps } from "./types";
+import { useChatLabels } from "./use-chat-labels";
+
+// `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 labels = useChatLabels();
+const failed = computed(() => ɵcountFailedToolCalls(props.calls));
+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
+    ? ɵformatWorkDuration(Math.max(1000, props.elapsedMs))
+    : undefined,
+);
+const toolCount = computed(() =>
+  ɵformatCountLabel(props.calls.length, {
+    one: labels.value.toolCallToolCountOne,
+    other: labels.value.toolCallToolCountOther,
+  }),
+);
+const doneLabel = computed(() =>
+  duration.value
+    ? ɵformatLabel(labels.value.workSummaryWorkedForLabel, {
+        duration: duration.value,
+      })
+    : ɵformatCountLabel(props.calls.length, {
+        one: labels.value.toolCallUsedToolsOne,
+        other: labels.value.toolCallUsedToolsOther,
+      }),
+);
+const liveDuration = computed(() =>
+  liveMs.value !== undefined ? ɵformatWorkDuration(liveMs.value) : undefined,
+);
+const failedLabel = computed(() =>
+  ɵformatLabel(labels.value.toolCallFailedCountLabel, {
+    count: failed.value,
+  }),
+);
+</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">{{
+        labels.workSummaryWorkingLabel
+      }}</span>
+      <span
+        v-if="liveDuration !== undefined"
+        class="cpk-work-summary-detail cpk-work-summary-timer"
+        >{{ liveDuration }}</span
+      >
+    </template>
+    <template v-else>
+      <span class="cpk-work-summary-label">{{ doneLabel }}</span>
+      <span v-if="duration" class="cpk-work-summary-detail">{{
+        toolCount
+      }}</span>
+      <span v-if="failed > 0" class="cpk-work-summary-failed">{{
+        failedLabel
+      }}</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: () => [],

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

@@ -37,6 +37,7 @@ const props = withDefaults(
   {
     messages: () => [],
     autoScroll: true,
+    messageFeedback: true,
     isRunning: false,
     suggestions: () => [],
     suggestionLoadingIndexes: () => [],
@@ -96,8 +97,8 @@ const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
 const headerTitle = computed(() => labels.value.modalHeaderTitle);
 const popupAnimationClass = computed(() =>
   isPopupOpen.value && !isAnimatingOut.value
-    ? "cpk:pointer-events-auto cpk:translate-y-0 cpk:opacity-100 cpk:md:scale-100"
-    : "cpk:pointer-events-none cpk:translate-y-4 cpk:opacity-0 cpk:md:translate-y-5 cpk:md:scale-[0.95]",
+    ? "cpk-popup-view-window-open"
+    : undefined,
 );
 const popupStyle = computed(
   () =>
@@ -109,10 +110,6 @@ const popupStyle = computed(
       ),
       "--copilot-popup-max-width": "calc(100vw - 3rem)",
       "--copilot-popup-max-height": "calc(100dvh - 7.5rem)",
-      width: "var(--copilot-popup-width)",
-      height: "var(--copilot-popup-height)",
-      maxWidth: "var(--copilot-popup-max-width)",
-      maxHeight: "var(--copilot-popup-max-height)",
       paddingTop: "env(safe-area-inset-top)",
       paddingBottom: "env(safe-area-inset-bottom)",
       paddingLeft: "env(safe-area-inset-left)",
@@ -349,11 +346,7 @@ onBeforeUnmount(() => {
     <CopilotChatToggleButton />
   </slot>
 
-  <div
-    v-if="isRendered"
-    data-copilotkit
-    class="cpk:fixed cpk:inset-0 cpk:z-[1200] cpk:flex cpk:max-w-full cpk:flex-col cpk:items-stretch cpk:bg-transparent cpk:md:inset-auto cpk:md:bottom-24 cpk:md:right-6 cpk:md:items-end cpk:md:gap-4"
-  >
+  <div v-if="isRendered" data-copilotkit class="cpk-popup-view">
     <div
       ref="containerRef"
       tabindex="-1"
@@ -361,13 +354,7 @@ onBeforeUnmount(() => {
       :aria-label="labels.modalHeaderTitle"
       data-copilot-popup
       :class="[
-        'cpk:relative cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden cpk:bg-background cpk:text-foreground',
-        'cpk:origin-bottom cpk:focus:outline-none cpk:transform-gpu cpk:transition-transform cpk:transition-opacity cpk:duration-200 cpk:ease-out',
-        'cpk:md:transition-transform cpk:md:transition-opacity',
-        'cpk:rounded-none cpk:border cpk:border-border/0 cpk:shadow-none cpk:ring-0',
-        'cpk:md:h-[var(--copilot-popup-height)] cpk:md:w-[var(--copilot-popup-width)]',
-        'cpk:md:max-h-[var(--copilot-popup-max-height)] cpk:md:max-w-[var(--copilot-popup-max-width)]',
-        'cpk:md:origin-bottom-right cpk:md:rounded-2xl cpk:md:border-border cpk:md:shadow-xl cpk:md:ring-1 cpk:md:ring-border/40',
+        'copilotKitPopup copilotKitWindow cpk-popup-view-window',
         popupAnimationClass,
       ]"
       :style="popupStyle"
@@ -381,8 +368,9 @@ onBeforeUnmount(() => {
         <CopilotModalHeader :title="headerTitle" />
       </slot>
 
-      <div class="cpk:flex-1 cpk:overflow-hidden" data-popup-chat>
+      <div class="cpk-popup-view-chat" data-popup-chat>
         <CopilotChatView
+          class="cpk-popup-view-chat-view"
           :messages="messages"
           :auto-scroll="autoScroll"
           :is-running="isRunning"
@@ -392,6 +380,8 @@ onBeforeUnmount(() => {
           :input-value="inputValue"
           :input-mode="inputMode"
           :input-tools-menu="inputToolsMenu"
+          :tool-call-display="toolCallDisplay"
+          :message-feedback="messageFeedback"
           :on-finish-transcribe-with-audio="onFinishTranscribeWithAudio"
           v-bind="chatViewBindings"
         >

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

@@ -127,25 +127,22 @@ const inputEventProps = computed(() => {
   <slot name="layout" v-bind="layoutSlotProps">
     <div
       data-copilotkit
-      class="cpk:h-full cpk:flex cpk:flex-col"
+      class="cpk-popup-view-welcome-screen"
       data-testid="copilot-popup-welcome-screen"
     >
-      <div
-        class="cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4"
-      >
+      <div class="cpk-popup-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>
-        <div class="cpk:mb-4 cpk:flex cpk:justify-center cpk:px-4">
+        <div class="cpk-popup-view-welcome-screen-suggestions">
           <slot name="suggestion-view" v-bind="suggestionViewSlotProps">
             <CopilotChatSuggestionView
+              class="cpk-chat-view-suggestion-view"
               :suggestions="suggestions"
               :loading-indexes="loadingIndexes"
               @select-suggestion="onSelectSuggestion"

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

@@ -36,12 +36,14 @@ function sidebarViewEventBindings(slotProps: CopilotChatViewOverrideSlotProps) {
 
 const props = withDefaults(defineProps<CopilotSidebarProps>(), {
   autoScroll: true,
+  messageFeedback: true,
   welcomeScreen: true,
   inputValue: undefined,
   inputMode: "input",
   inputToolsMenu: () => [],
   width: undefined,
   defaultOpen: true,
+  position: "right",
   onFinishTranscribeWithAudio: undefined,
 });
 
@@ -114,7 +116,10 @@ watch(
         :input-mode="slotProps.inputMode"
         :input-tools-menu="slotProps.inputToolsMenu"
         :width="width"
+        :tool-call-display="slotProps.toolCallDisplay"
+        :message-feedback="slotProps.messageFeedback"
         :default-open="defaultOpen"
+        :position="position"
         :on-finish-transcribe-with-audio="slotProps.onFinishTranscribeWithAudio"
         v-bind="sidebarViewEventBindings(slotProps)"
       >

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

@@ -18,6 +18,7 @@ defineOptions({ inheritAttrs: false });
 const props = withDefaults(defineProps<CopilotSidebarViewProps>(), {
   messages: () => [],
   autoScroll: true,
+  messageFeedback: true,
   isRunning: false,
   suggestions: () => [],
   suggestionLoadingIndexes: () => [],
@@ -27,6 +28,7 @@ const props = withDefaults(defineProps<CopilotSidebarViewProps>(), {
   inputToolsMenu: () => [],
   width: undefined,
   defaultOpen: true,
+  position: "right",
   onFinishTranscribeWithAudio: undefined,
 });