@nextclaw/agent-chat-ui 0.3.8 → 0.3.10

package/dist/index.js

@@ -360,7 +360,7 @@ function ChatInputBarActions({ sendError, sendErrorDetailsLabel, isSending, canS
 	const sendErrorPreview = normalizedSendError ? buildSendErrorPreview(normalizedSendError) : "";
 	const resolvedSendErrorDetailsLabel = sendErrorDetailsLabel?.trim() || "Details";
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col items-end gap-1",
+		className: "flex shrink-0 flex-col items-end gap-1",
 		children: [normalizedSendError ? /* @__PURE__ */ jsxs("div", {
 			className: "flex max-w-[420px] items-start justify-end gap-2 text-right",
 			children: [/* @__PURE__ */ jsx("div", {
@@ -507,12 +507,16 @@ function ChatInputBarSkillPicker(props) {
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"aria-haspopup": "listbox",
-			className: "inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900",
+			"aria-label": picker.title,
+			className: "relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg px-0 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 sm:w-auto sm:gap-1.5 sm:px-3",
 			children: [
 				/* @__PURE__ */ jsx(BrainCircuit, { className: "h-4 w-4" }),
-				/* @__PURE__ */ jsx("span", { children: picker.title }),
+				/* @__PURE__ */ jsx("span", {
+					className: "hidden sm:inline",
+					children: picker.title
+				}),
 				selectedCount > 0 ? /* @__PURE__ */ jsx("span", {
-					className: "ml-0.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary/10 text-[10px] font-semibold text-primary",
+					className: "absolute -right-1 -top-1 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold leading-none text-white shadow-sm sm:static sm:ml-0.5 sm:bg-primary/10 sm:text-primary sm:shadow-none",
 					children: selectedCount
 				}) : null
 			]
@@ -637,9 +641,8 @@ function AccessoryIcon({ icon }) {
 	return /* @__PURE__ */ jsx(ToolbarIcon, { icon });
 }
 function resolveTriggerWidth(key) {
-	if (key === "model") return "min-w-[220px]";
-	if (key === "session-type") return "min-w-[140px]";
-	if (key === "thinking") return "min-w-[150px]";
+	if (key === "model") return "min-w-0 flex-1";
+	if (key === "session-type" || key === "thinking") return "shrink-0";
 	return "";
 }
 function resolveContentWidth(key) {
@@ -660,7 +663,7 @@ function ToolbarSelect({ item }) {
 		onValueChange: item.onValueChange,
 		disabled: item.disabled,
 		children: [/* @__PURE__ */ jsx(SelectTrigger, {
-			className: `h-8 w-auto rounded-lg border-0 bg-transparent px-3 text-xs font-medium text-gray-600 shadow-none hover:bg-gray-100 focus:ring-0 ${resolveTriggerWidth(item.key)}`,
+			className: `h-8 w-auto rounded-lg border-0 bg-transparent px-2 text-xs font-medium text-gray-600 shadow-none hover:bg-gray-100 focus:ring-0 sm:px-3 ${resolveTriggerWidth(item.key)}`,
 			children: item.selectedLabel ? /* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 items-center gap-2 text-left",
 				children: [/* @__PURE__ */ jsx(ToolbarIcon, { icon: item.icon }), /* @__PURE__ */ jsx("span", {
@@ -700,16 +703,16 @@ function ToolbarSelect({ item }) {
 		})]
 	});
 }
-function ChatInputBarToolbar(props) {
+function ChatInputBarToolbar({ actions, accessories, selects, skillPicker }) {
 	const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center justify-between px-3 pb-3",
+		className: "flex items-center justify-between gap-2 px-3 pb-3",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-1",
+			className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden",
 			children: [
-				props.skillPicker ? /* @__PURE__ */ jsx(ChatInputBarSkillPicker, { picker: props.skillPicker }) : null,
-				props.selects.map((item) => /* @__PURE__ */ jsx(ToolbarSelect, { item }, item.key)),
-				props.accessories?.map((item) => {
+				skillPicker ? /* @__PURE__ */ jsx(ChatInputBarSkillPicker, { picker: skillPicker }) : null,
+				selects.map((item) => /* @__PURE__ */ jsx(ToolbarSelect, { item }, item.key)),
+				accessories?.map((item) => {
 					const button = /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						className: `inline-flex items-center rounded-lg py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 disabled:cursor-not-allowed disabled:text-gray-400 ${item.iconOnly ? "h-8 w-8 justify-center px-0" : "gap-1.5 px-3"}`,
@@ -734,7 +737,7 @@ function ChatInputBarToolbar(props) {
 					})] }) }, item.key);
 				})
 			]
-		}), /* @__PURE__ */ jsx(ChatInputBarActions, { ...props.actions })]
+		}), /* @__PURE__ */ jsx(ChatInputBarActions, { ...actions })]
 	});
 }
 function createComposerNodeId() {
@@ -1216,8 +1219,8 @@ function readChatComposerSnapshotFromEditorState(editorState) {
 		return {
 			nodes,
 			selection: {
-				start: getOffsetFromPoint(selection.anchor),
-				end: getOffsetFromPoint(selection.focus)
+				start: Math.min(getOffsetFromPoint(selection.anchor), getOffsetFromPoint(selection.focus)),
+				end: Math.max(getOffsetFromPoint(selection.anchor), getOffsetFromPoint(selection.focus))
 			}
 		};
 	});
