From 65d50f8ad63c38273a159e6300e05cc33010cadc Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Fri, 8 Nov 2024 13:17:03 +0100
Subject: [PATCH] wip commit

---
 .../agents/Agent/agents/ToolsAgent/execute.ts |  1 +
 .../editor-ui/src/components/OutputPanel.vue  | 44 ++++++++++++++++++-
 packages/editor-ui/src/components/RunData.vue | 10 ++++-
 .../editor-ui/src/components/RunDataTable.vue | 13 +++---
 .../src/plugins/i18n/locales/en.json          |  2 +
 5 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/packages/@n8n/nodes-langchain/nodes/agents/Agent/agents/ToolsAgent/execute.ts b/packages/@n8n/nodes-langchain/nodes/agents/Agent/agents/ToolsAgent/execute.ts
index 25e6e78984..cd2b67b720 100644
--- a/packages/@n8n/nodes-langchain/nodes/agents/Agent/agents/ToolsAgent/execute.ts
+++ b/packages/@n8n/nodes-langchain/nodes/agents/Agent/agents/ToolsAgent/execute.ts
@@ -115,6 +115,7 @@ export async function toolsAgentExecute(this: IExecuteFunctions): Promise<INodeE
 		| undefined;
 
 	const tools = (await getConnectedTools(this, true, false)) as Array<DynamicStructuredTool | Tool>;
