mirror of
https://github.com/andrepimenta/claude-code-chat.git
synced 2025-12-10 11:09:43 +00:00
Add install modal for users without Claude Code CLI
Shows a clean modal when Claude Code is not installed, with one-click installation that auto-detects platform (npm if node>=18, otherwise curl/PowerShell). Runs silently in background with progress indicator. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
andrepimenta
@@ -335,6 +335,9 @@ class ClaudeChatProvider {
|
||||
case 'dismissWSLAlert':
|
||||
this._dismissWSLAlert();
|
||||
return;
|
||||
case 'runInstallCommand':
|
||||
this._runInstallCommand();
|
||||
return;
|
||||
case 'openFile':
|
||||
this._openFileInEditor(message.filePath);
|
||||
return;
|
||||
@@ -756,9 +759,8 @@ class ClaudeChatProvider {
|
||||
|
||||
// Check if claude command is not installed
|
||||
if (error.message.includes('ENOENT') || error.message.includes('command not found')) {
|
||||
this._sendAndSaveMessage({
|
||||
type: 'error',
|
||||
data: 'Install claude code first: https://www.anthropic.com/claude-code'
|
||||
this._postMessage({
|
||||
type: 'showInstallModal'
|
||||
});
|
||||
} else {
|
||||
this._sendAndSaveMessage({
|
||||
@@ -2728,6 +2730,48 @@ class ClaudeChatProvider {
|
||||
terminal.show();
|
||||
}
|
||||
|
||||
private _runInstallCommand(): void {
|
||||
const { exec } = require('child_process');
|
||||
|
||||
// Check if npm exists and node >= 18
|
||||
exec('node --version', { shell: true }, (nodeErr: Error | null, nodeStdout: string) => {
|
||||
let useNpm = false;
|
||||
|
||||
if (!nodeErr && nodeStdout) {
|
||||
// Parse version (e.g., "v18.17.0" -> 18)
|
||||
const match = nodeStdout.trim().match(/^v(\d+)/);
|
||||
if (match && parseInt(match[1], 10) >= 18) {
|
||||
useNpm = true;
|
||||
}
|
||||
}
|
||||
|
||||
let command: string;
|
||||
if (useNpm) {
|
||||
command = 'npm install -g @anthropic-ai/claude-code';
|
||||
} else if (process.platform === 'win32') {
|
||||
command = 'irm https://claude.ai/install.ps1 | iex';
|
||||
} else {
|
||||
command = 'curl -fsSL https://claude.ai/install.sh | sh';
|
||||
}
|
||||
|
||||
// Run installation silently in the background
|
||||
exec(command, { shell: true }, (error: Error | null, stdout: string, stderr: string) => {
|
||||
if (error) {
|
||||
this._postMessage({
|
||||
type: 'installComplete',
|
||||
success: false,
|
||||
error: stderr || error.message
|
||||
});
|
||||
} else {
|
||||
this._postMessage({
|
||||
type: 'installComplete',
|
||||
success: true
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private _executeSlashCommand(command: string): void {
|
||||
// Handle /compact in chat instead of spawning a terminal
|
||||
if (command === 'compact') {
|
||||
|
||||
@@ -1602,6 +1602,51 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
|
||||
document.getElementById('slashCommandsModal').style.display = 'none';
|
||||
}
|
||||
|
||||
// Install modal functions
|
||||
function showInstallModal() {
|
||||
const modal = document.getElementById('installModal');
|
||||
const main = document.getElementById('installMain');
|
||||
const progress = document.getElementById('installProgress');
|
||||
const success = document.getElementById('installSuccess');
|
||||
|
||||
if (modal) modal.style.display = 'flex';
|
||||
if (main) main.style.display = 'flex';
|
||||
if (progress) progress.style.display = 'none';
|
||||
if (success) success.style.display = 'none';
|
||||
}
|
||||
|
||||
function hideInstallModal() {
|
||||
document.getElementById('installModal').style.display = 'none';
|
||||
}
|
||||
|
||||
function startInstallation() {
|
||||
// Hide main content, show progress
|
||||
document.getElementById('installMain').style.display = 'none';
|
||||
document.getElementById('installProgress').style.display = 'flex';
|
||||
|
||||
// Extension handles platform detection and command selection
|
||||
vscode.postMessage({
|
||||
type: 'runInstallCommand'
|
||||
});
|
||||
}
|
||||
|
||||
function handleInstallComplete(success, error) {
|
||||
document.getElementById('installProgress').style.display = 'none';
|
||||
|
||||
const successEl = document.getElementById('installSuccess');
|
||||
successEl.style.display = 'flex';
|
||||
|
||||
if (success) {
|
||||
successEl.querySelector('.install-success-text').textContent = 'Installed';
|
||||
successEl.querySelector('.install-success-hint').textContent = 'Send a message to get started';
|
||||
} else {
|
||||
// Show error state
|
||||
successEl.querySelector('.install-check').style.display = 'none';
|
||||
successEl.querySelector('.install-success-text').textContent = 'Installation failed';
|
||||
successEl.querySelector('.install-success-hint').textContent = error || 'Try installing manually from claude.ai/download';
|
||||
}
|
||||
}
|
||||
|
||||
// Thinking intensity modal functions
|
||||
function showThinkingIntensityModal() {
|
||||
// Request current settings from VS Code first
|
||||
@@ -2251,7 +2296,20 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
|
||||
addMessage('🔐 Login Required\\n\\nPlease login with your Claude plan (Pro/Max) or API key.\\nA terminal has been opened - follow the login process there.\\n\\nAfter logging in, come back to this chat to continue.', 'error');
|
||||
updateStatus('Login Required', 'error');
|
||||
break;
|
||||
|
||||
|
||||
case 'showInstallModal':
|
||||
sendStats('Claude not installed');
|
||||
showInstallModal();
|
||||
updateStatus('Claude Code not installed', 'error');
|
||||
break;
|
||||
|
||||
case 'installComplete':
|
||||
handleInstallComplete(message.success, message.error);
|
||||
if (message.success) {
|
||||
updateStatus('Ready', 'success');
|
||||
}
|
||||
break;
|
||||
|
||||
case 'showRestoreOption':
|
||||
showRestoreContainer(message.data);
|
||||
break;
|
||||
|
||||
212
src/ui-styles.ts
212
src/ui-styles.ts
@@ -3026,6 +3026,218 @@ const styles = `
|
||||
}
|
||||
}
|
||||
|
||||
/* Install Modal Styles */
|
||||
.install-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.install-modal-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.install-modal-content {
|
||||
position: relative;
|
||||
background: var(--vscode-editor-background);
|
||||
border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
|
||||
border-radius: 12px;
|
||||
width: 320px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
animation: installFadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes installFadeIn {
|
||||
from { opacity: 0; transform: scale(0.95) translateY(-8px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
|
||||
.install-close-btn {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.6;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.install-close-btn:hover {
|
||||
background: var(--vscode-toolbar-hoverBackground);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.install-body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.install-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.install-icon-wrapper {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 16px;
|
||||
background: var(--vscode-button-background);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.install-icon {
|
||||
color: var(--vscode-button-foreground);
|
||||
}
|
||||
|
||||
.install-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.install-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--vscode-foreground);
|
||||
}
|
||||
|
||||
.install-desc {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.install-btn {
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
background: var(--vscode-button-background);
|
||||
color: var(--vscode-button-foreground);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.install-btn:hover {
|
||||
background: var(--vscode-button-hoverBackground);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.install-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.install-link {
|
||||
font-size: 13px;
|
||||
color: var(--vscode-textLink-foreground);
|
||||
text-decoration: none;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.install-link:hover {
|
||||
text-decoration: underline;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.install-progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.install-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 2.5px solid var(--vscode-widget-border, var(--vscode-panel-border));
|
||||
border-top-color: var(--vscode-button-background);
|
||||
border-radius: 50%;
|
||||
animation: installSpin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes installSpin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.install-progress-text {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vscode-foreground);
|
||||
}
|
||||
|
||||
.install-progress-hint {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.install-success {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.install-success-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: rgba(78, 201, 176, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.install-check {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: var(--vscode-testing-iconPassed, #4ec9b0);
|
||||
}
|
||||
|
||||
.install-success-text {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--vscode-foreground);
|
||||
}
|
||||
|
||||
.install-success-hint {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
</style>`
|
||||
|
||||
export default styles
|
||||
51
src/ui.ts
51
src/ui.ts
@@ -399,6 +399,57 @@ const getHtml = (isTelemetryEnabled: boolean) => `<!DOCTYPE html>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Install Claude Code modal -->
|
||||
<div id="installModal" class="install-modal" style="display: none;">
|
||||
<div class="install-modal-backdrop" onclick="hideInstallModal()"></div>
|
||||
<div class="install-modal-content">
|
||||
<button class="install-close-btn" onclick="hideInstallModal()">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||||
<path d="M1.5 1.5L10.5 10.5M1.5 10.5L10.5 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="install-body" id="installBody">
|
||||
<div class="install-main" id="installMain">
|
||||
<div class="install-icon-wrapper">
|
||||
<svg class="install-icon" width="40" height="40" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M21 15V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 3V15M12 15L7 10M12 15L17 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="install-text">
|
||||
<h2 class="install-title">Install Claude Code</h2>
|
||||
<p class="install-desc">The CLI is required to use this extension</p>
|
||||
</div>
|
||||
|
||||
<button class="install-btn" id="installMainBtn" onclick="startInstallation()">
|
||||
Install Now
|
||||
</button>
|
||||
|
||||
<a href="https://docs.anthropic.com/en/docs/claude-code" target="_blank" class="install-link">
|
||||
View documentation
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="install-progress" id="installProgress" style="display: none;">
|
||||
<div class="install-spinner"></div>
|
||||
<p class="install-progress-text">Installing Claude Code...</p>
|
||||
<p class="install-progress-hint">This may take a minute</p>
|
||||
</div>
|
||||
|
||||
<div class="install-success" id="installSuccess" style="display: none;">
|
||||
<div class="install-success-icon">
|
||||
<svg class="install-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="install-success-text">Installation Complete</p>
|
||||
<p class="install-success-hint">Send a message to get started</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Thinking intensity modal -->
|
||||
<div id="thinkingIntensityModal" class="tools-modal" style="display: none;">
|
||||
<div class="tools-modal-content" style="width: 450px;">
|
||||
|
||||
Reference in New Issue
Block a user