auto-component 0.0.26 → 0.0.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/auto-component.css +10 -5
- package/src/index.jsx +11 -11
package/package.json
CHANGED
package/src/auto-component.css
CHANGED
|
@@ -19,7 +19,8 @@
|
|
|
19
19
|
height: 40px;
|
|
20
20
|
border-radius: 5px;
|
|
21
21
|
color: #444;
|
|
22
|
-
font-size: 20px;
|
|
22
|
+
font-size: 20px;background: #eee;
|
|
23
|
+
border: 3px solid #ddd;
|
|
23
24
|
padding-left: 10px;
|
|
24
25
|
}
|
|
25
26
|
#content-creator button {
|
|
@@ -50,16 +51,19 @@
|
|
|
50
51
|
.tab {
|
|
51
52
|
margin: 0 10%;
|
|
52
53
|
background: #444;
|
|
54
|
+
color: #aaa;
|
|
53
55
|
border-radius: 5px 5px 0 0;
|
|
54
56
|
cursor: pointer;
|
|
55
57
|
}
|
|
56
58
|
.tab:hover {
|
|
57
59
|
background: #666;
|
|
60
|
+
color: #eee;
|
|
58
61
|
}
|
|
59
62
|
.selected {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
+
background: #c6c7d3;
|
|
64
|
+
color: #fff;
|
|
65
|
+
font-size: 1.2rem;
|
|
66
|
+
pointer-events: none;
|
|
63
67
|
}
|
|
64
68
|
#content-creator pre {
|
|
65
69
|
position: relative;
|
|
@@ -67,13 +71,14 @@
|
|
|
67
71
|
max-width: 90%;
|
|
68
72
|
min-width: 90%;
|
|
69
73
|
max-height: 60vh;
|
|
70
|
-
background: #
|
|
74
|
+
background: #cdd1d9;
|
|
71
75
|
color: #111;
|
|
72
76
|
padding: 40px 10px 40px 10px;
|
|
73
77
|
overflow: auto;
|
|
74
78
|
border: 2px solid black;
|
|
75
79
|
border-radius: 10px;
|
|
76
80
|
box-shadow: 0px 0px 5px #fff;
|
|
81
|
+
white-space: pre-wrap;
|
|
77
82
|
}
|
|
78
83
|
.copy-btn {
|
|
79
84
|
position: absolute;
|
package/src/index.jsx
CHANGED
|
@@ -172,7 +172,7 @@ const AutoComponent = ({ exclusions }) => {
|
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
const copyToClipboard = async () => {
|
|
175
|
-
const text = activeTab
|
|
175
|
+
const text = activeTab === 'response' ? responseData : currentRequest
|
|
176
176
|
await navigator.clipboard.writeText(text)
|
|
177
177
|
}
|
|
178
178
|
|
|
@@ -181,15 +181,15 @@ const AutoComponent = ({ exclusions }) => {
|
|
|
181
181
|
//**-------------**/
|
|
182
182
|
|
|
183
183
|
const requestHTML = currentHtml ? (
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
184
|
+
`Review the details below for accuracy and privacy concerns.
|
|
185
|
+
If the contents of an element should be excluded, add the 'exclude' class to the element.
|
|
186
|
+
Click Generate to send the request and receive the auto component AI generated code.
|
|
187
|
+
|
|
188
|
+
User Request:\n `
|
|
189
|
+
+ currentRequest
|
|
190
|
+
+ "\n\nUser HTML:\n"
|
|
191
|
+
+ currentHtml
|
|
192
|
+
) : 'There was an error collecting your HTML. Ensure no top level elements are assigned the class "exclude"'
|
|
193
193
|
|
|
194
194
|
const responseHtml = responseData ? (
|
|
195
195
|
responseData
|
|
@@ -218,7 +218,7 @@ const AutoComponent = ({ exclusions }) => {
|
|
|
218
218
|
{activeTab === 'request' ? requestHTML : responseHtml}
|
|
219
219
|
</pre>
|
|
220
220
|
</div>
|
|
221
|
-
<div className="copy-btn">
|
|
221
|
+
<div className="copy-btn" onClick={copyToClipboard}>
|
|
222
222
|
copy
|
|
223
223
|
</div>
|
|
224
224
|
</div>
|