@mcp-b/react-components 0.2.2 → 0.4.0

package/dist/components/Reasoning.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as BrainIcon, l as ChevronRightIcon } from "../icons-Bf7JMKk-.js";
+import { a as BrainIcon, l as ChevronRightIcon } from "../icons-DQC4Zw5R.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cjk } from "@streamdown/cjk";

package/dist/components/Select.js

@@ -1,4 +1,4 @@
-import { i as ArrowUpIcon, o as CheckIcon, t as ArrowDownIcon } from "../icons-Bf7JMKk-.js";
+import { i as ArrowUpIcon, o as CheckIcon, t as ArrowDownIcon } from "../icons-DQC4Zw5R.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/components/Sources.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { b as LinkIcon, l as ChevronRightIcon } from "../icons-Bf7JMKk-.js";
+import { b as LinkIcon, l as ChevronRightIcon } from "../icons-DQC4Zw5R.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Sources.tsx

package/dist/components/Stepper.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { k as SpinnerIcon, o as CheckIcon } from "../icons-Bf7JMKk-.js";
+import { A as SpinnerIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Stepper.tsx

package/dist/components/Suggestion.d.ts

@@ -0,0 +1,43 @@
+import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
+import * as React from "react";
+
+//#region src/components/Suggestion.d.ts
+interface SuggestionsProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * A horizontally scrollable row of prompt suggestions, typically shown above
+ * the composer or in the empty state. Children are {@link Suggestion} chips.
+ *
+ * Ported from AI Elements' Suggestions. Sigvelo changes: design-system Button
+ * chips and token-based styling; scrollbars hidden, scroll by wheel/touch.
+ */
+declare function Suggestions({
+  className,
+  children,
+  ref,
+  ...props
+}: SuggestionsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface SuggestionProps extends Omit<ButtonProps, "onClick" | "className"> {
+  className?: string;
+  /** The suggestion text — the chip label and the `onClick` payload. */
+  suggestion: string;
+  /** Called with the suggestion text; typically feeds `sendMessage`. */
+  onClick?: (suggestion: string) => void;
+}
+/** One pill-shaped suggestion chip. Renders `suggestion` unless children are given. */
+declare function Suggestion({
+  className,
+  suggestion,
+  onClick,
+  variant,
+  color,
+  size,
+  children,
+  ref,
+  ...props
+}: SuggestionProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+//#endregion
+export { Suggestion, SuggestionProps, Suggestions, SuggestionsProps };

package/dist/components/Suggestion.js

@@ -0,0 +1,39 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Button } from "./Button.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Suggestion.tsx
+/**
+* A horizontally scrollable row of prompt suggestions, typically shown above
+* the composer or in the empty state. Children are {@link Suggestion} chips.
+*
+* Ported from AI Elements' Suggestions. Sigvelo changes: design-system Button
+* chips and token-based styling; scrollbars hidden, scroll by wheel/touch.
+*/
+function Suggestions({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("suggestions", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "suggestions__row",
+			children
+		})
+	});
+}
+/** One pill-shaped suggestion chip. Renders `suggestion` unless children are given. */
+function Suggestion({ className, suggestion, onClick, variant = "outline", color = "neutral", size = "sm", children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		type: "button",
+		variant,
+		color,
+		size,
+		className: cx("suggestions__chip", className),
+		onClick: () => onClick?.(suggestion),
+		...props,
+		children: children ?? suggestion
+	});
+}
+//#endregion
+export { Suggestion, Suggestions };

package/dist/components/Task.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { O as SearchIcon, h as FileIcon, l as ChevronRightIcon } from "../icons-Bf7JMKk-.js";
+import { h as FileIcon, k as SearchIcon, l as ChevronRightIcon } from "../icons-DQC4Zw5R.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Task.tsx

package/dist/components/Terminal.js

