@mcp-b/react-components 0.31.2 → 0.31.3

package/dist/{ThinkChat-ldbrNiAx.js → ThinkChat-BIEryLy0.js}

@@ -40,6 +40,13 @@ function resolveThinkApprovalProps(overrides, ambient) {
 //#endregion
 //#region src/components/agents-sdk/ThinkChat.tsx
 const EMPTY_PENDING_APPROVALS = [];
+const STREAMED_TEXT_ANIMATION = {
+	animation: "fadeIn",
+	duration: 150,
+	easing: "cubic-bezier(0.37, 0.55, 0.86, 0.88)",
+	sep: "word",
+	stagger: 0
+};
 /**
 * Acknowledgement copy for a landed compaction. Both numbers are Session's own
 * estimates, so the text is hedged ("about", rounded to thousands) and falls
@@ -224,11 +231,16 @@ function ThinkChatMessages({ composerHeader, draft, renderPart, excludeTools, re
 		renderAgentToolRunLink,
 		toolRenderers
 	]);
+	const streamingMessageId = (chat ? chat.isStreaming : draft?.status === "streaming") ? (chat?.messages ?? draft?.messages)?.at(-1)?.id : void 0;
 	const defaultRenderPart = React.useCallback((context) => {
 		const activity = activityRenderPart(context);
 		if (activity !== void 0) return activity;
-		return isTextUIPart(context.part) && context.part.text ? /* @__PURE__ */ jsx(WorkspaceMessageResponse, { children: context.part.text }) : void 0;
-	}, [activityRenderPart]);
+		return isTextUIPart(context.part) && context.part.text ? /* @__PURE__ */ jsx(WorkspaceMessageResponse, {
+			animated: STREAMED_TEXT_ANIMATION,
+			isAnimating: context.message.role === "assistant" && context.message.id === streamingMessageId && context.part.state === "streaming",
+			children: context.part.text
+		}) : void 0;
+	}, [activityRenderPart, streamingMessageId]);
 	const resolvedRenderPart = React.useMemo(() => renderPart ? (context) => {
 		const renderBuiltIn = () => {
 			const builtIn = defaultRenderPart(context);

package/dist/components/agents-sdk/ThinkChat.js

@@ -6,7 +6,7 @@ import { isThinkChatActivityPart } from "./ThinkChatToolParts.js";
 import { describeThinkChatActivityPart } from "./ThinkChatActivitySummary.js";
 import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./ThinkChatActivity.js";
 import { ThinkRecoveryNotice } from "./ThinkRecoveryNotice.js";
-import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-ldbrNiAx.js";
+import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-BIEryLy0.js";
 import { useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryKey, workspaceDirectoryQueryOptions, workspaceDirectoryQueryPrefix, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions } from "./Workspace.js";
 import { WorkspaceExplorer } from "./WorkspaceExplorer.js";
 export { AgentToolRunsProvider, BrowserLiveView, BrowserReplay, ThinkChat, ThinkChatActivity, ThinkChatMessages, ThinkChatProvider, ThinkChatRoot, ThinkRecoveryNotice, WorkspaceExplorer, createThinkChatActivityRenderer, describeThinkChatActivityPart, inferWorkspaceLanguage, isThinkChatActivityPart, renderThinkChatActivityPart, thinkPendingExecutionApprovalsQueryOptions, useOptionalAgentToolRuns, useThinkChat, useThinkPendingExecutionApprovals, useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryKey, workspaceDirectoryQueryOptions, workspaceDirectoryQueryPrefix, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions };

package/dist/components/agents-sdk/ThinkFullApp.js

@@ -4,7 +4,7 @@ import { Button } from "../foundations/Button.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
 import { McpPluginCatalog } from "./McpPluginCatalog.js";
-import { c as resolveThinkApprovalProps, l as useSourceScopedAgentToolEvents, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-ldbrNiAx.js";
+import { c as resolveThinkApprovalProps, l as useSourceScopedAgentToolEvents, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-BIEryLy0.js";
 import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../../WorkspaceLink-DZeLe_jN.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { useWorkspace } from "./Workspace.js";

package/dist/components/nanites/AgentToolDetail.js

@@ -3,7 +3,7 @@ import { r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
 import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
 import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
-import { t as ThinkChat } from "../../ThinkChat-ldbrNiAx.js";
+import { t as ThinkChat } from "../../ThinkChat-BIEryLy0.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
 import * as React from "react";

package/dist/styles/approval.css

@@ -164,8 +164,17 @@
   font-size: var(--sigvelo-text-xs);
 }
 
-@media (pointer: coarse) {
+@media (any-pointer: coarse) {
+  .approval .button {
+    --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
+  }
+
   .approval__option {
-    min-block-size: var(--sigvelo-control-height-lg);
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+
+  .approval__reason {
+    font-size: var(--sigvelo-text-base);
+    line-height: var(--sigvelo-text-base-leading);
   }
 }

package/dist/styles/context.css

@@ -113,6 +113,13 @@
   font-variant-numeric: tabular-nums;
 }
 
+@media (any-pointer: coarse) {
+  .context__trigger {
+    min-inline-size: var(--sigvelo-control-height-xl);
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+}
+
 .context__footer {
   display: flex;
   flex-direction: column;

package/dist/styles/prompt-input.css

@@ -5,6 +5,9 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
   gap: var(--sigvelo-density-compact-control-gap);
   padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-density-compact-control-padding-inline);
@@ -186,12 +189,13 @@
   flex-wrap: wrap;
   gap: var(--sigvelo-spacing-1);
   inline-size: 100%;
+  min-inline-size: 0;
   min-block-size: var(--sigvelo-spacing-8);
 }
 
 .prompt-input__textarea {
   flex: 1;
-  min-inline-size: 8rem;
+  min-inline-size: 0;
   inline-size: 100%;
   padding: 0;
   border: none;
@@ -369,6 +373,11 @@
 }
 
 @container prompt-input (inline-size <= 36rem) {
+  .prompt-input__textarea {
+    font-size: var(--sigvelo-text-base);
+    line-height: var(--sigvelo-text-base-leading);
+  }
+
   .prompt-input__footer {
     gap: var(--sigvelo-spacing-1);
   }
@@ -410,6 +419,19 @@
 }
 
 @container prompt-input (inline-size <= 22rem) {
+  .prompt-input__footer {
+    flex-wrap: wrap;
+  }
+
+  .prompt-input__tools {
+    flex: 1 1 100%;
+    flex-wrap: wrap;
+  }
+
+  .prompt-input__footer-end {
+    margin-inline-start: auto;
+  }
+
   .prompt-input__context-trigger {
     inline-size: var(--sigvelo-control-height-xs);
     padding-inline: 0;
@@ -647,6 +669,33 @@
   margin-inline-start: auto;
 }
 
+@media (any-pointer: coarse) {
+  .prompt-input__textarea {
+    font-size: var(--sigvelo-text-base);
+    line-height: var(--sigvelo-text-base-leading);
+  }
+
+  .prompt-input__button,
+  .prompt-input__footer .button,
+  .prompt-input__attachment-remove {
+    --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
+  }
+
+  .prompt-input__button {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+
+  .prompt-input__button[data-responsive-label],
+  .prompt-input__permissions-trigger,
+  .prompt-input__context-trigger {
+    min-inline-size: var(--sigvelo-control-height-xl);
+  }
+
+  .prompt-input__attachment[data-image] .prompt-input__attachment-remove {
+    position: static;
+  }
+}
+
 @media (forced-colors: active) {
   .prompt-input {
     border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;

package/dist/styles/think-full-app.css

@@ -178,6 +178,10 @@ body.is-resizing-side-panel .think-full-app__view-scope {
 }
 
 @container think-full-app (inline-size <= 56rem) {
+  .think-full-app__view-scope {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
   /* A side panel or phone has no desktop chrome around the app, so the
      floating application plane reads as a card in a frame. Flatten to one
      edge-to-edge surface, app bar included — the frame never shows. */
@@ -283,7 +287,10 @@ body.is-resizing-side-panel .think-full-app__view-scope {
 
   /* The base composer scrim already dissolves the transcript above the box. */
   .think-full-app .agent-chat__composer {
-    padding: var(--sigvelo-spacing-2);
+    padding-block: var(--sigvelo-spacing-2)
+      max(var(--sigvelo-spacing-2), env(safe-area-inset-bottom, 0px));
+    padding-inline: max(var(--sigvelo-spacing-2), env(safe-area-inset-left, 0px))
+      max(var(--sigvelo-spacing-2), env(safe-area-inset-right, 0px));
   }
 
   .think-full-app .prompt-input {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.31.2",
+  "version": "0.31.3",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -58,7 +58,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.31.2"
+    "@mcp-b/design-tokens": "0.31.3"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.230",