Add jquery ui

public/index.html

@@ -11,6 +11,7 @@
     <!-- fontawesome webfonts-->
     <link href="css/fontawesome.css" rel="stylesheet">
     <link href="css/solid.css" rel="stylesheet">
+    <link href="css/jquery-ui.min.css" rel="stylesheet">
  
     <link rel="apple-touch-icon" sizes="57x57" href="img/apple-icon-57x57.png" />
     <link rel="apple-touch-icon" sizes="72x72" href="img/apple-icon-72x72.png" />
@@ -27,6 +28,7 @@
     </script>
 
     <script src="scripts/jquery-3.5.1.min.js"></script>
+    <script src="scripts/jquery-ui.min.js"></script>
     <script src="scripts/jquery.transit.min.js"></script>
     <script src="scripts/jquery-cookie-1.4.1.min.js"></script>
     <script src="scripts/showdown.min.js"></script>
@@ -49,6 +51,7 @@
     <script type="module" src="scripts/poe.js"></script>
     <script type="module" src="scripts/RossAscends-mods.js"></script>
     <script type="module" src="scripts/slash-commands.js"></script>
+    <script type="module" src="scripts/tags.js"></script>
     <script type="text/javascript" src="scripts/toolcool-color-picker.js"></script>
 
     <title>SillyTavern</title>
@@ -1440,6 +1443,11 @@
                             </div>
                             <hr>
 
+                            <div id="tags_div" class="margin-bot-10px ui-widget">
+                                <input id="tagInput" class="text_pole margin-bot-10px" />
+                                <div id="tagList"></div>
+                            </div>
+
                             <div id="description_div" class="margin-bot-10px">
                                 Description
                                 <a href="/notes#characterdescription" class="notes-link" target="_blank">

public/scripts/tags.js

@@ -0,0 +1,49 @@
+const TAG_COLORS = [
+    '#FFB6C1', // Light Pink
+    '#FFECB3', // Light Yellow
+    '#FFE4B5', // Cream
+    '#B2EBF2', // Powder Blue
+    '#E0FFFF', // Light Sky Blue
+    '#FBB4B9', // Lavender
+    '#FFF9C4', // Floral White
+    '#DDA0DD', // Plum
+    '#DA70D6', // Orchid
+    '#D2B48C', // Tan
+    '#FAEBD7', // Antique White
+    '#FFEFD5', // Papaya Whip
+    '#CD853F', // Peru
+    '#B2DFEE', // Sky Blue
+    '#FFFFC2', // Parchment
+    '#FDF5E6', // Old Lace
+];
+
+let tags = [
+    { name: "tag1", color: "blue" }, 
+    { name: "tag2", color: "green" } 
+];
+
+$(document).ready(() => {
+    $("#tagInput").autocomplete({
+        source: tags.map(t => t.name),
+        select: function(event, ui) {
+            let tagName = ui.item.value;
+            let tag = tags.find(t => t.name === tagName);
+            if (!tag) {
+                tag = {
+                    name: tagName,
+                    color: TAG_COLORS[Math.floor(Math.random() * colors.length)] 
+                };
+                tags.push(tag);
+            }
+            let tagElement = $(`<span class="tag" style="background-color: ${tag.color}">${tag.name}</span>`);
+            $("#tagList").append(tagElement);
+            $(this).val("");
+        }
+    });
+    
+    $("#tagInput").on("input", function(event) {
+        let val = $(this).val();
+        if (tags.find(t => t.name === val)) return;
+        $(this).autocomplete("search", val);
+    });
+});

public/style.css

@@ -2316,6 +2316,29 @@ h5 {
     grid-template-columns: 340px auto;
 }
 
+.tag {
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    border-color: var(--black30a);
+    padding: 0.2rem 0.3rem;
+    font-size: calc(var(--mainFontSize) * 1.1);
+}
+
+#tagList {
+    margin-top: 10px;
+}
+
+body .ui-front {
+    z-index: 10000;
+}
+
+body .ui-widget-content {
+    background-color: var(--SmartThemeFastUIBGColor);
+    color: var(--SmartThemeBodyColor);
+}
+
 /* GROUP CHATS */
 
 #rm_group_top_bar {