feat: OpenSauced AI PR description

package.json

@@ -16,12 +16,15 @@
     "@types/chrome": "^0.0.231",
     "@types/node-emoji": "^1.8.2",
     "node-emoji": "^1.11.0",
+    "openai-streams": "^5.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^4.8.0"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.14",
+    "@types/node": "^20.1.4",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.1",

src/App.tsx

@@ -5,6 +5,7 @@ import Home from "./pages/home";
 import Loading from "./pages/loading";
 import { Profile } from "./pages/profile";
 import { useAuth } from "./hooks/useAuth";
+import AIPRDescription from "./pages/aiprdescription";
 
 export const RouteContext = createContext<{ page: { name: string, props?: any }, setCurrentPage:(page: RouteKeys, props?: any) => void }>({ page: { name: "loading" }, setCurrentPage: () => {} });
 
@@ -13,6 +14,7 @@ const routes = {
   home: <Home />,
   loading: <Loading />,
   profile: <Profile />,
+  aiprdescription: <AIPRDescription />,
 };
 
 type RouteKeys = keyof typeof routes;

src/constants.ts

@@ -3,6 +3,7 @@ export const SUPABASE_LOGIN_URL = "https://ibcwmlhcimymasokhgvn.supabase.co/auth
 export const SUPABASE_AUTH_COOKIE_NAME = "supabase-auth-token";
 export const OPEN_SAUCED_AUTH_TOKEN_KEY = "os-access-token";
 export const OPEN_SAUCED_INSIGHTS_DOMAIN = "insights.opensauced.pizza";
+export const AI_PR_DESCRIPTION_CONFIG_KEY = "ai-pr-description-config";
 
 // API endpoints
 export const OPEN_SAUCED_USERS_ENDPOINT = "https://api.opensauced.pizza/v1/users";
@@ -15,4 +16,6 @@ export const GITHUB_PROFILE_EDIT_MENU_SELECTOR = "button.js-profile-editable-edi
 export const GITHUB_PR_AUTHOR_USERNAME_SELECTOR = "author Link--primary text-bold css-overflow-wrap-anywhere";
 export const GITHUB_LOGGED_IN_USER_USERNAME_SELECTOR = "meta[name=\"user-login\"]";
 export const GITHUB_PR_COMMENT_HEADER_SELECTOR = "timeline-comment-header clearfix d-flex";
+export const GITHUB_PR_COMMENT_EDITOR_SELECTOR = "flex-nowrap d-none d-md-inline-block mr-md-0 mr-3";
 export const GITHUB_REPO_ACTIONS_SELECTOR = ".pagehead-actions";
+export const GITHUB_PR_COMMENT_TEXT_AREA_SELECTOR = "pull_request[body]";

src/content-scripts/components/AddPRToHighlights/AddPRToHighlightsButton.ts

