Skip to content

Commit 6a98d0f

Browse files
G4brymdanielgekGregBrimble
authored
Add rate limit to nlweb template (#772)
Co-authored-by: Daniel Leal <dleal@cloudflare.com> Co-authored-by: Greg Brimble <gbrimble@cloudflare.com>
1 parent c49a1c1 commit 6a98d0f

File tree

11 files changed

+381
-222
lines changed

11 files changed

+381
-222
lines changed

‎nlweb-template/public/chat-page-styles.css‎

Lines changed: 112 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,78 @@
1-
/* Page-specific styles for chat pages */
1+
:root {
2+
--nl-web-sidebar-width: 260px;
3+
--nl-web-primary-color: #5e5eff;
4+
--nl-web-text-primary: #0d0d0d;
5+
--nl-web-text-secondary: #666;
6+
--nl-web-bg-primary: #ffffff;
7+
--nl-web-bg-secondary: #f7f7f8;
8+
--nl-web-bg-sidebar: #f9f9f9;
9+
--nl-web-border-color: #e5e5e5;
10+
--nl-web-hover-bg: #f0f0f0;
11+
--nl-web-message-user-bg: #f7f7f8;
12+
--nl-web-message-assistant-bg: #ffffff;
13+
--nl-web-input-bg: #ffffff;
14+
--nl-web-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
15+
--nl-web-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
16+
--nl-web-transition: all 0.2s ease;
17+
}
18+
19+
* {
20+
margin: 0;
21+
padding: 0;
22+
box-sizing: border-box;
23+
}
24+
225
body {
26+
font-family:
27+
-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
28+
sans-serif;
29+
background-color: var(--nl-web-bg-primary);
30+
color: var(--nl-web-text-primary);
331
height: 100vh;
432
overflow: hidden;
533
}
634

35+
/* Scrollbar Styling */
36+
::-webkit-scrollbar {
37+
width: 8px;
38+
height: 8px;
39+
}
40+
41+
::-webkit-scrollbar-track {
42+
background: transparent;
43+
}
44+
45+
::-webkit-scrollbar-thumb {
46+
background: #d0d0d0;
47+
border-radius: 4px;
48+
}
49+
50+
::-webkit-scrollbar-thumb:hover {
51+
background: #b0b0b0;
52+
}
53+
54+
/* Page-specific styles for chat pages */
55+
756
.app-container {
857
display: flex;
958
height: 100vh;
59+
font-family:
60+
-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
61+
sans-serif;
62+
background-color: var(--nl-web-bg-primary);
63+
color: var(--nl-web-text-primary);
64+
height: 100vh;
65+
overflow: hidden;
1066
}
1167

1268
/* Site selector dropdown */
1369
.site-dropdown {
1470
position: absolute;
1571
left: 0;
16-
background-color: var(--bg-primary);
17-
border: 1px solid var(--border-color);
72+
background-color: var(--nl-web-bg-primary);
73+
border: 1px solid var(--nl-web-border-color);
1874
border-radius: 8px;
19-
box-shadow: var(--shadow-md);
75+
box-shadow: var(--nl-web-shadow-md);
2076
padding: 8px;
2177
min-width: 200px;
2278
max-height: 300px;
@@ -44,22 +100,22 @@ body {
44100
padding: 8px 12px;
45101
border-radius: 6px;
46102
cursor: pointer;
47-
transition: var(--transition);
103+
transition: var(--nl-web-transition);
48104
font-size: 14px;
49105
}
50106

51107
.site-dropdown-item:hover {
52-
background-color: var(--hover-bg);
108+
background-color: var(--nl-web-hover-bg);
53109
}
54110

55111
.site-dropdown-item.selected {
56-
background-color: var(--primary-color);
112+
background-color: var(--nl-web-primary-color);
57113
color: white;
58114
}
59115

60116
.site-dropdown-header {
61117
font-size: 12px;
62-
color: var(--text-secondary);
118+
color: var(--nl-web-text-secondary);
63119
padding: 4px 12px;
64120
font-weight: 600;
65121
}
@@ -81,17 +137,17 @@ body {
81137
display: flex;
82138
align-items: center;
83139
justify-content: center;
84-
transition: var(--transition);
140+
transition: var(--nl-web-transition);
85141
}
86142

87143
.site-selector-icon:hover {
88-
background-color: var(--hover-bg);
144+
background-color: var(--nl-web-hover-bg);
89145
}
90146

91147
.site-selector-icon svg {
92148
width: 16px;
93149
height: 16px;
94-
color: var(--text-secondary);
150+
color: var(--nl-web-text-secondary);
95151
}
96152

97153
.input-mode-selector {
@@ -109,26 +165,26 @@ body {
109165
display: flex;
110166
align-items: center;
111167
justify-content: center;
112-
transition: var(--transition);
168+
transition: var(--nl-web-transition);
113169
}
114170

115171
.mode-selector-icon:hover {
116-
background-color: var(--hover-bg);
172+
background-color: var(--nl-web-hover-bg);
117173
}
118174

119175
.mode-selector-icon svg {
120176
width: 16px;
121177
height: 16px;
122-
color: var(--text-secondary);
178+
color: var(--nl-web-text-secondary);
123179
}
124180

125181
.mode-dropdown {
126182
position: absolute;
127183
left: 0;
128-
background-color: var(--bg-primary);
129-
border: 1px solid var(--border-color);
184+
background-color: var(--nl-web-bg-primary);
185+
border: 1px solid var(--nl-web-border-color);
130186
border-radius: 8px;
131-
box-shadow: var(--shadow-md);
187+
box-shadow: var(--nl-web-shadow-md);
132188
padding: 8px;
133189
min-width: 150px;
134190
display: none;
@@ -154,25 +210,25 @@ body {
154210
padding: 8px 12px;
155211
font-weight: 600;
156212
font-size: 13px;
157-
color: var(--text-secondary);
158-
border-bottom: 1px solid var(--border-color);
213+
color: var(--nl-web-text-secondary);
214+
border-bottom: 1px solid var(--nl-web-border-color);
159215
margin-bottom: 4px;
160216
}
161217

162218
.mode-dropdown-item {
163219
padding: 8px 12px;
164220
border-radius: 6px;
165221
cursor: pointer;
166-
transition: var(--transition);
222+
transition: var(--nl-web-transition);
167223
font-size: 14px;
168224
}
169225

170226
.mode-dropdown-item:hover {
171-
background-color: var(--hover-bg);
227+
background-color: var(--nl-web-hover-bg);
172228
}
173229

174230
.mode-dropdown-item.selected {
175-
background-color: var(--primary-color);
231+
background-color: var(--nl-web-primary-color);
176232
color: white;
177233
}
178234
.mode-dropdown-item[data-mode="generate"] {
@@ -197,8 +253,8 @@ body {
197253

198254
/* Input Area */
199255
.chat-input-container {
200-
border-top: 1px solid var(--border-color);
201-
background-color: var(--bg-primary);
256+
border-top: 1px solid var(--nl-web-border-color);
257+
background-color: var(--nl-web-bg-primary);
202258
padding: 16px 0;
203259
}
204260

@@ -209,19 +265,19 @@ body {
209265
}
210266

211267
.chat-input-box {
212-
background-color: var(--bg-secondary);
213-
border: 1px solid var(--border-color);
268+
background-color: var(--nl-web-bg-secondary);
269+
border: 1px solid var(--nl-web-border-color);
214270
border-radius: 12px;
215271
padding: 12px 16px;
216272
display: flex;
217273
align-items: flex-end;
218274
gap: 12px;
219-
box-shadow: var(--shadow-sm);
220-
transition: var(--transition);
275+
box-shadow: var(--nl-web-shadow-sm);
276+
transition: var(--nl-web-transition);
221277
}
222278

223279
.chat-input-box:focus-within {
224-
border-color: var(--primary-color);
280+
border-color: var(--nl-web-primary-color);
225281
box-shadow: 0 0 0 3px rgba(94, 94, 255, 0.1);
226282
}
227283

@@ -244,12 +300,12 @@ body {
244300

245301
.send-button {
246302
background-color: transparent;
247-
color: var(--text-secondary);
303+
color: var(--nl-web-text-secondary);
248304
border: none;
249305
border-radius: 6px;
250306
padding: 6px;
251307
cursor: pointer;
252-
transition: var(--transition);
308+
transition: var(--nl-web-transition);
253309
display: flex;
254310
align-items: center;
255311
justify-content: center;
@@ -258,8 +314,8 @@ body {
258314
}
259315

260316
.send-button:hover {
261-
background-color: var(--hover-bg);
262-
color: var(--text-primary);
317+
background-color: var(--nl-web-hover-bg);
318+
color: var(--nl-web-text-primary);
263319
}
264320

265321
.send-button:disabled {
@@ -276,23 +332,23 @@ body {
276332
.search-results {
277333
margin-top: 16px;
278334
padding-top: 16px;
279-
border-top: 1px solid var(--border-color);
335+
border-top: 1px solid var(--nl-web-border-color);
280336
}
281337

282338
.search-result-item {
283339
margin-bottom: 16px;
284340
padding: 12px;
285-
background-color: var(--bg-secondary);
341+
background-color: var(--nl-web-bg-secondary);
286342
border-radius: 8px;
287-
transition: var(--transition);
343+
transition: var(--nl-web-transition);
288344
}
289345

290346
.search-result-item:hover {
291-
background-color: var(--hover-bg);
347+
background-color: var(--nl-web-hover-bg);
292348
}
293349

294350
.result-title {
295-
color: var(--primary-color);
351+
color: var(--nl-web-primary-color);
296352
text-decoration: none;
297353
font-weight: 500;
298354
font-size: 16px;
@@ -305,7 +361,7 @@ body {
305361
}
306362

307363
.result-description {
308-
color: var(--text-secondary);
364+
color: var(--nl-web-text-secondary);
309365
font-size: 14px;
310366
line-height: 1.4;
311367
}
@@ -347,49 +403,49 @@ body {
347403

348404
.site-selector-wrapper label {
349405
font-size: 14px;
350-
color: var(--text-secondary);
406+
color: var(--nl-web-text-secondary);
351407
font-weight: 500;
352408
}
353409

354410
.site-select {
355411
flex: 1;
356412
padding: 8px 12px;
357-
border: 1px solid var(--border-color);
413+
border: 1px solid var(--nl-web-border-color);
358414
border-radius: 8px;
359415
font-size: 14px;
360-
background-color: var(--bg-primary);
361-
color: var(--text-primary);
416+
background-color: var(--nl-web-bg-primary);
417+
color: var(--nl-web-text-primary);
362418
cursor: pointer;
363-
transition: var(--transition);
419+
transition: var(--nl-web-transition);
364420
}
365421

366422
.site-select:hover {
367-
border-color: var(--primary-color);
423+
border-color: var(--nl-web-primary-color);
368424
}
369425

370426
.site-select:focus {
371427
outline: none;
372-
border-color: var(--primary-color);
428+
border-color: var(--nl-web-primary-color);
373429
box-shadow: 0 0 0 3px rgba(94, 94, 255, 0.1);
374430
}
375431

376432
.centered-input-box {
377-
background-color: var(--bg-secondary);
378-
border: 1px solid var(--border-color);
433+
background-color: var(--nl-web-bg-secondary);
434+
border: 1px solid var(--nl-web-border-color);
379435
border-radius: 12px;
380436
padding: 20px;
381437
display: flex;
382438
flex-direction: column;
383439
gap: 0;
384-
box-shadow: var(--shadow-md);
385-
transition: var(--transition);
440+
box-shadow: var(--nl-web-shadow-md);
441+
transition: var(--nl-web-transition);
386442
}
387443

388444
.centered-input-box:focus-within {
389-
border-color: var(--primary-color);
445+
border-color: var(--nl-web-primary-color);
390446
box-shadow:
391447
0 0 0 3px rgba(94, 94, 255, 0.1),
392-
var(--shadow-md);
448+
var(--nl-web-shadow-md);
393449
}
394450

395451
.centered-chat-input {
@@ -413,12 +469,12 @@ body {
413469

414470
.centered-send-button {
415471
background-color: transparent;
416-
color: var(--text-secondary);
472+
color: var(--nl-web-text-secondary);
417473
border: none;
418474
border-radius: 6px;
419475
padding: 6px;
420476
cursor: pointer;
421-
transition: var(--transition);
477+
transition: var(--nl-web-transition);
422478
display: flex;
423479
align-items: center;
424480
justify-content: center;
@@ -427,8 +483,8 @@ body {
427483
}
428484

429485
.centered-send-button:hover {
430-
background-color: var(--hover-bg);
431-
color: var(--text-primary);
486+
background-color: var(--nl-web-hover-bg);
487+
color: var(--nl-web-text-primary);
432488
}
433489

434490
.centered-send-button:disabled {

0 commit comments

Comments
 (0)