diff --git a/CHANGELOG.md b/CHANGELOG.md index 2fe902f..447b5a2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,20 @@ All notable changes to the "claude-code-chat" extension will be documented in th Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file. +## [0.0.9] - 2025-06-19 + +### Added +- Model selector dropdown in the chat interface + - Located to the left of the tools selector at the bottom of the chat box + - Supports three models: Opus (most capable), Sonnet (balanced), and Default (smart allocation) + - Model preference is saved and persists across sessions + - Validates model selection to prevent invalid model names + - Shows confirmation message when switching models + +### Changed +- Reorganized input controls into left-controls and right-controls sections for better layout +- Claude command now includes the --model flag when a specific model is selected + ## [0.0.8] - 2025-06-19 ### Added diff --git a/README.md b/README.md index 51d0969..b41e39c 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ Ditch the command line and experience Claude Code like never before. This extens 🎨 **VS Code Native** - Seamlessly matches your editor's theme and design 📁 **Smart File Context** - Reference any file with simple @ mentions 🛑 **Full Control** - Start, stop, and manage AI processes with ease +🤖 **Model Selection** - Choose between Opus, Sonnet, or Default based on your needs ![Claude Code Chat Cut](https://github.com/user-attachments/assets/d4ded28f-a4ed-4862-9766-c1ff89947775) @@ -61,6 +62,14 @@ Ditch the command line and experience Claude Code like never before. This extens - Activity bar panel for quick access - Responsive design for any screen size +### 🤖 **Model Selection** +- **Opus** - Most capable model for complex tasks requiring deep reasoning +- **Sonnet** - Balanced model offering great performance for most use cases +- **Default** - Smart model allocation based on Claude's recommendations +- Model preference persists across sessions and is saved automatically +- Easy switching via dropdown selector in the chat interface +- Visual confirmation when switching between models + --- ## 🚀 **Getting Started** diff --git a/package.json b/package.json index b719d9b..e7e25c6 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "claude-code-chat", "displayName": "Claude Code Chat", "description": "Beautiful Claude Code Chat Interface for VS Code", - "version": "0.0.8", + "version": "0.0.9", "publisher": "AndrePimenta", "author": "Andre Pimenta", "repository": { diff --git a/src/extension.ts b/src/extension.ts index b1cbd98..12f0326 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -128,6 +128,7 @@ class ClaudeChatProvider { }> = []; private _treeProvider: ClaudeChatViewProvider | undefined; private _currentClaudeProcess: cp.ChildProcess | undefined; + private _selectedModel: string = 'opus'; // Default model constructor( private readonly _extensionUri: vscode.Uri, @@ -141,6 +142,9 @@ class ClaudeChatProvider { // Load conversation index from workspace state this._conversationIndex = this._context.workspaceState.get('claude.conversationIndex', []); + // Load saved model preference + this._selectedModel = this._context.workspaceState.get('claude.selectedModel', 'opus'); + // Resume session from latest conversation const latestConversation = this._getLatestConversation(); this._currentSessionId = latestConversation?.sessionId; @@ -209,6 +213,9 @@ class ClaudeChatProvider { case 'getClipboardText': this._getClipboardText(); return; + case 'selectModel': + this._setSelectedModel(message.model); + return; } }, null, @@ -240,6 +247,12 @@ class ClaudeChatProvider { type: 'ready', data: 'Ready to chat with Claude Code! Type your message below.' }); + + // Send current model to webview + this._panel?.webview.postMessage({ + type: 'modelSelected', + model: this._selectedModel + }); }, 100); } @@ -283,6 +296,12 @@ class ClaudeChatProvider { '--dangerously-skip-permissions' ]; + // Add model selection if not using default + if (this._selectedModel && this._selectedModel !== 'default') { + args.push('--model', this._selectedModel); + console.log('Using model:', this._selectedModel); + } + // Add session resume if we have a current session if (this._currentSessionId) { args.push('--resume', this._currentSessionId); @@ -1161,6 +1180,24 @@ class ClaudeChatProvider { } } + private _setSelectedModel(model: string): void { + // Validate model name to prevent issues mentioned in the GitHub issue + const validModels = ['opus', 'sonnet', 'default']; + if (validModels.includes(model)) { + this._selectedModel = model; + console.log('Model selected:', model); + + // Store the model preference in workspace state + this._context.workspaceState.update('claude.selectedModel', model); + + // Show confirmation + vscode.window.showInformationMessage(`Claude model switched to: ${model.charAt(0).toUpperCase() + model.slice(1)}`); + } else { + console.error('Invalid model selected:', model); + vscode.window.showErrorMessage(`Invalid model: ${model}. Please select Opus, Sonnet, or Default.`); + } + } + public dispose() { if (this._panel) { this._panel.dispose(); diff --git a/src/ui.ts b/src/ui.ts index e51da8d..05153b5 100644 --- a/src/ui.ts +++ b/src/ui.ts @@ -484,13 +484,40 @@ const html = ` .input-controls { display: flex; align-items: center; - justify-content: end; + justify-content: space-between; gap: 8px; padding: 2px 4px; border-top: 1px solid var(--vscode-panel-border); background-color: var(--vscode-input-background); } + .left-controls { + display: flex; + align-items: center; + gap: 8px; + } + + .model-selector { + background-color: rgba(128, 128, 128, 0.15); + color: var(--vscode-foreground); + border: none; + padding: 3px 7px; + border-radius: 4px; + cursor: pointer; + font-size: 11px; + font-weight: 500; + transition: all 0.2s ease; + opacity: 0.9; + display: flex; + align-items: center; + gap: 4px; + } + + .model-selector:hover { + background-color: rgba(128, 128, 128, 0.25); + opacity: 1; + } + .tools-btn { background-color: rgba(128, 128, 128, 0.15); color: var(--vscode-foreground); @@ -1104,42 +1131,52 @@ const html = `
- +
+ + +
+
- + + +
@@ -1279,6 +1316,45 @@ const html = ` + + +