From c115a4ccbb1067b44cf782f60e04118e0d139866 Mon Sep 17 00:00:00 2001
From: AnastasiaTWW <61460069+AnastasiaTWW@users.noreply.github.com>
Date: Tue, 14 Apr 2026 21:54:32 +0400
Subject: [PATCH 1/2] integrate basic ask ai by dify

---
 stylesheets/main.html | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/stylesheets/main.html b/stylesheets/main.html
index fce894aa2..c79e2653f 100644
--- a/stylesheets/main.html
+++ b/stylesheets/main.html
@@ -73,6 +73,41 @@
 <!-- Custom front matter -->
 {% block extrahead %}
 
+<script>
+ window.difyChatbotConfig = {
+  token: 'BSvDrRpQGpOLu0I0',
+  baseUrl: 'http://18.144.155.105',
+  inputs: {
+    // You can define the inputs from the Start node here
+    // key is the variable name
+    // e.g.
+    // name: "NAME"
+  },
+  systemVariables: {
+    // user_id: 'YOU CAN DEFINE USER ID HERE',
+    // conversation_id: 'YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID',
+  },
+  userVariables: {
+    // avatar_url: 'YOU CAN DEFINE USER AVATAR URL HERE',
+    // name: 'YOU CAN DEFINE USER NAME HERE',
+  },
+ }
+</script>
+<script
+ src="http://18.144.155.105/embed.min.js"
+ id="BSvDrRpQGpOLu0I0"
+ defer>
+</script>
+<style>
+  #dify-chatbot-bubble-button {
+    background-color: #1C64F2 !important;
+  }
+  #dify-chatbot-bubble-window {
+    width: 24rem !important;
+    height: 40rem !important;
+  }
+</style>
+
 {{ super() }}
 
   {% if config.extra.is_latest or (config.extra.language_lowercase | default("en")) != "en" %}

From 6acb2257f7132e82c535c5c5726e7e7d9b72b92b Mon Sep 17 00:00:00 2001
From: AnastasiaTWW <61460069+AnastasiaTWW@users.noreply.github.com>
Date: Tue, 14 Apr 2026 22:14:20 +0400
Subject: [PATCH 2/2] make ask ai sidebar

---
 stylesheets/main.html | 106 ++++++++++++++++++++++++++++++------------
 1 file changed, 76 insertions(+), 30 deletions(-)

diff --git a/stylesheets/main.html b/stylesheets/main.html
index c79e2653f..7ddfe7392 100644
--- a/stylesheets/main.html
+++ b/stylesheets/main.html
@@ -4,6 +4,23 @@
 
 {{ super() }}
 
+<button id="ask-ai-btn" onclick="toggleAskAI()">Ask AI</button>
+<div id="ask-ai-panel">
+  <div id="ask-ai-panel-header">
+    <span>Ask AI</span>
+    <button id="ask-ai-close" onclick="toggleAskAI()">&times;</button>
+  </div>
+  <iframe id="ask-ai-iframe" src="http://18.144.155.105/chatbot/BSvDrRpQGpOLu0I0"></iframe>
+</div>
+<script>
+  function toggleAskAI() {
+    var panel = document.getElementById('ask-ai-panel');
+    var btn = document.getElementById('ask-ai-btn');
+    panel.classList.toggle('open');
+    btn.classList.toggle('hidden');
+  }
+</script>
+
 {% if page.url not in ["installation/connectors/mulesoft-for-wizard/", "installation/connectors/mulesoft-flex-for-wizard/", "installation/connectors/ibm-api-connect-for-wizard/", "installation/connectors/aws-lambda-for-wizard/", "installation/connectors/cloudflare-for-wizard/", "installation/connectors/fastly-for-wizard/", "installation/connectors/akamai-edgeworkers-for-wizard/", "installation/connectors/azure-api-management-for-wizard/", "installation/connectors/apigee-for-wizard/", "installation/connectors/aws-api-gateway-for-wizard/"] %}
 
 <!-- Hubspot banner -->
@@ -73,38 +90,67 @@
 <!-- Custom front matter -->
 {% block extrahead %}
 
-<script>
- window.difyChatbotConfig = {
-  token: 'BSvDrRpQGpOLu0I0',
-  baseUrl: 'http://18.144.155.105',
-  inputs: {
-    // You can define the inputs from the Start node here
-    // key is the variable name
-    // e.g.
-    // name: "NAME"
-  },
-  systemVariables: {
-    // user_id: 'YOU CAN DEFINE USER ID HERE',
-    // conversation_id: 'YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID',
-  },
-  userVariables: {
-    // avatar_url: 'YOU CAN DEFINE USER AVATAR URL HERE',
-    // name: 'YOU CAN DEFINE USER NAME HERE',
-  },
- }
-</script>
-<script
- src="http://18.144.155.105/embed.min.js"
- id="BSvDrRpQGpOLu0I0"
- defer>
-</script>
 <style>
-  #dify-chatbot-bubble-button {
-    background-color: #1C64F2 !important;
+  #ask-ai-btn {
+    position: fixed;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    background: #1C64F2;
+    color: white;
+    border: none;
+    padding: 12px 8px;
+    cursor: pointer;
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: inherit;
+    border-radius: 8px 0 0 8px;
+    z-index: 9999;
+    letter-spacing: 1px;
+    transition: background 0.2s;
+  }
+  #ask-ai-btn:hover { background: #1554d4; }
+  #ask-ai-btn.hidden { display: none; }
+  #ask-ai-panel {
+    position: fixed;
+    top: 0;
+    right: -420px;
+    width: 420px;
+    height: 100%;
+    background: #fff;
+    box-shadow: -2px 0 12px rgba(0,0,0,0.15);
+    z-index: 10000;
+    transition: right 0.3s ease;
+    display: flex;
+    flex-direction: column;
+  }
+  #ask-ai-panel.open { right: 0; }
+  #ask-ai-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    background: #1C64F2;
+    color: white;
+    font-size: 15px;
+    font-weight: 500;
+    flex-shrink: 0;
+  }
+  #ask-ai-close {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 22px;
+    cursor: pointer;
+    padding: 0 4px;
+    line-height: 1;
   }
-  #dify-chatbot-bubble-window {
-    width: 24rem !important;
-    height: 40rem !important;
+  #ask-ai-close:hover { opacity: 0.8; }
+  #ask-ai-iframe { flex: 1; border: none; width: 100%; }
+  @media (max-width: 768px) {
+    #ask-ai-panel { width: 100%; right: -100%; }
   }
 </style>