manage values, save and retrieve, handlers

mitodl · Nov 21, 2024 · ad09777 · ad09777
1 parent 0ff791f
commit ad09777
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 33 deletions.
diff --git a/src/ol_openedx_chat/block.py b/src/ol_openedx_chat/block.py
@@ -3,7 +3,8 @@
 from django.utils.translation import gettext_lazy as _
 from ol_openedx_chat.utils import is_aside_applicable_to_block
 from web_fragments.fragment import Fragment
-from xblock.core import XBlockAside
+from webob.response import Response
+from xblock.core import XBlock, XBlockAside
 from xblock.fields import Boolean, Scope, String
 from xmodule.x_module import AUTHOR_VIEW, STUDENT_VIEW
 
@@ -40,19 +41,19 @@ class OLChatAside(XBlockAside):
     enabled = Boolean(
         display_name=_("Open Learning Chat enabled status"),
         default=False,
-        scope=Scope.settings,
+        scope=Scope.content,
         help=_("Indicates whether or not Open Learning chat is enabled for a block"),
     )
     prompt_text = String(
         display_name=_("Open Learning Chat Prompt text"),
         default="",
-        scope=Scope.settings,
+        scope=Scope.content,
         help=_("Saves the prompt hint text for chat in a block"),
     )
     selected_gpt_model = String(
         display_name=_("Open Learning Chat selected GPT model"),
         default="",
-        scope=Scope.settings,
+        scope=Scope.content,
         help=_("Saves the selected GPT model for a block"),
     )
 
@@ -67,7 +68,8 @@ def student_view_aside(self, block, context=None):
         # This is a workaround for those blocks which do not have has_author_view=True
         # in them in edx code because when a block does not define has_author_view=True
         # in it, the only view that gets rendered is student_view in place of
-        # Author view.
+        # author view.
+
         if getattr(self.runtime, "is_author_mode", False):
             return self.author_view_aside(block, context)
 
@@ -81,8 +83,19 @@ def author_view_aside(self, block, context=None):  # noqa: ARG002
         Renders the aside contents for the author view
         """  # noqa: D401
         fragment = Fragment("")
-        fragment.add_content(render_template("static/html/studio_view.html"))
+        fragment.add_content(
+            render_template(
+                "static/html/studio_view.html",
+                {
+                    "is_enabled": self.enabled,
+                    "prompt_hint": self.prompt_text,
+                    "gpt_model": self.selected_gpt_model,
+                },
+            )
+        )
         fragment.add_css(get_resource_bytes("static/css/studio.css"))
+        fragment.add_javascript(get_resource_bytes("static/js/studio.js"))
+        fragment.initialize_js("OLChatInit")
         return fragment
 
     @classmethod
@@ -96,3 +109,19 @@ def should_apply_to_block(cls, block):
         different ways.
         """  # noqa: D401
         return is_aside_applicable_to_block(block=block)
+
+    @XBlock.handler
+    def update_chat_config(self, request, suffix=""):  # noqa: ARG002
+        """Update the chat configurations"""
+        try:
+            posted_data = request.json
+        except ValueError:
+            return Response("Invalid request body", status=400)
+
+        prompt_text = posted_data.get("prompt")
+        gpt_model = posted_data.get("gpt_model")
+        is_enabled = posted_data.get("is_enabled")
+        self.prompt_text = prompt_text
+        self.selected_gpt_model = gpt_model
+        self.enabled = is_enabled
+        return Response()
diff --git a/src/ol_openedx_chat/constants.py b/src/ol_openedx_chat/constants.py
@@ -1,3 +1,3 @@
 # The dictionary should contain all the block types for which the chat should be
-# applicable If a block has sub-blocks or sub category, that should be added in the list
+# applicable if a block has sub-blocks or sub category, that should be added in the list
 CHAT_APPLICABLE_BLOCKS = ["problem", "video"]
