apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-29 10:56:24 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: integrate TodoListMiddleware and update related components

Browse source 
- Removed the write_todos tool as it is now included by default through TodoListMiddleware in the deep agent.
- Updated the system prompt and documentation to reflect the integration of TodoListMiddleware, clarifying its capabilities for managing planning and todo lists.
- Enhanced the chat handling logic to extract todos directly from the deep agent's command output, ensuring seamless user experience.
- Refactored UI components to align with the new data structure and improve rendering of todo items, including updates to the Plan and TodoItem components.
- Cleaned up code for better maintainability and readability, following recent refactoring efforts.
This commit is contained in:
Anish Sarkar 2025-12-27 15:18:34 +05:30
parent 8a3ab3dfac
commit c28a90fc29
10 changed files with 172 additions and 419 deletions
Download patch file Download diff file Expand all files Collapse all files

88
surfsense_web/components/tool-ui/plan/plan.tsx
View file

@ -1,22 +1,16 @@
"use client";
import { CheckCircle2, Circle, CircleDashed, PartyPopper, XCircle } from "lucide-react";
import { CheckCircle2, Circle, CircleDashed, ListTodo, PartyPopper, XCircle } from "lucide-react";
import type { FC } from "react";
import { useMemo, useState } from "react";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { TextShimmerLoader } from "@/components/prompt-kit/loader";
import { Progress } from "@/components/ui/progress";
import { cn } from "@/lib/utils";
import type { Action, ActionsConfig } from "../shared/schema";
import type { PlanTodo, TodoStatus } from "./schema";
import type { TodoStatus } from "./schema";
// ============================================================================
// Status Icon Component
@ -57,7 +51,7 @@ const StatusIcon: FC<StatusIconProps> = ({ status, className, isStreaming = true
// ============================================================================
interface TodoItemProps {
todo: PlanTodo;
todo: { id: string; content: string; status: TodoStatus };
/** When false, in_progress items show as static (no spinner/pulse) */
isStreaming?: boolean;
}
@ -67,38 +61,22 @@ const TodoItem: FC<TodoItemProps> = ({ todo, isStreaming = true }) => {
// Only show shimmer animation if streaming and in progress
const isShimmer = todo.status === "in_progress" && isStreaming;
// Render the label with optional shimmer effect
const renderLabel = () => {
// Render the content with optional shimmer effect
const renderContent = () => {
if (isShimmer) {
return <TextShimmerLoader text={todo.label} size="md" />;
return <TextShimmerLoader text={todo.content} size="md" />;
}
return (
<span className={cn("text-sm", isStrikethrough && "line-through text-muted-foreground")}>
{todo.label}
<span className={cn("text-sm text-muted-foreground", isStrikethrough && "line-through")}>
{todo.content}
</span>
);
};
if (todo.description) {
return (
<AccordionItem value={todo.id} className="border-0">
<AccordionTrigger className="py-2 hover:no-underline">
<div className="flex items-center gap-2">
<StatusIcon status={todo.status} isStreaming={isStreaming} />
{renderLabel()}
</div>
</AccordionTrigger>
<AccordionContent className="pb-2 pl-6">
<p className="text-sm text-muted-foreground">{todo.description}</p>
</AccordionContent>
</AccordionItem>
);
}
return (
<div className="flex items-center gap-2 py-2">
<StatusIcon status={todo.status} isStreaming={isStreaming} />
{renderLabel()}
{renderContent()}
</div>
);
};
@ -110,8 +88,7 @@ const TodoItem: FC<TodoItemProps> = ({ todo, isStreaming = true }) => {
export interface PlanProps {
id: string;
title: string;
description?: string;
todos: PlanTodo[];
todos: Array<{ id: string; content: string; status: TodoStatus }>;
maxVisibleTodos?: number;
showProgress?: boolean;
/** When false, in_progress items show as static (no spinner/pulse animations) */
@ -125,7 +102,6 @@ export interface PlanProps {
export const Plan: FC<PlanProps> = ({
id,
title,
description,
todos,
maxVisibleTodos = 4,
showProgress = true,
@ -151,9 +127,6 @@ export const Plan: FC<PlanProps> = ({
const hiddenTodos = todos.slice(maxVisibleTodos);
const hasHiddenTodos = hiddenTodos.length > 0;
// Check if any todo has a description (for accordion mode)
const hasDescriptions = todos.some((t) => t.description);
// Handle action click
const handleAction = (actionId: string) => {
if (onBeforeResponseAction && !onBeforeResponseAction(actionId)) {
@ -172,22 +145,7 @@ export const Plan: FC<PlanProps> = ({
].filter(Boolean) as Action[];
}, [responseActions]);
// Get default expanded items (in_progress items with descriptions)
const defaultExpandedIds = useMemo(() => {
return todos.filter((t) => t.description && t.status === "in_progress").map((t) => t.id);
}, [todos]);
const TodoList: FC<{ items: PlanTodo[] }> = ({ items }) => {
if (hasDescriptions) {
return (
<Accordion type="multiple" defaultValue={defaultExpandedIds} className="w-full">
{items.map((todo) => (
<TodoItem key={todo.id} todo={todo} isStreaming={isStreaming} />
))}
</Accordion>
);
}
const TodoList: FC<{ items: typeof todos }> = ({ items }) => {
return (
<div className="space-y-0">
{items.map((todo) => (
@ -201,11 +159,9 @@ export const Plan: FC<PlanProps> = ({
<Card id={id} className={cn("w-full max-w-xl", className)}>
<CardHeader className="pb-3">
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<CardTitle className="text-base font-semibold">{title}</CardTitle>
{description && (
<CardDescription className="mt-1 text-sm">{description}</CardDescription>
)}
<div className="flex-1 min-w-0 flex items-center gap-2">
<ListTodo className="size-5 text-muted-foreground shrink-0" />
<CardTitle className="text-base font-semibold text-muted-foreground">{title}</CardTitle>
</div>
{isAllComplete && (
<div className="flex items-center gap-1 text-emerald-500">
@ -216,13 +172,13 @@ export const Plan: FC<PlanProps> = ({
{showProgress && (
<div className="mt-3 space-y-1.5">
<div className="flex items-center justify-between text-xs text-muted-foreground">
<span>
{progress.completed} of {progress.total} complete
</span>
<span>{Math.round(progress.percentage)}%</span>
</div>
<Progress value={progress.percentage} className="h-1.5" />
<div className="flex items-center justify-between text-xs text-muted-foreground">
<span>
{progress.completed} of {progress.total} complete
</span>
<span>{Math.round(progress.percentage)}%</span>
</div>
<Progress value={progress.percentage} className="h-1.5 bg-muted [&>div]:bg-muted-foreground" />
</div>
)}
</CardHeader>

67
surfsense_web/components/tool-ui/plan/schema.ts
View file

@ -8,23 +8,25 @@ export type TodoStatus = z.infer<typeof TodoStatusSchema>;
/**
* Single todo item in a plan
* Matches deepagents TodoListMiddleware output: { content, status }
* id is auto-generated if not provided
*/
export const PlanTodoSchema = z.object({
id: z.string(),
label: z.string(),
id: z.string().optional(),
content: z.string(),
status: TodoStatusSchema,
description: z.string().optional(),
});
export type PlanTodo = z.infer<typeof PlanTodoSchema>;
/**
* Serializable plan schema for tool results
* Matches deepagents TodoListMiddleware output format
* id/title are auto-generated if not provided
*/
export const SerializablePlanSchema = z.object({
id: z.string(),
title: z.string(),
description: z.string().optional(),
id: z.string().optional(),
title: z.string().optional(),
todos: z.array(PlanTodoSchema).min(1),
maxVisibleTodos: z.number().optional(),
showProgress: z.boolean().optional(),
@ -33,9 +35,21 @@ export const SerializablePlanSchema = z.object({
export type SerializablePlan = z.infer<typeof SerializablePlanSchema>;
/**
* Parse and validate a serializable plan from tool result
* Normalized plan with required fields (after auto-generation)
*/
export function parseSerializablePlan(data: unknown): SerializablePlan {
export interface NormalizedPlan {
id: string;
title: string;
todos: Array<{ id: string; content: string; status: TodoStatus }>;
maxVisibleTodos?: number;
showProgress?: boolean;
}
/**
* Parse and normalize a plan from tool result
* Auto-generates id/title if not provided (for deepagents compatibility)
*/
export function parseSerializablePlan(data: unknown): NormalizedPlan {
const result = SerializablePlanSchema.safeParse(data);
if (!result.success) {
@ -45,22 +59,33 @@ export function parseSerializablePlan(data: unknown): SerializablePlan {
const obj = (data && typeof data === "object" ? data : {}) as Record<string, unknown>;
return {
id: typeof obj.id === "string" ? obj.id : "unknown",
id: typeof obj.id === "string" ? obj.id : `plan-${Date.now()}`,
title: typeof obj.title === "string" ? obj.title : "Plan",
description: typeof obj.description === "string" ? obj.description : undefined,
todos: Array.isArray(obj.todos)
? obj.todos.map((t, i) => ({
id: typeof (t as any)?.id === "string" ? (t as any).id : `todo-${i}`,
label: typeof (t as any)?.label === "string" ? (t as any).label : "Task",
status: TodoStatusSchema.safeParse((t as any)?.status).success
? (t as any).status
: "pending",
description:
typeof (t as any)?.description === "string" ? (t as any).description : undefined,
}))
: [{ id: "1", label: "No tasks", status: "pending" as const }],
? obj.todos.map((t: unknown, i: number) => {
const todo = t as Record<string, unknown>;
return {
id: typeof todo?.id === "string" ? todo.id : `todo-${i}`,
content: typeof todo?.content === "string" ? todo.content : "Task",
status: TodoStatusSchema.safeParse(todo?.status).success
? (todo.status as TodoStatus)
: ("pending" as const),
};
})
: [{ id: "1", content: "No tasks", status: "pending" as const }],
};
}
return result.data;
// Normalize: add id/title if missing
return {
id: result.data.id || `plan-${Date.now()}`,
title: result.data.title || "Plan",
todos: result.data.todos.map((t, i) => ({
id: t.id || `todo-${i}`,
content: t.content,
status: t.status,
})),
maxVisibleTodos: result.data.maxVisibleTodos,
showProgress: result.data.showProgress,
};
}