@mcp-b/react-components 0.7.0 → 0.7.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.
Files changed (69) hide show
  1. package/dist/AgentChat-403mckDG.d.ts +101 -0
  2. package/dist/BrowserLiveView-ZktFZiMD.d.ts +47 -0
  3. package/dist/BrowserReplay-6G-mnwcn.d.ts +40 -0
  4. package/dist/{CodeBlock-BK0sOAbV.js → CodeBlock-D9koxDA7.js} +1 -1
  5. package/dist/{FileTree-BWQZ0FSi.js → FileTree-BdK93Uuu.js} +1 -1
  6. package/dist/ModelSelector-MQvK-pNb.js +306 -0
  7. package/dist/ThinkChatActivity-CeHzk6-K.d.ts +73 -0
  8. package/dist/ThinkChatContext-CC94HL4u.d.ts +28 -0
  9. package/dist/components/Activity.js +1 -1
  10. package/dist/components/AgentChat.d.ts +1 -100
  11. package/dist/components/AgentChat.js +1 -1
  12. package/dist/components/AgentConnection.d.ts +43 -2
  13. package/dist/components/AgentConnection.js +154 -3
  14. package/dist/components/Artifact.js +1 -1
  15. package/dist/components/BrowserLiveView.d.ts +1 -46
  16. package/dist/components/BrowserLiveView.js +1 -1
  17. package/dist/components/BrowserReplay.d.ts +1 -39
  18. package/dist/components/BrowserReplay.js +1 -1
  19. package/dist/components/ChainOfThought.d.ts +1 -1
  20. package/dist/components/ChainOfThought.js +1 -1
  21. package/dist/components/ChatGptSignInScreen.d.ts +38 -0
  22. package/dist/components/ChatGptSignInScreen.js +201 -0
  23. package/dist/components/CodeBlock.js +1 -1
  24. package/dist/components/Commit.js +1 -1
  25. package/dist/components/ContextMenu.js +1 -1
  26. package/dist/components/Conversation.js +1 -1
  27. package/dist/components/Dialog.js +1 -1
  28. package/dist/components/EnvironmentVariables.js +1 -1
  29. package/dist/components/FileTree.js +1 -1
  30. package/dist/components/McpServerPicker.js +1 -1
  31. package/dist/components/Menubar.js +1 -1
  32. package/dist/components/Message.js +1 -1
  33. package/dist/components/MessageScroller.js +2 -2
  34. package/dist/components/ModelSelector.js +1 -305
  35. package/dist/components/NavigationMenu.js +1 -1
  36. package/dist/components/PromptInput.js +1 -1
  37. package/dist/components/Queue.js +1 -1
  38. package/dist/components/Reasoning.js +1 -1
  39. package/dist/components/Select.js +1 -1
  40. package/dist/components/Sources.js +1 -1
  41. package/dist/components/Stepper.js +1 -1
  42. package/dist/components/Task.js +1 -1
  43. package/dist/components/Terminal.js +2 -2
  44. package/dist/components/TestResults.js +1 -1
  45. package/dist/components/ThinkChat.d.ts +16 -6
  46. package/dist/components/ThinkChat.js +1 -1
  47. package/dist/components/ThinkChatActivity.d.ts +2 -72
  48. package/dist/components/ThinkChatActivity.js +1 -1
  49. package/dist/components/ThinkChatContext.d.ts +1 -27
  50. package/dist/components/ThinkChatToolPanels.js +1 -1
  51. package/dist/components/ThinkFullApp.d.ts +23 -0
  52. package/dist/components/ThinkFullApp.js +175 -0
  53. package/dist/components/WebPreview.js +1 -1
  54. package/dist/components/WorkspaceExplorer.js +3 -3
  55. package/dist/components/icons.d.ts +2 -2
  56. package/dist/components/icons.js +2 -2
  57. package/dist/{copy-button-CB2MWcau.js → copy-button-TVhDAroI.js} +1 -1
  58. package/dist/{icons-BCNawx-T.js → icons-BAlTbWWP.js} +27 -1
  59. package/dist/{icons-BYpJY6L2.d.ts → icons-BRI54ATJ.d.ts} +2 -1
  60. package/dist/styles/agent-connection.css +33 -5
  61. package/dist/styles/chatgpt-sign-in-screen.css +224 -0
  62. package/dist/styles/code-block.css +3 -1
  63. package/dist/styles/index.css +2 -0
  64. package/dist/styles/message-scroller.css +24 -1
  65. package/dist/styles/prompt-input.css +1 -0
  66. package/dist/styles/think-full-app.css +318 -0
  67. package/dist/utils/mcp-server-catalog.d.ts +23 -1
  68. package/dist/utils/mcp-server-catalog.js +27 -1
  69. package/package.json +2 -2
@@ -1,6 +1,6 @@
1
1
  import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
2
2
  import { t as cx } from "../class-names-9UtZwb0J.js";
3
- import { c as ChevronRightIcon, y as LinkIcon } from "../icons-BCNawx-T.js";
3
+ import { b as LinkIcon, c as ChevronRightIcon } from "../icons-BAlTbWWP.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 { t as cx } from "../class-names-9UtZwb0J.js";
2
- import { A as SpinnerIcon, a as CheckIcon } from "../icons-BCNawx-T.js";
2
+ import { a as CheckIcon, j as SpinnerIcon } from "../icons-BAlTbWWP.js";
3
3
  import * as React from "react";
