@mast-ai/react-ui 0.1.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/LICENSE +193 -0
- package/README.md +57 -0
- package/dist/approval.d.ts +82 -0
- package/dist/components/AssistantMessage.d.ts +44 -0
- package/dist/components/ChatInput.d.ts +41 -0
- package/dist/components/ConversationPanel.d.ts +43 -0
- package/dist/components/InlineApproval.d.ts +26 -0
- package/dist/components/MessageItem.d.ts +29 -0
- package/dist/components/MessageList.d.ts +38 -0
- package/dist/components/ThinkingBlock.d.ts +32 -0
- package/dist/components/ToolCallBlock.d.ts +11 -0
- package/dist/components/UserMessage.d.ts +19 -0
- package/dist/context.d.ts +113 -0
- package/dist/hooks/useAgentStream.d.ts +131 -0
- package/dist/icons.d.ts +21 -0
- package/dist/index.d.ts +29 -0
- package/dist/index.js +1012 -0
- package/dist/mentions/MentionPicker.d.ts +30 -0
- package/dist/mentions/index.d.ts +6 -0
- package/dist/mentions/types.d.ts +63 -0
- package/dist/mentions/useMentions.d.ts +54 -0
- package/dist/mentions/utils.d.ts +33 -0
- package/dist/styles.css +631 -0
- package/dist/types.d.ts +162 -0
- package/package.json +71 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
Apache License
|
|
2
|
+
Version 2.0, January 2004
|
|
3
|
+
http://www.apache.org/licenses/
|
|
4
|
+
|
|
5
|
+
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
6
|
+
|
|
7
|
+
1. Definitions.
|
|
8
|
+
|
|
9
|
+
"License" shall mean the terms and conditions for use, reproduction,
|
|
10
|
+
and distribution as defined by Sections 1 through 9 of this document.
|
|
11
|
+
|
|
12
|
+
"Licensor" shall mean the copyright owner or entity authorized by
|
|
13
|
+
the copyright owner that is granting the License.
|
|
14
|
+
|
|
15
|
+
"Legal Entity" shall mean the union of the acting entity and all
|
|
16
|
+
other entities that control, are controlled by, or are under common
|
|
17
|
+
control with that entity. For the purposes of this definition,
|
|
18
|
+
"control" means (i) the power, direct or indirect, to cause the
|
|
19
|
+
direction or management of such entity, whether by contract or
|
|
20
|
+
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
21
|
+
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
22
|
+
|
|
23
|
+
"You" (or "Your") shall mean an individual or Legal Entity
|
|
24
|
+
exercising permissions granted by this License.
|
|
25
|
+
|
|
26
|
+
"Source" form shall mean the preferred form for making modifications,
|
|
27
|
+
including but not limited to software source code, documentation
|
|
28
|
+
source, and configuration files.
|
|
29
|
+
|
|
30
|
+
"Object" form shall mean any form resulting from mechanical
|
|
31
|
+
transformation or translation of a Source form, including but
|
|
32
|
+
not limited to compiled object code, generated documentation,
|
|
33
|
+
and conversions to other media types.
|
|
34
|
+
|
|
35
|
+
"Work" shall mean the work of authorship made available under
|
|
36
|
+
the License, as indicated by a copyright notice that is included in
|
|
37
|
+
or attached to the work (an example is provided in the Appendix below).
|
|
38
|
+
|
|
39
|
+
"Derivative Works" shall mean any work, whether in Source or Object
|
|
40
|
+
form, that is based on (or derived from) the Work and for which the
|
|
41
|
+
editorial revisions, annotations, elaborations, or other modifications
|
|
42
|
+
represent, as a whole, an original work of authorship. For the purposes
|
|
43
|
+
of this License, Derivative Works shall not include works that remain
|
|
44
|
+
separable from, or merely link (or bind by name) to the interfaces of,
|
|
45
|
+
the Work and Derivative Works thereof.
|
|
46
|
+
|
|
47
|
+
"Contribution" shall mean, as submitted to the Licensor for inclusion
|
|
48
|
+
in the Work by the copyright owner or by an individual or Legal Entity
|
|
49
|
+
authorized to submit on behalf of the copyright owner. For the purposes
|
|
50
|
+
of this definition, "submitted" means any form of electronic, verbal,
|
|
51
|
+
or written communication sent to the Licensor or its representatives,
|
|
52
|
+
including but not limited to communication on electronic mailing lists,
|
|
53
|
+
source code control systems, and issue tracking systems that are managed
|
|
54
|
+
by, or on behalf of, the Licensor for the purpose of discussing and
|
|
55
|
+
improving the Work, but excluding communication that is conspicuously
|
|
56
|
+
marked or designated in writing by the copyright owner as "Not a
|
|
57
|
+
Contribution."
|
|
58
|
+
|
|
59
|
+
"Contributor" shall mean Licensor and any Legal Entity on behalf of
|
|
60
|
+
whom a Contribution has been received by the Licensor and included
|
|
61
|
+
within the Work.
|
|
62
|
+
|
|
63
|
+
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
64
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
65
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
66
|
+
copyright license to reproduce, prepare Derivative Works of,
|
|
67
|
+
publicly display, publicly perform, sublicense, and distribute the
|
|
68
|
+
Work and such Derivative Works in Source or Object form.
|
|
69
|
+
|
|
70
|
+
3. Grant of Patent License. Subject to the terms and conditions of
|
|
71
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
72
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
73
|
+
(except as stated in this section) patent license to make, have made,
|
|
74
|
+
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
75
|
+
where such license applies only to those patent claims licensable
|
|
76
|
+
by such Contributor that are necessarily infringed by their
|
|
77
|
+
Contribution(s) alone or by the combination of their Contribution(s)
|
|
78
|
+
with the Work to which such Contribution(s) was submitted. If You
|
|
79
|
+
institute patent litigation against any entity (including a cross-claim
|
|
80
|
+
or counterclaim in a lawsuit) alleging that the Work or any patent
|
|
81
|
+
claim embodied in the Work constitutes direct or contributory patent
|
|
82
|
+
infringement, then any patent licenses granted to You under this
|
|
83
|
+
License for that Work shall terminate as of the date such litigation
|
|
84
|
+
is filed.
|
|
85
|
+
|
|
86
|
+
4. Redistribution. You may reproduce and distribute copies of the
|
|
87
|
+
Work or Derivative Works thereof in any medium, with or without
|
|
88
|
+
modifications, and in Source or Object form, provided that You
|
|
89
|
+
meet the following conditions:
|
|
90
|
+
|
|
91
|
+
(a) You must give any other recipients of the Work or Derivative
|
|
92
|
+
Works a copy of this License; and
|
|
93
|
+
|
|
94
|
+
(b) You must cause any modified files to carry prominent notices
|
|
95
|
+
stating that You changed the files; and
|
|
96
|
+
|
|
97
|
+
(c) You must retain, in the Source form of any Derivative Works
|
|
98
|
+
that You distribute, all copyright, patent, trademark, and
|
|
99
|
+
attribution notices from the Source form of the Work,
|
|
100
|
+
excluding those notices that do not pertain to any part of
|
|
101
|
+
the Derivative Works; and
|
|
102
|
+
|
|
103
|
+
(d) If the Work includes a "NOTICE" text file as part of its
|
|
104
|
+
distribution, You must include a readable copy of the
|
|
105
|
+
attribution notices contained within such NOTICE file, in
|
|
106
|
+
at least one of the following places: within a NOTICE text
|
|
107
|
+
file distributed as part of the Derivative Works; within
|
|
108
|
+
the Source form or documentation, if provided along with the
|
|
109
|
+
Derivative Works; or, within a display generated by the
|
|
110
|
+
Derivative Works, if and wherever such third-party notices
|
|
111
|
+
normally appear. The contents of the NOTICE file are for
|
|
112
|
+
informational purposes only and do not modify the License.
|
|
113
|
+
You may add Your own attribution notices within Derivative
|
|
114
|
+
Works that You distribute, alongside or in addition to the
|
|
115
|
+
NOTICE text from the Work, provided that such additional
|
|
116
|
+
attribution notices cannot be construed as modifying the License.
|
|
117
|
+
|
|
118
|
+
You may add Your own license statement for Your modifications and
|
|
119
|
+
may provide additional grant of rights to use, copy, modify, merge,
|
|
120
|
+
publish, distribute, sublicense, and/or sell copies of the
|
|
121
|
+
Contribution, and to permit persons to whom the Contribution is
|
|
122
|
+
furnished to do so.
|
|
123
|
+
|
|
124
|
+
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
125
|
+
any Contribution intentionally submitted for inclusion in the Work
|
|
126
|
+
by You to the Licensor shall be under the terms and conditions of
|
|
127
|
+
this License, without any additional terms or conditions.
|
|
128
|
+
Notwithstanding the above, nothing herein shall supersede or modify
|
|
129
|
+
the terms of any separate license agreement you may have executed
|
|
130
|
+
with Licensor regarding such Contributions.
|
|
131
|
+
|
|
132
|
+
6. Trademarks. This License does not grant permission to use the trade
|
|
133
|
+
names, trademarks, service marks, or product names of the Licensor,
|
|
134
|
+
except as required for reasonable and customary use in describing the
|
|
135
|
+
origin of the Work and reproducing the content of the NOTICE file.
|
|
136
|
+
|
|
137
|
+
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
138
|
+
agreed to in writing, Licensor provides the Work (and each
|
|
139
|
+
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
140
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
141
|
+
implied, including, without limitation, any conditions of
|
|
142
|
+
TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
143
|
+
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
144
|
+
appropriateness of using or reproducing the Work and assume any
|
|
145
|
+
risks associated with Your exercise of permissions under this License.
|
|
146
|
+
|
|
147
|
+
8. Limitation of Liability. In no event and under no legal theory,
|
|
148
|
+
whether in tort (including negligence), contract, or otherwise,
|
|
149
|
+
unless required by applicable law (such as deliberate and grossly
|
|
150
|
+
negligent acts) or agreed to in writing, shall any Contributor be
|
|
151
|
+
liable to You for damages, including any direct, indirect, special,
|
|
152
|
+
incidental, or exemplary damages of any character arising as a
|
|
153
|
+
result of this License or out of the use or inability to use the
|
|
154
|
+
Work (including but not limited to damages for loss of goodwill,
|
|
155
|
+
workstop, computer failure or malfunction, or all other commercial
|
|
156
|
+
damages or losses), even if such Contributor has been advised of the
|
|
157
|
+
possibility of such damages.
|
|
158
|
+
|
|
159
|
+
9. Accepting Warranty or Additional Liability. While redistributing
|
|
160
|
+
the Work or Derivative Works thereof, You may choose to offer,
|
|
161
|
+
and charge a fee for, acceptance of support, warranty, indemnity,
|
|
162
|
+
or other liability obligations and/or rights consistent with this
|
|
163
|
+
License. However, in accepting such obligations, You may act only
|
|
164
|
+
on Your own behalf and on Your sole responsibility, not on behalf
|
|
165
|
+
of any other Contributor, and only if You agree to indemnify,
|
|
166
|
+
defend, and hold each Contributor harmless for any liability
|
|
167
|
+
incurred by, or claims asserted against, such Contributor by reason
|
|
168
|
+
of your accepting any such warranty or additional liability.
|
|
169
|
+
|
|
170
|
+
END OF TERMS AND CONDITIONS
|
|
171
|
+
|
|
172
|
+
APPENDIX: How to apply the Apache License to your work.
|
|
173
|
+
|
|
174
|
+
To apply the Apache License to your work, attach the following
|
|
175
|
+
boilerplate notice, with the fields enclosed by brackets "[]"
|
|
176
|
+
replaced with your own identifying information. (Don't include
|
|
177
|
+
the brackets!) The text should be enclosed in the appropriate
|
|
178
|
+
comment syntax for the programming language used. Source files
|
|
179
|
+
may also indicate a copyright notice separately from the text below.
|
|
180
|
+
|
|
181
|
+
Copyright 2026 Andre Cipriani Bandarra
|
|
182
|
+
|
|
183
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
184
|
+
you may not use this file except in compliance with the License.
|
|
185
|
+
You may obtain a copy of the License at
|
|
186
|
+
|
|
187
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
188
|
+
|
|
189
|
+
Unless required by applicable law or agreed to in writing, software
|
|
190
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
191
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
192
|
+
See the License for the specific language governing permissions and
|
|
193
|
+
limitations under the License.
|
package/README.md
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# @mast-ai/react-ui
|
|
2
|
+
|
|
3
|
+
React 19 components and hooks for [MAST](https://github.com/andreban/mast-ai). Turns an `AgentRunner` into a streaming chat UI: a default theme, a complete `<ConversationPanel>` widget, and headless primitives (`useAgent`, `useAgentStream`) for fully custom layouts.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @mast-ai/core @mast-ai/react-ui @tanstack/react-virtual react react-dom
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
`@tanstack/react-virtual` is a required peer dependency — `<MessageList>` virtualises long conversations. React must be 19.0 or newer.
|
|
12
|
+
|
|
13
|
+
Optional peer dependencies (auto-detected at runtime if installed):
|
|
14
|
+
|
|
15
|
+
| Package | Adds |
|
|
16
|
+
| ------------------------------------------------- | ------------------------------------ |
|
|
17
|
+
| `react-markdown`, `remark-gfm`, `rehype-sanitize` | Markdown rendering with sanitisation |
|
|
18
|
+
|
|
19
|
+
## Quick start
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { AgentRunner, ToolRegistry, createAgent } from '@mast-ai/core';
|
|
23
|
+
import { GoogleGenAIAdapter } from '@mast-ai/google-genai';
|
|
24
|
+
import { GoogleGenAI } from '@google/genai';
|
|
25
|
+
import { AgentProvider, ConversationPanel } from '@mast-ai/react-ui';
|
|
26
|
+
import '@mast-ai/react-ui/styles.css';
|
|
27
|
+
|
|
28
|
+
const client = new GoogleGenAI({ apiKey: import.meta.env.VITE_GEMINI_API_KEY });
|
|
29
|
+
const adapter = new GoogleGenAIAdapter(client, { model: 'gemini-2.5-flash' });
|
|
30
|
+
const runner = new AgentRunner(adapter, new ToolRegistry());
|
|
31
|
+
const agent = createAgent({ name: 'Assistant', instructions: 'Be helpful.', tools: [] });
|
|
32
|
+
|
|
33
|
+
export function App() {
|
|
34
|
+
return (
|
|
35
|
+
<AgentProvider runner={runner} agent={agent}>
|
|
36
|
+
<ConversationPanel />
|
|
37
|
+
</AgentProvider>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## What's exported
|
|
43
|
+
|
|
44
|
+
- **`<AgentProvider>` / `useAgent()`** — context that exposes the runner, conversation, and `sendMessage`.
|
|
45
|
+
- **`<ConversationPanel>`** — full chat UI: message list, input, approval prompts, tool call blocks.
|
|
46
|
+
- **Primitives** — `<MessageList>`, `<MessageItem>`, `<UserMessage>`, `<AssistantMessage>`, `<ChatInput>`, `<ToolCallBlock>`, `<ThinkingBlock>`, `<InlineApproval>` for custom layouts.
|
|
47
|
+
- **`useAgentStream()`** — fully headless variant; you own all rendering.
|
|
48
|
+
- **Mentions** — `useMentions()` and helpers for `@`-mention pickers in `<ChatInput>`.
|
|
49
|
+
|
|
50
|
+
## Documentation
|
|
51
|
+
|
|
52
|
+
- [Usage guide](https://github.com/andreban/mast-ai/blob/main/docs/react-ui/USAGE.md) — comprehensive walkthrough of every prop and pattern.
|
|
53
|
+
- [API spec](https://github.com/andreban/mast-ai/blob/main/docs/react-ui/SPEC.md) — type reference.
|
|
54
|
+
|
|
55
|
+
## License
|
|
56
|
+
|
|
57
|
+
Apache-2.0. Copyright 2026 Andre Cipriani Bandarra.
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import type { ToolDefinition, ToolProvider } from '@mast-ai/core';
|
|
2
|
+
import type { ToolCallStatus, ToolEventEntry } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Sentinel value returned from {@link OnApprovalRequired} to defer the
|
|
5
|
+
* decision to the inline approval queue. The proxy enqueues a
|
|
6
|
+
* {@link PendingApproval} handle on `useAgent().pendingApprovals` and waits
|
|
7
|
+
* for the consumer (or the built-in `<InlineApproval>` slot) to call
|
|
8
|
+
* `approve()`, `reject()`, or `respondWith(...)`.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* onApprovalRequired={async (toolCall) => {
|
|
13
|
+
* if (toolCall.name === 'set_page_title') return INLINE_APPROVAL;
|
|
14
|
+
* return window.confirm(`Allow ${toolCall.name}?`);
|
|
15
|
+
* }}
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export declare const INLINE_APPROVAL: unique symbol;
|
|
19
|
+
/**
|
|
20
|
+
* Callback invoked by {@link AgentProvider} before executing a tool whose
|
|
21
|
+
* effective approval policy is `true`. Apps render their own confirmation UI
|
|
22
|
+
* inside this callback and resolve with one of:
|
|
23
|
+
*
|
|
24
|
+
* - `true` — proceed with the tool call as normal
|
|
25
|
+
* - `false` — cancel; the runner receives a synthetic "user cancelled" result
|
|
26
|
+
* - `string` — skip execution and inject the string directly as the tool result
|
|
27
|
+
* - {@link INLINE_APPROVAL} — defer to the inline approval queue
|
|
28
|
+
*/
|
|
29
|
+
export type OnApprovalRequired = (toolCall: ToolEventEntry) => Promise<boolean | string | typeof INLINE_APPROVAL>;
|
|
30
|
+
/** Synthetic tool result returned when an approval resolves to `false`. */
|
|
31
|
+
export declare const APPROVAL_CANCELLED_RESULT = "User cancelled the tool call.";
|
|
32
|
+
/**
|
|
33
|
+
* A live handle for a tool call that is waiting on the inline approval queue.
|
|
34
|
+
* The library exposes the current set via `useAgent().pendingApprovals` and
|
|
35
|
+
* passes the matching handle into the `renderApproval` slot.
|
|
36
|
+
*/
|
|
37
|
+
export interface PendingApproval {
|
|
38
|
+
/** Name of the tool awaiting approval. */
|
|
39
|
+
toolName: string;
|
|
40
|
+
/** Arguments the model passed to the tool. */
|
|
41
|
+
args: unknown;
|
|
42
|
+
/** Approve the call — proceed with normal tool execution. */
|
|
43
|
+
approve: () => void;
|
|
44
|
+
/** Reject the call — runner receives the synthetic cancelled result. */
|
|
45
|
+
reject: () => void;
|
|
46
|
+
/** Skip execution and inject `result` as the tool result. */
|
|
47
|
+
respondWith: (result: string) => void;
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Computes the effective approval requirement for a tool given a list of
|
|
51
|
+
* runtime overrides. Implements the rule from SPEC §9.3:
|
|
52
|
+
*
|
|
53
|
+
* ```
|
|
54
|
+
* needsApproval = (def.requiresApproval || overrideSet.has(name)) && !suppressSet.has(name)
|
|
55
|
+
* ```
|
|
56
|
+
*
|
|
57
|
+
* Names prefixed with `!` in `approvalOverride` suppress approval; unprefixed
|
|
58
|
+
* names add it.
|
|
59
|
+
*/
|
|
60
|
+
export declare function computeNeedsApproval(def: ToolDefinition, approvalOverride: readonly string[] | undefined): boolean;
|
|
61
|
+
/** Hooks the proxy uses to drive React state during an approval. */
|
|
62
|
+
export interface ApprovalProxyHooks {
|
|
63
|
+
/** Called with `true` when waiting starts and `false` when a decision is reached. */
|
|
64
|
+
notifyAwaiting?: (name: string, awaiting: boolean) => void;
|
|
65
|
+
/** Called when a decision sets the final tool-call status (e.g. cancelled). */
|
|
66
|
+
setStatus?: (name: string, status: ToolCallStatus) => void;
|
|
67
|
+
/**
|
|
68
|
+
* Pushes a pending approval onto the queue and returns a promise that
|
|
69
|
+
* resolves once the consumer calls `approve`, `reject`, or `respondWith`.
|
|
70
|
+
*/
|
|
71
|
+
enqueueInline?: (toolName: string, args: unknown) => Promise<boolean | string>;
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* Wraps a {@link ToolProvider} so that tools whose effective approval flag is
|
|
75
|
+
* `true` are intercepted: the wrapper invokes {@link OnApprovalRequired} before
|
|
76
|
+
* delegating to the underlying tool. Tools that do not require approval are
|
|
77
|
+
* returned unchanged.
|
|
78
|
+
*
|
|
79
|
+
* The two `get*` parameters are read on every `getTool` call so that React
|
|
80
|
+
* prop changes are picked up without rebuilding the wrapper.
|
|
81
|
+
*/
|
|
82
|
+
export declare function withApprovalProxy(provider: ToolProvider, getCallback: () => OnApprovalRequired | undefined, getApprovalOverride: () => readonly string[] | undefined, hooks?: ApprovalProxyHooks): ToolProvider;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { PendingApproval } from '../approval';
|
|
3
|
+
import type { ConversationEntry, ToolEventEntry } from '../types';
|
|
4
|
+
/**
|
|
5
|
+
* Props accepted by {@link AssistantMessage}.
|
|
6
|
+
*/
|
|
7
|
+
export interface AssistantMessageProps {
|
|
8
|
+
/** The conversation entry to render. Must have `role === 'assistant'`. */
|
|
9
|
+
entry: ConversationEntry;
|
|
10
|
+
/** Optional class added to the root element. */
|
|
11
|
+
className?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Replaces the default text renderer. When provided, takes precedence over
|
|
14
|
+
* the optional `react-markdown` integration and is invoked for every
|
|
15
|
+
* non-empty `entry.text`.
|
|
16
|
+
*/
|
|
17
|
+
renderMessage?: (text: string) => ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* Replaces the default tool-call renderer. Called once per element of
|
|
20
|
+
* `entry.toolEvents`.
|
|
21
|
+
*
|
|
22
|
+
* Receives the tool event and, when the call is awaiting an inline
|
|
23
|
+
* approval decision, a {@link PendingApproval} handle exposing
|
|
24
|
+
* `approve()`, `reject()`, and `respondWith()`. Consumers can dispatch on
|
|
25
|
+
* tool name, and use the bundled `<InlineApproval>` or `<ToolCallBlock>`
|
|
26
|
+
* components as building blocks.
|
|
27
|
+
*
|
|
28
|
+
* When this prop is omitted, the library defaults to rendering
|
|
29
|
+
* `<InlineApproval>` for tool events with a pending approval handle and
|
|
30
|
+
* `<ToolCallBlock>` otherwise.
|
|
31
|
+
*/
|
|
32
|
+
renderToolCall?: (entry: ToolEventEntry, approval?: PendingApproval) => ReactNode;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Renders an assistant turn: an optional {@link ThinkingBlock}, zero or more
|
|
36
|
+
* {@link ToolCallBlock}s, then the final text.
|
|
37
|
+
*
|
|
38
|
+
* Final text is rendered with `react-markdown` (sanitised via
|
|
39
|
+
* `rehype-sanitize`) when the optional peer dependencies are installed; it
|
|
40
|
+
* falls back to a plain `<p>` otherwise. Apps may override either layer via
|
|
41
|
+
* `renderMessage` (the entire text region) or `renderToolCall` (each tool
|
|
42
|
+
* invocation) without losing the surrounding wiring.
|
|
43
|
+
*/
|
|
44
|
+
export declare function AssistantMessage({ entry, className, renderMessage, renderToolCall, }: AssistantMessageProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { MentionsConfig } from '../mentions/types';
|
|
3
|
+
/**
|
|
4
|
+
* Props accepted by {@link ChatInput}.
|
|
5
|
+
*/
|
|
6
|
+
export interface ChatInputProps {
|
|
7
|
+
/** Optional class added to the root element. */
|
|
8
|
+
className?: string;
|
|
9
|
+
/** Placeholder text shown in the empty textarea. */
|
|
10
|
+
placeholder?: string;
|
|
11
|
+
/** Overrides the default send button content (the `send` icon). */
|
|
12
|
+
sendLabel?: ReactNode;
|
|
13
|
+
/** Overrides the default cancel button content (the `stop` icon). */
|
|
14
|
+
cancelLabel?: ReactNode;
|
|
15
|
+
/**
|
|
16
|
+
* Opt-in `@`-mention picker. When supplied, the textarea is wrapped in a
|
|
17
|
+
* compound input that renders inline chips for committed selections and
|
|
18
|
+
* shows a keyboard-navigable picker while the user types `@<query>`. On
|
|
19
|
+
* submit, the input calls `sendMessage(prompt, displayText)` so the user
|
|
20
|
+
* bubble shows the chip form while the LLM receives the augmented prompt
|
|
21
|
+
* (from `mentions.buildPrompt` if provided, otherwise the inline text).
|
|
22
|
+
*
|
|
23
|
+
* Omit to keep the plain textarea behaviour unchanged.
|
|
24
|
+
*/
|
|
25
|
+
mentions?: MentionsConfig;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Text input wired to {@link useAgent}.
|
|
29
|
+
*
|
|
30
|
+
* - Pressing Enter submits the message; Shift+Enter inserts a newline.
|
|
31
|
+
* - The textarea grows vertically with content (via the `rows` attribute).
|
|
32
|
+
* - While a run is in progress the send button is replaced by a cancel button
|
|
33
|
+
* that calls `cancel()`. The textarea itself is disabled during the run so
|
|
34
|
+
* the user cannot edit while the agent streams.
|
|
35
|
+
* - Send and cancel slot their content from `useIcons().send` / `.stop` by
|
|
36
|
+
* default; consumers can override either via the `sendLabel` / `cancelLabel`
|
|
37
|
+
* props without giving up the surrounding accessibility wiring.
|
|
38
|
+
* - Pass `mentions` to enable the optional `@`-mention picker; see the
|
|
39
|
+
* `mentions` package directory for the full API.
|
|
40
|
+
*/
|
|
41
|
+
export declare function ChatInput({ className, placeholder, sendLabel, cancelLabel, mentions, }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { PendingApproval } from '../approval';
|
|
3
|
+
import type { MentionsConfig } from '../mentions/types';
|
|
4
|
+
import type { ToolEventEntry } from '../types';
|
|
5
|
+
/**
|
|
6
|
+
* Props accepted by {@link ConversationPanel}.
|
|
7
|
+
*/
|
|
8
|
+
export interface ConversationPanelProps {
|
|
9
|
+
/**
|
|
10
|
+
* Forces a theme regardless of the user's `prefers-color-scheme` setting.
|
|
11
|
+
* When omitted, the panel follows the OS preference via the default
|
|
12
|
+
* stylesheet's media query.
|
|
13
|
+
*/
|
|
14
|
+
theme?: 'light' | 'dark';
|
|
15
|
+
/** Optional class added to the root `[data-mast-root]` element. */
|
|
16
|
+
className?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Replaces the default tool-call renderer for the entire list. Receives a
|
|
19
|
+
* {@link PendingApproval} handle as the second argument when the call is
|
|
20
|
+
* awaiting an inline approval decision.
|
|
21
|
+
*/
|
|
22
|
+
renderToolCall?: (entry: ToolEventEntry, approval?: PendingApproval) => ReactNode;
|
|
23
|
+
/** Replaces the default assistant text renderer for the entire list. */
|
|
24
|
+
renderMessage?: (text: string) => ReactNode;
|
|
25
|
+
/** Placeholder text for the {@link ChatInput} field. */
|
|
26
|
+
inputPlaceholder?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Forwarded to the internal {@link ChatInput} when the optional `@`-mention
|
|
29
|
+
* picker should be enabled. Omit to keep the plain textarea behaviour.
|
|
30
|
+
*/
|
|
31
|
+
mentions?: MentionsConfig;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Renders a complete chat UI as a single composable unit.
|
|
35
|
+
*
|
|
36
|
+
* Internally renders {@link MessageList} and {@link ChatInput} inside a
|
|
37
|
+
* `[data-mast-root]` div so the default stylesheet's CSS custom properties
|
|
38
|
+
* resolve. Sets `data-mast-theme` from the optional `theme` prop, which the
|
|
39
|
+
* default stylesheet uses to override the OS-driven dark mode preference.
|
|
40
|
+
*
|
|
41
|
+
* Must be rendered inside an `<AgentProvider>`.
|
|
42
|
+
*/
|
|
43
|
+
export declare function ConversationPanel({ theme, className, renderToolCall, renderMessage, inputPlaceholder, mentions, }: ConversationPanelProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { ToolEventEntry } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Props passed to a custom `renderApproval` slot and accepted by the
|
|
4
|
+
* built-in {@link InlineApproval} component.
|
|
5
|
+
*/
|
|
6
|
+
export interface InlineApprovalProps {
|
|
7
|
+
/** The tool call awaiting approval. */
|
|
8
|
+
entry: ToolEventEntry;
|
|
9
|
+
/** Approve the call; the underlying tool will execute. */
|
|
10
|
+
approve: () => void;
|
|
11
|
+
/** Reject the call; the runner receives the synthetic cancelled result. */
|
|
12
|
+
reject: () => void;
|
|
13
|
+
/** Skip execution and inject `result` as the tool result. */
|
|
14
|
+
respondWith: (result: string) => void;
|
|
15
|
+
/** Optional class added to the root element. */
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Default UI rendered for tool calls awaiting an inline approval decision.
|
|
20
|
+
*
|
|
21
|
+
* Displays the tool name, formatted args, and Approve/Reject buttons. Used by
|
|
22
|
+
* {@link AssistantMessage} when neither `renderApproval` nor `renderToolCall`
|
|
23
|
+
* is provided; consumers can also import it directly to compose alongside a
|
|
24
|
+
* custom `renderApproval` slot.
|
|
25
|
+
*/
|
|
26
|
+
export declare function InlineApproval({ entry, approve, reject, className }: InlineApprovalProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { PendingApproval } from '../approval';
|
|
3
|
+
import type { ConversationEntry, ToolEventEntry } from '../types';
|
|
4
|
+
/**
|
|
5
|
+
* Props accepted by {@link MessageItem}.
|
|
6
|
+
*/
|
|
7
|
+
export interface MessageItemProps {
|
|
8
|
+
/** The conversation entry to render. */
|
|
9
|
+
entry: ConversationEntry;
|
|
10
|
+
/** Optional class added to the inner message component. */
|
|
11
|
+
className?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Forwarded to {@link AssistantMessage}. Has no effect when `entry.role` is
|
|
14
|
+
* `'user'`.
|
|
15
|
+
*/
|
|
16
|
+
renderToolCall?: (entry: ToolEventEntry, approval?: PendingApproval) => ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Forwarded to {@link AssistantMessage}. Has no effect when `entry.role` is
|
|
19
|
+
* `'user'`.
|
|
20
|
+
*/
|
|
21
|
+
renderMessage?: (text: string) => ReactNode;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Renders a single {@link ConversationEntry} by dispatching to
|
|
25
|
+
* {@link UserMessage} or {@link AssistantMessage} based on `entry.role`.
|
|
26
|
+
*
|
|
27
|
+
* Used by {@link MessageList} to render each virtualised row.
|
|
28
|
+
*/
|
|
29
|
+
export declare function MessageItem({ entry, className, renderToolCall, renderMessage }: MessageItemProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { PendingApproval } from '../approval';
|
|
3
|
+
import type { ToolEventEntry } from '../types';
|
|
4
|
+
/**
|
|
5
|
+
* Props accepted by {@link MessageList}.
|
|
6
|
+
*/
|
|
7
|
+
export interface MessageListProps {
|
|
8
|
+
/** Optional class added to the scrollable root element. */
|
|
9
|
+
className?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Forwarded to each {@link MessageItem} so consumers can replace the default
|
|
12
|
+
* tool call renderer for the entire list. Receives a {@link PendingApproval}
|
|
13
|
+
* handle as the second argument when the call is awaiting an inline approval
|
|
14
|
+
* decision.
|
|
15
|
+
*/
|
|
16
|
+
renderToolCall?: (entry: ToolEventEntry, approval?: PendingApproval) => ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Forwarded to each {@link MessageItem} so consumers can replace the default
|
|
19
|
+
* assistant text renderer for the entire list.
|
|
20
|
+
*/
|
|
21
|
+
renderMessage?: (text: string) => ReactNode;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Scrollable list of {@link ConversationEntry} items rendered with
|
|
25
|
+
* `@tanstack/react-virtual`.
|
|
26
|
+
*
|
|
27
|
+
* Only the visible window of messages is mounted, so long-running conversations
|
|
28
|
+
* stay performant. Item heights are dynamic: each rendered row is observed via
|
|
29
|
+
* `virtualizer.measureElement`, so messages with long tool call results or
|
|
30
|
+
* large markdown blocks expand the viewport correctly.
|
|
31
|
+
*
|
|
32
|
+
* Auto-scrolls to the bottom whenever a new entry is appended or the last
|
|
33
|
+
* entry's `text` grows during streaming.
|
|
34
|
+
*
|
|
35
|
+
* Reads `messages` from `useAgent()`, so this component must be rendered
|
|
36
|
+
* inside an `<AgentProvider>`.
|
|
37
|
+
*/
|
|
38
|
+
export declare function MessageList({ className, renderToolCall, renderMessage }: MessageListProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Props accepted by {@link ThinkingBlock}.
|
|
3
|
+
*/
|
|
4
|
+
export interface ThinkingBlockProps {
|
|
5
|
+
/** The accumulated thinking/reasoning text to display when expanded. */
|
|
6
|
+
content: string;
|
|
7
|
+
/**
|
|
8
|
+
* `true` while the assistant is still streaming thinking deltas.
|
|
9
|
+
* Drives a pulsing indicator next to the label.
|
|
10
|
+
*/
|
|
11
|
+
isStreaming?: boolean;
|
|
12
|
+
/** Optional class added to the root `<details>` element. */
|
|
13
|
+
className?: string;
|
|
14
|
+
/** Header label. Default: `'Thinking Process'`. */
|
|
15
|
+
label?: string;
|
|
16
|
+
/**
|
|
17
|
+
* When provided, controls the `open` attribute on the root `<details>`
|
|
18
|
+
* element. Useful for auto-expanding the block while streaming and letting
|
|
19
|
+
* it collapse afterwards (e.g. inside `<ToolCallBlock>`). When omitted, the
|
|
20
|
+
* block defaults to collapsed and is toggled by the user.
|
|
21
|
+
*/
|
|
22
|
+
open?: boolean;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Collapsible section for the agent's thinking/reasoning trace.
|
|
26
|
+
*
|
|
27
|
+
* Rendered as a native `<details>/<summary>` element so it is keyboard
|
|
28
|
+
* accessible and works without JavaScript. Collapsed by default; consumers
|
|
29
|
+
* can override the appearance via the default stylesheet's `mast-thinking-*`
|
|
30
|
+
* classes or by passing a custom `className`.
|
|
31
|
+
*/
|
|
32
|
+
export declare function ThinkingBlock({ content, isStreaming, className, label, open, }: ThinkingBlockProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ToolEventEntry } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Props accepted by {@link ToolCallBlock}.
|
|
4
|
+
*/
|
|
5
|
+
export interface ToolCallBlockProps {
|
|
6
|
+
/** The tool invocation to render. */
|
|
7
|
+
entry: ToolEventEntry;
|
|
8
|
+
/** Optional class added to the root element. */
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare function ToolCallBlock({ entry, className }: ToolCallBlockProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { ConversationEntry } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Props accepted by {@link UserMessage}.
|
|
4
|
+
*/
|
|
5
|
+
export interface UserMessageProps {
|
|
6
|
+
/** The conversation entry to render. Must have `role === 'user'`. */
|
|
7
|
+
entry: ConversationEntry;
|
|
8
|
+
/** Optional class added to the root element. */
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Renders a user turn as a simple text bubble.
|
|
13
|
+
*
|
|
14
|
+
* Outputs the raw `entry.text` inside a `[data-mast-user-message]` wrapper so
|
|
15
|
+
* the default stylesheet's `mast-user-*` classes can theme it as a chat
|
|
16
|
+
* bubble. User input is intentionally rendered as plain text with no
|
|
17
|
+
* markdown processing.
|
|
18
|
+
*/
|
|
19
|
+
export declare function UserMessage({ entry, className }: UserMessageProps): import("react/jsx-runtime").JSX.Element;
|