Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Basics of prompt modification in popup - #22 #32

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Basics of prompt modification in popup - #22 #32

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e7e5d4
Basics of prompt modification in popup - #22
ryan-at-kettle Apr 12, 2023
4f2123d
Show system role input and remaining prompts, include toggle button #22
ryan-at-kettle Apr 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Show system role input and remaining prompts, include toggle button #22
  • Loading branch information
@ryan-at-kettle
ryan-at-kettle committed Apr 13, 2023
commit 4f2123d398a8ab72f681783fbfd182811181e4c8
21 changes: 17 additions & 4 deletions public/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,12 @@
target="_blank" class="inline text-orange-600 hover:text-orange-500">codeball.ai</a>)</span>
</div>
<div id="rerun-btn"
class="invisible text-lg border border-slate-900 hover:bg-slate-200 cursor-pointer px-2 rounded-md">
class="invisible text-lg border border-slate-900 space-x-1 hover:bg-slate-200 cursor-pointer px-2 rounded-md">
run again
</div>&nbsp;
<div id="modify-btn"
class="text-lg border border-slate-900 hover:bg-slate-200 cursor-pointer px-2 rounded-md">
prompts
</div>
</div>

Expand All @@ -31,10 +35,19 @@
</div>
</div>
<hr>
<div class="prompt-area" class="flex">
<textarea id="prompt" rows="11" class="block p-2.5 w-full text-xs"></textarea>

<div id="prompt-area" class="flex" style="display: none;">
<h4 class="mb-2 mt-0 text-base font-small leading-tight text-primary">System Role</h4>
<textarea id="system-role" rows="1" class="block p-2.5 w-full text-xs"></textarea>
<h4 class="mb-2 mt-0 text-base font-small leading-tight text-primary">Initial Prompt</h4>
<textarea id="prompt-initial" rows="11" class="block p-2.5 w-full text-xs"></textarea>
<h4 class="mb-2 mt-0 text-base font-small leading-tight text-primary">Contextual Prompt</h4>
<textarea id="prompt-context" rows="7" class="block p-2.5 w-full text-xs"></textarea>
<h4 class="mb-2 mt-0 text-base font-small leading-tight text-primary">Final Prompt</h4>
<textarea id="prompt-final" rows="1" class="block p-2.5 w-full text-xs"></textarea>
<hr />
</div>
<hr />

<div class="my-4">
<div id="result" class="flex flex-col space-y-2"></div>
</div>
Expand Down
60 changes: 40 additions & 20 deletions src/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,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();
Expand All @@ -68,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
Expand Down Expand Up @@ -108,7 +108,7 @@ async function callChatGPT(messages, callback, onDone) {
const showdown = require('showdown');
const converter = new showdown.Converter()

async function reviewPR(diffPath, context, initialPrompt) {
async function reviewPR(diffPath, systemMessage, initialPrompt, contextPrompt, finalPrompt) {
inProgress(true)
document.getElementById('result').innerHTML = ''
chrome.storage.session.remove([diffPath])
Expand All @@ -125,10 +125,7 @@ async function reviewPR(diffPath, context, 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.`);

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.
Expand Down Expand Up @@ -184,10 +181,11 @@ async function reviewPR(diffPath, context, initialPrompt) {
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)
Expand All @@ -199,6 +197,27 @@ async function reviewPR(diffPath, context, initialPrompt) {
)
}

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
Expand Down Expand Up @@ -272,21 +291,22 @@ async function run() {
return // not a pr
}

document.getElementById('prompt').value = `The change has the following title: ${title}.
setDefaultPrompts(title, context);

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("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 = () => {
let initialPrompt = document.getElementById('prompt').value;
reviewPR(diffPath, context, initialPrompt);
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) => {
Expand Down