🔧 Update navbar and ReactFlowEnv components, 📸 Add new chatty image

frontend/src/components/Navagation/navbar.js

@@ -5,31 +5,31 @@ import { random_colour, random_emoji } from "../../helper/visual";
 
 import "../../css/dist/output.css"
 
-import { BsArrowLeftShort } from 'react-icons/bs';
-import { ReactComponent as ReactLogo } from '../../images/logo.svg'
-import chattyImage from '../../images/chatty.png';
+import {BsArrowLeftShort} from 'react-icons/bs';
+import {ReactComponent as ReactLogo} from '../../images/logo.svg'
+import chattyImage from '../../images/chatty.png'; // Import the image
 
-export default class Navbar extends Component {
-    constructor(props) {
-        super(props)
+export default class Navbar extends Component{
+    constructor(props){
+        super(props) 
         this.temp_host = 0
         this.deleteNode = props.onDelete
         this.state = {
-            open: true,
-            menu: [],
-            colour: props.colour || [],
-            text: "",
-            name: "",
-            emoji: props.emoji || [],
-            mode: false,
-            modal: false,
-            error: false
-        }
-
+            open : true,
+            menu : [],
+            colour : props.colour || [],
+            text : "",
+            name : "",
+            emoji : props.emoji || [],
+            mode : false,
+            modal : false,
+            error : false
+           }
+       
     }
 
-    componentDidMount() {
-        this.fetch_classes()
+    componentDidMount(){
+        this.fetch_classes()   
 
     }
 
@@ -39,17 +39,17 @@ export default class Navbar extends Component {
      */
     fetch_classes = async () => {
         try {
-            setInterval(async () => {
-                await fetch("http://localhost:2000/api/open/ports", { method: 'GET', mode: 'cors', })
-                    .then(response => response.json())
-                    .then(data => {
-                        this.handelTabs(this.state.menu, data, data)
-                        this.setState({ menu: data })
-                    })
-                    .catch(error => { console.log(error) })
-
-            }, 1000);
-        } catch (e) {
+        setInterval( async () => {
+            await fetch("http://localhost:2000/api/open/ports", { method: 'GET', mode : 'cors',})
+                .then(response => response.json())
+                .then(data => {
+                    this.handelTabs(this.state.menu,data, data)
+                    this.setState({menu : data})
+                })
+                .catch(error => {console.log(error)})
+    
+        },1000);    
+        }catch(e){
             console.log(e)
         }
     }
@@ -59,34 +59,33 @@ export default class Navbar extends Component {
      */
     appendStreamNode = async (type) => {
         const pattern = {
-            local: new RegExp('^https?://(localhost)(:[0-9]+)?(/)?$'),
-            share: new RegExp('^https?://(?:[a-zA-Z0-9]+\\.gradio\\.live)/?$'),
+            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)/?$'),
             proxmoxVNC: new RegExp('^wss?://([a-zA-Z0-9-]+\\.yourdomain\\.com)/?$') // Regex pattern for Proxmox VNC URLs
-        }
+        } 
 
         if (this.state.name.length > 20 ||
-            this.state.text === "" ||
-            this.state.menu.findIndex(element => { return element.name.toLowerCase() === this.state.name.toLowerCase() || element.host.includes(this.state.text) }) !== -1 ||
-            this.state.text.includes(" ") ||
+            this.state.text === ""||
+            this.state.menu.findIndex(element => {return element.name.toLowerCase() === this.state.name.toLowerCase() || element.host.includes(this.state.text) }) !== -1 ||
+            this.state.text.includes(" ") || 
             (!pattern.local.test(this.state.text) &&
-                !pattern.share.test(this.state.text) &&
-                !pattern.huggingFace.test(this.state.text) &&
-                !pattern.proxmoxVNC.test(this.state.text))) {
-
-            this.setState({
-                'text': '',
-                'name': '',
-                'error': true
-            })
-            return
-        }
-        fetch(this.state.text, { method: "GET", mode: 'no-cors' }).then((re) => {
-            fetch("http://localhost:2000/api/append/port", { method: 'POST', mode: 'cors', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ file: "", kwargs: { type: type }, name: this.state.name === "" ? `temp_class_${this.temp_host++}` : `${this.state.name}`, port: 0, host: this.state.text }) }).then(resp => {
-                this.setState({ 'text': "", 'name': "", 'error': false, 'modal': false })
-
-            }).catch(() => this.setState({ 'text': '', 'name': '', 'error': true, }))
-        }).catch((err) => this.setState({ 'text': '', 'name': '', 'error': true, }))
+            !pattern.share.test(this.state.text) &&
+            !pattern.huggingFace.test(this.state.text) &&
+            !pattern.proxmoxVNC.test(this.state.text))){
+            
+                this.setState({
+                    'text': '',
+                    'name': '',
+                    'error': true})
+                return 
+            } 
+        fetch(this.state.text, {method: "GET", mode: 'no-cors'}).then((re) => {
+            fetch("http://localhost:2000/api/append/port", {method: 'POST', mode : 'cors', headers : { 'Content-Type' : 'application/json' }, body: JSON.stringify({file : "", kwargs : { type : type }, name : this.state.name === "" ?`temp_class_${this.temp_host++}` : `${this.state.name}`, port: 0 , host : this.state.text}) }).then(resp => {
+                this.setState({'text': "",'name' : "",'error' : false,'modal' : false  })
+
+            }).catch(() => this.setState({'text': '', 'name' : '',  'error' : true, }))
+          }).catch((err)=> this.setState({'text': '','name' : '', 'error' : true,}))
     }
 
     /**
@@ -98,11 +97,11 @@ export default class Navbar extends Component {
         if (!proxmoxVncInfo) return null; // If no Proxmox VNC info, don't render anything
 
         return (
-            <li onDragStart={(event) => this.onDragStart(event, 'proxmoxVNC', proxmoxVncInfo, -1)}
+            <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)" }}>
+                <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>
@@ -114,10 +113,8 @@ export default class Navbar extends Component {
      * @param {*} bool boolean of the current state of the modal  
      */
     handelModal = (bool) => {
-        this.setState({
-            'error': !bool ? false : this.state.error,
-            'modal': bool
-        })
+        this.setState({'error' : !bool ? false : this.state.error ,
+                       'modal' : bool})
     }
 
     /**
@@ -129,10 +126,10 @@ export default class Navbar extends Component {
      */
     onDragStart = (event, nodeType, item, index) => {
         event.dataTransfer.setData('application/reactflow', nodeType);
-        event.dataTransfer.setData('application/style', JSON.stringify({ colour: this.state.colour[index], emoji: this.state.emoji[index] }))
-        event.dataTransfer.setData('application/item', JSON.stringify(item))
+        event.dataTransfer.setData('application/style', JSON.stringify({colour : this.state.colour[index], emoji : this.state.emoji[index] }))
+        event.dataTransfer.setData('application/item',  JSON.stringify(item))
         event.dataTransfer.effectAllowed = 'move';
-    };
+      };
 
     /**
      * droped event that occurs when the user drops the Tab within the tash div.
@@ -142,11 +139,11 @@ export default class Navbar extends Component {
      */
     onDragDrop = (e) => {
         e.preventDefault();
-        var item = JSON.parse(e.dataTransfer.getData('application/item'));
-        fetch("http://localhost:2000/api/remove/port", { method: "POST", mode: 'cors', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(item) }).then((re) => {
+        var item  = JSON.parse(e.dataTransfer.getData('application/item'));
+        fetch("http://localhost:2000/api/remove/port", {method : "POST", mode: 'cors', headers : { 'Content-Type' : 'application/json' }, body: JSON.stringify(item) }).then((re)=>{
             this.deleteNode(item.name)
         })
-
+       
     }
 
     /**
@@ -161,37 +158,37 @@ export default class Navbar extends Component {
         var c = []
         var j = []
         if (d.length - e.length === 0) return
-        else if (d.length - e.length < 0) {
+        else if(d.length - e.length < 0){
             var a = this.state.menu.filter(item => e.includes(item)) // get the items not in menu anymore
             c = this.state.colour
             j = this.state.emoji
-            for (var k = 0; k < d.length; k++) {
+            for(var k=0; k < d.length; k++){
                 c.splice(this.state.menu.indexOf(a[k]), 1)
                 j.splice(this.state.menu.indexOf(a[k]), 1)
             }
-            this.setState({ 'colour': c, 'emoji': j })
-        } else {
+            this.setState({'colour' : c, 'emoji' : j})
+        }else{
             //append new colours
-            for (var i = 0; i < d.length; i++) {
-                c.push(random_colour(i === 0 ? null : c[i - 1]));
-                j.push(random_emoji(i === 0 ? null : c[i - 1]));
-
+            for(var i =0; i < d.length; i++){
+                    c.push(random_colour(i === 0 ? null : c[i-1]));
+                    j.push(random_emoji(i === 0 ? null : c[i-1]));
+                
             }
             const colour = [...this.state.colour]
-            const emoji = [...this.state.emoji]
-            this.setState({ 'colour': [...colour, ...c], 'emoji': [...emoji, ...j], })
+            const emoji  = [...this.state.emoji]
+            this.setState({'colour' : [...colour, ...c], 'emoji' : [...emoji, ...j],})
         }
     }
 
     handelError = (boolean) => {
-        this.setState({ 'error': boolean })
+        this.setState({'error' : boolean})
     }
 
     /**
      * handel navagation open and close function
      */
     handelNavbar = () => {
-        this.setState({ 'open': !this.state.open })
+        this.setState({'open' : !this.state.open})
     }
 
     /**
@@ -200,7 +197,7 @@ export default class Navbar extends Component {
      * @param {*} type : text | name string that set the changed value of the input to the current value 
      */
     updateText = (e, type) => {
-        this.setState({ [`${type}`]: e.target.value })
+        this.setState({[`${type}`] : e.target.value })
     }
 
     /**
@@ -209,62 +206,59 @@ export default class Navbar extends Component {
      * @param {*} index : current index with in the list
      * @returns div component that contians infomation of gradio 
      */
-    subComponents(item, index) {
+    subComponents(item, index){
+        
+        return(<>
+                <li key={`${index}-li`} onDragStart={(event) => this.onDragStart(event, 'custom', item, index)} 
+                    className={` text-white text-md flex flex-col text-center items-center cursor-grab shadow-lg
+                                 p-5 px-2 mt-4 rounded-md ${ this.state.open ? `hover:animate-pulse ${this.state.colour[index] === null ? "" : this.state.colour[index]} ` : `hidden`}  break-all -z-20`} draggable>
 
-        return (<>
-            <li key={`${index}-li`} onDragStart={(event) => this.onDragStart(event, 'custom', item, index)}
-                className={` text-white text-md flex flex-col text-center items-center cursor-grab shadow-lg
-                                 p-5 px-2 mt-4 rounded-md ${this.state.open ? `hover:animate-pulse ${this.state.colour[index] === null ? "" : this.state.colour[index]} ` : `hidden`}  break-all -z-20`} draggable>
+                    <div key={`${index}-div`}  className=" absolute -mt-2 text-4xl opacity-60 z-10 ">{`${this.state.emoji[index] === null ? "" : this.state.emoji[index]}`}</div>    
+                    <h4 key={`${index}-h4`}  className={`  max-w-full font-sans text-blue-50 leading-tight font-bold text-xl flex-1 z-20  ${this.state.open ? "" : "hidden"}`} style={{"textShadow" : "0px 1px 2px rgba(0, 0, 0, 0.25)"}} >{`${item.name}`} </h4>
 
-                <div key={`${index}-div`} className=" absolute -mt-2 text-4xl opacity-60 z-10 ">{`${this.state.emoji[index] === null ? "" : this.state.emoji[index]}`}</div>
-                <h4 key={`${index}-h4`} className={`  max-w-full font-sans text-blue-50 leading-tight font-bold text-xl flex-1 z-20  ${this.state.open ? "" : "hidden"}`} style={{ "textShadow": "0px 1px 2px rgba(0, 0, 0, 0.25)" }} >{`${item.name}`} </h4>
-
-            </li >
+                </li >      
 
         </>)
     }
 
 
-    render() {
-
+    render(){
+        
         return (<div>
-
+        
             <div className={`z-10 flex-1 float-left bg-white dark:bg-stone-900 h-screen p-5 pt-8 ${this.state.open ? "lg:w-72 md:64 sm:w-60" : "w-10"} duration-300 absolute shadow-2xl border-black border-r-[1px] dark:border-white dark:text-white`} >
 
-                <BsArrowLeftShort onClick={this.handelNavbar} className={`  bg-white text-Retro-darl-blue text-3xl rounded-full absolute -right-3 top-9 border border-black cursor-pointer ${!this.state.open && 'rotate-180'} dark:border-white duration-300 dark:text-white dark:bg-stone-900 `} />
-                <div className="inline-flex w-full">
-                    <img src={chattyImage} alt="Chat'nFace Logo" className={`h-12 w-auto ${this.state.open ? "visible" : "hidden"}`} /> {/* Display the image */}
-                    <h1 className={`font-sans font-bold text-lg ${this.state.open ? "" : "hidden"} duration-500 ml-auto mr-auto`}>Chat-nFace</h1>
-                </div>
+            <BsArrowLeftShort onClick={this.handelNavbar} className={`  bg-white text-Retro-darl-blue text-3xl rounded-full absolute -right-3 top-9 border border-black cursor-pointer ${!this.state.open && 'rotate-180'} dark:border-white duration-300 dark:text-white dark:bg-stone-900 `}/>
+
                 <div className="inline-flex w-full">
                     <h1 className={`font-sans font-bold text-lg ${this.state.open ? "" : "hidden"} duration-500 ml-auto mr-auto`}>Chat-nFace</h1>
                 </div>
 
-                <div className={`rounded-md text-center ${this.state.open ? "" : "px-0"} py-3`} onClick={() => { this.handelModal(true) }}>
+                <div className={`rounded-md text-center ${this.state.open ? "" : "px-0"} py-3`} onClick={() => {this.handelModal(true)}}>
                     <div className={` text-center bg-transparent w-full h-10 border border-slate-300 hover:border-Retro-purple hover:animate-pulse border-dashed rounded-md py-2 pl-5 ${this.state.open ? "pr-3" : "hidden"} shadow-sm sm:text-sm`}>
-                        <Icon className=" block mr-auto ml-auto" name="plus" />
+                        <Icon className=" block mr-auto ml-auto" name="plus"/>
                     </div>
                 </div>
-                <Import open={this.state.modal}
-                    quitHandeler={this.handelModal}
-                    textHandler={this.updateText}
-                    appendHandler={this.appendStreamNode}
-                    handelError={this.handelError}
-                    catch={this.state.error} />
-
+                <Import open={this.state.modal} 
+                        quitHandeler={this.handelModal}
+                        textHandler={this.updateText}
+                        appendHandler={this.appendStreamNode}
+                        handelError={this.handelError}
+                        catch={this.state.error}/>
+                
                 <div className=" relative z-10 h-auto overflow-auto pt-4">
                     <ul className="pt-2">
-                        {this.state.menu.map((menu, index) => { return this.subComponents(menu, index) })}
+                    {this.state.menu.map((menu, index) => {return this.subComponents(menu, index)})}
                     </ul>
                 </div>
 
-                <div className={`${this.state.open ? "" : "hidden"} absolute bottom-0 left-0 w-full text-center p-5`} onDragOver={(e) => { e.preventDefault() }} onDrop={(e) => { this.onDragDrop(e) }}>
+                <div className={`${this.state.open ? "" : "hidden"} absolute bottom-0 left-0 w-full text-center p-5`} onDragOver={(e)=> {e.preventDefault()}} onDrop={(e)=>{this.onDragDrop(e)}}>
                     <div className={` text-center bg-transparent w-full h-10 border border-red-600 border-dashed rounded-md py-2 pl-5 p-4 ${this.state.open ? "pr-3" : "hidden"} shadow-sm sm:text-sm`}>
-                        <Icon name='trash alternate' />
+                        <Icon name='trash alternate' />                   
                     </div>
                 </div>
             </div>
-
+            
         </div>)
     }
 }

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -57,33 +57,33 @@ export default function ReactEnviorment() {
       restore();
     },[deleteNode, deleteEdge]);
 
-    const handleAddProxmoxVnc = async ({ vmid, node }) => {
-      const response = await fetch('http://localhost:5000/api/proxmox/vnc', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ vmid, node }),
-      });
-      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) => {
-    const newNode = {
-      id: `embed-${nodes.length + 1}`,
-      type: 'embed',
-      position: reactFlowInstance.project({ x: 0, y: 0 }), // Adjust position as needed
-      data: { url: embedData.url, width: embedData.width || '100%', height: embedData.height || '400px' },
-    };
-    setNodes((nds) => nds.concat(newNode));
-    console.log(`Adding embed with URL: ${embedData.url} and Label: ${embedData.label}`);
-  }, [nodes, reactFlowInstance]);
+  //   const handleAddProxmoxVnc = async ({ vmid, node }) => {
+  //     const response = await fetch('http://localhost:5000/api/proxmox/vnc', {
+  //       method: 'POST',
+  //       headers: { 'Content-Type': 'application/json' },
+  //       body: JSON.stringify({ vmid, node }),
+  //     });
+  //     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) => {
+  //   const newNode = {
+  //     id: `embed-${nodes.length + 1}`,
+  //     type: 'embed',
+  //     position: reactFlowInstance.project({ x: 0, y: 0 }), // Adjust position as needed
+  //     data: { url: embedData.url, width: embedData.width || '100%', height: embedData.height || '400px' },
+  //   };
+  //   setNodes((nds) => nds.concat(newNode));
+  //   console.log(`Adding embed with URL: ${embedData.url} and Label: ${embedData.label}`);
+  // }, [nodes, reactFlowInstance]);
 
     const onNodesChange = useCallback(
       (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
@@ -197,16 +197,16 @@ export default function ReactEnviorment() {
       },
       [reactFlowInstance, nodes, deleteNode]);
 
-    const addProxmoxVMNode = (vmAddress) => {
-        const newNode = {
-            id: `proxmox-vm-${nodes.length + 1}`,
-            type: 'proxmoxVM',
-            position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight },
-            data: { vmAddress },
-        };
-        setNodes((nds) => nds.concat(newNode));
-        setShowProxmoxForm(false);
-    };
+    // const addProxmoxVMNode = (vmAddress) => {
+    //     const newNode = {
+    //         id: `proxmox-vm-${nodes.length + 1}`,
+    //         type: 'proxmoxVM',
+    //         position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight },
+    //         data: { vmAddress },
+    //     };
+    //     setNodes((nds) => nds.concat(newNode));
+    //     setShowProxmoxForm(false);
+    // };
 
     return (
       <div className={`${theme ? "dark" : ""}`}>          
@@ -216,7 +216,6 @@ export default function ReactEnviorment() {
           <FaRegSave title="Save" className={`mt-6 text-black dark:text-white ${tool ? "visible" : " invisible"} ml-auto mr-auto `} onClick={() => onSave()}/> 
           <BsFillEraserFill title="Erase" className={`mt-6 text-black dark:text-white ml-auto mr-auto ${tool ? "visible" : " invisible"} `} onClick={() => onErase()}/>
         </div>
-        <button onClick={() => setShowProxmoxForm(true)} className="absolute top-10 right-10 z-50 p-2 bg-green-500 text-white">Add Proxmox VM</button>
         <div className={`flex h-screen w-screen ${theme ? "dark" : ""} transition-all`}>    
           <ReactFlowProvider>
           <Navbar onDelete={deleteNodeContains} colour={JSON.parse(localStorage.getItem('colour'))} emoji={JSON.parse(localStorage.getItem('emoji'))} nodes={nodes}/>
@@ -231,3 +230,4 @@ export default function ReactEnviorment() {
       </div>
     );
   }
+