Proyectos de Subversion Moodle

// This file is part of Moodle - http://moodle.org/

//

// Moodle is free software: you can redistribute it and/or modify

// it under the terms of the GNU General Public License as published by

// the Free Software Foundation, either version 3 of the License, or

// (at your option) any later version.

//

// Moodle is distributed in the hope that it will be useful,

// but WITHOUT ANY WARRANTY; without even the implied warranty of

// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

// GNU General Public License for more details.

//

// You should have received a copy of the GNU General Public License

// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**

 * Module to load and render the tools for the AI assist plugin.

 *

 * @module     aiplacement_courseassist/placement

 * @copyright  2024 Huong Nguyen <huongnv13@gmail.com>

 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 */

import Templates from 'core/templates';

import Ajax from 'core/ajax';

import 'core/copy_to_clipboard';

import Notification from 'core/notification';

import Selectors from 'aiplacement_courseassist/selectors';

import Policy from 'core_ai/policy';

import AIHelper from 'core_ai/helper';

import DrawerEvents from 'core/drawer_events';

import {subscribe} from 'core/pubsub';

import * as MessageDrawerHelper from 'core_message/message_drawer_helper';

import {getString} from 'core/str';

import * as FocusLock from 'core/local/aria/focuslock';

import {isSmall} from "core/pagehelpers";

