import { useEffect, useMemo, useRef, useState } from 'react' import { useQuery } from '@tanstack/react-query' import { ArrowDown01Icon, Cancel01Icon, PlusSignIcon } from '@hugeicons/core-free-icons' import { HugeiconsIcon } from '@hugeicons/react' import { Button } from '@/components/ui/button' import { fetchModels, type GatewayModelCatalogEntry } from '@/lib/gateway-api' import { cn } from '@/lib/utils' import { AGENT_PRESETS } from '../agent-presets' type PresetOption = { id: string name: string emoji: string description: string systemPrompt: string } const PRESET_OPTIONS: PresetOption[] = [ { id: 'blank', name: 'Blank', emoji: '✨', description: '', systemPrompt: '', }, ...Object.entries(AGENT_PRESETS) .filter(([id]) => !id.startsWith('pc1-')) .map(([id, preset]) => ({ id, name: id.charAt(0).toUpperCase() + id.slice(1), emoji: preset.emoji, description: preset.description, systemPrompt: preset.systemPrompt, })), ] type AvailableModel = { id: string provider: string name: string } function normalizeModel(model: GatewayModelCatalogEntry): AvailableModel | null { if (typeof model === 'string') { return { id: model, provider: model.includes('/') ? (model.split('/')[0] ?? 'model') : 'model', name: model.split('/').pop() ?? model, } } const id = model.id ?? model.alias ?? model.model ?? '' if (!id) return null return { id, provider: model.provider ?? id.split('/')[0] ?? 'model', name: model.label ?? model.displayName ?? model.name ?? id.split('/').pop() ?? id, } } function ModelSelector({ value, onChange, models, }: { value: string onChange: (nextValue: string) => void models: AvailableModel[] }) { const [open, setOpen] = useState(false) const containerRef = useRef(null) useEffect(() => { if (!open) return function handlePointerDown(event: MouseEvent) { if (!containerRef.current?.contains(event.target as Node)) { setOpen(false) } } document.addEventListener('mousedown', handlePointerDown) return () => document.removeEventListener('mousedown', handlePointerDown) }, [open]) const selected = models.find((model) => model.id === value) return (
{open ? (
{models.map((model) => ( ))}
) : null}
) } export function OperationsNewAgentModal({ open, defaultModel, onClose, onCreate, isSaving, }: { open: boolean defaultModel: string onClose: () => void onCreate: (input: { name: string emoji: string model: string systemPrompt: string description?: string }) => Promise isSaving: boolean }) { const [presetId, setPresetId] = useState('blank') const [name, setName] = useState('') const [emoji, setEmoji] = useState('🤖') const [model, setModel] = useState(defaultModel) const [description, setDescription] = useState('') const [systemPrompt, setSystemPrompt] = useState('') useEffect(() => { if (!open) return setPresetId('blank') setName('') setEmoji('🤖') setModel(defaultModel) setDescription('') setSystemPrompt('') }, [defaultModel, open]) function applyPreset(next: string) { setPresetId(next) const preset = PRESET_OPTIONS.find((entry) => entry.id === next) if (!preset || preset.id === 'blank') return setName((current) => current.trim() || preset.name) setEmoji(preset.emoji) setDescription(preset.description) setSystemPrompt(preset.systemPrompt) } const modelsQuery = useQuery({ queryKey: ['operations', 'models'], queryFn: fetchModels, enabled: open, }) const models = useMemo( () => (modelsQuery.data?.models ?? []) .map(normalizeModel) .filter((entry): entry is AvailableModel => Boolean(entry)), [modelsQuery.data?.models], ) if (!open) return null return (
event.stopPropagation()} >

New Agent

Add a persistent Operations agent to the roster.

Start from a template
{PRESET_OPTIONS.map((preset) => ( ))}

Templates fill in emoji, description, and system prompt. You can edit everything before creating.