@mast-ai/react-ui 0.1.1 → 0.2.0
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/components/AssistantMessage.d.ts +39 -1
- package/dist/components/ConversationPanel.d.ts +20 -1
- package/dist/components/MessageItem.d.ts +13 -1
- package/dist/components/MessageList.d.ts +21 -1
- package/dist/components/ToolCallBlock.d.ts +23 -1
- package/dist/components/ToolLabelContext.d.ts +20 -0
- package/dist/context.d.ts +34 -3
- package/dist/hooks/useAgentStream.d.ts +7 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +527 -461
- package/dist/styles.css +25 -3
- package/dist/themes/tailwind-shadcn.css +55 -0
- package/package.json +4 -3
package/dist/styles.css
CHANGED
|
@@ -300,9 +300,6 @@
|
|
|
300
300
|
border-radius: var(--mast-radius);
|
|
301
301
|
padding: 0.5rem 0.75rem;
|
|
302
302
|
font-size: var(--mast-text-sm);
|
|
303
|
-
display: flex;
|
|
304
|
-
flex-direction: column;
|
|
305
|
-
gap: 0.5rem;
|
|
306
303
|
}
|
|
307
304
|
|
|
308
305
|
.mast-tool-call-block[data-streaming='true'] .mast-tool-call-block-status {
|
|
@@ -331,6 +328,31 @@
|
|
|
331
328
|
display: flex;
|
|
332
329
|
align-items: center;
|
|
333
330
|
gap: 0.5rem;
|
|
331
|
+
cursor: pointer;
|
|
332
|
+
list-style: none;
|
|
333
|
+
user-select: none;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.mast-tool-call-block-header::-webkit-details-marker {
|
|
337
|
+
display: none;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.mast-tool-call-block-chevron {
|
|
341
|
+
display: inline-block;
|
|
342
|
+
width: 0.75rem;
|
|
343
|
+
color: var(--mast-fg-muted);
|
|
344
|
+
transition: transform 0.15s ease;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.mast-tool-call-block[open] > .mast-tool-call-block-header > .mast-tool-call-block-chevron {
|
|
348
|
+
transform: rotate(90deg);
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.mast-tool-call-block-body {
|
|
352
|
+
display: flex;
|
|
353
|
+
flex-direction: column;
|
|
354
|
+
gap: 0.5rem;
|
|
355
|
+
margin-top: 0.5rem;
|
|
334
356
|
}
|
|
335
357
|
|
|
336
358
|
.mast-tool-call-block-status,
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @mast-ai/react-ui — Tailwind / shadcn theme preset
|
|
3
|
+
*
|
|
4
|
+
* Maps every --mast-* token onto the standard shadcn HSL CSS variables
|
|
5
|
+
* (--background, --foreground, --primary, --muted, --border, --destructive,
|
|
6
|
+
* etc.) so library components inherit the consuming app's theme.
|
|
7
|
+
*
|
|
8
|
+
* Usage:
|
|
9
|
+
* import '@mast-ai/react-ui/styles.css';
|
|
10
|
+
* import '@mast-ai/react-ui/themes/tailwind-shadcn.css';
|
|
11
|
+
*
|
|
12
|
+
* The shadcn variables must be raw HSL triples (e.g. --background: 0 0% 100%)
|
|
13
|
+
* for hsl(var(--background)) to evaluate correctly. This is the default for
|
|
14
|
+
* shadcn projects scaffolded with `shadcn-ui add`. Tailwind v4 / shadcn v4
|
|
15
|
+
* setups that store full color() values should drop the hsl() wrapper.
|
|
16
|
+
*
|
|
17
|
+
* Two non-obvious tricks this preset relies on:
|
|
18
|
+
*
|
|
19
|
+
* 1. Listing all three selectors with equal specificity so source order
|
|
20
|
+
* tie-breaks in the consumer's favor. A bare [data-mast-root] block loses
|
|
21
|
+
* to the library's [data-mast-root][data-mast-theme='dark'] block in dark
|
|
22
|
+
* mode and the dark theme would keep the library's hardcoded colors.
|
|
23
|
+
*
|
|
24
|
+
* 2. Setting data-mast-theme={theme} on the panel root in your app keeps the
|
|
25
|
+
* library's dark detection in sync with shadcn's class-based dark mode
|
|
26
|
+
* (.dark on <html>). Without it, the library follows OS preference and
|
|
27
|
+
* can mismatch the app theme.
|
|
28
|
+
*
|
|
29
|
+
* See docs/react-ui/USAGE.md §5 for the full integration guide.
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
[data-mast-root],
|
|
33
|
+
[data-mast-root][data-mast-theme='dark'],
|
|
34
|
+
[data-mast-root][data-mast-theme='light'] {
|
|
35
|
+
--mast-bg: hsl(var(--background));
|
|
36
|
+
--mast-bg-subtle: hsl(var(--muted) / 0.2);
|
|
37
|
+
--mast-fg: hsl(var(--foreground));
|
|
38
|
+
--mast-fg-muted: hsl(var(--muted-foreground));
|
|
39
|
+
--mast-border: hsl(var(--border));
|
|
40
|
+
--mast-accent: hsl(var(--primary));
|
|
41
|
+
--mast-accent-fg: hsl(var(--primary-foreground));
|
|
42
|
+
--mast-thinking-bg: hsl(var(--muted));
|
|
43
|
+
--mast-thinking-fg: hsl(var(--muted-foreground));
|
|
44
|
+
--mast-tool-bg: hsl(var(--muted) / 0.4);
|
|
45
|
+
--mast-tool-fg: hsl(var(--muted-foreground));
|
|
46
|
+
--mast-tool-pending: hsl(var(--primary));
|
|
47
|
+
--mast-tool-error-bg: hsl(var(--destructive) / 0.1);
|
|
48
|
+
--mast-tool-error-fg: hsl(var(--destructive));
|
|
49
|
+
--mast-tool-cancelled-bg: hsl(var(--muted));
|
|
50
|
+
--mast-tool-cancelled-fg: hsl(var(--muted-foreground));
|
|
51
|
+
--mast-user-bubble: hsl(var(--primary));
|
|
52
|
+
--mast-user-fg: hsl(var(--primary-foreground));
|
|
53
|
+
--mast-mention-chip-bg: hsl(var(--primary) / 0.1);
|
|
54
|
+
--mast-mention-chip-fg: hsl(var(--primary));
|
|
55
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mast-ai/react-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
"import": "./dist/index.js",
|
|
11
11
|
"types": "./dist/index.d.ts"
|
|
12
12
|
},
|
|
13
|
-
"./styles.css": "./dist/styles.css"
|
|
13
|
+
"./styles.css": "./dist/styles.css",
|
|
14
|
+
"./themes/tailwind-shadcn.css": "./dist/themes/tailwind-shadcn.css"
|
|
14
15
|
},
|
|
15
16
|
"files": [
|
|
16
17
|
"dist"
|
|
@@ -34,7 +35,7 @@
|
|
|
34
35
|
"format": "prettier --write src"
|
|
35
36
|
},
|
|
36
37
|
"peerDependencies": {
|
|
37
|
-
"@mast-ai/core": "^0.
|
|
38
|
+
"@mast-ai/core": "^0.2.0",
|
|
38
39
|
"@tanstack/react-virtual": ">=3.0.0",
|
|
39
40
|
"react": ">=19.0.0",
|
|
40
41
|
"react-dom": ">=19.0.0"
|