Dev: multi conversaciones paso 1

static/css/app.css

@@ -7,7 +7,6 @@ body {
     font-family: Monospace;
     font-size: 15px;
 }
-
 body {
     display: flex;
 }
@@ -15,55 +14,18 @@ button{
     cursor: pointer;
 }
 .wrapper {
-    padding: 20px 20px 80px 20px;
-    border-bottom: 5px solid #222f3d;
     background: #34495e;
     margin: 0;
     min-width: 320px;
     width: 100%;
-}
-.submenu {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: fit-content;
-    height: fit-content;
-    
-}
-.submenu .abrir{
-    width: 30px;    
-    height: 30px;
-    background-image: url(/static/img/menu.svg);
-    background-color: #8093a5;
-    background-repeat: no-repeat;
-    background-position: center;
-    border-radius: 0px 0px 5px 0px;
-    border-bottom: solid 1px;
-    border-right: solid 1px;
-    position: fixed;
-}
-.submenu .configuracion{
-    width: calc( 100vw - 20px);
-    height: 0px;
-    background: #cbcbcb;
-    margin-left: 10px;
-    border-radius: 0px 0px 5px 5px;
-    top: -2px;
-    transition: box-shadow 0.5s, height 0.5s, top 0.5s;
-}
-.submenu .configuracion.desplegado{
-    top: 0px;
-    height: 300px;
-    border: solid 1px;
-    border-top: none;
-    box-shadow: 5px 5px 10px 2px #000000ad;
+    display: grid;
+    grid-template-rows: 40px auto;
 }
 .chat {
     --textarea: 0px;
     border-radius: 5px;
     display: block;
     width: 100%;
-    height: calc( 100% - var(--textarea) );
     overflow-y: scroll;
     overflow-x: hidden;
     background: rgb(161, 161, 161);

static/css/tabs.css

@@ -0,0 +1,62 @@
+.tabs {
+    display: flex;
+    scrollbar-color: #34373d #ffffff00;
+    scrollbar-width: 5px;
+    overflow-x: scroll;
+    padding-bottom: 4px;
+    user-select: none;
+}
+
+.tabs::-webkit-scrollbar {
+    height: 5px;
+}
+.tabs::-webkit-scrollbar-track {
+    background: #ffffff00;
+}
+.tabs::-webkit-scrollbar-thumb {
+    background-color: #34373d;
+    border: none;
+}
+
+.tab {
+    padding: 4px 20px;
+    display: none;
+}
+.tab.active{
+    display: grid;
+    grid-template-rows: auto 50px;
+}
+
+.tab-switch, .tab-add {
+    display: none;
+}
+.tab-label{
+    display: flex;
+}
+.tab-label-add {
+    background: #3b74ad;
+    display: flex;
+}
+.tab-label > div, .tab-label-add > div{
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    text-wrap: nowrap;
+}
+.tab-label:hover {
+    /* top: -0.25rem;
+    transition: top 0.25s; */
+}
+
+.tab-label:has(.tab-switch:checked) {
+    background: #fff;
+    /* color: #2c3e50;
+    border-bottom: 0;
+    border-right: 0.125rem solid #fff;
+    transition: all 0.35s;
+    z-index: 1;
+    top: -0.0625rem; */
+}
+.template{
+    display: none;
+}

static/js/chatHandler.js

@@ -6,41 +6,20 @@ class ChatGPT{
     "Knowledge cutoff: 2021-09-01\nCurrent date: {date}"; 
     constructor(token){
         
-        $("#input-delete").click(()=> $(document).trigger("chat:limpiar"))
-
         let fecha = new Date().toJSON().slice(0, 10);
         this.definicion = this.definicion.replace("{date}", fecha)
         this.definicion = {role: "system", content: this.definicion, tokens: 100};
-        
-        if (localStorage.getItem("convesacion") !== null) {
-            this.convesacion = JSON.parse(localStorage.getItem("convesacion"));
-            $(document).trigger("chat:cargar", this.convesacion);
-        }else{
-            this.convesacion = [this.definicion];
-        }
-
-        if (localStorage.getItem("config") !== null) {
-            this.config = JSON.parse(localStorage.getItem("config"));
-        }else{
-            this.config = {
-                temperature: 1.0,
-                frequency_penalty: 0.0,
-                presence_penalty: 0.0
-            };
-        }
+        this.cargarHistorial()
 
         this.execStart = 0;
 
         this.endpointChat = "/chat_async";
         this.token = token
-        // this.evCtx = document
         this.reintentos = 0
-        $(document).on("chat:limpiar", () => {
-            this.limpiarConfig()
-        });
+        
         $(document).on("chat:enviar", (event, params) => {
             this.reintentos = 0;
-            this.enviar(params);
+            this.enviar(params.mensaje, params.ctx);
         });
         $(document).on("chat:reenviar", (event, params) => {
             this.reintentos++;
@@ -49,7 +28,38 @@ class ChatGPT{
 
         $(document).on("enviar:error", (event, params) => this.reenviar(params));
         
+        $(document).on("chat:crear", ()=>this.crearChat())
+        
+    }
+
+    cargarHistorial(){
+        if (localStorage.getItem("conversaciones") !== null) {
+            this.conversaciones = JSON.parse(localStorage.getItem("conversaciones"));
+        }else{
+            this.conversaciones = [[this.definicion]];
+        }
         
+        this.wHand = []
+        for(let conversacion of this.conversaciones){
+            this.wHand.push(new WindowHandler(conversacion, this.wHand.length));
+        }
+
+
+        if (localStorage.getItem("config") !== null) {
+            this.config = JSON.parse(localStorage.getItem("config"));
+        }else{
+            this.config = {
+                temperature: 1.0,
+                frequency_penalty: 0.0,
+                presence_penalty: 0.0
+            };
+        }
+
+    }
+
+    crearChat(){
+        this.conversaciones.push([this.definicion])
+        this.wHand.push(new WindowHandler(this.conversaciones[this.conversaciones.length-1], this.wHand.length));
     }
 
     limpiarConfig(){
@@ -60,33 +70,34 @@ class ChatGPT{
             frequency_penalty: 0.0,
             presence_penalty: 0.0
         };
-        this.convesacion = [this.definicion];
+        this.conversaciones = [this.definicion];
 
     }
 
-    reenviar(params){
-        if(params.status==404){
-            $(document).trigger("precarga:error",{jqXHR:params.jqXHR, status:params.status, error:params.error, execTime:params.execTime, mensaje:params.detail});
-            return
-        }
-        if(this.reintentos < 3 ){
-            $(document).trigger("chat:reenviar",{jqXHR:params.jqXHR, status:params.status, error:params.error, execTime:params.execTime, mensaje:params.mensaje});
+    // reenviar(params){
+    //     if(params.status==404){
+    //         this.ctx.trigger("precarga:error",{jqXHR:params.jqXHR, status:params.status, error:params.error, execTime:params.execTime, mensaje:params.detail});
+    //         return
+    //     }
+    //     if(this.reintentos < 3 ){
+    //         this.ctx.trigger("chat:reenviar",{jqXHR:params.jqXHR, status:params.status, error:params.error, execTime:params.execTime, mensaje:params.mensaje});
 
-        }else{
-            $(document).trigger("precarga:error", {status: rstat, mensaje: data.detail});
-        }
-    }
+    //     }else{
+    //         this.ctx.trigger("precarga:error", {status: rstat, mensaje: data.detail});
+    //     }
+    // }
 
-    enviar(mensaje){
+    enviar(mensaje, ctx){
+        let conversacion = this.conversaciones[$(".tab-label input:checked").val()]
         let tempMensajes = [];
-        for(let actMsg of this.convesacion){
+        for(let actMsg of conversacion){
             tempMensajes.push({role: actMsg.role, content: actMsg.content})
         }
         
         console.log("Enviando: ", mensaje);
         tempMensajes.push({role: "user", content: mensaje});
-        this.convesacion.push({role: "user", content: mensaje});
-        $(document).trigger("precarga:inicio", mensaje);
+        conversacion.push({role: "user", content: mensaje});
+        ctx.trigger("precarga:inicio", mensaje);
         let self = this;
         let primertick = true;
         $.ajax({
@@ -102,7 +113,7 @@ class ChatGPT{
             xhrFields: {
                 onprogress: function(e){
                     if(primertick){
-                        $(document).trigger("precarga:iniciada");
+                        ctx.trigger("precarga:iniciada");
                         primertick=false;
                     }
                 }
@@ -110,14 +121,14 @@ class ChatGPT{
             success: function (response) {
                 self.token = response.token;
                 delete response.token
-                self.convesacion.push(response)
-                localStorage.setItem("convesacion", JSON.stringify(self.convesacion))
-                $(document).trigger("precarga:mensaje", response.content);
+                conversacion.push(response)
+                localStorage.setItem("conversaciones", JSON.stringify(self.conversaciones))
+                ctx.trigger("precarga:mensaje", response.content);
                 console.log("terminado")
                 console.log(response)
             },
             error: function (response) {
-                $(document).trigger("precarga:error", response);
+                ctx.trigger("precarga:error", response);
                 console.log("Error: ", response)
             }
         });

static/js/tabsHandler.js

@@ -0,0 +1,17 @@
+$(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(){
+    $(".tab").removeClass("active")
+    $($(".tab")[$(".tab-label input:checked").val()]).addClass("active")
+}

static/js/windowHandler.js

@@ -1,61 +1,109 @@
 class WindowHandler{
-    constructor(){
-        this.chatbox = $("#chat");
+    constructor(conversacion, index){
+        this.index = index
         this.template = $('<div class="message"><div><p></p></div></div>');
         this.active = false;
         this.mensaje = "";
 
-        $(document).on("chat:enviar", (event, params) => this.recalcularTextarea());
-        $(document).on("chat:limpiar", () => this.limpiarChat());
+        this.cargarChat(conversacion)
 
-        $("#input-text").keypress((event) => {
+
+        this.ctx.on("chat:enviar", (event, params) => this.recalcularTextarea());
+        this.ctx.on("chat:limpiar", () => this.limpiarChat());
+
+        this.ctx.find(".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());
-        this.cargarChat(chatH.convesacion);
-
-        $(document).on("precarga:inicio", (event, params) => {
+        this.ctx.find(".input-send").click(() => this.manejadorEnviar());
+        this.ctx.find(".input-text").keypress(() => this.recalcularTextarea());
+        this.ctx.find(".input-text").keyup(() => this.recalcularTextarea());
+        this.ctx.find(".input-text").keydown(() => this.recalcularTextarea());
+        this.ctx.find(".input-delete").click(()=> this.ctx.trigger("chat:limpiar"))
+        //this.cargarChat(chatH.convesacion);
+
+        this.ctx.on("precarga:inicio", (event, params) => {
             this.respuestaInicio(params)
         });
-        $(document).on("precarga:iniciada", (event, params) => {
+        this.ctx.on("precarga:iniciada", (event, params) => {
             this.respuestaIniciada()
         });
-        $(document).on("precarga:mensaje", (event, params) => {
+        this.ctx.on("precarga:mensaje", (event, params) => {
             this.respuestaMensaje(params)}
         );
-        $(document).on("precarga:fin", (event, params) => {
+        this.ctx.on("precarga:fin", (event, params) => {
             this.respuestaFin()
         });
-        $(document).on("precarga:error", (event, params) => {
+        this.ctx.on("precarga:error", (event, params) => {
             this.respuestaError(params)
         });
  
+    }
+
+    cargarChat(conversacion){
+        let tempTabSel = $(".tab-label-template").clone();
+        tempTabSel.removeClass("tab-label-template")
+        tempTabSel.addClass("tab-label")
+        tempTabSel.find("div").text("Tab "+this.index);
+        tempTabSel.find("input").val(this.index);
+        if(this.index==0){
+            tempTabSel.find("input").attr("checked", true)
+        }
+        $(".tabs").append(tempTabSel)
+        
+        let tempTab = $(".tab-template").clone();
+        tempTab.removeClass("tab-template")
+        tempTab.addClass("tab")
+        $(".wrapper").append(tempTab)
+        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);
+            }
+        }
+        $(document).trigger("chat:creado");
+        
+        
+        
+
     }
 
     limpiarChat(){
-        $("#input-text").val("");
+        this.ctx.find(".input-text").val("");
         this.recalcularTextarea();
-        $("#chat").html("");
+        this.ctx.find(".chat").html("");
     }
 
     manejadorEnviar(){
-        let mensaje = $("#input-text").val();
+        let mensaje = this.ctx.find(".input-text").val();
         if(mensaje==""){
             return false;
         }
-        $(document).trigger("chat:enviar", mensaje);
+        $(document).trigger("chat:enviar", {mensaje:mensaje, ctx:this.ctx});
     }
     
     recalcularTextarea(){
-        $(".input-box").css("height", "30px");
-        let height = parseInt(($(".input-text").prop('scrollHeight')+15)/15)*15;
-        $(".input-box").css("height", height+"px");
+        this.ctx.find(".input-box").css("height", "30px");
+        let height = parseInt((this.ctx.find(".input-text").prop('scrollHeight')+15)/15)*15;
+        this.ctx.find(".input-box").css("height", height+"px");
         height -= 30;
-        $(".chat").css("--textarea", height+"px");  
+        this.ctx.find(".chat").css("--textarea", height+"px");  
     }
 
     procesarTexto(texto){
@@ -78,31 +126,12 @@ class WindowHandler{
         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);
+        this.ctx.find(".input-text").val("");
+        this.ctx.find("button").prop("disabled", true);
+        this.ctx.find("textarea").prop("disabled", true);
         this.mensaje = ""
         let clone = this.template.clone();
         clone.addClass("me");
@@ -126,9 +155,9 @@ class WindowHandler{
         this.active.find("div p").html(mensaje);
         Prism.highlightAllUnder(this.active[0]);
         this.active = false;
-        $("button").prop("disabled", false);
-        $("textarea").prop("disabled", false);
-        $("textarea").focus();
+        this.ctx.find("button").prop("disabled", false);
+        this.ctx.find("textarea").prop("disabled", false);
+        this.ctx.find("textarea").focus();
 
         this.chatbox.scrollTop(this.chatbox[0].scrollHeight);
     }
@@ -136,9 +165,9 @@ class WindowHandler{
     respuestaFin(){
         let msgProcesado = this.procesarTexto(this.mensaje);
         this.mensaje = "";
-        $("button").prop("disabled", false);
-        $("textarea").prop("disabled", false);
-        $("textarea").focus();
+        this.ctx.find("button").prop("disabled", false);
+        this.ctx.find("textarea").prop("disabled", false);
+        this.ctx.find("textarea").focus();
         this.active.find("div p").html(msgProcesado);
         Prism.highlightAllUnder(this.active[0]);
         this.active = false;
@@ -146,9 +175,9 @@ class WindowHandler{
     }
 
     respuestaError(error){
-        $("button").prop("disabled", false);
-        $("textarea").prop("disabled", false);
-        $("textarea").focus();
+        this.ctx.find("button").prop("disabled", false);
+        this.ctx.find("textarea").prop("disabled", false);
+        this.ctx.find("textarea").focus();
         this.active.find("div p").html(error.responseJSON.detail)
         switch(error.status){
             case 404:

static/main.html

@@ -1,38 +1,55 @@
 <html>
-  <head>
-    <title> Chatbot </title>
-    <meta name="viewport" content="width=device-width">
-    <link rel="shortcut icon" href="static/favicon.png" type="image/png">
-    <link rel="stylesheet" href="static/css/app.css?v={% version %}">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
-    <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/chatHandler.js?v={% version %}"></script>
-    <script src="static/js/windowHandler.js?v={% version %}"></script>
-    
-  </head>
-  <body>
-  <div class="wrapper pag1">
-    <div class="chat" id="chat"></div>
-    <div class='input-box'>
-      <textarea class='input-text' id='input-text' placeholder="Type something" type="text" autofocus=""></textarea>
-      <button class='input-send' id='input-send' ></button>
-      <button class='input-delete' id='input-delete' ></button>
-    </div>
-  </div>
-  
-
-
-  <script> 
-    let windH = null;
-    let chatH = null;
-
-    $(document).ready(function() {
-      chatH = new ChatGPT("{% token %}");
-      windH = new WindowHandler();
-    });
-
-  </script>
-</body>
+    <head>
+        <title> Chatbot </title>
+        <meta name="viewport" content="width=device-width">
+        <link rel="shortcut icon" href="static/favicon.png" type="image/png">
+        <link rel="stylesheet" href="static/css/app.css?v={% version %}">
+        <link rel="stylesheet" href="static/css/tabs.css?v={% version %}">
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
+        <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/tabsHandler.js?v={% version %}"></script>
+        <script src="static/js/windowHandler.js?v={% version %}"></script>
+        <script src="static/js/chatHandler.js?v={% version %}"></script>
+
+    </head>
+    <body>
+
+
+        <div class="wrapper">
+            <div class="tabs"> 
+                <label class="tab-label-add" >
+                    <div>+</div>
+                    <input type="button" class="tab-add" id="nuevoChat">
+                </label>             
+            </div>
+
+            
+        </div>
+
+        
+        <div class="template">
+        <label class="tab-label-template">
+            <div>Tab </div>
+            <input type="radio" name="tabs" class="tab-switch" value=0>
+        </label>
+        <div class="tab-template">
+            <div class="chat"></div>
+            <div class='input-box'>
+                <textarea class='input-text' placeholder="Type something" type="text" autofocus=""></textarea>
+                <button class='input-send' ></button>
+                <button class='input-delete' ></button>
+            </div>
+        </div>
+        </div>
+
+        <script> 
+            $(document).ready(function() {
+                new ChatGPT("{% token %}");
+            });
+
+        </script>
+    </body>
 </html>