diff --git a/_resource/overrides/main.html b/_resource/overrides/main.html
index 3f4d035d5..9df00cc69 100644
--- a/_resource/overrides/main.html
+++ b/_resource/overrides/main.html
@@ -32,11 +32,6 @@
{% endblock %}
-{% block scripts %}
-
-{{ super() }}
-{% endblock %}
-
{% block extrahead %}
{{ super() }}
{% set title = config.site_name %}
diff --git a/_resourcepdf/overrides/main.html b/_resourcepdf/overrides/main.html
index f7f27db2b..c19bfc7e5 100644
--- a/_resourcepdf/overrides/main.html
+++ b/_resourcepdf/overrides/main.html
@@ -33,8 +33,8 @@
{% endblock %}
{% block scripts %}
-
{{ super() }}
+
{% endblock %}
{% block extrahead %}
diff --git a/docs/_static/percona-logomark-one-color-dark.png b/docs/_static/percona-logomark-one-color-dark.png
new file mode 100644
index 000000000..28fbf02e9
Binary files /dev/null and b/docs/_static/percona-logomark-one-color-dark.png differ
diff --git a/docs/css/kapa.css b/docs/css/kapa.css
new file mode 100644
index 000000000..c7875bff9
--- /dev/null
+++ b/docs/css/kapa.css
@@ -0,0 +1,64 @@
+button#ask-percona-ai {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ gap: 0.45rem;
+
+ /* Match MkDocs Material search field */
+ height: 1.8rem;
+ padding: 0 0.9rem;
+ margin-left: 0.5rem;
+
+ border: none;
+ border-radius: 0.1rem;
+
+ background: #05469F;
+ color: #B8C8E2;
+
+ box-shadow: var(--md-shadow-z1);
+
+ cursor: pointer;
+
+ font-family: inherit;
+ font-size: 0.8rem;
+ font-weight: 400;
+ line-height: 1;
+
+ white-space: nowrap;
+
+ transition:
+ background-color 0.25s ease,
+ box-shadow 0.25s ease;
+}
+
+button#ask-percona-ai:hover {
+ background: #2E73DC;
+}
+
+button#ask-percona-ai:focus-visible {
+ outline: none;
+ box-shadow:
+ 0 0 0 0.1rem rgba(46, 115, 220, 0.35),
+ var(--md-shadow-z2);
+}
+
+button#ask-percona-ai .percona-star,
+button#ask-percona-ai .percona-text {
+ color: inherit;
+}
+
+button#ask-percona-ai .percona-star {
+ font-size: 0.85rem;
+ line-height: 1;
+}
+
+@media screen and (max-width: 768px) {
+ button#ask-percona-ai {
+ padding: 0 0.75rem;
+ }
+
+ button#ask-percona-ai .percona-text {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/docs/css/landing.css b/docs/css/landing.css
deleted file mode 100644
index df69386e8..000000000
--- a/docs/css/landing.css
+++ /dev/null
@@ -1,301 +0,0 @@
-
-/* Type */
-
-.landing h1,
-.landing h2 {
- font-size: calc(1.5em + 1vw);
- line-height: 1.125;
- text-transform: uppercase;
- letter-spacing: 0;
- margin: 0.5em 0;
-}
-
-/* Layout adjustments */
-
-.md-header, .md-tabs {
- background-color: var(--stone800);
-}
-.landing > :not(:last-child) {
- margin-bottom: 2em;
-}
-/* .md-content__inner {
- display: flex;
- flex-direction: column;
-}
-.md-content__inner > :not(.landing) {
- width: 100%;
- max-width: calc(34.3rem);
- max-width: calc(34.3rem + 1.2rem + 12.1rem);
- align-self: center;
-} */
-[data-grid] [data-banner] {
- flex: 0 1 calc(50% - 1rem);
-}
-
-/* Splash Box */
-
-.splash {
- display: flex;
- position: relative;
- justify-content: space-between;
- line-height: 1.25;
- padding: calc(0.5em + 3%);
- border: 1px solid var(--md-default-fg-color--lightest);
- border-radius: calc(0.5rem + 0.75vw);
- background: linear-gradient(110deg, var(--md-default-bg-color) 33%, var(--md-footer-bg-color--dark) 95%);
- overflow: hidden;
- background-repeat: no-repeat;
-}
-.splash.dark {
- color: var(--white);
- --md-primary-fg-color: var(--stone50);
- --md-accent-fg-color: var(--white);
-}
-.splash.highlight {
- background:
- linear-gradient(
- 110deg,
- rgba(44,50,62,0.9) 10%,
- rgba(44,50,62,0.1) 90%
- ),
- url(../assets/highlight.jpg) center / cover var(--stone800);
- border: none;
- background-repeat: no-repeat;
-}
-.splash.mysql {
- background:
- linear-gradient(
- 110deg,
- rgba(0,0,0,0.2) 33%,
- rgba(0,0,0,0.1) 95%
- ),
- linear-gradient(
- 110deg,
- rgb(14,95,181) 33%,
- rgb(48,209,178) 95%
- );
-}
-.splash.postgresql {
- background:
- linear-gradient(
- 110deg,
- rgba(0,0,0,0.4) 33%,
- rgba(0,0,0,0.1) 95%
- ),
- linear-gradient(
- 110deg,
- rgb(78,91,150) 33%,
- rgb(67,158,255) 95%
- );
-}
-.splash.mongodb {
- background:
- linear-gradient(
- 110deg,
- rgba(0,0,0,0.4) 33%,
- rgba(0,0,0,0.1) 95%
- ),
- linear-gradient(
- 110deg,
- rgb(24,109,73) 33%,
- rgb(48,209,190) 95%
- );
-}
-.splash.operators {
- background:
- linear-gradient(
- 110deg,
- transparent 33%,
- rgba(0,0,0,0.1) 95%
- ),
- linear-gradient(
- 110deg,
- rgb(11,39,140) 33%,
- rgb(20,142,255) 95%
- );
-}
-.splash.header {
- flex-direction: column;
- align-items: flex-start;
- border: none;
- background-repeat: no-repeat;
-}
-
-/* Splash Contents */
-
-.splash > * {
- flex: 0 1 45%;
-}
-.splash h1,
-.splash h2 {
- margin-top: 0;
- margin-bottom: -0.125em;
-}
-.splash > :last-child {
- margin-bottom: 0;
-}
-.splash-intro {
- margin: 0.5rem 0.75rem;
-}
-.splash-links > :not(:last-child) {
- margin-bottom: 1em;
-}
-.splash.dark .md-button {
- border-color: rgba(255, 255, 255, 0.4)
-}
-.splash.dark .md-button:hover {
- border-color: var(--white)
-}
-.splash.dark .md-button--primary,
-.splash.dark .md-button--primary:hover {
- color: var(--stone700);
-}
-.splash.dark .md-button--primary:hover {
- color: var(--stone900);
-}
-.splash.header > * {
- max-width: 30rem;
- z-index: 1;
-}
-.splash.header > :first-child {
- margin: 0;
-}
-.splash.header img {
- display: block;
- position: absolute;
- top: 50%;
- right: 1rem;
- width: 12rem;
- height: 12rem;
- margin: 0;
- transform: translateY(-50%);
- z-index: 0;
-}
-
-/* Splash Card */
-
-a.splash-card {
- display: flex;
- flex-direction: column;
- justify-content: center;
- min-height: 6.75em;
- padding: 0.75rem 0.375rem 0.5rem 4.75rem;
- border: 1px solid var(--md-default-fg-color--lightest);
- border-radius: calc(0.25rem + 0.375vw);
- cursor: pointer;
- text-decoration: none !important;
- color: var(--md-typeset-color);
- position: relative;
- background-color: var(--md-default-bg-color);
- transition: all 0.2s ease-out;
-}
-.splash.highlight a.splash-card {
- color: var(--white);
- background-color: rgba(255, 255, 255, 0.2);
- backdrop-filter: blur(0.75rem);
- border-color: rgba(255,255,255,0.1);
-}
-a.splash-card:hover {
- box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20);
- color: var(--md-typeset-color);
-}
-.splash.highlight a.splash-card:hover {
- background-color: rgba(255, 255, 255, 0.4);
- border-color: rgba(255,255,255,0.2);
- backdrop-filter: blur(1.5rem);
-}
-a.splash-card img {
- display: block;
- position: absolute;
- top: 0.75rem;
- left: 0.75rem;
- width: 3.5rem;
- height: 3.5rem;
- border-radius: 0.25rem;
- float: left;
-}
-.splash-card > * {
- margin: 0 0.25rem 0.25rem 0 !important;
-}
-.splash-card > h3 {
- font-size: 0.875rem;
- margin-bottom: 0.0625rem !important;
-}
-
-/* News elements */
-
-[data-news] {
- display: flex;
- flex-wrap: wrap;
- margin-right: -1rem;
-}
-[data-news] [data-article] {
- flex: 0 1 calc(50% - 1rem);
- display: flex;
- flex-direction: column;
- margin: 0 1rem 1rem 0;
- padding: 0 1rem 1rem 0;
- border-bottom: 1px solid var(--md-default-fg-color--lightest);
-}
-[data-article] > * {
- margin: 0.25rem 0;
-}
-[data-article] > :first-child {
- font-family: var(--fHeading);
- font-size: 0.8rem;
- /* flex-grow: 1; */
-}
-[data-article] > :nth-child(2):not(:last-child) {
- font-size: 0.875em;
- line-height: 1.4;
- display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
- overflow: hidden;
- text-overflow: ellipsis;
- max-height: 2.8em;
- position: relative;
-}
-[data-article] > :nth-child(2):not(:last-child)::after {
- content: "";
- position: absolute;
- display: block;
- right: 0;
- bottom: 0;
- width: 4rem;
- height: 1.4em;
- background: linear-gradient(to right, transparent 0%, var(--md-default-bg-color) 50%);
-}
-[data-article] > :last-child > * {
- margin-right: 1em;
-}
-[data-article] a:link {
- font-family: var(--fHeading);
- font-size: 0.6818rem;
- font-weight: bold;
- text-decoration: none;
-}
-
-/* Conditionals */
-
-@media screen and (max-width: 76.1875em) {
- .md-nav--primary .md-nav__title[for=__drawer],
- .md-nav--primary .md-nav__title {
- background-color: var(--stone800);
- }
-}
-@media screen and (max-width: 55em) {
- .splash.header img {
- right: -2rem;
- opacity: 0.2;
- }
-}
-@media screen and (max-width: 45em) {
- .splash {
- flex-direction: column;
- }
- [data-grid] [data-banner],
- [data-news] [data-article] {
- flex: 1 1 100%;
- }
-}
\ No newline at end of file
diff --git a/docs/css/percona.css b/docs/css/percona.css
deleted file mode 100644
index d0d0e2cd6..000000000
--- a/docs/css/percona.css
+++ /dev/null
@@ -1,69 +0,0 @@
-[data-md-color-scheme="percona-light"] {
- --md-primary-fg-color: #0d184c;
- --md-primary-fg-color--light: #3e4875;
- --md-default-fg-color--lightest: #9096b0;
- --md-primary-fg-color--dark: #080e2e;
- --md-typeset-a-color: #2cbea2;
-}
-[data-md-color-scheme="slate"] {
- --md-primary-fg-color: #0d184c;
- /*
- --md-primary-fg-color--light: #3e4875;
- --md-primary-fg-color--dark: #080e2e;
- */
- --md-typeset-a-color: #2cbea2;
- --md-hue: 210; /* [0, 360] */
- }
-ul li p {
- margin: 0;
-}
-
-.md-clipboard {
- color: #2cbea2;
-}
-
-.md-typeset {
- font-size: .7rem;
- line-height: 1.5;
-}
-
-.md-typeset h1 {
-color: var(--md-default-fg-color--light);
-font-size: 2em;
-font-weight: 400;
-line-height: 1.3;
-margin: 0 0 0.9em;
-}
-
-.md-typeset h2 {
-font-size: 1.5625em;
-line-height: 1.4;
-margin: 1em 0 .54em;
-}
-
-.md-typeset .md-button {
- border: .1rem solid;
- border-radius: 50px;
- color: var(--md-typeset-a-color);
- cursor: pointer;
- display: inline-block;
- font-weight: 700;
- padding: .625em 2em;
- transition:color 125ms, background-color 125ms, border-color 125ms
-}
-
-.md-typeset .md-button--primary {
- background-color: var(--md-typeset-a-color);
- border-color: var(--md-typeset-a-color);
- color:var(--md-primary-bg-color)
-}
-
-.md-typeset .md-button:focus, .md-typeset .md-button:hover {
- background-color: var(--md-accent-fg-color);
- border-color: var(--md-accent-fg-color);
- color:var(--md-accent-bg-color)
-}
-
-/*.git-revision-date-localized-plugin:before {
- content: url('https://api.iconify.design/mdi/clock-edit-outline.svg');
-}*/
diff --git a/docs/js/kapa.js b/docs/js/kapa.js
new file mode 100644
index 000000000..aed6eff21
--- /dev/null
+++ b/docs/js/kapa.js
@@ -0,0 +1,98 @@
+(function () {
+ function createAIButton() {
+ if (document.getElementById("ask-percona-ai")) {
+ return;
+ }
+
+ const search = document.querySelector(".md-search");
+
+ if (!search || !search.parentNode) {
+ return;
+ }
+
+ const button = document.createElement("button");
+
+ button.id = "ask-percona-ai";
+ button.type = "button";
+
+ button.innerHTML = `
+ ✨
+ Ask Percona AI
+ `;
+
+ // Place button AFTER search component
+ search.parentNode.insertBefore(button, search.nextSibling);
+ }
+
+ function loadKapa() {
+ // Prevent duplicate loading
+ if (document.getElementById("kapa-widget-script")) {
+ return;
+ }
+
+ const script = document.createElement("script");
+
+ script.id = "kapa-widget-script";
+
+ script.src = "https://widget.kapa.ai/kapa-widget.bundle.js";
+
+ script.async = true;
+
+ // REQUIRED CONFIG
+ script.setAttribute(
+ "data-website-id",
+ "0e0d55cf-6370-4a6d-a987-96670a7fe935"
+ );
+
+ script.setAttribute(
+ "data-modal-override-open-selector",
+ "#ask-percona-ai"
+ );
+
+ script.setAttribute(
+ "data-button-hide",
+ "true"
+ );
+
+ script.setAttribute(
+ "data-project-name",
+ "Percona"
+ );
+
+ script.setAttribute(
+ "data-modal-title",
+ "Percona AI Assistant"
+ );
+
+ script.setAttribute(
+ "font-size",
+ "0.875rem"
+ );
+
+ // MODAL CONTENT
+ script.setAttribute(
+ "data-modal-disclaimer",
+ "The **Percona AI Assistant** helps you find simple, clear answers to your Percona questions using [official documentation](https://docs.percona.com/), resolved [forum posts](https://forums.percona.com/) and [blog posts](https://www.percona.com/blog/). Note, do not enter personal or confidential information. Before using Percona AI assistant, read the [Legal Notice](https://docs.percona.com/postgresql/18/legal-notice.html)."
+ );
+
+ script.setAttribute(
+ "data-modal-example-questions",
+ "How do I get started with Percona PostgreSQL?, How do I configure backups in Percona PostgreSQL?, How do I enable data encryption in Percona PostgreSQL?, How do I monitor the health of a PostgreSQL deployment?"
+ );
+
+ script.setAttribute(
+ "data-project-logo",
+ "https://docs.percona.com/postgresql/18/_static/percona-logomark-one-color-dark.png"
+ );
+
+ document.head.appendChild(script);
+ }
+
+ createAIButton();
+ loadKapa();
+
+ document.addEventListener("navigation.instant", () => {
+ createAIButton();
+ loadKapa();
+ });
+})();
\ No newline at end of file
diff --git a/docs/legal-notice.md b/docs/legal-notice.md
new file mode 100644
index 000000000..0f99583b8
--- /dev/null
+++ b/docs/legal-notice.md
@@ -0,0 +1,3 @@
+# Legal Notice
+
+You are interacting with an AI-powered chatbot that provides automated responses for general information about our IT services and software. Responses may be inaccurate or incomplete and do not constitute professional or contractual advice. Do not submit personal data, confidential information, credentials, or other sensitive information through this chat. Conversations may be logged and processed to improve our services in accordance with our [Privacy Policy](https://www.percona.com/privacy-policy#h.c033wws8ytgb) and applicable laws, including the GDPR. If you require assistance, please contact a [human representative](https://www.percona.com/about/contact).
diff --git a/mkdocs-base.yml b/mkdocs-base.yml
index 06ce4d280..7d8bc509f 100644
--- a/mkdocs-base.yml
+++ b/mkdocs-base.yml
@@ -66,12 +66,14 @@ extra_css:
- css/landing.css
- css/postgresql.css
- css/rating.css
+ - css/kapa.css
extra_javascript:
- js/version-select.js
- js/promptremover.js
- js/consent.js
- js/rating.js
+ - js/kapa.js
markdown_extensions:
attr_list: {}
@@ -233,4 +235,5 @@ nav:
- Licensing: licensing.md
- Versioning: versioning.md
- Trademark policy: trademark-policy.md
+ - legal-notice.md
diff --git a/mkdocs.yml b/mkdocs.yml
index 2e7088b9d..7011610ef 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -87,3 +87,4 @@ nav:
- Licensing: licensing.md
- Versioning: versioning.md
- Trademark policy: trademark-policy.md
+ - legal-notice.md