From 9ddac1715f7d656ebcf0bc4d0247e9bfd32626fa Mon Sep 17 00:00:00 2001
From: Heiner Lohaus <hlohaus@users.noreply.github.com>
Date: Sat, 18 May 2024 23:13:57 +0200
Subject: Add get/set cookies dir, hide prompt option in gui

---
 g4f/gui/client/index.html           | 25 ++++++++++++++-----------
 g4f/gui/client/static/css/style.css | 13 ++++++++++++-
 g4f/gui/client/static/js/chat.v1.js | 23 +++++++++++++++++------
 3 files changed, 43 insertions(+), 18 deletions(-)

(limited to 'g4f/gui/client')

diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html
index 064e4594..d3cddd3c 100644
--- a/g4f/gui/client/index.html
+++ b/g4f/gui/client/index.html
@@ -93,22 +93,22 @@
             <div class="paper">
             <h3>Settings</h3>
             <div class="field">
-                <span class="label">Web Access</span>
+                <span class="label">Web Access with DuckDuckGo</span>
                 <input type="checkbox" id="switch" />
                 <label for="switch" class="toogle" title="Add the pages of the first 5 search results to the query."></label>
             </div>
             <div class="field">
-                <span class="label">Disable History</span>
+                <span class="label">Disable Conversation History</span>
                 <input type="checkbox" id="history" />
                 <label for="history" class="toogle" title="To improve the reaction time or if you have trouble with large conversations."></label>
             </div>
             <div class="field">
-                <span class="label">Hide System prompt</span>
+                <span class="label">Hide System-prompt</span>
                 <input type="checkbox" id="hide-systemPrompt" />
                 <label for="hide-systemPrompt" class="toogle" title="For more space on phones"></label>
             </div>
             <div class="field">
-                <span class="label">Auto continue</span>
+                <span class="label">Auto continue in ChatGPT</span>
                 <input id="auto_continue" type="checkbox" name="auto_continue" checked/>
                 <label for="auto_continue" class="toogle" title="Continue large responses in OpenaiChat"></label>
             </div>
@@ -121,8 +121,8 @@
                 <input type="text" id="recognition-language" value="" placeholder="navigator.language"/>
             </div>
             <div class="field box">
-                <label for="Bing-api_key" class="label" title="">Bing:</label>
-                <textarea id="Bing-api_key" name="Bing[api_key]" class="BingCreateImages-api_key" placeholder="&quot;_U&quot; cookie"></textarea>
+                <label for="BingCreateImages-api_key" class="label" title="">Microsoft Designer in Bing:</label>
+                <textarea id="BingCreateImages-api_key" name="BingCreateImages[api_key]" placeholder="&quot;_U&quot; cookie"></textarea>
             </div>
             <div class="field box">
                 <label for="DeepInfra-api_key" class="label" title="">DeepInfra:</label>
@@ -144,14 +144,14 @@
                 <label for="Openai-api_key" class="label" title="">OpenAI API:</label>
                 <textarea id="Openai-api_key" name="Openai[api_key]" placeholder="api_key"></textarea>
             </div>
-            <div class="field box">
-                <label for="OpenaiAccount-api_key" class="label" title="">OpenAI ChatGPT:</label>
-                <textarea id="OpenaiAccount-api_key" name="OpenaiAccount[api_key]" class="OpenaiChat-api_key" placeholder="access_key"></textarea>
-            </div>
             <div class="field box">
                 <label for="OpenRouter-api_key" class="label" title="">OpenRouter:</label>
                 <textarea id="OpenRouter-api_key" name="OpenRouter[api_key]" placeholder="api_key"></textarea>
             </div>
+            <div class="field box">
+                <label for="PerplexityApi-api_key" class="label" title="">Perplexity API:</label>
+                <textarea id="PerplexityApi-api_key" name="PerplexityApi[api_key]" placeholder="api_key"></textarea>
+            </div>
             <div class="field box">
                 <label for="Replicate-api_key" class="label" title="">Replicate:</label>
                 <textarea id="Replicate-api_key" name="Replicate[api_key]" class="ReplicateImage-api_key" placeholder="api_key"></textarea>
@@ -173,7 +173,10 @@
             <div id="messages" class="box"></div>
             <div class="toolbar">
                 <div id="input-count" class="">
-                    &nbsp;
+                    <button class="hide-input">
+                        <i class="fa-solid fa-angles-down"></i>
+                    </button>
+                    <span class="text"></span>
                 </div>
                 <div class="stop_generating stop_generating-hidden">
                     <button id="cancelButton">
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index 01bc17fa..005cb8bf 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -457,7 +457,11 @@ body {
 #input-count {
     width: fit-content;
     font-size: 12px;
-    padding: 6px var(--inner-gap);
+    padding: 6px 6px;
+}
+
+#input-count .text {
+    padding: 0 4px;
 }
 
 .stop_generating, .toolbar .regenerate {
@@ -491,6 +495,13 @@ body {
     animation: show_popup 0.4s;
 }
 
+.toolbar .hide-input {
+    background: transparent;
+    border: none;
+    color: var(--colour-3);
+    cursor: pointer;
+}
+
 @keyframes show_popup {
     from {
         opacity: 0;
diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
index a0178e63..46d5039e 100644
--- a/g4f/gui/client/static/js/chat.v1.js
+++ b/g4f/gui/client/static/js/chat.v1.js
@@ -11,7 +11,7 @@ const imageInput        = document.getElementById("image");
 const cameraInput       = document.getElementById("camera");
 const fileInput         = document.getElementById("file");
 const microLabel        = document.querySelector(".micro-label");
-const inputCount        = document.getElementById("input-count");
+const inputCount        = document.getElementById("input-count").querySelector(".text");
 const providerSelect    = document.getElementById("provider");
 const modelSelect       = document.getElementById("model");
 const modelProvider     = document.getElementById("model2");
@@ -41,9 +41,7 @@ appStorage = window.localStorage || {
     length: 0
 }
 
-const markdown = window.markdownit({
-    html: true,
-});
+const markdown = window.markdownit();
 const markdown_render = (content) => {
     return markdown.render(content
         .replaceAll(/<!-- generated images start -->|<!-- generated images end -->/gm, "")
@@ -813,6 +811,17 @@ document.getElementById("regenerateButton").addEventListener("click", async () =
     await ask_gpt();
 });
 
+const hide_input = document.querySelector(".toolbar .hide-input");
+hide_input.addEventListener("click", async (e) => {
+    const icon = hide_input.querySelector("i");
+    const func = icon.classList.contains("fa-angles-down") ? "add" : "remove";
+    const remv = icon.classList.contains("fa-angles-down") ? "remove" : "add";
+    icon.classList[func]("fa-angles-up");
+    icon.classList[remv]("fa-angles-down");
+    document.querySelector(".conversation .user-input").classList[func]("hidden");
+    document.querySelector(".conversation .buttons").classList[func]("hidden");
+});
+
 const uuid = () => {
     return `xxxxxxxx-xxxx-4xxx-yxxx-${Date.now().toString(16)}`.replace(
         /[xy]/g,
@@ -1016,7 +1025,7 @@ const count_input = async () => {
         if (countFocus.value) {
             inputCount.innerText = count_words_and_tokens(countFocus.value, get_selected_model());
         } else {
-            inputCount.innerHTML = "&nbsp;"
+            inputCount.innerText = "";
         }
     }, 100);
 };
@@ -1060,6 +1069,8 @@ async function on_api() {
     messageInput.addEventListener("keydown", async (evt) => {
         if (prompt_lock) return;
 
+        // If not mobile
+        if (!window.matchMedia("(pointer:coarse)").matches)
         if (evt.keyCode === 13 && !evt.shiftKey) {
             evt.preventDefault();
             console.log("pressed enter");
@@ -1262,6 +1273,7 @@ async function load_provider_models(providerIndex=null) {
     if (!providerIndex) {
         providerIndex = providerSelect.selectedIndex;
     }
+    modelProvider.innerHTML = '';
     const provider = providerSelect.options[providerIndex].value;
     if (!provider) {
         modelProvider.classList.add("hidden");
@@ -1269,7 +1281,6 @@ async function load_provider_models(providerIndex=null) {
         return;
     }
     const models = await api('models', provider);
-    modelProvider.innerHTML = '';
     if (models.length > 0) {
         modelSelect.classList.add("hidden");
         modelProvider.classList.remove("hidden");
-- 
cgit v1.2.3