🔄 update: Adjust Dockerfile and frontend components

frontend/Dockerfile

@@ -5,4 +5,3 @@ RUN npm install
 COPY . .
 EXPOSE 3000
 CMD ["npm", "start"]
-

frontend/src/components/Modal/importer.js

@@ -1,8 +1,8 @@
 import { Modal, Icon, Message} from 'semantic-ui-react'
-import {ReactComponent as Gradio} from '../../../src/images/gradio.svg'
-import {ReactComponent as Streamlit} from '../../../src/images/streamlit.svg'
-import {ReactComponent as Exit} from '../../../src/images/exit.svg'
-import {ReactComponent as Proxmox} from '../../../src/images/proxmox.svg' 
+import {ReactComponent as Gradio} from '../../images/gradio.svg'
+import {ReactComponent as Streamlit} from '../../images/streamlit.svg'
+import {ReactComponent as Exit} from '../../images/exit.svg'
+import {ReactComponent as Proxmox} from '../../images/proxmox.svg' 
 import { useState } from 'react'
 import {BsSearch} from 'react-icons/bs';
 

frontend/src/components/Navagation/navbar.js

@@ -60,7 +60,8 @@ export default class Navbar extends Component{
         const pattern = {
             local : new RegExp('^https?://(localhost)(:[0-9]+)?(/)?$'),
             share : new RegExp('^https?://(?:[a-zA-Z0-9]+\\.gradio\\.live)/?$'),
-            huggingFace: new RegExp('^https?://([a-zA-Z0-9-]+\\.hf\\.space)/?$')
+            huggingFace: new RegExp('^https?://([a-zA-Z0-9-]+\\.hf\\.space)/?$'),
+            proxmoxVNC: new RegExp('^wss?://([a-zA-Z0-9-]+\\.yourdomain\\.com)/?$') // Regex pattern for Proxmox VNC URLs
         } 
 
         if (this.state.name.length > 20 ||
@@ -69,7 +70,8 @@ export default class Navbar extends Component{
             this.state.text.includes(" ") || 
             (!pattern.local.test(this.state.text) &&
             !pattern.share.test(this.state.text) &&
-            !pattern.hugginFace.test(this.state.text))){
+            !pattern.huggingFace.test(this.state.text) &&
+            !pattern.proxmoxVNC.test(this.state.text))){
             
                 this.setState({
                     'text': '',
@@ -85,6 +87,26 @@ export default class Navbar extends Component{
           }).catch((err)=> this.setState({'text': '','name' : '', 'error' : true,}))
     }
 
+    /**
+     * Render a tab for the Proxmox VNC that can be dragged into React Flow
+     */
+    renderProxmoxVncTab = () => {
+        // Assuming the Proxmox VNC tab information is stored in the state
+        const { proxmoxVncInfo } = this.state;
+        if (!proxmoxVncInfo) return null; // If no Proxmox VNC info, don't render anything
+
+        return (
+            <li onDragStart={(event) => this.onDragStart(event, 'proxmoxVNC', proxmoxVncInfo, -1)} 
+                className="text-white text-md flex flex-col text-center items-center cursor-grab shadow-lg p-5 px-2 mt-4 rounded-md hover:animate-pulse"
+                draggable>
+                <div className="absolute -mt-2 text-4xl opacity-60 z-10">{random_emoji()}</div>
+                <h4 className="max-w-full font-sans text-blue-50 leading-tight font-bold text-xl flex-1 z-20" style={{"textShadow": "0px 1px 2px rgba(0, 0, 0, 0.25)"}}>
+                    Proxmox VNC
+                </h4>
+            </li>
+        );
+    }
+
     /**
      * error check the user input
      * @param {*} bool boolean of the current state of the modal  
@@ -239,3 +261,4 @@ export default class Navbar extends Component{
         </div>)
     }
 }
+

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -67,6 +67,13 @@ export default function ReactEnviorment() {
       });
       const data = await response.json();
       // Use data.iframe_src to create a new node in React Flow
+      const newNode = {
+        id: `proxmox-vnc-${nodes.length + 1}`,
+        type: 'custom',
+        position: reactFlowInstance.project({ x: 0, y: 0 }),
+        data: { label: `Proxmox VM ${vmid}`, url: data.iframe_src },
+      };
+      setNodes((nds) => nds.concat(newNode));
     };
 
     const handleAddEmbed = useCallback((embedData) => {