fix: use block id to open close chat

mitodl · Nov 22, 2024 · cb94286 · cb94286
1 parent 09f8a7d
commit cb94286
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/src/ol_openedx_chat/block.py b/src/ol_openedx_chat/block.py
@@ -43,7 +43,8 @@ def student_view_aside(self, block, context=None):  # noqa: ARG002
         Renders the aside contents for the student view
         """  # noqa: D401
         fragment = Fragment("")
-        fragment.add_content(render_template("static/html/student_view.html"))
+        breakpoint()
+        fragment.add_content(render_template("static/html/student_view.html", {"block_key": self.scope_ids.usage_id.usage_key.block_id}))
         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")

diff --git a/src/ol_openedx_chat/static/html/student_view.html b/src/ol_openedx_chat/static/html/student_view.html
@@ -1,14 +1,14 @@
 <div>
 <!-- Chat Button -->
-    <div class="chat-button">
+    <div class="chat-button" id="chat-button-{{ block_key }}" data-block-key="{{ block_key }}">
         Help me with this problem
     </div>
 
     <!-- Chat Window -->
-    <div class="chat-window">
+    <div class="chat-window" id="chat-window-{{ block_key }}" data-block-key="{{ block_key }}">
         <div class="chat-header">
             <span>MIT Teaching Assistant</span>
-            <span class="close-chat">&times;</span>
+            <span class="close-chat" id="close-chat-{{ block_key }}" data-block-key="{{ block_key }}">&times;</span>
         </div>
         <div class="chat-body">
             <p class="bot-message">Hi! How can I assist you today?</p>

diff --git a/src/ol_openedx_chat/static/js/ai_chat.js b/src/ol_openedx_chat/static/js/ai_chat.js
@@ -1,13 +1,19 @@
 function AiChatAsideView(runtime, element) {
     $('.chat-button').on('click', function () {
-        $('.chat-window').fadeIn();
-        $('.chat-button').hide();
+        const blockKey = $(this).data("block-key")
+        const chatWindowSelector = '#chat-window-' + blockKey
+        const chatButtonSelector = '#chat-button-' + blockKey
+        $(chatWindowSelector).fadeIn();
+        $(chatButtonSelector).hide();
     });
 
     // Close chat window
     $('.close-chat').on('click', function () {
-        $('.chat-window').fadeOut();
-        $('.chat-button').fadeIn();
+        const blockKey = $(this).data("block-key")
+        const chatWindowSelector = '#chat-window-' + blockKey
+        const chatButtonSelector = '#chat-button-' + blockKey
+        $(chatWindowSelector).fadeOut();
+        $(chatButtonSelector).fadeIn();
     });
 
     // Send message