feat(editor): Add AI Chat button to new canvas (no-changelog) (#10166)

packages/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.spec.ts

@@ -0,0 +1,12 @@
+import { createComponentRenderer } from '@/__tests__/render';
+import CanvasChatButton from './CanvasChatButton.vue';
+
+const renderComponent = createComponentRenderer(CanvasChatButton);
+
+describe('CanvasChatButton', () => {
+	it('should render correctly', () => {
+		const wrapper = renderComponent();
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+});

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

@@ -0,0 +1,9 @@
+<template>
+	<N8nButton
+		label="Chat"
+		size="large"
+		icon="comment"
+		type="primary"
+		data-test-id="workflow-chat-button"
+	/>
+</template>

packages/editor-ui/src/components/canvas/elements/buttons/CanvasClearExecutionDataButton.vue

@@ -4,7 +4,7 @@ import { useI18n } from '@/composables/useI18n';
 const i18n = useI18n();
 </script>
 <template>
-	<n8n-icon-button
+	<N8nIconButton
 		:title="i18n.baseText('nodeView.deletesTheCurrentExecutionData')"
 		icon="trash"
 		size="large"

packages/editor-ui/src/components/canvas/elements/buttons/CanvasStopCurrentExecutionButton.vue

@@ -16,7 +16,7 @@ const title = computed(() =>
 </script>
 
 <template>
-	<n8n-icon-button
+	<N8nIconButton
 		icon="stop"
 		size="large"
 		class="stop-execution"

packages/editor-ui/src/components/canvas/elements/buttons/CanvasStopWaitingForWebhookButton.vue

@@ -4,7 +4,7 @@ import { useI18n } from '@/composables/useI18n';
 const i18n = useI18n();
 </script>
 <template>
-	<n8n-icon-button
+	<N8nIconButton
 		class="stop-execution"
 		icon="stop"
 		size="large"

packages/editor-ui/src/components/canvas/elements/buttons/__snapshots__/CanvasChatButton.spec.ts.snap

@@ -0,0 +1,3 @@
+// 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>"`;

packages/editor-ui/src/views/NodeView.v2.vue

@@ -50,6 +50,7 @@ import {
 	STICKY_NODE_TYPE,
 	VALID_WORKFLOW_IMPORT_URL_REGEX,
 	VIEWS,
+	WORKFLOW_LM_CHAT_MODAL_KEY,
 } from '@/constants';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
@@ -1090,6 +1091,17 @@ const chatTriggerNodePinnedData = computed(() => {
 	return workflowsStore.pinDataByNodeName(chatTriggerNode.value.name);
 });
 
+async function onOpenChat() {
+	uiStore.openModal(WORKFLOW_LM_CHAT_MODAL_KEY);
+
+	const payload = {
+		workflow_id: workflowId.value,
+	};
+
+	void externalHooks.run('nodeView.onOpenChat', payload);
+	telemetry.track('User clicked chat open button', payload);
+}
+
 /**
  * History events
  */
@@ -1518,6 +1530,7 @@ onBeforeUnmount(() => {
 				@mouseleave="onRunWorkflowButtonMouseLeave"
 				@click="onRunWorkflow"
 			/>
+			<CanvasChatButton v-if="containsChatTriggerNodes" @click="onOpenChat" />
 			<CanvasStopCurrentExecutionButton
 				v-if="isStopExecutionButtonVisible"
 				:stopping="isStoppingExecution"