first

Modules/Chatbot/resources/assets/css/chatbot.css

@@ -0,0 +1,120 @@
+/* Message Styling */
+.message {
+    padding: 8px;
+    margin: 5px 0;
+    border-radius: 10px;
+    max-width: 100%;
+    word-wrap: break-word;
+}
+
+/* User Message (Blue with transparency) */
+.user-message {
+    background-color: rgba(0, 123, 255, 0.2); /* Blue with 70% opacity */
+    color: black;
+    text-align: right;
+    align-self: flex-end;
+}
+
+/* Bot Message (vz-primary with transparency) */
+.bot-message {
+    background-color: rgba(var(--vz-primary-rgb), 0.2); /* Assuming var(--vz-primary-rgb) holds RGB value */
+    color: black;
+    text-align: left;
+    align-self: flex-start;
+}
+
+/* Floating Chatbot Button */
+#chatbot-toggle {
+    position: fixed;
+    bottom: 45px;
+    right: 38px;
+    width: 60px;
+    height: 60px;
+    background-color: var(--vz-primary); /* Using CSS variable */
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease-in-out;
+    z-index: 1000; /* Ensure it's above other elements */
+}
+
+/* Chatbot Container */
+#chatbot-container {
+    position: fixed;
+    bottom: 42px;
+    right: 32px;
+    width: 320px;
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    font-family: Arial, sans-serif;
+    display: none;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: 1000; /* Ensure it floats above the content */
+}
+
+/* Chatbot Header */
+#chatbot-header {
+    background-color: var(--vz-primary);
+    color: white;
+    padding: 10px;
+    text-align: center;
+    font-size: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* Close Button */
+#chatbot-close {
+    font-size: 20px;
+    cursor: pointer;
+}
+
+/* Chatbot Body */
+#chatbot-body {
+    height: 250px;
+    overflow-y: auto;
+    padding: 10px;
+}
+
+/* Input and Send Button Styling */
+#chatbot-input-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-top: 10px;
+    padding: 5px;
+}
+
+#chatbot-input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 20px;
+    outline: none;
+    font-size: 14px;
+    box-sizing: border-box;
+}
+
+#chatbot-send {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: transparent;
+    border: none;
+    color: var(--vz-primary);
+    font-size: 18px;
+    cursor: pointer;
+    z-index: 10;
+}
+

Modules/Chatbot/resources/assets/js/chatbot.js

@@ -0,0 +1,47 @@
+$(document).ready(function() {
+    // Toggle chatbot visibility
+    $('#chatbot-toggle').click(function() {
+        $('#chatbot-container').fadeIn();
+        $('#chatbot-toggle').hide();
+    });
+
+    // Close chatbot
+    $('#chatbot-close').click(function() {
+        $('#chatbot-container').fadeOut();
+        $('#chatbot-toggle').show();
+    });
+
+    // Send message on button click
+    $('#chatbot-send').click(function() {
+        sendMessage();
+    });
+
+    // Send message on "Enter" key
+    $('#chatbot-input').keypress(function(e) {
+        if (e.which == 13) { 
+            sendMessage();
+        }
+    });
+
+    function sendMessage() {
+        var message = $('#chatbot-input').val().trim();
+        if (message === '') return;
+
+        $('#chatbot-body').append('<div class="message user-message"><strong>You:</strong> ' + message + '</div>');
+        $('#chatbot-input').val('');
+        $('#chatbot-body').scrollTop($('#chatbot-body')[0].scrollHeight);
+
+        $.ajax({
+            url: '{{ route('chatbot.query') }}',
+            type: 'POST',
+            data: { message: message, _token: '{{ csrf_token() }}' },
+            success: function(response) {
+                $('#chatbot-body').append('<div class="message bot-message"><strong>Bot:</strong> ' + response.reply + '</div>');
+                $('#chatbot-body').scrollTop($('#chatbot-body')[0].scrollHeight);
+            },
+            error: function() {
+                $('#chatbot-body').append('<div class="message bot-message"><strong>Bot:</strong> Sorry, something went wrong.</div>');
+            }
+        });
+    }
+});