Ontotext-AD · plamen-yordanov · Mar 16, 2026
diff --git a/docs/guides_core-steps_copy-text-element.js.html b/docs/guides_core-steps_copy-text-element.js.html
@@ -92,6 +92,7 @@ <h1>guides/core-steps/copy-text-element.js</h1>
             <pre class="prettyprint source linenums"><code>import * as Utils from '../utils.js';
 
 const COPY_TEXT = 'guide.step_plugin.core-steps.copy-text-element.copy-to-input';
+const COPY_TEXT_ELEMENT = 'guide.step_plugin.core-steps.copy-text-element.content';
 
 /**
  * @name copy-text-element
@@ -145,8 +146,7 @@ <h1>guides/core-steps/copy-text-element.js</h1>
         guideBlockName: 'input-element',
         options: {
           ...options,
-          content: 'guide.step_plugin.core-steps.copy-text-element.content',
-          textAsHtmlCodeElement: '&lt;div class="shepherd-code">' + code.outerHTML + copy.outerHTML + '&lt;/div>',
+          content: translate(this.translationBundle, COPY_TEXT_ELEMENT, {textAsHtmlCodeElement: '&lt;div class="shepherd-code">' + code.outerHTML + copy.outerHTML + '&lt;/div>'}),
           show: (guide) => () => {
             stepHTMLElement = guide.currentStep.el.querySelector(`.${copyToInputQueryButtonClass}`);
             stepHTMLElement.addEventListener('click', copyToInputListener);
@@ -162,10 +162,12 @@ <h1>guides/core-steps/copy-text-element.js</h1>
   },
   translationBundle: {
     en: {
-      [COPY_TEXT]: 'Copy to input'
+      [COPY_TEXT]: 'Copy to input',
+      [COPY_TEXT_ELEMENT]: 'Enter the following in the input: {{textAsHtmlCodeElement}}'
     },
     fr: {
-      [COPY_TEXT]: 'Copier dans la saisie'
+      [COPY_TEXT]: 'Copier dans la saisie',
+      [COPY_TEXT_ELEMENT]: 'Entrez le texte suivant dans la saisie : {{textAsHtmlCodeElement}}'
     }
   }
 };

diff --git a/docs/guides_ttyg_ttyg-ask-explain-answer-more.js.html b/docs/guides_ttyg_ttyg-ask-explain-answer-more.js.html
@@ -89,10 +89,9 @@ <h1>guides/ttyg/ttyg-ask-explain-answer-more.js</h1>
 
     <section>
         <article>
-            <pre class="prettyprint source linenums"><code>import * as Utils from '../utils.js';
-
-const TTYG_ASK_DEFAULT_TITLE = 'guide.step-action.ask-ttyg-agent';
+            <pre class="prettyprint source linenums"><code>const TTYG_ASK_DEFAULT_TITLE = 'guide.step-action.ask-ttyg-agent';
 const EXPLAIN_ANSWER_MORE = 'guide.step_plugin.ask-ttyg-agent.explain-answer-more';
+const WAIT_FOR_ANSWER = 'guide.step_plugin.ask-ttyg-agent.wait-for-answer';
 
 /**
  * @name ttyg-ask-explain-answer-more
@@ -164,18 +163,30 @@ <h1>guides/ttyg/ttyg-ask-explain-answer-more.js</h1>
           }
         }
       },
-      Utils.getWaitForAnswerStep(GuideUtils, options)
+      {
+        guideBlockName: 'hold-and-wait-until-hidden',
+        options: {
+          title,
+          content: translate(this.translationBundle, WAIT_FOR_ANSWER),
+          class: 'wait-for-answer',
+          url: 'ttyg',
+          elementSelector: GuideUtils.getGuideElementSelector('chat-details'),
+          elementSelectorToWait: GuideUtils.getGuideElementSelector('question-loader'),
+          ...options
+        }
+      }
     ];
   },
   translationBundle: {
     en: {
       [TTYG_ASK_DEFAULT_TITLE]: 'Ask the agent',
-      [EXPLAIN_ANSWER_MORE]: 'You can ask the agent how it derived the answer by clicking on the button'
+      [EXPLAIN_ANSWER_MORE]: 'You can ask the agent how it derived the answer by clicking on the button',
+      [WAIT_FOR_ANSWER]: 'Wait for the answer to be returned and explore it. When ready proceed by clicking next.'
     },
-
     fr: {
       [TTYG_ASK_DEFAULT_TITLE]: 'Demander à l\'agent',
-      [EXPLAIN_ANSWER_MORE]: 'Vous pouvez demander à l\'agent comment il a obtenu la réponse en cliquant sur le bouton'
+      [EXPLAIN_ANSWER_MORE]: 'Vous pouvez demander à l\'agent comment il a obtenu la réponse en cliquant sur le bouton',
+      [WAIT_FOR_ANSWER]: 'Attendez que la réponse vous soit renvoyée et explorez-la. Lorsque vous êtes prêt, cliquez sur suivant.'
     }
   }
 };

diff --git a/docs/guides_ttyg_ttyg-ask-question.js.html b/docs/guides_ttyg_ttyg-ask-question.js.html
@@ -89,11 +89,10 @@ <h1>guides/ttyg/ttyg-ask-question.js</h1>
 
     <section>
         <article>
-            <pre class="prettyprint source linenums"><code>import * as Utils from '../utils.js';
-
-const CHAT_DETAILS_SELECTOR = 'chat-details';
+            <pre class="prettyprint source linenums"><code>const CHAT_DETAILS_SELECTOR = 'chat-details';
 const TTYG_ASK_DEFAULT_TITLE = 'guide.step-action.ask-ttyg-agent';
 const INPUT_QUESTION = 'guide.step_plugin.ask-ttyg-agent.input-question';
+const WAIT_FOR_ANSWER = 'guide.step_plugin.ask-ttyg-agent.wait-for-answer';
 
 /**
  * @name ttyg-ask-question
@@ -158,18 +157,30 @@ <h1>guides/ttyg/ttyg-ask-question.js</h1>
           }
         }
       },
-      Utils.getWaitForAnswerStep(GuideUtils, options)
+      {
+        guideBlockName: 'hold-and-wait-until-hidden',
+        options: {
+          title,
+          content: translate(this.translationBundle, WAIT_FOR_ANSWER),
+          class: 'wait-for-answer',
+          url: 'ttyg',
+          elementSelector: GuideUtils.getGuideElementSelector('chat-details'),
+          elementSelectorToWait: GuideUtils.getGuideElementSelector('question-loader'),
+          ...options
+        }
+      }
     ];
   },
   translationBundle: {
     en: {
       [TTYG_ASK_DEFAULT_TITLE]: 'Ask the agent',
-      [INPUT_QUESTION]: 'Type "&lt;b>{{question}}&lt;/b>" in the input and press enter'
+      [INPUT_QUESTION]: 'Type "&lt;b>{{question}}&lt;/b>" in the input and press enter',
+      [WAIT_FOR_ANSWER]: 'Wait for the answer to be returned and explore it. When ready proceed by clicking next.'
     },
-
     fr: {
       [TTYG_ASK_DEFAULT_TITLE]: 'Demander à l\'agent',
-      [INPUT_QUESTION]: 'Tapez "&lt;b>{{question}}&lt;/b>" dans le champ de saisie et appuyez sur la touche \'Entrée\''
+      [INPUT_QUESTION]: 'Tapez "&lt;b>{{question}}&lt;/b>" dans le champ de saisie et appuyez sur la touche \'Entrée\'',
+      [WAIT_FOR_ANSWER]: 'Attendez que la réponse vous soit renvoyée et explorez-la. Lorsque vous êtes prêt, cliquez sur suivant.'
     }
   }
 };

diff --git a/docs/guides_ttyg_ttyg-explain-response.js.html b/docs/guides_ttyg_ttyg-explain-response.js.html
@@ -89,10 +89,9 @@ <h1>guides/ttyg/ttyg-explain-response.js</h1>
 
     <section>
         <article>
-            <pre class="prettyprint source linenums"><code>import * as Utils from '../utils.js';
-
-const TTYG_ASK_DEFAULT_TITLE = 'guide.step-action.ask-ttyg-agent';
+            <pre class="prettyprint source linenums"><code>const TTYG_ASK_DEFAULT_TITLE = 'guide.step-action.ask-ttyg-agent';
 const EXPLAIN_ANSWER = 'guide.step_plugin.ask-ttyg-agent.explain-answer';
+const WAIT_FOR_ANSWER = 'guide.step_plugin.ask-ttyg-agent.wait-for-answer';
 
 /**
  * @name ttyg-explain-response
@@ -150,18 +149,30 @@ <h1>guides/ttyg/ttyg-explain-response.js</h1>
           elementSelector
         }
       },
-      Utils.getWaitForAnswerStep(GuideUtils, options)
+      {
+        guideBlockName: 'hold-and-wait-until-hidden',
+        options: {
+          title,
+          content: translate(this.translationBundle, WAIT_FOR_ANSWER),
+          class: 'wait-for-answer',
+          url: 'ttyg',
+          elementSelector: GuideUtils.getGuideElementSelector('chat-details'),
+          elementSelectorToWait: GuideUtils.getGuideElementSelector('question-loader'),
+          ...options
+        }
+      }
     ];
   },
   translationBundle: {
     en: {
       [TTYG_ASK_DEFAULT_TITLE]: 'Ask the agent',
-      [EXPLAIN_ANSWER]: 'Explain the answer by clicking on the \'Explain response\' button.'
+      [EXPLAIN_ANSWER]: 'Explain the answer by clicking on the \'Explain response\' button.',
+      [WAIT_FOR_ANSWER]: 'Wait for the answer to be returned and explore it. When ready proceed by clicking next.'
     },
-
     fr: {
       [TTYG_ASK_DEFAULT_TITLE]: 'Demander à l\'agent',
-      [EXPLAIN_ANSWER]: 'Expliquez la réponse en cliquant sur le bouton \'Expliquer la réponse\''
+      [EXPLAIN_ANSWER]: 'Expliquez la réponse en cliquant sur le bouton \'Expliquer la réponse\'',
+      [WAIT_FOR_ANSWER]: 'Attendez que la réponse vous soit renvoyée et explorez-la. Lorsque vous êtes prêt, cliquez sur suivant.'
     }
   }
 };

diff --git a/docs/guides_utils.js.html b/docs/guides_utils.js.html
@@ -272,20 +272,6 @@ <h1>guides/utils.js</h1>
   $('.node-wrapper').removeClass('disable-visual-graph-node');
 };
 
-export const getWaitForAnswerStep = (GuideUtils, options) => {
-  return {
-    guideBlockName: 'hold-and-wait-until-hidden',
-    options: {
-      content: 'guide.step_plugin.ask-ttyg-agent.wait-for-answer',
-      class: 'wait-for-answer',
-      url: 'ttyg',
-      elementSelector: GuideUtils.getGuideElementSelector('chat-details'),
-      elementSelectorToWait: GuideUtils.getGuideElementSelector('question-loader'),
-      ...options
-    }
-  };
-};
-
 export const getConnectorNameSelector = (options, services) => {
   return services.GuideUtils.getGuideElementSelector(`connector-name-${options.connectorName}`);
 };

diff --git a/docs/guides_visual-graph_visual-graph-properties.js.html b/docs/guides_visual-graph_visual-graph-properties.js.html
@@ -152,12 +152,12 @@ <h1>guides/visual-graph/visual-graph-properties.js</h1>
       if (mouseEventTimer) {
         // Cancels expansion of the sidebar panel if user double-clicked.
         if (event.timeStamp - mouseClickTimeStamp &lt; 400) {
-          services.$timeout.cancel(mouseEventTimer);
+          clearTimeout(mouseEventTimer);
           mouseEventTimer = null;
         }
       } else {
         mouseClickTimeStamp = event.timeStamp;
-        mouseEventTimer = services.$timeout(function() {
+        mouseEventTimer = setTimeout(function() {
           GuideUtils.graphVizShowNodeInfo(elementSelector);
           mouseEventTimer = null;
           guide.next();
@@ -180,11 +180,19 @@ <h1>guides/visual-graph/visual-graph-properties.js</h1>
           show: (guide) => () => {
             // Add "click" listener to the element. Processing of click event is disabled for the visual graph when guide is started.
             // So we have to open side panel info manually when a selected node is clicked.
-            $(elementSelector).on('click.onNodeClicked', onClick(services, guide));
+            const element = document.querySelector(elementSelector);
+            if (element) {
+              element._onNodeClicked = onClick(services, guide);
+              element.addEventListener('click', element._onNodeClicked);
+            }
           },
           hide: () => () => {
             // Remove the "click" listener of element. It is important when step is hided.
-            $(elementSelector).off('click.onNodeClicked');
+            const element = document.querySelector(elementSelector);
+            if (element &amp;&amp; element._onNodeClicked) {
+              element.removeEventListener('click', element._onNodeClicked);
+              delete element._onNodeClicked;
+            }
           },
           onNextClick: (guide, step) => {
             GuideUtils.graphVizShowNodeInfo(step.elementSelector);
@@ -208,7 +216,7 @@ <h1>guides/visual-graph/visual-graph-properties.js</h1>
           onPreviousClick: () => new Promise(function(resolve) {
             GuideUtils.waitFor(closeButtonSelector, 3)
               .then(() => {
-                $(closeButtonSelector).trigger('click');
+                document.querySelector(closeButtonSelector).click();
                 resolve();
               }).catch(() => resolve());
           }),
@@ -272,7 +280,7 @@ <h1>guides/visual-graph/visual-graph-properties.js</h1>
           GuideUtils.graphVizShowNodeInfo(elementSelector);
           return GuideUtils.deferredShow(500)();
         },
-        onNextClick: () => GuideUtils.waitFor(closeButtonSelector, 3).then(() => $(closeButtonSelector).trigger('click')),
+        onNextClick: () => GuideUtils.waitFor(closeButtonSelector, 3).then(() => document.querySelector(closeButtonSelector).click()),
         ...options
       }
     });

diff --git a/docs/module-Interactive%20Guide.html b/docs/module-Interactive%20Guide.html
@@ -10204,7 +10204,7 @@ <h5 class="subsection-title">Properties:</h5>
         <p class="tag-source">
             <a href="guides_core-steps_copy-text-element.js.html" class="button">View Source</a>
             <span>
-                <a href="guides_core-steps_copy-text-element.js.html">guides/core-steps/copy-text-element.js</a>, <a href="guides_core-steps_copy-text-element.js.html#line5">line 5</a>
+                <a href="guides_core-steps_copy-text-element.js.html">guides/core-steps/copy-text-element.js</a>, <a href="guides_core-steps_copy-text-element.js.html#line6">line 6</a>
             </span>
         </p>
 
@@ -18488,7 +18488,7 @@ <h4 class="name" id=".ttyg-ask-explain-answer-more">
         <p class="tag-source">
             <a href="guides_ttyg_ttyg-ask-explain-answer-more.js.html" class="button">View Source</a>
             <span>
-                <a href="guides_ttyg_ttyg-ask-explain-answer-more.js.html">guides/ttyg/ttyg-ask-explain-answer-more.js</a>, <a href="guides_ttyg_ttyg-ask-explain-answer-more.js.html#line6">line 6</a>
+                <a href="guides_ttyg_ttyg-ask-explain-answer-more.js.html">guides/ttyg/ttyg-ask-explain-answer-more.js</a>, <a href="guides_ttyg_ttyg-ask-explain-answer-more.js.html#line5">line 5</a>
             </span>
         </p>
 
@@ -18637,7 +18637,7 @@ <h5 class="subsection-title">Properties:</h5>
         <p class="tag-source">
             <a href="guides_ttyg_ttyg-ask-question.js.html" class="button">View Source</a>
             <span>
-                <a href="guides_ttyg_ttyg-ask-question.js.html">guides/ttyg/ttyg-ask-question.js</a>, <a href="guides_ttyg_ttyg-ask-question.js.html#line7">line 7</a>
+                <a href="guides_ttyg_ttyg-ask-question.js.html">guides/ttyg/ttyg-ask-question.js</a>, <a href="guides_ttyg_ttyg-ask-question.js.html#line6">line 6</a>
             </span>
         </p>
 
@@ -19511,7 +19511,7 @@ <h4 class="name" id=".ttyg-explain-response">
         <p class="tag-source">
             <a href="guides_ttyg_ttyg-explain-response.js.html" class="button">View Source</a>
             <span>
-                <a href="guides_ttyg_ttyg-explain-response.js.html">guides/ttyg/ttyg-explain-response.js</a>, <a href="guides_ttyg_ttyg-explain-response.js.html#line6">line 6</a>
+                <a href="guides_ttyg_ttyg-explain-response.js.html">guides/ttyg/ttyg-explain-response.js</a>, <a href="guides_ttyg_ttyg-explain-response.js.html#line5">line 5</a>
             </span>
         </p>
 

diff --git a/plugins/guides/core-steps/copy-text-element.js b/plugins/guides/core-steps/copy-text-element.js
@@ -1,6 +1,7 @@
 import * as Utils from '../utils.js';
 
 const COPY_TEXT = 'guide.step_plugin.core-steps.copy-text-element.copy-to-input';
+const COPY_TEXT_ELEMENT = 'guide.step_plugin.core-steps.copy-text-element.content';
 
 /**
  * @name copy-text-element
@@ -54,8 +55,7 @@ const step = {
         guideBlockName: 'input-element',
         options: {
           ...options,
-          content: 'guide.step_plugin.core-steps.copy-text-element.content',
-          textAsHtmlCodeElement: '<div class="shepherd-code">' + code.outerHTML + copy.outerHTML + '</div>',
+          content: translate(this.translationBundle, COPY_TEXT_ELEMENT, {textAsHtmlCodeElement: '<div class="shepherd-code">' + code.outerHTML + copy.outerHTML + '</div>'}),
           show: (guide) => () => {
             stepHTMLElement = guide.currentStep.el.querySelector(`.${copyToInputQueryButtonClass}`);
             stepHTMLElement.addEventListener('click', copyToInputListener);
@@ -71,10 +71,12 @@ const step = {
   },
   translationBundle: {
     en: {
-      [COPY_TEXT]: 'Copy to input'
+      [COPY_TEXT]: 'Copy to input',
+      [COPY_TEXT_ELEMENT]: 'Enter the following in the input: {{textAsHtmlCodeElement}}'
     },
     fr: {
-      [COPY_TEXT]: 'Copier dans la saisie'
+      [COPY_TEXT]: 'Copier dans la saisie',
+      [COPY_TEXT_ELEMENT]: 'Entrez le texte suivant dans la saisie : {{textAsHtmlCodeElement}}'
     }
   }
 };

diff --git a/plugins/guides/ttyg/ttyg-ask-explain-answer-more.js b/plugins/guides/ttyg/ttyg-ask-explain-answer-more.js
@@ -1,7 +1,6 @@
-import * as Utils from '../utils.js';
-
 const TTYG_ASK_DEFAULT_TITLE = 'guide.step-action.ask-ttyg-agent';
 const EXPLAIN_ANSWER_MORE = 'guide.step_plugin.ask-ttyg-agent.explain-answer-more';
+const WAIT_FOR_ANSWER = 'guide.step_plugin.ask-ttyg-agent.wait-for-answer';
 
 /**
  * @name ttyg-ask-explain-answer-more
@@ -73,18 +72,30 @@ const step = {
           }
         }
       },
-      Utils.getWaitForAnswerStep(GuideUtils, options)
+      {
+        guideBlockName: 'hold-and-wait-until-hidden',
+        options: {
+          title,
+          content: translate(this.translationBundle, WAIT_FOR_ANSWER),
+          class: 'wait-for-answer',
+          url: 'ttyg',
+          elementSelector: GuideUtils.getGuideElementSelector('chat-details'),
+          elementSelectorToWait: GuideUtils.getGuideElementSelector('question-loader'),
+          ...options
+        }
+      }
     ];
   },
   translationBundle: {
     en: {
       [TTYG_ASK_DEFAULT_TITLE]: 'Ask the agent',
-      [EXPLAIN_ANSWER_MORE]: 'You can ask the agent how it derived the answer by clicking on the button'
+      [EXPLAIN_ANSWER_MORE]: 'You can ask the agent how it derived the answer by clicking on the button',
+      [WAIT_FOR_ANSWER]: 'Wait for the answer to be returned and explore it. When ready proceed by clicking next.'
     },
-
     fr: {
       [TTYG_ASK_DEFAULT_TITLE]: 'Demander à l\'agent',
-      [EXPLAIN_ANSWER_MORE]: 'Vous pouvez demander à l\'agent comment il a obtenu la réponse en cliquant sur le bouton'
+      [EXPLAIN_ANSWER_MORE]: 'Vous pouvez demander à l\'agent comment il a obtenu la réponse en cliquant sur le bouton',
+      [WAIT_FOR_ANSWER]: 'Attendez que la réponse vous soit renvoyée et explorez-la. Lorsque vous êtes prêt, cliquez sur suivant.'
     }
   }
 };