From 74c399d675676938f31faf18174a98ed7a1709da Mon Sep 17 00:00:00 2001 From: Heiner Lohaus Date: Tue, 23 Apr 2024 17:34:42 +0200 Subject: Add conversation title change in gui Fix bug with multiple requests a .har in OpenaiChat --- g4f/gui/client/static/js/chat.v1.js | 55 +++++++++++++++++++++++++++++-------- 1 file changed, 44 insertions(+), 11 deletions(-) (limited to 'g4f/gui/client/static/js') diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js index 8b00eed2..d5988c26 100644 --- a/g4f/gui/client/static/js/chat.v1.js +++ b/g4f/gui/client/static/js/chat.v1.js @@ -482,12 +482,35 @@ const clear_conversation = async () => { } }; +async function set_conversation_title(conversation_id, title) { + conversation = await get_conversation(conversation_id) + conversation.new_title = title; + appStorage.setItem( + `conversation:${conversation.id}`, + JSON.stringify(conversation) + ); +} + const show_option = async (conversation_id) => { const conv = document.getElementById(`conv-${conversation_id}`); const choi = document.getElementById(`cho-${conversation_id}`); conv.style.display = "none"; choi.style.display = "block"; + + const el = document.getElementById(`convo-${conversation_id}`); + const trash_el = el.querySelector(".fa-trash"); + const title_el = el.querySelector("span.convo-title"); + if (title_el) { + const left_el = el.querySelector(".left"); + const input_el = document.createElement("input"); + input_el.value = title_el.innerText; + input_el.classList.add("convo-title"); + input_el.onfocus = () => trash_el.style.display = "none"; + input_el.onchange = () => set_conversation_title(conversation_id, input_el.value); + left_el.removeChild(title_el); + left_el.appendChild(input_el); + } }; const hide_option = async (conversation_id) => { @@ -496,6 +519,18 @@ const hide_option = async (conversation_id) => { conv.style.display = "block"; choi.style.display = "none"; + + const el = document.getElementById(`convo-${conversation_id}`); + el.querySelector(".fa-trash").style.display = ""; + const input_el = el.querySelector("input.convo-title"); + if (input_el) { + const left_el = el.querySelector(".left"); + const span_el = document.createElement("span"); + span_el.innerText = input_el.value; + span_el.classList.add("convo-title"); + left_el.removeChild(input_el); + left_el.appendChild(span_el); + } }; const delete_conversation = async (conversation_id) => { @@ -709,18 +744,15 @@ const load_conversations = async () => { let html = ""; conversations.forEach((conversation) => { - if (conversation?.items.length > 0) { - let old_value = conversation.title; + if (conversation?.items.length > 0 && !conversation.new_title) { let new_value = (conversation.items[0]["content"]).trim(); let new_lenght = new_value.indexOf("\n"); new_lenght = new_lenght > 200 || new_lenght < 0 ? 200 : new_lenght; - conversation.title = new_value.substring(0, new_lenght); - if (conversation.title != old_value) { - appStorage.setItem( - `conversation:${conversation.id}`, - JSON.stringify(conversation) - ); - } + conversation.new_title = new_value.substring(0, new_lenght); + appStorage.setItem( + `conversation:${conversation.id}`, + JSON.stringify(conversation) + ); } let updated = ""; if (conversation.updated) { @@ -730,9 +762,10 @@ const load_conversations = async () => { } html += `
-
+
- ${updated} ${conversation.title} + ${updated} + ${conversation.new_title}