From 9bc8dfbdfca0c7f869afaa91e299fa30cf08a76d Mon Sep 17 00:00:00 2001
From: Simon Rozman <simon@rozman.si>
Date: Thu, 24 Apr 2025 14:46:23 +0200
Subject: [PATCH] Display AI suggestions using different color

---
 service.js | 11 +++++++++++
 styles.css | 10 ++++++++++
 2 files changed, 21 insertions(+)

diff --git a/service.js b/service.js
index 1643692..845a723 100644
--- a/service.js
+++ b/service.js
@@ -378,6 +378,11 @@ class BesService {
       this.ctx.strokeStyle = styles.color
       this.ctx.fillStyle = styles.color
       amplitude = -1
+    } else if (ruleId === 'BESANA_178' /*PR_VNAP_POPRAVEK_UI*/) {
+      const styles = window.getComputedStyle(this.highlightAI)
+      this.ctx.strokeStyle = styles.color
+      this.ctx.fillStyle = styles.color
+      amplitude = 1
     } else {
       const styles = window.getComputedStyle(this.highlightGrammar)
       this.ctx.strokeStyle = styles.color
@@ -982,12 +987,16 @@ class BesService {
     this.highlightSpelling = document.createElement('div')
     this.highlightSpelling.classList.add('bes-highlight-placeholder')
     this.highlightSpelling.classList.add('bes-highlight-spelling')
+    this.highlightAI = document.createElement('div')
+    this.highlightAI.classList.add('bes-highlight-placeholder')
+    this.highlightAI.classList.add('bes-highlight-ai')
     this.highlightGrammar = document.createElement('div')
     this.highlightGrammar.classList.add('bes-highlight-placeholder')
     this.highlightGrammar.classList.add('bes-highlight-grammar')
 
     this.correctionPanel.appendChild(this.scrollPanel)
     this.correctionPanel.appendChild(this.highlightSpelling)
+    this.correctionPanel.appendChild(this.highlightAI)
     this.correctionPanel.appendChild(this.highlightGrammar)
     this.scrollPanel.appendChild(this.canvasPanel)
     this.textElement.parentElement.insertBefore(
@@ -1083,6 +1092,8 @@ class BesService {
       el.classList.add(
         match.match.rule.id.startsWith('MORFOLOGIK_RULE')
           ? 'bes-highlight-spelling'
+          : match.match.rule.id === 'BESANA_178' /*PR_VNAP_POPRAVEK_UI*/
+          ? 'bes-highlight-ai'
           : 'bes-highlight-grammar'
       )
       el.style.left = `${rect.x + canvasPanelRect.x + window.scrollX}px`
diff --git a/styles.css b/styles.css
index 524e249..2ef9018 100644
--- a/styles.css
+++ b/styles.css
@@ -9,6 +9,11 @@
   background: hsla(211, 100%, 60%, 0.3);
 }
 
+.bes-highlight-ai {
+  color: hsl(108, 100%, 35%);
+  background: hsla(108, 100%, 35%, 0.3);
+}
+
 .bes-highlight-grammar {
   color: hsl(27, 100%, 45%);
   background: hsla(27, 100%, 45%, 0.3);
@@ -20,6 +25,11 @@
     background: hsla(211, 100%, 55%, 0.3);
   }
 
+  .bes-highlight-ai {
+    color: hsl(108, 100%, 40%);
+    background: hsla(108, 100%, 40%, 0.3);
+  }
+
   .bes-highlight-grammar {
     color: hsl(27, 100%, 65%);
     background: hsla(27, 100%, 65%, 0.3);