2 files changed, 31 insertions, 37 deletions

diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index 058fd521..fea52629 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -653,7 +653,7 @@ select {
     font-size: 15px;
     width: 100%;
     color: var(--colour-3);
-    min-height: 50px;
+    min-height: 49px;
     height: 59px;
     outline: none;
     padding: var(--inner-gap) var(--section-gap);
@@ -809,7 +809,7 @@ ul {
 }
 
 .mobile-sidebar {
-    display: none !important;
+    display: none;
     position: absolute;
     z-index: 100000;
     top: 0;
@@ -850,12 +850,8 @@ ul {
         gap: 15px;
     }
 
-    .field {
-        width: fit-content;
-    }
-
     .mobile-sidebar {
-        display: flex !important;
+        display: flex;
     }
 
     #systemPrompt {
@@ -1090,7 +1086,13 @@ a:-webkit-any-link {
 }
 
 .settings textarea {
-    height: 51px;
+    height: 19px;
+    min-height: 19px;
+    padding: 0;
+}
+
+.settings .field.box {
+    padding: var(--inner-gap) var(--inner-gap) var(--inner-gap) 0;
 }
 
 .settings, .images {
@@ -1112,7 +1114,6 @@ a:-webkit-any-link {
 .settings textarea {
     background-color: transparent;
     border: none;
-    padding: var(--inner-gap) 0;
 }
 
 .settings input {
@@ -1130,10 +1131,7 @@ a:-webkit-any-link {
 
 .settings .label {
     font-size: 15px;
-    padding: var(--inner-gap) 0;
-    width: fit-content;
-    min-width: 190px;
-    margin-left: var(--section-gap);
+    margin-left: var(--inner-gap);
     white-space:nowrap;
 }
 
diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
index d07ca4ea..fd58be6d 100644
--- a/g4f/gui/client/static/js/chat.v1.js
+++ b/g4f/gui/client/static/js/chat.v1.js
@@ -179,12 +179,14 @@ const register_message_buttons = async () => {
 }
 
 const delete_conversations = async () => {
+    const remove_keys = [];
     for (let i = 0; i < appStorage.length; i++){
         let key = appStorage.key(i);
         if (key.startsWith("conversation:")) {
-            appStorage.removeItem(key);
+            remove_keys.push(key);
         }
     }
+    remove_keys.forEach((key)=>appStorage.removeItem(key));
     hide_sidebar();
     await new_conversation();
 };
@@ -274,31 +276,21 @@ const prepare_messages = (messages, filter_last_message=true) => {
     }
 
     let new_messages = [];
-    if (messages) {
-        for (i in messages) {
-            new_message = messages[i];
-            // Remove generated images from history
-            new_message.content = new_message.content.replaceAll(
-                /<!-- generated images start -->[\s\S]+<!-- generated images end -->/gm,
-                ""
-            )
-            delete new_message["provider"];
-            // Remove regenerated messages
-            if (!new_message.regenerate) {
-                new_messages.push(new_message)
-            }
-        }
-    }
-
-    // Add system message
-    system_content = systemPrompt?.value;
-    if (system_content) {
-        new_messages.unshift({
+    if (systemPrompt?.value) {
+        new_messages.push({
             "role": "system",
-            "content": system_content
+            "content": systemPrompt.value
         });
     }
-
+    messages.forEach((new_message) => {
+        // Include only not regenerated messages
+        if (!new_message.regenerate) {
+            // Remove generated images from history
+            new_message.content = filter_message(new_message.content);
+            delete new_message.provider;
+            new_messages.push(new_message)
+        }
+    });
     return new_messages;
 }
 
@@ -413,8 +405,11 @@ const ask_gpt = async () => {
         if (file && !provider)
             provider = "Bing";
         let api_key = null;
-        if (provider)
+        if (provider) {
             api_key = document.getElementById(`${provider}-api_key`)?.value || null;
+            if (api_key == null)
+                api_key = document.querySelector(`.${provider}-api_key`)?.value || null;
+        }
         await api("conversation", {
             id: window.token,
             conversation_id: window.conversation_id,
@@ -949,6 +944,7 @@ function count_chars(text) {
 }
 
 function count_words_and_tokens(text, model) {
+    text = filter_message(text);
     return `(${count_words(text)} words, ${count_chars(text)} chars, ${count_tokens(model, text)} tokens)`;
 }