@nextclaw/agent-chat-ui 0.3.10 → 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) {
@@ -632,24 +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-0 flex-1";
-	if (key === "session-type" || key === "thinking") return "shrink-0";
-	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;
@@ -658,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-2 text-xs font-medium text-gray-600 shadow-none hover:bg-gray-100 focus:ring-0 sm:px-3 ${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: [
@@ -2018,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) {
@@ -2032,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",
@@ -2047,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.10",
+  "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",