mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-09 22:24:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): AI assistant UX improvements (no-changelog) (#10568)

Browse source
This commit is contained in:
Milorad FIlipović 2024-09-03 10:43:24 +02:00 committed by GitHub
parent 5eba534319
commit d92374b5c6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 511 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
cypress/e2e/45-ai-assistant.cy.ts
View file

@ -130,14 +130,15 @@ describe('AI Assistant::enabled', () => {
ndv.getters.nodeExecuteButton().click();
aiAssistant.getters.nodeErrorViewAssistantButton().click();
cy.wait('@chatRequest');
aiAssistant.getters.quickReplies().should('have.length', 2);
aiAssistant.getters.quickReplies().eq(0).click();
aiAssistant.getters.quickReplyButtons().should('have.length', 2);
aiAssistant.getters.quickReplyButtons().eq(0).click();
cy.wait('@chatRequest');
aiAssistant.getters.chatMessagesUser().should('have.length', 1);
aiAssistant.getters.chatMessagesUser().eq(0).should('contain.text', "Sure, let's do it");
});
it('should send message to assistant when node is executed', () => {
it('should send message to assistant when node is executed only once', () => {
const TOTAL_REQUEST_COUNT = 1;
cy.intercept('POST', '/rest/ai-assistant/chat', {
statusCode: 200,
fixture: 'aiAssistant/simple_message_response.json',
@ -148,10 +149,46 @@ describe('AI Assistant::enabled', () => {
aiAssistant.getters.nodeErrorViewAssistantButton().click();
cy.wait('@chatRequest');
aiAssistant.getters.chatMessagesAssistant().should('have.length', 1);
// Executing the same node should sende a new message to the assistant automatically
cy.get('@chatRequest.all').then((interceptions) => {
expect(interceptions).to.have.length(TOTAL_REQUEST_COUNT);
});
// Executing the same node should not send a new message if users haven't responded to quick replies
ndv.getters.nodeExecuteButton().click();
cy.get('@chatRequest.all').then((interceptions) => {
expect(interceptions).to.have.length(TOTAL_REQUEST_COUNT);
});
aiAssistant.getters.chatMessagesAssistant().should('have.length', 2);
});
it('should show quick replies when node is executed after new suggestion', () => {
cy.intercept('POST', '/rest/ai-assistant/chat', (req) => {
req.reply((res) => {
if (['init-error-helper', 'message'].includes(req.body.payload.type)) {
res.send({ statusCode: 200, fixture: 'aiAssistant/simple_message_response.json' });
} else if (req.body.payload.type === 'event') {
res.send({ statusCode: 200, fixture: 'aiAssistant/node_execution_error_response.json' });
} else {
res.send({ statusCode: 500 });
}
});
}).as('chatRequest');
cy.createFixtureWorkflow('aiAssistant/test_workflow.json');
wf.actions.openNode('Edit Fields');
ndv.getters.nodeExecuteButton().click();
aiAssistant.getters.nodeErrorViewAssistantButton().click();
cy.wait('@chatRequest');
aiAssistant.getters.chatMessagesAssistant().should('have.length', 1);
ndv.getters.nodeExecuteButton().click();
cy.wait('@chatRequest');
aiAssistant.getters.chatMessagesAssistant().should('have.length', 2);
// Respond 'Yes' to the quick reply (request new suggestion)
aiAssistant.getters.quickReplies().contains('Yes').click();
cy.wait('@chatRequest');
// No quick replies at this point
aiAssistant.getters.quickReplies().should('not.exist');
ndv.getters.nodeExecuteButton().click();
// But after executing the node again, quick replies should be shown
aiAssistant.getters.chatMessagesAssistant().should('have.length', 4);
aiAssistant.getters.quickReplies().should('have.length', 2);
});
it('should warn before starting a new session', () => {

20
cypress/fixtures/aiAssistant/node_execution_error_response.json Normal file
View file

@ -0,0 +1,20 @@
{
"sessionId": "1",
"messages": [
{
"role": "assistant",
"type": "message",
"text": "It seems like my suggestion did not work. Do you want me to come up with a different suggestion? You can also provide more context via the chat.",
"quickReplies": [
{
"text": "Yes",
"type": "new-suggestion"
},
{
"text": "No, I don't think you can help",
"type": "event:end-session"
}
]
}
]
}

3
cypress/pages/features/ai-assistant.ts
View file

@ -26,7 +26,8 @@ export class AIAssistant extends BasePage {
chatMessagesAssistant: () => cy.getByTestId('chat-message-assistant'),
chatMessagesUser: () => cy.getByTestId('chat-message-user'),
chatMessagesSystem: () => cy.getByTestId('chat-message-system'),
quickReplies: () => cy.getByTestId('quick-replies').find('button'),
quickReplies: () => cy.getByTestId('quick-replies'),
quickReplyButtons: () => this.getters.quickReplies().find('button'),
newAssistantSessionModal: () => cy.getByTestId('new-assistant-session-modal'),
codeDiffs: () => cy.getByTestId('code-diff-suggestion'),
applyCodeDiffButtons: () => cy.getByTestId('replace-code-button'),

9
packages/design-system/src/components/AskAssistantChat/AskAssistantChat.stories.ts
View file

@ -238,3 +238,12 @@ EndOfSessionChat.args = {
},
]),
};
export const AssistantThinkingChat = Template.bind({});
AssistantThinkingChat.args = {
user: {
firstName: 'Max',
lastName: 'Test',
},
loadingMessage: 'Thinking...',
};

43
packages/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
View file

@ -3,6 +3,7 @@ import { computed, ref } from 'vue';
import AssistantIcon from '../AskAssistantIcon/AssistantIcon.vue';
import AssistantText from '../AskAssistantText/AssistantText.vue';
import AssistantAvatar from '../AskAssistantAvatar/AssistantAvatar.vue';
import AssistantLoadingMessage from '../AskAssistantLoadingMessage/AssistantLoadingMessage.vue';
import CodeDiff from '../CodeDiff/CodeDiff.vue';
import type { ChatUI } from '../../types/assistant';
import BlinkingCursor from '../BlinkingCursor/BlinkingCursor.vue';
@ -33,11 +34,13 @@ interface Props {
};
messages?: ChatUI.AssistantMessage[];
streaming?: boolean;
loadingMessage?: string;
sessionId?: string;
}
const emit = defineEmits<{
close: [];
message: [string, string | undefined];
message: [string, string?, boolean?];
codeReplace: [number];
codeUndo: [number];
}>();
@ -58,17 +61,21 @@ const sendDisabled = computed(() => {
return !textInputValue.value || props.streaming || sessionEnded.value;
});
const showPlaceholder = computed(() => {
return !props.messages?.length && !props.loadingMessage && !props.sessionId;
});
function isEndOfSessionEvent(event?: ChatUI.AssistantMessage) {
return event?.type === 'event' && event?.eventName === 'end-session';
}
function onQuickReply(opt: ChatUI.QuickReply) {
emit('message', opt.text, opt.type);
emit('message', opt.text, opt.type, opt.isFeedback);
}
function onSendMessage() {
if (sendDisabled.value) return;
emit('message', textInputValue.value, undefined);
emit('message', textInputValue.value);
textInputValue.value = '';
if (chatInput.value) {
chatInput.value.style.height = 'auto';
@ -221,26 +228,30 @@ function growInput() {
</div>
</div>
</div>
<div v-else :class="$style.placeholder" data-test-id="placeholder-message">
<div v-if="loadingMessage" :class="$style.messages">
<AssistantLoadingMessage :message="loadingMessage" />
</div>
<div
v-else-if="showPlaceholder"
:class="$style.placeholder"
data-test-id="placeholder-message"
>
<div :class="$style.greeting">Hi {{ user?.firstName }} 👋</div>
<div :class="$style.info">
<p>
{{
t('assistantChat.placeholder.1', [
`${user?.firstName}`,
t('assistantChat.aiAssistantName'),
])
}}
{{ t('assistantChat.placeholder.1') }}
</p>
<p>
{{ t('assistantChat.placeholder.2') }}
<InlineAskAssistantButton size="small" :static="true" />
{{ t('assistantChat.placeholder.3') }}
</p>
<p>
{{ t('assistantChat.placeholder.3') }}
<InlineAskAssistantButton size="small" :static="true" />
{{ t('assistantChat.placeholder.4') }}
</p>
<p>
{{ t('assistantChat.placeholder.5') }}
</p>
</div>
</div>
</div>
@ -325,6 +336,10 @@ p {
.messages {
padding: var(--spacing-xs);
& + & {
padding-top: 0;
}
}
.message {
@ -391,6 +406,8 @@ p {
}
.textMessage {
display: flex;
align-items: center;
font-size: var(--font-size-2xs);
}

15
packages/design-system/src/components/AskAssistantChat/__tests__/__snapshots__/AskAssistantChat.spec.ts.snap
View file

@ -730,6 +730,7 @@ Testing more code
</div>
</div>
<!--v-if-->
</div>
<div
class="inputWrapper"
@ -827,6 +828,7 @@ exports[`AskAssistantChat > renders default placeholder chat correctly 1`] = `
<div
class="body"
>
<!--v-if-->
<div
class="placeholder"
data-test-id="placeholder-message"
@ -840,10 +842,13 @@ exports[`AskAssistantChat > renders default placeholder chat correctly 1`] = `
class="info"
>
<p>
Hi Kobi, I'm Assistant and I'm here to assist you with building workflows.
I'm your Assistant, here to guide you through your journey with n8n.
</p>
<p>
Whenever you encounter a task that I can help with, you'll see the
While I'm still learning, I'm already equipped to help you debug any errors you might encounter.
</p>
<p>
If you run into an issue with a node, you'll see the
<button
class="button"
style="height: 18px;"
@ -896,10 +901,10 @@ exports[`AskAssistantChat > renders default placeholder chat correctly 1`] = `
</div>
</div>
</button>
button.
button
</p>
<p>
Clicking it starts a chat session with me.
Clicking it will start a chat with me, and I'll do my best to assist you!
</p>
</div>
</div>
@ -1131,6 +1136,7 @@ exports[`AskAssistantChat > renders end of session chat correctly 1`] = `
</div>
</div>
<!--v-if-->
</div>
<div
class="inputWrapper disabledInput"
@ -1309,6 +1315,7 @@ exports[`AskAssistantChat > renders streaming chat correctly 1`] = `
</div>
</div>
<!--v-if-->
</div>
<div
class="inputWrapper"

28
packages/design-system/src/components/AskAssistantLoadingMessage/AssistantLoadingMessage.stories.ts Normal file
View file

@ -0,0 +1,28 @@
import AssistantLoadingMessage from './AssistantLoadingMessage.vue';
import type { StoryFn } from '@storybook/vue3';
export default {
title: 'Assistant/AskAssistantLoadingMessage',
component: AssistantLoadingMessage,
argTypes: {},
};
const Template: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
AssistantLoadingMessage,
},
template: `<div class="p-xs" style="width: ${args.templateWidth || 'auto'}"><AssistantLoadingMessage v-bind="args" /></div>`,
});
export const Default = Template.bind({});
Default.args = {
message: 'Searching n8n documentation for the best possible answer...',
};
export const NarrowContainer = Template.bind({});
NarrowContainer.args = {
...Default.args,
templateWidth: '200px',
};

122
packages/design-system/src/components/AskAssistantLoadingMessage/AssistantLoadingMessage.vue Normal file
View file

@ -0,0 +1,122 @@
<script setup lang="ts">
import { defineProps, withDefaults } from 'vue';
import AssistantAvatar from '../AskAssistantAvatar/AssistantAvatar.vue';
withDefaults(
defineProps<{
message: string;
animationType?: 'slide-vertical' | 'slide-horizontal' | 'fade';
}>(),
{
animationType: 'slide-vertical',
},
);
</script>
<template>
<div :class="$style.container">
<div :class="$style.avatar">
<AssistantAvatar size="mini" />
</div>
<div :class="$style['message-container']">
<transition :name="animationType" mode="out-in">
<span v-if="message" :key="message" :class="$style.message">{{ message }}</span>
</transition>
</div>
</div>
</template>
<style module lang="scss">
.container {
display: flex;
gap: var(--spacing-3xs);
align-items: flex-start;
user-select: none;
}
.avatar {
animation: pulse 1.5s infinite;
position: relative;
}
.message-container {
display: inline-flex;
position: relative;
overflow: hidden;
line-height: 1.4rem;
}
.message {
margin: 0;
padding: 0;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-2xs);
text-align: left;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0.7;
}
}
</style>
<style lang="scss" scoped>
// Vertical Slide transition
.slide-vertical-enter-active,
.slide-vertical-leave-active {
transition:
transform 0.5s ease,
opacity 0.5s ease;
}
.slide-vertical-enter {
transform: translateY(100%);
opacity: 0;
}
.slide-vertical-leave-to {
transform: translateY(-100%);
opacity: 0;
}
// Horizontal Slide transition
.slide-horizontal-enter-active,
.slide-horizontal-leave-active {
transition:
transform 0.5s ease,
opacity 0.5s ease;
}
.slide-horizontal-enter {
transform: translateX(100%);
opacity: 0;
}
.slide-horizontal-leave-to {
transform: translateX(-100%);
opacity: 0;
}
// Fade transition
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter {
opacity: 0;
}
.fade-leave-to /* .fade-leave-active in <2.1.8 */ {
opacity: 0;
}
</style>

30
packages/design-system/src/components/AskAssistantLoadingMessage/DemoComponent.stories.ts Normal file
View file

@ -0,0 +1,30 @@
import DemoComponent from './DemoComponent.vue';
import type { StoryFn } from '@storybook/vue3';
export default {
title: 'Assistant/AskAssistantLoadingMessageTransitions',
component: DemoComponent,
argTypes: {},
};
const Template: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
DemoComponent,
},
template: '<DemoComponent v-bind="args" />',
});
export const Default = Template.bind({});
Default.args = {};
export const Horizontal = Template.bind({});
Horizontal.args = {
animationType: 'slide-horizontal',
};
export const Fade = Template.bind({});
Fade.args = {
animationType: 'fade',
};

55
packages/design-system/src/components/AskAssistantLoadingMessage/DemoComponent.vue Normal file
View file

@ -0,0 +1,55 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import AssistantLoadingMessage from './AssistantLoadingMessage.vue';
import Notice from '../N8nNotice/Notice.vue';
/**
* This is a demo component to show how the transitions work in the AssistantLoadingMessage component.
* It should be only used in the storybook.
*/
withDefaults(
defineProps<{
animationType?: 'slide-vertical' | 'slide-horizontal' | 'fade';
}>(),
{
animationType: 'slide-vertical',
},
);
const messages = [
'Analyzing the error...',
'Searching the n8n documentation...',
'Checking the n8n community for answers..',
];
const currentIndex = ref(0);
const currentMessage = computed(() => {
return messages[currentIndex.value];
});
const startMessageRotation = () => {
setInterval(() => {
currentIndex.value = (currentIndex.value + 1) % messages.length;
}, 2000);
};
onMounted(() => {
startMessageRotation();
});
</script>
<template>
<div>
<Notice type="warning" content="This component is for demo purposes only" />
<div :class="$style['loading-message']">
<AssistantLoadingMessage :message="currentMessage" :animation-type="animationType" />
</div>
</div>
</template>
<style module lang="scss">
.loading-message {
padding: var(--spacing-3xs);
}
</style>

13
packages/design-system/src/components/AskAssistantLoadingMessage/__tests__/AskAssistantLoadingMessage.spec.ts Normal file
View file

@ -0,0 +1,13 @@
import { render } from '@testing-library/vue';
import AssistantLoadingMessage from '../AssistantLoadingMessage.vue';
describe('AssistantLoadingMessage', () => {
it('renders loading message correctly', () => {
const { container } = render(AssistantLoadingMessage, {
props: {
loadingMessage: 'Thinking...',
},
});
expect(container).toMatchSnapshot();
});
});

71
packages/design-system/src/components/AskAssistantLoadingMessage/__tests__/__snapshots__/AskAssistantLoadingMessage.spec.ts.snap Normal file
View file

@ -0,0 +1,71 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`AssistantLoadingMessage > renders loading message correctly 1`] = `
<div>
<div
class="container"
data-v-4e90e01e=""
loadingmessage="Thinking..."
>
<div
class="avatar"
data-v-4e90e01e=""
>
<div
class="container mini"
data-v-4e90e01e=""
>
<svg
fill="none"
height="8"
viewBox="0 0 24 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
fill="white"
/>
<defs>
<lineargradient
gradientUnits="userSpaceOnUse"
id="paint0_linear_173_12825"
x1="-3.67094e-07"
x2="28.8315"
y1="-0.000120994"
y2="9.82667"
>
<stop
stop-color="var(--color-assistant-highlight-1)"
/>
<stop
offset="0.495"
stop-color="var(--color-assistant-highlight-2)"
/>
<stop
offset="1"
stop-color="var(--color-assistant-highlight-3)"
/>
</lineargradient>
</defs>
</svg>
</div>
</div>
<div
class="message-container"
data-v-4e90e01e=""
>
<transition-stub
appear="false"
css="true"
data-v-4e90e01e=""
mode="out-in"
name="slide-vertical"
persisted="false"
>
<!--v-if-->
</transition-stub>
</div>
</div>
</div>
`;

12
packages/design-system/src/locale/lang/en.ts
View file

@ -38,12 +38,14 @@ export default {
'assistantChat.sessionEndMessage.2': 'button in n8n',
'assistantChat.you': 'You',
'assistantChat.quickRepliesTitle': 'Quick reply 👇',
'assistantChat.placeholder.1': (options: string[]) =>
`Hi ${options[0][0] || 'there'}, I'm ${options[0][1]} and I'm here to assist you with building workflows.`,
'assistantChat.placeholder.1': () =>
"I'm your Assistant, here to guide you through your journey with n8n.",
'assistantChat.placeholder.2':
"Whenever you encounter a task that I can help with, you'll see the",
'assistantChat.placeholder.3': 'button.',
'assistantChat.placeholder.4': 'Clicking it starts a chat session with me.',
"While I'm still learning, I'm already equipped to help you debug any errors you might encounter.",
'assistantChat.placeholder.3': "If you run into an issue with a node, you'll see the",
'assistantChat.placeholder.4': 'button',
'assistantChat.placeholder.5':
"Clicking it will start a chat with me, and I'll do my best to assist you!",
'assistantChat.inputPlaceholder': 'Enter your response...',
'inlineAskAssistantButton.asked': 'Asked',
} as N8nLocale;

1
packages/design-system/src/types/assistant.ts
View file

@ -32,6 +32,7 @@ export namespace ChatUI {
export interface QuickReply {
type: string;
text: string;
isFeedback?: boolean;
}
export interface ErrorMessage {

9
packages/editor-ui/src/components/AskAssistant/AskAssistantChat.vue
View file

@ -16,6 +16,8 @@ const user = computed(() => ({
lastName: usersStore.currentUser?.lastName ?? '',
}));
const loadingMessage = computed(() => assistantStore.assistantThinkingMessage);
function onResize(data: { direction: string; x: number; width: number }) {
assistantStore.updateWindowWidth(data.width);
}
@ -24,7 +26,7 @@ function onResizeDebounced(data: { direction: string; x: number; width: number }
void useDebounce().callDebounced(onResize, { debounceTime: 10, trailing: true }, data);
}
async function onUserMessage(content: string, quickReplyType?: string) {
async function onUserMessage(content: string, quickReplyType?: string, isFeedback = false) {
await assistantStore.sendMessage({ text: content, quickReplyType });
const task = 'error';
const solutionCount =
@ -33,9 +35,10 @@ async function onUserMessage(content: string, quickReplyType?: string) {
(msg) => msg.role === 'assistant' && !['text', 'event'].includes(msg.type),
).length
: null;
if (quickReplyType === 'all-good' || quickReplyType === 'still-stuck') {
if (isFeedback) {
telemetry.track('User gave feedback', {
task,
chat_session_id: assistantStore.currentSessionId,
is_quick_reply: !!quickReplyType,
is_positive: quickReplyType === 'all-good',
solution_count: solutionCount,
@ -83,6 +86,8 @@ function onClose() {
:user="user"
:messages="assistantStore.chatMessages"
:streaming="assistantStore.streaming"
:loading-message="loadingMessage"
:session-id="assistantStore.currentSessionId"
@close="onClose"
@message="onUserMessage"
@code-replace="onCodeReplace"

2
packages/editor-ui/src/composables/useToast.ts
View file

@ -22,7 +22,7 @@ const messageDefaults: Partial<Omit<NotificationOptions, 'message'>> = {
position: 'bottom-right',
zIndex: 1900, // above NDV and below the modals
offset: 64,
appendTo: '#node-view-root',
appendTo: '#app-grid',
customClass: 'content-toast',
};

2
packages/editor-ui/src/plugins/i18n/locales/en.json
View file

@ -147,6 +147,8 @@
"aiAssistant.serviceError.message": "Unable to connect to n8n's AI service",
"aiAssistant.codeUpdated.message.title": "Assistant modified workflow",
"aiAssistant.codeUpdated.message.body": "Open the <a data-action='openNodeDetail' data-action-parameter-node='{nodeName}'>{nodeName}</a> node to see the changes",
"aiAssistant.thinkingSteps.analyzingError": "Analyzing the error...",
"aiAssistant.thinkingSteps.thinking": "Thinking...",
"banners.confirmEmail.message.1": "To secure your account and prevent future access issues, please confirm your",
"banners.confirmEmail.message.2": "email address.",
"banners.confirmEmail.button": "Confirm email",

1
packages/editor-ui/src/stores/__tests__/assistant.store.test.ts
View file

@ -311,7 +311,6 @@ describe('AI Assistant store', () => {
};
const assistantStore = useAssistantStore();
await assistantStore.initErrorHelper(context);
expect(assistantStore.chatMessages.length).toBe(2);
expect(apiSpy).toHaveBeenCalled();
});
});

65
packages/editor-ui/src/stores/assistant.store.ts
View file

@ -31,7 +31,7 @@ import { useUIStore } from './ui.store';
export const MAX_CHAT_WIDTH = 425;
export const MIN_CHAT_WIDTH = 250;
export const DEFAULT_CHAT_WIDTH = 325;
export const DEFAULT_CHAT_WIDTH = 330;
export const ENABLED_VIEWS = [...EDITABLE_CANVAS_VIEWS, VIEWS.EXECUTION_PREVIEW];
const READABLE_TYPES = ['code-diff', 'text', 'block'];
@ -63,6 +63,10 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
const currentSessionActiveExecutionId = ref<string | undefined>();
const currentSessionWorkflowId = ref<string | undefined>();
const lastUnread = ref<ChatUI.AssistantMessage | undefined>();
const nodeExecutionStatus = ref<'not_executed' | 'success' | 'error'>('not_executed');
// This is used to show a message when the assistant is performing intermediate steps
// We use streaming for assistants that support it, and this for agents
const assistantThinkingMessage = ref<string | undefined>();
const isExperimentEnabled = computed(
() => getVariant(AI_ASSISTANT_EXPERIMENT.name) === AI_ASSISTANT_EXPERIMENT.variant,
@ -117,6 +121,7 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
lastUnread.value = undefined;
currentSessionActiveExecutionId.value = undefined;
suggestions.value = {};
nodeExecutionStatus.value = 'not_executed';
}
// As assistant sidebar opens and closes, use window width to calculate the container width
@ -140,6 +145,7 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
const messages = [...chatMessages.value].filter(
(msg) => !(msg.id === id && msg.role === 'assistant'),
);
assistantThinkingMessage.value = undefined;
// TODO: simplify
assistantMessages.forEach((msg) => {
if (msg.type === 'message') {
@ -190,6 +196,8 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
quickReplies: msg.quickReplies,
read,
});
} else if (msg.type === 'intermediate-step') {
assistantThinkingMessage.value = msg.text;
}
});
chatMessages.value = messages;
@ -226,14 +234,8 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
});
}
function addEmptyAssistantMessage(id: string) {
chatMessages.value.push({
id,
role: 'assistant',
type: 'text',
content: '',
read: false,
});
function addLoadingAssistantMessage(message: string) {
assistantThinkingMessage.value = message;
}
function addUserMessage(content: string, id: string) {
@ -249,6 +251,7 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
function handleServiceError(e: unknown, id: string) {
assert(e instanceof Error);
stopStreaming();
assistantThinkingMessage.value = undefined;
addAssistantError(`${locale.baseText('aiAssistant.serviceError.message')}: (${e.message})`, id);
}
@ -316,7 +319,7 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
const availableAuthOptions = getNodeAuthOptions(nodeType);
authType = availableAuthOptions.find((option) => option.value === credentialInUse);
}
addEmptyAssistantMessage(id);
addLoadingAssistantMessage(locale.baseText('aiAssistant.thinkingSteps.analyzingError'));
openChat();
streaming.value = true;
@ -351,7 +354,7 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
assert(currentSessionId.value);
const id = getRandomId();
addEmptyAssistantMessage(id);
addLoadingAssistantMessage(locale.baseText('aiAssistant.thinkingSteps.thinking'));
streaming.value = true;
chatWithAssistant(
rootStore.restApiContext,
@ -369,21 +372,30 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
(e) => handleServiceError(e, id),
);
}
async function onNodeExecution(pushEvent: IPushDataNodeExecuteAfter) {
if (!chatSessionError.value || pushEvent.nodeName !== chatSessionError.value.node.name) {
return;
}
if (pushEvent.data.error) {
if (pushEvent.data.error && nodeExecutionStatus.value !== 'error') {
await sendEvent('node-execution-errored', pushEvent.data.error);
} else if (pushEvent.data.executionStatus === 'success') {
nodeExecutionStatus.value = 'error';
telemetry.track('User executed node after assistant suggestion', {
task: 'error',
chat_session_id: currentSessionId.value,
success: false,
});
} else if (
pushEvent.data.executionStatus === 'success' &&
nodeExecutionStatus.value !== 'success'
) {
await sendEvent('node-execution-succeeded');
nodeExecutionStatus.value = 'success';
telemetry.track('User executed node after assistant suggestion', {
task: 'error',
chat_session_id: currentSessionId.value,
success: true,
});
}
telemetry.track('User executed node after assistant suggestion', {
task: 'error',
chat_session_id: currentSessionId.value,
success: pushEvent.data.executionStatus === 'success',
});
}
async function sendMessage(
@ -396,10 +408,16 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
const id = getRandomId();
try {
addUserMessage(chatMessage.text, id);
addEmptyAssistantMessage(id);
addLoadingAssistantMessage(locale.baseText('aiAssistant.thinkingSteps.thinking'));
streaming.value = true;
assert(currentSessionId.value);
if (
chatMessage.quickReplyType === 'new-suggestion' &&
nodeExecutionStatus.value !== 'not_executed'
) {
nodeExecutionStatus.value = 'not_executed';
}
chatWithAssistant(
rootStore.restApiContext,
{
@ -415,6 +433,12 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
() => onDoneStreaming(id),
(e) => handleServiceError(e, id),
);
telemetry.track('User sent message in Assistant', {
message: chatMessage.text,
is_quick_reply: !!chatMessage.quickReplyType,
chat_session_id: currentSessionId.value,
message_number: chatMessages.value.filter((msg) => msg.role === 'user').length,
});
} catch (e: unknown) {
// in case of assert
handleServiceError(e, id);
@ -566,5 +590,6 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
resetAssistantChat,
chatWindowOpen,
addAssistantMessages,
assistantThinkingMessage,
};
});

16
packages/editor-ui/src/types/assistant.types.ts
View file

@ -76,6 +76,7 @@ export namespace ChatRequest {
role: 'assistant';
type: 'message';
text: string;
step?: 'n8n_documentation' | 'n8n_forum';
}
interface AssistantSummaryMessage {
@ -98,8 +99,21 @@ export namespace ChatRequest {
text: string;
}
interface AgentThinkingStep {
role: 'assistant';
type: 'intermediate-step';
text: string;
step: string;
}
export type MessageResponse =
| ((AssistantChatMessage | CodeDiffMessage | AssistantSummaryMessage | AgentChatMessage) & {
| ((
| AssistantChatMessage
| CodeDiffMessage
| AssistantSummaryMessage
| AgentChatMessage
| AgentThinkingStep
) & {
quickReplies?: QuickReplyOption[];
})
| EndSessionMessage;