@nextclaw/agent-chat-ui 0.3.9 → 0.3.11

package/dist/index.js

@@ -17,6 +17,19 @@ import { $applyNodeReplacement, $createLineBreakNode, $createParagraphNode, $cre
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import hljs from "highlight.js/lib/core";
+import bash from "highlight.js/lib/languages/bash";
+import css from "highlight.js/lib/languages/css";
+import diff from "highlight.js/lib/languages/diff";
+import javascript from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+import markdown from "highlight.js/lib/languages/markdown";
+import python from "highlight.js/lib/languages/python";
+import shell from "highlight.js/lib/languages/shell";
+import sql from "highlight.js/lib/languages/sql";
+import typescript from "highlight.js/lib/languages/typescript";
+import xml from "highlight.js/lib/languages/xml";
+import yaml from "highlight.js/lib/languages/yaml";
 //#region src/components/chat/hooks/use-active-item-scroll.ts
 const defaultGetItemSelector = (index) => `[data-item-index="${index}"]`;
 function useActiveItemScroll(params) {
@@ -360,7 +373,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 +520,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
 			]
@@ -628,25 +645,23 @@ function ChatInputBarSkillPicker(props) {
 //#endregion
 //#region src/components/chat/ui/chat-input-bar/chat-input-bar-toolbar.tsx
 function ToolbarIcon({ icon }) {
-	if (icon === "sparkles") return /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5 shrink-0 text-primary" });
-	if (icon === "brain") return /* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5 shrink-0 text-gray-500" });
-	return null;
+	return icon === "sparkles" ? /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5 shrink-0 text-primary" }) : icon === "brain" ? /* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5 shrink-0 text-gray-500" }) : null;
 }
 function AccessoryIcon({ icon }) {
-	if (icon === "paperclip") return /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4" });
-	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]";
-	return "";
+	return icon === "paperclip" ? /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ToolbarIcon, { icon });
 }
-function resolveContentWidth(key) {
-	if (key === "model") return "w-[320px]";
-	if (key === "session-type") return "w-[220px]";
-	if (key === "thinking") return "w-[180px]";
-	return "";
+const TRIGGER_WIDTH_BY_KEY = {
+	model: "min-w-0 flex-1 sm:min-w-[220px] sm:flex-none",
+	"session-type": "shrink-0",
+	thinking: "shrink-0"
+};
+const CONTENT_WIDTH_BY_KEY = {
+	model: "w-[min(18rem,calc(100vw-1rem))] sm:w-[320px]",
+	"session-type": "w-[220px]",
+	thinking: "w-[180px]"
+};
+function resolveMobileSelectedLabel(item) {
+	return item.key === "model" && item.selectedLabel ? item.selectedLabel.split("/").slice(1).join("/").trim() || item.selectedLabel : item.selectedLabel;
 }
 function ToolbarSelect({ item }) {
 	const { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } = ChatUiPrimitives;
@@ -655,21 +670,29 @@ function ToolbarSelect({ item }) {
 		options: item.options
 	}] : []);
 	const hasOptions = groups.some((group) => group.options.length > 0);
+	const mobileSelectedLabel = resolveMobileSelectedLabel(item);
 	return /* @__PURE__ */ jsxs(Select, {
 		value: item.value,
 		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 ${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",
-					children: item.selectedLabel
-				})]
+				children: [
+					/* @__PURE__ */ jsx(ToolbarIcon, { icon: item.icon }),
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate text-xs font-semibold text-gray-700 sm:hidden",
+						children: mobileSelectedLabel
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "hidden truncate text-xs font-semibold text-gray-700 sm:inline",
+						children: item.selectedLabel
+					})
+				]
 			}) : item.loading ? /* @__PURE__ */ jsx("div", { className: "h-3 w-24 animate-pulse rounded bg-gray-200" }) : /* @__PURE__ */ jsx(SelectValue, { placeholder: item.placeholder })
 		}), /* @__PURE__ */ jsxs(SelectContent, {
-			className: resolveContentWidth(item.key),
+			className: CONTENT_WIDTH_BY_KEY[item.key] ?? "",
 			children: [!hasOptions ? item.loading ? /* @__PURE__ */ jsxs("div", {
 				className: "space-y-2 px-3 py-2",
 				children: [
@@ -700,16 +723,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 +757,7 @@ function ChatInputBarToolbar(props) {
 					})] }) }, item.key);
 				})
 			]
-		}), /* @__PURE__ */ jsx(ChatInputBarActions, { ...props.actions })]
+		}), /* @__PURE__ */ jsx(ChatInputBarActions, { ...actions })]
 	});
 }
 function createComposerNodeId() {
@@ -1700,9 +1723,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 +1763,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
@@ -2015,6 +2038,139 @@ function useCopyFeedback(params) {
 	};
 }
 //#endregion
