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 (
+
+
+
+