From d9f4951c1c3a8fabc79a35216d286cf4239d33d5 Mon Sep 17 00:00:00 2001
From: poroyo <132068975+poroyo@users.noreply.github.com>
Date: Sat, 11 Jan 2025 14:33:06 +0900
Subject: [PATCH 1/2] feat: add prompt comparison alert for identical prompts

---
 src/lib/Setting/botpreset.svelte | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/lib/Setting/botpreset.svelte b/src/lib/Setting/botpreset.svelte
index d4b94a7b..8c43096b 100644
--- a/src/lib/Setting/botpreset.svelte
+++ b/src/lib/Setting/botpreset.svelte
@@ -111,7 +111,7 @@
         return prompt
     }
 
-    async function checkDiff(prompt1: string, prompt2: string): Promise<string> {
+    async function checkDiff(prompt1: string, prompt2: string): Promise<void> {
         const { diffLines } = await import('diff')
         const lineDiffs = diffLines(prompt1, prompt2)
 
@@ -139,13 +139,17 @@
         }
 
         if(lineDiffs.length === 1 && !lineDiffs[0].added && !lineDiffs[0].removed) {
-            resultHtml = `<div style="background-color: #4caf50; color: white; padding: 10px 20px; border-radius: 5px; text-align: center;">No differences detected.</div>` + resultHtml
+            const userResponse = await alertConfirm('The two prompts are identical. Would you like to review the content?')
+
+            if(userResponse){
+                resultHtml = `<div style="background-color: #4caf50; color: white; padding: 10px 20px; border-radius: 5px; text-align: center;">No differences detected.</div>` + resultHtml
+                alertMd(resultHtml)
+            }
         }
         else{
             resultHtml = `<div style="background-color: #ff9800; color: white; padding: 10px 20px; border-radius: 5px; text-align: center;">Differences detected. Please review the changes.</div>` + resultHtml
+            alertMd(resultHtml)
         }
-
-        return resultHtml
     }
 
     async function highlightChanges(string1: string, string2: string) {
@@ -194,8 +198,8 @@
         }
         else{
             alertWait("Loading...")
-            const result = await checkDiff(selectedPrompts[0], prompt)
-            alertMd(result)
+            await checkDiff(selectedPrompts[0], prompt)
+
             selectedDiffPreset = -1
             selectedPrompts = []
         }

From 2ee72ca86fe456e5e936a908671aeb246085e033 Mon Sep 17 00:00:00 2001
From: poroyo <132068975+poroyo@users.noreply.github.com>
Date: Sat, 11 Jan 2025 18:30:45 +0900
Subject: [PATCH 2/2] feat: add tooltip for differences overview

---
 src/lib/Setting/botpreset.svelte | 67 ++++++++++++++++++++++++++++++--
 1 file changed, 63 insertions(+), 4 deletions(-)

diff --git a/src/lib/Setting/botpreset.svelte b/src/lib/Setting/botpreset.svelte
index 8c43096b..e633bec7 100644
--- a/src/lib/Setting/botpreset.svelte
+++ b/src/lib/Setting/botpreset.svelte
@@ -116,6 +116,10 @@
         const lineDiffs = diffLines(prompt1, prompt2)
 
         let resultHtml = '';
