From 53925d2e2beaaff41959d017a112edaa365595e7 Mon Sep 17 00:00:00 2001
From: majdyz <zamil.majdy@agpt.co>
Date: Wed, 15 Apr 2026 16:15:22 +0700
Subject: [PATCH] fix(frontend): hide mode/model toggles during session, show
 as read-only when non-default

---
 .../components/ChatInput/ChatInput.tsx        | 30 +++++++++++--------
 .../ChatInput/components/ModeToggleButton.tsx | 15 ++++++----
 .../components/ModelToggleButton.tsx          | 19 ++++++++----
 3 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/ChatInput.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/ChatInput.tsx
index b6fedb722e..1a00f8def6 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/ChatInput.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/ChatInput.tsx
@@ -218,18 +218,24 @@ export function ChatInput({
               onFilesSelected={handleFilesSelected}
               disabled={isBusy}
             />
-            {showModeToggle && !isStreaming && (
-              <ModeToggleButton
-                mode={copilotChatMode}
-                onToggle={handleToggleMode}
-              />
-            )}
-            {showModeToggle && !isStreaming && (
-              <ModelToggleButton
-                model={copilotLlmModel}
-                onToggle={handleToggleModel}
-              />
-            )}
+            {showModeToggle &&
+              !isStreaming &&
+              (!hasSession || copilotChatMode === "extended_thinking") && (
+                <ModeToggleButton
+                  mode={copilotChatMode}
+                  onToggle={handleToggleMode}
+                  readOnly={hasSession}
+                />
+              )}
+            {showModeToggle &&
+              !isStreaming &&
+              (!hasSession || copilotLlmModel === "advanced") && (
+                <ModelToggleButton
+                  model={copilotLlmModel}
+                  onToggle={handleToggleModel}
+                  readOnly={hasSession}
+                />
+              )}
             {showDryRunToggle && (!hasSession || isDryRun) && (
               <DryRunToggleButton
                 isDryRun={isDryRun}
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ModeToggleButton.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ModeToggleButton.tsx
index 6a3ab0d34d..eb61dd51b0 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ModeToggleButton.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ModeToggleButton.tsx
@@ -7,28 +7,33 @@ import type { CopilotMode } from "../../../store";
 interface Props {
   mode: CopilotMode;
   onToggle: () => void;
+  readOnly?: boolean;
 }
 
-export function ModeToggleButton({ mode, onToggle }: Props) {
+export function ModeToggleButton({ mode, onToggle, readOnly = false }: Props) {
   const isExtended = mode === "extended_thinking";
   return (
     <button
       type="button"
       aria-pressed={isExtended}
-      onClick={onToggle}
+      disabled={readOnly}
+      onClick={readOnly ? undefined : onToggle}
       className={cn(
         "inline-flex min-h-11 min-w-11 items-center justify-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors",
         isExtended
           ? "bg-purple-100 text-purple-900 hover:bg-purple-200"
           : "bg-amber-100 text-amber-900 hover:bg-amber-200",
+        readOnly && "cursor-default opacity-70",
       )}
       aria-label={
         isExtended ? "Switch to Fast mode" : "Switch to Extended Thinking mode"
       }
       title={
-        isExtended
-          ? "Extended Thinking mode — deeper reasoning (click to switch to Fast mode)"
-          : "Fast mode — quicker responses (click to switch to Extended Thinking)"
+        readOnly
+          ? `${isExtended ? "Extended Thinking" : "Fast"} mode active for this session`
+          : isExtended
+            ? "Extended Thinking mode — deeper reasoning (click to switch to Fast mode)"
+            : "Fast mode — quicker responses (click to switch to Extended Thinking)"
       }
     >
       {isExtended ? (
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ModelToggleButton.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ModelToggleButton.tsx
index 04f70f54d3..06c395d3f6 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ModelToggleButton.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ModelToggleButton.tsx
@@ -7,28 +7,37 @@ import type { CopilotLlmModel } from "../../../store";
 interface Props {
   model: CopilotLlmModel;
   onToggle: () => void;
+  readOnly?: boolean;
 }
 
-export function ModelToggleButton({ model, onToggle }: Props) {
+export function ModelToggleButton({
+  model,
+  onToggle,
+  readOnly = false,
+}: Props) {
   const isAdvanced = model === "advanced";
   return (
     <button
       type="button"
       aria-pressed={isAdvanced}
-      onClick={onToggle}
+      disabled={readOnly}
+      onClick={readOnly ? undefined : onToggle}
       className={cn(
         "inline-flex min-h-11 min-w-11 items-center justify-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors",
         isAdvanced
           ? "bg-sky-100 text-sky-900 hover:bg-sky-200"
           : "bg-neutral-100 text-neutral-700 hover:bg-neutral-200",
+        readOnly && "cursor-default opacity-70",
       )}
       aria-label={
         isAdvanced ? "Switch to Standard model" : "Switch to Advanced model"
       }
       title={
-        isAdvanced
-          ? "Advanced model — highest capability (click to switch to Standard)"
-          : "Standard model — click to switch to Advanced"
+        readOnly
+          ? `${isAdvanced ? "Advanced" : "Standard"} model active for this session`
+          : isAdvanced
+            ? "Advanced model — highest capability (click to switch to Standard)"
+            : "Standard model — click to switch to Advanced"
       }
     >
       <Cpu size={14} />