@guuey/chat 0.16.8 → 0.16.10
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/plan.d.ts.map +1 -1
- package/dist/plan.js +28 -7
- package/dist/react/components.d.ts +1 -1
- package/dist/react/components.d.ts.map +1 -1
- package/dist/react/guuey-chat.d.ts +69 -1
- package/dist/react/guuey-chat.d.ts.map +1 -1
- package/dist/react/guuey-chat.js +116 -6
- package/dist/react/markdown.d.ts +0 -26
- package/dist/react/markdown.d.ts.map +1 -1
- package/dist/react/markdown.js +115 -2
- 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 +24 -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 +19 -0
- package/dist/strings.d.ts.map +1 -1
- package/dist/strings.js +6 -0
- package/dist/theme.d.ts +28 -0
- package/dist/theme.d.ts.map +1 -1
- package/dist/theme.js +67 -2
- package/dist/types.d.ts +13 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/index.ts +1 -0
- package/src/plan.ts +27 -8
- package/src/react/components.tsx +1 -0
- package/src/react/guuey-chat.tsx +237 -2
- package/src/react/markdown.tsx +104 -2
- package/src/react/theme-css.ts +24 -13
- package/src/react/transcript.tsx +10 -1
- package/src/strings.ts +30 -0
- package/src/theme.ts +71 -2
- package/src/types.ts +14 -1
- package/styles.css +239 -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,83 @@
|
|
|
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
|
+
/* ── suggestion chips (guuey#533) — empty-state only, one-tap-sends;
|
|
44
|
+
restyled ENTIRELY by the #521 composable tokens (surface/ink/radius
|
|
45
|
+
— no new tokens). ── */
|
|
46
|
+
.guuey-chat-chips-row {
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-wrap: wrap;
|
|
49
|
+
gap: 8px;
|
|
50
|
+
padding: 4px calc(var(--guuey-chat-gap) * 1.5);
|
|
51
|
+
}
|
|
52
|
+
.guuey-chat-chip {
|
|
53
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
54
|
+
color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
55
|
+
border: 1px solid var(--guuey-chat-ink-muted);
|
|
56
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
57
|
+
padding: 6px 12px;
|
|
58
|
+
font-size: 0.85em;
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
text-align: start;
|
|
61
|
+
}
|
|
62
|
+
.guuey-chat-chip:hover {
|
|
63
|
+
border-color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* ── forget-this-device (guuey#526) — quiet, right-aligned, two-tap. ── */
|
|
67
|
+
.guuey-chat-clear-row {
|
|
68
|
+
display: flex;
|
|
69
|
+
justify-content: flex-end;
|
|
70
|
+
padding: 0 calc(var(--guuey-chat-gap) * 1.5);
|
|
71
|
+
}
|
|
72
|
+
.guuey-chat-clear {
|
|
73
|
+
background: none;
|
|
74
|
+
border: none;
|
|
75
|
+
padding: 2px 4px;
|
|
76
|
+
font-size: 0.8em;
|
|
77
|
+
color: var(--guuey-chat-ink-muted);
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
}
|
|
80
|
+
.guuey-chat-clear-armed {
|
|
81
|
+
color: var(--guuey-chat-error);
|
|
82
|
+
font-weight: 600;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* ── ui/open-link disclosure (guuey#522) — the URL is SHOWN before any
|
|
86
|
+
navigation; Open is the human's own anchor click. ── */
|
|
87
|
+
.guuey-chat-link-ask {
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
gap: 8px;
|
|
91
|
+
flex-wrap: wrap;
|
|
92
|
+
margin: 4px calc(var(--guuey-chat-gap) * 1.5);
|
|
93
|
+
padding: 6px 10px;
|
|
94
|
+
border: 1px solid var(--guuey-chat-canvas-muted);
|
|
95
|
+
border-radius: var(--guuey-chat-radius);
|
|
96
|
+
font-size: 0.9em;
|
|
97
|
+
}
|
|
98
|
+
.guuey-chat-link-ask-url {
|
|
99
|
+
color: var(--guuey-chat-ink-muted);
|
|
100
|
+
overflow-wrap: anywhere;
|
|
101
|
+
flex: 1 1 100%;
|
|
102
|
+
}
|
|
103
|
+
.guuey-chat-link-ask-open {
|
|
104
|
+
font-weight: 600;
|
|
105
|
+
}
|
|
106
|
+
.guuey-chat-link-ask-dismiss {
|
|
107
|
+
background: none;
|
|
108
|
+
border: none;
|
|
109
|
+
color: var(--guuey-chat-ink-muted);
|
|
110
|
+
cursor: pointer;
|
|
111
|
+
padding: 0;
|
|
112
|
+
}
|
|
113
|
+
|
|
43
114
|
/* ── R1 tables (guuey#370 — the sdk#23 node) ── */
|
|
44
115
|
.guuey-chat-table-wrap {
|
|
45
116
|
overflow-x: auto; /* wide tables scroll inside the bubble, never the page */
|
|
@@ -50,13 +121,13 @@
|
|
|
50
121
|
}
|
|
51
122
|
.guuey-chat-table th,
|
|
52
123
|
.guuey-chat-table td {
|
|
53
|
-
border: 1px solid var(--guuey-chat-canvas-muted);
|
|
124
|
+
border: 1px solid var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
|
|
54
125
|
padding: 4px 8px;
|
|
55
126
|
text-align: left; /* per-column align from the AST overrides inline */
|
|
56
127
|
}
|
|
57
128
|
.guuey-chat-table th {
|
|
58
129
|
font-weight: 600;
|
|
59
|
-
background: var(--guuey-chat-canvas-muted);
|
|
130
|
+
background: var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
|
|
60
131
|
}
|
|
61
132
|
|
|
62
133
|
/* ── R0 user ── */
|
|
@@ -65,9 +136,9 @@
|
|
|
65
136
|
max-width: 85%;
|
|
66
137
|
}
|
|
67
138
|
.guuey-chat-user-bubble {
|
|
68
|
-
background: var(--guuey-chat-accent);
|
|
69
|
-
color: var(--guuey-chat-on-accent);
|
|
70
|
-
border-radius: var(--guuey-chat-radius);
|
|
139
|
+
background: var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
140
|
+
color: var(--guuey-chat-on-accent, var(--_guuey-chat-on-accent));
|
|
141
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
71
142
|
border-end-end-radius: 4px;
|
|
72
143
|
padding: 8px 12px;
|
|
73
144
|
white-space: pre-wrap;
|
|
@@ -79,14 +150,14 @@
|
|
|
79
150
|
.guuey-chat-send-failed {
|
|
80
151
|
margin: 4px 0 0;
|
|
81
152
|
font-size: 0.85em;
|
|
82
|
-
color: var(--guuey-chat-error);
|
|
153
|
+
color: var(--guuey-chat-error, var(--_guuey-chat-error));
|
|
83
154
|
text-align: end;
|
|
84
155
|
}
|
|
85
156
|
.guuey-chat-retry {
|
|
86
157
|
margin-inline-start: 8px;
|
|
87
|
-
border: 1px solid var(--guuey-chat-error);
|
|
158
|
+
border: 1px solid var(--guuey-chat-error, var(--_guuey-chat-error));
|
|
88
159
|
background: none;
|
|
89
|
-
color: var(--guuey-chat-error);
|
|
160
|
+
color: var(--guuey-chat-error, var(--_guuey-chat-error));
|
|
90
161
|
border-radius: 6px;
|
|
91
162
|
padding: 1px 8px;
|
|
92
163
|
cursor: pointer;
|
|
@@ -94,23 +165,45 @@
|
|
|
94
165
|
font-size: inherit;
|
|
95
166
|
}
|
|
96
167
|
|
|
168
|
+
/* Links (guuey#528): the one text class with its own token. The neutral
|
|
169
|
+
default equals ink (underline alone distinguishes — native), so an
|
|
170
|
+
unthemed embed stays monochrome; a brand states its link color once
|
|
171
|
+
(theme or the host CSS-var channel, composing per #521's model). */
|
|
172
|
+
.guuey-chat a {
|
|
173
|
+
color: var(--guuey-chat-link, var(--_guuey-chat-link, inherit));
|
|
174
|
+
}
|
|
175
|
+
|
|
97
176
|
/* ── R1 assistant text ── */
|
|
98
177
|
.guuey-chat-text {
|
|
99
178
|
align-self: flex-start;
|
|
100
179
|
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);
|
|
180
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
181
|
+
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 8%, transparent);
|
|
182
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
104
183
|
border-end-start-radius: 4px;
|
|
105
184
|
padding: 8px 12px;
|
|
106
185
|
overflow-wrap: anywhere;
|
|
107
186
|
}
|
|
187
|
+
/* The bare surface (guuey#521): assistant text sits directly on the host's
|
|
188
|
+
background — no card, no hairline, no inset — so the transcript reads as
|
|
189
|
+
part of the page it is embedded in. The user pill deliberately stays a
|
|
190
|
+
bubble (the conversational shape survives; only the vendor-styled
|
|
191
|
+
message SURFACE disappears). */
|
|
192
|
+
.guuey-chat--bare .guuey-chat-text {
|
|
193
|
+
max-width: 100%;
|
|
194
|
+
background: none;
|
|
195
|
+
border: 0;
|
|
196
|
+
border-radius: 0;
|
|
197
|
+
padding: 0;
|
|
198
|
+
}
|
|
108
199
|
.guuey-chat-text p {
|
|
109
200
|
margin: 0;
|
|
110
201
|
}
|
|
111
202
|
.guuey-chat-text p + p,
|
|
112
203
|
.guuey-chat-text pre + p,
|
|
113
204
|
.guuey-chat-text p + pre,
|
|
205
|
+
.guuey-chat-text .guuey-chat-code-wrap + p,
|
|
206
|
+
.guuey-chat-text p + .guuey-chat-code-wrap,
|
|
114
207
|
.guuey-chat-text ul + p,
|
|
115
208
|
.guuey-chat-text p + ul,
|
|
116
209
|
.guuey-chat-text p + ol {
|
|
@@ -124,9 +217,9 @@
|
|
|
124
217
|
}
|
|
125
218
|
.guuey-chat-inline-code,
|
|
126
219
|
.guuey-chat-code-fence {
|
|
127
|
-
font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
|
|
220
|
+
font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
|
|
128
221
|
font-size: 0.88em;
|
|
129
|
-
background: color-mix(in srgb, var(--guuey-chat-ink) 7%, transparent);
|
|
222
|
+
background: color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 7%, transparent);
|
|
130
223
|
border-radius: 5px;
|
|
131
224
|
}
|
|
132
225
|
.guuey-chat-inline-code {
|
|
@@ -136,17 +229,50 @@
|
|
|
136
229
|
padding: 8px 10px;
|
|
137
230
|
overflow-x: auto;
|
|
138
231
|
}
|
|
232
|
+
/* The fence's copy affordance (guuey#529): hover-reveal on pointer
|
|
233
|
+
devices, persistent on touch — the common grammar. Tokens ride the
|
|
234
|
+
composable channel like everything else. */
|
|
235
|
+
.guuey-chat-code-wrap {
|
|
236
|
+
position: relative;
|
|
237
|
+
}
|
|
238
|
+
.guuey-chat-code-copy {
|
|
239
|
+
position: absolute;
|
|
240
|
+
top: 5px;
|
|
241
|
+
right: 5px;
|
|
242
|
+
padding: 2px 8px;
|
|
243
|
+
font: 600 11px/1.6 inherit;
|
|
244
|
+
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 15%, transparent);
|
|
245
|
+
border-radius: 6px;
|
|
246
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
247
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
248
|
+
cursor: pointer;
|
|
249
|
+
opacity: 0;
|
|
250
|
+
}
|
|
251
|
+
.guuey-chat-code-wrap:hover .guuey-chat-code-copy,
|
|
252
|
+
.guuey-chat-code-copy:focus-visible {
|
|
253
|
+
opacity: 1;
|
|
254
|
+
}
|
|
255
|
+
@media (hover: none) {
|
|
256
|
+
.guuey-chat-code-copy {
|
|
257
|
+
opacity: 1;
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
261
|
+
.guuey-chat-code-copy {
|
|
262
|
+
transition: opacity 120ms ease-out;
|
|
263
|
+
}
|
|
264
|
+
}
|
|
139
265
|
.guuey-chat-verbatim {
|
|
140
266
|
white-space: pre-wrap;
|
|
141
267
|
margin: 0;
|
|
142
268
|
}
|
|
143
269
|
.guuey-chat-cursor {
|
|
144
|
-
color: var(--guuey-chat-accent);
|
|
270
|
+
color: var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
145
271
|
}
|
|
146
272
|
.guuey-chat-stopped {
|
|
147
273
|
margin: 6px 0 0;
|
|
148
274
|
font-size: 0.85em;
|
|
149
|
-
color: var(--guuey-chat-ink-muted);
|
|
275
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
150
276
|
}
|
|
151
277
|
|
|
152
278
|
/* ── Toggles (R2/R3/R4/R9/R15 headers) ── */
|
|
@@ -156,7 +282,7 @@
|
|
|
156
282
|
gap: 6px;
|
|
157
283
|
border: 0;
|
|
158
284
|
background: none;
|
|
159
|
-
color: var(--guuey-chat-ink-muted);
|
|
285
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
160
286
|
font: inherit;
|
|
161
287
|
font-size: 0.9em;
|
|
162
288
|
padding: 2px 4px;
|
|
@@ -164,10 +290,10 @@
|
|
|
164
290
|
cursor: pointer;
|
|
165
291
|
}
|
|
166
292
|
.guuey-chat-toggle:hover {
|
|
167
|
-
background: color-mix(in srgb, var(--guuey-chat-ink) 6%, transparent);
|
|
293
|
+
background: color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 6%, transparent);
|
|
168
294
|
}
|
|
169
295
|
.guuey-chat-toggle:focus-visible {
|
|
170
|
-
outline: 2px solid var(--guuey-chat-accent);
|
|
296
|
+
outline: 2px solid var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
171
297
|
outline-offset: 1px;
|
|
172
298
|
}
|
|
173
299
|
.guuey-chat-body {
|
|
@@ -186,17 +312,17 @@
|
|
|
186
312
|
animation: guuey-chat-spin 1s linear infinite;
|
|
187
313
|
}
|
|
188
314
|
.guuey-chat-tool-failed {
|
|
189
|
-
color: var(--guuey-chat-error);
|
|
315
|
+
color: var(--guuey-chat-error, var(--_guuey-chat-error));
|
|
190
316
|
}
|
|
191
317
|
.guuey-chat-tool-note {
|
|
192
|
-
color: var(--guuey-chat-ink-muted);
|
|
318
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
193
319
|
font-size: 0.85em;
|
|
194
320
|
}
|
|
195
321
|
.guuey-chat-tool-args,
|
|
196
322
|
.guuey-chat-data-preview {
|
|
197
|
-
font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
|
|
323
|
+
font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
|
|
198
324
|
font-size: 0.82em;
|
|
199
|
-
background: color-mix(in srgb, var(--guuey-chat-ink) 5%, transparent);
|
|
325
|
+
background: color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 5%, transparent);
|
|
200
326
|
border-radius: 6px;
|
|
201
327
|
padding: 6px 8px;
|
|
202
328
|
margin: 4px 0;
|
|
@@ -207,7 +333,7 @@
|
|
|
207
333
|
/* ── R4 group ── */
|
|
208
334
|
.guuey-chat-failure-badge {
|
|
209
335
|
margin-inline-start: 8px;
|
|
210
|
-
color: var(--guuey-chat-error);
|
|
336
|
+
color: var(--guuey-chat-error, var(--_guuey-chat-error));
|
|
211
337
|
font-size: 0.85em;
|
|
212
338
|
}
|
|
213
339
|
|
|
@@ -216,19 +342,19 @@
|
|
|
216
342
|
display: flex;
|
|
217
343
|
gap: 8px;
|
|
218
344
|
align-items: center;
|
|
219
|
-
color: var(--guuey-chat-ink-muted);
|
|
345
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
220
346
|
font-size: 0.8em;
|
|
221
347
|
}
|
|
222
348
|
.guuey-chat-data-empty,
|
|
223
349
|
.guuey-chat-data-binary {
|
|
224
|
-
color: var(--guuey-chat-ink-muted);
|
|
350
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
225
351
|
font-size: 0.85em;
|
|
226
352
|
margin: 2px 0;
|
|
227
353
|
}
|
|
228
354
|
.guuey-chat-copy {
|
|
229
355
|
border: 0;
|
|
230
356
|
background: none;
|
|
231
|
-
color: var(--guuey-chat-ink-muted);
|
|
357
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
232
358
|
font: inherit;
|
|
233
359
|
font-size: 0.9em;
|
|
234
360
|
cursor: pointer;
|
|
@@ -237,10 +363,10 @@
|
|
|
237
363
|
|
|
238
364
|
/* ── R6 views ── */
|
|
239
365
|
.guuey-chat-view {
|
|
240
|
-
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 8%, transparent);
|
|
241
|
-
border-radius: var(--guuey-chat-radius);
|
|
366
|
+
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 8%, transparent);
|
|
367
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
242
368
|
overflow: hidden;
|
|
243
|
-
background: var(--guuey-chat-surface);
|
|
369
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
244
370
|
min-height: 3rem;
|
|
245
371
|
}
|
|
246
372
|
.guuey-chat-view iframe {
|
|
@@ -250,25 +376,25 @@
|
|
|
250
376
|
.guuey-chat-view-expired p {
|
|
251
377
|
margin: 0;
|
|
252
378
|
padding: 12px;
|
|
253
|
-
color: var(--guuey-chat-ink-muted);
|
|
379
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
254
380
|
font-size: 0.9em;
|
|
255
381
|
}
|
|
256
382
|
.guuey-chat-attribution {
|
|
257
383
|
margin: 0;
|
|
258
384
|
padding: 4px 12px;
|
|
259
|
-
color: var(--guuey-chat-ink-muted);
|
|
385
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
260
386
|
font-size: 0.78em;
|
|
261
|
-
border-top: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 6%, transparent);
|
|
387
|
+
border-top: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 6%, transparent);
|
|
262
388
|
}
|
|
263
389
|
/* guuey#204: the promoted-view reference chip — compact, never a frame. */
|
|
264
390
|
.guuey-chat-view-ref {
|
|
265
391
|
display: inline-block;
|
|
266
392
|
margin: 0;
|
|
267
393
|
padding: 6px 12px;
|
|
268
|
-
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 12%, transparent);
|
|
394
|
+
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 12%, transparent);
|
|
269
395
|
border-radius: 999px;
|
|
270
|
-
background: var(--guuey-chat-surface);
|
|
271
|
-
color: var(--guuey-chat-ink-muted);
|
|
396
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
397
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
272
398
|
font-size: 0.85em;
|
|
273
399
|
line-height: 1.2;
|
|
274
400
|
}
|
|
@@ -278,14 +404,14 @@
|
|
|
278
404
|
font-size: 0.85em;
|
|
279
405
|
}
|
|
280
406
|
.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);
|
|
407
|
+
color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
408
|
+
border-color: color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 24%, transparent);
|
|
283
409
|
}
|
|
284
410
|
/* guuey#301 chips presentation: the selected (on-stage) chip + honest expired state. */
|
|
285
411
|
.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));
|
|
412
|
+
border-color: var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
413
|
+
color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
414
|
+
background: color-mix(in srgb, var(--guuey-chat-accent, var(--_guuey-chat-accent)) 12%, var(--guuey-chat-surface, var(--_guuey-chat-surface)));
|
|
289
415
|
}
|
|
290
416
|
.guuey-chat-view-ref-expired {
|
|
291
417
|
opacity: 0.6;
|
|
@@ -296,24 +422,24 @@
|
|
|
296
422
|
.guuey-chat-media-image img {
|
|
297
423
|
max-width: 100%;
|
|
298
424
|
max-height: var(--guuey-chat-image-cap, 20rem);
|
|
299
|
-
border-radius: var(--guuey-chat-radius);
|
|
425
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
300
426
|
display: block;
|
|
301
427
|
}
|
|
302
428
|
.guuey-chat-media-chip {
|
|
303
429
|
display: inline-block;
|
|
304
|
-
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 12%, transparent);
|
|
430
|
+
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 12%, transparent);
|
|
305
431
|
border-radius: 999px;
|
|
306
432
|
padding: 2px 10px;
|
|
307
433
|
font-size: 0.85em;
|
|
308
|
-
color: var(--guuey-chat-ink-muted);
|
|
434
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
309
435
|
}
|
|
310
436
|
|
|
311
437
|
/* ── R8 code ── */
|
|
312
438
|
.guuey-chat-code pre {
|
|
313
|
-
font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
|
|
439
|
+
font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
|
|
314
440
|
font-size: 0.85em;
|
|
315
|
-
background: color-mix(in srgb, var(--guuey-chat-ink) 6%, transparent);
|
|
316
|
-
border-radius: var(--guuey-chat-radius);
|
|
441
|
+
background: color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 6%, transparent);
|
|
442
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
317
443
|
padding: 10px 12px;
|
|
318
444
|
margin: 0;
|
|
319
445
|
max-height: var(--guuey-chat-code-cap, 16rem);
|
|
@@ -325,7 +451,7 @@
|
|
|
325
451
|
.guuey-chat-code-meta {
|
|
326
452
|
display: flex;
|
|
327
453
|
justify-content: space-between;
|
|
328
|
-
color: var(--guuey-chat-ink-muted);
|
|
454
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
329
455
|
font-size: 0.8em;
|
|
330
456
|
padding: 2px 4px;
|
|
331
457
|
}
|
|
@@ -342,9 +468,9 @@
|
|
|
342
468
|
|
|
343
469
|
/* ── R10 prompts ── */
|
|
344
470
|
.guuey-chat-prompt {
|
|
345
|
-
border: 1px solid var(--guuey-chat-accent);
|
|
346
|
-
border-radius: var(--guuey-chat-radius);
|
|
347
|
-
background: var(--guuey-chat-surface);
|
|
471
|
+
border: 1px solid var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
472
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
473
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
348
474
|
padding: 12px;
|
|
349
475
|
}
|
|
350
476
|
.guuey-chat-prompt-ask {
|
|
@@ -359,21 +485,21 @@
|
|
|
359
485
|
border-radius: 8px;
|
|
360
486
|
padding: 4px 14px;
|
|
361
487
|
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);
|
|
488
|
+
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 15%, transparent);
|
|
489
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
490
|
+
color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
365
491
|
}
|
|
366
492
|
.guuey-chat-prompt-accept {
|
|
367
|
-
background: var(--guuey-chat-accent) !important;
|
|
368
|
-
color: var(--guuey-chat-on-accent) !important;
|
|
493
|
+
background: var(--guuey-chat-accent, var(--_guuey-chat-accent)) !important;
|
|
494
|
+
color: var(--guuey-chat-on-accent, var(--_guuey-chat-on-accent)) !important;
|
|
369
495
|
border-color: transparent !important;
|
|
370
496
|
}
|
|
371
497
|
.guuey-chat-prompt-actions button:focus-visible {
|
|
372
|
-
outline: 2px solid var(--guuey-chat-accent);
|
|
498
|
+
outline: 2px solid var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
373
499
|
outline-offset: 1px;
|
|
374
500
|
}
|
|
375
501
|
.guuey-chat-prompt-record {
|
|
376
|
-
color: var(--guuey-chat-ink-muted);
|
|
502
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
377
503
|
font-size: 0.85em;
|
|
378
504
|
margin: 0;
|
|
379
505
|
}
|
|
@@ -388,27 +514,27 @@
|
|
|
388
514
|
margin: 0;
|
|
389
515
|
padding: 8px 12px;
|
|
390
516
|
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);
|
|
517
|
+
color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
518
|
+
background: color-mix(in srgb, var(--guuey-chat-accent, var(--_guuey-chat-accent)) 10%, var(--guuey-chat-surface, var(--_guuey-chat-surface)));
|
|
519
|
+
border-top: 1px solid var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
|
|
394
520
|
}
|
|
395
521
|
.guuey-chat-oauth-error {
|
|
396
|
-
background: color-mix(in srgb, var(--guuey-chat-error) 7%, var(--guuey-chat-surface));
|
|
522
|
+
background: color-mix(in srgb, var(--guuey-chat-error, var(--_guuey-chat-error)) 7%, var(--guuey-chat-surface, var(--_guuey-chat-surface)));
|
|
397
523
|
}
|
|
398
524
|
.guuey-chat-oauth-dismiss {
|
|
399
525
|
font: inherit;
|
|
400
526
|
cursor: pointer;
|
|
401
527
|
border: 0;
|
|
402
528
|
background: transparent;
|
|
403
|
-
color: var(--guuey-chat-ink-muted);
|
|
529
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
404
530
|
text-decoration: underline;
|
|
405
531
|
}
|
|
406
532
|
|
|
407
533
|
/* ── R11 errors ── */
|
|
408
534
|
.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));
|
|
535
|
+
border: 1px solid color-mix(in srgb, var(--guuey-chat-error, var(--_guuey-chat-error)) 45%, transparent);
|
|
536
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
537
|
+
background: color-mix(in srgb, var(--guuey-chat-error, var(--_guuey-chat-error)) 7%, var(--guuey-chat-surface, var(--_guuey-chat-surface)));
|
|
412
538
|
padding: 10px 12px;
|
|
413
539
|
}
|
|
414
540
|
.guuey-chat-error p {
|
|
@@ -417,8 +543,8 @@
|
|
|
417
543
|
.guuey-chat-error-action {
|
|
418
544
|
margin-top: 6px;
|
|
419
545
|
font: inherit;
|
|
420
|
-
border: 1px solid var(--guuey-chat-error);
|
|
421
|
-
color: var(--guuey-chat-error);
|
|
546
|
+
border: 1px solid var(--guuey-chat-error, var(--_guuey-chat-error));
|
|
547
|
+
color: var(--guuey-chat-error, var(--_guuey-chat-error));
|
|
422
548
|
background: none;
|
|
423
549
|
border-radius: 8px;
|
|
424
550
|
padding: 2px 10px;
|
|
@@ -426,45 +552,45 @@
|
|
|
426
552
|
}
|
|
427
553
|
.guuey-chat-error-verbatim {
|
|
428
554
|
margin: 8px 0 0;
|
|
429
|
-
font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
|
|
555
|
+
font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
|
|
430
556
|
font-size: 0.8em;
|
|
431
|
-
color: var(--guuey-chat-ink-muted);
|
|
557
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
432
558
|
white-space: pre-wrap;
|
|
433
559
|
}
|
|
434
560
|
|
|
435
561
|
/* ── R12 status ── */
|
|
436
562
|
.guuey-chat-status {
|
|
437
563
|
margin: 0;
|
|
438
|
-
color: var(--guuey-chat-ink-muted);
|
|
564
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
439
565
|
font-size: 0.9em;
|
|
440
566
|
}
|
|
441
567
|
.guuey-chat-status-detail {
|
|
442
|
-
font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
|
|
568
|
+
font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
|
|
443
569
|
font-size: 0.85em;
|
|
444
570
|
}
|
|
445
571
|
|
|
446
572
|
/* ── R13/R14/R15 ── */
|
|
447
573
|
.guuey-chat-history {
|
|
448
|
-
color: var(--guuey-chat-ink-muted);
|
|
574
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
449
575
|
text-align: center;
|
|
450
576
|
font-size: 0.9em;
|
|
451
577
|
padding: 8px;
|
|
452
578
|
}
|
|
453
579
|
.guuey-chat-compaction {
|
|
454
|
-
color: var(--guuey-chat-ink-muted);
|
|
580
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
455
581
|
font-size: 0.8em;
|
|
456
582
|
text-align: center;
|
|
457
|
-
border-top: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 8%, transparent);
|
|
583
|
+
border-top: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 8%, transparent);
|
|
458
584
|
padding-top: 6px;
|
|
459
585
|
margin-top: 4px;
|
|
460
586
|
}
|
|
461
587
|
.guuey-chat-unknown-type,
|
|
462
588
|
.guuey-chat-unknown-size {
|
|
463
|
-
color: var(--guuey-chat-ink-muted);
|
|
589
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
464
590
|
font-size: 0.85em;
|
|
465
591
|
}
|
|
466
592
|
.guuey-chat-unknown-raw {
|
|
467
|
-
font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
|
|
593
|
+
font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
|
|
468
594
|
font-size: 0.8em;
|
|
469
595
|
max-height: 16rem;
|
|
470
596
|
overflow: auto;
|
|
@@ -475,9 +601,9 @@
|
|
|
475
601
|
align-self: center;
|
|
476
602
|
font: inherit;
|
|
477
603
|
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);
|
|
604
|
+
border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 12%, transparent);
|
|
605
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
606
|
+
color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
|
|
481
607
|
border-radius: 999px;
|
|
482
608
|
padding: 3px 14px;
|
|
483
609
|
cursor: pointer;
|
|
@@ -489,8 +615,8 @@
|
|
|
489
615
|
font: inherit;
|
|
490
616
|
font-size: 0.85em;
|
|
491
617
|
border: 0;
|
|
492
|
-
background: var(--guuey-chat-ink);
|
|
493
|
-
color: var(--guuey-chat-canvas);
|
|
618
|
+
background: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
619
|
+
color: var(--guuey-chat-canvas, var(--_guuey-chat-canvas));
|
|
494
620
|
border-radius: 999px;
|
|
495
621
|
padding: 6px 14px;
|
|
496
622
|
cursor: pointer;
|
|
@@ -500,7 +626,7 @@
|
|
|
500
626
|
.guuey-chat-show-earlier:focus-visible,
|
|
501
627
|
.guuey-chat-copy:focus-visible,
|
|
502
628
|
.guuey-chat-retry:focus-visible {
|
|
503
|
-
outline: 2px solid var(--guuey-chat-accent);
|
|
629
|
+
outline: 2px solid var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
504
630
|
outline-offset: 1px;
|
|
505
631
|
}
|
|
506
632
|
|
|
@@ -545,8 +671,8 @@
|
|
|
545
671
|
align-items: flex-end;
|
|
546
672
|
gap: 8px;
|
|
547
673
|
padding: 8px 12px;
|
|
548
|
-
background: var(--guuey-chat-canvas);
|
|
549
|
-
border-top: 1px solid var(--guuey-chat-canvas-muted);
|
|
674
|
+
background: var(--guuey-chat-canvas, var(--_guuey-chat-canvas));
|
|
675
|
+
border-top: 1px solid var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
|
|
550
676
|
}
|
|
551
677
|
.guuey-chat-composer-input {
|
|
552
678
|
flex: 1;
|
|
@@ -554,15 +680,28 @@
|
|
|
554
680
|
max-height: 9rem;
|
|
555
681
|
overflow-y: auto;
|
|
556
682
|
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);
|
|
683
|
+
border: 1px solid var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
|
|
684
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
685
|
+
background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
|
|
686
|
+
color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
561
687
|
font: inherit;
|
|
562
688
|
}
|
|
689
|
+
/* iOS Safari auto-zooms the page when a focused control's font-size is
|
|
690
|
+
under its 16px no-zoom threshold. The kit root is 15px (× scale), and
|
|
691
|
+
this input is `font: inherit` — one px under, so focusing the composer
|
|
692
|
+
zoomed the whole page and the panel visually overflowed the viewport
|
|
693
|
+
(guuey#516, founder real-device report 2026-08-30; the widget loader's
|
|
694
|
+
own width clamp was correct). Floor the input at 16px on touch-primary
|
|
695
|
+
devices only — max() preserves host upscaling (--guuey-chat-scale >
|
|
696
|
+
16/15), and desktop keeps the 15px look untouched. */
|
|
697
|
+
@media (hover: none) and (pointer: coarse) {
|
|
698
|
+
.guuey-chat-composer-input {
|
|
699
|
+
font-size: max(16px, calc(15px * var(--guuey-chat-scale, var(--_guuey-chat-scale, 1))));
|
|
700
|
+
}
|
|
701
|
+
}
|
|
563
702
|
.guuey-chat-composer-input:focus {
|
|
564
703
|
outline: none;
|
|
565
|
-
border-color: var(--guuey-chat-accent);
|
|
704
|
+
border-color: var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
566
705
|
}
|
|
567
706
|
.guuey-chat-composer-input:disabled {
|
|
568
707
|
opacity: 0.5;
|
|
@@ -572,19 +711,19 @@
|
|
|
572
711
|
flex-shrink: 0;
|
|
573
712
|
padding: 10px 16px;
|
|
574
713
|
border: 0;
|
|
575
|
-
border-radius: var(--guuey-chat-radius);
|
|
714
|
+
border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
|
|
576
715
|
font: inherit;
|
|
577
716
|
cursor: pointer;
|
|
578
717
|
}
|
|
579
718
|
.guuey-chat-composer-send {
|
|
580
|
-
background: var(--guuey-chat-accent);
|
|
581
|
-
color: var(--guuey-chat-on-accent);
|
|
719
|
+
background: var(--guuey-chat-accent, var(--_guuey-chat-accent));
|
|
720
|
+
color: var(--guuey-chat-on-accent, var(--_guuey-chat-on-accent));
|
|
582
721
|
}
|
|
583
722
|
.guuey-chat-composer-send:disabled {
|
|
584
723
|
cursor: not-allowed;
|
|
585
724
|
opacity: 0.4;
|
|
586
725
|
}
|
|
587
726
|
.guuey-chat-composer-stop {
|
|
588
|
-
background: var(--guuey-chat-canvas-muted);
|
|
589
|
-
color: var(--guuey-chat-ink);
|
|
727
|
+
background: var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
|
|
728
|
+
color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
|
|
590
729
|
}
|