@nextclaw/agent-chat-ui 0.3.7 → 0.3.8

package/dist/index.js

@@ -2303,6 +2303,25 @@ const IMAGE_EXTENSIONS = new Set([
 	"tiff",
 	"webp"
 ]);
+const AUDIO_EXTENSIONS = new Set([
+	"aac",
+	"flac",
+	"m4a",
+	"mp3",
+	"ogg",
+	"opus",
+	"wav",
+	"weba"
+]);
+const VIDEO_EXTENSIONS = new Set([
+	"avi",
+	"m4v",
+	"mov",
+	"mp4",
+	"mkv",
+	"webm",
+	"wmv"
+]);
 const DOCUMENT_EXTENSIONS = new Set([
 	"doc",
 	"docx",
@@ -2360,6 +2379,36 @@ function readFileExtension(label) {
 function isImageDataUrl(dataUrl) {
 	return typeof dataUrl === "string" && /^data:image\//i.test(dataUrl.trim());
 }
+function inferMimeTypeFromExtension(extension) {
+	if (IMAGE_EXTENSIONS.has(extension)) {
+		if (extension === "jpg" || extension === "jpeg") return "image/jpeg";
+		if (extension === "svg") return "image/svg+xml";
+		return `image/${extension}`;
+	}
+	if (AUDIO_EXTENSIONS.has(extension)) {
+		if (extension === "mp3") return "audio/mpeg";
+		if (extension === "m4a") return "audio/mp4";
+		if (extension === "weba") return "audio/webm";
+		return `audio/${extension}`;
+	}
+	if (VIDEO_EXTENSIONS.has(extension)) {
+		if (extension === "mov") return "video/quicktime";
+		if (extension === "m4v") return "video/mp4";
+		return `video/${extension}`;
+	}
+	if (extension === "pdf") return "application/pdf";
+	return null;
+}
+function inferMimeTypeFromFileName(fileName) {
+	const extension = readFileExtension(fileName);
+	if (!extension) return null;
+	return inferMimeTypeFromExtension(extension);
+}
+function resolveRenderableMimeType(file) {
+	const normalizedMimeType = file.mimeType.trim().toLowerCase();
+	if (normalizedMimeType.length > 0 && normalizedMimeType !== "application/octet-stream") return normalizedMimeType;
+	return inferMimeTypeFromFileName(file.label);
+}
 function isImageFileLike(file) {
 	const normalizedMimeType = file.mimeType.trim().toLowerCase();
 	const extension = readFileExtension(file.label);
@@ -2369,8 +2418,8 @@ function resolveFileCategory(label, mimeType) {
 	const extension = readFileExtension(label);
 	const normalizedMimeType = mimeType.toLowerCase();
 	if (normalizedMimeType.startsWith("image/") || IMAGE_EXTENSIONS.has(extension)) return "image";
-	if (normalizedMimeType.startsWith("audio/")) return "audio";
-	if (normalizedMimeType.startsWith("video/")) return "video";
+	if (normalizedMimeType.startsWith("audio/") || AUDIO_EXTENSIONS.has(extension)) return "audio";
+	if (normalizedMimeType.startsWith("video/") || VIDEO_EXTENSIONS.has(extension)) return "video";
 	if (normalizedMimeType.includes("pdf") || extension === "pdf") return "pdf";
 	if (ARCHIVE_EXTENSIONS.has(extension) || /(zip|tar|gzip|rar|compressed|archive)/.test(normalizedMimeType)) return "archive";
 	if (SHEET_EXTENSIONS.has(extension) || /(spreadsheet|sheet|excel|csv)/.test(normalizedMimeType)) return "sheet";
@@ -2402,6 +2451,18 @@ const DEFAULT_FILE_CATEGORY_LABELS = {
 	sheet: "Spreadsheet",
 	video: "Video"
 };
+const FILE_CATEGORY_ICONS = {
+	archive: FileArchive,
+	audio: FileAudio2,
+	code: FileCode2,
+	data: FileJson2,
+	document: FileText,
+	generic: File,
+	image: FileImage,
+	pdf: FileText,
+	sheet: FileSpreadsheet,
+	video: FileVideo2
+};
 function readFileCategoryLabel(category, texts) {
 	return texts?.attachmentCategoryLabels?.[category] ?? DEFAULT_FILE_CATEGORY_LABELS[category];
 }
@@ -2417,20 +2478,17 @@ function renderActionPill(label, isUser, isInteractive) {
 		children: label
 	});
 }
-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 renderActionLink(label, href, isUser) {
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		target: "_blank",
+		rel: "noreferrer",
+		className: cn("inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium transition duration-200", isUser ? "border-white/14 bg-white/12 text-white hover:border-white/20 hover:bg-white/16" : "border-slate-200/80 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"),
+		children: label
+	});
 }
 function FileCategoryGlyph({ category, isUser }) {
-	const Icon = readFileCategoryIcon(category);
+	const Icon = FILE_CATEGORY_ICONS[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, {
@@ -2439,14 +2497,10 @@ function FileCategoryGlyph({ category, isUser }) {
 		})
 	});
 }
