@mcp-b/react-components 0.20.5 → 0.21.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/{AgentActivity-D2SHSGFX.d.ts → AgentActivity-D3OvrC02.d.ts} +14 -1
- package/dist/{AgentChat-C-ZyXbJz.d.ts → AgentChat-Dvkn8lce.d.ts} +23 -0
- package/dist/AgentChatStartScreen-CvXJBr4y.d.ts +57 -0
- package/dist/{ModelSelector-pecWyOFI.js → ModelSelector-CEd8M9eK.js} +14 -7
- package/dist/{ThinkChatActivity-CdbL0aoA.d.ts → ThinkChatActivity-FY1VWXgh.d.ts} +8 -7
- package/dist/{ThinkChatActivitySummary-D1xOrNrq.d.ts → ThinkChatActivitySummary-kr5fE0wg.d.ts} +14 -5
- package/dist/{ToggleGroup-DNd6cDJZ.d.ts → ToggleGroup-BW1jrhAF.d.ts} +10 -0
- package/dist/components/Activity.d.ts +33 -17
- package/dist/components/Activity.js +39 -27
- package/dist/components/AgentActivity.d.ts +1 -1
- package/dist/components/AgentActivityPreview.d.ts +1 -1
- package/dist/components/AgentActivityPreview.js +2 -2
- package/dist/components/AgentChat.d.ts +1 -1
- package/dist/components/AgentChat.js +142 -129
- package/dist/components/AgentChatStartScreen.d.ts +2 -0
- package/dist/components/AgentChatStartScreen.js +82 -0
- package/dist/components/Approval.js +2 -4
- package/dist/components/BrowserLiveView.js +5 -7
- package/dist/components/BrowserReplay.js +5 -4
- package/dist/components/BrowserRunPanel.js +1 -1
- package/dist/components/ChatGptSignInScreen.js +1 -1
- package/dist/components/Conversation.d.ts +1 -22
- package/dist/components/Conversation.js +2 -29
- package/dist/components/EmptyState.d.ts +46 -0
- package/dist/components/EmptyState.js +50 -0
- package/dist/components/Kbd.d.ts +32 -0
- package/dist/components/Kbd.js +34 -0
- package/dist/components/ModelSelector.d.ts +10 -4
- package/dist/components/ModelSelector.js +2 -2
- package/dist/components/PricingBillingToggle.js +1 -0
- package/dist/components/PromptInput.js +3 -2
- package/dist/components/Reasoning.js +1 -1
- package/dist/components/StatusPill.d.ts +43 -0
- package/dist/components/StatusPill.js +35 -0
- package/dist/components/ThinkChat.d.ts +9 -3
- package/dist/components/ThinkChatActivity.d.ts +2 -2
- package/dist/components/ThinkChatActivity.js +27 -15
- package/dist/components/ThinkChatActivitySummary.d.ts +2 -2
- package/dist/components/ThinkChatActivitySummary.js +67 -64
- package/dist/components/ThinkExecutionDetail.js +4 -4
- package/dist/components/ThinkExecutionWorkbench.js +5 -4
- package/dist/components/ThinkFullAppViewSwitch.d.ts +1 -1
- package/dist/components/ThinkRoutineBrowser.js +1 -0
- package/dist/components/ThinkRoutineRuns.js +3 -2
- package/dist/components/ThinkThreadPicker.js +3 -2
- package/dist/components/ToggleGroup.d.ts +1 -1
- package/dist/components/ToggleGroup.js +54 -7
- package/dist/components/ToolInvocation.js +1 -1
- package/dist/styles/activity-header.css +41 -10
- package/dist/styles/activity.css +26 -4
- package/dist/styles/agent-activity-preview-overlay.css +39 -12
- package/dist/styles/agent-activity-preview.css +31 -30
- package/dist/styles/agent-attention.css +2 -2
- package/dist/styles/agent-chat.css +199 -0
- package/dist/styles/agent-connection.css +8 -8
- package/dist/styles/alert-dialog.css +5 -2
- package/dist/styles/app-top-bar.css +4 -4
- package/dist/styles/approval.css +1 -7
- package/dist/styles/artifact.css +4 -4
- package/dist/styles/base-ui-motion.css +1 -1
- package/dist/styles/base.css +95 -3
- package/dist/styles/browser-control-overlay.css +16 -7
- package/dist/styles/browser-live-view.css +5 -38
- package/dist/styles/browser-replay.css +2 -6
- package/dist/styles/browser-run-panel.css +4 -18
- package/dist/styles/button.css +3 -1
- package/dist/styles/card.css +4 -4
- package/dist/styles/chain-of-thought.css +0 -1
- package/dist/styles/chatgpt-sign-in-screen.css +7 -5
- package/dist/styles/checkbox-group.css +3 -3
- package/dist/styles/code-block.css +4 -4
- package/dist/styles/context-menu.css +1 -1
- package/dist/styles/conversation.css +7 -42
- package/dist/styles/description-list.css +2 -2
- package/dist/styles/dialog.css +17 -2
- package/dist/styles/empty-state.css +48 -0
- package/dist/styles/environment-variables.css +4 -4
- package/dist/styles/field.css +2 -2
- package/dist/styles/index.css +3 -0
- package/dist/styles/inline-citation.css +1 -1
- package/dist/styles/kbd.css +40 -0
- package/dist/styles/media-preview-card.css +5 -3
- package/dist/styles/message-scroller.css +4 -4
- package/dist/styles/message.css +4 -6
- package/dist/styles/model-selector.css +5 -8
- package/dist/styles/popover.css +1 -1
- package/dist/styles/preview-card.css +1 -1
- package/dist/styles/prompt-input.css +18 -40
- package/dist/styles/queue.css +2 -2
- package/dist/styles/recipes.css +68 -9
- package/dist/styles/resizable-side-panel.css +1 -1
- package/dist/styles/responsive-sidebar-shell.css +5 -6
- package/dist/styles/scrollbars.css +32 -3
- package/dist/styles/sources.css +1 -1
- package/dist/styles/status-pill.css +39 -0
- package/dist/styles/stepper.css +2 -2
- package/dist/styles/streamdown.css +13 -12
- package/dist/styles/subagent-run.css +3 -3
- package/dist/styles/switch.css +1 -3
- package/dist/styles/tabs.css +1 -1
- package/dist/styles/task.css +1 -1
- package/dist/styles/terminal.css +2 -2
- package/dist/styles/test-results.css +1 -2
- package/dist/styles/textarea.css +1 -1
- package/dist/styles/theme-mode-control.css +1 -1
- package/dist/styles/think-execution-status.css +4 -23
- package/dist/styles/think-execution-workbench.css +2 -3
- package/dist/styles/think-full-app.css +2 -2
- package/dist/styles/think-routine-library.css +14 -16
- package/dist/styles/think-thread-picker.css +8 -25
- package/dist/styles/toast.css +2 -2
- package/dist/styles/toggle-group.css +76 -3
- package/dist/styles/tooltip.css +1 -2
- package/dist/styles/utilities.css +73 -0
- package/dist/styles/workspace-explorer.css +4 -6
- package/package.json +2 -2
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { t as cx } from "../class-names-BiMDVpUo.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/EmptyState.tsx
|
|
5
|
+
/**
|
|
6
|
+
* Placeholder for a region that has nothing in it yet.
|
|
7
|
+
*
|
|
8
|
+
* There is no size prop. A one-line "No results" and a full centred block are
|
|
9
|
+
* the same component with different content — pass only `description` for the
|
|
10
|
+
* first and add `icon` and `title` for the second. Filling and centring a
|
|
11
|
+
* region is the container's job, not this component's; set
|
|
12
|
+
* `--sigvelo-recipe-empty-state-padding-block` where a roomier well is wanted.
|
|
13
|
+
*
|
|
14
|
+
* `children` replaces the whole stack, for the cases that need an action.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```tsx
|
|
18
|
+
* <EmptyState description="No runs yet." />
|
|
19
|
+
*
|
|
20
|
+
* <EmptyState
|
|
21
|
+
* icon={<MessageIcon />}
|
|
22
|
+
* title="Start a conversation"
|
|
23
|
+
* description="Ask the agent to inspect, plan, or build."
|
|
24
|
+
* />
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
function EmptyState({ className, icon, title, description, children, ref, ...props }) {
|
|
28
|
+
return /* @__PURE__ */ jsx("div", {
|
|
29
|
+
ref,
|
|
30
|
+
className: cx("empty-state", className),
|
|
31
|
+
...props,
|
|
32
|
+
children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
33
|
+
icon ? /* @__PURE__ */ jsx("span", {
|
|
34
|
+
className: "empty-state__icon",
|
|
35
|
+
"aria-hidden": "true",
|
|
36
|
+
children: icon
|
|
37
|
+
}) : null,
|
|
38
|
+
title ? /* @__PURE__ */ jsx("div", {
|
|
39
|
+
className: "empty-state__title",
|
|
40
|
+
children: title
|
|
41
|
+
}) : null,
|
|
42
|
+
description ? /* @__PURE__ */ jsx("div", {
|
|
43
|
+
className: "empty-state__description",
|
|
44
|
+
children: description
|
|
45
|
+
}) : null
|
|
46
|
+
] })
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
//#endregion
|
|
50
|
+
export { EmptyState };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
2
|
+
|
|
3
|
+
//#region src/components/Kbd.d.ts
|
|
4
|
+
type KbdRenderState = {
|
|
5
|
+
slot: "kbd";
|
|
6
|
+
};
|
|
7
|
+
interface KbdProps extends useRender.ComponentProps<"kbd", KbdRenderState> {}
|
|
8
|
+
/**
|
|
9
|
+
* A keyboard key or chord, rendered as a quiet inline chip.
|
|
10
|
+
*
|
|
11
|
+
* The chip draws itself from `currentColor`, so it reads correctly on a page
|
|
12
|
+
* surface, inside a menu row, and on the inverted surface of a tooltip without
|
|
13
|
+
* a variant prop deciding which. Put one key per element; a chord is several
|
|
14
|
+
* elements with separators between them, so a screen reader announces the keys
|
|
15
|
+
* rather than the punctuation.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```tsx
|
|
19
|
+
* <Kbd>⏎</Kbd>
|
|
20
|
+
* <span>
|
|
21
|
+
* <Kbd>⌘</Kbd> <Kbd>K</Kbd>
|
|
22
|
+
* </span>
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
declare function Kbd({
|
|
26
|
+
className,
|
|
27
|
+
render,
|
|
28
|
+
ref,
|
|
29
|
+
...props
|
|
30
|
+
}: KbdProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
31
|
+
//#endregion
|
|
32
|
+
export { Kbd, KbdProps };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { t as cx } from "../class-names-BiMDVpUo.js";
|
|
2
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
3
|
+
//#region src/components/Kbd.tsx
|
|
4
|
+
/**
|
|
5
|
+
* A keyboard key or chord, rendered as a quiet inline chip.
|
|
6
|
+
*
|
|
7
|
+
* The chip draws itself from `currentColor`, so it reads correctly on a page
|
|
8
|
+
* surface, inside a menu row, and on the inverted surface of a tooltip without
|
|
9
|
+
* a variant prop deciding which. Put one key per element; a chord is several
|
|
10
|
+
* elements with separators between them, so a screen reader announces the keys
|
|
11
|
+
* rather than the punctuation.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <Kbd>⏎</Kbd>
|
|
16
|
+
* <span>
|
|
17
|
+
* <Kbd>⌘</Kbd> <Kbd>K</Kbd>
|
|
18
|
+
* </span>
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
function Kbd({ className, render, ref, ...props }) {
|
|
22
|
+
return useRender({
|
|
23
|
+
defaultTagName: "kbd",
|
|
24
|
+
render,
|
|
25
|
+
ref,
|
|
26
|
+
props: {
|
|
27
|
+
...props,
|
|
28
|
+
className: cx("kbd", className)
|
|
29
|
+
},
|
|
30
|
+
state: { slot: "kbd" }
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
//#endregion
|
|
34
|
+
export { Kbd };
|
|
@@ -243,14 +243,20 @@ declare function ModelSelectorName({
|
|
|
243
243
|
}: ModelSelectorNameProps & {
|
|
244
244
|
ref?: React.Ref<HTMLSpanElement>;
|
|
245
245
|
}): React.JSX.Element;
|
|
246
|
-
interface
|
|
247
|
-
|
|
246
|
+
interface ModelSelectorSourceProps extends React.HTMLAttributes<HTMLSpanElement> {}
|
|
247
|
+
/**
|
|
248
|
+
* Where a model comes from — "Workers AI", "Gateway" — shown at the end of its
|
|
249
|
+
* row. This was a `<kbd>` named `ModelSelectorSource`, which announced
|
|
250
|
+
* "Workers AI" to a screen reader as keyboard input and offered a shortcut
|
|
251
|
+
* that does not exist.
|
|
252
|
+
*/
|
|
253
|
+
declare function ModelSelectorSource({
|
|
248
254
|
className,
|
|
249
255
|
children,
|
|
250
256
|
ref,
|
|
251
257
|
...props
|
|
252
|
-
}:
|
|
258
|
+
}: ModelSelectorSourceProps & {
|
|
253
259
|
ref?: React.Ref<HTMLSpanElement>;
|
|
254
260
|
}): React.JSX.Element;
|
|
255
261
|
//#endregion
|
|
256
|
-
export { CloudflareModelCatalogEntry, CloudflareModelCatalogListParams, CloudflareModelSelector, CloudflareModelSelectorModels, CloudflareModelSelectorOption, CloudflareModelSelectorProps, ModelSelector, ModelSelectorContent, ModelSelectorContentProps, ModelSelectorDialog, ModelSelectorDialogProps, ModelSelectorEmpty, ModelSelectorEmptyProps, ModelSelectorGroup, ModelSelectorGroupProps, ModelSelectorInput, ModelSelectorInputProps, ModelSelectorItem, ModelSelectorItemProps, ModelSelectorList, ModelSelectorListProps, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorLogoGroupProps, ModelSelectorLogoProps, ModelSelectorName, ModelSelectorNameProps, ModelSelectorProps, ModelSelectorSeparator, ModelSelectorSeparatorProps,
|
|
262
|
+
export { CloudflareModelCatalogEntry, CloudflareModelCatalogListParams, CloudflareModelSelector, CloudflareModelSelectorModels, CloudflareModelSelectorOption, CloudflareModelSelectorProps, ModelSelector, ModelSelectorContent, ModelSelectorContentProps, ModelSelectorDialog, ModelSelectorDialogProps, ModelSelectorEmpty, ModelSelectorEmptyProps, ModelSelectorGroup, ModelSelectorGroupProps, ModelSelectorInput, ModelSelectorInputProps, ModelSelectorItem, ModelSelectorItemProps, ModelSelectorList, ModelSelectorListProps, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorLogoGroupProps, ModelSelectorLogoProps, ModelSelectorName, ModelSelectorNameProps, ModelSelectorProps, ModelSelectorSeparator, ModelSelectorSeparatorProps, ModelSelectorSource, ModelSelectorSourceProps, ModelSelectorTrigger, ModelSelectorTriggerProps, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as
|
|
2
|
-
export { CloudflareModelSelector, ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator,
|
|
1
|
+
import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as ModelSelectorSource, n as ModelSelector, o as ModelSelectorGroup, p as ModelSelectorSeparator, r as ModelSelectorContent, s as ModelSelectorInput, t as CloudflareModelSelector, u as ModelSelectorLogo, v as isCloudflareRunnableModelId, x as readCloudflareModelId, y as listCloudflareModelSelectorOptions } from "../ModelSelector-CEd8M9eK.js";
|
|
2
|
+
export { CloudflareModelSelector, ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorSource, ModelSelectorTrigger, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };
|
|
@@ -6,6 +6,7 @@ import { t as AttachmentPreview } from "../attachment-preview-DIs50Q0h.js";
|
|
|
6
6
|
import { n as clamp, r as formatClock } from "../format-S6uWyoSb.js";
|
|
7
7
|
import { Menu } from "./Menu.js";
|
|
8
8
|
import { Combobox } from "./Combobox.js";
|
|
9
|
+
import { Kbd } from "./Kbd.js";
|
|
9
10
|
import { Select } from "./Select.js";
|
|
10
11
|
import { Tabs } from "./Tabs.js";
|
|
11
12
|
import { ThinkExecutionApproval, ThinkPendingApproval, getPausedExecution } from "./ThinkPendingApproval.js";
|
|
@@ -481,7 +482,7 @@ function PromptInputButton({ className, tooltip, variant = "ghost", color = "neu
|
|
|
481
482
|
children: /* @__PURE__ */ jsxs(Tooltip.Popup, { children: [/* @__PURE__ */ jsx("span", {
|
|
482
483
|
className: "prompt-input__tooltip-content",
|
|
483
484
|
children: tooltipConfig.content
|
|
484
|
-
}), tooltipConfig.shortcut ? /* @__PURE__ */ jsx(
|
|
485
|
+
}), tooltipConfig.shortcut ? /* @__PURE__ */ jsx(Kbd, {
|
|
485
486
|
className: "prompt-input__tooltip-shortcut",
|
|
486
487
|
children: tooltipConfig.shortcut
|
|
487
488
|
}) : null] })
|
|
@@ -1238,7 +1239,7 @@ function PromptInputContextSelector({ items, value, onValueChange, categoryLabel
|
|
|
1238
1239
|
}
|
|
1239
1240
|
function defaultSubmitIcon(status) {
|
|
1240
1241
|
switch (status) {
|
|
1241
|
-
case "submitted": return /* @__PURE__ */ jsx(SpinnerIcon, {
|
|
1242
|
+
case "submitted": return /* @__PURE__ */ jsx(SpinnerIcon, {});
|
|
1242
1243
|
case "streaming": return /* @__PURE__ */ jsx(SquareIcon, {});
|
|
1243
1244
|
case "error": return /* @__PURE__ */ jsx(WarningIcon, {});
|
|
1244
1245
|
default: return /* @__PURE__ */ jsx(ArrowUpIcon, {});
|
|
@@ -128,7 +128,7 @@ function ReasoningTrigger({ className, children, getThinkingMessage = defaultGet
|
|
|
128
128
|
className: cx("reasoning__trigger", className),
|
|
129
129
|
"data-streaming": isStreaming ? "" : void 0,
|
|
130
130
|
icon: children == null && isStreaming ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : void 0,
|
|
131
|
-
|
|
131
|
+
action: children ?? getThinkingMessage(isStreaming, duration),
|
|
132
132
|
...props
|
|
133
133
|
});
|
|
134
134
|
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { BadgeProps } from "./Badge.js";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/StatusPill.d.ts
|
|
5
|
+
interface StatusPillProps extends BadgeProps {
|
|
6
|
+
/**
|
|
7
|
+
* Whether the state this reports is still ongoing. A live state pulses; a
|
|
8
|
+
* settled one holds still, so "Live" and "Ended" are told apart without
|
|
9
|
+
* reading either word.
|
|
10
|
+
*/
|
|
11
|
+
busy?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Replaces the dot for states that have a picture — a spinner while a run
|
|
14
|
+
* starts, a check once it lands.
|
|
15
|
+
*/
|
|
16
|
+
icon?: React.ReactNode;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* A short state report: an indicator, then the state itself.
|
|
20
|
+
*
|
|
21
|
+
* This is a `Badge` with an indicator in front, not a second kind of chip, so
|
|
22
|
+
* `variant`, `color`, and `size` mean here exactly what they mean there. What
|
|
23
|
+
* it adds is the dot and its pulse, which several surfaces had been writing
|
|
24
|
+
* out by hand.
|
|
25
|
+
*
|
|
26
|
+
* It reports; it does not ask. A state that needs the user to do something is
|
|
27
|
+
* `AgentAttention`.
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* ```tsx
|
|
31
|
+
* <StatusPill busy color="destructive" size="sm">Live</StatusPill>
|
|
32
|
+
* <StatusPill color="success" icon={<CheckIcon />}>Passed</StatusPill>
|
|
33
|
+
* ```
|
|
34
|
+
*/
|
|
35
|
+
declare function StatusPill({
|
|
36
|
+
busy,
|
|
37
|
+
className,
|
|
38
|
+
icon,
|
|
39
|
+
children,
|
|
40
|
+
...props
|
|
41
|
+
}: StatusPillProps): React.JSX.Element;
|
|
42
|
+
//#endregion
|
|
43
|
+
export { StatusPill, StatusPillProps };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { t as cx } from "../class-names-BiMDVpUo.js";
|
|
2
|
+
import { Badge } from "./Badge.js";
|
|
3
|
+
import "react";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
//#region src/components/StatusPill.tsx
|
|
6
|
+
/**
|
|
7
|
+
* A short state report: an indicator, then the state itself.
|
|
8
|
+
*
|
|
9
|
+
* This is a `Badge` with an indicator in front, not a second kind of chip, so
|
|
10
|
+
* `variant`, `color`, and `size` mean here exactly what they mean there. What
|
|
11
|
+
* it adds is the dot and its pulse, which several surfaces had been writing
|
|
12
|
+
* out by hand.
|
|
13
|
+
*
|
|
14
|
+
* It reports; it does not ask. A state that needs the user to do something is
|
|
15
|
+
* `AgentAttention`.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```tsx
|
|
19
|
+
* <StatusPill busy color="destructive" size="sm">Live</StatusPill>
|
|
20
|
+
* <StatusPill color="success" icon={<CheckIcon />}>Passed</StatusPill>
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
function StatusPill({ busy = false, className, icon, children, ...props }) {
|
|
24
|
+
return /* @__PURE__ */ jsxs(Badge, {
|
|
25
|
+
className: cx("status-pill", className),
|
|
26
|
+
"data-busy": busy || void 0,
|
|
27
|
+
...props,
|
|
28
|
+
children: [icon ?? /* @__PURE__ */ jsx("span", {
|
|
29
|
+
"aria-hidden": "true",
|
|
30
|
+
className: "status-pill__dot"
|
|
31
|
+
}), children]
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
//#endregion
|
|
35
|
+
export { StatusPill };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { i as AgentMessageRenderPartContext } from "../AgentMessageParts-CyD2UB3V.js";
|
|
2
|
-
import { r as AgentChatProps } from "../AgentChat-
|
|
2
|
+
import { r as AgentChatProps } from "../AgentChat-Dvkn8lce.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
|
-
import {
|
|
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-
|
|
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-FY1VWXgh.js";
|
|
7
7
|
import { n as ThinkChatValue } from "../ThinkChatContext-DrsZqdaO.js";
|
|
8
8
|
import { n as ThinkRecoveryNoticeProps, t as ThinkRecoveryNotice } from "../ThinkRecoveryNotice-DFIcG9UX.js";
|
|
9
9
|
import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../BrowserLiveView-BV5qgFgI.js";
|
|
@@ -53,6 +53,8 @@ interface ThinkChatMessagesProps<MessageT extends UIMessage = UIMessage> extends
|
|
|
53
53
|
showComposer?: AgentChatProps<MessageT>["showComposer"];
|
|
54
54
|
/** Shown in place of the list while there are no messages. */
|
|
55
55
|
emptyState?: React.ReactNode;
|
|
56
|
+
/** Welcoming first-turn layout with the live composer centered above starter actions. */
|
|
57
|
+
startScreen?: AgentChatProps<MessageT>["startScreen"];
|
|
56
58
|
/** Extra controls rendered inside the composer, next to the send button. */
|
|
57
59
|
composerTools?: React.ReactNode;
|
|
58
60
|
/** Host-owned slash-command catalog and selection policy. */
|
|
@@ -75,6 +77,10 @@ interface ThinkChatMessagesProps<MessageT extends UIMessage = UIMessage> extends
|
|
|
75
77
|
placeholder?: string;
|
|
76
78
|
/** Rendered after each message (e.g. per-message actions). */
|
|
77
79
|
renderMessageAfter?: AgentChatProps<MessageT>["renderMessageAfter"];
|
|
80
|
+
/** Per-message policy for AgentChat's built-in assistant copy/retry toolbar. */
|
|
81
|
+
showAssistantActions?: AgentChatProps<MessageT>["showAssistantActions"];
|
|
82
|
+
/** Overrides which rows anchor at the top when added; user messages are the default. */
|
|
83
|
+
isMessageScrollAnchor?: AgentChatProps<MessageT>["isMessageScrollAnchor"];
|
|
78
84
|
/**
|
|
79
85
|
* Durable backend edit/resend operation. Think does not synchronize
|
|
80
86
|
* `setMessages`, so wire this to an agent callable that creates the branch.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { S as isThinkChatActivityPart } from "../ThinkChatToolParts-CSzVwMXf.js";
|
|
2
|
-
import {
|
|
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-
|
|
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-FY1VWXgh.js";
|
|
4
4
|
export { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, describeThinkChatActivityPart, isThinkChatActivityPart, renderThinkChatActivityPart };
|
|
@@ -17,18 +17,18 @@ function activityPartIcon(part) {
|
|
|
17
17
|
}
|
|
18
18
|
/**
|
|
19
19
|
* One run of agent work as a collapsed Activity block: while streaming the
|
|
20
|
-
*
|
|
20
|
+
* action shimmers with the live step; settled, it becomes a short summary
|
|
21
21
|
* ("Thought, read 2 files and ran a command") over an expandable step log
|
|
22
22
|
* with per-tool panels. Normally reached through `ThinkChat.Messages`;
|
|
23
23
|
* exported for apps that lay out messages themselves.
|
|
24
24
|
*/
|
|
25
25
|
function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers }) {
|
|
26
26
|
const steps = parts.flatMap((part, index) => {
|
|
27
|
-
const
|
|
28
|
-
if (!
|
|
27
|
+
const description = describeThinkChatActivityPart(part, toolRenderers);
|
|
28
|
+
if (!description) return [];
|
|
29
29
|
return [{
|
|
30
30
|
key: isToolUIPart(part) ? part.toolCallId : `${part.type}-${index}`,
|
|
31
|
-
|
|
31
|
+
description,
|
|
32
32
|
part
|
|
33
33
|
}];
|
|
34
34
|
});
|
|
@@ -44,65 +44,77 @@ function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers }) {
|
|
|
44
44
|
defaultOpen,
|
|
45
45
|
children: [/* @__PURE__ */ jsx(ActivityTrigger, {
|
|
46
46
|
icon: header.url ? /* @__PURE__ */ jsx(AgentActivityFavicon, { url: header.url }) : /* @__PURE__ */ jsx(AgentActivityIcon, { kind: header.iconKind }),
|
|
47
|
-
|
|
47
|
+
action: header.action,
|
|
48
|
+
detail: header.detail
|
|
48
49
|
}), /* @__PURE__ */ jsx(ActivityContent, { children: steps.map((step) => /* @__PURE__ */ jsx(ThinkChatActivityStep, {
|
|
49
|
-
|
|
50
|
+
description: step.description,
|
|
50
51
|
part: step.part,
|
|
51
52
|
toolRenderers
|
|
52
53
|
}, step.key)) })]
|
|
53
54
|
});
|
|
54
55
|
}
|
|
55
|
-
function ThinkChatActivityStep({
|
|
56
|
+
function ThinkChatActivityStep({ description, part, toolRenderers }) {
|
|
56
57
|
const icon = activityPartIcon(part);
|
|
58
|
+
const { action: text, detail } = description;
|
|
57
59
|
if (isToolUIPart(part)) {
|
|
58
60
|
const customPanel = toolRenderers?.[getToolName(part)]?.panel?.(part);
|
|
59
61
|
if (customPanel === null) return /* @__PURE__ */ jsx(ActivityItem, {
|
|
60
62
|
icon,
|
|
63
|
+
detail,
|
|
61
64
|
children: text
|
|
62
65
|
});
|
|
63
66
|
if (customPanel !== void 0) return /* @__PURE__ */ jsx(ActivityItemGroup, {
|
|
64
|
-
|
|
67
|
+
action: text,
|
|
68
|
+
detail,
|
|
65
69
|
icon,
|
|
66
70
|
children: customPanel
|
|
67
71
|
});
|
|
68
72
|
}
|
|
69
73
|
if (isReasoningUIPart(part) && part.text.trim()) return /* @__PURE__ */ jsx(ActivityItemGroup, {
|
|
70
|
-
|
|
74
|
+
action: text,
|
|
75
|
+
detail,
|
|
71
76
|
icon,
|
|
72
77
|
children: /* @__PURE__ */ jsx(ActivityText, { children: /* @__PURE__ */ jsx(MessageResponse, { children: part.text }) })
|
|
73
78
|
});
|
|
74
79
|
if (isWorkspaceToolPart(part) && part.type !== "tool-delete") return /* @__PURE__ */ jsx(ActivityItemGroup, {
|
|
75
|
-
|
|
80
|
+
action: text,
|
|
81
|
+
detail,
|
|
76
82
|
icon,
|
|
77
83
|
children: /* @__PURE__ */ jsx(ThinkChatWorkspacePanel, { part })
|
|
78
84
|
});
|
|
79
85
|
if (isSkillToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
|
|
80
|
-
|
|
86
|
+
action: text,
|
|
87
|
+
detail,
|
|
81
88
|
icon,
|
|
82
89
|
children: /* @__PURE__ */ jsx(ThinkChatSkillPanel, { part })
|
|
83
90
|
});
|
|
84
91
|
if (isSessionContextToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
|
|
85
|
-
|
|
92
|
+
action: text,
|
|
93
|
+
detail,
|
|
86
94
|
icon,
|
|
87
95
|
children: /* @__PURE__ */ jsx(ThinkChatSessionContextPanel, { part })
|
|
88
96
|
});
|
|
89
97
|
if (isFetchToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
|
|
90
|
-
|
|
98
|
+
action: text,
|
|
99
|
+
detail,
|
|
91
100
|
icon,
|
|
92
101
|
children: /* @__PURE__ */ jsx(ThinkChatFetchPanel, { part })
|
|
93
102
|
});
|
|
94
103
|
if (isBrowserToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
|
|
95
|
-
|
|
104
|
+
action: text,
|
|
105
|
+
detail,
|
|
96
106
|
icon,
|
|
97
107
|
children: /* @__PURE__ */ jsx(ThinkChatBrowserPanel, { part })
|
|
98
108
|
});
|
|
99
109
|
if (isExecuteToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
|
|
100
|
-
|
|
110
|
+
action: text,
|
|
111
|
+
detail,
|
|
101
112
|
icon,
|
|
102
113
|
children: /* @__PURE__ */ jsx(ThinkChatExecutePanel, { part })
|
|
103
114
|
});
|
|
104
115
|
return /* @__PURE__ */ jsx(ActivityItem, {
|
|
105
116
|
icon,
|
|
117
|
+
detail,
|
|
106
118
|
children: text
|
|
107
119
|
});
|
|
108
120
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as
|
|
2
|
-
export { ThinkChatActivityHeader, ThinkChatToolDescriber, ThinkChatToolDescribers, ThinkChatToolLifecycleSnapshot, activityPartIconKind, activityPartUrl, deriveThinkChatActivityHeader, deriveThinkChatToolLifecycleHeader, describeThinkChatActivityPart, summarizeActivitySteps };
|
|
1
|
+
import { a as ThinkChatToolLifecycleSnapshot, c as deriveThinkChatActivityHeader, d as summarizeActivitySteps, i as ThinkChatToolDescribers, l as deriveThinkChatToolLifecycleHeader, n as ThinkChatActivityHeader, o as activityPartIconKind, r as ThinkChatToolDescriber, s as activityPartUrl, t as ThinkChatActivityDescription, u as describeThinkChatActivityPart } from "../ThinkChatActivitySummary-kr5fE0wg.js";
|
|
2
|
+
export { ThinkChatActivityDescription, ThinkChatActivityHeader, ThinkChatToolDescriber, ThinkChatToolDescribers, ThinkChatToolLifecycleSnapshot, activityPartIconKind, activityPartUrl, deriveThinkChatActivityHeader, deriveThinkChatToolLifecycleHeader, describeThinkChatActivityPart, summarizeActivitySteps };
|