From 3ea03971d31abfdbf0812eb8099fe6cdcd8079ae Mon Sep 17 00:00:00 2001
From: Robin Braumann <50590409+bjorger@users.noreply.github.com>
Date: Thu, 17 Sep 2026 12:31:36 +0000
Subject: [PATCH] fix(editor): Add tooltips to assistant header actions
 (#38946)

---
 .../components/InstanceAiViewHeader.vue       | 49 +++++++-----
 .../instanceAi/embed/InstanceAiChatPanel.vue  | 76 ++++++++++++-------
 2 files changed, 79 insertions(+), 46 deletions(-)

diff --git a/packages/frontend/editor-ui/src/features/ai/instanceAi/components/InstanceAiViewHeader.vue b/packages/frontend/editor-ui/src/features/ai/instanceAi/components/InstanceAiViewHeader.vue
index b45d7653d33..0abeb1112c0 100644
--- a/packages/frontend/editor-ui/src/features/ai/instanceAi/components/InstanceAiViewHeader.vue
+++ b/packages/frontend/editor-ui/src/features/ai/instanceAi/components/InstanceAiViewHeader.vue
@@ -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
diff --git a/packages/frontend/editor-ui/src/features/ai/instanceAi/embed/InstanceAiChatPanel.vue b/packages/frontend/editor-ui/src/features/ai/instanceAi/embed/InstanceAiChatPanel.vue
index a97158185c8..f6fbafd36bc 100644
--- a/packages/frontend/editor-ui/src/features/ai/instanceAi/embed/InstanceAiChatPanel.vue
+++ b/packages/frontend/editor-ui/src/features/ai/instanceAi/embed/InstanceAiChatPanel.vue
@@ -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">