feat: add basic lms chat

src/ol_openedx_chat/block.py

@@ -1,7 +1,8 @@
 import pkg_resources
 from django.template import Context, Template
 from web_fragments.fragment import Fragment
-from xblock.core import XBlockAside
+from xblock.core import XBlockAside, XBlock
+from webob.response import Response
 
 BLOCK_PROBLEM_CATEGORY = "problem"
 MULTIPLE_CHOICE_TYPE = "multiplechoiceresponse"
@@ -43,8 +44,19 @@ def student_view_aside(self, block, context=None):  # noqa: ARG002
         """  # noqa: D401
         fragment = Fragment("")
         fragment.add_content(render_template("static/html/student_view.html"))
+        fragment.add_css(get_resource_bytes("static/css/ai_chat.css"))
+        fragment.add_javascript(get_resource_bytes("static/js/ai_chat.js"))
+        fragment.initialize_js("AiChatAsideView")
         return fragment
 
+    @XBlock.handler
+    def mock_handler(self, request=None, suffix=None):
+        print("\n\n\n")
+        print(request.POST)
+        print(suffix)
+        print("\n\n\n")
+        return Response(json_body={"message": "Hello, This your MIT Teaching Assistant. (A Server message)"})
+
     @XBlockAside.aside_for("author_view")
     def author_view_aside(self, block, context=None):  # noqa: ARG002
         """

src/ol_openedx_chat/static/css/ai_chat.css

@@ -0,0 +1,137 @@
+/* General Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Arial, sans-serif;
+}
+
+/* Chat Button */
+.chat-button {
+    position: fixed;
+    bottom: 70px;
+    right: 20px;
+    background-color: #A31F34;
+    color: white;
+    padding: 10px 15px;
+    border-radius: 50px;
+    cursor: pointer;
+    font-size: 16px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Chat Window */
+.chat-window {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 300px;
+    height: 400px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 1001;
+    display: none; /* Initially hidden */
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* Chat Header */
+.chat-header {
+    background-color: #A31F34;
+    color: white;
+    padding: 10px;
+    font-size: 18px;
+    font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* Close Chat Button */
+.close-chat {
+    cursor: pointer;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+/* Chat Body */
+.chat-body {
+    flex: 1; /* Ensures it takes up available space */
+    padding: 10px;
+    overflow-y: auto; /* Enables vertical scrolling */
+    background-color: #f9f9f9;
+    max-height: 300px; /* Limit the height of the chat body */
+    scrollbar-width: thin; /* Custom scrollbar for modern browsers */
+    scrollbar-color: #A31F34 #f9f9f9;
+}
+
+/* Optional: Styling for scrollbars in webkit browsers (Chrome, Safari) */
+.chat-body::-webkit-scrollbar {
+    width: 8px; /* Width of the scrollbar */
+}
+
+.chat-body::-webkit-scrollbar-thumb {
+    background-color: #A31F34; /* Color of the scrollbar thumb */
+    border-radius: 4px; /* Roundness of the scrollbar thumb */
+}
+
+.chat-body::-webkit-scrollbar-track {
+    background-color: #f9f9f9; /* Color of the scrollbar track */
+}
+
+.bot-message {
+    background-color: #e0e0e0;
+    color: #333;
+    padding: 10px;
+    border-radius: 10px;
+    margin: 5px 0;
+    max-width: 80%;
+}
+
+.user-message {
+    background-color: #A31F34;
+    color: white;
+    padding: 10px;
+    border-radius: 10px;
+    margin: 5px 0;
+    max-width: 80%;
+    align-self: flex-end;
+}
+
+/* Chat Footer */
+.chat-footer {
+    display: flex;
+    border-top: 1px solid #ddd;
+    position: absolute;
+    bottom: 0;
+    width: inherit;
+}
+
+.chat-input {
+    flex: 1;
+    border: none;
+    padding: 10px;
+    font-size: 14px;
+}
+
+.chat-input:focus {
+    outline: none;
+}
+
+.send-button {
+    background-color: #A31F34;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.send-button:hover {
+    background-color: #A31F34;
+}

src/ol_openedx_chat/static/html/student_view.html

@@ -1,3 +1,21 @@
 <div>
-      <button type="button" onclick="alert('Hello World!')">Hello World!</button>
+<!-- Chat Button -->
+    <div class="chat-button">
+        Help me with this problem
+    </div>
+
+    <!-- Chat Window -->
+    <div class="chat-window">
+        <div class="chat-header">
+            <span>MIT Teaching Assistant</span>
+            <span class="close-chat">&times;</span>
+        </div>
+        <div class="chat-body">
+            <p class="bot-message">Hi! How can I assist you today?</p>
+        </div>
+        <div class="chat-footer">
+            <input type="text" class="chat-input" placeholder="Type your message here...">
+            <button class="send-button">Send</button>
+        </div>
+    </div>
 </div>

src/ol_openedx_chat/static/js/BUILD

@@ -1,4 +1,4 @@
 resources(
     name="ol_chat_js",
-    sources=["src_js/*.js","lib/*.js"],
+    sources=["*.js"],
 )

src/ol_openedx_chat/static/js/ai_chat.js

@@ -0,0 +1,69 @@
+function AiChatAsideView(runtime, element) {
+    $('.chat-button').on('click', function () {
+        $('.chat-window').fadeIn();
+        $('.chat-button').hide();
+    });
+
+    // Close chat window
+    $('.close-chat').on('click', function () {
+        $('.chat-window').fadeOut();
+        $('.chat-button').fadeIn();
+    });
+
+    // Send message
+    function sendMessage() {
+        const message = $('.chat-input').val().trim();
+        if (message !== '') {
+            // Display user message
+            const userMessage = $('<p>')
+                .addClass('user-message')
+                .text(message);
+            $('.chat-body').append(userMessage);
+
+            // Clear input field
+            $('.chat-input').val('');
+
+            // Simulate bot response
+            // setTimeout(() => {
+            //     const botMessage = $('<p>')
+            //         .addClass('bot-message')
+            //         .text('Thanks for reaching out! We will get back to you shortly.');
+            //     $('.chat-body').append(botMessage);
+            //
+            //     // Scroll to the bottom of the chat body
+            //     $('.chat-body').scrollTop($('.chat-body')[0].scrollHeight);
+            // }, 1000);
+
+            // Scroll to the bottom after user message
+            $('.chat-body').scrollTop($('.chat-body')[0].scrollHeight);
+
+            $.ajax({
+                type: "POST",
+                url: runtime.handlerUrl(element, 'mock_handler'),
+                data: JSON.stringify({"message": message}),
+                success: function(resp) {
+                    console.log(resp.message)
+                    setTimeout(() => {
+                        const botMessage = $('<p>')
+                            .addClass('bot-message')
+                            .text(resp.message);
+                        $('.chat-body').append(botMessage);
+
+                        $('.chat-body').scrollTop($('.chat-body')[0].scrollHeight);
+                        }, 1000
+                    );
+                }
+            });
+        }
+    }
+
+    // Send message on button click
+    $('.send-button').on('click', sendMessage);
+
+    // Send message on pressing Enter
+    $('.chat-input').on('keypress', function (event) {
+        if (event.which === 13) {
+            sendMessage();
+        }
+    });
+}