Merge pull request #162 from Halsey1006/dev

Quote color selection

public/index.html

@@ -1225,6 +1225,10 @@
                             <div class="flex-container">
                                 <toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
                                 Italics Text
+                            </div>
+                             <div class="flex-container">
+                                <toolcool-color-picker id="quote-color-picker"></toolcool-color-picker>
+                                Quote Text
                             </div>
                             <div class="flex-container">
                                 <toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>

public/script.js

@@ -884,6 +884,13 @@ function messageFormating(mes, ch_name, isSystem, forceAvatar) {
         mes = mes.replace(/{{(\*?.+?\*?)}}/g, "");
 
 
+		mes = mes.replace(/(<code[^>]*>[\s\S]*?<\/code>)|\"(.+?)\"/g, function(match, code, quote) {
+		  if (code) {
+			return code;
+		  } else {
+			return "<q>" + quote + "</q>";
+		  }
+		});
 		mes = mes.replace(/\n/g, "<br/>");
         mes = mes.trim();
 

public/scripts/power-user.js

@@ -68,6 +68,7 @@ let power_user = {
 
     main_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBodyColor').trim()}`,
     italics_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeEmColor').trim()}`,
+    quote_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeQuoteColor').trim()}`,
     fastui_bg_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeFastUIBGColor').trim()}`,
     blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBlurTintColor').trim()}`,
 
@@ -87,6 +88,7 @@ const storage_keys = {
 
     main_text_color: "TavernAI_main_text_color",
     italics_text_color: "TavernAI_italics_text_color",
+    quote_text_color: "TavernAI_quote_text_color",
     fastui_bg_color: "TavernAI_fastui_bg_color",
     blur_tint_color: "TavernAI_blur_tint_color",
     blur_strength: "TavernAI_blur_strength",
@@ -166,6 +168,9 @@ async function applyThemeColor(type) {
     if (type === 'italics') {
         document.documentElement.style.setProperty('--SmartThemeEmColor', power_user.italics_text_color);
     }
+    if (type === 'quote') {
+        document.documentElement.style.setProperty('--SmartThemeQuoteColor', power_user.quote_text_color);
+    }
     if (type === 'fastUIBG') {
         document.documentElement.style.setProperty('--SmartThemeFastUIBGColor', power_user.fastui_bg_color);
     }
@@ -198,6 +203,7 @@ async function applyTheme(name) {
     const themeProperties = [
         { key: 'main_text_color', selector: '#main-text-color-picker', type: 'main' },
         { key: 'italics_text_color', selector: '#italics-color-picker', type: 'italics' },
+        { key: 'quote_text_color', selector: '#quote-color-picker', type: 'quote' },
         { key: 'fastui_bg_color', selector: '#fastui-bg-color-picker', type: 'fastUIBG' },
         { key: 'blur_tint_color', selector: '#blur-tint-color-picker', type: 'blurTint' },
         {
@@ -284,6 +290,7 @@ function loadPowerUserSettings(settings, data) {
 
     $("#main-text-color-picker").attr('color', power_user.main_text_color);
     $("#italics-color-picker").attr('color', power_user.italics_text_color);
+    $("#quote-color-picker").attr('color', power_user.quote_text_color);
     $("#fastui-bg-color-picker").attr('color', power_user.fastui_bg_color);
     $("#blur-tint-color-picker").attr('color', power_user.blur_tint_color);
 
@@ -472,6 +479,12 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 	
+    $("#quote-color-picker").on('change', (evt) => {
+        power_user.quote_text_color = evt.detail.rgba;
+        applyThemeColor('quote');
+        saveSettingsDebounced();
+    });
+
     $("#fastui-bg-color-picker").on('change', (evt) => {
         power_user.fastui_bg_color = evt.detail.rgba;
         applyThemeColor('fastUIBG');
@@ -503,6 +516,7 @@ $(document).ready(() => {
             blur_strength: power_user.blur_strength,
             main_text_color: power_user.main_text_color,
             italics_text_color: power_user.italics_text_color,
+            quote_text_color: power_user.quote_text_color,
             fastui_bg_color: power_user.fastui_bg_color,
             blur_tint_color: power_user.blur_tint_color,
         };

public/style.css

@@ -39,6 +39,7 @@
     /*Default Theme, will be changed by ToolCool Color Picker*/
     --SmartThemeBodyColor: rgb(220, 220, 210);
     --SmartThemeEmColor: rgb(175, 175, 175);
+    --SmartThemeQuoteColor: rgb(175, 175, 175);
     --SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9);
     --SmartThemeBlurTintColor: rgba(0, 0, 0, 0.5);
     --SmartThemeBlurStrength: calc(var(--blurStrength) * 1px);
@@ -136,6 +137,12 @@ body {
     font-weight: 500;
 }
 
+.mes_text q,
+.mes_text blockquote {
+    color: var(--SmartThemeQuoteColor);
+    font-weight: 500;
+}
+
 .mes_text strong,
 .mes_text h2,
 .mes_text h1 {

themes/Aqua Blue.json

@@ -0,0 +1,8 @@
+{
+    "name": "Aqua Blue",
+    "blur_strength": 2,
+    "main_text_color": "rgba(160, 190, 190, 1)",
+    "italics_text_color": "rgba(170, 200, 200, 1)",
+    "fastui_bg_color": "rgba(7, 54, 66, 0.9)",
+    "blur_tint_color": "rgba(0, 43, 54, 0.8)"
+}

themes/Default (Dark).json

@@ -0,0 +1,8 @@
+{
+    "name": "Default (Dark)",
+    "blur_strength": 10,
+    "main_text_color": "rgb(220, 220, 210)",
+    "italics_text_color": "rgb(175, 175, 175)",
+    "fastui_bg_color": "rgba(0, 0, 0, 0.9)",
+    "blur_tint_color": "rgba(0, 0, 0, 0.5)"
+}

themes/Megumin Red.json

@@ -0,0 +1,8 @@
+{
+    "name": "Megumin Red",
+    "blur_strength": 10,
+    "main_text_color": "rgba(230, 230, 230, 1)",
+    "italics_text_color": "rgba(200, 200, 200, 1)",
+    "fastui_bg_color": "rgba(70, 5, 5, 0.9)",
+    "blur_tint_color": "rgba(50, 10, 10, 0.75)"
+}