Skip to content

Commit 6c8c7dc

Browse files
mmiscoolmmiscool
committed
Latest and greatest with chatUI
1 parent 88c8fca commit 6c8c7dc

File tree

6 files changed

+480
-547
lines changed

6 files changed

+480
-547
lines changed

‎.parcelrc‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
{
22
"extends": "@parcel/config-default",
33
"transformers": {
4-
"*.worker.js": ["@parcel/transformer-js"]
4+
"*.worker.js": [
5+
"@parcel/transformer-js"
6+
]
57
}
6-
}
8+
}

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
"version": "1.0.0",
44
"description": "AI assisted codeing environment similar to JSFiddle",
55
"scripts": {
6-
"dev": "npx parcel src/index.html",
7-
"build": "npx parcel build src/index.html --public-url ."
6+
"dev": "npx parcel src/index.html --no-hmr ",
7+
"build": "npx parcel build src/index.html --public-url ."
88
},
99
"dependencies": {
1010
"@anthropic-ai/sdk": "^0.39.0",

‎src/chat.js‎

Lines changed: 110 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,126 @@
1-
import { conversation, readSetting, writeSetting, listAllModels, llmSettings, listSettings } from "./llmCall.js";
2-
llmSettings();
1+
import { conversation, writeSetting, listSettings } from "./llmCall.js";
2+
33
// new class extends conversation
44
export class ChatUI extends conversation {
55
constructor() {
66
super();
77
this.chatDiv = document.createElement("div");
88
this.chatDiv.className = "chat";
9-
this.setup();
10-
}
9+
this.chatDiv.style.height = "100%";
1110

12-
async setup() {
13-
await llmSettings();
14-
// this.chatDiv.innerHTML = JSON.stringify(await listSettings());
1511
this.createSettingsUI();
16-
this.createChatUI();
12+
this.createConversationUI();
13+
this.toggleChat();
1714
}
1815

16+
async toggleChat() {
17+
// switch between displaying the conversation and the settings
18+
if (this.conversationDiv.style.display === "none") {
19+
this.conversationDiv.style.display = "block";
20+
this.chatSettingsDiv.style.display = "none";
21+
}
22+
else {
23+
this.conversationDiv.style.display = "none";
24+
this.chatSettingsDiv.style.display = "block";
25+
}
26+
27+
}
28+
29+
async createConversationUI() {
30+
this.conversationDiv = document.createElement("div");
31+
this.conversationDiv.className = "conversation";
32+
this.chatDiv.appendChild(this.conversationDiv);
33+
34+
const bottomArea = document.createElement("div");
35+
bottomArea.className = "bottom-area";
36+
this.conversationDiv.appendChild(bottomArea);
37+
38+
const messageInput = document.createElement("textarea");
39+
messageInput.className = "message-input";
40+
messageInput.placeholder = "Type your message here...";
41+
bottomArea.appendChild(messageInput);
42+
43+
const sendButton = document.createElement("button");
44+
sendButton.className = "send-button";
45+
sendButton.innerText = "Send";
46+
sendButton.addEventListener("click", async () => {
47+
const message = messageInput.value;
48+
if (message) {
49+
const messageDiv = document.createElement("div");
50+
messageDiv.className = "message";
51+
messageDiv.innerText = message;
52+
this.conversationDiv.appendChild(messageDiv);
53+
54+
messageInput.value = "";
55+
56+
const response = await this.sendMessage(message);
57+
58+
const responseDiv = document.createElement("div");
59+
responseDiv.className = "response";
60+
responseDiv.innerText = response;
61+
this.conversationDiv.appendChild(responseDiv);
62+
}
63+
});
64+
bottomArea.appendChild(sendButton);
65+
66+
const controlsRow = document.createElement("div");
67+
controlsRow.className = "controls-row";
68+
bottomArea.appendChild(controlsRow);
69+
70+
const modelSelector = document.createElement("select");
71+
modelSelector.className = "model-selector";
72+
controlsRow.appendChild(modelSelector);
73+
74+
// use super.listAllModels() to get the models list and populate the selector
75+
const models = await this.listAllModels();
76+
await models.forEach(async model => {
77+
const option = document.createElement("option");
78+
option.value = model;
79+
option.innerText = model;
80+
// modify the innerText to replace the "|" character with a " | " string
81+
option.innerText = model.replace(/\|/g, "___");
82+
await modelSelector.appendChild(option);
83+
});
84+
85+
modelSelector.value = this.model;
1986

20-
async createSettingsUI() {
21-
const settingsDiv = document.createElement("div");
22-
settingsDiv.className = "settings";
2387

88+
modelSelector.addEventListener("change", async () => {
89+
await super.setModel(modelSelector.value);
90+
});
91+
92+
93+
const settingsButton = document.createElement("button");
94+
settingsButton.className = "settings-button";
95+
settingsButton.innerText = "⚙️";
96+
settingsButton.title = "Switch to settings mode";
97+
settingsButton.addEventListener("click", () => {
98+
this.toggleChat();
99+
});
100+
controlsRow.appendChild(settingsButton);
101+
}
102+
103+
104+
105+
async createSettingsUI() {
106+
this.chatSettingsDiv = document.createElement("div");
107+
this.chatSettingsDiv.className = "chat";
108+
this.chatSettingsDiv.style.display = "none";
109+
this.chatDiv.appendChild(this.chatSettingsDiv);
24110
// add a button to the top of the settings div to switch to the chat div
25111
const chatButton = document.createElement("button");
26-
chatButton.innerText = "Chat";
27-
chatButton.style.margin = "10px";
28-
chatButton.style.padding = "10px";
112+
chatButton.innerText = "Return to chat 🗨";
29113
chatButton.style.width = "100%";
30-
31-
114+
// tooltip
115+
chatButton.title = "Switch to chat mode";
32116
chatButton.addEventListener("click", () => {
33-
this.chatDiv.innerHTML = "";
34-
this.setup();
117+
this.toggleChat();
35118
});
36-
settingsDiv.appendChild(chatButton);
119+
this.chatSettingsDiv.appendChild(chatButton);
37120

38121

39122
const settings = await listSettings();
123+
console.log("Settings: ", settings);
40124

41125
// sort the settings by name
42126
settings.sort((a, b) => {
@@ -49,10 +133,9 @@ export class ChatUI extends conversation {
49133
// itterate over settings and create a input for each setting.
50134
// make it so that the setting value is writted immediately on change
51135
settings.forEach(setting => {
52-
const settingDiv = document.createElement("div");
53-
settingDiv.style.margin = "10px";
54-
settingDiv.style.padding = "10px";
55-
settingDiv.className = "setting";
136+
const settingDiv = document.createElement("span");
137+
138+
//settingDiv.className = "setting";
56139
const label = document.createElement("label");
57140
label.innerText = setting.name;
58141

@@ -61,19 +144,20 @@ export class ChatUI extends conversation {
61144
if (setting.name.includes("prompt")) {
62145
input = document.createElement("textarea");
63146
input.style.height = "200px";
147+
} else if (setting.name.includes("key")) {
148+
input.type = "password";
64149
} else {
65150
input.type = "text";
66151
}
67152

68153
input.id = setting.name;
69154
input.value = setting.value;
70-
input.style.width = "100%";
71155
input.addEventListener("change", async () => {
72156
await this.saveSettings();
73157
});
74158
settingDiv.appendChild(label);
75159
settingDiv.appendChild(input);
76-
settingsDiv.appendChild(settingDiv);
160+
this.chatSettingsDiv.appendChild(settingDiv);
77161

78162
// add an onchange event to the input
79163
input.addEventListener("change", async () => {
@@ -82,7 +166,7 @@ export class ChatUI extends conversation {
82166

83167
});
84168

85-
this.chatDiv.appendChild(settingsDiv);
169+
//this.chatDiv.appendChild(this.chatSettingsDiv);
86170
}
87171

88172
async loadSettings() {

0 commit comments

Comments
 (0)