graphdb-workbench 3.0.0-TR13 → 3.0.0-TR14

package/dist/plugins.js

@@ -63,8 +63,7 @@ PluginRegistry.add('route', {
     'templateUrl': 'pages/monitor/backup-and-restore.html',
     'title': 'view.monitoring.backup_and_restore.title',
     'helpInfo': 'view.monitoring.backup_and_restore.helpInfo',
-    'documentationUrl': 'backup-and-restore.html#monitoring-your-recovery-operations',
-    'allowAuthorities': ['READ_REPO_{repoId}']
+    'documentationUrl': 'backup-and-restore.html#monitoring-your-recovery-operations'
 });
 
 PluginRegistry.add('main.menu', {
@@ -75,7 +74,8 @@ PluginRegistry.add('main.menu', {
             href: 'monitor/backup-and-restore',
             order: 2,
             parent: 'Monitor',
-            guideSelector: 'sub-menu-backup-and-restore'
+            guideSelector: 'sub-menu-backup-and-restore',
+            role: 'ROLE_REPO_MANAGER'
         }
     ]
 });
@@ -397,8 +397,7 @@ PluginRegistry.add('route', [
         title: 'view.guides.title',
         controller: 'GuidesCtrl',
         helpInfo: 'view.guides.helpInfo',
-        documentationUrl: 'index.html',
-        'allowAuthorities': ['READ_REPO_{repoId}']
+        documentationUrl: 'index.html'
     }
 ]);
 
@@ -411,7 +410,7 @@ PluginRegistry.add('main.menu', {
             parent: 'Help',
             icon: 'paste',
             href: 'guides',
-            role: 'ROLE_USER',
+            role: 'ROLE_REPO_MANAGER',
             guideSelector: 'sub-menu-guide'
         }
     ]
@@ -691,7 +690,6 @@ PluginRegistry.add('guide.step', [
                         url: '/repository',
                         elementSelector: GuideUtils.getGuideElementSelector('createRepository'),
                         onNextClick: (guide) => GuideUtils.clickOnGuideElement('createRepository')().then(() => guide.next())
-
                     }, options)
                 }, {
                     guideBlockName: 'clickable-element',
@@ -724,11 +722,24 @@ PluginRegistry.add('guide.step', [
                         elementSelector: GuideUtils.getGuideElementSelector('graphDBRepositoryRulesetSelect'),
                         show: () => () => {
                             GuideUtils.validateTextInput(repositoryIdInputSelector, repositoryId);
-                        },
-                        rulesetName: options.rulesetName
+                        }
                     }, options)
                 });
             }
