mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): Canvas chat UI & UX improvements (#11924)

Browse source
This commit is contained in:
oleg 2024-11-29 11:24:17 +01:00 committed by GitHub
parent 5f6f8a1bdd
commit 1e25774541
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 258 additions and 212 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
packages/@n8n/chat/src/components/Input.vue
View file

@ -38,12 +38,12 @@ const isSubmitting = ref(false);
const resizeObserver = ref<ResizeObserver | null>(null);
const isSubmitDisabled = computed(() => {
return input.value === '' || waitingForResponse.value || options.disabled?.value === true;
return input.value === '' || unref(waitingForResponse) || options.disabled?.value === true;
});
const isInputDisabled = computed(() => options.disabled?.value === true);
const isFileUploadDisabled = computed(
() => isFileUploadAllowed.value && waitingForResponse.value && !options.disabled?.value,
() => isFileUploadAllowed.value && unref(waitingForResponse) && !options.disabled?.value,
);
const isFileUploadAllowed = computed(() => unref(options.allowFileUploads) === true);
const allowedFileTypes = computed(() => unref(options.allowedFilesMimeTypes));
@ -194,10 +194,13 @@ function adjustHeight(event: Event) {
<template>
<div class="chat-input" :style="styleVars" @keydown.stop="onKeyDown">
<div class="chat-inputs">
<div v-if="$slots.leftPanel" class="chat-input-left-panel">
<slot name="leftPanel" />
</div>
<textarea
ref="chatTextArea"
data-test-id="chat-input"
v-model="input"
data-test-id="chat-input"
:disabled="isInputDisabled"
:placeholder="t(props.placeholder)"
@keydown.enter="onSubmitKeydown"
@ -251,7 +254,7 @@ function adjustHeight(event: Event) {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
align-items: flex-end;
textarea {
font-family: inherit;
@ -259,8 +262,7 @@ function adjustHeight(event: Event) {
width: 100%;
border: var(--chat--input--border, 0);
border-radius: var(--chat--input--border-radius, 0);
padding: 0.8rem;
padding-right: calc(0.8rem + (var(--controls-count, 1) * var(--chat--textarea--height)));
padding: var(--chat--input--padding, 0.8rem);
min-height: var(--chat--textarea--height, 2.5rem); // Set a smaller initial height
max-height: var(--chat--textarea--max-height, 30rem);
height: var(--chat--textarea--height, 2.5rem); // Set initial height same as min-height
@ -271,6 +273,9 @@ function adjustHeight(event: Event) {
outline: none;
line-height: var(--chat--input--line-height, 1.5);
&::placeholder {
font-size: var(--chat--input--placeholder--font-size, var(--chat--input--font-size, inherit));
}
&:focus,
&:hover {
border-color: var(--chat--input--border-active, 0);
@ -279,9 +284,6 @@ function adjustHeight(event: Event) {
}
.chat-inputs-controls {
display: flex;
position: absolute;
right: 0.5rem;
bottom: 0;
}
.chat-input-send-button,
.chat-input-file-button {
@ -340,4 +342,9 @@ function adjustHeight(event: Event) {
gap: 0.5rem;
padding: var(--chat--files-spacing, 0.25rem);
}
.chat-input-left-panel {
width: var(--chat--input--left--panel--width, 2rem);
margin-left: 0.4rem;
}
</style>

6
packages/@n8n/chat/src/components/Message.vue
View file

@ -136,7 +136,8 @@ onMounted(async () => {
font-size: var(--chat--message--font-size, 1rem);
padding: var(--chat--message--padding, var(--chat--spacing));
border-radius: var(--chat--message--border-radius, var(--chat--border-radius));
scroll-margin: 100px;
scroll-margin: 3rem;
.chat-message-actions {
position: absolute;
bottom: calc(100% - 0.5rem);
@ -151,9 +152,6 @@ onMounted(async () => {
left: auto;
right: 0;
}
&.chat-message-from-bot .chat-message-actions {
bottom: calc(100% - 1rem);
}
&:hover {
.chat-message-actions {

16
packages/@n8n/chat/src/css/markdown.scss
View file

@ -37,8 +37,7 @@ body {
4. Prevent font size adjustment after orientation changes (IE, iOS)
5. Prevent overflow from long words (all)
*/
font-size: 110%; /* 2 */
line-height: 1.6; /* 3 */
line-height: 1.4; /* 3 */
-webkit-text-size-adjust: 100%; /* 4 */
word-break: break-word; /* 5 */
@ -407,7 +406,7 @@ body {
h4,
h5,
h6 {
margin: 3.2rem 0 0.8em;
margin: 2rem 0 0.8em;
}
/*
@ -641,4 +640,15 @@ body {
body > a:first-child:focus {
top: 1rem;
}
// Lists
ul,
ol {
padding-left: 1.5rem;
margin-bottom: 1rem;
li {
margin-bottom: 0.5rem;
}
}
}

2
packages/@n8n/nodes-langchain/utils/descriptions.ts
View file

@ -66,7 +66,7 @@ export const inputSchemaField: INodeProperties = {
};
export const promptTypeOptions: INodeProperties = {
displayName: 'Prompt Source',
displayName: 'Prompt Source (User Message)',
name: 'promptType',
type: 'options',
options: [

124
packages/editor-ui/src/components/CanvasChat/CanvasChat.test.ts
View file

@ -4,6 +4,7 @@ import { waitFor } from '@testing-library/vue';
import { userEvent } from '@testing-library/user-event';
import { createRouter, createWebHistory } from 'vue-router';
import { computed, ref } from 'vue';
import type { INodeTypeDescription } from 'n8n-workflow';
import { NodeConnectionType } from 'n8n-workflow';
import CanvasChat from './CanvasChat.vue';
@ -15,7 +16,6 @@ import { ChatOptionsSymbol, ChatSymbol } from '@n8n/chat/constants';
import { chatEventBus } from '@n8n/chat/event-buses';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useUIStore } from '@/stores/ui.store';
import { useCanvasStore } from '@/stores/canvas.store';
import * as useChatMessaging from './composables/useChatMessaging';
import * as useChatTrigger from './composables/useChatTrigger';
@ -23,6 +23,7 @@ import { useToast } from '@/composables/useToast';
import type { IExecutionResponse, INodeUi } from '@/Interface';
import type { ChatMessage } from '@n8n/chat/types';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
vi.mock('@/composables/useToast', () => {
const showMessage = vi.fn();
@ -61,6 +62,26 @@ const mockNodes: INodeUi[] = [
position: [960, 860],
},
];
const mockNodeTypes: INodeTypeDescription[] = [
{
displayName: 'AI Agent',
name: '@n8n/n8n-nodes-langchain.agent',
properties: [],
defaults: {
name: 'AI Agent',
},
inputs: [NodeConnectionType.Main],
outputs: [NodeConnectionType.Main],
version: 0,
group: [],
description: '',
codex: {
subcategories: {
AI: ['Agents'],
},
},
},
];
const mockConnections = {
'When chat message received': {
@ -110,8 +131,8 @@ describe('CanvasChat', () => {
});
let workflowsStore: ReturnType<typeof mockedStore<typeof useWorkflowsStore>>;
let uiStore: ReturnType<typeof mockedStore<typeof useUIStore>>;
let canvasStore: ReturnType<typeof mockedStore<typeof useCanvasStore>>;
let nodeTypeStore: ReturnType<typeof mockedStore<typeof useNodeTypesStore>>;
beforeEach(() => {
const pinia = createTestingPinia({
@ -131,8 +152,8 @@ describe('CanvasChat', () => {
setActivePinia(pinia);
workflowsStore = mockedStore(useWorkflowsStore);
uiStore = mockedStore(useUIStore);
canvasStore = mockedStore(useCanvasStore);
nodeTypeStore = mockedStore(useNodeTypesStore);
// Setup default mocks
workflowsStore.getCurrentWorkflow.mockReturnValue(
@ -141,12 +162,21 @@ describe('CanvasChat', () => {
connections: mockConnections,
}),
);
workflowsStore.getNodeByName.mockImplementation(
(name) => mockNodes.find((node) => node.name === name) ?? null,
);
workflowsStore.getNodeByName.mockImplementation((name) => {
const matchedNode = mockNodes.find((node) => node.name === name) ?? null;
return matchedNode;
});
workflowsStore.isChatPanelOpen = true;
workflowsStore.isLogsPanelOpen = true;
workflowsStore.getWorkflowExecution = mockWorkflowExecution as unknown as IExecutionResponse;
workflowsStore.getPastChatMessages = ['Previous message 1', 'Previous message 2'];
nodeTypeStore.getNodeType = vi.fn().mockImplementation((nodeTypeName) => {
return mockNodeTypes.find((node) => node.name === nodeTypeName) ?? null;
});
workflowsStore.runWorkflow.mockResolvedValue({ executionId: 'test-execution-issd' });
});
afterEach(() => {
@ -190,6 +220,10 @@ describe('CanvasChat', () => {
// Verify message and response
expect(await findByText('Hello AI!')).toBeInTheDocument();
await waitFor(async () => {
workflowsStore.getWorkflowExecution = {
...(mockWorkflowExecution as unknown as IExecutionResponse),
status: 'success',
};
expect(await findByText('AI response message')).toBeInTheDocument();
});
@ -231,11 +265,12 @@ describe('CanvasChat', () => {
await userEvent.type(input, 'Test message');
await userEvent.keyboard('{Enter}');
// Verify loading states
uiStore.isActionActive = { workflowRunning: true };
await waitFor(() => expect(queryByTestId('chat-message-typing')).toBeInTheDocument());
uiStore.isActionActive = { workflowRunning: false };
workflowsStore.getWorkflowExecution = {
...(mockWorkflowExecution as unknown as IExecutionResponse),
status: 'success',
};
await waitFor(() => expect(queryByTestId('chat-message-typing')).not.toBeInTheDocument());
});
@ -269,7 +304,7 @@ describe('CanvasChat', () => {
sendMessage: vi.fn(),
extractResponseMessage: vi.fn(),
previousMessageIndex: ref(0),
waitForExecution: vi.fn(),
isLoading: computed(() => false),
});
});
@ -339,7 +374,7 @@ describe('CanvasChat', () => {
sendMessage: vi.fn(),
extractResponseMessage: vi.fn(),
previousMessageIndex: ref(0),
waitForExecution: vi.fn(),
isLoading: computed(() => false),
});
workflowsStore.isChatPanelOpen = true;
@ -437,7 +472,7 @@ describe('CanvasChat', () => {
sendMessage: sendMessageSpy,
extractResponseMessage: vi.fn(),
previousMessageIndex: ref(0),
waitForExecution: vi.fn(),
isLoading: computed(() => false),
});
workflowsStore.messages = mockMessages;
});
@ -449,26 +484,25 @@ describe('CanvasChat', () => {
await userEvent.click(repostButton);
expect(sendMessageSpy).toHaveBeenCalledWith('Original message');
// expect.objectContaining({
// runData: expect.objectContaining({
// 'When chat message received': expect.arrayContaining([
// expect.objectContaining({
// data: expect.objectContaining({
// main: expect.arrayContaining([
// expect.arrayContaining([
// expect.objectContaining({
// json: expect.objectContaining({
// chatInput: 'Original message',
// }),
// }),
// ]),
// ]),
// }),
// }),
// ]),
// }),
// }),
// );
expect.objectContaining({
runData: expect.objectContaining({
'When chat message received': expect.arrayContaining([
expect.objectContaining({
data: expect.objectContaining({
main: expect.arrayContaining([
expect.arrayContaining([
expect.objectContaining({
json: expect.objectContaining({
chatInput: 'Original message',
}),
}),
]),
]),
}),
}),
]),
}),
});
});
it('should show message options only for appropriate messages', async () => {
@ -494,32 +528,6 @@ describe('CanvasChat', () => {
});
});
describe('execution handling', () => {
it('should update UI when execution is completed', async () => {
const { findByTestId, queryByTestId } = renderComponent();
// Start execution
const input = await findByTestId('chat-input');
await userEvent.type(input, 'Test message');
await userEvent.keyboard('{Enter}');
// Simulate execution completion
uiStore.isActionActive = { workflowRunning: true };
await waitFor(() => {
expect(queryByTestId('chat-message-typing')).toBeInTheDocument();
});
uiStore.isActionActive = { workflowRunning: false };
workflowsStore.setWorkflowExecutionData(
mockWorkflowExecution as unknown as IExecutionResponse,
);
await waitFor(() => {
expect(queryByTestId('chat-message-typing')).not.toBeInTheDocument();
});
});
});
describe('panel state synchronization', () => {
it('should update canvas height when chat or logs panel state changes', async () => {
renderComponent();

88
packages/editor-ui/src/components/CanvasChat/CanvasChat.vue
View file

@ -25,11 +25,9 @@ import type { Chat, ChatMessage, ChatOptions } from '@n8n/chat/types';
import type { RunWorkflowChatPayload } from './composables/useChatMessaging';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useCanvasStore } from '@/stores/canvas.store';
import { useUIStore } from '@/stores/ui.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
const workflowsStore = useWorkflowsStore();
const uiStore = useUIStore();
const canvasStore = useCanvasStore();
const nodeTypesStore = useNodeTypesStore();
const nodeHelpers = useNodeHelpers();
@ -43,10 +41,7 @@ const container = ref<HTMLElement>();
// Computed properties
const workflow = computed(() => workflowsStore.getCurrentWorkflow());
const isLoading = computed(() => {
const result = uiStore.isActionActive.workflowRunning;
return result;
});
const allConnections = computed(() => workflowsStore.allConnections);
const isChatOpen = computed(() => {
const result = workflowsStore.isChatPanelOpen;
@ -55,34 +50,38 @@ const isChatOpen = computed(() => {
const canvasNodes = computed(() => workflowsStore.allNodes);
const isLogsOpen = computed(() => workflowsStore.isLogsPanelOpen);
const previousChatMessages = computed(() => workflowsStore.getPastChatMessages);
const resultData = computed(() => workflowsStore.getWorkflowRunData);
// Expose internal state for testing
defineExpose({
messages,
currentSessionId,
isDisabled,
workflow,
isLoading,
});
const { runWorkflow } = useRunWorkflow({ router });
// Initialize features with injected dependencies
const { chatTriggerNode, connectedNode, allowFileUploads, setChatTriggerNode, setConnectedNode } =
useChatTrigger({
workflow,
canvasNodes,
getNodeByName: workflowsStore.getNodeByName,
getNodeType: nodeTypesStore.getNodeType,
});
const {
chatTriggerNode,
connectedNode,
allowFileUploads,
allowedFilesMimeTypes,
setChatTriggerNode,
setConnectedNode,
} = useChatTrigger({
workflow,
canvasNodes,
getNodeByName: workflowsStore.getNodeByName,
getNodeType: nodeTypesStore.getNodeType,
});
const { sendMessage, getChatMessages } = useChatMessaging({
const { sendMessage, getChatMessages, isLoading } = useChatMessaging({
chatTrigger: chatTriggerNode,
connectedNode,
messages,
sessionId: currentSessionId,
workflow,
isLoading,
executionResultData: computed(() => workflowsStore.getWorkflowExecution?.data?.resultData),
getWorkflowResultDataByNodeName: workflowsStore.getWorkflowResultDataByNodeName,
onRunChatWorkflow,
@ -132,7 +131,7 @@ function createChatConfig(params: {
showWindowCloseButton: true,
disabled: params.isDisabled,
allowFileUploads: params.allowFileUploads,
allowedFilesMimeTypes: '',
allowedFilesMimeTypes,
};
return { chatConfig, chatOptions };
@ -173,15 +172,50 @@ const closePanel = () => {
workflowsStore.setPanelOpen('chat', false);
};
async function onRunChatWorkflow(payload: RunWorkflowChatPayload) {
const response = await runWorkflow({
triggerNode: payload.triggerNode,
nodeData: payload.nodeData,
source: payload.source,
// This function creates a promise that resolves when the workflow execution completes
// It's used to handle the loading state while waiting for the workflow to finish
async function createExecutionPromise() {
let resolvePromise: () => void;
const promise = new Promise<void>((resolve) => {
resolvePromise = resolve;
});
workflowsStore.appendChatMessage(payload.message);
return response;
// Watch for changes in the workflow execution status
const stopWatch = watch(
() => workflowsStore.getWorkflowExecution?.status,
(newStatus) => {
// If the status is no longer 'running', resolve the promise
if (newStatus && newStatus !== 'running') {
resolvePromise();
// Stop the watcher when the promise is resolved
stopWatch();
}
},
{ immediate: true }, // Check the status immediately when the watcher is set up
);
// Return the promise, which will resolve when the workflow execution is complete
// This allows the caller to await the execution and handle the loading state appropriately
return await promise;
}
async function onRunChatWorkflow(payload: RunWorkflowChatPayload) {
try {
const response = await runWorkflow({
triggerNode: payload.triggerNode,
nodeData: payload.nodeData,
source: payload.source,
});
if (response) {
await createExecutionPromise();
workflowsStore.appendChatMessage(payload.message);
return response;
}
return;
} catch (error) {
throw error;
}
}
// Initialize chat config
@ -264,6 +298,8 @@ watchEffect(() => {
:messages="messages"
:session-id="currentSessionId"
:past-chat-messages="previousChatMessages"
:show-close-button="!connectedNode"
@close="closePanel"
@refresh-session="handleRefreshSession"
@display-execution="handleDisplayExecution"
@send-message="sendMessage"
@ -272,7 +308,7 @@ watchEffect(() => {
</n8n-resize-wrapper>
<div v-if="isLogsOpen && connectedNode" :class="$style.logs">
<ChatLogsPanel
:key="messages.length"
:key="`${resultData?.length ?? messages?.length}`"
:workflow="workflow"
data-test-id="canvas-chat-logs"
:node="connectedNode"

93
packages/editor-ui/src/components/CanvasChat/components/ChatMessagesPanel.vue
View file

@ -17,6 +17,7 @@ interface Props {
pastChatMessages: string[];
messages: ChatMessage[];
sessionId: string;
showCloseButton?: boolean;
}
const props = defineProps<Props>();
@ -25,6 +26,7 @@ const emit = defineEmits<{
displayExecution: [id: string];
sendMessage: [message: string];
refreshSession: [];
close: [];
}>();
const messageComposable = useMessage();
@ -142,7 +144,7 @@ function copySessionId() {
<template>
<div :class="$style.chat" data-test-id="workflow-lm-chat-dialog">
<header :class="$style.chatHeader">
<span>{{ locale.baseText('chat.window.title') }}</span>
<span :class="$style.chatTitle">{{ locale.baseText('chat.window.title') }}</span>
<div :class="$style.session">
<span>{{ locale.baseText('chat.window.session.title') }}</span>
<n8n-tooltip placement="left">
@ -154,15 +156,24 @@ function copySessionId() {
}}</span>
</n8n-tooltip>
<n8n-icon-button
:class="$style.refreshSession"
:class="$style.headerButton"
data-test-id="refresh-session-button"
type="tertiary"
text
outline
type="secondary"
size="mini"
icon="undo"
:title="locale.baseText('chat.window.session.reset.confirm')"
@click="onRefreshSession"
/>
<n8n-icon-button
v-if="showCloseButton"
:class="$style.headerButton"
outline
type="secondary"
size="mini"
icon="times"
@click="emit('close')"
/>
</div>
</header>
<main :class="$style.chatBody">
@ -199,29 +210,32 @@ function copySessionId() {
</main>
<div :class="$style.messagesInput">
<div v-if="pastChatMessages.length > 0" :class="$style.messagesHistory">
<n8n-button
title="Navigate to previous message"
icon="chevron-up"
type="tertiary"
text
size="mini"
@click="onArrowKeyDown({ currentInputValue: '', key: 'ArrowUp' })"
/>
<n8n-button
title="Navigate to next message"
icon="chevron-down"
type="tertiary"
text
size="mini"
@click="onArrowKeyDown({ currentInputValue: '', key: 'ArrowDown' })"
/>
</div>
<ChatInput
data-test-id="lm-chat-inputs"
:placeholder="inputPlaceholder"
@arrow-key-down="onArrowKeyDown"
/>
>
<template v-if="pastChatMessages.length > 0" #leftPanel>
<div :class="$style.messagesHistory">
<n8n-button
title="Navigate to previous message"
icon="chevron-up"
type="tertiary"
text
size="mini"
@click="onArrowKeyDown({ currentInputValue: '', key: 'ArrowUp' })"
/>
<n8n-button
title="Navigate to next message"
icon="chevron-down"
type="tertiary"
text
size="mini"
@click="onArrowKeyDown({ currentInputValue: '', key: 'ArrowDown' })"
/>
</div>
</template>
</ChatInput>
</div>
</div>
</template>
@ -229,19 +243,22 @@ function copySessionId() {
<style lang="scss" module>
.chat {
--chat--spacing: var(--spacing-xs);
--chat--message--padding: var(--spacing-xs);
--chat--message--font-size: var(--font-size-s);
--chat--message--padding: var(--spacing-2xs);
--chat--message--font-size: var(--font-size-xs);
--chat--input--font-size: var(--font-size-s);
--chat--input--placeholder--font-size: var(--font-size-xs);
--chat--message--bot--background: transparent;
--chat--message--user--background: var(--color-text-lighter);
--chat--message--bot--color: var(--color-text-dark);
--chat--message--user--color: var(--color-text-dark);
--chat--message--bot--border: none;
--chat--message--user--border: none;
--chat--message--user--border: none;
--chat--input--padding: var(--spacing-xs);
--chat--color-typing: var(--color-text-light);
--chat--textarea--max-height: calc(var(--panel-height) * 0.5);
--chat--textarea--max-height: calc(var(--panel-height) * 0.3);
--chat--message--pre--background: var(--color-foreground-light);
--chat--textarea--height: 2.5rem;
height: 100%;
display: flex;
flex-direction: column;
@ -260,6 +277,9 @@ function copySessionId() {
justify-content: space-between;
align-items: center;
}
.chatTitle {
font-weight: 600;
}
.session {
display: flex;
align-items: center;
@ -275,8 +295,9 @@ function copySessionId() {
cursor: pointer;
}
.refreshSession {
.headerButton {
max-height: 1.1rem;
border: none;
}
.chatBody {
display: flex;
@ -306,7 +327,7 @@ function copySessionId() {
--chat--input--file--button--background: transparent;
--chat--input--file--button--color: var(--color-primary);
--chat--input--border-active: var(--input-focus-border-color, var(--color-secondary));
--chat--files-spacing: var(--spacing-2xs) 0;
--chat--files-spacing: var(--spacing-2xs);
--chat--input--background: transparent;
--chat--input--file--button--color: var(--color-button-secondary-font);
--chat--input--file--button--color-hover: var(--color-primary);
@ -318,7 +339,7 @@ function copySessionId() {
--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
}
padding: 0 0 0 var(--spacing-xs);
padding: var(--spacing-5xs);
margin: 0 var(--chat--spacing) var(--chat--spacing);
flex-grow: 1;
display: flex;
@ -333,16 +354,4 @@ function copySessionId() {
--input-border-color: #4538a3;
}
}
.messagesHistory {
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-bottom: var(--spacing-3xs);
button:first-child {
margin-top: var(--spacing-4xs);
margin-bottom: calc(-1 * var(--spacing-4xs));
}
}
</style>

63
packages/editor-ui/src/components/CanvasChat/composables/useChatMessaging.ts
View file

@ -1,5 +1,5 @@
import type { ComputedRef, Ref } from 'vue';
import { ref } from 'vue';
import { computed, ref } from 'vue';
import { v4 as uuid } from 'uuid';
import type { ChatMessage, ChatMessageText } from '@n8n/chat/types';
import { NodeConnectionType, CHAT_TRIGGER_NODE_TYPE } from 'n8n-workflow';
@ -34,7 +34,6 @@ export interface ChatMessagingDependencies {
messages: Ref<ChatMessage[]>;
sessionId: Ref<string>;
workflow: ComputedRef<Workflow>;
isLoading: ComputedRef<boolean>;
executionResultData: ComputedRef<IRunExecutionData['resultData'] | undefined>;
getWorkflowResultDataByNodeName: (nodeName: string) => ITaskData[] | null;
onRunChatWorkflow: (
@ -48,7 +47,6 @@ export function useChatMessaging({
messages,
sessionId,
workflow,
isLoading,
executionResultData,
getWorkflowResultDataByNodeName,
onRunChatWorkflow,
@ -56,6 +54,7 @@ export function useChatMessaging({
const locale = useI18n();
const { showError } = useToast();
const previousMessageIndex = ref(0);
const isLoading = ref(false);
/** Converts a file to binary data */
async function convertFileToBinaryData(file: File): Promise<IBinaryData> {
@ -147,57 +146,45 @@ export function useChatMessaging({
},
source: [null],
};
isLoading.value = true;
const response = await onRunChatWorkflow({
triggerNode: triggerNode.name,
nodeData,
source: 'RunData.ManualChatMessage',
message,
});
isLoading.value = false;
if (!response?.executionId) {
showError(
new Error('It was not possible to start workflow!'),
'Workflow could not be started',
);
return;
}
waitForExecution(response.executionId);
processExecutionResultData(response.executionId);
}
/** Waits for workflow execution to complete */
function waitForExecution(executionId: string) {
const waitInterval = setInterval(() => {
if (!isLoading.value) {
clearInterval(waitInterval);
function processExecutionResultData(executionId: string) {
const lastNodeExecuted = executionResultData.value?.lastNodeExecuted;
const lastNodeExecuted = executionResultData.value?.lastNodeExecuted;
if (!lastNodeExecuted) return;
if (!lastNodeExecuted) return;
const nodeResponseDataArray = get(executionResultData.value.runData, lastNodeExecuted) ?? [];
const nodeResponseDataArray =
get(executionResultData.value.runData, lastNodeExecuted) ?? [];
const nodeResponseData = nodeResponseDataArray[nodeResponseDataArray.length - 1];
const nodeResponseData = nodeResponseDataArray[nodeResponseDataArray.length - 1];
let responseMessage: string;
let responseMessage: string;
if (get(nodeResponseData, 'error')) {
responseMessage = '[ERROR: ' + get(nodeResponseData, 'error.message') + ']';
} else {
const responseData = get(nodeResponseData, 'data.main[0][0].json');
responseMessage = extractResponseMessage(responseData);
}
messages.value.push({
text: responseMessage,
sender: 'bot',
createdAt: new Date().toISOString(),
id: executionId ?? uuid(),
});
}
}, 500);
if (get(nodeResponseData, 'error')) {
responseMessage = '[ERROR: ' + get(nodeResponseData, 'error.message') + ']';
} else {
const responseData = get(nodeResponseData, 'data.main[0][0].json');
responseMessage = extractResponseMessage(responseData);
}
isLoading.value = false;
messages.value.push({
text: responseMessage,
sender: 'bot',
createdAt: new Date().toISOString(),
id: executionId ?? uuid(),
});
}
/** Extracts response message from workflow output */
@ -291,9 +278,9 @@ export function useChatMessaging({
return {
previousMessageIndex,
isLoading: computed(() => isLoading.value),
sendMessage,
extractResponseMessage,
waitForExecution,
getChatMessages,
};
}

2
packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
View file

@ -114,7 +114,7 @@ defineExpose({ editor });
:global(.cm-content) {
border-radius: var(--border-radius-base);
&[aria-readonly='true'] {
--disabled-fill: var(--color-background-medium);
--disabled-fill: var(--color-background-base);
background-color: var(--disabled-fill, var(--color-background-light));
color: var(--disabled-color, var(--color-text-base));
cursor: not-allowed;

2
packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
View file

@ -134,7 +134,7 @@ defineExpose({
padding-left: 0;
}
:deep(.cm-content) {
--disabled-fill: var(--color-background-medium);
--disabled-fill: var(--color-background-base);
padding-left: var(--spacing-2xs);
&[aria-readonly='true'] {

7
packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
View file

@ -260,12 +260,13 @@ onMounted(() => {
.contentText {
padding-top: var(--spacing-s);
padding-left: var(--spacing-m);
padding-right: var(--spacing-m);
font-size: var(--font-size-s);
}
.block {
padding: 0 0 var(--spacing-2xs) var(--spacing-2xs);
background: var(--color-foreground-light);
margin-top: var(--spacing-xl);
padding: var(--spacing-s) 0 var(--spacing-2xs) var(--spacing-2xs);
border: 1px solid var(--color-foreground-light);
margin-top: var(--spacing-s);
border-radius: var(--border-radius-base);
}
:root .blockContent {

18
packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
View file

@ -167,10 +167,6 @@ function getTreeNodeData(nodeName: string, currentDepth: number): TreeNode[] {
const aiData = computed<AIResult[]>(() => {
const result: AIResult[] = [];
const connectedSubNodes = props.workflow.getParentNodes(props.node.name, 'ALL_NON_MAIN');
const rootNodeResult = workflowsStore.getWorkflowResultDataByNodeName(props.node.name);
const rootNodeStartTime = rootNodeResult?.[props.runIndex ?? 0]?.startTime ?? 0;
const rootNodeEndTime =
rootNodeStartTime + (rootNodeResult?.[props.runIndex ?? 0]?.executionTime ?? 0);
connectedSubNodes.forEach((nodeName) => {
const nodeRunData = workflowsStore.getWorkflowResultDataByNodeName(nodeName) ?? [];
@ -193,15 +189,7 @@ const aiData = computed<AIResult[]>(() => {
return aTime - bTime;
});
// Only show data that is within the root node's execution time
// This is because sub-node could be connected to multiple root nodes
const currentNodeResult = result.filter((r) => {
const startTime = r.data?.metadata?.startTime ?? 0;
return startTime >= rootNodeStartTime && startTime < rootNodeEndTime;
});
return currentNodeResult;
return result;
});
const executionTree = computed<TreeNode[]>(() => {
@ -361,9 +349,7 @@ watch(() => props.runIndex, selectFirst, { immediate: true });
margin-right: var(--spacing-4xs);
}
.isSelected {
.nodeIcon {
background-color: var(--color-foreground-base);
}
background-color: var(--color-foreground-base);
}
.treeNode {
display: inline-flex;

9
packages/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.vue
View file

@ -1,17 +1,16 @@
<script lang="ts" setup>
export interface Props {
outline?: boolean;
type: 'primary' | 'tertiary';
label: string;
}
defineProps<Props>();
</script>
<template>
<N8nButton
label="Chat"
:label="label"
size="large"
icon="comment"
type="primary"
:outline="outline"
:type="type"
data-test-id="workflow-chat-button"
/>
</template>

6
packages/editor-ui/src/components/canvas/elements/buttons/__snapshots__/CanvasChatButton.test.ts.snap
View file

@ -1,3 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`CanvasChatButton > should render correctly 1`] = `"<button class="button button primary large withIcon" aria-live="polite" data-test-id="workflow-chat-button"><span class="icon"><span class="n8n-text compact size-large regular n8n-icon n8n-icon"><svg class="svg-inline--fa fa-comment fa-w-16 large" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="comment" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z"></path></svg></span></span><span>Chat</span></button>"`;
exports[`CanvasChatButton > should render correctly 1`] = `
"<button class="button button primary large withIcon" aria-live="polite" data-test-id="workflow-chat-button"><span class="icon"><span class="n8n-text compact size-large regular n8n-icon n8n-icon"><svg class="svg-inline--fa fa-comment fa-w-16 large" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="comment" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z"></path></svg></span></span>
<!--v-if-->
</button>"
`;

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

@ -170,6 +170,7 @@
"binaryDataDisplay.backToOverviewPage": "Back to overview page",
"binaryDataDisplay.noDataFoundToDisplay": "No data found to display",
"binaryDataDisplay.yourBrowserDoesNotSupport": "Your browser does not support the video element. Kindly update it to latest version.",
"chat.hide": "Hide chat",
"chat.window.title": "Chat",
"chat.window.logs": "Latest Logs",
"chat.window.logsFromNode": "from {nodeName} node",

3
packages/editor-ui/src/views/NodeView.v2.vue
View file

@ -1616,7 +1616,8 @@ onBeforeUnmount(() => {
/>
<CanvasChatButton
v-if="containsChatTriggerNodes"
:outline="isChatOpen === false"
:type="isChatOpen ? 'tertiary' : 'primary'"
:label="isChatOpen ? i18n.baseText('chat.hide') : i18n.baseText('chat.window.title')"
@click="onOpenChat"
/>
<CanvasStopCurrentExecutionButton

5
packages/editor-ui/src/views/NodeView.vue
View file

@ -4626,11 +4626,10 @@ export default defineComponent({
<n8n-button
v-if="containsChatNodes"
label="Chat"
:label="isChatOpen ? i18n.baseText('chat.hide') : i18n.baseText('chat.window.title')"
size="large"
icon="comment"
type="primary"
:outline="isChatOpen === false"
:type="isChatOpen ? 'tertiary' : 'primary'"
data-test-id="workflow-chat-button"
@click.stop="onOpenChat"
/>