mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-01-30 13:27:33 +00:00
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:
committed by
Haileyesus Dessie
parent
15e4db386f
commit
1f6c0c3899
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user