Custom colors for tags

public/index.html

@@ -1806,7 +1806,7 @@
 
                 <div class="select_chat_block_mes"></div>
             </div>
-            <div class="flex-container">
+            <div class="flex-container height100pSpaceEvenly">
                 <div class="renameChatButton fa-solid fa-pen"></div>
                 <div file_name="" class="PastChat_cross fa-solid fa-circle-xmark"></div>
             </div>
@@ -1815,6 +1815,7 @@
 
     <div id="tag_view_template" class="template_element">
         <div class="tag_view_item">
+            <div class="tagColorPickerHolder"></div>
             <div class="tag_view_name" contenteditable="true"></div>
             <div class="tag_view_counter"><span class="tag_view_counter_value"></span>&nbsp;entries</div>
             <div title="Delete tag" class="tag_delete fa-solid fa-trash-can right_menu_button"></div>

public/script.js

@@ -1055,14 +1055,14 @@ function addOneMessage(mes, { type = "normal", insertAfter = null, scroll = true
     const bias = messageFormating(mes.extra?.bias ?? "");
 
     let params = {
-         mesId: count_view_mes,
-         characterName: characterName,
-         isUser: mes.is_user,
-         avatarImg: avatarImg,
-         bias: bias,
-         isSystem: isSystem,
-         title: title,
-         ...formatGenerationTimer(mes.gen_started, mes.gen_finished),
+        mesId: count_view_mes,
+        characterName: characterName,
+        isUser: mes.is_user,
+        avatarImg: avatarImg,
+        bias: bias,
+        isSystem: isSystem,
+        title: title,
+        ...formatGenerationTimer(mes.gen_started, mes.gen_finished),
     };
 
     const HTMLForEachMes = getMessageFromTemplate(params);
@@ -4313,7 +4313,11 @@ $(document).ready(function () {
             duration: 200,
             easing: animation_easing,
         });
-        setTimeout(function () { $("#shadow_popup").css("display", "none"); }, 200);
+        setTimeout(function () {
+            $("#shadow_popup").css("display", "none");
+            $("#dialogue_popup").removeClass('large_dialogue_popup');
+        }, 200);
+
         //      $("#shadow_popup").css("opacity:", 0.0);
         if (popup_type == "del_bg") {
             delBackground(bg_file_for_del.attr("bgfile"));
@@ -4421,13 +4425,16 @@ $(document).ready(function () {
             if (popup_type == 'input') {
                 dialogueResolve($("#dialogue_popup_input").val());
                 $("#dialogue_popup_input").val('');
+
             }
             else {
                 dialogueResolve(true);
+
             }
 
             dialogueResolve = null;
         }
+
     });
     $("#dialogue_popup_cancel").click(function (e) {
         $("#shadow_popup").transition({
@@ -4435,7 +4442,11 @@ $(document).ready(function () {
             duration: 200,
             easing: animation_easing,
         });
-        setTimeout(function () { $("#shadow_popup").css("display", "none"); }, 200);
+        setTimeout(function () {
+            $("#shadow_popup").css("display", "none");
+            $("#dialogue_popup").removeClass('large_dialogue_popup');
+        }, 200);
+
         //$("#shadow_popup").css("opacity:", 0.0);
         popup_type = "";
 
@@ -4443,6 +4454,7 @@ $(document).ready(function () {
             dialogueResolve(false);
             dialogueResolve = null;
         }
+
     });
 
     $("#add_bg_button").change(function () {

public/scripts/tags.js

@@ -153,6 +153,7 @@ function createNewTag(tagName) {
     const tag = {
         id: random_id(),
         name: tagName,
+        color: '',
     };
     tags.push(tag);
     return tag;
@@ -165,6 +166,10 @@ function appendTagToList(listElement, tag, { removable, editable, selectable })
 
     let tagElement = $('#tag_template .tag').clone();
     tagElement.attr('id', tag.id);
+
+    tagElement.css('color', 'var(--SmartThemeBodyColor)');
+    tagElement.css('background-color', tag.color);
+
     tagElement.find('.tag_name').text(tag.name);
     const removeButton = tagElement.find(".tag_remove");
     removable ? removeButton.show() : removeButton.hide();
@@ -278,7 +283,7 @@ function applyTagsOnGroupSelect() {
 
 function createTagInput(inputSelector, listSelector) {
     $(inputSelector)
-        .autocomplete({ 
+        .autocomplete({
             source: (i, o) => findTag(i, o, listSelector),
             select: (e, u) => selectTag(e, u, listSelector),
             minLength: 0,
@@ -287,21 +292,37 @@ function createTagInput(inputSelector, listSelector) {
 }
 
 function onViewTagsListClick() {
+    $('#dialogue_popup').addClass('large_dialogue_popup');
     const list = document.createElement('div');
     const everything = Object.values(tag_map).flat();
-    $(list).append('<h3>Tags</h3><i>Click on the tag name to edit it.</i>')
+    $(list).append('<h3>Tags</h3><i>Click on the tag name to edit it.</i><br>');
+    $(list).append('<i>Click on color box to assign new color.</i><br><br>');
 
     for (const tag of tags) {
         const count = everything.filter(x => x == tag.id).length;
         const template = $('#tag_view_template .tag_view_item').clone();
-
         template.attr('id', tag.id);
         template.find('.tag_view_counter_value').text(count);
         template.find('.tag_view_name').text(tag.name);
+        template.find('.tag_view_name').addClass('tag');
+        template.find('.tag_view_name').css('background-color', tag.color);
+        const colorPickerId = tag.name + "-tag-color";
+        template.find('.tagColorPickerHolder').html(
+            `<toolcool-color-picker id="${colorPickerId}" color="${tag.color}" class="tag-color"></toolcool-color-picker>`
+        );
 
+        template.find('.tag-color').attr('id', colorPickerId);
         list.appendChild(template.get(0));
-    }
 
+        setTimeout(function () {
+            document.querySelector(`#${colorPickerId}`).addEventListener('change', (evt) => {
+                onTagColorize(evt);
+            });
+        }, 100);
+
+        $(colorPickerId).color = tag.color;
+
+    }
     callPopup(list.outerHTML, 'text');
 }
 
@@ -330,6 +351,18 @@ function onTagRenameInput() {
     saveSettingsDebounced();
 }
 
+function onTagColorize(evt) {
+    console.log(evt);
+    const id = $(evt.target).closest('.tag_view_item').attr('id');
+    const newColor = evt.detail.rgba;
+    $(evt.target).parent().parent().find('.tag_view_name').css('background-color', newColor);
+    $(`.tag[id="${id}"]`).css('background-color', newColor);
+    const tag = tags.find(x => x.id === id);
+    tag.color = newColor;
+    console.log(tag);
+    saveSettingsDebounced();
+}
+
 $(document).ready(() => {
     createTagInput('#tagInput', '#tagList');
     createTagInput('#groupTagInput', '#groupTagList');

public/style.css

@@ -1355,6 +1355,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
 
 #dialogue_popup {
     width: 500px;
+    max-width: 90svw;
     position: absolute;
     z-index: 9999;
     margin-left: auto;
@@ -1376,6 +1377,16 @@ input[type=search]:focus::-webkit-search-cancel-button {
     overflow-y: hidden;
 }
 
+.large_dialogue_popup {
+    height: 90svh;
+    max-width: 90svw;
+}
+
+.height100pSpaceEvenly {
+    align-content: space-evenly;
+    height: 100%;
+}
+
 #dialogue_popup_holder {
     display: flex;
     flex-direction: column;
@@ -2438,7 +2449,7 @@ h5 {
 
 .tag_view_name {
     text-align: left;
-    flex: 2;
+    /* flex: 2; */
 }
 
 .tag_view_counter {
@@ -2448,6 +2459,7 @@ h5 {
 
 .tag_delete {
     padding-right: 0;
+    color: var(--SmartThemeBodyColor) !important;
 }
 
 .tag {
@@ -2455,9 +2467,9 @@ h5 {
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;
-    color: var(--SmartThemeQuoteColor);
+    color: var(--SmartThemeBodyColor);
     background-color: var(--black30a);
-    border-color: var(--white30a);
+    border-color: var(--white50a);
     padding: 0.2rem 0.3rem;
     font-size: calc(var(--mainFontSize) - 5%);
     display: flex;
@@ -2467,11 +2479,10 @@ h5 {
     width: fit-content;
     min-width: 0;
     text-shadow: none !important;
+
 }
 
-.tag.selected {
-    border-color: var(--white70a);
-}
+
 
 .tag_remove {
     cursor: pointer;
@@ -2490,6 +2501,10 @@ h5 {
     margin: 5px 0;
 }
 
+#tagList .tag {
+    opacity: 0.6;
+}
+
 .tags.tags_inline {
     opacity: 0.6;
     column-gap: 0.2rem;
@@ -2517,6 +2532,13 @@ h5 {
 
 #rm_tag_filter .tag {
     cursor: pointer;
+    opacity: 0.6;
+    filter: brightness(0.8);
+}
+
+.tag.selected {
+    opacity: 1 !important;
+    filter: none !important;
 }
 
 body .ui-autocomplete {