Merge pull request #49 from SkywardAI/rag-implement

update according to new RAG APIs

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

@@ -0,0 +1,37 @@
+/**
+ * create a normal setting section
+ * @param { "text" | "select" } type What type this section should contains
+ * @param {String} title Name of this secction, apperas on top
+ * @param {Function} callback Callback function takes one parameter of updated value of this section
+ * @returns { [HTMLElement, Function] } Returns an array where index 0 is the element of section and index 1 is the setter function
+ */
+export default function normalSettigSection(type, title, callback, ...args) {
+    const section = document.createElement('div');
+    section.className = 'setting-section'
+    section.innerHTML = `<div class='title'>${title}</div>`;
+
+    let input_like;
+    if(type === 'text') {
+        input_like = document.createElement('input');
+        input_like.type = 'text';
+    } else if(type === 'select') {
+        input_like = document.createElement('select');
+        args[0].forEach(({value, title})=>{
+            const option = document.createElement('option');
+            option.textContent = title || value;
+            input_like.appendChild(option);
+        })
+    }
+
+    function setter(value) {
+        input_like.value = value;
+    }
+
+    input_like.onchange = () => {
+        callback(input_like.value);
+    }
+
+    section.appendChild(input_like)
+
+    return [section, setter];
+}

components/chat-page/rag-blocks.js

@@ -1,12 +1,18 @@
 import request from "../../tools/request.js";
 import showMessage from "../../tools/message.js";
+import useUser from "../../global/useUser.js";
 
 const rag_modes = [
     { mode: 'on' },
     { mode: 'off' },
     { mode: 'hybrid', disabled: true },
 ]
 
+let user_id = null;
+useUser(user=>{
+    user_id = user.id;
+})
+
 async function updateRAG(mode, element, id) {
     if(mode === 'on') {
         const { http_error } = await request('chat/session', {
@@ -32,12 +38,12 @@ async function updateRAG(mode, element, id) {
 }
 
 export default function createRAGSelector(conversation) {
-    if(conversation.type) {
+    if(conversation.type || user_id === null) {
         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' : ''
+            conversation.type === 'chat' || user_id === null ? 'OFF' : ''
         }</strong>`
         return rag_info;
     }

components/chat-page/session-settings.js

@@ -1,8 +1,8 @@
 import useConversation from '../../global/useConversation.js';
+import useUser from '../../global/useUser.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';
+// import request from '../../tools/request.js';
+import normalSettingSection from './normal-setting-section.js';
 
 let current_conversation = {}, session_settings, name_setter;
 
@@ -16,15 +16,24 @@ const { rename } = useConversation(c=>{
     current_conversation = c;
 });
 
+let login = false;
+useUser(user=>{
+    login = user.id !== null;
+    if(session_settings) {
+        session_settings.classList.toggle('no-rag', !login)
+    }
+})
+
 export default function createSessionSettings(main) {
     session_settings = document.createElement('div');
     session_settings.className = 'session-settings disabled'
+    if(!login) session_settings.classList.add('no-rag')
     session_settings.innerHTML = `
     <div class='title'>Adjust Session Settings</div>
     <div class='sub-title'>* Cannot change RAG settings after session started *</div>
     `
 
-    const [rename_elem, setName] = textSettingSection('Rename Session', new_name=>{
+    const [rename_elem, setName] = normalSettingSection('text', 'Rename Session', new_name=>{
         if(!new_name) {
             setName(current_conversation.name)
         } else if(new_name === current_conversation.name) {
@@ -41,22 +50,11 @@ export default function createSessionSettings(main) {
     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)
+    const [select_dataset_elem] = normalSettingSection('select', "Select Dataset For RAG", dataset_name=>{
+        dataset_name && showMessage(`"${dataset_name}" Selected`)
+    }, [{value:'', title: '-- Please select a dataset --'}, {value: 'example/dataset1'}, {value: 'example/dataset2'}, {value: 'example/dataset3'}])
+    select_dataset_elem.classList.add('rag-option')
+    session_settings.appendChild(select_dataset_elem)
 
     main.appendChild(session_settings);
 }

global/useModelSettings.js

@@ -6,13 +6,15 @@ const defaultSettings = {
     top_k: 40,
     top_p: 0.9,
     n_predict: 512,
+    collection_name: 'collection_name'
 }
 
 const savedSettings = localStorage.getItem('model-settings') ?
-JSON.parse(localStorage.getItem('model-settings')) : null;
+JSON.parse(localStorage.getItem('model-settings')) : {};
 
 let currentSettings = {
-    ...(savedSettings || defaultSettings)
+    ...savedSettings,
+    ...defaultSettings
 }
 
 const writeSettingsToLocal = debounce(()=>{

styles/chat_settings.css

@@ -13,6 +13,7 @@
     border-radius: 10px;
 }
 
+.chat-settings .session-settings.no-rag .rag-option,
 .chat-settings .session-settings.disabled {
     display: none;
 }
@@ -48,39 +49,22 @@
     text-align: left;
 }
 
-.chat-settings .setting-section input[type="text"] {
+.chat-settings .setting-section input[type="text"],
+.chat-settings .setting-section select {
     height: var(--input-height);
     box-sizing: border-box;
     border-radius: 5px;
     padding: 0px 10px;
     border: 1px solid gray;
     width: 100%;
+    background-color: white;
 }
-.chat-settings .setting-section input[type="text"]:focus {
+.chat-settings .setting-section input[type="text"]:focus,
+.chat-settings .setting-section select:focus {
     outline: none;
     border-width: 2px;
 }
 
-.chat-settings .setting-section .input-with-confirm {
-    position: relative;
-}
-
-.chat-settings .setting-section .input-with-confirm .confirm-input {
-    height: var(--input-height);
-    width: var(--input-height);
-    position: absolute;
-    right: 0;
-    top: 0;
-    display: flex;
-    align-items: center;
-    color: dodgerblue;
-}
-.chat-settings .setting-section .input-with-confirm .confirm-input svg {
-    margin: auto;
-    width: 50%;
-    height: 50%;
-}
-
 .chat-settings .setting-section .combined-section {
     --item-margin: 10px;
     display: flex;