@nextclaw/agent-chat-ui 0.3.6 → 0.3.7

package/dist/index.d.ts

@@ -102,6 +102,7 @@ type ChatSkillPickerProps = {
 };
 type ChatInputBarActionsProps = {
   sendError?: string | null;
+  sendErrorDetailsLabel?: string;
   isSending: boolean;
   canStopGeneration: boolean;
   sendDisabled: boolean;

package/dist/index.js

@@ -341,6 +341,12 @@ const ChatButton = React.forwardRef(({ className, variant, size, ...props }, ref
 ChatButton.displayName = "ChatButton";
 //#endregion
 //#region src/components/chat/ui/chat-input-bar/chat-input-bar-actions.tsx
+const SEND_ERROR_PREVIEW_MAX_CHARS = 120;
+function buildSendErrorPreview(value) {
+	const compact = value.replace(/\s+/g, " ").trim();
+	if (compact.length <= SEND_ERROR_PREVIEW_MAX_CHARS) return compact;
+	return `${compact.slice(0, SEND_ERROR_PREVIEW_MAX_CHARS - 1)}…`;
+}
 function StopIcon() {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
@@ -348,22 +354,49 @@ function StopIcon() {
 		className: "block h-3 w-3 rounded-[2px] bg-gray-700 shadow-[inset_0_0_0_1px_rgba(17,24,39,0.06)]"
 	});
 }
-function ChatInputBarActions(props) {
-	const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
+function ChatInputBarActions({ sendError, sendErrorDetailsLabel, isSending, canStopGeneration, sendDisabled, stopDisabled, stopHint, sendButtonLabel, stopButtonLabel, onSend, onStop }) {
+	const { Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
+	const normalizedSendError = sendError?.trim() ?? "";
+	const sendErrorPreview = normalizedSendError ? buildSendErrorPreview(normalizedSendError) : "";
+	const resolvedSendErrorDetailsLabel = sendErrorDetailsLabel?.trim() || "Details";
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col items-end gap-1",
-		children: [props.sendError?.trim() ? /* @__PURE__ */ jsx("div", {
-			className: "max-w-[420px] text-right text-[11px] text-red-600",
-			children: props.sendError
+		children: [normalizedSendError ? /* @__PURE__ */ jsxs("div", {
+			className: "flex max-w-[420px] items-start justify-end gap-2 text-right",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1 text-[11px] text-red-600",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "block truncate",
+					title: normalizedSendError,
+					children: sendErrorPreview
+				})
+			}), /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "shrink-0 rounded-full border border-red-200/80 bg-red-50 px-2 py-0.5 text-[10px] font-semibold text-red-700 transition-colors hover:bg-red-100",
+					children: resolvedSendErrorDetailsLabel
+				})
+			}), /* @__PURE__ */ jsxs(PopoverContent, {
+				align: "end",
+				className: "w-[min(32rem,calc(100vw-1.5rem))] border-red-100/80 p-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "border-b border-red-100 bg-red-50/80 px-4 py-2 text-xs font-semibold text-red-700",
+					children: resolvedSendErrorDetailsLabel
+				}), /* @__PURE__ */ jsx("pre", {
+					className: "max-h-80 overflow-auto whitespace-pre-wrap break-words px-4 py-3 text-xs leading-relaxed text-red-700",
+					children: normalizedSendError
+				})]
+			})] })]
 		}) : null, /* @__PURE__ */ jsx("div", {
 			className: "flex items-center gap-2",
-			children: props.isSending ? props.canStopGeneration ? /* @__PURE__ */ jsx(ChatButton, {
+			children: isSending ? canStopGeneration ? /* @__PURE__ */ jsx(ChatButton, {
 				size: "icon",
 				variant: "outline",
 				className: "h-8 w-8 rounded-full",
-				"aria-label": props.stopButtonLabel,
-				onClick: () => void props.onStop(),
-				disabled: props.stopDisabled,
+				"aria-label": stopButtonLabel,
+				onClick: () => void onStop(),
+				disabled: stopDisabled,
 				children: /* @__PURE__ */ jsx(StopIcon, {})
 			}) : /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 				asChild: true,
@@ -371,7 +404,7 @@ function ChatInputBarActions(props) {
 					size: "icon",
 					variant: "outline",
 					className: "h-8 w-8 rounded-full",
-					"aria-label": props.stopButtonLabel,
+					"aria-label": stopButtonLabel,
 					disabled: true,
 					children: /* @__PURE__ */ jsx(StopIcon, {})
 				}) })
@@ -379,14 +412,14 @@ function ChatInputBarActions(props) {
 				side: "top",
 				children: /* @__PURE__ */ jsx("p", {
 					className: "text-xs",
-					children: props.stopHint
+					children: stopHint
 				})
 			})] }) }) : /* @__PURE__ */ jsx(ChatButton, {
 				size: "icon",
 				className: "h-8 w-8 rounded-full",
-				"aria-label": props.sendButtonLabel,
-				onClick: () => void props.onSend(),
-				disabled: props.sendDisabled,
+				"aria-label": sendButtonLabel,
+				onClick: () => void onSend(),
+				disabled: sendDisabled,
 				children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-5 w-5" })
 			})
 		})]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/agent-chat-ui",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "private": false,
   "description": "Reusable Nextclaw agent chat UI primitives and default skin.",
   "type": "module",