github-mirror/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-10-17 05:29:44 +02:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity Graph

fix(editor): Add tooltips to assistant header actions (#38946)

Browse Source
This commit is contained in:
Robin Braumann 2026-09-17 12:31:36 +00:00 committed by GitHub
parent d1c805a595
commit 3ea03971d3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 79 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/frontend/editor-ui/src/features/ai/instanceAi/components/InstanceAiViewHeader.vue
View File

@ -1,7 +1,14 @@
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { N8nButton, N8nCallout, N8nIcon, N8nPopover } from '@n8n/design-system';
import {
N8nButton,
N8nCallout,
N8nIcon,
N8nPopover,
N8nTooltip,
TOOLTIP_DELAY_MS,
} from '@n8n/design-system';
import { useI18n } from '@n8n/i18n';
import type { InstanceAiThreadSummary } from '@n8n/api-types';
import { useSourceControlStore } from '@/features/integrations/sourceControl.ee/sourceControl.store';
@ -75,23 +82,31 @@ function handleThreadSelect(threadId: string) {
:content-class="$style.threadHistoryPopover"
>
<template #trigger>
<N8nButton
variant="ghost"
size="small"
:class="[
$style.threadHistoryButton,
{ [$style.threadHistoryButtonCollapsed]: !props.showThreadHistoryLabel },
]"
data-test-id="instance-ai-sidebar-toggle"
:aria-label="i18n.baseText('instanceAi.sidebar.chatHistory')"
<N8nTooltip
as-child
:content="i18n.baseText('instanceAi.sidebar.chatHistory')"
:disabled="props.showThreadHistoryLabel"
placement="bottom"
:show-after="TOOLTIP_DELAY_MS"
>
<template #icon>
<N8nIcon icon="history" size="large" />
</template>
<span :class="$style.threadHistoryLabel" :aria-hidden="!props.showThreadHistoryLabel">
{{ i18n.baseText('instanceAi.sidebar.chatHistory') }}
</span>
</N8nButton>
<N8nButton
variant="ghost"
size="small"
:class="[
$style.threadHistoryButton,
{ [$style.threadHistoryButtonCollapsed]: !props.showThreadHistoryLabel },
]"
data-test-id="instance-ai-sidebar-toggle"
:aria-label="i18n.baseText('instanceAi.sidebar.chatHistory')"
>
<template #icon>
<N8nIcon icon="history" size="large" />
</template>
<span :class="$style.threadHistoryLabel" :aria-hidden="!props.showThreadHistoryLabel">
{{ i18n.baseText('instanceAi.sidebar.chatHistory') }}
</span>
</N8nButton>
</N8nTooltip>
</template>
<template #content>
<InstanceAiThreadList

76
packages/frontend/editor-ui/src/features/ai/instanceAi/embed/InstanceAiChatPanel.vue
View File

@ -23,7 +23,7 @@ import {
} from 'vue';
import { useRouter } from 'vue-router';
import type { InstanceAiHandoffContext, InstanceAiThreadSummary } from '@n8n/api-types';
import { N8nHeading, N8nIconButton } from '@n8n/design-system';
import { N8nHeading, N8nIconButton, N8nTooltip, TOOLTIP_DELAY_MS } from '@n8n/design-system';
import { useI18n } from '@n8n/i18n';
import { useToast } from '@n8n/composables/useToast';
@ -406,34 +406,52 @@ const ThreadScope = defineComponent({
</N8nHeading>
</template>
<template #actions>
<N8nIconButton
icon="plus"
variant="ghost"
size="small"
icon-size="large"
:disabled="building"
:aria-label="i18n.baseText('instanceAi.thread.new')"
data-test-id="instance-ai-embed-new-thread"
@click="onNewThreadRequested"
/>
<N8nIconButton
icon="external-link"
variant="ghost"
size="small"
icon-size="large"
:aria-label="i18n.baseText('instanceAi.embed.openFullAssistant')"
data-test-id="instance-ai-embed-open-full"
@click="openFullAssistant"
/>
<N8nIconButton
icon="x"
variant="ghost"
size="small"
icon-size="large"
:aria-label="i18n.baseText('instanceAi.embed.close')"
data-test-id="instance-ai-embed-close"
@click="emit('close')"
/>
<N8nTooltip
:content="i18n.baseText('instanceAi.thread.new')"
placement="bottom"
:show-after="TOOLTIP_DELAY_MS"
>
<N8nIconButton
icon="plus"
variant="ghost"
size="small"
icon-size="large"
:disabled="building"
:aria-label="i18n.baseText('instanceAi.thread.new')"
data-test-id="instance-ai-embed-new-thread"
@click="onNewThreadRequested"
/>
</N8nTooltip>
<N8nTooltip
:content="i18n.baseText('instanceAi.embed.openFullAssistant')"
placement="bottom"
:show-after="TOOLTIP_DELAY_MS"
>
<N8nIconButton
icon="external-link"
variant="ghost"
size="small"
icon-size="large"
:aria-label="i18n.baseText('instanceAi.embed.openFullAssistant')"
data-test-id="instance-ai-embed-open-full"
@click="openFullAssistant"
/>
</N8nTooltip>
<N8nTooltip
:content="i18n.baseText('instanceAi.embed.close')"
placement="bottom"
:show-after="TOOLTIP_DELAY_MS"
>
<N8nIconButton
icon="x"
variant="ghost"
size="small"
icon-size="large"
:aria-label="i18n.baseText('instanceAi.embed.close')"
data-test-id="instance-ai-embed-close"
@click="emit('close')"
/>
</N8nTooltip>
</template>
</InstanceAiViewHeader>
<div :class="$style.body">