auto-component 0.0.25 → 0.0.27

package/package.json

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

package/src/auto-component.css

@@ -19,7 +19,8 @@
   height: 40px;
   border-radius: 5px;
   color: #444;
-  font-size: 20px;
+  font-size: 20px;background: #eee;
+  border: 3px solid #ddd;
   padding-left: 10px;
 }
 #content-creator button {
@@ -50,16 +51,19 @@
 .tab {
   margin: 0 10%;
   background: #444;
+  color: #aaa;
   border-radius: 5px 5px 0 0;
   cursor: pointer;
 }
 .tab:hover {
   background: #666;
+  color: #eee;
 }
 .selected {
-
-  background: #888;
-  color: #111;
+  background: #c6c7d3;
+  color: #fff;
+  font-size: 1.2rem;
+  pointer-events: none;
 }
 #content-creator pre {
   position: relative;
@@ -67,13 +71,14 @@
   max-width: 90%;
   min-width: 90%;
   max-height: 60vh;
-  background: #aaa;
+  background: #cdd1d9;
   color: #111;
   padding: 40px 10px 40px 10px;
   overflow: auto;
   border: 2px solid black;
   border-radius: 10px;
   box-shadow: 0px 0px 5px #fff;
+  white-space: pre-wrap;
 }
 .copy-btn {
   position: absolute;

package/src/index.jsx

@@ -125,7 +125,8 @@ const AutoComponent = ({ exclusions }) => {
       const resData = await sendRequest();
   
       if (resData) {
-        setResponseData(formatHtml(resData.response.content));
+        // setResponseData(formatHtml(resData.response.content));
+        setResponseData(resData.response.content);
         setActiveTab('response');
       }
     } catch (err) {
@@ -171,7 +172,8 @@ const AutoComponent = ({ exclusions }) => {
   }
 
   const copyToClipboard = async () => {
-    const text = activeTab
+    const text = activeTab === 'response' ? responseData : ''
+    
     await navigator.clipboard.writeText(text)
   }
   
@@ -180,15 +182,15 @@ const AutoComponent = ({ exclusions }) => {
 //**-------------**/
 
   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.
-
-    User 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"'
+`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.
+
+User 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
@@ -217,7 +219,7 @@ const AutoComponent = ({ exclusions }) => {
            {activeTab === 'request' ? requestHTML : responseHtml}
           </pre>
         </div>
-        <div className="copy-btn">
+        <div className="copy-btn" onClick={copyToClipboard}>
           copy
         </div>
       </div>