const AICourseAssist = class {

    /**

     * The user ID.

     * @type {Integer}

     */

    userId;

    /**

     * The context ID.

     * @type {Integer}

     */

    contextId;

    /**

     * Constructor.

     * @param {Integer} userId The user ID.

     * @param {Integer} contextId The context ID.

     */

    constructor(userId, contextId) {

        this.userId = userId;

        this.contextId = contextId;

        this.aiDrawerElement = document.querySelector(Selectors.ELEMENTS.AIDRAWER);

        this.aiDrawerBodyElement = document.querySelector(Selectors.ELEMENTS.AIDRAWER_BODY);

        this.pageElement = document.querySelector(Selectors.ELEMENTS.PAGE);

        this.jumpToElement = document.querySelector(Selectors.ELEMENTS.JUMPTO);

        this.actionElement = document.querySelector(Selectors.ELEMENTS.ACTION);

        this.aiDrawerCloseElement = this.aiDrawerElement.querySelector(Selectors.ELEMENTS.AIDRAWER_CLOSE);

        this.lastAction = '';

        this.responses = new Map();

        this.isDrawerFocusLocked = false;

        this.registerEventListeners();

    }

    /**

     * Register event listeners.

     */

    registerEventListeners() {

        document.addEventListener('click', async(e) => {

            // Display summarise.

            const summariseAction = e.target.closest(Selectors.ACTIONS.SUMMARY);

            if (summariseAction) {

                e.preventDefault();

                this.openAIDrawer();

                this.lastAction = 'summarise';

                this.actionElement.focus();

                const isPolicyAccepted = await this.isPolicyAccepted();

                if (!isPolicyAccepted) {

                    // Display policy.

                    this.displayPolicy();

                    return;

                }

                this.displayAction(this.lastAction);

            }

            // Display explain.

            const explainAction = e.target.closest(Selectors.ACTIONS.EXPLAIN);

            if (explainAction) {

                e.preventDefault();

                this.openAIDrawer();

                this.lastAction = 'explain';

                this.actionElement.focus();

                const isPolicyAccepted = await this.isPolicyAccepted();

                if (!isPolicyAccepted) {

                    // Display policy.

                    this.displayPolicy();

                    return;

                }

                this.displayAction(this.lastAction);

            }

            // Close AI drawer.

            const closeAiDrawer = e.target.closest(Selectors.ELEMENTS.AIDRAWER_CLOSE);

            if (closeAiDrawer) {

                e.preventDefault();

                this.closeAIDrawer();

            }

        });

        document.addEventListener('keydown', e => {

            if (this.isAIDrawerOpen() && e.key === 'Escape') {

                this.closeAIDrawer();

            }

        });

        // Close AI drawer if message drawer is shown.

        subscribe(DrawerEvents.DRAWER_SHOWN, () => {

            if (this.isAIDrawerOpen()) {

                this.closeAIDrawer();

            }

        });

        // Focus on the AI drawer's close button when the jump-to element is focused.

        this.jumpToElement.addEventListener('focus', () => {

            this.aiDrawerCloseElement.focus();

        });

        // Focus on the action element when the AI drawer container receives focus.

        this.aiDrawerElement.addEventListener('focus', () => {

            this.actionElement.focus();

        });

        // Remove active from the action element when it loses focus.

        this.actionElement.addEventListener('blur', () => {

            this.actionElement.classList.remove('active');

        });

    }

    /**

     * Register event listeners for the policy.

     */

    registerPolicyEventListeners() {

        const acceptAction = document.querySelector(Selectors.ACTIONS.ACCEPT);

        const declineAction = document.querySelector(Selectors.ACTIONS.DECLINE);

        if (acceptAction && this.lastAction.length) {

            acceptAction.addEventListener('click', (e) => {

                e.preventDefault();

                this.acceptPolicy().then(() => {

                    return this.displayAction(this.lastAction);

                }).catch(Notification.exception);

            });

        }

        if (declineAction) {

            declineAction.addEventListener('click', (e) => {

                e.preventDefault();

                this.closeAIDrawer();

            });

        }

    }

    /**

     * Register event listeners for the error.

     */

    registerErrorEventListeners() {

        const retryAction = document.querySelector(Selectors.ACTIONS.RETRY);

        if (retryAction && this.lastAction.length) {

            retryAction.addEventListener('click', (e) => {

                e.preventDefault();

                this.displayAction(this.lastAction);

            });

        }

    }

    /**

     * Register event listeners for the responses.

     */

    registerResponseEventListeners() {

        // Get all regenerate action buttons (one per response in the AI drawer).

        const regenerateActions = document.querySelectorAll(Selectors.ACTIONS.REGENERATE);

        // Add event listeners for each regenerate action.

        regenerateActions.forEach(regenerateAction => {

            const responseElement = regenerateAction.closest(Selectors.ELEMENTS.RESPONSE);

            if (regenerateAction && responseElement) {

                // Get the action that this response is associated with.

                const actionPerformed = responseElement.getAttribute('data-action-performed');

                regenerateAction.addEventListener('click', (e) => {

                    e.preventDefault();

                    // Remove the old response before displaying the new one.

                    this.removeResponseFromStack(actionPerformed);

                    this.displayAction(actionPerformed);

                });

            }

        });

    }

    registerLoadingEventListeners() {

        const cancelAction = document.querySelector(Selectors.ACTIONS.CANCEL);

        if (cancelAction) {

            cancelAction.addEventListener('click', (e) => {

                e.preventDefault();

                this.setRequestCancelled();

                this.toggleAIDrawer();

                this.removeResponseFromStack('loading');

                // Refresh the response stack to avoid false indication of loading.

                const responses = this.getResponseStack();

                this.aiDrawerBodyElement.innerHTML = responses;

            });

        }

    }

    /**

     * Check if the AI drawer is open.

     * @return {boolean} True if the AI drawer is open, false otherwise.

     */

    isAIDrawerOpen() {

        return this.aiDrawerElement.classList.contains('show');

    }

    /**

     * Check if the request is cancelled.

     * @return {boolean} True if the request is cancelled, false otherwise.

     */

    isRequestCancelled() {

        return this.aiDrawerBodyElement.dataset.cancelled === '1';

    }

    setRequestCancelled() {

        this.aiDrawerBodyElement.dataset.cancelled = '1';

    }

    /**

     * Open the AI drawer.

     */

    openAIDrawer() {

        // Close message drawer if it is shown.

        MessageDrawerHelper.hide();

        this.aiDrawerElement.classList.add('show');

        this.aiDrawerElement.setAttribute('tabindex', 0);

        this.aiDrawerBodyElement.setAttribute('aria-live', 'polite');

        if (!this.pageElement.classList.contains('show-drawer-right')) {

            this.addPadding();

        }

        this.jumpToElement.setAttribute('tabindex', 0);

        this.jumpToElement.focus();

        // If the AI drawer is opened on a small screen, we need to trap the focus tab within the AI drawer.

        if (isSmall()) {

            FocusLock.trapFocus(this.aiDrawerElement);

            this.aiDrawerElement.setAttribute('aria-modal', 'true');

            this.aiDrawerElement.setAttribute('role', 'dialog');

            this.isDrawerFocusLocked = true;

        }

    }

    /**

     * Close the AI drawer.

     */

    closeAIDrawer() {

        // Untrap focus if it was locked.

        if (this.isDrawerFocusLocked) {

            FocusLock.untrapFocus();

            this.aiDrawerElement.removeAttribute('aria-modal');

            this.aiDrawerElement.setAttribute('role', 'region');

        }

        this.aiDrawerElement.classList.remove('show');

        this.aiDrawerElement.setAttribute('tabindex', -1);

        this.aiDrawerBodyElement.removeAttribute('aria-live');

        if (this.pageElement.classList.contains('show-drawer-right') && this.aiDrawerBodyElement.dataset.removepadding === '1') {

            this.removePadding();

        }

        this.jumpToElement.setAttribute('tabindex', -1);

        // We can enforce a focus-visible state on the focus element using element.focus({focusVisible: true}).

        // Unfortunately, this feature isn't supported in all browsers, only Firefox provides support for it.

        // Therefore, we will apply the active class to the action element and set focus on it.

        // This action will make the action element appear focused.

        // When the action element loses focus,

        // we will remove the active class at {@see registerEventListeners()}

        this.actionElement.classList.add('active');

        this.actionElement.focus();

    }

    /**

     * Toggle the AI drawer.

     */

    toggleAIDrawer() {

        if (this.isAIDrawerOpen()) {

            this.closeAIDrawer();

        } else {

            this.openAIDrawer();

        }

    }

    /**

     * Add padding to the page to make space for the AI drawer.

     */

    addPadding() {

        this.pageElement.classList.add('show-drawer-right');

        this.aiDrawerBodyElement.dataset.removepadding = '1';

    }

    /**

     * Remove padding from the page.

     */

    removePadding() {

        this.pageElement.classList.remove('show-drawer-right');

        this.aiDrawerBodyElement.dataset.removepadding = '0';

    }

    /**

     * Get important params related to the action.

     * @param {string} action The action to use.

     * @returns {object} The params to use for the action.

     */

    async getParamsForAction(action) {

        let params = {};

        switch (action) {

            case 'summarise':

                params.method = 'aiplacement_courseassist_summarise_text';

                params.heading = await getString('aisummary', 'aiplacement_courseassist');

                break;

            case 'explain':

                params.method = 'aiplacement_courseassist_explain_text';

                params.heading = await getString('aiexplain', 'aiplacement_courseassist');

                break;

        }

        return params;

    }

    /**

     * Check if the policy is accepted.

     * @return {bool} True if the policy is accepted, false otherwise.

     */

    async isPolicyAccepted() {

        return await Policy.getPolicyStatus(this.userId);

    }

    /**

     * Accept the policy.

     * @return {Promise<Object>}

     */

    acceptPolicy() {

        return Policy.acceptPolicy();

    }

    /**

     * Check if the AI drawer has already generated content for a particular action.

     * @param {string} action The action to check.

     * @return {boolean} True if the AI drawer has generated content, false otherwise.

     */

    hasGeneratedContent(action) {

        return this.responses.has(action);

    }

    /**

     * Display the policy.

     */

    displayPolicy() {

        Templates.render('core_ai/policyblock', {}).then((html) => {

            this.aiDrawerBodyElement.innerHTML = html;

            this.registerPolicyEventListeners();

            return;

        }).catch(Notification.exception);

    }

    /**

     * Display the loading spinner.

     */

    displayLoading() {

        Templates.render('aiplacement_courseassist/loading', {}).then((html) => {

            this.addResponseToStack('loading', html);

            const responses = this.getResponseStack();

            this.aiDrawerBodyElement.innerHTML = responses;

            this.registerLoadingEventListeners();

            return;

        }).then(() => {

            this.removeResponseFromStack('loading');

            return;

        }).catch(Notification.exception);

    }

    /**

     * Display the action result in the AI drawer.

     * @param {string} action The action to display.

     */

    async displayAction(action) {

        if (this.hasGeneratedContent(action)) {

            // Scroll to generated content.

            const existingReponse = document.querySelector('[data-action-performed="' + action + '"]');

            if (existingReponse) {

                this.aiDrawerBodyElement.scrollTop = existingReponse.offsetTop;

            }

        } else {

            // Display loading spinner.

            this.displayLoading();

            // Clear the drawer to prevent including the previously generated response in the new response prompt.

            this.aiDrawerBodyElement.innerHTML = '';

            const params = await this.getParamsForAction(action);

            const request = {

                methodname: params.method,

                args: {

                    contextid: this.contextId,

                    prompttext: this.getTextContent(),

                }

            };

            try {

                const responseObj = await Ajax.call([request])[0];

                if (responseObj.error) {

                    this.displayError();

                    return;

                } else {

                    if (!this.isRequestCancelled()) {

                        // Perform replacements on the generated context to ensure it is formatted correctly.

                        const generatedContent = AIHelper.formatResponse(responseObj.generatedcontent);

                        this.displayResponse(generatedContent, action);

                        return;

                    } else {

                        this.aiDrawerBodyElement.dataset.cancelled = '0';

                    }

                }

            } catch (error) {

                window.console.log(error);

                this.displayError();

            }

        }

    }

    /**

     * Add the HTML response to the response stack.

     * The stack will be used to display all responses in the AI drawer.

     * @param {String} action The action key.

     * @param {String} html The HTML to store.

     */

    addResponseToStack(action, html) {

        this.responses.set(action, html);

    }

    /**

     * Remove a stored response, allowing for a regenerated one.

     * @param {String} action The action key.

     */

    removeResponseFromStack(action) {

        if (this.responses.has(action)) {

            this.responses.delete(action);

        }

    }

    /**

     * Return a stack of HTML responses.

     * @return {String} HTML responses.

     */

    getResponseStack() {

        let stack = '';

        // Reverse to get newest first.

        const responses = [...this.responses.values()].reverse();

        for (const response of responses) {

            stack += response;

        }

        return stack;

    }

    /**

     * Display the responses.

     * @param {String} content The content to display.

     * @param {String} action The action used.

     */

    async displayResponse(content, action) {

        const params = await this.getParamsForAction(action);

        const args = {

            content: content,

            heading: params.heading,

            action: action,

        };

        Templates.render('aiplacement_courseassist/response', args).then((html) => {

            this.addResponseToStack(action, html);

            const responses = this.getResponseStack();

            this.aiDrawerBodyElement.innerHTML = responses;

            this.registerResponseEventListeners();

            return;

        }).catch(Notification.exception);

    }

    /**

     * Display the error.

     */

    displayError() {

        Templates.render('aiplacement_courseassist/error', {}).then((html) => {

            this.addResponseToStack('error', html);

            const responses = this.getResponseStack();

            this.aiDrawerBodyElement.innerHTML = responses;

            this.registerErrorEventListeners();

            return;

        }).then(() => {

            this.removeResponseFromStack('error');

            return;

        }).catch(Notification.exception);

    }

    /**

     * Get the text content of the main region.

     * @return {String} The text content.

     */

    getTextContent() {

        const mainRegion = document.querySelector(Selectors.ELEMENTS.MAIN_REGION);

        return mainRegion.innerText || mainRegion.textContent;

    }

};

export default AICourseAssist;