+        let changedLines: string[] = []
+        let modifiedLinesCount = 0
+        let addedLinesCount = 0
+        let removedLinesCount = 0
 
         for (let i = 0; i < lineDiffs.length; i++) {
             const linePart = lineDiffs[i]
@@ -123,15 +127,24 @@
             if(linePart.removed){
                 const nextPart = lineDiffs[i + 1]
                 if(nextPart?.added){
-                    resultHtml += `<div style="border-left: 4px solid blue; padding-left: 8px;">${await highlightChanges(linePart.value, nextPart.value)}</div>`
+                    const modifiedLine = `<div style="border-left: 4px solid blue; padding-left: 8px;">${await highlightChanges(linePart.value, nextPart.value)}</div>`
+                    changedLines.push(modifiedLine)
+                    resultHtml += modifiedLine
                     i++;
+                    modifiedLinesCount += 1
                 }
                 else{
-                    resultHtml += `<div style="color: red; background-color: #ffe6e6; border-left: 4px solid red; padding-left: 8px;">${escapeHtml(linePart.value)}</div>`
+                    const removedLine = `<div style="color: red; background-color: #ffe6e6; border-left: 4px solid red; padding-left: 8px;">${escapeHtml(linePart.value)}</div>`
+                    changedLines.push(removedLine)
+                    resultHtml += removedLine
+                    removedLinesCount += 1
                 }
             }
             else if(linePart.added){
-                resultHtml += `<div style="color: green; background-color: #e6ffe6; border-left: 4px solid green; padding-left: 8px;">${escapeHtml(linePart.value)}</div>`
+                const addedLine = `<div style="color: green; background-color: #e6ffe6; border-left: 4px solid green; padding-left: 8px;">${escapeHtml(linePart.value)}</div>`
+                changedLines.push(addedLine)
+                resultHtml += addedLine
+                addedLinesCount += 1
             }
             else{
                 resultHtml += `<div>${escapeHtml(linePart.value)}</div>`
@@ -147,8 +160,20 @@
             }
         }
         else{
-            resultHtml = `<div style="background-color: #ff9800; color: white; padding: 10px 20px; border-radius: 5px; text-align: center;">Differences detected. Please review the changes.</div>` + resultHtml
+            const modifiedCount = `<span style="border-left: 4px solid blue; padding-left: 8px; padding-right: 8px;">${modifiedLinesCount}</span>`
+            const addedCount = `<span style="border-left: 4px solid green; padding-left: 8px; padding-right: 8px;">${addedLinesCount}</span>`
+            const removedCount = `<span style="border-left: 4px solid red; padding-left: 8px; padding-right: 8px;">${removedLinesCount}</span>`
+            const diffCounts = `<div>${modifiedCount}${addedCount}${removedCount}</div>`
+
+            resultHtml = `<div id="differences-detected" style="background-color: #ff9800; color: white; padding: 10px 20px; border-radius: 5px; text-align: center;">Differences detected. Please review the changes.${diffCounts}</div>` + resultHtml
             alertMd(resultHtml)
+
+            setTimeout(() => {
+                const differencesDetected = document.querySelector('#differences-detected');
+                if (differencesDetected) {
+                    differencesTooltip(changedLines)
+                }
+            }, 0)
         }
     }
 
@@ -172,6 +197,40 @@
             })
             .join('')
     }
+
+    function differencesTooltip(changedLines: string[]) {
+        const differencesDetected = document.querySelector('#differences-detected')
+        if(!differencesDetected){
+            return
+        }
+
+        const tooltip = document.createElement('div')
+        tooltip.id = 'diff-tooltip'
+        tooltip.style.display = 'none'
+        tooltip.style.position = 'absolute'
+        tooltip.style.backgroundColor = '#282a36'
+        tooltip.style.padding = '10px'
+        tooltip.style.borderRadius = '5px'
+        tooltip.style.boxShadow = '0px 5px 5px rgba(0, 0, 0, 1)'
+        tooltip.style.maxWidth = '500px'
+        tooltip.style.overflowY = 'auto'
+        tooltip.style.maxHeight = '300px'
+        tooltip.style.textAlign = 'initial'
+
+        differencesDetected.appendChild(tooltip)
+
+        differencesDetected.addEventListener('mouseenter', () => {
+            const tooltipContent = !changedLines.length ? '' : `<div><strong>Changed Lines</strong></div>
+                <div>${changedLines.join('<br>')}</div>`
+
+            tooltip.innerHTML = tooltipContent;
+            tooltip.style.display = 'block'
+        })
+
+        differencesDetected.addEventListener('mouseleave', () => {
+            tooltip.style.display = 'none'
+        })
+    }
     
 
     async function handleDiffMode(id: number) {