implement mobile styles for agent skills ui

frontend/src/components/ContextualSaveBar/index.jsx

@@ -2,8 +2,8 @@ import { Warning } from "@phosphor-icons/react";
 
 export default function ContextualSaveBar({ onSave, onCancel }) {
   return (
-    <div className="fixed top-0 left-0 right-0 h-14 bg-[#18181B] flex items-center justify-end px-4 z-[9999]">
-      <div className="absolute left-1/2 transform -translate-x-1/2 flex items-center gap-x-2">
+    <div className="fixed top-0 left-0 right-0 h-14 bg-[#18181B] flex items-center justify-end px-4 z-[999]">
+      <div className="absolute ml-4 left-0 md:left-1/2 transform md:-translate-x-1/2 flex items-center gap-x-2">
         <Warning size={18} className="text-white" />
         <p className="text-white font-medium text-xs">Unsaved Changes</p>
       </div>

frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx

@@ -74,7 +74,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
   // to the parent container form so we don't have nested forms.
   return createPortal(
     <ModalWrapper isOpen={isOpen}>
-      <div className="relative w-1/3 max-h-full ">
+      <div className="relative w-full max-w-2xl max-h-full">
         <div className="relative bg-main-gradient rounded-xl shadow-[0_4px_14px_rgba(0,0,0,0.25)] max-h-[90vh] overflow-y-scroll no-scroll">
           <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
             <h3 className="text-xl font-semibold text-white">
@@ -114,7 +114,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
                 <label className="text-white text-sm font-semibold block my-4">
                   Select your SQL engine
                 </label>
-                <div className="flex w-full flex-wrap gap-x-4">
+                <div className="grid md:grid-cols-4 gap-4 grid-cols-2">
                   <DBEngine
                     provider="postgresql"
                     active={engine === "postgresql"}
@@ -148,8 +148,8 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
                 />
               </div>
 
-              <div className="flex gap-x-2">
-                <div className="flex flex-col w-60">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <div className="flex flex-col">
                   <label className="text-white text-sm font-semibold block mb-4">
                     Database user
                   </label>
@@ -163,7 +163,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
                     spellCheck={false}
                   />
                 </div>
-                <div className="flex flex-col w-60">
+                <div className="flex flex-col">
                   <label className="text-white text-sm font-semibold block mb-4">
                     Database user password
                   </label>
@@ -179,8 +179,8 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
                 </div>
               </div>
 
-              <div className="flex gap-x-2">
-                <div className="flex flex-col w-full">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                <div className="sm:col-span-2">
                   <label className="text-white text-sm font-semibold block mb-4">
                     Server endpoint
                   </label>
@@ -194,7 +194,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
                     spellCheck={false}
                   />
                 </div>
-                <div className="flex flex-col w-30">
+                <div>
                   <label className="text-white text-sm font-semibold block mb-4">
                     Port
                   </label>
@@ -210,7 +210,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
                 </div>
               </div>
 
-              <div className="flex flex-col w-60">
+              <div className="flex flex-col">
                 <label className="text-white text-sm font-semibold block mb-4">
                   Database
                 </label>
@@ -264,7 +264,7 @@ function DBEngine({ provider, active, onClick }) {
       <img
         src={DB_LOGOS[provider]}
         className="h-[100px] rounded-md"
-        alt="PostgreSQL"
+        alt={provider}
       />
     </button>
   );

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

@@ -16,6 +16,7 @@ import {
   Browser,
   ChartBar,
   FileMagnifyingGlass,
+  CaretLeft,
 } from "@phosphor-icons/react";
 import ContextualSaveBar from "@/components/ContextualSaveBar";
 import { castToType } from "@/utils/types";
@@ -60,7 +61,7 @@ const configurableSkills = {
     skill: "web-browsing",
   },
   "sql-agent": {
-    title: "SQL Connector",
+    title: "SQL Agent",
     component: AgentSQLConnectorSelection,
     skill: "sql-agent",
   },
@@ -83,12 +84,14 @@ const configurableSkills = {
     image: GenerateSaveImages,
   },
 };
+
 export default function AdminAgents() {
   const [hasChanges, setHasChanges] = useState(false);
   const [settings, setSettings] = useState({});
   const [selectedSkill, setSelectedSkill] = useState("");
   const [agentSkills, setAgentSkills] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [showSkillModal, setShowSkillModal] = useState(false);
 
   const formEl = useRef(null);
 
@@ -151,7 +154,6 @@ export default function AdminAgents() {
       }
       data.workspace[key] = castToType(key, value);
     }
-
     const { success } = await Admin.updateSystemPreferences(data.system);
     await System.updateSystem(data.env);
 
@@ -161,6 +163,7 @@ export default function AdminAgents() {
       setSettings({ ..._settings, preferences: _preferences.settings } ?? {});
       setAgentSkills(_preferences.settings?.default_agent_skills ?? []);
       setLoading(false);
+      setShowSkillModal(false);
     }
 
     setLoading(false);
@@ -182,6 +185,164 @@ export default function AdminAgents() {
       </div>
     );
   }
+
+  if (isMobile) {
+    return (
+      <div
+        id="workspace-agent-settings-container"
+        className="w-screen h-screen overflow-hidden bg-sidebar flex mt-6"
+      >
+        <Sidebar />
+        <div
+          style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] w-full h-full flex"
+        >
+          <form
+            onSubmit={handleSubmit}
+            onChange={() => setHasChanges(true)}
+            ref={formEl}
+            className="flex flex-col w-full p-4 mt-10"
+          >
+            {/* Skill settings nav */}
+            <div
+              hidden={!showSkillModal}
+              className="flex flex-col gap-y-[18px]"
+            >
+              <div className="text-white flex items-center gap-x-2">
+                <Robot size={24} />
+                <p className="text-lg font-medium">Agent Skills</p>
+              </div>
+              <div className="text-white/50 text-xs leading-[18px]">
+                Improve the natural abilities of the default agent with these
+                pre-built skills. This set up applies to all workspaces.
+              </div>
+              {/* Default skills */}
+              <div className="bg-white/5 text-white min-w-[360px] w-full rounded-xl">
+                <input
+                  name="system::default_agent_skills"
+                  type="hidden"
+                  value={agentSkills.join(",")}
+                />
+                {Object.entries(defaultSkills).map(
+                  ([skill, settings], index) => (
+                    <div
+                      key={skill}
+                      className={`py-3 px-4 flex items-center justify-between ${
+                        index === 0 ? "rounded-t-xl" : ""
+                      } ${
+                        index === Object.keys(defaultSkills).length - 1
+                          ? "rounded-b-xl"
+                          : "border-b border-white/10"
+                      } cursor-pointer transition-all duration-300  hover:bg-white/5`}
+                      onClick={() => {
+                        setSelectedSkill(skill);
+                        setShowSkillModal(true);
+                      }}
+                    >
+                      <div className="text-sm font-light">{settings.title}</div>
+                      <div className="flex items-center gap-x-2">
+                        <DefaultBadge title={skill} />
+                        <CaretRight
+                          size={14}
+                          weight="bold"
+                          className="text-white/80"
+                        />
+                      </div>
+                    </div>
+                  )
+                )}
+              </div>
+
+              {/* Configurable skills */}
+              <div className="bg-white/5 text-white min-w-[360px] w-full rounded-xl">
+                {Object.entries(configurableSkills).map(
+                  ([skill, settings], index) => (
+                    <div
+                      key={skill}
+                      className={`py-3 px-4 flex items-center justify-between ${
+                        index === 0 ? "rounded-t-xl" : ""
+                      } ${
+                        index === Object.keys(configurableSkills).length - 1
+                          ? "rounded-b-xl"
+                          : "border-b border-white/10"
+                      } transition-all duration-300 cursor-pointer hover:bg-white/5`}
+                      onClick={() => {
+                        setSelectedSkill(skill);
+                        setShowSkillModal(true);
+                      }}
+                    >
+                      <div className="text-sm font-light">{settings.title}</div>
+                      <div className="flex items-center gap-x-2">
+                        <div className="text-sm text-white/60 font-medium">
+                          {agentSkills.includes(settings.skill) ? "On" : "Off"}
+                        </div>
+                        <CaretRight
+                          size={14}
+                          weight="bold"
+                          className="text-white/80"
+                        />
+                      </div>
+                    </div>
+                  )
+                )}
+              </div>
+            </div>
+
+            {/* Selected agent skill modal */}
+            {showSkillModal && (
+              <div className="fixed top-0 left-0 w-full h-full bg-sidebar z-30">
+                <div className="flex flex-col h-full">
+                  <div className="flex items-center p-4">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setShowSkillModal(false);
+                        setSelectedSkill("");
+                      }}
+                      className="text-white/60 hover:text-white transition-colors duration-200"
+                    >
+                      <div className="flex items-center text-sky-400">
+                        <CaretLeft size={24} />
+                        <div>Back</div>
+                      </div>
+                    </button>
+                  </div>
+                  <div className="flex-1 overflow-y-auto p-4">
+                    <div className="bg-[#303237] text-white rounded-xl p-4">
+                      {SelectedSkillComponent ? (
+                        <SelectedSkillComponent
+                          skill={configurableSkills[selectedSkill]?.skill}
+                          settings={settings}
+                          toggleSkill={toggleAgentSkill}
+                          enabled={agentSkills.includes(
+                            configurableSkills[selectedSkill]?.skill
+                          )}
+                          setHasChanges={setHasChanges}
+                          {...(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>
+            )}
+          </form>
+          {hasChanges && (
+            <ContextualSaveBar
+              onSave={handleSubmit}
+              onCancel={() => setHasChanges(false)}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
   return (
     <div
       id="workspace-agent-settings-container"