feat: improved create agent form (role, labels, chat/task listen, mentionable)
This commit is contained in:
parent
dbaa48cf49
commit
f82a89c2f9
@ -1,4 +1,3 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import type { MemberCreateResponse } from "@/lib/api";
|
||||
import { createMember } from "@/lib/api";
|
||||
@ -10,7 +9,11 @@ interface Props {
|
||||
|
||||
export default function CreateAgentModal({ onCreated, onClose }: Props) {
|
||||
const [name, setName] = useState("");
|
||||
const [capabilities, setCapabilities] = useState("");
|
||||
const [role, setRole] = useState("member");
|
||||
const [chatListen, setChatListen] = useState("mentions");
|
||||
const [taskListen, setTaskListen] = useState("assigned");
|
||||
const [labels, setLabels] = useState("");
|
||||
const [mentionable, setMentionable] = useState(true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [token, setToken] = useState<string | null>(null);
|
||||
@ -29,18 +32,17 @@ export default function CreateAgentModal({ onCreated, onClose }: Props) {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const caps = capabilities
|
||||
.split(",")
|
||||
.map((c) => c.trim())
|
||||
.filter(Boolean);
|
||||
const labelList = labels.split(",").map((l) => l.trim()).filter(Boolean);
|
||||
const member = await createMember({
|
||||
name: name.trim(),
|
||||
slug,
|
||||
type: "agent",
|
||||
role,
|
||||
agent_config: {
|
||||
capabilities: caps,
|
||||
chat_listen: "mentions",
|
||||
task_listen: "assigned",
|
||||
labels: labelList,
|
||||
chat_listen: chatListen,
|
||||
task_listen: taskListen,
|
||||
mentionable,
|
||||
},
|
||||
});
|
||||
if (member.token) {
|
||||
@ -71,22 +73,16 @@ export default function CreateAgentModal({ onCreated, onClose }: Props) {
|
||||
>
|
||||
<h2 className="text-lg font-bold mb-4">Агент создан</h2>
|
||||
<div className="mb-3 p-2 bg-yellow-500/10 border border-yellow-500/30 rounded text-yellow-400 text-sm">
|
||||
⚠️ Токен показывается только один раз. Сохраните его сейчас!
|
||||
⚠️ Токен показывается только один раз. Сохраните его!
|
||||
</div>
|
||||
<div className="mb-4 p-3 bg-[var(--bg)] border border-[var(--border)] rounded-lg font-mono text-xs break-all select-all">
|
||||
{token}
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button
|
||||
onClick={copyToken}
|
||||
className="px-4 py-2 bg-[var(--accent)] text-white rounded-lg text-sm hover:opacity-90"
|
||||
>
|
||||
<button onClick={copyToken} className="px-4 py-2 bg-[var(--accent)] text-white rounded-lg text-sm hover:opacity-90">
|
||||
{copied ? "Скопировано!" : "Скопировать"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm text-[var(--muted)] hover:text-[var(--fg)]"
|
||||
>
|
||||
<button onClick={onClose} className="px-4 py-2 text-sm text-[var(--muted)] hover:text-[var(--fg)]">
|
||||
Закрыть
|
||||
</button>
|
||||
</div>
|
||||
@ -100,49 +96,92 @@ export default function CreateAgentModal({ onCreated, onClose }: Props) {
|
||||
<form
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-6 w-96"
|
||||
className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-6 w-[420px] max-h-[90vh] overflow-y-auto"
|
||||
>
|
||||
<h2 className="text-lg font-bold mb-4">Новый агент</h2>
|
||||
|
||||
{error && (
|
||||
<div className="mb-3 p-2 bg-red-500/10 border border-red-500/30 rounded text-red-400 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
<div className="mb-3 p-2 bg-red-500/10 border border-red-500/30 rounded text-red-400 text-sm">{error}</div>
|
||||
)}
|
||||
|
||||
{/* Название */}
|
||||
<label className="block text-sm text-[var(--muted)] mb-1">Название</label>
|
||||
<input
|
||||
autoFocus
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full mb-1 px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg
|
||||
outline-none focus:border-[var(--accent)] text-sm"
|
||||
className="w-full mb-1 px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg outline-none focus:border-[var(--accent)] text-sm"
|
||||
placeholder="Code Assistant"
|
||||
/>
|
||||
{slug && <div className="text-xs text-[var(--muted)] mb-3">Slug: {slug}</div>}
|
||||
{slug && <div className="text-xs text-[var(--muted)] mb-3">slug: {slug}</div>}
|
||||
|
||||
<label className="block text-sm text-[var(--muted)] mb-1">Capabilities</label>
|
||||
{/* Роль */}
|
||||
<label className="block text-sm text-[var(--muted)] mb-1">Роль</label>
|
||||
<select
|
||||
value={role}
|
||||
onChange={(e) => setRole(e.target.value)}
|
||||
className="w-full mb-3 px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg outline-none focus:border-[var(--accent)] text-sm"
|
||||
>
|
||||
<option value="member">Member</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
|
||||
{/* Labels */}
|
||||
<label className="block text-sm text-[var(--muted)] mb-1">Labels</label>
|
||||
<input
|
||||
value={capabilities}
|
||||
onChange={(e) => setCapabilities(e.target.value)}
|
||||
className="w-full mb-4 px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg
|
||||
outline-none focus:border-[var(--accent)] text-sm"
|
||||
placeholder="code, review, deploy"
|
||||
value={labels}
|
||||
onChange={(e) => setLabels(e.target.value)}
|
||||
className="w-full mb-3 px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg outline-none focus:border-[var(--accent)] text-sm"
|
||||
placeholder="backend, python, devops"
|
||||
/>
|
||||
|
||||
{/* Chat Listen */}
|
||||
<div className="grid grid-cols-2 gap-3 mb-3">
|
||||
<div>
|
||||
<label className="block text-sm text-[var(--muted)] mb-1">Чат</label>
|
||||
<select
|
||||
value={chatListen}
|
||||
onChange={(e) => setChatListen(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg outline-none focus:border-[var(--accent)] text-sm"
|
||||
>
|
||||
<option value="all">Все сообщения</option>
|
||||
<option value="mentions">Только @упоминания</option>
|
||||
<option value="none">Не слушать</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-[var(--muted)] mb-1">Задачи</label>
|
||||
<select
|
||||
value={taskListen}
|
||||
onChange={(e) => setTaskListen(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg outline-none focus:border-[var(--accent)] text-sm"
|
||||
>
|
||||
<option value="all">Все задачи</option>
|
||||
<option value="assigned">Назначенные</option>
|
||||
<option value="none">Не слушать</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mentionable */}
|
||||
<label className="flex items-center gap-2 mb-4 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mentionable}
|
||||
onChange={(e) => setMentionable(e.target.checked)}
|
||||
className="accent-[var(--accent)]"
|
||||
/>
|
||||
<span className="text-sm">Можно @упоминать</span>
|
||||
</label>
|
||||
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm text-[var(--muted)] hover:text-[var(--fg)]"
|
||||
>
|
||||
<button type="button" onClick={onClose} className="px-4 py-2 text-sm text-[var(--muted)] hover:text-[var(--fg)]">
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !name.trim()}
|
||||
className="px-4 py-2 bg-[var(--accent)] text-white rounded-lg text-sm
|
||||
hover:opacity-90 disabled:opacity-50"
|
||||
className="px-4 py-2 bg-[var(--accent)] text-white rounded-lg text-sm hover:opacity-90 disabled:opacity-50"
|
||||
>
|
||||
{loading ? "..." : "Создать"}
|
||||
</button>
|
||||
|
||||
@ -27,10 +27,13 @@ export default function MentionInput({ projectId, value, onChange, onSubmit, onM
|
||||
getProjectMembers(projectId).then(setMembers).catch(() => {});
|
||||
}, [projectId]);
|
||||
|
||||
const filtered = members.filter((m) =>
|
||||
m.name.toLowerCase().includes(filter.toLowerCase()) ||
|
||||
m.slug.toLowerCase().includes(filter.toLowerCase())
|
||||
);
|
||||
const filtered = members.filter((m) => {
|
||||
// Скрываем не-mentionable (bridge, system agents)
|
||||
if (m.agent_config?.mentionable === false) return false;
|
||||
if (m.type === "bridge") return false;
|
||||
return m.name.toLowerCase().includes(filter.toLowerCase()) ||
|
||||
m.slug.toLowerCase().includes(filter.toLowerCase());
|
||||
});
|
||||
|
||||
const insertMention = useCallback((member: ProjectMember) => {
|
||||
if (mentionStart < 0) return;
|
||||
|
||||
@ -59,6 +59,7 @@ export interface AgentConfig {
|
||||
task_listen: string;
|
||||
prompt: string | null;
|
||||
model: string | null;
|
||||
mentionable: boolean;
|
||||
}
|
||||
|
||||
export interface Member {
|
||||
@ -96,6 +97,7 @@ export interface ProjectMember {
|
||||
slug: string;
|
||||
type: string;
|
||||
role: string;
|
||||
agent_config?: AgentConfig | null;
|
||||
}
|
||||
|
||||
export interface Step {
|
||||
@ -309,6 +311,7 @@ export async function createMember(data: {
|
||||
name: string;
|
||||
slug: string;
|
||||
type?: string;
|
||||
role?: string;
|
||||
agent_config?: Partial<AgentConfig>;
|
||||
}): Promise<MemberCreateResponse> {
|
||||
return request("/api/v1/members", { method: "POST", body: JSON.stringify(data) });
|
||||
|
||||
Loading…
Reference in New Issue
Block a user