WIP: add chat-histor-list buttons

web_assets/javascript/ChuanhuChat.js

@@ -97,6 +97,7 @@ function initialize() {
 
     adjustDarkMode();
     adjustSide();
+    setChatList();
     setLoclize();
     selectHistory();
     // setChatbotHeight();
@@ -349,6 +350,7 @@ function chatbotContentChanged(attempt = 1) {
             gradioApp().querySelectorAll('#chuanhu-chatbot .message-wrap .message-row.bot-row').forEach(addChuanhuButton);
             if (chatbotIndicator.classList.contains('hide')) {
                 setLatestMessage();
+                setChatList();
             }
         }, i === 0 ? 0 : 200);
     }

web_assets/javascript/chat-list.js

@@ -0,0 +1,25 @@
+
+function setChatList() {
+    var selectedChat = null;
+    var chatList = gradioApp().querySelector('fieldset#history-select-dropdown');
+    selectedChat = chatList.querySelector(".wrap label.selected")
+    if (!selectedChat || selectedChat.classList.contains('added-chat-btns')) {
+        return;
+    }
+
+    chatList.querySelector('.chat-selected-btns')?.remove(); // remove old buttons
+    chatList.querySelectorAll('.added-chat-btns').forEach(chat => chat.classList.remove('added-chat-btns'));
+
+    var ChatSelectedBtns = document.createElement('div');
+    ChatSelectedBtns.classList.add('chat-selected-btns');
+    selectedChat.classList.add('added-chat-btns');
+    ChatSelectedBtns.innerHTML = selectedChatBtns;
+    selectedChat.appendChild(ChatSelectedBtns);
+
+    return;
+}
+
+const selectedChatBtns = `
+<button><svg class="icon-need-hover" stroke="currentColor" fill="none" stroke-width="2" height="18px" width="18px" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg></button>
+<button><svg class="icon-need-hover" stroke="currentColor" fill="none" stroke-width="2" height="18px" width="18px" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></button>
+`

web_assets/stylesheet/ChuanhuChat.css

@@ -1036,6 +1036,28 @@ input:checked + .chatbot-input-more-span {
     overflow-x: hidden;
 }
 
+.chat-selected-btns {
+    height: 18px;
+    gap: 8px;
+    display: inline-flex;
+    position: absolute;
+    right: 16px;
+}
+.chat-selected-btns::before {
+    content: "";
+    position: absolute;
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--message-list-background-selected) 80%);
+    width: 32px;
+    height: 22px;
+    top: 0;
+    left: -32px;
+}
+.icon-need-hover {
+    opacity: 0.64;
+}
+button:hover .icon-need-hover {
+    opacity: 0.85;
+}
 /* .main-body {
     flex-wrap: nowrap;
     gap: 0;

web_assets/stylesheet/override-gradio.css

@@ -33,6 +33,7 @@ fieldset#history-select-dropdown .wrap label {
     background: none;
     padding: 10px 16px 10px;
     box-shadow: none;
+    justify-content: space-between;
 }
 fieldset#history-select-dropdown .wrap label:hover {
     background: var(--message-list-background-hover);
@@ -41,12 +42,17 @@ fieldset#history-select-dropdown .wrap label:active {
     background: var(--message-list-background-selected);
 }
 fieldset#history-select-dropdown .wrap label.selected {
+    color: var(--checkbox-label-text-color);
     background: var(--message-list-background-selected);
+    padding: 10px 64px 10px 16px;
 }
 fieldset#history-select-dropdown .wrap label > span {
     /* font-size: small; */
     margin-left: 0;
-    color: var(--checkbox-label-text-color);
+    /* text-overflow: ellipsis; */
+    white-space: nowrap;
+    word-break: break-all;
+    overflow: hidden;
 }
 fieldset#history-select-dropdown .wrap label > span::before {
     content: url("data:image/svg+xml,%3Csvg stroke='%23000000' fill='none' stroke-opacity='0.85' stroke-width='2' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E");