github-mirror/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-05-12 16:10:30 +02:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity

fix: Add warning to Computer Use install modal (#30094)

Browse Source
This commit is contained in:
Bernhard Wittmann 2026-05-08 14:25:54 +02:00 committed by GitHub
parent 8116e0a485
commit ecf96ad30c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/frontend/@n8n/i18n/src/locales/en.json
View File

@ -5994,6 +5994,7 @@
"instanceAi.welcomeModal.skip": "Skip for now",
"instanceAi.welcomeModal.gateway.title": "Connect AI Assistant to your computer",
"instanceAi.welcomeModal.gateway.description": "Allow AI Assistant to work with local files, run terminal commands, and control your browser so it can help build automations on your machine. It connects through n8n Computer Use, a lightweight local process you can disconnect anytime.",
"instanceAi.welcomeModal.gateway.warning": "AI Assistant is a preview and can be unpredictable. Be aware of allowing access to sensitive data. Permissions can be adjusted during setup.",
"instanceAi.welcomeModal.gateway.os.mac": "Mac",
"instanceAi.welcomeModal.gateway.os.windows": "Windows",
"instanceAi.welcomeModal.gateway.os.linux": "Linux",
@ -6003,8 +6004,6 @@
"instanceAi.welcomeModal.gateway.instructions.mac": "Open Terminal (Cmd + Space, type \"Terminal\") and paste the command below.",
"instanceAi.welcomeModal.gateway.instructions.windows": "Open Terminal (Windows key, type \"Terminal\") and paste the command below.",
"instanceAi.welcomeModal.gateway.instructions.linux": "Open your terminal and paste the command below.",
"instanceAi.welcomeModal.gateway.tokenExpiresIn": "This token expires in {minutes} min.",
"instanceAi.welcomeModal.gateway.tokenExpired": "This token has expired. Copy the command again.",
"instanceAi.welcomeModal.gateway.leadingSpaceHint": "If your shell supports it, start the command with a space to keep it out of history.",
"instanceAi.welcomeModal.gateway.browserAutomationHint": "Want browser automation? Install the <a href=\"{url}\" target=\"_blank\" rel=\"noopener\">n8n Browser Use Chrome extension</a> so the agent can control your browser."
"instanceAi.welcomeModal.gateway.tokenExpiresIn": "Token expires in {minutes} min",
"instanceAi.welcomeModal.gateway.tokenExpired": "Token has expired. Copy the command again."
}

63
packages/frontend/editor-ui/src/features/ai/instanceAi/components/modals/ComputerUseSetupContent.vue
View File

