feat: Add thinking mode selector to chat interface

- Added ThinkingModeSelector component with 5 thinking modes
- Integrated selector into chat header next to permission mode
- Automatically prefixes messages with thinking instructions
- Resets to default mode after sending message
This commit is contained in:
Valics Lehel
2025-07-11 22:16:57 +03:00
committed by Haileyesus Dessie
parent 15e4db386f
commit 1f6c0c3899
2 changed files with 181 additions and 0 deletions

View File

@@ -33,6 +33,7 @@ import ClaudeStatus from './ClaudeStatus';
import TokenUsagePie from './TokenUsagePie';
import { MicButton } from './MicButton.jsx';
import { api, authenticatedFetch } from '../utils/api';
import ThinkingModeSelector, { thinkingModes } from './ThinkingModeSelector.jsx';
import Fuse from 'fuse.js';
import CommandMenu from './CommandMenu';
import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS } from '../../shared/modelConstants';
@@ -1884,6 +1885,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
const [slashPosition, setSlashPosition] = useState(-1);
const [visibleMessageCount, setVisibleMessageCount] = useState(100);
const [claudeStatus, setClaudeStatus] = useState(null);
const [thinkingMode, setThinkingMode] = useState('none');
const [provider, setProvider] = useState(() => {
return localStorage.getItem('selected-provider') || 'claude';
});
@@ -4226,6 +4228,13 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
e.preventDefault();
if (!input.trim() || isLoading || !selectedProject) return;
// Apply thinking mode prefix if selected
let messageContent = input;
const selectedThinkingMode = thinkingModes.find(mode => mode.id === thinkingMode);
if (selectedThinkingMode && selectedThinkingMode.prefix) {
messageContent = `${selectedThinkingMode.prefix}: ${input}`;
}
// Upload images first if any
let uploadedImages = [];
if (attachedImages.length > 0) {
@@ -4365,6 +4374,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
setUploadingImages(new Map());
setImageErrors(new Map());
setIsTextareaExpanded(false);
setThinkingMode('none'); // Reset thinking mode after sending
// Reset textarea height
if (textareaRef.current) {
@@ -5180,6 +5190,13 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
</span>
</div>
</button>
{/* Thinking Mode Selector */}
<ThinkingModeSelector
selectedMode={thinkingMode}
onModeChange={setThinkingMode}
className=""
/>
{/* Token usage pie chart - positioned next to mode indicator */}
<TokenUsagePie
used={tokenBudget?.used || 0}