d8dfun/claude-code-chat
1
0
Fork 0
mirror of https://github.com/andrepimenta/claude-code-chat.git synced 2025-12-10 03:49:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Show WSL alert for windows users

Browse Source
This commit is contained in:
andrepimenta
2025-06-24 01:59:24 +01:00
parent 4bab912554
commit cd2b563be4
3 changed files with 152 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/extension.ts
View File

@@ -228,6 +228,9 @@ class ClaudeChatProvider {
case 'executeSlashCommand': case 'executeSlashCommand':
this._executeSlashCommand(message.command); this._executeSlashCommand(message.command);
return; return;
case 'dismissWSLAlert':
this._dismissWSLAlert();
return;
} }
}, },
null, null,
@@ -265,6 +268,10 @@ class ClaudeChatProvider {
type: 'modelSelected', type: 'modelSelected',
model: this._selectedModel model: this._selectedModel
}); });
// Send platform information to webview
this._sendPlatformInfo();
}, 100); }, 100);
} }
@@ -917,6 +924,7 @@ class ClaudeChatProvider {
private async _saveCurrentConversation(): Promise<void> { private async _saveCurrentConversation(): Promise<void> {
if (!this._conversationsPath || this._currentConversation.length === 0) {return;} if (!this._conversationsPath || this._currentConversation.length === 0) {return;}
if(!this._currentSessionId) {return;}
try { try {
// Create filename from first user message and timestamp // Create filename from first user message and timestamp
@@ -1340,6 +1348,29 @@ class ClaudeChatProvider {
}); });
} }
private _sendPlatformInfo() {
const platform = process.platform;
const dismissed = this._context.globalState.get<boolean>('wslAlertDismissed', false);
// Get WSL configuration
const config = vscode.workspace.getConfiguration('claudeCodeChat');
const wslEnabled = config.get<boolean>('wsl.enabled', false);
this._panel?.webview.postMessage({
type: 'platformInfo',
data: {
platform: platform,
isWindows: platform === 'win32',
wslAlertDismissed: dismissed,
wslEnabled: wslEnabled
}
});
}
private _dismissWSLAlert() {
this._context.globalState.update('wslAlertDismissed', true);
}
public dispose() { public dispose() {
if (this._panel) { if (this._panel) {
this._panel.dispose(); this._panel.dispose();

68
src/ui-styles.ts
View File

@@ -83,6 +83,74 @@ const styles = `
opacity: 1; opacity: 1;
} }
/* WSL Alert */
.wsl-alert {
margin: 8px 12px;
background-color: rgba(135, 206, 235, 0.1);
border: 2px solid rgba(135, 206, 235, 0.3);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4px);
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wsl-alert-content {
display: flex;
align-items: center;
padding: 14px 18px;
gap: 14px;
}
.wsl-alert-icon {
font-size: 22px;
flex-shrink: 0;
}
.wsl-alert-text {
flex: 1;
font-size: 13px;
line-height: 1.4;
color: var(--vscode-foreground);
}
.wsl-alert-text strong {
font-weight: 600;
color: var(--vscode-foreground);
}
.wsl-alert-actions {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.wsl-alert-actions .btn {
padding: 6px 14px;
font-size: 12px;
border-radius: 6px;
}
.wsl-alert-actions .btn:first-child {
background-color: rgba(135, 206, 235, 0.2);
border-color: rgba(135, 206, 235, 0.4);
}
.wsl-alert-actions .btn:first-child:hover {
background-color: rgba(135, 206, 235, 0.3);
border-color: rgba(135, 206, 235, 0.6);
}
.chat-container { .chat-container {
flex: 1; flex: 1;
display: flex; display: flex;

53
src/ui.ts
View File

@@ -37,6 +37,22 @@ 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>
<!-- WSL Alert for Windows users -->
<div id="wslAlert" class="wsl-alert" style="display: none;">
<div class="wsl-alert-content">
<div class="wsl-alert-icon">💻</div>
<div class="wsl-alert-text">
<strong>Looks like you are using Windows!</strong><br/>
If you are using WSL to run Claude Code, you should enable WSL integration in the settings.
</div>
<div class="wsl-alert-actions">
<button class="btn" onclick="openWSLSettings()">Enable WSL</button>
<button class="btn outlined" onclick="dismissWSLAlert()">Dismiss</button>
</div>
</div>
</div>
<div class="input-container" id="inputContainer"> <div class="input-container" id="inputContainer">
<div class="input-modes"> <div class="input-modes">
<div class="mode-toggle"> <div class="mode-toggle">
@@ -1132,6 +1148,33 @@ const html = `<!DOCTYPE html>
hideThinkingIntensityModal(); hideThinkingIntensityModal();
} }
// WSL Alert functions
function showWSLAlert() {
const alert = document.getElementById('wslAlert');
if (alert) {
alert.style.display = 'block';
}
}
function dismissWSLAlert() {
const alert = document.getElementById('wslAlert');
if (alert) {
alert.style.display = 'none';
}
// Send dismiss message to extension to store in globalState
vscode.postMessage({
type: 'dismissWSLAlert'
});
}
function openWSLSettings() {
// Dismiss the alert
dismissWSLAlert();
// Open settings modal
toggleSettings();
}
function executeSlashCommand(command) { function executeSlashCommand(command) {
// Hide the modal // Hide the modal
hideSlashCommandsModal(); hideSlashCommandsModal();
@@ -1978,6 +2021,16 @@ const html = `<!DOCTYPE html>
// Show/hide WSL options // Show/hide WSL options
document.getElementById('wslOptions').style.display = message.data['wsl.enabled'] ? 'block' : 'none'; document.getElementById('wslOptions').style.display = message.data['wsl.enabled'] ? 'block' : 'none';
} }
if (message.type === 'platformInfo') {
// Check if user is on Windows and show WSL alert if not dismissed and WSL not already enabled
if (message.data.isWindows && !message.data.wslAlertDismissed && !message.data.wslEnabled) {
// Small delay to ensure UI is ready
setTimeout(() => {
showWSLAlert();
}, 1000);
}
}
}); });
</script> </script>