Patch UI bug with agent skill web-search and sql-connector (#2282)

* Patch UI bug with agent skill

* wrap call in try/catch for failures
res?. optional call for settings since null is default

* uncheck

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

-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import DBConnection from "./DBConnection";
 import { Plus, Database } from "@phosphor-icons/react";
 import NewSQLConnection from "./NewConnectionModal";
 import { useModal } from "@/hooks/useModal";
 import SQLAgentImage from "@/media/agents/sql-agent.png";
+import Admin from "@/models/admin";
 
 export default function AgentSQLConnectorSelection({
   skill,
-  settings,
+  settings, // unused.
   toggleSkill,
   enabled = false,
   setHasChanges,
 }) {
   const { isOpen, openModal, closeModal } = useModal();
-  const [connections, setConnections] = useState(
-    settings?.preferences?.agent_sql_connections || []
-  );
+  const [connections, setConnections] = useState([]);
+  useEffect(() => {
+    Admin.systemPreferencesByFields(["agent_sql_connections"])
+      .then((res) => setConnections(res?.settings?.agent_sql_connections ?? []))
+      .catch(() => setConnections([]));
+  }, []);
+
   return (
     <>
       <div className="p-2">

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

 import React, { useEffect, useRef, useState } from "react";
+import Admin from "@/models/admin";
 import AnythingLLMIcon from "@/media/logo/anything-llm-icon.png";
 import GoogleSearchIcon from "./icons/google.png";
 import SearchApiIcon from "./icons/searchapi.png";
@@ -119,8 +120,12 @@ export default function AgentWebSearchSelection({
   }, [searchQuery, selectedProvider]);
 
   useEffect(() => {
-    setSelectedProvider(settings?.preferences?.agent_search_provider ?? "none");
-  }, [settings?.preferences?.agent_search_provider]);
+    Admin.systemPreferencesByFields(["agent_search_provider"])
+      .then((res) =>
+        setSelectedProvider(res?.settings?.agent_search_provider ?? "none")
+      )
+      .catch(() => setSelectedProvider("none"));
+  }, []);
 
   const selectedSearchProviderObject = SEARCH_PROVIDERS.find(
     (provider) => provider.value === selectedProvider