d8dfun/claude-code-chat
1
0
Fork 0
mirror of https://github.com/andrepimenta/claude-code-chat.git synced 2025-12-09 19:09:50 +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; transition: opacity 0.2s ease;
} }
.mode-toggle span {
cursor: pointer;
transition: opacity 0.2s ease;
}
.mode-toggle span:hover {
opacity: 1;
}
.mode-toggle:hover { .mode-toggle:hover {
opacity: 1; opacity: 1;
} }
.mode-switch { .mode-switch {
position: relative; position: relative;
width: 28px; width: 26px;
height: 16px; height: 14px;
background-color: var(--vscode-panel-border); background-color: var(--vscode-panel-border);
border-radius: 8px; border-radius: 7px;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
@@ -478,15 +487,15 @@ const styles = `
position: absolute; position: absolute;
top: 2px; top: 2px;
left: 2px; left: 2px;
width: 12px; width: 10px;
height: 12px; height: 10px;
background-color: var(--vscode-foreground); background-color: var(--vscode-foreground);
border-radius: 50%; border-radius: 50%;
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
.mode-switch.active::after { .mode-switch.active::after {
transform: translateX(12px); transform: translateX(10px);
background-color: var(--vscode-button-foreground); 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="chat-container" id="chatContainer">
<div class="messages" id="messages"></div> <div class="messages" id="messages"></div>
<div class="input-container" id="inputContainer"> <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-container">
<div class="textarea-wrapper"> <div class="textarea-wrapper">
<textarea class="input-field" id="messageInput" placeholder="Type your message to Claude Code..." rows="1"></textarea> <textarea class="input-field" id="messageInput" placeholder="Type your message to Claude Code..." rows="1"></textarea>
<div class="input-controls"> <div class="input-controls">
<div class="left-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"> <button class="model-selector" id="modelSelector" onclick="showModelSelector()" title="Select model">
<span id="selectedModel">Opus</span> <span id="selectedModel">Opus</span>
<svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor"> <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor">
@@ -603,21 +601,21 @@ const html = `<!DOCTYPE html>
function togglePlanMode() { function togglePlanMode() {
planModeEnabled = !planModeEnabled; planModeEnabled = !planModeEnabled;
const switchElement = document.getElementById('planModeSwitch'); const buttonElement = document.getElementById('planModeBtn');
if (planModeEnabled) { if (planModeEnabled) {
switchElement.classList.add('active'); buttonElement.classList.add('active');
} else { } else {
switchElement.classList.remove('active'); buttonElement.classList.remove('active');
} }
} }
function toggleThinkingMode() { function toggleThinkingMode() {
thinkingModeEnabled = !thinkingModeEnabled; thinkingModeEnabled = !thinkingModeEnabled;
const switchElement = document.getElementById('thinkingModeSwitch'); const buttonElement = document.getElementById('thinkingModeBtn');
if (thinkingModeEnabled) { if (thinkingModeEnabled) {
switchElement.classList.add('active'); buttonElement.classList.add('active');
} else { } else {
switchElement.classList.remove('active'); buttonElement.classList.remove('active');
} }
} }