4
4
  import { jsx } from "react/jsx-runtime";
5
5
  //#region src/components/Stepper.tsx
@@ -1,6 +1,6 @@
1
1
  import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
2
2
  import { t as cx } from "../class-names-9UtZwb0J.js";
3
- import { c as ChevronRightIcon, k as SearchIcon, m as FileIcon } from "../icons-BCNawx-T.js";
3
+ import { A as SearchIcon, c as ChevronRightIcon, h as FileIcon } from "../icons-BAlTbWWP.js";
4
4
  import "react";
5
5
  import { jsx, jsxs } from "react/jsx-runtime";
6
6
  //#region src/components/Task.tsx
@@ -1,8 +1,8 @@
1
1
  import { t as cx } from "../class-names-9UtZwb0J.js";
2
- import { F as XIcon, M as TerminalIcon } from "../icons-BCNawx-T.js";
2
+ import { I as XIcon, N as TerminalIcon } from "../icons-BAlTbWWP.js";
3
3
  import { Button } from "./Button.js";
4
4
  import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
5
- import { t as CopyButton } from "../copy-button-CB2MWcau.js";
5
+ import { t as CopyButton } from "../copy-button-TVhDAroI.js";
6
6
  import { Badge } from "./Badge.js";
7
7
  import { ScrollArea } from "./ScrollArea.js";
8
8
  import * as React from "react";
@@ -1,6 +1,6 @@
1
1
  import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
2
2
  import { t as cx } from "../class-names-9UtZwb0J.js";
3
- import { A as SpinnerIcon, F as XIcon, a as CheckIcon, c as ChevronRightIcon } from "../icons-BCNawx-T.js";
3
+ import { I as XIcon, a as CheckIcon, c as ChevronRightIcon, j as SpinnerIcon } from "../icons-BAlTbWWP.js";
4
4
  import { Badge } from "./Badge.js";
5
5
  import * as React from "react";
6
6
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -1,16 +1,22 @@
1
1
  import { n as ExecutionApprovals } from "../PromptInput-D6-G24p7.js";
2
- import { AgentChatProps, AgentChatRenderPartContext } from "./AgentChat.js";
3
- import { BrowserLiveView, BrowserLiveViewProps } from "./BrowserLiveView.js";
4
- import { BrowserReplay, BrowserReplayProps } from "./BrowserReplay.js";
2
+ import { a as AgentChatRenderPartContext, r as AgentChatProps } from "../AgentChat-403mckDG.js";
3
+ import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../BrowserLiveView-ZktFZiMD.js";
4
+ import { n as BrowserReplayProps, t as BrowserReplay } from "../BrowserReplay-6G-mnwcn.js";
5
5
  import { _ as isThinkChatActivityPart } from "../ThinkChatToolParts-DnUiZgCC.js";
