@agent-native/toolkit 0.214.0 → 0.216.0

package/src/app/chat/chat/tool-call-display.tsx

@@ -47,6 +47,11 @@ import React, {
   useRef,
 } from "react";
 
+import {
+  workedForRowChevronStyle,
+  workedForRowSummaryStyle,
+  type AgentChatWorkedForRowLayout,
+} from "../../agentkit/react/transcript-layout.js";
 import { AgentTaskCard } from "../AgentTaskCard.js";
 import { ConnectBuilderCard } from "../ConnectBuilderCard.js";
 import { FileStorageSetupPopover } from "../FileStorageSetupPopover.js";
@@ -641,6 +646,8 @@ export function ToolCallDisplay({
   repeatCount,
   isLatestRunning = isRunning,
   isActiveTail,
+  workedForRowLayout,
+  formatWorkedForDuration,
 }: {
   toolName: string;
   toolCallId?: string;
@@ -662,6 +669,8 @@ export function ToolCallDisplay({
   };
   repeatCount?: number;
   isActiveTail?: boolean;
+  workedForRowLayout?: AgentChatWorkedForRowLayout;
+  formatWorkedForDuration?: (durationMs: number) => string;
   /** @deprecated Use isActiveTail. */
   isLatestRunning?: boolean;
 }) {
@@ -748,6 +757,8 @@ export function ToolCallDisplay({
       approval={approval}
       repeatCount={repeatCount}
       context={builderContext}
+      workedForRowLayout={workedForRowLayout}
+      formatWorkedForDuration={formatWorkedForDuration}
     />,
   );
 }
@@ -770,6 +781,8 @@ function ToolCallDisplayGeneric({
   approval,
   repeatCount,
   context,
+  workedForRowLayout,
+  formatWorkedForDuration,
 }: {
   toolName: string;
   toolCallId?: string;
@@ -791,6 +804,8 @@ function ToolCallDisplayGeneric({
   };
   repeatCount?: number;
   context?: string;
+  workedForRowLayout?: AgentChatWorkedForRowLayout;
+  formatWorkedForDuration?: (durationMs: number) => string;
 }) {
   const t = useT();
   const embeddedInWorkSummary = React.useContext(WorkSummaryContentContext);
@@ -974,6 +989,8 @@ function ToolCallDisplayGeneric({
             ? structuredMeta.agentDurationMs
             : agentActivity?.durationMs
         }
+        workedForRowLayout={workedForRowLayout}
+        formatWorkedForDuration={formatWorkedForDuration}
       />
     );
   }
@@ -1142,6 +1159,8 @@ function AgentCallCell({
   isError,
   errorText,
   durationMs,
+  workedForRowLayout,
+  formatWorkedForDuration,
 }: {
   agentName: string;
   toolCallId?: string;
@@ -1152,6 +1171,8 @@ function AgentCallCell({
   isError: boolean;
   errorText?: string;
   durationMs?: number;
+  workedForRowLayout?: AgentChatWorkedForRowLayout;
+  formatWorkedForDuration?: (durationMs: number) => string;
 }) {
   const t = useT();
   const formatDuration = useLocalizedWorkedDuration();
@@ -1274,7 +1295,11 @@ function AgentCallCell({
             (isRunning ? (
               workContent
             ) : (
-              <WorkedForSummary durationMs={durationMs}>
+              <WorkedForSummary
+                durationMs={durationMs}
+                layout={workedForRowLayout}
+                formatWorkedForDuration={formatWorkedForDuration}
+              >
                 {workContent}
               </WorkedForSummary>
             ))}
@@ -1822,12 +1847,16 @@ export function WorkedForSummary({
   defaultOpen = false,
   autoCollapse = false,
   children,
+  layout,
+  formatWorkedForDuration,
 }: {
   durationMs?: number | null;
   isRunning?: boolean;
   defaultOpen?: boolean;
   autoCollapse?: boolean;
   children: React.ReactNode;
+  layout?: AgentChatWorkedForRowLayout;
+  formatWorkedForDuration?: (durationMs: number) => string;
 }) {
   const t = useT();
   const formatDuration = useLocalizedWorkedDuration();
@@ -1845,7 +1874,7 @@ export function WorkedForSummary({
     ? t("agentChat.status.working")
     : durationMs != null && durationMs >= 1000
       ? t("agentChat.tool.workedFor", {
-          duration: formatDuration(durationMs),
+          duration: (formatWorkedForDuration ?? formatDuration)(durationMs),
         })
       : t("agentChat.tool.worked");
 
@@ -1855,17 +1884,20 @@ export function WorkedForSummary({
         type="button"
         onClick={() => setOpen((v) => !v)}
         aria-expanded={open}
-        className="agent-kit-density flex items-center gap-1.5 py-0.5 text-muted-foreground transition-colors hover:text-foreground"
+        className="agent-kit-density flex w-full items-center gap-1 rounded-lg p-3 text-start text-muted-foreground transition-colors hover:text-foreground"
+        style={workedForRowSummaryStyle(layout)}
       >
-        <span className={cn(isRunning && "agent-running-shimmer")}>
-          {label}
-        </span>
         <IconChevronRight
+          aria-hidden="true"
           className={cn(
-            "size-3.5 shrink-0 transition-transform",
-            open && "rotate-90",
+            "size-4 shrink-0 transition-transform rtl:-scale-x-100",
+            open && "rotate-90 rtl:-rotate-90",
           )}
+          style={workedForRowChevronStyle(layout)}
         />
+        <span className={cn(isRunning && "agent-running-shimmer")}>
+          {label}
+        </span>
       </button>
       <AnimatedCollapse open={open}>
         <WorkSummaryContentContext.Provider value>