@mastra/playground-ui 46.0.0-alpha.7 → 46.0.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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,111 @@
|
|
|
1
1
|
# @mastra/playground-ui
|
|
2
2
|
|
|
3
|
+
## 46.0.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Added per-project trace list columns for duration, token usage, estimated cost, and custom metadata. ([#20535](https://github.com/mastra-ai/mastra/pull/20535))
|
|
8
|
+
|
|
9
|
+
- Added `ChatShell`, a chat page frame with a single scroll container. Bars sit above the scroller, the composer docks inside it as `sticky bottom-0`, and every region — transcript, notices, task list, composer — is centred by one `ChatShell.Column`. That removes the band of background that used to separate the transcript from the composer, and keeps absolutely positioned affordances such as jump-to-latest anchored to the shell instead of escaping to a full-width page wrapper and centring on the wrong axis. ([#20455](https://github.com/mastra-ai/mastra/pull/20455))
|
|
10
|
+
|
|
11
|
+
```tsx
|
|
12
|
+
<ChatShell
|
|
13
|
+
className="[--chat-column:44rem]"
|
|
14
|
+
scroller={{ autoScroll: true, preserveScrollOnPrepend: true, onReachStart: loadOlderHistory }}
|
|
15
|
+
>
|
|
16
|
+
<ChatShell.Bar>
|
|
17
|
+
<SessionHeader />
|
|
18
|
+
</ChatShell.Bar>
|
|
19
|
+
<ChatShell.Stage>
|
|
20
|
+
<ChatShell.Viewport>
|
|
21
|
+
<ChatShell.Content>
|
|
22
|
+
<ChatShell.Column>{messages}</ChatShell.Column>
|
|
23
|
+
</ChatShell.Content>
|
|
24
|
+
<ChatShell.Dock>
|
|
25
|
+
<ChatShell.ScrollButton />
|
|
26
|
+
<ChatShell.Column>
|
|
27
|
+
<Composer />
|
|
28
|
+
</ChatShell.Column>
|
|
29
|
+
</ChatShell.Dock>
|
|
30
|
+
</ChatShell.Viewport>
|
|
31
|
+
</ChatShell.Stage>
|
|
32
|
+
</ChatShell>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
The dock keeps its place in flow, so its own height is the room the transcript scrolls behind and nothing has to measure it. A composer that grows as the reader types therefore leaves the transcript exactly where it was, instead of dragging it up a line at a time.
|
|
36
|
+
|
|
37
|
+
Custom properties tune it: `--chat-column` for the column width, `--chat-surface` for the page colour, `--chat-gutter` for the room kept above and below the composer, `--chat-veil` for what the dock paints with (translucent by default, so a line passing behind the composer stays faintly readable), and `--chat-inset-end` for room an overlay panel claims on the end edge.
|
|
38
|
+
|
|
39
|
+
**MessageScroller** `MessageScrollerProvider` gained `onReachStart`, called when the reader reaches the start of the transcript, and `preserveScrollOnPrepend`, which holds the reading position when older messages land above the current ones. `autoScroll` now also follows content that grows mid-stream, and leaves a reader who scrolled away alone instead of pulling them back to the end. `preserveScrollOnPrepend` moved off `MessageScrollerViewport`, where it set a data attribute and nothing else. `MessageScrollerItem` no longer throws outside a scroller, so the same row renderer can be reused on draft pages and previews. `MessageScrollerButton` now carries a minimum size and a soft two-layer shadow, so it reads as a floating control rather than a bare icon.
|
|
40
|
+
|
|
41
|
+
**Migration**
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
// Before
|
|
45
|
+
<MessageScrollerViewport preserveScrollOnPrepend />
|
|
46
|
+
|
|
47
|
+
// After
|
|
48
|
+
<MessageScrollerProvider preserveScrollOnPrepend>
|
|
49
|
+
<MessageScrollerViewport />
|
|
50
|
+
</MessageScrollerProvider>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
- Added reusable command palette primitives for consistent application search layouts. ([#20453](https://github.com/mastra-ai/mastra/pull/20453))
|
|
54
|
+
|
|
55
|
+
import { CommandPaletteDialog } from "@mastra/playground-ui/components/CommandPalette";
|
|
56
|
+
|
|
57
|
+
<CommandPaletteDialog open={open} onOpenChange={setOpen}>...</CommandPaletteDialog>
|
|
58
|
+
|
|
59
|
+
- Added `size` variants to `Kbd` so keyboard hints can sit inside compact controls without hand-written overrides. Sizes are `default` (24px), `sm` (20px) and `xs` (16px), each with a fixed height so the scale stays even across fonts. ([#20453](https://github.com/mastra-ai/mastra/pull/20453))
|
|
60
|
+
|
|
61
|
+
<Kbd size="sm">Esc</Kbd>
|
|
62
|
+
<Kbd size="xs">⌘ K</Kbd>
|
|
63
|
+
|
|
64
|
+
- Preserved browser shortcuts by making the MainSidebar Command+B toggle opt-in. Consumers that want the previous shortcut can enable it explicitly: ([#20614](https://github.com/mastra-ai/mastra/pull/20614))
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
<MainSidebarProvider disableKeyboardShortcut={false}>{children}</MainSidebarProvider>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Added selective hooks for consumers that only need sidebar state or mobile drawer state:
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
import { useMaybeSidebarState, useMobileDrawer } from '@mastra/playground-ui/components/MainSidebar';
|
|
74
|
+
|
|
75
|
+
const sidebar = useMaybeSidebarState();
|
|
76
|
+
const { openMobile } = useMobileDrawer();
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
- Added a pointer-aware ring around the chat composer. At rest it is a plain border; on hover or focus a soft arc lights the edge under the cursor, and while the agent is running the arc rotates on its own so the composer itself shows the run instead of a separate "working…" label. ([#20630](https://github.com/mastra-ai/mastra/pull/20630))
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
import { ComposerBox, ComposerRing } from '@mastra/playground-ui/components/Composer';
|
|
83
|
+
|
|
84
|
+
<ComposerRing busy={isRunning}>
|
|
85
|
+
<ComposerBox>{/* input and actions */}</ComposerBox>
|
|
86
|
+
</ComposerRing>;
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Wrap `ComposerBox` with it and pass `busy` — the ring becomes the composer's edge, so the box no longer needs a border of its own.
|
|
90
|
+
|
|
91
|
+
### Patch Changes
|
|
92
|
+
|
|
93
|
+
- Fixed three problems with the conversation rail in chat threads. ([#20615](https://github.com/mastra-ai/mastra/pull/20615))
|
|
94
|
+
|
|
95
|
+
**The rail now marks the turn you are reading after older history loads.** Scrolling up to load earlier messages used to leave the oldest message highlighted as the current turn, so the marker jumped to the top of the thread instead of following the transcript.
|
|
96
|
+
|
|
97
|
+
**Scrolling stays responsive in long threads.** The rail re-derived the order of every message on each scroll event. It now does that only when messages are added or removed.
|
|
98
|
+
|
|
99
|
+
**The rail can be used in a browser-only app.** Importing it no longer drags the whole `@mastra/react` entry point into the bundle.
|
|
100
|
+
|
|
101
|
+
- Fixed the last column header in Sankey charts (for example SENTIMENT on the Trace Intelligence page) rendering right up against the chart's edge. It now keeps the same spacing as the first column's header. ([#20589](https://github.com/mastra-ai/mastra/pull/20589))
|
|
102
|
+
|
|
103
|
+
- Updated dependencies [[`4844167`](https://github.com/mastra-ai/mastra/commit/4844167cff2d5ec5004e94edd34970833040fa3f), [`c5e56ff`](https://github.com/mastra-ai/mastra/commit/c5e56ff3bcabdf062708f2d48744fec304df6792), [`594f7b2`](https://github.com/mastra-ai/mastra/commit/594f7b28f5263fb9982fd50d95c471fb971ea984), [`7f4e26d`](https://github.com/mastra-ai/mastra/commit/7f4e26dd57bd9b23c278ea21235ab823a3810a6c), [`311f943`](https://github.com/mastra-ai/mastra/commit/311f943bee60e8fdf5c84499ea50e884276c936c), [`322daa6`](https://github.com/mastra-ai/mastra/commit/322daa6d90552909204044790d850958f6745fed), [`db4e6ff`](https://github.com/mastra-ai/mastra/commit/db4e6ff744503112eb64deeaf6c2b54bf26a54c7), [`5faf93f`](https://github.com/mastra-ai/mastra/commit/5faf93f03e19daea394b9e2a923f2e4f833407f2), [`82201f7`](https://github.com/mastra-ai/mastra/commit/82201f75fae8e050a8de2df08b74875ee74c6b83), [`29c324b`](https://github.com/mastra-ai/mastra/commit/29c324b312d7676a71d37d7b5a8a27ff462f4dfe), [`cadaa13`](https://github.com/mastra-ai/mastra/commit/cadaa1372e1077c8e85eb64c5499ba8803caa323), [`0c89896`](https://github.com/mastra-ai/mastra/commit/0c8989673fb7d106837098398131e570c6023b68), [`6d19a65`](https://github.com/mastra-ai/mastra/commit/6d19a6517f5da3911023d446b7e2d5dad8adb1cb), [`23b4238`](https://github.com/mastra-ai/mastra/commit/23b423844ad0bcf2a502a68dd62866d6160f9f6d), [`c5e56ff`](https://github.com/mastra-ai/mastra/commit/c5e56ff3bcabdf062708f2d48744fec304df6792), [`80ad891`](https://github.com/mastra-ai/mastra/commit/80ad891f8cd10379aa5b5af7510c763783b2ab56), [`fb18da5`](https://github.com/mastra-ai/mastra/commit/fb18da56fc35689ae370621a8f10b5b0d8606e20), [`fb18da5`](https://github.com/mastra-ai/mastra/commit/fb18da56fc35689ae370621a8f10b5b0d8606e20), [`e320a76`](https://github.com/mastra-ai/mastra/commit/e320a763feaf65c6be3cebecf746defcbde161b3), [`03b4918`](https://github.com/mastra-ai/mastra/commit/03b4918c80d188ce375334c393e131c6e94bd7eb), [`14ef73a`](https://github.com/mastra-ai/mastra/commit/14ef73a4bbd73e7808414816eb0628ce1d80b5d7), [`b582f7f`](https://github.com/mastra-ai/mastra/commit/b582f7fa2f9c1f87d19efc63d344fbe5dda2608c), [`0a6598b`](https://github.com/mastra-ai/mastra/commit/0a6598bde80bde008986ad6616bed9632b9294cb), [`06000d7`](https://github.com/mastra-ai/mastra/commit/06000d73712911572e913b8a83339270296d0a22), [`1d677d5`](https://github.com/mastra-ai/mastra/commit/1d677d5f99d7db403f7828585e8c25f299f72628), [`9e1dad8`](https://github.com/mastra-ai/mastra/commit/9e1dad8f7b1cab2bb7ade90e5b7561f24577b88a), [`2f43145`](https://github.com/mastra-ai/mastra/commit/2f4314504c03cbba280414ac81ba3197448ee6b0), [`4e35a56`](https://github.com/mastra-ai/mastra/commit/4e35a56cdf8d74a5ff6d5eda01f2c1deaf6cc7be), [`bc3b722`](https://github.com/mastra-ai/mastra/commit/bc3b72225921ebcb05704c3fdf051d69b2f8c3ae), [`481d2c7`](https://github.com/mastra-ai/mastra/commit/481d2c7bc37a5ba1153bd1da8d18a06f0ccd9d16), [`d94b8e1`](https://github.com/mastra-ai/mastra/commit/d94b8e1cee67416d518a8c30099040061bef6a1c), [`93e28ec`](https://github.com/mastra-ai/mastra/commit/93e28ecce9031c02397e0ae8406593e5c7a95883), [`729dab4`](https://github.com/mastra-ai/mastra/commit/729dab408faccfaef0cbb048e5a4338f9172847e), [`484003d`](https://github.com/mastra-ai/mastra/commit/484003d33ff59330c86b19863e4a38732d7e4155), [`3de0188`](https://github.com/mastra-ai/mastra/commit/3de0188bfaf9a9c09c95fe322b53838cf52c70b6), [`5faf93f`](https://github.com/mastra-ai/mastra/commit/5faf93f03e19daea394b9e2a923f2e4f833407f2), [`34d34d8`](https://github.com/mastra-ai/mastra/commit/34d34d8c811df512fef4dd5459f79b7821be1866), [`b582f7f`](https://github.com/mastra-ai/mastra/commit/b582f7fa2f9c1f87d19efc63d344fbe5dda2608c), [`933d291`](https://github.com/mastra-ai/mastra/commit/933d291146b789c19442ad206f94da3e4be90c64), [`a1cb98d`](https://github.com/mastra-ai/mastra/commit/a1cb98d11990b560b98482292a1f34aa1a2d9092), [`598ad82`](https://github.com/mastra-ai/mastra/commit/598ad82d41c41389a686338a1d0e50b7400e1938), [`1fd6aad`](https://github.com/mastra-ai/mastra/commit/1fd6aad1ea4a9d32f65efa832307c35e981a4c0a), [`19ccefa`](https://github.com/mastra-ai/mastra/commit/19ccefa628dc971b4bfa2058a324a6ac9b846358), [`5faf93f`](https://github.com/mastra-ai/mastra/commit/5faf93f03e19daea394b9e2a923f2e4f833407f2), [`34d34d8`](https://github.com/mastra-ai/mastra/commit/34d34d8c811df512fef4dd5459f79b7821be1866), [`5faf93f`](https://github.com/mastra-ai/mastra/commit/5faf93f03e19daea394b9e2a923f2e4f833407f2)]:
|
|
104
|
+
- @mastra/core@1.56.0
|
|
105
|
+
- @mastra/react@1.4.0
|
|
106
|
+
- @mastra/client-js@1.37.0
|
|
107
|
+
- @mastra/memory@1.25.0
|
|
108
|
+
|
|
3
109
|
## 46.0.0-alpha.7
|
|
4
110
|
|
|
5
111
|
### Patch Changes
|
|
@@ -4,8 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
4
4
|
|
|
5
5
|
const react = require('@mastra/react');
|
|
6
6
|
const React = require('react');
|
|
7
|
-
const toast = require('../../../toast-Bh4WQDyj.cjs');
|
|
8
7
|
const downloadJson = require('../../../downloadJson-PWUDbzkB.cjs');
|
|
8
|
+
const toast = require('../../../toast-Bh4WQDyj.cjs');
|
|
9
9
|
|
|
10
10
|
function useDownloadTraceJson() {
|
|
11
11
|
const client = react.useMastraClient();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useMastraClient } from '@mastra/react';
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
-
import { t as toast } from '../../../toast-BKsfnapA.js';
|
|
4
3
|
import { d as downloadJson } from '../../../downloadJson-DuPoMa_6.js';
|
|
4
|
+
import { t as toast } from '../../../toast-BKsfnapA.js';
|
|
5
5
|
|
|
6
6
|
function useDownloadTraceJson() {
|
|
7
7
|
const client = useMastraClient();
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mastra/playground-ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "46.0.0
|
|
4
|
+
"version": "46.0.0",
|
|
5
5
|
"description": "Mastra Playground components",
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.css"
|
|
@@ -150,8 +150,8 @@
|
|
|
150
150
|
"react": ">=19.0.0",
|
|
151
151
|
"react-dom": ">=19.0.0",
|
|
152
152
|
"tailwindcss": "^4.0.0",
|
|
153
|
-
"@mastra/
|
|
154
|
-
"@mastra/
|
|
153
|
+
"@mastra/client-js": "^1.37.0",
|
|
154
|
+
"@mastra/react": "1.4.0"
|
|
155
155
|
},
|
|
156
156
|
"devDependencies": {
|
|
157
157
|
"@storybook/addon-a11y": "^10.4.1",
|
|
@@ -189,11 +189,11 @@
|
|
|
189
189
|
"vite-plugin-dts": "^4.5.4",
|
|
190
190
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
191
191
|
"vitest": "4.1.10",
|
|
192
|
-
"@
|
|
193
|
-
"@mastra/
|
|
194
|
-
"@mastra/memory": "1.25.0
|
|
195
|
-
"@
|
|
196
|
-
"@mastra/react": "1.4.0
|
|
192
|
+
"@internal/lint": "0.0.120",
|
|
193
|
+
"@mastra/client-js": "^1.37.0",
|
|
194
|
+
"@mastra/memory": "1.25.0",
|
|
195
|
+
"@mastra/core": "1.56.0",
|
|
196
|
+
"@mastra/react": "1.4.0"
|
|
197
197
|
},
|
|
198
198
|
"homepage": "https://mastra.ai",
|
|
199
199
|
"repository": {
|