auto-component 0.0.33 → 0.0.34

package/package.json

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

package/src/index.jsx

@@ -1,66 +1,250 @@
-import {useState, useEffect} from 'react'
-import { Link } from 'react-router-dom'
-import { getPeople } from '../../utilities/people-service'
-import './People.css'
-import NewPersonForm from './NewPersonForm'
-import AutoComponent from '../../components/Componenter'
+import { useState, useEffect } from 'react'
+// import beautify from 'js-beautify';
+import './auto-component.css'
 
-const People = () => {
-  const [isLoading, setIsLoading] = useState(true)
-  const [people, setPeople] = useState([])
+const AutoComponent = ({ exclusions }) => {
 
+//**-----------**/
+// ** State ** //
+//**---------**/
+  const [ currentHtml, setHtml ] = useState('')
+  const [ currentStyle, setStyles ] = useState('')
+  const [ currentRequest, setRequest ] = useState('')
+  const [ user, setUser ] = useState('')
+
+  const [ responseData, setResponseData ] = useState(null)
+  const [ requestData, setRequestData ] = useState(null)
+  
+  const [ activeTab, setActiveTab ] = useState('')
+  const [ history, setHistory ] = useState(["No History"])
+
+//**-------------------------**/
+// ** HTML/CSS Formatting ** //
+//**-----------------------**/
+  // get the html/style for the current page and set state
+  const htmlContent = () => {
+    const body = document.querySelector('body')
+    const htmlContent = body ? body.innerHTML : ''
+    const cssStyles = document.documentElement.innerHTML
+
+    const cleanedHtml = cleanExclusions(htmlContent, exclusions)
+    const cleanedStyles = cleanStyles(cssStyles)
+    
+    setHtml(cleanedHtml)
+    setStyles(cleanedStyles)
+  }
+
+  // format html for display (breaks/indentation)
+  // const formatHtml = (html) => {
+  //   return beautify.html(html, {
+  //     indent_size: 2,
+  //     wrap_line_length: 80,
+  //     max_preserve_newlines: 1,
+  //   })
+  // }
+
+  // clean html of exclusions:
+  // if an element className includes 'exclude'
+  // (partial) the element wrapper remains, but contents removed
+  // 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);
+  };
+
+  // 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))
+  // }
+
+  // exclude non <style> data and remove comments
+  const cleanStyles = (css) => {
+    const styleRegex = /<style\b[^>]*>(.*?)<\/style>/gs
+    const matches = css.match(styleRegex)
+  
+    if (matches) {
+      const cleanedMatches = matches.map(match => match.replace(/\/\*[\s\S]*?\*\//g, ''))
+      return cleanedMatches
+    }
+    return null
+  }
+
+  const randomUser = () => {
+    setUser(Math.floor(Math.random()*100000))
+  }
+
+  useEffect(() => {
+    htmlContent()
+    randomUser()
+  }, [])
+
+//**---------------------------**/
+// ** API Requests/Response ** //
+//**-------------------------**/
+
+  // TEMP FUNCTION FOR TESTING
+  // const sendRequest = (data) => {
+  //   return(response)
+  // }
+
+  const sendRequest = async () => {
+    const url = "https://server-auto-component-46830ff262f8.herokuapp.com/api";
+    
+    try {
+      const res = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(requestData),
+      });
+  
+      if (res.ok) {
+        const jsonData = await res.json();
+        return jsonData;
+      } else {
+        throw new Error("Invalid request!");
+      }
+    } catch (err) {
+      console.log(err.message);
+    }
+  };
+  
+  // make API request with updated state data
   const handleRequest = async () => {
     try {
-      const peopleData = await getPeople()
-      if (peopleData) setPeople(peopleData)
+      const resData = await sendRequest();
+  
+      if (resData) {
+        setHistory(resData.history)
+        // setResponseData(formatHtml(resData.response.content));
+        setResponseData(resData.response.content);
+        setActiveTab('response');
+      }
     } catch (err) {
-      console.log(err)
+      console.log(err);
     }
-    setIsLoading(false)
+    // setIsLoading(false);
+  };
+
+//**------------------------**/
+// ** UI/Button Handling ** //
+//**----------------------**/
+
+  const handleChange = (e) => {
+    e.preventDefault()
+    setRequest(e.target.value)
+  }
+
+  const handleGenerate = async (e) => {
+    console.log(currentHtml)
+    await setRequestData({
+      "userId": user,
+      "request": currentRequest, 
+      "html": currentHtml
+    })
   }
 
   useEffect(() => {
-    handleRequest()
-  }, [])
+    if (requestData !== null) {
+      handleRequest();
+    }
+  },[requestData])
+
+  const handleReset = () => {
+    setRequest('')
+    setResponseData('')
+    randomUser()
+    setHistory([])
+  }
+
+  const handleRequestTab = async () => {
+    await setActiveTab(activeTab === 'response' || activeTab === '' ? 'request' : '');
+  }
+  
+  const handleResponseTab = async () => {
+    await setActiveTab(activeTab === 'request' || activeTab === '' ? 'response' : '');
+  }
 
