智能体配置

frontend-web/src/components/workspace/agents/agent-card.tsx

@@ -59,11 +59,17 @@ export function AgentCard({ agent }: AgentCardProps) {
     agent.skills ?? [],
   );
 
-  const currentUserId = useMemo(() => getStoredAuth()?.user_id ?? null, []);
+  const storedAuth = useMemo(() => getStoredAuth(), []);
+  const currentUserId = storedAuth?.user_id ?? null;
+  const isAdmin = storedAuth?.system_role === "admin";
   const isBuiltin = agent.builtin;
   const isOwned =
     !isBuiltin && agent.user_id !== null && agent.user_id === currentUserId;
   const isFromOthers = !isBuiltin && !isOwned;
+  // System admins are allowed to edit built-in agents in place. Delete and
+  // publish-toggle stay owner-only — built-ins shouldn't be removable, and
+  // they are inherently visible to everyone so toggling published is moot.
+  const canEdit = isOwned || (isBuiltin && isAdmin);
 
   useEffect(() => {
     if (!editOpen) {
@@ -235,40 +241,46 @@ export function AgentCard({ agent }: AgentCardProps) {
             <MessageSquareIcon className="mr-1.5 h-3.5 w-3.5" />
             {t.agents.chat}
           </Button>
-          {isOwned && (
+          {(canEdit || isOwned) && (
             <div className="flex gap-1">
-              <Button
-                size="icon"
-                variant="ghost"
-                className="h-8 w-8 shrink-0"
-                onClick={() => void handleTogglePublished()}
-                disabled={updateAgent.isPending}
-                title={agent.published ? "取消发布" : "发布"}
-              >
-                {agent.published ? (
-                  <EyeOffIcon className="h-3.5 w-3.5" />
-                ) : (
-                  <EyeIcon className="h-3.5 w-3.5" />
-                )}
-              </Button>
-              <Button
-                size="icon"
-                variant="ghost"
-                className="h-8 w-8 shrink-0"
-                onClick={() => setEditOpen(true)}
-                title="编辑智能体"
-              >
-                <SquarePenIcon className="h-3.5 w-3.5" />
-              </Button>
-              <Button
-                size="icon"
-                variant="ghost"
-                className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
-                onClick={() => setDeleteOpen(true)}
-                title={t.agents.delete}
-              >
-                <Trash2Icon className="h-3.5 w-3.5" />
-              </Button>
+              {isOwned && (
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="h-8 w-8 shrink-0"
+                  onClick={() => void handleTogglePublished()}
+                  disabled={updateAgent.isPending}
+                  title={agent.published ? "取消发布" : "发布"}
+                >
+                  {agent.published ? (
+                    <EyeOffIcon className="h-3.5 w-3.5" />
+                  ) : (
+                    <EyeIcon className="h-3.5 w-3.5" />
+                  )}
+                </Button>
+              )}
+              {canEdit && (
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="h-8 w-8 shrink-0"
+                  onClick={() => setEditOpen(true)}
+                  title="编辑智能体"
+                >
+                  <SquarePenIcon className="h-3.5 w-3.5" />
+                </Button>
+              )}
+              {isOwned && (
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
+                  onClick={() => setDeleteOpen(true)}
+                  title={t.agents.delete}
+                >
+                  <Trash2Icon className="h-3.5 w-3.5" />
+                </Button>
+              )}
             </div>
           )}
         </CardFooter>

frontend-web/src/components/workspace/messages/message-list.tsx

@@ -1,14 +1,14 @@
-import type { BaseStream } from "@langchain/langgraph-sdk/react";
-import { SendIcon } from "lucide-react";
-import { useMemo, useState } from "react";
-
-import {
-  Conversation,
-  ConversationContent,
-} from "@/components/ai-elements/conversation";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { useI18n } from "@/core/i18n/hooks";
+import type { BaseStream } from "@langchain/langgraph-sdk/react";
+import { CheckIcon, SendIcon, XIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import {
+  Conversation,
+  ConversationContent,
+} from "@/components/ai-elements/conversation";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { useI18n } from "@/core/i18n/hooks";
 import {
   extractContentFromMessage,
   extractPresentFilesFromMessage,
@@ -42,17 +42,21 @@ export function MessageList({
   className,
   threadId,
   thread,
-  paddingBottom = MESSAGE_LIST_DEFAULT_PADDING_BOTTOM,
-  tokenUsageEnabled = false,
-  onClarificationSubmit,
-}: {
-  className?: string;
-  threadId: string;
-  thread: BaseStream<AgentThreadState>;
-  paddingBottom?: number;
-  tokenUsageEnabled?: boolean;
-  onClarificationSubmit?: (answer: string) => void | Promise<void>;
-}) {
+  paddingBottom = MESSAGE_LIST_DEFAULT_PADDING_BOTTOM,
+  tokenUsageEnabled = false,
+  onClarificationSubmit,
+  onSetupAgentApprove,
+  onSetupAgentReject,
+}: {
+  className?: string;
+  threadId: string;
+  thread: BaseStream<AgentThreadState>;
+  paddingBottom?: number;
+  tokenUsageEnabled?: boolean;
+  onClarificationSubmit?: (answer: string) => void | Promise<void>;
+  onSetupAgentApprove?: (payload: SetupAgentApprovalPayload) => void | Promise<void>;
+  onSetupAgentReject?: (payload: SetupAgentApprovalPayload) => void | Promise<void>;
+}) {
   const { t } = useI18n();
   const rehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading);
   const updateSubtask = useUpdateSubtask();
@@ -83,13 +87,13 @@ export function MessageList({
             if (message && hasContent(message)) {
               return (
                 <div key={group.id} className="w-full">
-                  <ClarificationCard
-                    fallbackContent={extractContentFromMessage(message)}
-                    isLoading={thread.isLoading}
-                    message={message}
-                    onSubmit={onClarificationSubmit}
-                    rehypePlugins={rehypePlugins}
-                  />
+                  <ClarificationCard
+                    fallbackContent={extractContentFromMessage(message)}
+                    isLoading={thread.isLoading}
+                    message={message}
+                    onSubmit={onClarificationSubmit}
+                    rehypePlugins={rehypePlugins}
+                  />
                   <MessageTokenUsageList
                     enabled={tokenUsageEnabled}
                     isLoading={thread.isLoading}
@@ -99,6 +103,23 @@ export function MessageList({
               );
             }
             return null;
+          } else if (group.type === "assistant:setup-agent-approval") {
+            const message = group.messages[0];
+            return message ? (
+              <div key={group.id} className="w-full">
+                <SetupAgentApprovalCard
+                  disabled={thread.isLoading}
+                  message={message}
+                  onApprove={onSetupAgentApprove}
+                  onReject={onSetupAgentReject}
+                />
+                <MessageTokenUsageList
+                  enabled={tokenUsageEnabled}
+                  isLoading={thread.isLoading}
+                  messages={group.messages}
+                />
+              </div>
+            ) : null;
           } else if (group.type === "assistant:present-files") {
             const files: string[] = [];
             for (const message of group.messages) {
@@ -246,150 +267,289 @@ export function MessageList({
         <div style={{ height: `${paddingBottom}px` }} />
       </ConversationContent>
     </Conversation>
-  );
-}
-
-type ClarificationOption = {
-  id: string;
-  label: string;
-  description?: string;
-};
-
-type ClarificationPayload = {
-  question?: string;
-  context?: string | null;
-  clarification_type?: string;
-  options?: ClarificationOption[];
-  allow_custom?: boolean;
-};
-
-function getClarificationPayload(message: unknown): ClarificationPayload | null {
-  if (typeof message !== "object" || message === null) {
-    return null;
-  }
-  const additionalKwargs = Reflect.get(message, "additional_kwargs");
-  if (typeof additionalKwargs !== "object" || additionalKwargs === null) {
-    return null;
-  }
-  const clarification = Reflect.get(additionalKwargs, "clarification");
-  if (typeof clarification !== "object" || clarification === null) {
-    return null;
-  }
-  return clarification as ClarificationPayload;
-}
-
-function ClarificationCard({
-  fallbackContent,
-  isLoading,
-  message,
-  onSubmit,
-  rehypePlugins,
-}: {
-  fallbackContent: string;
-  isLoading: boolean;
-  message: unknown;
-  onSubmit?: (answer: string) => void | Promise<void>;
-  rehypePlugins: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
-}) {
-  const payload = getClarificationPayload(message);
-  const [customAnswer, setCustomAnswer] = useState("");
-  const [submitting, setSubmitting] = useState(false);
-
-  const options = useMemo(
-    () =>
-      (payload?.options ?? []).filter(
-        (option) => typeof option.label === "string" && option.label.trim(),
-      ),
-    [payload?.options],
-  );
-
-  if (!payload) {
-    return (
-      <MarkdownContent
-        content={fallbackContent}
-        isLoading={isLoading}
-        rehypePlugins={rehypePlugins}
-      />
-    );
-  }
-
-  const disabled = isLoading || submitting || !onSubmit;
-
-  async function submitAnswer(answer: string) {
-    const trimmed = answer.trim();
-    if (!trimmed || disabled) {
-      return;
-    }
-    setSubmitting(true);
-    try {
-      await onSubmit?.(trimmed);
-    } finally {
-      setSubmitting(false);
-    }
-  }
-
-  return (
-    <div className="border-border bg-card text-card-foreground w-full rounded-lg border p-4 shadow-sm">
-      <div className="space-y-2">
-        <div className="text-muted-foreground text-xs font-medium">
-          需要你的确认
-        </div>
-        {payload.context ? (
-          <p className="text-muted-foreground text-sm leading-6">
-            {payload.context}
-          </p>
-        ) : null}
-        <div className="text-sm leading-6 font-medium">
-          {payload.question || fallbackContent}
-        </div>
-      </div>
-
-      {options.length > 0 ? (
-        <div className="mt-4 grid gap-2">
-          {options.map((option) => (
-            <Button
-              key={option.id || option.label}
-              type="button"
-              variant="outline"
-              className="h-auto justify-start whitespace-normal px-3 py-2 text-left"
-              disabled={disabled}
-              onClick={() => void submitAnswer(`我选择：${option.label}`)}
-            >
-              <span className="flex min-w-0 flex-col items-start gap-1">
-                <span>{option.label}</span>
-                {option.description ? (
-                  <span className="text-muted-foreground text-xs font-normal leading-5">
-                    {option.description}
-                  </span>
-                ) : null}
-              </span>
-            </Button>
-          ))}
-        </div>
-      ) : null}
-
-      {payload.allow_custom !== false ? (
-        <div className="mt-4 flex flex-col gap-2">
-          <Textarea
-            value={customAnswer}
-            onChange={(event) => setCustomAnswer(event.currentTarget.value)}
-            placeholder="如果以上选项都不合适，可以在这里输入你的回答"
-            disabled={disabled}
-            className="min-h-20 resize-none"
-          />
-          <div className="flex justify-end">
-            <Button
-              type="button"
-              size="sm"
-              disabled={disabled || !customAnswer.trim()}
-              onClick={() => void submitAnswer(customAnswer)}
-            >
-              <SendIcon className="h-4 w-4" />
-              发送回答
-            </Button>
-          </div>
-        </div>
-      ) : null}
-    </div>
-  );
-}
+  );
+}
+
+type ClarificationOption = {
+  id: string;
+  label: string;
+  description?: string;
+};
+
+type ClarificationPayload = {
+  question?: string;
+  context?: string | null;
+  clarification_type?: string;
+  options?: ClarificationOption[];
+  allow_custom?: boolean;
+};
+
+export type SetupAgentApprovalPayload = {
+  name?: string;
+  description?: string;
+  soul?: string;
+  skills?: string[];
+};
+
+function getSetupAgentApprovalPayload(
+  message: unknown,
+): SetupAgentApprovalPayload | null {
+  if (typeof message !== "object" || message === null) {
+    return null;
+  }
+  const additionalKwargs = Reflect.get(message, "additional_kwargs");
+  if (typeof additionalKwargs !== "object" || additionalKwargs === null) {
+    return null;
+  }
+  const approval = Reflect.get(additionalKwargs, "setup_agent_approval");
+  if (typeof approval !== "object" || approval === null) {
+    return null;
+  }
+  return approval as SetupAgentApprovalPayload;
+}
+
+function SetupAgentApprovalCard({
+  disabled,
+  message,
+  onApprove,
+  onReject,
+}: {
+  disabled: boolean;
+  message: unknown;
+  onApprove?: (payload: SetupAgentApprovalPayload) => void | Promise<void>;
+  onReject?: (payload: SetupAgentApprovalPayload) => void | Promise<void>;
+}) {
+  const payload = getSetupAgentApprovalPayload(message);
+  const [submitting, setSubmitting] = useState<"approve" | "reject" | null>(
+    null,
+  );
+
+  if (!payload) {
+    return null;
+  }
+
+  const approvalPayload = payload;
+  const busy = disabled || submitting !== null;
+  const skills = approvalPayload.skills ?? [];
+
+  async function run(action: "approve" | "reject") {
+    if (busy) {
+      return;
+    }
+    setSubmitting(action);
+    try {
+      if (action === "approve") {
+        await onApprove?.(approvalPayload);
+      } else {
+        await onReject?.(approvalPayload);
+      }
+    } finally {
+      setSubmitting(null);
+    }
+  }
+
+  return (
+    <div className="border-border bg-card text-card-foreground w-full rounded-lg border p-4 shadow-sm">
+      <div className="space-y-3">
+        <div>
+          <div className="text-muted-foreground text-xs font-medium">
+            创建专家审批
+          </div>
+          <div className="text-sm font-medium">请确认是否写入这个专家配置。</div>
+        </div>
+
+        {approvalPayload.name ? (
+          <div className="space-y-1">
+            <div className="text-muted-foreground text-xs">名称</div>
+            <p className="text-sm font-medium">{approvalPayload.name}</p>
+          </div>
+        ) : null}
+
+        {approvalPayload.description ? (
+          <div className="space-y-1">
+            <div className="text-muted-foreground text-xs">描述</div>
+            <p className="text-sm leading-6">{approvalPayload.description}</p>
+          </div>
+        ) : null}
+
+        {skills.length > 0 ? (
+          <div className="space-y-1">
+            <div className="text-muted-foreground text-xs">技能</div>
+            <div className="flex flex-wrap gap-1.5">
+              {skills.map((skill) => (
+                <span
+                  key={skill}
+                  className="bg-secondary text-secondary-foreground rounded-md px-2 py-1 text-xs"
+                >
+                  {skill}
+                </span>
+              ))}
+            </div>
+          </div>
+        ) : null}
+
+        {approvalPayload.soul ? (
+          <div className="space-y-1">
+            <div className="text-muted-foreground text-xs">SOUL.md</div>
+            <pre className="bg-muted max-h-52 overflow-auto rounded-md p-3 text-xs whitespace-pre-wrap">
+              {approvalPayload.soul}
+            </pre>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="mt-4 flex justify-end gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={busy || !onReject}
+          onClick={() => void run("reject")}
+        >
+          <XIcon className="h-4 w-4" />
+          拒绝
+        </Button>
+        <Button
+          type="button"
+          size="sm"
+          disabled={busy || !onApprove}
+          onClick={() => void run("approve")}
+        >
+          <CheckIcon className="h-4 w-4" />
+          批准创建
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function getClarificationPayload(message: unknown): ClarificationPayload | null {
+  if (typeof message !== "object" || message === null) {
+    return null;
+  }
+  const additionalKwargs = Reflect.get(message, "additional_kwargs");
+  if (typeof additionalKwargs !== "object" || additionalKwargs === null) {
+    return null;
+  }
+  const clarification = Reflect.get(additionalKwargs, "clarification");
+  if (typeof clarification !== "object" || clarification === null) {
+    return null;
+  }
+  return clarification as ClarificationPayload;
+}
+
+function ClarificationCard({
+  fallbackContent,
+  isLoading,
+  message,
+  onSubmit,
+  rehypePlugins,
+}: {
+  fallbackContent: string;
+  isLoading: boolean;
+  message: unknown;
+  onSubmit?: (answer: string) => void | Promise<void>;
+  rehypePlugins: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
+}) {
+  const payload = getClarificationPayload(message);
+  const [customAnswer, setCustomAnswer] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  const options = useMemo(
+    () =>
+      (payload?.options ?? []).filter(
+        (option) => typeof option.label === "string" && option.label.trim(),
+      ),
+    [payload?.options],
+  );
+
+  if (!payload) {
+    return (
+      <MarkdownContent
+        content={fallbackContent}
+        isLoading={isLoading}
+        rehypePlugins={rehypePlugins}
+      />
+    );
+  }
+
+  const disabled = isLoading || submitting || !onSubmit;
+
+  async function submitAnswer(answer: string) {
+    const trimmed = answer.trim();
+    if (!trimmed || disabled) {
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await onSubmit?.(trimmed);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="border-border bg-card text-card-foreground w-full rounded-lg border p-4 shadow-sm">
+      <div className="space-y-2">
+        <div className="text-muted-foreground text-xs font-medium">
+          需要你的确认
+        </div>
+        {payload.context ? (
+          <p className="text-muted-foreground text-sm leading-6">
+            {payload.context}
+          </p>
+        ) : null}
+        <div className="text-sm leading-6 font-medium">
+          {payload.question || fallbackContent}
+        </div>
+      </div>
+
+      {options.length > 0 ? (
+        <div className="mt-4 grid gap-2">
+          {options.map((option) => (
+            <Button
+              key={option.id || option.label}
+              type="button"
+              variant="outline"
+              className="h-auto justify-start whitespace-normal px-3 py-2 text-left"
+              disabled={disabled}
+              onClick={() => void submitAnswer(`我选择：${option.label}`)}
+            >
+              <span className="flex min-w-0 flex-col items-start gap-1">
+                <span>{option.label}</span>
+                {option.description ? (
+                  <span className="text-muted-foreground text-xs font-normal leading-5">
+                    {option.description}
+                  </span>
+                ) : null}
+              </span>
+            </Button>
+          ))}
+        </div>
+      ) : null}
+
+      {payload.allow_custom !== false ? (
+        <div className="mt-4 flex flex-col gap-2">
+          <Textarea
+            value={customAnswer}
+            onChange={(event) => setCustomAnswer(event.currentTarget.value)}
+            placeholder="如果以上选项都不合适，可以在这里输入你的回答"
+            disabled={disabled}
+            className="min-h-20 resize-none"
+          />
+          <div className="flex justify-end">
+            <Button
+              type="button"
+              size="sm"
+              disabled={disabled || !customAnswer.trim()}
+              onClick={() => void submitAnswer(customAnswer)}
+            >
+              <SendIcon className="h-4 w-4" />
+              发送回答
+            </Button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}