feat: Add beta label for AI Assistant/Builder (#20346)

This commit is contained in:
Mutasem Aldmour 2025-10-03 14:02:33 +02:00 committed by GitHub
parent 0c1f2ad82d
commit 57bea347f0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 137 additions and 73 deletions

View File

@ -27,7 +27,6 @@ interface Props {
disabled?: boolean;
loadingMessage?: string;
sessionId?: string;
title?: string;
inputPlaceholder?: string;
scrollOnNewMessage?: boolean;
showStop?: boolean;
@ -50,7 +49,6 @@ const emit = defineEmits<{
const onClose = () => emit('close');
const props = withDefaults(defineProps<Props>(), {
title: () => useI18n().t('assistantChat.aiAssistantLabel'),
user: () => ({
firstName: '',
lastName: '',
@ -348,8 +346,11 @@ defineExpose({
<div :class="$style.header">
<div :class="$style.chatTitle">
<div :class="$style.headerText">
<AssistantIcon size="large" />
<AssistantText size="large" :text="title" />
<div :class="$style.assistantTitle">
<AssistantIcon size="large" />
<AssistantText size="large" :text="t('assistantChat.aiAssistantLabel')" />
</div>
<span :class="$style.betaTag">{{ t('assistantChat.aiAssistantBetaLabel') }}</span>
</div>
<slot name="header" />
</div>
@ -513,6 +514,12 @@ defineExpose({
}
}
.betaTag {
color: var(--color-text-base);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-bold);
}
.body {
background-color: var(--color-background-light);
border: var(--border-base);
@ -563,7 +570,11 @@ defineExpose({
}
.headerText {
gap: var(--spacing-xs);
gap: var(--spacing-3xs);
}
.assistantTitle {
gap: var(--spacing-2xs);
}
.greeting {

View File

@ -14,14 +14,23 @@ exports[`AskAssistantChat > limits maximum input length when maxCharacterLength
<div
class="headerText"
>
<assistant-icon-stub
size="large"
theme="default"
/>
<assistant-text-stub
size="large"
text="assistantChat.aiAssistantLabel"
/>
<div
class="assistantTitle"
>
<assistant-icon-stub
size="large"
theme="default"
/>
<assistant-text-stub
size="large"
text="assistantChat.aiAssistantLabel"
/>
</div>
<span
class="betaTag"
>
assistantChat.aiAssistantBetaLabel
</span>
</div>
@ -107,14 +116,23 @@ exports[`AskAssistantChat > renders chat with messages correctly 1`] = `
<div
class="headerText"
>
<assistant-icon-stub
size="large"
theme="default"
/>
<assistant-text-stub
size="large"
text="assistantChat.aiAssistantLabel"
/>
<div
class="assistantTitle"
>
<assistant-icon-stub
size="large"
theme="default"
/>
<assistant-text-stub
size="large"
text="assistantChat.aiAssistantLabel"
/>
</div>
<span
class="betaTag"
>
assistantChat.aiAssistantBetaLabel
</span>
</div>
@ -332,14 +350,23 @@ exports[`AskAssistantChat > renders default placeholder chat correctly 1`] = `
<div
class="headerText"
>
<assistant-icon-stub
size="large"
theme="default"
/>
<assistant-text-stub
size="large"
text="assistantChat.aiAssistantLabel"
/>
<div
class="assistantTitle"
>
<assistant-icon-stub
size="large"
theme="default"
/>
<assistant-text-stub
size="large"
text="assistantChat.aiAssistantLabel"
/>
</div>
<span
class="betaTag"
>
assistantChat.aiAssistantBetaLabel
</span>
</div>
@ -425,14 +452,23 @@ exports[`AskAssistantChat > renders end of session chat correctly 1`] = `
<div
class="headerText"
>
<assistant-icon-stub
size="large"
theme="default"
/>
<assistant-text-stub
size="large"
text="assistantChat.aiAssistantLabel"
/>
<div
class="assistantTitle"
>
<assistant-icon-stub
size="large"
theme="default"
/>
<assistant-text-stub
size="large"
text="assistantChat.aiAssistantLabel"
/>
</div>
<span
class="betaTag"
>
assistantChat.aiAssistantBetaLabel
</span>
</div>
@ -561,14 +597,23 @@ exports[`AskAssistantChat > renders error message correctly with retry button 1`
<div
class="headerText"
>
<assistant-icon-stub
size="large"
theme="default"
/>
<assistant-text-stub
size="large"
text="assistantChat.aiAssistantLabel"
/>
<div
class="assistantTitle"
>
<assistant-icon-stub
size="large"
theme="default"
/>
<assistant-text-stub
size="large"
text="assistantChat.aiAssistantLabel"
/>
</div>
<span
class="betaTag"
>
assistantChat.aiAssistantBetaLabel
</span>
</div>
@ -682,14 +727,23 @@ exports[`AskAssistantChat > renders message with code snippet 1`] = `
<div
class="headerText"
>
<assistant-icon-stub
size="large"
theme="default"
/>
<assistant-text-stub
size="large"
text="assistantChat.aiAssistantLabel"
/>
<div
class="assistantTitle"
>
<assistant-icon-stub
size="large"
theme="default"
/>
<assistant-text-stub
size="large"
text="assistantChat.aiAssistantLabel"
/>
</div>
<span
class="betaTag"
>
assistantChat.aiAssistantBetaLabel
</span>
</div>
@ -803,14 +857,23 @@ exports[`AskAssistantChat > renders streaming chat correctly 1`] = `
<div
class="headerText"
>
<assistant-icon-stub
size="large"
theme="default"
/>
<assistant-text-stub
size="large"
text="assistantChat.aiAssistantLabel"
/>
<div
class="assistantTitle"
>
<assistant-icon-stub
size="large"
theme="default"
/>
<assistant-text-stub
size="large"
text="assistantChat.aiAssistantLabel"
/>
</div>
<span
class="betaTag"
>
assistantChat.aiAssistantBetaLabel
</span>
</div>

View File

@ -52,7 +52,8 @@ export default {
'assistantChat.builder.toolRunning': 'Tool still running',
'assistantChat.builder.toolError': 'Some tool calls have failed. Agent will retry these.',
'assistantChat.errorParsingMarkdown': 'Error parsing markdown content',
'assistantChat.aiAssistantLabel': 'AI Assistant',
'assistantChat.aiAssistantLabel': 'n8n AI',
'assistantChat.aiAssistantBetaLabel': 'Beta',
'assistantChat.aiAssistantName': 'Assistant',
'assistantChat.sessionEndMessage.1':
'This Assistant session has ended. To start a new session with the Assistant, click an',

View File

@ -197,7 +197,6 @@
"auth.signup.setupYourAccountError": "Problem setting up your account",
"auth.signup.tokenValidationError": "Issue validating invite token",
"aiAssistant.name": "Assistant",
"aiAssistant.n8nAi": "n8n AI",
"aiAssistant.tabs.ask": "Ask",
"aiAssistant.tabs.build": "Build",
"aiAssistant.builder.mode": "AI Builder",

View File

@ -264,7 +264,6 @@ watch(currentRoute, () => {
:streaming="builderStore.streaming"
:loading-message="loadingMessage"
:mode="i18n.baseText('aiAssistant.builder.mode')"
:title="'n8n AI'"
:show-stop="true"
:scroll-on-new-message="true"
:credits-quota="creditsQuota"

View File

@ -4,8 +4,6 @@ import { useUsersStore } from '@/stores/users.store';
import { computed } from 'vue';
import { N8nAskAssistantChat } from '@n8n/design-system';
import { useTelemetry } from '@/composables/useTelemetry';
import { useBuilderStore } from '@/stores/builder.store';
import { useI18n } from '@n8n/i18n';
const emit = defineEmits<{
close: [];
@ -14,8 +12,6 @@ const emit = defineEmits<{
const assistantStore = useAssistantStore();
const usersStore = useUsersStore();
const telemetry = useTelemetry();
const builderStore = useBuilderStore();
const i18n = useI18n();
const user = computed(() => ({
firstName: usersStore.currentUser?.firstName ?? '',
@ -70,11 +66,6 @@ async function undoCodeDiff(index: number) {
:streaming="assistantStore.streaming"
:loading-message="loadingMessage"
:session-id="assistantStore.currentSessionId"
:title="
builderStore.isAIBuilderEnabled
? i18n.baseText('aiAssistant.n8nAi')
: i18n.baseText('aiAssistant.assistant')
"
@close="emit('close')"
@message="onUserMessage"
@code-replace="onCodeReplace"