🔨 Add Kapa.ai widget (AI chatbot) (#14938)

Co-authored-by: Alejandra <[email protected]>

docs/en/docs/css/custom.css

@@ -61,6 +61,10 @@ a.internal-link::after {
   padding-bottom: 2em;
 }
 
+.md-footer-meta .md-social {
+  padding-right: 4rem;
+}
+
 .user-list {
   display: flex;
   flex-wrap: wrap;

docs/en/docs/js/init_kapa_widget.js

@@ -0,0 +1,29 @@
+document.addEventListener("DOMContentLoaded", function () {
+  var script = document.createElement("script");
+  script.src = "https://widget.kapa.ai/kapa-widget.bundle.js";
+  script.setAttribute("data-website-id", "91f47f27-b405-4299-bf5f-a1c0ec07b3cc");
+  script.setAttribute("data-project-name", "FastAPI");
+  script.setAttribute("data-project-color", "#009485");
+  script.setAttribute("data-project-logo", "https://fastapi.tiangolo.com/img/favicon.png");
+  script.setAttribute("data-bot-protection-mechanism", "hcaptcha");
+  script.setAttribute("data-button-height", "3rem");
+  script.setAttribute("data-button-width", "3rem");
+  script.setAttribute("data-button-border-radius", "50%");
+  script.setAttribute("data-button-padding", "0");
+  script.setAttribute("data-button-image", "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E");
+  script.setAttribute("data-button-image-height", "20px");
+  script.setAttribute("data-button-image-width", "20px");
+  script.setAttribute("data-button-text", "Ask AI");
+  script.setAttribute("data-button-text-font-size", "0.5rem");
+  script.setAttribute("data-button-text-font-family", "Roboto, sans-serif");
+  script.setAttribute("data-button-text-color", "#FFFFFF");
+  script.setAttribute("data-modal-border-radius", "0.5rem");
+  script.setAttribute("data-modal-header-bg-color", "#009485");
+  script.setAttribute("data-modal-title", "FastAPI AI Assistant");
+  script.setAttribute("data-modal-title-color", "#FFFFFF");
+  script.setAttribute("data-modal-title-font-family", "Roboto, sans-serif");
+  script.setAttribute("data-modal-example-questions", "How to define a route?,How to validate models?,How to handle responses?,How to deploy FastAPI?");
+  script.setAttribute("data-modal-disclaimer", "AI-generated answers based on FastAPI [documentation](https://fastapi.tiangolo.com/) and [community discussions](https://github.com/fastapi/fastapi/discussions). Always verify important information.");
+  script.async = true;
+  document.head.appendChild(script);
+});

docs/en/mkdocs.yml

@@ -342,5 +342,6 @@ extra_css:
 extra_javascript:
 - js/termynal.js
 - js/custom.js
+- js/init_kapa_widget.js
 hooks:
 - ../../scripts/mkdocs_hooks.py