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

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

@@ -33,12 +33,7 @@ const ariaLabel = computed(() =>
     : labels.value.chatToggleOpenLabel,
 );
 const buttonClass = computed(() => [
-  "cpk:fixed cpk:bottom-6 cpk:right-6 cpk:z-[1100] cpk:flex cpk:h-14 cpk:w-14 cpk:items-center cpk:justify-center",
-  "cpk:rounded-full cpk:border cpk:border-primary cpk:bg-primary cpk:text-primary-foreground",
-  "cpk:shadow-sm cpk:transition-all cpk:duration-200 cpk:ease-out",
-  "cpk:hover:scale-[1.04] cpk:hover:shadow-md cpk:cursor-pointer cpk:active:scale-[0.96]",
-  "cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-primary/50 cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background",
-  "cpk:disabled:pointer-events-none cpk:disabled:opacity-60",
+  "copilotKitButton cpk-chat-toggle-button",
   attrs.class,
 ]);
 const buttonAttrs = computed(() => {
@@ -46,13 +41,12 @@ const buttonAttrs = computed(() => {
   return rest;
 });
 
-const iconClass = "cpk:h-6 cpk:w-6";
+const iconClass = "cpk-chat-toggle-button-icon";
 const iconTransitionStyle = Object.freeze({
   transition:
     "opacity 120ms ease-out, transform 260ms cubic-bezier(0.22, 1, 0.36, 1)",
 });
-const iconWrapperBase =
-  "cpk:pointer-events-none cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:will-change-transform";
+const iconWrapperBase = "cpk-chat-toggle-button-icon-wrapper";
 
 function setModalOpen(open: boolean) {
   if (config.value?.setModalOpen) {

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

@@ -9,7 +9,7 @@ export default defineComponent({
       const { class: className, ...rest } = attrs as Record<string, unknown>;
       return h(IconX, {
         ...rest,
-        class: ["cpk:h-6 cpk:w-6", className],
+        class: ["cpk-chat-toggle-button-icon", className],
         strokeWidth: 1.75,
       });
     };

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

@@ -9,7 +9,7 @@ export default defineComponent({
       const { class: className, ...rest } = attrs as Record<string, unknown>;
       return h(IconMessageCircle, {
         ...rest,
-        class: ["cpk:h-6 cpk:w-6", className],
+        class: ["cpk-chat-toggle-button-icon", className],
         strokeWidth: 1.75,
         fill: "currentColor",
       });

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

@@ -0,0 +1,353 @@
+<script setup lang="ts">
+/**
+ * Tool calls made in a row, collapsed into one summary. While a call runs the
+ * summary names it ("Running read_file  src/app.ts"); once they're all done it
+ * reads "Used 3 tools" and opens to the calls.
+ *
+ * Each call is drawn by the `call` slot, which the tool calls view fills with
+ * the registered renderers. CopilotKit's built-in card (`useDefaultRenderTool`)
+ * draws a compact row inside the card and line appearances and an open stack;
+ * a custom wildcard renderer draws whatever it draws.
+ */
+import { computed, provide, ref } from "vue";
+import {
+  ɵformatLabel,
+  ɵformatToolNames,
+  ɵgetToolCallPreview,
+  ɵgetToolCallRowStatus,
+  ɵformatCountLabel,
+} from "@copilotkit/core";
+import type { ToolCallEntry, ɵToolCallRowStatus } from "@copilotkit/core";
+import { useCopilotId } from "../ui/use-id";
+import { ToolCallGroupContextKey } from "./tool-call-display-context";
+import type { ToolCallGroupContextValue } from "./tool-call-display-context";
+import {
+  CopilotChatCollapsible,
+  ToolCallChevron,
+  ToolCallFailedCount,
+  ToolCallStatusIcon,
+  toolCallStatusLabel,
+} from "./tool-call-group-parts";
+import { useChatLabels } from "./use-chat-labels";
+import type { CopilotChatToolCallGroupAppearance } from "./types";
+
+const props = withDefaults(
+  defineProps<{
+    /** The calls in the group, in order. */
+    calls: ToolCallEntry[];
+    /**
+     * - `"card"` (default): one card with a summary header and a row per call.
+     * - `"line"`: a quiet line of text that opens to a list of rows.
+     * - `"stack"`: the latest call on a stack of the earlier ones.
+     */
+    appearance?: CopilotChatToolCallGroupAppearance;
+    /** The agent is running and nothing follows the group, so more calls may join it. */
+    isActive?: boolean;
+  }>(),
+  { appearance: "card", isActive: false },
+);
+
+defineSlots<{
+  /** Draws one call. */
+  call(props: { call: ToolCallEntry }): unknown;
+}>();
+
+const labels = useChatLabels();
+const open = ref(false);
+const bodyId = useCopilotId("cpk-tool-call-group");
+const toggle = () => {
+  open.value = !open.value;
+};
+
+const latest = computed(() => props.calls[props.calls.length - 1]);
+// Only an active group has a call in progress. Between calls nothing is
+// running, so the latest call stays the subject (or the label flickers).
+const current = computed(() =>
+  props.isActive
+    ? (props.calls.find((call) => !call.toolMessage) ?? latest.value)
+    : undefined,
+);
+const preview = computed(() =>
+  current.value ? ɵgetToolCallPreview(current.value) : undefined,
+);
+const done = computed(
+  () => props.calls.filter((call) => call.toolMessage).length,
+);
+const statuses = computed(() =>
+  props.calls.map((call) => ɵgetToolCallRowStatus(call, props.isActive)),
+);
+const failedIds = computed(
+  () =>
+    new Set(
+      props.calls
+        .filter((_, index) => statuses.value[index] === "failed")
+        .map((call) => call.toolCall.id),
+    ),
+);
+const status = computed<ɵToolCallRowStatus>(() =>
+  current.value
+    ? "running"
+    : failedIds.value.size > 0
+      ? "failed"
+      : statuses.value.includes("stopped")
+        ? "stopped"
+        : "done",
+);
+const single = computed(
+  () =>
+    props.appearance === "line" && props.calls.length === 1 && !current.value,
+);
+
+provide(
+  ToolCallGroupContextKey,
+  computed<ToolCallGroupContextValue>(() => ({
+    appearance: props.appearance,
+    failedIds: failedIds.value,
+    active: props.isActive,
+  })),
+);
+
+// Stack: a lone call is the top card of a stack with nothing behind it yet.
+const behind = computed(() =>
+  open.value ? 0 : Math.min(props.calls.length - 1, 2),
+);
+const latestStatus = computed(() =>
+  latest.value ? ɵgetToolCallRowStatus(latest.value, props.isActive) : "done",
+);
+const latestPreview = computed(() =>
+  latest.value ? ɵgetToolCallPreview(latest.value) : undefined,
+);
+const runningLabel = computed(() =>
+  current.value
+    ? ɵformatLabel(labels.value.toolCallRunningLabel, {
+        name: current.value.toolCall.function.name,
+      })
+    : "",
+);
+const usedToolsLabel = computed(() =>
+  ɵformatCountLabel(props.calls.length, {
+    one: labels.value.toolCallUsedToolsOne,
+    other: labels.value.toolCallUsedToolsOther,
+  }),
+);
+const toolNames = computed(() => ɵformatToolNames(props.calls));
+const latestStatusLabel = computed(() =>
+  toolCallStatusLabel(labels.value, latestStatus.value),
+);
+const layer = "cpk-tool-call-group-stack-layer";
+</script>
+
+<template>
+  <div
+    v-if="latest && single"
+    data-copilotkit
+    data-testid="copilot-tool-call-group"
+    :data-appearance="appearance"
+    :data-state="status"
+    class="cpk-tool-call-group cpk-tool-call-group-line cpk-tool-call-group-single"
+  >
+    <slot name="call" :call="latest" />
+  </div>
+
+  <div
+    v-else-if="latest && appearance === 'line'"
+    data-copilotkit
+    data-testid="copilot-tool-call-group"
+    :data-appearance="appearance"
+    :data-state="status"
+    class="cpk-tool-call-group cpk-tool-call-group-line"
+  >
+    <button
+      type="button"
+      :aria-expanded="open ? 'true' : 'false'"
+      :aria-controls="bodyId"
+      class="cpk-tool-call-group-line-toggle"
+      @click="toggle"
+    >
+      <template v-if="current">
+        <span class="cpk-tool-call-group-running cpk-shimmer">{{
+          runningLabel
+        }}</span>
+        <span v-if="preview" class="cpk-tool-call-group-preview">{{
+          preview
+        }}</span>
+      </template>
+      <template v-else>
+        <span class="cpk-tool-call-group-line-summary">{{
+          usedToolsLabel
+        }}</span>
+        <span class="cpk-tool-call-group-line-names">{{ toolNames }}</span>
+        <ToolCallFailedCount :calls="calls" />
+      </template>
+      <ToolCallChevron :open="open" />
+    </button>
+    <CopilotChatCollapsible :id="bodyId" :open="open">
+      <div class="cpk-tool-call-group-line-body">
+        <template v-for="call in calls" :key="call.toolCall.id">
+          <slot name="call" :call="call" />
+        </template>
+      </div>
+    </CopilotChatCollapsible>
+  </div>
+
+  <div
+    v-else-if="latest && appearance === 'stack'"
+    data-copilotkit
+    data-testid="copilot-tool-call-group"
+    :data-appearance="appearance"
+    :data-state="status"
+    class="cpk-tool-call-group cpk-tool-call-group-stack"
+    :style="{ paddingBottom: `${behind * 6}px` }"
+  >
+    <div class="cpk-tool-call-group-stack-pile">
+      <div
+        v-for="index in behind"
+        :key="index"
+        aria-hidden="true"
+        :class="[layer, 'cpk-tool-call-group-stack-behind']"
+        :style="{
+          transform: `translateY(${index * 6}px) scaleX(${1 - index * 0.045})`,
+          zIndex: -index,
+          opacity: 1 - index * 0.28,
+        }"
+      />
+      <!-- One toggle in both states, so it keeps keyboard focus when pressed. -->
+      <button
+        type="button"
+        :aria-expanded="open ? 'true' : 'false'"
+        :aria-controls="open ? bodyId : undefined"
+        :class="[
+          'cpk-tool-call-group-stack-toggle',
+          open
+            ? 'cpk-tool-call-group-stack-toggle-open'
+            : [layer, 'cpk-tool-call-group-stack-toggle-closed'],
+        ]"
+        @click="toggle"
+      >
+        <template v-if="open">
+          {{
+            ɵformatCountLabel(calls.length, {
+              one: labels.toolCallToolCallCountOne,
+              other: labels.toolCallToolCallCountOther,
+            })
+          }}
+          <ToolCallFailedCount :calls="calls" />
+          <span class="cpk-tool-call-group-stack-collapse">
+            {{ labels.toolCallCollapseLabel }}
+            <ToolCallChevron
+              :open="true"
+              class="cpk-tool-call-group-stack-collapse-icon"
+            />
+          </span>
+        </template>
+        <template v-else>
+          <span
+            :key="latest.toolCall.id"
+            class="cpk-tool-call-group-stack-latest"
+          >
+            <ToolCallStatusIcon :status="latestStatus" />
+            <span
+              :class="[
+                'cpk-tool-call-group-stack-name',
+                latestStatus === 'running' && 'cpk-shimmer',
+              ]"
+              >{{ latest.toolCall.function.name }}</span
+            >
+            <span
+              v-if="latestPreview"
+              class="cpk-tool-call-group-stack-preview"
+              >{{ latestPreview }}</span
+            >
+            <!-- The status icon is decorative, so say the status. -->
+            <span class="cpk-tool-call-group-stack-status">{{
+              latestStatusLabel
+            }}</span>
+          </span>
+          <span class="cpk-tool-call-group-stack-meta">
+            <ToolCallFailedCount :calls="calls" />
+            <span class="cpk-tool-call-group-stack-count">{{
+              ɵformatCountLabel(calls.length, {
+                one: labels.toolCallCallCountOne,
+                other: labels.toolCallCallCountOther,
+              })
+            }}</span>
+            <ToolCallChevron
+              :open="false"
+              class="cpk-tool-call-group-stack-expand-icon"
+            />
+          </span>
+        </template>
+      </button>
+      <!-- Always mounted, so screen readers hear the closed stack's latest
+             call change ("read_file: Running", then "read_file: Done"); the
+             button only names it. -->
+      <span aria-live="polite" class="cpk-tool-call-group-stack-live">{{
+        open ? "" : `${latest.toolCall.function.name}: ${latestStatusLabel}`
+      }}</span>
+    </div>
+    <!-- Each call gets the collapsed stack's card, easing out of the stack. -->
+    <div v-if="open" :id="bodyId" class="cpk-tool-call-group-stack-items">
+      <div
+        v-for="(call, index) in calls"
+        :key="call.toolCall.id"
+        :class="[layer, 'cpk-tool-call-group-stack-item']"
+        :style="{ animationDelay: `${index * 30}ms` }"
+      >
+        <slot name="call" :call="call" />
+      </div>
+    </div>
+  </div>
+
+  <!-- card: one call gets the same card as several, so the card a run
+         starts with doesn't change style when the next call joins it. -->
+  <div
+    v-else-if="latest"
+    data-copilotkit
+    data-testid="copilot-tool-call-group"
+    :data-appearance="appearance"
+    :data-state="status"
+    class="cpk-tool-call-group cpk-tool-call-group-card"
+  >
+    <button
+      type="button"
+      :aria-expanded="open ? 'true' : 'false'"
+      :aria-controls="bodyId"
+      class="cpk-tool-call-group-card-toggle"
+      @click="toggle"
+    >
+      <ToolCallStatusIcon :status="status" />
+      <template v-if="current">
+        <span class="cpk-tool-call-group-running cpk-shimmer">{{
+          runningLabel
+        }}</span>
+        <span v-if="preview" class="cpk-tool-call-group-preview">{{
+          preview
+        }}</span>
+      </template>
+      <template v-else>
+        <span class="cpk-tool-call-group-card-summary">{{
+          usedToolsLabel
+        }}</span>
+        <span class="cpk-tool-call-group-card-names">{{ toolNames }}</span>
+      </template>
+      <span class="cpk-tool-call-group-card-meta">
+        <ToolCallFailedCount v-if="status === 'failed'" :calls="calls" />
+        <span v-else class="cpk-tool-call-group-card-status">{{
+          status !== "running"
+            ? toolCallStatusLabel(labels, status)
+            : done > 0
+              ? ɵformatLabel(labels.toolCallDoneCountLabel, { count: done })
+              : ""
+        }}</span>
+        <ToolCallChevron :open="open" />
+      </span>
+    </button>
+    <CopilotChatCollapsible :id="bodyId" :open="open">
+      <div>
+        <template v-for="call in calls" :key="call.toolCall.id">
+          <slot name="call" :call="call" />
+        </template>
+      </div>
+    </CopilotChatCollapsible>
+  </div>
+</template>

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

@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import type { Message, ToolCall } from "@ag-ui/core";
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
+import { ɵresolveToolCallRenderer } from "@copilotkit/core";
 import { useCopilotKit } from "../../providers/useCopilotKit";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import type { CopilotChatToolCallRenderSlotProps } from "./types";
 import {
-  getCoreRenderConfig,
   getCoreRenderProps,
   getToolCallMemoDeps,
   getToolCallRenderProps,
   getToolCallSlotName,
 } from "./copilotChatToolCallItemRender";
+import {
+  ToolCallCaptureScope,
+  useLearningConfigured,
+} from "./tool-call-capture";
 
 const props = withDefaults(
   defineProps<{
@@ -31,6 +35,7 @@ defineSlots<{
 
 const { copilotkit, executingToolCallIds } = useCopilotKit();
 const config = useCopilotChatConfiguration();
+const learningConfigured = useLearningConfigured(copilotkit);
 
 function getRenderProps(): CopilotChatToolCallRenderSlotProps {
   return getToolCallRenderProps(
@@ -50,9 +55,9 @@ function getCoreProps() {
 
 function getRenderConfig() {
   const agentId = config.value?.agentId ?? DEFAULT_AGENT_ID;
-  return getCoreRenderConfig(
-    props.toolCall,
+  return ɵresolveToolCallRenderer(
     copilotkit.value.renderToolCalls,
+    props.toolCall.function.name,
     agentId,
   );
 }
@@ -70,17 +75,22 @@ function getMemoDeps() {
 </script>
 
 <template>
-  <slot
-    :name="getToolCallSlotName(toolCall.function.name)"
-    v-bind="getRenderProps()"
+  <ToolCallCaptureScope
+    :tool-call-id="toolCall.id"
+    :enabled="learningConfigured"
   >
-    <slot name="tool-call" v-bind="getRenderProps()">
-      <component
-        :is="getRenderConfig()?.render"
-        v-if="getRenderConfig()"
-        v-memo="getMemoDeps()"
-        v-bind="getCoreProps()"
-      />
+    <slot
+      :name="getToolCallSlotName(toolCall.function.name)"
+      v-bind="getRenderProps()"
+    >
+      <slot name="tool-call" v-bind="getRenderProps()">
+        <component
+          :is="getRenderConfig()?.render"
+          v-if="getRenderConfig()"
+          v-memo="getMemoDeps()"
+          v-bind="getCoreProps()"
+        />
+      </slot>
     </slot>
-  </slot>
+  </ToolCallCaptureScope>
 </template>