feat(ai-chat): agent roles (admin-defined persona + optional model)

Reusable, workspace-shared agent roles for the built-in AI chat. A role is
a named persona (system-prompt instructions) + optional model override; a
chat is bound to a role at creation and applies it every turn.

Backend:
- migration 20260620T120000: ai_agent_roles table + ai_chats.role_id
  (FK ON DELETE SET NULL); hand-merged types into db.d.ts/entity.types.ts
  (db.d.ts is hand-curated here, full codegen would clobber it).
- core/ai-chat/roles: CRUD module. list = any workspace member; create/
  update/delete = admin (Manage Settings ability, like ai-settings/mcp).
  All repo queries scoped by workspace_id; soft-delete (deleted_at).
- buildSystemPrompt gains roleInstructions: role REPLACES the persona base
  (admin prompt / DEFAULT_PROMPT) but SAFETY_FRAMEWORK + context are always
  still appended.
- stream(): role resolved from ai_chats.role_id for existing chats (never
  the request body -> no per-turn role swap); body.roleId only on creation.
  Disabled (enabled=false) and soft-deleted roles fall back to universal.
- getChatModel(workspaceId, override): role model_config can swap model id /
  driver; a driver without configured creds throws 503 with a clear message
  naming the driver+role, resolved BEFORE response hijack.

Client:
- new-chat role picker (enabled roles only, default Universal assistant),
  roleId sent only on the first message; role badge (emoji+name) in the chat
  header and conversation list; admin Agent-roles management section in
  Settings -> AI (add/edit/delete, MCP-form pattern).

Tests: ai-chat.prompt.spec (role layering + safety always present, incl.
jailbreak); ai.service.spec (override on unconfigured driver -> 503).

Implements docs/ai-agent-roles-plan.md.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
claude code agent 227
2026-06-20 06:30:06 +03:00
parent c8af637654
commit 30c3189220
30 changed files with 1674 additions and 40 deletions

View File

