@mcp-b/react-components 0.23.0 → 0.25.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/{AgentChat-Bm1qYbOo.d.ts → AgentChat-DHxdTjwF.d.ts} +34 -7
- package/dist/{CodeBlock-Cp67Njo3.js → CodeBlock-B3RLU3ez.js} +1 -1
- package/dist/{FileTree-DW60q1w7.js → FileTree-CYr5og0q.js} +1 -1
- package/dist/{Message-_-bEYLAO.js → Message-KlK8tlBZ.js} +1 -1
- package/dist/{ModelSelector-Brvj9Cab.js → ModelSelector-YTlqkIjs.js} +1 -1
- package/dist/{ThinkChat-E_HrfH76.js → ThinkChat-DVhCEjq-.js} +11 -2
- package/dist/{ThinkChatActivity-2BobmuvR.d.ts → ThinkChatActivity-DMTHKWrI.d.ts} +11 -9
- package/dist/{ThinkChatContext-DrsZqdaO.d.ts → ThinkChatContext-B-Nk84Wi.d.ts} +13 -1
- package/dist/{ThinkRecoveryNotice-DFIcG9UX.d.ts → ThinkRecoveryNotice-D6gYcBbr.d.ts} +1 -1
- package/dist/{WorkspaceFileView-rUEN2iox.js → WorkspaceFileView-CuMjXYQn.js} +3 -3
- package/dist/components/Activity.d.ts +11 -0
- package/dist/components/Activity.js +16 -4
- package/dist/components/AgentActivity.js +1 -1
- package/dist/components/AgentActivityPreview.js +1 -1
- package/dist/components/AgentChat.d.ts +1 -1
- package/dist/components/AgentChat.js +174 -94
- package/dist/components/AgentChatStartScreen.js +1 -1
- package/dist/components/AgentConnection.js +2 -2
- package/dist/components/AgentMessageParts.js +6 -2
- package/dist/components/AgentToolDetail.d.ts +1 -1
- package/dist/components/AgentToolDetail.js +2 -2
- package/dist/components/Approval.js +1 -1
- package/dist/components/Artifact.js +1 -1
- package/dist/components/BrowserLiveView.js +1 -1
- package/dist/components/BrowserReplay.js +1 -1
- package/dist/components/BrowserRunPanel.js +1 -1
- package/dist/components/ChainOfThought.d.ts +1 -1
- package/dist/components/ChainOfThought.js +1 -1
- package/dist/components/ChatGptSignInScreen.js +2 -2
- package/dist/components/Checkbox.js +1 -1
- package/dist/components/Checkpoint.js +1 -1
- package/dist/components/CodeBlock.js +1 -1
- package/dist/components/CodexModelSelector.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/EnvironmentVariables.js +2 -2
- package/dist/components/ExpansionState.d.ts +51 -0
- package/dist/components/ExpansionState.js +46 -0
- package/dist/components/FileTree.js +1 -1
- package/dist/components/FormattedDate.d.ts +21 -0
- package/dist/components/FormattedDate.js +20 -0
- package/dist/components/Goal.d.ts +87 -0
- package/dist/components/Goal.js +92 -0
- package/dist/components/LinkButton.d.ts +46 -0
- package/dist/components/LinkButton.js +28 -0
- package/dist/components/McpConnectionRequest.js +1 -1
- package/dist/components/McpPluginCatalog.js +1 -1
- package/dist/components/McpServerPicker.js +1 -1
- package/dist/components/MediaPreviewCard.js +13 -2
- package/dist/components/Menubar.js +1 -1
- package/dist/components/Message.js +1 -1
- package/dist/components/MessageScroller.js +1 -1
- package/dist/components/MessageScrollerVirtual.d.ts +72 -0
- package/dist/components/MessageScrollerVirtual.js +110 -0
- package/dist/components/ModelSelector.js +1 -1
- package/dist/components/Plan.js +1 -1
- package/dist/components/PricingPlanCard.js +1 -1
- package/dist/components/PromptInput.js +1 -1
- package/dist/components/Queue.js +1 -1
- package/dist/components/Reasoning.js +2 -2
- package/dist/components/ResponsiveSidebarShell.js +1 -1
- package/dist/components/SearchField.js +1 -1
- package/dist/components/Select.js +1 -1
- package/dist/components/SessionCompaction.d.ts +58 -0
- package/dist/components/SessionCompaction.js +117 -0
- package/dist/components/Shell.d.ts +149 -0
- package/dist/components/Shell.js +116 -0
- package/dist/components/Sources.js +1 -1
- package/dist/components/Stepper.js +1 -1
- package/dist/components/SubagentRunIndicator.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/ThemeModeControl.js +1 -1
- package/dist/components/ThinkChat.d.ts +6 -6
- package/dist/components/ThinkChat.js +1 -1
- package/dist/components/ThinkChatActivity.d.ts +1 -1
- package/dist/components/ThinkChatActivity.js +68 -14
- package/dist/components/ThinkChatContext.d.ts +2 -2
- package/dist/components/ThinkChatContext.js +5 -1
- package/dist/components/ThinkChatToolPanels.js +1 -1
- package/dist/components/ThinkExecutionDetail.js +1 -1
- package/dist/components/ThinkExecutionStatus.js +1 -1
- package/dist/components/ThinkExecutionWorkbench.d.ts +4 -3
- package/dist/components/ThinkExecutionWorkbench.js +7 -10
- package/dist/components/ThinkFullApp.js +65 -54
- package/dist/components/ThinkRecoveryNotice.d.ts +1 -1
- package/dist/components/ThinkRoutineBrowser.js +1 -1
- package/dist/components/ThinkRoutineForm.js +1 -1
- package/dist/components/ThinkRoutineLibrary.js +1 -1
- package/dist/components/ThinkThreadPicker.js +1 -1
- package/dist/components/Toast.js +1 -1
- package/dist/components/ToolInvocation.d.ts +8 -1
- package/dist/components/ToolInvocation.js +3 -2
- package/dist/components/WebPreview.js +1 -1
- package/dist/components/WorkspaceBrowser.js +1 -1
- package/dist/components/WorkspaceExplorer.js +1 -1
- package/dist/components/WorkspaceFileView.js +1 -1
- package/dist/components/WorkspaceHeader.js +1 -1
- package/dist/components/icons.d.ts +2 -2
- package/dist/components/icons.js +2 -2
- package/dist/{copy-button-TWq8nZhc.js → copy-button-Buxmtmp9.js} +1 -1
- package/dist/{icons-wP1yFUXF.d.ts → icons-Cih3W-zM.d.ts} +6 -1
- package/dist/{icons-ua6f_GH3.js → icons-w5PpKGRz.js} +3 -2
- package/dist/styles/activity.css +6 -0
- package/dist/styles/agent-chat.css +20 -4
- package/dist/styles/composition-motion.css +13 -23
- package/dist/styles/goal.css +57 -0
- package/dist/styles/index.css +2 -0
- package/dist/styles/message-scroller.css +25 -0
- package/dist/styles/responsive-sidebar-shell.css +12 -0
- package/dist/styles/shell.css +122 -0
- package/dist/styles/think-full-app.css +22 -14
- package/package.json +7 -6
- package/dist/view-transitions-DyUP0lSg.js +0 -77
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { t as cx } from "../class-names-BiMDVpUo.js";
|
|
2
2
|
import { Collapsible } from "./Collapsible.js";
|
|
3
|
-
import { q as SpinnerIcon } from "../icons-
|
|
3
|
+
import { q as SpinnerIcon } from "../icons-w5PpKGRz.js";
|
|
4
4
|
import { ActivityContent, ActivityText, ActivityTrigger } from "./Activity.js";
|
|
5
|
-
import { f as MessageResponse } from "../Message-
|
|
5
|
+
import { f as MessageResponse } from "../Message-KlK8tlBZ.js";
|
|
6
6
|
import * as React from "react";
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|
|
8
8
|
//#region src/components/Reasoning.tsx
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { t as cx } from "../class-names-BiMDVpUo.js";
|
|
2
2
|
import { Button } from "./Button.js";
|
|
3
|
-
import { K as SidebarIcon } from "../icons-
|
|
3
|
+
import { K as SidebarIcon } from "../icons-w5PpKGRz.js";
|
|
4
4
|
import { t as capitalize } from "../format-S6uWyoSb.js";
|
|
5
5
|
import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
|
|
6
6
|
import { AppTopBar } from "./AppTopBar.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
|
|
2
|
-
import { G as SearchIcon } from "../icons-
|
|
2
|
+
import { G as SearchIcon } from "../icons-w5PpKGRz.js";
|
|
3
3
|
import { Field } from "./Field.js";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
//#region src/components/SearchField.tsx
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
|
|
2
|
-
import { a as ArrowUpIcon, d as CheckIcon, n as ArrowDownIcon } from "../icons-
|
|
2
|
+
import { a as ArrowUpIcon, d as CheckIcon, n as ArrowDownIcon } from "../icons-w5PpKGRz.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { Select as Select$1 } from "@base-ui/react/select";
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { ChatStatus, UIMessage } from "ai";
|
|
2
|
+
|
|
3
|
+
//#region src/components/SessionCompaction.d.ts
|
|
4
|
+
type SessionStatusPhase = "idle" | "compacting";
|
|
5
|
+
interface SessionStatusFrame {
|
|
6
|
+
phase: SessionStatusPhase;
|
|
7
|
+
/** Present on the idle frame that follows a successful compaction. */
|
|
8
|
+
compacted: boolean;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Parse a raw websocket payload as a `cf_agent_session` status frame.
|
|
12
|
+
* Returns null for every other frame on the connection.
|
|
13
|
+
*/
|
|
14
|
+
declare function parseSessionStatusFrame(data: unknown): SessionStatusFrame | null;
|
|
15
|
+
/**
|
|
16
|
+
* Parse a raw websocket payload as a `cf_agent_session_error` frame,
|
|
17
|
+
* returning its error text. Null for every other frame on the connection.
|
|
18
|
+
*/
|
|
19
|
+
declare function parseSessionErrorFrame(data: unknown): string | null;
|
|
20
|
+
/** The message-frame surface of a `useAgent` connection. */
|
|
21
|
+
interface SessionFrameSource {
|
|
22
|
+
addEventListener(type: "message", listener: (event: MessageEvent) => void): void;
|
|
23
|
+
removeEventListener(type: "message", listener: (event: MessageEvent) => void): void;
|
|
24
|
+
}
|
|
25
|
+
interface UseSessionCompactionOptions<MessageT extends UIMessage> {
|
|
26
|
+
/** The conversation agent's `useAgent` connection. */
|
|
27
|
+
agent: SessionFrameSource;
|
|
28
|
+
/** The conversation's `useAgentChat` value (status + local view setter). */
|
|
29
|
+
chat: {
|
|
30
|
+
status: ChatStatus;
|
|
31
|
+
setMessages: (messages: MessageT[]) => void;
|
|
32
|
+
};
|
|
33
|
+
/** Server read used to reload the transcript after a compaction lands. */
|
|
34
|
+
getMessages: () => Promise<MessageT[]>;
|
|
35
|
+
}
|
|
36
|
+
declare function useSessionCompaction<MessageT extends UIMessage>({
|
|
37
|
+
agent,
|
|
38
|
+
chat,
|
|
39
|
+
getMessages
|
|
40
|
+
}: UseSessionCompactionOptions<MessageT>): {
|
|
41
|
+
compacting: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Set when the post-compaction transcript reload rejected — the local view
|
|
44
|
+
* is stale relative to the server until a retry succeeds. Surface it
|
|
45
|
+
* ("Transcript may be out of date"); the hook retries on the next status
|
|
46
|
+
* transition to `"ready"`.
|
|
47
|
+
*/
|
|
48
|
+
reloadError: unknown;
|
|
49
|
+
/**
|
|
50
|
+
* Error text from the last `cf_agent_session_error` frame — the only signal
|
|
51
|
+
* a user who ran /compact gets when the server-side compaction itself fails
|
|
52
|
+
* (the phase just flips back to idle with no `compacted` payload). Cleared
|
|
53
|
+
* when the next compaction starts.
|
|
54
|
+
*/
|
|
55
|
+
sessionError: string | null;
|
|
56
|
+
};
|
|
57
|
+
//#endregion
|
|
58
|
+
export { SessionFrameSource, SessionStatusFrame, SessionStatusPhase, UseSessionCompactionOptions, parseSessionErrorFrame, parseSessionStatusFrame, useSessionCompaction };
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
//#region src/components/SessionCompaction.ts
|
|
3
|
+
/**
|
|
4
|
+
* Client-side session-compaction plumbing for Think conversations.
|
|
5
|
+
*
|
|
6
|
+
* The Agents Session broadcasts `cf_agent_session` status frames to every
|
|
7
|
+
* connected client: `phase` flips to `"compacting"` while a compaction runs
|
|
8
|
+
* and back to `"idle"` when it settles, with a `compacted` payload on the
|
|
9
|
+
* idle frame when an overlay was actually written. Think refreshes only its
|
|
10
|
+
* server-side message cache after a compaction (`_syncMessages()` does not
|
|
11
|
+
* push to clients), so a connected transcript keeps showing the uncompacted
|
|
12
|
+
* history until its next `getMessages()`. `useSessionCompaction` closes that
|
|
13
|
+
* gap: it tracks the live phase for a "Compacting context…" affordance and
|
|
14
|
+
* reloads the transcript once a compaction lands — deferring the reload to
|
|
15
|
+
* the end of the turn when one is streaming, so a mid-turn proactive
|
|
16
|
+
* compaction never clobbers streamed state.
|
|
17
|
+
*
|
|
18
|
+
* The composer half is AgentChat's built-in `/compact` entry: pass the
|
|
19
|
+
* app's compaction callable as its `onCompact` prop.
|
|
20
|
+
*
|
|
21
|
+
* This module is the "local adapter … documented runtime-only mirror" that
|
|
22
|
+
* docs/think-session-ui.md calls for: upstream exports no payload types or
|
|
23
|
+
* client hook for these frames. The doc records the complete frame shapes
|
|
24
|
+
* (including `tokenEstimate` and `tokenThreshold`); this adapter deliberately
|
|
25
|
+
* consumes only `phase`, the presence of `compacted`, and the error string of
|
|
26
|
+
* `cf_agent_session_error` so an upstream field change cannot break the UI.
|
|
27
|
+
* Per that doc,
|
|
28
|
+
* `tokenThreshold` is the auto-compaction threshold, not the model context
|
|
29
|
+
* window — never feed it to the `Context` ring.
|
|
30
|
+
*
|
|
31
|
+
* @see ../../docs/think-session-ui.md
|
|
32
|
+
* @see https://github.com/cloudflare/agents/blob/main/docs/agents/sessions.md#compaction
|
|
33
|
+
*/
|
|
34
|
+
/**
|
|
35
|
+
* Parse a raw websocket payload as a `cf_agent_session` status frame.
|
|
36
|
+
* Returns null for every other frame on the connection.
|
|
37
|
+
*/
|
|
38
|
+
function parseSessionStatusFrame(data) {
|
|
39
|
+
if (typeof data !== "string") return null;
|
|
40
|
+
let message;
|
|
41
|
+
try {
|
|
42
|
+
message = JSON.parse(data);
|
|
43
|
+
} catch {
|
|
44
|
+
return null;
|
|
45
|
+
}
|
|
46
|
+
if (typeof message !== "object" || message === null || !("type" in message) || message.type !== "cf_agent_session" || !("phase" in message) || message.phase !== "idle" && message.phase !== "compacting") return null;
|
|
47
|
+
return {
|
|
48
|
+
phase: message.phase,
|
|
49
|
+
compacted: "compacted" in message && message.compacted != null
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Parse a raw websocket payload as a `cf_agent_session_error` frame,
|
|
54
|
+
* returning its error text. Null for every other frame on the connection.
|
|
55
|
+
*/
|
|
56
|
+
function parseSessionErrorFrame(data) {
|
|
57
|
+
if (typeof data !== "string") return null;
|
|
58
|
+
let message;
|
|
59
|
+
try {
|
|
60
|
+
message = JSON.parse(data);
|
|
61
|
+
} catch {
|
|
62
|
+
return null;
|
|
63
|
+
}
|
|
64
|
+
if (typeof message !== "object" || message === null || !("type" in message) || message.type !== "cf_agent_session_error" || !("error" in message) || typeof message.error !== "string") return null;
|
|
65
|
+
return message.error;
|
|
66
|
+
}
|
|
67
|
+
function useSessionCompaction({ agent, chat, getMessages }) {
|
|
68
|
+
const [compacting, setCompacting] = React.useState(false);
|
|
69
|
+
const [refreshPending, setRefreshPending] = React.useState(false);
|
|
70
|
+
const [reloadError, setReloadError] = React.useState(null);
|
|
71
|
+
const [sessionError, setSessionError] = React.useState(null);
|
|
72
|
+
React.useEffect(() => {
|
|
73
|
+
setCompacting(false);
|
|
74
|
+
setSessionError(null);
|
|
75
|
+
const onMessage = (event) => {
|
|
76
|
+
const frame = parseSessionStatusFrame(event.data);
|
|
77
|
+
if (frame) {
|
|
78
|
+
setCompacting(frame.phase === "compacting");
|
|
79
|
+
if (frame.phase === "compacting") setSessionError(null);
|
|
80
|
+
if (frame.compacted) setRefreshPending(true);
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
const error = parseSessionErrorFrame(event.data);
|
|
84
|
+
if (error !== null) {
|
|
85
|
+
setCompacting(false);
|
|
86
|
+
setSessionError(error);
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
agent.addEventListener("message", onMessage);
|
|
90
|
+
return () => agent.removeEventListener("message", onMessage);
|
|
91
|
+
}, [agent]);
|
|
92
|
+
const { status, setMessages } = chat;
|
|
93
|
+
React.useEffect(() => {
|
|
94
|
+
if (!refreshPending || status !== "ready") return;
|
|
95
|
+
let stale = false;
|
|
96
|
+
getMessages().then((messages) => {
|
|
97
|
+
if (stale) return;
|
|
98
|
+
setRefreshPending(false);
|
|
99
|
+
setReloadError(null);
|
|
100
|
+
setMessages(messages);
|
|
101
|
+
}, (error) => {
|
|
102
|
+
if (stale) return;
|
|
103
|
+
console.error("Transcript reload after compaction failed", error);
|
|
104
|
+
setReloadError(error);
|
|
105
|
+
});
|
|
106
|
+
return () => {
|
|
107
|
+
stale = true;
|
|
108
|
+
};
|
|
109
|
+
}, [refreshPending, status]);
|
|
110
|
+
return {
|
|
111
|
+
compacting,
|
|
112
|
+
reloadError,
|
|
113
|
+
sessionError
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
//#endregion
|
|
117
|
+
export { parseSessionErrorFrame, parseSessionStatusFrame, useSessionCompaction };
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/components/Shell.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* Props for the Shell.Root component.
|
|
6
|
+
*/
|
|
7
|
+
interface ShellRootProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
8
|
+
/** Additional CSS class names */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** The heading text displayed in the header */
|
|
11
|
+
heading?: string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Props for the Shell.ActionBar component.
|
|
15
|
+
*/
|
|
16
|
+
interface ShellActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
17
|
+
/** Additional CSS class names */
|
|
18
|
+
className?: string;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Props for the Shell.Action component.
|
|
22
|
+
*/
|
|
23
|
+
interface ShellActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
24
|
+
/** Additional CSS class names */
|
|
25
|
+
className?: string;
|
|
26
|
+
/** Icon to display */
|
|
27
|
+
icon?: React.ReactNode;
|
|
28
|
+
/** Whether this action is currently active */
|
|
29
|
+
active?: boolean;
|
|
30
|
+
/** Accessible label for the action */
|
|
31
|
+
label?: string;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Props for the Shell.Panel component.
|
|
35
|
+
*/
|
|
36
|
+
interface ShellPanelProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
37
|
+
/** Additional CSS class names */
|
|
38
|
+
className?: string;
|
|
39
|
+
/** The panel heading */
|
|
40
|
+
heading?: string;
|
|
41
|
+
/** Whether the panel is visible */
|
|
42
|
+
open?: boolean;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Props for the Shell.Content component.
|
|
46
|
+
*/
|
|
47
|
+
interface ShellContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
48
|
+
/** Additional CSS class names */
|
|
49
|
+
className?: string;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Root container for the shell layout.
|
|
53
|
+
* Provides a structured layout with optional header, action bar, panel, and content areas.
|
|
54
|
+
*/
|
|
55
|
+
declare function ShellRoot({
|
|
56
|
+
className,
|
|
57
|
+
heading,
|
|
58
|
+
children,
|
|
59
|
+
ref,
|
|
60
|
+
...props
|
|
61
|
+
}: ShellRootProps & {
|
|
62
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
63
|
+
}): React.JSX.Element;
|
|
64
|
+
/**
|
|
65
|
+
* Container for action buttons that toggle panels.
|
|
66
|
+
* Typically placed on the left side of the shell.
|
|
67
|
+
*/
|
|
68
|
+
declare function ShellActionBar({
|
|
69
|
+
className,
|
|
70
|
+
children,
|
|
71
|
+
ref,
|
|
72
|
+
...props
|
|
73
|
+
}: ShellActionBarProps & {
|
|
74
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
75
|
+
}): React.JSX.Element;
|
|
76
|
+
/**
|
|
77
|
+
* An action button within the action bar.
|
|
78
|
+
*/
|
|
79
|
+
declare function ShellAction({
|
|
80
|
+
className,
|
|
81
|
+
icon,
|
|
82
|
+
active,
|
|
83
|
+
label,
|
|
84
|
+
ref,
|
|
85
|
+
...props
|
|
86
|
+
}: ShellActionProps & {
|
|
87
|
+
ref?: React.Ref<HTMLButtonElement>;
|
|
88
|
+
}): React.JSX.Element;
|
|
89
|
+
/**
|
|
90
|
+
* A collapsible panel that slides in from the side.
|
|
91
|
+
*/
|
|
92
|
+
declare function ShellPanel({
|
|
93
|
+
className,
|
|
94
|
+
heading,
|
|
95
|
+
open,
|
|
96
|
+
children,
|
|
97
|
+
ref,
|
|
98
|
+
...props
|
|
99
|
+
}: ShellPanelProps & {
|
|
100
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
101
|
+
}): React.JSX.Element;
|
|
102
|
+
/**
|
|
103
|
+
* The main content area of the shell.
|
|
104
|
+
*/
|
|
105
|
+
declare function ShellContent({
|
|
106
|
+
className,
|
|
107
|
+
children,
|
|
108
|
+
ref,
|
|
109
|
+
...props
|
|
110
|
+
}: ShellContentProps & {
|
|
111
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
112
|
+
}): React.JSX.Element;
|
|
113
|
+
/**
|
|
114
|
+
* A shell layout component with an icon action bar, a collapsible side panel,
|
|
115
|
+
* and a content canvas. Useful for map applications and other interactive
|
|
116
|
+
* tools where a full chat or sidebar chrome (see ResponsiveSidebarShell) is
|
|
117
|
+
* too heavy.
|
|
118
|
+
*
|
|
119
|
+
* @example
|
|
120
|
+
* ```tsx
|
|
121
|
+
* const [filterOpen, setFilterOpen] = useState(false);
|
|
122
|
+
*
|
|
123
|
+
* <Shell.Root heading="My Map Application">
|
|
124
|
+
* <Shell.ActionBar>
|
|
125
|
+
* <Shell.Action
|
|
126
|
+
* icon={<FilterIcon />}
|
|
127
|
+
* active={filterOpen}
|
|
128
|
+
* onClick={() => setFilterOpen(!filterOpen)}
|
|
129
|
+
* label="Filter"
|
|
130
|
+
* />
|
|
131
|
+
* </Shell.ActionBar>
|
|
132
|
+
* <Shell.Panel heading="Filter" open={filterOpen}>
|
|
133
|
+
* <p>Filter controls here</p>
|
|
134
|
+
* </Shell.Panel>
|
|
135
|
+
* <Shell.Content>
|
|
136
|
+
* <div id="map" />
|
|
137
|
+
* </Shell.Content>
|
|
138
|
+
* </Shell.Root>
|
|
139
|
+
* ```
|
|
140
|
+
*/
|
|
141
|
+
declare const Shell: {
|
|
142
|
+
Root: typeof ShellRoot;
|
|
143
|
+
ActionBar: typeof ShellActionBar;
|
|
144
|
+
Action: typeof ShellAction;
|
|
145
|
+
Panel: typeof ShellPanel;
|
|
146
|
+
Content: typeof ShellContent;
|
|
147
|
+
};
|
|
148
|
+
//#endregion
|
|
149
|
+
export { Shell, ShellActionBarProps, ShellActionProps, ShellContentProps, ShellPanelProps, ShellRootProps };
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { t as cx } from "../class-names-BiMDVpUo.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/Shell.tsx
|
|
5
|
+
/**
|
|
6
|
+
* Root container for the shell layout.
|
|
7
|
+
* Provides a structured layout with optional header, action bar, panel, and content areas.
|
|
8
|
+
*/
|
|
9
|
+
function ShellRoot({ className, heading, children, ref, ...props }) {
|
|
10
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
11
|
+
ref,
|
|
12
|
+
className: cx("shell", className),
|
|
13
|
+
...props,
|
|
14
|
+
children: [heading && /* @__PURE__ */ jsx("header", {
|
|
15
|
+
className: "shell__header",
|
|
16
|
+
children: /* @__PURE__ */ jsx("h3", {
|
|
17
|
+
className: "shell__heading",
|
|
18
|
+
children: heading
|
|
19
|
+
})
|
|
20
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
21
|
+
className: "shell__body",
|
|
22
|
+
children
|
|
23
|
+
})]
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Container for action buttons that toggle panels.
|
|
28
|
+
* Typically placed on the left side of the shell.
|
|
29
|
+
*/
|
|
30
|
+
function ShellActionBar({ className, children, ref, ...props }) {
|
|
31
|
+
return /* @__PURE__ */ jsx("div", {
|
|
32
|
+
ref,
|
|
33
|
+
className: cx("shell__action-bar", className),
|
|
34
|
+
...props,
|
|
35
|
+
children
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* An action button within the action bar.
|
|
40
|
+
*/
|
|
41
|
+
function ShellAction({ className, icon, active, label, ref, ...props }) {
|
|
42
|
+
return /* @__PURE__ */ jsx("button", {
|
|
43
|
+
ref,
|
|
44
|
+
className: cx("shell__action", active && "shell__action--active", className),
|
|
45
|
+
"aria-label": label,
|
|
46
|
+
"aria-pressed": active,
|
|
47
|
+
...props,
|
|
48
|
+
children: icon
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* A collapsible panel that slides in from the side.
|
|
53
|
+
*/
|
|
54
|
+
function ShellPanel({ className, heading, open = false, children, ref, ...props }) {
|
|
55
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
56
|
+
ref,
|
|
57
|
+
className: cx("shell__panel", open && "shell__panel--open", className),
|
|
58
|
+
hidden: !open,
|
|
59
|
+
...props,
|
|
60
|
+
children: [heading && /* @__PURE__ */ jsx("div", {
|
|
61
|
+
className: "shell__panel-heading",
|
|
62
|
+
children: heading
|
|
63
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
64
|
+
className: "shell__panel-content",
|
|
65
|
+
children
|
|
66
|
+
})]
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* The main content area of the shell.
|
|
71
|
+
*/
|
|
72
|
+
function ShellContent({ className, children, ref, ...props }) {
|
|
73
|
+
return /* @__PURE__ */ jsx("div", {
|
|
74
|
+
ref,
|
|
75
|
+
className: cx("shell__content", className),
|
|
76
|
+
...props,
|
|
77
|
+
children
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* A shell layout component with an icon action bar, a collapsible side panel,
|
|
82
|
+
* and a content canvas. Useful for map applications and other interactive
|
|
83
|
+
* tools where a full chat or sidebar chrome (see ResponsiveSidebarShell) is
|
|
84
|
+
* too heavy.
|
|
85
|
+
*
|
|
86
|
+
* @example
|
|
87
|
+
* ```tsx
|
|
88
|
+
* const [filterOpen, setFilterOpen] = useState(false);
|
|
89
|
+
*
|
|
90
|
+
* <Shell.Root heading="My Map Application">
|
|
91
|
+
* <Shell.ActionBar>
|
|
92
|
+
* <Shell.Action
|
|
93
|
+
* icon={<FilterIcon />}
|
|
94
|
+
* active={filterOpen}
|
|
95
|
+
* onClick={() => setFilterOpen(!filterOpen)}
|
|
96
|
+
* label="Filter"
|
|
97
|
+
* />
|
|
98
|
+
* </Shell.ActionBar>
|
|
99
|
+
* <Shell.Panel heading="Filter" open={filterOpen}>
|
|
100
|
+
* <p>Filter controls here</p>
|
|
101
|
+
* </Shell.Panel>
|
|
102
|
+
* <Shell.Content>
|
|
103
|
+
* <div id="map" />
|
|
104
|
+
* </Shell.Content>
|
|
105
|
+
* </Shell.Root>
|
|
106
|
+
* ```
|
|
107
|
+
*/
|
|
108
|
+
const Shell = {
|
|
109
|
+
Root: ShellRoot,
|
|
110
|
+
ActionBar: ShellActionBar,
|
|
111
|
+
Action: ShellAction,
|
|
112
|
+
Panel: ShellPanel,
|
|
113
|
+
Content: ShellContent
|
|
114
|
+
};
|
|
115
|
+
//#endregion
|
|
116
|
+
export { Shell };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { t as cx } from "../class-names-BiMDVpUo.js";
|
|
2
2
|
import { Collapsible } from "./Collapsible.js";
|
|
3
|
-
import { k as LinkIcon, m as ChevronRightIcon } from "../icons-
|
|
3
|
+
import { k as LinkIcon, m as ChevronRightIcon } from "../icons-w5PpKGRz.js";
|
|
4
4
|
import "react";
|
|
5
5
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
//#region src/components/Sources.tsx
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
|
|
2
|
-
import { d as CheckIcon, q as SpinnerIcon } from "../icons-
|
|
2
|
+
import { d as CheckIcon, q as SpinnerIcon } from "../icons-w5PpKGRz.js";
|
|
3
3
|
import { Tabs } from "./Tabs.js";
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as cx } from "../class-names-BiMDVpUo.js";
|
|
2
|
-
import {
|
|
2
|
+
import { Y as StopIcon, d as CheckIcon, et as WarningIcon, q as SpinnerIcon } from "../icons-w5PpKGRz.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
//#region src/components/SubagentRunIndicator.tsx
|
package/dist/components/Task.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { t as cx } from "../class-names-BiMDVpUo.js";
|
|
2
2
|
import { Collapsible } from "./Collapsible.js";
|
|
3
|
-
import { C as FileIcon, G as SearchIcon, m as ChevronRightIcon } from "../icons-
|
|
3
|
+
import { C as FileIcon, G as SearchIcon, m as ChevronRightIcon } from "../icons-w5PpKGRz.js";
|
|
4
4
|
import "react";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
//#region src/components/Task.tsx
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { t as cx } from "../class-names-BiMDVpUo.js";
|
|
2
|
-
import {
|
|
2
|
+
import { Q as TerminalIcon, nt as XIcon } from "../icons-w5PpKGRz.js";
|
|
3
3
|
import { IconButton } from "./IconButton.js";
|
|
4
|
-
import { t as CopyButton } from "../copy-button-
|
|
4
|
+
import { t as CopyButton } from "../copy-button-Buxmtmp9.js";
|
|
5
5
|
import { Badge } from "./Badge.js";
|
|
6
6
|
import { ScrollArea } from "./ScrollArea.js";
|
|
7
7
|
import * as React from "react";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { t as cx } from "../class-names-BiMDVpUo.js";
|
|
2
2
|
import { Collapsible } from "./Collapsible.js";
|
|
3
|
-
import { d as CheckIcon, m as ChevronRightIcon,
|
|
3
|
+
import { d as CheckIcon, m as ChevronRightIcon, nt as XIcon, q as SpinnerIcon } from "../icons-w5PpKGRz.js";
|
|
4
4
|
import { Progress } from "./Progress.js";
|
|
5
5
|
import { Badge } from "./Badge.js";
|
|
6
6
|
import * as React from "react";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { F as MonitorIcon, I as MoonIcon, X as SunIcon } from "../icons-
|
|
1
|
+
import { F as MonitorIcon, I as MoonIcon, X as SunIcon } from "../icons-w5PpKGRz.js";
|
|
2
2
|
import { Radio, RadioGroup } from "./RadioGroup.js";
|
|
3
3
|
import { useTheme } from "./ThemeProvider.js";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { i as AgentMessageRenderPartContext } from "../AgentMessageParts-CyD2UB3V.js";
|
|
2
|
-
import { r as AgentChatProps } from "../AgentChat-
|
|
2
|
+
import { r as AgentChatProps } from "../AgentChat-DHxdTjwF.js";
|
|
3
3
|
import { i as useOptionalAgentToolRuns, n as AgentToolRunsProvider, r as AgentToolRunsProviderProps, t as AgentToolEventsValue } from "../AgentToolRunsContext-BVe4stgw.js";
|
|
4
4
|
import { S as isThinkChatActivityPart } from "../ThinkChatToolParts-CSzVwMXf.js";
|
|
5
5
|
import { u as describeThinkChatActivityPart } from "../ThinkChatActivitySummary-kr5fE0wg.js";
|
|
6
|
-
import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-
|
|
7
|
-
import {
|
|
8
|
-
import { n as ThinkRecoveryNoticeProps, t as ThinkRecoveryNotice } from "../ThinkRecoveryNotice-
|
|
6
|
+
import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-DMTHKWrI.js";
|
|
7
|
+
import { i as ThinkChatValue } from "../ThinkChatContext-B-Nk84Wi.js";
|
|
8
|
+
import { n as ThinkRecoveryNoticeProps, t as ThinkRecoveryNotice } from "../ThinkRecoveryNotice-D6gYcBbr.js";
|
|
9
9
|
import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../BrowserLiveView-BV5qgFgI.js";
|
|
10
10
|
import { n as BrowserReplayProps, t as BrowserReplay } from "../BrowserReplay-xWvRjRAC.js";
|
|
11
11
|
import { d as inferWorkspaceLanguage, i as WorkspaceFileState } from "../WorkspaceFile-DMtRMwVv.js";
|
|
@@ -59,6 +59,8 @@ interface ThinkChatMessagesProps<MessageT extends UIMessage = UIMessage> extends
|
|
|
59
59
|
composerTools?: React.ReactNode;
|
|
60
60
|
/** Host-owned slash-command catalog and selection policy. */
|
|
61
61
|
slashCommands?: AgentChatProps<MessageT>["slashCommands"];
|
|
62
|
+
/** App compaction callable behind the built-in `/compact` slash entry. */
|
|
63
|
+
onCompact?: AgentChatProps<MessageT>["onCompact"];
|
|
62
64
|
/** Controlled MCP catalog revealed by `@`; selections become composer references. */
|
|
63
65
|
mentionCommands?: AgentChatProps<MessageT>["mentionCommands"];
|
|
64
66
|
/** Controlled folder or working-context picker in the composer footer. */
|
|
@@ -79,8 +81,6 @@ interface ThinkChatMessagesProps<MessageT extends UIMessage = UIMessage> extends
|
|
|
79
81
|
renderMessageAfter?: AgentChatProps<MessageT>["renderMessageAfter"];
|
|
80
82
|
/** Per-message policy for AgentChat's built-in assistant copy/retry toolbar. */
|
|
81
83
|
showAssistantActions?: AgentChatProps<MessageT>["showAssistantActions"];
|
|
82
|
-
/** Overrides which rows anchor at the top when added; user messages are the default. */
|
|
83
|
-
isMessageScrollAnchor?: AgentChatProps<MessageT>["isMessageScrollAnchor"];
|
|
84
84
|
/**
|
|
85
85
|
* Durable backend edit/resend operation. Think does not synchronize
|
|
86
86
|
* `setMessages`, so wire this to an agent callable that creates the branch.
|
|
@@ -5,7 +5,7 @@ import { inferWorkspaceLanguage } from "./WorkspaceFile.js";
|
|
|
5
5
|
import { describeThinkChatActivityPart } from "./ThinkChatActivitySummary.js";
|
|
6
6
|
import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./ThinkChatActivity.js";
|
|
7
7
|
import { ThinkRecoveryNotice } from "./ThinkRecoveryNotice.js";
|
|
8
|
-
import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../ThinkChat-
|
|
8
|
+
import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../ThinkChat-DVhCEjq-.js";
|
|
9
9
|
import { BrowserReplay } from "./BrowserReplay.js";
|
|
10
10
|
import { useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryOptions, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions } from "./Workspace.js";
|
|
11
11
|
import { WorkspaceExplorer } from "./WorkspaceExplorer.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { S as isThinkChatActivityPart } from "../ThinkChatToolParts-CSzVwMXf.js";
|
|
2
2
|
import { u as describeThinkChatActivityPart } from "../ThinkChatActivitySummary-kr5fE0wg.js";
|
|
3
|
-
import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-
|
|
3
|
+
import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-DMTHKWrI.js";
|
|
4
4
|
export { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, describeThinkChatActivityPart, isThinkChatActivityPart, renderThinkChatActivityPart };
|