@@ -1,9 +1,9 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { P as XIcon, j as TerminalIcon } from "../icons-Bf7JMKk-.js";
+import { F as XIcon, M as TerminalIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { Badge } from "./Badge.js";
-import { t as CopyButton } from "../copy-button-DAPlB8Z0.js";
+import { t as CopyButton } from "../copy-button-Dd6DEhOm.js";
 import { ScrollArea } from "./ScrollArea.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/TestResults.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { P as XIcon, k as SpinnerIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-Bf7JMKk-.js";
+import { A as SpinnerIcon, F as XIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
 import { Badge } from "./Badge.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/ThinkChat.d.ts

@@ -0,0 +1,207 @@
+import { ExecutionApprovals } from "./PromptInput.js";
+import { AgentChatProps, AgentChatRenderPartContext } from "./AgentChat.js";
+import { BrowserLiveView, BrowserLiveViewProps } from "./BrowserLiveView.js";
+import { BrowserReplay, BrowserReplayProps } from "./BrowserReplay.js";
+import { FileInfo, UseWorkspaceOptions, WorkspaceExplorer, WorkspaceExplorerProps, WorkspaceFileState, WorkspaceInfo, WorkspaceSource, WorkspaceState, inferWorkspaceLanguage, useWorkspace } from "./WorkspaceExplorer.js";
+import * as React from "react";
+import { DynamicToolUIPart, ToolUIPart, UIMessage } from "ai";
+import { useAgentChat } from "@cloudflare/think/react";
+import { UseAgentOptions } from "agents/react";
+
+//#region src/components/ThinkChat.d.ts
+type ThinkChatValue = ReturnType<typeof useAgentChat<unknown, UIMessage>>;
+type ThinkChatPart = UIMessage["parts"][number];
+interface ThinkChatProviderProps {
+  /** The `useAgentChat` value from the `agents` SDK that descendants read. */
+  chat: ThinkChatValue;
+  children: React.ReactNode;
+}
+interface ThinkChatRootProps<State = unknown> {
+  /** Agent to connect to: a kebab-case class name, or full `useAgent` options. */
+  agent: string | UseAgentOptions<State>;
+  /** Instance name (e.g. a session or room id). Wins over `agent.name`. */
+  name?: string;
+  children: React.ReactNode;
+}
+interface ThinkChatMessagesProps extends ThinkChatActivityRendererOptions {
+  className?: string;
+  /** Disable the composer (e.g. while the agent is unreachable). */
+  disabled?: boolean;
+  /** Shown in place of the list while there are no messages. */
+  emptyState?: React.ReactNode;
+  /** Extra controls rendered inside the composer, next to the send button. */
+  composerTools?: React.ReactNode;
+  /** Composer placeholder text. */
+  placeholder?: string;
+  /** Rendered after each message (e.g. per-message actions). */
+  renderMessageAfter?: AgentChatProps["renderMessageAfter"];
+  /** Prompt suggestions shown above the composer; clicking one sends it. */
+  suggestions?: AgentChatProps["suggestions"];
+  /**
+   * Overrides the built-in connection notice (derived from the hook's
+   * `isRecovering`/`connectionError`) shown between transcript and composer.
+   */
+  notice?: AgentChatProps["notice"];
+  /** Full replacement for part rendering; wins over excludeTools/toolRenderers. */
+  renderPart?: AgentChatProps["renderPart"];
+  /**
+   * Surfaces paused codemode executions in the composer's approval UI —
+   * the same confirmation tool approvals use. See {@link ExecutionApprovals}.
+   */
+  executionApprovals?: ExecutionApprovals;
+  /**
+   * Shows a Context ring in the composer footer — how much of the model's
+   * window the conversation occupies, from `metadata.usage` on the newest
+   * message that reports it.
+   */
+  contextWindow?: AgentChatProps["contextWindow"];
+}
+/**
+ * Bespoke rendering for one tool inside the activity log. Both hooks fall
+ * through to the built-in families when they return `undefined`, so an
+ * override can adjust just the label or just the panel.
+ */
+interface ThinkChatToolRenderer {
+  /** One-line step label. `null` hides the step from the log. */
+  describe?: (part: ToolUIPart | DynamicToolUIPart) => string | null | undefined;
+  /** Expanded detail under the step. `null` keeps the step a plain row. */
+  panel?: (part: ToolUIPart | DynamicToolUIPart) => React.ReactNode;
+}
+type ThinkChatToolRenderers = Record<string, ThinkChatToolRenderer>;
+interface ThinkChatActivityRendererOptions {
+  /**
+   * Tool names to keep out of activity folding entirely — the run splits
+   * around them and they fall through to your own renderPart / the generic
+   * Tool card. For tools that should stay in the log with custom UI, use
+   * `toolRenderers` instead.
+   */
+  excludeTools?: readonly string[];
+  /** Per-tool label/panel overrides inside the activity log, keyed by tool name. */
+  toolRenderers?: ThinkChatToolRenderers;
+}
+/**
+ * Chat UI for Cloudflare Think agents. Provide a `useAgentChat` value (or let
+ * `ThinkChat.Root` create one) and `ThinkChat.Messages` renders the message
+ * stream with agent work folded into collapsed Activity blocks.
+ */
+declare function ThinkChatProvider({
+  chat,
+  children
+}: ThinkChatProviderProps): React.JSX.Element;
+/**
+ * Batteries-included root: connects to the named Think agent (upstream's
+ * `useAgent` + `useAgentChat`) and provides the live chat to everything
+ * inside. If the app already owns the chat hook, use `ThinkChat.Provider`.
+ *
+ * @example
+ * ```tsx
+ * <ThinkChat.Root agent="my-agent" name="session-1">
+ *   <ThinkChat.Messages />
+ * </ThinkChat.Root>
+ * ```
+ */
+declare function ThinkChatRoot<State = unknown>({
+  agent: agentOption,
+  name,
+  children
+}: ThinkChatRootProps<State>): React.JSX.Element;
+/**
+ * The full conversation surface — message list plus composer — with the
+ * activity renderer as the default `renderPart`: runs of reasoning/tool parts
+ * fold into one collapsed Activity block with derived labels and per-tool
+ * panels. Extend for app-specific tools with `toolRenderers` (label/panel
+ * inside the log) or `excludeTools` + your own `renderPart` (standalone
+ * card) — see README "App-specific tools" and the Custom Tool Panel story.
+ */
+declare function ThinkChatMessages({
+  renderPart,
+  excludeTools,
+  toolRenderers,
+  executionApprovals,
+  notice,
+  ...props
+}: ThinkChatMessagesProps): React.JSX.Element;
+/** Agent work (reasoning, tool calls, step boundaries) vs. content shown to the user. */
+declare function isThinkChatActivityPart(part: ThinkChatPart | undefined, excludeTools?: ReadonlySet<string>): boolean;
+/**
+ * One-line natural-language label for an activity part ("Ran vp test",
+ * "Fetched developers.cloudflare.com/agents/"); `null` for boundaries that
+ * aren't steps (step-start). Exported so a custom `renderPart` can reuse the
+ * built-in labels for tools it doesn't override.
+ */
+declare function describeThinkChatActivityPart(part: ThinkChatPart, toolRenderers?: ThinkChatToolRenderers): string | null;
+interface ThinkChatActivityProps {
+  /** Render with the log expanded. */
+  defaultOpen?: boolean;
+  parts: readonly ThinkChatPart[];
+  /** Defaults to deriving from part states (reasoning streaming, tool awaiting output). */
+  isStreaming?: boolean;
+  /** Per-tool label/panel overrides, keyed by tool name. */
+  toolRenderers?: ThinkChatToolRenderers;
+}
+/**
+ * One run of agent work as a collapsed Activity block: while streaming the
+ * label shimmers with the live step; settled, it becomes a short summary
+ * ("Thought, read 2 files and ran a command") over an expandable step log
+ * with per-tool panels. Normally reached through `ThinkChat.Messages`;
+ * exported for apps that lay out messages themselves.
+ */
+declare function ThinkChatActivity({
+  parts,
+  defaultOpen,
+  isStreaming,
+  toolRenderers
+}: ThinkChatActivityProps): React.JSX.Element | null;
+/**
+ * Builds a renderPart handler that folds every run of consecutive activity
+ * parts (reasoning + tool calls) into one collapsed Activity box. Everything
+ * is derived from the UIMessage stream: part order, tool states, reasoning
+ * state. Excluded tools split the run and return undefined so your own
+ * renderPart (or the generic Tool card) takes over for them.
+ */
+declare function createThinkChatActivityRenderer({
+  excludeTools,
+  toolRenderers
+}?: ThinkChatActivityRendererOptions): NonNullable<AgentChatProps["renderPart"]>;
+/** Default activity renderer — `createThinkChatActivityRenderer()` with no overrides. */
+declare const renderThinkChatActivityPart: (context: AgentChatRenderPartContext<UIMessage<unknown, import("ai").UIDataTypes, import("ai").UITools>>) => React.ReactNode | undefined;
+/**
+ * The ambient chat value from `ThinkChat.Root`/`Provider` — for custom tool
+ * panels, cards, or composer actions that need `messages`, `status`, or
+ * `sendMessage`. Throws outside a provider.
+ */
+declare function useThinkChat(): Omit<import("@ai-sdk/react").UseChatHelpers<UIMessage<unknown, import("ai").UIDataTypes, import("ai").UITools>>, "addToolOutput"> & {
+  clearHistory: () => void;
+  addToolOutput: (opts: {
+    toolCallId: string;
+    toolName?: string;
+    output?: unknown;
+    state?: "output-available" | "output-error";
+    errorText?: string;
+  }) => void;
+  isServerStreaming: boolean;
+  isStreaming: boolean;
+  isRecovering: boolean;
+  isToolContinuation: boolean;
+  connectionError: (Error & {
+    code: number;
+    reason: string;
+    wasClean: boolean;
+  }) | null;
+};
+/**
+ * Namespace entry point. `Root` + `Messages` is the standard surface;
+ * `Provider` + `useThinkChat` when the app owns the chat hook; `Activity`,
+ * `renderActivityPart`, and `createActivityRenderer` for custom layouts and
+ * app-specific tools.
+ */
+declare const ThinkChat: {
+  Provider: typeof ThinkChatProvider;
+  Root: typeof ThinkChatRoot;
+  Messages: typeof ThinkChatMessages;
+  Activity: typeof ThinkChatActivity;
+  renderActivityPart: (context: AgentChatRenderPartContext<UIMessage<unknown, import("ai").UIDataTypes, import("ai").UITools>>) => React.ReactNode | undefined;
+  createActivityRenderer: typeof createThinkChatActivityRenderer;
+};
+//#endregion
+export { BrowserLiveView, type BrowserLiveViewProps, BrowserReplay, type BrowserReplayProps, type ExecutionApprovals, type FileInfo, ThinkChat, ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatMessages, ThinkChatMessagesProps, ThinkChatProvider, ThinkChatProviderProps, ThinkChatRoot, ThinkChatRootProps, ThinkChatToolRenderer, ThinkChatToolRenderers, type UseWorkspaceOptions, WorkspaceExplorer, type WorkspaceExplorerProps, type WorkspaceFileState, type WorkspaceInfo, type WorkspaceSource, type WorkspaceState, createThinkChatActivityRenderer, describeThinkChatActivityPart, inferWorkspaceLanguage, isThinkChatActivityPart, renderThinkChatActivityPart, useThinkChat, useWorkspace };