Spaces:
Running
Running
File size: 3,959 Bytes
1daa44a bbeca57 1daa44a bbeca57 1daa44a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
import Initialize from "./initialize.js";
import Chat from "./chat.js";
import RenderSymbols from "./renderSymbols.js";
class UIManager{
constructor(){
this.initializer = new Initialize(this);
this.chat = new Chat(this);
this.renderSymbols = new RenderSymbols();
this.menu = document.getElementById('menu');
this.hamburger = document.getElementById('hamburger');
this.messagesDiv = document.getElementById('messages');
this.container = document.getElementById('container')
this.prevChatsCont = document.getElementById('prevChatsCont');
this.textBox = document.getElementById('textBox');
this.sendBtn = document.getElementById('sendBtn');
this.newChat = document.getElementById('newChat');
this.models = document.getElementById('models');
this.initialized = false;
this.webSearchBtn = document.getElementById('webSearch');
this.webSearch = false;
this.aiDiv;
this.userDiv;
this.aiP;
this.userP;
}
async run(){
await this.initializer.initialize();
this.handleTextBoxHeight();
this.events();
}
events(){
this.sendBtn.addEventListener('click',()=>{
this.send();
})
window.addEventListener('keydown',(e)=>{
if(e.key=='Enter' && !this.sendBtn.disabled){
this.send();
}
})
this.newChat.addEventListener('click', async ()=>{
await this.initializer.initialize();
})
this.webSearchBtn.addEventListener('click', ()=>{
if(this.webSearch){
this.webSearchBtn.style.color = 'white';
} else{
this.webSearchBtn.style.color = 'rgba(30,30,250,0.8)';
}
this.webSearch = !this.webSearch;
})
document.getElementById('closeAlert').onclick = ()=>{
document.getElementById('alert').style.display = 'none'
}
}
async send(){
this.appendUserMsg();
this.appendAiMsg();
await this.chat.chat();
}
appendUserMsg(msg=false){
this.userDiv = document.createElement('div');
this.userDiv.className = 'user';
this.userP = document.createElement('p');
if(msg){
this.userP.innerText = msg;
} else{
this.userP.innerText = this.textBox.value;
}
this.userDiv.appendChild(this.userP);
this.messagesDiv.appendChild(this.userDiv);
}
appendAiMsg(msg=false){
this.aiDiv = document.createElement('div');
this.aiDiv.className = 'ai';
this.aiP = document.createElement('p');
if(msg){
this.aiP.innerText=msg;
}
this.aiDiv.appendChild(this.aiP);
this.messagesDiv.appendChild(this.aiDiv);
}
handleTextBoxHeight() {
this.textBox.oninput = () => {
//this.textBox.value = this.textBox.value.trim();
this.textBox.style.height = 'auto';
if (this.textBox.scrollHeight <= 150) {
if(this.textBox.scrollHeight>60){
this.textBox.style.height = `${this.textBox.scrollHeight}px`;
}
} else {
this.textBox.style.height = '150px';
}
};
}
addChat(){
const prevChat = document.createElement('div');
prevChat.innerText = this.initializer.convTitle;
prevChat.className = 'prevChat';
prevChat.id = this.initializer.convId;
this.prevChatsCont.prepend(prevChat);
prevChat.style.backgroundColor = 'rgb(53, 53, 53)';
prevChat.addEventListener('click', ()=>{
this.initializer.reInitialize(prevChat.id);
})
}
}
export default UIManager |