+            if(options.fts) {
+                steps.push({
+                               guideBlockName: 'clickable-element',
+                               options: angular.extend({}, {
+                                   content: 'guide.step_plugin.create_repository.enable-fts.content',
+                                   url: '/repository/create/graphdb',
+                                   class: 'gdb-repository-enable-fts-guide-dialog',
+                                   extraContent: 'guide.step_plugin.create_repository.enable-fts.extra-content',
+                                   extraContentClass: 'alert alert-help text-left',
+                                   elementSelector: GuideUtils.getGuideElementSelector('enable-fts-search'),
+                                   onNextValidate: () => Promise.resolve(GuideUtils.isChecked(GuideUtils.getGuideElementSelector('enable-fts-search', 'input')))
+                               }, options)
+                           });
+            }
             steps.push({
                 guideBlockName: 'clickable-element',
                 options: angular.extend({}, {
@@ -748,6 +759,78 @@ PluginRegistry.add('guide.step', [
     }
 ]);
 
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'create-similarity-index',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'create-similarity-index';
+
+            return [
+                {
+                    guideBlockName: 'click-main-menu',
+                    options: angular.extend({}, {
+                        menu: 'similarity',
+                        showIntro: true
+                    }, options)
+                }, {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.create-similarity-index.create-similarity-index',
+                        class: 'similarity-index-guide-dialog',
+                        url: '/similarity',
+                        elementSelector: GuideUtils.getGuideElementSelector('create-similarity-index'),
+                        onNextClick: () => {
+                        }
+                    }, options)
+                }, {
+                    guideBlockName: 'input-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.create-similarity-index.input-index-name',
+                        class: 'similarity-index-name-input-guide-dialog',
+                        url: '/similarity/index/create',
+                        elementSelector: GuideUtils.getGuideElementSelector('similarity-index-name'),
+                        onNextValidate: () => Promise.resolve(GuideUtils.validateTextInputNotEmpty(GuideUtils.getGuideElementSelector('similarity-index-name')))
+                    }, options)
+                }, {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.create-similarity-index.create-index',
+                        class: 'create-similarity-index-guide-dialog',
+                        url: '/similarity/index/create',
+                        elementSelector: GuideUtils.getGuideElementSelector('create-similarity-index-btn'),
+                        onNextClick: () => {
+                        }
+                    }, options)
+                }, {
+                    // check if error block is shown and go back 2 steps or proceed
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        beforeShowPromise: (guide, currentStep) => GuideUtils.getOrWaitFor(GuideUtils.getGuideElementSelector('error'), 1)
+                            .then(() => {
+                                const stepId = currentStep.id;
+                                // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                setTimeout(() => guide.show(stepId - 2))
+                            })
+                            .catch(() => {
+                                // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                setTimeout(() => guide.next())
+                            }),
+                    }, options)
+                },
+                {
+                    guideBlockName: 'hold-and-wait-until-shown',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.create-similarity-index.wait',
+                        class: 'wait-for-index-guide-dialog',
+                        elementSelectorToWait: GuideUtils.getGuideElementSelector('similarity-indexes-table'),
+                    }, options)
+                }
+            ];
+        }
+    }
+]);
+
 PluginRegistry.add('guide.step', [
     {
         guideBlockName: 'download-guide-resource',
@@ -1038,10 +1121,10 @@ PluginRegistry.add('guide.step', [
 
                                     // Check for duplicated name, if import button for guide rdf data exist.
                                     if (GuideUtils.isVisible(GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile))) {
-                                        GuideUtils.getOrWaiteFor('.confirm-duplicate-files-dialog')
+                                        GuideUtils.getOrWaitFor('.confirm-duplicate-files-dialog')
                                             .then(() => guide.next());
                                     } else {
-                                        GuideUtils.getOrWaiteFor(importSettingsButtonSelector)
+                                        GuideUtils.getOrWaitFor(importSettingsButtonSelector)
                                             .then(() => guide.next());
                                     }
                                 } else {
@@ -1056,7 +1139,7 @@ PluginRegistry.add('guide.step', [
                             }
                         },
                         onNextValidate: () => {
-                            return Promise.allSettled([GuideUtils.getOrWaiteFor('.confirm-duplicate-files-dialog'), GuideUtils.getOrWaiteFor(GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile))])
+                            return Promise.allSettled([GuideUtils.getOrWaitFor('.confirm-duplicate-files-dialog'), GuideUtils.getOrWaiteFor(GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile))])
                                 .then(([confirmDialogPromise, importButtonPromise]) => {
                                     // There are two ways to exit this step: if the duplication dialog is opened or if the import button for the guide file is displayed.
                                     // The first scenario indicates that the user is trying to upload the same file,
@@ -1069,7 +1152,7 @@ PluginRegistry.add('guide.step', [
                                 });
                         },
                         onNextClick: (guide) => {
-                            GuideUtils.getOrWaiteFor(GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile))
+                            GuideUtils.getOrWaitFor(GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile))
                                 .then((element) => {
                                     // if we have file import button for the guide rdf file, this indicates that we go through this step for second time.
                                     // This can happen if user start guide for second time.
@@ -1117,7 +1200,7 @@ PluginRegistry.add('guide.step', [
                                 .then(() => resolve());
                         }),
                         beforeShowPromise: () => services.GuideUtils.deferredShow(300)()
-                            .then(() => GuideUtils.getOrWaiteFor(importSettingsButtonSelector, 3)
+                            .then(() => GuideUtils.getOrWaitFor(importSettingsButtonSelector, 3)
                                     .catch((error) => {
                                         services.toastr.error(services.$translate.instant('guide.unexpected.error.message'));
                                         return Promise.reject(error);
@@ -1140,7 +1223,7 @@ PluginRegistry.add('guide.step', [
                             }
                             return GuideUtils.waitFor('.import-resource-message', 10);
                         },
-                        onPreviousClick: () => GuideUtils.getOrWaiteFor(GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile), 10)
+                        onPreviousClick: () => GuideUtils.getOrWaitFor(GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile), 10)
                                 .then((element) => { element.click() })
                     }, options)
                 }
@@ -1227,6 +1310,27 @@ PluginRegistry.add('guide.step', [
                     viewName = 'view.class.hierarchy.title';
                     helpInfo = 'view.class.hierarchy.helpInfo';
 
+                    break;
+                case "ttyg":
+                    menuSelector = 'menu-lab';
+                    menuTitle = 'menu.lab.label';
+                    menuDialogClass = 'menu-lab-guide-dialog';
+                    submenuSelector = 'sub-menu-ttyg';
+                    submenuTitle = 'menu.ttyg.label';
+                    submenuDialogClass = 'sub-menu-ttyg-guide-dialog';
+                    viewName = 'menu.ttyg.label';
+                    helpInfo = 'ttyg.helpInfo';
+
+                    break;
+                case "similarity":
+                    menuSelector = 'menu-explore';
+                    menuTitle = 'menu.explore.label';
+                    menuDialogClass = 'menu-explore-guide-dialog';
+                    submenuSelector = 'sub-menu-similarity';
+                    submenuTitle = 'menu.similarity.label';
+                    submenuDialogClass = 'sub-menu-similarity-guide-dialog';
+                    viewName = 'menu.similarity.label';
+                    helpInfo = 'guide.step-help-info.create-similarity-index';
                     break;
             }
 
@@ -1589,107 +1693,938 @@ PluginRegistry.add('guide.step', [
     }
 ]);
 
-const disableAllNodes = () => () => {
-    $('.node-wrapper').addClass('disable-visual-graph-node');
-};
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'ask-ttyg-agent',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'ask-ttyg-agent';
+            options.maxWaitTime = 10;
+            options.forceReload = false;
 
-const enableAllNodes = () => () => {
-    $('.node-wrapper').removeClass('disable-visual-graph-node');
-};
+            const explain = options.explain;
+            const explainMore = options.explainMore;
+            const exploreSparql = options.exploreSparql;
+
+            const steps = [
+                {
+                    guideBlockName: 'input-element',
+                    options: angular.extend({}, {
+                        skipPoint: true,
+                        content: `guide.step_plugin.ask-ttyg-agent.input-question`,
+                        class: 'input-question-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('question-input'),
+                        show: (guide) => () => {
+                            const elementSelector = GuideUtils.getGuideElementSelector('question-input');
+
+                            // Add "keydown" listener to the element. The question-input directive listens for keypress of enter to trigger question asking.
+                            // When enter is pressed, proceed with next step. Using 'keydown' to trigger before the directive 'keypress', which clears the value.
+                            $(elementSelector).on('keydown', (event) => {
+                                const value = $(elementSelector).val();
+
+                                if (value && event.key === 'Enter' && !event.shiftKey && !event.ctrlKey) {
+                                    guide.next();
+                                }
+                            });
+                        },
+                        hide: () => () => {
+                            const elementSelector = GuideUtils.getGuideElementSelector('question-input');
+                            // Remove the "keydown" listener of element. It is important when step is hidden.
+                            $(elementSelector).off('keydown');
+                        },
+                        disablePreviousFlow: true,
+                        disableNextFlow: true
+                    }, options)
+                },
+                getWaitForAnswerStep(GuideUtils, options)
+            ];
+
+            if (explain) {
+                const explainBtnSelector = GuideUtils.getLastGuideElementSelector('explain-response-btn');
+                const elementSelector = GuideUtils.getLastGuideElementSelector('chat-item', explainBtnSelector);
+
+                steps.push(
+                    {
+                        // If button is not visible for some reason, skip the whole step
+                        guideBlockName: 'info-message',
+                        options: angular.extend({}, {
+                            url: '/ttyg',
+                            beforeShowPromise: (guide, currentStep) => GuideUtils.waitFor(elementSelector, 1)
+                                .then(() => {
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.next())
+                                })
+                                .catch(() => {
+                                    const stepId = currentStep.id;
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.show(stepId + 3))
+                                }),
+                        }, options)
+                    },
+                    {
+                        guideBlockName: 'clickable-element',
+                        options: angular.extend({}, {
+                            content: 'guide.step_plugin.ask-ttyg-agent.explain-answer',
+                            class: 'explain-answer-guide-dialog',
+                            url: '/ttyg',
+                            elementSelector,
+                            disablePreviousFlow: true,
+                            disableNextFlow: true
+                        }, options)
+                    },
+                    getWaitForAnswerStep(GuideUtils, options)
+                )
+            }
+
+            if (explain && exploreSparql) {
+                const exploreSparqlBtnSelector = GuideUtils.getLastGuideElementSelector('open-in-sparql-editor-btn');
+                const elementSelector = GuideUtils.getLastGuideElementSelector('chat-item', exploreSparqlBtnSelector);
+
+                steps.push(
+                    {
+                        // If button is not visible for some reason, skip the whole step
+                        guideBlockName: 'info-message',
+                        options: angular.extend({}, {
+                            url: '/ttyg',
+                            beforeShowPromise: (guide, currentStep) => GuideUtils.waitFor(elementSelector, 1)
+                                .then(() => {
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.next())
+                                })
+                                .catch(() => {
+                                    const stepId = currentStep.id;
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.show(stepId + 2))
+                                }),
+                        }, options)
+                    },
+                    {
+                        guideBlockName: 'clickable-element',
+                        options: angular.extend({}, {
+                            content: 'guide.step_plugin.ask-ttyg-agent.explore-sparql',
+                            class: 'explore-sparql-guide-dialog',
+                            url: '/ttyg',
+                            disablePreviousFlow: true,
+                            disableNextFlow: true,
+                            elementSelector
+                        }, options)
+                    }
+                )
+            }
+
+            if (explain && explainMore) {
+                const explainMoreBtnSelector = GuideUtils.getLastGuideElementSelector('how-derive-answer-btn');
+                const elementSelector = GuideUtils.getLastGuideElementSelector('chat-item', explainMoreBtnSelector);
+
+                steps.push(
+                    {
+                        // If button is not visible for some reason, skip the whole step
+                        guideBlockName: 'info-message',
+                        options: angular.extend({}, {
+                            url: '/ttyg',
+                            beforeShowPromise: (guide, currentStep) => {
+                                return GuideUtils.waitFor(elementSelector, 1)
+                                    .then(() => {
+                                        // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                        setTimeout(() => guide.next())
+                                    })
+                                    .catch(() => {
+                                        const stepId = currentStep.id;
+                                        // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                        setTimeout(() => guide.show(stepId + 3))
+                                    })
+                            },
+                            disablePreviousFlow: true
+                        }, options)
+                    },
+                    {
+                        guideBlockName: 'clickable-element',
+                        options: angular.extend({}, {
+                            content: 'guide.step_plugin.ask-ttyg-agent.explain-answer-more',
+                            class: 'input-agent-name-guide-dialog',
+                            url: '/ttyg',
+                            elementSelector,
+                            show: (guide) => () => {
+                                // Add "click" listener to the element. Upon clicking the element is hidden and this breaks the default flow of the guide.
+                                // Adding a handler to proceed to next step
+                                $(elementSelector).on('click', () => {
+                                    guide.next()
+                                });
+                            },
+                            hide: () => () => {
+                                // Remove the "click" listener of element. It is important when step is hidden.
+                                $(elementSelector).off('click');
+                            },
+                            disableNextFlow: true
+                        }, options)
+                    },
+                    getWaitForAnswerStep(GuideUtils, options)
+                )
+            }
+
+            return steps;
+        }
+    }
+]);
+
+const getWaitForAnswerStep = (GuideUtils, options) => {
+    return {
+        guideBlockName: 'hold-and-wait-until-hidden',
+        options: angular.extend({}, {
+            content: 'guide.step_plugin.ask-ttyg-agent.wait-for-answer',
+            class: 'wait-for-answer-guide-dialog',
+            url: '/ttyg',
+            placement: 'left',
+            elementSelector: GuideUtils.getGuideElementSelector('chat-details'),
+            elementSelectorToWait: GuideUtils.getGuideElementSelector('question-loader'),
+        }, options)
+    }
+}
 
 PluginRegistry.add('guide.step', [
     {
-        guideBlockName: 'visual-graph',
+        guideBlockName: 'configure-agent',
         getSteps: (options, services) => {
             const GuideUtils = services.GuideUtils;
-            const $location = services.$location;
-            const $route = services.$route;
-            options.mainAction = 'visual-graph';
 
-            return [
+            const configureExtractionMethods = (services, options) => {
+                const methods = options.methods || [];
+
+                return methods.map((method) => {
+                    return {
+                        guideBlockName: method.guideBlockName,
+                        options: angular.extend({}, method.options)
+                    };
+                });
+            };
+
+            const shouldEditName = options.editName;
+            const hasModelName = options.model;
+            const hasUserInstructions = options.userInstructions;
+            const shouldConfigureExtractionMethods = !!options.methods?.length;
+
+            const steps = [
                 {
-                    guideBlockName: 'click-main-menu',
+                    guideBlockName: 'wait-for-element-to-show',
                     options: angular.extend({}, {
-                        menu: 'visual-graph',
-                        showIntro: true
+                        elementSelectorToShow: GuideUtils.getElementSelector('.agent-settings-modal'),
+                        timeToWait: 10
                     }, options)
-                }, {
+                }
+            ]
+
+            if (shouldEditName) {
+                steps.push({
                     guideBlockName: 'input-element',
                     options: angular.extend({}, {
-                        content: 'guide.step_plugin.visual_graph_input_IRI.content',
-                        forceReload: true,
-                        url: '/graphs-visualizations',
-                        elementSelector: GuideUtils.getGuideElementSelector('graphVisualisationSearchInputNotConfigured', ' input'),
-                        class: 'visual-graph-input-iri-guide-dialog',
-                        onNextValidate: (step) => Promise.resolve(GuideUtils.validateTextInput(step.elementSelector, step.easyGraphInputText))
+                        content: 'guide.step_plugin.configure-agent.name-input',
+                        class: 'input-agent-name-guide-dialog',
+                        url: '/ttyg',
+                        disablePreviousFlow: true,
+                        beforeShowPromise: () => GuideUtils.waitFor(GuideUtils.getGuideElementSelector('agent-form'), 5)
+                            .catch((error) => {
+                                services.toastr.error(services.$translate.instant('guide.unexpected.error.message'));
+                                throw error;
+                            }),
+                        elementSelector: GuideUtils.getGuideElementSelector('agent-name'),
+                        onNextValidate: () => Promise.resolve(GuideUtils.validateTextInputNotEmpty(GuideUtils.getGuideElementSelector('agent-name')))
                     }, options)
-                }, {
-                    guideBlockName: 'clickable-element',
+                })
+            }
+
+            if (shouldConfigureExtractionMethods) {
+                steps.push(...configureExtractionMethods(services, options))
+            }
+
+            if (hasModelName) {
+                steps.push({
+                    guideBlockName: 'input-element',
                     options: angular.extend({}, {
-                        content: 'guide.step_plugin.visual_graph_show_autocomplete.content',
-                        url: '/graphs-visualizations',
-                        elementSelector: GuideUtils.getGuideElementSelector(`autocomplete-${options.iri}`),
-                        class: 'visual-graph-show-autocomplete-guide-dialog',
-                        onNextClick: (guide, step) => GuideUtils.waitFor(step.elementSelector, 3).then(() => $(step.elementSelector).trigger('click')),
-                        canBePaused: false,
-                        forceReload: true
+                        content: 'guide.step_plugin.configure-agent.model-input',
+                        class: 'input-model-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('model'),
+                        onNextValidate: () => Promise.resolve(GuideUtils.validateTextInput(GuideUtils.getGuideElementSelector('model'), options.model, false))
                     }, options)
-                }, {
-                    guideBlockName: 'read-only-element',
+                })
+            }
+
+            if (hasUserInstructions) {
+                steps.push({
+                    guideBlockName: 'input-element',
                     options: angular.extend({}, {
-                        content: 'guide.step_plugin.visual_graph_intro.content',
-                        url: '/graphs-visualizations',
-                        elementSelector: '.graph-visualization',
-                        placement: 'left',
-                        onPreviousClick: () => {
-                            $location.url('/graphs-visualizations');
-                            // the page have to be reloaded because the "Search RDF resource..." input have to be visible, due to implementation
-                            $route.reload();
-                            const searchInputSelector = GuideUtils.getGuideElementSelector('graphVisualisationSearchInputNotConfigured', ' input');
-                            return GuideUtils.waitFor(searchInputSelector, 3)
-                                .then(() => {
-                                    GuideUtils.validateTextInput(searchInputSelector, options.easyGraphInputText);
+                        content: 'guide.step_plugin.configure-agent.user-instructions-input',
+                        class: 'input-user-instructions-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('user-instructions'),
+                        onNextValidate: () => Promise.resolve(GuideUtils.validateTextInput(GuideUtils.getGuideElementSelector('user-instructions'), options.userInstructions, false))
+                    }, options)
+                })
+            }
+
+            return steps;
+        }
+    }
+]);
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'end-on-api-key-error',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'end-on-api-key-error';
+
+            return [
+                {
+                    guideBlockName: 'guide-end',
+                    options: angular.extend({}, {
+                        title: 'guide.step_plugin.ttyg.missing-key.title',
+                        content: 'guide.step_plugin.ttyg.missing-key.content',
+                        url: '/ttyg',
+                        beforeShowPromise: (guide, currentStepDescription) => {
+                            // Check if error toast is visible waiting for 1 seconds
+                            return GuideUtils.waitFor('.toast-message', 1)
+                                .then((element) => {
+                                    if (element.text().includes('graphdb.openai.api-key')) {
+                                        // Error toast is visible, show this step and complete on next click
+                                        currentStepDescription.onNextClick = (guide) => {
+                                            guide.complete();
+                                        };
+                                    } else {
+                                        // Toast is not visible, but not the correct, so we go on
+                                        setTimeout(() => {
+                                            guide.next();
+                                        });
+                                    }
+                                })
+                                .catch(() => {
+                                    // Error toast is not visible, skip this step and move to next one
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => {
+                                        guide.next();
+                                    });
                                 });
-                        },
-                        initPreviousStep: () => {
-                            const url = '/graphs-visualizations?uri=' + options.iri;
-                            if (url !== decodeURIComponent($location.url())) {
-                                $location.path('/graphs-visualizations').search({uri: options.iri});
-                                return GuideUtils.waitFor(`.node-wrapper[id^="${options.iri}"] circle`, 3);
-                            }
-                            return Promise.resolve();
-                        },
-                        canBePaused: false,
-                        forceReload: true
+                        }
                     }, options)
                 }
             ];
         }
-    },
+    }
+]);
+
+PluginRegistry.add('guide.step', [
     {
-        guideBlockName: 'visual-graph-expand',
+        guideBlockName: 'fts-search-method',
         getSteps: (options, services) => {
             const GuideUtils = services.GuideUtils;
-            const $rootScope = services.$rootScope;
-            const $route = services.$route;
-            const elementSelector = `.node-wrapper[id^="${options.iri}"] circle`;
+            options.mainAction = 'fts-search-method';
 
-            // Expands visual graph when a node is double-clicked.
-            const dblClickFunction = (guide) => () => {
-                GuideUtils.graphVizExpandNode(elementSelector);
-                guide.getCurrentStep().hide();
-                GuideUtils.awaitAlphaDropD3(null, $rootScope)()
-                    .then(() => {
-                        guide.next();
-                    });
-            };
+            const shouldToggleOff = options.disable;
+            const toggleSelector = GuideUtils.getGuideElementSelector('query-method-fts_search-input');
 
-            return [
-                {
+            if (shouldToggleOff) {
+                return [{
                     guideBlockName: 'clickable-element',
                     options: angular.extend({}, {
-                        title: 'guide.step_plugin.visual-graph-expand.title',
-                        content: 'guide.step_plugin.visual-graph-expand.content',
+                        content: 'guide.step_plugin.fts-search-method.disable-toggle',
+                        class: 'toggle-fts-search-guide-dialog',
+                        url: '/ttyg',
+                        showOn: () => GuideUtils.isChecked(toggleSelector),
+                        elementSelector: GuideUtils.getGuideElementSelector('query-method-fts_search'),
+                        clickableElementSelector: toggleSelector,
+                        onNextValidate: () => Promise.resolve(!GuideUtils.isChecked(toggleSelector))
+                    }, options)
+                }]
+            }
+
+            return [
+                {
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.fts-search-method.content',
+                        url: '/ttyg',
+                        class: 'info-fts-search-guide-dialog',
+                        disablePreviousFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.fts-search-method.enable-toggle',
+                        class: 'toggle-fts-search-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('query-method-fts_search'),
+                        clickableElementSelector: toggleSelector,
+                        onNextValidate: () => Promise.resolve(GuideUtils.isChecked(toggleSelector))
+                    }, options)
+                }
+            ];
+        }
+    }
+]);
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'similarity-search-method',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'similarity-search-method';
+
+            const shouldToggleOff = options.disable;
+            const toggleSelector = GuideUtils.getGuideElementSelector('query-method-similarity_search-input');
+
+            if (shouldToggleOff) {
+                return [{
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.similarity-search-method.disable-toggle',
+                        class: 'toggle-similarity-search-guide-dialog',
+                        url: '/ttyg',
+                        showOn: () => GuideUtils.isChecked(toggleSelector),
+                        elementSelector: GuideUtils.getGuideElementSelector('query-method-similarity_search'),
+                        clickableElementSelector: toggleSelector,
+                        onNextValidate: () => Promise.resolve(!GuideUtils.isChecked(toggleSelector))
+                    }, options)
+                }]
+            }
+
+            return [
+                {
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.similarity-search-method.content',
+                        url: '/ttyg',
+                        class: 'info-similarity-search-guide-dialog',
+                        disablePreviousFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.similarity-search-method.enable-toggle',
+                        class: 'toggle-similarity-search-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('query-method-similarity_search'),
+                        clickableElementSelector: toggleSelector,
+                        onNextValidate: () => Promise.resolve(GuideUtils.isChecked(toggleSelector))
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.similarity-search-method.select-index',
+                        elementSelector: GuideUtils.getGuideElementSelector('similarity-index-select'),
+                        class: 'select-similarity-index-guide-dialog',
+                    }, options)
+                }
+            ];
+        }
+    }
+]);
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'sparql-search-method',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'sparql-search-method';
+
+            const shouldToggleOff = options.disable;
+            const toggleSelector = GuideUtils.getGuideElementSelector('query-method-sparql_search-input');
+
+            if (shouldToggleOff) {
+                return [{
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.sparql-search-method.disable-toggle',
+                        class: 'toggle-sparql-search-guide-dialog',
+                        url: '/ttyg',
+                        showOn: () => GuideUtils.isChecked(toggleSelector),
+                        elementSelector: GuideUtils.getGuideElementSelector('query-method-sparql_search'),
+                        clickableElementSelector: toggleSelector,
+                        onNextValidate: () => Promise.resolve(!GuideUtils.isChecked(toggleSelector))
+                    }, options)
+                }]
+            }
+
+            return [
+                {
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        content: `guide.step_plugin.sparql-search-method.content`,
+                        class: 'info-sparql-search-guide-dialog',
+                        url: '/ttyg',
+                        disablePreviousFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.sparql-search-method.enable-toggle',
+                        class: 'toggle-sparql-search-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('query-method-sparql_search'),
+                        clickableElementSelector: toggleSelector,
+                        onNextValidate: () => Promise.resolve(GuideUtils.isChecked(toggleSelector))
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.sparql-search-method.enable-ontology-from-graph',
+                        class: 'enable-ontology-from-graph-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('sparql-ontology-graph-option'),
+                        clickableElementSelector: GuideUtils.getGuideElementSelector('sparql-ontology-graph-option-input'),
+                        onNextValidate: () => Promise.resolve(GuideUtils.isChecked(GuideUtils.getGuideElementSelector('sparql-ontology-graph-option-input')))
+                    }, options)
+                },
+                {
+                    guideBlockName: 'input-element',
+                    options: angular.extend({}, {
+                        content: `guide.step_plugin.sparql-search-method.type-ontology-graph-name`,
+                        class: 'input-ontology-graph-name-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('sparql-ontology-graph-input'),
+                        onNextValidate: () => Promise.resolve(GuideUtils.validateTextInput(GuideUtils.getGuideElementSelector('sparql-ontology-graph-input'), options.ontologyGraph, false))
+                    }, options)
+                }
+            ];
+        }
+    }
+]);
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'conversation-with-ttyg-agent',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'conversation-with-ttyg-agent';
+            const startNewConversation = options.startNewConversation;
+            const showInfo = options.showInfo;
+
+            const steps = [];
+
+            if (showInfo) {
+                steps.push({
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        skipPoint: true,
+                        url: '/ttyg',
+                        class: 'conversation-info-guide-dialog',
+                        content: 'guide.step_plugin.conversation-with-ttyg-agent.info',
+                    }, options)
+                })
+            }
+
+            if (startNewConversation) {
+                const createChatBtnSelector = GuideUtils.getGuideElementSelector('create-chat-btn')
+                const newConversationStartSteps = [
+                    {
+                        // If button is not visible for some reason, skip the whole step
+                        guideBlockName: 'info-message',
+                        options: angular.extend({}, {
+                            url: '/ttyg',
+                            beforeShowPromise: (guide, currentStep) => GuideUtils.waitFor(createChatBtnSelector, 1)
+                                .then(() => {
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.next())
+                                })
+                                .catch(() => {
+                                    const stepId = currentStep.id;
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.show(stepId + 2))
+                                }),
+                        }, options)
+                    },
+                    {
+                        guideBlockName: 'clickable-element',
+                        options: angular.extend({}, {
+                            content: 'guide.step_plugin.conversation-with-ttyg-agent.start-conversation',
+                            class: 'start-conversation-guide-dialog',
+                            url: '/ttyg',
+                            elementSelector: createChatBtnSelector,
+                            disableNextFlow: true
+                        }, options)
+                    }
+                ]
+                steps.push(...newConversationStartSteps);
+            }
+
+            const questionSteps = options.questions.map((questionWithOptions) => {
+                return {
+                    guideBlockName: 'ask-ttyg-agent',
+                    options: questionWithOptions
+                };
+            });
+
+            steps.push(...questionSteps);
+
+            return steps;
+        }
+    }
+]);
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'create-ttyg-agent',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'create-ttyg-agent';
+
+            return [
+                {
+                    guideBlockName: 'click-main-menu',
+                    options: angular.extend({}, {
+                        menu: 'ttyg',
+                        showIntro: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'end-on-api-key-error'
+                },
+                {
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.create-ttyg-agent.intro',
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.create-ttyg-agent.create-agent',
+                        class: 'create-agent-btn-guide-dialog',
+                        url: '/ttyg',
+                        maxWaitTime: 10,
+                        elementSelector: GuideUtils.getGuideElementSelector('create-agent-btn'),
+                        disableNextFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'configure-agent',
+                    // Set name field as mandatory for creation
+                    options: angular.extend({}, options, {editName: true})
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.create-ttyg-agent.save-agent-settings',
+                        class: 'save-agent-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('save-agent-settings'),
+                        disableNextFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'wait-for-element-to-hide',
+                    options: angular.extend({}, {
+                        elementSelectorToHide: GuideUtils.getElementSelector('.agent-settings-modal'),
+                        timeToWait: 10
+                    }, options)
+                }
+            ];
+        }
+    }
+]);
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'edit-ttyg-agent',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            const $location = services.$location;
+            options.mainAction = 'edit-ttyg-agent';
+
+            return [
+                {
+                    guideBlockName: 'click-main-menu',
+                    options: angular.extend({}, {
+                        menu: 'ttyg',
+                        showOn: () => '/ttyg' !== $location.path()
+                    }, options)
+                },
+                {
+                    guideBlockName: 'end-on-api-key-error'
+                },
+                {
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.edit-ttyg-agent.intro',
+                        skipPoint: true
+                    }, options)
+                },
+                {
+                    // Skip next step (which is actually 5 core steps) if there is a selected agent
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        beforeShowPromise: (guide, currentStep) => {
+                            if (GuideUtils.isGuideElementVisible('selected-agent')) {
+                                setTimeout(() => {
+                                    // Using a timeout because the library executes async logic
+                                    guide.show(currentStep.id + 6);
+                                })
+                            } else {
+                                setTimeout(() => {
+                                    // Using a timeout because the library executes async logic
+                                    guide.next()
+                                });
+                            }
+                        }
+                    }, options)
+                },
+                {
+                    guideBlockName: 'select-ttyg-agent',
+                    options: angular.extend({}, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.edit-ttyg-agent.edit-agent',
+                        class: 'edit-agent-btn-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('edit-current-agent'),
+                        disablePreviousFlow: true,
+                        disableNextFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'configure-agent',
+                    options
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.edit-ttyg-agent.save-agent-settings',
+                        class: 'save-agent-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('save-agent-settings'),
+                        disableNextFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'wait-for-element-to-hide',
+                    options: angular.extend({}, {
+                        elementSelectorToHide: GuideUtils.getElementSelector('.agent-settings-modal'),
+                        timeToWait: 10
+                    }, options)
+                }
+            ];
+        }
+    }
+]);
+
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'select-ttyg-agent',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'select-ttyg-agent';
+
+            return [
+                {
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.select-ttyg-agent.info.content',
+                        url: '/ttyg',
+                        class: 'select-ttyg-agent-guide-dialog',
+                        skipPoint: true,
+                        disablePreviousFlow: true,
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.select-ttyg-agent.open-agent-dropdown',
+                        class: 'open-agent-dropdown-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('select-agent-dropdown'),
+                        disableNextFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.select-ttyg-agent.select-agent',
+                        elementSelector: GuideUtils.getGuideElementSelector('select-agent-panel'),
+                        class: 'select-your-agent-guide-dialog',
+                        show: () => () => {
+                            const elementToObserve = document.querySelector(GuideUtils.getGuideElementSelector('select-agent-dropdown'));
+                            const dropdownToggleElement = document.querySelector(GuideUtils.getGuideElementSelector('select-agent-dropdown-toggle'));
+
+                            options.observer = new MutationObserver(attributesChangeCallback);
+                            options.observer.observe(elementToObserve, {attributes: true});
+
+                            function attributesChangeCallback(mutationList) {
+                                for (const mutation of mutationList) {
+                                    if (mutation.type === 'attributes') {
+                                        const isOpened = mutation.target.classList.contains('open');
+
+                                        // The component we use for selecting the agent automatically closes
+                                        // after the user clicks on the view, which is why we have to open it.
+                                        if (!(isOpened)) {
+                                            dropdownToggleElement.click();
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        disablePreviousFlow: true,
+                        disableNextFlow: true,
+                        hide: () => () => {
+                            options.observer.disconnect();
+                        }
+                    }, options)
+                },
+                {
+                    // If missing repository modal is visible go to next step, otherwise skip it
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        beforeShowPromise: (guide, currentStep) => {
+                            return GuideUtils.getOrWaitFor(GuideUtils.getElementSelector('.confirm-dialog .cancel-btn'), 1)
+                                .then(() => {
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.next())
+                                })
+                                .catch(() => {
+                                    const stepId = currentStep.id;
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.show(stepId + 2))
+                                })
+                        },
+                        disablePreviousFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.select-ttyg-agent.missing-repository',
+                        elementSelector: GuideUtils.getElementSelector('.confirm-dialog .cancel-btn'),
+                        showOn: () => GuideUtils.isVisible('.confirm-dialog .cancel-btn'),
+                        onNextClick: () => {
+                            // Close the modal by clicking on cancel button
+                            GuideUtils.clickOnElement('.confirm-dialog .cancel-btn')();
+                        },
+                        show: (guide, currentStep) => () => {
+                            const currentStepId = currentStep.id;
+                            // Add "click" listener to the element. Upon clicking the element the guide is set back 3 steps to open dropdown step
+                            $(currentStep.elementSelector).on('click', () => {
+                                guide.show(currentStepId - 3)
+                            });
+                        },
+                        hide: (guide, currentStep) => () => {
+                            // Remove the "click" listener of element. It is important when step is hidden.
+                            $(currentStep.elementSelector).off('click');
+                        }
+                    }, options)
+                },
+            ];
+        }
+    }
+]);
+
+const disableAllNodes = () => () => {
+    $('.node-wrapper').addClass('disable-visual-graph-node');
+};
+
+const enableAllNodes = () => () => {
+    $('.node-wrapper').removeClass('disable-visual-graph-node');
+};
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'visual-graph',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            const $location = services.$location;
+            const $route = services.$route;
+            options.mainAction = 'visual-graph';
+
+            return [
+                {
+                    guideBlockName: 'click-main-menu',
+                    options: angular.extend({}, {
+                        menu: 'visual-graph',
+                        showIntro: true
+                    }, options)
+                }, {
+                    guideBlockName: 'input-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.visual_graph_input_IRI.content',
+                        forceReload: true,
+                        url: '/graphs-visualizations',
+                        elementSelector: GuideUtils.getGuideElementSelector('graphVisualisationSearchInputNotConfigured', ' input'),
+                        class: 'visual-graph-input-iri-guide-dialog',
+                        onNextValidate: (step) => Promise.resolve(GuideUtils.validateTextInput(step.elementSelector, step.easyGraphInputText))
+                    }, options)
+                }, {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.visual_graph_show_autocomplete.content',
+                        url: '/graphs-visualizations',
+                        elementSelector: GuideUtils.getGuideElementSelector(`autocomplete-${options.iri}`),
+                        class: 'visual-graph-show-autocomplete-guide-dialog',
+                        onNextClick: (guide, step) => GuideUtils.waitFor(step.elementSelector, 3).then(() => $(step.elementSelector).trigger('click')),
+                        canBePaused: false,
+                        forceReload: true
+                    }, options)
+                }, {
+                    guideBlockName: 'read-only-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.visual_graph_intro.content',
+                        url: '/graphs-visualizations',
+                        elementSelector: '.graph-visualization',
+                        placement: 'left',
+                        onPreviousClick: () => {
+                            $location.url('/graphs-visualizations');
+                            // the page have to be reloaded because the "Search RDF resource..." input have to be visible, due to implementation
+                            $route.reload();
+                            const searchInputSelector = GuideUtils.getGuideElementSelector('graphVisualisationSearchInputNotConfigured', ' input');
+                            return GuideUtils.waitFor(searchInputSelector, 3)
+                                .then(() => {
+                                    GuideUtils.validateTextInput(searchInputSelector, options.easyGraphInputText);
+                                });
+                        },
+                        initPreviousStep: () => {
+                            const url = '/graphs-visualizations?uri=' + options.iri;
+                            if (url !== decodeURIComponent($location.url())) {
+                                $location.path('/graphs-visualizations').search({uri: options.iri});
+                                return GuideUtils.waitFor(`.node-wrapper[id^="${options.iri}"] circle`, 3);
+                            }
+                            return Promise.resolve();
+                        },
+                        canBePaused: false,
+                        forceReload: true
+                    }, options)
+                }
+            ];
+        }
+    },
+    {
+        guideBlockName: 'visual-graph-expand',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            const $rootScope = services.$rootScope;
+            const $route = services.$route;
+            const elementSelector = `.node-wrapper[id^="${options.iri}"] circle`;
+
+            // Expands visual graph when a node is double-clicked.
+            const dblClickFunction = (guide) => () => {
+                GuideUtils.graphVizExpandNode(elementSelector);
+                guide.getCurrentStep().hide();
+                GuideUtils.awaitAlphaDropD3(null, $rootScope)()
+                    .then(() => {
+                        guide.next();
+                    });
+            };
+
+            return [
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        title: 'guide.step_plugin.visual-graph-expand.title',
+                        content: 'guide.step_plugin.visual-graph-expand.content',
                         url: '/graphs-visualizations',
                         canBePaused: false,
                         class: 'visual-graph-expand-node-guide-dialog',
@@ -2002,6 +2937,7 @@ const beforeShowPromise = (services, elementSelector, maxWaitTime) => {
 
 PluginRegistry.add('guide.step', [
     {
+        // An element which is expected to be clicked. If onNextClick is not defined, it will automatically click on the element on next button press
         guideBlockName: 'clickable-element',
         getStep: (options, services) => {
             const notOverridable = {
@@ -2010,7 +2946,7 @@ PluginRegistry.add('guide.step', [
 
             const stepDescription = angular.extend({}, BASIC_STEP, {
                 advanceOn: {
-                    selector: options.elementSelector,
+                    selector: options.clickableElementSelector || options.elementSelector,
                     event: 'click'
                 },
                 initPreviousStep: services.GuideUtils.defaultInitPreviousStep
@@ -2023,6 +2959,21 @@ PluginRegistry.add('guide.step', [
         }
     },
     {
+        // An element which is expected to be focused. It allows user interaction.
+        guideBlockName: 'focus-element',
+        getStep: (options, services) => {
+            const stepDescription = angular.extend({}, BASIC_STEP, {
+                initPreviousStep: services.GuideUtils.defaultInitPreviousStep
+            }, options);
+
+            if (!stepDescription.beforeShowPromise) {
+                stepDescription.beforeShowPromise = beforeShowPromise(services, stepDescription.elementSelector, stepDescription.maxWaitTime);
+            }
+            return stepDescription;
+        }
+    },
+    {
+        // An element which is expected to be focused, but interactions are disabled.
         guideBlockName: 'read-only-element',
         getStep: (options, services) => {
             const notOverridable = {
@@ -2064,13 +3015,66 @@ PluginRegistry.add('guide.step', [
             }, options, notOverridable);
         }
     },
+    {
+        guideBlockName: 'hold-and-wait-until-hidden',
+        getStep: (options, services) => {
+            const notOverridable = {
+                type: 'readonly'
+            };
+            return angular.extend({}, BASIC_STEP, {
+                initPreviousStep: services.GuideUtils.defaultInitPreviousStep,
+                disablePreviousFlow: true,
+                onNextValidate: () => Promise.resolve(!services.GuideUtils.isVisible(options.elementSelectorToWait))
+            }, options, notOverridable);
+        }
+    },
+    {
+        guideBlockName: 'hold-and-wait-until-shown',
+        getStep: (options, services) => {
+            const notOverridable = {
+                type: 'readonly'
+            };
+            return angular.extend({}, BASIC_STEP, {
+                initPreviousStep: services.GuideUtils.defaultInitPreviousStep,
+                disablePreviousFlow: true,
+                onNextValidate: () => Promise.resolve(services.GuideUtils.isVisible(options.elementSelectorToWait))
+            }, options, notOverridable);
+        }
+    },
+    {
+        guideBlockName: 'wait-for-element-to-hide',
+        getStep: (options, services) => {
+            return angular.extend({}, BASIC_STEP, {
+                initPreviousStep: services.GuideUtils.defaultInitPreviousStep,
+                beforeShowPromise: () => services.GuideUtils.waitUntilHidden(options.elementSelectorToHide, options.timeToWait || 2),
+                show: (guide) => () => {
+                    // Using a timeout because the library executes async logic
+                    setTimeout(() => guide.next())
+                }
+            }, options);
+        }
+    },
+    {
+        guideBlockName: 'wait-for-element-to-show',
+        getStep: (options, services) => {
+            return angular.extend({}, BASIC_STEP, {
+                initPreviousStep: services.GuideUtils.defaultInitPreviousStep,
+                beforeShowPromise: () => services.GuideUtils.getOrWaitFor(options.elementSelectorToShow, options.timeToWait || 2),
+                show: (guide) => () => {
+                    // Using a timeout because the library executes async logic
+                    setTimeout(() => guide.next())
+                }
+            }, options);
+        }
+    },
     {
         guideBlockName: 'guide-end',
         getStep: (options, services) => {
             const notOverridable = {
                 type: 'readonly',
-                title: 'guide.step_plugin.guide-ended.title',
-                content: 'guide.step_plugin.guide-ended.content',
+                title: options.title || 'guide.step_plugin.guide-ended.title',
+                content: options.content || 'guide.step_plugin.guide-ended.content',
+                lastStep: true,
                 show: (guide) => () => {
                     guide.options.confirmCancel = false;
                 },