tool-group
agent-elements/tool-groupFreeComponent
agent-elements publishes no description for this item.
Live preview
live · rendered by the registry
Rendered by agent-elements on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://agent-elements.21st.dev/r/tool-group.jsonSource
1import { memo, useEffect, useMemo, useRef, useState } from "react";2import { toolRegistry } from "./tool-registry";3import { GenericTool } from "./generic-tool";4import { getToolStatus } from "../utils/format-tool";5import { cn } from "../utils/cn";6import { ToolRowBase } from "./tool-row-base";78export type ToolGroupProps = {9 part: any;10 nestedTools?: any[];11 chatStatus?: string;12 completeLabel: string;13 shimmerLabel?: string;14 interruptedLabel: string;15 maxVisibleTools?: number;16 defaultOpen?: boolean;17 showElapsed?: boolean;18};1920function formatElapsedTime(ms: number): string {21 if (ms < 1000) return "";22 const seconds = Math.floor(ms / 1000);23 if (seconds < 60) return `${seconds}s`;24 const minutes = Math.floor(seconds / 60);25 const remainingSeconds = seconds % 60;26 if (remainingSeconds === 0) return `${minutes}m`;27 return `${minutes}m ${remainingSeconds}s`;28}2930function formatCount(value: number, label: string): string {31 return `${value} ${value === 1 ? label : `${label}s`}`;32}3334function summarizeNestedTools(nestedTools: any[]): string {35 if (nestedTools.length === 0) return "";36 const fileTypes = new Set(["tool-Read", "tool-Edit", "tool-Write"]);37 const searchTypes = new Set([38 "tool-Search",39 "tool-Grep",40 "tool-Glob",41 "tool-WebSearch",42 ]);43 const commandTypes = new Set(["tool-Bash"]);4445 let fileCount = 0;46 let searchCount = 0;47 let commandCount = 0;4849 for (const tool of nestedTools) {50 if (fileTypes.has(tool.type)) fileCount += 1;51 else if (searchTypes.has(tool.type)) searchCount += 1;52 else if (commandTypes.has(tool.type)) commandCount += 1;53 }5455 const parts: string[] = [];56 if (fileCount > 0) parts.push(formatCount(fileCount, "file"));57 if (searchCount > 0)58 parts.push(`${searchCount} ${searchCount === 1 ? "search" : "searches"}`);59 if (commandCount > 0) parts.push(formatCount(commandCount, "command"));6061 if (parts.length === 0) return "";62 if (parts.length === 1) return parts[0];63 if (parts.length === 2) return `${parts[0]} and ${parts[1]}`;64 return `${parts.slice(0, -1).join(", ")}, and ${parts[parts.length - 1]}`;65}6667function getNestedCounts(nestedTools: any[]) {68 const fileTypes = new Set(["tool-Read", "tool-Edit", "tool-Write"]);69 const searchTypes = new Set([70 "tool-Search",71 "tool-Grep",72 "tool-Glob",73 "tool-WebSearch",74 ]);75 let fileCount = 0;76 let searchCount = 0;7778 for (const tool of nestedTools) {79 if (fileTypes.has(tool.type)) fileCount += 1;80// … truncated
More from agent-elements
All 25 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| agent-chatagent-chat | agent-elements | Components | Free | no deps | |
| attachment-buttonattachment-button | agent-elements | Components | Free | no deps | |
| bash-toolbash-tool | agent-elements | Components | Free | no deps | |
| edit-tooledit-tool | agent-elements | Components | Free | no deps | |
| error-messageerror-message | agent-elements | Components | Free | no deps | |
| file-attachmentfile-attachment | agent-elements | Components | Free | no deps | |
| generic-toolgeneric-tool | agent-elements | Components | Free | no deps | |
| input-barinput-bar | agent-elements | Components | Free | no deps |