@@ -0,0 +1,209 @@
import { useEffect } from "react";
import { z } from "zod/v4";
import {
Button,
Group,
Select,
Stack,
Switch,
Text,
TextInput,
Textarea,
} from "@mantine/core";
import { useForm } from "@mantine/form";
import { zod4Resolver } from "mantine-form-zod-resolver";
import { useTranslation } from "react-i18next";
import {
useCreateAiRoleMutation,
useUpdateAiRoleMutation,
} from "@/features/ai-chat/queries/ai-chat-query.ts";
import {
IAiRole,
IAiRoleCreate,
IAiRoleUpdate,
} from "@/features/ai-chat/types/ai-chat.types.ts";
// Supported drivers for the optional model override (mirrors server AI_DRIVERS).
// "" => use the workspace default driver/model.
const DRIVER_OPTIONS = [
{ value: "", label: "Workspace default" },
{ value: "openai", label: "OpenAI" },
{ value: "gemini", label: "Gemini" },
{ value: "ollama", label: "Ollama" },
];
const formSchema = z.object({
name: z.string().min(1),
emoji: z.string(),
description: z.string(),
instructions: z.string().min(1),
// "" => no driver override (use the workspace driver).
driver: z.enum(["", "openai", "gemini", "ollama"]),
chatModel: z.string(),
enabled: z.boolean(),
});
type FormValues = z.infer<typeof formSchema>;
interface AiAgentRoleFormProps {
// When provided, edits an existing role; otherwise creates one.
role?: IAiRole;
onClose: () => void;
}
export default function AiAgentRoleForm({
role,
onClose,
}: AiAgentRoleFormProps) {
const { t } = useTranslation();
const isEdit = Boolean(role);
const createMutation = useCreateAiRoleMutation();
const updateMutation = useUpdateAiRoleMutation();
const form = useForm<FormValues>({
validate: zod4Resolver(formSchema),
initialValues: {
name: role?.name ?? "",
emoji: role?.emoji ?? "",
description: role?.description ?? "",
instructions: role?.instructions ?? "",
driver: (role?.modelConfig?.driver ?? "") as FormValues["driver"],
chatModel: role?.modelConfig?.chatModel ?? "",
enabled: role?.enabled ?? true,
},
});
// Re-hydrate when the target role changes (reusing the modal).
useEffect(() => {
form.setValues({
name: role?.name ?? "",
emoji: role?.emoji ?? "",
description: role?.description ?? "",
instructions: role?.instructions ?? "",
driver: (role?.modelConfig?.driver ?? "") as FormValues["driver"],
chatModel: role?.modelConfig?.chatModel ?? "",
enabled: role?.enabled ?? true,
});
form.resetDirty();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [role?.id]);
// Build the model override payload: null when neither a driver nor a model id
// is set (use the workspace default).
function resolveModelConfig(values: FormValues) {
const driver = values.driver || undefined;
const chatModel = values.chatModel.trim() || undefined;
if (!driver && !chatModel) return null;
return { driver, chatModel };
}
async function handleSubmit(values: FormValues) {
const modelConfig = resolveModelConfig(values);
if (isEdit && role) {
const payload: IAiRoleUpdate = {
id: role.id,
name: values.name,
emoji: values.emoji,
description: values.description,
instructions: values.instructions,
modelConfig,
enabled: values.enabled,
};
await updateMutation.mutateAsync(payload);
} else {
const payload: IAiRoleCreate = {
name: values.name,
emoji: values.emoji || undefined,
description: values.description || undefined,
instructions: values.instructions,
modelConfig,
enabled: values.enabled,
};
await createMutation.mutateAsync(payload);
}
onClose();
}
const isSaving = createMutation.isPending || updateMutation.isPending;
return (
<Stack>
<TextInput
label={t("Role name")}
placeholder={t("e.g. Proofreader")}
{...form.getInputProps("name")}
/>
<TextInput
label={t("Emoji")}
description={t("Optional. Shown as the chat badge.")}
maxLength={8}
{...form.getInputProps("emoji")}
/>
<TextInput
label={t("Description")}
description={t("Optional. A short note about what this role does.")}
{...form.getInputProps("description")}
/>
<Textarea
label={t("Instructions")}
description={t(
"The built-in safety framework is always added automatically.",
)}
autosize
minRows={4}
maxRows={14}
{...form.getInputProps("instructions")}
/>
<Group grow align="flex-start">
<Select
label={t("Model provider override")}
description={t("Optional. Defaults to the workspace provider.")}
data={DRIVER_OPTIONS}
allowDeselect={false}
comboboxProps={{ withinPortal: true }}
{...form.getInputProps("driver")}
/>
<TextInput
label={t("Model override")}
description={t("Optional. Defaults to the workspace model.")}
placeholder={t("e.g. gpt-4o-mini")}
{...form.getInputProps("chatModel")}
/>
</Group>
<Text size="xs" c="dimmed" mt={-8}>
{t(
"If you choose a different provider, it must already be configured in AI settings.",
)}
</Text>
<Switch
label={t("Enabled")}
checked={form.values.enabled}
onChange={(event) =>
form.setFieldValue("enabled", event.currentTarget.checked)
}
/>
<Group justify="flex-end" mt="sm">
<Button type="button" variant="default" onClick={onClose}>
{t("Cancel")}
</Button>
<Button
type="button"
onClick={() => handleSubmit(form.values)}
disabled={isSaving || !form.isValid()}
loading={isSaving}
>
{t("Save")}
</Button>
</Group>
</Stack>
);
}

View File

@@ -0,0 +1,175 @@
import { useState } from "react";
import {
ActionIcon,
Badge,
Box,
Button,
Group,
Modal,
Paper,
Stack,
Switch,
Text,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { modals } from "@mantine/modals";
import { IconPencil, IconPlus, IconTrash } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import useUserRole from "@/hooks/use-user-role.tsx";
import {
useAiRolesQuery,
useDeleteAiRoleMutation,
useUpdateAiRoleMutation,
} from "@/features/ai-chat/queries/ai-chat-query.ts";
import { IAiRole } from "@/features/ai-chat/types/ai-chat.types.ts";
import AiAgentRoleForm from "./ai-agent-role-form.tsx";
/**
* Admin section: list / add / edit / delete reusable agent roles. A role
* replaces the agent's persona (instructions) and may optionally override the
* model; the safety framework is always still applied. The add/edit form lives
* in `AiAgentRoleForm`, opened in a modal.
*/
export default function AiAgentRoles() {
const { t } = useTranslation();
const { isAdmin } = useUserRole();
const { data: roles, isLoading } = useAiRolesQuery(isAdmin);
const updateMutation = useUpdateAiRoleMutation();
const deleteMutation = useDeleteAiRoleMutation();
const [opened, { open, close }] = useDisclosure(false);
// The role being edited; undefined => the modal is in "create" mode.
const [editing, setEditing] = useState<IAiRole | undefined>(undefined);
if (!isAdmin) {
return (
<Text size="sm" c="dimmed">
{t("Only workspace admins can manage AI provider settings.")}
</Text>
);
}
function openCreate() {
setEditing(undefined);
open();
}
function openEdit(role: IAiRole) {
setEditing(role);
open();
}
function confirmDelete(role: IAiRole) {
modals.openConfirmModal({
title: t("Delete role"),
children: (
<Text size="sm">
{t("Are you sure you want to delete this role?")}
</Text>
),
labels: { confirm: t("Delete"), cancel: t("Cancel") },
confirmProps: { color: "red" },
onConfirm: () => deleteMutation.mutate(role.id),
});
}
return (
<Paper withBorder radius="md" p="lg">
<Group justify="space-between" align="center" wrap="nowrap">
<Group gap="xs" align="center" wrap="nowrap">
<Box
w={9}
h={9}
bg="green.6"
style={{ borderRadius: "50%", flex: "none" }}
/>
<Text fw={600}>{t("Agent roles")}</Text>
</Group>
<Button
leftSection={<IconPlus size={16} />}
variant="default"
size="xs"
onClick={openCreate}
>
{t("Add role")}
</Button>
</Group>
<Text size="xs" c="dimmed" mt={4}>
{t(
"Reusable presets that shape the agent's behavior (and optionally its model). Picked when starting a new chat.",
)}
</Text>
{!isLoading && (!roles || roles.length === 0) && (
<Text size="sm" c="dimmed" mt="sm">
{t("No roles configured")}
</Text>
)}
<Stack gap="xs" mt="sm">
{roles?.map((role) => (
<Group key={role.id} justify="space-between" wrap="nowrap">
<Stack gap={2} style={{ minWidth: 0 }}>
<Group gap="xs">
<Text fw={500} truncate>
{role.emoji ? `${role.emoji} ` : ""}
{role.name}
</Text>
{role.modelConfig?.chatModel && (
<Badge size="xs" variant="light">
{role.modelConfig.chatModel}
</Badge>
)}
</Group>
{role.description && (
<Text size="xs" c="dimmed" truncate>
{role.description}
</Text>
)}
</Stack>
<Group gap="xs" wrap="nowrap">
<Switch
size="sm"
checked={role.enabled}
aria-label={t("Enabled")}
onChange={(event) =>
updateMutation.mutate({
id: role.id,
enabled: event.currentTarget.checked,
})
}
/>
<ActionIcon
variant="subtle"
aria-label={t("Edit")}
onClick={() => openEdit(role)}
>
<IconPencil size={16} />
</ActionIcon>
<ActionIcon
variant="subtle"
color="red"
aria-label={t("Delete")}
onClick={() => confirmDelete(role)}
>
<IconTrash size={16} />
</ActionIcon>
</Group>
</Group>
))}
</Stack>
<Modal
opened={opened}
onClose={close}
title={editing ? t("Edit role") : t("Add role")}
size="lg"
>
{/* Remount the form per target so its internal state re-hydrates. */}
<AiAgentRoleForm key={editing?.id ?? "new"} role={editing} onClose={close} />
</Modal>
</Paper>
);
}