Skip to content

Commit b2a9ce4

Browse files
bugclerkDjP-iX
bugclerk
and
DjP-iX
authored
PD-1475 / 3.0 / Pd 1475 additional css styling for the docs bot (by DjP-iX) (#3097)
* Empty commit to create PR on github. You should reset it * PD-1475 / 25.04 / Pd 1475 additional css styling for the docs bot (#3090) * Update menu-filetree.html * Update menu.html * Update search-form.html * Update site-header.html * Update menu-filetree.html (cherry picked from commit d4f89c6) * Update en.yaml * Update menu.html --------- Co-authored-by: DjP-iX <[email protected]>
1 parent 9a62c7f commit b2a9ce4

File tree

4 files changed

+110
-14
lines changed

4 files changed

+110
-14
lines changed

‎i18n/en.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
edit_page: Edit page
33

4-
nav_navigation: ""
4+
nav_navigation: "TrueCommand 3.0"
55
nav_tags: Tags
66
nav_more: More
77
nav_top: Back to top

‎layouts/partials/menu.html‎

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,115 @@
11
<nav class="sidebar-fixed">
2+
<h2>{{ i18n "nav_navigation" }}</h2>
23
{{ partial "search" . }}
34
{{ partial "search-form" . }}
45

6+
<!-- Static chatbot button -->
7+
<div style="margin-top: 15px; margin-bottom: 10px;">
8+
<button id="chatbot-open-button" style="padding: 10px 20px; background-color: #0095d5; color: white; border: none; cursor: pointer; border-radius: 20px; display: flex; align-items: center; gap: 10px; transition: opacity 0.3s;">
9+
<span id="chatbot-button-icon" style="display: flex; vertical-align: middle;">
10+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="book" class="svg-inline--fa fa-book" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 20px; height: 20px;">
11+
<path fill="currentColor" d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"></path>
12+
</svg>
13+
</span>
14+
<span>AI-Powered Search</span>
15+
</button>
16+
</div>
17+
18+
<style>
19+
#chatbot-open-button:hover {
20+
opacity: 0.8; /* Adjust the opacity for the hover effect */
21+
}
22+
</style>
23+
24+
<!-- Chatbot Initialization Script -->
25+
<script type="text/javascript">
26+
window.DocsBotAI = window.DocsBotAI || {};
27+
let chatbotOpen = false; // Track the open/close state of the chatbot
28+
29+
DocsBotAI.init = function(c) {
30+
return new Promise(function(e, o) {
31+
var t = document.createElement("script");
32+
t.type = "text/javascript";
33+
t.async = true;
34+
t.src = "https://widget.docsbot.ai/chat.js";
35+
var n = document.getElementsByTagName("script")[0];
36+
n.parentNode.insertBefore(t, n);
37+
t.addEventListener("load", function() {
38+
window.DocsBotAI.mount({
39+
id: c.id,
40+
supportCallback: c.supportCallback,
41+
identify: c.identify,
42+
options: c.options,
43+
signature: c.signature
44+
});
45+
46+
// Attach the click event to the static button to toggle open/close
47+
document.getElementById("chatbot-open-button").addEventListener("click", function() {
48+
const iconElement = document.getElementById("chatbot-button-icon");
49+
50+
if (chatbotOpen) {
51+
if (window.DocsBotAI.close) {
52+
window.DocsBotAI.close(); // Close the chatbot
53+
chatbotOpen = false;
54+
55+
// Change to book icon when closed
56+
iconElement.innerHTML = `
57+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="book" class="svg-inline--fa fa-book" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 20px; height: 20px;">
58+
<path fill="currentColor" d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"></path>
59+
</svg>`;
60+
} else {
61+
console.error("Chatbot close method not available.");
62+
}
63+
} else {
64+
if (window.DocsBotAI.open) {
65+
window.DocsBotAI.open(); // Open the chatbot
66+
chatbotOpen = true;
67+
68+
// Change to X icon when open
69+
iconElement.innerHTML = `
70+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="xmark" class="svg-inline--fa fa-xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 20px; height: 20px;">
71+
<path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path>
72+
</svg>`;
73+
} else {
74+
console.error("Chatbot open method not available.");
75+
}
76+
}
77+
});
78+
79+
e(); // Resolve the promise
80+
});
81+
t.addEventListener("error", function(t) {
82+
o(t.message);
83+
});
84+
});
85+
};
86+
87+
DocsBotAI.init({
88+
id: "c6l7vGyugnoP9SSSoNXy/h6qDF4J2h3xfHKO9Nm6r",
89+
options: {
90+
customCSS: `
91+
.docsbot-wrapper {
92+
width: 75%;
93+
max-width: 750px;
94+
position: fixed;
95+
left: 35% !important;
96+
top: 15% !important;
97+
z-index: 1000 !important;
98+
}
99+
.floating-button {
100+
display: none !important;
101+
}
102+
@media (max-width: 1200px) {
103+
.docsbot-wrapper {
104+
left: 15% !important;
105+
top: 15% !important;
106+
}
107+
`,
108+
}
109+
});
110+
</script>
111+
5112
<section class="gdoc-nav--main">
6-
<h2>{{ i18n "nav_navigation" }}</h2>
7113
{{ if .Site.Params.GeekdocMenuBundle }}
8114
{{ partial "menu-bundle" (dict "current" . "source" .Site.Data.menu.main.main) }}
9115
{{ else }}

‎layouts/partials/search-form.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,3 +71,4 @@
7171
name="query"
7272
placeholder="&#Xf002; Search TC 3.0 Docs...">
7373
</form>
74+

‎layouts/partials/site-header.html‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -243,15 +243,4 @@
243243
});
244244
</script>
245245
<!-- End sticky main_navbar -->
246-
<!-- Add DocsBot AI powered search widget -->
247-
<script type="text/javascript">window.DocsBotAI=window.DocsBotAI||{},DocsBotAI.init=function(c){return new Promise(function(e,o){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://widget.docsbot.ai/chat.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n),t.addEventListener("load",function(){window.DocsBotAI.mount({id:c.id,supportCallback:c.supportCallback,identify:c.identify,options:c.options,signature:c.signature});var t;t=function(n){return new Promise(function(e){if(document.querySelector(n))return e(document.querySelector(n));var o=new MutationObserver(function(t){document.querySelector(n)&&(e(document.querySelector(n)),o.disconnect())});o.observe(document.body,{childList:!0,subtree:!0})})},t&&t("#docsbotai-root").then(e).catch(o)}),t.addEventListener("error",function(t){o(t.message)})})};</script>
248-
<script type="text/javascript">
249-
DocsBotAI.init({
250-
id: "c6l7vGyugnoP9SSSoNXy/h6qDF4J2h3xfHKO9Nm6r",
251-
options: {
252-
horizontalMargin: 40,
253-
verticalMargin: 80,
254-
}
255-
});
256-
</script>
257-
<!-- End AI powered search widget embed -->
246+

0 commit comments

Comments
 (0)