feat(ai-help): release 2.0 (#10155)

Frontend changes for AI Help 2.0, see also: mdn/rumba#373.

Notable changes:

- New feature: History.
- New feature: Message tree.
- New feature: Playground integration.
- Improvement: Enhanced context.
- Improvement: New refined prompt.
- Improvement: Upgrade from GPT-3.5 to GPT-4.

Co-authored-by: Florian Dieminger <me@fiji-flo.de>
Co-authored-by: Leo McArdle <lmcardle@mozilla.com>

.github/workflows/prod-build.yml

@@ -349,7 +349,7 @@ jobs:
             --min-instances=10 \
             --max-instances=1000 \
             --memory=2GB \
-            --timeout=60s \
+            --timeout=120s \
             --set-env-vars="ORIGIN_MAIN=developer.mozilla.org" \
             --set-env-vars="ORIGIN_LIVE_SAMPLES=live.mdnplay.dev" \
             --set-env-vars="ORIGIN_PLAY=mdnplay.dev" \
@@ -380,6 +380,13 @@ jobs:
           SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SUPABASE_SERVICE_ROLE_KEY }}
           SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
 
+      - name: Update AI Help index with macros
+        run: yarn ai-help-macros update-index
+        env:
+          OPENAI_KEY: ${{ secrets.OPENAI_KEY }}
+          SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SUPABASE_SERVICE_ROLE_KEY }}
+          SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
+
       - name: Slack Notification
         if: failure()
         uses: rtCamp/action-slack-notify@v2

.github/workflows/stage-build.yml

@@ -342,7 +342,7 @@ jobs:
             --min-instances=1 \
             --max-instances=100 \
             --memory=2GB \
-            --timeout=60s \
+            --timeout=120s \
             --set-env-vars="ORIGIN_MAIN=developer.allizom.org" \
             --set-env-vars="ORIGIN_LIVE_SAMPLES=live.mdnyalp.dev" \
             --set-env-vars="ORIGIN_PLAY=mdnyalp.dev" \
@@ -373,6 +373,13 @@ jobs:
           SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SUPABASE_SERVICE_ROLE_KEY }}
           SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
 
+      - name: Update AI Help index with macros
+        run: yarn ai-help-macros update-index
+        env:
+          OPENAI_KEY: ${{ secrets.OPENAI_KEY }}
+          SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SUPABASE_SERVICE_ROLE_KEY }}
+          SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
+
       - name: Slack Notification
         if: failure()
         uses: rtCamp/action-slack-notify@v2

.github/workflows/xyz-build.yml

@@ -239,7 +239,7 @@ jobs:
             --min-instances=1 \
             --max-instances=100 \
             --memory=2GB \
-            --timeout=60s \
+            --timeout=120s \
             --set-env-vars="ORIGIN_MAIN=developer.allizom.xyz" \
             --set-env-vars="ORIGIN_LIVE_SAMPLES=live-samples.developer.allizom.xyz" \
             --set-env-vars="SOURCE_CONTENT=https://storage.googleapis.com/${{ vars.GCP_BUCKET_NAME }}/main/" \

build/cli.ts

@@ -77,7 +77,11 @@ async function buildDocumentInteractive(
       );
     }
 
-    return { document, doc: await buildDocument(document), skip: false };
+    return {
+      document,
+      doc: await buildDocument(document, { plainHTML: true }),
+      skip: false,
+    };
   } catch (e) {
     if (!interactive) {
       throw e;
@@ -208,7 +212,7 @@ async function buildDocuments(
     }
 
     const {
-      doc: { doc: builtDocument, liveSamples, fileAttachmentMap },
+      doc: { doc: builtDocument, liveSamples, fileAttachmentMap, plainHTML },
       document,
     } = result;
 
@@ -230,6 +234,10 @@ async function buildDocuments(
       );
     }
 
+    if (plainHTML) {
+      fs.writeFileSync(path.join(outPath, "plain.html"), plainHTML);
+    }
+
     // This is exploiting the fact that renderHTML has the side-effect of
     // mutating the built document which makes this not great and refactor-worthy.
     const docString = JSON.stringify({ doc: builtDocument });

build/index.ts

@@ -164,13 +164,15 @@ export interface BuiltDocument {
   source?: {
     github_url: string;
   };
+  plainHTML?: string;
 }
 
 interface DocumentOptions {
   fixFlaws?: boolean;
   fixFlawsDryRun?: boolean;
   fixFlawsTypes?: Iterable<string>;
   fixFlawsVerbose?: boolean;
+  plainHTML?: boolean;
 }
 
 export async function buildDocument(
@@ -445,6 +447,12 @@ export async function buildDocument(
     throw error;
   }
 
+  // Dump HTML for GPT context.
+  let plainHTML;
+  if (documentOptions.plainHTML) {
+    plainHTML = $.html();
+  }
+
   // Apply syntax highlighting all <pre> tags.
   syntaxHighlight($, doc);
 
@@ -555,7 +563,7 @@ export async function buildDocument(
     document.metadata.slug.startsWith("orphaned/") ||
     document.metadata.slug.startsWith("conflicting/");
 
-  return { doc: doc as Doc, liveSamples, fileAttachmentMap };
+  return { doc: doc as Doc, liveSamples, fileAttachmentMap, plainHTML };
 }
 
 function addBaseline(doc: Partial<Doc>) {

build/resolve-bcd.ts

@@ -1,10 +1,10 @@
 import bcdUntyped from "@mdn/browser-compat-data/forLegacyNode";
-import { CompatData } from "@mdn/browser-compat-data/types";
+import { CompatData, Identifier } from "@mdn/browser-compat-data/types";
 
 const bcd = bcdUntyped as CompatData;
 
 export function packageBCD(query) {
-  const data = query.split(".").reduce((prev, curr) => {
+  const data: Identifier = query.split(".").reduce((prev, curr) => {
     return prev && Object.prototype.hasOwnProperty.call(prev, curr)
       ? prev[curr]
       : undefined;

build/syntax-highlight.ts

@@ -120,7 +120,7 @@ export function syntaxHighlight($: cheerio.CheerioAPI, doc) {
     $pre.wrapAll(`<div class='code-example'></div>`);
     if (!$pre.hasClass("hidden")) {
       $(
-        `<p class='example-header'><span class="language-name">${name}</span></p>`
+        `<div class='example-header'><span class="language-name">${name}</span></div>`
       ).insertBefore($pre);
     }
     const grammar = Prism.languages[name];