🔧 Fix conditional rendering and iframeSrc handling

frontend/src/components/Modal/importer.js

@@ -1,272 +1,309 @@
-import { Modal, Icon, Message} from 'semantic-ui-react'
-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 { Modal, Icon, Message } from 'semantic-ui-react'
+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';
+import { BsSearch } from 'react-icons/bs';
 
-export default function Import(props){
+export default function Import(props) {
     const [tab, setTab] = useState("gradio")
     const [subTab, setSubTab] = useState(0)
-    const [embedUrl, setEmbedUrl] = useState(""); 
-    const [vmid, setVmid] = useState(''); 
-    const [node, setNode] = useState(''); 
-    const [iframeSrc, setIframeSrc] = useState(""); 
+    const [embedUrl, setEmbedUrl] = useState("");
+    const [vmid, setVmid] = useState('');
+    const [node, setNode] = useState('');
+    const [iframeSrc, setIframeSrc] = useState("");
 
-    const handleProxmoxSubmit = async (e) => {
+    const handleSubmit = async (e) => {
         e.preventDefault();
-        const requestData = { vmid, node };
-        fetch("http://localhost:2000/api/proxmox/vnc", {
-            method: "POST",
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(requestData)
-        })
-        .then(response => response.json())
-        .then(data => {
-            if(data.iframe_src) {
-                setIframeSrc(data.iframe_src); 
-                props.onAddEmbed({ url: data.iframe_src, type: 'embed' }); 
-            } else {
-                console.error("Failed to get iframe source URL");
-            }
-        })
-        .catch(error => {
-            console.error("Error fetching iframe source URL:", error);
-        });
+        // Assuming iframeSrc is already bound to an input field where users can paste any iframe link
+        console.debug("Embed submit:", iframeSrc);
+        props.onAddEmbed({ url: iframeSrc, type: 'embed' });
     };
 
+    // const handleProxmoxSubmit = async (e) => {
+    //     e.preventDefault();
+    //     const requestData = { vmid, node };
+    //     fetch("http://localhost:2000/api/proxmox/vnc", {
+    //         method: "POST",
+    //         headers: { 'Content-Type': 'application/json' },
+    //         body: JSON.stringify(requestData)
+    //     })
+    //     .then(response => response.json())
+    //     .then(data => {
+    //         if(data.iframe_src) {
+    //             setIframeSrc(data.iframe_src); 
+    //             props.onAddEmbed({ url: data.iframe_src, type: 'embed' }); 
+    //         } else {
+    //             console.error("Failed to get iframe source URL");
+    //         }
+    //     })
+    //     .catch(error => {
+    //         console.error("Error fetching iframe source URL:", error);
+    //     });
+    // };
+
     return (<div>
         <Modal
             basic
             className=''
             open={props.open}
             size='fullscreen'
-            >
-                <div className='w-full shadow-lg rounded-lg'>
-                    <ul className="flex flex-wrap text-sm font-medium text-center text-gray-500 bg-gray-100 rounded-t-lg border-gray-200 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
-                        <li className="" onClick={()=>{
-                            setTab("gradio") 
-                            props.catch ? props.handelError(false) : props.handelError(props.catch)  }}>
-                            <button id="gradio-tab" data-tabs-target="#Gradio" type="button" role="tab" aria-controls="gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 rounded-tl-lg ${ tab === "gradio" ? 'bg-gray-200'  : 'hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 focus:bg-gray-700'}`}><Gradio className=" w-20 h-10"/></button>
-                        </li>
-                        <li className="" onClick={()=>{
-                            setTab("streamlit")
-                            props.catch ? props.handelError(false) : props.handelError(props.catch) }}>
-                            <button id="services-tab" data-tabs-target="#Streamlit" type="button" role="tab" aria-controls="services" aria-selected="false" className={`inline-block p-4 rounded-tl-lg ${ tab === "streamlit" ? 'bg-gray-200'  : 'hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 focus:bg-gray-700'}`}><Streamlit className=" w-20 h-10"/></button>
+        >
+            <div className='w-full shadow-lg rounded-lg'>
+                <ul className="flex flex-wrap text-sm font-medium text-center text-gray-500 bg-gray-100 rounded-t-lg border-gray-200 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
+                    <li className="" onClick={() => {
+                        setTab("gradio")
+                        props.catch ? props.handelError(false) : props.handelError(props.catch)
+                    }}>
+                        <button id="gradio-tab" data-tabs-target="#Gradio" type="button" role="tab" aria-controls="gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 rounded-tl-lg ${tab === "gradio" ? 'bg-gray-200' : 'hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 focus:bg-gray-700'}`}><Gradio className=" w-20 h-10" /></button>
+                    </li>
+                    <li className="" onClick={() => {
+                        setTab("streamlit")
+                        props.catch ? props.handelError(false) : props.handelError(props.catch)
+                    }}>
+                        <button id="services-tab" data-tabs-target="#Streamlit" type="button" role="tab" aria-controls="services" aria-selected="false" className={`inline-block p-4 rounded-tl-lg ${tab === "streamlit" ? 'bg-gray-200' : 'hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 focus:bg-gray-700'}`}><Streamlit className=" w-20 h-10" /></button>
+                    </li>
+                    <li className="" onClick={() => {
+                        setTab("proxmox")
+                        props.catch ? props.handelError(false) : props.handelError(props.catch)
+                    }}>
+                        <button id="proxmox-tab" data-tabs-target="#Proxmox" type="button" role="tab" aria-controls="proxmox" aria-selected={tab === "proxmox" ? "true" : "false"} className={`inline-block p-4 rounded-tl-lg ${tab === "proxmox" ? 'bg-gray-200' : 'hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 focus:bg-gray-700'}`}><Proxmox className=" w-20 h-10" /></button>
+                    </li>
+                </ul>
+                <div className='absolute right-5 top-5 z-20 mr-5'
+                    onClick={() => {
+                        props.quitHandeler(false)
+                        props.catch ? props.handelError(false) : props.handelError(props.catch)
+                    }}>
+                    <button type="button"
+                        className=" bg-neutral-300 rounded-2xl p-2 inline-flex items-center justify-center dark:bg-neutral-700 hover:opacity-70 focus:outline-none">
+                        <Exit className=" w-[20px] h-[20px] text-gray-400 dark:text-white" />
+                    </button>
+                </div>
+            </div>
+            {tab === "gradio" &&
+                <div className='w-full bg-white'>
+                    <ul className="flex flex-wrap text-sm font-medium text-center text-gray-500 bg-gray-200 border-gray-200 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
+                        <li className="" onClick={() => {
+                            setSubTab(0)
+                            props.catch ? props.handelError(false) : props.handelError(props.catch)
+                        }}>
+                            <button id="local-sub-tab" data-tabs-target="#local" type="button" role="tab" aria-controls="local-gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 px-6 text-base font-sans font-bold ${subTab === 0 ? 'bg-gray-300' : ''} hover:bg-gray-300 `}>Local</button>
                         </li>
-                        <li className="" onClick={()=>{
-                            setTab("proxmox")
-                            props.catch ? props.handelError(false) : props.handelError(props.catch) }}>
-                            <button id="proxmox-tab" data-tabs-target="#Proxmox" type="button" role="tab" aria-controls="proxmox" aria-selected={tab === "proxmox" ? "true" : "false"} className={`inline-block p-4 rounded-tl-lg ${ tab === "proxmox" ? 'bg-gray-200'  : 'hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 focus:bg-gray-700'}`}><Proxmox className=" w-20 h-10"/></button>
+                        <li className="" onClick={() => {
+                            setSubTab(1)
+                            props.catch ? props.handelError(false) : props.handelError(props.catch)
+                        }}>
+                            <button id="shared-sub-tab" data-tabs-target="#Gradio" type="button" role="tab" aria-controls="shared-gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 px-6 text-base font-sans font-bold  ${subTab === 1 ? 'bg-gray-300' : ''}  hover:bg-gray-300  `}>Shared</button>
                         </li>
                     </ul>
-                    <div className='absolute right-5 top-5 z-20 mr-5'
-                         onClick={()=>{
-                            props.quitHandeler(false)
-                            props.catch ? props.handelError(false) : props.handelError(props.catch) }}>
-                        <button type="button"
-                                className=" bg-neutral-300 rounded-2xl p-2 inline-flex items-center justify-center dark:bg-neutral-700 hover:opacity-70 focus:outline-none">
-                        <Exit className=" w-[20px] h-[20px] text-gray-400 dark:text-white"/>
-                        </button>
-                    </div> 
+                    {subTab === 0 && <Local />}
+                    {subTab === 1 && <Shared type="gradio" textHandler={props.textHandler} appendHandler={props.appendHandler} handelError={props.handelError} catch={props.catch} />}
+
+                    {props.catch && <div className='p-5'>
+                        <Message floating negative>
+                            <Message.Header className=" text-lg text-center">🚫 Something went wrong...</Message.Header>
+                            <br />
+                            <h1 className=" underline pb-3 font-bold text-lg">🤔 Possible Things That could of happen <br /></h1>
+                            <ul className="font-bold">
+                                <li key={"error_1"}>- The input was empty</li>
+                                <li key={"error_2"}>- The connection was forbidden</li>
+                                <li key={"error_3"}>- The name was already taken</li>
+                                <li key={"error_4"}>- The link you gave did not pass the regex</li>
+                                <ul className="px-6">
+                                    <li key={"error_5"}>- http://localhost:xxxx</li>
+                                    <li key={"error_6"}>- http://xxxxx.gradio.app</li>
+                                    <li key={"error_7"}>- https://hf.space/embed/$user/$space_name/+</li>
+                                </ul>
+                                <li>- link already exist within the menu</li>
+                            </ul>
+
+                        </Message>
+                    </div>}
                 </div>
-                    { tab === "gradio" &&
-                        <div className='w-full bg-white'>
-                        <ul className="flex flex-wrap text-sm font-medium text-center text-gray-500 bg-gray-200 border-gray-200 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
-                            <li className="" onClick={()=>{
-                                setSubTab(0)
-                                props.catch ? props.handelError(false) : props.handelError(props.catch) }}>
-                                <button id="local-sub-tab" data-tabs-target="#local" type="button" role="tab" aria-controls="local-gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 px-6 text-base font-sans font-bold ${subTab === 0 ? 'bg-gray-300' : '' } hover:bg-gray-300 `}>Local</button>
-                            </li>
-                            <li className="" onClick={()=>{
-                                setSubTab(1)
-                                props.catch ? props.handelError(false) : props.handelError(props.catch) }}>
-                            <button id="shared-sub-tab" data-tabs-target="#Gradio" type="button" role="tab" aria-controls="shared-gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 px-6 text-base font-sans font-bold  ${subTab === 1 ? 'bg-gray-300' : '' }  hover:bg-gray-300  `}>Shared</button>
-                            </li>
-                        </ul>
-                        {subTab === 0 && <Local/>}
-                        {subTab === 1 && <Shared type="gradio" textHandler={props.textHandler} appendHandler={props.appendHandler} handelError={props.handelError} catch={props.catch}/>}
+            }
+            {tab === "streamlit" &&
+                <div className='w-full bg-white'>
+                    <Shared type="streamlit" textHandler={props.textHandler} appendHandler={props.appendHandler} handelError={props.handelError} catch={props.catch} />
+                </div>
+            }
+            {tab === "IframeURL" && (
+                <form onSubmit={handleSubmit}>
+                    <input
+                        type="text"
+                        placeholder="Enter iframe link here..."
+                        value={iframeSrc}
+                        onChange={(e) => setIframeSrc(e.target.value)}
+                        className="input"
+                    />
+                    <button type="submit" className="button">Embed</button>
+                </form>
+            )}
 
-                        {props.catch && <div className='p-5'>
-                                        <Message floating negative>
-                                        <Message.Header className=" text-lg text-center">🚫 Something went wrong...</Message.Header>
-                                            <br/>
-                                            <h1 className=" underline pb-3 font-bold text-lg">🤔 Possible Things That could of happen <br/></h1>
-                                            <ul className="font-bold">
-                                                    <li key={"error_1"}>- The input was empty</li>
-                                                    <li key={"error_2"}>- The connection was forbidden</li>
-                                                    <li key={"error_3"}>- The name was already taken</li>
-                                                    <li key={"error_4"}>- The link you gave did not pass the regex</li>
-                                                    <ul className="px-6">
-                                                        <li key={"error_5"}>- http://localhost:xxxx</li>
-                                                        <li key={"error_6"}>- http://xxxxx.gradio.app</li>
-                                                        <li key={"error_7"}>- https://hf.space/embed/$user/$space_name/+</li>
-                                                    </ul>
-                                                    <li>- link already exist within the menu</li>
-                                                </ul>
-                        
-                                        </Message>
-                                        </div>}
-                        </div> 
-                    }
-                    { tab === "streamlit" && 
-                    <div className='w-full bg-white'>
-                        <Shared type="streamlit" textHandler={props.textHandler} appendHandler={props.appendHandler} handelError={props.handelError} catch={props.catch}/>
-                    </div>
-                    }
-                    { tab === "proxmox" && 
-                    <div className='w-full bg-white'>
-                        <form onSubmit={handleProxmoxSubmit} className="p-5">
-                            <input
-                                type="text"
-                                placeholder="VM ID"
-                                className="input input-bordered input-primary w-full max-w-xs"
-                                value={vmid}
-                                onChange={(e) => setVmid(e.target.value)}
-                            />
-                            <input
-                                type="text"
-                                placeholder="Node"
-                                className="input input-bordered input-primary w-full max-w-xs mt-2"
-                                value={node}
-                                onChange={(e) => setNode(e.target.value)}
-                            />
-                            <button className="btn btn-primary mt-2" type="submit">
-                                Generate Proxmox noVNC Session
-                            </button>
-                        </form>
-                        {iframeSrc && 
-                            <div className='p-5 flex flex-col items-start'>
-                                <a href={iframeSrc} target="_blank" rel="noopener noreferrer" className="mb-2 underline text-blue-600 hover:text-blue-800 visited:text-purple-600">Access Proxmox noVNC Session</a>
-                                <button onClick={() => navigator.clipboard.writeText(iframeSrc)} className="btn btn-primary">
-                                    Copy Session Link
-                                </button>
-                            </div>
-                        }
-                    </div>
-                    }
-                    
-                    <div className='embed-form p-5'>
+            // Ensure this conditional rendering block is correctly placed within your component's return statement
+            {iframeSrc && (
+                <div className='p-5 flex flex-col items-start'>
+                    <iframe src={iframeSrc} frameBorder="0" style={{ width: "100%", height: "400px" }} allowFullScreen></iframe>
+                </div>
+            )}
+            {iframeSrc &&
+                <div className='p-5 flex flex-col items-start'>
+                    <iframe src={iframeSrc} frameBorder="0" style={{ width: "100%", height: "400px" }} allowFullScreen></iframe>
+                </div>
+            }
+            {tab === "proxmox" &&
+                <div className='w-full bg-white'>
+                    <form onSubmit={handleProxmoxSubmit} className="p-5">
                         <input
                             type="text"
-                            placeholder="Embed URL"
+                            placeholder="VM ID"
                             className="input input-bordered input-primary w-full max-w-xs"
-                            value={embedUrl}
-                            onChange={(e) => setEmbedUrl(e.target.value)}
+                            value={vmid}
+                            onChange={(e) => setVmid(e.target.value)}
+                        />
+                        <input
+                            type="text"
+                            placeholder="Node"
+                            className="input input-bordered input-primary w-full max-w-xs mt-2"
+                            value={node}
+                            onChange={(e) => setNode(e.target.value)}
                         />
-                        <button className="btn btn-primary mt-2" onClick={() => props.onAddEmbed({ url: embedUrl, type: 'embed' })}>
-                            Add Embed
+                        <button className="btn btn-primary mt-2" type="submit">
+                            Generate Proxmox noVNC Session
                         </button>
-                    </div>
-                </Modal>
+                    </form>
+                    {iframeSrc &&
+                        <div className='p-5 flex flex-col items-start'>
+                            <a href={iframeSrc} target="_blank" rel="noopener noreferrer" className="mb-2 underline text-blue-600 hover:text-blue-800 visited:text-purple-600">Access Proxmox noVNC Session</a>
+                            <button onClick={() => navigator.clipboard.writeText(iframeSrc)} className="btn btn-primary">
+                                Copy Session Link
+                            </button>
+                        </div>
+                    }
+                </div>
+            }
+
+            <div className='embed-form p-5'>
+                <input
+                    type="text"
+                    placeholder="Embed URL"
+                    className="input input-bordered input-primary w-full max-w-xs"
+                    value={embedUrl}
+                    onChange={(e) => setEmbedUrl(e.target.value)}
+                />
+                <button className="btn btn-primary mt-2" onClick={() => props.onAddEmbed({ url: embedUrl, type: 'embed' })}>
+                    Add Embed
+                </button>
+            </div>
+        </Modal>
     </div>)
 }
 
-function Local(props){
+function Local(props) {
     return (
         <div className='p-5'>
-        <Message floating>
-            
-            <Message.Header>🏗️ Comming soon...</Message.Header> 
-            <Message.Content className='p-5'>
-            This tab will allow you grab your function from a given directory and build
-            your own tabular module gradio functions
-            </Message.Content>
+            <Message floating>
+
+                <Message.Header>🏗️ Comming soon...</Message.Header>
+                <Message.Content className='p-5'>
+                    This tab will allow you grab your function from a given directory and build
+                    your own tabular module gradio functions
+                </Message.Content>
 
-        </Message>
+            </Message>
         </div>
     )
 }
 
-function Shared(props){
+function Shared(props) {
     const [preview, setPreview] = useState("")
     const [fetchable, setFetch] = useState(false)
 
     const isFetchable = async (url) => {
         const pattern = {
-            share : new RegExp("^https?:\\/\\/([0-9a-zA-Z-]+)\\.gradio\\.live\\/?"),
-            hugginFace : new RegExp("^https?:\\/\\/([a-zA-Z0-9-]+)-gradio\\.hf\\.space\\/?$")
-        } 
+            share: new RegExp("^https?:\\/\\/([0-9a-zA-Z-]+)\\.gradio\\.live\\/?"),
+            hugginFace: new RegExp("^https?:\\/\\/([a-zA-Z0-9-]+)-gradio\\.hf\\.space\\/?$")
+        }
 
         if (!pattern.share.test(url) &&
-            !pattern.hugginFace.test(url)){
-                setFetch(false)
-                return
-            }
+            !pattern.hugginFace.test(url)) {
+            setFetch(false)
+            return
+        }
+
 
-        
-        fetch(url, {mode : "no-cors"}).then((re) => {
+        fetch(url, { mode: "no-cors" }).then((re) => {
             console.log(re)
-            if(re.url.includes("http://localhost:3000")){
-                setFetch(false)    
-            } else { 
+            if (re.url.includes("http://localhost:3000")) {
+                setFetch(false)
+            } else {
                 setFetch(true)
-                props.catch ? props.handelError(false) : props.handelError(props.catch)  
+                props.catch ? props.handelError(false) : props.handelError(props.catch)
             }
-            
-          }).catch((err)=>{
+
+        }).catch((err) => {
             setFetch(false)
-          })
-          setFetch(false)
-        }
-    
+        })
+        setFetch(false)
+    }
+
     return (
-        <div className='w-full shadow-lg' onKeyPress={(e)=>{
+        <div className='w-full shadow-lg' onKeyPress={(e) => {
             if (e.key.includes("Enter")) props.appendHandler(props.type)
         }}>
             <div className='p-5'>
-            <Message floating>            
-                         <div className={`flex items-center rounded-md bg-light-white mt-6 border-dashed`}>
-                            <label className="relative block w-full p-5 focus:shadow-xl">
-                                <span className={`absolute inset-y-0 left-0 flex items-center pl-8`}>
-                                    <BsSearch className="block float-left cursor-pointer text-gray-500"/>
-                                </span>
-                                <input className={`placeholder:italic placeholder:text-slate-400 text-black dark:text-white block w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm bg-transparent`}  
-                                    placeholder={`URL`}
-                                    type="text" name="search"
-                                    onChange={(e) => {
-                                        props.textHandler(e, "text")
-                                        setPreview(e.target.value)
-                                         setFetch(isFetchable(e.target.value))
-                                    }}
-                                    />
-                            </label>
-                        </div>   
-                        { fetchable === true && <div className=' w-full'>
-                            <h1 className=' text-xl font-sans font-bold text-center text-black mb-2'> Preview </h1>
-                            <div className='p-3 px-1 w-3/4 h-80 bg-gray-200 mr-auto ml-auto rounded-xl'>
-                                <div className='w-full h-full overflow-hidden relative -ml-[5px]'>
-                                <iframe title='Preview' src={preview} className=' absolute top-0 bottom-0 left-0 -right-[25px] overflow-y-scroll w-full h-full mr-auto ml-auto'/>
-                                </div>
+                <Message floating>
+                    <div className={`flex items-center rounded-md bg-light-white mt-6 border-dashed`}>
+                        <label className="relative block w-full p-5 focus:shadow-xl">
+                            <span className={`absolute inset-y-0 left-0 flex items-center pl-8`}>
+                                <BsSearch className="block float-left cursor-pointer text-gray-500" />
+                            </span>
+                            <input className={`placeholder:italic placeholder:text-slate-400 text-black dark:text-white block w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm bg-transparent`}
+                                placeholder={`URL`}
+                                type="text" name="search"
+                                onChange={(e) => {
+                                    props.textHandler(e, "text")
+                                    setPreview(e.target.value)
+                                    setFetch(isFetchable(e.target.value))
+                                }}
+                            />
+                        </label>
+                    </div>
+                    {fetchable === true && <div className=' w-full'>
+                        <h1 className=' text-xl font-sans font-bold text-center text-black mb-2'> Preview </h1>
+                        <div className='p-3 px-1 w-3/4 h-80 bg-gray-200 mr-auto ml-auto rounded-xl'>
+                            <div className='w-full h-full overflow-hidden relative -ml-[5px]'>
+                                <iframe title='Preview' src={preview} className=' absolute top-0 bottom-0 left-0 -right-[25px] overflow-y-scroll w-full h-full mr-auto ml-auto' />
                             </div>
-                        </div>}
-                        <div className={`flex items-center rounded-md bg-light-white dark:bg-[#1b1c1d] mt-6  border-dashed`}>
-                    <label className="relative block p-5 w-full focus:shadow-xl">
-                        <span className={`absolute inset-y-0 left-0 flex items-center pl-7`}>
-                            <Icon className=" text-gray-500 block float-left cursor-pointer mr-2" name="address card"/>
-                        </span>
-                        <input className={`placeholder:italic placeholder:text-slate-400 text-black dark:text-white block bg-transparent w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1  sm:text-sm`} 
-                            placeholder={`Name ( > 20 Characters)` }
-                            type="text" name="search"
-                            autoComplete='off'
-                            onChange={(e) => {
-                                props.textHandler(e, "name")
-                               }}
+                        </div>
+                    </div>}
+                    <div className={`flex items-center rounded-md bg-light-white dark:bg-[#1b1c1d] mt-6  border-dashed`}>
+                        <label className="relative block p-5 w-full focus:shadow-xl">
+                            <span className={`absolute inset-y-0 left-0 flex items-center pl-7`}>
+                                <Icon className=" text-gray-500 block float-left cursor-pointer mr-2" name="address card" />
+                            </span>
+                            <input className={`placeholder:italic placeholder:text-slate-400 text-black dark:text-white block bg-transparent w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1  sm:text-sm`}
+                                placeholder={`Name ( > 20 Characters)`}
+                                type="text" name="search"
+                                autoComplete='off'
+                                onChange={(e) => {
+                                    props.textHandler(e, "name")
+                                }}
                             />
-                    </label>
-                    </div> 
+                        </label>
+                    </div>
                     <div className=' right-0 ml-5'>
                         <button className="relative inline-flex justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-sans font-bold text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
-                                onClick={()=>{props.appendHandler(props.type)}}>
+                            onClick={() => { props.appendHandler(props.type) }}>
                             <span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-[#1b1c1d] rounded-md group-hover:bg-opacity-0">
                                 Enter
                             </span>
                         </button>
                     </div>
                 </Message>
-                </div>
-                </div>  
-                         
+            </div>
+        </div>
+
     )
-}
+}

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -231,3 +231,4 @@ export default function ReactEnviorment() {
     );
   }
 
+