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 += `
${await highlightChanges(linePart.value, nextPart.value)}
`
+ const modifiedLine = `${await highlightChanges(linePart.value, nextPart.value)}
`
+ changedLines.push(modifiedLine)
+ resultHtml += modifiedLine
i++;
+ modifiedLinesCount += 1
}
else{
- resultHtml += `${escapeHtml(linePart.value)}
`
+ const removedLine = `${escapeHtml(linePart.value)}
`
+ changedLines.push(removedLine)
+ resultHtml += removedLine
+ removedLinesCount += 1
}
}
else if(linePart.added){
- resultHtml += `${escapeHtml(linePart.value)}
`
+ const addedLine = `${escapeHtml(linePart.value)}
`
+ changedLines.push(addedLine)
+ resultHtml += addedLine
+ addedLinesCount += 1
}
else{
resultHtml += `${escapeHtml(linePart.value)}
`
@@ -147,8 +160,20 @@
}
}
else{
- resultHtml = `Differences detected. Please review the changes.
` + resultHtml
+ const modifiedCount = `${modifiedLinesCount}`
+ const addedCount = `${addedLinesCount}`
+ const removedCount = `${removedLinesCount}`
+ const diffCounts = `${modifiedCount}${addedCount}${removedCount}
`
+
+ resultHtml = `Differences detected. Please review the changes.${diffCounts}
` + 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 ? '' : `Changed Lines
+ ${changedLines.join('
')}
`
+
+ tooltip.innerHTML = tooltipContent;
+ tooltip.style.display = 'block'
+ })
+
+ differencesDetected.addEventListener('mouseleave', () => {
+ tooltip.style.display = 'none'
+ })
+ }
async function handleDiffMode(id: number) {