Merge pull request #1184 from writer/AB-204-next

[AB-204] showing KG tool at the components tools

Author: rodionchernyshov

src/ui/src/components/blueprints/abstract/BlueprintsNodeTools.vue

@@ -10,25 +10,87 @@ const props = defineProps<{
 	hasOutputs: boolean;
 }>();
 
+const tools = computed(() => {
+	if (props.fieldType !== FieldType.Tools) return {};
+	return parseToolsField(props.fieldValue);
+});
+
 const hasToolsButNoFunctionTools = computed(() => {
 	if (props.fieldType !== FieldType.Tools) return false;
-	const tools = parseToolsField(props.fieldValue);
-	const toolKeys = Object.keys(tools);
+	const toolKeys = Object.keys(tools.value);
 	if (toolKeys.length === 0) return false;
-	return !toolKeys.some((key) => tools[key]?.type === "function");
+	return !toolKeys.some((key) => tools.value[key]?.type === "function");
+});
+
+function formatGraphIds(graphIds: unknown): string | null {
+	if (!graphIds) return null;
+
+	if (Array.isArray(graphIds) && graphIds.length > 0) {
+		const ids = graphIds.filter(
+			(id) => typeof id === "string" && !id.startsWith("@{"),
+		);
+		return ids.length > 0 ? ids.join(", ") : null;
+	}
+
+	if (typeof graphIds === "string" && !graphIds.startsWith("@{")) {
+		return graphIds;
+	}
+
+	return null;
+}
+
+function isFunctionTool(tool: unknown): boolean {
+	return (
+		tool !== null &&
+		typeof tool === "object" &&
+		"type" in tool &&
+		tool.type === "function"
+	);
+}
+
+function formatToolName(toolName: string, tool: unknown): string {
+	if (!tool || typeof tool !== "object" || !("type" in tool)) {
+		return toolName;
+	}
+
+	if (tool.type === "graph" && "graph_ids" in tool) {
+		const formattedIds = formatGraphIds(tool.graph_ids);
+		if (formattedIds) {
+			return `${toolName} (${formattedIds})`;
+		}
+	}
+
+	return toolName;
+}
+
+const nonFunctionToolKeys = computed(() => {
+	return Object.keys(tools.value).filter((toolName) => {
+		return !isFunctionTool(tools.value[toolName]);
+	});
 });
 
 const displayText = computed(() => {
+	if (nonFunctionToolKeys.value.length > 0) {
+		return nonFunctionToolKeys.value
+			.map((toolName) => formatToolName(toolName, tools.value[toolName]))
+			.join(", ");
+	}
+
 	if (!props.hasOutputs && hasToolsButNoFunctionTools.value) {
 		return "No outputs";
 	}
+
 	return "None configured.";
 });
+
+const shouldRender = computed(() => {
+	return !props.hasOutputs || nonFunctionToolKeys.value.length > 0;
+});
 </script>
 
 <template>
 	<div
-		v-if="!hasOutputs"
+		v-if="shouldRender"
 		class="BlueprintsNode__main__outputs__output BlueprintsNode__main__outputs__empty"
 	>
 		{{ displayText }}