@nextclaw/agent-chat-ui 0.4.4 → 0.4.6

package/dist/index.js

@@ -568,7 +568,7 @@ function ChatInputBarSkillPicker(props) {
 			children: [
 				/* @__PURE__ */ jsx(BrainCircuit, { className: "h-4 w-4" }),
 				/* @__PURE__ */ jsx("span", {
-					className: "hidden sm:inline",
+					className: "nextclaw-chat-skill-picker-label hidden sm:inline [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden",
 					children: picker.title
 				}),
 				selectedCount > 0 ? /* @__PURE__ */ jsx("span", {
@@ -695,7 +695,7 @@ function AccessoryIcon({ icon }) {
 	return icon === "paperclip" ? /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ToolbarIcon, { icon });
 }
 const TRIGGER_WIDTH_BY_KEY = {
-	model: "min-w-0 flex-1 sm:min-w-[220px] sm:flex-none",
+	model: "min-w-0 max-w-full flex-1 basis-[12rem] sm:max-w-[320px]",
 	"session-type": "shrink-0",
 	thinking: "shrink-0"
 };
@@ -720,17 +720,19 @@ 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-2 text-xs font-medium text-gray-600 shadow-none hover:bg-gray-100 focus:ring-0 sm:px-3 ${TRIGGER_WIDTH_BY_KEY[item.key] ?? ""}`,
+			"aria-label": item.selectedLabel ? `${item.placeholder}: ${item.selectedLabel}` : item.placeholder,
+			title: item.selectedLabel,
+			className: `nextclaw-chat-toolbar-select-trigger 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 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!basis-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!justify-center [@container_nextclaw-chat-input-bar_(max-width:440px)]:!max-w-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!min-w-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!px-0 ${TRIGGER_WIDTH_BY_KEY[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", {
-						className: "truncate text-xs font-semibold text-gray-700 sm:hidden",
+						className: "nextclaw-chat-toolbar-mobile-label truncate text-xs font-semibold text-gray-700 sm:hidden [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden",
 						children: mobileSelectedLabel
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "hidden truncate text-xs font-semibold text-gray-700 sm:inline",
+						className: "nextclaw-chat-toolbar-label hidden truncate text-xs font-semibold text-gray-700 sm:inline [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden",
 						children: item.selectedLabel
 					})
 				]
@@ -770,9 +772,9 @@ function ToolbarSelect({ item }) {
 function ChatInputBarToolbar({ actions, accessories, selects, skillPicker }) {
 	const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center justify-between gap-2 px-3 pb-3",
+		className: "flex flex-wrap items-end justify-between gap-2 px-3 pb-3",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden",
+			className: "flex min-w-[12rem] flex-1 flex-wrap items-center gap-1 overflow-hidden",
 			children: [
 				skillPicker ? /* @__PURE__ */ jsx(ChatInputBarSkillPicker, { picker: skillPicker }) : null,
 				selects.map((item) => /* @__PURE__ */ jsx(ToolbarSelect, { item }, item.key)),
@@ -1934,9 +1936,9 @@ const ChatInputBar = forwardRef(function ChatInputBar(props, ref) {
 		focusComposerAtEnd: () => composerRef.current?.focusComposerAtEnd()
 	}), []);
 	return /* @__PURE__ */ jsx("div", {
-		className: "border-t border-gray-200/80 bg-white p-4",
+		className: "border-t border-gray-200/80 bg-white px-3 py-3 sm:px-4 sm:py-4",
 		children: /* @__PURE__ */ jsx("div", {
-			className: "mx-auto w-full max-w-[min(1120px,100%)]",
+			className: "nextclaw-chat-input-bar-shell mx-auto w-full max-w-[min(1120px,100%)] [container:nextclaw-chat-input-bar/inline-size]",
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-card",
 				children: [