313 lines
12 KiB
TypeScript
313 lines
12 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { toast } from 'sonner';
|
|
import { useCommandsStore, type CommandConfig } from '@/stores/useCommandsStore';
|
|
import { RiCheckLine, RiInformationLine, RiSaveLine, RiTerminalBoxLine } from '@remixicon/react';
|
|
import { cn } from '@/lib/utils';
|
|
import { ModelSelector } from '../agents/ModelSelector';
|
|
import { AgentSelector } from './AgentSelector';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
|
|
|
export const CommandsPage: React.FC = () => {
|
|
const { selectedCommandName, getCommandByName, createCommand, updateCommand, commands } = useCommandsStore();
|
|
|
|
const selectedCommand = selectedCommandName ? getCommandByName(selectedCommandName) : null;
|
|
const isNewCommand = selectedCommandName && !selectedCommand;
|
|
|
|
const [name, setName] = React.useState('');
|
|
const [description, setDescription] = React.useState('');
|
|
const [agent, setAgent] = React.useState('');
|
|
const [model, setModel] = React.useState('');
|
|
const [template, setTemplate] = React.useState('');
|
|
const [subtask, setSubtask] = React.useState(false);
|
|
const [isSaving, setIsSaving] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
if (isNewCommand) {
|
|
|
|
setName(selectedCommandName || '');
|
|
setDescription('');
|
|
setAgent('');
|
|
setModel('');
|
|
setTemplate('');
|
|
setSubtask(false);
|
|
} else if (selectedCommand) {
|
|
|
|
setName(selectedCommand.name);
|
|
setDescription(selectedCommand.description || '');
|
|
setAgent(selectedCommand.agent || '');
|
|
setModel(selectedCommand.model || '');
|
|
setTemplate(selectedCommand.template || '');
|
|
setSubtask(selectedCommand.subtask || false);
|
|
}
|
|
}, [selectedCommand, isNewCommand, selectedCommandName, commands]);
|
|
|
|
const handleSave = async () => {
|
|
if (!name.trim()) {
|
|
toast.error('Command name is required');
|
|
return;
|
|
}
|
|
|
|
if (!template.trim()) {
|
|
toast.error('Command template is required');
|
|
return;
|
|
}
|
|
|
|
setIsSaving(true);
|
|
|
|
try {
|
|
const trimmedAgent = agent.trim();
|
|
const trimmedModel = model.trim();
|
|
const trimmedTemplate = template.trim();
|
|
const config: CommandConfig = {
|
|
name: name.trim(),
|
|
description: description.trim() || undefined,
|
|
agent: trimmedAgent === '' ? null : trimmedAgent,
|
|
model: trimmedModel === '' ? null : trimmedModel,
|
|
template: trimmedTemplate,
|
|
subtask,
|
|
};
|
|
|
|
let success: boolean;
|
|
if (isNewCommand) {
|
|
success = await createCommand(config);
|
|
} else {
|
|
success = await updateCommand(name, config);
|
|
}
|
|
|
|
if (success) {
|
|
toast.success(isNewCommand ? 'Command created successfully' : 'Command updated successfully');
|
|
} else {
|
|
toast.error(isNewCommand ? 'Failed to create command' : 'Failed to update command');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error saving command:', error);
|
|
toast.error('An error occurred while saving');
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
if (!selectedCommandName) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center">
|
|
<div className="text-center text-muted-foreground">
|
|
<RiTerminalBoxLine className="mx-auto mb-3 h-12 w-12 opacity-50" />
|
|
<p className="typography-body">Select a command from the sidebar</p>
|
|
<p className="typography-meta mt-1 opacity-75">or create a new one</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ScrollableOverlay outerClassName="h-full" className="mx-auto max-w-3xl space-y-6 p-6">
|
|
{}
|
|
<div className="space-y-1">
|
|
<h1 className="typography-ui-header font-semibold text-lg">
|
|
{isNewCommand ? 'New Command' : name}
|
|
</h1>
|
|
</div>
|
|
|
|
{}
|
|
<div className="space-y-4">
|
|
<div className="space-y-1">
|
|
<h2 className="typography-ui-header font-semibold text-foreground">Basic Information</h2>
|
|
<p className="typography-meta text-muted-foreground/80">
|
|
Configure command identity and metadata
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="typography-ui-label font-medium text-foreground">
|
|
Command Name
|
|
</label>
|
|
<Input
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder="my-command"
|
|
disabled={!isNewCommand}
|
|
/>
|
|
<p className="typography-meta text-muted-foreground">
|
|
Used with slash (/) prefix in chat
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="typography-ui-label font-medium text-foreground">
|
|
Description
|
|
</label>
|
|
<Textarea
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
placeholder="What does this command do?"
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="space-y-4">
|
|
<div className="space-y-1">
|
|
<h2 className="typography-h2 font-semibold text-foreground">Model & Agent Configuration</h2>
|
|
<p className="typography-meta text-muted-foreground/80">
|
|
Configure model and agent for command execution
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="typography-ui-label font-medium text-foreground">
|
|
Agent
|
|
</label>
|
|
<AgentSelector
|
|
agentName={agent}
|
|
onChange={(agentName: string) => setAgent(agentName)}
|
|
/>
|
|
<p className="typography-meta text-muted-foreground">
|
|
Agent to execute this command (optional)
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="typography-ui-label font-medium text-foreground">
|
|
Model
|
|
</label>
|
|
<ModelSelector
|
|
providerId={model ? model.split('/')[0] : ''}
|
|
modelId={model ? model.split('/')[1] : ''}
|
|
onChange={(providerId: string, modelId: string) => {
|
|
if (providerId && modelId) {
|
|
setModel(`${providerId}/${modelId}`);
|
|
} else {
|
|
setModel('');
|
|
}
|
|
}}
|
|
/>
|
|
<p className="typography-meta text-muted-foreground">
|
|
Default model for this command (optional)
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="typography-ui-label font-medium text-foreground flex items-center gap-2 cursor-pointer">
|
|
<div className="relative">
|
|
<input
|
|
type="checkbox"
|
|
checked={subtask}
|
|
onChange={(e) => setSubtask(e.target.checked)}
|
|
className="sr-only"
|
|
/>
|
|
<div className={cn(
|
|
"w-5 h-5 rounded border-2 flex items-center justify-center",
|
|
subtask
|
|
? "bg-primary border-primary"
|
|
: "bg-background border-border hover:border-primary/50"
|
|
)}>
|
|
{subtask && <RiCheckLine className="w-3 h-3 text-primary-foreground" />}
|
|
</div>
|
|
</div>
|
|
Force Subagent Invocation
|
|
</label>
|
|
<div className="flex items-center gap-2">
|
|
<p className="typography-meta text-muted-foreground">
|
|
Force command to run in a subagent context
|
|
</p>
|
|
<Tooltip delayDuration={1000}>
|
|
<TooltipTrigger asChild>
|
|
<RiInformationLine className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
|
|
</TooltipTrigger>
|
|
<TooltipContent sideOffset={8} className="max-w-xs">
|
|
When enabled, this command will always execute in a subagent context,<br/>
|
|
even if triggered from main agent.<br/>
|
|
Useful for isolating command logic and maintaining clean separation of concerns.
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="space-y-4">
|
|
<div className="space-y-1">
|
|
<h2 className="typography-h2 font-semibold text-foreground">Command Template</h2>
|
|
<p className="typography-meta text-muted-foreground/80">
|
|
Define the prompt template for this command. Use $ARGUMENTS for user input.
|
|
</p>
|
|
</div>
|
|
<Textarea
|
|
value={template}
|
|
onChange={(e) => setTemplate(e.target.value)}
|
|
placeholder={`Your command template here...
|
|
|
|
Use $ARGUMENTS to reference user input.
|
|
Use !\`shell command\` to inject shell output.
|
|
Use @filename to include file contents.`}
|
|
rows={12}
|
|
className="font-mono typography-meta"
|
|
/>
|
|
<div className="typography-meta text-muted-foreground/80 space-y-1">
|
|
<p className="font-medium">Template Features:</p>
|
|
<ul className="list-disc list-inside space-y-0.5 ml-2">
|
|
<li className="flex items-center gap-2">
|
|
<code className="bg-muted px-1 rounded">$ARGUMENTS</code>
|
|
<span>- User input after command</span>
|
|
<Tooltip delayDuration={1000}>
|
|
<TooltipTrigger asChild>
|
|
<RiInformationLine className="h-3 w-3 text-muted-foreground/60 cursor-help" />
|
|
</TooltipTrigger>
|
|
<TooltipContent sideOffset={8} className="max-w-xs">
|
|
Replaced with everything the user types after the command name.<br/>
|
|
Example: "/deploy staging" makes $ARGUMENTS = "staging"
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<code className="bg-muted px-1 rounded">!`command`</code>
|
|
<span>- Inject shell command output</span>
|
|
<Tooltip delayDuration={1000}>
|
|
<TooltipTrigger asChild>
|
|
<RiInformationLine className="h-3 w-3 text-muted-foreground/60 cursor-help" />
|
|
</TooltipTrigger>
|
|
<TooltipContent sideOffset={8} className="max-w-xs">
|
|
Executes shell command and replaces this placeholder with its output.<br/>
|
|
Example: !`git branch --show-current` gets current branch name
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<code className="bg-muted px-1 rounded">@filename</code>
|
|
<span>- Include file contents</span>
|
|
<Tooltip delayDuration={1000}>
|
|
<TooltipTrigger asChild>
|
|
<RiInformationLine className="h-3 w-3 text-muted-foreground/60 cursor-help" />
|
|
</TooltipTrigger>
|
|
<TooltipContent sideOffset={8} className="max-w-xs">
|
|
Replaces with the full contents of the specified file.<br/>
|
|
Example: @package.json includes the package.json content in the prompt
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{}
|
|
<div className="flex justify-end border-t border-border/40 pt-4">
|
|
<Button
|
|
size="sm"
|
|
variant="default"
|
|
onClick={handleSave}
|
|
disabled={isSaving}
|
|
className="gap-2 h-6 px-2 text-xs w-fit"
|
|
>
|
|
<RiSaveLine className="h-3 w-3" />
|
|
{isSaving ? 'Saving...' : 'Save Changes'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</ScrollableOverlay>
|
|
);
|
|
};
|