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

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

@@ -1,49 +1,222 @@
 <script setup lang="ts">
-import { useSlots } from "vue";
+import { computed, defineComponent, h, inject, provide, useSlots } from "vue";
+import type { PropType } from "vue";
+import type { Slots, VNode } from "vue";
 import type { AssistantMessage, Message } from "@ag-ui/core";
-import type { CopilotChatToolCallRenderSlotProps } from "./types";
+import {
+  ɵgetToolCallLayouts,
+  ɵgetToolCallRendererNames,
+} from "@copilotkit/core";
+import type {
+  CopilotChatToolCallDisplay,
+  ToolCallEntry,
+} from "@copilotkit/core";
+import { useCopilotKit } from "../../providers/useCopilotKit";
+import type {
+  CopilotChatToolCallGroupAppearance,
+  CopilotChatToolCallRenderSlotProps,
+  CopilotChatToolCallsGroupSlotProps,
+} from "./types";
 import CopilotChatToolCallItem from "./CopilotChatToolCallItem.vue";
+import CopilotChatToolCallGroup from "./CopilotChatToolCallGroup.vue";
+import { CopilotChatCollapsible } from "./tool-call-group-parts";
+import {
+  ToolCallDisplayContextKey,
+  ToolCallGroupContextKey,
+} from "./tool-call-display-context";
+import type { ToolCallGroupContextValue } from "./tool-call-display-context";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     message: AssistantMessage;
     messages?: Message[];
+    /**
+     * How to show the calls (see `CopilotChatToolCallDisplay`). Inside a
+     * message view it follows the view's `toolCallDisplay`; on its own it
+     * defaults to `"grouped"`.
+     */
+    display?: CopilotChatToolCallDisplay;
   }>(),
   {
     messages: () => [],
+    display: undefined,
   },
 );
 
 defineSlots<{
   "tool-call"?: (props: CopilotChatToolCallRenderSlotProps) => unknown;
+  /** Replaces a group of calls made in a row. */
+  "tool-calls-group"?: (props: CopilotChatToolCallsGroupSlotProps) => unknown;
   [key: `tool-call-${string}`]: (
     props: CopilotChatToolCallRenderSlotProps,
   ) => unknown;
 }>();
 
 type ToolCallSlotName = "tool-call" | `tool-call-${string}`;
