diff --git a/chainforge/react-server/package-lock.json b/chainforge/react-server/package-lock.json index c797303..70b15c7 100644 --- a/chainforge/react-server/package-lock.json +++ b/chainforge/react-server/package-lock.json @@ -74,6 +74,7 @@ "react-ace": "^10.1.0", "react-beautiful-dnd": "^13.1.1", "react-csv": "^2.2.2", + "react-device-detect": "^2.2.3", "react-dom": "^18.2.0", "react-edit-text": "^5.1.0", "react-flow-renderer": "^10.3.17", @@ -20210,6 +20211,18 @@ "node": ">=8" } }, + "node_modules/react-device-detect": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz", + "integrity": "sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==", + "dependencies": { + "ua-parser-js": "^1.0.33" + }, + "peerDependencies": { + "react": ">= 0.14.0", + "react-dom": ">= 0.14.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -23043,6 +23056,24 @@ "node": ">=14.17" } }, + "node_modules/ua-parser-js": { + "version": "1.0.35", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.35.tgz", + "integrity": "sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/ua-parser-js" + }, + { + "type": "paypal", + "url": "https://paypal.me/faisalman" + } + ], + "engines": { + "node": "*" + } + }, "node_modules/uc.micro": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", diff --git a/chainforge/react-server/package.json b/chainforge/react-server/package.json index d76f7f6..9042517 100644 --- a/chainforge/react-server/package.json +++ b/chainforge/react-server/package.json @@ -69,6 +69,7 @@ "react-ace": "^10.1.0", "react-beautiful-dnd": "^13.1.1", "react-csv": "^2.2.2", + "react-device-detect": "^2.2.3", "react-dom": "^18.2.0", "react-edit-text": "^5.1.0", "react-flow-renderer": "^10.3.17", diff --git a/chainforge/react-server/src/App.js b/chainforge/react-server/src/App.js index 1e1fd2e..2aaa9a0 100644 --- a/chainforge/react-server/src/App.js +++ b/chainforge/react-server/src/App.js @@ -9,7 +9,7 @@ import ReactFlow, { useViewport, setViewport, } from 'react-flow-renderer'; -import { Button, Menu, LoadingOverlay } from '@mantine/core'; +import { Button, Menu, LoadingOverlay, Text, Box, List } from '@mantine/core'; import { IconSettings, IconTextPlus, IconTerminal, IconCsv, IconSettingsAutomation } from '@tabler/icons-react'; import TextFieldsNode from './TextFieldsNode'; // Import a custom node import PromptNode from './PromptNode'; @@ -32,6 +32,10 @@ import fetch_from_backend from './fetch_from_backend'; import StorageCache from './backend/cache'; import { APP_IS_RUNNING_LOCALLY } from './backend/utils'; +// Device / Browser detection +import { isMobile, isChrome, isFirefox } from 'react-device-detect'; +const IS_ACCEPTED_BROWSER = (isChrome || isFirefox) && !isMobile; + const selector = (state) => ({ nodes: state.nodes, edges: state.edges, @@ -444,7 +448,23 @@ const App = () => { }; }, []); - return ( + if (!IS_ACCEPTED_BROWSER) { + return ( + + We're sorry, but it seems like {isMobile ? "you are viewing ChainForge on a mobile device" : "your current browser isn't supported by the current version of ChainForge"} 😔. + We want to provide you with the best experience possible, so we recommend {isMobile ? "viewing ChainForge on a desktop browser" : ""} using one of our supported browsers listed below: + + Google Chrome + Mozilla Firefox + + + These browsers offer enhanced compatibility with ChainForge's features. Don't worry, though! We're working to expand our browser support to ensure everyone can enjoy our platform. 😊 + If you have any questions or need assistance, please don't hesitate to reach out on our GitHub by opening an Issue. +   (If you're a web developer, consider forking our repository and making a Pull Request to support your particular browser.) + + ); + } + else return (