@ -1,13 +1,12 @@
<script lang="ts" setup>
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { N8nHeading, N8nIcon, N8nIconButton, N8nText } from '@n8n/design-system';
import { N8nCallout, N8nHeading, N8nIcon, N8nIconButton, N8nText } from '@n8n/design-system';
import type { IconName } from '@n8n/design-system';
import { useI18n, type BaseTextKey } from '@n8n/i18n';
import { useInstanceAiSettingsStore } from '../../instanceAiSettings.store';
import MacOsIcon from '../../assets/os-icons/macos-icon.svg';
import WindowsIcon from '../../assets/os-icons/windows-icon.svg';
import LinuxIcon from '../../assets/os-icons/linux-icon.svg';
import { CHROME_EXTENSION_URL } from './constants';
const CATEGORY_META: Record<string, { icon: IconName; labelKey: BaseTextKey }> = {
filesystem: { icon: 'folder-open', labelKey: 'instanceAi.filesystem.category.filesystem' },
@ -122,12 +121,6 @@ const displayCategories = computed(() => {
return result.sort((a, b) => Number(b.enabled) - Number(a.enabled));
});
const browserAutomationHint = computed(() =>
i18n.baseText('instanceAi.welcomeModal.gateway.browserAutomationHint', {
interpolate: { url: CHROME_EXTENSION_URL },
}),
);
function onCommandScroll(e: Event) {
const el = e.target as HTMLElement;
isScrolledToEnd.value = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
@ -213,8 +206,6 @@ onBeforeUnmount(() => {
</span>
</div>
</div>
<N8nText v-n8n-html="browserAutomationHint" color="text-light" :class="$style.browserHint" />
</template>
<template v-else>
@ -222,6 +213,11 @@ onBeforeUnmount(() => {
v-n8n-html="i18n.baseText('instanceAi.welcomeModal.gateway.description')"
:class="$style.textBlock"
/>
<N8nCallout theme="warning">
{{ i18n.baseText('instanceAi.welcomeModal.gateway.warning') }}
</N8nCallout>
<div :class="$style.osTabs">
<button
v-for="tab in osTabs"
@ -234,7 +230,7 @@ onBeforeUnmount(() => {
</button>
</div>
<N8nText color="text-light" :class="$style.instructions">
<N8nText :class="$style.instructions">
{{ i18n.baseText(terminalInstructionsKey) }}
</N8nText>
@ -257,21 +253,16 @@ onBeforeUnmount(() => {
@click="copyCommand"
/>
</div>
<div :class="$style.commandMeta">
<N8nText v-if="tokenExpiryText" size="small" color="text-light">
<div :class="$style.waitingRow">
<div :class="$style.waitingStatus">
<N8nIcon icon="spinner" color="primary" spin size="small" />
<span>{{ i18n.baseText('instanceAi.welcomeModal.gateway.waiting') }}</span>
</div>
<N8nText v-if="tokenExpiryText" size="small" color="warning">
{{ tokenExpiryText }}
</N8nText>
<N8nText size="small" color="text-light">
{{ i18n.baseText('instanceAi.welcomeModal.gateway.leadingSpaceHint') }}
</N8nText>
</div>
<div :class="$style.waitingRow">
<N8nIcon icon="spinner" color="primary" spin size="small" />
<span>{{ i18n.baseText('instanceAi.welcomeModal.gateway.waiting') }}</span>
</div>
</div>
<N8nText v-n8n-html="browserAutomationHint" color="text-light" :class="$style.browserHint" />
</template>
</div>
</template>
@ -302,7 +293,6 @@ onBeforeUnmount(() => {
gap: var(--spacing--2xs);
font-size: var(--font-size--2xs);
line-height: var(--line-height--xl);
margin-bottom: var(--spacing--sm);
color: var(--color--text--tint-1);
}
@ -354,19 +344,11 @@ onBeforeUnmount(() => {
justify-content: space-between;
gap: var(--spacing--2xs);
padding: var(--spacing--xs);
background: var(--color--background--shade-2);
}
.commandMeta {
display: flex;
flex-direction: column;
gap: var(--spacing--5xs);
padding: 0 var(--spacing--xs) var(--spacing--xs);
background: var(--color--background--shade-2);
background: var(--color--neutral-950);
}
.commandText {
color: var(--color--text--tint-1);
color: var(--color--neutral-300);
white-space: nowrap;
overflow: auto;
font-size: var(--font-size--xs);
@ -385,7 +367,7 @@ onBeforeUnmount(() => {
.copyButton {
flex-shrink: 0;
color: var(--color--text);
color: var(--color--neutral-300);
}
.connectedBlock {
@ -445,22 +427,25 @@ onBeforeUnmount(() => {
color: var(--color--text--tint-1);
}
.browserHint {
font-size: var(--font-size--xs);
line-height: var(--line-height--xl);
}
.waitingRow {
display: flex;
font-size: var(--font-size--2xs);
align-items: center;
justify-content: space-between;
gap: var(--spacing--2xs);
padding: var(--spacing--2xs) var(--spacing--xs);
border-top: var(--border);
color: var(--color--text--tint-1);
}
.waitingStatus {
display: flex;
align-items: center;
gap: var(--spacing--2xs);
}
.instructions {
margin-top: var(--spacing--2xs);
font-size: var(--font-size--xs);
line-height: var(--line-height--xl);
}