refactor(editor): Move editor-ui and design-system to frontend dir (no-changelog) (#13564)

2025-12-18 02:21:13 +00:00 · 2025-02-28 14:28:30 +02:00
parent 684353436d
commit f5743176e5
1635 changed files with 805 additions and 1079 deletions
--- a/packages/frontend/editor-ui/src/components/FreeAiCreditsCallout.vue
+++ b/packages/frontend/editor-ui/src/components/FreeAiCreditsCallout.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { useToast } from '@/composables/useToast';
+import { AI_CREDITS_EXPERIMENT } from '@/constants';
+import { useCredentialsStore } from '@/stores/credentials.store';
+import { useNDVStore } from '@/stores/ndv.store';
+import { usePostHog } from '@/stores/posthog.store';
+import { useProjectsStore } from '@/stores/projects.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useUsersStore } from '@/stores/users.store';
+import { computed, ref } from 'vue';
+import { OPEN_AI_API_CREDENTIAL_TYPE } from 'n8n-workflow';
+
+const LANGCHAIN_NODES_PREFIX = '@n8n/n8n-nodes-langchain.';
+
+const N8N_NODES_PREFIX = '@n8n/n8n-nodes.';
+
+const NODES_WITH_OPEN_AI_API_CREDENTIAL = [
+	`${LANGCHAIN_NODES_PREFIX}openAi`,
+	`${LANGCHAIN_NODES_PREFIX}embeddingsOpenAi`,
+	`${LANGCHAIN_NODES_PREFIX}lmChatOpenAi`,
+	`${N8N_NODES_PREFIX}openAi`,
+];
+
+const showSuccessCallout = ref(false);
+const claimingCredits = ref(false);
+
+const settingsStore = useSettingsStore();
+const posthogStore = usePostHog();
+const credentialsStore = useCredentialsStore();
+const usersStore = useUsersStore();
+const ndvStore = useNDVStore();
+const projectsStore = useProjectsStore();
+const telemetry = useTelemetry();
+
+const i18n = useI18n();
+const toast = useToast();
+
+const userHasOpenAiCredentialAlready = computed(
+	() =>
+		!!credentialsStore.allCredentials.filter(
+			(credential) => credential.type === OPEN_AI_API_CREDENTIAL_TYPE,
+		).length,
+);
+
+const userHasClaimedAiCreditsAlready = computed(
+	() => !!usersStore.currentUser?.settings?.userClaimedAiCredits,
+);
+
+const activeNodeHasOpenAiApiCredential = computed(
+	() =>
+		ndvStore.activeNode?.type &&
+		NODES_WITH_OPEN_AI_API_CREDENTIAL.includes(ndvStore.activeNode.type),
+);
+
+const userCanClaimOpenAiCredits = computed(() => {
+	return (
+		settingsStore.isAiCreditsEnabled &&
+		activeNodeHasOpenAiApiCredential.value &&
+		posthogStore.getVariant(AI_CREDITS_EXPERIMENT.name) === AI_CREDITS_EXPERIMENT.variant &&
+		!userHasOpenAiCredentialAlready.value &&
+		!userHasClaimedAiCreditsAlready.value
+	);
+});
+
+const onClaimCreditsClicked = async () => {
+	claimingCredits.value = true;
+
+	try {
+		await credentialsStore.claimFreeAiCredits(projectsStore.currentProject?.id);
+
+		if (usersStore?.currentUser?.settings) {
+			usersStore.currentUser.settings.userClaimedAiCredits = true;
+		}
+
+		telemetry.track('User claimed OpenAI credits');
+
+		showSuccessCallout.value = true;
+	} catch (e) {
+		toast.showError(
+			e,
+			i18n.baseText('freeAi.credits.showError.claim.title'),
+			i18n.baseText('freeAi.credits.showError.claim.message'),
+		);
+	} finally {
+		claimingCredits.value = false;
+	}
+};
+</script>
+<template>
+	<div class="mt-xs">
+		<n8n-callout
+			v-if="userCanClaimOpenAiCredits && !showSuccessCallout"
+			theme="secondary"
+			icon="exclamation-circle"
+		>
+			{{
+				i18n.baseText('freeAi.credits.callout.claim.title', {
+					interpolate: { credits: settingsStore.aiCreditsQuota },
+				})
+			}}
+			<template #trailingContent>
+				<n8n-button
+					type="tertiary"
+					size="small"
+					:label="i18n.baseText('freeAi.credits.callout.claim.button.label')"
+					:loading="claimingCredits"
+					@click="onClaimCreditsClicked"
+				/>
+			</template>
+		</n8n-callout>
+		<n8n-callout v-else-if="showSuccessCallout" theme="success" icon="check-circle">
+			<n8n-text>
+				{{
+					i18n.baseText('freeAi.credits.callout.success.title.part1', {
+						interpolate: { credits: settingsStore.aiCreditsQuota },
+					})
+				}}</n8n-text
+			>&nbsp;
+			<n8n-text :bold="true">
+				{{ i18n.baseText('freeAi.credits.callout.success.title.part2') }}</n8n-text
+			>
+		</n8n-callout>
+	</div>
+</template>