feat(editor): Logs markdown block improvements (#10681)

packages/editor-ui/package.json

@@ -53,6 +53,7 @@
     "fast-json-stable-stringify": "^2.1.0",
     "file-saver": "^2.0.2",
     "flatted": "^3.2.4",
+    "highlight.js": "catalog:frontend",
     "humanize-duration": "^3.27.2",
     "jsonpath": "^1.1.1",
     "lodash-es": "^4.17.21",

packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue

@@ -5,6 +5,7 @@ import { ref, onMounted } from 'vue';
 import type { ParsedAiContent } from './useAiContentParsers';
 import { useAiContentParsers } from './useAiContentParsers';
 import VueMarkdown from 'vue-markdown-render';
+import hljs from 'highlight.js/lib/core';
 import { useClipboard } from '@/composables/useClipboard';
 import { useI18n } from '@/composables/useI18n';
 import { useToast } from '@/composables/useToast';
@@ -38,6 +39,27 @@ function getInitialExpandedState() {
 	return !collapsedTypes[props.runData.inOut].includes(props.runData.type);
 }
 
+function isJsonString(text: string) {
+	try {
+		JSON.parse(text);
+		return true;
+	} catch (e) {
+		return false;
+	}
+}
+
+const markdownOptions = {
+	highlight(str: string, lang: string) {
+		if (lang && hljs.getLanguage(lang)) {
+			try {
+				return hljs.highlight(str, { language: lang }).value;
+			} catch {}
+		}
+
+		return ''; // use external default escaping
+	},
+};
+
 function parseAiRunData(run: IAiDataContent) {
 	if (!run.data) {
 		return;
@@ -75,7 +97,13 @@ function jsonToMarkdown(data: JsonMarkdown): string {
 	}
 
 	if (typeof data === 'string') {
-		return formatToJsonMarkdown(data);
+		// If data is a valid JSON string – format it as JSON markdown
+		if (isJsonString(data)) {
+			return formatToJsonMarkdown(data);
+		}
+
+		// Return original string otherwise
+		return data;
 	}
 
 	return formatToJsonMarkdown(JSON.stringify(data, null, 2));
@@ -145,10 +173,15 @@ onMounted(() => {
 						<VueMarkdown
 							:source="jsonToMarkdown(parsedContent.data as JsonMarkdown)"
 							:class="$style.markdown"
+							:options="markdownOptions"
 						/>
 					</template>
 					<template v-if="parsedContent.type === 'markdown'">
-						<VueMarkdown :source="parsedContent.data" :class="$style.markdown" />
+						<VueMarkdown
+							:source="parsedContent.data"
+							:class="$style.markdown"
+							:options="markdownOptions"
+						/>
 					</template>
 					<p
 						v-if="parsedContent.type === 'text'"
@@ -204,7 +237,7 @@ onMounted(() => {
 		}
 
 		pre {
-			background-color: var(--color-foreground-light);
+			background: var(--chat--message--pre--background);
 			border-radius: var(--border-radius-base);
 			line-height: var(--font-line-height-xloose);
 			padding: var(--spacing-s);

packages/editor-ui/src/components/RunDataAi/useAiContentParsers.ts

@@ -47,10 +47,12 @@ const outputTypeParsers: {
 				parsed: true,
 			};
 		}
+
 		// Use the memory parser if the response is a memory-like(chat) object
 		if (response.messages && Array.isArray(response.messages)) {
 			return outputTypeParsers[NodeConnectionType.AiMemory](execData);
 		}
+
 		if (response.generations) {
 			const generations = response.generations as LmGeneration[];
 
@@ -220,8 +222,8 @@ export const useAiContentParsers = () => {
 		}
 
 		const contentJson = executionData.map((node) => {
-			const hasBinarData = !isObjectEmpty(node.binary);
-			return hasBinarData ? node.binary : node.json;
+			const hasBinaryData = !isObjectEmpty(node.binary);
+			return hasBinaryData ? node.binary : node.json;
 		});
 
 		const parser = outputTypeParsers[endpointType as AllowedEndpointType];