@nextclaw/agent-chat-ui 0.3.16 → 0.3.18

package/dist/index.d.ts

@@ -146,6 +146,7 @@ type ChatSlashMenuProps = {
   texts: Pick<ChatTexts, "slashLoadingLabel" | "slashSectionLabel" | "slashEmptyLabel" | "slashHintLabel" | "slashSkillHintLabel">;
   onSelectItem: (item: ChatSlashItem) => void;
   onOpenChange: (open: boolean) => void;
+  onDetailsPointerDown?: () => void;
   onSetActiveIndex: (index: number) => void;
 };
 type ChatInputBarProps = {
@@ -306,6 +307,7 @@ type ChatInputBarHandle = {
     label: string;
   }>) => void;
   focusComposer: () => void;
+  focusComposerAtEnd: () => void;
 };
 declare const ChatInputBar: _$react.ForwardRefExoticComponent<ChatInputBarProps & _$react.RefAttributes<ChatInputBarHandle>>;
 //#endregion

package/dist/index.js

@@ -208,7 +208,7 @@ function ChatSlashMenu(props) {
 	const { Popover, PopoverAnchor, PopoverContent } = ChatUiPrimitives;
 	const { elementRef: anchorRef, width: panelWidth } = useElementWidth();
 	const listRef = useRef(null);
-	const { isOpen, isLoading, items, activeIndex, activeItem, texts, onSelectItem, onOpenChange, onSetActiveIndex } = props;
+	const { isOpen, isLoading, items, activeIndex, activeItem, texts, onSelectItem, onOpenChange, onDetailsPointerDown, onSetActiveIndex } = props;
 	const resolvedWidth = useMemo(() => {
 		if (!panelWidth) return;
 		return Math.min(panelWidth > SLASH_PANEL_DESKTOP_MIN_WIDTH ? panelWidth * SLASH_PANEL_DESKTOP_SHRINK_RATIO : panelWidth, SLASH_PANEL_MAX_WIDTH);
@@ -276,6 +276,7 @@ function ChatSlashMenu(props) {
 					})] })
 				}), /* @__PURE__ */ jsx("div", {
 					className: "min-w-0 p-2.5",
+					onPointerDown: onDetailsPointerDown,
 					children: activeItem ? /* @__PURE__ */ jsxs("div", {
 						className: "space-y-3",
 						children: [
@@ -630,13 +631,11 @@ function ChatInputBarSkillPicker(props) {
 							visibleIndex += 1;
 							const isSelected = selectedSet.has(option.key);
 							const isActive = index === activeIndex;
-							return /* @__PURE__ */ jsxs("button", {
-								type: "button",
+							return /* @__PURE__ */ jsxs("div", {
 								id: `${listId}-option-${index}`,
 								role: "option",
 								"aria-selected": isSelected,
 								"data-skill-index": index,
-								onClick: () => onToggleOption(option.key),
 								onMouseEnter: () => setActiveIndex(index),
 								className: `flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors ${isActive ? "bg-gray-50" : "hover:bg-gray-50"}`,
 								children: [
@@ -645,7 +644,7 @@ function ChatInputBarSkillPicker(props) {
 										children: /* @__PURE__ */ jsx(Puzzle, { className: "h-4 w-4" })
 									}),
 									/* @__PURE__ */ jsxs("div", {
-										className: "min-w-0 flex-1",
+										className: "min-w-0 flex-1 select-text",
 										children: [/* @__PURE__ */ jsxs("div", {
 											className: "flex items-center gap-1.5",
 											children: [/* @__PURE__ */ jsx("span", {
@@ -662,7 +661,10 @@ function ChatInputBarSkillPicker(props) {
 									}),
 									/* @__PURE__ */ jsx("div", {
 										className: "ml-3 shrink-0",
-										children: /* @__PURE__ */ jsx("span", {
+										children: /* @__PURE__ */ jsx("button", {
+											type: "button",
+											"aria-label": `${isSelected ? "Remove" : "Add"} ${option.label}`,
+											onClick: () => onToggleOption(option.key),
 											className: isSelected ? "inline-flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white" : "inline-flex h-5 w-5 items-center justify-center rounded-full border border-gray-300 bg-white",
 											children: isSelected ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : null
 										})
@@ -1510,6 +1512,9 @@ var LexicalComposerHandleOwner = class {
 		this.focusComposer = () => {
 			this.params.focusComposer();
 		};
+		this.focusComposerAtEnd = () => {
+			this.params.focusComposerAtEnd();
+		};
 		this.syncSelectedSkills = (nextKeys, options) => {
 			this.params.publishSnapshot(syncSelectedSkillsIntoChatComposer({
 				nextKeys,
@@ -1735,10 +1740,23 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 	const focusComposer = () => {
 		const editor = editorRef.current;
 		if (!editor) return;
+		editor.getRootElement()?.focus({ preventScroll: true });
 		const targetSelection = selectionRef.current;
-		editor.focus(() => {
-			if (targetSelection) syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
-		});
+		if (targetSelection) syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
+		editor.focus();
+	};
+	const focusComposerAtEnd = () => {
+		const editor = editorRef.current;
+		if (!editor) return;
+		const end = readChatComposerSnapshotFromEditorState(editor.getEditorState()).nodes.reduce((cursor, node) => cursor + (node.type === "text" ? node.text.length : 1), 0);
+		const targetSelection = {
+			start: end,
+			end
+		};
+		selectionRef.current = targetSelection;
+		editor.getRootElement()?.focus({ preventScroll: true });
+		syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
+		editor.focus();
 	};
 	const readComposerSnapshot = () => ({
 		nodes: readCurrentNodes(),
@@ -1746,6 +1764,7 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 	});
 	useImperativeHandle(ref, () => createLexicalComposerHandle({
 		focusComposer,
+		focusComposerAtEnd,
 		onSlashItemSelect: props.onSlashItemSelect,
 		optionsReader: readComposerSnapshot,
 		publishSnapshot
@@ -1879,21 +1898,19 @@ function InputBarHint({ hint }) {
 }
 const ChatInputBar = forwardRef(function ChatInputBar(props, ref) {
 	const composerRef = useRef(null);
-	const [slashQuery, setSlashQuery] = useState(null);
+	const isSlashMenuInteractionRef = useRef(false);
 	const [activeSlashIndex, setActiveSlashIndex] = useState(0);
 	const [activeSlashTriggerStart, setActiveSlashTriggerStart] = useState(null);
 	const [dismissedSlashTriggerStart, setDismissedSlashTriggerStart] = useState(null);
 	const isSlashPanelOpen = activeSlashTriggerStart !== null && dismissedSlashTriggerStart !== activeSlashTriggerStart;
 	const activeSlashItem = props.slashMenu.items[activeSlashIndex] ?? null;
+	const dismissSlashTrigger = () => activeSlashTriggerStart !== null && !isSlashMenuInteractionRef.current ? setDismissedSlashTriggerStart(activeSlashTriggerStart) : void 0;
 	useEffect(() => {
 		setActiveSlashIndex((current) => {
 			if (props.slashMenu.items.length === 0) return 0;
 			return Math.min(current, props.slashMenu.items.length - 1);
 		});
 	}, [props.slashMenu.items.length]);
-	useEffect(() => {
-		if (slashQuery !== null) setActiveSlashIndex(0);
-	}, [slashQuery]);
 	useEffect(() => {
 		if (activeSlashTriggerStart === null && dismissedSlashTriggerStart !== null) setDismissedSlashTriggerStart(null);
 	}, [activeSlashTriggerStart, dismissedSlashTriggerStart]);
@@ -1913,7 +1930,8 @@ const ChatInputBar = forwardRef(function ChatInputBar(props, ref) {
 	useImperativeHandle(ref, () => ({
 		insertFileToken: (tokenKey, label) => composerRef.current?.insertFileToken(tokenKey, label),
 		insertFileTokens: (tokens) => composerRef.current?.insertFileTokens(tokens),
-		focusComposer: () => composerRef.current?.focusComposer()
+		focusComposer: () => composerRef.current?.focusComposer(),
+		focusComposerAtEnd: () => composerRef.current?.focusComposerAtEnd()
 	}), []);
 	return /* @__PURE__ */ jsx("div", {
 		className: "border-t border-gray-200/80 bg-white p-4",
@@ -1936,14 +1954,15 @@ const ChatInputBar = forwardRef(function ChatInputBar(props, ref) {
 							onNodesChange: props.composer.onNodesChange,
 							onFilesAdd: props.composer.onFilesAdd,
 							onSlashQueryChange: (query) => {
-								setSlashQuery(query);
+								if (query === null && isSlashMenuInteractionRef.current) return;
+								if (query !== null) setActiveSlashIndex(0);
 								props.composer.onSlashQueryChange?.(query);
 							},
 							onSlashTriggerChange: (trigger) => {
 								setActiveSlashTriggerStart(trigger?.start ?? null);
 							},
 							onSlashOpenChange: (open) => {
-								if (!open && activeSlashTriggerStart !== null) setDismissedSlashTriggerStart(activeSlashTriggerStart);
+								if (!open) dismissSlashTrigger();
 							},
 							onSlashActiveIndexChange: setActiveSlashIndex
 						}), /* @__PURE__ */ jsx(ChatSlashMenu, {
@@ -1958,7 +1977,13 @@ const ChatInputBar = forwardRef(function ChatInputBar(props, ref) {
 								composerRef.current?.insertSlashItem(item);
 							},
 							onOpenChange: (open) => {
-								if (!open && activeSlashTriggerStart !== null) setDismissedSlashTriggerStart(activeSlashTriggerStart);
+								if (!open) dismissSlashTrigger();
+							},
+							onDetailsPointerDown: () => {
+								isSlashMenuInteractionRef.current = true;
+								requestAnimationFrame(() => {
+									isSlashMenuInteractionRef.current = false;
+								});
 							},
 							onSetActiveIndex: setActiveSlashIndex
 						})]
@@ -3785,6 +3810,45 @@ function ChatMessageActionCopy({ message, texts }) {
 //#endregion
 //#region src/components/chat/ui/chat-message-list/chat-message-list.tsx
 const INVISIBLE_ONLY_TEXT_PATTERN = /\u200B|\u200C|\u200D|\u2060|\uFEFF/g;
+const TYPING_TEXT_SHEEN_CSS = `
+@keyframes nextclaw-chat-typing-text-sheen {
+  0% {
+    background-position: 160% 0;
+  }
+  100% {
+    background-position: -60% 0;
+  }
+}
+
+.nextclaw-chat-typing-indicator__text {
+  background-image: linear-gradient(
+    100deg,
+    #6b7280 0%,
+    #6b7280 34%,
+    #a6adba 43%,
+    #f8fafc 50%,
+    #a6adba 57%,
+    #6b7280 66%,
+    #6b7280 100%
+  );
+  background-size: 240% 100%;
+  background-position: 160% 0;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  animation: nextclaw-chat-typing-text-sheen 2.5s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nextclaw-chat-typing-indicator__text {
+    animation: none;
+    background-image: none;
+    color: #6b7280;
+    -webkit-text-fill-color: currentColor;
+  }
+}
+`;
 function hasRenderableText(value) {
 	const trimmed = value.trim();
 	if (!trimmed) return false;
@@ -3809,6 +3873,15 @@ function ChatMessageTypingFooter() {
 		})
 	});
 }
+function ChatTypingIndicator({ label }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 shadow-sm",
+		children: [/* @__PURE__ */ jsx("style", { children: TYPING_TEXT_SHEEN_CSS }), /* @__PURE__ */ jsx("span", {
+			className: "nextclaw-chat-typing-indicator__text",
+			children: label
+		})]
+	});
+}
 function ChatMessageList(props) {
 	const visibleMessages = props.messages.filter(hasRenderableMessageContent);
 	const hasRenderableAssistantDraft = visibleMessages.some((message) => message.role === "assistant" && (message.status === "streaming" || message.status === "pending"));
@@ -3846,10 +3919,7 @@ function ChatMessageList(props) {
 			}, message.id);
 		}), props.isSending && !hasRenderableAssistantDraft ? /* @__PURE__ */ jsxs("div", {
 			className: "flex justify-start gap-3",
-			children: [/* @__PURE__ */ jsx(ChatMessageAvatar, { role: "assistant" }), /* @__PURE__ */ jsx("div", {
-				className: "rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 shadow-sm",
-				children: props.texts.typingLabel
-			})]
+			children: [/* @__PURE__ */ jsx(ChatMessageAvatar, { role: "assistant" }), /* @__PURE__ */ jsx(ChatTypingIndicator, { label: props.texts.typingLabel })]
 		}) : null]
 	});
 }

package/package.json

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