Check browser compat and display error if not supported

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",

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",

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 (
+      <Box maw={600}>
+        <Text m='xl' size={12}>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:</Text>
+        <List m='xl' size={12}>
+          <List.Item>Google Chrome</List.Item>
+          <List.Item>Mozilla Firefox</List.Item>
+        </List>
+  
+        <Text m='xl' size={12}>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. 😊</Text>
+        <Text m='xl' size={12}>If you have any questions or need assistance, please don't hesitate to reach out on our <a href="https://github.com/ianarawjo/ChainForge/issues">GitHub</a> by <a href="https://github.com/ianarawjo/ChainForge/issues">opening an Issue.</a> 
+        &nbsp; (If you're a web developer, consider forking our repository and making a <a href="https://github.com/ianarawjo/ChainForge/pulls">Pull Request</a> to support your particular browser.)</Text>
+      </Box>
+    );
+  }
+  else return (
     <div>
       <GlobalSettingsModal ref={settingsModal} />
       <AlertModal ref={alertModal} />