thinking-tool

1import { memo } from "react";
2import type { TimelineStep, StepState } from "../types/timeline";
3import { useToolComplete } from "../hooks/use-tool-complete";
4import { ToolRowBase } from "./tool-row-base";
5import {
6  mapToolInvocationToStep,
7  mapToolStateToStepState,
8} from "../utils/tool-adapters";
9 
10export type ThinkingCollapsedProps = {
11  step: Extract<TimelineStep, { type: "tool-call" }>;
12  state: StepState;
13  onComplete: () => void;
14  defaultOpen?: boolean;
15  expanded?: boolean;
16  onToggleExpand?: () => void;
17};
18 
19export function ThinkingCollapsed({
20  step,
21  state,
22  onComplete,
23  defaultOpen,
24  expanded,
25  onToggleExpand,
26}: ThinkingCollapsedProps) {
27  useToolComplete(state === "animating", step.duration, onComplete);
28 
29  return (
30    <ToolRowBase
31      shimmerLabel="Thinking"
32      completeLabel="Thought"
33      isAnimating={state === "animating"}
34      expandable={!!step.thoughtContent}
35      defaultOpen={defaultOpen}
36      expanded={expanded}
37      onToggleExpand={onToggleExpand}
38    >
39      <div className="max-h-[175px] overflow-y-auto">
40        <p className="text-sm text-muted-foreground whitespace-pre-wrap">
41          {step.thoughtContent}
42        </p>
43      </div>
44    </ToolRowBase>
45  );
46}
47 
48export type ThinkingToolProps = {
49  part?: any;
50  step?: Extract<TimelineStep, { type: "tool-call" }>;
51  state?: StepState;
52  onComplete?: () => void;
53  defaultOpen?: boolean;
54  expanded?: boolean;
55  onToggleExpand?: () => void;
56};
57 
58export const ThinkingTool = memo(function ThinkingTool({
59  part,
60  step: externalStep,
61  state: externalState,
62  onComplete: externalOnComplete,
63  defaultOpen,
64  expanded,
65  onToggleExpand,
66}: ThinkingToolProps) {
67  let step: Extract<TimelineStep, { type: "tool-call" }>;
68  let stepState: StepState;
69  let onComplete: () => void;
70 
71  if (externalStep && externalState && externalOnComplete) {
72    step = externalStep;
73    stepState = externalState;
74    onComplete = externalOnComplete;
75  } else if (part) {
76    step = mapToolInvocationToStep(part.toolCallId ?? part.id ?? "thinking", {
77      toolName: "Thinking",
78      args: part.input ?? part.args ?? {},
79      state:
80        part.state === "output-available"
81          ? "result"
82          : part.state === "input-streaming"
83            ? "partial-call"
84            : "call",
85      result: part.output ?? part.result,
86    });
87    stepState = mapToolStateToStepState(
88      part.state === "output-available"
89        ? "result"
90        : part.state === "input-streaming"
91// … truncated