admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 10:02:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: AI nodes usability fixes + Summarization Chain V2 (#7949)

Browse Source 
Fixes:
- Refactor connection snapping when dragging and enable it also for
non-main connection types
- Fix propagation of errors from sub-nodes
- Fix chat scrolling when sending/receiving messages
- Prevent empty chat messages
- Fix sub-node selected styles
- Fix output names text overflow

Usability improvements:
- Auto-add manual chat trigger for agents & chain nodes
- Various labels and description updates
- Make the output parser input optional for Basic LLM Chain
- Summarization Chain V2 with a simplified document loader & text
chunking mode

#### How to test the change:
Example workflow showcasing different operation mode of the new
summarization chain:

[Summarization_V2.json](https://github.com/n8n-io/n8n/files/13599901/Summarization_V2.json)


## Issues fixed
Include links to Github issue or Community forum post or **Linear
ticket**:
> Important in order to close automatically and provide context to
reviewers
-
https://www.notion.so/n8n/David-Langchain-Posthog-notes-7a9294938420403095f4508f1a21d31d
- https://linear.app/n8n/issue/N8N-7070/ux-fixes-batch
- https://linear.app/n8n/issue/N8N-7071/ai-sub-node-bugs


## Review / Merge checklist
- [x] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
- [x] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [ ] Tests included.
> A bug is not considered fixed, unless a test is added to prevent it
from happening again. A feature is not complete without tests.
  >
> *(internal)* You can use Slack commands to trigger [e2e
tests](https://www.notion.so/n8n/How-to-use-Test-Instances-d65f49dfc51f441ea44367fb6f67eb0a?pvs=4#a39f9e5ba64a48b58a71d81c837e8227)
or [deploy test
instance](https://www.notion.so/n8n/How-to-use-Test-Instances-d65f49dfc51f441ea44367fb6f67eb0a?pvs=4#f6a177d32bde4b57ae2da0b8e454bfce)
or [deploy early access version on
Cloud](https://www.notion.so/n8n/Cloudbot-3dbe779836004972b7057bc989526998?pvs=4#fef2d36ab02247e1a0f65a74f6fb534e).

---------

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Elias Meire <elias@meire.dev>
This commit is contained in:
oleg
2023-12-08 13:42:32 +01:00
committed by GitHub
parent dbd62a4992
commit dcf12867b3
32 changed files with 1235 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
packages/editor-ui/src/views/NodeView.vue
View File

@@ -113,6 +113,7 @@
@mouseenter="showTriggerMissingToltip(true)"
@mouseleave="showTriggerMissingToltip(false)"
@click="onRunContainerClick"
v-if="!isManualChatOnly"
>
<keyboard-shortcut-tooltip
:label="runButtonText"
@@ -676,6 +677,9 @@ export default defineComponent({
containsTrigger(): boolean {
return this.triggerNodes.length > 0;
},
isManualChatOnly(): boolean {
return this.containsChatNodes && this.triggerNodes.length === 1;
},
containsChatNodes(): boolean {
return !!this.nodes.find(
(node) => node.type === MANUAL_CHAT_TRIGGER_NODE_TYPE && node.disabled !== true,
@@ -2526,28 +2530,35 @@ export default defineComponent({
.catch((e) => {});
}
},
onEventConnectionAbort(connection: Connection) {
async onEventConnectionAbort(connection: Connection) {
try {
if (this.dropPrevented) {
this.dropPrevented = false;
return;
}
if (this.pullConnActiveNodeName) {
const sourceNode = this.workflowsStore.getNodeById(connection.parameters.nodeId);
const connectionType = connection.parameters.type ?? NodeConnectionType.Main;
const overrideTargetEndpoint = connection?.connector
?.overrideTargetEndpoint as Endpoint | null;
if (sourceNode) {
const sourceNodeName = sourceNode.name;
const isTarget = connection.parameters.connection === 'target';
const sourceNodeName = isTarget ? this.pullConnActiveNodeName : sourceNode.name;
const targetNodeName = isTarget ? sourceNode.name : this.pullConnActiveNodeName;
const outputIndex = connection.parameters.index;
NodeViewUtils.resetConnectionAfterPull(connection);
await this.$nextTick();
this.connectTwoNodes(
sourceNodeName,
outputIndex,
this.pullConnActiveNodeName,
0,
NodeConnectionType.Main,
targetNodeName,
overrideTargetEndpoint?.parameters?.index ?? 0,
connectionType,
);
this.pullConnActiveNodeName = null;
this.dropPrevented = true;
this.dropPrevented = false;
}
return;
}
@@ -2894,6 +2905,8 @@ export default defineComponent({
const sourceNode = this.workflowsStore.getNodeById(info.connection.parameters.nodeId);
const sourceNodeName = sourceNode.name;
const outputIndex = info.connection.parameters.index;
const overrideTargetEndpoint = info.connection.connector
.overrideTargetEndpoint as Endpoint | null;
if (connectionInfo) {
this.historyStore.pushCommandToUndo(new RemoveConnectionCommand(connectionInfo));
@@ -2902,7 +2915,7 @@ export default defineComponent({
sourceNodeName,
outputIndex,
this.pullConnActiveNodeName,
0,
overrideTargetEndpoint?.parameters?.index ?? 0,
NodeConnectionType.Main,
);
this.pullConnActiveNodeName = null;
@@ -2932,58 +2945,86 @@ export default defineComponent({
this.pullConnActiveNodeName = null;
this.pullConnActive = true;
this.canvasStore.newNodeInsertPosition = null;
NodeViewUtils.hideConnectionActions(connection);
NodeViewUtils.resetConnection(connection);
const nodes = [...document.querySelectorAll('.node-wrapper')];
const scope = connection.scope as ConnectionTypes;
const scopedEndpoints = Array.from(
document.querySelectorAll(`[data-jtk-scope-${scope}=true]`),
);
const connectionType = connection.parameters.connection;
const requiredType = connectionType === 'source' ? 'target' : 'source';
const filteredEndpoints = scopedEndpoints.filter((el) => {
const endpoint = el.jtk.endpoint as Endpoint;
if (!endpoint) return false;
// Prevent snapping(but not connecting) to the same node
const isSameNode = endpoint.parameters.nodeId === connection.parameters.nodeId;
const endpointType = endpoint.parameters.connection;
return !isSameNode && endpointType === requiredType;
});
const onMouseMove = (e: MouseEvent | TouchEvent) => {
if (!connection) {
return;
}
const element = document.querySelector('.jtk-endpoint.jtk-drag-hover');
if (element) {
const endpoint = element.jtk.endpoint;
NodeViewUtils.showDropConnectionState(connection, endpoint);
return;
}
const intersectingEndpoints = filteredEndpoints
.filter((element: Element) => {
const endpoint = element.jtk.endpoint as Endpoint;
const inputMargin = 24;
const intersecting = nodes.find((element: Element) => {
const { top, left, right, bottom } = element.getBoundingClientRect();
const [x, y] = NodeViewUtils.getMousePosition(e);
if (top <= y && bottom >= y && left - inputMargin <= x && right >= x) {
const nodeName = (element as HTMLElement).dataset.name as string;
const node = this.workflowsStore.getNodeByName(nodeName);
if (node) {
const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
if (element.classList.contains('jtk-floating-endpoint')) {
return false;
}
const isEndpointIntersect = NodeViewUtils.isElementIntersection(element, e, 50);
const isNodeElementIntersect = NodeViewUtils.isElementIntersection(
endpoint.element,
e,
30,
);
const workflow = this.getCurrentWorkflow();
const workflowNode = workflow.getNode(nodeName);
const inputs = NodeHelpers.getNodeInputs(workflow, workflowNode!, nodeType);
if (isEndpointIntersect || isNodeElementIntersect) {
const node = this.workflowsStore.getNodeById(endpoint.parameters.nodeId);
if (nodeType && inputs.length === 1) {
this.pullConnActiveNodeName = node.name;
const endpointUUID = this.getInputEndpointUUID(
nodeName,
connection.parameters.type,
0,
);
if (endpointUUID) {
const endpoint = this.instance?.getEndpoint(endpointUUID);
if (node) {
const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
NodeViewUtils.showDropConnectionState(connection, endpoint);
if (!nodeType) return false;
return true;
}
return true;
}
}
}
return false;
});
return false;
})
.sort((a, b) => {
const aEndpointIntersect = NodeViewUtils.calculateElementIntersection(a, e, 50);
const bEndpointIntersect = NodeViewUtils.calculateElementIntersection(b, e, 50);
if (!intersecting) {
// If both intersections are null, treat them as equal
if (!aEndpointIntersect?.y && !bEndpointIntersect?.y) {
return 0;
}
// If one intersection is null, sort the non-null one first
if (!aEndpointIntersect?.y) return 1;
if (!bEndpointIntersect?.y) return -1;
// Otherwise, sort by ascending Y distance
return bEndpointIntersect.y - aEndpointIntersect.y;
});
if (intersectingEndpoints.length > 0) {
const intersectingEndpoint = intersectingEndpoints[0];
const endpoint = intersectingEndpoint.jtk.endpoint as Endpoint;
const node = this.workflowsStore.getNodeById(endpoint.parameters.nodeId);
this.pullConnActiveNodeName = node?.name ?? null;
NodeViewUtils.showDropConnectionState(connection, endpoint);
} else {
NodeViewUtils.showPullConnectionState(connection);
this.pullConnActiveNodeName = null;
}
@@ -4444,6 +4485,23 @@ export default defineComponent({
NodeConnectionType.Main,
);
}
const lastAddedNode = this.nodes[this.nodes.length - 1];
const workflow = this.getCurrentWorkflow();
const lastNodeInputs = workflow.getParentNodesByDepth(lastAddedNode.name, 1);
// If the last added node has multiple inputs, move them down
if (lastNodeInputs.length > 1) {
lastNodeInputs.slice(1).forEach((node, index) => {
const nodeUi = this.workflowsStore.getNodeByName(node.name);
if (!nodeUi) return;
this.onMoveNode({
nodeName: nodeUi.name,
position: [nodeUi.position[0], nodeUi.position[1] + 100 * (index + 1)],
});
});
}
},
async saveCurrentWorkflowExternal(callback: () => void) {
@@ -4691,25 +4749,37 @@ export default defineComponent({
this.registerCustomAction({
key: 'openSelectiveNodeCreator',
action: ({ connectiontype, node }: { connectiontype: NodeConnectionType; node: string }) => {
this.onToggleNodeCreator({
source: NODE_CREATOR_OPEN_SOURCES.NOTICE_ERROR_MESSAGE,
createNodeActive: true,
nodeCreatorView: AI_NODE_CREATOR_VIEW,
});
action: async ({
connectiontype,
node,
creatorview,
}: {
connectiontype: NodeConnectionType;
node: string;
creatorview?: string;
}) => {
const nodeName = node ?? this.ndvStore.activeNodeName;
const nodeData = nodeName ? this.workflowsStore.getNodeByName(nodeName) : null;
this.ndvStore.activeNodeName = null;
// Select the node so that the node creator knows which node to connect to
const nodeData = this.workflowsStore.getNodeByName(node);
if (connectiontype && nodeData) {
this.insertNodeAfterSelected({
index: 0,
endpointUuid: `${nodeData.id}-input${connectiontype}0`,
eventSource: NODE_CREATOR_OPEN_SOURCES.NOTICE_ERROR_MESSAGE,
outputType: connectiontype,
sourceId: nodeData.id,
});
}
await this.redrawNode(node);
// Wait for UI to update
setTimeout(() => {
if (creatorview) {
this.onToggleNodeCreator({
createNodeActive: true,
nodeCreatorView: creatorview,
});
} else if (connectiontype && nodeData) {
this.insertNodeAfterSelected({
index: 0,
endpointUuid: `${nodeData.id}-input${connectiontype}0`,
eventSource: NODE_CREATOR_OPEN_SOURCES.NOTICE_ERROR_MESSAGE,
outputType: connectiontype,
sourceId: nodeData.id,
});
}
}, 0);
},
});
@@ -4910,14 +4980,14 @@ export default defineComponent({
&.connection-drag-scope-active-connection-target {
// Apply style to compatible output endpoints
.diamond-output-endpoint[data-jtk-scope-#{$node-type}='true'] {
transform: scale(1.375) rotate(45deg);
transform: scale(1.5) rotate(45deg);
}
.add-input-endpoint[data-jtk-scope-#{$node-type}='true'] {
// Apply style to dragged compatible input endpoint
&.jtk-dragging {
.add-input-endpoint-default {
transform: translate(-4px, -4px) scale(1.375);
transform: translate(-5px, -5px) scale(1.5);
}
}
@@ -4939,7 +5009,7 @@ export default defineComponent({
// Apply style to dragged compatible output endpoint
.diamond-output-endpoint[data-jtk-scope-#{$node-type}='true'] {
&.jtk-dragging {
transform: scale(1.375) rotate(45deg);
transform: scale(1.5) rotate(45deg);
}
// Apply style to non-dragged compatible input endpoints
@@ -4951,7 +5021,7 @@ export default defineComponent({
// Apply style to compatible output endpoints
.add-input-endpoint[data-jtk-scope-#{$node-type}='true'] {
.add-input-endpoint-default {
transform: translate(-4px, -4px) scale(1.375);
transform: translate(-5px, -5px) scale(1.5);
}
}