WIP rework new agent skill UI

frontend/src/pages/Admin/Agents/index.jsx

@@ -7,55 +7,57 @@ import CTAButton from "@/components/lib/CTAButton";
 import AgentWebSearchSelection from "./WebSearchSelection";
 import AgentSQLConnectorSelection from "./SQLConnectorSelection";
 import GenericSkill from "./GenericSkill";
+import { CaretRight, Robot } from "@phosphor-icons/react";
 
-const skillComponents = {
+const defaultSkills = {
-  "web-search": AgentWebSearchSelection,
-  "sql-connector": AgentSQLConnectorSelection,
-  "rag-memory": GenericSkill,
-  "view-summarize": GenericSkill,
-  "scrape-websites": GenericSkill,
-  "create-chart": GenericSkill,
-  "save-file": GenericSkill,
-};
-
-const skillSettings = {
-  "web-search": {
-    title: "Web Search",
-  },
-  "sql-connector": {
-    title: "SQL Connector",
-  },
   "rag-memory": {
     title: "RAG & long-term memory",
     description:
       'Allow the agent to leverage your local documents to answer a query or ask the agent to "remember" pieces of content for long-term memory retrieval.',
     enabled: true,
-    disabled: true,
+    component: GenericSkill,
   },
   "view-summarize": {
     title: "View & summarize documents",
     description:
       "Allow the agent to list and summarize the content of workspace files currently embedded.",
     enabled: true,
-    disabled: true,
+    component: GenericSkill,
   },
   "scrape-websites": {
     title: "Scrape websites",
     description: "Allow the agent to visit and scrape the content of websites.",
     enabled: true,
-    disabled: true,
+    component: GenericSkill,
+  },
+};
+
+const configurableSkills = {
+  "web-search": {
+    title: "Web Search",
+    component: AgentWebSearchSelection,
+    enabled: true,
+  },
+  "sql-connector": {
+    title: "SQL Connector",
+    component: AgentSQLConnectorSelection,
+    enabled: true,
   },
   "create-chart": {
     title: "Generate charts",
     description:
       "Enable the default agent to generate various types of charts from data provided or given in chat.",
     skill: "create-chart",
+    component: GenericSkill,
+    enabled: true,
   },
   "save-file": {
     title: "Generate & save files to browser",
     description:
       "Enable the default agent to generate and write to files that save and can be downloaded in your browser.",
     skill: "save-file-to-browser",
+    component: GenericSkill,
+    enabled: true,
   },
 };
 
@@ -63,7 +65,7 @@ export default function AdminAgents() {
   const [saving, setSaving] = useState(false);
   const [hasChanges, setHasChanges] = useState(false);
   const [settings, setSettings] = useState({});
-  const [selectedSkill, setSelectedSkill] = useState("web-search");
+  const [selectedSkill, setSelectedSkill] = useState("");
   const [agentSkills, setAgentSkills] = useState([]);
 
   const handleSubmit = async (e) => {
@@ -82,6 +84,7 @@ export default function AdminAgents() {
     async function fetchSettings() {
       const _settings = await Admin.systemPreferences();
       setSettings(_settings?.settings ?? {});
+      console.log("default_agent_skills", _settings?.settings);
       setAgentSkills(_settings?.settings?.default_agent_skills ?? []);
     }
     fetchSettings();
@@ -96,66 +99,108 @@ export default function AdminAgents() {
     });
   }
 
-  const SelectedSkillComponent = skillComponents[selectedSkill];
+  const SelectedSkillComponent =
+    configurableSkills[selectedSkill]?.component ||
+    defaultSkills[selectedSkill]?.component;
 
   return (
     <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full flex flex-col"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] w-full h-full flex"
       >
-        <form
+        <div className="flex-1 flex gap-x-6 p-4 mt-10">
-          onSubmit={handleSubmit}
+          {/* Skill settings nav */}
-          className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16 flex-grow"
+          <div className="flex flex-col gap-y-[18px]">
-        >
+            <div className="text-white flex items-center gap-x-2">
-          <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+              <Robot size={24} />
-            <div className="items-center">
+              <p className="text-lg font-medium">Agent Skills</p>
-              <p className="text-lg leading-6 font-bold text-white">
-                Available Agents
-              </p>
             </div>
-            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+            {/* Default skills */}
-              Improve the natural abilities of the default agent with these
+            <div className="bg-white/5 text-white min-w-[360px] w-fit rounded-xl">
-              pre-built skills. This setup applies to all workspaces.
+              {Object.entries(defaultSkills).map(([skill, settings], index) => (
-            </p>
+                <div
-          </div>
-          {hasChanges && (
-            <div className="flex justify-end">
-              <CTAButton type="submit" className="mt-3 mr-0">
-                {saving ? "Saving..." : "Save changes"}
-              </CTAButton>
-            </div>
-          )}
-          <div className="bg-[#222628] rounded-lg mt-5 flex flex-grow overflow-y-scroll">
-            <div className="w-1/4 min-w-[200px] p-5 flex flex-col gap-y-2">
-              {Object.keys(skillComponents).map((skill) => (
-                <button
                   key={skill}
-                  type="button"
+                  className={`py-3 px-4 flex items-center justify-between ${
-                  className={`text-white w-full justify-start flex text-sm ${
+                    index === 0 ? "rounded-t-xl" : ""
-                    selectedSkill === skill ? "bg-white/10 font-semibold" : ""
+                  } ${
+                    index === Object.keys(defaultSkills).length - 1
+                      ? "rounded-b-xl"
+                      : "border-b border-white/10"
+                  } cursor-pointer transition-all duration-300  hover:bg-white/10 ${
+                    selectedSkill === skill ? "bg-white/20" : ""
                   }`}
                   onClick={() => setSelectedSkill(skill)}
                 >
-                  {skillSettings[skill]?.title || skill}
+                  <div className="text-sm">{settings.title}</div>
-                </button>
+                  <CaretRight
+                    size={14}
+                    weight="bold"
+                    className="text-white/80"
+                  />
+                </div>
               ))}
             </div>
-            <div className="w-[2px] bg-white/20 mx-4" />
+
-            <div className="w-3/4 flex-grow p-6">
+            {/* Configurable skills */}
-              <SelectedSkillComponent
+            <div className="bg-white/5 text-white min-w-[360px] w-fit rounded-xl">
-                skill={selectedSkill}
+              {Object.entries(configurableSkills).map(
-                settings={settings}
+                ([skill, settings], index) => (
-                toggleSkill={toggleAgentSkill}
+                  <div
-                enabled={agentSkills.includes(
+                    key={skill}
-                  skillSettings[selectedSkill]?.skill
+                    className={`py-3 px-4 flex items-center justify-between ${
-                )}
+                      index === 0 ? "rounded-t-xl" : ""
-                {...skillSettings[selectedSkill]}
+                    } ${
-              />
+                      index === Object.keys(configurableSkills).length - 1
+                        ? "rounded-b-xl"
+                        : "border-b border-white/10"
+                    } transition-all duration-300 cursor-pointer hover:bg-white/10 ${
+                      selectedSkill === skill ? "bg-white/20" : ""
+                    }`}
+                    onClick={() => setSelectedSkill(skill)}
+                  >
+                    <div className="text-sm">{settings.title}</div>
+                    <div className="flex items-center gap-x-2">
+                      <div className="text-sm text-white/60 font-medium">
+                        {settings.enabled ? "On" : "Off"}
+                      </div>
+
+                      <CaretRight
+                        size={14}
+                        weight="bold"
+                        className="text-white/80"
+                      />
+                    </div>
+                  </div>
+                )
+              )}
             </div>
           </div>
-        </form>
+
+          {/* Selected agent skill */}
+          <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
+            <div className="bg-[#303237] text-white rounded-xl flex-1 p-4">
+              {SelectedSkillComponent ? (
+                <SelectedSkillComponent
+                  skill={selectedSkill}
+                  settings={settings}
+                  toggleSkill={toggleAgentSkill}
+                  enabled={agentSkills.includes(
+                    configurableSkills[selectedSkill]?.skill
+                  )}
+                  {...(configurableSkills[selectedSkill] ||
+                    defaultSkills[selectedSkill])}
+                />
+              ) : (
+                <div className="flex flex-col items-center justify-center h-full text-white/60">
+                  <Robot size={40} />
+                  <p className="font-medium">Select an agent skill</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );