static/js/windowHandler.js

class WindowHandler{
  //en este se hacen los cambios visuales
    constructor(){
        this.chatbox = $("#chat");
        this.template = $('<div class="message"><div><p></p></div></div>');
        this.active = false;
        this.mensaje = "";

        // this.evCtx = document;

        $(document).on("chat:enviar", (event, params) => this.recalcularTextarea());
        $(document).on("chat:limpiar", () => this.limpiarChat());

        $("#input-text").keypress((event) => {
            if (!event.shiftKey && event.keyCode === 13) {
              this.manejadorEnviar();
        }});
        $("#input-send").click(() => this.manejadorEnviar());
        $("#input-text").keypress(() => this.recalcularTextarea());
        $("#input-text").keyup(() => this.recalcularTextarea());
        $("#input-text").keydown(() => this.recalcularTextarea());
        
        
      $("#input-activar").change((event) => this.toggleSwitch(event));
        
        
        
        this.cargarChat(chatH.convesacion);

        $(document).on("precarga:inicio", (event, params) => {
            this.respuestaInicio(params)
        });
        $(document).on("precarga:mensaje", (event, params) => {
            this.respuestaMensaje(params)}
        );
        $(document).on("precarga:fin", (event, params) => {
            this.respuestaFin()
        });
        $(document).on("precarga:error", (event, params) => {
            this.respuestaError(params)
        });
 
    }

    limpiarChat(){
        $("#input-text").val("");
        this.recalcularTextarea();
        $("#chat").html("");
    }

    manejadorEnviar(){
        let mensaje = $("#input-text").val();
        if(mensaje==""){
            return false;
        }
        $(document).trigger("chat:enviar", mensaje);
    }
    
    recalcularTextarea(){
        $(".input-box").css("height", "30px");
        let height = parseInt(($(".input-text").prop('scrollHeight')+15)/15)*15;
        $(".input-box").css("height", height+"px");
        height -= 30;
        $(".chat").css("--textarea", height+"px");  
    }

    procesarTexto(texto){
        let segmentos = texto.split("```");
        let resultado = "";
    
        for(let i=0; i<segmentos.length;i++){
            let textoActual = segmentos[i];
            if(i%2==0){
                resultado += textoActual.replace(/\n/g, "<br>").replace(/`(.*?)`/gm, "<b>$1</b>");
            }else{
                let temp = textoActual.split("\n",1);
                resultado += "<pre><code class='language-";
                resultado += temp[0].length>1?temp[0]:"none";      
                temp = $("<div></div>").text(textoActual.substr(temp[0].length)).html()
                resultado += "'>"+temp+"</code></pre>";
            }
        }

        return resultado
    }

    cargarChat(mensajes){
        mensajes.forEach((mensaje) => {
            if(mensaje.role!="system"){
                let clone = this.template.clone();
                let texto = mensaje.content;
                if(mensaje.role=="user") {
                    clone.addClass("me");
                    clone.find("div p").text(texto.replace(/\n/g, "<br>"));
                }else{
                    texto = this.procesarTexto(texto);
                    clone.find("div p").html(texto);
                }   
                this.chatbox.append(clone);
                this.active = clone;
                Prism.highlightAllUnder(this.active[0])
                this.active = false;
                this.chatbox.scrollTop(this.chatbox[0].scrollHeight);
            }
        });
    }

    respuestaInicio(mensaje){
        $("#input-text").val("");
        $("button").prop("disabled", true);
        $("textarea").prop("disabled", true);
        $(".switch input").prop("disabled", true);
        this.mensaje = ""
        let clone = this.template.clone();
        clone.addClass("me");
        clone.find("div p").text(mensaje);
        this.chatbox.append(clone);
        
        clone = this.template.clone();
        clone.find("div p").html("");
        this.chatbox.append(clone);
        this.active = clone;
        this.chatbox.scrollTop(this.chatbox[0].scrollHeight);
    }

    respuestaMensaje(mensaje){
        this.mensaje += mensaje
        let html = this.active.find("div p").html();
        html += mensaje.replace(/\n/g, "<br>").replace(/`([^`\w\W]+?)`/gm, "<b>$1</b>")
        this.active.find("div p").html(html);
        this.chatbox.scrollTop(this.chatbox[0].scrollHeight);

    }

    respuestaFin(){
        let msgProcesado = this.procesarTexto(this.mensaje);
        this.mensaje = "";
        $("button").prop("disabled", false);
        $("textarea").prop("disabled", false);
        $(".switch input").prop("disabled", false);
        $("textarea").focus();
        this.active.find("div p").html(msgProcesado);
        Prism.highlightAllUnder(this.active[0]);
        this.active = false;
        this.chatbox.scrollTop(this.chatbox[0].scrollHeight);
    }

    respuestaError(error){
        $("button").prop("disabled", false);
        $("textarea").prop("disabled", false);
        $("textarea").focus();
        this.active.find("div p").html(error.mensaje)
        switch(error.status){
            case 404:
                this.active.addClass("error")
            case 408:
                this.active.addClass("warning")
            default:
                this.active.addClass("warning")
        }
        this.active = false;
        this.chatbox.scrollTop(this.chatbox[0].scrollHeight)



    }

    toggleSwitch(event) {
      //boton de switch para consultar con google.
      let checkBox = event.currentTarget;
      $(document).trigger("accion:switch_change", checkBox.checked);
      if (checkBox.checked) {
        console.log("Switch is turned on.");
      } else {
        console.log("Switch is turned off.");
      }
  }

}