6
- import { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, describeThinkChatActivityPart, renderThinkChatActivityPart } from "./ThinkChatActivity.js";
7
- import { ThinkChatValue } from "./ThinkChatContext.js";
6
+ import { a as ThinkChatToolRenderers, c as renderThinkChatActivityPart, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as describeThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-CeHzk6-K.js";
7
+ import { n as ThinkChatValue } from "../ThinkChatContext-CC94HL4u.js";
8
8
  import { FileInfo, UseWorkspaceOptions, WorkspaceExplorer, WorkspaceExplorerProps, WorkspaceFileState, WorkspaceInfo, WorkspaceSource, WorkspaceState, inferWorkspaceLanguage, useWorkspace } from "./WorkspaceExplorer.js";
9
9
  import * as React from "react";
10
10
  import { UIMessage } from "ai";
11
11
  import { UseAgentOptions } from "agents/react";
12
+ import { PendingApproval } from "@cloudflare/think";
12
13
 
13
14
  //#region src/components/ThinkChat.d.ts
15
+ interface ThinkApprovalStub {
16
+ pendingApprovals(executionId?: string): Promise<PendingApproval[]>;
17
+ approveExecution(executionId: string): Promise<unknown>;
18
+ rejectExecution(executionId: string, reason?: string): Promise<unknown>;
19
+ }
14
20
  interface ThinkChatProviderProps {
15
21
  /** The `useAgentChat` value from the `agents` SDK that descendants read. */
16
22
  chat: ThinkChatValue;
@@ -55,6 +61,10 @@ interface ThinkChatMessagesProps extends ThinkChatActivityRendererOptions {
55
61
  */
56
62
  contextWindow?: AgentChatProps["contextWindow"];
57
63
  }
64
+ declare function useThinkPendingApprovals(stub: ThinkApprovalStub, refreshKey: unknown): {
65
+ pendingApprovals: readonly PendingApproval[];
66
+ executionApprovals: ExecutionApprovals;
67
+ };
58
68
  /**
59
69
  * Chat UI for Cloudflare Think agents. Provide a `useAgentChat` value (or let
60
70
  * `ThinkChat.Root` create one) and `ThinkChat.Messages` renders the message
@@ -137,4 +147,4 @@ declare const ThinkChat: {
137
147
  createActivityRenderer: typeof createThinkChatActivityRenderer;
138
148
  };
139
149
  //#endregion
140
- export { BrowserLiveView, type BrowserLiveViewProps, BrowserReplay, type BrowserReplayProps, type ExecutionApprovals, type FileInfo, ThinkChat, ThinkChatActivity, type ThinkChatActivityProps, type ThinkChatActivityRendererOptions, ThinkChatMessages, ThinkChatMessagesProps, ThinkChatProvider, ThinkChatProviderProps, ThinkChatRoot, ThinkChatRootProps, type ThinkChatToolRenderer, type ThinkChatToolRenderers, type UseWorkspaceOptions, WorkspaceExplorer, type WorkspaceExplorerProps, type WorkspaceFileState, type WorkspaceInfo, type WorkspaceSource, type WorkspaceState, createThinkChatActivityRenderer, describeThinkChatActivityPart, inferWorkspaceLanguage, isThinkChatActivityPart, renderThinkChatActivityPart, useThinkChat, useWorkspace };
150
+ export { BrowserLiveView, type BrowserLiveViewProps, BrowserReplay, type BrowserReplayProps, type ExecutionApprovals, type FileInfo, ThinkApprovalStub, ThinkChat, ThinkChatActivity, type ThinkChatActivityProps, type ThinkChatActivityRendererOptions, ThinkChatMessages, ThinkChatMessagesProps, ThinkChatProvider, ThinkChatProviderProps, ThinkChatRoot, ThinkChatRootProps, type ThinkChatToolRenderer, type ThinkChatToolRenderers, type UseWorkspaceOptions, WorkspaceExplorer, type WorkspaceExplorerProps, type WorkspaceFileState, type WorkspaceInfo, type WorkspaceSource, type WorkspaceState, createThinkChatActivityRenderer, describeThinkChatActivityPart, inferWorkspaceLanguage, isThinkChatActivityPart, renderThinkChatActivityPart, useThinkChat, useThinkPendingApprovals, useWorkspace };
@@ -155,4 +155,4 @@ const ThinkChat = {
155
155
  createActivityRenderer: createThinkChatActivityRenderer
156
156
  };
157
157
  //#endregion
158
- export { BrowserLiveView, BrowserReplay, ThinkChat, ThinkChatActivity, ThinkChatMessages, ThinkChatProvider, ThinkChatRoot, WorkspaceExplorer, createThinkChatActivityRenderer, describeThinkChatActivityPart, inferWorkspaceLanguage, isThinkChatActivityPart, renderThinkChatActivityPart, useThinkChat, useWorkspace };
158
+ export { BrowserLiveView, BrowserReplay, ThinkChat, ThinkChatActivity, ThinkChatMessages, ThinkChatProvider, ThinkChatRoot, WorkspaceExplorer, createThinkChatActivityRenderer, describeThinkChatActivityPart, inferWorkspaceLanguage, isThinkChatActivityPart, renderThinkChatActivityPart, useThinkChat, useThinkPendingApprovals, useWorkspace };
@@ -1,73 +1,3 @@
1
- import { AgentChatProps, AgentChatRenderPartContext } from "./AgentChat.js";
2
- import { _ as isThinkChatActivityPart, s as ThinkChatPart } from "../ThinkChatToolParts-DnUiZgCC.js";
3
- import * as React from "react";
4
- import { DynamicToolUIPart, ToolUIPart, UIMessage } from "ai";
5
-
6
- //#region src/components/ThinkChatActivity.d.ts
7
- /**
8
- * Bespoke rendering for one tool inside the activity log. Both hooks fall
9
- * through to the built-in families when they return `undefined`, so an
10
- * override can adjust just the label or just the panel.
11
- */
12
- interface ThinkChatToolRenderer {
13
- /** One-line step label. `null` hides the step from the log. */
14
- describe?: (part: ToolUIPart | DynamicToolUIPart) => string | null | undefined;
15
- /** Expanded detail under the step. `null` keeps the step a plain row. */
16
- panel?: (part: ToolUIPart | DynamicToolUIPart) => React.ReactNode;
17
- }
18
- type ThinkChatToolRenderers = Record<string, ThinkChatToolRenderer>;
19
- interface ThinkChatActivityRendererOptions {
20
- /**
21
- * Tool names to keep out of activity folding entirely — the run splits
22
- * around them and they fall through to your own renderPart / AgentChat's
23
- * generic standalone activity row. For tools that should stay in the log
24
- * with custom UI, use `toolRenderers` instead.
25
- */
26
- excludeTools?: readonly string[];
27
- /** Per-tool label/panel overrides inside the activity log, keyed by tool name. */
28
- toolRenderers?: ThinkChatToolRenderers;
29
- }
30
- /**
31
- * One-line natural-language label for an activity part ("Ran vp test",
32
- * "Fetched developers.cloudflare.com/agents/"); `null` for boundaries that
33
- * aren't steps (step-start). Exported so a custom `renderPart` can reuse the
34
- * built-in labels for tools it doesn't override.
35
- */
36
- declare function describeThinkChatActivityPart(part: ThinkChatPart, toolRenderers?: ThinkChatToolRenderers): string | null;
37
- interface ThinkChatActivityProps {
38
- /** Render with the log expanded. */
39
- defaultOpen?: boolean;
40
- parts: readonly ThinkChatPart[];
41
- /** Defaults to deriving from part states (reasoning streaming, tool awaiting output). */
42
- isStreaming?: boolean;
43
- /** Per-tool label/panel overrides, keyed by tool name. */
44
- toolRenderers?: ThinkChatToolRenderers;
45
- }
46
- /**
47
- * One run of agent work as a collapsed Activity block: while streaming the
48
- * label shimmers with the live step; settled, it becomes a short summary
49
- * ("Thought, read 2 files and ran a command") over an expandable step log
50
- * with per-tool panels. Normally reached through `ThinkChat.Messages`;
51
- * exported for apps that lay out messages themselves.
52
- */
53
- declare function ThinkChatActivity({
54
- parts,
55
- defaultOpen,
56
- isStreaming,
57
- toolRenderers
58
- }: ThinkChatActivityProps): React.JSX.Element | null;
59
- /**
60
- * Builds a renderPart handler that folds every run of consecutive activity
61
- * parts (reasoning + tool calls) into one collapsed Activity box. Everything
62
- * is derived from the UIMessage stream: part order, tool states, reasoning
63
- * state. Excluded tools split the run and return undefined so your own
64
- * renderPart (or AgentChat's generic activity row) takes over for them.
65
- */
66
- declare function createThinkChatActivityRenderer({
67
- excludeTools,
68
- toolRenderers
69
- }?: ThinkChatActivityRendererOptions): NonNullable<AgentChatProps["renderPart"]>;
70
- /** Default activity renderer — `createThinkChatActivityRenderer()` with no overrides. */
71
- declare const renderThinkChatActivityPart: (context: AgentChatRenderPartContext<UIMessage<unknown, import("ai").UIDataTypes, import("ai").UITools>>) => React.ReactNode | undefined;
72
- //#endregion
1
+ import { _ as isThinkChatActivityPart } from "../ThinkChatToolParts-DnUiZgCC.js";
2
+ import { a as ThinkChatToolRenderers, c as renderThinkChatActivityPart, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as describeThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-CeHzk6-K.js";
73
3
  export { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, describeThinkChatActivityPart, isThinkChatActivityPart, renderThinkChatActivityPart };
@@ -1,4 +1,4 @@
1
- import { M as TerminalIcon, N as WarningIcon, P as WrenchIcon, S as MonitorIcon, T as PencilIcon, k as SearchIcon, m as FileIcon, v as InfoIcon, y as LinkIcon } from "../icons-BCNawx-T.js";
1
+ import { A as SearchIcon, C as MonitorIcon, E as PencilIcon, F as WrenchIcon, N as TerminalIcon, P as WarningIcon, b as LinkIcon, h as FileIcon, y as InfoIcon } from "../icons-BAlTbWWP.js";
2
2
  import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityText, ActivityTrigger } from "./Activity.js";
3
3
  import { ThinkChatContext } from "./ThinkChatContext.js";
4
4
  import { displayUrl, isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartFailed, isPartWorking, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart } from "./ThinkChatToolParts.js";
@@ -1,28 +1,2 @@
1
- import * as React from "react";
2
- import { UIMessage } from "ai";
3
- import { useAgentChat } from "@cloudflare/think/react";
4
-
5
- //#region src/components/ThinkChatContext.d.ts
6
- type ThinkChatValue = ReturnType<typeof useAgentChat<unknown, UIMessage>>;
7
- declare const ThinkChatContext: React.Context<(Omit<import("@ai-sdk/react").UseChatHelpers<UIMessage<unknown, import("ai").UIDataTypes, import("ai").UITools>>, "addToolOutput"> & {
8
- clearHistory: () => void;
9
- addToolOutput: (opts: {
10
- toolCallId: string;
11
- toolName?: string;
12
- output?: unknown;
13
- state?: "output-available" | "output-error";
14
- errorText?: string;
15
- }) => void;
16
- isServerStreaming: boolean;
17
- isStreaming: boolean;
18
- isRecovering: boolean;
19
- isToolContinuation: boolean;
20
- connectionError: (Error & {
21
- code: number;
22
- reason: string;
23
- wasClean: boolean;
24
- }) | null;
25
- }) | null>;
26
- declare function useThinkChatContext(component: string): ThinkChatValue;
27
- //#endregion
1
+ import { n as ThinkChatValue, r as useThinkChatContext, t as ThinkChatContext } from "../ThinkChatContext-CC94HL4u.js";
28
2
  export { ThinkChatContext, ThinkChatValue, useThinkChatContext };
@@ -1,6 +1,6 @@
1
1
  import { ActivityOutput, ActivityPanel } from "./Activity.js";
2
2
  import { Tab, TabPanel, Tabs, TabsList } from "./Tabs.js";
3
- import { t as CodeBlock } from "../CodeBlock-BK0sOAbV.js";
3
+ import { t as CodeBlock } from "../CodeBlock-D9koxDA7.js";
4
4
  import { BrowserLiveView } from "./BrowserLiveView.js";
5
5
  import { displayUrl } from "./ThinkChatToolParts.js";
6
6
  import * as React from "react";
@@ -0,0 +1,23 @@
1
+ import { WorkspaceSource } from "./WorkspaceExplorer.js";
2
+ import { ThinkApprovalStub, ThinkChatMessagesProps, ThinkChatProviderProps } from "./ThinkChat.js";
3
+ import * as React from "react";
4
+
5
+ //#region src/components/ThinkFullApp.d.ts
6
+ interface ThinkFullAppProps extends React.HTMLAttributes<HTMLDivElement> {
7
+ /** ThinkChat state and actions used by the chat surface. */
8
+ chat: ThinkChatProviderProps["chat"];
9
+ /** Optional Think agent stub used to resolve pending approval state. */
10
+ agentStub?: ThinkApprovalStub;
11
+ /** Optional workspace source shown in the file explorer pane. */
12
+ workspace?: WorkspaceSource;
13
+ /** Root path passed to the workspace explorer. */
14
+ workspaceRoot?: string;
15
+ /** Message rendering labels and approval overrides for ThinkChat. */
16
+ messages?: ThinkChatMessagesProps;
17
+ }
18
+ /** Combines ThinkChat with an optional resizable workspace file explorer shell. */
19
+ declare function ThinkFullApp(props: ThinkFullAppProps & {
20
+ ref?: React.Ref<HTMLDivElement>;
21
+ }): React.JSX.Element;
22
+ //#endregion
23
+ export { ThinkFullApp, ThinkFullAppProps };
@@ -0,0 +1,175 @@
1
+ import { t as cx } from "../class-names-9UtZwb0J.js";
2
+ import { h as FileIcon, n as ArrowLeftIcon } from "../icons-BAlTbWWP.js";
3
+ import { Button } from "./Button.js";
4
+ import { WorkspaceExplorer, useWorkspace } from "./WorkspaceExplorer.js";
5
+ import { ThinkChat, useThinkPendingApprovals } from "./ThinkChat.js";
6
+ import * as React from "react";
7
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
8
+ //#region src/components/ThinkFullApp.tsx
9
+ const filesPanelDefaultWidth = 340;
10
+ const filesPanelMinWidth = 300;
11
+ const filesPanelMaxWidth = 600;
12
+ const filesPanelKeyboardStep = 24;
13
+ function clampFilesPanelWidth(width) {
14
+ return Math.min(filesPanelMaxWidth, Math.max(filesPanelMinWidth, width));
15
+ }
16
+ function beginFilesPanelResize(event, current, apply) {
17
+ event.preventDefault();
18
+ const startX = event.clientX;
19
+ const onMove = (move) => {
20
+ apply(clampFilesPanelWidth(current - (move.clientX - startX)));
21
+ };
22
+ const onUp = () => {
23
+ window.removeEventListener("pointermove", onMove);
24
+ window.removeEventListener("pointerup", onUp);
25
+ document.body.classList.remove("is-resizing-columns");
26
+ };
27
+ document.body.classList.add("is-resizing-columns");
28
+ window.addEventListener("pointermove", onMove);
29
+ window.addEventListener("pointerup", onUp);
30
+ }
31
+ function WorkspacePanel({ onBack, source, root }) {
32
+ return /* @__PURE__ */ jsx(WorkspaceExplorer, {
33
+ className: "think-full-app__workbench",
34
+ workspace: useWorkspace({
35
+ source,
36
+ root
37
+ }),
38
+ title: onBack ? /* @__PURE__ */ jsxs("span", {
39
+ className: "think-full-app__workspace-title",
40
+ children: [/* @__PURE__ */ jsx(Button, {
41
+ type: "button",
42
+ variant: "ghost",
43
+ color: "neutral",
44
+ size: "icon-sm",
45
+ className: "think-full-app__workspace-back",
46
+ "aria-label": "Show chat",
47
+ onClick: onBack,
48
+ children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
49
+ }), /* @__PURE__ */ jsx("span", { children: "Workspace" })]
50
+ }) : void 0
51
+ });
52
+ }
53
+ /** Combines ThinkChat with an optional resizable workspace file explorer shell. */
54
+ function ThinkFullApp(props) {
55
+ if (!props.agentStub) return /* @__PURE__ */ jsx(ThinkFullAppLayout, { ...props });
56
+ return /* @__PURE__ */ jsx(ThinkFullAppWithApprovals, {
57
+ ...props,
58
+ agentStub: props.agentStub
59
+ });
60
+ }
61
+ function ThinkFullAppWithApprovals({ agentStub, chat, messages, ...props }) {
62
+ const approvals = useThinkPendingApprovals(agentStub, `${chat.messages.length}:${chat.status}`);
63
+ const resolvedMessages = React.useMemo(() => ({
64
+ ...messages,
65
+ executionApprovals: messages?.executionApprovals ?? approvals.executionApprovals,
66
+ pendingApprovals: messages?.pendingApprovals ?? approvals.pendingApprovals
67
+ }), [
68
+ approvals.executionApprovals,
69
+ approvals.pendingApprovals,
70
+ messages
71
+ ]);
72
+ return /* @__PURE__ */ jsx(ThinkFullAppLayout, {
73
+ ...props,
74
+ chat,
75
+ messages: resolvedMessages
76
+ });
77
+ }
78
+ function ThinkFullAppLayout({ chat, className, messages, ref, style, workspace, workspaceRoot, ...props }) {
79
+ const hasWorkspace = workspace !== void 0;
80
+ const [mobileView, setMobileView] = React.useState("chat");
81
+ const [filesPanelWidth, setFilesPanelWidth] = React.useState(filesPanelDefaultWidth);
82
+ const activeMobileView = hasWorkspace && mobileView === "files" ? "files" : "chat";
83
+ const isMobileFilesView = activeMobileView === "files";
84
+ const rootStyle = {
85
+ ...style,
86
+ "--think-full-app-files-w": `${filesPanelWidth}px`
87
+ };
88
+ const resizeFilesPanelBy = (delta) => {
89
+ setFilesPanelWidth((current) => clampFilesPanelWidth(current + delta));
90
+ };
91
+ return /* @__PURE__ */ jsxs("div", {
92
+ ref,
93
+ className: cx("think-full-app", className),
94
+ "data-has-files": hasWorkspace ? "true" : "false",
95
+ "data-mobile-view": activeMobileView,
96
+ style: rootStyle,
97
+ ...props,
98
+ children: [
99
+ hasWorkspace && !isMobileFilesView ? /* @__PURE__ */ jsx("header", {
100
+ className: "think-full-app__mobile-header",
101
+ children: /* @__PURE__ */ jsx(Button, {
102
+ type: "button",
103
+ variant: "ghost",
104
+ color: "neutral",
105
+ size: "icon-sm",
106
+ className: "think-full-app__mobile-action",
107
+ "aria-label": "Show files",
108
+ onClick: () => setMobileView("files"),
109
+ children: /* @__PURE__ */ jsx(FileIcon, {})
110
+ })
111
+ }) : null,
112
+ /* @__PURE__ */ jsx("section", {
113
+ className: "think-full-app__chat-surface",
114
+ "aria-label": "Chat",
115
+ children: /* @__PURE__ */ jsx("div", {
116
+ className: "think-full-app__chat",
117
+ children: /* @__PURE__ */ jsxs("div", {
118
+ className: "think-full-app__chat-inner",
119
+ children: [/* @__PURE__ */ jsx(ThinkChat.Provider, {
120
+ chat,
121
+ children: /* @__PURE__ */ jsx(ThinkChat.Messages, { ...messages })
122
+ }), chat.error ? /* @__PURE__ */ jsxs("div", {
123
+ className: "think-full-app__error",
124
+ role: "alert",
125
+ children: [chat.error.message, /* @__PURE__ */ jsx("button", {
126
+ type: "button",
127
+ onClick: () => chat.clearError(),
128
+ children: "Dismiss"
129
+ })]
130
+ }) : null]
131
+ })
132
+ })
133
+ }),
134
+ workspace ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
135
+ type: "button",
136
+ role: "separator",
137
+ "aria-label": "Resize file panel",
138
+ "aria-orientation": "vertical",
139
+ "aria-valuemin": filesPanelMinWidth,
140
+ "aria-valuemax": filesPanelMaxWidth,
141
+ "aria-valuenow": filesPanelWidth,
142
+ className: "think-full-app__resizer",
143
+ onPointerDown: (event) => beginFilesPanelResize(event, filesPanelWidth, setFilesPanelWidth),
144
+ onKeyDown: (event) => {
145
+ if (event.key === "ArrowLeft") {
146
+ event.preventDefault();
147
+ resizeFilesPanelBy(filesPanelKeyboardStep);
148
+ } else if (event.key === "ArrowRight") {
149
+ event.preventDefault();
150
+ resizeFilesPanelBy(-24);
151
+ } else if (event.key === "Home") {
152
+ event.preventDefault();
153
+ setFilesPanelWidth(filesPanelMinWidth);
154
+ } else if (event.key === "End") {
155
+ event.preventDefault();
156
+ setFilesPanelWidth(filesPanelMaxWidth);
157
+ }
158
+ }
159
+ }), /* @__PURE__ */ jsx("aside", {
160
+ className: "think-full-app__aside",
161
+ "aria-label": "File explorer",
162
+ children: /* @__PURE__ */ jsx("div", {
163
+ className: "think-full-app__files-slot",
164
+ children: /* @__PURE__ */ jsx(WorkspacePanel, {
165
+ source: workspace,
166
+ root: workspaceRoot,
167
+ onBack: () => setMobileView("chat")
168
+ })
169
+ })
170
+ })] }) : null
171
+ ]
172
+ });
173
+ }
174
+ //#endregion
175
+ export { ThinkFullApp };
@@ -1,5 +1,5 @@
1
1
  import { t as cx } from "../class-names-9UtZwb0J.js";
