Update mkdocs.yml with chatbot configuration and FOSS content

docs/chatbot_widget.css

@@ -0,0 +1,166 @@
+/* chatbot_widget.css */
+
+/* Common Color - Replace with your exact hex code */
+:root {
+    --primary-blue: #4054b4;
+}
+
+/* Chat Icon Button */
+#chat-icon {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    background-color: var(--white); /* Default to white */
+    cursor: pointer;
+    z-index: 1000;
+    transition: transform 0.3s ease, background-color 0.3s ease;
+    padding: 15px;
+    border-radius: 50%;
+    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+/* Set the image for the icon */
+#chat-icon img {
+    width: 40px;
+    height: 40px;
+    object-fit: contain; /* Maintains aspect ratio */
+    background-color: transparent; /* Ensures no extra background */
+    content: url('robot-face.png'); 
+}
+
+/* Chat Container - Responsive */
+#chat-container {
+    display: none;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    width: 30%;
+    max-width: 500px; /* Max width for larger screens */
+    min-width: 300px; /* Min width for smaller screens */
+    height: 60%;
+    max-height: 600px;
+    background: #ffffff;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    overflow: hidden;
+}
+
+/* Chat Header */
+#chat-header {
+    background-color: var(--primary-blue);
+    color: white;
+    padding: 20px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+#chat-close {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 20px;
+    cursor: pointer;
+    transition: transform 0.3s;
+}
+
+#chat-close:hover {
+    transform: rotate(90deg);
+}
+
+/* Chat Body */
+#chat-body {
+    height: calc(100% - 60px);
+    overflow: hidden;
+    background: #ffffff;
+}
+
+/* Chat Frame - Make elastic */
+#chat-frame {
+    border: none;
+    height: 100%;
+    width: 100%;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+}
+
+/* Submit Button (Send Button) */
+.chat-submit-button {
+    background-color: var(--primary-blue);
+    border: none;
+    color: #ffffff;
+    padding: 10px 15px;
+    font-size: 16px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+    margin-left: 10px;
+}
+
+.chat-submit-button:hover {
+    background-color: #324499;
+    transform: scale(1.05);
+}
+
+.chat-submit-button:active {
+    transform: scale(0.95);
+}
+
+/* Dark Mode Styles */
+@media (prefers-color-scheme: dark) {
+    #chat-container {
+        background: #ffffff;
+    }
+
+    #chat-header {
+        background-color: var(--primary-blue);
+        color: #ffffff;
+    }
+
+    #chat-body {
+        background: #ffffff;
+    }
+
+    #chat-close {
+        color: #ffffff;
+    }
+
+    .chat-submit-button {
+        background-color: var(--primary-blue);
+        color: #ffffff;
+    }
+
+    .chat-submit-button:hover {
+        background-color: #324499;
+    }
+}
+
+/* Responsiveness for larger screens */
+@media (min-width: 1200px) {
+    #chat-container {
+        width: 35%;
+    }
+}
+
+/* Responsiveness for smaller screens */
+@media (max-width: 768px) {
+    #chat-container {
+        width: 80%;
+        height: 70%;
+    }
+
+    #chat-icon img {
+        width: 30px;
+        height: 30px;
+    }
+}

docs/chatbot_widget.js

@@ -0,0 +1,33 @@
+// chatbot_widget.js
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Create the chat icon button
+    const chatIcon = document.createElement('div');
+    chatIcon.id = 'chat-icon';
+    chatIcon.innerHTML = `<img src="https://img.icons8.com/fluency/48/000000/chat--v2.png" alt="Chat Icon">`;
+    document.body.appendChild(chatIcon);
+
+    // Create the chat window container
+    const chatContainer = document.createElement('div');
+    chatContainer.id = 'chat-container';
+    chatContainer.innerHTML = `
+        <div id="chat-header">
+            <span>FOSS Chatbot</span>
+            <button id="chat-close">X</button>
+        </div>
+        <div id="chat-body">
+            <iframe src="https://chat-qa.cyverse.org/chatbot1" id="chat-frame" width="100%" height="100%"></iframe>
+        </div>
+    `;
+    document.body.appendChild(chatContainer);
+
+    // Show or hide the chatbot window
+    chatIcon.addEventListener('click', () => {
+        chatContainer.style.display = chatContainer.style.display === 'block' ? 'none' : 'block';
+    });
+
+    // Close the chat window
+    document.getElementById('chat-close').addEventListener('click', () => {
+        chatContainer.style.display = 'none';
+    });
+});

docs/overrides/iframechatbot.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chatbot</title>
+    <style>
+        /* Add your CSS here */
+        .chat-icon {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 50px;
+            height: 50px;
+            background-color: #0085C3;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            font-size: 24px;
+            cursor: pointer;
+            z-index: 1000;
+        }
+
+        .chat-popup {
+            display: none;
+            position: fixed;
+            bottom: 80px;
+            right: 20px;
+            width: 350px;
+            height: 500px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            z-index: 1000;
+            background-color: #FFFFFF; /* Add this line */
+        }
+
+        .chat-popup iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+            border-radius: 5%;
+        }
+
+        .chat-popup .close-btn {
+            position: absolute;
+            top: 1px;
+            right: 1px;
+            background-color: red;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 25px;
+            height: 25px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            z-index: 1001;
+        }
+    </style>
+</head>
+<body>
+
+<div class="chat-icon" id="chatIcon">💬</div>
+<div class="chat-popup" id="chatPopup">
+    <button class="close-btn" id="closeBtn">x</button>
+    <iframe src="https://chat-qa.cyverse.org/chatbot1/" class="custom-iframe"></iframe>
+</div>
+
+<script>
+    // Function to set up event listeners
+    function setUpEventListeners() {
+        const chatIcon = document.getElementById("chatIcon");
+        const chatPopup = document.getElementById("chatPopup");
+        const closeBtn = document.getElementById("closeBtn");
+
+        if (!chatIcon || !chatPopup || !closeBtn) {
+            return;
+        }
+
+        // Function to toggle the chat popup
+        function toggleChatPopup() {
+            const isChatOpen = localStorage.getItem('isChatOpen') === 'true';
+            if (isChatOpen) {
+                chatPopup.style.display = 'block';
+            } else {
+                chatPopup.style.display = 'none';
+            }
+        }
+
+        // Event listener for chat icon click
+        chatIcon.addEventListener("click", function() {
+            chatPopup.style.display = 'block';
+            localStorage.setItem('isChatOpen', 'true');
+        });
+
+        // Event listener for close button click
+        closeBtn.addEventListener("click", function() {
+            chatPopup.style.display = 'none';
+            localStorage.setItem('isChatOpen', 'false');
+        });
+
+        // Initialize chat popup state on page load
+        toggleChatPopup();
+    }
+
+    document.addEventListener("DOMContentLoaded", setUpEventListeners);
+
+    // Use MutationObserver to detect changes in the DOM and reapply event listeners
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+                setUpEventListeners();
+            }
+        });
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+</script>
+
+</body>
+</html>