From 3e364c1afe036ce625619563b6a6f90c44570732 Mon Sep 17 00:00:00 2001
From: Henry Li <henry1943@163.com>
Date: Wed, 11 Jun 2025 19:48:46 +0800
Subject: [PATCH] feat: add client-side of deep thinking

---
 web/src/app/chat/components/input-box.tsx | 40 +++++++++++++++++++++--
 web/src/app/settings/tabs/general-tab.tsx |  1 +
 web/src/core/api/chat.ts                  |  1 +
 web/src/core/store/settings-store.ts      | 16 ++++++++-
 web/src/core/store/store.ts               |  1 +
 5 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/web/src/app/chat/components/input-box.tsx b/web/src/app/chat/components/input-box.tsx
index 67216d9..12234d4 100644
--- a/web/src/app/chat/components/input-box.tsx
+++ b/web/src/app/chat/components/input-box.tsx
@@ -3,8 +3,8 @@
 
 import { MagicWandIcon } from "@radix-ui/react-icons";
 import { AnimatePresence, motion } from "framer-motion";
-import { ArrowUp, X } from "lucide-react";
-import { useCallback, useRef, useState } from "react";
+import { ArrowUp, Lightbulb, X } from "lucide-react";
+import { useCallback, useMemo, useRef, useState } from "react";
 
 import { Detective } from "~/components/deer-flow/icons/detective";
 import MessageInput, {
@@ -15,8 +15,10 @@ import { Tooltip } from "~/components/deer-flow/tooltip";
 import { BorderBeam } from "~/components/magicui/border-beam";
 import { Button } from "~/components/ui/button";
 import { enhancePrompt } from "~/core/api";
+import { getConfig } from "~/core/api/config";
 import type { Option, Resource } from "~/core/messages";
 import {
+  setEnableDeepThinking,
   setEnableBackgroundInvestigation,
   useSettingsStore,
 } from "~/core/store";
@@ -44,9 +46,13 @@ export function InputBox({
   onCancel?: () => void;
   onRemoveFeedback?: () => void;
 }) {
+  const enableDeepThinking = useSettingsStore(
+    (state) => state.general.enableDeepThinking,
+  );
   const backgroundInvestigation = useSettingsStore(
     (state) => state.general.enableBackgroundInvestigation,
   );
+  const reasoningModel = useMemo(() => getConfig().models.reasoning?.[0], []);
   const reportStyle = useSettingsStore((state) => state.general.reportStyle);
   const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<MessageInputRef>(null);
@@ -203,6 +209,36 @@ export function InputBox({
       </div>
       <div className="flex items-center px-4 py-2">
         <div className="flex grow gap-2">
+          {reasoningModel && (
+            <Tooltip
+              className="max-w-60"
+              title={
+                <div>
+                  <h3 className="mb-2 font-bold">
+                    Deep Thinking Mode: {enableDeepThinking ? "On" : "Off"}
+                  </h3>
+                  <p>
+                    When enabled, DeerFlow will use reasoning model (
+                    {reasoningModel}) to generate more thoughtful plans.
+                  </p>
+                </div>
+              }
+            >
+              <Button
+                className={cn(
+                  "rounded-2xl",
+                  enableDeepThinking && "!border-brand !text-brand",
+                )}
+                variant="outline"
+                onClick={() => {
+                  setEnableDeepThinking(!enableDeepThinking);
+                }}
+              >
+                <Lightbulb /> Deep Thinking
+              </Button>
+            </Tooltip>
+          )}
+
           <Tooltip
             className="max-w-60"
             title={
diff --git a/web/src/app/settings/tabs/general-tab.tsx b/web/src/app/settings/tabs/general-tab.tsx
index 2bc593d..0bfd720 100644
--- a/web/src/app/settings/tabs/general-tab.tsx
+++ b/web/src/app/settings/tabs/general-tab.tsx
@@ -36,6 +36,7 @@ const generalFormSchema = z.object({
   }),
   // Others
   enableBackgroundInvestigation: z.boolean(),
+  enableDeepThinking: z.boolean(),
   reportStyle: z.enum(["academic", "popular_science", "news", "social_media"]),
 });
 
diff --git a/web/src/core/api/chat.ts b/web/src/core/api/chat.ts
index 1706ba1..43b90ef 100644
--- a/web/src/core/api/chat.ts
+++ b/web/src/core/api/chat.ts
@@ -22,6 +22,7 @@ export async function* chatStream(
     max_step_num: number;
     max_search_results?: number;
     interrupt_feedback?: string;
+    enable_deep_thinking?: boolean;
     enable_background_investigation: boolean;
     report_style?: "academic" | "popular_science" | "news" | "social_media";
     mcp_settings?: {
diff --git a/web/src/core/store/settings-store.ts b/web/src/core/store/settings-store.ts
index fece048..d3d2fe8 100644
--- a/web/src/core/store/settings-store.ts
+++ b/web/src/core/store/settings-store.ts
@@ -10,6 +10,7 @@ const SETTINGS_KEY = "deerflow.settings";
 const DEFAULT_SETTINGS: SettingsState = {
   general: {
     autoAcceptedPlan: false,
+    enableDeepThinking: false,
     enableBackgroundInvestigation: false,
     maxPlanIterations: 1,
     maxStepNum: 3,
@@ -24,6 +25,7 @@ const DEFAULT_SETTINGS: SettingsState = {
 export type SettingsState = {
   general: {
     autoAcceptedPlan: boolean;
+    enableDeepThinking: boolean;
     enableBackgroundInvestigation: boolean;
     maxPlanIterations: number;
     maxStepNum: number;
@@ -127,7 +129,9 @@ export const getChatStreamSettings = () => {
   };
 };
 
-export function setReportStyle(value: "academic" | "popular_science" | "news" | "social_media") {
+export function setReportStyle(
+  value: "academic" | "popular_science" | "news" | "social_media",
+) {
   useSettingsStore.setState((state) => ({
     general: {
       ...state.general,
@@ -137,6 +141,16 @@ export function setReportStyle(value: "academic" | "popular_science" | "news" |
   saveSettings();
 }
 
+export function setEnableDeepThinking(value: boolean) {
+  useSettingsStore.setState((state) => ({
+    general: {
+      ...state.general,
+      enableDeepThinking: value,
+    },
+  }));
+  saveSettings();
+}
+
 export function setEnableBackgroundInvestigation(value: boolean) {
   useSettingsStore.setState((state) => ({
     general: {
diff --git a/web/src/core/store/store.ts b/web/src/core/store/store.ts
index 83505e2..0b349f2 100644
--- a/web/src/core/store/store.ts
+++ b/web/src/core/store/store.ts
@@ -104,6 +104,7 @@ export async function sendMessage(
       interrupt_feedback: interruptFeedback,
       resources,
       auto_accepted_plan: settings.autoAcceptedPlan,
+      enable_deep_thinking: settings.enableDeepThinking ?? false,
       enable_background_investigation:
         settings.enableBackgroundInvestigation ?? true,
       max_plan_iterations: settings.maxPlanIterations,