fix(editor): Make AI assistant tool steps visible during streaming (n8n-io#23898)

- Steps visible during generation: When the AI assistant is working, users can now see each step (tool calls) as they happen in real-time, rather than having them hidden behind a collapsed section
- Auto-collapse on completion: Once the assistant finishes responding (or the user stops it), the steps automatically collapse to keep the final view clean and focused on the result
- Consistent loading state: The initial "thinking" state now uses the same visual component as the step list, providing a smoother transition as steps appear
- Cleaner copy: Removed trailing ellipsis from status text ("Thinking" instead of "Thinking...", "Processing" instead of "Processing...")
- Smoother transitions: Fixed a visual glitch where "Workflow generated" would briefly flash before the next step appeared

Author: aalises

packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.stories.ts

@@ -281,7 +281,7 @@ AssistantThinkingChat.args = {
 		firstName: 'Max',
 		lastName: 'Test',
 	},
-	loadingMessage: 'Thinking...',
+	loadingMessage: 'Thinking',
 };
 
 export const WithCodeSnippet = Template.bind({});
@@ -804,7 +804,7 @@ ToolCallsWithThinking.args = {
 			read: true,
 		},
 	]),
-	loadingMessage: 'Thinking...',
+	loadingMessage: 'Thinking',
 	streaming: true,
 };
 

packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.test.ts

@@ -48,7 +48,6 @@ const stubs = [
 	'AssistantIcon',
 	'AssistantText',
 	'InlineAskAssistantButton',
-	'AssistantLoadingMessage',
 ];
 
 // Stub MessageWrapper to render message as stringified JSON