+//#region src/components/chat/ui/chat-message-list/code-block/chat-code-syntax-highlighter.ts
+const PLAIN_TEXT_LANGUAGES = new Set([
+	"text",
+	"txt",
+	"plain",
+	"plaintext",
+	"none",
+	"output"
+]);
+const AUTO_DETECT_LANGUAGES = [
+	"typescript",
+	"javascript",
+	"json",
+	"bash",
+	"shell",
+	"python",
+	"css",
+	"xml",
+	"markdown",
+	"yaml",
+	"sql",
+	"diff"
+];
+const AUTO_DETECT_MIN_RELEVANCE = 4;
+const REGISTERED_LANGUAGES = [
+	{
+		name: "typescript",
+		language: typescript,
+		aliases: ["ts", "tsx"]
+	},
+	{
+		name: "javascript",
+		language: javascript,
+		aliases: [
+			"js",
+			"jsx",
+			"mjs",
+			"cjs"
+		]
+	},
+	{
+		name: "json",
+		language: json,
+		aliases: ["jsonc"]
+	},
+	{
+		name: "bash",
+		language: bash,
+		aliases: ["sh", "zsh"]
+	},
+	{
+		name: "shell",
+		language: shell,
+		aliases: ["console", "terminal"]
+	},
+	{
+		name: "python",
+		language: python,
+		aliases: ["py"]
+	},
+	{
+		name: "css",
+		language: css
+	},
+	{
+		name: "xml",
+		language: xml,
+		aliases: ["html", "svg"]
+	},
+	{
+		name: "markdown",
+		language: markdown,
+		aliases: ["md", "mdx"]
+	},
+	{
+		name: "yaml",
+		language: yaml,
+		aliases: ["yml"]
+	},
+	{
+		name: "sql",
+		language: sql
+	},
+	{
+		name: "diff",
+		language: diff,
+		aliases: ["patch"]
+	}
+];
+function escapeHtml(value) {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function normalizeLanguage(value) {
+	return value.trim().toLowerCase();
+}
+var ChatCodeSyntaxHighlighter = class {
+	constructor() {
+		this.highlight = (code, language) => {
+			const normalizedLanguage = normalizeLanguage(language);
+			if (!code || PLAIN_TEXT_LANGUAGES.has(normalizedLanguage)) return this.createPlainTextResult(code, normalizedLanguage || "text");
+			if (this.engine.getLanguage(normalizedLanguage)) {
+				const result = this.engine.highlight(code, {
+					language: normalizedLanguage,
+					ignoreIllegals: true
+				});
+				return {
+					html: result.value,
+					language: result.language ?? normalizedLanguage,
+					highlighted: true
+				};
+			}
+			const autoDetected = this.engine.highlightAuto(code, AUTO_DETECT_LANGUAGES);
+			if (autoDetected.language && autoDetected.relevance >= AUTO_DETECT_MIN_RELEVANCE) return {
+				html: autoDetected.value,
+				language: autoDetected.language,
+				highlighted: true
+			};
+			return this.createPlainTextResult(code, normalizedLanguage || "text");
+		};
+		this.createPlainTextResult = (code, language) => ({
+			html: escapeHtml(code),
+			language,
+			highlighted: false
+		});
+		this.engine = hljs.newInstance();
+		REGISTERED_LANGUAGES.forEach((entry) => {
+			this.engine.registerLanguage(entry.name, entry.language);
+			if (entry.aliases) this.engine.registerAliases(entry.aliases, { languageName: entry.name });
+		});
+	}
+};
+const chatCodeSyntaxHighlighter = new ChatCodeSyntaxHighlighter();
+//#endregion
 //#region src/components/chat/ui/chat-message-list/chat-code-block.tsx
 const CODE_LANGUAGE_REGEX = /language-([a-z0-9-]+)/i;
 function flattenNodeText(value) {
@@ -2029,9 +2185,14 @@ function normalizeCodeText(value) {
 function resolveCodeLanguage(className) {
 	return (className ? CODE_LANGUAGE_REGEX.exec(className) : null)?.[1]?.toLowerCase() || "text";
 }
-function ChatCodeBlock(props) {
-	const language = useMemo(() => resolveCodeLanguage(props.className), [props.className]);
-	const codeText = useMemo(() => normalizeCodeText(props.children), [props.children]);
+function ChatCodeBlock({ className, children, texts }) {
+	const language = useMemo(() => resolveCodeLanguage(className), [className]);
+	const codeText = useMemo(() => normalizeCodeText(children), [children]);
+	const highlightedCode = useMemo(() => chatCodeSyntaxHighlighter.highlight(codeText, language), [codeText, language]);
+	const codeClassName = useMemo(() => {
+		const highlightedLanguageClass = `language-${highlightedCode.language}`;
+		return cn("hljs", className, className?.includes("language-") ? void 0 : highlightedLanguageClass);
+	}, [className, highlightedCode.language]);
 	const { copied, copy } = useCopyFeedback({ text: codeText });
 	return /* @__PURE__ */ jsxs("div", {
 		className: "chat-codeblock",
@@ -2044,12 +2205,13 @@ function ChatCodeBlock(props) {
 				type: "button",
 				className: "chat-codeblock-copy",
 				onClick: () => void copy(),
-				"aria-label": copied ? props.texts.copiedCodeLabel : props.texts.copyCodeLabel,
-				children: [copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsx("span", { children: copied ? props.texts.copiedCodeLabel : props.texts.copyCodeLabel })]
+				"aria-label": copied ? texts.copiedCodeLabel : texts.copyCodeLabel,
+				children: [copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsx("span", { children: copied ? texts.copiedCodeLabel : texts.copyCodeLabel })]
 			})]
 		}), /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", {
-			className: props.className,
-			children: codeText
+			className: codeClassName,
+			"data-highlighted": highlightedCode.highlighted ? "true" : "false",
+			dangerouslySetInnerHTML: { __html: highlightedCode.html }
 		}) })]
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/agent-chat-ui",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "private": false,
   "description": "Reusable Nextclaw agent chat UI primitives and default skin.",
   "type": "module",
@@ -39,6 +39,7 @@
     "@radix-ui/react-tooltip": "^1.1.11",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "highlight.js": "^11.11.1",
     "lexical": "^0.43.0",
     "lucide-react": "^0.462.0",
     "react-markdown": "^10.1.0",