fix: Statics and history

static/css/app.css

@@ -152,7 +152,7 @@ button{
 
 .chat .message pre {
     overflow-x: scroll;
-    background-color: #e5e4e4;
+    border: solid 1px #e5e4e4;
     padding: 10px;
 }
 

static/js/chatHandler.js

@@ -3,17 +3,18 @@ class ChatGPT{
         
         $("#input-delete").click(()=> $(document).trigger("chat:limpiar"))
 
+        let fecha = new Date().toJSON().slice(0, 10);
+        this.definicion = "Te llamas Chatsito, eres un asistente de apoyo a los amigos de MIA, ";
+        this.definicion += "tu objetivo principal es responder preguntas y hacer sentir bien ";
+        this.definicion += "a tu interlocutor.\n";
+        this.definicion += "Responde de manera amistosa con un poco de comedia.\n";
+        this.definicion += "Knowledge cutoff: 2021-09-01\nCurrent 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{
-            let fecha = new Date().toJSON().slice(0, 10);
-            this.definicion = "Te llamas Chatsito, eres un asistente de apoyo a los amigos de MIA, ";
-            this.definicion += "tu objetivo principal es responder preguntas y hacer sentir bien ";
-            this.definicion += "a tu interlocutor.\n";
-            this.definicion += "Responde de manera amistosa con un poco de comedia.\n";
-            this.definicion += "Knowledge cutoff: 2021-09-01\nCurrent date: "+fecha;
-            this.definicion = {role: "system", content: this.definicion, tokens: 100};
             this.convesacion = [this.definicion];
         }
 
@@ -84,10 +85,13 @@ class ChatGPT{
             tempMensajes.push({role: actMsg.role, content: actMsg.content})
             tokens += actMsg.tokens 
         }
-        console.log("Enviado: ", mensaje);
+        
+        console.log("Enviando: ", mensaje);
         tempMensajes.push({role: "user", content: mensaje});
+        this.convesacion.push({role: "user", content: mensaje});
+        this.convesacion.push({});
         $(document).trigger("precarga:inicio", mensaje);
-
+        let self = this;
         fetch(this.endpointChat, {
             method: "POST",
             body: JSON.stringify({
@@ -95,8 +99,10 @@ class ChatGPT{
                 token: this.token,
                 config: this.config
             }),  
-        }).then(response => ({rb: response.body, rstat: response.status}))
-        .then(({rb, rstat}) => {
+        }).then(response => ({
+            rb: response.body, 
+            rstat: response.status
+        })).then(({rb, rstat}) => {
             if(!rb){
                 return false;
             }
@@ -111,9 +117,10 @@ class ChatGPT{
                             controller.close();
                             if(rstat==200){
                                 $(document).trigger("precarga:fin");
-                                console.log("terminado")
+                                localStorage.setItem("convesacion", JSON.stringify(self.convesacion))
+                                console.log("terminado", self.convesacion[self.convesacion.length-1].content)
                             }else{
-                                
+                                this.convesacion.pop()
                                 console.log("terminado con errores")
                             }
                             return
@@ -131,10 +138,16 @@ class ChatGPT{
                             
                             if(rstat==200){
                                 if(data.object == "chat.token"){
-                                    chatH.token = data.token;
-                                }else if(data.choices[0].delta.hasOwnProperty("content")){
-                                    let temp = data.choices[0].delta.content;
-                                    $(document).trigger("precarga:mensaje", temp);
+                                    self.token = data.token;
+                                }else if(data.choices[0].hasOwnProperty("delta")){
+                                    let temp = data.choices[0].delta;
+                                    let key = Object.keys(temp)[0];
+                                    let elActual = self.convesacion[self.convesacion.length-1]
+                                    if(!elActual.hasOwnProperty(key)){elActual[key]="";}
+                                    elActual[key] += temp[key]
+                                    if(elActual.hasOwnProperty("content") && temp.content){
+                                        $(document).trigger("precarga:mensaje", temp.content);
+                                    }
                                 }
                             }else{
                                 $(document).trigger("precarga:error", {status: rstat, mensaje: data.detail});

static/js/windowHandler.js

@@ -80,7 +80,15 @@ class WindowHandler{
     cargarChat(mensajes){
         mensajes.forEach((mensaje) => {
             if(mensaje.role!="system"){
-                this.procesarTexto(mensaje);
+                let clone = this.template.clone();
+                if(mensaje.role=="user") {clone.addClass("me");}
+                let texto = this.procesarTexto(mensaje.content);
+                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);
             }
         });
     }
@@ -113,11 +121,12 @@ class WindowHandler{
 
     respuestaFin(){
         let msgProcesado = this.procesarTexto(this.mensaje);
+        this.mensaje = "";
         $("button").prop("disabled", false);
         $("textarea").prop("disabled", false);
         $("textarea").focus();
-        this.active.find("div p").html(msgProcesado)
-        Prism.highlightAllUnder(this.active[0])
+        this.active.find("div p").html(msgProcesado);
+        Prism.highlightAllUnder(this.active[0]);
         this.active = false;
         this.chatbox.scrollTop(this.chatbox[0].scrollHeight);
     }