Resolve filenames, improved authentication, various CSS and UX fixes

css/assistants.css

@@ -322,16 +322,16 @@ input:checked + .slider:before {
     align-items: center;
 }
 
-.field#temperature-field, .field#top-p-field, .field#max-tokens-field, .field#max-threads-field {
+.field#temperature-field, .field#top-p-field, .field#max-tokens-field, .field#max-threads-field, .field#max-messages-field {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 5px; /* Add margin to separate the elements */
 }
 
 .params {
-    width: 50px;
-    text-align: center;
+    width: 60px;
+    text-align: right;
     padding: 5px;
 }
 
@@ -358,7 +358,7 @@ input:checked + .slider:before {
 }
 
 .function-checkbox {
-    margin-left: auto;
+    margin-right: 10px;
 }
 
 /* ============================== Model Dropdown ============================== */

css/chat.css

@@ -655,11 +655,11 @@ h2 {
 
 .loader {
   display: none;
-  width: calc(100% + 2 * var(--textbox-container-margin-horizontal)); /* Ensure the loader spans the full width including horizontal margin */
+  width: 95%;
   height: 7px;
   position: absolute; /* Position it absolutely within the textbox-container */
-  top: calc(-1 * var(--chat-window-margin-vertical)); /* Adjust the top position to ignore the container's vertical margin */
-  left: calc(-1 * var(--textbox-container-margin-horizontal)); /* Adjust the left position to ignore the container's horizontal margin */
+  top: calc(0.5 * var(--chat-window-margin-vertical)); /* Adjust the top position to ignore the container's vertical margin */
+  left: calc(0.5 * var(--textbox-container-margin-horizontal)); /* Adjust the left position to ignore the container's horizontal margin */
   overflow: hidden;
   background-color: #f4f4f4;
   border-radius: 20px;
@@ -752,6 +752,7 @@ h2 {
 }
 
 .user-input-wrapper {
+  position: relative;
   grid-column: 2;
   grid-row: 2;
   padding: var(--chat-window-margin-vertical) var(--textbox-container-margin-horizontal);
@@ -831,7 +832,7 @@ div.nano_start, div.nano_end {
   border-radius: 10px;
   padding: 16px;
   position: absolute;
-  z-index: 1000;
+  z-index: 9999;
   left: 50%;
   transform: translateX(-50%);
   top: 10px;

index.html

@@ -62,6 +62,11 @@
                             <span class="slider"></span>
                         </label>
                         <span data-toggle="tooltip" data-bs-placement="top" title="Whether this assistant object to be considered in production mode or as a draft">Published</span>
+                        <label class="switch">
+                            <input type="checkbox" id="assistant-restricted">
+                            <span class="slider"></span>
+                        </label>
+                        <span data-toggle="tooltip" data-bs-placement="top" title="Whether this assistant object to be considered with restricted access">Restricted</span>
                     </div>
 
                     <div class="field">
@@ -159,6 +164,17 @@ <h3 class="section-title">MODEL CONFIGURATION</h3>
                         <div class="field">
                             <input type="range" class="form-range" id="max_threads_in" min="20" step="10" max="100" value="100">
                         </div> 
+
+                        <div class="field" id="max-messages-field">
+                            <label for="max_messages_in" data-toggle="tooltip" data-bs-placement="top" class="field-label" 
+                                title="Maximum number of message entries visible in log list.">
+                                Max Messages
+                            </label>
+                            <input type="text" id="max_messages" class="form-control params" value="10000">
+                        </div>
+                        <div class="field">
+                            <input type="range" class="form-range" id="max_messages_in" min="20" step="10" max="10000" value="10000">
+                        </div> 
                     </div>
 
                     <div class="session-configuration">
@@ -170,14 +186,14 @@ <h3 class="section-title">SESSION CONFIGURATION</h3>
                             <input type="checkbox" id="enable_audio" class="form-check-input">
                         </div>
                         <div class="field enable-debug-field" id="enable-debug-field">
-                            <label for="enable_debug" data-toggle="tooltip" data-bs-placement="top" class="field-label" id="debug-field-label" title="Enable function tools debug for the session.">
+                            <label for="enable_debug" data-toggle="tooltip" data-bs-placement="top" class="field-label" id="debug-field-label" title="Enable debug of function tools for the session.">
                                 Enable Debug
                             </label>
                             <input type="checkbox" id="enable_debug" class="form-check-input">
                         </div>
                         <!--<div class="field" id="animation-speed-field">
                             <label for="animation_speed_in" data-toggle="tooltip" data-bs-placement="top" class="field-label" 
-                                title="Animation speed for session replay upon loaded from storage.">
+                                title="Animation speed for session replay upon load from storage.">
                                 Animation Speed
                             </label>
                         </div> 
@@ -248,20 +264,21 @@ <h3 class="section-title">API VERSION</h3>
             <div class="user-input-wrapper">
                 <div class="continue-button-group">
                     <button id="continue-button" class="button continue-button">Resume Chat</button>
+                    <button id="continue-cancel-button" class="button continue-cancel-button d-none">Cancel</button>
                 </div>
                 <div class="reconnect-button-group">
                     <button id="reconnect-button" class="button reconnect-button">Reconnect</button>
                 </div>
+                <div class="loader"></div>  
                 <div class="textbox-container" id="user-input-textbox">
                     <input type="file" style="display:none;" multiple="" id="fs-upload">
                     <div class="assistants-suggestions-dropdown hidden"></div>
-                    <div class="loader"></div>  
-                    <div class="uploaded-files-container"></div>
                     <div class="user-input-container">
                         <label id="assistant-id"></label>
                         <textarea id="user-input" placeholder="Type your question here (use ⇧⏎ for line break)..."></textarea>
                         <input type="file" id="local-storage-thread-input" accept=".json" style="display: none;">
                     </div>
+                    <div class="uploaded-files-container"></div>
                     <div class="buttons-container">
                         <div class="left-buttons">
                             <button class="icon-button" id="record-button" title="Record"><img src="svg/microphone.svg" alt="Microphone"></button>
@@ -367,6 +384,22 @@ <h2>Personal Storage (WebDAV)</h2>
             </div>
         </div>
 
+        <div class="modal" tabindex="-1" role="dialog" id="upload-status">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Thread log is uploaded:</h5>
+                    </div>
+                    <div class="modal-body">
+                        <a id="upload-location" target="_blank"></a>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="button" data-bs-dismiss="modal" id="upload-status-btn">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div id="import-thread-modal" class="modal">
             <div class="modal-content">
                 <span class="close">&times;</span>
@@ -446,7 +479,7 @@ <h2>Attach files to Vector Store</h2>
                         <thead>
                             <tr>
                                 <th>File</th>
-                                <th><label data-toggle="tooltip" data-bs-placement="left" title="The vector store usage in bytes. Note that this may be different from the original file size.">Space</label></th>
+                                <th><label data-toggle="tooltip" data-bs-placement="left" title="The vector store usage in bytes. Note that this may be different than the original file size.">Space</label></th>
                                 <th></th>
                             </tr>
                         </thead>
@@ -474,6 +507,11 @@ <h3 class="modal-title" id="tool-auth-text" data-toggle="tooltip" data-bs-placem
                                 <label class="form-check-label" for="auth-api-type">Use API Key</label>
                             </div>
 
+                            <div id="auth-idp-inp">
+                                <label for="auth-idp" class="form-label">IdP</label>
+                                <select id="auth-idp" class="form-control"></select>
+                            </div>
+
                             <div id="auth-api-key-inp">
                                 <label for="auth-key" class="form-label">API Key</label>
                                 <input type="text" id="auth-key" value="" class="form-control" placeholder="Enter API Key"/>

js/auth.js

@@ -11,7 +11,7 @@ function initAuthentication() {
     }
 
     if (null != sharedSession) {
-        loadShare(sharedSession);
+        loadAssistants(null,0).then(() => loadShare(sharedSession));
         $('#user-input-textbox').hide();
         $('.continue-button-group').show();
     } else {
@@ -49,6 +49,7 @@ function initAuthentication() {
         webSocket.onclose = onClose;
         $('#user-input-textbox').show();
         $('.reconnect-button-group').hide();
+        loadConversation(currentThread);
     });
 }
 
@@ -108,6 +109,14 @@ async function chatAuthenticate() {
     }
 }
 
+async function fillIdps() {
+    const url = new URL('/chat/api/auth_idps', httpBase);
+    IdPs = await authClient.fetch(url.toString()).then(r => { return r.json() }).catch(() => { return [] });
+    let $sel = $('#auth-idp');
+    IdPs.forEach(function(idp) {
+        $sel.append(`<option id="idp-${idp.name}">${idp.name}</option>`);
+    });
+}
 /**
  * Updates the login state of the application.
  */
@@ -154,6 +163,7 @@ async function updateLoginState() {
                 showFailureNotice("Session has expired. You will need to re-authenticate in order to continue.")
             }, chatSessionTimeoutMsec);
         }