2
- import { O as RefreshIcon, n as ArrowLeftIcon, o as ChevronDownIcon, r as ArrowRightIcon } from "../icons-BCNawx-T.js";
2
+ import { k as RefreshIcon, n as ArrowLeftIcon, o as ChevronDownIcon, r as ArrowRightIcon } from "../icons-BAlTbWWP.js";
3
3
  import { Button } from "./Button.js";
4
4
  import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
5
5
  import { Badge } from "./Badge.js";
@@ -1,8 +1,8 @@
1
1
  import { t as cx } from "../class-names-9UtZwb0J.js";
2
- import { O as RefreshIcon, k as SearchIcon, m as FileIcon, n as ArrowLeftIcon } from "../icons-BCNawx-T.js";
2
+ import { A as SearchIcon, h as FileIcon, k as RefreshIcon, n as ArrowLeftIcon } from "../icons-BAlTbWWP.js";
3
3
  import { Button } from "./Button.js";
4
- import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-BK0sOAbV.js";
5
- import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-BWQZ0FSi.js";
4
+ import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-D9koxDA7.js";
5
+ import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-BdK93Uuu.js";
6
6
  import * as React from "react";
7
7
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
8
8
  //#region src/components/WorkspaceExplorer.tsx
@@ -1,2 +1,2 @@
1
- import { A as SearchIcon, C as MonitorIcon, D as PlayIcon, E as PencilIcon, F as WrenchIcon, I as XIcon, M as SquareIcon, N as TerminalIcon, O as PlusIcon, P as WarningIcon, S as MinusIcon, T as PauseIcon, _ as IconProps, a as CheckIcon, b as LinkIcon, c as ChevronRightIcon, d as DownloadIcon, f as EyeIcon, g as FolderOpenIcon, h as FolderIcon, i as ArrowUpIcon, j as SpinnerIcon, k as RefreshIcon, l as CopyIcon, m as FileIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeOffIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as ImageIcon, w as PaperclipIcon, x as MaximizeIcon, y as InfoIcon } from "../icons-BYpJY6L2.js";
2
- export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
1
+ import { A as RefreshIcon, C as MinusIcon, D as PencilIcon, E as PauseIcon, F as WarningIcon, I as WrenchIcon, L as XIcon, M as SpinnerIcon, N as SquareIcon, O as PlayIcon, P as TerminalIcon, S as MaximizeIcon, T as PaperclipIcon, _ as FolderOpenIcon, a as CheckIcon, b as InfoIcon, c as ChevronRightIcon, d as DownloadIcon, f as EllipsisIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SearchIcon, k as PlusIcon, l as CopyIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as IconProps, w as MonitorIcon, x as LinkIcon, y as ImageIcon } from "../icons-BRI54ATJ.js";
2
+ export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
@@ -1,2 +1,2 @@
1
- import { A as SpinnerIcon, C as PaperclipIcon, D as PlusIcon, E as PlayIcon, F as XIcon, M as TerminalIcon, N as WarningIcon, O as RefreshIcon, P as WrenchIcon, S as MonitorIcon, T as PencilIcon, _ as ImageIcon, a as CheckIcon, b as MaximizeIcon, c as ChevronRightIcon, d as DownloadIcon, f as EyeIcon, g as FolderOpenIcon, h as FolderIcon, i as ArrowUpIcon, j as SquareIcon, k as SearchIcon, l as CopyIcon, m as FileIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeOffIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as InfoIcon, w as PauseIcon, x as MinusIcon, y as LinkIcon } from "../icons-BCNawx-T.js";
2
- export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
1
+ import { A as SearchIcon, C as MonitorIcon, D as PlayIcon, E as PencilIcon, F as WrenchIcon, I as XIcon, M as SquareIcon, N as TerminalIcon, O as PlusIcon, P as WarningIcon, S as MinusIcon, T as PauseIcon, _ as FolderOpenIcon, a as CheckIcon, b as LinkIcon, c as ChevronRightIcon, d as DownloadIcon, f as EllipsisIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SpinnerIcon, k as RefreshIcon, l as CopyIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as ImageIcon, w as PaperclipIcon, x as MaximizeIcon, y as InfoIcon } from "../icons-BAlTbWWP.js";
2
+ export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
@@ -1,4 +1,4 @@
1
- import { a as CheckIcon, l as CopyIcon } from "./icons-BCNawx-T.js";
1
+ import { a as CheckIcon, l as CopyIcon } from "./icons-BAlTbWWP.js";
2
2
  import { Button } from "./components/Button.js";
