d8dfun/claude-code-chat
1
0
Fork 0
mirror of https://github.com/andrepimenta/claude-code-chat.git synced 2025-12-08 17:39:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Plan and Thinking buttons text clickable

Browse Source
This commit is contained in:
andrepimenta
2025-06-20 19:10:55 +01:00
parent eb3252548a
commit 82fccdc6f1
2 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/ui-styles.ts
View File

@@ -455,16 +455,25 @@ const styles = `
transition: opacity 0.2s ease;
}
.mode-toggle span {
cursor: pointer;
transition: opacity 0.2s ease;
}
.mode-toggle span:hover {
opacity: 1;
}
.mode-toggle:hover {
opacity: 1;
}
.mode-switch {
position: relative;
width: 28px;
height: 16px;
width: 26px;
height: 14px;
background-color: var(--vscode-panel-border);
border-radius: 8px;
border-radius: 7px;
cursor: pointer;
transition: background-color 0.2s ease;
}
@@ -478,15 +487,15 @@ const styles = `
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
width: 10px;
height: 10px;
background-color: var(--vscode-foreground);
border-radius: 50%;
transition: transform 0.2s ease;
}
.mode-switch.active::after {
transform: translateX(12px);
transform: translateX(10px);
background-color: var(--vscode-button-foreground);
}

30
src/ui.ts
View File

@@ -38,21 +38,19 @@ const html = `<!DOCTYPE html>
<div class="chat-container" id="chatContainer">
<div class="messages" id="messages"></div>
<div class="input-container" id="inputContainer">
<div class="input-modes">
<div class="mode-toggle">
<span>Plan First</span>
<div class="mode-switch" id="planModeSwitch" onclick="togglePlanMode()"></div>
</div>
<div class="mode-toggle">
<span>Thinking Mode</span>
<div class="mode-switch" id="thinkingModeSwitch" onclick="toggleThinkingMode()"></div>
</div>
</div>
<div class="textarea-container">
<div class="textarea-wrapper">
<textarea class="input-field" id="messageInput" placeholder="Type your message to Claude Code..." rows="1"></textarea>
<div class="input-controls">
<div class="left-controls">
<button class="mode-btn" id="planModeBtn" onclick="togglePlanMode()" title="Plan first mode">
<span>Plan First</span>
<div class="mode-indicator" id="planModeIndicator"></div>
</button>
<button class="mode-btn" id="thinkingModeBtn" onclick="toggleThinkingMode()" title="Thinking mode">
<span>Thinking</span>
<div class="mode-indicator" id="thinkingModeIndicator"></div>
</button>
<button class="model-selector" id="modelSelector" onclick="showModelSelector()" title="Select model">
<span id="selectedModel">Opus</span>
<svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor">
@@ -603,21 +601,21 @@ const html = `<!DOCTYPE html>
function togglePlanMode() {
planModeEnabled = !planModeEnabled;
const switchElement = document.getElementById('planModeSwitch');
const buttonElement = document.getElementById('planModeBtn');
if (planModeEnabled) {
switchElement.classList.add('active');
buttonElement.classList.add('active');
} else {
switchElement.classList.remove('active');
buttonElement.classList.remove('active');
}
}
function toggleThinkingMode() {
thinkingModeEnabled = !thinkingModeEnabled;
const switchElement = document.getElementById('thinkingModeSwitch');
const buttonElement = document.getElementById('thinkingModeBtn');
if (thinkingModeEnabled) {
switchElement.classList.add('active');
buttonElement.classList.add('active');
} else {
switchElement.classList.remove('active');
buttonElement.classList.remove('active');
}
}