@nextclaw/agent-chat-ui 0.3.9 → 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() {
@@ -1700,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",
@@ -1740,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.9",
+  "version": "0.3.10",
   "private": false,
   "description": "Reusable Nextclaw agent chat UI primitives and default skin.",
   "type": "module",