3
3
  import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./components/Tooltip.js";
4
4
  import * as React from "react";
@@ -152,6 +152,32 @@ const DotIcon = (props) => /* @__PURE__ */ jsx(Icon, {
152
152
  stroke: "none"
153
153
  })
154
154
  });
155
+ const EllipsisIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
156
+ ...props,
157
+ children: [
158
+ /* @__PURE__ */ jsx("circle", {
159
+ cx: "3.5",
160
+ cy: "8",
161
+ r: "0.75",
162
+ fill: "currentColor",
163
+ stroke: "none"
164
+ }),
165
+ /* @__PURE__ */ jsx("circle", {
166
+ cx: "8",
167
+ cy: "8",
168
+ r: "0.75",
169
+ fill: "currentColor",
170
+ stroke: "none"
171
+ }),
172
+ /* @__PURE__ */ jsx("circle", {
173
+ cx: "12.5",
174
+ cy: "8",
175
+ r: "0.75",
176
+ fill: "currentColor",
177
+ stroke: "none"
178
+ })
179
+ ]
180
+ });
155
181
  const SpinnerIcon = (props) => /* @__PURE__ */ jsx(Icon, {
156
182
  ...props,
157
183
  children: /* @__PURE__ */ jsx("path", { d: "M8 1.5A6.5 6.5 0 1 1 1.5 8" })
@@ -252,4 +278,4 @@ const MaximizeIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
252
278
  ]
253
279
  });
