Skip to content

Commit

Permalink
build: Lots of UI tweaks and some default prompt changes.
Browse files Browse the repository at this point in the history
  • Loading branch information
mmiscool committed Dec 16, 2024
1 parent 2fc364b commit 1f5a543
Show file tree
Hide file tree
Showing 13 changed files with 504 additions and 146 deletions.
79 changes: 60 additions & 19 deletions public/ChatManager.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { ConfirmDialog } from "./confirmDialog.js";

import { doAjax } from "./doAjax.js";
import { MarkdownToHtml } from "./MarkdownToHtml.js";
import { makeElement } from "./domElementFactory.js";
import { choseFile, fileDialog } from "./fileDialog.js";
import { auto } from "groq-sdk/_shims/registry.mjs";


let ctx = {};
Expand Down Expand Up @@ -114,7 +115,7 @@ export class ChatManager {
this.conversationPicker.addEventListener('click', () => {
if (this.conversationPicker.size === 1) {
this.conversationPicker.size = this.conversationPicker.length;
}else{
} else {
this.conversationPicker.size = 1;
}
});
Expand Down Expand Up @@ -159,16 +160,26 @@ export class ChatManager {

this.newChatButton = document.createElement('button');
this.newChatButton.textContent = 'New Chat';

this.newChatButton.style.margin = '10px';
this.newChatButton.addEventListener('click', () => {
this.newChat();
});
this.container.appendChild(this.newChatButton);


this.newChatWithPromptButton = document.createElement('button');
this.newChatWithPromptButton.textContent = 'New Chat with Prompt';
this.newChatWithPromptButton.style.margin = '10px';
this.newChatWithPromptButton.addEventListener('click', () => {
this.displayPremadePromptsList(true);
}
);
this.container.appendChild(this.newChatWithPromptButton);



this.newPlanChatButton = document.createElement('button');
this.newPlanChatButton.textContent = 'New Plan Chat';

this.newPlanChatButton.style.margin = '10px';
this.newPlanChatButton.addEventListener('click', () => {
this.newPlanChat();
Expand Down Expand Up @@ -244,12 +255,7 @@ export class ChatManager {
this.submitButton.style.width = '100%';
this.submitButton.style.marginBottom = '10px';
this.submitButton.addEventListener('click', async () => {
// test if message is empty. If empty, do not add message.
if (this.userInput.value !== '') {
await this.addMessage(this.userInput.value);
this.userInput.value = '';
}
await this.callLLM();
await this.submitButtonHandler();
});
this.container.appendChild(this.submitButton);

Expand All @@ -271,6 +277,15 @@ export class ChatManager {
this.setInput("")
}

async submitButtonHandler() {
// test if message is empty. If empty, do not add message.
if (this.userInput.value !== '') {
await this.addMessage(this.userInput.value);
this.userInput.value = '';
}
await this.callLLM();
}

async setTargetFile(targetFile) {
this.targetFileInput.value = targetFile;
ctx.targetFile = targetFile;
Expand Down Expand Up @@ -432,7 +447,7 @@ export class ChatManager {
if (markdown.codeBlocks.length > 0) {
// for loop over the code blocks and apply them
for (const codeBlock of markdown.codeBlocks) {
const applyCodeBlock = await ConfirmDialog.confirm("Apply code block?", ctx.autoApplyTimeout, true);
const applyCodeBlock = await confirm("Apply code block?", ctx.autoApplyTimeout, true);
if (applyCodeBlock) {
//const mergeWorked = await doAjax('./applySnippet', { snippet: codeBlock, targetFile: this.targetFileInput.value });

Expand All @@ -455,7 +470,7 @@ export class ChatManager {
}


async displayPremadePromptsList() {
async displayPremadePromptsList(newConversation = false) {
const customPromptsJSON = await doAjax('./readFile', { targetFile: '.aiCoder/prompts/customPrompts.json' });
let customPrompts = JSON.parse(customPromptsJSON.fileContent);
if (!customPrompts) customPrompts = [];
Expand All @@ -468,7 +483,30 @@ export class ChatManager {

this.promptsDialog.showModal();

this.promptsDialog.innerHTML = 'Pre-made Prompts:';
this.promptsDialog.innerHTML = '';

// add a checkbox for automatic submit mode
const autoSubmitCheckbox = document.createElement('input');
autoSubmitCheckbox.type = 'checkbox';
autoSubmitCheckbox.checked = localStorage.getItem('autoSubmitMode') === 'true';
autoSubmitCheckbox.style.margin = '10px';
this.promptsDialog.appendChild(autoSubmitCheckbox);
const autoSubmitLabel = document.createElement('label');
autoSubmitLabel.textContent = 'Auto Submit Mode';
autoSubmitLabel.style.fontWeight = 'bold';
autoSubmitLabel.style.margin = '10px';
this.promptsDialog.appendChild(autoSubmitLabel);
autoSubmitCheckbox.addEventListener('change', (event) => {
this.displayPremadePromptsList(newConversation);
localStorage.setItem('autoSubmitMode', autoSubmitCheckbox.checked);
});

// add "Pre-made Prompts:" to the dialog
const premadePromptsLabel = document.createElement('div');
premadePromptsLabel.textContent = 'Pre-made Prompts:';
premadePromptsLabel.style.fontWeight = 'bold';
this.promptsDialog.appendChild(premadePromptsLabel);


// loop over the prompts and add them to the dialog
// also add a trash can icon to delete the prompt from the list
Expand All @@ -482,9 +520,11 @@ export class ChatManager {
promptDiv.style.backgroundColor = 'rgba(0, 50, 100, 0.9)';
promptDiv.style.margin = '10px';
promptDiv.style.cursor = 'pointer';
promptDiv.addEventListener('click', () => {
this.setInput(prompt);
this.promptsDialog.close();
promptDiv.addEventListener('click', async () => {
if (newConversation) await this.newChat(prompt);
await this.setInput(prompt);
await this.promptsDialog.close();
if (autoSubmitCheckbox.checked) await this.submitButtonHandler();
});

const trashIcon = document.createElement('span');
Expand Down Expand Up @@ -543,7 +583,7 @@ export class ChatManager {
this.chatMode = 'chat';
await this.loadConversationsList();
this.conversationPicker.value = response.id;
await this.loadConversation(response.id); // Fix method call
return await this.loadConversation(response.id); // Fix method call
}

async newPlanChat(title = false) {
Expand Down Expand Up @@ -644,17 +684,18 @@ export class ChatManager {
const isCodeGood = await doAjax('./applySnippet', { snippet: codeString, targetFile: this.targetFileInput.value });

if (!isCodeGood.success) {
alert('Merge failed. Please resolve the conflict manually.');
await alert('Merge failed. Please resolve the conflict manually.');
// set the user input to say that the snippet was formatted incorrectly
// and needs to be corrected.

this.setInput(`The last snippet was formatted incorrectly and needs to be corrected.
await this.setInput(`The last snippet was formatted incorrectly and needs to be corrected.
Remember that methods must be encapsulated in a class.`);
if (this.autoApplyMode) {
await this.addMessage(this.userInput.value);
await this.callLLM();
}
}
return isCodeGood;
}

}
2 changes: 1 addition & 1 deletion public/LLMSettingsManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export class LLMSettingsManager {
}

if (activeModels.length > 1) {
alert('Only one model can be active at a time');
await alert('Only one model can be active at a time');
return;
}

Expand Down
25 changes: 19 additions & 6 deletions public/ProjectSettingsManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,10 @@ export class ProjectSettingsManager {

async init() {
this.container.innerHTML = '';
this.addSaveButton();
this.addRefreshButton();
this.systemPrompts = await this.fetchPrompts();
this.createPromptsDiv();

}

async addRefreshButton() {
Expand Down Expand Up @@ -93,6 +92,7 @@ export class ProjectSettingsManager {
editableDiv.style.whiteSpace = 'pre-wrap';
editableDiv.contentEditable = true; // Makes the div editable
editableDiv.textContent = content;
editableDiv.onchange = () => this.savePrompts();
return editableDiv;
}

Expand All @@ -103,28 +103,41 @@ export class ProjectSettingsManager {
saveButton.style.padding = '10px';
saveButton.style.margin = '10px';
saveButton.style.backgroundColor = 'green';

//saveButton.style.backgroundColor = 'blue';
saveButton.addEventListener('click', () => this.savePrompts());
this.container.appendChild(saveButton);
}

async savePrompts() {
const updatedPrompts = {};

// Gather updated values from editable divs
for (const fieldDiv of this.promptsDiv.children) {
const editableDiv = fieldDiv.querySelector('div[contenteditable]');
if (editableDiv) {
const field = editableDiv.getAttribute('data-field');
const value = editableDiv.textContent.trim(); // Retrieve the edited content
let value = editableDiv.innerHTML; // Retrieve the edited content

// Normalize the content to plain text
value = value
.replace(/<br\s*\/?>/g, '\n') // Replace <br> with newline
.replace(/<div>/g, '\n') // Replace opening <div> with newline
.replace(/<\/div>/g, '') // Remove closing </div>
.replace(/<p>/g, '\n') // Replace <p> with newline
.replace(/<\/p>/g, '') // Remove closing </p>
.replace(/&nbsp;/g, ' ') // Replace non-breaking spaces with regular spaces
//.replace(/\n+/g, '\n') // Collapse multiple newlines into a single newline
.trim(); // Trim leading/trailing whitespace

updatedPrompts[field] = value;
}
}

console.log(updatedPrompts); // Log the updated data for debugging
await doAjax('./updateSystemPrompts', updatedPrompts); // Send updated prompts back to the server

await this.init(); // Reinitialize the settings manager
}

}
Loading

0 comments on commit 1f5a543

Please sign in to comment.