@netlify/spark-ui 1.5.0-alpha.4 → 1.5.0-alpha.6
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
.chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@keyframes appearContainer{0%{opacity:0}to{opacity:1}}.conversation{height:calc(var(--n-search-container-height) + var(--n-search-footer-height));padding:var(--n-search-padding-inline);scroll-behavior:smooth;overflow-y:auto;display:grid;align-items:flex-end;gap:var(--space-s)}.question{border:none;color:var(--color-text-1);font-weight:var(--font-weight-regular);font-size:var(--step--1);border-radius:var(--radius-pill);transform:translate(-.75rem)}.question-list li{opacity:0;transform:translateY(10px);animation:fadeInUp .5s forwards}.question-list li:nth-child(1){animation-delay:.5s}.question-list li:nth-child(2){animation-delay:.3s}.question-list li:nth-child(3){animation-delay:.1s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.message{display:grid;gap:var(--space-s)}.message-bubble{padding:var(--space-xs) var(--space-s);background:var(--search-answer-message-color);border-radius:var(--radius-l);width:fit-content;max-width:85%;font-size:var(--step-0)}.prose{font-size:var(--step--0)}.prose>*+*{margin-top:var(--flow-space, var(--space-
|
|
1
|
+
.chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@keyframes appearContainer{0%{opacity:0}to{opacity:1}}.conversation{height:calc(var(--n-search-container-height) + var(--n-search-footer-height));padding:var(--n-search-padding-inline);scroll-behavior:smooth;overflow-y:auto;display:grid;align-items:flex-end;gap:var(--space-s)}.question{border:none;color:var(--color-text-1);font-weight:var(--font-weight-regular);font-size:var(--step--1);border-radius:var(--radius-pill);transform:translate(-.75rem)}.question-list li{opacity:0;transform:translateY(10px);animation:fadeInUp .5s forwards}.question-list li:nth-child(1){animation-delay:.5s}.question-list li:nth-child(2){animation-delay:.3s}.question-list li:nth-child(3){animation-delay:.1s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.message{display:grid;gap:var(--space-s)}.message-bubble{padding:var(--space-xs) var(--space-s);background:var(--search-answer-message-color);border-radius:var(--radius-l);width:fit-content;max-width:85%;font-size:var(--step-0)}.prose{font-size:var(--step--0)}.prose>*+*{margin-top:var(--flow-space, var(--space-s))}.prose :where(ol,ul,li)>*+*{margin-top:var(--flow-space, var(--space-3xs))}.prose h1,.prose h2,.prose h3{font-size:var(--step-1)}.prose h4,.prose h5,.prose h6{font-size:var(--step-0)}.prose pre{background:var(--neutral-light-700);border-radius:var(--radius-m);max-width:100%;box-sizing:border-box;padding:var(--space-s);color:var(--neutral-100);overflow-x:auto}.prose code{overflow-x:auto}.prose code[class*=language-],.prose pre[class*=language-]{display:block;font-size:var(--font-size-text-xs)}.user-message{margin-inline-start:auto;background:var(--search-user-message-color)}.form-wrapper{display:flex;align-items:center;position:relative;height:var(--n-search-input-height)}.form-wrapper:after{content:"";display:block;width:100%;height:1px;background:var(--color-bg-3);position:absolute;top:0;left:0}.form-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.form-submit{padding:.7rem;border-radius:var(--radius-pill);margin-inline-end:var(--space-2xs);border:none;background:var(--color-link);color:var(--neutral-000);transition:background-color .15s ease-out}.form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px;transition:opacity .15s ease-out}.form-submit[disabled]{background:var(--neutral-500)}.form-submit[disabled]>*{opacity:.5}.button-back{width:fit-content;background:transparent;position:absolute;z-index:1;padding:.5rem 1rem;background:var(--search-back-btn-bg-color);margin:1rem;border:2px solid var(--color-bg-3);border-radius:var(--radius-pill);font-size:var(--step--1);border:1px solid;cursor:pointer;border-color:var(--color-bg-3);color:var(--color-text-1);border-width:.5px}.message-loader{width:43px;height:auto;display:block;color:var(--search-loading-color)}.message-loader :where(#ask-netlify-tick-1,#ask-netlify-tick-2,#ask-netlify-tick-3){opacity:0;animation:tickFlicker .8s ease-in-out infinite}#ask-netlify-tick-1{animation-delay:.1s}#ask-netlify-tick-2{animation-delay:.2s}#ask-netlify-tick-3{animation-delay:.3s}@keyframes tickFlicker{0%{opacity:0}to{opacity:1}}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@netlify/spark-ui",
|
|
3
3
|
"description": "Assets, design tokens, components, and utilities",
|
|
4
|
-
"version": "1.5.0-alpha.
|
|
4
|
+
"version": "1.5.0-alpha.6",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/components/preact/index.js",
|
|
7
7
|
"types": "dist/components/preact/index.d.ts",
|
|
@@ -75,7 +75,11 @@
|
|
|
75
75
|
font-size: var(--step--0);
|
|
76
76
|
|
|
77
77
|
> * + * {
|
|
78
|
-
margin-top: var(--flow-space, var(--space-
|
|
78
|
+
margin-top: var(--flow-space, var(--space-s));
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
:where(ol, ul, li) > * + * {
|
|
82
|
+
margin-top: var(--flow-space, var(--space-3xs));
|
|
79
83
|
}
|
|
80
84
|
|
|
81
85
|
h1,
|
|
@@ -96,7 +100,7 @@
|
|
|
96
100
|
max-width: 100%;
|
|
97
101
|
box-sizing: border-box;
|
|
98
102
|
padding: var(--space-s);
|
|
99
|
-
color: var(--
|
|
103
|
+
color: var(--neutral-100);
|
|
100
104
|
overflow-x: auto;
|
|
101
105
|
}
|
|
102
106
|
|
|
@@ -190,30 +194,28 @@
|
|
|
190
194
|
height: auto;
|
|
191
195
|
display: block;
|
|
192
196
|
color: var(--search-loading-color);
|
|
193
|
-
}
|
|
194
197
|
|
|
195
|
-
#ask-netlify-tick-1,
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
animation: tickFlicker 800ms ease-in-out infinite;
|
|
198
|
+
& :where(#ask-netlify-tick-1, #ask-netlify-tick-2, #ask-netlify-tick-3) {
|
|
199
|
+
opacity: 0;
|
|
200
|
+
animation: tickFlicker 800ms ease-in-out infinite;
|
|
201
|
+
}
|
|
200
202
|
}
|
|
201
203
|
|
|
202
204
|
#ask-netlify-tick-1 {
|
|
203
|
-
animation-delay:
|
|
205
|
+
animation-delay: 100ms;
|
|
204
206
|
}
|
|
205
207
|
#ask-netlify-tick-2 {
|
|
206
|
-
animation-delay:
|
|
208
|
+
animation-delay: 200ms;
|
|
207
209
|
}
|
|
208
210
|
#ask-netlify-tick-3 {
|
|
209
|
-
animation-delay:
|
|
211
|
+
animation-delay: 300ms;
|
|
210
212
|
}
|
|
211
213
|
|
|
212
214
|
@keyframes tickFlicker {
|
|
213
215
|
0% {
|
|
214
|
-
opacity:
|
|
216
|
+
opacity: 0;
|
|
215
217
|
}
|
|
216
218
|
100% {
|
|
217
|
-
opacity:
|
|
219
|
+
opacity: 1;
|
|
218
220
|
}
|
|
219
221
|
}
|
|
@@ -123,9 +123,6 @@ function ChatInterface({ setModalState }) {
|
|
|
123
123
|
placeholder="Ask a question..."
|
|
124
124
|
disabled={isGeneratingAnswer}
|
|
125
125
|
/>
|
|
126
|
-
{/* <button type="submit" className="form-submit" disabled={isGeneratingAnswer}>
|
|
127
|
-
Send
|
|
128
|
-
</button> */}
|
|
129
126
|
|
|
130
127
|
{isGeneratingAnswer ? (
|
|
131
128
|
<button
|