-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 ? 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", {
+function renderImagePreview(params) {
+	const { file, categoryLabel, sizeLabel, isUser } = params;
+	if (!file.dataUrl) return null;
+	return /* @__PURE__ */ jsx("a", {
 		href: file.dataUrl,
 		target: "_blank",
 		rel: "noreferrer",
@@ -2469,7 +2523,10 @@ function ChatMessageFile({ file, isUser = false, texts }) {
 			})]
 		})
 	});
-	const content = /* @__PURE__ */ jsxs("div", {
+}
+function renderFileCardHeader(params) {
+	const { category, file, categoryLabel, sizeLabel, isUser, action } = params;
+	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-3 p-3.5",
 		children: [/* @__PURE__ */ jsx(FileCategoryGlyph, {
 			category,
@@ -2484,11 +2541,85 @@ function ChatMessageFile({ file, isUser = false, texts }) {
 						className: "truncate text-[15px] font-semibold leading-5",
 						children: file.label
 					}), renderMetaLine(categoryLabel, sizeLabel, isUser)]
-				}), renderActionPill(actionLabel, isUser, isInteractive)]
+				}), action]
 			})
 		})]
 	});
-	if (!isInteractive) return /* @__PURE__ */ jsx("div", {
+}
+function renderInlineMediaCard(params) {
+	const { category, file, categoryLabel, sizeLabel, isUser, shellClasses, actionLabel } = params;
+	if (!file.dataUrl || category !== "audio" && category !== "video") return null;
+	const mediaMimeType = resolveRenderableMimeType(file);
+	return /* @__PURE__ */ jsxs("div", {
+		className: shellClasses,
+		children: [renderFileCardHeader({
+			category,
+			file,
+			categoryLabel,
+			sizeLabel,
+			isUser,
+			action: renderActionLink(actionLabel, file.dataUrl, isUser)
+		}), /* @__PURE__ */ jsx("div", {
+			className: "px-3.5 pb-3.5",
+			children: category === "audio" ? /* @__PURE__ */ jsx("audio", {
+				controls: true,
+				preload: "metadata",
+				"aria-label": file.label,
+				className: "block w-full",
+				children: /* @__PURE__ */ jsx("source", {
+					src: file.dataUrl,
+					...mediaMimeType ? { type: mediaMimeType } : {}
+				})
+			}) : /* @__PURE__ */ jsx("div", {
+				className: cn("overflow-hidden rounded-[1rem] border", isUser ? "border-white/10 bg-slate-950/26" : "border-slate-200/80 bg-slate-100/80"),
+				children: /* @__PURE__ */ jsx("video", {
+					controls: true,
+					preload: "metadata",
+					playsInline: true,
+					"aria-label": file.label,
+					className: "block max-h-[28rem] w-full bg-black",
+					children: /* @__PURE__ */ jsx("source", {
+						src: file.dataUrl,
+						...mediaMimeType ? { type: mediaMimeType } : {}
+					})
+				})
+			})
+		})]
+	});
+}
+function ChatMessageFile({ file, isUser = false, texts }) {
+	const { category, sizeLabel } = buildChatMessageFileMeta(file);
+	const renderAsImage = isImageFileLike(file) && Boolean(file.dataUrl);
+	const renderAsAudio = category === "audio" && Boolean(file.dataUrl);
+	const renderAsVideo = category === "video" && Boolean(file.dataUrl);
+	const isInteractive = Boolean(file.dataUrl);
+	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) return renderImagePreview({
+		file,
+		categoryLabel,
+		sizeLabel,
+		isUser
+	});
+	if (renderAsAudio || renderAsVideo) return renderInlineMediaCard({
+		category,
+		file,
+		categoryLabel,
+		sizeLabel,
+		isUser,
+		shellClasses,
+		actionLabel
+	});
+	const content = renderFileCardHeader({
+		category,
+		file,
+		categoryLabel,
+		sizeLabel,
+		isUser,
+		action: renderActionPill(actionLabel, isUser, isInteractive)
+	});
+	if (!isInteractive || !file.dataUrl) return /* @__PURE__ */ jsx("div", {
 		className: shellClasses,
 		children: content
 	});
@@ -2759,13 +2890,11 @@ function ToolCardHeaderSessionAction({ action, onAction }) {
 //#endregion
 //#region src/components/chat/ui/chat-message-list/tool-card/tool-card-file-operation-lines.tsx
 const FILE_TEXT_CLASS_NAME = "font-mono text-[11px] leading-5";
-const FILE_ROW_CLASS_NAME = `h-5 ${FILE_TEXT_CLASS_NAME}`;
+const FILE_ROW_CLASS_NAME = `flex h-5 w-full ${FILE_TEXT_CLASS_NAME}`;
 const FILE_LINE_NUMBER_CELL_CLASS_NAME = "flex h-5 items-center justify-center px-2.5 tabular-nums select-none";
-function formatLineNumber(value) {
-	return typeof value === "number" ? String(value) : "";
-}
 function readVisibleLineNumber(line) {
-	return formatLineNumber(line.newLineNumber ?? line.oldLineNumber);
+	const value = line.newLineNumber ?? line.oldLineNumber;
+	return typeof value === "number" ? String(value) : "";
 }
 function readLineKey(prefix, line, index) {
 	return `${prefix}-${index}-${line.oldLineNumber ?? "x"}-${line.newLineNumber ?? "x"}`;
@@ -2783,9 +2912,8 @@ function readLineNumberColumnWidth(block) {
 	}, 0);
 	return `${Math.max(6.5, Math.min(8, maxDigits + 3.5))}ch`;
 }
-function buildRowTemplateColumns(params) {
-	if (!params.showLineNumbers) return;
-	return { gridTemplateColumns: `${params.lineNumberColumnWidth} minmax(0, 1fr)` };
+function readCodeColumnWidth(block) {
+	return `calc(${block.lines.reduce((currentMax, line) => Math.max(currentMax, Math.max(1, line.text.length)), 1)}ch + 1.25rem)`;
 }
 function getLineNumberTone(line) {
 	if (line.kind === "remove") return "border-r border-rose-200 bg-rose-50 text-rose-700";
@@ -2798,29 +2926,27 @@ function getCodeRowTone(line) {
 	return "bg-white text-amber-950/80";
 }
 function FileOperationLineNumberCell({ layout, line, lineNumberColumnWidth }) {
-	const lineNumberCellClassName = layout === "compact" ? "sticky left-0 z-[1]" : "w-full shrink-0";
 	return /* @__PURE__ */ jsx("span", {
 		"data-file-line-number-cell": "true",
-		style: layout === "compact" ? { width: lineNumberColumnWidth } : void 0,
-		className: cn(FILE_LINE_NUMBER_CELL_CLASS_NAME, lineNumberCellClassName, getLineNumberTone(line)),
+		style: layout === "compact" ? {
+			width: lineNumberColumnWidth,
+			minWidth: lineNumberColumnWidth
+		} : void 0,
+		className: cn(FILE_LINE_NUMBER_CELL_CLASS_NAME, layout === "compact" ? "sticky left-0 z-[1]" : "w-full shrink-0", getLineNumberTone(line)),
 		children: readVisibleLineNumber(line)
 	});
 }
 function FileOperationCodeCell({ line }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-file-code-row": "true",
-		className: cn("block min-w-full whitespace-pre px-2.5", getCodeRowTone(line)),
+		className: cn("block min-w-0 flex-1 whitespace-pre px-2.5", getCodeRowTone(line)),
 		children: line.text || " "
 	});
 }
 function FileOperationLineRow({ line, showLineNumbers, lineNumberColumnWidth }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-file-line-row": "true",
-		className: cn("grid w-max min-w-full", FILE_ROW_CLASS_NAME),
-		style: buildRowTemplateColumns({
-			showLineNumbers,
-			lineNumberColumnWidth
-		}),
+		className: FILE_ROW_CLASS_NAME,
 		children: [showLineNumbers ? /* @__PURE__ */ jsx(FileOperationLineNumberCell, {
 			layout: "compact",
 			line,
@@ -2831,6 +2957,7 @@ function FileOperationLineRow({ line, showLineNumbers, lineNumberColumnWidth })
 function FileOperationWorkspaceSurface({ block }) {
 	const showLineNumbers = readHasBlockLineNumbers(block);
 	const lineNumberColumnWidth = readLineNumberColumnWidth(block);
+	const codeColumnWidth = readCodeColumnWidth(block);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-file-code-surface": "true",
 		"data-file-code-surface-layout": "workspace",
@@ -2850,11 +2977,16 @@ function FileOperationWorkspaceSurface({ block }) {
 		}) : null, /* @__PURE__ */ jsxs("div", {
 			"data-file-code-canvas": "true",
 			className: "flex h-full min-h-full min-w-0 flex-1 flex-col bg-white",
-			children: [block.lines.map((line, index) => /* @__PURE__ */ jsx("div", {
-				"data-file-code-canvas-row": "true",
-				className: FILE_ROW_CLASS_NAME,
-				children: /* @__PURE__ */ jsx(FileOperationCodeCell, { line })
-			}, readLineKey("code", line, index))), /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 bg-white" })]
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-file-code-stack": "true",
+				className: "min-w-full",
+				style: { minWidth: codeColumnWidth },
+				children: block.lines.map((line, index) => /* @__PURE__ */ jsx("div", {
+					"data-file-code-canvas-row": "true",
+					className: FILE_ROW_CLASS_NAME,
+					children: /* @__PURE__ */ jsx(FileOperationCodeCell, { line })
+				}, readLineKey("code", line, index)))
+			}), /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 bg-white" })]
 		})]
 	});
 }
