@nextclaw/agent-chat-ui 0.3.2 → 0.3.4

package/dist/index.js

@@ -5,29 +5,38 @@ import { twMerge } from "tailwind-merge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { AlertTriangle, ArrowUp, ArrowUpRight, Bot, Brain, BrainCircuit, Check, ChevronDown, ChevronRight, ChevronUp, Code2, Copy, ExternalLink, FileText, Globe, Loader2, Minus, Paperclip, Puzzle, Search, Sparkles, Terminal, User, Wrench } from "lucide-react";
+import { AlertTriangle, ArrowUp, ArrowUpRight, Bot, Brain, BrainCircuit, Check, ChevronDown, ChevronRight, ChevronUp, Code2, Copy, ExternalLink, File, FileArchive, FileAudio2, FileCode2, FileImage, FileJson2, FileSpreadsheet, FileText, FileVideo2, Globe, Loader2, Minus, Paperclip, Puzzle, Search, Sparkles, Terminal, User, Wrench } from "lucide-react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cva } from "class-variance-authority";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { EditorRefPlugin } from "@lexical/react/LexicalEditorRefPlugin";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
+import { $applyNodeReplacement, $createLineBreakNode, $createParagraphNode, $createRangeSelection, $createTextNode, $getRoot, $getSelection, $isElementNode, $isRangeSelection, $isTextNode, $setSelection, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, DecoratorNode, KEY_DOWN_COMMAND, SELECTION_CHANGE_COMMAND, mergeRegister } from "lexical";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 //#region src/components/chat/hooks/use-active-item-scroll.ts
 const defaultGetItemSelector = (index) => `[data-item-index="${index}"]`;
 function useActiveItemScroll(params) {
-	const getItemSelector = params.getItemSelector ?? defaultGetItemSelector;
+	const { activeIndex, containerRef, getItemSelector: customGetItemSelector, isEnabled, itemCount } = params;
+	const getItemSelector = customGetItemSelector ?? defaultGetItemSelector;
 	useEffect(() => {
-		if (!params.isEnabled || params.itemCount === 0) return;
-		const container = params.containerRef.current;
+		if (!isEnabled || itemCount === 0) return;
+		const container = containerRef.current;
 		if (!container) return;
-		container.querySelector(getItemSelector(params.activeIndex))?.scrollIntoView({
+		const activeItem = container.querySelector(getItemSelector(activeIndex));
+		if (typeof activeItem?.scrollIntoView === "function") activeItem.scrollIntoView({
 			block: "nearest",
 			inline: "nearest"
 		});
 	}, [
+		activeIndex,
+		containerRef,
 		getItemSelector,
-		params.activeIndex,
-		params.containerRef,
-		params.isEnabled,
-		params.itemCount
+		isEnabled,
+		itemCount
 	]);
 }
 //#endregion
@@ -841,280 +850,502 @@ function resolveChatComposerSlashTrigger(nodes, selection) {
 		end: caret
 	};
 }
-function isChatComposerSelectionInsideRange(selection, start, end) {
-	if (!selection) return false;
-	return selection.start < end && selection.end > start;
-}
 //#endregion
-//#region src/components/chat/ui/chat-input-bar/chat-composer-dom.utils.ts
-function buildNodeStartMap(nodes) {
-	const map = /* @__PURE__ */ new Map();
-	let cursor = 0;
-	for (const node of nodes) {
-		map.set(node.id, cursor);
-		cursor += getChatComposerNodeLength(node);
+//#region src/components/chat/ui/chat-input-bar/lexical/chat-composer-token-node.tsx
+function buildTokenClassName(tokenKind) {
+	if (tokenKind === "file") return [
+		"mx-[2px]",
+		"inline-flex",
+		"h-7",
+		"max-w-[min(100%,17rem)]",
+		"items-center",
+		"gap-1.5",
+		"rounded-lg",
+		"border",
+		"border-slate-200/80",
+		"bg-slate-50",
+		"px-2",
+		"align-baseline",
+		"text-slate-700",
+		"transition-[border-color,background-color,box-shadow,color]",
+		"duration-150"
+	].join(" ");
+	return [
+		"mx-[2px]",
+		"inline-flex",
+		"h-7",
+		"max-w-full",
+		"items-center",
+		"gap-1.5",
+		"rounded-lg",
+		"border",
+		"border-primary/12",
+		"bg-primary/8",
+		"px-2",
+		"align-baseline",
+		"text-[11px]",
+		"font-medium",
+		"text-primary",
+		"transition"
+	].join(" ");
+}
+function ChatComposerTokenChip(props) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className: props.tokenKind === "file" ? "inline-flex h-4.5 w-4.5 shrink-0 items-center justify-center rounded-md bg-white text-slate-500 ring-1 ring-black/5" : "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary/70",
+		children: props.tokenKind === "file" ? /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 16 16",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.25",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			className: "h-3 w-3",
+			children: [
+				/* @__PURE__ */ jsx("path", { d: "M3.25 4.25A1.5 1.5 0 0 1 4.75 2.75h6.5a1.5 1.5 0 0 1 1.5 1.5v7.5a1.5 1.5 0 0 1-1.5 1.5h-6.5a1.5 1.5 0 0 1-1.5-1.5v-7.5Z" }),
+				/* @__PURE__ */ jsx("path", { d: "m4.75 10 2.25-2.5 1.75 1.75 1.25-1.25 2 2" }),
+				/* @__PURE__ */ jsx("path", { d: "M9.75 6.25h.01" })
+			]
+		}) : /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 16 16",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.25",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			className: "h-3 w-3",
+			children: [
+				/* @__PURE__ */ jsx("path", { d: "M8.5 2.75 2.75 6l5.75 3.25L14.25 6 8.5 2.75Z" }),
+				/* @__PURE__ */ jsx("path", { d: "M2.75 10 8.5 13.25 14.25 10" }),
+				/* @__PURE__ */ jsx("path", { d: "M2.75 6v4l5.75 3.25V9.25L2.75 6Z" }),
+				/* @__PURE__ */ jsx("path", { d: "M14.25 6v4L8.5 13.25V9.25L14.25 6Z" })
+			]
+		})
+	}), /* @__PURE__ */ jsx("span", {
+		className: props.tokenKind === "file" ? "min-w-0 flex-1 truncate text-[12px] font-medium text-slate-700" : "truncate",
+		children: props.label
+	})] });
+}
+var ChatComposerTokenNode = class ChatComposerTokenNode extends DecoratorNode {
+	static getType() {
+		return "chat-composer-token";
 	}
-	return map;
-}
-function resolveRootChildIndex(root, target) {
-	let current = target;
-	while (current && current.parentNode !== root) current = current.parentNode;
-	if (!current) return root.childNodes.length;
-	return Array.prototype.indexOf.call(root.childNodes, current);
-}
-function findNodeByDomChild(child, index, nodes) {
-	if (child instanceof HTMLElement) {
-		const nodeId = child.dataset.composerNodeId;
-		if (nodeId) return nodes.find((node) => node.id === nodeId);
+	static clone(node) {
+		return new ChatComposerTokenNode(node.__composerId, node.__tokenKind, node.__tokenKey, node.__label, node.__key);
 	}
-	return nodes[index];
-}
-function sumNodeLengthsBeforeChildIndex(root, nodes, childIndex) {
-	let value = 0;
-	for (let index = 0; index < childIndex; index += 1) {
-		const matched = findNodeByDomChild(root.childNodes[index], index, nodes);
-		if (matched) value += getChatComposerNodeLength(matched);
+	static importJSON(serializedNode) {
+		return $createChatComposerTokenNode({
+			composerId: serializedNode.composerId,
+			label: serializedNode.label,
+			tokenKey: serializedNode.tokenKey,
+			tokenKind: serializedNode.tokenKind
+		});
 	}
-	return value;
-}
-function resolveDirectRootTextNodeOffset(root, container, offset, nodes) {
-	const childIndex = resolveRootChildIndex(root, container);
-	const valueBeforeNode = sumNodeLengthsBeforeChildIndex(root, nodes, childIndex);
-	const currentNode = nodes[childIndex];
-	if (currentNode?.type === "text") return valueBeforeNode + Math.min(offset, currentNode.text.length);
-	return valueBeforeNode + Math.min(offset, container.textContent?.length ?? 0);
-}
-function resolveElementBackedOffset(container, offset, matched, nodeStart, element) {
-	if (matched.type === "text") {
-		if (container.nodeType === Node.TEXT_NODE) return nodeStart + Math.min(offset, matched.text.length);
-		if (container === element) return nodeStart + (offset > 0 ? matched.text.length : 0);
-		return nodeStart + matched.text.length;
+	constructor(composerId, tokenKind, tokenKey, label, key) {
+		super(key);
+		this.applyTokenDom = (element) => {
+			element.contentEditable = "false";
+			element.dataset.composerNodeId = this.__composerId;
+			element.dataset.composerNodeType = "token";
+			element.dataset.composerTokenKind = this.__tokenKind;
+			element.dataset.composerTokenKey = this.__tokenKey;
+			element.dataset.composerLabel = this.__label;
+			element.title = this.__label;
+			element.className = buildTokenClassName(this.__tokenKind);
+		};
+		this.createDOM = (_config, _editor) => {
+			const element = document.createElement("span");
+			this.applyTokenDom(element);
+			return element;
+		};
+		this.updateDOM = (_prevNode, dom) => {
+			this.applyTokenDom(dom);
+			return false;
+		};
+		this.decorate = () => {
+			return /* @__PURE__ */ jsx(ChatComposerTokenChip, {
+				label: this.__label,
+				tokenKind: this.__tokenKind
+			});
+		};
+		this.exportJSON = () => {
+			return {
+				composerId: this.__composerId,
+				label: this.__label,
+				tokenKey: this.__tokenKey,
+				tokenKind: this.__tokenKind,
+				type: "chat-composer-token",
+				version: 1
+			};
+		};
+		this.getComposerId = () => {
+			return this.getLatest().__composerId;
+		};
+		this.getTokenKind = () => {
+			return this.getLatest().__tokenKind;
+		};
+		this.getTokenKey = () => {
+			return this.getLatest().__tokenKey;
+		};
+		this.getLabel = () => {
+			return this.getLatest().__label;
+		};
+		this.getTextContent = () => {
+			return "";
+		};
+		this.isInline = () => {
+			return true;
+		};
+		this.isIsolated = () => {
+			return true;
+		};
+		this.isKeyboardSelectable = () => {
+			return false;
+		};
+		this.__composerId = composerId;
+		this.__tokenKind = tokenKind;
+		this.__tokenKey = tokenKey;
+		this.__label = label;
+	}
+};
+function $createChatComposerTokenNode(params) {
+	const { composerId, label, tokenKey, tokenKind } = params;
+	return $applyNodeReplacement(new ChatComposerTokenNode(composerId, tokenKind, tokenKey, label));
+}
+function $isChatComposerTokenNode(node) {
+	return node instanceof ChatComposerTokenNode;
+}
+//#endregion
+//#region src/components/chat/ui/chat-input-bar/lexical/chat-composer-lexical-editor-state.ts
+function getComposerLeafDescriptors() {
+	const root = $getRoot();
+	const paragraph = root.getFirstChild();
+	if (!$isElementNode(paragraph)) return {
+		descriptors: [],
+		paragraphKey: root.getKey(),
+		paragraphSize: 0,
+		totalLength: 0
+	};
+	const children = paragraph.getChildren();
+	const descriptors = [];
+	let cursor = 0;
+	for (const [index, child] of children.entries()) {
+		if ($isTextNode(child)) {
+			const text = child.getTextContent();
+			descriptors.push({
+				index,
+				key: child.getKey(),
+				length: text.length,
+				node: child,
+				start: cursor,
+				text,
+				type: "text"
+			});
+			cursor += text.length;
+			continue;
+		}
+		if ($isChatComposerTokenNode(child)) {
+			descriptors.push({
+				index,
+				key: child.getKey(),
+				length: 1,
+				node: child,
+				start: cursor,
+				type: "token"
+			});
+			cursor += 1;
+			continue;
+		}
+		descriptors.push({
+			index,
+			key: child.getKey(),
+			length: child.getTextContent().length,
+			node: child,
+			start: cursor,
+			type: "linebreak"
+		});
+		cursor += child.getTextContent().length;
 	}
-	if (container === element) return nodeStart + (offset > 0 ? 1 : 0);
-	return nodeStart + 1;
-}
-function resolveSelectionPointOffset(root, container, offset, nodes, nodeStartMap) {
-	if (container === root) return sumNodeLengthsBeforeChildIndex(root, nodes, offset);
-	if (container.nodeType === Node.TEXT_NODE && container.parentNode === root) return resolveDirectRootTextNodeOffset(root, container, offset, nodes);
-	const element = container instanceof HTMLElement ? container.closest("[data-composer-node-id]") : container.parentElement?.closest("[data-composer-node-id]") ?? null;
-	if (!(element instanceof HTMLElement)) return resolveSelectionPointOffset(root, root, resolveRootChildIndex(root, container), nodes, nodeStartMap);
-	const nodeId = element.dataset.composerNodeId;
-	if (!nodeId) return 0;
-	const matched = nodes.find((node) => node.id === nodeId);
-	const nodeStart = nodeStartMap.get(nodeId) ?? 0;
-	if (!matched) return nodeStart;
-	return resolveElementBackedOffset(container, offset, matched, nodeStart, element);
-}
-function readComposerSelection(root, nodes) {
-	const selection = window.getSelection();
-	if (!selection || selection.rangeCount === 0) return null;
-	const range = selection.getRangeAt(0);
-	if (!root.contains(range.startContainer) || !root.contains(range.endContainer)) return null;
-	const nodeStartMap = buildNodeStartMap(nodes);
-	const start = resolveSelectionPointOffset(root, range.startContainer, range.startOffset, nodes, nodeStartMap);
-	const end = resolveSelectionPointOffset(root, range.endContainer, range.endOffset, nodes, nodeStartMap);
 	return {
-		start: Math.min(start, end),
-		end: Math.max(start, end)
+		descriptors,
+		paragraphKey: paragraph.getKey(),
+		paragraphSize: children.length,
+		totalLength: cursor
 	};
 }
-function restoreComposerSelection(root, nodes, selection) {
-	if (!selection) return;
-	const browserSelection = window.getSelection();
-	if (!browserSelection) return;
-	const resolveBoundary = (docOffset) => {
-		let cursor = 0;
-		for (let index = 0; index < nodes.length; index += 1) {
-			const node = nodes[index];
-			const nodeLength = getChatComposerNodeLength(node);
-			const nodeStart = cursor;
-			const nodeEnd = cursor + nodeLength;
-			const element = root.childNodes[index];
-			if (!element) {
-				cursor = nodeEnd;
-				continue;
-			}
-			if (node.type === "text") {
-				if (docOffset <= nodeEnd) return {
-					container: element.firstChild ?? element,
-					offset: Math.max(0, Math.min(docOffset - nodeStart, node.text.length))
-				};
-			} else {
-				if (docOffset <= nodeStart) return {
-					container: root,
-					offset: index
+function buildSelectionPointFromOffset(offset) {
+	const { descriptors, paragraphKey, paragraphSize, totalLength } = getComposerLeafDescriptors();
+	const boundedOffset = Math.max(0, Math.min(offset, totalLength));
+	if (descriptors.length === 0) return {
+		key: paragraphKey,
+		offset: 0,
+		type: "element"
+	};
+	for (const descriptor of descriptors) {
+		const end = descriptor.start + descriptor.length;
+		if (descriptor.type === "text" && boundedOffset >= descriptor.start && boundedOffset <= end) return {
+			key: descriptor.key,
+			offset: boundedOffset - descriptor.start,
+			type: "text"
+		};
+		if (descriptor.type !== "text") {
+			if (boundedOffset === descriptor.start) return {
+				key: paragraphKey,
+				offset: descriptor.index,
+				type: "element"
+			};
+			if (boundedOffset === end) {
+				const nextDescriptor = descriptors[descriptor.index + 1];
+				if (nextDescriptor?.type === "text" && nextDescriptor.length === 0) return {
+					key: nextDescriptor.key,
+					offset: 0,
+					type: "text"
 				};
-				if (docOffset <= nodeEnd) return {
-					container: root,
-					offset: index + 1
+				return {
+					key: paragraphKey,
+					offset: descriptor.index + 1,
+					type: "element"
 				};
 			}
-			cursor = nodeEnd;
 		}
-		return {
-			container: root,
-			offset: root.childNodes.length
-		};
+	}
+	return {
+		key: paragraphKey,
+		offset: paragraphSize,
+		type: "element"
+	};
+}
+function getOffsetFromElementPoint(point) {
+	const { descriptors, paragraphKey, totalLength } = getComposerLeafDescriptors();
+	if (point.key === paragraphKey) {
+		const previous = descriptors[point.offset - 1];
+		return previous ? previous.start + previous.length : 0;
+	}
+	const descriptor = descriptors.find((item) => item.key === point.key);
+	if (!descriptor) return totalLength;
+	return descriptor.start + Math.min(point.offset, descriptor.length);
+}
+function getOffsetFromPoint(point) {
+	if (point.type === "element") return getOffsetFromElementPoint(point);
+	const { descriptors, totalLength } = getComposerLeafDescriptors();
+	const descriptor = descriptors.find((item) => item.key === point.key);
+	if (!descriptor) return totalLength;
+	return descriptor.start + Math.min(point.offset, descriptor.length);
+}
+function readNodesFromEditor() {
+	const { descriptors } = getComposerLeafDescriptors();
+	const nextNodes = [];
+	let textBuffer = "";
+	let textId = "";
+	const flushTextBuffer = () => {
+		if (textBuffer.length === 0) return;
+		nextNodes.push({
+			id: textId,
+			type: "text",
+			text: textBuffer
+		});
+		textBuffer = "";
+		textId = "";
 	};
-	const startBoundary = resolveBoundary(selection.start);
-	const endBoundary = resolveBoundary(selection.end);
-	const range = document.createRange();
-	range.setStart(startBoundary.container, startBoundary.offset);
-	range.setEnd(endBoundary.container, endBoundary.offset);
-	browserSelection.removeAllRanges();
-	browserSelection.addRange(range);
-}
-function parseComposerNodesFromDom(root) {
-	const parsedNodes = [];
-	for (const child of Array.from(root.childNodes)) {
-		if (child.nodeType === Node.TEXT_NODE) {
-			parsedNodes.push(createChatComposerTextNode(child.textContent ?? ""));
+	for (const descriptor of descriptors) {
+		if (descriptor.type === "text") {
+			if (textBuffer.length === 0) textId = descriptor.key;
+			textBuffer += descriptor.text;
 			continue;
 		}
-		if (!(child instanceof HTMLElement)) continue;
-		if (child.dataset.composerNodeType === "token") {
-			const tokenKind = child.dataset.composerTokenKind;
-			const tokenKey = child.dataset.composerTokenKey;
-			const label = child.dataset.composerLabel;
-			if (tokenKind && tokenKey && label) parsedNodes.push({
-				id: child.dataset.composerNodeId ?? createChatComposerTokenNode({
-					tokenKind,
-					tokenKey,
-					label
-				}).id,
-				type: "token",
-				tokenKind,
-				tokenKey,
-				label
-			});
+		if (descriptor.type === "linebreak") {
+			if (textBuffer.length === 0) textId = descriptor.key;
+			textBuffer += "\n";
 			continue;
 		}
-		const text = child.textContent ?? "";
-		parsedNodes.push({
-			id: child.dataset.composerNodeId ?? createChatComposerTextNode(text).id,
-			type: "text",
-			text
+		flushTextBuffer();
+		const tokenNode = descriptor.node;
+		nextNodes.push({
+			id: tokenNode.getComposerId(),
+			label: tokenNode.getLabel(),
+			tokenKey: tokenNode.getTokenKey(),
+			tokenKind: tokenNode.getTokenKind(),
+			type: "token"
 		});
 	}
-	return normalizeChatComposerNodes(parsedNodes);
-}
-function readComposerDocumentStateFromDom(root) {
-	const nodes = parseComposerNodesFromDom(root);
-	return {
-		nodes,
-		selection: readComposerSelection(root, nodes)
-	};
+	flushTextBuffer();
+	return normalizeChatComposerNodes(nextNodes);
 }
-//#endregion
-//#region src/components/chat/ui/chat-input-bar/chat-composer-controller.ts
-var ChatComposerController = class {
-	constructor() {
-		this.nodes = createEmptyChatComposerNodes();
-		this.selection = null;
-		this.sync = (nodes, selection) => {
-			this.nodes = normalizeChatComposerNodes(nodes);
-			this.selection = selection;
-			return this.getSnapshot();
+function readChatComposerSnapshotFromEditorState(editorState) {
+	return editorState.read(() => {
+		const selection = $getSelection();
+		const nodes = readNodesFromEditor();
+		if (!$isRangeSelection(selection)) return {
+			nodes,
+			selection: null
 		};
-		this.setSelection = (selection) => {
-			this.selection = selection;
-			return this.getSnapshot();
-		};
-		this.replaceDocument = (nodes, selection) => {
-			this.nodes = normalizeChatComposerNodes(nodes);
-			this.selection = selection;
-			return this.getSnapshot();
-		};
-		this.insertText = (text) => {
-			const selection = this.selection ?? {
-				start: 0,
-				end: 0
-			};
-			this.nodes = replaceChatComposerRange(this.nodes, selection.start, selection.end, [createChatComposerTextNode(text)]);
-			const nextOffset = selection.start + text.length;
-			this.selection = {
-				start: nextOffset,
-				end: nextOffset
-			};
-			return this.getSnapshot();
-		};
-		this.insertFileToken = (tokenKey, label) => {
-			return this.insertToken("file", tokenKey, label);
-		};
-		this.insertSkillToken = (tokenKey, label) => {
-			if (this.getSelectedSkillKeys().includes(tokenKey)) return this.getSnapshot();
-			return this.insertToken("skill", tokenKey, label, this.getSlashTrigger());
-		};
-		this.syncSelectedSkills = (nextKeys, options) => {
-			const selectedSkillKeys = this.getSelectedSkillKeys();
-			const optionMap = new Map(options.map((option) => [option.key, option]));
-			const addedKey = nextKeys.find((key) => !selectedSkillKeys.includes(key));
-			if (addedKey) {
-				const option = optionMap.get(addedKey);
-				return this.insertSkillToken(addedKey, option?.label ?? addedKey);
+		return {
+			nodes,
+			selection: {
+				start: getOffsetFromPoint(selection.anchor),
+				end: getOffsetFromPoint(selection.focus)
 			}
-			const removedKey = selectedSkillKeys.find((key) => !nextKeys.includes(key));
-			if (removedKey) this.nodes = removeChatComposerTokenNodes(this.nodes, (node) => node.tokenKind === "skill" && node.tokenKey === removedKey);
-			return this.getSnapshot();
-		};
-		this.deleteContent = (direction) => {
-			const documentLength = this.getDocumentLength();
-			const selection = this.selection ?? {
-				start: documentLength,
-				end: documentLength
-			};
-			let rangeStart = selection.start;
-			let rangeEnd = selection.end;
-			if (selection.start === selection.end) if (direction === "backward" && selection.start > 0) rangeStart = selection.start - 1;
-			else if (direction === "forward") rangeEnd = selection.end + 1;
-			else return this.getSnapshot();
-			this.nodes = replaceChatComposerRange(this.nodes, rangeStart, rangeEnd, []);
-			this.selection = {
-				start: rangeStart,
-				end: rangeStart
-			};
-			return this.getSnapshot();
-		};
-		this.getSnapshot = () => {
-			return {
-				nodes: this.nodes,
-				selection: this.selection,
-				nodeStartMap: buildNodeStartMap(this.nodes),
-				documentLength: this.getDocumentLength(),
-				selectedSkillKeys: this.getSelectedSkillKeys(),
-				slashTrigger: this.getSlashTrigger()
-			};
-		};
-		this.getDocumentLength = () => {
-			return this.nodes.reduce((sum, node) => sum + getChatComposerNodeLength(node), 0);
-		};
-		this.getSelectedSkillKeys = () => {
-			return extractChatComposerTokenKeys(this.nodes, "skill");
-		};
-		this.insertToken = (tokenKind, tokenKey, label, trigger = null) => {
-			const documentLength = this.getDocumentLength();
-			const replaceStart = trigger?.start ?? this.selection?.start ?? documentLength;
-			const replaceEnd = trigger?.end ?? this.selection?.end ?? replaceStart;
-			this.nodes = replaceChatComposerRange(this.nodes, replaceStart, replaceEnd, [createChatComposerTokenNode({
-				tokenKind,
-				tokenKey,
-				label
-			})]);
-			this.selection = {
-				start: replaceStart + 1,
-				end: replaceStart + 1
-			};
-			return this.getSnapshot();
-		};
-		this.getSlashTrigger = () => {
-			return resolveChatComposerSlashTrigger(this.nodes, this.selection);
 		};
+	});
+}
+function writeChatComposerStateToLexicalRoot(nodes, selection) {
+	const root = $getRoot();
+	root.clear();
+	const paragraph = $createParagraphNode();
+	root.append(paragraph);
+	for (const node of normalizeChatComposerNodes(nodes)) {
+		if (node.type === "token") {
+			paragraph.append($createChatComposerTokenNode({
+				composerId: node.id,
+				label: node.label,
+				tokenKey: node.tokenKey,
+				tokenKind: node.tokenKind
+			}));
+			continue;
+		}
+		const parts = node.text.split("\n");
+		for (const [index, part] of parts.entries()) {
+			if (part.length > 0) paragraph.append($createTextNode(part));
+			if (index < parts.length - 1) paragraph.append($createLineBreakNode());
+		}
 	}
-};
+	if ($isChatComposerTokenNode(paragraph.getLastChild())) paragraph.append($createTextNode(""));
+	if (!selection) return;
+	const nextSelection = $createRangeSelection();
+	const anchor = buildSelectionPointFromOffset(selection.start);
+	const focus = buildSelectionPointFromOffset(selection.end);
+	nextSelection.anchor.set(anchor.key, anchor.offset, anchor.type);
+	nextSelection.focus.set(focus.key, focus.offset, focus.type);
+	$setSelection(nextSelection);
+}
+function syncLexicalEditorFromChatComposerState(editor, nodes, selection) {
+	editor.update(() => {
+		writeChatComposerStateToLexicalRoot(nodes, selection);
+	});
+}
+function syncLexicalSelectionFromChatComposerSelection(editor, selection) {
+	editor.update(() => {
+		const nextSelection = $createRangeSelection();
+		const anchor = buildSelectionPointFromOffset(selection.start);
+		const focus = buildSelectionPointFromOffset(selection.end);
+		nextSelection.anchor.set(anchor.key, anchor.offset, anchor.type);
+		nextSelection.focus.set(focus.key, focus.offset, focus.type);
+		$setSelection(nextSelection);
+	});
+}
+//#endregion
+//#region src/components/chat/ui/chat-input-bar/lexical/chat-composer-lexical-operations.ts
+function getDocumentLength(nodes) {
+	return nodes.reduce((sum, node) => sum + getChatComposerNodeLength(node), 0);
+}
+function insertToken(params) {
+	const { label, nodes, selection, tokenKey, tokenKind, trigger } = params;
+	const documentLength = getDocumentLength(nodes);
+	const replaceStart = trigger?.start ?? selection?.start ?? documentLength;
+	return {
+		nodes: replaceChatComposerRange(nodes, replaceStart, trigger?.end ?? selection?.end ?? replaceStart, [createChatComposerTokenNode({
+			label,
+			tokenKey,
+			tokenKind
+		})]),
+		selection: {
+			start: replaceStart + 1,
+			end: replaceStart + 1
+		}
+	};
+}
+function getChatComposerNodesSignature(nodes) {
+	return nodes.map((node) => node.type === "text" ? `text:${node.id}:${node.text}` : `token:${node.id}:${node.tokenKind}:${node.tokenKey}:${node.label}`).join("");
+}
+function replaceChatComposerSelectionWithText(params) {
+	const { nodes, selection, text } = params;
+	const currentSelection = selection ?? {
+		start: getDocumentLength(nodes),
+		end: getDocumentLength(nodes)
+	};
+	const nextOffset = currentSelection.start + text.length;
+	return {
+		nodes: replaceChatComposerRange(nodes, currentSelection.start, currentSelection.end, [createChatComposerTextNode(text)]),
+		selection: {
+			start: nextOffset,
+			end: nextOffset
+		}
+	};
+}
+function insertFileTokenIntoChatComposer(params) {
+	const { label, nodes, selection, tokenKey } = params;
+	return insertToken({
+		label,
+		nodes,
+		selection,
+		tokenKey,
+		tokenKind: "file"
+	});
+}
+function insertSkillTokenIntoChatComposer(params) {
+	const { label, nodes, selection, tokenKey } = params;
+	if (extractChatComposerTokenKeys(nodes, "skill").includes(tokenKey)) return {
+		nodes: normalizeChatComposerNodes(nodes),
+		selection
+	};
+	return insertToken({
+		label,
+		nodes,
+		selection,
+		tokenKey,
+		tokenKind: "skill",
+		trigger: resolveChatComposerSlashTrigger(nodes, selection)
+	});
+}
+function syncSelectedSkillsIntoChatComposer(params) {
+	const { nextKeys, nodes, options, selection } = params;
+	const selectedSkillKeys = extractChatComposerTokenKeys(nodes, "skill");
+	const optionMap = new Map(options.map((option) => [option.key, option]));
+	const addedKey = nextKeys.find((key) => !selectedSkillKeys.includes(key));
+	if (addedKey) return insertSkillTokenIntoChatComposer({
+		label: optionMap.get(addedKey)?.label ?? addedKey,
+		nodes,
+		selection,
+		tokenKey: addedKey
+	});
+	const removedKey = selectedSkillKeys.find((key) => !nextKeys.includes(key));
+	if (!removedKey) return {
+		nodes: normalizeChatComposerNodes(nodes),
+		selection
+	};
+	return {
+		nodes: removeChatComposerTokenNodes(nodes, (node) => node.tokenKind === "skill" && node.tokenKey === removedKey),
+		selection
+	};
+}
+function deleteChatComposerContent(params) {
+	const { direction, nodes, selection: currentSelection } = params;
+	const documentLength = getDocumentLength(nodes);
+	const selection = currentSelection ?? {
+		start: documentLength,
+		end: documentLength
+	};
+	let rangeStart = selection.start;
+	let rangeEnd = selection.end;
+	if (selection.start === selection.end) if (direction === "backward" && selection.start > 0) rangeStart = selection.start - 1;
+	else if (direction === "forward" && selection.end < documentLength) rangeEnd = selection.end + 1;
+	else return {
+		nodes: normalizeChatComposerNodes(nodes),
+		selection
+	};
+	return {
+		nodes: replaceChatComposerRange(nodes, rangeStart, rangeEnd, []),
+		selection: {
+			start: rangeStart,
+			end: rangeStart
+		}
+	};
+}
 //#endregion
-//#region src/components/chat/ui/chat-input-bar/chat-composer-keyboard.utils.ts
-function resolveChatComposerKeyboardAction(params) {
-	const { key, shiftKey, isComposing, isSlashMenuOpen, slashItemCount, activeSlashIndex, isSending, canStopGeneration } = params;
+//#region src/components/chat/ui/chat-input-bar/lexical/chat-composer-lexical-controller.ts
+function resolveLexicalComposerKeyboardAction(params) {
+	const { activeSlashIndex, canStopGeneration, isComposing, isSending, isSlashMenuOpen, key, shiftKey, slashItemCount } = params;
 	if (key === "Enter" && !shiftKey && isSending) return { type: "consume" };
 	if (isSlashMenuOpen && slashItemCount > 0) {
 		if (key === "ArrowDown") return {
@@ -1140,569 +1371,391 @@ function resolveChatComposerKeyboardAction(params) {
 	};
 	return { type: "noop" };
 }
-//#endregion
-//#region src/components/chat/ui/chat-input-bar/chat-composer-surface-renderer.ts
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-var ChatComposerSurfaceRenderer = class {
-	constructor() {
-		this.render = (root, params) => {
-			if (!root) return;
-			const fragment = document.createDocumentFragment();
-			for (const node of params.nodes) {
-				const element = node.type === "text" ? this.createTextNodeElement(node) : this.createTokenNodeElement(node, params.selectedRange, params.nodeStartMap);
-				if (element) fragment.appendChild(element);
-			}
-			root.replaceChildren(fragment);
-		};
-		this.createTextNodeElement = (node) => {
-			if (node.text.length === 0) return null;
-			const element = document.createElement("span");
-			element.dataset.composerNodeId = node.id;
-			element.dataset.composerNodeType = "text";
-			element.textContent = node.text;
-			return element;
-		};
-		this.createTokenNodeElement = (node, selectedRange, nodeStartMap) => {
-			const nodeStart = nodeStartMap.get(node.id) ?? 0;
-			const isSelected = isChatComposerSelectionInsideRange(selectedRange, nodeStart, nodeStart + 1);
-			const element = document.createElement("span");
-			element.contentEditable = "false";
-			element.dataset.composerNodeId = node.id;
-			element.dataset.composerNodeType = "token";
-			element.dataset.composerTokenKind = node.tokenKind;
-			element.dataset.composerTokenKey = node.tokenKey;
-			element.dataset.composerLabel = node.label;
-			element.title = node.label;
-			element.className = this.buildTokenClassName(node.tokenKind, isSelected);
-			element.append(this.createTokenIcon(node.tokenKind));
-			const label = document.createElement("span");
-			label.className = node.tokenKind === "file" ? "min-w-0 flex-1 truncate text-[12px] font-medium text-slate-700" : "truncate";
-			label.textContent = node.label;
-			element.append(label);
-			return element;
-		};
-		this.buildTokenClassName = (tokenKind, isSelected) => {
-			if (tokenKind === "file") return [
-				"mx-[2px]",
-				"inline-flex",
-				"h-7",
-				"max-w-[min(100%,17rem)]",
-				"items-center",
-				"gap-1.5",
-				"rounded-lg",
-				"border",
-				"px-2",
-				"align-baseline",
-				"transition-[border-color,background-color,box-shadow,color]",
-				"duration-150",
-				isSelected ? "border-slate-300 bg-slate-100 text-slate-800 shadow-[0_0_0_2px_rgba(148,163,184,0.14)]" : "border-slate-200/80 bg-slate-50 text-slate-700"
-			].join(" ");
-			return [
-				"mx-[2px]",
-				"inline-flex",
-				"h-7",
-				"max-w-full",
-				"items-center",
-				"gap-1.5",
-				"rounded-lg",
-				"border",
-				"px-2",
-				"align-baseline",
-				"text-[11px]",
-				"font-medium",
-				"transition",
-				isSelected ? "border-primary/30 bg-primary/18 text-primary" : "border-primary/12 bg-primary/8 text-primary"
-			].join(" ");
-		};
-		this.createTokenIcon = (tokenKind) => {
-			const wrapper = document.createElement("span");
-			wrapper.className = tokenKind === "file" ? "inline-flex h-4.5 w-4.5 shrink-0 items-center justify-center rounded-md bg-white text-slate-500 ring-1 ring-black/5" : "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary/70";
-			wrapper.append(tokenKind === "file" ? this.createFileIcon() : this.createSkillIcon());
-			return wrapper;
+var LexicalComposerHandleOwner = class {
+	constructor(params) {
+		this.params = params;
+		this.insertSlashItem = (item) => {
+			if (!item.value) return;
+			this.params.onSlashItemSelect?.(item);
+			this.params.publishSnapshot(insertSkillTokenIntoChatComposer({
+				label: item.title,
+				nodes: this.params.optionsReader().nodes,
+				selection: this.params.optionsReader().selection,
+				tokenKey: item.value
+			}), { focusAfterSync: true });
 		};
-		this.createSkillIcon = () => {
-			return this.createSvgIcon([
-				{
-					tag: "path",
-					attrs: { d: "M8.5 2.75 2.75 6l5.75 3.25L14.25 6 8.5 2.75Z" }
-				},
-				{
-					tag: "path",
-					attrs: { d: "M2.75 10 8.5 13.25 14.25 10" }
-				},
-				{
-					tag: "path",
-					attrs: { d: "M2.75 6v4l5.75 3.25V9.25L2.75 6Z" }
-				},
-				{
-					tag: "path",
-					attrs: { d: "M14.25 6v4L8.5 13.25V9.25L14.25 6Z" }
-				}
-			]);
+		this.insertFileToken = (tokenKey, label) => {
+			this.params.publishSnapshot(insertFileTokenIntoChatComposer({
+				label,
+				nodes: this.params.optionsReader().nodes,
+				selection: this.params.optionsReader().selection,
+				tokenKey
+			}), { focusAfterSync: true });
+		};
+		this.insertFileTokens = (tokens) => {
+			let nextNodes = this.params.optionsReader().nodes;
+			let nextSelection = this.params.optionsReader().selection;
+			for (const token of tokens) {
+				const snapshot = insertFileTokenIntoChatComposer({
+					label: token.label,
+					nodes: nextNodes,
+					selection: nextSelection,
+					tokenKey: token.tokenKey
+				});
+				nextNodes = snapshot.nodes;
+				nextSelection = snapshot.selection;
+			}
+			this.params.publishSnapshot({
+				nodes: nextNodes,
+				selection: nextSelection
+			}, { focusAfterSync: true });
 		};
-		this.createFileIcon = () => {
-			return this.createSvgIcon([
-				{
-					tag: "path",
-					attrs: { d: "M3.25 4.25A1.5 1.5 0 0 1 4.75 2.75h6.5a1.5 1.5 0 0 1 1.5 1.5v7.5a1.5 1.5 0 0 1-1.5 1.5h-6.5a1.5 1.5 0 0 1-1.5-1.5v-7.5Z" }
-				},
-				{
-					tag: "path",
-					attrs: { d: "m4.75 10 2.25-2.5 1.75 1.75 1.25-1.25 2 2" }
-				},
-				{
-					tag: "path",
-					attrs: { d: "M9.75 6.25h.01" }
-				}
-			]);
+		this.focusComposer = () => {
+			this.params.focusComposer();
 		};
-		this.createSvgIcon = (children) => {
-			const svg = document.createElementNS(SVG_NAMESPACE, "svg");
-			svg.setAttribute("viewBox", "0 0 16 16");
-			svg.setAttribute("fill", "none");
-			svg.setAttribute("stroke", "currentColor");
-			svg.setAttribute("stroke-width", "1.25");
-			svg.setAttribute("stroke-linecap", "round");
-			svg.setAttribute("stroke-linejoin", "round");
-			svg.setAttribute("aria-hidden", "true");
-			svg.setAttribute("class", "h-3 w-3");
-			for (const child of children) {
-				const element = document.createElementNS(SVG_NAMESPACE, child.tag);
-				for (const [key, value] of Object.entries(child.attrs)) element.setAttribute(key, value);
-				svg.append(element);
-			}
-			return svg;
+		this.syncSelectedSkills = (nextKeys, options) => {
+			this.params.publishSnapshot(syncSelectedSkillsIntoChatComposer({
+				nextKeys,
+				nodes: this.params.optionsReader().nodes,
+				options,
+				selection: this.params.optionsReader().selection
+			}), { focusAfterSync: true });
 		};
 	}
 };
-//#endregion
-//#region src/components/chat/ui/chat-input-bar/chat-composer-view-controller.ts
-const CHAT_INPUT_MAX_HEIGHT = 188;
-var ChatComposerViewController = class {
-	constructor(controller) {
-		this.controller = controller;
-		this.surfaceRenderer = new ChatComposerSurfaceRenderer();
-		this.sync = (nodes, selection) => {
-			return this.controller.sync(nodes, selection);
-		};
-		this.syncSelectionFromRoot = (root) => {
-			return this.controller.setSelection(readComposerSelection(root, this.controller.getSnapshot().nodes));
-		};
-		this.restoreSelectionIfFocused = (root, selection) => {
-			if (!root || document.activeElement !== root) return;
-			restoreComposerSelection(root, this.controller.getSnapshot().nodes, selection);
-		};
-		this.syncViewport = (root) => {
-			if (!root) return;
-			root.style.maxHeight = `${CHAT_INPUT_MAX_HEIGHT}px`;
-			root.style.overflowY = root.scrollHeight > CHAT_INPUT_MAX_HEIGHT ? "auto" : "hidden";
-		};
-		this.renderSurface = (params) => {
-			this.surfaceRenderer.render(params.root, {
-				nodes: params.snapshot.nodes,
-				selectedRange: params.selectedRange,
-				nodeStartMap: params.snapshot.nodeStartMap
-			});
-		};
-		this.insertSlashItem = (item, commitSnapshot) => {
-			if (!item.value) return;
-			commitSnapshot(this.controller.insertSkillToken(item.value, item.title));
-		};
-		this.syncSelectedSkills = (nextKeys, options, commitSnapshot) => {
-			commitSnapshot(this.controller.syncSelectedSkills(nextKeys, options));
-		};
-		this.handleBeforeInput = (params) => {
-			const { event, disabled, isComposing, commitSnapshot } = params;
-			const nativeEvent = event.nativeEvent;
-			if (disabled || isComposing || nativeEvent.isComposing) return;
-			if (!(nativeEvent.inputType === "insertText" || nativeEvent.inputType === "insertReplacementText") || !nativeEvent.data) return;
-			event.preventDefault();
-			commitSnapshot(this.controller.insertText(nativeEvent.data));
-		};
-		this.handleInput = (params) => {
-			const { event, isComposing, commitSnapshot } = params;
-			const nativeEvent = event.nativeEvent;
-			if (isComposing || nativeEvent.isComposing) return;
-			const root = event.currentTarget;
-			const nextDocumentState = readComposerDocumentStateFromDom(root);
-			commitSnapshot(this.controller.replaceDocument(nextDocumentState.nodes, nextDocumentState.selection));
-		};
-		this.handleCompositionEnd = (params) => {
-			const { event, commitSnapshot } = params;
-			const root = event.currentTarget;
-			const nextDocumentState = readComposerDocumentStateFromDom(root);
-			commitSnapshot(this.controller.replaceDocument(nextDocumentState.nodes, nextDocumentState.selection));
-		};
-		this.handleKeyDown = (params) => {
-			const { event, slashItems, activeSlashIndex, activeSlashItem, actions, commitSnapshot, insertSkillToken, onSlashItemSelect, onSlashActiveIndexChange, onSlashQueryChange, onSlashOpenChange } = params;
-			const currentSnapshot = this.controller.getSnapshot();
-			const action = resolveChatComposerKeyboardAction({
-				key: event.key,
-				shiftKey: event.shiftKey,
-				isComposing: event.nativeEvent.isComposing,
-				isSlashMenuOpen: currentSnapshot.slashTrigger !== null,
-				slashItemCount: slashItems.length,
-				activeSlashIndex,
-				isSending: actions.isSending,
-				canStopGeneration: actions.canStopGeneration
-			});
-			if (action.type === "noop") return;
-			event.preventDefault();
-			this.applyKeyboardAction({
-				action,
-				activeSlashItem,
-				actions,
-				commitSnapshot,
-				insertSkillToken,
-				onSlashItemSelect,
-				onSlashActiveIndexChange,
-				onSlashQueryChange,
-				onSlashOpenChange
-			});
-		};
-		this.handlePaste = (params) => {
-			const { event, onFilesAdd, commitSnapshot } = params;
-			const files = Array.from(event.clipboardData.files ?? []);
-			if (files.length > 0 && onFilesAdd) {
-				event.preventDefault();
-				onFilesAdd(files);
-				return;
-			}
-			const text = event.clipboardData.getData("text/plain");
-			if (!text) return;
-			event.preventDefault();
-			commitSnapshot(this.controller.insertText(text));
-		};
-		this.handleBlur = (params) => {
-			const { clearSelectedRange, onSlashQueryChange, onSlashOpenChange } = params;
-			clearSelectedRange();
+function createLexicalComposerHandle(params) {
+	return new LexicalComposerHandleOwner(params);
+}
+function getChatComposerContentSignature(nodes) {
+	return JSON.stringify(nodes.map((node) => node.type === "text" ? {
+		text: node.text,
+		type: node.type
+	} : {
+		label: node.label,
+		tokenKey: node.tokenKey,
+		tokenKind: node.tokenKind,
+		type: node.type
+	}));
+}
+function handleLexicalComposerBeforeInput(params) {
+	const { disabled, event, isComposing, publishSnapshot, snapshotReader } = params;
+	const nativeEvent = event.nativeEvent;
+	const shouldInsertText = nativeEvent.inputType === "insertText" || nativeEvent.inputType === "insertReplacementText";
+	if (disabled || isComposing || nativeEvent.isComposing || !shouldInsertText || !nativeEvent.data) return;
+	event.preventDefault();
+	publishSnapshot(replaceChatComposerSelectionWithText({
+		nodes: snapshotReader().nodes,
+		selection: snapshotReader().selection,
+		text: nativeEvent.data
+	}));
+}
+function handleLexicalComposerCompositionEnd(params) {
+	const { data, fallbackSnapshot, publishSnapshot, snapshotReader } = params;
+	const currentSnapshot = snapshotReader();
+	const editorSnapshot = fallbackSnapshot();
+	publishSnapshot(getChatComposerContentSignature(editorSnapshot.nodes) !== getChatComposerContentSignature(currentSnapshot.nodes) ? editorSnapshot : data.length > 0 ? replaceChatComposerSelectionWithText({
+		nodes: currentSnapshot.nodes,
+		selection: currentSnapshot.selection,
+		text: data
+	}) : editorSnapshot, { forcePublish: true });
+}
+function handleLexicalComposerKeyboardCommand(params) {
+	const { actions, activeSlashIndex, nativeEvent, onSlashActiveIndexChange, onSlashItemSelect, onSlashOpenChange, onSlashQueryChange, publishSnapshot, slashItems, snapshot } = params;
+	const action = resolveLexicalComposerKeyboardAction({
+		activeSlashIndex,
+		canStopGeneration: actions.canStopGeneration,
+		isComposing: nativeEvent.isComposing,
+		isSending: actions.isSending,
+		isSlashMenuOpen: resolveChatComposerSlashTrigger(snapshot.nodes, snapshot.selection) !== null,
+		key: nativeEvent.key,
+		shiftKey: nativeEvent.shiftKey,
+		slashItemCount: slashItems.length
+	});
+	const activeSlashItem = slashItems[activeSlashIndex] ?? null;
+	if (action.type !== "noop") nativeEvent.preventDefault();
+	switch (action.type) {
+		case "move-slash-index":
+			onSlashActiveIndexChange(action.index);
+			return true;
+		case "insert-active-slash-item":
+			if (!activeSlashItem) return true;
+			onSlashItemSelect?.(activeSlashItem);
+			publishSnapshot(insertSkillTokenIntoChatComposer({
+				label: activeSlashItem.title,
+				nodes: snapshot.nodes,
+				selection: snapshot.selection,
+				tokenKey: activeSlashItem.value ?? activeSlashItem.key
+			}), { focusAfterSync: true });
+			return true;
+		case "close-slash":
 			onSlashQueryChange?.(null);
 			onSlashOpenChange(false);
-		};
-		this.applyKeyboardAction = (params) => {
-			const { action, activeSlashItem, actions, commitSnapshot, insertSkillToken, onSlashItemSelect, onSlashActiveIndexChange, onSlashQueryChange, onSlashOpenChange } = params;
-			switch (action.type) {
-				case "move-slash-index":
-					onSlashActiveIndexChange(action.index);
-					return;
-				case "insert-active-slash-item":
-					if (!activeSlashItem) return;
-					onSlashItemSelect?.(activeSlashItem);
-					insertSkillToken(activeSlashItem.value ?? activeSlashItem.key, activeSlashItem.title);
-					return;
-				case "close-slash":
-					onSlashQueryChange?.(null);
-					onSlashOpenChange(false);
-					return;
-				case "consume": return;
-				case "stop-generation":
-					actions.onStop();
-					return;
-				case "insert-line-break":
-					commitSnapshot(this.controller.insertText("\n"));
-					return;
-				case "send-message":
-					actions.onSend();
-					return;
-				case "delete-content":
-					commitSnapshot(this.controller.deleteContent(action.direction));
-					return;
-				case "noop": return;
-			}
-		};
+			return true;
+		case "consume": return true;
+		case "stop-generation":
+			actions.onStop();
+			return true;
+		case "insert-line-break":
+			publishSnapshot(replaceChatComposerSelectionWithText({
+				nodes: snapshot.nodes,
+				selection: snapshot.selection,
+				text: "\n"
+			}));
+			return true;
+		case "send-message":
+			actions.onSend();
+			return true;
+		case "delete-content":
+			publishSnapshot(deleteChatComposerContent({
+				direction: action.direction,
+				nodes: snapshot.nodes,
+				selection: snapshot.selection
+			}));
+			return true;
+		case "noop": return false;
 	}
-};
+}
 //#endregion
-//#region src/components/chat/ui/chat-input-bar/chat-composer-runtime.ts
-var ChatComposerRuntime = class {
-	constructor() {
-		this.controller = new ChatComposerController();
-		this.viewController = new ChatComposerViewController(this.controller);
-		this.rootElement = null;
-		this.selection = null;
-		this.selectedRange = null;
-		this.snapshot = this.controller.getSnapshot();
-		this.config = null;
-		this.isComposing = false;
-		this.hasPendingImeComposition = false;
-		this.bindRootElement = (node) => {
-			this.rootElement = node;
-		};
-		this.update = (config) => {
-			this.config = config;
-			this.snapshot = this.viewController.sync(config.nodes, this.selectedRange);
-			return {
-				snapshot: this.snapshot,
-				selectedRange: this.selectedRange,
-				bindRootElement: this.bindRootElement,
-				handleBeforeInput: this.handleBeforeInput,
-				handleInput: this.handleInput,
-				handleCompositionStart: this.handleCompositionStart,
-				handleCompositionEnd: this.handleCompositionEnd,
-				handleKeyDown: this.handleKeyDown,
-				handlePaste: this.handlePaste,
-				handleBlur: this.handleBlur,
-				syncSelectionState: this.syncSelectionState,
-				imperativeHandle: this.createHandle()
-			};
-		};
-		this.createHandle = () => {
-			return {
-				insertSlashItem: (item) => {
-					this.config?.onSlashItemSelect?.(item);
-					this.viewController.insertSlashItem(item, this.commitSnapshot);
-				},
-				insertFileToken: (tokenKey, label) => {
-					this.commitSnapshot(this.controller.insertFileToken(tokenKey, label));
-					this.focusComposerSoon();
-				},
-				insertFileTokens: (tokens) => {
-					let nextSnapshot = null;
-					for (const token of tokens) nextSnapshot = this.controller.insertFileToken(token.tokenKey, token.label);
-					if (nextSnapshot) {
-						this.commitSnapshot(nextSnapshot);
-						this.focusComposerSoon();
-					}
-				},
-				focusComposer: () => {
-					this.focusComposer();
-				},
-				syncSelectedSkills: (nextKeys, options) => {
-					this.viewController.syncSelectedSkills(nextKeys, options, this.commitSnapshot);
-				}
-			};
-		};
-		this.restoreDomAfterCommit = () => {
-			if (this.shouldSuspendDomSync()) return;
-			this.viewController.restoreSelectionIfFocused(this.rootElement, this.selection);
-		};
-		this.renderSurface = () => {
-			if (this.shouldSuspendDomSync()) return;
-			this.viewController.renderSurface({
-				root: this.rootElement,
-				snapshot: this.snapshot,
-				selectedRange: this.selectedRange
-			});
-		};
-		this.syncViewport = () => {
-			this.viewController.syncViewport(this.rootElement);
-		};
-		this.syncSelectionState = () => {
-			if (!this.rootElement || this.shouldSuspendDomSync()) return;
-			const nextSnapshot = this.viewController.syncSelectionFromRoot(this.rootElement);
-			this.selection = nextSnapshot.selection;
-			this.selectedRange = nextSnapshot.selection;
-			this.syncSlashState(nextSnapshot);
-			this.requestRender();
-		};
-		this.handleBeforeInput = (event) => {
-			this.syncImeGuardFromInputEvent(event.nativeEvent);
-			this.viewController.handleBeforeInput({
-				event,
-				disabled: this.requireConfig().disabled,
-				isComposing: this.shouldSuspendDomSync(),
-				commitSnapshot: this.commitSnapshot
-			});
-		};
-		this.handleInput = (event) => {
-			this.syncImeGuardFromInputEvent(event.nativeEvent);
-			this.viewController.handleInput({
-				event,
-				isComposing: this.shouldSuspendDomSync(),
-				commitSnapshot: this.commitSnapshot
-			});
-		};
-		this.handleCompositionStart = () => {
-			this.hasPendingImeComposition = false;
-			this.isComposing = true;
-		};
-		this.handleCompositionEnd = (event) => {
-			this.hasPendingImeComposition = false;
-			this.isComposing = false;
-			this.viewController.handleCompositionEnd({
-				event,
-				commitSnapshot: this.commitSnapshot
-			});
-		};
-		this.handleKeyDown = (event) => {
-			const config = this.requireConfig();
-			this.syncImeGuardFromKeyboardEvent(event);
-			if (this.rootElement && !this.shouldSuspendDomSync()) {
-				const nextSnapshot = this.viewController.syncSelectionFromRoot(this.rootElement);
-				this.selection = nextSnapshot.selection;
-				this.selectedRange = nextSnapshot.selection;
-				this.snapshot = nextSnapshot;
-			}
-			const activeSlashItem = config.slashItems[config.activeSlashIndex] ?? null;
-			this.viewController.handleKeyDown({
-				event,
-				slashItems: config.slashItems,
-				activeSlashIndex: config.activeSlashIndex,
-				activeSlashItem,
-				actions: config.actions,
-				commitSnapshot: this.commitSnapshot,
-				insertSkillToken: this.insertSkillToken,
-				onSlashItemSelect: config.onSlashItemSelect,
-				onSlashActiveIndexChange: config.onSlashActiveIndexChange,
-				onSlashQueryChange: config.onSlashQueryChange,
-				onSlashOpenChange: config.onSlashOpenChange
-			});
-		};
-		this.handlePaste = (event) => {
-			this.viewController.handlePaste({
-				event,
-				onFilesAdd: this.requireConfig().onFilesAdd,
-				commitSnapshot: this.commitSnapshot
-			});
+//#region src/components/chat/ui/chat-input-bar/lexical/chat-composer-plugins.tsx
+function ChatComposerBindingsPlugin(props) {
+	const [editor] = useLexicalComposerContext();
+	useLayoutEffect(() => {
+		props.editorRef.current = editor;
+		return () => {
+			if (props.editorRef.current === editor) props.editorRef.current = null;
 		};
-		this.handleBlur = () => {
-			const config = this.requireConfig();
-			this.hasPendingImeComposition = false;
-			this.isComposing = false;
-			this.viewController.handleBlur({
-				clearSelectedRange: this.clearSelectedRange,
-				onSlashQueryChange: config.onSlashQueryChange,
-				onSlashOpenChange: config.onSlashOpenChange
+	}, [editor, props.editorRef]);
+	useLayoutEffect(() => {
+		editor.setEditable(!props.disabled);
+	}, [editor, props.disabled]);
+	useLayoutEffect(() => {
+		const nextSignature = getChatComposerNodesSignature(props.nodes);
+		const pendingSelection = props.pendingSelectionRef.current;
+		const shouldSyncDocument = nextSignature !== props.editorSignatureRef.current;
+		if (!shouldSyncDocument && !pendingSelection) return;
+		props.isApplyingExternalUpdateRef.current = true;
+		if (shouldSyncDocument) {
+			syncLexicalEditorFromChatComposerState(editor, props.nodes, pendingSelection);
+			props.editorSignatureRef.current = nextSignature;
+			props.lastPublishedSignatureRef.current = nextSignature;
+		} else if (pendingSelection) syncLexicalSelectionFromChatComposerSelection(editor, pendingSelection);
+		if (pendingSelection) {
+			props.selectionRef.current = pendingSelection;
+			props.pendingSelectionRef.current = null;
+		}
+		if (props.shouldFocusAfterSyncRef.current) {
+			props.shouldFocusAfterSyncRef.current = false;
+			const targetSelection = props.selectionRef.current;
+			editor.focus(() => {
+				if (targetSelection) syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
 			});
-		};
-		this.setSelectedRange = (selection) => {
-			this.selectedRange = selection;
-			this.selection = selection;
-			this.requestRender();
-		};
-		this.clearSelectedRange = () => {
-			this.selectedRange = null;
-			this.requestRender();
-		};
-		this.commitSnapshot = (nextSnapshot) => {
-			const config = this.requireConfig();
-			this.selection = nextSnapshot.selection;
-			this.selectedRange = nextSnapshot.selection;
-			this.snapshot = nextSnapshot;
-			config.onNodesChange(nextSnapshot.nodes);
-			this.syncSlashState(nextSnapshot);
-		};
-		this.insertSkillToken = (tokenKey, label) => {
-			this.commitSnapshot(this.controller.insertSkillToken(tokenKey, label));
-		};
-		this.syncSlashState = (nextSnapshot) => {
-			const config = this.requireConfig();
-			config.onSlashTriggerChange?.(nextSnapshot.slashTrigger);
-			config.onSlashQueryChange?.(nextSnapshot.slashTrigger?.query ?? null);
-			config.onSlashOpenChange(nextSnapshot.slashTrigger !== null);
-		};
-		this.requestRender = () => {
-			this.requireConfig().requestRender();
-		};
-		this.shouldSuspendDomSync = () => {
-			return this.isComposing || this.hasPendingImeComposition;
-		};
-		this.syncImeGuardFromKeyboardEvent = (event) => {
-			const { nativeEvent } = event;
-			const keyCode = nativeEvent.keyCode || nativeEvent.which || event.keyCode || event.which;
-			if (nativeEvent.isComposing || event.key === "Process" || event.key === "Unidentified" || keyCode === 229) {
-				this.hasPendingImeComposition = true;
-				return;
-			}
-			this.hasPendingImeComposition = false;
-		};
-		this.syncImeGuardFromInputEvent = (nativeEvent) => {
-			if (nativeEvent.isComposing || this.isCompositionInputType(nativeEvent.inputType)) {
-				this.hasPendingImeComposition = true;
-				return;
-			}
-			this.hasPendingImeComposition = false;
-		};
-		this.isCompositionInputType = (inputType) => {
-			return typeof inputType === "string" && inputType.toLowerCase().includes("composition");
-		};
-		this.focusComposerSoon = () => {
-			if (typeof requestAnimationFrame === "function") {
-				requestAnimationFrame(() => this.focusComposer());
-				return;
-			}
-			this.focusComposer();
-		};
-		this.focusComposer = () => {
-			if (!this.rootElement) return;
-			const targetSelection = this.selection;
-			this.rootElement.focus();
-			const restoreSelection = () => {
-				if (!this.rootElement) return;
-				this.selection = targetSelection;
-				this.selectedRange = targetSelection;
-				this.viewController.restoreSelectionIfFocused(this.rootElement, targetSelection);
-			};
-			if (typeof requestAnimationFrame === "function") {
-				requestAnimationFrame(restoreSelection);
-				return;
-			}
-			restoreSelection();
-		};
-		this.requireConfig = () => {
-			if (!this.config) throw new Error("ChatComposerRuntime is not configured.");
-			return this.config;
-		};
-	}
-};
+		}
+		requestAnimationFrame(() => {
+			props.isApplyingExternalUpdateRef.current = false;
+		});
+	}, [
+		editor,
+		props.editorSignatureRef,
+		props.isApplyingExternalUpdateRef,
+		props.lastPublishedSignatureRef,
+		props.nodes,
+		props.pendingSelectionRef,
+		props.selectionRef,
+		props.shouldFocusAfterSyncRef
+	]);
+	useEffect(() => {
+		return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+			const snapshot = readChatComposerSnapshotFromEditorState(editorState);
+			const signature = getChatComposerNodesSignature(snapshot.nodes);
+			props.selectionRef.current = snapshot.selection;
+			props.editorSignatureRef.current = signature;
+			props.syncSlashState(snapshot.nodes, snapshot.selection);
+			if (props.isApplyingExternalUpdateRef.current || props.isComposingRef.current) return;
+			if (signature === props.lastPublishedSignatureRef.current) return;
+			props.lastPublishedSignatureRef.current = signature;
+			props.onNodesChange(snapshot.nodes);
+		}), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+			const snapshot = readChatComposerSnapshotFromEditorState(editor.getEditorState());
+			props.selectionRef.current = snapshot.selection;
+			if (!props.isComposingRef.current) props.syncSlashState(snapshot.nodes, snapshot.selection);
+			return false;
+		}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(BLUR_COMMAND, () => {
+			props.onBlur();
+			return false;
+		}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(KEY_DOWN_COMMAND, (event) => props.onKeyDown(event), COMMAND_PRIORITY_HIGH));
+	}, [
+		editor,
+		props.editorSignatureRef,
+		props.isApplyingExternalUpdateRef,
+		props.isComposingRef,
+		props.lastPublishedSignatureRef,
+		props.onBlur,
+		props.onKeyDown,
+		props.onNodesChange,
+		props.selectionRef,
+		props.syncSlashState
+	]);
+	return null;
+}
 //#endregion
-//#region src/components/chat/ui/chat-input-bar/chat-input-bar-tokenized-composer.tsx
+//#region src/components/chat/ui/chat-input-bar/lexical/chat-input-bar-tokenized-composer.tsx
 const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedComposer(props, ref) {
-	const { nodes, placeholder, disabled, slashItems, onSlashItemSelect, actions, onNodesChange, onFilesAdd, onSlashQueryChange, onSlashTriggerChange, onSlashOpenChange, onSlashActiveIndexChange, activeSlashIndex } = props;
-	const [renderTick, setRenderTick] = useState(0);
-	const [runtime] = useState(() => new ChatComposerRuntime());
-	const { snapshot, bindRootElement, handleBeforeInput, handleInput, handleCompositionStart, handleCompositionEnd, handleKeyDown, handlePaste, handleBlur, syncSelectionState, imperativeHandle } = runtime.update({
-		nodes,
-		disabled,
-		slashItems,
-		onSlashItemSelect,
-		actions,
-		onNodesChange,
-		onFilesAdd,
-		onSlashQueryChange,
-		onSlashTriggerChange,
-		onSlashOpenChange,
-		onSlashActiveIndexChange,
-		activeSlashIndex,
-		requestRender: () => setRenderTick((value) => value + 1)
+	const editorRef = useRef(null);
+	const selectionRef = useRef(null);
+	const pendingSelectionRef = useRef(null);
+	const shouldFocusAfterSyncRef = useRef(false);
+	const isComposingRef = useRef(false);
+	const isApplyingExternalUpdateRef = useRef(false);
+	const editorSignatureRef = useRef("");
+	const lastPublishedSignatureRef = useRef("");
+	const syncSlashState = (nodes, selection) => {
+		const trigger = resolveChatComposerSlashTrigger(nodes, selection);
+		props.onSlashTriggerChange?.(trigger);
+		props.onSlashQueryChange?.(trigger?.query ?? null);
+		props.onSlashOpenChange(trigger !== null);
+	};
+	const readCurrentNodes = () => {
+		return props.nodes;
+	};
+	const readCurrentSelection = () => {
+		if (selectionRef.current) return selectionRef.current;
+		if (!editorRef.current) return null;
+		const snapshot = readChatComposerSnapshotFromEditorState(editorRef.current.getEditorState());
+		selectionRef.current = snapshot.selection;
+		return snapshot.selection;
+	};
+	const publishSnapshot = (snapshot, options) => {
+		selectionRef.current = snapshot.selection;
+		pendingSelectionRef.current = snapshot.selection;
+		if (options?.focusAfterSync) shouldFocusAfterSyncRef.current = true;
+		const signature = getChatComposerNodesSignature(snapshot.nodes);
+		syncSlashState(snapshot.nodes, snapshot.selection);
+		if (options?.forcePublish || signature !== lastPublishedSignatureRef.current) {
+			lastPublishedSignatureRef.current = signature;
+			props.onNodesChange(snapshot.nodes);
+		}
+	};
+	const focusComposer = () => {
+		const editor = editorRef.current;
+		if (!editor) return;
+		const targetSelection = selectionRef.current;
+		editor.focus(() => {
+			if (targetSelection) syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
+		});
+	};
+	const readComposerSnapshot = () => ({
+		nodes: readCurrentNodes(),
+		selection: readCurrentSelection()
 	});
-	useImperativeHandle(ref, () => imperativeHandle, [imperativeHandle]);
-	useLayoutEffect(() => {
-		runtime.renderSurface();
-		runtime.restoreDomAfterCommit();
-		runtime.syncViewport();
-	}, [
-		runtime,
-		snapshot.nodes,
-		snapshot.nodeStartMap,
-		renderTick
-	]);
-	return /* @__PURE__ */ jsx("div", {
-		className: "px-4 py-2.5",
-		children: /* @__PURE__ */ jsx("div", {
-			className: "min-h-[60px]",
-			children: /* @__PURE__ */ jsx("div", {
-				ref: bindRootElement,
-				contentEditable: !disabled,
-				suppressContentEditableWarning: true,
-				role: "textbox",
-				"aria-multiline": "true",
-				"data-placeholder": placeholder,
-				onBeforeInput: handleBeforeInput,
-				onInput: handleInput,
-				onCompositionStart: handleCompositionStart,
-				onCompositionEnd: handleCompositionEnd,
-				onKeyDown: handleKeyDown,
-				onKeyUp: syncSelectionState,
-				onMouseUp: syncSelectionState,
-				onFocus: syncSelectionState,
-				onBlur: handleBlur,
-				onPaste: handlePaste,
-				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 empty:before:pointer-events-none empty:before:text-gray-400 empty:before:content-[attr(data-placeholder)]"
+	useImperativeHandle(ref, () => createLexicalComposerHandle({
+		focusComposer,
+		onSlashItemSelect: props.onSlashItemSelect,
+		optionsReader: readComposerSnapshot,
+		publishSnapshot
+	}), [props.onSlashItemSelect]);
+	return /* @__PURE__ */ jsxs(LexicalComposer, {
+		initialConfig: useMemo(() => ({
+			editable: !props.disabled,
+			editorState: () => {
+				writeChatComposerStateToLexicalRoot(props.nodes, null);
+			},
+			namespace: "NextClawChatComposerLexical",
+			nodes: [ChatComposerTokenNode],
+			onError: (error) => {
+				throw error;
+			},
+			theme: {}
+		}), [props.disabled, props.nodes]),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "px-4 py-2.5",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "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",
+							onBeforeInput: (event) => {
+								handleLexicalComposerBeforeInput({
+									disabled: props.disabled,
+									event,
+									isComposing: isComposingRef.current,
+									publishSnapshot,
+									snapshotReader: readComposerSnapshot
+								});
+							},
+							onCompositionEnd: (event) => {
+								isComposingRef.current = false;
+								const nativeEvent = event.nativeEvent;
+								handleLexicalComposerCompositionEnd({
+									data: typeof nativeEvent.data === "string" ? nativeEvent.data : "",
+									fallbackSnapshot: () => {
+										const editor = editorRef.current;
+										return editor ? readChatComposerSnapshotFromEditorState(editor.getEditorState()) : readComposerSnapshot();
+									},
+									publishSnapshot,
+									snapshotReader: readComposerSnapshot
+								});
+							},
+							onCompositionStart: () => {
+								isComposingRef.current = true;
+							},
+							onPaste: (event) => {
+								const files = Array.from(event.clipboardData.files ?? []);
+								if (files.length > 0 && props.onFilesAdd) {
+									event.preventDefault();
+									props.onFilesAdd(files);
+								}
+							}
+						}),
+						placeholder: /* @__PURE__ */ jsx("div", {
+							className: "pointer-events-none absolute left-4 top-2.5 select-none text-sm leading-6 text-gray-400",
+							children: props.placeholder
+						}),
+						ErrorBoundary: LexicalErrorBoundary
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(EditorRefPlugin, { editorRef }),
+			/* @__PURE__ */ jsx(ChatComposerBindingsPlugin, {
+				disabled: props.disabled,
+				editorRef,
+				editorSignatureRef,
+				isApplyingExternalUpdateRef,
+				isComposingRef,
+				lastPublishedSignatureRef,
+				nodes: props.nodes,
+				onBlur: () => {
+					props.onSlashQueryChange?.(null);
+					props.onSlashOpenChange(false);
+				},
+				onKeyDown: (event) => {
+					const editor = editorRef.current;
+					if (!editor) return false;
+					const snapshot = readChatComposerSnapshotFromEditorState(editor.getEditorState());
+					selectionRef.current = snapshot.selection;
+					return handleLexicalComposerKeyboardCommand({
+						actions: props.actions,
+						activeSlashIndex: props.activeSlashIndex,
+						nativeEvent: event,
+						onSlashActiveIndexChange: props.onSlashActiveIndexChange,
+						onSlashItemSelect: props.onSlashItemSelect,
+						onSlashOpenChange: props.onSlashOpenChange,
+						onSlashQueryChange: props.onSlashQueryChange,
+						publishSnapshot,
+						slashItems: props.slashItems,
+						snapshot
+					});
+				},
+				onNodesChange: props.onNodesChange,
+				pendingSelectionRef,
+				selectionRef,
+				shouldFocusAfterSyncRef,
+				syncSlashState
 			})
-		})
+		]
 	});
 });
+ChatInputBarTokenizedComposer.displayName = "LexicalChatInputBarTokenizedComposer";
 //#endregion
 //#region src/components/chat/ui/chat-input-bar/chat-input-bar.tsx
 function InputBarHint({ hint }) {
@@ -1755,6 +1808,7 @@ const ChatInputBar = forwardRef(function ChatInputBar(props, ref) {
 				...props.toolbar.skillPicker,
 				onSelectedKeysChange: (nextKeys) => {
 					composerRef.current?.syncSelectedSkills(nextKeys, props.toolbar.skillPicker?.options ?? []);
+					props.toolbar.skillPicker?.onSelectedKeysChange(nextKeys);
 				}
 			}
 		};
@@ -2129,29 +2183,17 @@ function ChatMessageInlineContent({ segments, role, texts }) {
 }
 //#endregion
 //#region src/components/chat/ui/chat-message-list/chat-message-file/meta.ts
-const FILE_CATEGORY_LABELS = {
-	archive: "Archive",
-	audio: "Audio",
-	code: "Code",
-	data: "Data",
-	document: "Document",
-	generic: "File",
-	image: "Image",
-	pdf: "PDF",
-	sheet: "Sheet",
-	video: "Video"
-};
 const FILE_CATEGORY_TILE_CLASSES = {
-	archive: "border-amber-200/80 bg-amber-100 text-amber-700",
-	audio: "border-fuchsia-200/80 bg-fuchsia-100 text-fuchsia-700",
-	code: "border-cyan-200/80 bg-cyan-100 text-cyan-700",
-	data: "border-slate-200/80 bg-slate-100 text-slate-700",
-	document: "border-blue-200/80 bg-blue-100 text-blue-700",
-	generic: "border-slate-200/80 bg-slate-100 text-slate-700",
-	image: "border-emerald-200/80 bg-emerald-100 text-emerald-700",
-	pdf: "border-rose-200/80 bg-rose-100 text-rose-700",
-	sheet: "border-lime-200/80 bg-lime-100 text-lime-700",
-	video: "border-violet-200/80 bg-violet-100 text-violet-700"
+	archive: "border-amber-200/80 bg-amber-50 text-amber-700",
+	audio: "border-fuchsia-200/80 bg-fuchsia-50 text-fuchsia-700",
+	code: "border-cyan-200/80 bg-cyan-50 text-cyan-700",
+	data: "border-slate-200/80 bg-slate-50 text-slate-700",
+	document: "border-blue-200/80 bg-blue-50 text-blue-700",
+	generic: "border-slate-200/80 bg-slate-50 text-slate-700",
+	image: "border-emerald-200/80 bg-emerald-50 text-emerald-700",
+	pdf: "border-rose-200/80 bg-rose-50 text-rose-700",
+	sheet: "border-lime-200/80 bg-lime-50 text-lime-700",
+	video: "border-violet-200/80 bg-violet-50 text-violet-700"
 };
 const CODE_EXTENSIONS = new Set([
 	"c",
@@ -2278,22 +2320,30 @@ function buildChatMessageFileMeta(file) {
 	return {
 		category,
 		extension: getFileExtension(file.label, file.mimeType),
-		sizeLabel,
-		metaBadges: [FILE_CATEGORY_LABELS[category], sizeLabel].filter((value) => Boolean(value))
+		sizeLabel
 	};
 }
 //#endregion
 //#region src/components/chat/ui/chat-message-list/chat-message-file/index.tsx
-function renderMetaBadge(label, isUser) {
-	return /* @__PURE__ */ jsx("span", {
-		className: cn("inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium", isUser ? "border-white/12 bg-white/10 text-white/82" : "border-slate-200/80 bg-slate-950/[0.04] text-slate-600"),
-		children: label
-	}, label);
+const DEFAULT_FILE_CATEGORY_LABELS = {
+	archive: "Archive",
+	audio: "Audio",
+	code: "Code file",
+	data: "Data file",
+	document: "Document",
+	generic: "File",
+	image: "Image",
+	pdf: "PDF document",
+	sheet: "Spreadsheet",
+	video: "Video"
+};
+function readFileCategoryLabel(category, texts) {
+	return texts?.attachmentCategoryLabels?.[category] ?? DEFAULT_FILE_CATEGORY_LABELS[category];
 }
-function renderMimeType(mimeType, isUser) {
+function renderMetaLine(categoryLabel, sizeLabel, isUser) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("truncate text-[11px]", isUser ? "text-white/58" : "text-slate-500"),
-		children: mimeType
+		className: cn("mt-1 text-xs leading-5", isUser ? "text-white/70" : "text-slate-500"),
+		children: sizeLabel ? `${categoryLabel} · ${sizeLabel}` : categoryLabel
 	});
 }
 function renderActionPill(label, isUser, isInteractive) {
@@ -2302,18 +2352,39 @@ function renderActionPill(label, isUser, isInteractive) {
 		children: label
 	});
 }
-function ChatMessageFile({ file, isUser = false }) {
-	const { category, extension, metaBadges, sizeLabel } = buildChatMessageFileMeta(file);
+function readFileCategoryIcon(category) {
+	if (category === "archive") return FileArchive;
+	if (category === "audio") return FileAudio2;
+	if (category === "code") return FileCode2;
+	if (category === "data") return FileJson2;
+	if (category === "pdf") return FileText;
+	if (category === "sheet") return FileSpreadsheet;
+	if (category === "image") return FileImage;
+	if (category === "video") return FileVideo2;
+	if (category === "document") return FileText;
+	return File;
+}
+function FileCategoryGlyph({ category, isUser }) {
+	const Icon = readFileCategoryIcon(category);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex h-14 w-14 shrink-0 items-center justify-center rounded-[1rem] border", isUser ? "border-white/12 bg-white/10 text-white" : FILE_CATEGORY_TILE_CLASSES[category]),
+		children: /* @__PURE__ */ jsx(Icon, {
+			className: cn("h-7 w-7", isUser ? "text-white/92" : "text-current"),
+			strokeWidth: 2.2
+		})
+	});
+}
+function ChatMessageFile({ file, isUser = false, texts }) {
+	const { category, extension, sizeLabel } = buildChatMessageFileMeta(file);
 	const renderAsImage = isImageFileLike(file) && Boolean(file.dataUrl);
 	const isInteractive = Boolean(file.dataUrl);
-	const actionLabel = isInteractive ? renderAsImage ? "Open preview" : "Open file" : "Attached";
-	const tileLabel = extension.slice(0, 4);
-	const shellClasses = cn("block overflow-hidden rounded-[1.25rem] border transition duration-200", isUser ? "border-white/12 bg-white/10 text-white shadow-[0_18px_40px_-28px_rgba(15,23,42,0.85)]" : "border-slate-200/80 bg-white/95 text-slate-900 shadow-[0_20px_45px_-30px_rgba(15,23,42,0.28)]", isInteractive && (isUser ? "hover:border-white/18 hover:bg-white/13" : "hover:border-slate-300 hover:bg-white hover:shadow-[0_24px_50px_-30px_rgba(15,23,42,0.3)]"));
+	const actionLabel = isInteractive ? texts?.attachmentOpenLabel ?? "Open" : texts?.attachmentAttachedLabel ?? "Attached";
+	const categoryLabel = readFileCategoryLabel(category, texts);
+	const shellClasses = cn("block overflow-hidden rounded-[1.25rem] border transition duration-200", isUser ? "border-white/12 bg-white/10 text-white" : "border-slate-200/80 bg-white/95 text-slate-900", isInteractive && (isUser ? "hover:border-white/18 hover:bg-white/13" : "hover:border-slate-300 hover:bg-white"));
 	if (renderAsImage && file.dataUrl) return /* @__PURE__ */ jsx("a", {
 		href: file.dataUrl,
 		target: "_blank",
 		rel: "noreferrer",
-		"aria-label": `Open preview: ${file.label}`,
 		className: "group block",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: cn("relative overflow-hidden rounded-[1rem]", isUser ? "ring-1 ring-white/10" : "bg-slate-100/80 ring-1 ring-slate-200/80"),
@@ -2325,7 +2396,7 @@ function ChatMessageFile({ file, isUser = false }) {
 				className: "pointer-events-none absolute right-3 top-3 flex items-center gap-2",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: cn("inline-flex items-center rounded-full px-2 py-1 text-[10px] font-semibold tracking-[0.18em] text-white backdrop-blur-sm", isUser ? "bg-slate-950/36" : "bg-slate-950/58"),
-					children: tileLabel
+					children: categoryLabel
 				}), sizeLabel ? /* @__PURE__ */ jsx("span", {
 					className: cn("inline-flex items-center rounded-full px-2 py-1 text-[10px] font-medium text-white/92 backdrop-blur-sm", isUser ? "bg-slate-950/28" : "bg-slate-950/46"),
 					children: sizeLabel
@@ -2334,35 +2405,22 @@ function ChatMessageFile({ file, isUser = false }) {
 		})
 	});
 	const content = /* @__PURE__ */ jsxs("div", {
-		className: "flex items-start gap-3 p-3.5",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: cn("flex h-14 w-14 shrink-0 items-center justify-center rounded-[1rem] border text-xs font-semibold tracking-[0.22em]", isUser ? "border-white/12 bg-white/10 text-white" : FILE_CATEGORY_TILE_CLASSES[category]),
-			children: tileLabel
-		}), /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-3 p-3.5",
+		children: [/* @__PURE__ */ jsx(FileCategoryGlyph, {
+			category,
+			isUser
+		}), /* @__PURE__ */ jsx("div", {
 			className: "min-w-0 flex-1",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-start gap-3",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "min-w-0 flex-1",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "truncate text-sm font-semibold leading-5",
-							children: file.label
-						}), /* @__PURE__ */ jsxs("div", {
-							className: cn("mt-1 text-xs", isUser ? "text-white/68" : "text-slate-500"),
-							children: [FILE_CATEGORY_LABELS[category], " attachment"]
-						})]
-					}), renderActionPill(actionLabel, isUser, isInteractive)]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "mt-3 flex flex-wrap gap-2",
-					children: metaBadges.map((label) => renderMetaBadge(label, isUser))
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "mt-2",
-					children: renderMimeType(file.mimeType, isUser)
-				})
-			]
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "truncate text-[15px] font-semibold leading-5",
+						children: file.label
+					}), renderMetaLine(categoryLabel, sizeLabel, isUser)]
+				}), renderActionPill(actionLabel, isUser, isInteractive)]
+			})
 		})]
 	});
 	if (!isInteractive) return /* @__PURE__ */ jsx("div", {
@@ -2373,7 +2431,6 @@ function ChatMessageFile({ file, isUser = false }) {
 		href: file.dataUrl,
 		target: "_blank",
 		rel: "noreferrer",
-		"aria-label": `Open file: ${file.label}`,
 		className: cn(shellClasses, "group"),
 		children: content
 	});
@@ -2409,19 +2466,113 @@ function useReasoningBlockOpenState(params) {
 	};
 }
 //#endregion
+//#region src/components/chat/hooks/use-sticky-bottom-scroll.ts
+const DEFAULT_STICKY_THRESHOLD_PX = 10;
+function scrollElementToBottom(element) {
+	element.scrollTop = element.scrollHeight;
+}
+function queueScrollToBottom(params) {
+	if (!params.scrollRef.current) return;
+	if (params.scheduledScrollFrameRef.current !== null) cancelAnimationFrame(params.scheduledScrollFrameRef.current);
+	params.scheduledScrollFrameRef.current = requestAnimationFrame(() => {
+		params.scheduledScrollFrameRef.current = null;
+		const currentElement = params.scrollRef.current;
+		if (!currentElement) return;
+		params.isProgrammaticScrollRef.current = true;
+		scrollElementToBottom(currentElement);
+	});
+}
+function useStickyBottomScroll(params) {
+	const isStickyRef = useRef(true);
+	const isProgrammaticScrollRef = useRef(false);
+	const previousResetKeyRef = useRef(null);
+	const pendingInitialScrollRef = useRef(false);
+	const scheduledScrollFrameRef = useRef(null);
+	const onScroll = () => {
+		if (isProgrammaticScrollRef.current) {
+			isProgrammaticScrollRef.current = false;
+			return;
+		}
+		const element = params.scrollRef.current;
+		if (!element) return;
+		isStickyRef.current = element.scrollHeight - element.scrollTop - element.clientHeight <= (params.stickyThresholdPx ?? DEFAULT_STICKY_THRESHOLD_PX);
+	};
+	useEffect(() => {
+		if (previousResetKeyRef.current === params.resetKey) return;
+		previousResetKeyRef.current = params.resetKey;
+		isStickyRef.current = true;
+		pendingInitialScrollRef.current = true;
+	}, [params.resetKey]);
+	useEffect(() => {
+		const scheduledScrollFrame = scheduledScrollFrameRef.current;
+		return () => {
+			if (scheduledScrollFrame !== null) cancelAnimationFrame(scheduledScrollFrame);
+		};
+	}, []);
+	useLayoutEffect(() => {
+		if (!pendingInitialScrollRef.current || params.isLoading || !params.hasContent) return;
+		if (!params.scrollRef.current) return;
+		pendingInitialScrollRef.current = false;
+		queueScrollToBottom({
+			scrollRef: params.scrollRef,
+			scheduledScrollFrameRef,
+			isProgrammaticScrollRef
+		});
+	}, [
+		params.hasContent,
+		params.isLoading,
+		params.scrollRef
+	]);
+	useLayoutEffect(() => {
+		if (!isStickyRef.current || !params.hasContent) return;
+		if (!params.scrollRef.current) return;
+		queueScrollToBottom({
+			scrollRef: params.scrollRef,
+			scheduledScrollFrameRef,
+			isProgrammaticScrollRef
+		});
+	}, [
+		params.contentVersion,
+		params.hasContent,
+		params.scrollRef
+	]);
+	return { onScroll };
+}
+//#endregion
 //#region src/components/chat/ui/chat-message-list/chat-reasoning-block.tsx
+function normalizeReasoningLabel(label) {
+	const normalizedLabel = label.trim().toLowerCase();
+	if (normalizedLabel === "reasoning" || normalizedLabel === "thinking" || normalizedLabel === "推理" || normalizedLabel === "推理过程" || normalizedLabel === "思考过程" || normalizedLabel === "思考") return "思考";
+	return label;
+}
 function ChatReasoningBlock({ label, text, isUser, isInProgress }) {
 	const { isOpen, onSummaryClick } = useReasoningBlockOpenState({ isInProgress });
+	const scrollRef = useRef(null);
+	const displayLabel = normalizeReasoningLabel(label);
+	const { onScroll } = useStickyBottomScroll({
+		scrollRef,
+		resetKey: `${displayLabel}:${isInProgress ? "streaming" : "idle"}`,
+		isLoading: false,
+		hasContent: text.length > 0,
+		contentVersion: text,
+		stickyThresholdPx: 20
+	});
 	return /* @__PURE__ */ jsxs("details", {
 		className: "mt-2",
 		open: isOpen,
 		children: [/* @__PURE__ */ jsx("summary", {
 			className: cn("cursor-pointer text-xs", isUser ? "text-primary-100" : "text-gray-500"),
 			onClick: onSummaryClick,
-			children: label
-		}), /* @__PURE__ */ jsx("pre", {
-			className: cn("mt-2 w-fit max-w-[500px] whitespace-pre-wrap break-all rounded-lg p-2 text-[11px]", isUser ? "bg-primary-700/60" : "bg-gray-100"),
-			children: text
+			children: displayLabel
+		}), /* @__PURE__ */ jsx("div", {
+			ref: scrollRef,
+			onScroll,
+			"data-reasoning-scroll": "true",
+			className: cn("mt-2 w-fit max-w-[500px] max-h-56 overflow-y-auto overscroll-contain rounded-lg custom-scrollbar-amber", isUser ? "bg-primary-700/60" : "bg-gray-100"),
+			children: /* @__PURE__ */ jsx("pre", {
+				className: "min-w-0 whitespace-pre-wrap break-all p-2 text-[11px]",
+				children: text
+			})
 		})]
 	});
 }
@@ -2541,79 +2692,6 @@ function ToolCardHeaderSessionAction({ action, onAction }) {
 	});
 }
 //#endregion
-//#region src/components/chat/hooks/use-sticky-bottom-scroll.ts
-const DEFAULT_STICKY_THRESHOLD_PX = 10;
-function scrollElementToBottom(element) {
-	element.scrollTop = element.scrollHeight;
-}
-function queueScrollToBottom(params) {
-	if (!params.scrollRef.current) return;
-	if (params.scheduledScrollFrameRef.current !== null) cancelAnimationFrame(params.scheduledScrollFrameRef.current);
-	params.scheduledScrollFrameRef.current = requestAnimationFrame(() => {
-		params.scheduledScrollFrameRef.current = null;
-		const currentElement = params.scrollRef.current;
-		if (!currentElement) return;
-		params.isProgrammaticScrollRef.current = true;
-		scrollElementToBottom(currentElement);
-	});
-}
-function useStickyBottomScroll(params) {
-	const isStickyRef = useRef(true);
-	const isProgrammaticScrollRef = useRef(false);
-	const previousResetKeyRef = useRef(null);
-	const pendingInitialScrollRef = useRef(false);
-	const scheduledScrollFrameRef = useRef(null);
-	const onScroll = () => {
-		if (isProgrammaticScrollRef.current) {
-			isProgrammaticScrollRef.current = false;
-			return;
-		}
-		const element = params.scrollRef.current;
-		if (!element) return;
-		isStickyRef.current = element.scrollHeight - element.scrollTop - element.clientHeight <= (params.stickyThresholdPx ?? DEFAULT_STICKY_THRESHOLD_PX);
-	};
-	useEffect(() => {
-		if (previousResetKeyRef.current === params.resetKey) return;
-		previousResetKeyRef.current = params.resetKey;
-		isStickyRef.current = true;
-		pendingInitialScrollRef.current = true;
-	}, [params.resetKey]);
-	useEffect(() => {
-		const scheduledScrollFrame = scheduledScrollFrameRef.current;
-		return () => {
-			if (scheduledScrollFrame !== null) cancelAnimationFrame(scheduledScrollFrame);
-		};
-	}, []);
-	useLayoutEffect(() => {
-		if (!pendingInitialScrollRef.current || params.isLoading || !params.hasContent) return;
-		if (!params.scrollRef.current) return;
-		pendingInitialScrollRef.current = false;
-		queueScrollToBottom({
-			scrollRef: params.scrollRef,
-			scheduledScrollFrameRef,
-			isProgrammaticScrollRef
-		});
-	}, [
-		params.hasContent,
-		params.isLoading,
-		params.scrollRef
-	]);
-	useLayoutEffect(() => {
-		if (!isStickyRef.current || !params.hasContent) return;
-		if (!params.scrollRef.current) return;
-		queueScrollToBottom({
-			scrollRef: params.scrollRef,
-			scheduledScrollFrameRef,
-			isProgrammaticScrollRef
-		});
-	}, [
-		params.contentVersion,
-		params.hasContent,
-		params.scrollRef
-	]);
-	return { onScroll };
-}
-//#endregion
 //#region src/components/chat/ui/chat-message-list/tool-card/tool-card-file-operation-lines.tsx
 const FILE_ROW_CLASS_NAME = "h-5 font-mono text-[11px] leading-5";
 const FILE_GUTTER_NUMBER_CELL_CLASS_NAME = "sticky left-0 z-[1] flex h-5 items-center justify-center px-2.5 tabular-nums select-none";
@@ -2862,6 +2940,9 @@ function normalizeTerminalOutput(rawOutput, structuredOutput) {
 		return stripAnsi(rawOutput);
 	}
 }
+function shouldAutoExpandRunningFileOperation(toolName) {
+	return toolName === "write_file" || toolName === "edit_file";
+}
 function useToolCardExpandedState({ canExpand, isRunning, autoExpandWhileRunning = true, expandOnError = false, statusTone }) {
 	const [expanded, setExpanded] = useState(false);
 	const [hasUserToggled, setHasUserToggled] = useState(false);
@@ -2962,6 +3043,7 @@ function TerminalExecutionView({ card }) {
 	const { expanded, onToggle } = useToolCardExpandedState({
 		canExpand: output.trim().length > 0 || isRunning,
 		isRunning,
+		autoExpandWhileRunning: false,
 		expandOnError: hasContent,
 		statusTone: card.statusTone
 	});
@@ -3003,7 +3085,7 @@ function FileOperationView({ card }) {
 		if (block.rawText) return count + block.rawText.length;
 		return count + block.lines.reduce((lineCount, line) => lineCount + line.text.length + 1, 0);
 	}, 0);
-	const shouldAutoExpandWhileRunning = !(isRunning && card.toolName === "write_file" && (previewLineCount > 24 || previewCharCount > 1200));
+	const shouldAutoExpandWhileRunning = shouldAutoExpandRunningFileOperation(card.toolName) && !(isRunning && card.toolName === "write_file" && (previewLineCount > 24 || previewCharCount > 1200));
 	const { expanded, onToggle } = useToolCardExpandedState({
 		canExpand: hasContent || isRunning,
 		isRunning,
@@ -3029,6 +3111,7 @@ function SearchSnippetView({ card }) {
 	const { expanded, onToggle } = useToolCardExpandedState({
 		canExpand: !!output || isRunning,
 		isRunning,
+		autoExpandWhileRunning: false,
 		statusTone: card.statusTone
 	});
 	return /* @__PURE__ */ jsxs(ToolCardRoot, { children: [/* @__PURE__ */ jsx(ToolCardHeader, {
@@ -3054,6 +3137,7 @@ function GenericToolCard({ card, onToolAction, renderToolAgent }) {
 	const { expanded, onToggle } = useToolCardExpandedState({
 		canExpand: hasContent || isRunning,
 		isRunning,
+		autoExpandWhileRunning: false,
 		statusTone: card.statusTone
 	});
 	return /* @__PURE__ */ jsxs(ToolCardRoot, { children: [/* @__PURE__ */ jsx(ToolCardHeader, {
@@ -3164,7 +3248,8 @@ const ChatMessage = memo(function ChatMessage(props) {
 				}, `tool-${index}`);
 				if (type === "file") return /* @__PURE__ */ jsx(ChatMessageFile, {
 					file: part.file,
-					isUser
+					isUser,
+					texts
 				}, `file-${index}`);
 				if (type === "unknown") return /* @__PURE__ */ jsx(ChatUnknownPart, {
 					label: part.label,