254
280
  //#endregion
255
- export { SpinnerIcon as A, PaperclipIcon as C, PlusIcon as D, PlayIcon as E, XIcon as F, TerminalIcon as M, WarningIcon as N, RefreshIcon as O, WrenchIcon as P, MonitorIcon as S, PencilIcon as T, ImageIcon as _, CheckIcon as a, MaximizeIcon as b, ChevronRightIcon as c, DownloadIcon as d, EyeIcon as f, FolderOpenIcon as g, FolderIcon as h, ArrowUpIcon as i, SquareIcon as j, SearchIcon as k, CopyIcon as l, FileIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeOffIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, InfoIcon as v, PauseIcon as w, MinusIcon as x, LinkIcon as y };
281
+ export { SearchIcon as A, MonitorIcon as C, PlayIcon as D, PencilIcon as E, WrenchIcon as F, XIcon as I, SquareIcon as M, TerminalIcon as N, PlusIcon as O, WarningIcon as P, MinusIcon as S, PauseIcon as T, FolderOpenIcon as _, CheckIcon as a, LinkIcon as b, ChevronRightIcon as c, DownloadIcon as d, EllipsisIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SpinnerIcon as j, RefreshIcon as k, CopyIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, ImageIcon as v, PaperclipIcon as w, MaximizeIcon as x, InfoIcon as y };
@@ -35,6 +35,7 @@ declare const ArrowUpIcon: (props: IconProps) => React.JSX.Element;
35
35
  declare const DownloadIcon: (props: IconProps) => React.JSX.Element;
