@nextclaw/agent-chat-ui 0.3.12 → 0.3.13-beta.0

package/dist/index.d.ts

@@ -110,9 +110,20 @@ type ChatInputBarActionsProps = {
   stopHint: string;
   sendButtonLabel: string;
   stopButtonLabel: string;
+  contextWindow?: ChatContextWindowIndicator | null;
   onSend: () => Promise<void> | void;
   onStop: () => Promise<void> | void;
 };
+type ChatContextWindowIndicator = {
+  label: string;
+  percentLabel: string;
+  ratio: number;
+  tone: "neutral" | "warning" | "danger";
+  details: Array<{
+    label: string;
+    value: string;
+  }>;
+};
 type ChatInputBarToolbarProps = {
   selects: ChatToolbarSelect[];
   accessories?: ChatToolbarAccessory[];
@@ -397,4 +408,4 @@ declare function resolveChatComposerSlashTrigger(nodes: ChatComposerNode[], sele
   end: number;
 } | null;
 //#endregion
-export { type ChatComposerNode, type ChatComposerSelection, type ChatComposerTextNode, type ChatComposerTokenKind, type ChatComposerTokenNode, type ChatFileOpenActionViewModel, type ChatFileOperationBlockViewModel, type ChatFileOperationLineViewModel, type ChatInlineContentSegmentViewModel, type ChatInlineHint, type ChatInlineTokenViewModel, ChatInputBar, type ChatInputBarActionsProps, type ChatInputBarHandle, type ChatInputBarProps, type ChatInputBarToolbarProps, ChatMessageList, type ChatMessageListProps, ChatMessageMarkdown, type ChatMessagePartViewModel, type ChatMessageRole, type ChatMessageTexts, type ChatMessageViewModel, type ChatSelectedItem, type ChatSkillPickerOption, type ChatSkillPickerProps, type ChatSlashItem, type ChatSlashMenuProps, type ChatTexts, type ChatToolActionViewModel, type ChatToolPartViewModel, type ChatToolbarAccessory, type ChatToolbarAccessoryIcon, type ChatToolbarIcon, type ChatToolbarSelect, type ChatToolbarSelectGroup, type ChatToolbarSelectOption, FileOperationCodeSurface, FileOperationLinesGrid, copyText, createChatComposerNodesFromText, createChatComposerTextNode, createChatComposerTokenNode, createEmptyChatComposerNodes, extractChatComposerTokenKeys, normalizeChatComposerNodes, removeChatComposerTokenNodes, replaceChatComposerRange, resolveChatComposerSlashTrigger, serializeChatComposerDocument, serializeChatComposerPlainText, useActiveItemScroll, useCopyFeedback, useElementWidth, useStickyBottomScroll };
+export { type ChatComposerNode, type ChatComposerSelection, type ChatComposerTextNode, type ChatComposerTokenKind, type ChatComposerTokenNode, type ChatContextWindowIndicator, type ChatFileOpenActionViewModel, type ChatFileOperationBlockViewModel, type ChatFileOperationLineViewModel, type ChatInlineContentSegmentViewModel, type ChatInlineHint, type ChatInlineTokenViewModel, ChatInputBar, type ChatInputBarActionsProps, type ChatInputBarHandle, type ChatInputBarProps, type ChatInputBarToolbarProps, ChatMessageList, type ChatMessageListProps, ChatMessageMarkdown, type ChatMessagePartViewModel, type ChatMessageRole, type ChatMessageTexts, type ChatMessageViewModel, type ChatSelectedItem, type ChatSkillPickerOption, type ChatSkillPickerProps, type ChatSlashItem, type ChatSlashMenuProps, type ChatTexts, type ChatToolActionViewModel, type ChatToolPartViewModel, type ChatToolbarAccessory, type ChatToolbarAccessoryIcon, type ChatToolbarIcon, type ChatToolbarSelect, type ChatToolbarSelectGroup, type ChatToolbarSelectOption, FileOperationCodeSurface, FileOperationLinesGrid, copyText, createChatComposerNodesFromText, createChatComposerTextNode, createChatComposerTokenNode, createEmptyChatComposerNodes, extractChatComposerTokenKeys, normalizeChatComposerNodes, removeChatComposerTokenNodes, replaceChatComposerRange, resolveChatComposerSlashTrigger, serializeChatComposerDocument, serializeChatComposerPlainText, useActiveItemScroll, useCopyFeedback, useElementWidth, useStickyBottomScroll };

package/dist/index.js

@@ -367,7 +367,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({ sendError, sendErrorDetailsLabel, isSending, canStopGeneration, sendDisabled, stopDisabled, stopHint, sendButtonLabel, stopButtonLabel, onSend, onStop }) {
+function ContextWindowIndicator({ contextWindow }) {
+	const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
+	const clampedRatio = Math.max(0, Math.min(1, contextWindow.ratio));
+	const angle = Math.round(clampedRatio * 360);
+	const ringColor = "#9ca3af";
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		delayDuration: 0,
+		children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700",
+				"aria-label": contextWindow.label,
+				title: contextWindow.label,
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "absolute inset-[7px] rounded-full",
+					style: { background: `conic-gradient(${ringColor} ${angle}deg, #e5e7eb 0deg)` }
+				}), /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "absolute inset-[10px] rounded-full bg-white"
+				})]
+			})
+		}), /* @__PURE__ */ jsx(TooltipContent, {
+			side: "top",
+			className: "max-w-[18rem]",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1.5 text-xs",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-5 font-semibold text-gray-800",
+					children: [/* @__PURE__ */ jsx("span", { children: contextWindow.label }), /* @__PURE__ */ jsx("span", { children: contextWindow.percentLabel })]
+				}), contextWindow.details.map((detail) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-5 text-gray-600",
+					children: [/* @__PURE__ */ jsx("span", { children: detail.label }), /* @__PURE__ */ jsx("span", {
+						className: "font-medium text-gray-800",
+						children: detail.value
+					})]
+				}, detail.label))]
+			})
+		})] })
+	});
+}
+function ChatInputBarActions({ sendError, sendErrorDetailsLabel, isSending, canStopGeneration, sendDisabled, stopDisabled, stopHint, sendButtonLabel, stopButtonLabel, contextWindow, onSend, onStop }) {
 	const { Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
 	const normalizedSendError = sendError?.trim() ?? "";
 	const sendErrorPreview = normalizedSendError ? buildSendErrorPreview(normalizedSendError) : "";
@@ -401,9 +443,9 @@ function ChatInputBarActions({ sendError, sendErrorDetailsLabel, isSending, canS
 					children: normalizedSendError
 				})]
 			})] })]
-		}) : null, /* @__PURE__ */ jsx("div", {
+		}) : null, /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
-			children: isSending ? canStopGeneration ? /* @__PURE__ */ jsx(ChatButton, {
+			children: [contextWindow ? /* @__PURE__ */ jsx(ContextWindowIndicator, { contextWindow }) : null, isSending ? canStopGeneration ? /* @__PURE__ */ jsx(ChatButton, {
 				size: "icon",
 				variant: "outline",
 				className: "h-8 w-8 rounded-full",
@@ -434,7 +476,7 @@ function ChatInputBarActions({ sendError, sendErrorDetailsLabel, isSending, canS
 				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.12",
+  "version": "0.3.13-beta.0",
   "private": false,
   "description": "Reusable Nextclaw agent chat UI primitives and default skin.",
   "type": "module",