diff --git a/src/lib/Setting/botpreset.svelte b/src/lib/Setting/botpreset.svelte index d4b94a7b..e633bec7 100644 --- a/src/lib/Setting/botpreset.svelte +++ b/src/lib/Setting/botpreset.svelte @@ -111,11 +111,15 @@ return prompt } - async function checkDiff(prompt1: string, prompt2: string): Promise { + async function checkDiff(prompt1: string, prompt2: string): Promise { const { diffLines } = await import('diff') 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)}
` @@ -139,13 +152,29 @@ } if(lineDiffs.length === 1 && !lineDiffs[0].added && !lineDiffs[0].removed) { - resultHtml = `
No differences detected.
` + resultHtml + const userResponse = await alertConfirm('The two prompts are identical. Would you like to review the content?') + + if(userResponse){ + resultHtml = `
No differences detected.
` + resultHtml + alertMd(resultHtml) + } } else{ - resultHtml = `
Differences detected. Please review the changes.
` + resultHtml - } + const modifiedCount = `${modifiedLinesCount}` + const addedCount = `${addedLinesCount}` + const removedCount = `${removedLinesCount}` + const diffCounts = `
${modifiedCount}${addedCount}${removedCount}
` - return resultHtml + resultHtml = `
Differences detected. Please review the changes.${diffCounts}
` + resultHtml + alertMd(resultHtml) + + setTimeout(() => { + const differencesDetected = document.querySelector('#differences-detected'); + if (differencesDetected) { + differencesTooltip(changedLines) + } + }, 0) + } } async function highlightChanges(string1: string, string2: string) { @@ -168,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) { @@ -194,8 +257,8 @@ } else{ alertWait("Loading...") - const result = await checkDiff(selectedPrompts[0], prompt) - alertMd(result) + await checkDiff(selectedPrompts[0], prompt) + selectedDiffPreset = -1 selectedPrompts = [] }