WIP: make history message a list

web_assets/stylesheet/ChuanhuChat.css

@@ -19,6 +19,9 @@
     --chatbot-input-more-background-fullwidth-hover: #FFFFFF99;
     --chatbot-input-more-background-mobilewidth-hover: #E6E6E644;
 
+    --message-list-background-hover: #F3F3F3;
+    --message-list-background-selected: #EAEAEA;
+
     --menu-width: 320px;
     --menu-background-fill: var(--background-fill-primary);
 
@@ -32,6 +35,9 @@
         --chatbot-input-more-background-solid-color: #3C3C3C;
         --chatbot-input-more-background-fullwidth-hover: #2F2F2F88;
         --chatbot-input-more-background-mobilewidth-hover: #1F1F1F44;
+
+        --message-list-background-hover: #202020;
+        --message-list-background-selected: #2F3030;
     }
 }
 

web_assets/stylesheet/override-gradio.css

@@ -23,6 +23,45 @@ footer {
     margin-top: 64px;
 }
 
+
+/* 把radio做成列表 */
+fieldset#history-select-dropdown .wrap {
+    gap: 0;
+}
+fieldset#history-select-dropdown .wrap label {
+    width: 100%;
+    background: none;
+    padding: 10px 16px 10px;
+    box-shadow: none;
+}
+fieldset#history-select-dropdown .wrap label:hover {
+    background: var(--message-list-background-hover);
+}
+fieldset#history-select-dropdown .wrap label:active {
+    background: var(--message-list-background-selected);
+}
+fieldset#history-select-dropdown .wrap label.selected {
+    background: var(--message-list-background-selected);
+}
+fieldset#history-select-dropdown .wrap label > span {
+    /* font-size: small; */
+    margin-left: 0;
+    color: var(--checkbox-label-text-color);
+}
+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");
+    padding-right: .8em;
+    position: relative;
+    top: 4px;
+}
+.dark fieldset#history-select-dropdown .wrap label > span::before {
+    content: url("data:image/svg+xml,%3Csvg stroke='%23FFFFFF' 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");
+}
+fieldset#history-select-dropdown .wrap label > input {
+    display: none;
+}
+
+
 /* 覆盖 gradio 丑陋的复制按钮样式 */
 .message .code_wrap button[title="copy"] {
     border-radius: 5px !important;