feat(editor): Node Creator AI nodes improvements (#9484)

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

packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from '../../composables/useI18n';
+import type { NodeCreatorTag } from '../../types/node-creator-node';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import N8nTooltip from '../N8nTooltip';
 import { ElTag } from 'element-plus';
@@ -9,7 +10,7 @@ export interface Props {
 	isAi?: boolean;
 	isTrigger?: boolean;
 	description?: string;
-	tag?: string;
+	tag?: NodeCreatorTag;
 	title: string;
 	showActionArrow?: boolean;
 }
@@ -37,8 +38,8 @@ const { t } = useI18n();
 		<div>
 			<div :class="$style.details">
 				<span :class="$style.name" data-test-id="node-creator-item-name" v-text="title" />
-				<ElTag v-if="tag" :class="$style.tag" size="small" round type="success">
-					{{ tag }}
+				<ElTag v-if="tag" :class="$style.tag" size="small" round :type="tag.type ?? 'success'">
+					{{ tag.text }}
 				</ElTag>
 				<FontAwesomeIcon
 					v-if="isTrigger"
@@ -87,8 +88,16 @@ const { t } = useI18n();
 .creatorNode:hover .panelIcon {
 	color: var(--action-arrow-color-hover, var(--color-text-light));
 }
-.tag {
+:root .tag {
 	margin-left: var(--spacing-2xs);
+	line-height: var(--font-size-3xs);
+	font-size: var(--font-size-3xs);
+	padding: 0.1875rem var(--spacing-3xs) var(--spacing-4xs) var(--spacing-3xs);
+	height: auto;
+
+	span {
+		font-size: var(--font-size-2xs) !important;
+	}
 }
 .panelIcon {
 	flex-grow: 1;

packages/design-system/src/types/index.ts

@@ -8,3 +8,4 @@ export * from './menu';
 export * from './select';
 export * from './user';
 export * from './keyboardshortcut';
+export * from './node-creator-node';

packages/design-system/src/types/node-creator-node.ts

@@ -0,0 +1,6 @@
+import type { ElTag } from 'element-plus';
+
+export type NodeCreatorTag = {
+	text: string;
+	type?: (typeof ElTag)['type'];
+};