diff --git a/g4f/gui/client/css/style.css b/g4f/gui/client/css/style.css index 8752dee5..aab7e555 100644 --- a/g4f/gui/client/css/style.css +++ b/g4f/gui/client/css/style.css @@ -316,13 +316,33 @@ body { z-index: 1000; } -.message .assistant i { +.message .assistant .fa-phone-arrow-up-right, +.message .assistant .fa-phone-arrow-down-left { position: absolute; bottom: -6px; right: -6px; z-index: 1000; } +.message .assistant .fa-xmark, +.message .user .fa-xmark { + position: absolute; + top: -2px; + left: 0px; + z-index: 1000; + display: none; + cursor: pointer; +} + +.message .user .fa-xmark { + color: var(--colour-1); +} + +.message .assistant:hover .fa-xmark, +.message .user:hover .fa-xmark { + display: block; +} + .new_convo { padding: 8px 12px; display: flex; diff --git a/g4f/gui/client/js/chat.v1.js b/g4f/gui/client/js/chat.v1.js index 8461a8f7..57af298b 100644 --- a/g4f/gui/client/js/chat.v1.js +++ b/g4f/gui/client/js/chat.v1.js @@ -46,6 +46,22 @@ const highlight = (container) => { ); } +const register_remove_message = async () => { + document.querySelectorAll(".message .fa-xmark").forEach(async (el) => { + if (!("click" in el.dataset)) { + el.dataset.click = "true"; + el.addEventListener("click", async () => { + if (prompt_lock) { + return; + } + const message_el = el.parentElement.parentElement; + await remove_message(window.conversation_id, message_el.dataset.index); + await load_conversation(window.conversation_id); + }) + } + }); +} + const delete_conversations = async () => { localStorage.clear(); await new_conversation(); @@ -58,13 +74,14 @@ const handle_ask = async () => { message = message_input.value if (message.length > 0) { message_input.value = ''; + prompt_lock = true; 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); + let message_index = await add_message(window.conversation_id, "user", message); window.token = message_id(); if (imageInput.dataset.src) URL.revokeObjectURL(imageInput.dataset.src); @@ -73,9 +90,10 @@ const handle_ask = async () => { else delete imageInput.dataset.src message_box.innerHTML += ` -