page outline for load csv

components/chat-page/chatMain.js

@@ -5,10 +5,11 @@ import { formatJSON, formatMarkdown } from "../../tools/conversationFormat.js";
 import showMessage from "../../tools/message.js";
 import request from "../../tools/request.js";
 import getSVG from "../../tools/svgs.js";
+import createRAGSelector from "./rag-blocks.js";
 
 let conversation = {pending: false}, model_settings = {}, 
     main_elem, toggle_expand,
-    stream_response=true;
+    stream_response=true, download_conversation_icon;
 
 let abort_controller;
 
@@ -30,8 +31,11 @@ const {
                 Please select a ticket or start a new conversation on left.
             </div>`
             document.getElementById('submit-chat').innerHTML = '';
+            download_conversation_icon.classList.add('hidden')
         }
         return;
+    } else if(download_conversation_icon) {
+        download_conversation_icon.classList.remove('hidden')
     }
 
     updateConversation();
@@ -63,7 +67,7 @@ export default function createChatMain(main, toggleExpand, openModelSetting) {
             ${getSVG('gear')}
         </div>
         <div 
-            id='download-conversation' class='clickable function-icon'
+            id='download-conversation' class='clickable function-icon hidden'
             title="Export Current Conversation as JSON"
         >
             ${getSVG('box-arrow-up')}
@@ -83,7 +87,8 @@ export default function createChatMain(main, toggleExpand, openModelSetting) {
     main_elem = document.getElementById('conversation-main');
     document.getElementById('toggle-sidebar-expand').onclick = toggle_expand;
     document.getElementById('toggle-setting-page').onclick = openModelSetting;
-    document.getElementById('download-conversation').onclick = () => {
+    download_conversation_icon = document.getElementById('download-conversation')
+    download_conversation_icon.onclick = () => {
         if(conversation.id && conversation.history.length) {
             formatJSON(conversation, getHistory(conversation.id))
         }
@@ -250,7 +255,8 @@ async function sendMessageStream(msg) {
 function updateConversation() {
     if(!conversation.history) return;
     if(!conversation.history.length && main_elem) {
-        main_elem.innerHTML = "<div class='greeting'>Hi, how can I help you today?</div>"
+        main_elem.innerHTML = "<div class='greeting start-session'>Hi, how can I help you today?</div>"
+        main_elem.appendChild(createRAGSelector(conversation))
         return;
     }
 

components/chat-page/file-setting-section.js

@@ -0,0 +1,50 @@
+import showMessage from '../../tools/message.js'
+
+export default function fileSettingSection(title, submitted, restrictions = []) {
+    const section = document.createElement('form');
+    section.className = 'setting-section'
+    section.innerHTML = `<div class='title'>${title}</div>`;
+
+    section.onsubmit = evt => {
+        evt.preventDefault();
+        submitted(evt.target);
+    }
+
+    const upload_file_container = document.createElement('div');
+    upload_file_container.className = 'file-container';
+
+    const file = document.createElement('input')
+    file.type = 'file';
+    file.name = 'file';
+    file.className = 'clickable'
+    upload_file_container.appendChild(file);
+
+    const file_status_display = document.createElement('div');
+    file_status_display.className = 'file-status';
+    file_status_display.textContent = 'No file selected yet'
+    upload_file_container.appendChild(file_status_display);
+
+    file.onchange = (evt) => {
+        const { name, size } = evt.target.files[0];
+        if(restrictions.length) {
+            const ext = name.split('.').pop();
+            if(!restrictions.includes(ext)) {
+                showMessage(
+                    `The file with extension <strong>.${ext}</strong> is not valid for this section.`, 
+                    { type: 'warn' }
+                );
+                evt.target.value = ''
+                file_status_display.textContent = 'No file selected yet'
+                return;
+            }
+        }
+        const mb_size = Math.round(size / (1024 * 1024));
+        const strong_name = document.createElement('strong');
+        strong_name.textContent = name;
+        file_status_display.appendChild(strong_name);
+        file_status_display.insertAdjacentText("beforeend", ` (${mb_size} MB)`)
+    }
+
+    section.appendChild(upload_file_container);
+    return section;
+}

components/chat-page/history.js

@@ -54,7 +54,7 @@ function updateHistoryList() {
     const tickets_list = document.createElement('div')
     tickets_list.className='tickets-list'
 
-    history.forEach(({id, name, createdAt}) => {
+    history.forEach(({id, name, type, createdAt}) => {
         const ticket = document.createElement('div')
         ticket.className = 'ticket clickable'
         id === last_selected_id && ticket.classList.add('selected')
@@ -64,7 +64,7 @@ function updateHistoryList() {
         <div class='datetime'>${createdAt}</div>`
 
         ticket.onclick = () => {
-            selectConversation(id, name);
+            selectConversation(id, name, type);
         }
 
         tickets_list.appendChild(ticket)

components/chat-page/rag-blocks.js

@@ -0,0 +1,62 @@
+import request from "../../tools/request.js";
+import showMessage from "../../tools/message.js";
+
+const rag_modes = [
+    { mode: 'on' },
+    { mode: 'off' },
+    { mode: 'hybrid', disabled: true },
+]
+
+async function updateRAG(mode, element, id) {
+    if(mode === 'on') {
+        const { http_error } = await request('chat/session', {
+            method: 'PATCH',
+            body: {
+                sessionUuid: id,
+                type: 'rag'
+            }
+        })
+        if(http_error) {
+            showMessage("Set RAG mode failed!", { type: 'err' });
+            return;
+        }
+    }
+    showMessage(`This session will start with RAG ${mode}`);
+    element.classList.add('completed');
+    await new Promise(s=>setTimeout(s, 1000));
+    element.insertAdjacentHTML(
+        "beforebegin", 
+        `<div class='greeting rag-info'>RAG <strong>${mode.toUpperCase()}</strong></div>`
+    )
+    element.remove();
+}
+
+export default function createRAGSelector(conversation) {
+    if(conversation.type) {
+        const rag_info = document.createElement('div');
+        rag_info.className = 'greeting rag-info';
+        rag_info.innerHTML = `RAG <strong>${
+            conversation.type === 'rag' ? 'ON' :
+            conversation.type === 'chat' ? 'OFF' : ''
+        }</strong>`
+        return rag_info;
+    }
+    const rag_select = document.createElement('div');
+    rag_select.className = 'rag-select';
+
+    rag_modes.forEach(({mode, disabled})=>{
+        const option = document.createElement('div');
+        option.className = 'option';
+        if(disabled) {
+            option.classList.add('disabled');
+        } else {
+            option.classList.add('clickable')
+            option.onclick = () => {
+                updateRAG(mode, rag_select, conversation.id)
+            };
+        }
+        option.innerHTML = `Start session with RAG <strong>${mode}</strong>`;
+        rag_select.appendChild(option);
+    })
+    return rag_select;
+}

components/chat-page/session-settings.js

@@ -1,5 +1,7 @@
 import useConversation from '../../global/useConversation.js';
 import showMessage from '../../tools/message.js';
+import request from '../../tools/request.js';
+import fileSettingSection from './file-setting-section.js';
 import textSettingSection from './text-setting-section.js';
 
 let current_conversation = {}, session_settings, name_setter;
@@ -29,13 +31,32 @@ export default function createSessionSettings(main) {
             return;
         } else {
             rename(new_name).then(success=>{
-                if(success) showMessage(`Session renamed to </br><strong>${new_name}</strong>`, { type: 'success' });
+                const strong_name = document.createElement('strong');
+                strong_name.textContent = new_name;
+                if(success) showMessage([`Session renamed to`, document.createElement('br'), strong_name], { type: 'success' });
                 else showMessage('Rename session failed!', { type: 'err' })
             })
         }
     })
     session_settings.appendChild(rename_elem);
     name_setter = setName;
 
