v0.1.6 bug fix

components/account-page/index.js

@@ -11,8 +11,8 @@ if(user_info_saved) user_info_saved = JSON.parse(user_info_saved);
 const {
     register, login, logout, updateUserInfo
 } = useUser(user=>{
-    if(!input_details_main) return;
     current_user = user;
+    if(!input_details_main) return;
     createInputDetailsPage();
 });
 

components/chat-page/chatMain.js

@@ -6,19 +6,21 @@ import showMessage from "../../tools/message.js";
 import request from "../../tools/request.js";
 import getSVG from "../../tools/svgs.js";
 
-let conversation = {}, model_settings = {}, 
+let conversation = {pending: false}, model_settings = {}, 
     main_elem, toggle_expand,
     stream_response=true;
 
+let abort_controller;
+
 const { 
     componetDismount: conversationDismount, 
     componentReMount: conversationReMount, 
     togglePending,
     sendMessage:appendConversationMessage 
 } = useConversation(c=>{
     conversation.pending = c.pending;
-    const submit_icon = document.querySelector('#submit-chat .send svg.submit-icon');
-    submit_icon && submit_icon.classList.toggle('pending', conversation.pending)
+    const submit_chat_form = document.getElementById('submit-chat')
+    submit_chat_form && submit_chat_form.classList.toggle('pending', conversation.pending);
     if(c.id === conversation.id) return;
     conversation = c;
     if(!conversation.id) {
@@ -102,9 +104,9 @@ export default function createChatMain(main, toggleExpand, openModelSetting) {
 function buildForm() {
     const submit_chat =  document.getElementById('submit-chat')
     submit_chat.innerHTML = `
-    <div class='send'>
-        <input type='submit' class='submit-btn clickable'>
-        ${getSVG('send', 'submit-icon')}
+    <div class='right-button'>
+        <input type='submit' class='btn clickable'>
+        ${getSVG('send', 'icon send')}
     </div>`;
 
     const input = document.createElement('input');
@@ -114,7 +116,15 @@ function buildForm() {
 
     submit_chat.insertAdjacentElement("afterbegin", input);
     submit_chat.clientHeight;
-
+
+    const abortMessage = document.createElement('div');
+    abortMessage.className = 'right-button abort-message clickable'
+    abortMessage.onclick = () => {
+        conversation.pending && abort_controller.abort();
+    }
+    abortMessage.innerHTML = getSVG('stop-circle-fill', 'icon');
+    submit_chat.appendChild(abortMessage);
+
     if(!conversation.history.length) {
         toggle_expand();
         input.focus();
@@ -125,18 +135,24 @@ function submitContent(evt) {
     evt.preventDefault();
     if(conversation.pending) {
         showMessage(
-            "Please wait until assistant finished response.",
+            "Please wait until assistant finished response or abort manually.",
             { type: 'warn' }
         )
         return;
     }
 
     const content = evt.target['send-content'].value;
-    content && (
+    if(content) {
         stream_response ? 
         sendMessageStream(content) : 
         sendMessageWaiting(content)
-    )
+    } else {
+        showMessage(
+            "Message is empty, feel free to ask anything!",
+            { type: 'warn' }
+        )
+        return;
+    }
     evt.target['send-content'].value = ''
 }
 
@@ -156,21 +172,34 @@ async function sendMessage(message, send) {
     const [bot_answer, updateMessage] = createBlock('assistant');
     main_elem.appendChild(bot_answer);
 
-    const response = await request('chat', {
-        method: 'POST',
-        body: { 
-            sessionUuid: conversation.id || "uuid", 
-            message, ...model_settings
-        }
-    }, true)
-
-    const content = await send(response, updateMessage);
-    togglePending();
-
-    appendConversationMessage([
-        { role: 'user', message },
-        { role: 'assistant', message: content}
-    ], conversation.id)
+    let content = ''
+    try {
+        abort_controller = new AbortController();
+        const response = await request('chat', {
+            method: 'POST',
+            signal: abort_controller.signal,
+            body: { 
+                sessionUuid: conversation.id || "uuid", 
+                message, ...model_settings
+            }
+        }, true)
+
+        await send(response, msg=>{
+            content = msg;
+            updateMessage(msg);
+        });
+    } catch(error) {
+        error;
+        if(content) content+=' ...'
+        content += '(Message Abroted)'
+        updateMessage(content)
+    } finally {
+        appendConversationMessage([
+            { role: 'user', message },
+            { role: 'assistant', message: content}
+        ], conversation.id);
+        togglePending();
+    }
 }
 
 function sendMessageWaiting(msg) {

components/chat-page/history.js

@@ -1,7 +1,7 @@
 import useConversation from "../../global/useConversation.js";
 import useHistory from "../../global/useHistory.js";
 
-let history = [], history_elem = null, last_selected_id;
+let history = [], history_elem = null, last_selected_id=null;
 
 const { componetDismount:historyDismount, componentReMount: historyRemount } = useHistory(h=>{
     history = structuredClone(h);
@@ -25,6 +25,8 @@ export default function createChatHistory(main) {
     history_elem.id = 'chat-history';
     main.insertAdjacentElement('beforeend', history_elem);
 
+    last_selected_id = null;
+
     // re-mount update listeners
     historyRemount();
     conversationRemount();

global/createHook.js

@@ -13,9 +13,13 @@ export default function createHook() {
     }
 
     function remount(key) {
-        return () => {
+        return value => {
             const need_unfreeze = updatesList[key].frozen
             updatesList[key].frozen = false;
+            if(need_unfreeze) {
+                const callback = updatesList[key].callback;
+                callback && callback(value);
+            }
             return need_unfreeze;
         }
     }

global/useConversation.js

@@ -26,61 +26,65 @@ const { addHistory } = useHistory(h=>{
 });
 useUser(user=>currentUser = user);
 
-export default function useConversation(updated) {
-    const mount_key = onmount(updated);
+function storeHistory() {
+    const id = currentConversation.id;
+    if(id) conversation_histories[id] = currentConversation.history;
+}
 
-    function storeHistory() {
-        const id = currentConversation.id;
-        if(id) conversation_histories[id] = currentConversation.history;
-    }
+async function startNewConversation() {
+    storeHistory();
+    const { sessionUuid } = await request('chat/seesionuuid');
+    currentConversation = {
+        pending: false, id: sessionUuid, history: []
+    };
+    addHistory({
+        id: currentConversation.id,
+        name: 'New Session',
+        createdAt: new Date().toUTCString()
+    })
+    updateAll(currentConversation);
+}
 
-    async function startNewConversation() {
-        storeHistory();
-        const { sessionUuid } = await request('chat/seesionuuid');
-        currentConversation = {
-            id: sessionUuid, history: []
-        };
-        addHistory({
-            id: currentConversation.id,
-            name: 'New Session',
-            createdAt: new Date().toUTCString()
-        })
-        updateAll(currentConversation);
-    }
+function togglePending() {
+    currentConversation.pending = !currentConversation.pending;
+    updateAll(currentConversation);
+}
 
-    function togglePending() {
-        currentConversation.pending = !currentConversation.pending;
-        updateAll(currentConversation);
-    }
+async function sendMessage(messages) {
+    await request('chat/save', {
+        method: 'POST',
+        body: {
+            sessionUuid: currentConversation.id,
+            chats: messages
+        }
+    })
+    currentConversation.history.push(...messages);
+    updateAll(currentConversation);
+}
 
-    async function sendMessage(messages) {
-        await request('chat/save', {
-            method: 'POST',
-            body: {
-                sessionUuid: currentConversation.id,
-                chats: messages
-            }
-        })
-        currentConversation.history.push(...messages);
-        updateAll(currentConversation);
+async function selectConversation(id) {
+    let history;
+    if(currentUser.logged_in) {
+        history = await request(`chat/history/${id}`);
+    } else {
+        storeHistory();
+        history = conversation_histories[id];
     }
+    currentConversation = { id, history, pending: false };
+    updateAll(currentConversation);
+}
 
-    async function selectConversation(id) {
-        let history;
-        if(currentUser.logged_in) {
-            history = await request(`chat/history/${id}`);
-        } else {
-            storeHistory();
-            history = conversation_histories[id];
-        }
-        currentConversation = { id, history };
-        updateAll(currentConversation);
+export default function useConversation(updated) {
+    const mount_key = onmount(updated);
+
+    function componentReMount() {
+        return remount(mount_key)(currentConversation)
     }
 
     updated && updated(currentConversation);
 
     return { 
         selectConversation, startNewConversation, sendMessage, togglePending,
-        componetDismount:dismount(mount_key), componentReMount:remount(mount_key) 
+        componetDismount:dismount(mount_key), componentReMount
     }
 }

global/useHistory.js

@@ -6,12 +6,43 @@ const history = [
     // {id: 0, name: 'New Conversation', createdAt: new Date().toUTCString()},
     // {id: 1, name: 'New Conversation', createdAt: new Date().toUTCString()},
 ];
-let init = false;
 let currentSession;
 
 const { onmount, remount, dismount, updateAll } = createHook();
+
+async function requestUpdateHistory() {
+    if(!currentSession) return;
+
+    const chat_history = await request('chat');
+
+    history.length = 0;
+    chat_history.forEach(({sessionUuid, name, createdAt}) => {
+        history.push({id: sessionUuid, name, createdAt});
+    });
+    updateAll(history);
+}
+
+function addHistory(new_ticket) {
+    history.push(new_ticket);
+    updateAll(history);
+}
+
+function updateHistoryName(id, name) {
+    for(const index in history) {
+        if(history[index].id === id) {
+            history[index].name = name;
+            // TODO: tell backend
+        }
+    }
+    updateAll(history);
+}
+
+function getHistory(id) {
+    return history.filter(e=>e.id === id).pop();
+}
 useSessionId(id=>{
     currentSession = id;
+    requestUpdateHistory();
 })
 
 /**
@@ -22,52 +53,14 @@ useSessionId(id=>{
 export default function useHistory(updated = null) {
     const mount_key = onmount(updated)
 
-    async function requestUpdateHistory() {
-        if(!currentSession) return;
-
-        const chat_history = await request('chat');
-
-        history.length = 0;
-        chat_history.forEach(({sessionUuid, name, createdAt}) => {
-            history.push({id: sessionUuid, name, createdAt});
-        });
-        updateAll(history);
-    }
-
-    function addHistory(new_ticket) {
-        history.push(new_ticket);
-        updateAll(history);
-    }
-
-    function clearHistory() {
-        history.length = 0;
-        init = false;
-    }
-
-    function updateHistoryName(id, name) {
-        for(const index in history) {
-            if(history[index].id === id) {
-                history[index].name = name;
-                // TODO: tell backend
-            }
-        }
-        updateAll(history);
-    }
-
-    function getHistory(id) {
-        return history.filter(e=>e.id === id).pop();
-    }
-
-    if(!init) {
-        init = true;
-        requestUpdateHistory();
+    function componentReMount() {
+        return remount(mount_key)(history)
     }
 
-    // send history use callback function
     updated && updated(history);
 
     return { 
-        requestUpdateHistory, addHistory, clearHistory, getHistory, updateHistoryName,
-        componetDismount: dismount(mount_key), componentReMount:remount(mount_key) 
+        requestUpdateHistory, addHistory, getHistory, updateHistoryName,
+        componetDismount: dismount(mount_key), componentReMount
     }
 }