From e261ce10c5cbebe30d5955efaa99189bbd1bafeb Mon Sep 17 00:00:00 2001
From: Bruno Bernardino <me@brunobernardino.com>
Date: Mon, 12 Feb 2024 14:56:56 +0000
Subject: [PATCH] Add "Saved time" to summary result - 0.6.0

- This only works for the regular summarizer endpoint, not the API one, and that's handled gracefully.
---
 chrome/manifest.json             |  2 +-
 firefox/manifest.json            |  2 +-
 shared/src/background.js         |  4 +++-
 shared/src/lib/utils.js          |  3 +++
 shared/src/summarize_result.css  | 10 +++++++---
 shared/src/summarize_result.html |  4 ++++
 shared/src/summarize_result.js   | 27 ++++++++++++++++++++++++++-
 7 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/chrome/manifest.json b/chrome/manifest.json
index fd553f7..e604969 100644
--- a/chrome/manifest.json
+++ b/chrome/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Kagi Search for Chrome",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "A simple extension for setting Kagi as a default search engine, and automatically logging in to Kagi in incognito browsing windows",
   "background": {
     "service_worker": "src/background.js",
diff --git a/firefox/manifest.json b/firefox/manifest.json
index ab97b7d..fc188a4 100644
--- a/firefox/manifest.json
+++ b/firefox/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Kagi Search for Firefox",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "A simple helper extension for setting Kagi as a default search engine, and automatically logging in to Kagi in incognito browsing windows.",
   "background": {
     "page": "src/background_page.html"
diff --git a/shared/src/background.js b/shared/src/background.js
index 01f0356..b2ab3d4 100644
--- a/shared/src/background.js
+++ b/shared/src/background.js
@@ -74,7 +74,8 @@ async function saveToken(
 }
 
 async function summarizePage(options) {
-  const { summary, success } = await summarizeContent(options);
+  const { summary, success, timeSavedInMinutes } =
+    await summarizeContent(options);
 
   if (summary) {
     await browser.runtime.sendMessage({
@@ -82,6 +83,7 @@ async function summarizePage(options) {
       summary,
       success,
       url: options.url,
+      timeSavedInMinutes,
     });
   }
 }
diff --git a/shared/src/lib/utils.js b/shared/src/lib/utils.js
index 357a181..7dbee71 100644
--- a/shared/src/lib/utils.js
+++ b/shared/src/lib/utils.js
@@ -13,6 +13,7 @@ export async function summarizeContent({
 }) {
   let summary = 'Unknown error';
   let success = false;
+  let timeSavedInMinutes = 0;
   const useApi = Boolean(
     api_token && ((api_engine && api_engine !== 'cecil') || text),
   );
@@ -75,6 +76,7 @@ export async function summarizeContent({
         }
       } else {
         summary = result?.output_text || 'Unknown error';
+        timeSavedInMinutes = result?.output_data?.word_stats?.time_saved || 0;
       }
 
       success = Boolean(result) && !Boolean(result.error);
@@ -94,6 +96,7 @@ export async function summarizeContent({
   return {
     summary,
     success,
+    timeSavedInMinutes,
   };
 }
 
diff --git a/shared/src/summarize_result.css b/shared/src/summarize_result.css
index 5cf72e9..b9f7788 100644
--- a/shared/src/summarize_result.css
+++ b/shared/src/summarize_result.css
@@ -49,9 +49,7 @@ h3 {
 }
 
 p {
-  width: 70%;
-  text-align: center;
-  margin-top: 5px;
+  margin-top: 10px;
 }
 
 #summary_result {
@@ -88,3 +86,9 @@ p {
   background-color: #f7a808;
   border: 1px solid #d9950d;
 }
+
+#summary_stats {
+  padding: 10px;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
diff --git a/shared/src/summarize_result.html b/shared/src/summarize_result.html
index 179a367..50a4c7a 100644
--- a/shared/src/summarize_result.html
+++ b/shared/src/summarize_result.html
@@ -53,6 +53,10 @@
       </div>
 
       <button id="copy_summary" style="display: none">Copy summary</button>
+
+      <div id="summary_stats" class="stats" style="display: none">
+        <p><strong>Time saved:</strong> <span id="summary_stats_time_saved">0 minutes</span>.</p>
+      </div>
     </div>
     <script type="module" src="summarize_result.js"></script>
   </body>
diff --git a/shared/src/summarize_result.js b/shared/src/summarize_result.js
index 8942944..3e4714a 100644
--- a/shared/src/summarize_result.js
+++ b/shared/src/summarize_result.js
@@ -49,6 +49,24 @@ async function setup() {
     }
   });
 
+  const summaryStatsElement = document.querySelector('#summary_stats');
+  if (!summaryStatsElement) {
+    console.error('Could not find summarize stats div');
+    return;
+  }
+
+  summaryStatsElement.style.display = 'none';
+
+  const summaryStatsTimeSavedElement = document.querySelector(
+    '#summary_stats_time_saved',
+  );
+  if (!summaryStatsTimeSavedElement) {
+    console.error('Could not find summarize stats time saved element');
+    return;
+  }
+
+  summaryStatsTimeSavedElement.innerText = '0 minutes';
+
   browser.runtime.onMessage.addListener(async (data) => {
     const searchParams = new URLSearchParams(window.location.search);
     const url = searchParams.get('url');
@@ -71,6 +89,13 @@ async function setup() {
 
       summaryResultElement.style.display = '';
       summaryResultElement.innerText = summaryTextContents;
+
+      if (data.timeSavedInMinutes) {
+        summaryStatsElement.style.display = '';
+        summaryStatsTimeSavedElement.innerText = `${
+          data.timeSavedInMinutes
+        } minute${data.timeSavedInMinutes !== 1 ? 's' : ''}`;
+      }
     }
   });
 
@@ -136,7 +161,7 @@ async function setup() {
     loadingElement.style.display = '';
     summaryResultElement.classList.remove('error');
     summaryResultElement.style.display = '';
-    summaryResultElement.innerHTML = 'Summarizing...';
+    summaryResultElement.innerText = 'Summarizing...';
     copySummaryElement.style.display = 'none';
     summaryTextContents = '';