Merge remote-tracking branch 'chattest/main' into switch-button

main.py

@@ -81,6 +81,13 @@ async def root(request: Request, credentials: HTTPBasicCredentials = Depends(sec
         with open(os.path.join("static", "main.html")) as f:
             return HTMLResponse(f.read().replace("{% token %}", token).replace("{% version %}", fecha_unix))
 
+@app.get("/tabs", response_class=HTMLResponse)
+async def root_tabs(request: Request, credentials: HTTPBasicCredentials = Depends(security)):
+    if authenticate_user(credentials):
+        token = create_jwt_token({"user":credentials.username})
+        with open(os.path.join("static", "main2.html")) as f:
+            return HTMLResponse(f.read().replace("{% token %}", token).replace("{% version %}", fecha_unix))
+
     
 @app.post("/chat_stream")
 async def chat_stream(data = Depends(validate_token)):

static/css/app.css

@@ -1,3 +1,5 @@
+@import "switch.css";
+
 html,
 body {
     margin: 0;
@@ -190,7 +192,7 @@ button{
     background-color: #ddd;
     background-repeat: no-repeat;
     background-position: center;
-    border-left: solid 1px #555;
+    /* border-left: solid 1px #555; */
 }
 .input-box .input-send {
     background-image: url(/static/img/send.png);
@@ -204,12 +206,12 @@ button{
 .input-box button:last-child{
     border-radius: 0 5px 5px 0;
 }
-.input-box button:disabled, .input-box textarea:disabled{
+.input-box button:disabled, .input-box textarea:disabled, .input-box input:disabled{
     background-color: #8b8b8b;
     border-color: #8b8b8b;
-
+    filter: contrast(0.5);
 }
 
 #message-template{
     display: none;
-}
+}

static/css/app2.css

@@ -0,0 +1,85 @@
+
+.wrapper {
+    padding: 0px 20px 80px 20px !important;
+    border-bottom: 5px solid #222f3d;
+    background: #34495e;
+    margin: 0;
+    min-width: 320px;
+    width: 100%;
+}
+
+.tab {
+    overflow: hidden;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+  }
+  
+  .tab button {
+    background-color: inherit;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+  }
+  
+  .tab button:hover {
+    background-color: #ddd;
+  }
+  
+  .tab button.active {
+    background-color: #ccc;
+  }
+  
+  .tabcontent {
+    display: none;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-top: none;
+  }
+  
+  .tabcontent:first-child {
+    display: block;
+  }
+
+
+  .wrapper .tab {
+    overflow: hidden;
+    display: flex;
+    border-bottom: 1px solid #ccc;
+    background-color: #fff;
+  }
+  
+  .wrapper .tab button {
+    background-color: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 10px 15px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #777;
+    transition: 0.3s;
+  }
+  
+  .wrapper .tab button:hover {
+    background-color: #ddd;
+  }
+  
+  .wrapper .tab button.active {
+    border-bottom: 2px solid #4285f4;
+    color: #4285f4;
+  }
+  
+  /* Estilos para el contenido de los tabs */
+  .wrapper .tabcontent {
+    display: none;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-top: none;
+  }
+  
+  .wrapper .tabcontent:first-child {
+    display: block;
+  }

static/css/switch.css

@@ -0,0 +1,72 @@
+/* Estilos del botón para google*/
+
+.switch {
+  position: relative;
+  display: inline-block;
+  min-width: 54px;
+  max-width: 54px;
+  height: 30px;
+  margin: auto;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #a1a1a1;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 23px;
+  width: 23px;
+  left: 4px;
+  bottom: 4px;
+  background: no-repeat center/80% url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/235px-Google_%22G%22_Logo.svg.png);
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked+.slider {
+  background-color: #3BBD96;
+}
+
+input:focus+.slider {
+  box-shadow: 0 0 1px #3BBD96;
+}
+
+input:checked+.slider:before {
+  -webkit-transform: translateX(23px);
+  -ms-transform: translateX(23px);
+  transform: translateX(23px);
+  box-shadow: 0 0 3px rgba(0, 0, 0, 5.5);
+}
+
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 5.5);
+  background: no-repeat center/80% url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/235px-Google_%22G%22_Logo.svg.png);
+  background-color: white;
+}
+
+.switch:has(input:disabled) {
+  background: #8b8b8b;
+  filter: contrast(0.5);
+}

static/js/chatHandler.js

@@ -24,12 +24,11 @@ class ChatGPT{
             this.config = {
                 temperature: 1.0,
                 frequency_penalty: 0.0,
-                presence_penalty: 0.0
+                presence_penalty: 0.0,
+                googleSearch: false
             };
         }
-
         this.execStart = 0;
-
         this.endpointChat = "/chat_stream";
         this.token = token
         // this.evCtx = document
@@ -45,7 +44,12 @@ class ChatGPT{
             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));
         
         
