todo-tool

1import { memo, useMemo } from "react";
2import { CheckIcon, IconArrowRight } from "../icons";
3import { TextShimmer } from "../text-shimmer";
4import { getToolStatus, areToolPropsEqual } from "../utils/format-tool";
5import { cn } from "../utils/cn";
6 
7export type TodoItem = {
8  content: string;
9  status: "pending" | "in_progress" | "completed";
10  activeForm?: string;
11};
12 
13export type TodoToolProps = {
14  part: any;
15  chatStatus?: string;
16};
17 
18export type TodoChange = {
19  todo: TodoItem;
20  oldStatus?: TodoItem["status"];
21  newStatus: TodoItem["status"];
22  index: number;
23};
24 
25type ChangeType = "creation" | "single" | "multiple";
26 
27export type DetectedChanges = {
28  type: ChangeType;
29  items: TodoChange[];
30};
31 
32function detectChanges(
33  oldTodos: TodoItem[],
34  newTodos: TodoItem[],
35): DetectedChanges {
36  if (!oldTodos || oldTodos.length === 0) {
37    return {
38      type: "creation",
39      items: newTodos.map((todo, index) => ({
40        todo,
41        newStatus: todo.status,
42        index,
43      })),
44    };
45  }
46 
47  const changes: TodoChange[] = [];
48  newTodos.forEach((newTodo, index) => {
49    const oldTodo = oldTodos[index];
50    if (!oldTodo || oldTodo.status !== newTodo.status) {
51      changes.push({
52        todo: newTodo,
53        oldStatus: oldTodo?.status,
54        newStatus: newTodo.status,
55        index,
56      });
57    }
58  });
59 
60  if (changes.length === 1) return { type: "single", items: changes };
61  return { type: "multiple", items: changes };
62}
63 
64const TodoStatusIcon = ({
65  status,
66  isPending,
67}: {
68  status: TodoItem["status"];
69  isPending?: boolean;
70}) => {
71  if (isPending && status === "in_progress") {
72    return (
73      <div className="w-3.5 h-3.5 rounded-full flex items-center justify-center shrink-0 border border-an-foreground-muted/60">
74        <IconArrowRight className="w-2 h-2 text-an-foreground-muted/70" />
75      </div>
76    );
77  }
78 
79  switch (status) {
80    case "completed":
81      return (
82        <div className="w-3.5 h-3.5 rounded-full flex items-center justify-center shrink-0 border border-an-foreground-muted/40">
83          <CheckIcon className="w-2 h-2 text-an-foreground-muted/70" />
84        </div>
85      );
86    case "in_progress":
87      return (
88        <div className="w-3.5 h-3.5 rounded-full flex items-center justify-center shrink-0 border border-an-foreground-muted/60">
89          <IconArrowRight className="w-2 h-2 text-an-foreground-muted/70" />
90        </div>
91      );
92    default:
93      return (
94// … truncated