+    const csv_upload_elem = fileSettingSection('Upload CSV file for RAG', async form=>{
+        const form_data = new FormData(form);
+        const { http_error } = await request('/api/file', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            },
+            body: form_data
+        });
+        if(http_error) {
+            showMessage("File upload failed!", { type: "err" });
+        } else {
+            showMessage("File upload success!", { type: "success" });
+        }
+    }, ['csv'])
+    session_settings.appendChild(csv_upload_elem)
+
     main.appendChild(session_settings);
 }

global/useConversation.js

@@ -7,6 +7,7 @@ let currentConversation = {
     id: null,
     pending: false,
     name: '',
+    type: '',
     history: []
 };
 
@@ -41,7 +42,8 @@ async function startNewConversation() {
     storeHistory();
     const { sessionUuid } = await request('chat/seesionuuid');
     currentConversation = {
-        pending: false, id: sessionUuid, history: [], name: 'New Session'
+        pending: false, id: sessionUuid, 
+        history: [], name: 'New Session', type: ''
     };
     addHistory({
         id: currentConversation.id,
@@ -68,15 +70,15 @@ async function sendMessage(messages) {
     updateAll(currentConversation);
 }
 
-async function selectConversation(id, name) {
+async function selectConversation(id, name, type) {
     let history;
     if(currentUser.logged_in) {
         history = await request(`chat/history/${id}`);
     } else {
         storeHistory();
         history = conversation_histories[id];
     }
-    currentConversation = { id, history, pending: false, name };
+    currentConversation = { id, history, pending: false, name, type };
     updateAll(currentConversation);
 }
 

global/useHistory.js

@@ -16,8 +16,8 @@ async function requestUpdateHistory() {
     const chat_history = await request('chat');
 
     history.length = 0;
-    chat_history.forEach(({sessionUuid, name, createdAt}) => {
-        history.push({id: sessionUuid, name, createdAt});
+    chat_history.forEach(({sessionUuid, name, type, createdAt}) => {
+        history.push({id: sessionUuid, name, type, createdAt});
     });
     updateAll(history);
 }

index.html

@@ -11,6 +11,7 @@
         <link rel="stylesheet" href="./styles/message.css">
         <link rel="stylesheet" href="./styles/chat_page.css">
         <link rel="stylesheet" href="./styles/account_page.css">
+        <link rel="stylesheet" href="./styles/chat_settings.css">
         <link rel="stylesheet" href="./styles/training_page.css">
         <link rel="stylesheet" href="./styles/model_hero_page.css">
         <!-- main script -->