+        fillIdps();
     } else {
         if (sharedSession) {
             $('.assistant-configuration').hide();
@@ -197,10 +207,17 @@ function initAuthDialog() {
     $('#btn-auth-key-set').click(function() {
         const key =  $('#auth-key').val();
         const use_api_key = $('#auth-api-type').is(':checked');
+        let client_id = toolsAuth.authOpts?.client_id;
+        let auth_url = toolsAuth.authOpts?.auth_url;
+        if (!client_id) {
+            const IdP_id = $('#auth-idp').val();
+            const IdP = IdPs.find(item => item.name === IdP_id);
+            client_id = IdP?.client_id;
+            auth_url = IdP?.auth_url;
+        }
 
-        if (!use_api_key && !key.length && toolsAuth?.authOpts?.client_id) {
-            let client_id = toolsAuth.authOpts.client_id;
-            let url = new URL(toolsAuth.authOpts.auth_url);
+        if (!use_api_key && !key.length && client_id && auth_url) {
+            let url = new URL(auth_url);
             let redirect = new URL('/chat/api/callback', httpBase);
             let params = new URLSearchParams();
 
@@ -209,7 +226,7 @@ function initAuthDialog() {
             params.append('event_id', 'btn-auth-key-set');
             redirect.search = params.toString();
 
-            params.delete('app_id');
+            params = new URLSearchParams();
             params.append('client_id', client_id);
             params.append('redirect_uri', redirect.toString());
             params.append('response_type', 'code');
@@ -233,6 +250,7 @@ function initAuthDialog() {
             function_name: toolsAuth.function_name,
             authTokenType: 'Bearer',
             authToken: key,
+            apiKey: apiKey||'',
         };
         webSocket.send(JSON.stringify(request));
         toolsAuth = undefined;
@@ -247,6 +265,7 @@ function initAuthDialog() {
                 action: 'cancel',
                 run_id: toolsAuth.run_id,
                 thread_id: toolsAuth.thread_id,
+                apiKey: apiKey||'',
             };
             webSocket.send(JSON.stringify(request));
             toolsAuth = undefined;