+	console.log('tools', tools);
 	const outputParser = (await getOptionalOutputParsers(this))?.[0];
 	let structuredOutputParserTool: DynamicStructuredTool | undefined;
 	/**
diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
index 10d87eb810..627a505d30 100644
--- a/packages/editor-ui/src/components/OutputPanel.vue
+++ b/packages/editor-ui/src/components/OutputPanel.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue';
-import type { IRunData, IRunExecutionData, NodeError, Workflow } from 'n8n-workflow';
+import {
+	NodeConnectionType,
+	NodeHelpers,
+	type IRunData,
+	type IRunExecutionData,
+	type NodeError,
+	type Workflow,
+} from 'n8n-workflow';
 import RunData from './RunData.vue';
 import RunInfo from './RunInfo.vue';
 import { storeToRefs } from 'pinia';
@@ -15,7 +22,9 @@ import { usePinnedData } from '@/composables/usePinnedData';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useI18n } from '@/composables/useI18n';
 import { waitingNodeTooltip } from '@/utils/executionUtils';
-import { N8nRadioButtons, N8nText } from 'n8n-design-system';
+import { N8nCallout, N8nRadioButtons, N8nText } from 'n8n-design-system';
+import { useNodeHelpers } from '@/composables/useNodeHelpers';
+import { getExecutionData } from '@/api/workflows';
 
 // Types
 
@@ -277,6 +286,14 @@ watch(defaultOutputMode, (newValue: OutputType, oldValue: OutputType) => {
 const activatePane = () => {
 	emit('activatePane');
 };
+
+const shouldShowWarning = computed(() => {
+	if (!node.value) return false;
+
+	const parents = props.workflow.getParentNodes(node.value.name, NodeConnectionType.AiTool, 1);
+	const active = parents.filter((x) => !!workflowRunData.value?.[x]?.[props.runIndex]);
+	return parents.length > 0 && active.length === 0;
+});
 </script>
 
 <template>
@@ -370,6 +387,23 @@ const activatePane = () => {
 			<RunDataAi :node="node" :run-index="runIndex" :workflow="workflow" />
 		</template>
 
+		<template v-if="shouldShowWarning" #table-user-info>
+			<div :class="$style.noToolsUsedAlert">
+				<!-- <N8nAlert
+					:title="i18n.baseText('ndv.output.noToolUsedInfo.title')"
+					:description="i18n.baseText('ndv.output.noToolUsedInfo.description')"
+					type="info"
+				/> -->
+				<N8nCallout theme="secondary">
+					{{
+						i18n.baseText('ndv.output.noToolUsedInfo.title') +
+						'. ' +
+						i18n.baseText('ndv.output.noToolUsedInfo.description')
+					}}
+				</N8nCallout>
+			</div>
+		</template>
+
 		<template #recovered-artificial-output-data>
 			<div :class="$style.recoveredOutputData">
 				<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
@@ -436,4 +470,10 @@ const activatePane = () => {
 		margin-bottom: var(--spacing-m);
 	}
 }
+
+.noToolsUsedAlert {
+	padding-left: var(--spacing-s);
+	padding-right: var(--spacing-s);
+	padding-bottom: var(--spacing-xs);
+}
 </style>
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 351fdd8890..64d2fd43fd 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -1355,7 +1355,9 @@ defineExpose({ enterEditMode });
 		>
 			<N8nText v-n8n-html="hint.message" size="small"></N8nText>
 		</N8nCallout>
-
+		<div v-if="hasNodeRun">
+			<slot name="table-user-info"></slot>
+		</div>
 		<div
 			v-if="maxOutputIndex > 0 && branches.length > 1 && !displaysMultipleNodes"
 			:class="$style.outputs"
@@ -1591,7 +1593,11 @@ defineExpose({ enterEditMode });
 					@mounted="emit('tableMounted', $event)"
 					@active-row-changed="onItemHover"
 					@display-mode-change="onDisplayModeChange"
-				/>
+				>
+					<!-- <template #table-user-info>
+						<slot name="table-user-info"></slot>
+					</template> -->
+				</LazyRunDataTable>
 			</Suspense>
 
 			<Suspense v-else-if="hasNodeRun && displayMode === 'json' && node">
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index f27bd74129..da46a55037 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -6,7 +6,12 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { getMappedExpression } from '@/utils/mappingUtils';
 import { getPairedItemId } from '@/utils/pairedItemUtils';
 import { shorten } from '@/utils/typesUtils';
-import type { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
+import {
+	NodeHelpers,
+	type GenericValue,
+	type IDataObject,
+	type INodeExecutionData,
+} from 'n8n-workflow';
 import { computed, onMounted, ref, watch } from 'vue';
 import Draggable from './Draggable.vue';
 import MappingPill from './MappingPill.vue';
@@ -387,11 +392,11 @@ watch(focusedMappableInput, (curr) => {
 
 <template>
 	<div :class="[$style.dataDisplay, { [$style.highlight]: highlight }]">
+		<slot name="table-user-info"></slot>
 		<table v-if="tableData.columns && tableData.columns.length === 0" :class="$style.table">
 			<thead>
 				<tr>
 					<th :class="$style.emptyCell"></th>
-					<th :class="$style.tableRightMargin"></th>
 				</tr>
 			</thead>
 			<tbody>
@@ -408,7 +413,6 @@ watch(focusedMappableInput, (curr) => {
 					>
 						<N8nInfoTip>{{ i18n.baseText('runData.emptyItemHint') }}</N8nInfoTip>
 					</td>
-					<td :class="$style.tableRightMargin"></td>
 				</tr>
 			</tbody>
 		</table>
@@ -478,7 +482,6 @@ watch(focusedMappableInput, (curr) => {
 							</span>
 						</N8nTooltip>
 					</th>
-					<th :class="$style.tableRightMargin"></th>
 				</tr>
 			</thead>
 			<Draggable
@@ -546,7 +549,6 @@ watch(focusedMappableInput, (curr) => {
 						</N8nTree>
 					</td>
 					<td v-if="columnLimitExceeded"></td>
-					<td :class="$style.tableRightMargin"></td>
 				</tr>
 			</Draggable>
 		</table>
@@ -565,6 +567,7 @@ watch(focusedMappableInput, (curr) => {
 	word-break: normal;
 	height: 100%;
 	padding-bottom: var(--spacing-3xl);
+	padding-inline: var(--spacing-l);
 }
 
 .table {
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 844fd9786b..cc77c502b6 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -978,6 +978,8 @@
 	"ndv.output.tooMuchData.showDataAnyway": "Show data",
 	"ndv.output.tooMuchData.title": "Display data?",
 	"ndv.output.waitingToRun": "Waiting to execute...",
+	"ndv.output.noToolUsedInfo.title": "None of your tools were used in this run",
+	"ndv.output.noToolUsedInfo.description": "Try giving your tools clearer names and descriptions to help the AI",
 	"ndv.title.cancel": "Cancel",
 	"ndv.title.rename": "Rename",
 	"ndv.title.renameNode": "Rename node",