static/js/chatHandler.js

class ChatGPT{
    constructor(token){
        
        $("#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{
            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,
                googleSearch: false
            };
        }
        this.execStart = 0;
        this.endpointChat = "/chat_stream";
        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);
        });
        $(document).on("enviar:reintentar", (event, params) => {
            this.reintentos++;
            this.enviar(params.mensaje)
        });
        // Signaling
        // los on se escuchan cuando suena lo que se està disparando.
        $(document).on("accion:switch_change", (event, params) => {
          this.config.googleSearch = params;
          console.log(this.config);
        })
        $(document).on("enviar:error", (event, params) => this.reenviar(params));
        
        
    }

    limpiarConfig(){
        localStorage.removeItem('convesacion');
        localStorage.removeItem('config');
        this.config = {
            temperature: 1.0,
            frequency_penalty: 0.0,
            presence_penalty: 0.0
        };
        this.convesacion = [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.mensaje});
            return
        }
        if(this.reintentos < 3 ){
            $(document).trigger("enviar:enviar",{jqXHR:params.jqXHR, status:params.status, error:params.error, execTime:params.execTime, mensaje:params.mensaje});

        }else{
            $(document).trigger("precarga:error",{jqXHR:params.jqXHR, status:params.status, error:params.error, execTime:params.execTime, mensaje:params.mensaje});
        }
    }

    enviar(mensaje){
        // Configuración de variables base
        let tempMensajes = [];
        let tokens = 0;

        // Calculo de tokens y reconfiguración de mensajes para este caso
        for(let i = 0; i < this.convesacion.length; i++){
            let actMsg = this.convesacion[i];
            tempMensajes.push({role: actMsg.role, content: actMsg.content})
            tokens += actMsg.tokens 
        }
        
        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({
                messages: tempMensajes,
                token: this.token,
                config: this.config
            }),  
        }).then(response => ({
            rb: response.body, 
            rstat: response.status
        })).then(({rb, rstat}) => {
            if(!rb){
                return false;
            }
            const reader = rb.getReader();
        
            return new ReadableStream({
              start(controller) {
                function push() {
                    reader.read().then(({done, value}) => {
                        
                        if(done){
                            controller.close();
                            if(rstat==200){
                                $(document).trigger("precarga:fin");
                                localStorage.setItem("convesacion", JSON.stringify(self.convesacion))
                                console.log("terminado", self.convesacion[self.convesacion.length-1].content)
                            }else{
                                self.convesacion.pop()
                                $(document).trigger("enviar:error", {mensaje: mensaje})
                                
                            }
                            return
                        }

                        let elements = new TextDecoder("utf-8").decode(value).split("}{");
                        let elLen = elements.length;
                        for(let i in elements){
                            let data =  elements[i];
                            if(!data){
                                continue;
                            }
                            
                            data =JSON.parse((i>0?"{":"") + data + (i<elLen-1?"}":""));
                            
                            if(rstat==200){
                                if(data.object == "chat.token"){
                                    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});
                            }
                            
                        }
                        push();
                    })
                }
        
                push();
              },
            });
        }).then(data => {
        }).catch(err =>{
            console.log('Solicitud fallida', err)
        }); 


    }


      
}