auto-component 0.1.0 → 0.1.1

package/lib/auto-component.css

@@ -56,7 +56,7 @@
 }
 #auto-component-tabs {
   position: fixed;
-  bottom: 68px;
+  bottom: 70px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
@@ -70,7 +70,7 @@
 .tab {
   width: 30%;
   margin: 0 10%;
-  padding: 4px 0;
+  padding: 6px 0;
   background: #c6c7d3 !important;
   color: #fff !important;
   border-radius: 0 0 5px 5px;
@@ -83,24 +83,24 @@
 .auto-component-selected {
   background: #444 !important;
   color: #aaa !important;
-  font-size: 1.2rem;
+  font-weight: bold;
 }
 #auto-component-code-container {
   position: fixed;
   bottom: 180px;
   left: 50%;
   transform: translateX(-50%);
+  overflow: hidden;
   width: 80%;
   max-width: 900px;
-  max-height: 300px;
-  height: 300px;
+  max-height: 400px;
 }
 
 #auto-component-code {
-  width: 100%;
+  margin: 0;
+  padding: 0;
   max-width: 900px;
   max-height: 300px;
-  height: 300px;
   text-align: left;
   background: #cdd1d9;
   color: #111;
@@ -115,8 +115,8 @@
 }
 .auto-component-copy {
   position: absolute;
-  top: 2px;
-  right: 2px;
+  top: 0;
+  right: 0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -136,4 +136,57 @@
 }
 .auto-component-hidden {
   display: none;
-}
+}
+
+.placeholder-top-left {
+  position: relative;
+  top: 0;
+  left: 0;
+  padding: 10px; 
+}
+
+.auto-component-placeholder {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  width: 100%;
+  min-height: 150px;
+  background-size: 40px 40px;
+  background-image: repeating-linear-gradient(
+    45deg, /* Change angle to horizontal */
+    rgba(255, 255, 255, 0.15) 0px,
+    rgba(76, 126, 97, 0.459) 1px,
+    transparent 3px,
+    transparent 14px
+  );
+  position: relative;
+}
+
+.auto-component-placeholder.animate {
+  animation: slide 1s linear infinite;
+}
+
+.loading-indicator {
+  border: 4px solid #f3f3f3; /* Light grey */
+  border-top: 4px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+
+@keyframes slide {
+  from {
+    background-position: -40px 0; /* Start moving from the left */
+  }
+  to {
+    background-position: 40px 0; /* Move to the right */
+  }
+}

package/lib/index.js

@@ -61,6 +61,10 @@ var AutoComponent = function AutoComponent() {
     _useState16 = _slicedToArray(_useState15, 2),
     history = _useState16[0],
     setHistory = _useState16[1];
+  var _useState17 = (0, _react.useState)(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    isRequesting = _useState18[0],
+    setIsRequesting = _useState18[1];
 
   //**-------------------------**/
   // ** HTML/CSS Formatting ** //
@@ -158,9 +162,10 @@ var AutoComponent = function AutoComponent() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
+            setIsRequesting(true);
             url = "https://server-auto-component-46830ff262f8.herokuapp.com/api";
-            _context.prev = 1;
-            _context.next = 4;
+            _context.prev = 2;
+            _context.next = 5;
             return fetch(url, {
               method: 'POST',
               headers: {
@@ -168,31 +173,33 @@ var AutoComponent = function AutoComponent() {
               },
               body: JSON.stringify(requestData)
             });
-          case 4:
+          case 5:
             res = _context.sent;
             if (!res.ok) {
-              _context.next = 12;
+              _context.next = 13;
               break;
             }
-            _context.next = 8;
+            _context.next = 9;
             return res.json();
-          case 8:
+          case 9:
             jsonData = _context.sent;
             return _context.abrupt("return", jsonData);
-          case 12:
-            throw new Error("Invalid request!");
           case 13:
-            _context.next = 18;
+            throw new Error("Invalid request!");
+          case 14:
+            _context.next = 19;
             break;
-          case 15:
-            _context.prev = 15;
-            _context.t0 = _context["catch"](1);
+          case 16:
+            _context.prev = 16;
+            _context.t0 = _context["catch"](2);
             console.log(_context.t0.message);
-          case 18:
+          case 19:
+            setIsRequesting(false);
+          case 20:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[1, 15]]);
+      }, _callee, null, [[2, 16]]);
     }));
     return function sendRequest() {
       return _ref.apply(this, arguments);
@@ -223,10 +230,14 @@ var AutoComponent = function AutoComponent() {
             _context2.t0 = _context2["catch"](0);
             console.log(_context2.t0);
           case 10:
+            _context2.prev = 10;
+            setIsRequesting(false); // Set isRequesting to false after processing response
+            return _context2.finish(10);
+          case 13:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[0, 7]]);
+      }, _callee2, null, [[0, 7, 10, 13]]);
     }));
     return function handleRequest() {
       return _ref2.apply(this, arguments);
@@ -249,8 +260,7 @@ var AutoComponent = function AutoComponent() {
             _context3.next = 2;
             return setRequestData({
               "userId": user,
-              "request": currentRequest,
-              "html": currentHtml
+              "request": currentRequest
             });
           case 2:
             setRequest('');
@@ -274,6 +284,7 @@ var AutoComponent = function AutoComponent() {
     setResponseData('');
     randomUser();
     setHistory([]);
+    setIsRequesting(false);
   };
   var handleRequestTab = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
@@ -341,7 +352,7 @@ var AutoComponent = function AutoComponent() {
   };
 
   // build request tab content
-  var requestHTML = currentHtml ? getLog() && getLog().join('') + "Review the details below for accuracy and privacy concerns.\n\nIf the contents of an element should be excluded, add the 'exclude' class to the element.\n\nClick Generate to send a request and receive the auto component AI generated code.\n\nUser 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"';
+  var requestHTML = currentHtml ? getLog() && getLog().join('') + "Click Generate to send a request and receive the auto component AI generated code.\n\nUser 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"';
   var responseHtml = responseData ? responseData : 'No response has been generated';
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter') {
@@ -356,9 +367,13 @@ var AutoComponent = function AutoComponent() {
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "auto-component exclude"
-  }, /*#__PURE__*/_react["default"].createElement("div", null, responseData ? /*#__PURE__*/_react["default"].createElement(_reactJsxParser["default"], {
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "placeholder-top-left"
+  }, "auto-component"), /*#__PURE__*/_react["default"].createElement("hr", null), responseData ? /*#__PURE__*/_react["default"].createElement(_reactJsxParser["default"], {
     jsx: responseData
-  }) : '- auto component will be added here -'), /*#__PURE__*/_react["default"].createElement("div", {
+  }) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: "auto-component-placeholder ".concat(isRequesting ? 'animate' : '')
+  }), /*#__PURE__*/_react["default"].createElement("hr", null)), /*#__PURE__*/_react["default"].createElement("div", {
     id: "auto-component-ui"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     id: "auto-component-code-container",
@@ -373,7 +388,9 @@ var AutoComponent = function AutoComponent() {
     } : null
   }, "copy")), /*#__PURE__*/_react["default"].createElement("div", {
     id: "auto-component-entry"
-  }, /*#__PURE__*/_react["default"].createElement("input", {
+  }, isRequesting ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "loading-indicator"
+  }) : /*#__PURE__*/_react["default"].createElement("input", {
     type: "text",
     value: currentRequest,
     onChange: handleChange,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auto-component",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "lib/index.js",
   "peerDependencies": {
     "react": "^18.2.0",