fix(release): Fix broken build

manifest.json

@@ -5,16 +5,17 @@
   "description": "Enhance chat with ChatGPT-Augment: auto-continue, macros, token count, prompts, gradients, JSON format.",
   "content_scripts": [
     {
-      "matches": [
-        "https://chat.openai.com/*"
-      ],
-      "js": [
-        "src/main.ts"
-      ]
+      "matches": ["https://chat.openai.com/*"],
+      "js": ["src/main.ts"]
     }
   ],
+  "permissions": ["webRequest"],
+  "host_permissions": ["https://chat.openai.com/*"],
+  "background": {
+    "service_worker": "src/background.ts"
+  },
   "icons": {
     "64": "icon64.png",
     "128": "icon128.png"
   }
-}
+}

src/App.tsx

@@ -21,6 +21,7 @@ import { InputWatcher } from "./comp/InputWatcher";
 import { JSONFormatter } from "./comp/JSONFormatter";
 import { SelectionWatcher } from "./comp/SelectionWatcher";
 import { useFormElements } from "./lib/hooks/useFormElements";
+import { TreeSorter } from "./comp/TreeSorter";
 
 const cache = createEmotionCache({
   key: "cgpt-agmt",
@@ -93,6 +94,7 @@ export const MiniApp = ({ html }: Props) => {
                 <InputWatcher textarea={textarea} />
                 <SelectionWatcher textarea={textarea} />
                 <JSONFormatter />
+                {/* <TreeSorter /> */}
                 <Notifications position="top-right" />
               </Group>
             </Group>

src/background.ts

@@ -0,0 +1,40 @@
+type Details = {
+  documentId: string; //  "7AD74...
+  documentLifecycle: string; //  "activ...
+  frameId: number; // 0;
+  frameType: string; //  "outer...
+  fromCache: false;
+  initiator: string; //  "https...
+  ip: string; //  "104.1...
+  method: string; //  "GET";...
+  parentFrameId: number; //-1;
+  requestId: string; //  "6703"...
+  statusCode: number; // 200;
+  statusLine: string; //  "HTTP/...
+  tabId: number; // 1033803684;
+  timeStamp: number; // 1686881111010.292;
+  type: string; //  "scrip...
+  url: string; //  "https...
+  requestHeaders?: { name: string; value: string }[];
+};
+
+let auth = "";
+// @ts-ignore
+chrome.webRequest.onBeforeSendHeaders.addListener(
+  (details: Details) => {
+    const foundAuth = details.requestHeaders?.find(
+      ({ name }) => name.toLowerCase() === "authorization"
+    );
+    if (foundAuth) {
+      auth = foundAuth.value;
+    }
+
+    console.log("REQ headers!", {
+      url: details.url,
+      headers: details.requestHeaders,
+    });
+  },
+  { types: ["xmlhttprequest"], urls: ["https://chat.openai.com/*"] },
+
+  ["requestHeaders", "extraHeaders"]
+);

src/comp/MutationWatcher.tsx

@@ -3,6 +3,7 @@ import throttle from "lodash/throttle";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { ContinueClicker } from "./ContinueClicker";
 import { EditWatcher } from "./EditWatcher";
+import { useConversations } from "@/lib/hooks/useConversations";
 
 const healthcheck = throttle(() => {
   const app = document.getElementById("chatgpt-augment-app");
@@ -47,7 +48,7 @@ export const MutationWatcher = () => {
     });
     healthcheck();
   }, []);
-
+  useConversations();
   useEffect(() => {
     // install / uninstall observer
     const observer = new MutationObserver(handleMutation);

src/comp/TokenReaderModal.tsx

@@ -59,14 +59,14 @@ export const TokenReaderModal = ({ tokens, opened, onCancel }: Props) => {
                 border-radius: ${theme.radius.sm};
                 font-family: ${inverse ? "monospace" : "inherit"};
                 white-space: pre-wrap;
-
-                &:nth-child(3n) {
+                
+                &:nth-of-type(3n) {
                   background: ${theme.fn.rgba(theme.colors.blue[4], opacity)};
                 }
-                &:nth-child(3n + 1) {
+                &:nth-of-type(3n + 1) {
                   background: ${theme.fn.rgba(theme.colors.red[4], opacity)};
                 }
-                &:nth-child(3n + 2) {
+                &:nth-of-type(3n + 2) {
                   background: ${theme.fn.rgba(theme.colors.violet[4], opacity)};
                 }
               }

src/comp/TreeSorter.tsx

@@ -0,0 +1,90 @@
+import { ClassNames } from "@emotion/react";
+import {
+  MantineProvider,
+  Paper,
+  Portal
+} from "@mantine/core";
+import { useForceUpdate } from "@mantine/hooks";
+import throttle from "lodash/throttle";
+import { useCallback, useEffect, useId, useMemo } from "react";
+
+type Props = {
+  // onExecute: (prompt: string) => Promise<string>;
+  // onDone: () => void;
+};
+
+export const TreeSorter = (props: Props) => {
+  const id = `tree-${(useId() || "").replace(/:/g, "")}`;
+  const update = useForceUpdate();
+  const target = document.getElementById(id);
+  const installer = useMemo(
+    () =>
+      throttle(
+        () => {
+          const el = document.querySelector("nav .overflow-y-auto > div > div");
+          if (!el) return;
+
+          const hasWiped = el.id !== id;
+          if (hasWiped) {
+            // install!
+            el.id = id;
+            el.classList.add("relative");
+            update();
+          }
+        },
+        1000,
+        { trailing: true }
+      ),
+    [id]
+  );
+
+  const mounter = useCallback<MutationCallback>(
+    (mutation) => {
+      const added = mutation.filter(
+        (m) => m.type === "childList" && m.addedNodes
+      );
+      console.log(added);
+      if (!added) return;
+
+      installer();
+    },
+    [id]
+  );
+
+  useEffect(() => {
+    const nav = document.querySelector("nav");
+    if (!nav) return;
+
+    const mo = new MutationObserver(mounter);
+    mo.observe(nav, { childList: true, subtree: true });
+    installer();
+    return () => {
+      try {
+        mo.disconnect();
+      } catch {
+        // ignore
+      }
+    };
+  }, [mounter, installer]);
+
+  return target ? (
+    <Portal target={target}>
+      <MantineProvider theme={{ colorScheme: "dark" }}>
+        <ClassNames>
+          {({ css }) => (
+            <Paper
+              className={css`
+                position: absolute;
+                inset: 0;
+                left: 50%;
+                z-index: 1000;
+              `}
+            >
+              Hello!
+            </Paper>
+          )}
+        </ClassNames>
+      </MantineProvider>
+    </Portal>
+  ) : null;
+};

src/lib/hooks/useConversations.ts

@@ -0,0 +1,5 @@
+import { useEffect } from "react";
+
+export const useConversations = () => {
+  useEffect(() => {}, []);
+};

src/vite-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="vite/client" />
-/// <reference types="@crxjs/vite-plugin/client.d.ts" />
+/// <reference types="@crxjs/vite-plugin/client.d.ts" />
+declare global {
+  chrome: any;
+}