@nqminds/mcp-client 1.0.5 → 1.0.8
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/dist/MCPChat.d.ts +1 -1
- package/dist/MCPChat.d.ts.map +1 -1
- package/dist/MCPChat.js +190 -87
- package/dist/openai-client.d.ts.map +1 -1
- package/dist/openai-client.js +58 -2
- package/dist/styles/MCPChat.css +583 -72
- package/dist/types.d.ts +2 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +4 -2
package/dist/styles/MCPChat.css
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/* MCP Chat Component Styles */
|
|
2
2
|
|
|
3
|
-
/*
|
|
4
|
-
|
|
3
|
+
/* ── Dark theme (default) ──────────────────────────────────────────────────── */
|
|
4
|
+
.mcp-root {
|
|
5
|
+
display: contents;
|
|
5
6
|
--mcp-primary-color: #4ea1ff;
|
|
6
7
|
--mcp-bg: #0b0d12;
|
|
7
8
|
--mcp-card-bg: #121621;
|
|
@@ -15,56 +16,148 @@
|
|
|
15
16
|
--mcp-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
|
|
16
17
|
}
|
|
17
18
|
|
|
18
|
-
/*
|
|
19
|
-
.mcp-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
/* ── Light theme ────────────────────────────────────────────────────────────── */
|
|
20
|
+
.mcp-root[data-theme="light"] {
|
|
21
|
+
--mcp-primary-color: #1d6fe8;
|
|
22
|
+
--mcp-bg: #f5f7fb;
|
|
23
|
+
--mcp-card-bg: #ffffff;
|
|
24
|
+
--mcp-text: #111827;
|
|
25
|
+
--mcp-text-secondary: #6b7280;
|
|
26
|
+
--mcp-border: #e2e8f0;
|
|
27
|
+
--mcp-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
|
|
24
28
|
}
|
|
25
29
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
/* ── Overlay backdrop adjustments per theme ─────────────────────────────────── */
|
|
31
|
+
.mcp-root[data-theme="light"] .mcp-overlay {
|
|
32
|
+
background: rgba(100, 116, 139, 0.35);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.mcp-root[data-theme="light"] .mcp-direct-overlay {
|
|
36
|
+
background: rgba(241, 245, 249, 0.92);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.mcp-root[data-theme="light"] .mcp-direct-panel {
|
|
40
|
+
box-shadow: 0 8px 40px rgba(245, 158, 11, 0.12);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.mcp-root[data-theme="light"] .mcp-chat-message-user .mcp-chat-message-bubble {
|
|
44
|
+
background: var(--mcp-primary-color);
|
|
45
|
+
color: #fff;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.mcp-root[data-theme="light"] .mcp-chat-message-assistant .mcp-chat-message-bubble {
|
|
49
|
+
background: #f0f4ff;
|
|
50
|
+
border-color: #d1dafe;
|
|
51
|
+
color: var(--mcp-text);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.mcp-root[data-theme="light"] .mcp-preparing-banner {
|
|
55
|
+
background: rgba(29, 111, 232, 0.08);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.mcp-root[data-theme="light"] .mcp-chat-thinking {
|
|
59
|
+
background: #f0f4ff;
|
|
60
|
+
border-color: #d1dafe;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.mcp-root[data-theme="light"] .mcp-btn-dev {
|
|
64
|
+
border-color: #d97706;
|
|
65
|
+
color: #d97706;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.mcp-root[data-theme="light"] .mcp-btn-dev:hover:not(:disabled) {
|
|
69
|
+
background: #d97706;
|
|
70
|
+
color: #fff;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* ───────────────────────────────────────────────
|
|
74
|
+
Theme-toggle button
|
|
75
|
+
─────────────────────────────────────────────── */
|
|
76
|
+
.mcp-btn-theme {
|
|
77
|
+
background: transparent;
|
|
78
|
+
border: 1px solid var(--mcp-border);
|
|
79
|
+
color: var(--mcp-text-secondary);
|
|
80
|
+
font-size: 16px;
|
|
81
|
+
padding: 6px 10px;
|
|
82
|
+
border-radius: 8px;
|
|
83
|
+
cursor: pointer;
|
|
84
|
+
line-height: 1;
|
|
85
|
+
transition: border-color 0.2s, color 0.2s, background 0.2s;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.mcp-btn-theme:hover {
|
|
89
|
+
border-color: var(--mcp-primary-color);
|
|
90
|
+
color: var(--mcp-primary-color);
|
|
91
|
+
background: rgba(78, 161, 255, 0.06);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* ───────────────────────────────────────────────
|
|
95
|
+
Floating icon (fixed, bottom-right)
|
|
96
|
+
─────────────────────────────────────────────── */
|
|
97
|
+
.mcp-float-icon {
|
|
98
|
+
position: fixed;
|
|
99
|
+
bottom: 28px;
|
|
100
|
+
right: 28px;
|
|
101
|
+
z-index: 1100;
|
|
102
|
+
width: 56px;
|
|
103
|
+
height: 56px;
|
|
104
|
+
border-radius: 50%;
|
|
32
105
|
background: var(--mcp-primary-color);
|
|
33
|
-
color: white;
|
|
34
106
|
border: none;
|
|
35
107
|
cursor: pointer;
|
|
36
|
-
font-
|
|
108
|
+
font-size: 26px;
|
|
109
|
+
display: flex;
|
|
110
|
+
align-items: center;
|
|
111
|
+
justify-content: center;
|
|
112
|
+
box-shadow: 0 4px 20px rgba(78, 161, 255, 0.4);
|
|
37
113
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
38
114
|
}
|
|
39
115
|
|
|
40
|
-
.mcp-
|
|
41
|
-
transform:
|
|
42
|
-
box-shadow: 0 8px 30px rgba(
|
|
116
|
+
.mcp-float-icon:hover {
|
|
117
|
+
transform: scale(1.1);
|
|
118
|
+
box-shadow: 0 8px 30px rgba(78, 161, 255, 0.5);
|
|
43
119
|
}
|
|
44
120
|
|
|
45
|
-
|
|
46
|
-
|
|
121
|
+
/* ───────────────────────────────────────────────
|
|
122
|
+
Overlay backdrop + panel
|
|
123
|
+
─────────────────────────────────────────────── */
|
|
124
|
+
.mcp-overlay {
|
|
125
|
+
position: fixed;
|
|
126
|
+
inset: 0;
|
|
127
|
+
z-index: 1200;
|
|
128
|
+
display: flex;
|
|
129
|
+
align-items: center;
|
|
130
|
+
justify-content: center;
|
|
131
|
+
/* semi-transparent backdrop */
|
|
132
|
+
background: rgba(0, 0, 0, 0.45);
|
|
47
133
|
}
|
|
48
134
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
max-width: calc(100vw - 48px);
|
|
56
|
-
height: 700px;
|
|
57
|
-
max-height: calc(100vh - 48px);
|
|
135
|
+
.mcp-panel {
|
|
136
|
+
position: relative;
|
|
137
|
+
width: 90vw;
|
|
138
|
+
height: 90vh;
|
|
139
|
+
/* leave room for top nav (assume ~64px) */
|
|
140
|
+
max-height: calc(100vh - 80px);
|
|
58
141
|
background: var(--mcp-bg);
|
|
59
142
|
border: 1px solid var(--mcp-border);
|
|
60
143
|
border-radius: var(--mcp-border-radius);
|
|
61
144
|
box-shadow: var(--mcp-box-shadow);
|
|
62
145
|
display: flex;
|
|
63
146
|
flex-direction: column;
|
|
64
|
-
|
|
147
|
+
overflow: hidden;
|
|
148
|
+
animation: mcp-panel-in 0.2s ease;
|
|
149
|
+
/* push it slightly down so the top nav stays visible */
|
|
150
|
+
margin-top: 64px;
|
|
65
151
|
}
|
|
66
152
|
|
|
67
|
-
|
|
153
|
+
@keyframes mcp-panel-in {
|
|
154
|
+
from { opacity: 0; transform: scale(0.97) translateY(12px); }
|
|
155
|
+
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* ───────────────────────────────────────────────
|
|
159
|
+
Header
|
|
160
|
+
─────────────────────────────────────────────── */
|
|
68
161
|
.mcp-chat-header {
|
|
69
162
|
padding: 18px 24px;
|
|
70
163
|
border-bottom: 1px solid var(--mcp-border);
|
|
@@ -74,6 +167,19 @@
|
|
|
74
167
|
background: var(--mcp-card-bg);
|
|
75
168
|
border-top-left-radius: var(--mcp-border-radius);
|
|
76
169
|
border-top-right-radius: var(--mcp-border-radius);
|
|
170
|
+
flex-shrink: 0;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.mcp-chat-header-left {
|
|
174
|
+
display: flex;
|
|
175
|
+
align-items: center;
|
|
176
|
+
gap: 10px;
|
|
177
|
+
overflow: hidden;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.mcp-chat-header-icon {
|
|
181
|
+
font-size: 22px;
|
|
182
|
+
flex-shrink: 0;
|
|
77
183
|
}
|
|
78
184
|
|
|
79
185
|
.mcp-chat-title {
|
|
@@ -81,14 +187,30 @@
|
|
|
81
187
|
font-size: 20px;
|
|
82
188
|
font-weight: 600;
|
|
83
189
|
color: var(--mcp-text);
|
|
190
|
+
white-space: nowrap;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.mcp-chat-header-company {
|
|
194
|
+
font-size: 13px;
|
|
195
|
+
color: var(--mcp-text-secondary);
|
|
196
|
+
background: rgba(255,255,255,0.06);
|
|
197
|
+
padding: 3px 10px;
|
|
198
|
+
border-radius: 20px;
|
|
199
|
+
white-space: nowrap;
|
|
200
|
+
overflow: hidden;
|
|
201
|
+
text-overflow: ellipsis;
|
|
202
|
+
max-width: 240px;
|
|
84
203
|
}
|
|
85
204
|
|
|
86
205
|
.mcp-chat-header-actions {
|
|
87
206
|
display: flex;
|
|
88
207
|
gap: 10px;
|
|
208
|
+
flex-shrink: 0;
|
|
89
209
|
}
|
|
90
210
|
|
|
91
|
-
/*
|
|
211
|
+
/* ───────────────────────────────────────────────
|
|
212
|
+
Buttons
|
|
213
|
+
─────────────────────────────────────────────── */
|
|
92
214
|
.mcp-chat-button {
|
|
93
215
|
padding: 8px 16px;
|
|
94
216
|
font-size: 14px;
|
|
@@ -127,7 +249,44 @@
|
|
|
127
249
|
background: rgba(255, 255, 255, 0.05);
|
|
128
250
|
}
|
|
129
251
|
|
|
130
|
-
|
|
252
|
+
.mcp-btn-icon {
|
|
253
|
+
padding: 8px 12px;
|
|
254
|
+
font-size: 13px;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* ───────────────────────────────────────────────
|
|
258
|
+
"Preparing" banner
|
|
259
|
+
─────────────────────────────────────────────── */
|
|
260
|
+
.mcp-preparing-banner {
|
|
261
|
+
display: flex;
|
|
262
|
+
align-items: center;
|
|
263
|
+
gap: 10px;
|
|
264
|
+
padding: 10px 20px;
|
|
265
|
+
background: rgba(78, 161, 255, 0.1);
|
|
266
|
+
border-bottom: 1px solid var(--mcp-border);
|
|
267
|
+
font-size: 14px;
|
|
268
|
+
color: var(--mcp-text-secondary);
|
|
269
|
+
flex-shrink: 0;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.mcp-preparing-spinner {
|
|
273
|
+
display: inline-block;
|
|
274
|
+
width: 14px;
|
|
275
|
+
height: 14px;
|
|
276
|
+
border: 2px solid rgba(78, 161, 255, 0.3);
|
|
277
|
+
border-top-color: var(--mcp-primary-color);
|
|
278
|
+
border-radius: 50%;
|
|
279
|
+
animation: mcp-spin 0.7s linear infinite;
|
|
280
|
+
flex-shrink: 0;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
@keyframes mcp-spin {
|
|
284
|
+
to { transform: rotate(360deg); }
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
/* ───────────────────────────────────────────────
|
|
288
|
+
Messages area
|
|
289
|
+
─────────────────────────────────────────────── */
|
|
131
290
|
.mcp-chat-messages {
|
|
132
291
|
flex: 1;
|
|
133
292
|
overflow-y: auto;
|
|
@@ -137,33 +296,115 @@
|
|
|
137
296
|
gap: 16px;
|
|
138
297
|
}
|
|
139
298
|
|
|
140
|
-
/*
|
|
141
|
-
|
|
299
|
+
/* ───────────────────────────────────────────────
|
|
300
|
+
Home screen (action cards shown inside panel)
|
|
301
|
+
─────────────────────────────────────────────── */
|
|
302
|
+
.mcp-home {
|
|
303
|
+
display: flex;
|
|
304
|
+
flex-direction: column;
|
|
305
|
+
align-items: center;
|
|
306
|
+
gap: 24px;
|
|
307
|
+
padding: 24px 0;
|
|
308
|
+
flex: 1;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.mcp-home-title {
|
|
312
|
+
font-size: 22px;
|
|
313
|
+
font-weight: 600;
|
|
314
|
+
color: var(--mcp-text);
|
|
315
|
+
margin: 0;
|
|
142
316
|
text-align: center;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.mcp-home-subtitle {
|
|
320
|
+
font-size: 15px;
|
|
143
321
|
color: var(--mcp-text-secondary);
|
|
144
|
-
margin
|
|
322
|
+
margin: -16px 0 0;
|
|
323
|
+
text-align: center;
|
|
145
324
|
}
|
|
146
325
|
|
|
147
|
-
.mcp-
|
|
148
|
-
|
|
149
|
-
|
|
326
|
+
.mcp-action-grid {
|
|
327
|
+
display: grid;
|
|
328
|
+
grid-template-columns: repeat(3, 1fr);
|
|
329
|
+
gap: 16px;
|
|
330
|
+
width: 100%;
|
|
331
|
+
max-width: 860px;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
@media (max-width: 700px) {
|
|
335
|
+
.mcp-action-grid {
|
|
336
|
+
grid-template-columns: repeat(2, 1fr);
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
@media (max-width: 420px) {
|
|
341
|
+
.mcp-action-grid {
|
|
342
|
+
grid-template-columns: 1fr;
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.mcp-action-card {
|
|
347
|
+
display: flex;
|
|
348
|
+
flex-direction: column;
|
|
349
|
+
align-items: center;
|
|
350
|
+
justify-content: center;
|
|
351
|
+
gap: 10px;
|
|
352
|
+
padding: 22px 16px;
|
|
353
|
+
background: var(--mcp-card-bg);
|
|
354
|
+
border: 1px solid var(--mcp-border);
|
|
355
|
+
border-radius: var(--mcp-border-radius);
|
|
150
356
|
color: var(--mcp-text);
|
|
357
|
+
cursor: pointer;
|
|
358
|
+
font-family: inherit;
|
|
359
|
+
font-size: 15px;
|
|
360
|
+
font-weight: 500;
|
|
361
|
+
text-align: center;
|
|
362
|
+
transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
|
|
363
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
|
|
151
364
|
}
|
|
152
365
|
|
|
153
|
-
.mcp-
|
|
154
|
-
|
|
155
|
-
|
|
366
|
+
.mcp-action-card:hover {
|
|
367
|
+
border-color: var(--mcp-primary-color);
|
|
368
|
+
transform: translateY(-2px);
|
|
369
|
+
box-shadow: 0 6px 20px rgba(78, 161, 255, 0.15);
|
|
156
370
|
}
|
|
157
371
|
|
|
158
|
-
.mcp-
|
|
159
|
-
|
|
372
|
+
.mcp-action-card:active {
|
|
373
|
+
transform: translateY(0);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.mcp-action-card-icon {
|
|
377
|
+
font-size: 28px;
|
|
378
|
+
line-height: 1;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.mcp-action-card-label {
|
|
382
|
+
color: var(--mcp-text);
|
|
383
|
+
font-size: 14px;
|
|
384
|
+
font-weight: 500;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.mcp-chat-now-button {
|
|
388
|
+
padding: 12px 36px;
|
|
160
389
|
font-size: 15px;
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
390
|
+
font-weight: 600;
|
|
391
|
+
font-family: inherit;
|
|
392
|
+
border-radius: 28px;
|
|
393
|
+
background: transparent;
|
|
394
|
+
color: var(--mcp-primary-color);
|
|
395
|
+
border: 1px solid var(--mcp-primary-color);
|
|
396
|
+
cursor: pointer;
|
|
397
|
+
transition: background 0.2s, color 0.2s;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.mcp-chat-now-button:hover {
|
|
401
|
+
background: var(--mcp-primary-color);
|
|
402
|
+
color: white;
|
|
164
403
|
}
|
|
165
404
|
|
|
166
|
-
/*
|
|
405
|
+
/* ───────────────────────────────────────────────
|
|
406
|
+
Message bubbles
|
|
407
|
+
─────────────────────────────────────────────── */
|
|
167
408
|
.mcp-chat-message {
|
|
168
409
|
display: flex;
|
|
169
410
|
max-width: 85%;
|
|
@@ -175,6 +416,7 @@
|
|
|
175
416
|
|
|
176
417
|
.mcp-chat-message-assistant {
|
|
177
418
|
align-self: flex-start;
|
|
419
|
+
max-width: 90%;
|
|
178
420
|
}
|
|
179
421
|
|
|
180
422
|
.mcp-chat-message-bubble {
|
|
@@ -191,6 +433,7 @@
|
|
|
191
433
|
background: var(--mcp-card-bg);
|
|
192
434
|
border: 1px solid var(--mcp-border);
|
|
193
435
|
color: var(--mcp-text);
|
|
436
|
+
width: 100%;
|
|
194
437
|
}
|
|
195
438
|
|
|
196
439
|
.mcp-chat-message-content {
|
|
@@ -205,66 +448,186 @@
|
|
|
205
448
|
margin-top: 6px;
|
|
206
449
|
}
|
|
207
450
|
|
|
208
|
-
/*
|
|
451
|
+
/* ───────────────────────────────────────────────
|
|
452
|
+
Markdown
|
|
453
|
+
─────────────────────────────────────────────── */
|
|
209
454
|
.markdown-content {
|
|
210
455
|
font-size: 15px;
|
|
211
456
|
line-height: 1.6;
|
|
457
|
+
color: inherit;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
/* Paragraphs */
|
|
461
|
+
.markdown-content p { margin: 0 0 12px 0; }
|
|
462
|
+
.markdown-content p:last-child { margin-bottom: 0; }
|
|
463
|
+
|
|
464
|
+
/* Headings */
|
|
465
|
+
.markdown-content h1,
|
|
466
|
+
.markdown-content h2,
|
|
467
|
+
.markdown-content h3,
|
|
468
|
+
.markdown-content h4,
|
|
469
|
+
.markdown-content h5,
|
|
470
|
+
.markdown-content h6 {
|
|
471
|
+
font-weight: 700;
|
|
472
|
+
line-height: 1.3;
|
|
473
|
+
margin: 16px 0 8px 0;
|
|
474
|
+
color: var(--mcp-text);
|
|
212
475
|
}
|
|
213
|
-
|
|
214
|
-
.markdown-content
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
.markdown-content
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
476
|
+
.markdown-content h1 { font-size: 1.4em; }
|
|
477
|
+
.markdown-content h2 { font-size: 1.25em; }
|
|
478
|
+
.markdown-content h3 { font-size: 1.1em; }
|
|
479
|
+
.markdown-content h4,
|
|
480
|
+
.markdown-content h5,
|
|
481
|
+
.markdown-content h6 { font-size: 1em; }
|
|
482
|
+
.markdown-content h1:first-child,
|
|
483
|
+
.markdown-content h2:first-child,
|
|
484
|
+
.markdown-content h3:first-child { margin-top: 0; }
|
|
485
|
+
|
|
486
|
+
/* Bold & italic */
|
|
487
|
+
.markdown-content strong { font-weight: 700; }
|
|
488
|
+
.markdown-content em { font-style: italic; }
|
|
489
|
+
.markdown-content strong em,
|
|
490
|
+
.markdown-content em strong { font-weight: 700; font-style: italic; }
|
|
491
|
+
|
|
492
|
+
/* Strikethrough (GFM) */
|
|
493
|
+
.markdown-content del { text-decoration: line-through; opacity: 0.7; }
|
|
494
|
+
|
|
495
|
+
/* Lists */
|
|
222
496
|
.markdown-content ul,
|
|
223
|
-
.markdown-content ol {
|
|
497
|
+
.markdown-content ol { margin: 0 0 12px 0; padding-left: 22px; }
|
|
498
|
+
.markdown-content li { margin: 4px 0; }
|
|
499
|
+
.markdown-content li > p { margin-bottom: 4px; }
|
|
500
|
+
/* Task lists (GFM) */
|
|
501
|
+
.markdown-content input[type="checkbox"] {
|
|
502
|
+
margin-right: 6px;
|
|
503
|
+
accent-color: var(--mcp-primary-color);
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
/* Links */
|
|
507
|
+
.markdown-content a {
|
|
508
|
+
color: var(--mcp-primary-color);
|
|
509
|
+
text-decoration: underline;
|
|
510
|
+
text-underline-offset: 2px;
|
|
511
|
+
word-break: break-all;
|
|
512
|
+
}
|
|
513
|
+
.markdown-content a:hover { opacity: 0.8; }
|
|
514
|
+
|
|
515
|
+
/* Blockquotes */
|
|
516
|
+
.markdown-content blockquote {
|
|
224
517
|
margin: 0 0 12px 0;
|
|
225
|
-
padding
|
|
518
|
+
padding: 8px 14px;
|
|
519
|
+
border-left: 3px solid var(--mcp-primary-color);
|
|
520
|
+
background: rgba(78, 161, 255, 0.07);
|
|
521
|
+
border-radius: 0 6px 6px 0;
|
|
522
|
+
color: var(--mcp-text-secondary);
|
|
523
|
+
font-style: italic;
|
|
226
524
|
}
|
|
525
|
+
.markdown-content blockquote p:last-child { margin-bottom: 0; }
|
|
227
526
|
|
|
228
|
-
|
|
229
|
-
|
|
527
|
+
/* Horizontal rule */
|
|
528
|
+
.markdown-content hr {
|
|
529
|
+
border: none;
|
|
530
|
+
border-top: 1px solid var(--mcp-border);
|
|
531
|
+
margin: 16px 0;
|
|
230
532
|
}
|
|
231
533
|
|
|
534
|
+
/* Inline code */
|
|
232
535
|
.markdown-content code {
|
|
233
536
|
background: rgba(255, 255, 255, 0.1);
|
|
234
537
|
padding: 2px 6px;
|
|
235
538
|
border-radius: 4px;
|
|
236
|
-
font-size:
|
|
237
|
-
font-family: ui-monospace, monospace;
|
|
539
|
+
font-size: 13px;
|
|
540
|
+
font-family: ui-monospace, 'Cascadia Code', 'Fira Mono', monospace;
|
|
238
541
|
}
|
|
239
542
|
|
|
543
|
+
/* Code blocks */
|
|
240
544
|
.markdown-content pre {
|
|
241
545
|
background: rgba(255, 255, 255, 0.05);
|
|
242
|
-
padding: 12px;
|
|
546
|
+
padding: 12px 16px;
|
|
243
547
|
border-radius: 8px;
|
|
244
548
|
overflow-x: auto;
|
|
245
549
|
margin: 0 0 12px 0;
|
|
550
|
+
border: 1px solid var(--mcp-border);
|
|
246
551
|
}
|
|
247
|
-
|
|
248
552
|
.markdown-content pre code {
|
|
249
553
|
background: none;
|
|
250
554
|
padding: 0;
|
|
555
|
+
font-size: 13px;
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
/* Tables (GFM) */
|
|
559
|
+
.markdown-content table {
|
|
560
|
+
width: 100%;
|
|
561
|
+
border-collapse: collapse;
|
|
562
|
+
margin: 0 0 14px 0;
|
|
563
|
+
font-size: 14px;
|
|
564
|
+
display: block;
|
|
565
|
+
overflow-x: auto;
|
|
566
|
+
}
|
|
567
|
+
.markdown-content thead { background: rgba(78, 161, 255, 0.12); }
|
|
568
|
+
.markdown-content th {
|
|
569
|
+
text-align: left;
|
|
570
|
+
font-weight: 600;
|
|
571
|
+
padding: 8px 12px;
|
|
572
|
+
border: 1px solid var(--mcp-border);
|
|
573
|
+
white-space: nowrap;
|
|
574
|
+
color: var(--mcp-text);
|
|
575
|
+
}
|
|
576
|
+
.markdown-content td {
|
|
577
|
+
padding: 7px 12px;
|
|
578
|
+
border: 1px solid var(--mcp-border);
|
|
579
|
+
vertical-align: top;
|
|
580
|
+
color: var(--mcp-text);
|
|
581
|
+
}
|
|
582
|
+
.markdown-content tbody tr:nth-child(even) {
|
|
583
|
+
background: rgba(255, 255, 255, 0.03);
|
|
584
|
+
}
|
|
585
|
+
.markdown-content tbody tr:hover {
|
|
586
|
+
background: rgba(78, 161, 255, 0.06);
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
/* Light theme overrides for markdown */
|
|
590
|
+
.mcp-root[data-theme="light"] .markdown-content code {
|
|
591
|
+
background: rgba(0, 0, 0, 0.06);
|
|
592
|
+
}
|
|
593
|
+
.mcp-root[data-theme="light"] .markdown-content pre {
|
|
594
|
+
background: rgba(0, 0, 0, 0.03);
|
|
595
|
+
}
|
|
596
|
+
.mcp-root[data-theme="light"] .markdown-content thead {
|
|
597
|
+
background: rgba(29, 111, 232, 0.08);
|
|
598
|
+
}
|
|
599
|
+
.mcp-root[data-theme="light"] .markdown-content tbody tr:nth-child(even) {
|
|
600
|
+
background: rgba(0, 0, 0, 0.02);
|
|
601
|
+
}
|
|
602
|
+
.mcp-root[data-theme="light"] .markdown-content tbody tr:hover {
|
|
603
|
+
background: rgba(29, 111, 232, 0.05);
|
|
604
|
+
}
|
|
605
|
+
.mcp-root[data-theme="light"] .markdown-content blockquote {
|
|
606
|
+
background: rgba(29, 111, 232, 0.05);
|
|
251
607
|
}
|
|
252
608
|
|
|
253
|
-
/*
|
|
609
|
+
/* ───────────────────────────────────────────────
|
|
610
|
+
Thinking steps
|
|
611
|
+
─────────────────────────────────────────────── */
|
|
254
612
|
.mcp-chat-thinking {
|
|
255
613
|
padding: 14px 18px;
|
|
256
614
|
border-radius: 12px;
|
|
257
615
|
background: var(--mcp-card-bg);
|
|
258
616
|
border: 1px solid var(--mcp-border);
|
|
259
617
|
width: 100%;
|
|
618
|
+
display: flex;
|
|
619
|
+
flex-direction: column;
|
|
620
|
+
gap: 8px;
|
|
260
621
|
}
|
|
261
622
|
|
|
262
623
|
.mcp-chat-thinking-title {
|
|
263
624
|
font-size: 14px;
|
|
264
625
|
font-weight: 600;
|
|
265
|
-
margin-bottom: 8px;
|
|
266
626
|
opacity: 0.8;
|
|
267
627
|
color: var(--mcp-text);
|
|
628
|
+
display: flex;
|
|
629
|
+
align-items: center;
|
|
630
|
+
gap: 8px;
|
|
268
631
|
}
|
|
269
632
|
|
|
270
633
|
.mcp-chat-thinking-steps {
|
|
@@ -285,7 +648,9 @@
|
|
|
285
648
|
border-bottom: none;
|
|
286
649
|
}
|
|
287
650
|
|
|
288
|
-
/*
|
|
651
|
+
/* ───────────────────────────────────────────────
|
|
652
|
+
Input form
|
|
653
|
+
─────────────────────────────────────────────── */
|
|
289
654
|
.mcp-chat-input-form {
|
|
290
655
|
padding: 20px;
|
|
291
656
|
border-top: 1px solid var(--mcp-border);
|
|
@@ -294,6 +659,7 @@
|
|
|
294
659
|
background: var(--mcp-card-bg);
|
|
295
660
|
border-bottom-left-radius: var(--mcp-border-radius);
|
|
296
661
|
border-bottom-right-radius: var(--mcp-border-radius);
|
|
662
|
+
flex-shrink: 0;
|
|
297
663
|
}
|
|
298
664
|
|
|
299
665
|
.mcp-chat-input {
|
|
@@ -317,10 +683,12 @@
|
|
|
317
683
|
cursor: not-allowed;
|
|
318
684
|
}
|
|
319
685
|
|
|
320
|
-
/*
|
|
686
|
+
/* ───────────────────────────────────────────────
|
|
687
|
+
Scrollbars
|
|
688
|
+
─────────────────────────────────────────────── */
|
|
321
689
|
.mcp-chat-messages::-webkit-scrollbar,
|
|
322
690
|
.mcp-chat-thinking-steps::-webkit-scrollbar {
|
|
323
|
-
width:
|
|
691
|
+
width: 6px;
|
|
324
692
|
}
|
|
325
693
|
|
|
326
694
|
.mcp-chat-messages::-webkit-scrollbar-track,
|
|
@@ -338,3 +706,146 @@
|
|
|
338
706
|
.mcp-chat-thinking-steps::-webkit-scrollbar-thumb:hover {
|
|
339
707
|
background: var(--mcp-text-secondary);
|
|
340
708
|
}
|
|
709
|
+
|
|
710
|
+
/* ───────────────────────────────────────────────
|
|
711
|
+
Dev button
|
|
712
|
+
─────────────────────────────────────────────── */
|
|
713
|
+
.mcp-btn-dev {
|
|
714
|
+
background: transparent;
|
|
715
|
+
border: 1px dashed #f59e0b;
|
|
716
|
+
color: #f59e0b;
|
|
717
|
+
font-size: 12px;
|
|
718
|
+
padding: 6px 12px;
|
|
719
|
+
border-radius: 8px;
|
|
720
|
+
cursor: pointer;
|
|
721
|
+
font-family: inherit;
|
|
722
|
+
font-weight: 600;
|
|
723
|
+
transition: background 0.2s, color 0.2s;
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
.mcp-btn-dev:hover:not(:disabled) {
|
|
727
|
+
background: #f59e0b;
|
|
728
|
+
color: #0b0d12;
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
.mcp-btn-dev:disabled {
|
|
732
|
+
opacity: 0.4;
|
|
733
|
+
cursor: not-allowed;
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
/* ───────────────────────────────────────────────
|
|
737
|
+
Direct-prompt overlay (sits inside .mcp-panel)
|
|
738
|
+
─────────────────────────────────────────────── */
|
|
739
|
+
.mcp-direct-overlay {
|
|
740
|
+
position: absolute;
|
|
741
|
+
inset: 0;
|
|
742
|
+
z-index: 10;
|
|
743
|
+
background: rgba(11, 13, 18, 0.92);
|
|
744
|
+
display: flex;
|
|
745
|
+
align-items: center;
|
|
746
|
+
justify-content: center;
|
|
747
|
+
padding: 24px;
|
|
748
|
+
box-sizing: border-box;
|
|
749
|
+
border-radius: var(--mcp-border-radius);
|
|
750
|
+
}
|
|
751
|
+
|
|
752
|
+
.mcp-direct-panel {
|
|
753
|
+
width: 100%;
|
|
754
|
+
max-width: 780px;
|
|
755
|
+
background: var(--mcp-card-bg);
|
|
756
|
+
border: 1px dashed #f59e0b;
|
|
757
|
+
border-radius: var(--mcp-border-radius);
|
|
758
|
+
display: flex;
|
|
759
|
+
flex-direction: column;
|
|
760
|
+
gap: 0;
|
|
761
|
+
overflow: hidden;
|
|
762
|
+
box-shadow: 0 8px 40px rgba(245, 158, 11, 0.15);
|
|
763
|
+
}
|
|
764
|
+
|
|
765
|
+
.mcp-direct-header {
|
|
766
|
+
display: flex;
|
|
767
|
+
justify-content: space-between;
|
|
768
|
+
align-items: center;
|
|
769
|
+
padding: 14px 18px;
|
|
770
|
+
border-bottom: 1px solid var(--mcp-border);
|
|
771
|
+
background: rgba(245, 158, 11, 0.06);
|
|
772
|
+
}
|
|
773
|
+
|
|
774
|
+
.mcp-direct-title {
|
|
775
|
+
font-size: 15px;
|
|
776
|
+
font-weight: 700;
|
|
777
|
+
color: #f59e0b;
|
|
778
|
+
letter-spacing: 0.02em;
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
.mcp-direct-presets {
|
|
782
|
+
display: flex;
|
|
783
|
+
flex-wrap: wrap;
|
|
784
|
+
gap: 8px;
|
|
785
|
+
align-items: center;
|
|
786
|
+
padding: 12px 16px;
|
|
787
|
+
border-bottom: 1px solid var(--mcp-border);
|
|
788
|
+
background: rgba(255, 255, 255, 0.02);
|
|
789
|
+
}
|
|
790
|
+
|
|
791
|
+
.mcp-direct-presets-label {
|
|
792
|
+
font-size: 12px;
|
|
793
|
+
color: var(--mcp-text-secondary);
|
|
794
|
+
white-space: nowrap;
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
.mcp-direct-preset-chip {
|
|
798
|
+
font-size: 12px;
|
|
799
|
+
padding: 4px 10px;
|
|
800
|
+
border-radius: 20px;
|
|
801
|
+
border: 1px solid var(--mcp-border);
|
|
802
|
+
background: transparent;
|
|
803
|
+
color: var(--mcp-text-secondary);
|
|
804
|
+
cursor: pointer;
|
|
805
|
+
font-family: inherit;
|
|
806
|
+
transition: border-color 0.15s, color 0.15s;
|
|
807
|
+
white-space: nowrap;
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
.mcp-direct-preset-chip:hover {
|
|
811
|
+
border-color: #f59e0b;
|
|
812
|
+
color: #f59e0b;
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
.mcp-direct-textarea {
|
|
816
|
+
width: 100%;
|
|
817
|
+
box-sizing: border-box;
|
|
818
|
+
padding: 16px;
|
|
819
|
+
font-size: 14px;
|
|
820
|
+
font-family: ui-monospace, 'Cascadia Code', monospace;
|
|
821
|
+
line-height: 1.6;
|
|
822
|
+
background: var(--mcp-bg);
|
|
823
|
+
color: var(--mcp-text);
|
|
824
|
+
border: none;
|
|
825
|
+
border-bottom: 1px solid var(--mcp-border);
|
|
826
|
+
resize: vertical;
|
|
827
|
+
min-height: 220px;
|
|
828
|
+
outline: none;
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
.mcp-direct-textarea:focus {
|
|
832
|
+
background: rgba(255, 255, 255, 0.02);
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
.mcp-direct-footer {
|
|
836
|
+
display: flex;
|
|
837
|
+
justify-content: space-between;
|
|
838
|
+
align-items: center;
|
|
839
|
+
padding: 12px 16px;
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
.mcp-direct-hint {
|
|
843
|
+
font-size: 12px;
|
|
844
|
+
color: var(--mcp-text-secondary);
|
|
845
|
+
opacity: 0.7;
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
.mcp-direct-footer-actions {
|
|
849
|
+
display: flex;
|
|
850
|
+
gap: 8px;
|
|
851
|
+
}
|