@@ -77,8 +81,11 @@ class ChatGPT{
     }
 
     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})

static/js/windowHandler.js

@@ -1,4 +1,5 @@
 class WindowHandler{
+  //en este se hacen los cambios visuales
     constructor(){
         this.chatbox = $("#chat");
         this.template = $('<div class="message"><div><p></p></div></div>');
@@ -18,6 +19,12 @@ class WindowHandler{
         $("#input-text").keypress(() => this.recalcularTextarea());
         $("#input-text").keyup(() => this.recalcularTextarea());
         $("#input-text").keydown(() => this.recalcularTextarea());
+        
+        
+      $("#input-activar").change((event) => this.toggleSwitch(event));
+        
+        
+        
         this.cargarChat(chatH.convesacion);
 
         $(document).on("precarga:inicio", (event, params) => {
@@ -102,6 +109,7 @@ class WindowHandler{
         $("#input-text").val("");
         $("button").prop("disabled", true);
         $("textarea").prop("disabled", true);
+        $(".switch input").prop("disabled", true);
         this.mensaje = ""
         let clone = this.template.clone();
         clone.addClass("me");
@@ -129,6 +137,7 @@ class WindowHandler{
         this.mensaje = "";
         $("button").prop("disabled", false);
         $("textarea").prop("disabled", false);
+        $(".switch input").prop("disabled", false);
         $("textarea").focus();
         this.active.find("div p").html(msgProcesado);
         Prism.highlightAllUnder(this.active[0]);
@@ -156,7 +165,15 @@ class WindowHandler{
 
     }
 
-
-
-
-}
+    toggleSwitch(event) {
+      //boton de switch para consultar con google.
+      let checkBox = event.currentTarget;
+      $(document).trigger("accion:switch_change", checkBox.checked);
+      if (checkBox.checked) {
+        console.log("Switch is turned on.");
+      } else {
+        console.log("Switch is turned off.");
+      }
+  }
+
+}

static/main.html

@@ -18,6 +18,10 @@
     <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>
+      <label class="switch">
+        <input type="checkbox" id="input-activar">
+        <span class="slider round"></span>
+      </label>
       <button class='input-delete' id='input-delete' ></button>
     </div>
   </div>

static/main2.html

@@ -0,0 +1,81 @@
+<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 %}">
+    <link rel="stylesheet" href="static/css/app2.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">
+      <div class="tab">
+        <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button>
+        <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
+        <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button>
+      </div>
+      <div id="tab1" class="tabcontent">
+        <div class="chat" id="chat1"></div>
+        <div class="input-box">
+          <textarea class="input-text" id="input-text1" placeholder="Type something" type="text" autofocus></textarea>
+          <button class="input-send" id="input-send1"></button>
+          <button class="input-delete" id="input-delete1"></button>
+        </div>
+      </div>
+      <div id="tab2" class="tabcontent">
+        <div class="chat" id="chat2"></div>
+        <div class="input-box">
+          <textarea class="input-text" id="input-text2" placeholder="Type something" type="text" autofocus></textarea>
+          <button class="input-send" id="input-send2"></button>
+          <button class="input-delete" id="input-delete2"></button>
+        </div>
+      </div>
+      <div id="tab3" class="tabcontent">
+        <div class="chat" id="chat3"></div>
+        <div class="input-box">
+          <textarea class="input-text" id="input-text3" placeholder="Type something" type="text" autofocus></textarea>
+          <button class="input-send" id="input-send3"></button>
+          <button class="input-delete" id="input-delete3"></button>
+        </div>
+      </div>  
+    </div>
+  
+
+
+  <script> 
+    let windH = null;
+    let chatH = null;
+
+    $(document).ready(function() {
+      chatH = new ChatGPT("{% token %}");
+      windH = new WindowHandler();
+      
+      
+      
+    });
+      function openTab(evt, tabName) {
+              var i, tabcontent, tablinks;
+              
+              tabcontent = document.getElementsByClassName("tabcontent");
+              for (i = 0; i < tabcontent.length; i++) {
+                tabcontent[i].style.display = "none";
+              }
+              
+              tablinks = document.getElementsByClassName("tablinks");
+              for (i = 0; i < tablinks.length; i++) {
+                tablinks[i].className = tablinks[i].className.replace(" active", "");
+              }
+              
+              document.getElementById(tabName).style.display = "block";
+              evt.currentTarget.className += " active";
+        }
+    </script>
+</body>
+</html>