Merge branch 'master' of http://192.168.0.200/knowledge-base-bj/deerflow-server into xuhd

frontend-web/src/pages/NewAgentPage.tsx

@@ -3,6 +3,7 @@
 import {
   ArrowLeftIcon,
   CheckCircleIcon,
+  InfoIcon,
   SaveIcon,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
@@ -24,6 +25,7 @@ import {
   type SetupAgentApprovalPayload,
 } from "@/components/workspace/messages";
 import { ThreadContext } from "@/components/workspace/messages/context";
+import { SkillDetailDialog } from "@/components/workspace/skills/skill-detail-dialog";
 import { getAPIClient } from "@/core/api";
 import type { Agent } from "@/core/agents";
 import {
@@ -73,6 +75,7 @@ export default function NewAgentPage() {
   const [isSavingDraft, setIsSavingDraft] = useState(false);
   const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
   const [isSkillSelectionTouched, setIsSkillSelectionTouched] = useState(false);
+  const [detailSkillName, setDetailSkillName] = useState<string | null>(null);
   const [threadPrepared, setThreadPrepared] = useState(false);
   const { skills, isLoading: isSkillsLoading } = useSkills();
   const { models, isLoading: isModelsLoading } = useModels();
@@ -448,20 +451,34 @@ export default function NewAgentPage() {
                         {enabledSkills.map((skill) => {
                           const checked = selectedSkills.includes(skill.name);
                           return (
-                            <Button
+                            <div
                               key={skill.name}
-                              type="button"
-                              size="sm"
-                              variant={checked ? "default" : "outline"}
-                              onClick={() => toggleSkill(skill)}
-                              title={skill.description}
-                              className={cn(
-                                "h-8 max-w-full",
-                                !checked && "text-muted-foreground",
-                              )}
+                              className="inline-flex max-w-full items-center"
                             >
-                              <span className="truncate">{skill.name}</span>
-                            </Button>
+                              <Button
+                                type="button"
+                                size="sm"
+                                variant={checked ? "default" : "outline"}
+                                onClick={() => toggleSkill(skill)}
+                                title={skill.description}
+                                className={cn(
+                                  "h-8 max-w-[200px] rounded-r-none",
+                                  !checked && "text-muted-foreground",
+                                )}
+                              >
+                                <span className="truncate">{skill.name}</span>
+                              </Button>
+                              <Button
+                                type="button"
+                                size="icon"
+                                variant={checked ? "default" : "outline"}
+                                onClick={() => setDetailSkillName(skill.name)}
+                                title={t.settings.skills.viewDetailAction}
+                                className="h-8 w-7 rounded-l-none border-l-0"
+                              >
+                                <InfoIcon className="size-3.5" />
+                              </Button>
+                            </div>
                           );
                         })}
                       </div>
@@ -469,6 +486,14 @@ export default function NewAgentPage() {
                   </div>
                 </div>
 
+                <SkillDetailDialog
+                  skillName={detailSkillName}
+                  open={detailSkillName !== null}
+                  onOpenChange={(o) => {
+                    if (!o) setDetailSkillName(null);
+                  }}
+                />
+
                 {formError ? (
                   <p className="text-destructive text-sm">{formError}</p>
                 ) : null}