feat(ui): move todo list above response, add summary

Author: dazy-ds

typescript/ui/__tests__/unit/TodoList.test.tsx

@@ -126,4 +126,21 @@ describe("TodoList", () => {
     const ids = childTasks.map((el) => el.getAttribute("data-testid"));
     expect(ids).toEqual(["todo-task-c2", "todo-task-c1"]);
   });
+
+  it("renders task summary when provided", () => {
+    const tasks = [
+      makeTask({
+        id: "with-summary",
+        description: "Task with summary",
+        summary: "This is a summary",
+      }),
+    ];
+
+    render(<TodoList tasks={tasks} />);
+
+    const task = screen.getByTestId("todo-task-with-summary");
+    expect(task).toBeInTheDocument();
+    expect(screen.getByText("Task with summary")).toBeInTheDocument();
+    expect(screen.getByText("This is a summary")).toBeInTheDocument();
+  });
 });

typescript/ui/src/core/components/ChatMessage/ChatMessage.tsx

@@ -93,6 +93,7 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
                     classNames={{ liveUpdates: classNames?.liveUpdates }}
                   />
                 )}
+                {message.tasks && <TodoList tasks={message.tasks} />}
                 <MarkdownContent
                   content={content}
                   classNames={classNames?.content}
@@ -101,7 +102,6 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
                 {showMessageReferences && (
                   <MessageReferences references={references} />
                 )}
-                {message.tasks && <TodoList tasks={message.tasks} />}
                 {showMessageActions && (
                   <MessageActions
                     content={content}

typescript/ui/src/core/components/TodoList.tsx

@@ -11,60 +11,63 @@ export default function TodoList({ tasks, depth = 0 }: TodoListProps) {
 
   return (
     <div className="space-y-2" data-testid={`todo-list-root-${depth}`}>
-      {tasksTree.getRoots().map(({ id, description, status, children }) => {
-        const inProgressIcon = (
-          <CircularProgress
-            size="sm"
-            color="primary"
-            aria-label="Task is in progress"
-            className="m-0 p-0"
-            classNames={{
-              svg: "w-4 h-4",
-            }}
-          />
-        );
-        return (
-          <div key={id} data-testid={`todo-task-${id}`}>
-            <div>
-              <Checkbox
-                isSelected={status === TaskStatus.Completed}
-                disabled
-                className="block"
-                icon={
-                  status === TaskStatus.InProgress
-                    ? () => inProgressIcon
-                    : undefined
-                }
-                classNames={{
-                  hiddenInput: "cursor-default",
-                  wrapper:
-                    status === TaskStatus.InProgress && "before:border-none",
-                  base: "pointer-events-none hover:bg-transparent",
-                  label: [
-                    "transition-colors",
-                    status === TaskStatus.Completed &&
-                      "line-through text-default-400",
-                    status === TaskStatus.InProgress && "text-primary italic",
-                    status === TaskStatus.Pending && "text-default-900",
-                  ]
-                    .filter(Boolean)
-                    .join(" "),
-                }}
-              >
-                {description}
-              </Checkbox>
-            </div>
-            {children.length > 0 && (
-              <div
-                style={{ marginLeft: `${(depth + 1) * 0.5}rem` }}
-                data-testid={`todo-children-wrapper-${id}`}
-              >
-                <TodoList tasks={children} depth={depth + 1} />
+      {tasksTree
+        .getRoots()
+        .map(({ id, description, status, summary, children }) => {
+          const inProgressIcon = (
+            <CircularProgress
+              size="sm"
+              color="primary"
+              aria-label="Task is in progress"
+              className="m-0 p-0"
+              classNames={{
+                svg: "w-4 h-4",
+              }}
+            />
+          );
+          return (
+            <div key={id} data-testid={`todo-task-${id}`}>
+              <div>
+                <Checkbox
+                  isSelected={status === TaskStatus.Completed}
+                  disabled
+                  className="block"
+                  icon={
+                    status === TaskStatus.InProgress
+                      ? () => inProgressIcon
+                      : undefined
+                  }
+                  classNames={{
+                    hiddenInput: "cursor-default",
+                    wrapper:
+                      status === TaskStatus.InProgress && "before:border-none",
+                    base: "pointer-events-none hover:bg-transparent",
+                    label: [
+                      "transition-colors",
+                      status === TaskStatus.Completed &&
+                        "line-through text-default-400",
+                      status === TaskStatus.InProgress && "text-primary italic",
+                      status === TaskStatus.Pending && "text-default-900",
+                    ]
+                      .filter(Boolean)
+                      .join(" "),
+                  }}
+                >
+                  {description}
+                  {summary && <p className="ml-7">{summary}</p>}
+                </Checkbox>
               </div>
-            )}
-          </div>
-        );
-      })}
+              {children.length > 0 && (
+                <div
+                  style={{ marginLeft: `${(depth + 1) * 0.5}rem` }}
+                  data-testid={`todo-children-wrapper-${id}`}
+                >
+                  <TodoList tasks={children} depth={depth + 1} />
+                </div>
+              )}
+            </div>
+          );
+        })}
     </div>
   );
 }