Support Dynamic Thinking Models (#23281)

* Add ability to toggle thinking

* Disable thinking for descriptions automatically

* mypy

* Cleanup

web/public/locales/en/views/chat.json

@@ -65,5 +65,8 @@
     "active": "Reasoning…",
     "show": "Show reasoning",
     "hide": "Hide reasoning"
+  },
+  "thinking": {
+    "toggle": "Toggle thinking"
   }
 }

web/src/components/chat/ChatComposer.tsx

@@ -0,0 +1,147 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { FaArrowUpLong, FaStop } from "react-icons/fa6";
+import { LuBrain } from "react-icons/lu";
+import { useTranslation } from "react-i18next";
+import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { ChatAttachmentChip } from "@/components/chat/ChatAttachmentChip";
+import { ChatQuickReplies } from "@/components/chat/ChatQuickReplies";
+import { ChatPaperclipButton } from "@/components/chat/ChatPaperclipButton";
+
+type ChatComposerProps = {
+  input: string;
+  setInput: (value: string) => void;
+  sendMessage: (textOverride?: string) => void;
+  placeholder: string;
+
+  supportsThinking: boolean;
+  thinkingEnabled: boolean;
+  setThinkingEnabled: (value: boolean | undefined) => void;
+
+  isLoading?: boolean;
+  onStop?: () => void;
+
+  attachedEventId?: string | null;
+  onClearAttachment?: () => void;
+  onAttach?: (eventId: string) => void;
+  recentEventIds?: string[];
+
+  large?: boolean;
+};
+
+export function ChatComposer({
+  input,
+  setInput,
+  sendMessage,
+  placeholder,
+  supportsThinking,
+  thinkingEnabled,
+  setThinkingEnabled,
+  isLoading = false,
+  onStop,
+  attachedEventId,
+  onClearAttachment,
+  onAttach,
+  recentEventIds,
+  large = false,
+}: ChatComposerProps) {
+  const { t } = useTranslation(["views/chat"]);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  };
+
+  const showPaperclip = !!onAttach;
+  const showStop = isLoading && !!onStop;
+
+  return (
+    <div className="flex w-full flex-col items-stretch justify-center gap-2 rounded-xl bg-secondary p-3">
+      {attachedEventId && onClearAttachment && (
+        <div className="flex items-center">
+          <ChatAttachmentChip
+            eventId={attachedEventId}
+            mode="composer"
+            onRemove={onClearAttachment}
+          />
+        </div>
+      )}
+      {attachedEventId && (
+        <ChatQuickReplies
+          onSend={(text) => sendMessage(text)}
+          disabled={isLoading}
+        />
+      )}
+      <div className="flex w-full flex-row items-center gap-2">
+        {showPaperclip && (
+          <ChatPaperclipButton
+            recentEventIds={recentEventIds ?? []}
+            onAttach={onAttach!}
+            disabled={isLoading || attachedEventId != null}
+          />
+        )}
+        {supportsThinking && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant={thinkingEnabled ? "select" : "ghost"}
+                  aria-pressed={thinkingEnabled}
+                  aria-label={t("thinking.toggle")}
+                  className={cn(
+                    "flex size-9 shrink-0 items-center justify-center rounded-full p-0",
+                    !thinkingEnabled && "text-secondary-foreground",
+                  )}
+                  onClick={() => setThinkingEnabled(!thinkingEnabled)}
+                  disabled={isLoading}
+                >
+                  <LuBrain className="size-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{t("thinking.toggle")}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+        <Input
+          className={cn(
+            "w-full flex-1 border-transparent bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+            large && "h-12 text-base",
+          )}
+          placeholder={placeholder}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          aria-busy={isLoading}
+        />
+        {showStop ? (
+          <Button
+            variant="destructive"
+            className="size-10 shrink-0 rounded-full"
+            onClick={onStop}
+          >
+            <FaStop className="size-3" />
+          </Button>
+        ) : (
+          <Button
+            variant="select"
+            className="size-10 shrink-0 rounded-full"
+            disabled={!input.trim() || isLoading}
+            onClick={() => sendMessage()}
+          >
+            <FaArrowUpLong className="size-4" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

web/src/components/chat/ChatStartingState.tsx

@@ -1,15 +1,22 @@
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { FaArrowUpLong } from "react-icons/fa6";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
 import type { StartingRequest } from "@/types/chat";
+import { ChatComposer } from "@/components/chat/ChatComposer";
 
 type ChatStartingStateProps = {
   onSendMessage: (message: string) => void;
+  supportsThinking: boolean;
+  thinkingEnabled: boolean;
+  setThinkingEnabled: (value: boolean | undefined) => void;
 };
 
-export function ChatStartingState({ onSendMessage }: ChatStartingStateProps) {
+export function ChatStartingState({
+  onSendMessage,
+  supportsThinking,
+  thinkingEnabled,
+  setThinkingEnabled,
+}: ChatStartingStateProps) {
   const { t } = useTranslation(["views/chat"]);
   const [input, setInput] = useState("");
 
@@ -36,20 +43,13 @@ export function ChatStartingState({ onSendMessage }: ChatStartingStateProps) {
     onSendMessage(prompt);
   };
 
-  const handleSubmit = () => {
-    const text = input.trim();
+  const handleSend = (textOverride?: string) => {
+    const text = (textOverride ?? input).trim();
     if (!text) return;
     onSendMessage(text);
     setInput("");
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit();
-    }
-  };
-
   return (
     <div className="flex size-full flex-col items-center justify-center gap-6 p-8">
       <div className="flex flex-col items-center gap-2">
@@ -77,22 +77,17 @@ export function ChatStartingState({ onSendMessage }: ChatStartingStateProps) {
         </div>
       </div>
 
-      <div className="flex w-full max-w-2xl flex-row items-center gap-2 rounded-xl bg-secondary p-3">
-        <Input
-          className="h-12 w-full flex-1 border-transparent bg-transparent text-base shadow-none focus-visible:ring-0 dark:bg-transparent"
+      <div className="w-full max-w-2xl">
+        <ChatComposer
+          input={input}
+          setInput={setInput}
+          sendMessage={handleSend}
           placeholder={t("placeholder")}
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyDown={handleKeyDown}
+          supportsThinking={supportsThinking}
+          thinkingEnabled={thinkingEnabled}
+          setThinkingEnabled={setThinkingEnabled}
+          large
         />
-        <Button
-          variant="select"
-          className="size-10 shrink-0 rounded-full"
-          disabled={!input.trim()}
-          onClick={handleSubmit}
-        >
-          <FaArrowUpLong size="18" />
-        </Button>
       </div>
     </div>
   );

web/src/components/chat/ReasoningBubble.tsx

@@ -8,6 +8,12 @@ import {
 } from "@/components/ui/collapsible";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 type ReasoningBubbleProps = {
   /** The accumulated reasoning text from the model. */
@@ -54,34 +60,42 @@ export function ReasoningBubble({
 
   return (
     <div className="self-start rounded-2xl bg-muted/60 px-3 py-2 text-muted-foreground">
-      <Collapsible open={open} onOpenChange={handleOpenChange}>
-        <CollapsibleTrigger asChild>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-auto w-full min-w-0 justify-start gap-2 whitespace-normal p-0 text-left text-xs hover:bg-transparent"
-          >
-            <LuBrain
-              className={cn(
-                "size-3 shrink-0",
-                !answerStarted && "animate-pulse",
-              )}
-            />
-            <span className="break-words font-medium">{label}</span>
-            {answerStarted &&
-              (open ? (
-                <LuChevronDown className="ml-auto size-3 shrink-0" />
-              ) : (
-                <LuChevronRight className="ml-auto size-3 shrink-0" />
-              ))}
-          </Button>
-        </CollapsibleTrigger>
-        <CollapsibleContent>
-          <pre className="scrollbar-container mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded bg-muted/50 p-2 font-sans text-xs leading-relaxed">
-            {reasoning}
-          </pre>
-        </CollapsibleContent>
-      </Collapsible>
+      <TooltipProvider>
+        <Collapsible open={open} onOpenChange={handleOpenChange}>
+          <CollapsibleTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-auto w-full min-w-0 justify-start gap-2 whitespace-normal p-0 text-left text-xs hover:bg-transparent"
+            >
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="flex items-center gap-2">
+                    <LuBrain
+                      className={cn(
+                        "size-3 shrink-0",
+                        !answerStarted && "animate-pulse",
+                      )}
+                    />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>{label}</TooltipContent>
+              </Tooltip>
+              {answerStarted &&
+                (open ? (
+                  <LuChevronDown className="ml-auto size-3 shrink-0" />
+                ) : (
+                  <LuChevronRight className="ml-auto size-3 shrink-0" />
+                ))}
+            </Button>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <pre className="scrollbar-container mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded bg-muted/50 p-2 font-sans text-xs leading-relaxed">
+              {reasoning}
+            </pre>
+          </CollapsibleContent>
+        </Collapsible>
+      </TooltipProvider>
     </div>
   );
 }

web/src/components/config-form/theme/widgets/GenAIModelWidget.tsx

@@ -23,6 +23,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import type { ConfigFormContext, JsonObject } from "@/types/configForm";
+import type { GenAIModelsResponse } from "@/types/chat";
 import { getSizedFieldClassName } from "../utils";
 
 type ProbeResponse =
@@ -73,11 +74,12 @@ export function GenAIModelWidget(props: WidgetProps) {
     return `${e.provider ?? ""}|${e.base_url ?? ""}`;
   }, [providerKey, formContext?.fullConfig]);
 
-  const { data: allModels, mutate: mutateModels } = useSWR<
-    Record<string, string[]>
-  >("genai/models", {
-    revalidateOnFocus: false,
-  });
+  const { data: allModels, mutate: mutateModels } = useSWR<GenAIModelsResponse>(
+    "genai/models",
+    {
+      revalidateOnFocus: false,
+    },
+  );
 
   // Revalidate models when the saved config fingerprint changes (e.g. after
   // switching provider or base_url and saving).
@@ -89,9 +91,9 @@ export function GenAIModelWidget(props: WidgetProps) {
     }
   }, [configFingerprint, mutateModels]);
 
-  const fetchedModels = useMemo(() => {
+  const fetchedModels = useMemo<string[]>(() => {
     if (!allModels || !providerKey) return [];
-    return allModels[providerKey] ?? [];
+    return allModels[providerKey]?.models ?? [];
   }, [allModels, providerKey]);
 
   const [probeStatus, setProbeStatus] = useState<ProbeStatus>("idle");

web/src/pages/Chat.tsx

@@ -1,20 +1,21 @@
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { FaArrowUpLong, FaStop } from "react-icons/fa6";
 import { LuCircleAlert, LuMessageSquarePlus } from "react-icons/lu";
 import { useTranslation } from "react-i18next";
 import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import axios from "axios";
+import useSWR from "swr";
 import { ChatEventThumbnailsRow } from "@/components/chat/ChatEventThumbnailsRow";
 import { MessageBubble } from "@/components/chat/ChatMessage";
 import { ReasoningBubble } from "@/components/chat/ReasoningBubble";
 import { ToolCallsGroup } from "@/components/chat/ToolCallsGroup";
 import { ChatStartingState } from "@/components/chat/ChatStartingState";
-import { ChatAttachmentChip } from "@/components/chat/ChatAttachmentChip";
-import { ChatQuickReplies } from "@/components/chat/ChatQuickReplies";
-import { ChatPaperclipButton } from "@/components/chat/ChatPaperclipButton";
+import { ChatComposer } from "@/components/chat/ChatComposer";
 import ChatSettings from "@/components/chat/ChatSettings";
-import type { ChatMessage, ShowStatsMode } from "@/types/chat";
+import type {
+  ChatMessage,
+  GenAIModelsResponse,
+  ShowStatsMode,
+} from "@/types/chat";
 import { usePersistence } from "@/hooks/use-persistence";
 import {
   getEventIdsFromSearchObjectsToolCalls,
@@ -38,9 +39,26 @@ export default function ChatPage() {
     "chat-auto-scroll",
     true,
   );
+  const [thinkingEnabled, setThinkingEnabled] = usePersistence<boolean>(
+    "chat-thinking-enabled",
+    false,
+  );
   const scrollRef = useRef<HTMLDivElement>(null);
   const abortRef = useRef<AbortController | null>(null);
 
+  const { data: genaiInfo } = useSWR<GenAIModelsResponse>("genai/models", {
+    revalidateOnFocus: false,
+  });
+  const supportsThinking = useMemo(() => {
+    if (!genaiInfo) return false;
+    for (const entry of Object.values(genaiInfo)) {
+      if (entry.roles?.includes("chat") && entry.supports_toggleable_thinking) {
+        return true;
+      }
+    }
+    return false;
+  }, [genaiInfo]);
+
   useEffect(() => {
     document.title = t("documentTitle");
   }, [t]);
@@ -100,9 +118,10 @@ export default function ChatPage() {
           defaultErrorMessage: t("error"),
         },
         controller.signal,
+        supportsThinking ? { enableThinking: !!thinkingEnabled } : {},
       );
     },
-    [isLoading, t],
+    [isLoading, supportsThinking, t, thinkingEnabled],
   );
 
   const recentEventIds = useMemo(() => {
@@ -305,6 +324,9 @@ export default function ChatPage() {
                   setInput("");
                   submitConversation([{ role: "user", content: message }]);
                 }}
+                supportsThinking={supportsThinking}
+                thinkingEnabled={!!thinkingEnabled}
+                setThinkingEnabled={setThinkingEnabled}
               />
             )}
           </div>
@@ -313,7 +335,7 @@ export default function ChatPage() {
       {hasStarted && (
         <div className="flex shrink-0 justify-center p-2 md:px-4 md:pb-4">
           <div className="flex w-full xl:w-[50%] 3xl:w-[35%]">
-            <ChatEntry
+            <ChatComposer
               input={input}
               setInput={setInput}
               sendMessage={sendMessage}
@@ -324,6 +346,9 @@ export default function ChatPage() {
               onAttach={setAttachedEventId}
               onStop={stopGeneration}
               recentEventIds={recentEventIds}
+              supportsThinking={supportsThinking}
+              thinkingEnabled={!!thinkingEnabled}
+              setThinkingEnabled={setThinkingEnabled}
             />
           </div>
         </div>
@@ -331,89 +356,3 @@ export default function ChatPage() {
     </div>
   );
 }
-
-type ChatEntryProps = {
-  input: string;
-  setInput: (value: string) => void;
-  sendMessage: (textOverride?: string) => void;
-  isLoading: boolean;
-  placeholder: string;
-  attachedEventId: string | null;
-  onClearAttachment: () => void;
-  onAttach: (eventId: string) => void;
-  onStop: () => void;
-  recentEventIds: string[];
-};
-
-function ChatEntry({
-  input,
-  setInput,
-  sendMessage,
-  isLoading,
-  placeholder,
-  attachedEventId,
-  onClearAttachment,
-  onAttach,
-  onStop,
-  recentEventIds,
-}: ChatEntryProps) {
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      sendMessage();
-    }
-  };
-
-  return (
-    <div className="flex w-full flex-col items-stretch justify-center gap-2 rounded-xl bg-secondary p-3">
-      {attachedEventId && (
-        <div className="flex items-center">
-          <ChatAttachmentChip
-            eventId={attachedEventId}
-            mode="composer"
-            onRemove={onClearAttachment}
-          />
-        </div>
-      )}
-      {attachedEventId && (
-        <ChatQuickReplies
-          onSend={(text) => sendMessage(text)}
-          disabled={isLoading}
-        />
-      )}
-      <div className="flex w-full flex-row items-center gap-2">
-        <ChatPaperclipButton
-          recentEventIds={recentEventIds}
-          onAttach={onAttach}
-          disabled={isLoading || attachedEventId != null}
-        />
-        <Input
-          className="w-full flex-1 border-transparent bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent"
-          placeholder={placeholder}
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyDown={handleKeyDown}
-          aria-busy={isLoading}
-        />
-        {isLoading ? (
-          <Button
-            variant="destructive"
-            className="size-10 shrink-0 rounded-full"
-            onClick={onStop}
-          >
-            <FaStop className="size-3" />
-          </Button>
-        ) : (
-          <Button
-            variant="select"
-            className="size-10 shrink-0 rounded-full"
-            disabled={!input.trim()}
-            onClick={() => sendMessage()}
-          >
-            <FaArrowUpLong className="size-4" />
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}

web/src/types/chat.ts

@@ -25,3 +25,11 @@ export type ChatStats = {
 };
 
 export type ShowStatsMode = "while_generating" | "always";
+
+export type GenAIProviderInfo = {
+  models: string[];
+  roles: string[];
+  supports_toggleable_thinking: boolean;
+};
+
+export type GenAIModelsResponse = Record<string, GenAIProviderInfo>;

web/src/utils/chatUtil.ts

@@ -34,12 +34,17 @@ type StreamChunk =
  * POST to chat/completion with stream: true, parse NDJSON stream, and invoke
  * callbacks so the caller can update UI (e.g. React state).
  */
+export type StreamChatOptions = {
+  enableThinking?: boolean;
+};
+
 export async function streamChatCompletion(
   url: string,
   headers: Record<string, string>,
   apiMessages: { role: string; content: string }[],
   callbacks: StreamChatCallbacks,
   signal?: AbortSignal,
+  options: StreamChatOptions = {},
 ): Promise<void> {
   const {
     updateMessages,
@@ -50,10 +55,17 @@ export async function streamChatCompletion(
   } = callbacks;
 
   try {
+    const body: Record<string, unknown> = {
+      messages: apiMessages,
+      stream: true,
+    };
+    if (options.enableThinking !== undefined) {
+      body.enable_thinking = options.enableThinking;
+    }
     const res = await fetch(url, {
       method: "POST",
       headers,
-      body: JSON.stringify({ messages: apiMessages, stream: true }),
+      body: JSON.stringify(body),
       signal,
     });