WIP save bar/agent styles

frontend/src/components/ContextualSaveBar/index.jsx

@@ -0,0 +1,26 @@
+import { Warning } from "@phosphor-icons/react";
+
+export default function ContextualSaveBar({ onSave, onCancel }) {
+  return (
+    <div className="fixed bottom-0 left-0 right-0 h-14 bg-[#18181B] flex items-center justify-end px-4">
+      <div className="absolute left-1/2 transform -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>
+      <div className="flex items-center gap-x-2">
+        <button
+          className="text-white font-medium text-sm px-[10px] py-[6px] rounded-md bg-white/5 hover:bg-white/10"
+          onClick={onCancel}
+        >
+          Cancel
+        </button>
+        <button
+          className="text-[#222628] font-medium text-sm px-[10px] py-[6px] rounded-md bg-[#46C8FF] hover:bg-[#3DB5E8]"
+          onClick={onSave}
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -8,6 +8,7 @@ import AgentWebSearchSelection from "./WebSearchSelection";
 import AgentSQLConnectorSelection from "./SQLConnectorSelection";
 import GenericSkill from "./GenericSkill";
 import { CaretRight, Robot } from "@phosphor-icons/react";
+import ContextualSaveBar from "@/components/ContextualSaveBar";
 
 const defaultSkills = {
   "rag-memory": {
@@ -133,7 +134,7 @@ export default function AdminAgents() {
                   }`}
                   onClick={() => setSelectedSkill(skill)}
                 >
-                  <div className="text-sm">{settings.title}</div>
+                  <div className="text-sm font-light">{settings.title}</div>
                   <CaretRight
                     size={14}
                     weight="bold"
@@ -160,7 +161,7 @@ export default function AdminAgents() {
                     }`}
                     onClick={() => setSelectedSkill(skill)}
                   >
-                    <div className="text-sm">{settings.title}</div>
+                    <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">
                         {settings.enabled ? "On" : "Off"}
@@ -201,6 +202,12 @@ export default function AdminAgents() {
             </div>
           </div>
         </div>
+        {hasChanges && (
+          <ContextualSaveBar
+            onSave={handleSubmit}
+            onCancel={() => setHasChanges(false)}
+          />
+        )}
       </div>
     </div>
   );