mirror of
https://github.com/andrepimenta/claude-code-chat.git
synced 2025-12-13 21:59:42 +00:00
Add commands integration
This commit is contained in:
andrepimenta
@@ -219,6 +219,9 @@ class ClaudeChatProvider {
|
|||||||
case 'openModelTerminal':
|
case 'openModelTerminal':
|
||||||
this._openModelTerminal();
|
this._openModelTerminal();
|
||||||
return;
|
return;
|
||||||
|
case 'executeSlashCommand':
|
||||||
|
this._executeSlashCommand(message.command);
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
null,
|
null,
|
||||||
@@ -1261,6 +1264,36 @@ class ClaudeChatProvider {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _executeSlashCommand(command: string): void {
|
||||||
|
const config = vscode.workspace.getConfiguration('claudeCodeChat');
|
||||||
|
const wslEnabled = config.get<boolean>('wsl.enabled', false);
|
||||||
|
const wslDistro = config.get<string>('wsl.distro', 'Ubuntu');
|
||||||
|
const claudePath = config.get<string>('wsl.claudePath', '/usr/local/bin/claude');
|
||||||
|
|
||||||
|
// Build command arguments
|
||||||
|
const args = [`/${command}`];
|
||||||
|
|
||||||
|
// Add session resume if we have a current session
|
||||||
|
if (this._currentSessionId) {
|
||||||
|
args.push('--resume', this._currentSessionId);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create terminal with the claude command
|
||||||
|
const terminal = vscode.window.createTerminal(`Claude /${command}`);
|
||||||
|
if (wslEnabled) {
|
||||||
|
terminal.sendText(`wsl -d ${wslDistro} ${claudePath} ${args.join(' ')}`);
|
||||||
|
} else {
|
||||||
|
terminal.sendText(`claude ${args.join(' ')}`);
|
||||||
|
}
|
||||||
|
terminal.show();
|
||||||
|
|
||||||
|
// Show info message
|
||||||
|
vscode.window.showInformationMessage(
|
||||||
|
`Executing /${command} command in terminal. Check the terminal output and return when ready.`,
|
||||||
|
'OK'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
public dispose() {
|
public dispose() {
|
||||||
if (this._panel) {
|
if (this._panel) {
|
||||||
this._panel.dispose();
|
this._panel.dispose();
|
||||||
|
|||||||
@@ -1051,6 +1051,53 @@ const styles = `
|
|||||||
color: var(--vscode-foreground);
|
color: var(--vscode-foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Slash commands modal */
|
||||||
|
.slash-commands-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slash-command-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slash-command-item:hover {
|
||||||
|
background-color: var(--vscode-list-hoverBackground);
|
||||||
|
border-color: var(--vscode-focusBorder);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slash-command-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
min-width: 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slash-command-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slash-command-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--vscode-foreground);
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slash-command-description {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--vscode-descriptionForeground);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
|
background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
|
||||||
|
|||||||
187
src/ui.ts
187
src/ui.ts
@@ -314,6 +314,151 @@ const html = `<!DOCTYPE html>
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Slash commands modal -->
|
||||||
|
<div id="slashCommandsModal" class="tools-modal" style="display: none;">
|
||||||
|
<div class="tools-modal-content">
|
||||||
|
<div class="tools-modal-header">
|
||||||
|
<span>Claude Code Commands</span>
|
||||||
|
<button class="tools-close-btn" onclick="hideSlashCommandsModal()">✕</button>
|
||||||
|
</div>
|
||||||
|
<div class="slash-commands-list">
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('bug')">
|
||||||
|
<div class="slash-command-icon">🐛</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/bug</div>
|
||||||
|
<div class="slash-command-description">Report bugs (sends conversation to Anthropic)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('clear')">
|
||||||
|
<div class="slash-command-icon">🗑️</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/clear</div>
|
||||||
|
<div class="slash-command-description">Clear conversation history</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('compact')">
|
||||||
|
<div class="slash-command-icon">📦</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/compact</div>
|
||||||
|
<div class="slash-command-description">Compact conversation with optional focus instructions</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('config')">
|
||||||
|
<div class="slash-command-icon">⚙️</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/config</div>
|
||||||
|
<div class="slash-command-description">View/modify configuration</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('cost')">
|
||||||
|
<div class="slash-command-icon">💰</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/cost</div>
|
||||||
|
<div class="slash-command-description">Show token usage statistics</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('doctor')">
|
||||||
|
<div class="slash-command-icon">🩺</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/doctor</div>
|
||||||
|
<div class="slash-command-description">Checks the health of your Claude Code installation</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('help')">
|
||||||
|
<div class="slash-command-icon">❓</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/help</div>
|
||||||
|
<div class="slash-command-description">Get usage help</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('init')">
|
||||||
|
<div class="slash-command-icon">🚀</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/init</div>
|
||||||
|
<div class="slash-command-description">Initialize project with CLAUDE.md guide</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('login')">
|
||||||
|
<div class="slash-command-icon">🔑</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/login</div>
|
||||||
|
<div class="slash-command-description">Switch Anthropic accounts</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('logout')">
|
||||||
|
<div class="slash-command-icon">🚪</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/logout</div>
|
||||||
|
<div class="slash-command-description">Sign out from your Anthropic account</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('mcp')">
|
||||||
|
<div class="slash-command-icon">🔌</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/mcp</div>
|
||||||
|
<div class="slash-command-description">Manage MCP server connections and OAuth authentication</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('memory')">
|
||||||
|
<div class="slash-command-icon">🧠</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/memory</div>
|
||||||
|
<div class="slash-command-description">Edit CLAUDE.md memory files</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('model')">
|
||||||
|
<div class="slash-command-icon">🤖</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/model</div>
|
||||||
|
<div class="slash-command-description">Select or change the AI model</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('permissions')">
|
||||||
|
<div class="slash-command-icon">🔒</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/permissions</div>
|
||||||
|
<div class="slash-command-description">View or update permissions</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('pr_comments')">
|
||||||
|
<div class="slash-command-icon">💬</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/pr_comments</div>
|
||||||
|
<div class="slash-command-description">View pull request comments</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('review')">
|
||||||
|
<div class="slash-command-icon">👀</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/review</div>
|
||||||
|
<div class="slash-command-description">Request code review</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('status')">
|
||||||
|
<div class="slash-command-icon">📊</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/status</div>
|
||||||
|
<div class="slash-command-description">View account and system statuses</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('terminal-setup')">
|
||||||
|
<div class="slash-command-icon">⌨️</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/terminal-setup</div>
|
||||||
|
<div class="slash-command-description">Install Shift+Enter key binding for newlines</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slash-command-item" onclick="executeSlashCommand('vim')">
|
||||||
|
<div class="slash-command-icon">📝</div>
|
||||||
|
<div class="slash-command-content">
|
||||||
|
<div class="slash-command-title">/vim</div>
|
||||||
|
<div class="slash-command-description">Enter vim mode for alternating insert and command modes</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const vscode = acquireVsCodeApi();
|
const vscode = acquireVsCodeApi();
|
||||||
const messagesDiv = document.getElementById('messages');
|
const messagesDiv = document.getElementById('messages');
|
||||||
@@ -862,6 +1007,32 @@ const html = `<!DOCTYPE html>
|
|||||||
document.getElementById('modelModal').style.display = 'none';
|
document.getElementById('modelModal').style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Slash commands modal functions
|
||||||
|
function showSlashCommandsModal() {
|
||||||
|
document.getElementById('slashCommandsModal').style.display = 'flex';
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideSlashCommandsModal() {
|
||||||
|
document.getElementById('slashCommandsModal').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
function executeSlashCommand(command) {
|
||||||
|
// Hide the modal
|
||||||
|
hideSlashCommandsModal();
|
||||||
|
|
||||||
|
// Clear the input since user selected a command
|
||||||
|
messageInput.value = '';
|
||||||
|
|
||||||
|
// Send command to VS Code to execute in terminal
|
||||||
|
vscode.postMessage({
|
||||||
|
type: 'executeSlashCommand',
|
||||||
|
command: command
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show user feedback
|
||||||
|
addMessage('user', \`Executing /\${command} command in terminal. Check the terminal output and return when ready.\`, 'assistant');
|
||||||
|
}
|
||||||
|
|
||||||
function openModelTerminal() {
|
function openModelTerminal() {
|
||||||
vscode.postMessage({
|
vscode.postMessage({
|
||||||
type: 'openModelTerminal'
|
type: 'openModelTerminal'
|
||||||
@@ -1651,6 +1822,22 @@ const html = `<!DOCTYPE html>
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Close slash commands modal when clicking outside
|
||||||
|
document.getElementById('slashCommandsModal').addEventListener('click', (e) => {
|
||||||
|
if (e.target === document.getElementById('slashCommandsModal')) {
|
||||||
|
hideSlashCommandsModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Detect slash commands input
|
||||||
|
messageInput.addEventListener('input', (e) => {
|
||||||
|
const value = messageInput.value;
|
||||||
|
// Only trigger when "/" is the very first and only character
|
||||||
|
if (value === '/') {
|
||||||
|
showSlashCommandsModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Add settings message handler to window message event
|
// Add settings message handler to window message event
|
||||||
const originalMessageHandler = window.onmessage;
|
const originalMessageHandler = window.onmessage;
|
||||||
window.addEventListener('message', event => {
|
window.addEventListener('message', event => {
|
||||||
|
|||||||
Reference in New Issue
Block a user