generic-tool

1import React, { memo } from "react";
2import type { TimelineStep, StepState } from "../types/timeline";
3import { useToolComplete } from "../hooks/use-tool-complete";
4import { ToolRowBase } from "./tool-row-base";
5 
6export type GenericToolRowProps = {
7  step: Extract<TimelineStep, { type: "tool-call" }>;
8  state: StepState;
9  onComplete: () => void;
10};
11 
12export function GenericToolRow({
13  step,
14  state,
15  onComplete,
16}: GenericToolRowProps) {
17  useToolComplete(state === "animating", step.duration, onComplete);
18  const isPending = state === "animating";
19 
20  return (
21    <ToolRowBase
22      shimmerLabel={step.toolName}
23      completeLabel={step.toolName}
24      isAnimating={isPending}
25      detail={step.toolDetail}
26    />
27  );
28}
29 
30export type GenericToolProps = {
31  icon?: React.ComponentType<{ className?: string }>;
32  title: string;
33  subtitle?: string;
34  isPending: boolean;
35  isError?: boolean;
36};
37 
38export const GenericTool = memo(function GenericTool({
39  icon,
40  title,
41  subtitle,
42  isPending,
43}: GenericToolProps) {
44  const Icon = icon;
45 
46  return (
47    <ToolRowBase
48      icon={
49        Icon ? (
50          <Icon className="w-full h-full shrink-0 text-muted-foreground" />
51        ) : undefined
52      }
53      shimmerLabel={title}
54      completeLabel={title}
55      isAnimating={isPending}
56      detail={subtitle}
57    />
58  );
59});