@ouraihub/aether-ui 0.1.1 → 0.1.2

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.
Files changed (34) hide show
  1. package/package.json +2 -2
  2. package/src/chat/ChatComposer.svelte +47 -5
  3. package/src/chat/ChatPanel.css +380 -380
  4. package/src/chat/ChatPanel.svelte +48 -51
  5. package/src/chat/ChatPanelComposer.svelte +44 -25
  6. package/src/chat/ChatPanelHeader.svelte +1 -25
  7. package/src/chat/ChatPanelMode.svelte +3 -3
  8. package/src/chat/ChatPanelToolbar.svelte +14 -3
  9. package/src/chat/ContextUsageStatus.svelte +97 -0
  10. package/src/chat/ModelEffortPicker.svelte +326 -0
  11. package/src/chat/PickerEffort.svelte +71 -0
  12. package/src/chat/ReasoningControl.svelte +10 -112
  13. package/src/chat/ReasoningSlider.svelte +174 -0
  14. package/src/chat/SkillPicker.svelte +1 -0
  15. package/src/chat/UsageControl.svelte +12 -5
  16. package/src/chat/UsageDetails.svelte +19 -3
  17. package/src/chat/chat-attachments.svelte.ts +9 -5
  18. package/src/chat/chat-panel-models.svelte.ts +97 -0
  19. package/src/chat/chat-panel-props.ts +6 -0
  20. package/src/chat/context-status.ts +101 -0
  21. package/src/chat/icons/LICENSE-REMIX +186 -0
  22. package/src/chat/icons/LICENSE-SIMPLE-ICONS +30 -0
  23. package/src/chat/icons/PathIcon.svelte +8 -0
  24. package/src/chat/icons/effort-icons.ts +65 -0
  25. package/src/chat/icons/status-icons.ts +105 -0
  26. package/src/chat/index.ts +20 -0
  27. package/src/chat/model-effort.ts +177 -0
  28. package/src/chat/test-support/chat-fixture.ts +16 -0
  29. package/src/i18n/en-chat.d.ts +1 -0
  30. package/src/i18n/en-chat.js +201 -0
  31. package/src/i18n/en.ts +24 -174
  32. package/src/i18n/zh-CN-chat.d.ts +1 -0
  33. package/src/i18n/zh-CN-chat.js +190 -0
  34. package/src/i18n/zh-CN.ts +2 -158