-const componentSlots = useSlots() as Record<
-  ToolCallSlotName,
-  (props?: unknown) => unknown
->;
-function getForwardedSlotNames(): ToolCallSlotName[] {
-  return Object.keys(componentSlots) as ToolCallSlotName[];
+
+const appearances: Partial<
+  Record<CopilotChatToolCallDisplay, CopilotChatToolCallGroupAppearance>
+> = {
+  grouped: "card",
+  line: "line",
+  stacked: "stack",
+};
+
+const componentSlots = useSlots() as Slots;
+const { copilotkit } = useCopilotKit();
+const context = inject(ToolCallDisplayContextKey, null);
+
+/** The slots that draw tool calls, which each call's item renders. */
+function getToolCallSlotNames(): ToolCallSlotName[] {
+  return Object.keys(componentSlots).filter(
+    (name): name is ToolCallSlotName =>
+      name === "tool-call" || name.startsWith("tool-call-"),
+  );
+}
+
+const display = computed(
+  () => props.display ?? context?.value.display ?? "grouped",
+);
+
+// Inside a message view, groups can span messages, so the view lays them out
+// for the whole list; on its own, this message's calls are grouped.
+const layout = computed(() => {
+  if (display.value === "separate") return undefined;
+  const viewLayout = context?.value.layouts.get(props.message.id);
+  if (viewLayout) return viewLayout;
+  const rendererNames = ɵgetToolCallRendererNames(
+    copilotkit.value.renderToolCalls,
+    { slotNames: getToolCallSlotNames() },
+  );
+  return ɵgetToolCallLayouts(
+    [props.message],
+    props.messages,
+    rendererNames,
+  ).get(props.message.id);
+});
+
+// Whether the agent may still finish a trailing group's calls. Without a
+// message view there's no run state, so a call with no result is assumed to
+// be running, as the built-in card has always shown it.
+const groupActive = (trailing: boolean) =>
+  trailing && (context ? context.value.isRunning : true);
+
+const appearance = computed(() => appearances[display.value] ?? "card");
+
+const workOpen = computed(() => context?.value.workOpen.get(props.message.id));
+
+/**
+ * `"turn"` display: draws the built-in card's calls as compact rows, the way
+ * an open line group does, without a group around them.
+ */
+const TurnRows = defineComponent({
+  props: {
+    calls: { type: Array as PropType<ToolCallEntry[]>, required: true },
+    active: { type: Boolean, required: true },
+  },
+  setup(rowProps, { slots }) {
+    provide(
+      ToolCallGroupContextKey,
+      computed<ToolCallGroupContextValue>(() => ({
+        appearance: "line",
+        failedIds: new Set(
+          rowProps.calls
+            .filter((call) => call.toolMessage?.error)
+            .map((call) => call.toolCall.id),
+        ),
+        active: rowProps.active,
+      })),
+    );
+    return () => slots.default?.();
+  },
+});
+
+/** Draws one call through the registered renderers and tool-call slots. */
+function renderCall(call: ToolCallEntry): VNode {
+  const slots: Record<string, Slots[string]> = {};
+  for (const name of getToolCallSlotNames()) slots[name] = componentSlots[name];
+  return h(
+    CopilotChatToolCallItem,
+    {
+      key: call.toolCall.id,
+      toolCall: call.toolCall,
+      messages: props.messages,
+    },
+    slots,
+  );
 }
 </script>
 
 <template>
-  <CopilotChatToolCallItem
-    v-for="toolCall in message.toolCalls ?? []"
-    :key="toolCall.id"
-    :tool-call="toolCall"
-    :messages="messages"
-  >
-    <template
-      v-for="slotName in getForwardedSlotNames()"
-      :key="slotName"
-      #[slotName]="slotProps"
+  <template v-if="!layout">
+    <CopilotChatToolCallItem
+      v-for="toolCall in message.toolCalls ?? []"
+      :key="toolCall.id"
+      :tool-call="toolCall"
+      :messages="messages"
     >
-      <slot :name="slotName" v-bind="slotProps ?? {}" />
+      <template
+        v-for="slotName in getToolCallSlotNames()"
+        :key="slotName"
+        #[slotName]="slotProps"
+      >
+        <slot :name="slotName" v-bind="slotProps ?? {}" />
+      </template>
+    </CopilotChatToolCallItem>
+  </template>
+  <template v-else>
+    <template v-for="segment in layout.segments" :key="segment.id">
+      <CopilotChatToolCallItem
+        v-if="segment.kind === 'call'"
+        :tool-call="segment.call.toolCall"
+        :messages="messages"
+      >
+        <template
+          v-for="slotName in getToolCallSlotNames()"
+          :key="slotName"
+          #[slotName]="slotProps"
+        >
+          <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+      </CopilotChatToolCallItem>
+      <!-- A row per call, in the open while the agent works; the message view
+           folds them away with the rest of the work once it's done. -->
+      <CopilotChatCollapsible
+        v-else-if="display === 'turn'"
+        :open="workOpen ?? true"
+        class="cpk-tool-calls-view-turn"
+      >
+        <div class="cpk-tool-calls-view-turn-rows">
+          <TurnRows
+            :calls="segment.calls"
+            :active="groupActive(segment.trailing)"
+          >
+            <component
+              :is="renderCall(call)"
+              v-for="call in segment.calls"
+              :key="call.toolCall.id"
+            />
+          </TurnRows>
+        </div>
+      </CopilotChatCollapsible>
+      <slot
+        v-else
+        name="tool-calls-group"
+        :calls="segment.calls"
+        :appearance="appearance"
+        :is-active="groupActive(segment.trailing)"
+        :render-call="renderCall"
+      >
+        <CopilotChatToolCallGroup
+          :calls="segment.calls"
+          :appearance="appearance"
+          :is-active="groupActive(segment.trailing)"
+        >
+          <template #call="{ call }">
+            <component :is="renderCall(call)" />
+          </template>
+        </CopilotChatToolCallGroup>
+      </slot>
     </template>
-  </CopilotChatToolCallItem>
+  </template>
 </template>

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>