+  const copyToClipboard = async () => {
+    const text = activeTab === 'response' ? responseData : requestData
+    await navigator.clipboard.writeText(text)
+  }
+  
+//**---------------**/
+// ** Rendering ** //
+//**-------------**/
 
-  if (isLoading) {
-    return <h1>Loading...</h1>;
-  } else {
+  const getLog = () => {
     return (
-      <section>
-        {/* <NewPersonForm handleRequest={handleRequest} /> */}
+    history.map((entry, index) => (
+        
+        index !== 0 && entry.content.split('HTML Context:')[0] + (entry.content.includes("User Request") ? '\n' : '\n\n\n')
+      )
+    ))
+  }
 
-        <div id="secret-element" className='secret secret-element'>
-          this is the excluded text
-          <div className='something'>
-            and this is the excluded element
-          </div>
-        </div>
+  const requestHTML = currentHtml ? (
+`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.
 
-        <div id="not-secret-element" className=''>
-          included
-        </div>
+User ID:\n    ` 
++ user
++ "\n\nUser Request:\n"
++ currentRequest 
++ "\n\nUser HTML:\n" 
++ currentHtml 
+) : 'There was an error collecting your HTML. Ensure no top level elements are assigned the class "exclude"'
+    
+  const responseHtml = responseData ? (
+    responseData
+  ) : 'No response has been generated'
 
-        <div className="people-list">
-          {people.map((p) => (
-            <Link to={"/people/" + p._id}>
-              <div key={p._id}>
-                <h3>{p.name}</h3>
-                  <img
-                    className="profile-image"
-                    src={p.image}
-                    alt={`Image of ${p.name}`}
-                  />
-                <p>{p.title}</p>
-              </div>
-            </Link>
-          ))}
+  
+  return (
+    <>
+      {/* create the display window */}
+      <div id="auto-component">
+        <div>
+          <p>test</p>
         </div>
-        <AutoComponent />
-      </section>
-    );
-  }
+        <div id="auto-component-code" className={`${!activeTab ? 'hidden' : ''} auto-component-code`}>
+          <pre>
+            {activeTab === 'request' ? getLog() : responseHtml}
+          </pre>
+        </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 id='auto-component-tabs'>
+           <div className={`${activeTab === 'request' ? 'selected' : ''} tab`} onClick={handleRequestTab}>
+              Request
+            </div>
+            <div className={`${activeTab === 'response' ? 'selected' : ''} tab`} onClick={handleResponseTab}>
+              Response
+            </div>
+          </div>
+        </div>
+        <div className="auto-component-copy" onClick={copyToClipboard} style={activeTab !== 'response' ? { display: 'none' } : null}>
+          copy
+        </div>
+      </div>
+    </>
+  )
 }
 
-export default People
+export default AutoComponent