36
36
  declare const RefreshIcon: (props: IconProps) => React.JSX.Element;
37
37
  declare const DotIcon: (props: IconProps) => React.JSX.Element;
38
+ declare const EllipsisIcon: (props: IconProps) => React.JSX.Element;
38
39
  declare const SpinnerIcon: (props: IconProps) => React.JSX.Element;
39
40
  declare const SearchIcon: (props: IconProps) => React.JSX.Element;
40
41
  declare const TerminalIcon: (props: IconProps) => React.JSX.Element;
@@ -46,4 +47,4 @@ declare const ImageIcon: (props: IconProps) => React.JSX.Element;
46
47
  declare const MonitorIcon: (props: IconProps) => React.JSX.Element;
47
48
  declare const MaximizeIcon: (props: IconProps) => React.JSX.Element;
48
49
  //#endregion
49
- export { SearchIcon as A, MonitorIcon as C, PlayIcon as D, PencilIcon as E, WrenchIcon as F, XIcon as I, SquareIcon as M, TerminalIcon as N, PlusIcon as O, WarningIcon as P, MinusIcon as S, PauseIcon as T, IconProps as _, CheckIcon as a, LinkIcon as b, ChevronRightIcon as c, DownloadIcon as d, EyeIcon as f, FolderOpenIcon as g, FolderIcon as h, ArrowUpIcon as i, SpinnerIcon as j, RefreshIcon as k, CopyIcon as l, FileIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeOffIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, ImageIcon as v, PaperclipIcon as w, MaximizeIcon as x, InfoIcon as y };
50
+ export { RefreshIcon as A, MinusIcon as C, PencilIcon as D, PauseIcon as E, WarningIcon as F, WrenchIcon as I, XIcon as L, SpinnerIcon as M, SquareIcon as N, PlayIcon as O, TerminalIcon as P, MaximizeIcon as S, PaperclipIcon as T, FolderOpenIcon as _, CheckIcon as a, InfoIcon as b, ChevronRightIcon as c, DownloadIcon as d, EllipsisIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SearchIcon as j, PlusIcon as k, CopyIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, IconProps as v, MonitorIcon as w, LinkIcon as x, ImageIcon as y };
@@ -131,13 +131,8 @@
131
131
  inset 0 0 0 1px var(--sigvelo-color-primary-border-subtle);