package/src/chat/ChatPanel.css CHANGED
@@ -1,386 +1,386 @@
1
- .chat-panel {
2
- display: flex;
3
- flex: 1;
4
- flex-direction: column;
5
- gap: 0.75rem;
6
- min-width: 0;
7
- min-height: 0;
8
- height: 100%;
9
- container-type: size;
10
- }
11
- .chat-header {
12
- display: flex;
13
- flex-direction: column;
14
- gap: 0.5rem;
15
- flex: none;
16
- min-width: 0;
17
- }
18
- .title-row {
19
- display: flex;
20
- align-items: center;
21
- gap: 0.25rem;
22
- min-width: 0;
23
- }
24
- .title-row h2 {
25
- flex: 1;
26
- min-width: 0;
27
- margin: 0;
28
- font: inherit;
29
- font-weight: 600;
30
- overflow: hidden;
31
- text-overflow: ellipsis;
32
- white-space: nowrap;
33
- }
34
- .title-row :global(button) {
35
- flex-shrink: 0;
36
- }
37
- .model-row {
38
- min-width: 0;
39
- }
40
- .turns {
41
- display: flex;
42
- flex-direction: column;
43
- gap: 1rem;
44
- padding: 0;
45
- margin: 0;
46
- list-style: none;
47
- }
48
- .empty-message {
49
- color: var(--color-muted-foreground);
50
- text-align: center;
51
- padding: 1.5rem 0.5rem;
52
- margin: 0;
53
- }
54
- .context-chip {
55
- display: flex;
56
- align-items: center;
57
- align-self: flex-start;
58
- gap: 0.25rem;
59
- max-width: calc(100% - 2rem);
60
- padding-left: 0.5rem;
61
- background: var(--color-muted);
62
- border-radius: var(--kit-radius, var(--radius));
63
- }
64
- .context-chip span {
65
- min-width: 0;
66
- overflow: hidden;
67
- text-overflow: ellipsis;
68
- white-space: nowrap;
69
- }
70
- .context-chip :global(button) {
71
- flex-shrink: 0;
72
- }
73
- .image-tray {
74
- display: flex;
75
- flex-wrap: wrap;
76
- gap: 0.375rem;
77
- margin: 0;
78
- padding: 0;
79
- list-style: none;
80
- }
81
- .image-tray li {
82
- position: relative;
83
- }
84
- .image-tray img {
85
- width: 3.5rem;
86
- height: 3.5rem;
87
- object-fit: cover;
88
- border: 1px solid var(--color-border);
89
- border-radius: var(--kit-radius, var(--radius));
90
- }
91
- .image-tray :global(button) {
92
- position: absolute;
93
- top: -0.375rem;
94
- right: -0.375rem;
95
- }
96
- .approval-override {
97
- display: flex;
98
- flex-direction: column;
99
- gap: 0.5rem;
100
- min-width: 0;
101
- }
102
- .approval-override > :global(button) {
103
- align-self: flex-end;
104
- }
105
- .chat-panel :global(button.search-toggle) {
106
- color: var(--color-muted-foreground);
107
- }
108
- .chat-panel :global(button.search-toggle[aria-pressed='true']) {
109
- color: var(--color-primary-foreground);
110
- background: var(--color-primary);
111
- border-color: var(--color-primary);
112
- }
113
- .chat-panel :global(button.search-toggle[aria-pressed='true']:hover:not(:disabled)) {
114
- background: color-mix(in oklch, var(--color-primary) 85%, var(--color-foreground));
115
- }
116
- :global(.tools-menu) {
117
- z-index: 50;
118
- box-sizing: border-box;
119
- width: min(16rem, calc(100vw - 1rem));
120
- display: flex;
121
- flex-direction: column;
122
- padding: 0.25rem;
123
- border: 1px solid var(--color-border);
124
- border-radius: var(--kit-radius, var(--radius));
125
- background: var(--color-popover);
126
- color: var(--color-popover-foreground);
127
- box-shadow: 0 4px 12px color-mix(in oklch, var(--color-foreground) 12%, transparent);
128
- font-size: var(--kit-font-size-sm, 0.8125rem);
129
- }
130
- :global(.tools-item) {
131
- display: flex;
132
- align-items: center;
133
- gap: 0.5rem;
134
- min-height: 2.25rem;
135
- padding: 0.25rem 0.625rem;
136
- border: 0;
137
- border-radius: calc(var(--kit-radius, var(--radius)) - 2px);
138
- background: transparent;
139
- color: inherit;
140
- font: inherit;
141
- text-align: left;
142
- cursor: pointer;
143
- }
144
- :global(.tools-item:hover:not(:disabled)),
145
- :global(.tools-item:focus-visible) {
146
- background: var(--color-accent);
147
- color: var(--color-accent-foreground);
148
- outline: none;
149
- }
150
- :global(.tools-item:disabled) {
151
- cursor: not-allowed;
152
- opacity: 0.55;
153
- }
154
- :global(.tools-item svg) {
155
- width: 1rem;
156
- height: 1rem;
157
- flex-shrink: 0;
158
- }
159
- :global(.tools-item small) {
160
- margin-left: auto;
161
- color: var(--color-muted-foreground);
162
- font-size: 0.75rem;
163
- }
164
- :global(.tools-item > svg:last-child:not(:first-child)) {
165
- margin-left: auto;
166
- }
167
- :global(.tools-footer) {
168
- margin-top: 0.25rem;
169
- border-top: 1px solid var(--color-border);
170
- border-radius: 0 0 calc(var(--kit-radius, var(--radius)) - 2px)
171
- calc(var(--kit-radius, var(--radius)) - 2px);
172
- color: var(--color-muted-foreground);
173
- }
174
- :global(.tools-title) {
175
- margin: 0;
176
- padding: 0.375rem 0.5rem;
177
- font-size: 0.875rem;
178
- font-weight: 500;
179
- }
180
- :global(.tools-order) {
181
- display: flex;
182
- flex-direction: column;
183
- gap: 0.125rem;
184
- margin: 0;
185
- padding: 0;
186
- list-style: none;
187
- }
188
- :global(.tools-row) {
189
- display: flex;
190
- align-items: center;
191
- gap: 0.5rem;
192
- min-height: 2rem;
193
- padding: 0 0.375rem;
194
- border-radius: calc(var(--kit-radius, var(--radius)) - 2px);
195
- font-size: 0.875rem;
196
- }
197
- :global(.tools-row:hover) {
198
- background: var(--color-accent);
199
- }
200
- :global(.tools-row > svg) {
201
- width: 1rem;
202
- height: 1rem;
203
- flex-shrink: 0;
204
- color: var(--color-muted-foreground);
205
- }
206
- :global(.tools-row > span) {
207
- flex: 1;
208
- min-width: 0;
209
- overflow: hidden;
210
- text-overflow: ellipsis;
211
- white-space: nowrap;
212
- }
213
- :global(.tools-grip) {
214
- display: inline-flex;
215
- padding: 0.125rem;
216
- border: 0;
217
- border-radius: 0.25rem;
218
- background: none;
219
- color: var(--color-muted-foreground);
220
- cursor: grab;
221
- touch-action: none;
222
- }
223
- :global(.tools-grip:focus-visible) {
224
- outline: 2px solid var(--color-ring);
225
- }
226
- :global(.tools-grip svg) {
227
- width: 0.875rem;
228
- height: 0.875rem;
229
- }
230
- .plan-badge {
231
- padding: 0.125rem 0.5rem;
232
- border: 1px solid var(--color-border);
233
- border-radius: 999px;
234
- color: var(--color-muted-foreground);
235
- font-size: var(--kit-font-size-sm, 0.8125rem);
236
- white-space: nowrap;
237
- }
238
- :global(.mode-menu) {
239
- width: min(35rem, calc(100vw - 1rem));
240
- padding: 0.375rem;
241
- border-radius: 0.75rem;
242
- }
1
+ .chat-panel {
2
+ display: flex;
3
+ flex: 1;
4
+ flex-direction: column;
5
+ gap: 0.75rem;
6
+ min-width: 0;
7
+ min-height: 0;
8
+ height: 100%;
9
+ container-type: size;
10
+ }
11
+ .chat-header {
12
+ display: flex;
13
+ flex-direction: column;
14
+ gap: 0.5rem;
15
+ flex: none;
16
+ min-width: 0;
17
+ }
18
+ .title-row {
19
+ display: flex;
20
+ align-items: center;
21
+ gap: 0.25rem;
22
+ min-width: 0;
23
+ }
24
+ .title-row h2 {
25
+ flex: 1;
26
+ min-width: 0;
27
+ margin: 0;
28
+ font: inherit;
29
+ font-weight: 600;
30
+ overflow: hidden;
31
+ text-overflow: ellipsis;
32
+ white-space: nowrap;
33
+ }
34
+ .title-row :global(button) {
35
+ flex-shrink: 0;
36
+ }
37
+ .model-row {
38
+ min-width: 0;
39
+ }
40
+ .turns {
41
+ display: flex;
42
+ flex-direction: column;
43
+ gap: 1rem;
44
+ padding: 0;
45
+ margin: 0;
46
+ list-style: none;
47
+ }
48
+ .empty-message {
49
+ color: var(--color-muted-foreground);
50
+ text-align: center;
51
+ padding: 1.5rem 0.5rem;
52
+ margin: 0;
53
+ }
54
+ .context-chip {
55
+ display: flex;
56
+ align-items: center;
57
+ align-self: flex-start;
58
+ gap: 0.25rem;
59
+ max-width: calc(100% - 2rem);
60
+ padding-left: 0.5rem;
61
+ background: var(--color-muted);
62
+ border-radius: var(--kit-radius, var(--radius));
63
+ }
64
+ .context-chip span {
65
+ min-width: 0;
66
+ overflow: hidden;
67
+ text-overflow: ellipsis;
68
+ white-space: nowrap;
69
+ }
70
+ .context-chip :global(button) {
71
+ flex-shrink: 0;
72
+ }
73
+ .image-tray {
74
+ display: flex;
75
+ flex-wrap: wrap;
76
+ gap: 0.375rem;
77
+ margin: 0;
78
+ padding: 0;
79
+ list-style: none;
80
+ }
81
+ .image-tray li {
82
+ position: relative;
83
+ }
84
+ .image-tray img {
85
+ width: 3.5rem;
86
+ height: 3.5rem;
87
+ object-fit: cover;
88
+ border: 1px solid var(--color-border);
89
+ border-radius: var(--kit-radius, var(--radius));
90
+ }
91
+ .image-tray :global(button) {
92
+ position: absolute;
93
+ top: -0.375rem;
94
+ right: -0.375rem;
95
+ }
96
+ .approval-override {
97
+ display: flex;
98
+ flex-direction: column;
99
+ gap: 0.5rem;
100
+ min-width: 0;
101
+ }
102
+ .approval-override > :global(button) {
103
+ align-self: flex-end;
104
+ }
105
+ .chat-panel :global(button.search-toggle) {
106
+ color: var(--color-muted-foreground);
107
+ }
108
+ .chat-panel :global(button.search-toggle[aria-pressed='true']) {
109
+ color: var(--color-primary-foreground);
110
+ background: var(--color-primary);
111
+ border-color: var(--color-primary);
112
+ }
113
+ .chat-panel :global(button.search-toggle[aria-pressed='true']:hover:not(:disabled)) {
114
+ background: color-mix(in oklch, var(--color-primary) 85%, var(--color-foreground));
115
+ }
116
+ :global(.tools-menu) {
117
+ z-index: 50;
118
+ box-sizing: border-box;
119
+ width: min(16rem, calc(100vw - 1rem));
120
+ display: flex;
121
+ flex-direction: column;
122
+ padding: 0.25rem;
123
+ border: 1px solid var(--color-border);
124
+ border-radius: var(--kit-radius, var(--radius));
125
+ background: var(--color-popover);
126
+ color: var(--color-popover-foreground);
127
+ box-shadow: 0 4px 12px color-mix(in oklch, var(--color-foreground) 12%, transparent);
128
+ font-size: var(--kit-font-size-sm, 0.8125rem);
129
+ }
130
+ :global(.tools-item) {
131
+ display: flex;
132
+ align-items: center;
133
+ gap: 0.5rem;
134
+ min-height: 2.25rem;
135
+ padding: 0.25rem 0.625rem;
136
+ border: 0;
137
+ border-radius: calc(var(--kit-radius, var(--radius)) - 2px);
138
+ background: transparent;
139
+ color: inherit;
140
+ font: inherit;
141
+ text-align: left;
142
+ cursor: pointer;
143
+ }
144
+ :global(.tools-item:hover:not(:disabled)),
145
+ :global(.tools-item:focus-visible) {
146
+ background: var(--color-accent);
147
+ color: var(--color-accent-foreground);
148
+ outline: none;
149
+ }
150
+ :global(.tools-item:disabled) {
151
+ cursor: not-allowed;
152
+ opacity: 0.55;
153
+ }
154
+ :global(.tools-item svg) {
155
+ width: 1rem;
156
+ height: 1rem;
157
+ flex-shrink: 0;
158
+ }
159
+ :global(.tools-item small) {
160
+ margin-left: auto;
161
+ color: var(--color-muted-foreground);
162
+ font-size: 0.75rem;
163
+ }
164
+ :global(.tools-item > svg:last-child:not(:first-child)) {
165
+ margin-left: auto;
166
+ }
167
+ :global(.tools-footer) {
168
+ margin-top: 0.25rem;
169
+ border-top: 1px solid var(--color-border);
170
+ border-radius: 0 0 calc(var(--kit-radius, var(--radius)) - 2px)
171
+ calc(var(--kit-radius, var(--radius)) - 2px);
172
+ color: var(--color-muted-foreground);
173
+ }
174
+ :global(.tools-title) {
175
+ margin: 0;
176
+ padding: 0.375rem 0.5rem;
177
+ font-size: 0.875rem;
178
+ font-weight: 500;
179
+ }
180
+ :global(.tools-order) {
181
+ display: flex;
182
+ flex-direction: column;
183
+ gap: 0.125rem;
184
+ margin: 0;
185
+ padding: 0;
186
+ list-style: none;
187
+ }
188
+ :global(.tools-row) {
189
+ display: flex;
190
+ align-items: center;
191
+ gap: 0.5rem;
192
+ min-height: 2rem;
193
+ padding: 0 0.375rem;
194
+ border-radius: calc(var(--kit-radius, var(--radius)) - 2px);
195
+ font-size: 0.875rem;
196
+ }
197
+ :global(.tools-row:hover) {
198
+ background: var(--color-accent);
199
+ }
200
+ :global(.tools-row > svg) {
201
+ width: 1rem;
202
+ height: 1rem;
203
+ flex-shrink: 0;
204
+ color: var(--color-muted-foreground);
205
+ }
206
+ :global(.tools-row > span) {
207
+ flex: 1;
208
+ min-width: 0;
209
+ overflow: hidden;
210
+ text-overflow: ellipsis;
211
+ white-space: nowrap;
212
+ }
213
+ :global(.tools-grip) {
214
+ display: inline-flex;
215
+ padding: 0.125rem;
216
+ border: 0;
217
+ border-radius: 0.25rem;
218
+ background: none;
219
+ color: var(--color-muted-foreground);
220
+ cursor: grab;
221
+ touch-action: none;
222
+ }
223
+ :global(.tools-grip:focus-visible) {
224
+ outline: 2px solid var(--color-ring);
225
+ }
226
+ :global(.tools-grip svg) {
227
+ width: 0.875rem;
228
+ height: 0.875rem;
229
+ }
230
+ .plan-badge {
231
+ padding: 0.125rem 0.5rem;
232
+ border: 1px solid var(--color-border);
233
+ border-radius: 999px;
234
+ color: var(--color-muted-foreground);
235
+ font-size: var(--kit-font-size-sm, 0.8125rem);
236
+ white-space: nowrap;
237
+ }
238
+ :global(.mode-menu) {
239
+ width: min(35rem, calc(100vw - 1rem));
240
+ padding: 0.375rem;
241
+ border-radius: 0.75rem;
242
+ }
243
+ :global(.mode-option) {
244
+ display: grid;
245
+ grid-template-columns: 1rem 7.5rem minmax(0, 1fr) 1rem 0.875rem;
246
+ align-items: center;
247
+ column-gap: 0.5rem;
248
+ min-height: 2.125rem;
249
+ padding: 0.375rem 0.5rem;
250
+ border-radius: 0.5rem;
251
+ font-size: var(--kit-font-size-sm, 0.8125rem);
252
+ }
253
+ :global(.mode-option[aria-current='true']) {
254
+ background: var(--color-muted);
255
+ }
256
+ :global(.mode-option > svg) {
257
+ color: var(--color-muted-foreground);
258
+ width: 0.875rem;
259
+ height: 0.875rem;
260
+ }
261
+ .mode-name {
262
+ white-space: nowrap;
263
+ }
264
+ .mode-description {
265
+ color: var(--color-muted-foreground);
266
+ font-size: var(--kit-font-size-xs, 0.75rem);
267
+ text-align: right;
268
+ line-height: 1.5;
269
+ }
270
+ .mode-notice,
271
+ .mode-check {
272
+ display: flex;
273
+ align-items: center;
274
+ justify-content: center;
275
+ color: var(--color-muted-foreground);
276
+ }
277
+ .mode-notice {
278
+ color: var(--color-warning, var(--color-muted-foreground));
279
+ }
280
+ .mode-notice :global(svg),
281
+ .mode-check :global(svg) {
282
+ display: block;
283
+ width: 0.8125rem;
284
+ height: 0.8125rem;
285
+ }
286
+ :global(.mode-danger),
287
+ :global(.mode-danger) :is(.mode-name, .mode-description, .mode-notice),
288
+ :global(.mode-option.mode-danger > svg) {
289
+ color: var(--color-destructive);
290
+ }
291
+ .mode-footer {
292
+ display: flex;
293
+ justify-content: space-between;
294
+ align-items: center;
295
+ gap: 0.75rem;
296
+ padding: 0.625rem 0.375rem 0.125rem;
297
+ color: var(--color-muted-foreground);
298
+ font-size: var(--kit-font-size-xs, 0.75rem);
299
+ }
300
+ .mode-keys {
301
+ display: flex;
302
+ align-items: center;
303
+ gap: 0.25rem;
304
+ }
305
+ .mode-keys kbd {
306
+ padding: 0 0.25rem;
307
+ border-radius: 0.25rem;
308
+ background: var(--color-muted);
309
+ font: inherit;
310
+ }
311
+ .mode-keys kbd:not(:first-child) {
312
+ margin-left: 0.375rem;
313
+ }
314
+ @media (max-width: 480px) {
243
315
  :global(.mode-option) {
244
- display: grid;
245
- grid-template-columns: 1rem 7.5rem minmax(0, 1fr) 1rem 0.875rem;
246
- align-items: center;
247
- column-gap: 0.5rem;
248
- min-height: 2.125rem;
249
- padding: 0.375rem 0.5rem;
250
- border-radius: 0.5rem;
251
- font-size: var(--kit-font-size-sm, 0.8125rem);
252
- }
253
- :global(.mode-option[aria-current='true']) {
254
- background: var(--color-muted);
255
- }
256
- :global(.mode-option > svg) {
257
- color: var(--color-muted-foreground);
258
- width: 0.875rem;
259
- height: 0.875rem;
260
- }
261
- .mode-name {
262
- white-space: nowrap;
316
+ grid-template-columns: 1rem minmax(0, 1fr) 1rem 0.875rem;
317
+ row-gap: 0.125rem;
263
318
  }
264
319
  .mode-description {
265
- color: var(--color-muted-foreground);
266
- font-size: var(--kit-font-size-xs, 0.75rem);
267
- text-align: right;
268
- line-height: 1.5;
269
- }
270
- .mode-notice,
271
- .mode-check {
272
- display: flex;
273
- align-items: center;
274
- justify-content: center;
275
- color: var(--color-muted-foreground);
320
+ grid-column: 2;
321
+ grid-row: 2;
322
+ text-align: left;
276
323
  }
277
324
  .mode-notice {
278
- color: var(--color-warning, var(--color-muted-foreground));
279
- }
280
- .mode-notice :global(svg),
281
- .mode-check :global(svg) {
282
- display: block;
283
- width: 0.8125rem;
284
- height: 0.8125rem;
285
- }
286
- :global(.mode-danger),
287
- :global(.mode-danger) :is(.mode-name, .mode-description, .mode-notice),
288
- :global(.mode-option.mode-danger > svg) {
289
- color: var(--color-destructive);
290
- }
291
- .mode-footer {
292
- display: flex;
293
- justify-content: space-between;
294
- align-items: center;
295
- gap: 0.75rem;
296
- padding: 0.625rem 0.375rem 0.125rem;
297
- color: var(--color-muted-foreground);
298
- font-size: var(--kit-font-size-xs, 0.75rem);
299
- }
300
- .mode-keys {
301
- display: flex;
302
- align-items: center;
303
- gap: 0.25rem;
304
- }
305
- .mode-keys kbd {
306
- padding: 0 0.25rem;
307
- border-radius: 0.25rem;
308
- background: var(--color-muted);
309
- font: inherit;
310
- }
311
- .mode-keys kbd:not(:first-child) {
312
- margin-left: 0.375rem;
313
- }
314
- @media (max-width: 480px) {
315
- :global(.mode-option) {
316
- grid-template-columns: 1rem minmax(0, 1fr) 1rem 0.875rem;
317
- row-gap: 0.125rem;
318
- }
319
- .mode-description {
320
- grid-column: 2;
321
- grid-row: 2;
322
- text-align: left;
323
- }
324
- .mode-notice {
325
- grid-column: 3;
326
- grid-row: 1;
327
- }
328
- .mode-check {
329
- grid-column: 4;
330
- grid-row: 1;
331
- }
332
- }
333
- .skills-control {
334
- min-width: 0;
335
- max-width: 100%;
336
- }
337
- .skills-control :global(div:first-child) {
338
- flex-wrap: wrap;
339
- min-width: 0;
340
- }
341
- .skills-control :global([data-slot='select-trigger']) {
342
- width: auto;
343
- max-width: 100%;
344
- }
345
- .search-status,
346
- .draft-recovery {
347
- margin: 0;
348
- color: var(--color-muted-foreground);
349
- font-size: var(--kit-font-size-sm, 0.8125rem);
350
- }
351
- .draft-recovery {
352
- display: flex;
353
- flex-wrap: wrap;
354
- align-items: center;
355
- gap: 0.5rem;
356
- }
357
- .history-list {
358
- display: flex;
359
- flex-direction: column;
360
- gap: 0.25rem;
361
- max-height: 40vh;
362
- overflow-y: auto;
363
- min-width: 0;
364
- }
365
- .history-list :global(button) {
366
- justify-content: flex-start;
367
- min-width: 0;
368
- }
369
- .history-list span {
370
- min-width: 0;
371
- overflow: hidden;
372
- text-overflow: ellipsis;
373
- white-space: nowrap;
374
- }
375
- :global(.reply-dialog) {
376
- max-height: calc(100dvh - 2rem);
377
- overflow-y: auto;
378
- }
379
- :global(.reply-dialog form),
380
- :global(.reply-dialog [data-slot='field-group']) {
381
- min-width: 0;
382
- }
383
- :global(.reply-dialog textarea) {
384
- max-height: 45dvh;
385
- overflow-y: auto;
325
+ grid-column: 3;
326
+ grid-row: 1;
386
327
  }
328
+ .mode-check {
329
+ grid-column: 4;
330
+ grid-row: 1;
331
+ }
332
+ }
333
+ .skills-control {
334
+ min-width: 0;
335
+ max-width: 100%;
336
+ }
337
+ .skills-control :global(div:first-child) {
338
+ flex-wrap: wrap;
339
+ min-width: 0;
340
+ }
341
+ .skills-control :global([data-slot='select-trigger']) {
342
+ width: auto;
343
+ max-width: 100%;
344
+ }
345
+ .search-status,
346
+ .draft-recovery {
347
+ margin: 0;
348
+ color: var(--color-muted-foreground);
349
+ font-size: var(--kit-font-size-sm, 0.8125rem);
350
+ }
351
+ .draft-recovery {
352
+ display: flex;
353
+ flex-wrap: wrap;
354
+ align-items: center;
355
+ gap: 0.5rem;
356
+ }
357
+ .history-list {
358
+ display: flex;
359
+ flex-direction: column;
360
+ gap: 0.25rem;
361
+ max-height: 40vh;
362
+ overflow-y: auto;
363
+ min-width: 0;
364
+ }
365
+ .history-list :global(button) {
366
+ justify-content: flex-start;
367
+ min-width: 0;
368
+ }
369
+ .history-list span {
370
+ min-width: 0;
371
+ overflow: hidden;
372
+ text-overflow: ellipsis;
373
+ white-space: nowrap;
374
+ }
375
+ :global(.reply-dialog) {
376
+ max-height: calc(100dvh - 2rem);
377
+ overflow-y: auto;
378
+ }
379
+ :global(.reply-dialog form),
380
+ :global(.reply-dialog [data-slot='field-group']) {
381
+ min-width: 0;
382
+ }
383
+ :global(.reply-dialog textarea) {
384
+ max-height: 45dvh;
385
+ overflow-y: auto;
386
+ }