diff --git a/webview-ui/src/components/chat/CommandPatternSelector.tsx b/webview-ui/src/components/chat/CommandPatternSelector.tsx index cadc90c443..340e819d3e 100644 --- a/webview-ui/src/components/chat/CommandPatternSelector.tsx +++ b/webview-ui/src/components/chat/CommandPatternSelector.tsx @@ -23,6 +23,7 @@ export const CommandPatternSelector: React.FC = ({ const { t } = useTranslation() const [isExpanded, setIsExpanded] = useState(false) const [editedCommand, setEditedCommand] = useState(command) + const [isEditing, setIsEditing] = useState(false) const getCommandStatus = (cmd: string): "allowed" | "denied" | "none" => { if (allowedCommands.includes(cmd)) return "allowed" @@ -78,16 +79,36 @@ export const CommandPatternSelector: React.FC = ({ {isExpanded && ( -
+
- setEditedCommand(e.target.value)} - className="font-mono text-xs bg-vscode-input-background text-vscode-input-foreground border border-vscode-input-border rounded px-2 py-1 w-full focus:outline-none focus:border-vscode-focusBorder" - placeholder={command} - /> + {isEditing ? ( + setEditedCommand(e.target.value)} + onBlur={() => setIsEditing(false)} + onKeyDown={(e) => { + if (e.key === "Enter") { + setIsEditing(false) + } + if (e.key === "Escape") { + setEditedCommand(command) + setIsEditing(false) + } + }} + className="font-mono text-xs bg-vscode-input-background text-vscode-input-foreground border border-vscode-input-border rounded px-2 py-1.5 w-full focus:outline-0" + placeholder={command} + autoFocus + /> + ) : ( +
setIsEditing(true)} + className="font-mono text-xs text-vscode-foreground cursor-pointer hover:bg-vscode-list-hoverBackground px-2 py-1.5 rounded transition-colors border border-transparent" + title="Click to edit command"> + {editedCommand} +
+ )}