4 files changed, 42 insertions, 20 deletions

diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html
index 66bcaaab..064e4594 100644
--- a/g4f/gui/client/index.html
+++ b/g4f/gui/client/index.html
@@ -19,8 +19,7 @@
     <script src="/static/js/highlightjs-copy.min.js"></script>
     <script src="/static/js/chat.v1.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
-    <link rel="stylesheet"
-        href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/base16/dracula.min.css">
+    <link rel="stylesheet" href="/static/css/dracula.min.css">
     <script>
         MathJax = {
             chtml: {
@@ -244,8 +243,5 @@
     <div class="mobile-sidebar">
         <i class="fa-solid fa-bars"></i>
     </div>
-    <script>
-    </script>
 </body>
-
 </html>
diff --git a/g4f/gui/client/static/css/dracula.min.css b/g4f/gui/client/static/css/dracula.min.css
new file mode 100644
index 00000000..729bbbfb
--- /dev/null
+++ b/g4f/gui/client/static/css/dracula.min.css
@@ -0,0 +1,7 @@
+/*!
+  Theme: Dracula
+  Author: Mike Barkmin (http://github.com/mikebarkmin) based on Dracula Theme (http://github.com/dracula)
+  License: ~ MIT (or more permissive) [via base16-schemes-source]
+  Maintainer: @highlightjs/core-team
+  Version: 2021.09.0
+*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#e9e9f4;background:#282936}.hljs ::selection,.hljs::selection{background-color:#4d4f68;color:#e9e9f4}.hljs-comment{color:#626483}.hljs-tag{color:#62d6e8}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#e9e9f4}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#ea51b2}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#b45bcf}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#00f769}.hljs-strong{font-weight:700;color:#00f769}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#ebff87}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#a1efe4}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#62d6e8}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#b45bcf}.hljs-emphasis{color:#b45bcf;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#00f769}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}
\ No newline at end of file
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index 979f9f96..01bc17fa 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -381,7 +381,8 @@ body {
 }
 
 .message .count .fa-clipboard,
-.message .count .fa-volume-high {
+.message .count .fa-volume-high,
+.message .count .fa-rotate {
     z-index: 1000;
     cursor: pointer;
 }
diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
index 23605ed4..a0178e63 100644
--- a/g4f/gui/client/static/js/chat.v1.js
+++ b/g4f/gui/client/static/js/chat.v1.js
@@ -109,8 +109,9 @@ const register_message_buttons = async () => {
                 let playlist = [];
                 function play_next() {
                     const next = playlist.shift();
-                    if (next)
+                    if (next && el.dataset.do_play) {
                         next.play();
+                    }
                 }
                 if (el.dataset.stopped) {
                     el.classList.remove("blink")
@@ -179,6 +180,20 @@ const register_message_buttons = async () => {
             });
         }
     });
+    document.querySelectorAll(".message .fa-rotate").forEach(async (el) => {
+        if (!("click" in el.dataset)) {
+            el.dataset.click = "true";
+            el.addEventListener("click", async () => {
+                const message_el = el.parentElement.parentElement.parentElement;
+                el.classList.add("clicked");
+                setTimeout(() => el.classList.remove("clicked"), 1000);
+                prompt_lock = true;
+                await hide_message(window.conversation_id, message_el.dataset.index);
+                window.token = message_id();
+                await ask_gpt(message_el.dataset.index);
+            })
+        }
+    });
 }
 
 const delete_conversations = async () => {
@@ -257,9 +272,9 @@ const remove_cancel_button = async () => {
     }, 300);
 };
 
-const prepare_messages = (messages, filter_last_message=true) => {
+const prepare_messages = (messages, message_index = -1) => {
     // Removes none user messages at end
-    if (filter_last_message) {
+    if (message_index == -1) {
         let last_message;
         while (last_message = messages.pop()) {
             if (last_message["role"] == "user") {
@@ -267,14 +282,16 @@ const prepare_messages = (messages, filter_last_message=true) => {
                 break;
             }
         }
+    } else if (message_index >= 0) {
+        messages = messages.filter((_, index) => message_index >= index);
     }
 
     // Remove history, if it's selected
     if (document.getElementById('history')?.checked) {
-        if (filter_last_message) {
-            messages = [messages.pop()];
-        } else {
+        if (message_index == null) {
             messages = [messages.pop(), messages.pop()];
+        } else {
+            messages = [messages.pop()];
         }
     }
 
@@ -361,11 +378,11 @@ imageInput?.addEventListener("click", (e) => {
     }
 });
 
-const ask_gpt = async () => {
+const ask_gpt = async (message_index = -1) => {
     regenerate.classList.add(`regenerate-hidden`);
     messages = await get_messages(window.conversation_id);
     total_messages = messages.length;
-    messages = prepare_messages(messages);
+    messages = prepare_messages(messages, message_index);
 
     stop_generating.classList.remove(`stop_generating-hidden`);
 
@@ -528,6 +545,7 @@ const hide_option = async (conversation_id) => {
         const span_el = document.createElement("span");
         span_el.innerText = input_el.value;
         span_el.classList.add("convo-title");
+        span_el.onclick = () => set_conversation(conversation_id);
         left_el.removeChild(input_el);
         left_el.appendChild(span_el);
     }
@@ -616,7 +634,7 @@ const load_conversation = async (conversation_id, scroll=true) => {
     }
 
     if (window.GPTTokenizer_cl100k_base) {
-        const filtered = prepare_messages(messages, false);
+        const filtered = prepare_messages(messages, null);
         if (filtered.length > 0) {
             last_model = last_model?.startsWith("gpt-4") ? "gpt-4" : "gpt-3.5-turbo"
             let count_total = GPTTokenizer_cl100k_base?.encodeChat(filtered, last_model).length
@@ -683,15 +701,15 @@ async function save_system_message() {
         await save_conversation(window.conversation_id, conversation);
     }
 }
-
-const hide_last_message = async (conversation_id) => {
+const hide_message = async (conversation_id, message_index =- 1) => {
     const conversation = await get_conversation(conversation_id)
-    const last_message = conversation.items.pop();
+    message_index = message_index == -1 ? conversation.items.length - 1 : message_index
+    const last_message = message_index in conversation.items ? conversation.items[message_index] : null;
     if (last_message !== null) {
         if (last_message["role"] == "assistant") {
             last_message["regenerate"] = true;
         }
-        conversation.items.push(last_message);
+        conversation.items[message_index] = last_message;
     }
     await save_conversation(conversation_id, conversation);
 };
@@ -790,7 +808,7 @@ document.getElementById("cancelButton").addEventListener("click", async () => {
 
 document.getElementById("regenerateButton").addEventListener("click", async () => {
     prompt_lock = true;
-    await hide_last_message(window.conversation_id);
+    await hide_message(window.conversation_id);
     window.token = message_id();
     await ask_gpt();
 });