Skip to content

Commit 88c8fca

Browse files
mmiscoolmmiscool
committed
latest and greatest
1 parent c3bd16c commit 88c8fca

File tree

3 files changed

+142
-11
lines changed

3 files changed

+142
-11
lines changed

‎src/chat.js‎

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { conversation, readSetting, writeSetting, listAllModels, llmSettings, listSettings } from "./llmCall.js";
2-
2+
llmSettings();
33
// new class extends conversation
44
export class ChatUI extends conversation {
55
constructor() {
@@ -10,8 +10,8 @@ export class ChatUI extends conversation {
1010
}
1111

1212
async setup() {
13-
llmSettings();
14-
// this.chatDiv.innerHTML = JSON.stringify(await listSettings());
13+
await llmSettings();
14+
// this.chatDiv.innerHTML = JSON.stringify(await listSettings());
1515
this.createSettingsUI();
1616
this.createChatUI();
1717
}
@@ -21,8 +21,31 @@ export class ChatUI extends conversation {
2121
const settingsDiv = document.createElement("div");
2222
settingsDiv.className = "settings";
2323

24+
// add a button to the top of the settings div to switch to the chat div
25+
const chatButton = document.createElement("button");
26+
chatButton.innerText = "Chat";
27+
chatButton.style.margin = "10px";
28+
chatButton.style.padding = "10px";
29+
chatButton.style.width = "100%";
30+
31+
32+
chatButton.addEventListener("click", () => {
33+
this.chatDiv.innerHTML = "";
34+
this.setup();
35+
});
36+
settingsDiv.appendChild(chatButton);
37+
2438

2539
const settings = await listSettings();
40+
41+
// sort the settings by name
42+
settings.sort((a, b) => {
43+
if (a.name < b.name) return -1;
44+
if (a.name > b.name) return 1;
45+
return 0;
46+
});
47+
48+
2649
// itterate over settings and create a input for each setting.
2750
// make it so that the setting value is writted immediately on change
2851
settings.forEach(setting => {
@@ -32,8 +55,16 @@ export class ChatUI extends conversation {
3255
settingDiv.className = "setting";
3356
const label = document.createElement("label");
3457
label.innerText = setting.name;
35-
const input = document.createElement("input");
36-
input.type = "text";
58+
59+
let input = document.createElement("input");
60+
// check if the name contains the word prompt. If it is a prompt then create a textarea
61+
if (setting.name.includes("prompt")) {
62+
input = document.createElement("textarea");
63+
input.style.height = "200px";
64+
} else {
65+
input.type = "text";
66+
}
67+
3768
input.id = setting.name;
3869
input.value = setting.value;
3970
input.style.width = "100%";

‎src/llmCall.js‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,17 @@ export async function writeFile(filePath, content) {
4949
localStorage.setItem(filePath, content);
5050
}
5151

52+
export async function deleteFile(filePath) {
53+
localStorage.removeItem(filePath);
54+
alert(`File ${filePath} deleted.`);
55+
}
56+
export async function deleteSetting(key) {
57+
// remove the setting. from the key
58+
const newKey = await key.replace('setting.', '');
59+
localStorage.removeItem(newKey);
60+
}
61+
62+
5263
async function checkForKey(key) {
5364
console.log(`Checking for key: ${key}`); // Debugging line
5465
console.log(`current value of key: ${localStorage[key]}`); // Debugging line
@@ -200,17 +211,18 @@ ${inputMessages[i].description}
200211

201212

202213

203-
214+
llmSettings();
204215

205216
export async function llmSettings() {
206217
for (let i = 0; i < llmServices.length; i++) {
207218
const service = llmServices[i];
208219
await readSetting(`llmConfig/${service}-api-key.txt`);
209220
}
210221

211-
returnObject = [];
212-
// find all settings files and return them as an array
213-
const settings = await listAllModels();
222+
await readSetting(`prompts/system.md`);
223+
await readSetting(`prompts/snippet-production.md`);
224+
225+
return true;
214226
}
215227

216228
async function getModels(service) {

‎src/main.js‎

Lines changed: 90 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ self.MonacoEnvironment = {
99
import * as monaco from 'monaco-editor';
1010
import { ChatCompletionRunner } from 'openai/lib/ChatCompletionRunner.mjs';
1111
import { ChatUI } from './chat';
12+
import { deleteFile } from './llmCall';
1213
//import { getMonacoWorker } from './monaco-editor-workers.js';
1314

1415

@@ -84,7 +85,7 @@ class aiFiddleEditor {
8485
this.chatPanel.style.width = '20%';
8586
this.chatPanel.style.minWidth = '100px';
8687
this.chatPanel.style.borderRight = '1px solid #333';
87-
88+
8889

8990
this.editorPanel = createPanel();
9091
this.editorPanel.style.width = '40%';
@@ -114,6 +115,86 @@ class aiFiddleEditor {
114115
this.iframeToolbar.style.fontSize = '14px';
115116
this.iframeToolbar.style.height = '33px';
116117

118+
119+
// add an open button using the unicode character for folder
120+
const openBtn = document.createElement('button');
121+
openBtn.textContent = '📂'
122+
openBtn.style.background = '#555';
123+
openBtn.style.border = 'none';
124+
openBtn.style.color = '#fff';
125+
openBtn.style.cursor = 'pointer';
126+
openBtn.style.padding = '6px 10px';
127+
openBtn.onclick = () => {
128+
// display a list of projects in the local storage and allow the user to select one
129+
const projects = Object.keys(localStorage).filter(key => key.endsWith('.project'));
130+
const projectList = document.createElement('dialog');
131+
132+
projectList.style.position = 'absolute';
133+
projectList.style.background = '#333';
134+
projectList.style.color = '#fff';
135+
projectList.style.padding = '10px';
136+
projectList.style.borderRadius = '5px';
137+
138+
projectList.style.zIndex = '10000';
139+
projectList.style.width = '200px';
140+
projectList.style.maxHeight = '300px';
141+
projectList.style.overflowY = 'scroll';
142+
projectList.style.overflowX = 'hidden';
143+
projectList.style.left = '10px';
144+
projectList.style.top = '10px';
145+
projectList.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
146+
projectList.style.border = '1px solid #666';
147+
projectList.style.fontFamily = 'sans-serif';
148+
projectList.style.fontSize = '14px';
149+
projectList.style.fontWeight = 'bold';
150+
151+
152+
projects.forEach(project => {
153+
const projectName = project.replace('.project', '');
154+
const projectItem = document.createElement('div');
155+
const projectRow = document.createElement('div');
156+
157+
// add a trach icon to delete the project
158+
const deleteBtn = document.createElement('button');
159+
deleteBtn.textContent = '🗑️'
160+
deleteBtn.style.background = 'none';
161+
deleteBtn.style.border = 'none';
162+
deleteBtn.style.color = '#fff';
163+
deleteBtn.style.cursor = 'pointer';
164+
deleteBtn.style.padding = '0px 5px';
165+
deleteBtn.onclick = (e) => {
166+
e.stopPropagation();
167+
if(confirm(`Do you really want to delete the ${projectName} project`))deleteFile(project);
168+
document.body.removeChild(projectList);
169+
};
170+
171+
projectRow.appendChild(deleteBtn);
172+
173+
174+
projectItem.innerHTML+=projectName;
175+
projectItem.style.padding = '5px';
176+
projectItem.style.cursor = 'pointer';
177+
projectItem.style.borderBottom = '1px solid #444';
178+
projectItem.onclick = () => {
179+
this.project.name = projectName;
180+
this.loadProjectFromStorage();
181+
this.setEditorValues();
182+
this.saveProjectToStorage();
183+
document.body.removeChild(projectList);
184+
};
185+
186+
projectRow.appendChild(projectItem);
187+
projectList.appendChild(projectRow);
188+
projectRow.style.display = 'flex';
189+
});
190+
document.body.appendChild(projectList);
191+
192+
projectList.showModal();
193+
}
194+
195+
this.iframeToolbar.appendChild(openBtn);
196+
197+
117198
this.nameInput = document.createElement('input');
118199
this.nameInput.placeholder = 'Project name';
119200
this.nameInput.style.flex = '1';
@@ -251,7 +332,14 @@ class aiFiddleEditor {
251332
this.editors[tab].onDidChangeModelContent(() => this.saveEditorValues());
252333
});
253334

254-
this.nameInput.addEventListener('input', () => this.saveEditorValues());
335+
//this.nameInput.addEventListener('onChange', () => this.saveEditorValues());
336+
337+
// use the onchange event to save the project name
338+
this.nameInput.addEventListener('change', () => {
339+
this.project.name = this.nameInput.value;
340+
this.saveProjectToStorage();
341+
});
342+
255343
this.switchTab('HTML');
256344
}
257345

0 commit comments

Comments
 (0)