@@ -2862,15 +2994,22 @@ function FileOperationCodeSurface({ block, layout = "compact" }) {
 	if (layout === "workspace") return /* @__PURE__ */ jsx(FileOperationWorkspaceSurface, { block });
 	const showLineNumbers = readHasBlockLineNumbers(block);
 	const lineNumberColumnWidth = readLineNumberColumnWidth(block);
+	const codeColumnWidth = readCodeColumnWidth(block);
+	const surfaceMinWidth = showLineNumbers ? `calc(${lineNumberColumnWidth} + ${codeColumnWidth})` : codeColumnWidth;
 	return /* @__PURE__ */ jsx("div", {
 		"data-file-code-surface": "true",
 		"data-file-code-surface-layout": "compact",
 		className: "overflow-x-auto custom-scrollbar-amber bg-white",
-		children: block.lines.map((line, index) => /* @__PURE__ */ jsx(FileOperationLineRow, {
-			line,
-			showLineNumbers,
-			lineNumberColumnWidth
-		}, readLineKey("row", line, index)))
+		children: /* @__PURE__ */ jsx("div", {
+			"data-file-code-stack": "true",
+			className: "min-w-full",
+			style: { minWidth: surfaceMinWidth },
+			children: block.lines.map((line, index) => /* @__PURE__ */ jsx(FileOperationLineRow, {
+				line,
+				showLineNumbers,
+				lineNumberColumnWidth
+			}, readLineKey("row", line, index)))
+		})
 	});
 }
 function FileOperationLinesGrid({ block }) {

package/package.json

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