feat: add Todos

2026-04-03 14:22:13 +08:00 · 2026-01-22 00:26:11 +08:00
parent 08101aa432
commit 1e4e51a80c
16 changed files with 232 additions and 72 deletions
--- a/frontend/src/app/workspace/chats/[thread_id]/layout.tsx
+++ b/frontend/src/app/workspace/chats/[thread_id]/layout.tsx
@@ -28,7 +28,7 @@ export default function ChatLayout({
            color={
              resolvedTheme === "dark" ? "#60A5FA" : "oklch(0 0.0098 87.47)"
            }
-            maxOpacity={resolvedTheme === "dark" ? 0.04 : 0.03}
+            maxOpacity={resolvedTheme === "dark" ? 0.04 : 0.025}
            flickerChance={0.1}
          />
          <FlickeringGrid
--- a/frontend/src/app/workspace/chats/[thread_id]/page.tsx
+++ b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
@@ -21,6 +21,7 @@ import { InputBox } from "@/components/workspace/input-box";
 import { MessageList } from "@/components/workspace/messages";
 import { ThreadContext } from "@/components/workspace/messages/context";
 import { ThreadTitle } from "@/components/workspace/thread-title";
+import { TodoList } from "@/components/workspace/todo-list";
 import { Tooltip } from "@/components/workspace/tooltip";
 import { Welcome } from "@/components/workspace/welcome";
 import { useI18n } from "@/core/i18n/hooks";
@@ -75,6 +76,8 @@ export default function ChatPage() {
    setArtifacts(thread.values.artifacts);
  }, [setArtifacts, thread.values.artifacts]);

+  const [todoListCollapsed, setTodoListCollapsed] = useState(true);
+
  const handleSubmit = useSubmitThread({
    isNewThread,
    threadId,
@@ -137,6 +140,7 @@ export default function ChatPage() {
                  className="size-full"
                  threadId={threadId}
                  thread={thread}
+                  paddingBottom={todoListCollapsed ? 160 : 280}
                />
              </div>
              <div className="absolute right-0 bottom-0 left-0 z-30 flex justify-center px-4">
@@ -149,19 +153,34 @@ export default function ChatPage() {
                      : "max-w-(--container-width-md)",
                  )}
                >
-                  <div
-                    className={cn(
-                      "absolute right-0 bottom-[136px] left-0 flex",
-                      isNewThread ? "" : "pointer-events-none opacity-0",
-                    )}
-                  >
-                    <Welcome />
-                  </div>
+                  {isNewThread && (
+                    <div
+                      className={cn(
+                        "absolute right-0 bottom-[136px] left-0 flex",
+                      )}
+                    >
+                      <Welcome />
+                    </div>
+                  )}
                  <InputBox
-                    className={cn("bg-background/5 w-full")}
+                    className={cn("bg-background/5 w-full -translate-y-4")}
                    autoFocus={isNewThread}
                    status={thread.isLoading ? "streaming" : "ready"}
                    context={settings.context}
+                    extraHeader={
+                      thread.values.todos?.length ? (
+                        <div className="mx-4">
+                          <TodoList
+                            className="bg-background/5"
+                            todos={thread.values.todos ?? []}
+                            collapsed={todoListCollapsed}
+                            onToggle={() =>
+                              setTodoListCollapsed(!todoListCollapsed)
+                            }
+                          />
+                        </div>
+                      ) : null
+                    }
                    onContextChange={(context) =>
                      setSettings("context", context)
                    }
--- a/frontend/src/components/ai-elements/prompt-input.tsx
+++ b/frontend/src/components/ai-elements/prompt-input.tsx
@@ -789,7 +789,7 @@ export const PromptInput = ({
        ref={formRef}
        {...props}
      >
-        <InputGroup className="overflow-hidden">{children}</InputGroup>
+        <InputGroup>{children}</InputGroup>
      </form>
    </>
  );
--- a/frontend/src/components/workspace/artifacts/context.tsx
+++ b/frontend/src/components/workspace/artifacts/context.tsx
@@ -7,13 +7,13 @@ export interface ArtifactsContextType {
  setArtifacts: (artifacts: string[]) => void;

  selectedArtifact: string | null;
+  autoSelect: boolean;
+  select: (artifact: string, autoSelect?: boolean) => void;
+  deselect: () => void;

  open: boolean;
  autoOpen: boolean;
  setOpen: (open: boolean) => void;
-  deselect: () => void;
-
-  select: (artifact: string) => void;
 }

 const ArtifactsContext = createContext<ArtifactsContextType | undefined>(
@@ -27,17 +27,22 @@ interface ArtifactsProviderProps {
 export function ArtifactsProvider({ children }: ArtifactsProviderProps) {
  const [artifacts, setArtifacts] = useState<string[]>([]);
  const [selectedArtifact, setSelectedArtifact] = useState<string | null>(null);
+  const [autoSelect, setAutoSelect] = useState(true);
  const [open, setOpen] = useState(false);
  const [autoOpen, setAutoOpen] = useState(true);
  const { setOpen: setSidebarOpen } = useSidebar();

-  const select = (artifact: string) => {
+  const select = (artifact: string, autoSelect = false) => {
    setSelectedArtifact(artifact);
    setSidebarOpen(false);
+    if (!autoSelect) {
+      setAutoSelect(false);
+    }
  };

  const deselect = () => {
    setSelectedArtifact(null);
+    setAutoSelect(true);
  };

  const value: ArtifactsContextType = {
@@ -46,9 +51,11 @@ export function ArtifactsProvider({ children }: ArtifactsProviderProps) {

    open,
    autoOpen,
+    autoSelect,
    setOpen: (isOpen: boolean) => {
      if (!isOpen && autoOpen) {
        setAutoOpen(false);
+        setAutoSelect(false);
      }
      setOpen(isOpen);
    },
--- a/frontend/src/components/workspace/input-box.tsx
+++ b/frontend/src/components/workspace/input-box.tsx
@@ -1,7 +1,7 @@
 "use client";

 import type { ChatStatus } from "ai";
-import { CheckIcon, LightbulbIcon, LightbulbOffIcon } from "lucide-react";
+import { CheckIcon, LightbulbIcon, ListTodoIcon } from "lucide-react";
 import { useCallback, useMemo, useState, type ComponentProps } from "react";

 import {
@@ -35,6 +35,7 @@ export function InputBox({
  autoFocus,
  status = "ready",
  context,
+  extraHeader,
  onContextChange,
  onSubmit,
  onStop,
@@ -43,6 +44,7 @@ export function InputBox({
  assistantId?: string | null;
  status?: ChatStatus;
  context: Omit<AgentThreadContext, "thread_id">;
+  extraHeader?: React.ReactNode;
  onContextChange?: (context: Omit<AgentThreadContext, "thread_id">) => void;
  onSubmit?: (message: PromptInputMessage) => void;
  onStop?: () => void;
@@ -72,6 +74,12 @@ export function InputBox({
      thinking_enabled: !context.thinking_enabled,
    });
  }, [onContextChange, context]);
+  const handlePlanModeToggle = useCallback(() => {
+    onContextChange?.({
+      ...context,
+      is_plan_mode: !context.is_plan_mode,
+    });
+  }, [onContextChange, context]);
  const handleSubmit = useCallback(
    async (message: PromptInputMessage) => {
      if (status === "streaming") {
@@ -89,7 +97,6 @@ export function InputBox({
    <PromptInput
      className={cn(
        "bg-background/85 rounded-2xl backdrop-blur-sm transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-2xl",
-        "-translate-y-4 overflow-hidden",
        className,
      )}
      globalDrop
@@ -97,6 +104,11 @@ export function InputBox({
      onSubmit={handleSubmit}
      {...props}
    >
+      {extraHeader && (
+        <div className="absolute top-0 right-0 left-0 z-100">
+          <div className="absolute right-0 bottom-0 left-0">{extraHeader}</div>
+        </div>
+      )}
      <PromptInputBody>
        <PromptInputTextarea
          className={cn("size-full")}
@@ -105,7 +117,7 @@ export function InputBox({
        />
      </PromptInputBody>
      <PromptInputFooter className="flex">
-        <div>
+        <div className="flex items-center">
          <Tooltip
            content={
              context.thinking_enabled ? (
@@ -131,7 +143,7 @@ export function InputBox({
                  {context.thinking_enabled ? (
                    <LightbulbIcon className="text-primary size-4" />
                  ) : (
-                    <LightbulbOffIcon className="size-4" />
+                    <LightbulbIcon className="size-4" />
                  )}
                  <span
                    className={cn(
@@ -147,6 +159,47 @@ export function InputBox({
              </PromptInputButton>
            )}
          </Tooltip>
+          <Tooltip
+            content={
+              context.is_plan_mode ? (
+                <div className="tex-sm flex flex-col gap-1">
+                  <div>{t.inputBox.planMode}</div>
+                  <div className="opacity-50">
+                    {t.inputBox.clickToDisablePlanMode}
+                  </div>
+                </div>
+              ) : (
+                <div className="tex-sm flex flex-col gap-1">
+                  <div>{t.inputBox.planMode}</div>
+                  <div className="opacity-50">
+                    {t.inputBox.clickToEnablePlanMode}
+                  </div>
+                </div>
+              )
+            }
+          >
+            {selectedModel?.supports_thinking && (
+              <PromptInputButton onClick={handlePlanModeToggle}>
+                <>
+                  {context.is_plan_mode ? (
+                    <ListTodoIcon className="text-primary size-4" />
+                  ) : (
+                    <ListTodoIcon className="size-4" />
+                  )}
+                  <span
+                    className={cn(
+                      "text-xs font-normal",
+                      context.is_plan_mode
+                        ? "text-primary"
+                        : "text-muted-foreground",
+                    )}
+                  >
+                    {t.inputBox.planMode}
+                  </span>
+                </>
+              </PromptInputButton>
+            )}
+          </Tooltip>
        </div>
        <div className="flex items-center gap-2">
          <ModelSelector
--- a/frontend/src/components/workspace/messages/message-group.tsx
+++ b/frontend/src/components/workspace/messages/message-group.tsx
@@ -2,10 +2,10 @@ import type { Message } from "@langchain/langgraph-sdk";
 import {
  BookOpenTextIcon,
  ChevronUp,
-  FileTextIcon,
  FolderOpenIcon,
  GlobeIcon,
  LightbulbIcon,
+  ListTodoIcon,
  MessageCircleQuestionMarkIcon,
  NotebookPenIcon,
  SearchIcon,
@@ -115,12 +115,17 @@ export function MessageGroup({
                  }
                ></ChainOfThoughtStep>
              ) : (
-                <ToolCall key={step.id} {...step} />
+                <ToolCall key={step.id} {...step} isLoading={isLoading} />
              ),
            )}
          {lastToolCallStep && (
            <FlipDisplay uniqueKey={lastToolCallStep.id ?? ""}>
-              <ToolCall key={lastToolCallStep.id} {...lastToolCallStep} />
+              <ToolCall
+                key={lastToolCallStep.id}
+                {...lastToolCallStep}
+                isLast={true}
+                isLoading={isLoading}
+              />
            </FlipDisplay>
          )}
        </ChainOfThoughtContent>
@@ -173,15 +178,20 @@ function ToolCall({
  name,
  args,
  result,
+  isLast = false,
+  isLoading = false,
 }: {
  id?: string;
  messageId?: string;
  name: string;
  args: Record<string, unknown>;
  result?: string | Record<string, unknown>;
+  isLast?: boolean;
+  isLoading?: boolean;
 }) {
  const { t } = useI18n();
-  const { setOpen, autoOpen, selectedArtifact, select } = useArtifacts();
+  const { setOpen, autoOpen, autoSelect, selectedArtifact, select } =
+    useArtifacts();
  if (name === "web_search") {
    let label: React.ReactNode = t.toolCalls.searchForRelatedInfo;
    if (typeof args.query === "string") {
@@ -265,7 +275,7 @@ function ToolCall({
      description = t.toolCalls.writeFile;
    }
    const path: string | undefined = (args as { path: string })?.path;
-    if (autoOpen && path) {
+    if (isLoading && isLast && autoOpen && autoSelect && path) {
      setTimeout(() => {
        const url = new URL(
          `write-file:${path}?message_id=${messageId}&tool_call_id=${id}`,
@@ -273,7 +283,7 @@ function ToolCall({
        if (selectedArtifact === url) {
          return;
        }
-        select(url);
+        select(url, true);
        setOpen(true);
      }, 100);
    }
@@ -320,27 +330,7 @@ function ToolCall({
        )}
      </ChainOfThoughtStep>
    );
-  } else if (name === "present_files") {
-    return (
-      <ChainOfThoughtStep
-        key={id}
-        label={t.toolCalls.presentFiles}
-        icon={FileTextIcon}
-      >
-        <ChainOfThoughtSearchResult>
-          {Array.isArray((args as { filepaths: string[] }).filepaths) &&
-            (args as { filepaths: string[] }).filepaths.map(
-              (filepath: string) => (
-                <ChainOfThoughtSearchResult key={filepath}>
-                  {filepath}
-                </ChainOfThoughtSearchResult>
-              ),
-            )}
-        </ChainOfThoughtSearchResult>
-      </ChainOfThoughtStep>
-    );
-  }
-  if (name === "ask_clarification") {
+  } else if (name === "ask_clarification") {
    return (
      <ChainOfThoughtStep
        key={id}
@@ -348,6 +338,14 @@ function ToolCall({
        icon={MessageCircleQuestionMarkIcon}
      ></ChainOfThoughtStep>
    );
+  } else if (name === "write_todos") {
+    return (
+      <ChainOfThoughtStep
+        key={id}
+        label={t.toolCalls.writeTodos}
+        icon={ListTodoIcon}
+      ></ChainOfThoughtStep>
+    );
  } else {
    const description: string | undefined = (args as { description: string })
      ?.description;
--- a/frontend/src/components/workspace/messages/message-list.tsx
+++ b/frontend/src/components/workspace/messages/message-list.tsx
@@ -23,10 +23,12 @@ export function MessageList({
  className,
  threadId,
  thread,
+  paddingBottom = 160,
 }: {
  className?: string;
  threadId: string;
  thread: UseStream<AgentThreadState>;
+  paddingBottom?: number;
 }) {
  if (thread.isThreadLoading) {
    return <MessageListSkeleton />;
@@ -70,7 +72,7 @@ export function MessageList({
          );
        })}
        {thread.isLoading && <StreamingIndicator className="my-4" />}
-        <div className="h-40" />
+        <div style={{ height: `${paddingBottom}px` }} />
      </ConversationContent>
    </Conversation>
  );
--- a/frontend/src/components/workspace/todo-list.tsx
+++ b/frontend/src/components/workspace/todo-list.tsx
@@ -0,0 +1,68 @@
+import { ChevronUpIcon } from "lucide-react";
+
+import type { Todo } from "@/core/todos";
+import { cn } from "@/lib/utils";
+
+import {
+  QueueItem,
+  QueueItemContent,
+  QueueItemIndicator,
+  QueueList,
+} from "../ai-elements/queue";
+
+export function TodoList({
+  className,
+  todos,
+  collapsed = false,
+  onToggle,
+}: {
+  className?: string;
+  todos: Todo[];
+  collapsed?: boolean;
+  onToggle?: () => void;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex h-fit w-full flex-col overflow-hidden rounded-t-xl border bg-white backdrop-blur-sm",
+        className,
+      )}
+    >
+      <header
+        className="bg-accent flex min-h-8 shrink-0 cursor-pointer items-center justify-between px-4 text-sm"
+        onClick={() => {
+          onToggle?.();
+        }}
+      >
+        <div className="text-muted-foreground">To-dos</div>
+        <div>
+          <ChevronUpIcon
+            className={cn(
+              "text-muted-foreground size-4 transition-transform duration-300 ease-out",
+              collapsed ? "" : "rotate-180",
+            )}
+          />
+        </div>
+      </header>
+      <main
+        className={cn(
+          "bg-accent flex grow px-2 transition-all duration-300 ease-out",
+          collapsed ? "h-0" : "h-28",
+        )}
+      >
+        <QueueList className="bg-background mt-0 w-full rounded-t-xl">
+          {todos.map((todo, i) => (
+            <QueueItem key={i + (todo.content ?? "")}>
+              <div className="flex items-center gap-2">
+                <QueueItemIndicator completed={todo.status === "completed"} />
+                <QueueItemContent completed={todo.status === "completed"}>
+                  {todo.content}
+                </QueueItemContent>
+              </div>
+            </QueueItem>
+          ))}
+        </QueueList>
+      </main>
+    </div>
+  );
+}
--- a/frontend/src/core/i18n/locales/en-US.ts
+++ b/frontend/src/core/i18n/locales/en-US.ts
@@ -41,6 +41,11 @@ export const enUS: Translations = {
    thinkingDisabled: "Thinking is disabled",
    clickToDisableThinking: "Click to disable thinking",
    clickToEnableThinking: "Click to enable thinking",
+    planMode: "Plan mode",
+    planModeEnabled: "Plan mode is enabled",
+    planModeDisabled: "Plan mode is disabled",
+    clickToDisablePlanMode: "Click to disable plan mode",
+    clickToEnablePlanMode: "Click to enable plan mode",
    searchModels: "Search models...",
  },

@@ -87,6 +92,7 @@ export const enUS: Translations = {
    listFolder: "List folder",
    readFile: "Read file",
    writeFile: "Write file",
+    writeTodos: "Update to-do list",
  },

  // Settings
--- a/frontend/src/core/i18n/locales/types.ts
+++ b/frontend/src/core/i18n/locales/types.ts
@@ -38,6 +38,11 @@ export interface Translations {
    thinkingDisabled: string;
    clickToDisableThinking: string;
    clickToEnableThinking: string;
+    planMode: string;
+    planModeEnabled: string;
+    planModeDisabled: string;
+    clickToDisablePlanMode: string;
+    clickToEnablePlanMode: string;
    searchModels: string;
  };

@@ -84,6 +89,7 @@ export interface Translations {
    listFolder: string;
    readFile: string;
    writeFile: string;
+    writeTodos: string;
  };

  // Settings
--- a/frontend/src/core/i18n/locales/zh-CN.ts
+++ b/frontend/src/core/i18n/locales/zh-CN.ts
@@ -41,6 +41,11 @@ export const zhCN: Translations = {
    thinkingDisabled: "思考功能已禁用",
    clickToDisableThinking: "点击禁用思考功能",
    clickToEnableThinking: "点击启用思考功能",
+    planMode: "To-do 模式",
+    planModeEnabled: "To-do 模式已启用",
+    planModeDisabled: "To-do 模式已禁用",
+    clickToDisablePlanMode: "点击禁用 To-do 模式",
+    clickToEnablePlanMode: "点击启用 To-do 模式",
    searchModels: "搜索模型...",
  },

@@ -87,6 +92,7 @@ export const zhCN: Translations = {
    listFolder: "列出文件夹",
    readFile: "读取文件",
    writeFile: "写入文件",
+    writeTodos: "更新 To-do 列表",
  },

  // Settings
--- a/frontend/src/core/messages/utils.ts
+++ b/frontend/src/core/messages/utils.ts
@@ -85,29 +85,6 @@ export function groupMessages<T>(
    }
  }

-  // if (!isLoading) {
-  //   const lastGroup: MessageGroup | undefined = groups[groups.length - 1];
-  //   if (
-  //     lastGroup?.type === "assistant:processing" &&
-  //     lastGroup.messages.length > 0
-  //   ) {
-  //     const lastMessage = lastGroup.messages[lastGroup.messages.length - 1]!;
-  //     const reasoningContent = extractReasoningContentFromMessage(lastMessage);
-  //     const content = extractContentFromMessage(lastMessage);
-  //     if (reasoningContent && !content) {
-  //       lastGroup.messages.pop();
-  //       if (lastGroup.messages.length === 0) {
-  //         groups.pop();
-  //       }
-  //       groups.push({
-  //         id: lastMessage.id,
-  //         type: "assistant",
-  //         messages: [lastMessage],
-  //       });
-  //     }
-  //   }
-  // }
-
  const resultsOfGroups: T[] = [];
  for (const group of groups) {
    const resultOfGroup = mapper(group);
--- a/frontend/src/core/settings/local.ts
+++ b/frontend/src/core/settings/local.ts
@@ -4,6 +4,7 @@ export const DEFAULT_LOCAL_SETTINGS: LocalSettings = {
  context: {
    model_name: "deepseek-v3.2",
    thinking_enabled: true,
+    is_plan_mode: true,
  },
  layout: {
    sidebar_collapsed: false,
@@ -27,10 +28,18 @@ export function getLocalSettings(): LocalSettings {
  try {
    if (json) {
      const settings = JSON.parse(json);
-      return {
+      const mergedSettings = {
        ...DEFAULT_LOCAL_SETTINGS,
-        ...settings,
+        context: {
+          ...DEFAULT_LOCAL_SETTINGS.context,
+          ...settings.context,
+        },
+        layout: {
+          ...DEFAULT_LOCAL_SETTINGS.layout,
+          ...settings.layout,
+        },
      };
+      return mergedSettings;
    }
  } catch {}
  return DEFAULT_LOCAL_SETTINGS;
--- a/frontend/src/core/threads/types.ts
+++ b/frontend/src/core/threads/types.ts
@@ -1,10 +1,13 @@
 import { type BaseMessage } from "@langchain/core/messages";
 import type { Thread } from "@langchain/langgraph-sdk";

+import type { Todo } from "../todos";
+
 export interface AgentThreadState extends Record<string, unknown> {
  title: string;
  messages: BaseMessage[];
  artifacts: string[];
+  todos?: Todo[];
 }

 export interface AgentThread extends Thread<AgentThreadState> {}
@@ -13,4 +16,5 @@ export interface AgentThreadContext extends Record<string, unknown> {
  thread_id: string;
  model_name: string;
  thinking_enabled: boolean;
+  is_plan_mode: boolean;
 }
--- a/frontend/src/core/todos/index.ts
+++ b/frontend/src/core/todos/index.ts
@@ -0,0 +1 @@
+export * from "./types";
--- a/frontend/src/core/todos/types.ts
+++ b/frontend/src/core/todos/types.ts
@@ -0,0 +1,4 @@
+export interface Todo {
+  content?: string;
+  status?: "pending" | "in_progress" | "completed";
+}