From 5756586cde6ed6da147119113fb5a5fd640d5f83 Mon Sep 17 00:00:00 2001
From: Heiner Lohaus <hlohaus@users.noreply.github.com>
Date: Sun, 14 Jan 2024 07:45:41 +0100
Subject: Refactor code with AI Add doctypes to many functions Add file upload
 for text files Add alternative url to FreeChatgpt Add webp to allowed image
 types

---
 g4f/gui/client/js/chat.v1.js | 74 +++++++++++++++++++++++++++++++-------------
 1 file changed, 53 insertions(+), 21 deletions(-)

(limited to 'g4f/gui/client/js')

diff --git a/g4f/gui/client/js/chat.v1.js b/g4f/gui/client/js/chat.v1.js
index ccc9461b..7ed9f183 100644
--- a/g4f/gui/client/js/chat.v1.js
+++ b/g4f/gui/client/js/chat.v1.js
@@ -7,7 +7,9 @@ const spinner           = box_conversations.querySelector(".spinner");
 const stop_generating   = document.querySelector(`.stop_generating`);
 const regenerate        = document.querySelector(`.regenerate`);
 const send_button       = document.querySelector(`#send-button`);
-const imageInput        = document.querySelector('#image') ;
+const imageInput        = document.querySelector('#image');
+const fileInput         = document.querySelector('#file');
+
 let   prompt_lock       = false;
 
 hljs.addPlugin(new CopyButtonPlugin());
@@ -42,6 +44,11 @@ const handle_ask = async () => {
     if (message.length > 0) {
         message_input.value = '';
         await add_conversation(window.conversation_id, message);
+        if ("text" in fileInput.dataset) {
+            message += '\n```' + fileInput.dataset.type + '\n'; 
+            message += fileInput.dataset.text;
+            message += '\n```'
+        }
         await add_message(window.conversation_id, "user", message);
         window.token = message_id();
         message_box.innerHTML += `
@@ -55,6 +62,9 @@ const handle_ask = async () => {
                 </div>
             </div>
         `;
+        document.querySelectorAll('code:not(.hljs').forEach((el) => {
+            hljs.highlightElement(el);
+        });
         await ask_gpt();
     }
 };
@@ -171,17 +181,30 @@ const ask_gpt = async () => {
                 content_inner.innerHTML += "<p>An error occured, please try again, if the problem persists, please use a other model or provider.</p>";
             } else {
                 html = markdown_render(text);
-                html = html.substring(0, html.lastIndexOf('</p>')) + '<span id="cursor"></span></p>';
+                let lastElement, lastIndex = null;
+                for (element of ['</p>', '</code></pre>', '</li>\n</ol>']) {
+                    const index = html.lastIndexOf(element)
+                    if (index > lastIndex) {
+                        lastElement = element;
+                        lastIndex = index;
+                    }
+                }
+                if (lastIndex) {
+                    html = html.substring(0, lastIndex) + '<span id="cursor"></span>' + lastElement;
+                }
                 content_inner.innerHTML = html;
-                document.querySelectorAll('code').forEach((el) => {
+                document.querySelectorAll('code:not(.hljs').forEach((el) => {
                     hljs.highlightElement(el);
                 });
             }
 
             window.scrollTo(0, 0);
-            message_box.scrollTo({ top: message_box.scrollHeight, behavior: "auto" });
+            if (message_box.scrollTop >= message_box.scrollHeight - message_box.clientHeight - 100) {
+                message_box.scrollTo({ top: message_box.scrollHeight, behavior: "auto" });
+            }
         }
         if (!error && imageInput) imageInput.value = "";
+        if (!error && fileInput) fileInput.value = "";
     } catch (e) {
         console.error(e);
 
@@ -305,7 +328,7 @@ const load_conversation = async (conversation_id) => {
         `;
     }
 
-    document.querySelectorAll(`code`).forEach((el) => {
+    document.querySelectorAll('code:not(.hljs').forEach((el) => {
         hljs.highlightElement(el);
     });
 
@@ -400,7 +423,7 @@ const load_conversations = async (limit, offset, loader) => {
         `;
     }
 
-    document.querySelectorAll(`code`).forEach((el) => {
+    document.querySelectorAll('code:not(.hljs').forEach((el) => {
         hljs.highlightElement(el);
     });
 };
@@ -602,14 +625,7 @@ observer.observe(message_input, { attributes: true });
 (async () => {
     response = await fetch('/backend-api/v2/models')
     models = await response.json()
-    
     let select = document.getElementById('model');
-    select.textContent = '';
-
-    let auto = document.createElement('option');
-    auto.value = '';
-    auto.text = 'Model: Default';
-    select.appendChild(auto);
 
     for (model of models) {
         let option = document.createElement('option');
@@ -619,14 +635,7 @@ observer.observe(message_input, { attributes: true });
 
     response = await fetch('/backend-api/v2/providers')
     providers = await response.json()
-    
     select = document.getElementById('provider');
-    select.textContent = '';
-
-    auto = document.createElement('option');
-    auto.value = '';
-    auto.text = 'Provider: Auto';
-    select.appendChild(auto);
 
     for (provider of providers) {
         let option = document.createElement('option');
@@ -650,4 +659,27 @@ observer.observe(message_input, { attributes: true });
         text += versions["version"];
     }
     document.getElementById("version_text").innerHTML = text
-})()
\ No newline at end of file
+})()
+
+fileInput.addEventListener('change', async (event) => {
+    if (fileInput.files.length) {
+        type = fileInput.files[0].type;
+        if (type && type.indexOf('/')) {
+            type = type.split('/').pop().replace('x-', '')
+            type = type.replace('plain', 'plaintext')
+                       .replace('shellscript', 'sh')
+                       .replace('svg+xml', 'svg')
+                       .replace('vnd.trolltech.linguist', 'ts')
+        } else {
+            type = fileInput.files[0].name.split('.').pop()
+        }
+        fileInput.dataset.type = type
+        const reader = new FileReader();
+        reader.addEventListener('load', (event) => {
+            fileInput.dataset.text = event.target.result;
+        });
+        reader.readAsText(fileInput.files[0]);
+    } else {
+        delete fileInput.dataset.text;
+    }
+});
\ No newline at end of file
-- 
cgit v1.2.3