feat(editor): Update styling of embedded NDV (no-changelog) (#17366)

This commit is contained in:
Suguru Inoue
2025-07-22 11:39:14 +02:00
committed by GitHub
parent c1aae67a04
commit ee67e9e354
31 changed files with 623 additions and 265 deletions

View File

@@ -9,6 +9,7 @@ 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';
import { N8nCallout, N8nText } from '@n8n/design-system';
const LANGCHAIN_NODES_PREFIX = '@n8n/n8n-nodes-langchain.';
@@ -85,38 +86,39 @@ const onClaimCreditsClicked = async () => {
};
</script>
<template>
<div class="mt-xs">
<n8n-callout
v-if="userCanClaimOpenAiCredits && !showSuccessCallout"
theme="secondary"
icon="circle-alert"
>
<N8nCallout
v-if="userCanClaimOpenAiCredits && !showSuccessCallout"
theme="secondary"
icon="circle-alert"
class="mt-xs"
>
{{
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>
</N8nCallout>
<N8nCallout v-else-if="showSuccessCallout" theme="success" icon="circle-check" class="mt-xs">
<N8nText size="small">
{{
i18n.baseText('freeAi.credits.callout.claim.title', {
i18n.baseText('freeAi.credits.callout.success.title.part1', {
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="circle-check">
<n8n-text size="small">
{{
i18n.baseText('freeAi.credits.callout.success.title.part1', {
interpolate: { credits: settingsStore.aiCreditsQuota },
})
}}</n8n-text
>&nbsp;
<n8n-text size="small" :bold="true">
{{ i18n.baseText('freeAi.credits.callout.success.title.part2') }}</n8n-text
>
</n8n-callout>
</div>
</N8nText>
&nbsp;
<N8nText size="small" :bold="true">
{{ i18n.baseText('freeAi.credits.callout.success.title.part2') }}
</N8nText>
</N8nCallout>
<div v-else />
</template>