fix(editor): Open links from embedded chat in new tab (#9121)

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

packages/@n8n/chat/package.json

@@ -40,13 +40,15 @@
   },
   "dependencies": {
     "highlight.js": "^11.8.0",
+    "markdown-it-link-attributes": "^4.0.1",
     "uuid": "^8.3.2",
     "vue": "^3.3.4",
-    "vue-markdown-render": "^2.0.1"
+    "vue-markdown-render": "^2.1.1"
   },
   "devDependencies": {
-    "@n8n/storybook": "workspace:*",
     "@iconify-json/mdi": "^1.1.54",
+    "@n8n/storybook": "workspace:*",
+    "@types/markdown-it": "^12.2.3",
     "shelljs": "^0.8.5",
     "unbuild": "^2.0.0",
     "unplugin-icons": "^0.17.0",

packages/@n8n/chat/src/components/Message.vue

@@ -4,6 +4,8 @@ import type { PropType } from 'vue';
 import { computed, toRefs } from 'vue';
 import VueMarkdown from 'vue-markdown-render';
 import hljs from 'highlight.js/lib/core';
+import markdownLink from 'markdown-it-link-attributes';
+import type MarkdownIt from 'markdown-it';
 import type { ChatMessage } from '@n8n/chat/types';
 
 const props = defineProps({
@@ -26,6 +28,15 @@ const classes = computed(() => {
 	};
 });
 
+const linksNewTabPlugin = (vueMarkdownItInstance: MarkdownIt) => {
+	vueMarkdownItInstance.use(markdownLink, {
+		attrs: {
+			target: '_blank',
+			rel: 'noopener',
+		},
+	});
+};
+
 const markdownOptions = {
 	highlight(str: string, lang: string) {
 		if (lang && hljs.getLanguage(lang)) {
@@ -41,7 +52,12 @@ const markdownOptions = {
 <template>
 	<div class="chat-message" :class="classes">
 		<slot>
-			<VueMarkdown class="chat-message-markdown" :source="messageText" :options="markdownOptions" />
+			<VueMarkdown
+				class="chat-message-markdown"
+				:source="messageText"
+				:options="markdownOptions"
+				:plugins="[linksNewTabPlugin]"
+			/>
 		</slot>
 	</div>
 </template>

pnpm-lock.yaml

@@ -143,6 +143,9 @@ importers:
       highlight.js:
         specifier: ^11.8.0
         version: 11.9.0
+      markdown-it-link-attributes:
+        specifier: ^4.0.1
+        version: 4.0.1
       uuid:
         specifier: ^8.3.2
         version: 8.3.2
@@ -150,8 +153,8 @@ importers:
         specifier: ^3.3.4
         version: 3.3.4
       vue-markdown-render:
-        specifier: ^2.0.1
+        specifier: ^2.1.1
-        version: 2.0.1
+        version: 2.1.1(vue@3.3.4)
     devDependencies:
       '@iconify-json/mdi':
         specifier: ^1.1.54
@@ -159,6 +162,9 @@ importers:
       '@n8n/storybook':
         specifier: workspace:*
         version: link:../storybook
+      '@types/markdown-it':
+        specifier: ^12.2.3
+        version: 12.2.3
       shelljs:
         specifier: ^0.8.5
         version: 0.8.5
@@ -26000,13 +26006,6 @@ packages:
       vue: 3.4.21(typescript@5.4.2)
     dev: false
 
-  /vue-markdown-render@2.0.1:
-    resolution: {integrity: sha512-/UBCu0OrZ9zzEDtiZVwlV/CQ+CgcwViServGis3TRXSVc6+6lJxcaOcD43vRoQzYfPa9r9WDt0Q7GyupOmpEWA==}
-    dependencies:
-      markdown-it: 12.3.2
-      vue: 3.3.4
-    dev: false
-
   /vue-markdown-render@2.0.1(typescript@5.4.2):
     resolution: {integrity: sha512-/UBCu0OrZ9zzEDtiZVwlV/CQ+CgcwViServGis3TRXSVc6+6lJxcaOcD43vRoQzYfPa9r9WDt0Q7GyupOmpEWA==}
     dependencies:
@@ -26016,6 +26015,15 @@ packages:
       - typescript
     dev: false
 
+  /vue-markdown-render@2.1.1(vue@3.3.4):
+    resolution: {integrity: sha512-szuJVbCwgIpVsggd8IHGB2lLo8BH8Ojd+wakaOTASNxdYcccKxoMcvDqUsLoGwgKDY8yJf0U/+ppffEYxsEHkA==}
+    peerDependencies:
+      vue: ^3.3.4
+    dependencies:
+      markdown-it: 12.3.2
+      vue: 3.3.4
+    dev: false
+
   /vue-router@4.2.2(vue@3.4.21):
     resolution: {integrity: sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ==}
     peerDependencies: