@guuey/chat 0.16.8 → 0.16.9
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/README.md +23 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/react/components.d.ts +1 -1
- package/dist/react/components.d.ts.map +1 -1
- package/dist/react/guuey-chat.d.ts +14 -1
- package/dist/react/guuey-chat.d.ts.map +1 -1
- package/dist/react/guuey-chat.js +24 -5
- package/dist/react/markdown.d.ts.map +1 -1
- package/dist/react/markdown.js +65 -1
- package/dist/react/theme-css.d.ts +8 -0
- package/dist/react/theme-css.d.ts.map +1 -1
- package/dist/react/theme-css.js +21 -13
- package/dist/react/transcript.d.ts +8 -0
- package/dist/react/transcript.d.ts.map +1 -1
- package/dist/react/transcript.js +2 -2
- package/dist/strings.d.ts +8 -0
- package/dist/strings.d.ts.map +1 -1
- package/dist/strings.js +3 -0
- package/dist/theme.d.ts +24 -0
- package/dist/theme.d.ts.map +1 -1
- package/dist/theme.js +44 -2
- package/package.json +3 -3
- package/src/index.ts +1 -0
- package/src/react/components.tsx +1 -0
- package/src/react/guuey-chat.tsx +67 -2
- package/src/react/markdown.tsx +65 -1
- package/src/react/theme-css.ts +21 -13
- package/src/react/transcript.tsx +10 -1
- package/src/strings.ts +13 -0
- package/src/theme.ts +48 -2
- package/styles.css +154 -100
package/styles.css
CHANGED
|
@@ -17,10 +17,10 @@
|
|
|
17
17
|
flex-direction: column;
|
|
18
18
|
height: 100%;
|
|
19
19
|
min-height: 0;
|
|
20
|
-
background: var(--guuey-chat-canvas);
|
|
21
|
-
color: var(--guuey-chat-ink);
|
|
22
|
-
font-family: var(--guuey-chat-font, system-ui, -apple-system, sans-serif);
|
|
23
|
-
font-size: calc(15px * var(--guuey-chat-scale, 1));
|
|
20
|
+
background: var(--guuey-chat-canvas, var(--_guuey-chat-canvas));
|
|
21
|
+
color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
22
|
+
font-family: var(--guuey-chat-font, var(--_guuey-chat-font, system-ui, -apple-system, sans-serif));
|
|
23
|
+
font-size: calc(15px * var(--guuey-chat-scale, var(--_guuey-chat-scale, 1)));
|
|
24
24
|
line-height: 1.45;
|
|
25
25
|
}
|
|
26
26
|
|
|
@@ -34,12 +34,41 @@
|
|
|
34
34
|
.guuey-chat-column {
|
|
35
35
|
display: flex;
|
|
36
36
|
flex-direction: column;
|
|
37
|
-
gap: var(--guuey-chat-gap);
|
|
38
|
-
padding: calc(var(--guuey-chat-gap) * 1.5);
|
|
37
|
+
gap: var(--guuey-chat-gap, var(--_guuey-chat-gap));
|
|
38
|
+
padding: calc(var(--guuey-chat-gap, var(--_guuey-chat-gap)) * 1.5);
|
|
39
39
|
max-width: 48rem;
|
|
40
40
|
margin-inline: auto;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
+
/* ── ui/open-link disclosure (guuey#522) — the URL is SHOWN before any
|
|
44
|
+
navigation; Open is the human's own anchor click. ── */
|
|
45
|
+
.guuey-chat-link-ask {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
gap: 8px;
|
|
49
|
+
flex-wrap: wrap;
|
|
50
|
+
margin: 4px calc(var(--guuey-chat-gap) * 1.5);
|
|
51
|
+
padding: 6px 10px;
|
|
52
|
+
border: 1px solid var(--guuey-chat-canvas-muted);
|
|
53
|
+
border-radius: var(--guuey-chat-radius);
|
|
54
|
+
font-size: 0.9em;
|
|
55
|
+
}
|
|
56
|
+
.guuey-chat-link-ask-url {
|
|
57
|
+
color: var(--guuey-chat-ink-muted);
|
|
58
|
+
overflow-wrap: anywhere;
|
|
59
|
+
flex: 1 1 100%;
|
|
60
|
+
}
|
|
61
|
+
.guuey-chat-link-ask-open {
|
|
62
|
+
font-weight: 600;
|
|
63
|
+
}
|
|
64
|
+
.guuey-chat-link-ask-dismiss {
|
|
65
|
+
background: none;
|
|
66
|
+
border: none;
|
|
67
|
+
color: var(--guuey-chat-ink-muted);
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
padding: 0;
|
|
70
|
+
}
|
|
71
|
+
|
|
43
72
|
/* ── R1 tables (guuey#370 — the sdk#23 node) ── */
|
|
44
73
|
.guuey-chat-table-wrap {
|
|
45
74
|
overflow-x: auto; /* wide tables scroll inside the bubble, never the page */
|
|
@@ -50,13 +79,13 @@
|
|
|
50
79
|
}
|
|
51
80
|
.guuey-chat-table th,
|
|
52
81
|
.guuey-chat-table td {
|
|
53
|
-
border: 1px solid var(--guuey-chat-canvas-muted);
|
|
82
|
+
border: 1px solid var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
|
|
54
83
|
padding: 4px 8px;
|
|
55
84
|
text-align: left; /* per-column align from the AST overrides inline */
|
|
56
85
|
}
|
|
57
86
|
.guuey-chat-table th {
|
|
58
87
|
font-weight: 600;
|
|
59
|
-
background: var(--guuey-chat-canvas-muted);
|
|
88
|
+
background: var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
|
|
60
89
|
}
|
|
61
90
|
|
|
62
91
|
/* ── R0 user ── */
|
|
@@ -65,9 +94,9 @@
|
|
|
65
94
|
max-width: 85%;
|
|
66
95
|
}
|
|
67
96
|
.guuey-chat-user-bubble {
|
|
68
|
-
background: var(--guuey-chat-accent);
|
|
69
|
-
color: var(--guuey-chat-on-accent);
|
|
70
|
-
border-radius: var(--guuey-chat-radius);
|
|
97
|
+
background: var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
98
|
+
color: var(--guuey-chat-on-accent, var(--_guuey-chat-on-accent));
|
|
99
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
71
100
|
border-end-end-radius: 4px;
|
|
72
101
|
padding: 8px 12px;
|
|
73
102
|
white-space: pre-wrap;
|
|
@@ -79,14 +108,14 @@
|
|
|
79
108
|
.guuey-chat-send-failed {
|
|
80
109
|
margin: 4px 0 0;
|
|
81
110
|
font-size: 0.85em;
|
|
82
|
-
color: var(--guuey-chat-error);
|
|
111
|
+
color: var(--guuey-chat-error, var(--_guuey-chat-error));
|
|
83
112
|
text-align: end;
|
|
84
113
|
}
|
|
85
114
|
.guuey-chat-retry {
|
|
86
115
|
margin-inline-start: 8px;
|
|
87
|
-
border: 1px solid var(--guuey-chat-error);
|
|
116
|
+
border: 1px solid var(--guuey-chat-error, var(--_guuey-chat-error));
|
|
88
117
|
background: none;
|
|
89
|
-
color: var(--guuey-chat-error);
|
|
118
|
+
color: var(--guuey-chat-error, var(--_guuey-chat-error));
|
|
90
119
|
border-radius: 6px;
|
|
91
120
|
padding: 1px 8px;
|
|
92
121
|
cursor: pointer;
|
|
@@ -98,13 +127,25 @@
|
|
|
98
127
|
.guuey-chat-text {
|
|
99
128
|
align-self: flex-start;
|
|
100
129
|
max-width: 92%;
|
|
101
|
-
background: var(--guuey-chat-surface);
|
|
102
|
-
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 8%, transparent);
|
|
103
|
-
border-radius: var(--guuey-chat-radius);
|
|
130
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
131
|
+
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 8%, transparent);
|
|
132
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
104
133
|
border-end-start-radius: 4px;
|
|
105
134
|
padding: 8px 12px;
|
|
106
135
|
overflow-wrap: anywhere;
|
|
107
136
|
}
|
|
137
|
+
/* The bare surface (guuey#521): assistant text sits directly on the host's
|
|
138
|
+
background — no card, no hairline, no inset — so the transcript reads as
|
|
139
|
+
part of the page it is embedded in. The user pill deliberately stays a
|
|
140
|
+
bubble (the conversational shape survives; only the vendor-styled
|
|
141
|
+
message SURFACE disappears). */
|
|
142
|
+
.guuey-chat--bare .guuey-chat-text {
|
|
143
|
+
max-width: 100%;
|
|
144
|
+
background: none;
|
|
145
|
+
border: 0;
|
|
146
|
+
border-radius: 0;
|
|
147
|
+
padding: 0;
|
|
148
|
+
}
|
|
108
149
|
.guuey-chat-text p {
|
|
109
150
|
margin: 0;
|
|
110
151
|
}
|
|
@@ -124,9 +165,9 @@
|
|
|
124
165
|
}
|
|
125
166
|
.guuey-chat-inline-code,
|
|
126
167
|
.guuey-chat-code-fence {
|
|
127
|
-
font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
|
|
168
|
+
font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
|
|
128
169
|
font-size: 0.88em;
|
|
129
|
-
background: color-mix(in srgb, var(--guuey-chat-ink) 7%, transparent);
|
|
170
|
+
background: color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 7%, transparent);
|
|
130
171
|
border-radius: 5px;
|
|
131
172
|
}
|
|
132
173
|
.guuey-chat-inline-code {
|
|
@@ -141,12 +182,12 @@
|
|
|
141
182
|
margin: 0;
|
|
142
183
|
}
|
|
143
184
|
.guuey-chat-cursor {
|
|
144
|
-
color: var(--guuey-chat-accent);
|
|
185
|
+
color: var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
145
186
|
}
|
|
146
187
|
.guuey-chat-stopped {
|
|
147
188
|
margin: 6px 0 0;
|
|
148
189
|
font-size: 0.85em;
|
|
149
|
-
color: var(--guuey-chat-ink-muted);
|
|
190
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
150
191
|
}
|
|
151
192
|
|
|
152
193
|
/* ── Toggles (R2/R3/R4/R9/R15 headers) ── */
|
|
@@ -156,7 +197,7 @@
|
|
|
156
197
|
gap: 6px;
|
|
157
198
|
border: 0;
|
|
158
199
|
background: none;
|
|
159
|
-
color: var(--guuey-chat-ink-muted);
|
|
200
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
160
201
|
font: inherit;
|
|
161
202
|
font-size: 0.9em;
|
|
162
203
|
padding: 2px 4px;
|
|
@@ -164,10 +205,10 @@
|
|
|
164
205
|
cursor: pointer;
|
|
165
206
|
}
|
|
166
207
|
.guuey-chat-toggle:hover {
|
|
167
|
-
background: color-mix(in srgb, var(--guuey-chat-ink) 6%, transparent);
|
|
208
|
+
background: color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 6%, transparent);
|
|
168
209
|
}
|
|
169
210
|
.guuey-chat-toggle:focus-visible {
|
|
170
|
-
outline: 2px solid var(--guuey-chat-accent);
|
|
211
|
+
outline: 2px solid var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
171
212
|
outline-offset: 1px;
|
|
172
213
|
}
|
|
173
214
|
.guuey-chat-body {
|
|
@@ -186,17 +227,17 @@
|
|
|
186
227
|
animation: guuey-chat-spin 1s linear infinite;
|
|
187
228
|
}
|
|
188
229
|
.guuey-chat-tool-failed {
|
|
189
|
-
color: var(--guuey-chat-error);
|
|
230
|
+
color: var(--guuey-chat-error, var(--_guuey-chat-error));
|
|
190
231
|
}
|
|
191
232
|
.guuey-chat-tool-note {
|
|
192
|
-
color: var(--guuey-chat-ink-muted);
|
|
233
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
193
234
|
font-size: 0.85em;
|
|
194
235
|
}
|
|
195
236
|
.guuey-chat-tool-args,
|
|
196
237
|
.guuey-chat-data-preview {
|
|
197
|
-
font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
|
|
238
|
+
font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
|
|
198
239
|
font-size: 0.82em;
|
|
199
|
-
background: color-mix(in srgb, var(--guuey-chat-ink) 5%, transparent);
|
|
240
|
+
background: color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 5%, transparent);
|
|
200
241
|
border-radius: 6px;
|
|
201
242
|
padding: 6px 8px;
|
|
202
243
|
margin: 4px 0;
|
|
@@ -207,7 +248,7 @@
|
|
|
207
248
|
/* ── R4 group ── */
|
|
208
249
|
.guuey-chat-failure-badge {
|
|
209
250
|
margin-inline-start: 8px;
|
|
210
|
-
color: var(--guuey-chat-error);
|
|
251
|
+
color: var(--guuey-chat-error, var(--_guuey-chat-error));
|
|
211
252
|
font-size: 0.85em;
|
|
212
253
|
}
|
|
213
254
|
|
|
@@ -216,19 +257,19 @@
|
|
|
216
257
|
display: flex;
|
|
217
258
|
gap: 8px;
|
|
218
259
|
align-items: center;
|
|
219
|
-
color: var(--guuey-chat-ink-muted);
|
|
260
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
220
261
|
font-size: 0.8em;
|
|
221
262
|
}
|
|
222
263
|
.guuey-chat-data-empty,
|
|
223
264
|
.guuey-chat-data-binary {
|
|
224
|
-
color: var(--guuey-chat-ink-muted);
|
|
265
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
225
266
|
font-size: 0.85em;
|
|
226
267
|
margin: 2px 0;
|
|
227
268
|
}
|
|
228
269
|
.guuey-chat-copy {
|
|
229
270
|
border: 0;
|
|
230
271
|
background: none;
|
|
231
|
-
color: var(--guuey-chat-ink-muted);
|
|
272
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
232
273
|
font: inherit;
|
|
233
274
|
font-size: 0.9em;
|
|
234
275
|
cursor: pointer;
|
|
@@ -237,10 +278,10 @@
|
|
|
237
278
|
|
|
238
279
|
/* ── R6 views ── */
|
|
239
280
|
.guuey-chat-view {
|
|
240
|
-
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 8%, transparent);
|
|
241
|
-
border-radius: var(--guuey-chat-radius);
|
|
281
|
+
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 8%, transparent);
|
|
282
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
242
283
|
overflow: hidden;
|
|
243
|
-
background: var(--guuey-chat-surface);
|
|
284
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
244
285
|
min-height: 3rem;
|
|
245
286
|
}
|
|
246
287
|
.guuey-chat-view iframe {
|
|
@@ -250,25 +291,25 @@
|
|
|
250
291
|
.guuey-chat-view-expired p {
|
|
251
292
|
margin: 0;
|
|
252
293
|
padding: 12px;
|
|
253
|
-
color: var(--guuey-chat-ink-muted);
|
|
294
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
254
295
|
font-size: 0.9em;
|
|
255
296
|
}
|
|
256
297
|
.guuey-chat-attribution {
|
|
257
298
|
margin: 0;
|
|
258
299
|
padding: 4px 12px;
|
|
259
|
-
color: var(--guuey-chat-ink-muted);
|
|
300
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
260
301
|
font-size: 0.78em;
|
|
261
|
-
border-top: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 6%, transparent);
|
|
302
|
+
border-top: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 6%, transparent);
|
|
262
303
|
}
|
|
263
304
|
/* guuey#204: the promoted-view reference chip — compact, never a frame. */
|
|
264
305
|
.guuey-chat-view-ref {
|
|
265
306
|
display: inline-block;
|
|
266
307
|
margin: 0;
|
|
267
308
|
padding: 6px 12px;
|
|
268
|
-
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 12%, transparent);
|
|
309
|
+
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 12%, transparent);
|
|
269
310
|
border-radius: 999px;
|
|
270
|
-
background: var(--guuey-chat-surface);
|
|
271
|
-
color: var(--guuey-chat-ink-muted);
|
|
311
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
312
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
272
313
|
font-size: 0.85em;
|
|
273
314
|
line-height: 1.2;
|
|
274
315
|
}
|
|
@@ -278,14 +319,14 @@
|
|
|
278
319
|
font-size: 0.85em;
|
|
279
320
|
}
|
|
280
321
|
.guuey-chat-view-ref-button:hover {
|
|
281
|
-
color: var(--guuey-chat-ink);
|
|
282
|
-
border-color: color-mix(in srgb, var(--guuey-chat-ink) 24%, transparent);
|
|
322
|
+
color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
323
|
+
border-color: color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 24%, transparent);
|
|
283
324
|
}
|
|
284
325
|
/* guuey#301 chips presentation: the selected (on-stage) chip + honest expired state. */
|
|
285
326
|
.guuey-chat-view-ref-selected {
|
|
286
|
-
border-color: var(--guuey-chat-accent);
|
|
287
|
-
color: var(--guuey-chat-ink);
|
|
288
|
-
background: color-mix(in srgb, var(--guuey-chat-accent) 12%, var(--guuey-chat-surface));
|
|
327
|
+
border-color: var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
328
|
+
color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
329
|
+
background: color-mix(in srgb, var(--guuey-chat-accent, var(--_guuey-chat-accent)) 12%, var(--guuey-chat-surface, var(--_guuey-chat-surface)));
|
|
289
330
|
}
|
|
290
331
|
.guuey-chat-view-ref-expired {
|
|
291
332
|
opacity: 0.6;
|
|
@@ -296,24 +337,24 @@
|
|
|
296
337
|
.guuey-chat-media-image img {
|
|
297
338
|
max-width: 100%;
|
|
298
339
|
max-height: var(--guuey-chat-image-cap, 20rem);
|
|
299
|
-
border-radius: var(--guuey-chat-radius);
|
|
340
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
300
341
|
display: block;
|
|
301
342
|
}
|
|
302
343
|
.guuey-chat-media-chip {
|
|
303
344
|
display: inline-block;
|
|
304
|
-
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 12%, transparent);
|
|
345
|
+
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 12%, transparent);
|
|
305
346
|
border-radius: 999px;
|
|
306
347
|
padding: 2px 10px;
|
|
307
348
|
font-size: 0.85em;
|
|
308
|
-
color: var(--guuey-chat-ink-muted);
|
|
349
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
309
350
|
}
|
|
310
351
|
|
|
311
352
|
/* ── R8 code ── */
|
|
312
353
|
.guuey-chat-code pre {
|
|
313
|
-
font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
|
|
354
|
+
font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
|
|
314
355
|
font-size: 0.85em;
|
|
315
|
-
background: color-mix(in srgb, var(--guuey-chat-ink) 6%, transparent);
|
|
316
|
-
border-radius: var(--guuey-chat-radius);
|
|
356
|
+
background: color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 6%, transparent);
|
|
357
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
317
358
|
padding: 10px 12px;
|
|
318
359
|
margin: 0;
|
|
319
360
|
max-height: var(--guuey-chat-code-cap, 16rem);
|
|
@@ -325,7 +366,7 @@
|
|
|
325
366
|
.guuey-chat-code-meta {
|
|
326
367
|
display: flex;
|
|
327
368
|
justify-content: space-between;
|
|
328
|
-
color: var(--guuey-chat-ink-muted);
|
|
369
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
329
370
|
font-size: 0.8em;
|
|
330
371
|
padding: 2px 4px;
|
|
331
372
|
}
|
|
@@ -342,9 +383,9 @@
|
|
|
342
383
|
|
|
343
384
|
/* ── R10 prompts ── */
|
|
344
385
|
.guuey-chat-prompt {
|
|
345
|
-
border: 1px solid var(--guuey-chat-accent);
|
|
346
|
-
border-radius: var(--guuey-chat-radius);
|
|
347
|
-
background: var(--guuey-chat-surface);
|
|
386
|
+
border: 1px solid var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
387
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
388
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
348
389
|
padding: 12px;
|
|
349
390
|
}
|
|
350
391
|
.guuey-chat-prompt-ask {
|
|
@@ -359,21 +400,21 @@
|
|
|
359
400
|
border-radius: 8px;
|
|
360
401
|
padding: 4px 14px;
|
|
361
402
|
cursor: pointer;
|
|
362
|
-
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 15%, transparent);
|
|
363
|
-
background: var(--guuey-chat-surface);
|
|
364
|
-
color: var(--guuey-chat-ink);
|
|
403
|
+
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 15%, transparent);
|
|
404
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
405
|
+
color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
365
406
|
}
|
|
366
407
|
.guuey-chat-prompt-accept {
|
|
367
|
-
background: var(--guuey-chat-accent) !important;
|
|
368
|
-
color: var(--guuey-chat-on-accent) !important;
|
|
408
|
+
background: var(--guuey-chat-accent, var(--_guuey-chat-accent)) !important;
|
|
409
|
+
color: var(--guuey-chat-on-accent, var(--_guuey-chat-on-accent)) !important;
|
|
369
410
|
border-color: transparent !important;
|
|
370
411
|
}
|
|
371
412
|
.guuey-chat-prompt-actions button:focus-visible {
|
|
372
|
-
outline: 2px solid var(--guuey-chat-accent);
|
|
413
|
+
outline: 2px solid var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
373
414
|
outline-offset: 1px;
|
|
374
415
|
}
|
|
375
416
|
.guuey-chat-prompt-record {
|
|
376
|
-
color: var(--guuey-chat-ink-muted);
|
|
417
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
377
418
|
font-size: 0.85em;
|
|
378
419
|
margin: 0;
|
|
379
420
|
}
|
|
@@ -388,27 +429,27 @@
|
|
|
388
429
|
margin: 0;
|
|
389
430
|
padding: 8px 12px;
|
|
390
431
|
font-size: 0.85em;
|
|
391
|
-
color: var(--guuey-chat-ink);
|
|
392
|
-
background: color-mix(in srgb, var(--guuey-chat-accent) 10%, var(--guuey-chat-surface));
|
|
393
|
-
border-top: 1px solid var(--guuey-chat-canvas-muted);
|
|
432
|
+
color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
433
|
+
background: color-mix(in srgb, var(--guuey-chat-accent, var(--_guuey-chat-accent)) 10%, var(--guuey-chat-surface, var(--_guuey-chat-surface)));
|
|
434
|
+
border-top: 1px solid var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
|
|
394
435
|
}
|
|
395
436
|
.guuey-chat-oauth-error {
|
|
396
|
-
background: color-mix(in srgb, var(--guuey-chat-error) 7%, var(--guuey-chat-surface));
|
|
437
|
+
background: color-mix(in srgb, var(--guuey-chat-error, var(--_guuey-chat-error)) 7%, var(--guuey-chat-surface, var(--_guuey-chat-surface)));
|
|
397
438
|
}
|
|
398
439
|
.guuey-chat-oauth-dismiss {
|
|
399
440
|
font: inherit;
|
|
400
441
|
cursor: pointer;
|
|
401
442
|
border: 0;
|
|
402
443
|
background: transparent;
|
|
403
|
-
color: var(--guuey-chat-ink-muted);
|
|
444
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
404
445
|
text-decoration: underline;
|
|
405
446
|
}
|
|
406
447
|
|
|
407
448
|
/* ── R11 errors ── */
|
|
408
449
|
.guuey-chat-error {
|
|
409
|
-
border: 1px solid color-mix(in srgb, var(--guuey-chat-error) 45%, transparent);
|
|
410
|
-
border-radius: var(--guuey-chat-radius);
|
|
411
|
-
background: color-mix(in srgb, var(--guuey-chat-error) 7%, var(--guuey-chat-surface));
|
|
450
|
+
border: 1px solid color-mix(in srgb, var(--guuey-chat-error, var(--_guuey-chat-error)) 45%, transparent);
|
|
451
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
452
|
+
background: color-mix(in srgb, var(--guuey-chat-error, var(--_guuey-chat-error)) 7%, var(--guuey-chat-surface, var(--_guuey-chat-surface)));
|
|
412
453
|
padding: 10px 12px;
|
|
413
454
|
}
|
|
414
455
|
.guuey-chat-error p {
|
|
@@ -417,8 +458,8 @@
|
|
|
417
458
|
.guuey-chat-error-action {
|
|
418
459
|
margin-top: 6px;
|
|
419
460
|
font: inherit;
|
|
420
|
-
border: 1px solid var(--guuey-chat-error);
|
|
421
|
-
color: var(--guuey-chat-error);
|
|
461
|
+
border: 1px solid var(--guuey-chat-error, var(--_guuey-chat-error));
|
|
462
|
+
color: var(--guuey-chat-error, var(--_guuey-chat-error));
|
|
422
463
|
background: none;
|
|
423
464
|
border-radius: 8px;
|
|
424
465
|
padding: 2px 10px;
|
|
@@ -426,45 +467,45 @@
|
|
|
426
467
|
}
|
|
427
468
|
.guuey-chat-error-verbatim {
|
|
428
469
|
margin: 8px 0 0;
|
|
429
|
-
font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
|
|
470
|
+
font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
|
|
430
471
|
font-size: 0.8em;
|
|
431
|
-
color: var(--guuey-chat-ink-muted);
|
|
472
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
432
473
|
white-space: pre-wrap;
|
|
433
474
|
}
|
|
434
475
|
|
|
435
476
|
/* ── R12 status ── */
|
|
436
477
|
.guuey-chat-status {
|
|
437
478
|
margin: 0;
|
|
438
|
-
color: var(--guuey-chat-ink-muted);
|
|
479
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
439
480
|
font-size: 0.9em;
|
|
440
481
|
}
|
|
441
482
|
.guuey-chat-status-detail {
|
|
442
|
-
font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
|
|
483
|
+
font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
|
|
443
484
|
font-size: 0.85em;
|
|
444
485
|
}
|
|
445
486
|
|
|
446
487
|
/* ── R13/R14/R15 ── */
|
|
447
488
|
.guuey-chat-history {
|
|
448
|
-
color: var(--guuey-chat-ink-muted);
|
|
489
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
449
490
|
text-align: center;
|
|
450
491
|
font-size: 0.9em;
|
|
451
492
|
padding: 8px;
|
|
452
493
|
}
|
|
453
494
|
.guuey-chat-compaction {
|
|
454
|
-
color: var(--guuey-chat-ink-muted);
|
|
495
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
455
496
|
font-size: 0.8em;
|
|
456
497
|
text-align: center;
|
|
457
|
-
border-top: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 8%, transparent);
|
|
498
|
+
border-top: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 8%, transparent);
|
|
458
499
|
padding-top: 6px;
|
|
459
500
|
margin-top: 4px;
|
|
460
501
|
}
|
|
461
502
|
.guuey-chat-unknown-type,
|
|
462
503
|
.guuey-chat-unknown-size {
|
|
463
|
-
color: var(--guuey-chat-ink-muted);
|
|
504
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
464
505
|
font-size: 0.85em;
|
|
465
506
|
}
|
|
466
507
|
.guuey-chat-unknown-raw {
|
|
467
|
-
font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
|
|
508
|
+
font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
|
|
468
509
|
font-size: 0.8em;
|
|
469
510
|
max-height: 16rem;
|
|
470
511
|
overflow: auto;
|
|
@@ -475,9 +516,9 @@
|
|
|
475
516
|
align-self: center;
|
|
476
517
|
font: inherit;
|
|
477
518
|
font-size: 0.85em;
|
|
478
|
-
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 12%, transparent);
|
|
479
|
-
background: var(--guuey-chat-surface);
|
|
480
|
-
color: var(--guuey-chat-ink-muted);
|
|
519
|
+
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 12%, transparent);
|
|
520
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
521
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
481
522
|
border-radius: 999px;
|
|
482
523
|
padding: 3px 14px;
|
|
483
524
|
cursor: pointer;
|
|
@@ -489,8 +530,8 @@
|
|
|
489
530
|
font: inherit;
|
|
490
531
|
font-size: 0.85em;
|
|
491
532
|
border: 0;
|
|
492
|
-
background: var(--guuey-chat-ink);
|
|
493
|
-
color: var(--guuey-chat-canvas);
|
|
533
|
+
background: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
534
|
+
color: var(--guuey-chat-canvas, var(--_guuey-chat-canvas));
|
|
494
535
|
border-radius: 999px;
|
|
495
536
|
padding: 6px 14px;
|
|
496
537
|
cursor: pointer;
|
|
@@ -500,7 +541,7 @@
|
|
|
500
541
|
.guuey-chat-show-earlier:focus-visible,
|
|
501
542
|
.guuey-chat-copy:focus-visible,
|
|
502
543
|
.guuey-chat-retry:focus-visible {
|
|
503
|
-
outline: 2px solid var(--guuey-chat-accent);
|
|
544
|
+
outline: 2px solid var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
504
545
|
outline-offset: 1px;
|
|
505
546
|
}
|
|
506
547
|
|
|
@@ -545,8 +586,8 @@
|
|
|
545
586
|
align-items: flex-end;
|
|
546
587
|
gap: 8px;
|
|
547
588
|
padding: 8px 12px;
|
|
548
|
-
background: var(--guuey-chat-canvas);
|
|
549
|
-
border-top: 1px solid var(--guuey-chat-canvas-muted);
|
|
589
|
+
background: var(--guuey-chat-canvas, var(--_guuey-chat-canvas));
|
|
590
|
+
border-top: 1px solid var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
|
|
550
591
|
}
|
|
551
592
|
.guuey-chat-composer-input {
|
|
552
593
|
flex: 1;
|
|
@@ -554,15 +595,28 @@
|
|
|
554
595
|
max-height: 9rem;
|
|
555
596
|
overflow-y: auto;
|
|
556
597
|
padding: 10px 14px;
|
|
557
|
-
border: 1px solid var(--guuey-chat-canvas-muted);
|
|
558
|
-
border-radius: var(--guuey-chat-radius);
|
|
559
|
-
background: var(--guuey-chat-surface);
|
|
560
|
-
color: var(--guuey-chat-ink);
|
|
598
|
+
border: 1px solid var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
|
|
599
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
600
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
601
|
+
color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
561
602
|
font: inherit;
|
|
562
603
|
}
|
|
604
|
+
/* iOS Safari auto-zooms the page when a focused control's font-size is
|
|
605
|
+
under its 16px no-zoom threshold. The kit root is 15px (× scale), and
|
|
606
|
+
this input is `font: inherit` — one px under, so focusing the composer
|
|
607
|
+
zoomed the whole page and the panel visually overflowed the viewport
|
|
608
|
+
(guuey#516, founder real-device report 2026-08-30; the widget loader's
|
|
609
|
+
own width clamp was correct). Floor the input at 16px on touch-primary
|
|
610
|
+
devices only — max() preserves host upscaling (--guuey-chat-scale >
|
|
611
|
+
16/15), and desktop keeps the 15px look untouched. */
|
|
612
|
+
@media (hover: none) and (pointer: coarse) {
|
|
613
|
+
.guuey-chat-composer-input {
|
|
614
|
+
font-size: max(16px, calc(15px * var(--guuey-chat-scale, var(--_guuey-chat-scale, 1))));
|
|
615
|
+
}
|
|
616
|
+
}
|
|
563
617
|
.guuey-chat-composer-input:focus {
|
|
564
618
|
outline: none;
|
|
565
|
-
border-color: var(--guuey-chat-accent);
|
|
619
|
+
border-color: var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
566
620
|
}
|
|
567
621
|
.guuey-chat-composer-input:disabled {
|
|
568
622
|
opacity: 0.5;
|
|
@@ -572,19 +626,19 @@
|
|
|
572
626
|
flex-shrink: 0;
|
|
573
627
|
padding: 10px 16px;
|
|
574
628
|
border: 0;
|
|
575
|
-
border-radius: var(--guuey-chat-radius);
|
|
629
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
576
630
|
font: inherit;
|
|
577
631
|
cursor: pointer;
|
|
578
632
|
}
|
|
579
633
|
.guuey-chat-composer-send {
|
|
580
|
-
background: var(--guuey-chat-accent);
|
|
581
|
-
color: var(--guuey-chat-on-accent);
|
|
634
|
+
background: var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
635
|
+
color: var(--guuey-chat-on-accent, var(--_guuey-chat-on-accent));
|
|
582
636
|
}
|
|
583
637
|
.guuey-chat-composer-send:disabled {
|
|
584
638
|
cursor: not-allowed;
|
|
585
639
|
opacity: 0.4;
|
|
586
640
|
}
|
|
587
641
|
.guuey-chat-composer-stop {
|
|
588
|
-
background: var(--guuey-chat-canvas-muted);
|
|
589
|
-
color: var(--guuey-chat-ink);
|
|
642
|
+
background: var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
|
|
643
|
+
color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
590
644
|
}
|