vbatts/llama.cpp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SimpleChat: Move ui elements into MultiChatUI, Update el IDs

Browse source 
Move ui elements into MultiChatUI, so that current handleUserSubmit
doesnt need to take the element arguments. Also in future, when
user is allowed to switch between different chat sessions, the
UI can be updated as needed by using the elements in UI already
known to MultiChatUI instance.

Rename the element ids' so that they follow a common convention,
as well as one can identify what the element represents in a more
consistant manner.
This commit is contained in:
HanishKVC 2024-05-21 09:43:02 +05:30
parent 7be6aeb6d6
commit 1cd10ae9c4
3 changed files with 66 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

10
examples/server/public_simplechat/index.html
View file

@ -26,12 +26,12 @@
</div>
<div class="sameline">
<label for="system">System</label>
<input type="text" name="system" id="system" class="flex-grow"/>
<label for="system-in">System</label>
<input type="text" name="system" id="system-in" class="flex-grow"/>
</div>
<hr>
<div id="chat">
<div id="chat-div">
<p> Enter the system prompt above, before entering/submitting any user query.</p>
<p> Enter your text to the ai assistant below.</p>
<p> Use shift+enter for inserting enter.</p>
@ -40,8 +40,8 @@
<hr>
<div class="sameline">
<textarea id="user" class="flex-grow" rows="3"></textarea>
<button id="submit">submit</button>
<textarea id="user-in" class="flex-grow" rows="3"></textarea>
<button id="user-btn">submit</button>
</div>
</div>

2
examples/server/public_simplechat/simplechat.css
View file

@ -25,7 +25,7 @@
float: right;
}
#chat {
#chat-div {
overflow: scroll;
flex-grow: 1;
flex-shrink: 1;

104
examples/server/public_simplechat/simplechat.js
View file

@ -157,6 +157,53 @@ class MultiChatUI {
constructor() {
/** @type {Object<string, SimpleChat>} */
this.simpleChats = {};
// the ui elements
this.elInSystem = /** @type{HTMLInputElement} */(document.getElementById("system-in"));
this.elDivChat = /** @type{HTMLDivElement} */(document.getElementById("chat-div"));
this.elBtnUser = /** @type{HTMLButtonElement} */(document.getElementById("user-btn"));
this.elInUser = /** @type{HTMLInputElement} */(document.getElementById("user-in"));
this.elSelectApiEP = /** @type{HTMLSelectElement} */(document.getElementById("api-ep"));
this.validate_element(this.elInSystem, "system-in");
this.validate_element(this.elDivChat, "chat-div");
this.validate_element(this.elInUser, "user-in");
this.validate_element(this.elSelectApiEP, "api-ep");
}
/**
* Check if the element got
* @param {HTMLElement | null} el
* @param {string} msgTag
*/
validate_element(el, msgTag) {
if (el == null) {
throw Error(`ERRR:MCUI:${msgTag} element missing in html...`);
} else {
console.debug(`INFO:MCUI:${msgTag}:Id:${el.id}:Name:${el["name"]}`);
}
}
/**
* Setup the needed callbacks wrt UI
* @param {string} chatId
*/
setup_ui(chatId) {
this.elBtnUser.addEventListener("click", (ev)=>{
if (this.elInUser.disabled) {
return;
}
this.handle_user_submit(chatId, this.elSelectApiEP.value);
});
this.elInUser.addEventListener("keyup", (ev)=> {
// allow user to insert enter into their message using shift+enter.
// while just pressing enter key will lead to submitting.
if ((ev.key === "Enter") && (!ev.shiftKey)) {
this.elBtnUser.click();
ev.preventDefault();
}
});
}
/**
@ -170,23 +217,20 @@ class MultiChatUI {
/**
* Handle user query submit request, wrt specified chat session.
* @param {string} chatId
* @param {HTMLInputElement} inputSystem
* @param {HTMLInputElement} inputUser
* @param {HTMLDivElement} divChat
* @param {string} apiEP
*/
async handle_user_submit(chatId, inputSystem, inputUser, divChat, apiEP) {
async handle_user_submit(chatId, apiEP) {
let chat = this.simpleChats[chatId];
chat.add_system_anytime(inputSystem.value, chatId);
chat.add_system_anytime(this.elInSystem.value, chatId);
let content = inputUser.value;
let content = this.elInUser.value;
if (!chat.add(Roles.User, content)) {
console.debug(`WARN:MCUI:${chatId}:HandleUserSubmit:Ignoring empty user input...`);
return;
}
chat.show(divChat);
chat.show(this.elDivChat);
let theBody;
let theUrl = gChatURL[apiEP]
@ -196,8 +240,8 @@ class MultiChatUI {
theBody = chat.request_prompt_jsonstr();
}
inputUser.value = "working...";
inputUser.disabled = true;
this.elInUser.value = "working...";
this.elInUser.disabled = true;
console.debug(`DBUG:MCUI:${chatId}:HandleUserSubmit:${theUrl}:ReqBody:${theBody}`);
let resp = await fetch(theUrl, {
method: "POST",
@ -207,8 +251,8 @@ class MultiChatUI {
body: theBody,
});
inputUser.value = "";
inputUser.disabled = false;
this.elInUser.value = "";
this.elInUser.disabled = false;
let respBody = await resp.json();
console.debug(`DBUG:MCUI:${chatId}:HandleUserSubmit:RespBody:${respBody}`);
let assistantMsg;
@ -222,7 +266,7 @@ class MultiChatUI {
}
}
chat.add(Roles.Assistant, assistantMsg);
chat.show(divChat);
chat.show(this.elDivChat);
// 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
@ -230,48 +274,20 @@ class MultiChatUI {
if ((apiEP == ApiEP.Completion) && (gbCompletionFreshChatAlways)) {
chat.xchat.length = 0;
}
inputUser.focus();
this.elInUser.focus();
}
}
let gMuitChat = new MultiChatUI();
let gMuitChat;
const gChatId = "Default";
function startme() {
let inputSystem = /** @type{HTMLInputElement} */(document.getElementById("system"));
let divChat = /** @type{HTMLDivElement} */(document.getElementById("chat"));
let btnSubmit = document.getElementById("submit");
let inputUser = /** @type{HTMLInputElement} */(document.getElementById("user"));
let selectApiEP = /** @type{HTMLInputElement} */(document.getElementById("api-ep"));
if (divChat == null) {
throw Error("ERRR:StartMe:Chat element missing");
}
console.log("INFO:StartMe:Starting...");
gMuitChat = new MultiChatUI();
gMuitChat.new_chat(gChatId);
btnSubmit?.addEventListener("click", (ev)=>{
if (inputUser.disabled) {
return;
gMuitChat.setup_ui(gChatId);
}
gMuitChat.handle_user_submit(gChatId, inputSystem, inputUser, divChat, selectApiEP.value);
});
inputUser?.addEventListener("keyup", (ev)=> {
// allow user to insert enter into their message using shift+enter.
// while just pressing enter key will lead to submitting.
if ((ev.key === "Enter") && (!ev.shiftKey)) {
btnSubmit?.click();
ev.preventDefault();
}
});
}
document.addEventListener("DOMContentLoaded", startme);