feat: short answer reset button

ai_eval/shortanswer.py

@@ -8,7 +8,7 @@
 from web_fragments.fragment import Fragment
 from xblock.core import XBlock
 from xblock.exceptions import JsonHandlerError
-from xblock.fields import Integer, String, Scope
+from xblock.fields import Boolean, Integer, String, Scope
 from xblock.validation import ValidationMessage
 
 from .llm import get_llm_response
@@ -37,7 +37,17 @@ class ShortAnswerAIEvalXBlock(AIEvalXBlock):
         default=3,
     )
 
-    editable_fields = AIEvalXBlock.editable_fields + ("max_responses",)
+    allow_reset = Boolean(
+        display_name=_("Allow reset"),
+        help=_("Allow the learner to reset the chat"),
+        scope=Scope.settings,
+        default=False,
+    )
+
+    editable_fields = AIEvalXBlock.editable_fields + (
+        "max_responses",
+        "allow_reset",
+    )
 
     def validate_field_data(self, validation, data):
         """
@@ -132,6 +142,16 @@ def get_response(self, data, suffix=""):  # pylint: disable=unused-argument
 
         raise JsonHandlerError(500, "A probem occured. The LLM sent an empty response.")
 
+    @XBlock.json_handler
+    def reset(self, data, suffix=""):
+        """
+        Reset the Xblock.
+        """
+        if not self.allow_reset:
+            raise JsonHandlerError(403, "Reset is disabled.")
+        self.messages = {self.USER_KEY: [], self.LLM_KEY: []}
+        return {}
+
     @staticmethod
     def workbench_scenarios():
         """A canned scenario for display in the workbench."""

ai_eval/static/css/shortanswer.css

@@ -55,26 +55,36 @@
 .submit-row .user-input {
   flex: 8;
   height: auto;
-  margin-right: 10px;
   border: 1px solid gray;
   border-radius: 5px;
   overflow: auto;
   max-height: 200px;
   resize: none;
 }
 
-.submit-row #submit-button {
+#submit-button, #reset-button {
   flex: 1;
   height: fit-content;
   text-align: center;
   padding: 10px 0;
   margin-left: auto;
-  background-color: #00262b;
-  color: white;
   border-radius: 5px;
   border: none;
   cursor: pointer;
 }
+
+#submit-button {
+  background-color: #00262b;
+  color: white;
+  margin-left: 10px;
+}
+
+#reset-button {
+  border: 1px solid;
+  color: #00262b;
+  margin-right: 10px;
+}
+
 .submit-row .disabled-btn {
   opacity: 0.8;
   cursor: not-allowed !important;

ai_eval/static/js/src/shortanswer.js

@@ -1,12 +1,14 @@
 /* Javascript for ShortAnswerAIEvalXBlock. */
 function ShortAnswerAIEvalXBlock(runtime, element, data) {
   const handlerUrl = runtime.handlerUrl(element, "get_response");
+  const resetHandlerURL = runtime.handlerUrl(element, "reset");
 
   loadMarkedInIframe(data.marked_html);
 
   $(function () {
     const spinner = $(".message-spinner", element);
     const spinnnerContainer = $("#chat-spinner-container", element);
+    const resetButton = $("#reset-button", element);
     const submitButton = $("#submit-button", element);
     const userInput = $(".user-input", element);
     const userInputElem = userInput[0];
@@ -46,6 +48,25 @@ function ShortAnswerAIEvalXBlock(runtime, element, data) {
 
     submitButton.click(getResponse);
 
+    resetButton.click(() => {
+      if (!resetButton.hasClass("disabled-btn")) {
+        $.ajax({
+          url: resetHandlerURL,
+          method: "POST",
+          data: JSON.stringify({}),
+          success: function (data) {
+            spinnnerContainer.prevAll('.chat-message-container').remove();
+            resetButton.addClass("disabled-btn");
+            enableInput();
+          },
+          error: function(xhr, status, error) {
+            console.error('Error:', error);
+            alert("A problem occured during reset.");
+          }
+        });
+      }
+    });
+
     function disableInput() {
       userInput.prop("disabled", true);
       userInput.removeAttr("placeholder");
@@ -74,6 +95,7 @@ function ShortAnswerAIEvalXBlock(runtime, element, data) {
       for (let i = 0; i < data.messages.USER.length; i++) {
         insertUserMessage(data.messages.USER[i]);
         insertAIMessage(data.messages.LLM[i]);
+        resetButton.removeClass("disabled-btn");
       }
       if (
         data.messages.USER.length &&
@@ -88,6 +110,7 @@ function ShortAnswerAIEvalXBlock(runtime, element, data) {
         $(` <div class="chat-message-container">
                 <div class="chat-message user-answer">${MarkdownToHTML(msg)}</div>
       </div>`).insertBefore(spinnnerContainer);
+        resetButton.removeClass("disabled-btn");
       }
     }
 
@@ -96,6 +119,7 @@ function ShortAnswerAIEvalXBlock(runtime, element, data) {
         $(` <div class="chat-message-container">
                 <div class="chat-message ai-eval">${MarkdownToHTML(msg)}</div>
       </div>`).insertBefore(spinnnerContainer);
+        resetButton.removeClass("disabled-btn");
       }
     }
     function deleteLastMessage() {

ai_eval/templates/shortanswer.html

@@ -19,6 +19,9 @@
             </div>
         </div>
         <div class="submit-row">
+            {% if self.allow_reset %}
+                <span id="reset-button" class="disabled-btn">Reset chat</span>
+            {% endif %}
             <textarea class="user-input" rows="1" placeholder="Type your answer here" maxlength="1000"></textarea>
             <span id="submit-button">Submit <i class="fa fa-paper-plane"></i></span>
         </div>

ai_eval/tests/test_ai_eval.py

@@ -3,6 +3,7 @@
 """
 
 import unittest
