Initial public release
This commit is contained in:
Bohdan Triapitsyn
@@ -0,0 +1,312 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user