auto-component 0.0.36 → 0.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auto-component",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "main": "src/index.jsx",
   "peerDependencies": {
     "react": "^18.2.0",

package/src/auto-component.css

@@ -1,22 +1,31 @@
-#auto-component {
+#auto-component-ui {
   position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 40px 0;
-  font-family: Arial, Helvetica, sans-serif
+  font-family: Arial, Helvetica, sans-serif;
+  z-index: 9999;
 }
-#auto-component div {
-  width: 100%;
+#auto-component-entry {
+  position: fixed;
+  bottom: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 90%;
+  max-width: 700px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  
+  padding: 0 20px;
+  background: #222;
+  border-radius: 10px;
+  border: 2px solid rgb(108, 108, 246);
+  z-index: 9999;
 }
-#auto-component input {
-  width: 60%;
+#auto-component-ui input {
+  width: 100%;
   height: 40px;
   border-radius: 5px;
   color: #444;
@@ -24,7 +33,7 @@
   border: 3px solid #ddd;
   padding-left: 10px;
 }
-#auto-component button {
+#auto-component-ui button {
   padding: 10px;
   margin: 20px;
   background: rgb(184, 230, 184);
@@ -32,69 +41,99 @@
   border-radius: 5px;
   box-shadow: 0px 0px 5px #fff;
 }
-#auto-component button:nth-child(3) {
+#auto-component-ui button:nth-child(3) {
   padding: 10px 20px;
   margin-left: 0px;
   margin-right: 0px;
   background: #db9d9d;
 }
-#auto-component button:hover {
+#auto-component-ui button:hover {
   background: green;
   color: #eee;
 }
-#auto-component button:nth-child(3):hover {
+#auto-component-ui button:nth-child(3):hover {
   background: #dc3c3c;
 }
-#auto-component div:nth-child(2) {
+#auto-component-tabs {
+  position: fixed;
+  bottom: 68px;
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  max-width: 700px;
+  z-index: 9998;
 }
 .tab {
+  width: 30%;
   margin: 0 10%;
   padding: 4px 0;
-  background: #444;
-  color: #aaa;
-  border-radius: 5px 5px 0 0;
+  background: #c6c7d3 !important;
+  color: #fff !important;
+  border-radius: 0 0 5px 5px;
   cursor: pointer;
 }
 .tab:hover {
-  background: #666;
-  color: #eee;
+  background: #666 !important;
+  color: #eee !important;
 }
-.selected {
-  background: #c6c7d3;
-  color: #fff;
+.auto-component-selected {
+  background: #444 !important;
+  color: #aaa !important;
   font-size: 1.2rem;
-  pointer-events: none;
 }
-#auto-component pre {
-  position: relative;
+#auto-component-code-container {
+  position: fixed;
+  bottom: 180px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80%;
+  max-width: 600px;
+  max-height: 300px;
+  height: 300px;
+}
+
+#auto-component-code {
+  width: 100%;
+  max-width: 600px;
+  max-height: 300px;
+  height: 300px;
   text-align: left;
-  max-width: 90%;
-  min-width: 90%;
-  max-height: 60vh;
   background: #cdd1d9;
   color: #111;
   padding: 40px 10px 40px 10px;
-  overflow: auto;
+  overflow-y: auto;
   border: 2px solid black;
   border-radius: 10px;
   box-shadow: 0px 0px 5px #fff;
-  white-space: pre-wrap;
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+  z-index: 9999;
 }