+from xblock.exceptions import JsonHandlerError
 from xblock.field_data import DictFieldData
 from xblock.test.toy_runtime import ToyRuntime
 from ai_eval import CodingAIEvalXBlock, ShortAnswerAIEvalXBlock
@@ -39,17 +40,48 @@ def test_basics_student_view(self):
 class TestShortAnswerAIEvalXBlock(unittest.TestCase):
     """Tests for ShortAnswerAIEvalXBlock"""
 
+    data = {
+        "question": "ca va?",
+        "messages": {"USER": [], "LLM": []},
+        "max_responses": 3,
+        "marked_html": (
+            '<!doctype html>\n<html lang="en">\n<head></head>\n<body>\n'
+            '    <script type="text/javascript" '
+            'src="https://cdnjs.cloudflare.com'
+            '/ajax/libs/marked/13.0.2/marked.min.js"></script>\n'
+            '</body>\n</html>'
+        ),
+    }
+
     def test_basics_student_view(self):
         """Test the basic view loads."""
+        block = ShortAnswerAIEvalXBlock(
+            ToyRuntime(),
+            DictFieldData(self.data),
+            None,
+        )
+        frag = block.student_view()
+        self.assertEqual(frag.json_init_args, self.data)
+        self.assertIn('<div class="shortanswer_block">', frag.content)
+
+    def test_reset(self):
+        """Test the reset function."""
         data = {
-            "question": "ca va?",
-            "messages": {"USER": [], "LLM": []},
-            "max_responses": 3,
-            "marked_html": '<!doctype html>\n<html lang="en">\n<head></head>\n<body>\n    <script '
-            'type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/marked/13.0.2/marked'
-            '.min.js"></script>\n</body>\n</html>',
+            **self.data,
+            "allow_reset": True,
+            "messages": {"USER": ["Hello"], "LLM": ["Hello"]},
         }
         block = ShortAnswerAIEvalXBlock(ToyRuntime(), DictFieldData(data), None)
-        frag = block.student_view()
-        self.assertEqual(data, frag.json_init_args)
-        self.assertIn('<div class="shortanswer_block">', frag.content)
+        block.reset.__wrapped__(block, data={})
+        self.assertEqual(block.messages, {"USER": [], "LLM": []})
+
+    def test_reset_forbidden(self):
+        """Test the reset function."""
+        data = {
+            **self.data,
+            "messages": {"USER": ["Hello"], "LLM": ["Hello"]},
+        }
+        block = ShortAnswerAIEvalXBlock(ToyRuntime(), DictFieldData(data), None)
+        with self.assertRaises(JsonHandlerError):
+            block.reset.__wrapped__(block, data={})
+        self.assertEqual(block.messages, {"USER": ["Hello"], "LLM": ["Hello"]})