Merge pull request #13 from SkywardAI/improve

Improve

components/chat-page/chatMain.js

@@ -2,22 +2,19 @@ import useConversation from "../../global/useConversation.js";
 
 let conversation = {}, main_elem, init = false;
 
-const { componentDismount } = useConversation(c=>{
+const { componentDismount, sendMessage } = useConversation(c=>{
     conversation = c;
+    if(conversation.id !== 'not_selected') {
+        buildForm();
+    }
     updateConversation();
 })
 
 export default function createChatMain(main) {
     main.insertAdjacentHTML('beforeend', `
     <div id='chat-main'>
         <div id='conversation-main'></div>
-        <form id='submit-chat' autocomplete="off">
-            <input type='text' name='send-content' placeholder='Ask anything here!'>
-            <div class='send'>
-                <input type='submit' class='submit-btn clickable'>
-                <img class='submit-icon' src='/medias/send.svg'>
-            </div>
-        </form>
+        <form id='submit-chat' autocomplete="off"></form>
     </div>`)
 
     document.getElementById('submit-chat').onsubmit=submitContent;
@@ -28,11 +25,21 @@ export default function createChatMain(main) {
     return componentDismount;
 }
 
+function buildForm() {
+    document.getElementById('submit-chat').innerHTML = `
+    <input type='text' name='send-content' placeholder='Ask anything here!'>
+    <div class='send'>
+        <input type='submit' class='submit-btn clickable'>
+        <img class='submit-icon' src='/medias/send.svg'>
+    </div>`;
+    const hello;
+}
+
 function submitContent(evt) {
     evt.preventDefault();
 
     const content = evt.target['send-content'].value;
-    console.log(content);
+    sendMessage(content);
     evt.target['send-content'].value = ''
 }
 

components/chat-page/history.js

@@ -9,10 +9,10 @@ const { componetDismount:historyDismount, componentReMount: historyRemount } = u
 })
 
 const { 
-    selectConversation,
+    selectConversation, startNewConversation,
     componetDismount:conversationDismount, componentReMount: conversationRemount 
 } = useConversation(c=>{
-    if(c.id === null || c.id === last_selected_id) return;
+    if(c.id === 'not_selected' || c.id === last_selected_id) return;
     last_selected_id = c.id;
 
     const last_selected = document.querySelector('#chat-history .tickets-list .ticket.selected')
@@ -43,6 +43,7 @@ function updateHistoryList() {
         const new_conversation = document.createElement('div')
         new_conversation.className = 'new-conversation clickable'
         new_conversation.innerHTML="<div class='title'>Start a new conversation</div>"
+        new_conversation.onclick = startNewConversation;
         history_elem.appendChild(new_conversation);
     } else {
         history_elem.lastChild.remove();

global/createHook.js

@@ -29,7 +29,7 @@ export default function createHook() {
     function updateAll(value) {
         for(const key in updatesList) {
             const {frozen, callback} = updatesList[key]
-            if(!frozen) callback(value);
+            if(!frozen && callback) callback(value);
         }
     }
 

global/useConversation.js

@@ -1,4 +1,7 @@
+import apiAddress from "../tools/apiAddress.js";
 import createHook from "./createHook.js";
+import useHistory from "./useHistory.js";
+import useSessionId from "./useSessionId.js";
 
 const defaultConversationSetting = {
     id: null,
@@ -10,10 +13,18 @@ const defaultConversationSetting = {
 }
 
 let currentConversation = {
-    ...defaultConversationSetting
-}
+    ...defaultConversationSetting,
+    id: 'not_selected'
+};
+let currentSession;
+
 
 const { onmount, remount, dismount, updateAll } = createHook();
+const { addHistory:addUserHistoryTicket } = useHistory(null);
+
+useSessionId(id=>{
+    currentSession = id;
+})
 
 export default function useConversation(updated) {
     const mount_key = onmount(updated);
@@ -23,13 +34,42 @@ export default function useConversation(updated) {
         updateAll(currentConversation);
     }
 
-    function selectConversation(id, settings = null) {
-        // TODO: query history by id
-        const history = [
-            { type: 'out', message: 'hello world from me' },
-            { type: 'in', message: 'hello world from bot' },
-            { type: 'out', message: 'this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong sentence' },
-        ];
+    function startNewConversation() {
+        currentConversation = defaultConversationSetting;
+        updateAll(currentConversation);
+    }
+
+    async function sendMessage(message) {
+        addHistory([{ type: 'out', message }]);
+
+        const { sessionUuid, message:botResponse } = await (await fetch(apiAddress('chat'), {
+            method: 'POST',
+            signal: AbortSignal.timeout(5000),
+            headers: {
+                authenticated: currentSession
+            },
+            body: {
+                sessionUuid: currentConversation.id,
+                message
+            }
+        })).json()
+
+        addHistory([{type: 'in', message: botResponse}])
+        if(currentConversation.id === null) {
+            addUserHistoryTicket({
+                id: sessionUuid, name: 'New Conversation', 
+                createdAt: new Date().toUTCString()
+            })
+            currentConversation.id = sessionUuid;
+        }
+    }
+
+    async function selectConversation(id, settings = null) {
+        const conversation_history = [];
+        await (await fetch(apiAddress(`chat/history/${id}`)))
+        .json().forEach(({type, message})=>{
+            conversation_history.push({type, message});
+        })
         currentConversation = {
             ...(settings || defaultConversationSetting), id, history
         }
@@ -45,10 +85,10 @@ export default function useConversation(updated) {
         return true;
     }
 
-    updated(currentConversation);
+    updated && updated(currentConversation);
 
     return { 
-        addHistory, selectConversation, updateSetting,
+        selectConversation, updateSetting, startNewConversation, sendMessage,
         componetDismount:dismount(mount_key), componentReMount:remount(mount_key) 
     }
 }

global/useHistory.js

@@ -1,12 +1,18 @@
+import apiAddress from "../tools/apiAddress.js";
 import createHook from "./createHook.js";
+import useSessionId from "./useSessionId.js";
 
 const history = [
-    {id: 0, name: 'New Conversation', createdAt: new Date().toUTCString()},
-    {id: 1, name: 'New Conversation', createdAt: new Date().toUTCString()},
+    // {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();
+useSessionId(id=>{
+    currentSession = id;
+})
 
 /**
  * Hook for sync history
@@ -17,8 +23,17 @@ export default function useHistory(updated) {
     const mount_key = onmount(updated)
 
     async function requestUpdateHistory() {
-        // fetch to update
-        // if has callback then callback
+        const chat_history = await (await fetch(apiAddress('chat/'), {
+            headers: {
+                authenticated: currentSession
+            }
+        })).json();
+
+        history.length = 0;
+        chat_history.forEach(({sessionUuid, name, createdAt}) => {
+            history.push({id: sessionUuid, name, createdAt});
+        });
+        updateAll(history);
     }
 
     function addHistory(new_ticket) {
@@ -32,12 +47,12 @@ export default function useHistory(updated) {
     }
 
     if(!init) {
-        requestUpdateHistory();
         init = true;
+        requestUpdateHistory();
     }
 
     // send history use callback function
-    updated(history);
+    updated && updated(history);
 
     return { 
         requestUpdateHistory, addHistory, clearHistory, 

global/useSessionId.js

@@ -0,0 +1,31 @@
+import apiAddress from "../tools/apiAddress.js";
+import createHook from "./createHook.js";
+
+let currentSession = null, init = false;
+
+const { onmount, remount, dismount, updateAll } = createHook();
+
+export default function useSessionId(updated) {
+    const mount_key = onmount(updated)
+
+    async function genSession() {
+        const { token } = await (await fetch(apiAddress('auth/token'), { mode: 'no-cors' })).json();
+        currentSession = token;
+        updateAll(currentSession);
+    }
+
+    function manualUpdateSession(sessionId) {
+        currentSession = sessionId;
+        updateAll(currentSession);
+    }
+
+    if(!currentSession && !init) {
+        init = true;
+        genSession();
+    }
+
+    return {
+        manualUpdateSession, genSession,
+        componetDismount: dismount(mount_key), componentReMount:remount(mount_key) 
+    }
+}

index.html

@@ -3,7 +3,7 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <title>SkywardAI Frontend App</title>
+        <title>Rebel</title>
         <!-- styles -->
         <link rel="stylesheet" href="./styles/index.css">
         <link rel="stylesheet" href="./styles/sidebar.css">

settings.js

@@ -1 +1,2 @@
-export const VERSION = '0.0.1'
+export const VERSION = '0.0.1'
+export const LOCAL_API_ADDRESS = 'http://localhost:8000/api'

tools/apiAddress.js

@@ -0,0 +1,5 @@
+import { LOCAL_API_ADDRESS } from "../settings.js";
+
+export default function apiAddress(address) {
+    return `${LOCAL_API_ADDRESS}/${address}`;
+}