Paso desarrollo 4

static/css/tabs.css

@@ -47,7 +47,7 @@
     display: block;
     line-height: 26px;
 }
-.tab-label > div, .tab-label-add > div{
+.tab-label > .tab-name, .tab-label-add > .tab-name{
     display: flex;
     align-items: center;
     padding: 0 10px;

static/js/chatHandler.js

@@ -23,14 +23,13 @@ class ChatGPT{
     /* Eventos escuchados
         - chat:crear
         - chat:enviar
-        - enviar:error
         - chat:eliminar
 
     **********************/
 
-    // Enpoint
     endpointChat = "/chat";
     token = null;
+    windowHandlers = []
     
     constructor(token){
         // Token JWT de ejecución
@@ -40,15 +39,14 @@ class ChatGPT{
         this.cargarEventos();
         
         
-        try{
-            this.conversaciones = JSON.parse(localStorage.getItem("conversaciones"))
-        }catch{
+        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.wHand.push(new WindowHandler(conversacion, this.wHand.length));
+            this.windowHandlers.push(new WindowHandler(conversacion, this.windowHandlers.length));
         }
 
         // Anucia chats creados
@@ -63,8 +61,8 @@ class ChatGPT{
             this.reintentos = 0;
             this.enviar(params.mensaje, params.ctx);
         });
-        $(document).on("enviar:error", (event, params) => this.reenviar(params));
-        $(document).on("chat:eliminar", (event, params) => this.eliminarChat(params.ctx, params.index))   
+        $(document).on("chat:eliminar", (event, params) => this.eliminarChat(params.ctx, params.index)) 
+        $("#nuevoChat").on("click", () => {$(document).trigger("chat:crear")})  
     }
 
     crearChat(){
@@ -74,15 +72,15 @@ class ChatGPT{
         this.conversaciones.push([this.definicion])
 
         // Se crea el nuevo manejador de ventana
-        this.wHand.push(
+        this.windowHandlers.push(
             new WindowHandler(
                 this.conversaciones[this.conversaciones.length-1], 
-                this.wHand.length)
+                this.windowHandlers.length)
                 );
         
         // Se anuncia la creación
-        $(document).trigger("chat:creado", this.wHand.length-1);
-
+        $(document).trigger("chat:creado", this.windowHandlers.length-1);
+        
     }    
 
     eliminarChat(ctx, index){
@@ -91,8 +89,8 @@ class ChatGPT{
         
         // Elimina el elemento de la lista de conversas y handler de ventanas
         this.conversaciones.splice(index, 1)
-        this.wHand[index].kill()
-        this.wHand.splice(index, 1)
+        this.windowHandlers[index].kill()
+        this.windowHandlers.splice(index, 1)
 
         // Elimina la pestaña y contexto
         $($(".tab-label")[index]).remove()
@@ -102,7 +100,7 @@ class ChatGPT{
         let labels = $(".tab-label input")
         for(let i=0; i<labels.length; i++){
             $(labels[i]).val(i)
-            this.wHand[i].index=i;
+            this.windowHandlers[i].index=i;
         }
         $(labels[0]).prop("checked", true);
 
@@ -113,7 +111,7 @@ class ChatGPT{
         $(document).trigger("chat:eliminado");
 
         // Si no quedaron chats, crea uno vacio
-        if(this.wHand.length==0){
+        if(this.windowHandlers.length==0){
             this.crearChat()
         }
 

static/js/inputboxHandler.js

@@ -19,9 +19,7 @@ class InputBox{
 
         this.textarea.on("change keydown keyup paste", () => this.recalcularTextarea())
 
-        $("#nuevoChat").on("click", () => {
-            $(document).trigger("chat:crear")}
-            )
+        
 
         $(document).on("chat:creado", (event, params) => this.chatCreado(params))
     

static/js/windowHandler.js

@@ -1,20 +1,35 @@
 class WindowHandler{
     constructor(conversacion, index){
         
-        // Se establece el indice del chat
+        // El indice de este chat
         this.index = index
 
         // Template de mensajes
-        this.template = $('.message-template').clone();
-        this.template.removeClass("message-template").addClass("message")
+        this.templateMsg = $('.message-template').clone();
+        this.templateMsg.removeClass("message-template")
+        this.templateMsg.addClass("message")
+
+        this.tabs = $(".tabs")
+        this.templateTag = $(".template .tab-label-template").clone()
+        this.templateTag.removeClass("tab-label-template").addClass("tab-label")
 
         // Parametros base
+        // está activo (es el visible en pantalla)
         this.active = false;
-        this.mensaje = "";
+        
+        // ha tenido su primera interacción
         this.interacted = false
 
-        // Se carga el chat 
-        this.cargarChat(conversacion)
+        //this.cargarEventos();
+        this.crearVentanaChat(index, "Tab "+ index)
+        //self.cargarChat(conversacion)
+        $(".tab-switch").on("change", function(){
+            $(".tab").removeClass("active")
+            let sw = $($(".tab")[this.value]).addClass("active")
+        })
+    }
+
+    cargarEventos(){
 
         // En envio de chat se recalcula el tamaño del area de texto
         this.ctx.on("chat:enviar", (event, params) => this.recalcularTextarea());
@@ -26,6 +41,7 @@ class WindowHandler{
         this.ctx.find(".input-text").keypress((event) => {
             if (!event.shiftKey && event.keyCode === 13) {
               this.manejadorEnviar();
+
         }});
         this.ctx.find(".input-send").click(() => this.manejadorEnviar());
         this.ctx.find(".input-text").keypress(() => this.recalcularTextarea());
@@ -48,41 +64,64 @@ class WindowHandler{
         this.ctx.on("precarga:error", (event, params) => {
             this.respuestaError(params)
         });
- 
+
     }
 
-    cargarChat(conversacion){
+    crearVentanaChat(index, nombre){
         
+        // Crea el tab
+        let newTab = this.templateTag.clone()
+        
+        // coloca el valor al input y lo selecciona
+        newTab.find("input").val(index)
+        newTab.find("input").prop("checked", true);
+        newTab.find("> div").text(nombre)
+        this.tabs.append(newTab)
+
+        // Crea la ventana de chat
         let tempTab = $(".tab-template").clone();
         tempTab.removeClass("tab-template").addClass("tab")
         $(".chats").append(tempTab)
+
+        // establece los contextos de ventana
         this.ctx = tempTab
         this.chatbox = this.ctx.find(".chat");
 
-        for(let mensaje of conversacion){
-            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);
-                this.interacted=true
-            }
-        }
         
+        //this.tabCambiada()
         
+
+    }
+
+    crearMensaje(texto, user){
+        this.active = this.template.clone();
+        switch(user){
+            case "system":
+                return
+            case "user":
+                clone.addClass("me");
+                clone.find("div p").text(texto);
+            case "assistant":
+                texto = this.procesarTexto(texto);
+                clone.find("div p").html(texto);
+        }
+        this.chatbox.append(this.active);
+        Prism.highlightAllUnder(this.active[0])
+        this.active = false;
+        this.chatbox.scrollTop(this.chatbox[0].scrollHeight);
+        this.interacted=true
+    }
+
+    
+
+    cargarChat(conversacion){
         
         
 
+        for(let mensaje of conversacion){
+            this.crearMensaje(mensaje.contentm, mensaje.role)
+        }
+        
     }
 
     eliminarChat(){

static/main.html

@@ -11,8 +11,7 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
         
-        <script src="static/js/inputboxHandler.js?v={% version %}"></script>
-        
+        <!-- <script src="static/js/inputboxHandler.js?v={% version %}"></script> -->
         <script src="static/js/windowHandler.js?v={% version %}"></script>
         <script src="static/js/chatHandler.js?v={% version %}"></script>
 
@@ -36,15 +35,6 @@
 
             </div>
             <!--/ Contenedor de chats -->
-
-            <!-- Caja de entrada y controles -->
-            <div class='input-box' id="inputBox">
-                <textarea class='input-text' placeholder="Escribe aquí" type="text" autofocus=""></textarea>
-                <button class='input-send' ></button>
-                <button class='input-menu' ></button>
-                <button class='input-delete' ></button>
-            </div>
-            <!--/ Contenedor de chats -->
         </div>
         <!--/ Estructura principal -->
 
@@ -53,7 +43,7 @@
 
             <!-- Pestaña  -->
             <label class="tab-label-template">
-                <div>Tab </div>
+                <div class="tab-name">Tab </div>
                 <input type="radio" name="tabs" class="tab-switch" value=0>
             </label>
             <!--/ Pestaña  -->
@@ -61,6 +51,12 @@
             <!-- Contenido Pestaña  -->
             <div class="tab-template">
                 <div class="chat"></div>
+                <div class='input-box' id="inputBox">
+                    <textarea class='input-text' placeholder="Escribe aquí" type="text" autofocus=""></textarea>
+                    <button class='input-send' ></button>
+                    <button class='input-menu' ></button>
+                    <button class='input-delete' ></button>
+                </div>
                 
             </div>
 
@@ -79,7 +75,6 @@
             var cHand;
             $(document).ready(function() {
                 cHand = new ChatGPT("{% token %}");
-                new InputBox();
             });
             let versionLocal = localStorage.getItem("version")
             let versionRemota = "{% version %}"