@mcp-b/react-components 0.4.0 → 0.5.1
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/{CodeBlock-C2Xjxu9M.js → CodeBlock-D-a84xBL.js} +1 -1
- package/dist/{FileTree-D0c9Yj9U.js → FileTree-D8rtTLgK.js} +1 -1
- package/dist/components/Activity.js +1 -1
- package/dist/components/AgentChat.d.ts +0 -7
- package/dist/components/AgentChat.js +99 -67
- package/dist/components/AgentConnection.js +2 -2
- package/dist/components/Artifact.js +1 -1
- package/dist/components/BrowserLiveView.js +1 -1
- package/dist/components/BrowserReplay.js +1 -1
- package/dist/components/ChainOfThought.d.ts +1 -1
- package/dist/components/ChainOfThought.js +1 -1
- package/dist/components/CodeBlock.js +1 -1
- package/dist/components/Commit.js +2 -2
- package/dist/components/ContextMenu.js +1 -1
- package/dist/components/Conversation.js +1 -1
- package/dist/components/Dialog.js +1 -1
- package/dist/components/EnvironmentVariables.js +1 -1
- package/dist/components/FileTree.js +1 -1
- package/dist/components/Menubar.js +1 -1
- package/dist/components/Message.js +4 -4
- package/dist/components/ModelSelector.js +1 -1
- package/dist/components/NavigationMenu.js +1 -1
- package/dist/components/PricingPage.js +1 -1
- package/dist/components/PromptInput.js +7 -7
- package/dist/components/Queue.js +1 -1
- package/dist/components/Reasoning.js +9 -17
- package/dist/components/Select.js +1 -1
- package/dist/components/Sources.js +1 -1
- package/dist/components/Stepper.js +1 -1
- package/dist/components/Task.js +1 -1
- package/dist/components/Terminal.js +2 -2
- package/dist/components/TestResults.js +1 -1
- package/dist/components/ThinkChat.d.ts +4 -6
- package/dist/components/ThinkChat.js +2 -2
- package/dist/components/WebPreview.js +1 -1
- package/dist/components/WorkspaceExplorer.js +3 -3
- package/dist/components/icons.d.ts +2 -2
- package/dist/components/icons.js +2 -2
- package/dist/{copy-button-Dd6DEhOm.js → copy-button-BmJEAKuP.js} +1 -1
- package/dist/{icons-DQC4Zw5R.js → icons-CZRH4FVH.js} +1 -15
- package/dist/{icons-ctdVxng0.d.ts → icons-CmO7-pNY.d.ts} +1 -2
- package/dist/styles/agent-chat.css +24 -10
- package/dist/styles/conversation.css +3 -3
- package/dist/styles/index.css +2 -2
- package/dist/styles/message.css +7 -2
- package/dist/styles/prompt-input.css +17 -6
- package/dist/styles/reasoning.css +0 -1
- package/dist/styles/streamdown.css +381 -0
- package/package.json +2 -2
- package/dist/components/Suggestion.d.ts +0 -43
- package/dist/components/Suggestion.js +0 -39
- package/dist/components/Tool.d.ts +0 -123
- package/dist/components/Tool.js +0 -209
- package/dist/styles/suggestions.css +0 -21
- package/dist/styles/tool.css +0 -203
|
@@ -0,0 +1,381 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Streamdown renders Tailwind utility class names we don't compile; its
|
|
3
|
+
* stable `data-streamdown` attributes are the supported styling hook for
|
|
4
|
+
* non-Tailwind consumers. This sheet restyles that output with our tokens.
|
|
5
|
+
* Note: table-fullscreen and link-safety-modal portal to <body>, so nothing
|
|
6
|
+
* here may assume a .message__response ancestor.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
/* ---- Inline elements ---- */
|
|
10
|
+
|
|
11
|
+
/* Streamdown emits <span data-streamdown="strong">, not <strong> — without
|
|
12
|
+
this rule bold text renders as plain text. */
|
|
13
|
+
[data-streamdown="strong"] {
|
|
14
|
+
font-weight: var(--sigvelo-font-weight-semibold);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
[data-streamdown="link"] {
|
|
18
|
+
color: var(--sigvelo-color-primary-text);
|
|
19
|
+
font-weight: var(--sigvelo-font-weight-semibold);
|
|
20
|
+
text-decoration: underline;
|
|
21
|
+
overflow-wrap: anywhere;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Links render as <button> when link safety is enabled. */
|
|
25
|
+
button[data-streamdown="link"] {
|
|
26
|
+
appearance: none;
|
|
27
|
+
border: 0;
|
|
28
|
+
padding: 0;
|
|
29
|
+
background: transparent;
|
|
30
|
+
cursor: pointer;
|
|
31
|
+
font: inherit;
|
|
32
|
+
text-align: start;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
[data-streamdown="inline-code"] {
|
|
36
|
+
padding-block: 0.0625rem;
|
|
37
|
+
padding-inline: 0.25rem;
|
|
38
|
+
border-radius: var(--sigvelo-radius-xs);
|
|
39
|
+
background-color: var(--sigvelo-color-neutral-bg-subtle);
|
|
40
|
+
font-family: var(--sigvelo-font-mono);
|
|
41
|
+
font-size: 0.875em;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
[data-streamdown="superscript"],
|
|
45
|
+
[data-streamdown="subscript"] {
|
|
46
|
+
font-size: 0.75em;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* ---- Block typography ---- */
|
|
50
|
+
|
|
51
|
+
/* Chat-scale headings: markdown headings inside a message shouldn't shout. */
|
|
52
|
+
[data-streamdown="heading-1"],
|
|
53
|
+
[data-streamdown="heading-2"],
|
|
54
|
+
[data-streamdown="heading-3"],
|
|
55
|
+
[data-streamdown="heading-4"],
|
|
56
|
+
[data-streamdown="heading-5"],
|
|
57
|
+
[data-streamdown="heading-6"] {
|
|
58
|
+
margin-block: 0.75rem 0.375rem;
|
|
59
|
+
font-size: 1.125em;
|
|
60
|
+
font-weight: var(--sigvelo-font-weight-semibold);
|
|
61
|
+
line-height: 1.25;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
[data-streamdown="heading-1"],
|
|
65
|
+
[data-streamdown="heading-2"] {
|
|
66
|
+
font-size: 1.25em;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
[data-streamdown="blockquote"] {
|
|
70
|
+
margin-block: 0.5rem;
|
|
71
|
+
padding-inline-start: 0.75rem;
|
|
72
|
+
border-inline-start: 2px solid var(--sigvelo-color-neutral-border-subtle);
|
|
73
|
+
color: var(--sigvelo-color-text-muted);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
[data-streamdown="ordered-list"],
|
|
77
|
+
[data-streamdown="unordered-list"] {
|
|
78
|
+
margin-block: 0.25rem;
|
|
79
|
+
padding-inline-start: 1.25rem;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
[data-streamdown="ordered-list"] {
|
|
83
|
+
list-style: decimal;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
[data-streamdown="unordered-list"] {
|
|
87
|
+
list-style: disc;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
[data-streamdown="list-item"] {
|
|
91
|
+
padding-block: 0.125rem;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
[data-streamdown="list-item"] > p {
|
|
95
|
+
display: inline;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
[data-streamdown="horizontal-rule"] {
|
|
99
|
+
margin-block: 1rem;
|
|
100
|
+
border: 0;
|
|
101
|
+
border-block-start: 1px solid var(--sigvelo-color-neutral-border-subtle);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
[data-streamdown="image-wrapper"] {
|
|
105
|
+
display: inline-block;
|
|
106
|
+
margin-block: 0.5rem;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
[data-streamdown="image"] {
|
|
110
|
+
max-width: 100%;
|
|
111
|
+
border-radius: var(--sigvelo-radius-md);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
[data-streamdown="image-fallback"] {
|
|
115
|
+
font-size: var(--sigvelo-text-xs);
|
|
116
|
+
font-style: italic;
|
|
117
|
+
color: var(--sigvelo-color-text-muted);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* ---- Shared chrome: action buttons ---- */
|
|
121
|
+
|
|
122
|
+
:is(
|
|
123
|
+
[data-streamdown="code-block-actions"],
|
|
124
|
+
[data-streamdown="mermaid-block-actions"],
|
|
125
|
+
[data-streamdown="table-wrapper"],
|
|
126
|
+
[data-streamdown="table-fullscreen"]
|
|
127
|
+
)
|
|
128
|
+
button {
|
|
129
|
+
appearance: none;
|
|
130
|
+
display: inline-flex;
|
|
131
|
+
align-items: center;
|
|
132
|
+
justify-content: center;
|
|
133
|
+
padding: 0.25rem;
|
|
134
|
+
border: 0;
|
|
135
|
+
border-radius: var(--sigvelo-radius-sm);
|
|
136
|
+
background: transparent;
|
|
137
|
+
color: var(--sigvelo-color-text-muted);
|
|
138
|
+
cursor: pointer;
|
|
139
|
+
transition: color 120ms ease;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
:is(
|
|
143
|
+
[data-streamdown="code-block-actions"],
|
|
144
|
+
[data-streamdown="mermaid-block-actions"],
|
|
145
|
+
[data-streamdown="table-wrapper"],
|
|
146
|
+
[data-streamdown="table-fullscreen"]
|
|
147
|
+
)
|
|
148
|
+
button:hover {
|
|
149
|
+
color: var(--sigvelo-color-text);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
:is(
|
|
153
|
+
[data-streamdown="code-block-actions"],
|
|
154
|
+
[data-streamdown="mermaid-block-actions"],
|
|
155
|
+
[data-streamdown="table-wrapper"]
|
|
156
|
+
)
|
|
157
|
+
button:disabled {
|
|
158
|
+
cursor: not-allowed;
|
|
159
|
+
opacity: 0.5;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* ---- Code blocks (and mermaid, same shell) ---- */
|
|
163
|
+
|
|
164
|
+
/* Fill-based containment: no perimeter border, matching .code-block. */
|
|
165
|
+
[data-streamdown="code-block"],
|
|
166
|
+
[data-streamdown="mermaid-block"] {
|
|
167
|
+
display: flex;
|
|
168
|
+
flex-direction: column;
|
|
169
|
+
gap: 0.25rem;
|
|
170
|
+
width: 100%;
|
|
171
|
+
margin-block: 0.5rem;
|
|
172
|
+
padding: 0.375rem;
|
|
173
|
+
border-radius: var(--sigvelo-radius-lg);
|
|
174
|
+
background-color: var(--sigvelo-color-neutral-bg-subtle);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
[data-streamdown="code-block-header"] {
|
|
178
|
+
display: flex;
|
|
179
|
+
align-items: center;
|
|
180
|
+
min-height: 1.5rem;
|
|
181
|
+
padding-inline: 0.5rem;
|
|
182
|
+
font-family: var(--sigvelo-font-mono);
|
|
183
|
+
font-size: var(--sigvelo-text-xs);
|
|
184
|
+
text-transform: lowercase;
|
|
185
|
+
color: var(--sigvelo-color-text-muted);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* Streamdown wraps the action bar in an anonymous sticky div that overlays
|
|
189
|
+
the header row (header 1.5rem + gap 0.25rem). */
|
|
190
|
+
:is([data-streamdown="code-block"], [data-streamdown="mermaid-block"])
|
|
191
|
+
> div:has(> [data-streamdown$="-block-actions"]) {
|
|
192
|
+
position: sticky;
|
|
193
|
+
top: 0.25rem;
|
|
194
|
+
z-index: 1;
|
|
195
|
+
display: flex;
|
|
196
|
+
align-items: center;
|
|
197
|
+
justify-content: flex-end;
|
|
198
|
+
height: 1.5rem;
|
|
199
|
+
margin-block-start: -1.75rem;
|
|
200
|
+
pointer-events: none;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
[data-streamdown="code-block-actions"],
|
|
204
|
+
[data-streamdown="mermaid-block-actions"] {
|
|
205
|
+
display: flex;
|
|
206
|
+
flex-shrink: 0;
|
|
207
|
+
align-items: center;
|
|
208
|
+
gap: 0.25rem;
|
|
209
|
+
pointer-events: auto;
|
|
210
|
+
border-radius: var(--sigvelo-radius-md);
|
|
211
|
+
background-color: var(--sigvelo-color-neutral-bg-subtle);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
[data-streamdown="code-block-body"] {
|
|
215
|
+
overflow-x: auto;
|
|
216
|
+
border-radius: var(--sigvelo-radius-md);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
[data-streamdown="code-block-body"] pre {
|
|
220
|
+
margin: 0;
|
|
221
|
+
padding-block: 0.5rem;
|
|
222
|
+
padding-inline: 0.5rem;
|
|
223
|
+
background-color: transparent;
|
|
224
|
+
font-family: var(--sigvelo-font-mono);
|
|
225
|
+
font-size: 0.8125rem;
|
|
226
|
+
line-height: 1.55;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
/* The code plugin emits one <span class="block"> per line with no newline
|
|
230
|
+
text nodes — without this, highlighted code collapses onto one line. */
|
|
231
|
+
[data-streamdown="code-block-body"] code > span {
|
|
232
|
+
display: block;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
[data-streamdown="mermaid"] {
|
|
236
|
+
width: 100%;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
/* ---- Tables ---- */
|
|
240
|
+
|
|
241
|
+
[data-streamdown="table-wrapper"] {
|
|
242
|
+
display: flex;
|
|
243
|
+
flex-direction: column;
|
|
244
|
+
gap: 0.25rem;
|
|
245
|
+
margin-block: 0.5rem;
|
|
246
|
+
min-inline-size: 0;
|
|
247
|
+
max-inline-size: 100%;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
/* Anonymous action row above the table. */
|
|
251
|
+
[data-streamdown="table-wrapper"] > div:not(:has([data-streamdown="table"])) {
|
|
252
|
+
display: flex;
|
|
253
|
+
align-items: center;
|
|
254
|
+
justify-content: flex-end;
|
|
255
|
+
gap: 0.25rem;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/* Anonymous scroll container around the table. */
|
|
259
|
+
[data-streamdown="table-wrapper"] > div:has(> [data-streamdown="table"]) {
|
|
260
|
+
overflow-x: auto;
|
|
261
|
+
max-inline-size: 100%;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
[data-streamdown="table"] {
|
|
265
|
+
width: 100%;
|
|
266
|
+
border-collapse: collapse;
|
|
267
|
+
font-size: var(--sigvelo-text-sm);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
[data-streamdown="table-header-cell"],
|
|
271
|
+
[data-streamdown="table-cell"] {
|
|
272
|
+
padding-block: 0.25rem;
|
|
273
|
+
padding-inline: 0.5rem;
|
|
274
|
+
border-block-end: 1px solid var(--sigvelo-color-neutral-border-subtle);
|
|
275
|
+
text-align: start;
|
|
276
|
+
vertical-align: top;
|
|
277
|
+
overflow-wrap: anywhere;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
[data-streamdown="table-header-cell"] {
|
|
281
|
+
font-weight: var(--sigvelo-font-weight-semibold);
|
|
282
|
+
white-space: nowrap;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
/* Fullscreen table view portals to <body>; its single child wraps a
|
|
286
|
+
toolbar row and a scrollable table area. */
|
|
287
|
+
[data-streamdown="table-fullscreen"] {
|
|
288
|
+
position: fixed;
|
|
289
|
+
inset: 0;
|
|
290
|
+
z-index: 50;
|
|
291
|
+
background-color: var(--sigvelo-color-surface);
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
[data-streamdown="table-fullscreen"] > div {
|
|
295
|
+
display: flex;
|
|
296
|
+
flex-direction: column;
|
|
297
|
+
height: 100%;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
[data-streamdown="table-fullscreen"] > div > div:first-child {
|
|
301
|
+
display: flex;
|
|
302
|
+
align-items: center;
|
|
303
|
+
justify-content: flex-end;
|
|
304
|
+
gap: 0.25rem;
|
|
305
|
+
padding: 0.75rem;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
[data-streamdown="table-fullscreen"] > div > div:last-child {
|
|
309
|
+
flex: 1;
|
|
310
|
+
overflow: auto;
|
|
311
|
+
padding-block: 0 1rem;
|
|
312
|
+
padding-inline: 1rem;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
[data-streamdown="table-fullscreen"] thead {
|
|
316
|
+
position: sticky;
|
|
317
|
+
top: 0;
|
|
318
|
+
z-index: 1;
|
|
319
|
+
background-color: var(--sigvelo-color-surface);
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
/* ---- Copy/download format dropdowns ----
|
|
323
|
+
* The menus have no data attributes — only literal `relative`/`absolute`
|
|
324
|
+
* class names — so scope tightly to streamdown containers. */
|
|
325
|
+
|
|
326
|
+
:is(
|
|
327
|
+
[data-streamdown="table-wrapper"],
|
|
328
|
+
[data-streamdown="table-fullscreen"],
|
|
329
|
+
[data-streamdown="mermaid-block-actions"]
|
|
330
|
+
)
|
|
331
|
+
.relative {
|
|
332
|
+
position: relative;
|
|
333
|
+
display: inline-flex;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
:is(
|
|
337
|
+
[data-streamdown="table-wrapper"],
|
|
338
|
+
[data-streamdown="table-fullscreen"],
|
|
339
|
+
[data-streamdown="mermaid-block-actions"]
|
|
340
|
+
)
|
|
341
|
+
.absolute {
|
|
342
|
+
position: absolute;
|
|
343
|
+
top: 100%;
|
|
344
|
+
right: 0;
|
|
345
|
+
z-index: 20;
|
|
346
|
+
display: flex;
|
|
347
|
+
flex-direction: column;
|
|
348
|
+
min-width: 7.5rem;
|
|
349
|
+
margin-block-start: 0.25rem;
|
|
350
|
+
overflow: hidden;
|
|
351
|
+
border-radius: var(--sigvelo-radius-md);
|
|
352
|
+
border: 1px solid var(--sigvelo-color-neutral-border-subtle);
|
|
353
|
+
background-color: var(--sigvelo-color-surface);
|
|
354
|
+
box-shadow: var(--sigvelo-shadow-md);
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
:is(
|
|
358
|
+
[data-streamdown="table-wrapper"],
|
|
359
|
+
[data-streamdown="table-fullscreen"],
|
|
360
|
+
[data-streamdown="mermaid-block-actions"]
|
|
361
|
+
)
|
|
362
|
+
.absolute
|
|
363
|
+
> button {
|
|
364
|
+
justify-content: flex-start;
|
|
365
|
+
width: 100%;
|
|
366
|
+
padding-block: 0.375rem;
|
|
367
|
+
padding-inline: 0.75rem;
|
|
368
|
+
border-radius: 0;
|
|
369
|
+
font-size: var(--sigvelo-text-sm);
|
|
370
|
+
color: var(--sigvelo-color-text);
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
:is(
|
|
374
|
+
[data-streamdown="table-wrapper"],
|
|
375
|
+
[data-streamdown="table-fullscreen"],
|
|
376
|
+
[data-streamdown="mermaid-block-actions"]
|
|
377
|
+
)
|
|
378
|
+
.absolute
|
|
379
|
+
> button:hover {
|
|
380
|
+
background-color: var(--sigvelo-color-neutral-bg-subtle);
|
|
381
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mcp-b/react-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
|
|
5
5
|
"homepage": "https://design-system.sigvelo.com",
|
|
6
6
|
"bugs": {
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"anser": "^2.3.5",
|
|
50
50
|
"shiki": "^3.23.0",
|
|
51
51
|
"streamdown": "^2.5.0",
|
|
52
|
-
"@mcp-b/design-tokens": "0.
|
|
52
|
+
"@mcp-b/design-tokens": "0.5.1"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@ai-sdk/react": "^3.0.194",
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
|
|
4
|
-
//#region src/components/Suggestion.d.ts
|
|
5
|
-
interface SuggestionsProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
6
|
-
/**
|
|
7
|
-
* A horizontally scrollable row of prompt suggestions, typically shown above
|
|
8
|
-
* the composer or in the empty state. Children are {@link Suggestion} chips.
|
|
9
|
-
*
|
|
10
|
-
* Ported from AI Elements' Suggestions. Sigvelo changes: design-system Button
|
|
11
|
-
* chips and token-based styling; scrollbars hidden, scroll by wheel/touch.
|
|
12
|
-
*/
|
|
13
|
-
declare function Suggestions({
|
|
14
|
-
className,
|
|
15
|
-
children,
|
|
16
|
-
ref,
|
|
17
|
-
...props
|
|
18
|
-
}: SuggestionsProps & {
|
|
19
|
-
ref?: React.Ref<HTMLDivElement>;
|
|
20
|
-
}): React.JSX.Element;
|
|
21
|
-
interface SuggestionProps extends Omit<ButtonProps, "onClick" | "className"> {
|
|
22
|
-
className?: string;
|
|
23
|
-
/** The suggestion text — the chip label and the `onClick` payload. */
|
|
24
|
-
suggestion: string;
|
|
25
|
-
/** Called with the suggestion text; typically feeds `sendMessage`. */
|
|
26
|
-
onClick?: (suggestion: string) => void;
|
|
27
|
-
}
|
|
28
|
-
/** One pill-shaped suggestion chip. Renders `suggestion` unless children are given. */
|
|
29
|
-
declare function Suggestion({
|
|
30
|
-
className,
|
|
31
|
-
suggestion,
|
|
32
|
-
onClick,
|
|
33
|
-
variant,
|
|
34
|
-
color,
|
|
35
|
-
size,
|
|
36
|
-
children,
|
|
37
|
-
ref,
|
|
38
|
-
...props
|
|
39
|
-
}: SuggestionProps & {
|
|
40
|
-
ref?: React.Ref<HTMLButtonElement>;
|
|
41
|
-
}): React.JSX.Element;
|
|
42
|
-
//#endregion
|
|
43
|
-
export { Suggestion, SuggestionProps, Suggestions, SuggestionsProps };
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { t as cx } from "../class-names-9UtZwb0J.js";
|
|
2
|
-
import { Button } from "./Button.js";
|
|
3
|
-
import "react";
|
|
4
|
-
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
//#region src/components/Suggestion.tsx
|
|
6
|
-
/**
|
|
7
|
-
* A horizontally scrollable row of prompt suggestions, typically shown above
|
|
8
|
-
* the composer or in the empty state. Children are {@link Suggestion} chips.
|
|
9
|
-
*
|
|
10
|
-
* Ported from AI Elements' Suggestions. Sigvelo changes: design-system Button
|
|
11
|
-
* chips and token-based styling; scrollbars hidden, scroll by wheel/touch.
|
|
12
|
-
*/
|
|
13
|
-
function Suggestions({ className, children, ref, ...props }) {
|
|
14
|
-
return /* @__PURE__ */ jsx("div", {
|
|
15
|
-
ref,
|
|
16
|
-
className: cx("suggestions", className),
|
|
17
|
-
...props,
|
|
18
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
19
|
-
className: "suggestions__row",
|
|
20
|
-
children
|
|
21
|
-
})
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
|
-
/** One pill-shaped suggestion chip. Renders `suggestion` unless children are given. */
|
|
25
|
-
function Suggestion({ className, suggestion, onClick, variant = "outline", color = "neutral", size = "sm", children, ref, ...props }) {
|
|
26
|
-
return /* @__PURE__ */ jsx(Button, {
|
|
27
|
-
ref,
|
|
28
|
-
type: "button",
|
|
29
|
-
variant,
|
|
30
|
-
color,
|
|
31
|
-
size,
|
|
32
|
-
className: cx("suggestions__chip", className),
|
|
33
|
-
onClick: () => onClick?.(suggestion),
|
|
34
|
-
...props,
|
|
35
|
-
children: children ?? suggestion
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
//#endregion
|
|
39
|
-
export { Suggestion, Suggestions };
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { DynamicToolUIPart, ToolUIPart } from "ai";
|
|
4
|
-
|
|
5
|
-
//#region src/components/Tool.d.ts
|
|
6
|
-
/** An AI SDK tool part — static (`tool-*`) or dynamic. */
|
|
7
|
-
type ToolPart = ToolUIPart | DynamicToolUIPart;
|
|
8
|
-
type ToolState = ToolPart["state"];
|
|
9
|
-
declare function getStatusBadge(status: ToolState): React.JSX.Element;
|
|
10
|
-
interface ToolProps extends Omit<CollapsibleRootProps, "className" | "part" | "unstyled"> {
|
|
11
|
-
className?: string;
|
|
12
|
-
/**
|
|
13
|
-
* The AI SDK tool part, taken whole — ToolHeader/ToolInput/ToolOutput
|
|
14
|
-
* derive name, state, input, and output from it.
|
|
15
|
-
*/
|
|
16
|
-
part?: ToolPart;
|
|
17
|
-
/** Current state of the tool invocation. Defaults to `part.state`. */
|
|
18
|
-
state?: ToolState;
|
|
19
|
-
}
|
|
20
|
-
/**
|
|
21
|
-
* Displays a collapsible tool invocation (name, input, output, state).
|
|
22
|
-
* The state drives the status badge color and default open behavior —
|
|
23
|
-
* `output-available`, `output-error`, and `output-denied` auto-open.
|
|
24
|
-
* Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
|
|
25
|
-
*
|
|
26
|
-
* @example
|
|
27
|
-
* ```tsx
|
|
28
|
-
* <Tool part={part}>
|
|
29
|
-
* <ToolHeader />
|
|
30
|
-
* <ToolContent>
|
|
31
|
-
* <ToolInput />
|
|
32
|
-
* <ToolOutput />
|
|
33
|
-
* </ToolContent>
|
|
34
|
-
* </Tool>
|
|
35
|
-
* ```
|
|
36
|
-
*
|
|
37
|
-
* @see {@link https://elements.ai-sdk.dev/components/tool | AI Elements Tool}
|
|
38
|
-
*/
|
|
39
|
-
declare function Tool({
|
|
40
|
-
className,
|
|
41
|
-
part,
|
|
42
|
-
state: stateProp,
|
|
43
|
-
defaultOpen,
|
|
44
|
-
ref,
|
|
45
|
-
...props
|
|
46
|
-
}: ToolProps & {
|
|
47
|
-
ref?: React.Ref<HTMLDivElement>;
|
|
48
|
-
}): React.JSX.Element;
|
|
49
|
-
interface ToolHeaderProps extends Omit<CollapsibleTriggerProps, "className" | "type" | "unstyled"> {
|
|
50
|
-
className?: string;
|
|
51
|
-
/** The tool "type" (e.g. "function", "retrieval"). Derived from `<Tool part>` when omitted. */
|
|
52
|
-
type?: string;
|
|
53
|
-
/** The specific tool invoked (e.g. "search_web"). Derived from `<Tool part>` when omitted. */
|
|
54
|
-
toolName?: string;
|
|
55
|
-
/** Optional human-readable title shown alongside the tool name. */
|
|
56
|
-
title?: string;
|
|
57
|
-
/** Current state of the tool invocation. Matches Vercel AI Elements. */
|
|
58
|
-
state?: ToolState;
|
|
59
|
-
}
|
|
60
|
-
/**
|
|
61
|
-
* Clickable header that shows the tool type, name, and state badge.
|
|
62
|
-
*/
|
|
63
|
-
declare function ToolHeader({
|
|
64
|
-
className,
|
|
65
|
-
type: typeProp,
|
|
66
|
-
toolName,
|
|
67
|
-
title: titleProp,
|
|
68
|
-
state: stateProp,
|
|
69
|
-
ref,
|
|
70
|
-
...props
|
|
71
|
-
}: ToolHeaderProps & {
|
|
72
|
-
ref?: React.Ref<HTMLButtonElement>;
|
|
73
|
-
}): React.JSX.Element;
|
|
74
|
-
interface ToolContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
|
|
75
|
-
className?: string;
|
|
76
|
-
}
|
|
77
|
-
/**
|
|
78
|
-
* Collapsible panel holding ToolInput and ToolOutput.
|
|
79
|
-
*/
|
|
80
|
-
declare function ToolContent({
|
|
81
|
-
className,
|
|
82
|
-
children,
|
|
83
|
-
ref,
|
|
84
|
-
...props
|
|
85
|
-
}: ToolContentProps & {
|
|
86
|
-
ref?: React.Ref<HTMLDivElement>;
|
|
87
|
-
}): React.JSX.Element;
|
|
88
|
-
interface ToolInputProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
89
|
-
/** The input passed to the tool (rendered as a JSON code block). Defaults to `part.input`. */
|
|
90
|
-
input?: unknown;
|
|
91
|
-
}
|
|
92
|
-
/**
|
|
93
|
-
* Displays the tool input as a JSON code block. Renders nothing while the
|
|
94
|
-
* input is still undefined.
|
|
95
|
-
*/
|
|
96
|
-
declare function ToolInput({
|
|
97
|
-
className,
|
|
98
|
-
input: inputProp,
|
|
99
|
-
ref,
|
|
100
|
-
...props
|
|
101
|
-
}: ToolInputProps & {
|
|
102
|
-
ref?: React.Ref<HTMLDivElement>;
|
|
103
|
-
}): React.JSX.Element | null;
|
|
104
|
-
interface ToolOutputProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
105
|
-
/** The tool output (any React node). Defaults to `part.output`. Mutually exclusive with errorText. */
|
|
106
|
-
output?: unknown;
|
|
107
|
-
/** Error message, rendered with destructive styling. Defaults to `part.errorText`. */
|
|
108
|
-
errorText?: string;
|
|
109
|
-
}
|
|
110
|
-
/**
|
|
111
|
-
* Displays the tool output or error text.
|
|
112
|
-
*/
|
|
113
|
-
declare function ToolOutput({
|
|
114
|
-
className,
|
|
115
|
-
output: outputProp,
|
|
116
|
-
errorText: errorTextProp,
|
|
117
|
-
ref,
|
|
118
|
-
...props
|
|
119
|
-
}: ToolOutputProps & {
|
|
120
|
-
ref?: React.Ref<HTMLDivElement>;
|
|
121
|
-
}): React.JSX.Element | null;
|
|
122
|
-
//#endregion
|
|
123
|
-
export { Tool, ToolContent, ToolContentProps, ToolHeader, ToolHeaderProps, ToolInput, ToolInputProps, ToolOutput, ToolOutputProps, ToolPart, ToolProps, ToolState, getStatusBadge };
|