diff --git a/src/ol_openedx_chat/static/html/studio_view.html b/src/ol_openedx_chat/static/html/studio_view.html
@@ -1,28 +1,24 @@
-<body>
+<div class="form-container">
+    <form id="ol-chat-form">
+        <!-- Text Fields -->
+        <label for="prompt_hint">Enter prompt hint:</label>
+        <input type="text" id="prompt_hint" name="prompt_hint" placeholder="Enter prompt text" value="{{ prompt_hint }}" required>
 
-    <div class="form-container">
-        <form id="ol-chat-form">
-            <!-- Text Fields -->
-            <label for="prompt_hint">Enter prompt hint:</label>
-            <input type="text" id="prompt_hint" name="prompt_hint" placeholder="Enter prompt text" required>
+        <!-- Dropdown -->
+        <label for="model">Select an LLM Model:</label>
+        <select id="model_dropdown" name="model" value="{{gpt_model}}" required>
+            <option value="">-- Select an LLM Model --</option>
+            <option {% if gpt_model == 'GPT-4o' %} selected {% endif %}>GPT-4o</option>
+            <option {% if gpt_model == 'gpt-4-turbo' %} selected {% endif %}>gpt-4-turbo</option>
+            <option {% if gpt_model == 'gpt-3.5-turbo' %} selected {% endif %}>gpt-3.5-turbo</option>
+        </select>
 
-            <!-- Dropdown -->
-            <label for="model">Select a Model:</label>
-            <select id="model" name="model" required>
-                <option value="">-- Select a GPT Model --</option>
-                <option value="model1">GPT-4o</option>
-                <option value="model2">gpt-4-turbo</option>
-                <option value="model1">gpt-3.5-turbo</option>
-            </select>
+        <!-- Checkbox -->
+        <div class="checkbox-container">
+            <label><input type="checkbox" id="enabled" name="enabled" {% if is_enabled %} checked {% endif %}/>Enabled</label>
+        </div>
 
-            <!-- Checkbox -->
-            <div class="checkbox-container">
-                <label><input type="checkbox" id="enabled" name="enabled"/>Enabled</label>
-            </div>
-
-            <!-- Save Button -->
-            <button type="submit">Save</button>
-        </form>
-    </div>
-</body>
-</html>
+        <!-- Save Button -->
+        <button type="submit" id="save-chat-config">Save</button>
+    </form>
+</div>
diff --git a/src/ol_openedx_chat/static/js/BUILD b/src/ol_openedx_chat/static/js/BUILD
@@ -1,4 +1,4 @@
 resources(
     name="ol_chat_js",
-    sources=["src_js/*.js","lib/*.js"],
+    sources=["*.js"],
 )
diff --git a/src/ol_openedx_chat/static/js/studio.js b/src/ol_openedx_chat/static/js/studio.js
@@ -0,0 +1,41 @@
+(function($) {
+    'use strict';
+
+    function OpenLearningChatView(runtime, element) {
+        const saveButton = element.querySelector("#save-chat-config");
+
+        const chat_form = element.querySelector("#ol-chat-form")
+        chat_form.addEventListener("submit", function(event) {
+            event.preventDefault();
+            var studioRuntime = new window.StudioRuntime.v1();
+
+            const promptHintField = element.querySelector("#prompt_hint");
+            const modelDropdown = element.querySelector("#model_dropdown");
+            const enabledCheck = element.querySelector("#enabled");
+            // Get the handler URL
+            const handlerUrl = studioRuntime.handlerUrl(element, 'update_chat_config');
+            var dataToPost = {"prompt": promptHintField.value, "gpt_model": modelDropdown.value, "is_enabled": enabledCheck.checked};
+
+            $.ajax({
+                url: handlerUrl,
+                method: 'POST',
+                data: JSON.stringify(dataToPost),
+                contentType: 'application/json; charset=utf-8',
+                success: function (response) {
+                    // Handle successful response
+                    alert("Saved successfully!");
+                },
+                error: function (xhr, status, error) {
+                    // Handle error response
+                    alert("Some Error!!!");
+                }
+            });
+
+        });
+    }
+    function initializeOLChat(runtime, element) {
+        return new OpenLearningChatView(runtime, element);
+    }
+
+    window.OLChatInit = initializeOLChat;
+}($));