Merge pull request #965 from drudge/fancy-ansi

feat(logs): use fancy-ansi for ansi colors

apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx

@@ -7,9 +7,10 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import { FancyAnsi } from "fancy-ansi";
 import { escapeRegExp } from "lodash";
 import React from "react";
-import { type LogLine, getLogType, parseAnsi } from "./utils";
+import { type LogLine, getLogType } from "./utils";
 
 interface LogLineProps {
 	log: LogLine;
@@ -17,6 +18,8 @@ interface LogLineProps {
 	searchTerm?: string;
 }
 
+const fancyAnsi = new FancyAnsi();
+
 export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
 	const { timestamp, message, rawTimestamp } = log;
 	const { type, variant, color } = getLogType(message);
@@ -34,37 +37,42 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
 
 	const highlightMessage = (text: string, term: string) => {
 		if (!term) {
-			const segments = parseAnsi(text);
-			return segments.map((segment, index) => (
-				<span key={index} className={segment.className || undefined}>
-					{segment.text}
-				</span>
-			));
+			return (
+				<span
+					className="transition-colors"
+					dangerouslySetInnerHTML={{
+						__html: fancyAnsi.toHtml(text),
+					}}
+				/>
+			);
 		}
 
-		// For search, we need to handle both ANSI and search highlighting
-		const segments = parseAnsi(text);
-		return segments.map((segment, index) => {
-			const parts = segment.text.split(
-				new RegExp(`(${escapeRegExp(term)})`, "gi"),
-			);
-			return (
-				<span key={index} className={segment.className || undefined}>
-					{parts.map((part, partIndex) =>
-						part.toLowerCase() === term.toLowerCase() ? (
-							<span
-								key={partIndex}
-								className="bg-yellow-200 dark:bg-yellow-900"
-							>
-								{part}
-							</span>
-						) : (
-							part
-						),
-					)}
-				</span>
-			);
-		});
+		const htmlContent = fancyAnsi.toHtml(text);
+		const modifiedContent = htmlContent.replace(
+			/<span([^>]*)>([^<]*)<\/span>/g,
+			(match, attrs, content) => {
+				const searchRegex = new RegExp(`(${escapeRegExp(term)})`, "gi");
+				if (!content.match(searchRegex)) return match;
+
+				const segments = content.split(searchRegex);
+				const wrappedSegments = segments
+					.map((segment: string) =>
+						segment.toLowerCase() === term.toLowerCase()
+							? `<span${attrs} class="bg-yellow-200/50 dark:bg-yellow-900/50">${segment}</span>`
+							: segment,
+					)
+					.join("");
+
+				return `<span${attrs}>${wrappedSegments}</span>`;
+			},
+		);
+
+		return (
+			<span
+				className="transition-colors"
+				dangerouslySetInnerHTML={{ __html: modifiedContent }}
+			/>
+		);
 	};
 
 	const tooltip = (color: string, timestamp: string | null) => {

apps/dokploy/components/dashboard/docker/logs/utils.ts

@@ -12,47 +12,6 @@ interface LogStyle {
 	variant: LogVariant;
 	color: string;
 }
-interface AnsiSegment {
-	text: string;
-	className: string;
-}
-
-const ansiToTailwind: Record<number, string> = {
-	// Reset
-	0: "",
-	// Regular colors
-	30: "text-black dark:text-gray-900",
-	31: "text-red-600 dark:text-red-500",
-	32: "text-green-600 dark:text-green-500",
-	33: "text-yellow-600 dark:text-yellow-500",
-	34: "text-blue-600 dark:text-blue-500",
-	35: "text-purple-600 dark:text-purple-500",
-	36: "text-cyan-600 dark:text-cyan-500",
-	37: "text-gray-600 dark:text-gray-400",
-	// Bright colors
-	90: "text-gray-500 dark:text-gray-600",
-	91: "text-red-500 dark:text-red-600",
-	92: "text-green-500 dark:text-green-600",
-	93: "text-yellow-500 dark:text-yellow-600",
-	94: "text-blue-500 dark:text-blue-600",
-	95: "text-purple-500 dark:text-purple-600",
-	96: "text-cyan-500 dark:text-cyan-600",
-	97: "text-white dark:text-gray-300",
-	// Background colors
-	40: "bg-black",
-	41: "bg-red-600",
-	42: "bg-green-600",
-	43: "bg-yellow-600",
-	44: "bg-blue-600",
-	45: "bg-purple-600",
-	46: "bg-cyan-600",
-	47: "bg-white",
-	// Formatting
-	1: "font-bold",
-	2: "opacity-75",
-	3: "italic",
-	4: "underline",
-};
 
 const LOG_STYLES: Record<LogType, LogStyle> = {
 	error: {
@@ -191,56 +150,3 @@ export const getLogType = (message: string): LogStyle => {
 
 	return LOG_STYLES.info;
 };
-
-export function parseAnsi(text: string) {
-	const segments: { text: string; className: string }[] = [];
-	let currentIndex = 0;
-	let currentClasses: string[] = [];
-
-	while (currentIndex < text.length) {
-		const escStart = text.indexOf("\x1b[", currentIndex);
-
-		// No more escape sequences found
-		if (escStart === -1) {
-			if (currentIndex < text.length) {
-				segments.push({
-					text: text.slice(currentIndex),
-					className: currentClasses.join(" "),
-				});
-			}
-			break;
-		}
-
-		// Add text before escape sequence
-		if (escStart > currentIndex) {
-			segments.push({
-				text: text.slice(currentIndex, escStart),
-				className: currentClasses.join(" "),
-			});
-		}
-
-		const escEnd = text.indexOf("m", escStart);
-		if (escEnd === -1) break;
-
-		// Handle multiple codes in one sequence (e.g., \x1b[1;31m)
-		const codesStr = text.slice(escStart + 2, escEnd);
-		const codes = codesStr.split(";").map((c) => Number.parseInt(c, 10));
-
-		if (codes.includes(0)) {
-			// Reset all formatting
-			currentClasses = [];
-		} else {
-			// Add new classes for each code
-			for (const code of codes) {
-				const className = ansiToTailwind[code];
-				if (className && !currentClasses.includes(className)) {
-					currentClasses.push(className);
-				}
-			}
-		}
-
-		currentIndex = escEnd + 1;
-	}
-
-	return segments;
-}

apps/dokploy/package.json

@@ -35,8 +35,6 @@
 		"test": "vitest --config __test__/vitest.config.ts"
 	},
 	"dependencies": {
-		"react-confetti-explosion":"2.1.2",
-		"@stepperize/react": "4.0.1",
 		"@codemirror/lang-json": "^6.0.1",
 		"@codemirror/lang-yaml": "^6.1.1",
 		"@codemirror/language": "^6.10.1",
@@ -64,6 +62,7 @@
 		"@radix-ui/react-tabs": "^1.0.4",
 		"@radix-ui/react-toggle": "^1.0.3",
 		"@radix-ui/react-tooltip": "^1.0.7",
+		"@stepperize/react": "4.0.1",
 		"@stripe/stripe-js": "4.8.0",
 		"@tanstack/react-query": "^4.36.1",
 		"@tanstack/react-table": "^8.16.0",
@@ -87,6 +86,7 @@
 		"dotenv": "16.4.5",
 		"drizzle-orm": "^0.30.8",
 		"drizzle-zod": "0.5.1",
+		"fancy-ansi": "^0.1.3",
 		"i18next": "^23.16.4",
 		"input-otp": "^1.2.4",
 		"js-cookie": "^3.0.5",
@@ -104,6 +104,7 @@
 		"postgres": "3.4.4",
 		"public-ip": "6.0.2",
 		"react": "18.2.0",
+		"react-confetti-explosion": "2.1.2",
 		"react-dom": "18.2.0",
 		"react-hook-form": "^7.49.3",
 		"react-i18next": "^15.1.0",

apps/dokploy/tailwind.config.ts

@@ -87,7 +87,7 @@ const config = {
 			},
 		},
 	},
-	plugins: [require("tailwindcss-animate")],
+	plugins: [require("tailwindcss-animate"), require("fancy-ansi/plugin")],
 } satisfies Config;
 
 export default config;