From 14e476228c028fdb70e261ba800c11917c5c5682 Mon Sep 17 00:00:00 2001
From: Marchusness <m_gunny31@outlook.com>
Date: Sat, 23 Mar 2024 01:52:33 +1030
Subject: [PATCH 1/2] Implement AI Pay as an alternative to providing an API
 Key

---
 index.html | 164 +++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 133 insertions(+), 31 deletions(-)
diff --git a/index.html b/index.html
index 8b21d8c..90d5868 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta name='ai-pay-website-identifier'
+    content='{"websiteId":"vjZ10kZMMec6LJwGN1Cs","websiteName":"RefactorGPT","websiteDescription":"Helps you put all code from a GitHub repo into GPT context to then do whatever you want from it (refactor, rewrite in another language, create tests or docs)","recommendedCredit":10,"requestUsageOnPageLoad":true}'>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>RefactorGPT</title>
@@ -13,7 +15,8 @@
     .indent {
       margin-left: 20px;
     }
-    button {
+
+    button, #ai-pay-link {
       background-color: darkslateblue;
       border: none;
       color: white;
@@ -57,25 +60,45 @@ <h2>Merged Files Preview:</h2>
   <br />
   <br />
   <h2>Instruction:</h2>
-  <textarea id="instruction" name="instruction" rows="20" cols="80" placeholder="rewrite this entire application" required></textarea>
+  <textarea id="instruction" name="instruction" rows="20" cols="80" placeholder="rewrite this entire application"
+    required></textarea>
   <br />
+
+  <div id="ai-provider-details" style="display: flex; align-items: center; justify-content: space-between;">
+
+    <a 
+      id="ai-pay-link"
+      href="https://chromewebstore.google.com/detail/ai-pay/igghgdjfklipjmgldcdfnpppgaijmhfg" 
+      target="_blank">Download AI Pay (safer alternative to providing an API key)</a>
+
+    <p>OR</p>
+
+    <div>
+      <label style="font-weight: bold;" for="openai-key">OpenAI Key:</label>
+      <input style="max-width:500px;margin:0 10px;padding: 11px;" type="password" id="openai-key" name="openai-key">
+      <button id="save-api-key">Save Key</button>
+    </div>
+
+  </div>
+
+  <div id="active-ai-pay-session" style="display: none; align-items: center; justify-content: center;">
+    <p>AI Pay session is active</p>
+  </div>
+
   <div style="display: flex; align-items: center; justify-content: space-between;">
 
     <div>
       <label for="models">Select Model:</label>
       <select id="models" name="models">
-        <option>gpt-4-turbo-preview/option>
+        <option>gpt-4-turbo-preview</option>
         <option>gpt-3.5-turbo</option>
       </select>
     </div>
 
   </div>
-  <div style="display: flex; align-items: center;">
-    <button id="send-to-openai" style="margin-right: 10px">Refactor!!!</button>
-    <label style="font-weight: bold;" for="openai-key">OpenAI Key:</label>
-    <input style="max-width:500px;margin:0 10px;padding: 11px;" type="password" id="openai-key" name="openai-key">
-    <button id="save-api-key">Save Key</button>
-  </div>
+
+  <button id="send-to-openai" style="margin-right: 10px">Refactor!!!</button>
+
   <br />
   <h2>OpenAI Response:</h2>
   <textarea id="openai-response" rows="20" cols="80" readonly></textarea>
@@ -84,12 +107,79 @@ <h2>OpenAI Response:</h2>
   <br />
   
   <script>
+    let aiPaySessionId = document.body.getAttribute('AI_PAY_SESSION_ID_DATA_ELEMENT_ID');
+    let isBrowserExtensionInstalled = !!document.body.getAttribute('IS_AI_PAY_INSTALLED_ELEMENT_ID');
+    let sessionState = aiPaySessionId ? 'active' : 'inactive';
+
+    const aiProviderDetails = document.getElementById('ai-provider-details');
+    const aiPayLink = document.getElementById('ai-pay-link');
+    const aiPayActiveSession = document.getElementById('active-ai-pay-session');
+
+    function updateUiWithSessionState() {
+      if (!isBrowserExtensionInstalled) {
+        aiProviderDetails.style.display = 'flex';
+        aiPayActiveSession.style.display = 'none';
+        aiPayLink.innerText = 'Download AI Pay (safer alternative to providing an API key)';
+        aiPayLink.href = 'https://chromewebstore.google.com/detail/ai-pay/igghgdjfklipjmgldcdfnpppgaijmhfg';
+        return
+      }
+
+      if (sessionState !== 'active') {
+        aiProviderDetails.style.display = 'flex';
+        aiPayActiveSession.style.display = 'none';
+        aiPayLink.innerText = 'Learn how to start an AI Pay session';
+        aiPayLink.href = 'https://www.joinaipay.com/welcome';
+        return
+      } 
+
+      aiProviderDetails.style.display = 'none';
+      aiPayActiveSession.style.display = 'flex';
+    }
+
+    updateUiWithSessionState();
+
+    window.addEventListener('AI_PAY_SESSION_DATA_CHANGE', (event) => {
+      if (!event.detail) return;
+
+      if (event.detail.sessionId && event.detail.sessionId !== aiPaySessionId) {
+        isBrowserExtensionInstalled = true;
+        aiPaySessionId = event.detail.sessionId;
+        sessionState = 'active';
+        updateUiWithSessionState();
+      } else if (!event.detail.sessionId && aiPaySessionId) {
+        isBrowserExtensionInstalled = true;
+        aiPaySessionId = null;
+        sessionState = 'inactive';
+        updateUiWithSessionState();
+      }
+    });
+    window.addEventListener('AI_PAY_BROWSER_EXTENSION_INSTALLED', () => {
+      if (!isBrowserExtensionInstalled) {
+        isBrowserExtensionInstalled = true;
+        updateUiWithSessionState();
+      }
+    });
+
+    function fetchGithub(url) {
+      return fetch(url, {
+        headers: {
+          // 'Authorization': 'Bearer <Your Token>',
+        }
+      })
+    }
+    
     document.getElementById('repo-form').addEventListener('submit', async (event) => {
       event.preventDefault();
-      const repoUrl = document.getElementById('repo-url').value.split('github.com/')[1];
-      const apiUrl = `https://api.github.com/repos/${repoUrl}/contents`;
+      let repoUrl = document.getElementById('repo-url').value.split('github.com/')[1];
+      let path = ""
+      if (repoUrl.split('/').length > 2) {
+        path = repoUrl.split('/').slice(4).join('/');
+        repoUrl = repoUrl.split('/').slice(0, 2).join('/');
+      }
+      const apiUrl = `https://api.github.com/repos/${repoUrl}/contents/${path}`;
+      console.log(apiUrl);
       try {
-        const response = await fetch(apiUrl);
+        const response = await fetchGithub(apiUrl);
         if (!response.ok) {
           throw new Error('GitHub API request failed');
         }
@@ -127,7 +217,7 @@ <h2>OpenAI Response:</h2>
 
         if (file.type === 'dir') {
           try {
-            const response = await fetch(file.url);
+            const response = await fetchGithub(file.url);
             if (!response.ok) {
               throw new Error('GitHub API request failed');
             }
@@ -161,7 +251,7 @@ <h2>OpenAI Response:</h2>
         if (checkbox.checked && checkbox.getAttribute('data-type') === 'file') {
           const fileUrl = checkbox.getAttribute('data-url');
           try {
-            const response = await fetch(fileUrl);
+            const response = await fetchGithub(fileUrl);
             if (!response.ok) {
               throw new Error('GitHub API request failed');
             }
@@ -183,8 +273,8 @@ <h2>OpenAI Response:</h2>
 
     document.getElementById('send-to-openai').addEventListener('click', async () => {
       const apiKey = localStorage.getItem('openai-api-key') || document.getElementById('openai-key').value;
-      if (!apiKey) {
-        alert('Please enter an API key.');
+      if (!aiPaySessionId && !apiKey) {
+        alert('Start an AI Pay session or enter an API key.');
         return;
       }
       const instruction = document.getElementById('instruction').value;
@@ -200,22 +290,34 @@ <h2>OpenAI Response:</h2>
       sendToOpenAIButton.disabled = true;
       sendToOpenAIButton.textContent = 'Loading...';
 
-      const response = await fetch('https://api.openai.com/v1/chat/completions', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${apiKey}`,
-        },
-        body: JSON.stringify({
-          model: model,
-          messages: messages,
-          temperature: 0,
-        }),
-      });
+      const baseUrl = aiPaySessionId ? 'https://api.joinaipay.com/api/openai-compatible' : 'https://api.openai.com/v1';
+
+      try {
+        const response = await fetch(baseUrl + "/chat/completions", {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${aiPaySessionId ?? apiKey}`,
+          },
+          body: JSON.stringify({
+            model: model,
+            messages: messages,
+            temperature: 0,
+          }),
+        });
+        
+        const body = await response.json();
 
-      const completion = await response.json();
-      openaiResponseTextarea.value = completion.choices[0].message.content;
+        if (!response.ok) {
+          console.error(body)
+          throw new Error('OpenAI API request failed');
+        }
+
+        openaiResponseTextarea.value = body.choices[0].message.content;
 
+      } catch (error) {
+        console.error(error)
+      }
       sendToOpenAIButton.disabled = false;
       sendToOpenAIButton.textContent = 'Send to OpenAI';
     });
@@ -232,4 +334,4 @@ <h2>OpenAI Response:</h2>
     });
   </script>
 </body>
-</html>
+</html>
\ No newline at end of file

From 9e48bca354a4257d98991550399556238edd2ce7 Mon Sep 17 00:00:00 2001
From: Marco Guaspari Worms <marcogworms@gmail.com>
Date: Fri, 22 Mar 2024 12:44:41 -0300
Subject: [PATCH 2/2] copy suggestions

---
 index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 90d5868..828a908 100644
--- a/index.html
+++ b/index.html
@@ -69,12 +69,12 @@ <h2>Instruction:</h2>
     <a 
       id="ai-pay-link"
       href="https://chromewebstore.google.com/detail/ai-pay/igghgdjfklipjmgldcdfnpppgaijmhfg" 
-      target="_blank">Download AI Pay (safer alternative to providing an API key)</a>
+      target="_blank">Use AI Pay</a>
 
     <p>OR</p>
 
     <div>
-      <label style="font-weight: bold;" for="openai-key">OpenAI Key:</label>
+      <label style="font-weight: bold;" for="openai-key">Use your own OpenAI Key:</label>
       <input style="max-width:500px;margin:0 10px;padding: 11px;" type="password" id="openai-key" name="openai-key">
       <button id="save-api-key">Save Key</button>
     </div>
@@ -119,7 +119,7 @@ <h2>OpenAI Response:</h2>
       if (!isBrowserExtensionInstalled) {
         aiProviderDetails.style.display = 'flex';
         aiPayActiveSession.style.display = 'none';
-        aiPayLink.innerText = 'Download AI Pay (safer alternative to providing an API key)';
+        aiPayLink.innerText = 'Use AI Pay';
         aiPayLink.href = 'https://chromewebstore.google.com/detail/ai-pay/igghgdjfklipjmgldcdfnpppgaijmhfg';
         return
       }
@@ -334,4 +334,4 @@ <h2>OpenAI Response:</h2>
     });
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
