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

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, useSlots, watch } from "vue";
-import type { Component, FunctionalComponent, VNodeChild } from "vue";
+import { computed, h, onMounted, provide, ref, useSlots, watch } from "vue";
+import type { Component, FunctionalComponent, VNode, VNodeChild } from "vue";
 import type {
   ActivityMessage,
   AssistantMessage,
@@ -15,6 +15,27 @@ import {
   createRowKeyStore,
   resolveRowRenderKeysById,
 } from "@copilotkit/shared";
+import {
+  ɵdeduplicateMessages,
+  ɵgetToolCallLayouts,
+  ɵgetToolCallRendererNames,
+  ɵgetTurnWork,
+  ɵgetWorkOpenState,
+  ɵisTurnWorkOpen,
+  ɵisTurnWorking,
+  ɵrecordWorkTime,
+  ɵresolveActivityRenderer,
+  ɵresolveCustomMessageRenderers,
+  ɵgetLatestTurnKey,
+} from "@copilotkit/core";
+import type {
+  CopilotChatToolCallDisplay,
+  ToolCallEntry,
+  ɵToolCallDisplayContextValue,
+  ɵToolCallLayout,
+  ɵTurnWork,
+  ɵWorkTime,
+} from "@copilotkit/core";
 import type {
   InterruptRenderProps,
   VueCustomMessageRendererProps,
@@ -24,6 +45,16 @@ import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfi
 import CopilotChatAssistantMessage from "./CopilotChatAssistantMessage.vue";
 import CopilotChatReasoningMessage from "./CopilotChatReasoningMessage.vue";
 import CopilotChatUserMessage from "./CopilotChatUserMessage.vue";
+import CopilotChatWorkSummary from "./CopilotChatWorkSummary.vue";
+import { CopilotChatCollapsible } from "./tool-call-group-parts";
+import { TurnWorkFold } from "./turn-work";
+import {
+  MessageFeedbackScopeKey,
+  useLearningFeedbackEnabled,
+} from "./message-feedback";
+import type { MessageFeedbackScope } from "./message-feedback";
+import { ToolCallDisplayContextKey } from "./tool-call-display-context";
+import type { CopilotChatWorkSummarySlotProps } from "./types";
 
 interface MessageMetaProps {
   message: Message;
@@ -56,10 +87,26 @@ const props = withDefaults(
   defineProps<{
     messages?: Message[];
     isRunning?: boolean;
+    /**
+     * How tool calls show. Defaults to `"grouped"`: calls made in a row
+     * share one card that opens to a row per call. `"line"` and `"stacked"`
+     * group them too; `"turn"` folds a reply's whole working phase into
+     * "Worked for 9s" once it's done; `"separate"` gives every call its own
+     * card. Calls with a renderer of their own always show on their own.
+     */
+    toolCallDisplay?: CopilotChatToolCallDisplay;
+    /**
+     * While Learning records this chat, the assistant thumbs record ratings
+     * and ask for a comment. Set `false` to leave the thumbs to the app's own
+     * handlers.
+     */
+    messageFeedback?: boolean;
   }>(),
   {
     messages: () => [],
     isRunning: false,
+    toolCallDisplay: "grouped",
+    messageFeedback: true,
   },
 );
 
@@ -81,6 +128,8 @@ defineSlots<{
   "activity-message"?: (props: ActivitySlotProps) => unknown;
   [key: string]: ((props: any) => unknown) | undefined;
   cursor?: () => unknown;
+  /** The "Working… / Worked for 9s" line of the `"turn"` tool-call display. */
+  "work-summary"?: (props: CopilotChatWorkSummarySlotProps) => unknown;
   "tool-call"?: (props: {
     name: string;
     args: unknown;
@@ -163,34 +212,148 @@ watch(
   { immediate: true },
 );
 
-function deduplicateMessages(messages: Message[]): Message[] {
-  const byId = new Map<string, Message>();
-  for (const message of messages) {
-    const existing = byId.get(message.id);
-    if (
-      existing &&
-      message.role === "assistant" &&
-      existing.role === "assistant"
-    ) {
-      const content = message.content || existing.content;
-      const toolCalls = message.toolCalls ?? existing.toolCalls;
-      byId.set(message.id, {
-        ...existing,
-        ...message,
-        content,
-        toolCalls,
-      } as AssistantMessage);
-    } else {
-      byId.set(message.id, message);
-    }
+const deduplicatedMessages = computed(() =>
+  ɵdeduplicateMessages(props.messages),
+);
+
+// Groups of calls can span messages (an agent often sends each call as its
+// own message), so they're laid out here for the whole list and handed to
+// each message's tool calls view through provide/inject.
+const toolCallLayouts = computed<ReadonlyMap<string, ɵToolCallLayout>>(() =>
+  props.toolCallDisplay === "separate"
+    ? new Map()
+    : ɵgetToolCallLayouts(
+        deduplicatedMessages.value,
+        props.messages,
+        ɵgetToolCallRendererNames(copilotkit.value.renderToolCalls, {
+          slotNames: forwardedSlotNames.value,
+        }),
+      ),
+);
+const learningFeedbackEnabled = useLearningFeedbackEnabled(copilotkit);
+provide(
+  MessageFeedbackScopeKey,
+  computed<MessageFeedbackScope | null>(() =>
+    props.messageFeedback &&
+    learningFeedbackEnabled.value &&
+    config.value?.agentId !== undefined &&
+    config.value?.threadId !== undefined
+      ? {
+          copilotkit: copilotkit.value,
+          agentId: config.value.agentId,
+          threadId: config.value.threadId,
+        }
+      : null,
+  ),
+);
+
+const turnWork = computed(() =>
+  props.toolCallDisplay === "turn"
+    ? ɵgetTurnWork(deduplicatedMessages.value, toolCallLayouts.value)
+    : undefined,
+);
+const turnByFirstMessage = computed(() => {
+  const byFirst = new Map<string, ɵTurnWork>();
+  for (const turn of turnWork.value?.values() ?? []) {
+    byFirst.set(turn.firstMessageId, turn);
   }
-  return [...byId.values()];
-}
+  return byFirst;
+});
 
-const deduplicatedMessages = computed(() =>
-  deduplicateMessages(props.messages),
+const lastRenderedMessage = computed(
+  () => deduplicatedMessages.value[deduplicatedMessages.value.length - 1],
+);
+// The latest reply is keyed by the user message it answers (see getTurnWork).
+const latestTurnKey = computed(() =>
+  ɵgetLatestTurnKey(deduplicatedMessages.value),
 );
 
+// Work shows while the agent is on it and folds once the reply is done,
+// unless the user has opened or closed it themselves.
+const toggledTurns = ref<ReadonlyMap<string, boolean>>(new Map());
+const turnOpenState = computed(() => ({
+  toggledTurns: toggledTurns.value,
+  isRunning: props.isRunning,
+  latestTurnKey: latestTurnKey.value,
+}));
+
+// How long the agent worked, for "Worked for 9s". Only known for replies this
+// client watched start from the user's message; a restored thread shows the
+// tool count instead.
+const workTimes = new Map<string, ɵWorkTime>();
+const workTimesVersion = ref(0);
+watch(
+  [
+    () => props.toolCallDisplay,
+    () => props.isRunning,
+    latestTurnKey,
+    () => lastRenderedMessage.value?.role,
+  ],
+  ([display, isRunning, turnKey, lastRole]) => {
+    if (display !== "turn") return;
+    ɵrecordWorkTime(workTimes, {
+      isRunning,
+      latestTurnKey: turnKey,
+      lastMessageRole: lastRole,
+      now: Date.now(),
+    });
+    workTimesVersion.value++;
+  },
+  { immediate: true },
+);
+
+// Whether each working-phase message's work, and its text, shows.
+const workOpenState = computed(() =>
+  ɵgetWorkOpenState(turnWork.value?.values() ?? [], turnOpenState.value),
+);
+
+provide(
+  ToolCallDisplayContextKey,
+  computed<ɵToolCallDisplayContextValue>(() => ({
+    display: props.toolCallDisplay,
+    isRunning: props.isRunning,
+    layouts: toolCallLayouts.value,
+    workOpen: workOpenState.value.workOpen,
+    workTextOpen: workOpenState.value.workTextOpen,
+  })),
+);
+
+/** The `"turn"` display's summary line for a reply, or its slot. */
+const WorkSummaryRow: FunctionalComponent<{
+  turnKey: string;
+  calls: ToolCallEntry[];
+}> = ({ turnKey, calls }) => {
+  void workTimesVersion.value;
+  const isWorking = ɵisTurnWorking(turnKey, turnOpenState.value);
+  const isOpen = ɵisTurnWorkOpen(turnKey, turnOpenState.value);
+  const times = workTimes.get(turnKey);
+  const summaryProps: CopilotChatWorkSummarySlotProps = {
+    isWorking,
+    isOpen,
+    calls,
+    elapsedMs: times?.elapsedMs,
+    workingSince: times?.workingSince,
+    onClick: () => {
+      toggledTurns.value = new Map(toggledTurns.value).set(turnKey, !isOpen);
+    },
+  };
+  const slot = componentSlots["work-summary"];
+  return h(
+    CopilotChatCollapsible,
+    { open: isWorking || calls.length > 0 },
+    () => [
+      h(
+        "div",
+        { class: "cpk-message-view-work-summary" },
+        slot
+          ? (slot(summaryProps) as VNode[])
+          : [h(CopilotChatWorkSummary, summaryProps)],
+      ),
+    ],
+  );
+};
+WorkSummaryRow.props = ["turnKey", "calls"];
+
 // Stable per-row keys. Backends can re-key a message mid-stream, and keying
 // rows by the canonical id tears the row down on that swap (the HITL chat
 // flash). See @copilotkit/shared row-render-keys for the mechanism.
@@ -209,8 +372,20 @@ watch(
   { flush: "post" },
 );
 const lastMessage = computed(() => props.messages[props.messages.length - 1]);
+// In the "turn" display the "Working" line at the top of the reply is the
+// progress indicator; before the reply's first message it sits where the
+// cursor would.
 const showCursor = computed(
-  () => props.isRunning && lastMessage.value?.role !== "reasoning",
+  () =>
+    props.isRunning &&
+    lastMessage.value?.role !== "reasoning" &&
+    props.toolCallDisplay !== "turn",
+);
+const pendingWorkSummary = computed(
+  () =>
+    props.toolCallDisplay === "turn" &&
+    props.isRunning &&
+    lastRenderedMessage.value?.role === "user",
 );
 
 watch(
@@ -319,21 +494,12 @@ function resolveCustomMessageRenderer(
     return null;
   }
 
-  const agentId = resolvedAgentId.value;
-  const renderers = [...copilotkit.value.renderCustomMessages]
-    .filter(
-      (renderer) =>
-        renderer.agentId === undefined || renderer.agentId === agentId,
-    )
-    .sort((a, b) => {
-      const aHasAgent = a.agentId !== undefined;
-      const bHasAgent = b.agentId !== undefined;
-      if (aHasAgent === bHasAgent) return 0;
-      return aHasAgent ? -1 : 1;
-    });
-
-  const selected = renderers[0];
-  if (!selected?.render) {
+  // Try each renderer in order and use the first that has something to draw.
+  const selected = ɵresolveCustomMessageRenderers(
+    copilotkit.value.renderCustomMessages,
+    resolvedAgentId.value,
+  ).find((renderer) => renderer.render);
+  if (!selected) {
     return null;
   }
 
@@ -348,53 +514,43 @@ function resolveActivityRenderer(
 ): { renderer: Component; props: ActivitySlotProps } | null {
   stateTick.value += 0;
 
-  const agentId = resolvedAgentId.value;
-  const renderer = [...copilotkit.value.renderActivityMessages]
-    .filter(
-      (entry) =>
-        entry.activityType === message.activityType &&
-        (entry.agentId === undefined || entry.agentId === agentId),
-    )
-    .sort((a, b) => {
-      const aScoped = a.agentId !== undefined;
-      const bScoped = b.agentId !== undefined;
-      if (aScoped === bScoped) return 0;
-      return aScoped ? -1 : 1;
-    })[0];
-
-  if (!renderer) return null;
-  const parsed = renderer.content.safeParse(message.content);
-  if (!parsed.success) return null;
+  const match = ɵresolveActivityRenderer(
+    copilotkit.value.renderActivityMessages,
+    {
+      activityType: message.activityType,
+      agentId: resolvedAgentId.value,
+      content: message.content,
+    },
+  );
+  if (!match) return null;
 
   return {
-    renderer: renderer.render as Component,
+    renderer: match.renderer.render as Component,
     props: {
       activityType: message.activityType,
-      content: parsed.data,
+      content: match.content,
       message,
       agent: resolvedThreadAgent.value,
     },
   };
 }
-
-function resolveToolMessage(
-  message: Message,
-  toolCallId: string,
-): ToolMessage | undefined {
-  return props.messages.find(
-    (candidate) =>
-      candidate.role === "tool" &&
-      (candidate as ToolMessage).toolCallId === toolCallId,
-  ) as ToolMessage | undefined;
-}
 </script>
 
 <template>
-  <div data-copilotkit class="cpk:flex cpk:flex-col" v-bind="$attrs">
+  <div
+    data-copilotkit
+    class="copilotKitMessages cpk-message-view"
+    v-bind="$attrs"
+  >
     <template
       v-for="message in deduplicatedMessages"
       :key="rowRenderKeys.get(message.id) ?? message.id"
     >
+      <WorkSummaryRow
+        v-if="turnByFirstMessage.get(message.id)"
+        :turn-key="turnByFirstMessage.get(message.id)!.key"
+        :calls="turnByFirstMessage.get(message.id)!.calls"
+      />
       <MessageMetaSlot
         v-if="componentSlots['message-before']"
         :render="componentSlots['message-before']"
@@ -444,19 +600,30 @@ function resolveToolMessage(
         </CopilotChatUserMessage>
       </slot>
 
-      <slot
+      <!-- Reasoning during a reply's working phase folds away with the work.
+           Always wrapped in this display, so reasoning that turns into work
+           keeps its node (and its "Thought for" timer) instead of remounting. -->
+      <TurnWorkFold
         v-else-if="message.role === 'reasoning'"
-        name="reasoning-message"
-        :message="message"
-        :messages="messages"
-        :is-running="isRunning"
+        :open="
+          toolCallDisplay === 'turn'
+            ? (workOpenState.workOpen.get(message.id) ?? true)
+            : undefined
+        "
       >
-        <CopilotChatReasoningMessage
+        <slot
+          name="reasoning-message"
           :message="message"
           :messages="messages"
           :is-running="isRunning"
-        />
-      </slot>
+        >
+          <CopilotChatReasoningMessage
+            :message="message"
+            :messages="messages"
+            :is-running="isRunning"
+          />
+        </slot>
+      </TurnWorkFold>
 
       <slot
         v-else-if="message.role === 'activity'"
@@ -504,11 +671,19 @@ function resolveToolMessage(
       :cancel="interruptState.cancel"
     />
 
-    <slot v-if="showCursor" name="cursor">
-      <div
-        class="cpk:w-[11px] cpk:h-[11px] cpk:rounded-full cpk:bg-foreground cpk:animate-pulse cpk:ml-1"
-        data-testid="copilot-loading-cursor"
-      />
-    </slot>
+    <WorkSummaryRow
+      v-if="pendingWorkSummary"
+      :turn-key="latestTurnKey"
+      :calls="[]"
+    />
+
+    <div v-if="showCursor" class="cpk-message-view-cursor-container">
+      <slot name="cursor">
+        <div
+          class="cpk-message-view-cursor"
+          data-testid="copilot-loading-cursor"
+        />
+      </slot>
+    </div>
   </div>
 </template>

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

@@ -3,8 +3,9 @@ import { computed, onBeforeUnmount, ref, watch } from "vue";
 import type { Message, ReasoningMessage } from "@ag-ui/core";
 import { IconChevronRight } from "../icons";
 import StreamingMarkdownDefault from "./StreamingMarkdownDefault.vue";
-import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
-import { CopilotChatDefaultLabels } from "../../providers/types";
+import { ɵformatLabel, ɵformatReasoningDuration } from "@copilotkit/core";
+import type { CopilotChatLabels } from "@copilotkit/core";
+import { useChatLabels } from "./use-chat-labels";
 
 const props = withDefaults(
   defineProps<{
@@ -69,13 +70,29 @@ defineSlots<{
   }) => unknown;
 }>();
 
-function formatDuration(seconds: number): string {
-  if (seconds < 1) return "a few seconds";
-  if (seconds < 60) return `${Math.round(seconds)} seconds`;
-  const mins = Math.floor(seconds / 60);
-  const secs = Math.round(seconds % 60);
-  if (secs === 0) return `${mins} minute${mins > 1 ? "s" : ""}`;
-  return `${mins}m ${secs}s`;
+/** How long the model reasoned, in the chat's labels: "4 seconds", "1m 5s". */
+function formatDuration(labels: Readonly<CopilotChatLabels>, seconds: number) {
+  const duration = ɵformatReasoningDuration(seconds);
+  switch (duration.unit) {
+    case "fewSeconds":
+      return labels.reasoningMessageDurationFewSeconds;
+    case "seconds":
+      return ɵformatLabel(labels.reasoningMessageDurationSeconds, {
+        count: duration.seconds,
+      });
+    case "minutes":
+      return ɵformatLabel(
+        duration.minutes === 1
+          ? labels.reasoningMessageDurationMinutesOne
+          : labels.reasoningMessageDurationMinutesOther,
+        { count: duration.minutes },
+      );
+    case "minutesSeconds":
+      return ɵformatLabel(labels.reasoningMessageDurationMinutesSeconds, {
+        minutes: duration.minutes,
+        seconds: duration.seconds,
+      });
+  }
 }
 
 const normalizedContent = computed(() =>
@@ -133,13 +150,14 @@ onBeforeUnmount(() => {
   clearElapsedInterval();
 });
 
-const config = useCopilotChatConfiguration();
+const labels = useChatLabels();
 /** `labels.reasoningMessageThinkingLabel` while streaming, then "Thought for …". */
 const label = computed(() =>
   isStreaming.value
-    ? (config.value?.labels ?? CopilotChatDefaultLabels)
-        .reasoningMessageThinkingLabel
-    : `Thought for ${formatDuration(elapsed.value)}`,
+    ? labels.value.reasoningMessageThinkingLabel
+    : ɵformatLabel(labels.value.reasoningMessageThoughtForLabel, {
+        duration: formatDuration(labels.value, elapsed.value),
+      }),
 );
 
 function toggleOpen() {
@@ -150,7 +168,11 @@ function toggleOpen() {
 </script>
 
 <template>
-  <div data-copilotkit class="cpk:my-1" :data-message-id="message.id">
+  <div
+    data-copilotkit
+    class="cpk-reasoning-message"
+    :data-message-id="message.id"
+  >
     <slot
       name="layout"
       :message="message"
@@ -189,28 +211,22 @@ function toggleOpen() {
       >
         <button
           type="button"
-          class="cpk:inline-flex cpk:items-center cpk:gap-1 cpk:py-1 cpk:text-sm cpk:text-muted-foreground cpk:transition-colors cpk:select-none"
-          :class="
-            hasContent
-              ? 'cpk:hover:text-foreground cpk:cursor-pointer'
-              : 'cpk:cursor-default'
-          "
+          class="cpk-reasoning-message-header"
+          :class="{ 'cpk-reasoning-message-header-expandable': hasContent }"
           :aria-expanded="hasContent ? isOpen : undefined"
           @click="hasContent ? toggleOpen() : undefined"
         >
-          <span class="cpk:font-medium">{{ label }}</span>
+          <span class="cpk-reasoning-message-label">{{ label }}</span>
           <span
             v-if="isStreaming && !hasContent"
-            class="cpk:inline-flex cpk:items-center cpk:ml-1"
+            class="cpk-reasoning-message-indicator"
           >
-            <span
-              class="cpk:w-1.5 cpk:h-1.5 cpk:rounded-full cpk:bg-muted-foreground cpk:animate-pulse"
-            />
+            <span class="cpk-reasoning-message-indicator-dot" />
           </span>
           <IconChevronRight
             v-if="hasContent"
-            class="cpk:size-3.5 cpk:shrink-0 cpk:transition-transform cpk:duration-200"
-            :class="{ 'cpk:rotate-90': isOpen }"
+            class="cpk-reasoning-message-chevron"
+            :class="{ 'cpk-reasoning-message-chevron-open': isOpen }"
           />
         </button>
       </slot>
@@ -225,18 +241,21 @@ function toggleOpen() {
         }"
       >
         <div
-          class="cpk:grid cpk:transition-[grid-template-rows] cpk:duration-200 cpk:ease-in-out"
+          class="cpk-reasoning-message-toggle"
           :style="{ gridTemplateRows: isOpen ? '1fr' : '0fr' }"
         >
-          <div class="cpk:overflow-hidden">
+          <div class="cpk-reasoning-message-toggle-content">
             <slot
               name="content-view"
               :is-streaming="isStreaming"
               :has-content="hasContent"
               :content="normalizedContent"
             >
-              <div v-if="hasContent || isStreaming" class="cpk:pb-2 cpk:pt-1">
-                <div class="cpk:text-sm cpk:text-muted-foreground">
+              <div
+                v-if="hasContent || isStreaming"
+                class="cpk-reasoning-message-content"
+              >
+                <div class="cpk-reasoning-message-text">
                   <!-- Reasoning content uses the streaming renderer (same as assistant);
                        the pluggable provider renderer applies to assistant messages only. -->
                   <StreamingMarkdownDefault
@@ -245,11 +264,9 @@ function toggleOpen() {
                   />
                   <span
                     v-if="isStreaming && hasContent"
-                    class="cpk:inline-flex cpk:items-center cpk:ml-1 cpk:align-middle"
+                    class="cpk-reasoning-message-cursor"
                   >
-                    <span
-                      class="cpk:w-2 cpk:h-2 cpk:rounded-full cpk:bg-muted-foreground cpk:animate-pulse-cursor"
-                    />
+                    <span class="cpk-reasoning-message-cursor-dot" />
                   </span>
                 </div>
               </div>

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

@@ -29,27 +29,18 @@ const isDisabled = computed(() => props.isLoading || props.disabled);
     :type="type"
     :aria-busy="isLoading ? 'true' : undefined"
     :disabled="isDisabled"
-    class="cpk:group cpk:inline-flex cpk:h-7 cpk:w-fit cpk:items-center cpk:gap-1 cpk:rounded-full cpk:border cpk:border-border/60 cpk:bg-background cpk:px-2.5 cpk:text-[11px] cpk:leading-none cpk:text-foreground cpk:transition-colors cpk:cursor-pointer cpk:hover:bg-accent/60 cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background cpk:disabled:cursor-not-allowed cpk:disabled:text-muted-foreground cpk:disabled:hover:bg-background cpk:disabled:hover:text-muted-foreground cpk:pointer-events-auto cpk:sm:h-8 cpk:sm:gap-1.5 cpk:sm:px-3 cpk:sm:text-xs"
+    class="cpk-suggestion-pill"
     v-bind="$attrs"
   >
-    <span
-      v-if="isLoading"
-      class="cpk:flex cpk:h-3.5 cpk:w-3.5 cpk:items-center cpk:justify-center cpk:text-muted-foreground cpk:sm:h-4 cpk:sm:w-4"
-    >
-      <IconLoader2
-        class="cpk:h-3.5 cpk:w-3.5 cpk:animate-spin cpk:sm:h-4 cpk:sm:w-4"
-        aria-hidden="true"
-      />
+    <span v-if="isLoading" class="cpk-suggestion-pill-icon">
+      <IconLoader2 class="cpk-suggestion-pill-spinner" aria-hidden="true" />
     </span>
-    <span
-      v-else-if="$slots.icon || icon"
-      class="cpk:flex cpk:h-3.5 cpk:w-3.5 cpk:items-center cpk:justify-center cpk:text-muted-foreground cpk:sm:h-4 cpk:sm:w-4"
-    >
+    <span v-else-if="$slots.icon || icon" class="cpk-suggestion-pill-icon">
       <slot name="icon">
         <component :is="icon" />
       </slot>
     </span>
-    <span class="cpk:whitespace-nowrap cpk:font-medium cpk:leading-none">
+    <span class="cpk-suggestion-pill-label">
       <slot />
     </span>
   </button>

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

@@ -32,10 +32,7 @@ const emit = defineEmits<{
 
 const attrs = useAttrs();
 const loadingSet = computed(() => new Set(props.loadingIndexes));
-const containerClass = computed(() => [
-  "cpk:flex cpk:flex-wrap cpk:items-center cpk:gap-1.5 cpk:pl-0 cpk:pr-4 cpk:pointer-events-none cpk:sm:gap-2 cpk:@3xl:px-0",
-  attrs.class,
-]);
+const containerClass = computed(() => ["cpk-suggestion-view", attrs.class]);
 const containerAttrs = computed(() => {
   const { class: _className, ...rest } = attrs;
   return rest;