@@ -1275,9 +1278,10 @@ function getDocumentLength(nodes) {
 function insertToken(params) {
 	const { label, nodes, selection, tokenKey, tokenKind, trigger } = params;
 	const documentLength = getDocumentLength(nodes);
-	const replaceStart = trigger?.start ?? selection?.start ?? documentLength;
+	const [selectionStart, selectionEnd] = selection ? [Math.min(selection.start, selection.end), Math.max(selection.start, selection.end)] : [documentLength, documentLength];
+	const replaceStart = trigger?.start ?? selectionStart;
 	return {
-		nodes: replaceChatComposerRange(nodes, replaceStart, trigger?.end ?? selection?.end ?? replaceStart, [createChatComposerTokenNode({
+		nodes: replaceChatComposerRange(nodes, replaceStart, trigger?.end ?? selectionEnd, [createChatComposerTokenNode({
 			label,
 			tokenKey,
 			tokenKind
@@ -1293,13 +1297,11 @@ function getChatComposerNodesSignature(nodes) {
 }
 function replaceChatComposerSelectionWithText(params) {
 	const { nodes, selection, text } = params;
-	const currentSelection = selection ?? {
-		start: getDocumentLength(nodes),
-		end: getDocumentLength(nodes)
-	};
-	const nextOffset = currentSelection.start + text.length;
+	const documentLength = getDocumentLength(nodes);
+	const [selectionStart, selectionEnd] = selection ? [Math.min(selection.start, selection.end), Math.max(selection.start, selection.end)] : [documentLength, documentLength];
+	const nextOffset = selectionStart + text.length;
 	return {
-		nodes: replaceChatComposerRange(nodes, currentSelection.start, currentSelection.end, [createChatComposerTextNode(text)]),
+		nodes: replaceChatComposerRange(nodes, selectionStart, selectionEnd, [createChatComposerTextNode(text)]),
 		selection: {
 			start: nextOffset,
 			end: nextOffset
@@ -1355,17 +1357,17 @@ function syncSelectedSkillsIntoChatComposer(params) {
 function deleteChatComposerContent(params) {
 	const { direction, nodes, selection: currentSelection } = params;
 	const documentLength = getDocumentLength(nodes);
-	const selection = currentSelection ?? {
-		start: documentLength,
-		end: documentLength
-	};
-	let rangeStart = selection.start;
-	let rangeEnd = selection.end;
-	if (selection.start === selection.end) if (direction === "backward" && selection.start > 0) rangeStart = selection.start - 1;
-	else if (direction === "forward" && selection.end < documentLength) rangeEnd = selection.end + 1;
+	const [selectionStart, selectionEnd] = currentSelection ? [Math.min(currentSelection.start, currentSelection.end), Math.max(currentSelection.start, currentSelection.end)] : [documentLength, documentLength];
+	let rangeStart = selectionStart;
+	let rangeEnd = selectionEnd;
+	if (rangeStart === rangeEnd) if (direction === "backward" && rangeStart > 0) rangeStart -= 1;
+	else if (direction === "forward" && rangeEnd < documentLength) rangeEnd += 1;
 	else return {
 		nodes: normalizeChatComposerNodes(nodes),
-		selection
+		selection: {
+			start: rangeStart,
+			end: rangeEnd
+		}
 	};
 	return {
 		nodes: replaceChatComposerRange(nodes, rangeStart, rangeEnd, []),
@@ -1701,9 +1703,9 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 		}), [props.disabled, props.nodes]),
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				className: "px-4 py-2.5",
+				className: "px-3 py-2 sm:px-4 sm:py-2.5",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "min-h-[60px]",
+					className: "min-h-11 sm:min-h-[60px]",
 					children: /* @__PURE__ */ jsx(PlainTextPlugin, {
 						contentEditable: /* @__PURE__ */ jsx(ContentEditable, {
 							className: "min-h-7 max-h-[188px] w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent py-0.5 text-sm leading-6 text-gray-800 outline-none",
@@ -1741,7 +1743,7 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 							}
 						}),
 						placeholder: /* @__PURE__ */ jsx("div", {
-							className: "pointer-events-none absolute left-4 top-2.5 select-none text-sm leading-6 text-gray-400",
+							className: "pointer-events-none absolute left-3 top-2 select-none text-sm leading-6 text-gray-400 sm:left-4 sm:top-2.5",
 							children: props.placeholder
 						}),
 						ErrorBoundary: LexicalErrorBoundary

package/package.json

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