edit-tool

1import React, { memo } from "react";
2import { MultiFileDiff, type FileContents } from "@pierre/diffs/react";
3import { TextShimmer } from "../text-shimmer";
4import type { TimelineStep, StepState } from "../types/timeline";
5import { useToolComplete } from "../hooks/use-tool-complete";
6import { IconChevronDown } from "@tabler/icons-react";
7import { FileExtIcon } from "../icons/file-ext-icon";
8import {
9  mapToolInvocationToStep,
10  mapToolStateToStepState,
11} from "../utils/tool-adapters";
12import { ToolApprovalFooter, type ToolApproval } from "./tool-approval-footer";
13 
14export type EditToolDiffCardProps = {
15  step: Extract<TimelineStep, { type: "tool-call" }>;
16  state: StepState;
17  onComplete: () => void;
18  input?: Record<string, unknown>;
19  output?: Record<string, unknown>;
20  isCollapsible?: boolean;
21  approval?: ToolApproval;
22};
23 
24export function EditToolDiffCard({
25  step,
26  state,
27  onComplete,
28  input,
29  output,
30  isCollapsible = false,
31  approval,
32}: EditToolDiffCardProps) {
33  useToolComplete(state === "animating", step.duration, onComplete);
34  const isPending = state === "animating";
35  const fileName = step.filePath?.split("/").pop() ?? step.toolDetail;
36  const hasFileName = Boolean(fileName);
37  const isWrite = step.toolName === "Write";
38  const [themeType, setThemeType] = React.useState<"light" | "dark">("light");
39  const [isExpanded, setIsExpanded] = React.useState(!isCollapsible);
40 
41  React.useEffect(() => {
42    if (typeof window === "undefined") return;
43    const updateTheme = () => {
44      const isDark = document.documentElement.classList.contains("dark");
45      setThemeType(isDark ? "dark" : "light");
46    };
47    updateTheme();
48 
49    const observer = new MutationObserver(updateTheme);
50    observer.observe(document.documentElement, {
51      attributes: true,
52      attributeFilter: ["class"],
53    });
54 
55    return () => {
56      observer.disconnect();
57    };
58  }, []);
59 
60  React.useEffect(() => {
61    setIsExpanded(!isCollapsible);
62  }, [isCollapsible]);
63 
64  const diffFiles = React.useMemo(() => {
65    const fileLabel = fileName || "file";
66    const oldFromOutput =
67      typeof output?.old_content === "string" ? output.old_content : undefined;
68    const newFromOutput =
69      typeof output?.content === "string" ? output.content : undefined;
70    const oldFromInput =
71      !oldFromOutput && typeof input?.old_string === "string"
72        ? input.old_string
73        : undefined;
74    const newFromInput =
75      !newFromOutput && typeof input?.new_string === "string"
76// … truncated