Merge pull request 'feat(ai-chat): agent roles (admin persona + optional model)' (#11) from feat/ai-agent-roles into develop

apps/client/src/features/ai-chat/components/ai-chat-window.tsx

@@ -6,7 +6,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { Group, Loader, Tooltip } from "@mantine/core";
+import { Group, Loader, Select, Tooltip } from "@mantine/core";
 import {
   IconArrowsDiagonal,
   IconCheck,
@@ -25,6 +25,7 @@ import {
   activeAiChatIdAtom,
   aiChatWindowOpenAtom,
   aiChatDraftAtom,
+  selectedAiRoleIdAtom,
 } from "@/features/ai-chat/atoms/ai-chat-atom.ts";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import { extractPageSlugId } from "@/lib";
@@ -32,6 +33,7 @@ import {
   AI_CHATS_RQ_KEY,
   useAiChatMessagesQuery,
   useAiChatsQuery,
+  useAiRolesQuery,
 } from "@/features/ai-chat/queries/ai-chat-query.ts";
 import ConversationList from "@/features/ai-chat/components/conversation-list.tsx";
 import ChatThread from "@/features/ai-chat/components/chat-thread.tsx";
@@ -102,6 +104,8 @@ export default function AiChatWindow() {
   const [windowOpen, setWindowOpen] = useAtom(aiChatWindowOpenAtom);
   const [activeChatId, setActiveChatId] = useAtom(activeAiChatIdAtom);
   const setDraft = useSetAtom(aiChatDraftAtom);
+  // The role chosen for the next new chat (null = universal assistant).
+  const [selectedRoleId, setSelectedRoleId] = useAtom(selectedAiRoleIdAtom);
 
   // History section starts collapsed (matches the former panel's behavior).
   const [historyOpen, setHistoryOpen] = useState(false);
@@ -123,6 +127,16 @@ export default function AiChatWindow() {
   const adoptNewChat = useRef(false);
 
   const { data: chats } = useAiChatsQuery();
+  // Roles for the new-chat picker (any member may list them). Only fetched while
+  // the window is open.
+  const { data: roles } = useAiRolesQuery(windowOpen);
+  // The new-chat picker only offers ENABLED roles. The list endpoint returns
+  // all live roles (so the admin settings section can manage disabled ones), so
+  // we filter to `enabled` here, client-side, for the composer picker only.
+  const enabledRoles = useMemo(
+    () => (roles ?? []).filter((r) => r.enabled === true),
+    [roles],
+  );
   const { data: messageRows, isLoading: messagesLoading } =
     useAiChatMessagesQuery(activeChatId ?? undefined);
 
@@ -144,7 +158,9 @@ export default function AiChatWindow() {
     setActiveChatId(null);
     setHistoryOpen(false);
     setDraft("");
-  }, [setActiveChatId, setDraft]);
+    // Default the picker back to "Universal assistant" for the fresh chat.
+    setSelectedRoleId(null);
+  }, [setActiveChatId, setDraft, setSelectedRoleId]);
 
   const selectChat = useCallback(
     (chatId: string): void => {
@@ -343,6 +359,15 @@ export default function AiChatWindow() {
         />
         <span className={classes.title}>{t("AI chat")}</span>
 
+        {/* Role badge for the active chat (emoji + name). Shown only when the
+            chat is bound to a role that still exists. */}
+        {activeChat?.roleName && (
+          <span className={classes.badge} title={t("Agent role")}>
+            {activeChat.roleEmoji ? `${activeChat.roleEmoji} ` : ""}
+            {activeChat.roleName}
+          </span>
+        )}
+
         <div style={{ flex: 1, display: "flex", justifyContent: "center" }}>
           {contextTokens > 0 && (
             <Tooltip label={t("Current context size")} withArrow>
@@ -441,6 +466,29 @@ export default function AiChatWindow() {
           )}
         </div>
 
+        {/* Role picker — only for a NEW chat (before it is created). Once the
+            chat exists, its role is fixed and shown as a header badge instead.
+            Defaults to "Universal assistant" (no role). */}
+        {activeChatId === null && (enabledRoles?.length ?? 0) > 0 && (
+          <div style={{ padding: "4px 8px 0" }}>
+            <Select
+              size="xs"
+              label={t("Agent role")}
+              value={selectedRoleId ?? ""}
+              onChange={(value) => setSelectedRoleId(value || null)}
+              allowDeselect={false}
+              comboboxProps={{ withinPortal: true }}
+              data={[
+                { value: "", label: t("Universal assistant") },
+                ...enabledRoles.map((r) => ({
+                  value: r.id,
+                  label: `${r.emoji ? `${r.emoji} ` : ""}${r.name}`,
+                })),
+              ]}
+            />
+          </div>
+        )}
+
         {/* body: active chat thread */}
         <div className={classes.body}>
           {waitingForHistory ? (
@@ -453,6 +501,8 @@ export default function AiChatWindow() {
               chatId={activeChatId}
               initialRows={activeChatId ? messageRows : []}
               openPage={openPage}
+              // Honoured only for a new chat; null = universal assistant.
+              roleId={activeChatId === null ? selectedRoleId : null}
               onTurnFinished={onTurnFinished}
             />
           )}

apps/client/src/features/ai-chat/components/chat-thread.tsx

@@ -25,6 +25,10 @@ interface ChatThreadProps {
   /** The page currently open in the workspace, or null on a non-page route.
    *  Sent with each turn so the agent knows what "this page" refers to. */
   openPage?: OpenPageContext | null;
+  /** The agent role selected for a NEW chat (null = universal assistant). Sent
+   *  in the request body so the server persists it on chat creation; ignored by
+   *  the server for existing chats (the role is read from the chat row). */
+  roleId?: string | null;
   /** Called when a turn finishes; the parent refreshes the chat list and, for
    *  a new chat, adopts the freshly created chat id. */
   onTurnFinished: () => void;
@@ -61,6 +65,7 @@ export default function ChatThread({
   chatId,
   initialRows,
   openPage,
+  roleId,
   onTurnFinished,
 }: ChatThreadProps) {
   const { t } = useTranslation();
@@ -84,6 +89,12 @@ export default function ChatThread({
   const openPageRef = useRef<OpenPageContext | null>(openPage ?? null);
   openPageRef.current = openPage ?? null;
 
+  // Keep the selected role id in a ref, same rationale as openPageRef. Only the
+  // FIRST request of a brand-new chat uses it (the server persists it then and
+  // ignores it for existing chats), but sending it on every send is harmless.
+  const roleIdRef = useRef<string | null>(roleId ?? null);
+  roleIdRef.current = roleId ?? null;
+
   // Stable `useChat` store key for the lifetime of THIS mount.
   //
   // CRITICAL: `useChat` (@ai-sdk/react) re-creates its internal `Chat` store
@@ -119,6 +130,9 @@ export default function ChatThread({
             ...body,
             chatId: chatIdRef.current,
             openPage: openPageRef.current,
+            // Honoured by the server only when creating a new chat; null =>
+            // universal assistant.
+            roleId: roleIdRef.current,
             messages,
           },
         }),

apps/client/src/features/ai-chat/components/conversation-list.tsx

@@ -127,9 +127,16 @@ export default function ConversationList({
               }
             }}
           >
-            <Text size="sm" lineClamp={1} style={{ flex: 1 }}>
-              {chat.title || t("Untitled chat")}
-            </Text>
+            <Group gap={4} wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
+              {chat.roleName && (
+                <Text size="sm" span title={chat.roleName} style={{ flex: "none" }}>
+                  {chat.roleEmoji || "🤖"}
+                </Text>
+              )}
+              <Text size="sm" lineClamp={1} style={{ flex: 1, minWidth: 0 }}>
+                {chat.title || t("Untitled chat")}
+              </Text>
+            </Group>
             <Menu shadow="md" width={180} position="bottom-end">
               <Menu.Target>
                 <ActionIcon