d8dfun/claude-code-chat
1
0
Fork 0
mirror of https://github.com/andrepimenta/claude-code-chat.git synced 2025-12-13 21:59:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Custom commands

Browse Source
This commit is contained in:
andrepimenta
2025-06-20 22:39:49 +01:00
parent 3bd58780a3
commit efbd79fbb7
2 changed files with 84 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/ui-styles.ts
View File

@@ -1051,6 +1051,7 @@ const styles = `
color: var(--vscode-foreground);
}
/* Slash commands modal */
.slash-commands-info {
padding: 12px 16px;
@@ -1114,6 +1115,46 @@ const styles = `
opacity: 0.8;
}
/* Custom command input */
.custom-command-item {
cursor: default;
}
.custom-command-input-container {
display: flex;
align-items: center;
gap: 2px;
margin-top: 4px;
}
.command-prefix {
font-size: 12px;
color: var(--vscode-foreground);
font-weight: 500;
}
.custom-command-input {
background-color: var(--vscode-input-background);
border: 1px solid var(--vscode-input-border);
color: var(--vscode-input-foreground);
padding: 2px 6px;
border-radius: 3px;
font-size: 11px;
outline: none;
min-width: 120px;
font-family: var(--vscode-editor-font-family);
}
.custom-command-input:focus {
border-color: var(--vscode-focusBorder);
box-shadow: 0 0 0 1px var(--vscode-focusBorder);
}
.custom-command-input::placeholder {
color: var(--vscode-input-placeholderForeground);
opacity: 0.7;
}
.status {
padding: 8px 12px;
background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);

44
src/ui.ts
View File

@@ -250,7 +250,7 @@ const html = `<!DOCTYPE html>
</div>
</div>
<h3 style="margin-top: 24px; margin-bottom: 16px; font-size: 14px; font-weight: 600;">MCP Configuration</h3>
<h3 style="margin-top: 24px; margin-bottom: 16px; font-size: 14px; font-weight: 600;">MCP Configuration (coming soon)</h3>
<div>
<p style="font-size: 11px; color: var(--vscode-descriptionForeground); margin: 0;">
Model Context Protocol (MCP) allows Claude Code to connect to external systems and services for enhanced capabilities like databases, APIs, and tools.
@@ -263,6 +263,19 @@ const html = `<!DOCTYPE html>
</div>
</div>
<h3 style="margin-top: 24px; margin-bottom: 16px; font-size: 14px; font-weight: 600;">Custom Slash Commands (coming soon)</h3>
<div>
<p style="font-size: 11px; color: var(--vscode-descriptionForeground); margin: 0;">
Add your own custom slash commands that will appear in the commands modal. Define shortcuts for frequently used terminal commands.
</p>
</div>
<div class="settings-group">
<div class="tool-item">
<input type="checkbox" id="custom-commands-enabled" disabled>
<label for="custom-commands-enabled">Enable Custom Commands <span style="font-style: italic; opacity: 0.7;">(Coming Soon)</span></label>
</div>
</div>
</div>
</div>
</div>
@@ -458,6 +471,23 @@ const html = `<!DOCTYPE html>
<div class="slash-command-description">Enter vim mode for alternating insert and command modes</div>
</div>
</div>
<div class="slash-command-item custom-command-item">
<div class="slash-command-icon">⚡</div>
<div class="slash-command-content">
<div class="slash-command-title">Custom Command</div>
<div class="slash-command-description">
<div class="custom-command-input-container">
<span class="command-prefix">/</span>
<input type="text"
class="custom-command-input"
id="customCommandInput"
placeholder="enter-command"
onkeydown="handleCustomCommandKeydown(event)"
onclick="event.stopPropagation()">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -1036,6 +1066,18 @@ const html = `<!DOCTYPE html>
addMessage('user', \`Executing /\${command} command in terminal. Check the terminal output and return when ready.\`, 'assistant');
}
function handleCustomCommandKeydown(event) {
if (event.key === 'Enter') {
event.preventDefault();
const customCommand = event.target.value.trim();
if (customCommand) {
executeSlashCommand(customCommand);
// Clear the input for next use
event.target.value = '';
}
}
}
function openModelTerminal() {
vscode.postMessage({
type: 'openModelTerminal'