summaryrefslogtreecommitdiffstats
path: root/g4f/gui
diff options
context:
space:
mode:
Diffstat (limited to 'g4f/gui')
-rw-r--r--g4f/gui/client/static/css/style.css17
-rw-r--r--g4f/gui/client/static/js/chat.v1.js55
2 files changed, 59 insertions, 13 deletions
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index dd829a1a..979f9f96 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -210,7 +210,9 @@ body {
.conversations .convo .fa-ellipsis-vertical {
position: absolute;
- right: 14px;
+ right: 8px;
+ width: 14px;
+ text-align: center;
}
.conversations .convo .choise {
@@ -222,6 +224,9 @@ body {
.conversations i, .bottom_buttons i {
color: var(--conversations);
cursor: pointer;
+}
+
+.bottom_buttons i {
width: 14px;
}
@@ -233,9 +238,17 @@ body {
overflow: hidden;
white-space: nowrap;
margin-right: 10px;
+ background-color: transparent;
+ border: 0;
+ width: 100%;
}
-.convo-title .datetime {
+.convo-title:focus {
+ outline: 1px solid var(--colour-3) !important;
+}
+
+.convo .datetime {
+ white-space: nowrap;
font-size: 10px;
}
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 += `
<div class="convo" id="convo-${conversation.id}">
- <div class="left" onclick="set_conversation('${conversation.id}')">
+ <div class="left">
<i class="fa-regular fa-comments"></i>
- <span class="convo-title"><span class="datetime">${updated}</span> ${conversation.title}</span>
+ <span class="datetime" onclick="set_conversation('${conversation.id}')">${updated}</span>
+ <span class="convo-title" onclick="set_conversation('${conversation.id}')">${conversation.new_title}</span>
</div>
<i onclick="show_option('${conversation.id}')" class="fa-solid fa-ellipsis-vertical" id="conv-${conversation.id}"></i>
<div id="cho-${conversation.id}" class="choise" style="display:none;">