From 63b7e96c289b34959048db825e7273d8a84ed68a Mon Sep 17 00:00:00 2001
From: hlohaus <983577+hlohaus@users.noreply.github.com>
Date: Sat, 1 Feb 2025 00:46:37 +0100
Subject: Fix styling in GUI, improve mobile support

---
 g4f/gui/client/index.html           |  2 +-
 g4f/gui/client/static/css/style.css | 24 ++++++++++++-------
 g4f/gui/client/static/js/chat.v1.js | 48 ++++++++++++++++++++++++++-----------
 3 files changed, 51 insertions(+), 23 deletions(-)

(limited to 'g4f/gui/client')

diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html
index fc796647..370b4867 100644
--- a/g4f/gui/client/index.html
+++ b/g4f/gui/client/index.html
@@ -248,7 +248,7 @@
                 </div>
             </div>
             <div class="user-input">
-                <div class="box input-box">
+                <div class="box input-area">
                     <textarea id="message-input" placeholder="Ask a question" cols="30" rows="10"
                         style="white-space: pre-wrap;resize: none;"></textarea>
                     <label class="file-label image-label" for="image" title="">
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index 45323999..34bc030e 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -971,10 +971,10 @@ select:hover,
     }
 }
 
-.input-box {
+.input-area {
     display: flex;
     align-items: center;
-    cursor: pointer;
+    padding: 10px;
 }
 
 .info {
@@ -1150,6 +1150,7 @@ ul {
         align-items: flex-start;
         flex-wrap: wrap;
         gap: 8px;
+        padding-left: 4px;
     }
 
     .mobile-sidebar {
@@ -1317,19 +1318,20 @@ ul {
     border: 1px dashed #e4d4ffa6;
     border-radius: 4px;
     cursor: pointer;
-    padding-left: 4px;
-    padding-right: 5px;
-    padding-top: 2px;
-    padding-bottom: 2px;
     position: absolute;
     bottom: 8px;
-    right: 8px;
+    right: 4px;
+    padding: 4px;
 }
 
 #send-button:hover {
     border: 1px solid #e4d4ffc9;
 }
 
+#send-button i {
+    padding: 2px;
+}
+
 form textarea {
     height: 20px;
     min-height: 20px;
@@ -1434,7 +1436,13 @@ form .field.saved .fa-xmark {
 
 #message-input {
     height: 90px;
-    margin-left: 20px;
+    flex: 1;
+    padding: 10px;
+    padding-left: 20px;
+    border-radius: 20px;
+    font-size: 14px;
+    margin-right: 10px;
+    outline: none;
     max-height: 200px;
 }
 
diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
index 15faf1c7..37588101 100644
--- a/g4f/gui/client/static/js/chat.v1.js
+++ b/g4f/gui/client/static/js/chat.v1.js
@@ -39,7 +39,7 @@ let reasoning_storage = {}
 let is_demo = false;
 
 messageInput.addEventListener("blur", () => {
-    window.scrollTo(0, 0);
+    document.documentElement.scrollTop = 0;
 });
 
 messageInput.addEventListener("focus", () => {
@@ -244,16 +244,23 @@ const register_message_buttons = async () => {
         if (!("click" in el.dataset)) {
             el.dataset.click = "true";
             el.addEventListener("click", async () => {
-                let message_el = get_message_el(el);
                 const elem = window.document.createElement('a');
                 let filename = `chat ${new Date().toLocaleString()}.md`.replaceAll(":", "-");
-                elem.href = message_el.dataset.object_url;
+                const conversation = await get_conversation(window.conversation_id);
+                let buffer = "";
+                conversation.items.forEach(message => {
+                    buffer += `${message.role == 'user' ? 'User' : 'Assistant'}: ${message.content.trim()}\n\n\n`;
+                });
+                const file = new File([buffer.trim()], 'message.md', {type: 'text/plain'});
+                const objectUrl = URL.createObjectURL(file);
+                elem.href = objectUrl;
                 elem.download = filename;        
                 document.body.appendChild(elem);
                 elem.click();        
                 document.body.removeChild(elem);
                 el.classList.add("clicked");
                 setTimeout(() => el.classList.remove("clicked"), 1000);
+                URL.revokeObjectURL(objectUrl);
             })
         }
     });
@@ -1771,7 +1778,11 @@ function update_message(content_map, message_id, content = null, scroll = true)
 let countFocus = messageInput;
 const count_input = async () => {
     if (countFocus.value) {
-        inputCount.innerText = count_words_and_tokens(countFocus.value, get_selected_model()?.value);
+        if (window.matchMedia("(pointer:coarse)")) {
+            inputCount.innerText = `(${count_tokens(get_selected_model()?.value, countFocus.value)} tokens)`;
+        } else {
+            inputCount.innerText = count_words_and_tokens(countFocus.value, get_selected_model()?.value);
+        }
     } else {
         inputCount.innerText = "";
     }
@@ -1815,11 +1826,7 @@ async function on_load() {
         let chat_url = new URL(window.location.href)
         let chat_params = new URLSearchParams(chat_url.search);
         if (chat_params.get("prompt")) {
-            messageInput.value = chat_params.title
-                               + chat_params.title ? "\n\n\n" : ""
-                               + chat_params.prompt
-                               + chat_params.prompt && chat_params.url ? "\n\n\n" : ""
-                               + chat_params.url;
+            messageInput.value = `${chat_params.title}\n${chat_params.prompt}\n${chat_params.url}`.trim();
             messageInput.style.height = messageInput.scrollHeight  + "px";
             messageInput.focus();
             //await handle_ask();
@@ -1870,7 +1877,8 @@ async function on_api() {
     messageInput.addEventListener("keydown", async (evt) => {
         if (prompt_lock) return;
         // If not mobile and not shift enter
-        if (!window.matchMedia("(pointer:coarse)").matches && evt.keyCode === 13 && !evt.shiftKey) {
+        let do_enter = messageInput.value.endsWith("\n\n");
+        if (do_enter || !window.matchMedia("(pointer:coarse)").matches && evt.keyCode === 13 && !evt.shiftKey) {
             evt.preventDefault();
             console.log("pressed enter");
             prompt_lock = true;
@@ -1892,7 +1900,9 @@ async function on_api() {
         stop_recognition();
         await handle_ask(false);
     });
-    messageInput.focus();
+    messageInput.addEventListener(`click`, async () => {
+        stop_recognition();
+    });
 
     let provider_options = [];
     models = await api("models");
@@ -2394,14 +2404,18 @@ async function load_provider_models(provider=null) {
     if (models && models.length > 0) {
         modelSelect.classList.add("hidden");
         modelProvider.classList.remove("hidden");
-        models.forEach((model) => {
+        let defaultIndex = 0;
+        models.forEach((model, i) => {
             let option = document.createElement('option');
             option.value = model.model;
             option.dataset.label = model.model;
             option.text = `${model.model}${model.image ? " (Image Generation)" : ""}${model.vision ? " (Image Upload)" : ""}`;
-            option.selected = model.default;
             modelProvider.appendChild(option);
+            if (model.default) {
+                defaultIndex = i;
+            }
         });
+        modelProvider.selectedIndex = defaultIndex;
         let value = appStorage.getItem(modelProvider.name);
         if (value) {
             modelProvider.value = value;
@@ -2411,7 +2425,12 @@ async function load_provider_models(provider=null) {
         modelSelect.classList.remove("hidden");
     }
 };
-providerSelect.addEventListener("change", () => load_provider_models());
+providerSelect.addEventListener("change", () => {
+    load_provider_models()
+    messageInput.focus();
+});
+modelSelect.addEventListener("change", () => messageInput.focus());
+modelProvider.addEventListener("change", () =>  messageInput.focus());
 
 document.getElementById("pin").addEventListener("click", async () => {
     const pin_container = document.getElementById("pin_container");
@@ -2446,6 +2465,7 @@ switchInput.addEventListener("change", () => {
 });
 searchButton.addEventListener("click", async () => {
     switchInput.click();
+    messageInput.focus();
 });
 
 function save_storage() {
-- 
cgit v1.2.3