import React, { useState, useEffect, useContext } from "react"; import { Link, Route, Routes, BrowserRouter, useNavigate } from "react-router-dom"; import { CookiesProvider } from "react-cookie"; import { useCookies } from "react-cookie"; import Workflows from "./views/Workflows.jsx"; import GettingStarted from "./views/GettingStarted.jsx"; import AngularWorkflow from "./views/AngularWorkflow.jsx"; import Header from "./components/NewHeader.jsx"; import HealthPage from "./components/HealthPage.jsx"; //import Header from "./components/Header.jsx"; import theme, { getTheme } from "./theme.jsx"; import Apps from "./views/Apps.jsx"; import Apps2 from "./views/Apps2.jsx"; import AppCreator from "./views/AppCreator.jsx"; import DetectionDashBoard from "./views/DetectionDashboard.jsx"; // LLM related tests import ChatBot from "./components/ChatBot.jsx"; import AgentUI from "./views/AgentUI.jsx"; import Welcome from "./views/Welcome.jsx"; import Dashboard from "./views/Dashboard.jsx"; import DashboardView from "./views/DashboardViews.jsx"; import NewDashboard from "./views/NewDashboard.jsx"; import AdminSetup from "./views/AdminSetup.jsx"; import Admin from "./views/Admin.jsx"; import Docs from "./views/Docs.jsx"; import Usecases2 from "./views/Usecases2.jsx"; import DashboardViews from "./views/DashboardViews.jsx"; //import Introduction from "./views/Introduction"; import SetAuthentication from "./views/SetAuthentication.jsx"; import SetAuthenticationSSO from "./views/SetAuthenticationSSO.jsx"; import Search from "./views/Search.jsx"; import RunWorkflow from "./views/RunWorkflow.jsx"; import Admin2 from "./views/Admin2.jsx"; import LoginPage from "./views/LoginPage.jsx"; import LoginPageOld from "./views/LoginPageOld.jsx"; import SettingsPage from "./views/SettingsPage.jsx"; import KeepAlive from "./views/KeepAlive.jsx"; import { ThemeProvider } from "@mui/material/styles"; import CssBaseline from '@mui/material/CssBaseline'; import UpdateAuthentication from "./views/UpdateAuthentication.jsx"; import FrameworkWrapper from "./views/FrameworkWrapper.jsx"; import ScrollToTop from "./components/ScrollToTop.jsx"; import AlertTemplate from "./components/AlertTemplate.js"; import { isMobile } from "react-device-detect"; import RuntimeDebugger from "./components/RuntimeDebugger.jsx" import MFASetUp from './components/MFASetUP.jsx'; import ApiExplorerWrapper from './views/ApiExplorerWrapper.jsx'; import LeftSideBar from './components/LeftSideBar.jsx'; import CodeWorkflow from './views/CodeWorkflow.jsx'; import NotFound from './views/404.jsx'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import Drift from "react-driftjs"; import { Context } from './context/ContextApi.jsx'; import Navbar from "./components/Navbar.jsx"; import Workflows2 from "./views/Workflows2.jsx"; import AppExplorer from "./views/AppExplorer.jsx"; // Production - backend proxy forwarding in nginx var globalUrl = window.location.origin; // Change the Shuffle version on UI from here const SHUFFLE_VERSION = "2.2.0" // CORS used for testing purposes. Should only happen with specific port and http if (window.location.port === "3000") { globalUrl = "http://localhost:5001"; //globalUrl = "http://localhost:5002" } // Development on Github Codespaces if (globalUrl.includes("app.github.dev")) { globalUrl = globalUrl.replace("-3000.", "-5001.") globalUrl = globalUrl.replace("-3001.", "-5001.") } const App = (message, props) => { const [userdata, setUserData] = useState({}); const [notifications, setNotifications] = useState([]) const [cookies, setCookie, removeCookie] = useCookies([]) const [isLoggedIn, setIsLoggedIn] = useState(false) const [dataset, setDataset] = useState(false) const [isLoaded, setIsLoaded] = useState(false) const [curpath, setCurpath] = useState(typeof window === "undefined" || window.location === undefined ? "" : window.location.pathname) const { themeMode, handleThemeChange, setBrandColor, brandColor,setThemeMode, setSupportEmail, setLogoutUrl, setBrandName} = useContext(Context); const currentTheme = getTheme(themeMode, brandColor); const mainColor = currentTheme?.palette?.backgroundColor const [isPreviousThemeLight, setIsPreviousThemeLight] = useState(false) useEffect(() => { if (dataset === false) { getUserNotifications(); checkLogin(); setDataset(true); } }, []); useEffect(() => { const isDarkPath = curpath === "/" || curpath === "/pricing" || curpath === "/partners" || curpath === "/faq" || curpath === "/professional-services" || curpath === "/contact" || curpath === "/training"; if (curpath && isDarkPath) { if (themeMode === "light") { setIsPreviousThemeLight(true) } handleThemeChange("dark") }else if ( !isDarkPath && isPreviousThemeLight && userdata?.active_org?.branding?.theme === "light") { handleThemeChange("light") setIsPreviousThemeLight(false) } if (isDarkPath && userdata && userdata?.active_org?.branding?.brand_color !== "#ff8544") { setBrandColor("#ff8544") }else if(!isDarkPath && userdata && userdata?.active_org?.branding?.brand_color !== "#ff8544" && userdata?.active_org?.branding?.brand_color?.length > 0) { const brandColor = localStorage.getItem("brandColor") if (brandColor !== null && brandColor !== undefined && brandColor.length > 0) { setBrandColor(brandColor) } } }, [themeMode, curpath, userdata]) if ( isLoaded && !isLoggedIn && !window.location.pathname.startsWith("/login") && !window.location.pathname.startsWith("/docs") && !window.location.pathname.startsWith("/support") && !window.location.pathname.startsWith("/detectionframework") && !window.location.pathname.startsWith("/appframework") && !window.location.pathname.startsWith("/adminsetup") && !window.location.pathname.startsWith("/usecases") ) { window.location = "/login"; } const getUserNotifications = () => { fetch(`${globalUrl}/api/v1/users/notifications`, { credentials: "include", headers: { "Content-Type": "application/json", }, cors: "cors", }) .then((response) => response.json()) .then((responseJson) => { if ( responseJson.success === true && responseJson.notifications !== null && responseJson.notifications !== undefined && responseJson.notifications.length > 0 ) { //console.log("RESP: ", responseJson) setNotifications(responseJson.notifications); } }) .catch((error) => { console.log("Failed getting notifications for user: ", error); }); }; useEffect(() => { if (userdata && userdata?.org_status?.includes("integration_partner") && userdata?.active_org?.image) { const existingLinks = document.querySelectorAll("link[rel*='icon']"); existingLinks.forEach(link => link.parentNode.removeChild(link)); const newLink = document.createElement('link'); newLink.rel = 'icon'; newLink.type = 'image/x-icon'; try { if (typeof userdata.active_org.image === 'string') { if (userdata.active_org.image.startsWith('data:')) { newLink.href = userdata.active_org.image; } else if (userdata.active_org.image.startsWith('/')) { newLink.href = userdata.active_org.image; } else { let mimeType = 'image/png'; newLink.href = `data:${mimeType};base64,${userdata.active_org.image}`; } } else { console.error("Image data is not in expected format:", userdata.active_org.image); return; } // Add the new favicon link to head document.head.appendChild(newLink); const iframe = document.createElement('iframe'); iframe.style.display = 'none'; document.body.appendChild(iframe); iframe.contentDocument.write(''); setTimeout(() => { document.body.removeChild(iframe); }, 100); } catch (error) { console.error("Error updating favicon:", error); } } }, [userdata]); const checkLogin = () => { var baseurl = globalUrl; fetch(`${globalUrl}/api/v1/getinfo`, { credentials: "include", headers: { "Content-Type": "application/json", }, }) .then((response) => response.json()) .then((responseJson) => { var userInfo = {}; if (responseJson.success === true) { //console.log("USER: ", responseJson); if (responseJson?.switch_parent === true) { toast.info(responseJson.reason) setTimeout(() => { window.location.reload(); }, 3000); return } userInfo = responseJson; setIsLoggedIn(true); //console.log("Cookies: ", cookies) // Updating cookie every request for (var key in responseJson["cookies"]) { setCookie( responseJson["cookies"][key].key, responseJson["cookies"][key].value, { path: "/" } ); } if (responseJson?.org_status?.includes("integration_partner")) { if (responseJson?.active_org?.branding?.enable_chat !== true) { // Find the drift chatbox and remove it } if (responseJson?.active_org?.branding?.theme?.length > 0 ) { handleThemeChange(responseJson?.active_org?.branding?.theme) } if (responseJson?.active_org?.branding?.brand_color?.length > 0 ) { setBrandColor(responseJson?.active_org?.branding?.brand_color) localStorage.setItem("brandColor", responseJson?.active_org?.branding?.brand_color) } if (responseJson?.active_org?.branding?.brand_name?.length > 0 ) { setBrandName(responseJson?.active_org?.branding?.brand_name) localStorage.setItem("brandName", responseJson?.active_org?.branding?.brand_name) } if (responseJson?.active_org?.branding?.support_email?.length > 0 ) { setSupportEmail(responseJson?.active_org?.branding?.support_email) } if (responseJson?.active_org?.branding?.logout_url?.length > 0 ) { setLogoutUrl(responseJson?.active_org?.branding?.logout_url) } } else { localStorage.removeItem("brandColor") setBrandColor("#ff8544") setBrandName("Shuffle") localStorage.removeItem("brandName") if(responseJson?.theme?.length > 0){ handleThemeChange(responseJson?.theme) }else{ handleThemeChange("dark") } } }else { handleThemeChange("dark") setThemeMode("dark") localStorage.removeItem("theme"); } // Handling Ethereum update //console.log("USER: ", userInfo) setUserData(userInfo); setIsLoaded(true); }) .catch((error) => { setIsLoaded(true); }); }; // Dumb for content load (per now), but good for making the site not suddenly reload parts (ajax thingies) const handleFirstInteraction = (event) => { console.log("First interaction: ", event) } const includedData =
{!isLoaded ? null : userdata.chat_disabled === true ? null : } { window?.location?.pathname === "/" || window?.location?.pathname === "/training" || !(isLoggedIn && isLoaded) ? (
{/*
*/}
) : (
) } {/*
*/} } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> {userdata.id !== undefined ? ( } /> ) : null} } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } />
return ( {includedData} ); }; export default App;