SimpleChat:JS: Move handle submit into MultiChat, build on same
Create an instance of MultiChatUI and inturn a instance of chat session, which is what the UI will inturn work on.
This commit is contained in:
parent
fcf2af9504
commit
8ef1aa97a6
1 changed files with 73 additions and 69 deletions
|
@ -144,73 +144,6 @@ class SimpleChat {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle submit request by user
|
|
||||||
* @param {HTMLInputElement} inputSystem
|
|
||||||
* @param {HTMLInputElement} inputUser
|
|
||||||
* @param {HTMLDivElement} divChat
|
|
||||||
* @param {string} apiEP
|
|
||||||
*/
|
|
||||||
async function handle_submit(inputSystem, inputUser, divChat, apiEP) {
|
|
||||||
|
|
||||||
gChat.add_system_anytime(inputSystem.value, "0");
|
|
||||||
|
|
||||||
let content = inputUser?.value;
|
|
||||||
if (!gChat.add(Roles.User, content)) {
|
|
||||||
console.debug("WARN:HandleSubmit:Ignoring empty user input...");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
gChat.show(divChat);
|
|
||||||
|
|
||||||
let theBody;
|
|
||||||
let theUrl = gChatURL[apiEP]
|
|
||||||
if (apiEP == ApiEP.Chat) {
|
|
||||||
theBody = gChat.request_messages_jsonstr();
|
|
||||||
} else {
|
|
||||||
theBody = gChat.request_prompt_jsonstr();
|
|
||||||
}
|
|
||||||
|
|
||||||
inputUser.value = "working...";
|
|
||||||
inputUser.disabled = true;
|
|
||||||
console.debug(`DBUG:HandleSubmit:${theUrl}:ReqBody:${theBody}`);
|
|
||||||
let resp = await fetch(theUrl, {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
body: theBody,
|
|
||||||
});
|
|
||||||
|
|
||||||
inputUser.value = "";
|
|
||||||
inputUser.disabled = false;
|
|
||||||
let respBody = await resp.json();
|
|
||||||
console.debug("DBUG:HandleSubmit:RespBody:", respBody);
|
|
||||||
let assistantMsg;
|
|
||||||
if (apiEP == ApiEP.Chat) {
|
|
||||||
assistantMsg = respBody["choices"][0]["message"]["content"];
|
|
||||||
} else {
|
|
||||||
try {
|
|
||||||
assistantMsg = respBody["choices"][0]["text"];
|
|
||||||
} catch {
|
|
||||||
assistantMsg = respBody["content"];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
gChat.add(Roles.Assistant, assistantMsg);
|
|
||||||
gChat.show(divChat);
|
|
||||||
// Purposefully clear at end rather than begin of this function
|
|
||||||
// so that one can switch from chat to completion mode and sequece
|
|
||||||
// in a completion mode with multiple user-assistant chat data
|
|
||||||
// from before to be sent/occur once.
|
|
||||||
if ((apiEP == ApiEP.Completion) && (gbCompletionFreshChatAlways)) {
|
|
||||||
gChat.xchat.length = 0;
|
|
||||||
}
|
|
||||||
inputUser.focus();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
let gChat = new SimpleChat();
|
|
||||||
let gBaseURL = "http://127.0.0.1:8080";
|
let gBaseURL = "http://127.0.0.1:8080";
|
||||||
let gChatURL = {
|
let gChatURL = {
|
||||||
'chat': `${gBaseURL}/chat/completions`,
|
'chat': `${gBaseURL}/chat/completions`,
|
||||||
|
@ -218,6 +151,7 @@ let gChatURL = {
|
||||||
}
|
}
|
||||||
const gbCompletionFreshChatAlways = true;
|
const gbCompletionFreshChatAlways = true;
|
||||||
|
|
||||||
|
|
||||||
class MultiChatUI {
|
class MultiChatUI {
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
|
@ -228,16 +162,84 @@ class MultiChatUI {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Start a new chat
|
* Start a new chat session
|
||||||
*/
|
*/
|
||||||
new_chat() {
|
new_chat() {
|
||||||
this.simpleChats.push(new SimpleChat());
|
this.simpleChats.push(new SimpleChat());
|
||||||
this.iChat = this.simpleChats.length - 1;
|
this.iChat = this.simpleChats.length - 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle user query submit request, wrt current chat session.
|
||||||
|
* @param {HTMLInputElement} inputSystem
|
||||||
|
* @param {HTMLInputElement} inputUser
|
||||||
|
* @param {HTMLDivElement} divChat
|
||||||
|
* @param {string} apiEP
|
||||||
|
*/
|
||||||
|
async handle_user_submit(inputSystem, inputUser, divChat, apiEP) {
|
||||||
|
|
||||||
|
let chat = this.simpleChats[this.iChat];
|
||||||
|
|
||||||
|
chat.add_system_anytime(inputSystem.value, "0");
|
||||||
|
|
||||||
|
let content = inputUser.value;
|
||||||
|
if (!chat.add(Roles.User, content)) {
|
||||||
|
console.debug("WARN:MCUI:HandleUserSubmit:Ignoring empty user input...");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
chat.show(divChat);
|
||||||
|
|
||||||
|
let theBody;
|
||||||
|
let theUrl = gChatURL[apiEP]
|
||||||
|
if (apiEP == ApiEP.Chat) {
|
||||||
|
theBody = chat.request_messages_jsonstr();
|
||||||
|
} else {
|
||||||
|
theBody = chat.request_prompt_jsonstr();
|
||||||
|
}
|
||||||
|
|
||||||
|
inputUser.value = "working...";
|
||||||
|
inputUser.disabled = true;
|
||||||
|
console.debug(`DBUG:MCUI:HandleUserSubmit:${theUrl}:ReqBody:${theBody}`);
|
||||||
|
let resp = await fetch(theUrl, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: theBody,
|
||||||
|
});
|
||||||
|
|
||||||
|
inputUser.value = "";
|
||||||
|
inputUser.disabled = false;
|
||||||
|
let respBody = await resp.json();
|
||||||
|
console.debug("DBUG:MCUI:HandleUserSubmit:RespBody:", respBody);
|
||||||
|
let assistantMsg;
|
||||||
|
if (apiEP == ApiEP.Chat) {
|
||||||
|
assistantMsg = respBody["choices"][0]["message"]["content"];
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
assistantMsg = respBody["choices"][0]["text"];
|
||||||
|
} catch {
|
||||||
|
assistantMsg = respBody["content"];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
chat.add(Roles.Assistant, assistantMsg);
|
||||||
|
chat.show(divChat);
|
||||||
|
// Purposefully clear at end rather than begin of this function
|
||||||
|
// so that one can switch from chat to completion mode and sequece
|
||||||
|
// in a completion mode with multiple user-assistant chat data
|
||||||
|
// from before to be sent/occur once.
|
||||||
|
if ((apiEP == ApiEP.Completion) && (gbCompletionFreshChatAlways)) {
|
||||||
|
chat.xchat.length = 0;
|
||||||
|
}
|
||||||
|
inputUser.focus();
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let gMuitChat = new MultiChatUI();
|
||||||
|
|
||||||
|
|
||||||
function startme() {
|
function startme() {
|
||||||
|
|
||||||
let inputSystem = /** @type{HTMLInputElement} */(document.getElementById("system"));
|
let inputSystem = /** @type{HTMLInputElement} */(document.getElementById("system"));
|
||||||
|
@ -250,11 +252,13 @@ function startme() {
|
||||||
throw Error("ERRR:StartMe:Chat element missing");
|
throw Error("ERRR:StartMe:Chat element missing");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
gMuitChat.new_chat();
|
||||||
|
|
||||||
btnSubmit?.addEventListener("click", (ev)=>{
|
btnSubmit?.addEventListener("click", (ev)=>{
|
||||||
if (inputUser.disabled) {
|
if (inputUser.disabled) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
handle_submit(inputSystem, inputUser, divChat, selectApiEP.value);
|
gMuitChat.handle_user_submit(inputSystem, inputUser, divChat, selectApiEP.value);
|
||||||
});
|
});
|
||||||
|
|
||||||
inputUser?.addEventListener("keyup", (ev)=> {
|
inputUser?.addEventListener("keyup", (ev)=> {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue