Dev: front end finalizado

static/css/tabs.css

@@ -50,8 +50,13 @@
 .tab-label > .tab-name, .tab-label-add > .tab-name{
     display: flex;
     align-items: center;
-    padding: 0 10px;
+    margin: 0 10px;
     text-wrap: nowrap;
+    width: 64px;
+    overflow: hidden;
+    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 70%, rgba(0,0,0,0) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 .tab-label:hover {
     /* top: -0.25rem;

static/js/chatHandler.js

@@ -29,8 +29,9 @@ class ChatGPT{
     **********************/
 
     endpointChat = "/chat";
+    endpointChat = "https://mgldzm-chgpt.hf.space/chat_async"
     token = null;
-    windowHandlers = []
+    windowHandlers = {}
     
     constructor(token){
         // Token JWT de ejecución
@@ -38,20 +39,8 @@ class ChatGPT{
         
         // inicializa eventos de escucha 
         this.cargarEventos();
-        
-        
-        try{this.conversaciones = JSON.parse(localStorage.getItem("conversaciones"))}catch{}
-        if (!this.conversaciones || this.conversaciones.length < 1){
-            this.conversaciones = [[this.definicion]];
-        }
-        
-        // Se crea un windowHandler por conversacion
-        for(let conversacion of this.conversaciones){
-            this.windowHandlers.push(new WindowHandler(conversacion, this.windowHandlers.length));
-        }
 
-        // Anucia chats creados
-        $(document).trigger("chat:creado");
+        this.cargarChats()
 
     }
     
@@ -62,26 +51,18 @@ class ChatGPT{
             this.reintentos = 0;
             this.enviar(params.ctx, params.ctx.conversacion);
         });
-        $(document).on("chat:eliminar", (event, params) => this.eliminarChat(params.ctx, params.index)) 
+        $(document).on("chat:salvar", (event, params) => this.salvarChats(params.index, params.conversacion))
         $("#nuevoChat").on("click", () => {$(document).trigger("chat:crear")})  
     }
 
-    crearChat(){
-        // Creación de la estructura para un chat
-
-        // Se agrega la nueva conversa basada en la definición
-        this.conversaciones.push([this.definicion])
-
+    crearChat(index, conversacion){
         // Se crea el nuevo manejador de ventana
-        this.windowHandlers.push(
-            new WindowHandler(
-                this.conversaciones[this.conversaciones.length-1], 
-                this.windowHandlers.length)
-                );
-        
-        // Se anuncia la creación
-        $(document).trigger("chat:creado", this.windowHandlers.length-1);
-        
+        let uuid = this.generateRandID()
+        this.windowHandlers[index||uuid] = new WindowHandler(
+            conversacion||[this.definicion], 
+            index||uuid,
+            this
+        );
     }    
 
     eliminarChat(ctx, index){
@@ -162,10 +143,6 @@ class ChatGPT{
                             break;
                         // Mensaje a mostrar
                         case "mensaje":
-                            conversacion.push(response.mensaje);
-                            localStorage.setItem("conversaciones", JSON.stringify(self.conversaciones))
-                            ctx.trigger("chat:enviado", response.mensaje.content);
-                            ctx.trigger("chat:envio:exito", response.mensaje.content);
                             ctx.respuestaMensaje(response.mensaje)
                             break;
                         // // Es una función
@@ -192,7 +169,8 @@ class ChatGPT{
             method: "POST",
             body: JSON.stringify({
                 messages: tempMensajes,
-                token: this.token
+                token: this.token,
+                config: {"temperature": 1,"frequency_penalty": 0,"presence_penalty": 0}
             }),
             timeout: 60000,
             dataType: "json"
@@ -212,5 +190,40 @@ class ChatGPT{
        
     }
 
+    salvarChats(index, conversacion){
+        let conversaciones = {}
+        try{conversaciones = JSON.parse(localStorage.getItem("conversaciones"))||{}}catch{}
+        conversaciones[index] = conversacion
+        localStorage.setItem("conversaciones", JSON.stringify(conversaciones)) 
+    }
+
+    cargarChats(){
+        let conversaciones = {}
+        try{conversaciones = JSON.parse(localStorage.getItem("conversaciones"))||{}}catch{}
+
+        if(!conversaciones || !Object.keys(conversaciones).length){
+            this.crearChat()
+            return
+        }
+        for(let key in conversaciones){
+            this.crearChat(key, conversaciones[key])
+        }
+
+
+        // try{this.conversaciones = JSON.parse(localStorage.getItem("conversaciones"))}catch{}
+        // if (!this.conversaciones || this.conversaciones.length < 1){
+        //     this.conversaciones = [[this.definicion]];
+        // }
+        
+        // // Se crea un windowHandler por conversacion
+        // for(let conversacion of this.conversaciones){
+        //     this.windowHandlers.push(new WindowHandler(conversacion, this.windowHandlers.length));
+        // }
+    }
+
+    generateRandID(){
+        return btoa((Math.random()*100**8)).replaceAll("=","").split("").reverse().join("");
+    }
+
       
 }

static/js/inputboxHandler.js

@@ -1,93 +0,0 @@
-class InputBox{
-    isOpen = false;
-    textarea = null;
-    sendButton = null;
-    deleteButton = null;
-    optsButton = null;
-    dialog = null;
-    constructor(){
-
-        this.textarea = $("textarea.input-text")
-        this.sendButton = $("button.input-send")
-        this.delButton = $("button.input-delete")
-        this.optsButton = $("button.input-menu")
-        this.dialog = $("dialog#menu")
-        
-        this.optsButton.click(() => this.toggleMenu())
-        this.sendButton.click(() => this.enviarMensaje())
-        this.delButton.click(() => this.eliminarChat())
-
-        this.textarea.on("change keydown keyup paste", () => this.recalcularTextarea())
-
-        
-
-        $(document).on("chat:creado", (event, params) => this.chatCreado(params))
-    
-    }
-
-
-
-    toggleMenu(){
-        if(this.isOpen){
-            this.dialog.close()
-        }else{
-            this.dialog.open()
-        }
-        this.isOpen = !this.isOpen
-    }
-
-    enviarMensaje(){
-
-    }
-
-    eliminarChat(){
-
-    }
-
-    recalcularTextarea(){
-        this.textarea.css("height", "30px");
-        let height = parseInt((this.textarea.prop('scrollHeight')+15)/15)*15;
-        this.textarea.css("height", height+"px");
-        height -= 30;
-        this.textarea.css("--textarea", height+"px");  
-    }
-
-    chatCreado(index){
-    
-        // Deseleccionar tabs
-        let labels = $(".tab-label input");
-        labels.prop("checked", false);
-        
-        let tabs = $(".tabs")
-        let newTab = $(".template .tab-label-template").clone()
-        newTab.removeClass("tab-label-template").addClass("tab-label")
-        newTab.find("input").val(index)
-        newTab.find("input").prop("checked", true);
-        tabs.append(newTab)
-        this.tabCambiada()
-    }
-
-    tabCambiada(){
-        let tab = $(".tab");
-        let tabActive = $(tab[$(".tab-label input:checked").val()]);
-        let chat = tabActive.find(".chat")
-        
-        
-        tab.removeClass("active")
-        tabActive.addClass("active")
-        tabActive.find("textarea").focus()
-        if(chat.length>0){
-            chat.scrollTop(chat[0].scrollHeight);
-        }
-    }
-
-    eliminarChat(){
-        if(confirm("¿Estás seguro que quieres eliminar esta conversación?") == true){
-            let tabActive = $(".tab-label input:checked").val();
-            $(document).trigger("chat:eliminar", tabActive)
-
-
-        }
-    }
-
-}

static/js/tabsHandler.js

@@ -1,26 +0,0 @@
-$(document).ready(function() {
-    $(document).on("chat:creado",function(event){
-        $(".tab-switch").off("change")
-        $(".tab-switch").on("change", radioChanged)
-        radioChanged()
-    });
-
-    $("#nuevoChat").on("click", (event) => {
-        $(document).trigger("chat:crear");
-    })
-
-})
-
-function radioChanged(){
-    let tab = $(".tab");
-    let tabActive = $(tab[$(".tab-label input:checked").val()]);
-    let chat = tabActive.find(".chat")
-    
-    
-    tab.removeClass("active")
-    tabActive.addClass("active")
-    tabActive.find("textarea").focus()
-    if(chat.length>0){
-        chat.scrollTop(chat[0].scrollHeight);
-    }
-}

static/js/windowHandler.js

@@ -1,11 +1,12 @@
 class WindowHandler{
 
     conversacion = []
-    constructor(conversacion, index){
+    constructor(conversacion, index, chatHndl){
         
         // El indice de este chat
         this.index = index
         this.conversacion = conversacion
+        this.chatHandler = chatHndl
 
         // Template de mensajes        
         this.templateMsg = $("#template-message").contents("div.message").clone()    
@@ -18,7 +19,6 @@ class WindowHandler{
         
 
         // Parametros base
-        // está activo (es el visible en pantalla)
         this.active = false;
         
         // ha tenido su primera interacción
@@ -27,26 +27,39 @@ class WindowHandler{
         this.crearVentanaChat(index, "Tab "+ index)
         this.cargarEventos();
         $(document).trigger("ventana:cambiada")
-        //self.cargarChat(conversacion)
+        this.cargarChat(conversacion)
         
     }
 
-    cargarEventos(){
-        $(document).on("ventana:cambiada", function(){
-            $(".tab").removeClass("active")
-            let val = $(".tab-label input:checked").val();
-            let sw = $($(".tab")[val]).addClass("active")
-        })
-        $(".tab-switch").on("change", ()=> $(document).trigger("ventana:cambiada"))
+    crearVentanaChat(index, nombre){
+        // coloca el valor al input y lo selecciona
+        let newLabel = this.templateLabel.clone()
+        newLabel.find("input").val(index).prop("checked", true);
+        newLabel.find("> div").text(nombre)
+        this.tabs.append(newLabel)
+        this.label = newLabel
 
-        
-        // // En envio de chat se recalcula el tamaño del area de texto
-        // this.ctx.on("chat:enviar", (event, params) => this.recalcularTextarea());
+        // Crea la ventana de chat
+        let tempTab = this.templateTab.clone();
+        tempTab.attr("id", index)
+        $(".chats").append(tempTab)
 
-        // // Cuando se elimina un chat
-        // this.ctx.on("chat:eliminar:pre", () => this.eliminarChat());
 
-        // // 
+        // establece los contextos de ventana
+        this.ctx = tempTab
+        this.chatbox = this.ctx.find(".chat");
+        this.ventanaSeleccionada()
+    }
+
+    ventanaSeleccionada(){
+        // cuando la ventana es seleccionada, cambia
+        $(".tab").removeClass("active")
+        this.label.find("input")[0].checked=true;
+        this.ctx.addClass("active");
+    }
+
+    cargarEventos(){
+        this.label.click(()=> this.ventanaSeleccionada())
         this.ctx.find(".input-text").keypress((event) => {
             if (!event.shiftKey && event.keyCode === 13) {
                 this.manejadorEnviar();
@@ -63,35 +76,8 @@ class WindowHandler{
         this.ctx.on("chat:envio:inicio", (event, params) => {
             this.respuestaInicio(params)
         });
-        // this.ctx.on("precarga:iniciada", (event, params) => {
-        //     this.respuestaIniciada()
-        // });
-        // this.ctx.on("precarga:status", (event, params) => {
-        //     this.respuestaStatus(...Object.values(params))
-        // });
-        // this.ctx.on("precarga:mensaje", (event, params) => {
-        //     this.respuestaMensaje(params)}
-        // );
-        // this.ctx.on("precarga:error", (event, params) => {
-        //     this.respuestaError(params)
-        // });
-
-    }
 
-    crearVentanaChat(index, nombre){
-        // coloca el valor al input y lo selecciona
-        let newLabel = this.templateLabel.clone()
-        newLabel.find("input").val(index).prop("checked", true);
-        newLabel.find("> div").text(nombre)
-        this.tabs.append(newLabel)
-
-        // Crea la ventana de chat
-        let tempTab = this.templateTab.clone();
-        $(".chats").append(tempTab)
-
-        // establece los contextos de ventana
-        this.ctx = tempTab
-        this.chatbox = this.ctx.find(".chat");
+        this.ctx.find(".input-delete").click(() => this.eliminarChat() )
 
     }
 
@@ -132,13 +118,10 @@ class WindowHandler{
         $(document).trigger("chat:enviar", {ctx: self})
     }
     
-
     respuestaInicio(){
         this.crearMensaje("", "loading");
     }
 
-    
-    
     respuestaStatus(mensaje, modo=false){
         let temp = $("<div></div>")
         temp.text(mensaje)
@@ -170,13 +153,17 @@ class WindowHandler{
         
         this.ctx.find("button").prop("disabled", false);
         this.ctx.find("textarea").prop("disabled", false);
+        this.ctx.find("textarea").val("")
         this.ctx.find("textarea").focus();
 
+        $(document).trigger("chat:salvar", {index: this.index, conversacion: this.conversacion})
+
     }
 
     respuestaError(error){
         this.ctx.find("button").prop("disabled", false);
         this.ctx.find("textarea").prop("disabled", false);
+        this.ctx.find("textarea").val("")
         this.ctx.find("textarea").focus();
         if(error.hasOwnProperty("responseJSON")){
             this.active.find("div p").html(error.responseJSON.detail)
@@ -197,20 +184,19 @@ class WindowHandler{
         }
         this.active = false;
         this.chatbox.scrollTop(this.chatbox[0].scrollHeight)
-
-
-
     }
 
     cargarChat(conversacion){
-        for(let mensaje of conversacion){
-            this.crearMensaje(mensaje.contentm, mensaje.role)
+        for(let mensaje of this.conversacion){
+            this.crearMensaje(mensaje.content, mensaje.role)
         }    
     }
 
     eliminarChat(){
         if(confirm("¿Estás seguro que quieres eliminar esta conversación?") == true){
             $(document).trigger("chat:eliminar", {ctx:this.ctx, index:this.index})
+            this.label.remove()
+            this.ctx.remove()
         }
     }