@@ -293,12 +292,32 @@ describe('AskAssistantChat', () => {
 		// Tool messages are now grouped into thinking-group messages and rendered by ThinkingMessage component
 		// instead of MessageWrapper. These tests verify the grouping behavior.
 
-		const ThinkingMessageMock = vi.fn(() => ({
+		const thinkingMessageProps: Array<{
+			items: ChatUI.ThinkingItem[];
+			latestStatusText: string;
+			defaultExpanded?: boolean;
+			isStreaming?: boolean;
+		}> = [];
+		let thinkingMessageCallCount = 0;
+		const ThinkingMessageMock = {
+			name: 'ThinkingMessage',
+			props: ['items', 'latestStatusText', 'isStreaming', 'defaultExpanded'],
+			setup(props: Record<string, unknown>) {
+				thinkingMessageCallCount++;
+				thinkingMessageProps.push({
+					items: props.items as ChatUI.ThinkingItem[],
+					latestStatusText: props.latestStatusText as string,
+					defaultExpanded: props.defaultExpanded as boolean | undefined,
+					isStreaming: props.isStreaming as boolean | undefined,
+				});
+				return {};
+			},
 			template: '<div data-testid="thinking-message-mock"></div>',
-		}));
+		};
 		const MessageWrapperMock = vi.fn(() => ({
 			template: '<div data-testid="message-wrapper-mock"></div>',
 		}));
+
 		const stubsWithMocks = {
 			...Object.fromEntries(stubs.map((stub) => [stub, true])),
 			MessageWrapper: MessageWrapperMock,
@@ -320,7 +339,8 @@ describe('AskAssistantChat', () => {
 
 		const renderWithMessages = (messages: ChatUI.AssistantMessage[], extraProps = {}) => {
 			MessageWrapperMock.mockClear();
-			ThinkingMessageMock.mockClear();
+			thinkingMessageCallCount = 0;
+			thinkingMessageProps.length = 0;
 			return render(AskAssistantChat, {
 				global: { stubs: stubsWithMocks },
 				props: {
@@ -333,7 +353,8 @@ describe('AskAssistantChat', () => {
 
 		const renderWithDirectives = (messages: ChatUI.AssistantMessage[], extraProps = {}) => {
 			MessageWrapperMock.mockClear();
-			ThinkingMessageMock.mockClear();
+			thinkingMessageCallCount = 0;
+			thinkingMessageProps.length = 0;
 			return render(AskAssistantChat, {
 				global: {
 					directives: { n8nHtml },
@@ -348,9 +369,8 @@ describe('AskAssistantChat', () => {
 		};
 
 		const getThinkingMessageProps = (callIndex = 0) => {
-			const mockCall = ThinkingMessageMock.mock.calls[callIndex];
-			expect(mockCall).toBeDefined();
-			return mockCall as unknown as [{ items: ChatUI.ThinkingItem[]; latestStatusText: string }];
+			expect(thinkingMessageProps[callIndex]).toBeDefined();
+			return thinkingMessageProps[callIndex];
 		};
 
 		const getMessageWrapperProps = (callIndex = 0): MessageWrapperProps => {
@@ -369,10 +389,10 @@ describe('AskAssistantChat', () => {
 			renderWithMessages([message]);
 
 			// Tool messages are rendered as ThinkingMessage, not MessageWrapper
-			expect(ThinkingMessageMock).toHaveBeenCalledTimes(1);
+			expect(thinkingMessageCallCount).toBe(1);
 			expect(MessageWrapperMock).toHaveBeenCalledTimes(0);
 
-			const props = getThinkingMessageProps()[0];
+			const props = getThinkingMessageProps();
 			expect(props.items).toHaveLength(1);
 			expect(props.items[0].displayTitle).toBe('Search Results');
 		});
@@ -403,10 +423,10 @@ describe('AskAssistantChat', () => {
 			renderWithMessages(messages);
 
 			// All tool messages with same toolName should be grouped into one thinking-group
-			expect(ThinkingMessageMock).toHaveBeenCalledTimes(1);
+			expect(thinkingMessageCallCount).toBe(1);
 			expect(MessageWrapperMock).toHaveBeenCalledTimes(0);
 
-			const props = getThinkingMessageProps()[0];
+			const props = getThinkingMessageProps();
 			// Should have 1 item after deduplication by toolName
 			expect(props.items).toHaveLength(1);
 		});
@@ -443,7 +463,7 @@ describe('AskAssistantChat', () => {
 			renderWithMessages(messages);
 
 			// Hidden messages are filtered out, so tool messages are grouped together
-			expect(ThinkingMessageMock).toHaveBeenCalledTimes(1);
+			expect(thinkingMessageCallCount).toBe(1);
 			expect(MessageWrapperMock).toHaveBeenCalledTimes(0);
 		});
 
@@ -466,10 +486,10 @@ describe('AskAssistantChat', () => {
 			renderWithMessages(messages);
 
 			// Both tools should be in the same thinking-group but as separate items
-			expect(ThinkingMessageMock).toHaveBeenCalledTimes(1);
+			expect(thinkingMessageCallCount).toBe(1);
 			expect(MessageWrapperMock).toHaveBeenCalledTimes(0);
 
-			const props = getThinkingMessageProps()[0];
+			const props = getThinkingMessageProps();
 			expect(props.items).toHaveLength(2);
 		});
 
@@ -493,7 +513,7 @@ describe('AskAssistantChat', () => {
 			renderWithMessages(messages);
 
 			// Should render as ThinkingMessage with running tool
-			expect(ThinkingMessageMock).toHaveBeenCalledTimes(1);
+			expect(thinkingMessageCallCount).toBe(1);
 			expect(MessageWrapperMock).toHaveBeenCalledTimes(0);
 		});
 
@@ -522,7 +542,7 @@ describe('AskAssistantChat', () => {
 			renderWithDirectives(messages);
 
 			// Should have 2 thinking-groups and 1 text message
-			expect(ThinkingMessageMock).toHaveBeenCalledTimes(2);
+			expect(thinkingMessageCallCount).toBe(2);
 			expect(MessageWrapperMock).toHaveBeenCalledTimes(1);
 
 			const textMessageProps = getMessageWrapperProps(0);
@@ -567,7 +587,7 @@ describe('AskAssistantChat', () => {
 
 			// 2 text messages via MessageWrapper, 1 thinking-group via ThinkingMessage
 			expect(MessageWrapperMock).toHaveBeenCalledTimes(2);
-			expect(ThinkingMessageMock).toHaveBeenCalledTimes(1);
+			expect(thinkingMessageCallCount).toBe(1);
 
 			const firstProps = getMessageWrapperProps(0);
 			expect(firstProps.message).toEqual(
@@ -590,16 +610,35 @@ describe('AskAssistantChat', () => {
 			);
 		});
 
-		it('should show initial thinking-group when streaming with no tool messages', () => {
-			renderWithMessages([], { streaming: true, loadingMessage: 'Thinking...' });
+		it('should show ThinkingMessage with placeholder item when streaming with no tool messages', () => {
+			renderWithMessages([], { streaming: true, loadingMessage: 'Thinking' });
 
-			// Should create an initial thinking-group
-			expect(ThinkingMessageMock).toHaveBeenCalledTimes(1);
+			// Should render ThinkingMessage with a single "Thinking" item
+			expect(thinkingMessageCallCount).toBe(1);
 
-			const props = getThinkingMessageProps()[0];
+			const props = getThinkingMessageProps();
 			expect(props.items).toHaveLength(1);
-			expect(props.items[0].displayTitle).toBe('Thinking...');
+			expect(props.items[0].id).toBe('thinking-placeholder');
+			expect(props.items[0].displayTitle).toBe('Thinking');
 			expect(props.items[0].status).toBe('running');
+			expect(props.latestStatusText).toBe('Thinking');
+			expect(props.defaultExpanded).toBe(true);
+			expect(props.isStreaming).toBe(true);
+		});
+
+		it('should pass defaultExpanded as true to ThinkingMessage', () => {
+			const message = createToolMessage({
+				id: '1',
+				displayTitle: 'Search Results',
+				updates: [{ type: 'output', data: { result: 'Found items' } }],
+			});
+
+			renderWithMessages([message]);
+
+			expect(thinkingMessageCallCount).toBe(1);
+
+			const props = getThinkingMessageProps();
+			expect(props.defaultExpanded).toBe(true);
 		});
 	});
 

packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue

@@ -7,7 +7,6 @@ import { useI18n } from '../../composables/useI18n';
 import type { ChatUI, RatingFeedback, WorkflowSuggestion } from '../../types/assistant';
 import { isTaskAbortedMessage, isToolMessage, isThinkingGroupMessage } from '../../types/assistant';
 import AssistantIcon from '../AskAssistantIcon/AssistantIcon.vue';
-import AssistantLoadingMessage from '../AskAssistantLoadingMessage/AssistantLoadingMessage.vue';
 import AssistantText from '../AskAssistantText/AssistantText.vue';
 import InlineAskAssistantButton from '../InlineAskAssistantButton/InlineAskAssistantButton.vue';
 import N8nButton from '../N8nButton';
@@ -88,7 +87,11 @@ function filterOutHiddenMessages(messages: ChatUI.AssistantMessage[]): ChatUI.As
 
 function groupToolMessagesIntoThinking(
 	messages: ChatUI.AssistantMessage[],
-	options: { streaming?: boolean; loadingMessage?: string } = {},
+	options: {
+		streaming?: boolean;
+		loadingMessage?: string;
+		t: (key: string) => string;
+	},
 ): ChatUI.AssistantMessage[] {
 	const result: ChatUI.AssistantMessage[] = [];
 	let i = 0;
@@ -145,7 +148,7 @@ function groupToolMessagesIntoThinking(
 		}));
 
 		// If this is the last group, all tools completed, and we're still streaming,
-		// add a "Thinking..." item to show the AI is processing
+		// add a "Thinking" item to show the AI is processing
 		if (isLastToolGroup && allToolsCompleted && options.streaming && options.loadingMessage) {
 			items.push({
 				id: 'thinking-item',
@@ -166,7 +169,7 @@ function groupToolMessagesIntoThinking(
 					.split('_')
 					.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
 					.join(' ') ||
-				'Processing...';
+				options.t('assistantChat.thinking.processing');
 		} else if (
 			isLastToolGroup &&
 			allToolsCompleted &&
@@ -175,11 +178,12 @@ function groupToolMessagesIntoThinking(
 		) {
 			// Still streaming after tools completed - show thinking message
 			latestStatus = options.loadingMessage;
+		} else if (allToolsCompleted && !options.streaming) {
+			latestStatus = options.t('assistantChat.thinking.workflowGenerated');
 		} else if (allToolsCompleted) {
-			// All tools completed and not streaming - show "Workflow generated"
-			latestStatus = 'Workflow generated';
+			latestStatus = options.loadingMessage ?? options.t('assistantChat.thinking.processing');
 		} else {
-			latestStatus = 'Processing...';
+			latestStatus = options.t('assistantChat.thinking.thinking');
 		}
 
 		// Create a ThinkingGroup message with deduplicated items
@@ -196,27 +200,6 @@ function groupToolMessagesIntoThinking(
 		i = j;
 	}
 
-	// If streaming with a loadingMessage but no thinking-group exists yet (no tool messages received),
-	// create an initial thinking-group with just the "Thinking..." item
-	// Use the same stable ID as tool-based thinking-groups so Vue preserves component state
-	const hasThinkingGroup = result.some((msg) => msg.type === 'thinking-group');
-	if (options.streaming && options.loadingMessage && !hasThinkingGroup) {
-		const initialThinkingGroup: ChatUI.ThinkingGroupMessage = {
-			id: 'thinking-group',
-			role: 'assistant',
-			type: 'thinking-group',
-			items: [
-				{
-					id: 'thinking-item',
-					displayTitle: options.loadingMessage,
-					status: 'running',
-				},
-			],
-			latestStatusText: options.loadingMessage,
-		};
-		result.push(initialThinkingGroup);
-	}
-
 	return result;
 }
 
@@ -226,6 +209,7 @@ const normalizedMessages = computed(() => {
 	return groupToolMessagesIntoThinking(filterOutHiddenMessages(normalized), {
 		streaming: props.streaming,
 		loadingMessage: props.loadingMessage,
+		t,
 	});
 });
 
@@ -243,7 +227,6 @@ const textInputValue = ref<string>('');
 const promptInputRef = ref<InstanceType<typeof N8nPromptInput>>();
 const scrollAreaRef = ref<InstanceType<typeof N8nScrollArea>>();
 
-const messagesRef = ref<HTMLDivElement | null>(null);
 const inputWrapperRef = ref<HTMLDivElement | null>(null);
 
 const sessionEnded = computed(() => {
@@ -262,12 +245,16 @@ const showSuggestions = computed(() => {
 	return showPlaceholder.value && props.suggestions && props.suggestions.length > 0;
 });
 
-// Check if we have any thinking group - hides the generic loading message when tool status is shown
-// The ThinkingMessage component handles displaying the current status with shimmer animation
+// Check if we have any thinking group (tool messages grouped into thinking blocks)
 const hasAnyThinkingGroup = computed(() => {
 	return normalizedMessages.value.some((msg) => msg.type === 'thinking-group');
 });
 
+// Show placeholder when streaming with loading message but no tool messages have arrived yet
+const showThinkingPlaceholder = computed(() => {
+	return props.streaming && props.loadingMessage && !hasAnyThinkingGroup.value;
+});
+
 const showBottomInput = computed(() => {
 	// Hide bottom input when showing suggestions (blank state with suggestions)
 	return !showSuggestions.value;
@@ -418,6 +405,7 @@ defineExpose({
 								<ThinkingMessage
 									v-if="isThinkingGroupMessage(message)"
 									:items="message.items"
+									:default-expanded="true"
 									:latest-status-text="message.latestStatusText"
 									:is-streaming="streaming"
 									:class="getMessageStyles(message, i)"
@@ -476,16 +464,17 @@ defineExpose({
 							</data>
 							<slot name="messagesFooter" />
 						</div>
-						<div
-							v-if="loadingMessage && !hasAnyThinkingGroup"
-							:class="{
-								[$style.message]: true,
-								[$style.loading]: normalizedMessages?.length,
-								[$style.lastToolMessage]: true,
-							}"
-						>
-							<AssistantLoadingMessage :message="loadingMessage" />
-						</div>
+						<!-- Placeholder thinking message when there are no tools yet called -->
+						<ThinkingMessage
+							v-if="showThinkingPlaceholder"
+							:items="[
+								{ id: 'thinking-placeholder', displayTitle: loadingMessage!, status: 'running' },
+							]"
+							:latest-status-text="loadingMessage!"
+							:default-expanded="true"
+							:is-streaming="true"
+							:class="$style.lastToolMessage"
+						/>
 					</div>
 				</N8nScrollArea>
 			</div>