feat: remove legacy OpenCode runtime
Cut product flows over to Coding/Pi and retain only the migration-owned v1 boundary. Promote supported native optional packages because electron-builder omitted pnpm transitive optional closure from the packaged ASAR.
This commit is contained in:
242
src/components/coding/AgentCreationDialog.tsx
Normal file
242
src/components/coding/AgentCreationDialog.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
import { useEffect, useMemo, useRef, useState, type ChangeEvent } from 'react';
|
||||
import { Search, Trash2, Upload } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { prepareAgentAvatar } from '@/lib/agent-avatar-upload';
|
||||
import { agentAvatarOptions } from '@/lib/agent-avatars';
|
||||
import { codingModelKey, type CodingModelOption } from '@/lib/coding-model-options';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { CodingProjectAgent } from '@/types/coding-project';
|
||||
import { DEFAULT_PROJECT_AGENT_SKILL_IDS } from '../../../shared/coding-skills';
|
||||
|
||||
export type AgentCreationSkillOption = {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
};
|
||||
|
||||
export type AgentCreationInput = {
|
||||
name: string;
|
||||
avatarId: string;
|
||||
avatarDataUrl?: string;
|
||||
model: string;
|
||||
responsibility: string;
|
||||
prompt: string;
|
||||
skillIds: string[];
|
||||
};
|
||||
|
||||
type AgentCreationDialogProps = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
modelOptions: CodingModelOption[];
|
||||
skills?: AgentCreationSkillOption[];
|
||||
existingAgentNames?: string[];
|
||||
agent?: CodingProjectAgent | null;
|
||||
onCreate?: (input: AgentCreationInput) => Promise<void>;
|
||||
onUpdate?: (input: AgentCreationInput) => Promise<void>;
|
||||
onArchive?: () => void;
|
||||
title?: string;
|
||||
submitLabel?: string;
|
||||
};
|
||||
|
||||
function createInitialInput(modelOptions: CodingModelOption[], agent?: CodingProjectAgent | null): AgentCreationInput {
|
||||
if (agent) {
|
||||
return {
|
||||
name: agent.name,
|
||||
avatarId: agent.avatarId,
|
||||
avatarDataUrl: agent.avatarDataUrl,
|
||||
model: agent.model ? codingModelKey(agent.model) : '',
|
||||
responsibility: agent.responsibility.mission,
|
||||
prompt: agent.prompt,
|
||||
skillIds: [...agent.skillIds],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
name: '',
|
||||
avatarId: agentAvatarOptions[0]?.id ?? 'avatar-01',
|
||||
avatarDataUrl: undefined,
|
||||
model: modelOptions[0]?.key ?? '',
|
||||
responsibility: '',
|
||||
prompt: '',
|
||||
skillIds: [],
|
||||
};
|
||||
}
|
||||
|
||||
export function AgentCreationDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
modelOptions,
|
||||
skills = [],
|
||||
existingAgentNames = [],
|
||||
agent = null,
|
||||
onCreate,
|
||||
onUpdate,
|
||||
onArchive,
|
||||
title,
|
||||
submitLabel,
|
||||
}: AgentCreationDialogProps) {
|
||||
const editing = Boolean(agent);
|
||||
const [input, setInput] = useState<AgentCreationInput>(() => createInitialInput(modelOptions, agent));
|
||||
const defaultSkillsAppliedRef = useRef(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [skillQuery, setSkillQuery] = useState('');
|
||||
const [avatarPickerOpen, setAvatarPickerOpen] = useState(false);
|
||||
const [avatarProcessing, setAvatarProcessing] = useState(false);
|
||||
const avatarUploadInputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
defaultSkillsAppliedRef.current = false;
|
||||
return;
|
||||
}
|
||||
defaultSkillsAppliedRef.current = editing;
|
||||
setInput(createInitialInput(modelOptions, agent));
|
||||
setSkillQuery('');
|
||||
setAvatarPickerOpen(false);
|
||||
}, [agent, editing, modelOptions, open]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || editing || defaultSkillsAppliedRef.current) return;
|
||||
const defaultSkillIds = DEFAULT_PROJECT_AGENT_SKILL_IDS.filter((skillId) => skills.some((skill) => skill.id === skillId));
|
||||
if (defaultSkillIds.length === 0) return;
|
||||
setInput((current) => current.skillIds.length > 0
|
||||
? current
|
||||
: { ...current, skillIds: [...defaultSkillIds] });
|
||||
defaultSkillsAppliedRef.current = true;
|
||||
}, [editing, open, skills]);
|
||||
|
||||
const handleAvatarFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
event.target.value = '';
|
||||
if (!file) return;
|
||||
|
||||
setAvatarProcessing(true);
|
||||
try {
|
||||
const prepared = await prepareAgentAvatar(file);
|
||||
setInput((current) => ({ ...current, avatarDataUrl: prepared.previewUrl }));
|
||||
setAvatarPickerOpen(false);
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : '伙伴头像图片处理失败');
|
||||
} finally {
|
||||
setAvatarProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredSkills = useMemo(() => {
|
||||
const query = skillQuery.trim().toLocaleLowerCase();
|
||||
if (!query) return skills;
|
||||
return skills.filter((skill) => `${skill.name} ${skill.description}`.toLocaleLowerCase().includes(query));
|
||||
}, [skillQuery, skills]);
|
||||
const selectedAvatar = agentAvatarOptions.find((option) => option.id === input.avatarId) ?? agentAvatarOptions[0];
|
||||
const selectedAvatarSrc = input.avatarDataUrl ?? selectedAvatar?.src;
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const name = input.name.trim();
|
||||
const responsibility = input.responsibility.trim();
|
||||
if (!name || !responsibility || !input.model) {
|
||||
toast.error('请填写伙伴名称、职责，并配置伙伴模型。');
|
||||
return;
|
||||
}
|
||||
if (existingAgentNames.some((agentName) => agentName.trim() === name)) {
|
||||
toast.error('伙伴名称需要在当前项目内唯一。');
|
||||
return;
|
||||
}
|
||||
const submit = editing ? onUpdate : onCreate;
|
||||
if (!submit) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await submit({ ...input, name, responsibility });
|
||||
onOpenChange(false);
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : String(error));
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-h-[min(820px,calc(100vh-2rem))] overflow-y-auto sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title ?? (editing ? '维护项目伙伴' : '创建项目伙伴')}</DialogTitle>
|
||||
<DialogDescription>设置伙伴的基础信息，也可以补充提示词和技能。</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-1">
|
||||
<div>
|
||||
<label htmlFor="agent-create-name" className="text-sm font-semibold">伙伴名称 <span className="text-destructive">*</span></label>
|
||||
<div className="mt-2 flex items-center gap-3">
|
||||
<button type="button" aria-label="更换头像" title="更换头像" aria-haspopup="dialog" onClick={() => setAvatarPickerOpen(true)} className="motion-press h-10 w-10 shrink-0 overflow-hidden rounded-xl border border-brand bg-brand-soft p-0.5 shadow-soft">
|
||||
<img src={selectedAvatarSrc} alt={input.avatarDataUrl ? '当前上传头像' : selectedAvatar?.label ?? '当前头像'} className="h-full w-full rounded-lg object-cover [image-rendering:pixelated]" />
|
||||
</button>
|
||||
<Input id="agent-create-name" value={input.name} maxLength={30} placeholder="例如：小明" onChange={(event) => setInput((current) => ({ ...current, name: event.target.value }))} className="mt-0 flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="agent-create-model" className="text-sm font-semibold">伙伴模型 <span className="text-destructive">*</span></label>
|
||||
<p className="mt-1 text-xs font-medium text-muted-foreground">当前伙伴的消息固定使用此模型；如需切换，请在这里修改。</p>
|
||||
<select id="agent-create-model" value={input.model} onChange={(event) => setInput((current) => ({ ...current, model: event.target.value }))} className="mt-2 h-10 w-full rounded-xl border border-border bg-surface-input px-3 text-sm">
|
||||
<option value="" disabled>请选择已配置模型</option>
|
||||
{modelOptions.map((option) => <option key={option.key} value={option.key}>{option.label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="agent-create-responsibility" className="text-sm font-semibold">职责简述 <span className="text-destructive">*</span></label>
|
||||
<Input id="agent-create-responsibility" value={input.responsibility} maxLength={200} placeholder="例如：负责把想法拆成清晰的产品计划。" onChange={(event) => setInput((current) => ({ ...current, responsibility: event.target.value }))} className="mt-2" />
|
||||
</div>
|
||||
<section className="space-y-4 rounded-lg border border-border/80 bg-surface-subtle p-4">
|
||||
<h3 className="font-semibold">高级设置（提示词与技能）</h3>
|
||||
<Textarea aria-label="Agent 提示词" value={input.prompt} onChange={(event) => setInput((current) => ({ ...current, prompt: event.target.value }))} className="mt-3 min-h-28 bg-background font-mono text-xs leading-5" placeholder="可选：补充这个伙伴的工作方式与边界。" />
|
||||
<div className="flex items-center justify-between gap-3"><h4 className="text-sm font-semibold">绑定技能</h4><Badge className="border border-border/80 bg-background text-foreground">已选 {input.skillIds.length}</Badge></div>
|
||||
{skills.length > 0 ? <>
|
||||
<div className="relative"><Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" /><Input aria-label="搜索技能" value={skillQuery} onChange={(event) => setSkillQuery(event.target.value)} placeholder="搜索技能" className="bg-background pl-9" /></div>
|
||||
<div className="space-y-2">{filteredSkills.map((skill) => { const checked = input.skillIds.includes(skill.id); return <label key={skill.id} className={cn('flex cursor-pointer items-start gap-2 rounded-md border border-border/80 p-2.5', checked ? 'bg-background' : 'bg-surface-subtle')}><input type="checkbox" aria-label={`绑定技能：${skill.name}`} checked={checked} onChange={() => setInput((current) => ({ ...current, skillIds: checked ? current.skillIds.filter((id) => id !== skill.id) : [...current.skillIds, skill.id] }))} /><span><span className="text-sm font-semibold">{skill.name}</span><span className="mt-0.5 block text-xs text-muted-foreground">{skill.description}</span></span></label>; })}{filteredSkills.length === 0 ? <p className="rounded-md border border-dashed border-border/80 p-3 text-center text-xs font-medium text-muted-foreground">没有匹配的技能</p> : null}</div>
|
||||
</> : <p className="mt-3 rounded-md border border-dashed border-border/80 p-3 text-xs font-medium text-muted-foreground">当前暂无可绑定技能。</p>}
|
||||
</section>
|
||||
</div>
|
||||
<DialogFooter className={cn(agent && onArchive && 'sm:justify-between')}>
|
||||
{agent && onArchive ? <Button type="button" variant="outline" aria-label="归档伙伴" className="border-border/80 bg-accent-soft" onClick={onArchive} disabled={submitting}><Trash2 className="mr-2 h-4 w-4" />归档伙伴</Button> : null}
|
||||
<div className="flex flex-col-reverse gap-2 sm:ml-auto sm:flex-row">
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={submitting}>取消</Button>
|
||||
<Button type="button" onClick={() => void handleSubmit()} disabled={submitting || modelOptions.length === 0}>{submitting ? (editing ? '保存中…' : '创建中…') : (submitLabel ?? (editing ? '保存伙伴' : '创建并开始对话'))}</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
<Dialog open={avatarPickerOpen} onOpenChange={setAvatarPickerOpen}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader><DialogTitle>选择头像</DialogTitle><DialogDescription>点击一个头像替换当前头像。</DialogDescription></DialogHeader>
|
||||
<input
|
||||
ref={avatarUploadInputRef}
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp"
|
||||
aria-label="上传伙伴头像"
|
||||
data-testid="agent-avatar-upload-input"
|
||||
className="sr-only"
|
||||
onChange={(event) => { void handleAvatarFileChange(event); }}
|
||||
/>
|
||||
<div className="flex flex-col gap-2 rounded-lg border border-dashed border-brand/35 bg-brand-soft/40 p-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold">上传本地图片</p>
|
||||
<p className="mt-1 text-xs font-medium text-muted-foreground">自动裁剪为 256×256，并优先压缩为 WebP，节省项目空间。</p>
|
||||
</div>
|
||||
<Button type="button" variant="outline" className="shrink-0 border-brand/30 bg-background" onClick={() => avatarUploadInputRef.current?.click()} disabled={avatarProcessing}>
|
||||
<Upload className="mr-2 h-4 w-4" />{avatarProcessing ? '处理中…' : '从本地上传'}
|
||||
</Button>
|
||||
</div>
|
||||
{input.avatarDataUrl ? <Button type="button" variant="ghost" className="w-full text-xs text-muted-foreground" onClick={() => { setInput((current) => ({ ...current, avatarDataUrl: undefined })); setAvatarPickerOpen(false); }}>恢复内置头像</Button> : null}
|
||||
<div className="grid grid-cols-8 gap-2">
|
||||
{agentAvatarOptions.map((option) => (
|
||||
<button key={option.id} type="button" aria-label={`选择头像：${option.label}`} aria-pressed={!input.avatarDataUrl && input.avatarId === option.id} onClick={() => { setInput((current) => ({ ...current, avatarId: option.id, avatarDataUrl: undefined })); setAvatarPickerOpen(false); }} className={cn('rounded-lg border p-1', !input.avatarDataUrl && input.avatarId === option.id ? 'border-brand bg-brand-soft shadow-soft' : 'border-border bg-background')}>
|
||||
<img src={option.src} alt="" className="aspect-square w-full rounded object-cover [image-rendering:pixelated]" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user