132
132
  }
133
133
 
134
- .agent-connect .code-block {
135
- min-inline-size: 0;
136
- }
137
-
138
134
  .agent-connect .code-block__container {
139
135
  max-block-size: 13.5rem;
140
- overflow-y: auto;
141
136
  }
142
137
 
143
138
  .agent-connect .code-block__content,
@@ -297,6 +292,39 @@
297
292
  outline-offset: 2px;
298
293
  }
299
294
 
295
+ .agent-connect__mcp-form {
296
+ display: grid;
297
+ gap: 0.75rem;
298
+ min-inline-size: 0;
299
+ }
300
+
301
+ .agent-connect__mcp-form--row {
302
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
303
+ align-items: end;
304
+ padding: 0.75rem;
305
+ background: var(--sigvelo-color-surface);
306
+ }
307
+
308
+ .agent-connect__mcp-form-actions {
309
+ display: flex;
310
+ flex-wrap: wrap;
311
+ gap: 0.5rem;
312
+ }
313
+
314
+ .agent-connect__mcp-form--row .agent-connect__mcp-form-actions {
315
+ align-self: end;
316
+ }
317
+
318
+ .agent-connect__mcp-form-status {
319
+ align-self: end;
320
+ min-inline-size: 0;
321
+ color: var(--sigvelo-color-text-muted);
322
+ font-size: var(--sigvelo-text-xs);
323
+ font-weight: var(--sigvelo-font-weight-semibold);
324
+ line-height: 1.25;
325
+ overflow-wrap: anywhere;
326
+ }
327
+
300
328
  .agent-connect-trigger {
301
329
  inline-size: 100%;
302
330
  }