');
+ $messageContainer.append($message);
+ $messageContainer.insertBefore($spinnerContainer);
+ scrollToBottom();
+ };
+
+ const deleteLastMessage = function() {
+ $spinnerContainer.prev().remove();
+ };
+
+ const fns = {
+ chatboxIndex: chatboxIndex,
+
+ enableReset: function(enable) {
+ const enabled = !$resetButton.prop("disabled");
+ enableControl($resetButton, enable);
+ return enabled;
+ },
+
+ enableInput: function(enable) {
+ const enabled = !$userInput.prop("disabled");
+ enableControl($userInputs, enable);
+ enableControl($submitButtons, enable);
+ enableControl($finishButton, enable);
+ return enabled;
+ },
+
+ insertUserMessage: function(content) {
+ if (content) {
+ insertMessage("user-answer", $(MarkdownToHTML(content)));
+ }
+ },
+
+ insertAIMessage: function(content) {
+ insertMessage("ai-eval", content);
+ },
+ };
+
+ const getResponse = function(inputData) {
+ const inputEnabled = fns.enableInput(false);
+ const resetEnabled = fns.enableReset(false);
+ if (inputData.user_input) {
+ fns.insertUserMessage(inputData.user_input);
+ $userInput.val("");
+ $userInput.trigger("input");
+ }
+ $spinner.show();
+ scrollToBottom();
+ $.ajax({
+ url: handlerUrl,
+ method: "POST",
+ data: JSON.stringify(inputData),
+ success: function(response) {
+ $spinner.hide();
+ fns.enableReset(true);
+ handleResponse.call(fns, response);
+ },
+ error: function() {
+ $spinner.hide();
+ fns.enableReset(resetEnabled);
+ fns.enableInput(inputEnabled);
+ if (inputData.user_input) {
+ deleteLastMessage();
+ $userInput.val(inputData.user_input);
+ $userInput.trigger("input");
+ }
+ alert(gettext("An error has occurred."));
+ },
+ });
+ };
+
+ const handleUserInput = function($input) {
+ if ($input.prop("disabled")) {
+ return;
+ }
+ if (!$input.val()) {
+ return;
+ }
+ getResponse({
+ user_input: $input.val(),
+ character_index: chatboxIndex,
+ });
+ };
+
+ $userInput.keypress(function(event) {
+ if (event.keyCode == 13 && !event.shiftKey) {
+ event.preventDefault();
+ handleUserInput($(this));
+ return false;
+ }
+ });
+
+ $submitButton.click(function() {
+ if ($(this).prop("disabled")) {
+ return;
+ }
+ handleUserInput($userInput);
+ });
+
+ $finishButton.click(function() {
+ if ($(this).prop("disabled")) {
+ return;
+ }
+ getResponse({ force_finish: true });
+ });
+
+ $resetButton.click(function() {
+ if ($(this).prop("disabled")) {
+ return;
+ }
+ const inputEnabled = fns.enableInput(false);
+ const resetEnabled = fns.enableReset(false);
+ $spinner.show();
+ scrollToBottom();
+ $.ajax({
+ url: resetHandlerUrl,
+ method: "POST",
+ data: JSON.stringify({}),
+ success: function() {
+ $spinner.hide();
+ $spinnerContainers.prevAll('.chat-message-container').remove();
+ fns.enableInput(true);
+ handleReset.call(fns);
+ },
+ error: function() {
+ $spinner.hide();
+ fns.enableReset(resetEnabled);
+ fns.enableInput(inputEnabled);
+ alert(gettext("An error has occurred."));
+ },
+ });
+ });
+
+ var initDone = false;
+
+ const init = function() {
+ if (initDone) {
+ return;
+ }
+ initDone = true;
+ handleChatboxInit.call(fns);
+ };
+
+ runFuncAfterLoading(init);
+ }
+
+ for (var i = 0; i < data.characters.length; i++) {
+ const $chatbox = $(`#chat-chatbox-${i}`, element);
+ setupChatbox($chatbox, i);
+ }
+}
diff --git a/ai_eval/static/js/src/coach.js b/ai_eval/static/js/src/coach.js
new file mode 100644
index 0000000..23c70ee
--- /dev/null
+++ b/ai_eval/static/js/src/coach.js
@@ -0,0 +1,675 @@
+/* Coach XBlock redesigned frontend. */
+function CoachAIEvalXBlock(runtime, element, data) {
+ "use strict";
+
+ loadMarkedInIframe(data.marked_html);
+
+ const handlerUrl = runtime.handlerUrl(element, "get_character_response");
+ const resetAllHandlerUrl = runtime.handlerUrl(element, "reset_all");
+ const evaluatorHandlerUrl = runtime.handlerUrl(element, "get_evaluator_response");
+
+ const translate = (typeof gettext === "function") ? gettext : (message) => message;
+ const translatePlural = (typeof ngettext === "function")
+ ? ngettext
+ : (singular, plural, count) => (count === 1 ? singular : plural);
+
+ const $sendButtons = $(".coach-send-button", element);
+ const $inputs = $(".coach-input__textarea", element);
+ const $submitEvaluation = $(".coach-submit-evaluation", element);
+ const $resetAllButton = $(".coach-reset-all", element);
+ const $attemptLabel = $(".coach-attempts__label", element);
+ const $backToReportButton = $(".coach-back-to-report", element);
+ const $globalActions = $(".coach-global-actions", element);
+ const $blockRoot = $(".coach-block", element).first();
+
+ const state = {
+ finished: Boolean(data.finished),
+ attempts: data.attempts || {},
+ mode: "chat",
+ hasReport: false,
+ reportPayload: null,
+ };
+
+ const $layout = $(".coach-layout", element);
+ const $workspacePane = $(".coach-pane--workspace", element);
+ const $workspaceHistory = $(".coach-history[data-character-index='0']", $workspacePane);
+ const $workspaceInputWrapper = $(".coach-input[data-character-index='0']", $workspacePane);
+ const $coachInputWrapper = $(".coach-input[data-character-index='1']", element);
+ const $workspaceActions = $(".coach-actions", $workspacePane);
+ const $attemptsWrapper = $(".coach-attempts", $workspacePane);
+ let $reportCard = null;
+
+ const paneControllers = {};
+ $(".coach-history", element).each(function() {
+ const $history = $(this);
+ const index = parseInt($history.data("character-index"), 10);
+ const pane = $(".coach-messages", this).data("pane");
+ paneControllers[index] = {
+ index,
+ pane,
+ $history,
+ $messages: $(".coach-messages", this),
+ $spinner: $(".coach-spinner", this),
+ busy: false,
+ };
+ paneControllers[index].$spinner.hide();
+ });
+
+ const statusByPane = {
+ workspace: $(".coach-status--workspace", element),
+ coach: $(".coach-status--coach", element),
+ };
+
+ const sanitizeHTML = function(content) {
+ return stripScriptTags(MarkdownToHTML(content || ""));
+ };
+
+ const initialsForName = function(name) {
+ if (!name) {
+ return "";
+ }
+ const parts = name.trim().split(/\s+/).slice(0, 2);
+ return parts.map((part) => part.charAt(0)).join("").toUpperCase();
+ };
+
+ const createAvatarElement = function(character) {
+ const $avatar = $('
');
+ if (character && character.avatar) {
+ const avatarAlt = character && character.name
+ ? translate("Avatar for %(name)s").replace("%(name)s", character.name)
+ : translate("Avatar");
+ const $img = $("![]()
", {
+ src: character.avatar,
+ alt: avatarAlt,
+ });
+ $avatar.append($img);
+ } else if (character && character.name) {
+ $avatar.append($("").text(initialsForName(character.name)));
+ $avatar.attr("aria-hidden", "true");
+ } else {
+ $avatar.addClass("coach-message__avatar--empty");
+ $avatar.attr("aria-hidden", "true");
+ }
+ return $avatar;
+ };
+
+ const buildMessageElement = function(message) {
+ const pane = message.pane || (message.character ? message.character.pane : "workspace");
+ const isUser = Boolean(message.is_user);
+ const character = message.character || {};
+
+ const $message = $('
');
+ $message.addClass(`coach-message--pane-${pane}`);
+ if (isUser) {
+ $message.addClass("coach-message--user");
+ } else {
+ $message.addClass("coach-message--ai");
+ }
+
+ const $contentWrapper = $('
');
+
+ if (!isUser) {
+ $message.append(createAvatarElement(character));
+ const $meta = $('
-
-
-
-