Update application/static/js/components/uiManager.js

application/static/js/components/uiManager.js

@@ -1,109 +1,202 @@
-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);
-        })
-    }
-}
+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;
+        this.imageMode = false;
+        this.dialog = null;
+    }
+    async run(){
+        await this.initializer.initialize();
+        this.handleTextBoxHeight();
+        this.events();
+    }
+    events(){
+        this.sendBtn.addEventListener('click',()=>{
+            this.send();
+        })
+        window.addEventListener('keydown',(e)=>{
+            if (e.key === '/' && document.activeElement === this.textBox) {
+                e.preventDefault();
+                this.showDialog();
+            }
+
+            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'
+        }
+    }
+
+    showDialog() {
+        if (this.dialog) {
+            this.dialog.remove();
+            this.dialog = null;
+            return;
+        }
+        this.dialog = document.createElement('div');
+        this.dialog.style.position = 'absolute';
+        this.dialog.style.top = `${this.textBox.offsetTop - 100}px`;
+        this.dialog.style.left = `${this.textBox.offsetLeft}px`;
+        this.dialog.style.backgroundColor = 'white';
+        this.dialog.style.border = '1px solid black';
+        this.dialog.style.padding = '10px';
+        this.dialog.style.zIndex = '1000';
+        this.dialog.innerHTML = `
+            <button id="dialogImage">Image</button>
+            <button id="dialogSearch">Search</button>
+        `;
+        document.body.appendChild(this.dialog);
+
+        document.getElementById('dialogImage').addEventListener('click', () => {
+            this.imageMode = true;
+            this.textBox.value = "/image ";
+            this.dialog.remove();
+            this.dialog = null;
+
+        });
+
+        document.getElementById('dialogSearch').addEventListener('click', () => {
+            this.webSearch = true;
+            this.webSearchBtn.style.color = 'rgba(30,30,250,0.8)';
+            this.textBox.value = "/search ";
+            this.dialog.remove();
+            this.dialog = null;
+        });
+    }
+
+
+
+    async send(){
+        let promptText = this.textBox.value;
+        let imageBase64 = null;
+
+        if (this.imageMode) {
+            const file = await this.getImageFile();
+            if (file) {
+                imageBase64 = await this.getBase64(file);
+            }
+            promptText = promptText.replace(/^\/image\s*/, '');
+            this.imageMode = false;
+        }
+
+        this.appendUserMsg(promptText, imageBase64);
+        this.appendAiMsg();
+
+
+        await this.chat.chat();
+    }
+
+
+    async getImageFile() {
+        return new Promise(resolve => {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.accept = 'image/*';
+            input.onchange = e => {
+                const file = e.target.files[0];
+                resolve(file);
+            };
+            input.click();
+        });
+    }
+
+    async getBase64(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = error => reject(error);
+        });
+    }
+
+
+    appendUserMsg(msg=false, imageBase64 = null){
+        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;
+        }
+
+        if (imageBase64) {
+            const img = document.createElement('img');
+            img.src = imageBase64;
+            img.style.maxWidth = '100%';
+            img.style.height = 'auto';
+            this.userDiv.appendChild(img);
+        }
+
+        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.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