Merge pull request #32 from SkywardAI/function-improve

we have better account page now

components/chat-page/chatMain.js

@@ -1,15 +1,23 @@
 import useConversation from "../../global/useConversation.js";
+import useHistory from "../../global/useHistory.js";
 import useModelSettings from "../../global/useModelSettings.js";
+import { formatJSON } from "../../tools/conversationFormat.js";
 import request from "../../tools/request.js";
 import getSVG from "../../tools/svgs.js";
 
-let conversation = {}, model_settings = {}, main_elem, stream_response=true;
+let conversation = {}, model_settings = {}, 
+    main_elem, toggle_expand,
+    stream_response=true;
 
 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)
     if(c.id === conversation.id) return;
     conversation = c;
     if(!conversation.id) return;
@@ -25,6 +33,8 @@ const {
     model_settings = s;
 })
 
+const { getHistory, updateHistoryName } = useHistory();
+
 export default function createChatMain(main, toggleExpand, openModelSetting) {
     main.insertAdjacentHTML('beforeend', `
     <div class='chat-outer-main'>
@@ -40,6 +50,12 @@ export default function createChatMain(main, toggleExpand, openModelSetting) {
         >
             ${getSVG('gear')}
         </div>
+        <div 
+            id='download-conversation' class='clickable function-icon'
+            title="Export Current Conversation as JSON"
+        >
+            ${getSVG('box-arrow-up')}
+        </div>
         <div id='chat-main'>
             <div id='conversation-main'>
                 <div class='greeting'>
@@ -50,10 +66,17 @@ export default function createChatMain(main, toggleExpand, openModelSetting) {
         </div>
     </div>`)
 
+    if(!toggle_expand) toggle_expand = toggleExpand;
+
     document.getElementById('submit-chat').onsubmit=submitContent;
     main_elem = document.getElementById('conversation-main');
-    document.getElementById('toggle-sidebar-expand').onclick = toggleExpand;
+    document.getElementById('toggle-sidebar-expand').onclick = toggle_expand;
     document.getElementById('toggle-setting-page').onclick = openModelSetting;
+    document.getElementById('download-conversation').onclick = () => {
+        if(conversation.id && conversation.history.length) {
+            formatJSON(conversation, getHistory(conversation.id))
+        }
+    }
 
     modelSettingsRemount();
     if(conversationReMount() && conversation.id) {
@@ -68,16 +91,30 @@ export default function createChatMain(main, toggleExpand, openModelSetting) {
 }
 
 function buildForm() {
-    document.getElementById('submit-chat').innerHTML = `
-    <input type='text' name='send-content' placeholder='Ask anything here!'>
+    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>`;
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.name = 'send-content';
+    input.placeholder = 'Ask anything here!';
+
+    submit_chat.insertAdjacentElement("afterbegin", input);
+    submit_chat.clientHeight;
+
+    if(!conversation.history.length) {
+        toggle_expand();
+        input.focus();
+    }
 }
 
 function submitContent(evt) {
     evt.preventDefault();
+    if(conversation.pending) return;
 
     const content = evt.target['send-content'].value;
     content && (
@@ -89,8 +126,10 @@ function submitContent(evt) {
 }
 
 async function sendMessage(message, send) {
+    togglePending();
     if(!conversation.history.length) {
         main_elem.innerHTML = ''
+        updateHistoryName(conversation.id, message.substring(0, 20))
     }
     main_elem.appendChild(createBlock('out', message)[0]);
     main_elem.scrollTo({
@@ -109,6 +148,7 @@ async function sendMessage(message, send) {
     })
 
     const content = await send(response, updateMessage);
+    togglePending();
 
     appendConversationMessage([
         { type: 'out', message },

components/chat-page/history.js

@@ -12,7 +12,7 @@ const {
     selectConversation, startNewConversation,
     componetDismount:conversationDismount, componentReMount: conversationRemount 
 } = useConversation(c=>{
-    if(c.id === 'not_selected' || c.id === null || c.id === last_selected_id) return;
+    if(c.id === null || c.id === last_selected_id) return;
     last_selected_id = c.id;
 
     const last_selected = document.querySelector('#chat-history .tickets-list .ticket.selected')

global/useConversation.js

@@ -4,16 +4,25 @@ import useHistory from "./useHistory.js";
 
 let currentConversation = {
     id: null,
+    pending: false,
     history: []
 };
 
+const conversation_histories = {}
+
 const { onmount, remount, dismount, updateAll } = createHook();
 const { addHistory } = useHistory(null);
 
 export default function useConversation(updated) {
     const mount_key = onmount(updated);
 
+    function storeHistory() {
+        const id = currentConversation.id;
+        if(id) conversation_histories[id] = currentConversation.history;
+    }
+
     async function startNewConversation() {
+        storeHistory();
         const { sessionUuid } = await (await request('chat/seesionuuid')).json();
         currentConversation = {
             id: sessionUuid, history: []
@@ -26,25 +35,33 @@ export default function useConversation(updated) {
         updateAll(currentConversation);
     }
 
-    async function sendMessage(messages) {
+    function togglePending() {
+        currentConversation.pending = !currentConversation.pending;
+        updateAll(currentConversation);
+    }
+
+    function sendMessage(messages) {
         currentConversation.history.push(...messages);
         updateAll(currentConversation);
     }
 
     async function selectConversation(id) {
-        const conversation_history = [];
-        await (await request(`chat/history/${id}`))
-        .json().forEach(({type, message})=>{
-            conversation_history.push({type, message});
-        })
-        currentConversation = { id, history }
+        // TODO: logged in user should query from backend
+
+        // const conversation_history = [];
+        // await (await request(`chat/history/${id}`))
+        // .json().forEach(({type, message})=>{
+        //     conversation_history.push({type, message});
+        // })
+        storeHistory();
+        currentConversation = { id, history: conversation_histories[id] }
         updateAll(currentConversation);
     }
 
     updated && updated(currentConversation);
 
     return { 
-        selectConversation, startNewConversation, sendMessage,
+        selectConversation, startNewConversation, sendMessage, togglePending,
         componetDismount:dismount(mount_key), componentReMount:remount(mount_key) 
     }
 }

global/useHistory.js

@@ -19,7 +19,7 @@ useSessionId(id=>{
  * @param {Function} updated callback function when history updated
  * @returns {Object} List of history operators
  */
-export default function useHistory(updated) {
+export default function useHistory(updated = null) {
     const mount_key = onmount(updated)
 
     async function requestUpdateHistory() {
@@ -44,6 +44,20 @@ export default function useHistory(updated) {
         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();
@@ -53,7 +67,7 @@ export default function useHistory(updated) {
     updated && updated(history);
 
     return { 
-        requestUpdateHistory, addHistory, clearHistory, 
+        requestUpdateHistory, addHistory, clearHistory, getHistory, updateHistoryName,
         componetDismount: dismount(mount_key), componentReMount:remount(mount_key) 
     }
 }

styles/chat_page.css

@@ -294,6 +294,10 @@
     color: dodgerblue;
 }
 
+#chat-page #chat-main #submit-chat .send .submit-icon.pending {
+    color: gray;
+}
+
 /* 
 =====================================================
 

tools/conversationFormat.js

@@ -0,0 +1,25 @@
+// export function formatMarkdown(input) {
+//     input.split('\n').map(line=>{
+
+//     })
+// }
+
+export function formatJSON(conversation, {createdAt, name}) {
+    const json = 
+`{
+    "session": {
+        "id": "${conversation.id}",
+        "createdAt": "${createdAt}",
+        "title": "${name}",
+        "history": [
+            ${conversation.history.map(({type, message})=>{
+                return `{ "type": "${type}", "message": "${message.replaceAll('"', '\\"').replaceAll("\n", "\\n")}" }`
+            }).join(`,\n${" ".repeat(12)}`)}
+        ]
+    }
+}`
+    const download_link = document.createElement('a')
+    download_link.href=`data:text/plain;charset=utf-8,${json}`
+    download_link.download = `session-${conversation.id}.json`
+    download_link.click();
+}

tools/svgs.js

@@ -46,7 +46,7 @@ const svgs = {
 	</svg>`,
 
 	"send": `
-	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="dodgerblue" viewBox="0 0 16 16">
+	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
 		<path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z"/>
 	</svg>`,
 
@@ -97,9 +97,15 @@ const svgs = {
 	</svg>`,
 
 	"gear": `
-	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
+	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
 		<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/>
 		<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"/>
+	</svg>`,
+
+	"box-arrow-up": `
+	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+		<path fill-rule="evenodd" d="M3.5 6a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 14 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-8A1.5 1.5 0 0 1 3.5 5h2a.5.5 0 0 1 0 1z"/>
+		<path fill-rule="evenodd" d="M7.646.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 1.707V10.5a.5.5 0 0 1-1 0V1.707L5.354 3.854a.5.5 0 1 1-.708-.708z"/>
 	</svg>`
 }