diff --git a/public/popup.html b/public/popup.html index eba7b1a..4a5ae82 100644 --- a/public/popup.html +++ b/public/popup.html @@ -17,8 +17,12 @@ target="_blank" class="inline text-orange-600 hover:text-orange-500">codeball.ai)   +
+ prompts
@@ -30,12 +34,22 @@ -
+
+ +
-
-
diff --git a/src/popup.js b/src/popup.js index 781dca4..b0de7cb 100644 --- a/src/popup.js +++ b/src/popup.js @@ -23,7 +23,7 @@ const xcircle = ` ` -function inProgress(ongoing, failed = false, rerun = true) { +function inProgress(ongoing, failed = false, rerun = true, run = false) { if (ongoing) { document.getElementById('status-icon').innerHTML = spinner document.getElementById('rerun-btn').classList.add("invisible"); @@ -37,6 +37,10 @@ function inProgress(ongoing, failed = false, rerun = true) { if (rerun) { document.getElementById('rerun-btn').classList.remove("invisible"); document.getElementById('codeball-link').classList.remove("invisible"); + document.getElementById('rerun-btn').innerHTML = 'run again'; + } + if (run) { + document.getElementById('rerun-btn').innerHTML = 'run'; } } } @@ -52,7 +56,7 @@ async function getApiKey() { return options['openai_apikey']; } -async function callChatGPT(messages, callback, onDone) { +async function callChatGPT(systemMessage, messages, callback, onDone) { let apiKey; try { apiKey = await getApiKey(); @@ -64,7 +68,7 @@ async function callChatGPT(messages, callback, onDone) { const api = new ChatGPTAPI({ apiKey: apiKey, - systemMessage: `You are a programming code change reviewer, provide feedback on the code changes given. Do not introduce yourselves.` + systemMessage: systemMessage }) let res @@ -104,7 +108,7 @@ async function callChatGPT(messages, callback, onDone) { const showdown = require('showdown'); const converter = new showdown.Converter() -async function reviewPR(diffPath, context, title) { +async function reviewPR(diffPath, systemMessage, initialPrompt, contextPrompt, finalPrompt) { inProgress(true) document.getElementById('result').innerHTML = '' chrome.storage.session.remove([diffPath]) @@ -116,25 +120,12 @@ async function reviewPR(diffPath, context, title) { let warning = ''; let patchParts = []; - promptArray.push(`The change has the following title: ${title}. - - Your task is: - - Review the code changes and provide feedback. - - If there are any bugs, highlight them. - - Provide details on missed use of best-practices. - - Does the code do what it says in the commit messages? - - Do not highlight minor issues and nitpicks. - - Use bullet points if you have multiple comments. - - Provide security recommendations if there are any. + promptArray.push(initialPrompt + ` You are provided with the code changes (diffs) in a unidiff format. - Do not provide feedback yet. I will follow-up with a description of the change in a new message.` - ); + Do not provide feedback yet. I will follow-up with a description of the change in a new message.`); - promptArray.push(`A description was given to help you assist in understand why these changes were made. - The description was provided in a markdown format. Do not provide feedback yet. I will follow-up with the code changes in diff format in a new message. - - ${context}`); + promptArray.push(contextPrompt); // Remove binary files as those are not useful for ChatGPT to provide a review for. // TODO: Implement parse-diff library so that we can remove large lock files or binaries natively. @@ -190,10 +181,11 @@ async function reviewPR(diffPath, context, title) { promptArray.push(part); }); - promptArray.push("All code changes have been provided. Please provide me with your code review based on all the changes, context & title provided"); + promptArray.push(finalPrompt); // Send our prompts to ChatGPT. callChatGPT( + systemMessage, promptArray, (answer) => { document.getElementById('result').innerHTML = converter.makeHtml(answer + " \n\n" + warning) @@ -205,6 +197,27 @@ async function reviewPR(diffPath, context, title) { ) } +function setDefaultPrompts(title, context) { + document.getElementById('system-role').value = "You are a programming code change reviewer, provide feedback on the code changes given. Do not introduce yourselves."; + + document.getElementById('prompt-initial').value = `The change has the following title: ${title}. + +Your task is: +- Review the code changes and provide feedback. +- If there are any bugs, highlight them. +- Provide details on missed use of best-practices. +- Does the code do what it says in the commit messages? +- Do not highlight minor issues and nitpicks. +- Use bullet points if you have multiple comments. +- Provide security recommendations if there are any.`; + + document.getElementById('prompt-context').value = `A description is given to help you assist in understand why these changes were made. The description is provided in a markdown format: +${context} +Do not provide feedback yet. I will follow-up with the code changes in diff format in a new message.` + + document.getElementById('prompt-final').value = "All code changes have been provided. Please provide me with your code review based on all the changes, context & title provided"; +} + async function run() { // Get current tab @@ -278,10 +291,22 @@ async function run() { return // not a pr } - inProgress(true) + setDefaultPrompts(title, context); + + document.getElementById("modify-btn").onclick = () => { + if (document.getElementById('prompt-area').style.display === "none") { + document.getElementById('prompt-area').style.display = "block"; + } else { + document.getElementById('prompt-area').style.display = "none"; + } + } document.getElementById("rerun-btn").onclick = () => { - reviewPR(diffPath, context, title) + let systemMessage = document.getElementById('system-role').value; + let initialPrompt = document.getElementById('prompt-initial').value; + let contextPrompt = document.getElementById('prompt-context').value; + let finalPrompt = document.getElementById('prompt-final').value; + reviewPR(diffPath, systemMessage, initialPrompt, contextPrompt, finalPrompt); } chrome.storage.session.get([diffPath]).then((result) => { @@ -289,7 +314,7 @@ async function run() { document.getElementById('result').innerHTML = result[diffPath] inProgress(false) } else { - reviewPR(diffPath, context, title) + inProgress(false, false, true, true) } }) }