Bug 1957226 - Progress indicator for initial model download for Link Preview - r=atossou,firefox-ai-ml-reviewers

- change text on Generating key points... if downloading model
- show % progress on below instead of the static text "This may take a moment the first time you preview a link. Key points should appear more quickly next time."
- add aiContentTitle to manage state of the heading text

Differential Revision: https://phabricator.services.mozilla.com/D243602

Author: ti3x

browser/components/genai/LinkPreview.sys.mjs

@@ -215,9 +215,10 @@ export const LinkPreview = {
       await lazy.LinkPreviewModel.generateTextAI(
         ogCard.pageData.article.textContent,
         {
-          onDownload: state => {
+          onDownload: (state, progressPercentage) => {
             ogCard.showWait = state;
             this.downloadingModel = state;
+            ogCard.progressPercentage = progressPercentage;
           },
           onError: console.error,
           onText: text => {

browser/components/genai/LinkPreviewModel.sys.mjs

@@ -308,7 +308,8 @@ export const LinkPreviewModel = {
         data => {
           if (data.type == lazy.Progress.ProgressType.DOWNLOAD) {
             onDownload?.(
-              data.statusText != lazy.Progress.ProgressStatusText.DONE
+              data.statusText != lazy.Progress.ProgressStatusText.DONE,
+              Math.round((100 * data.totalLoaded) / data.total)
             );
           }
         }

browser/components/genai/content/link-preview-card.mjs

@@ -27,11 +27,13 @@ class LinkPreviewCard extends MozLitElement {
     keyPoints: { type: Array },
     pageData: { type: Object },
     showWait: { type: Boolean },
+    progressPercentage: { type: Number },
   };
 
   constructor() {
     super();
     this.keyPoints = [];
+    this.progress = 0;
   }
 
   addKeyPoint(text) {
@@ -110,6 +112,12 @@ class LinkPreviewCard extends MozLitElement {
     const readingTimeMinsFast = articleData.readingTimeMinsFast || "";
     const readingTimeMinsSlow = articleData.readingTimeMinsSlow || "";
 
+    let displayProgressPercentage = this.progressPercentage;
+    // Handle non-finite values (NaN, Infinity) by defaulting to 100%
+    if (!Number.isFinite(displayProgressPercentage)) {
+      displayProgressPercentage = 100;
+    }
+
     return html`
       <link
         rel="stylesheet"
@@ -158,10 +166,18 @@ class LinkPreviewCard extends MozLitElement {
                 </ul>
                 <hr />
                 ${this.showWait
-                  ? html`<p>
-                      This may take a moment the first time you preview a link.
-                      Key points should appear more quickly next time.
-                    </p>`
+                  ? html`
+                      <p>
+                        ${this.progressPercentage > 0
+                          ? html`Preparing Firefox •
+                              <strong>${displayProgressPercentage}%</strong>`
+                          : ""}
+                      </p>
+                      <p>
+                        This may take a moment the first time you preview a
+                        link. Key points should appear more quickly next time.
+                      </p>
+                    `
                   : ""}
                 <p>
                   Key points are AI-generated and may have mistakes.