d8dfun/claude-code-chat
1
0
Fork 0
mirror of https://github.com/andrepimenta/claude-code-chat.git synced 2025-12-13 13:49:47 +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); color: var(--vscode-foreground);
} }
/* Slash commands modal */ /* Slash commands modal */
.slash-commands-info { .slash-commands-info {
padding: 12px 16px; padding: 12px 16px;
@@ -1114,6 +1115,46 @@ const styles = `
opacity: 0.8; 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 { .status {
padding: 8px 12px; padding: 8px 12px;
background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%); background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);

44
src/ui.ts
View File

@@ -250,7 +250,7 @@ const html = `<!DOCTYPE html>
</div> </div>
</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> <div>
<p style="font-size: 11px; color: var(--vscode-descriptionForeground); margin: 0;"> <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. Model Context Protocol (MCP) allows Claude Code to connect to external systems and services for enhanced capabilities like databases, APIs, and tools.
@@ -262,6 +262,19 @@ const html = `<!DOCTYPE html>
<label for="mcp-enabled">Enable MCP Integration <span style="font-style: italic; opacity: 0.7;">(Coming Soon)</span></label> <label for="mcp-enabled">Enable MCP Integration <span style="font-style: italic; opacity: 0.7;">(Coming Soon)</span></label>
</div> </div>
</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> </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 class="slash-command-description">Enter vim mode for alternating insert and command modes</div>
</div> </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> </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'); 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() { function openModelTerminal() {
vscode.postMessage({ vscode.postMessage({
type: 'openModelTerminal' type: 'openModelTerminal'