Feature: Deepseek Reasoning support (#312)

* 2.0.4-alpha.0

* fix(caps): refetch caps on mount or arg change. (#307)

* fix: unified limit exhausted message across app & adjusted text

* fix: better wording

* 2.0.4-alpha.1

* fix: updated offline message

* fix: increased size for input field

* fix: if only one chat tab left and active tab is dashboard, allowing click on chat tab

* feat: upgrade to pro button in main dropdown & reworked links in dropdown

* fix: show plugin settings if jetbrains, otherwise extension settings

* chore: revert deletion of integrations

* chore: revert deletion of integrations

* fix: startup keyword shouldn't be null

* wip(updated tour): integrations step & updated refs

* feat: updated onboarding with new data & small adjustments to the UI

* 2.0.4-alpha.2

* feat: THINKING_AGENT mode support for deepseek-reasoning model

* wip(checkpoints): ui for popup and user input

* wip(checkpoints): truncation of links for files

* wip(checkpoints): storing checkpoints for user messages

* wip(checkpoints): API handler, typeguards, saving restore results to store and fixed fixtures

* wip(checkpoints): fixed types issue

* wip(checkpoints): fix of tests

* wip(checkpoints): stubs for checkpoints & storybook

* feat(checkpoints): undo functionality & refactoring

* chore: fixed types for CI

* refactoring(checkpoints): extracted logic and functions to useCheckpoints hook

* chore: parsing error text adjusted

* fix: make checkpoints optional & hiding revert changes button if there are no checkpoints

* fix: support esc key press & click out of the dialog to close it

* chore: removed convertUTCToLocalTime() util

* fix: remove hardcoded locale en-GB to use system one

* feat: reworked logic & improved UI/UX

* chore: better wording with dates

* fix: checking for index of of current message instead of checking for user messages amount

* fix(onboarding): updated GIF and links for final screen

* fix: updated tour ending

* 2.0.4-alpha.3

* fix: fixed validation of paths for puzzle links on Windows, adjusted texts

* improve(puzzle_links): extractLinkFromPuzzle unit tests coverage

* fix: tour blinking on restart & typos & unified titles for buttons & removed conditions for set up integrations button

* feat: better controls for agentic features

* feat: showing deepseek reasoner option only for PRO users, placing it in a correct place of all agentic features

* chore: fix component file from merge conflicts

* feat: better wording & hiding agent features if restored thread tool use is not agent

* chore: better semantic name for reasoning switch component

src/components/ChatForm/AgentCapabilities.tsx

@@ -3,27 +3,39 @@ import {
   QuestionMarkCircledIcon,
 } from "@radix-ui/react-icons";
 import { Flex, HoverCard, IconButton, Popover, Text } from "@radix-ui/themes";
-import { AgentRollbackSwitch, ApplyPatchSwitch } from "./ChatControls";
-import { useAppSelector } from "../../hooks";
+import {
+  AgentRollbackSwitch,
+  ApplyPatchSwitch,
+  ReasoningModeSwitch,
+} from "./ChatControls";
+import { useLogin, useAppSelector } from "../../hooks";
 import {
   selectAutomaticPatch,
   selectCheckpointsEnabled,
+  selectThreadMode,
 } from "../../features/Chat";
 import { useMemo } from "react";
 
 export const AgentCapabilities = () => {
+  const { user } = useLogin();
   const isPatchAutomatic = useAppSelector(selectAutomaticPatch);
   const isAgentRollbackEnabled = useAppSelector(selectCheckpointsEnabled);
+  const currentMode = useAppSelector(selectThreadMode);
+  const isReasoningEnabled = useMemo(() => {
+    return currentMode === "THINKING_AGENT" && user.data?.inference !== "FREE";
+  }, [currentMode, user.data?.inference]);
 
   const agenticFeatures = useMemo(() => {
     return [
       {
         name: "Auto-patch",
         enabled: isPatchAutomatic,
       },
-      { name: "Agent rollback", enabled: isAgentRollbackEnabled },
+      { name: "Files rollback", enabled: isAgentRollbackEnabled },
+      { name: "Thinking tool", enabled: isReasoningEnabled },
     ];
-  }, [isPatchAutomatic, isAgentRollbackEnabled]);
+  }, [isPatchAutomatic, isAgentRollbackEnabled, isReasoningEnabled]);
+
   return (
     <Flex mb="2" gap="2" align="center">
       <Popover.Root>
@@ -36,11 +48,12 @@ export const AgentCapabilities = () => {
           <Flex gap="2" direction="column">
             <ApplyPatchSwitch />
             <AgentRollbackSwitch />
+            {user.data?.inference !== "FREE" && <ReasoningModeSwitch />}
           </Flex>
         </Popover.Content>
       </Popover.Root>
       <Text size="2">
-        Agent capabilities:
+        Enabled Features:
         <Text color="gray">
           {" "}
           {agenticFeatures
@@ -55,10 +68,7 @@ export const AgentCapabilities = () => {
         </HoverCard.Trigger>
         <HoverCard.Content size="2" maxWidth="280px">
           <Text as="p" size="2">
-            Here you can control special features that affect working flow of
-            Agent. Some features might lead to slower responses, some features
-            might speed up the process, but you will lose some control over
-            execution.
+            Here you can control special features affecting Agent behaviour
           </Text>
         </HoverCard.Content>
       </HoverCard.Root>

src/components/ChatForm/ChatControls.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import React, { CSSProperties, useCallback, useMemo } from "react";
 import {
   Text,
   Flex,
@@ -21,16 +21,20 @@ import { ToolUseSwitch } from "./ToolUseSwitch";
 import {
   ToolUse,
   selectAutomaticPatch,
+  selectChatId,
   selectCheckpointsEnabled,
   selectIsStreaming,
   selectIsWaiting,
   selectMessages,
+  selectThreadMode,
   selectToolUse,
   setAutomaticPatch,
+  setChatMode,
   setEnabledCheckpoints,
   setToolUse,
 } from "../../features/Chat/Thread";
 import { useAppSelector, useAppDispatch, useCapsForToolUse } from "../../hooks";
+import { getChatById } from "../../features/History/historySlice";
 
 export const ApplyPatchSwitch: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -48,9 +52,10 @@ export const ApplyPatchSwitch: React.FC = () => {
       flexGrow="1"
       flexShrink="0"
       width="100%"
+      justify="between"
     >
       <Text size="2" mr="auto">
-        Auto apply patches
+        Auto-patch (file changes)
       </Text>
       <Flex gap="2" align="center">
         <Switch
@@ -98,9 +103,10 @@ export const AgentRollbackSwitch: React.FC = () => {
       flexGrow="1"
       flexShrink="0"
       width="100%"
+      justify="between"
     >
       <Text size="2" mr="auto">
-        Agent rollback
+        Track file changes and support files rollback
       </Text>
       <Flex gap="2" align="center">
         <Switch
@@ -114,25 +120,70 @@ export const AgentRollbackSwitch: React.FC = () => {
             <QuestionMarkCircledIcon style={{ marginLeft: 4 }} />
           </HoverCard.Trigger>
           <HoverCard.Content size="2" maxWidth="280px">
-            <Text weight="bold">Enabled</Text>
-            <Text as="p" size="2">
-              When enabled, Refact Agent will automatically apply changes to
-              files without asking for your confirmation.
-            </Text>
-            <Text as="div" mt="2" weight="bold">
-              Disabled
-            </Text>
-            <Text as="p" size="2">
-              When disabled, Refact Agent will ask for your confirmation before
-              applying any unsaved changes.
-            </Text>
+            <Flex direction="column" gap="2">
+              <Text as="p" size="2">
+                When enabled, Refact Agent will automatically make snapshots of
+                files between your messages
+              </Text>
+              <Text as="p" size="2">
+                You can rollback file changes to checkpoints taken when you sent
+                messages to Agent
+              </Text>
+            </Flex>
           </HoverCard.Content>
         </HoverCard.Root>
       </Flex>
     </Flex>
   );
 };
 
+export const ReasoningModeSwitch: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const chatId = useAppSelector(selectChatId);
+  const currentMode = useAppSelector(selectThreadMode);
+  const modeFromHistory =
+    useAppSelector((state) => getChatById(state, chatId), {
+      devModeChecks: { stabilityCheck: "never" },
+    })?.mode ?? "AGENT";
+
+  const isReasoningEnabled = useMemo(() => {
+    return currentMode === "THINKING_AGENT";
+  }, [currentMode]);
+
+  const handleDeepseekReasoningChange = (checked: boolean) => {
+    dispatch(setChatMode(checked ? "THINKING_AGENT" : modeFromHistory));
+  };
+
+  const tooltipStyles: CSSProperties = {
+    marginLeft: 4,
+    visibility: "hidden",
+    opacity: 0,
+  };
+
+  return (
+    <Flex
+      gap="2"
+      align="center"
+      wrap="wrap"
+      flexGrow="1"
+      flexShrink="0"
+      justify="between"
+      width="100%"
+    >
+      <Text size="2">Use o3-mini reasoning model for planning</Text>
+      <Flex gap="2" align="center">
+        <Switch
+          size="1"
+          title="Enable/disable deepseek-reasoner for Agent"
+          checked={isReasoningEnabled}
+          onCheckedChange={handleDeepseekReasoningChange}
+        />
+        <QuestionMarkCircledIcon style={tooltipStyles} />
+      </Flex>
+    </Flex>
+  );
+};
+
 const CapsSelect: React.FC = () => {
   const refs = useTourRefs();
   const caps = useCapsForToolUse();

src/components/ChatForm/ChatForm.tsx

@@ -47,6 +47,7 @@ import {
   selectIsWaiting,
   selectMessages,
   selectPreventSend,
+  selectThreadToolUse,
   selectToolUse,
 } from "../../features/Chat";
 import { isUserMessage, telemetryApi } from "../../services/refact";
@@ -81,9 +82,14 @@ export const ChatForm: React.FC<ChatFormProps> = ({
   const isOnline = useIsOnline();
 
   const chatId = useAppSelector(selectChatId);
+  const threadToolUse = useAppSelector(selectThreadToolUse);
   const messages = useAppSelector(selectMessages);
   const preventSend = useAppSelector(selectPreventSend);
 
+  const shouldAgentCapabilitiesBeShown = useMemo(() => {
+    return threadToolUse === "agent" && toolUse === "agent";
+  }, [toolUse, threadToolUse]);
+
   const onClearError = useCallback(() => {
     dispatch(clearError());
     const userMessages = messages.filter(isUserMessage);
@@ -316,7 +322,7 @@ export const ChatForm: React.FC<ChatFormProps> = ({
             {helpInfo}
           </Flex>
         )}
-        {toolUse === "agent" && <AgentCapabilities />}
+        {shouldAgentCapabilitiesBeShown && <AgentCapabilities />}
         <Form
           disabled={disableSend}
           className={className}

src/features/Chat/Thread/reducer.ts

@@ -54,11 +54,17 @@ const createChatThread = (
   return chat;
 };
 
-const createInitialState = (
-  tool_use: ToolUse = "agent",
-  integration?: IntegrationMeta | null,
-  maybeMode?: LspChatMode,
-): Chat => {
+type createInitialStateArgs = {
+  tool_use?: ToolUse;
+  integration?: IntegrationMeta | null;
+  maybeMode?: LspChatMode;
+};
+
+const createInitialState = ({
+  tool_use = "agent",
+  integration,
+  maybeMode,
+}: createInitialStateArgs): Chat => {
   const mode =
     maybeMode ?? integration ? "CONFIGURE" : chatModeToLspMode(tool_use);
   return {
@@ -76,7 +82,7 @@ const createInitialState = (
   };
 };
 
-const initialState = createInitialState();
+const initialState = createInitialState({});
 
 export const chatReducer = createReducer(initialState, (builder) => {
   builder.addCase(setToolUse, (state, action) => {
@@ -109,12 +115,16 @@ export const chatReducer = createReducer(initialState, (builder) => {
   });
 
   builder.addCase(newChatAction, (state) => {
-    const next = createInitialState(state.tool_use);
+    const next = createInitialState({
+      tool_use: state.tool_use,
+      maybeMode: state.thread.mode,
+    });
     next.cache = { ...state.cache };
     if (state.streaming) {
       next.cache[state.thread.id] = { ...state.thread, read: false };
     }
     next.thread.model = state.thread.model;
+    next.thread.mode = state.thread.mode;
     next.system_prompt = state.system_prompt;
     next.automatic_patch = state.automatic_patch;
     next.checkpoints_enabled = state.checkpoints_enabled;
@@ -234,11 +244,11 @@ export const chatReducer = createReducer(initialState, (builder) => {
   builder.addCase(newIntegrationChat, (state, action) => {
     // TODO: find out about tool use
     // TODO: should be CONFIGURE ?
-    const next = createInitialState(
-      "agent",
-      action.payload.integration,
-      "CONFIGURE",
-    );
+    const next = createInitialState({
+      tool_use: "agent",
+      integration: action.payload.integration,
+      maybeMode: "CONFIGURE",
+    });
     next.thread.integration = action.payload.integration;
     next.thread.messages = action.payload.messages;
 

src/features/Chat/Thread/types.ts

@@ -72,7 +72,8 @@ export type LspChatMode =
   | "EXPLORE"
   | "AGENT"
   | "CONFIGURE"
-  | "PROJECT_SUMMARY";
+  | "PROJECT_SUMMARY"
+  | "THINKING_AGENT";
 
 export function chatModeToLspMode(
   toolUse?: ToolUse,