Add "Saved time" to summary result - 0.6.0 (#68)

- This only works for the regular summarizer endpoint, not the API one, and that's handled gracefully.

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",

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"

shared/src/background.js

@@ -74,14 +74,16 @@ 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({
       type: 'summary_finished',
       summary,
       success,
       url: options.url,
+      timeSavedInMinutes,
     });
   }
 }

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,
   };
 }
 

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;
+}

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>

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 = '';