-.copy-btn {
+.auto-component-copy {
   position: absolute;
-  top: 130px;
-  right: 7%;
+  top: 2px;
+  right: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: red;
   max-width: 50px;
   max-height: 30px;
   cursor: pointer;
   background: rgba(0, 0, 0, 0.2);
-  border-radius: 5px;
+  border-radius: 0 8px 0 8px;
   padding: 10px 20px;
   color: #fff;
+  z-index: 9999;
 }
 
-.copy-btn:hover {
+.auto-component-copy:hover {
   background: #666;
+}
+.auto-component-hidden {
+  display: none;
 }

package/src/index.jsx

@@ -1,8 +1,11 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react-hooks/exhaustive-deps */
+import JSXParser from 'react-jsx-parser'
 import { useState, useEffect } from 'react'
 // import beautify from 'js-beautify';
 import './auto-component.css'
 
-const AutoComponent = ({ exclusions }) => {
+const AutoComponent = () => {
 
 //**-----------**/
 // ** State ** //
@@ -12,10 +15,10 @@ const AutoComponent = ({ exclusions }) => {
   const [ currentRequest, setRequest ] = useState('')
   const [ user, setUser ] = useState('')
 
-  const [ responseData, setResponseData ] = useState(null)
+  const [ responseData, setResponseData ] = useState('')
   const [ requestData, setRequestData ] = useState(null)
   
-  const [ activeTab, setActiveTab ] = useState('request')
+  const [ activeTab, setActiveTab ] = useState('')
   const [ history, setHistory ] = useState(["No History"])
 
 //**-------------------------**/
@@ -27,7 +30,7 @@ const AutoComponent = ({ exclusions }) => {
     const htmlContent = body ? body.innerHTML : ''
     const cssStyles = document.documentElement.innerHTML
 
-    const cleanedHtml = cleanExclusions(htmlContent, exclusions)
+    const cleanedHtml = cleanExclusions(htmlContent)
     const cleanedStyles = cleanStyles(cssStyles)
     
     setHtml(cleanedHtml)
@@ -49,23 +52,44 @@ const AutoComponent = ({ exclusions }) => {
   // OR, (full) the element and it's content are excluded from output
   
   // partial exclusion
-  const cleanExclusions = (html) => {
-    const regexExcludeClass = /(<[^>]*\sclass\s*=\s*['"]([^'"]*exclude[^'"]*)['"][^>]*>)[\s\S]*?(<\/[^>]*>)/g;
-    const cleanedHtml = html.replace(regexExcludeClass, '$1$3');
-    const scriptIndex = cleanedHtml.lastIndexOf('<script');
 
-    // return formatHtml(cleanedHtml.substring(0, scriptIndex));
-    return cleanedHtml.substring(0, scriptIndex);
+  const cleanExclusions = (html) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+  
+    const elementsToClean = doc.querySelectorAll('.exclude');
+  
+    elementsToClean.forEach((element) => {
+      removeAllChildNodes(element);
+    });
+  
+    return doc.documentElement.outerHTML;
+  };
+  
+  const removeAllChildNodes = (element) => {
+    Array.from(element.childNodes).forEach((child) => {
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        removeAllChildNodes(child);
+      } else {
+        element.removeChild(child);
+      }
+    });
   };
+  
 
   // full exclusion
-  // const cleanExclusionsFull = (html) => {
-  //   const regexExcludeClass = /<[^>]*\sclass\s*=\s*['"]([^'"]*exclude[^'"]*)['"][^>]*>[\s\S]*?<\/[^>]*>/g
-  //   const cleanedHtml = html.replace(regexExcludeClass, '')
-  //   const scriptIndex = cleanedHtml.lastIndexOf('<script')
-  //   
-  //   return formatHtml(cleanedHtml.substring(0, scriptIndex))
-  // }
+  // const cleanExclusions = (html) => {
+  //   const parser = new DOMParser();
+  //   const doc = parser.parseFromString(html, 'text/html');
+  // 
+  //   const elementsToExclude = doc.querySelectorAll('.exclude');
+  // 
+  //   elementsToExclude.forEach((element) => {
+  //     element.parentNode.removeChild(element);
+  //   });
+  // 
+  //   return doc.documentElement.outerHTML;
+  // };
 
   // exclude non <style> data and remove comments
   const cleanStyles = (css) => {
@@ -99,7 +123,7 @@ const AutoComponent = ({ exclusions }) => {
 
   const sendRequest = async () => {
     const url = "https://server-auto-component-46830ff262f8.herokuapp.com/api";
-  
+    
     try {
       const res = await fetch(url, {
         method: 'POST',
@@ -119,6 +143,19 @@ const AutoComponent = ({ exclusions }) => {
       console.log(err.message);
     }
   };
+
+  const cleanId = (html) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+  
+    const autoComponentContainer = doc.getElementById('auto-component-container');
+  
+    if (autoComponentContainer) {
+      autoComponentContainer.removeAttribute('id');
+    }
+  
+    return doc.documentElement.outerHTML;
+  };
   
   // make API request with updated state data
   const handleRequest = async () => {
@@ -128,6 +165,7 @@ const AutoComponent = ({ exclusions }) => {
       if (resData) {
         setHistory(resData.history)
         // setResponseData(formatHtml(resData.response.content));
+        // const outputHtml = cleanId(resData.response.content)
         setResponseData(resData.response.content);
         setActiveTab('response');
       }
@@ -167,11 +205,12 @@ const AutoComponent = ({ exclusions }) => {
     setHistory([])
   }
 
-  const handleRequestTab = () => {
-    setActiveTab('request')
+  const handleRequestTab = async () => {
+    await setActiveTab(activeTab === 'response' || activeTab === '' ? 'request' : '');
   }
-  const handleResponseTab = () => {
-    setActiveTab('response')
+  
+  const handleResponseTab = async () => {
+    await setActiveTab(activeTab === 'request' || activeTab === '' ? 'response' : '');
   }
 
   const copyToClipboard = async () => {
@@ -193,6 +232,7 @@ const AutoComponent = ({ exclusions }) => {
   }
 
   const requestHTML = currentHtml ? (
+getLog() + 
 `Review the details below for accuracy and privacy concerns.
 If the contents of an element should be excluded, add the 'exclude' class to the element.
 Click Generate to send the request and receive the auto component AI generated code.
@@ -205,39 +245,53 @@ User ID:\n    `
 + currentHtml 
 ) : 'There was an error collecting your HTML. Ensure no top level elements are assigned the class "exclude"'
     
-  const responseHtml = responseData ? (
+
+console.log(responseData)
+const responseHtml = responseData ? (
     responseData
   ) : 'No response has been generated'
-
-  
+    
   return (
-    <>
-      {/* create the display window */}
-      <div id="auto-component">
-        <div>
+    
+    <div className='auto-component exclude'>
+            
+      <div>
+        {responseData ? (
+          // Use {} to directly interpolate the JSX code
+          <JSXParser jsx={responseData} />
+        ) : (
+          '- auto component will be added here -'
+        )}
+      </div>
+      
+      <div id="auto-component-ui">
+        <div id="auto-component-code-container" className={`${!activeTab ? 'auto-component-hidden' : ''} auto-component-code`}>
+          <pre id="auto-component-code">
+            {activeTab === 'request' ? requestHTML : responseHtml}
+          </pre>
+          <div className="auto-component-copy" onClick={copyToClipboard} style={activeTab !== 'response' ? { display: 'none' } : null}>
+            copy
+          </div>
+        </div>
+        <div id="auto-component-entry">
           <input type="text" value={currentRequest} onChange={handleChange} placeholder="Enter a request"></input>
           <button onClick={handleGenerate}>Generate</button>
           <button onClick={handleReset}>X</button>
         </div>
         <div>
-          <div>
-           <div className={`${activeTab === 'request' ? 'selected' : ''} tab`} onClick={handleRequestTab}>
+          <div id='auto-component-tabs'>
+           <div className={`${activeTab === 'request' ? 'auto-component-selected' : ''} tab`} onClick={handleRequestTab}>
               Request
             </div>
-            <div className={`${activeTab === 'response' ? 'selected' : ''} tab`} onClick={handleResponseTab}>
+            <div className={`${activeTab === 'response' ? 'auto-component-selected' : ''} tab`} onClick={handleResponseTab}>
               Response
             </div>
           </div>
-          <pre>
-           {activeTab === 'request' ? getLog() : responseHtml}
-          </pre>
-        </div>
-        <div className="copy-btn" onClick={copyToClipboard} style={activeTab !== 'response' ? { display: 'none' } : null}>
-          copy
         </div>
       </div>
-    </>
+    </div>
   )
 }
 
 export default AutoComponent
+