@@ -3,12 +3,22 @@ import openSaucedLogoIcon from "../../../assets/opensauced-icon.svg";
 
 export const AddPRToHighlightsButton = () => {
   const addPRToHighlightsButton = createHtmlElement("a", {
-    href: `https://insights.opensauced.pizza/feed?url=${encodeURIComponent(window.location.href)}`,
-    target: "_blank",
-    rel: "noopener noreferrer",
-    innerHTML: `<span aria-label="Add PR to OpenSauced highlights." data-view-component="true" class="tooltipped tooltipped-n">
-    <img data-view-component="true" class="mr-1 mt-1" height="16px" width="16px" src=${chrome.runtime.getURL(openSaucedLogoIcon)}>
-    </span>`,
+    className: "relative",
+    innerHTML: `<span aria-label="Add PR to OpenSauced highlights" class="tooltipped tooltipped-n">
+    <img class="mr-1 mt-1" height="16px" width="16px" src=${chrome.runtime.getURL(
+      openSaucedLogoIcon,
+    )}>
+    </span>
+    <details-menu id="details-menu-os" class="dropdown-menu hidden dropdown-menu-sw color-fg-default w-48 mt-2">
+    <a href="https://insights.opensauced.pizza/feed?prurl=${encodeURIComponent(window.location.href)}" class="dropdown-item" target="_blank">
+    Add PR to Highlights
+    </a>
+  </details-menu>`,
+    onclick: () => {
+      const menu = document.getElementById("details-menu-os");
+      if (!menu) return;
+      menu.classList.toggle("hidden");
+    }
   });
 
   return addPRToHighlightsButton;

src/content-scripts/components/GenerateAIDescription/DescriptionGeneratorButton.ts

@@ -0,0 +1,48 @@
+import { createHtmlElement } from "../../../utils/createHtmlElement";
+import openSaucedLogoIcon from "../../../assets/opensauced-icon.svg";
+import { getPullRequestAPIURL } from "../../../utils/urlMatchers";
+import { getPRDiff, getPRCommitMessages } from "../../../utils/aiprdescription/fetchGithubAPIData";
+import { generateDescription } from "../../../utils/aiprdescription/openai";
+import { GITHUB_PR_COMMENT_TEXT_AREA_SELECTOR } from "../../../constants";
+import { insertAtCursorFromStream } from "../../../utils/aiprdescription/cursorPositionInsert";
+import { getAIDescriptionConfig } from "../../../utils/aiprdescription/descriptionconfig";
+
+export const DescriptionGeneratorButton = () => {
+  const descriptionGeneratorButton = createHtmlElement("a", {
+    innerHTML: `<span id="ai-description-gen" class="toolbar-item btn-octicon">
+    <img class="octicon octicon-heading" height="16px" width="16px" id="ai-description-button-logo" src=${chrome.runtime.getURL(openSaucedLogoIcon)}>
+    </span>
+    <tool-tip for="ai-description-gen">Generate PR description</tool-tip>`,
+    onclick: async () => {
+      const logo = document.getElementById("ai-description-button-logo");
+      if (!logo) {
+        return alert("Logo not found!");
+      }
+      const url = getPullRequestAPIURL(window.location.href);
+      const descriptionConfig = await getAIDescriptionConfig();
+      if (!descriptionConfig ) return;
+      if (!descriptionConfig.enabled) return alert("AI PR description is disabled!");
+      logo.classList.toggle("animate-pulse");
+      //TODO: Conditionally fetch diff and commit messages based on config
+      const [diff, commitMessages] = await Promise.all([getPRDiff(url), getPRCommitMessages(url)]);
+      const descriptionStream = await generateDescription(descriptionConfig.config.openai_api_key!,
+        "gpt-3.5-turbo",
+        descriptionConfig.config.language,
+        descriptionConfig.config.length,
+        descriptionConfig.config.temperature / 10,
+        descriptionConfig.config.tone, diff, commitMessages
+      );
+
+      logo.classList.toggle("animate-pulse");
+      if (!descriptionStream) {
+        return alert("No description was generated!");
+      }
+      const textArea = document.getElementsByName(GITHUB_PR_COMMENT_TEXT_AREA_SELECTOR)[0] as HTMLTextAreaElement;
+
+      void insertAtCursorFromStream(textArea, descriptionStream);
+    },
+
+  });
+
+  return descriptionGeneratorButton;
+};

src/content-scripts/github.ts

@@ -3,6 +3,7 @@ import {
   isGithubProfilePage,
   isGithubPullRequestPage,
   isGithubRepoPage,
+  isPullRequestCreatePage,
 } from "../utils/urlMatchers";
 import { isOpenSaucedUser } from "../utils/fetchOpenSaucedApiData";
 import injectViewOnOpenSauced from "../utils/dom-utils/viewOnOpenSauced";
@@ -11,14 +12,16 @@ import { prefersDarkMode } from "../utils/colorPreference";
 import injectAddPRToHighlightsButton from "../utils/dom-utils/addPRToHighlights";
 import injectRepoVotingButtons from "../utils/dom-utils/repoVotingButtons";
 import domUpdateWatch from "../utils/dom-utils/domUpdateWatcher";
+import injectDescriptionGeneratorButton from "../utils/dom-utils/addDescriptionGenerator";
 
 const processGithubPage = async () => {
   if (prefersDarkMode(document.cookie)) {
     document.documentElement.classList.add("dark");
   }
-
-  if (isGithubPullRequestPage(window.location.href)) {
-    await injectAddPRToHighlightsButton();
+  if (isPullRequestCreatePage(window.location.href)) {
+    injectDescriptionGeneratorButton();
+  } else if (isGithubPullRequestPage(window.location.href)) {
+    void injectAddPRToHighlightsButton();
   } else if (isGithubProfilePage(window.location.href)) {
     const username = getGithubUsername(window.location.href);
 
@@ -37,7 +40,7 @@ const processGithubPage = async () => {
     await injectRepoVotingButtons(ownerName, repoName);
   }
 
-  domUpdateWatch(processGithubPage, 25);
+  domUpdateWatch(processGithubPage, 50);
 };
 
 void processGithubPage();

src/hooks/useRefs.ts

@@ -0,0 +1,11 @@
+import { useRef } from "react";
+
+export const useRefs = () => {
+    const refs = useRef<Record<string, HTMLElement | null>>({});
+
+    const setRefFromKey = (key: string) => (element: HTMLElement | null) => {
+      refs.current[key] = element;
+    };
+
+    return { refs: refs.current, setRefFromKey };
+  };