@mongoosejs/studio 0.0.94 → 0.0.96

package/frontend/public/app.js

@@ -53,9 +53,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return client.post('', { action: 'Dashboard.getDashboards', ...params }).then(res => res.data);
     },
     updateDashboard(params) {
-      return client.post('', { action: 'Dashboard.updateDashboard', ...params}).then(res => res.data);
+      return client.post('', { action: 'Dashboard.updateDashboard', ...params }).then(res => res.data);
     }
-  }
+  };
   exports.ChatThread = {
     createChatMessage(params) {
       return client.post('', { action: 'ChatThread.createChatMessage', ...params }).then(res => res.data);
@@ -69,24 +69,24 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     listChatThreads(params) {
       return client.post('', { action: 'ChatThread.listChatThreads', ...params }).then(res => res.data);
     }
-  }
+  };
   exports.ChatMessage = {
     executeScript(params) {
       return client.post('', { action: 'ChatMessage.executeScript', ...params }).then(res => res.data);
     }
-  }
+  };
   exports.Model = {
     createChart(params) {
-      return client.post('', { action: 'Model.createChart', ...params}).then(res => res.data);
+      return client.post('', { action: 'Model.createChart', ...params }).then(res => res.data);
     },
     createDocument(params) {
-      return client.post('', { action: 'Model.createDocument', ...params}).then(res => res.data);
+      return client.post('', { action: 'Model.createDocument', ...params }).then(res => res.data);
     },
     deleteDocument(params) {
-      return client.post('', { action: 'Model.deleteDocument', ...params}).then(res => res.data);
+      return client.post('', { action: 'Model.deleteDocument', ...params }).then(res => res.data);
     },
     deleteDocuments(params) {
-      return client.post('', { action: 'Model.deleteDocuments', ...params}).then(res => res.data);
+      return client.post('', { action: 'Model.deleteDocuments', ...params }).then(res => res.data);
     },
     exportQueryResults(params) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
@@ -94,8 +94,8 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return fetch(window.MONGOOSE_STUDIO_CONFIG.baseURL + new URLSearchParams({ ...params, action: 'Model.exportQueryResults' }).toString(), {
         method: 'GET',
         headers: {
-          'Authorization': `${accessToken}`, // Set your authorization token here
-          'Accept': 'text/csv'
+          Authorization: `${accessToken}`, // Set your authorization token here
+          Accept: 'text/csv'
         }
       })
         .then(response => {
@@ -146,7 +146,7 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return client.post('/Dashboard/createDashboard', params).then(res => res.data);
     },
     deleteDashboard: function deleteDashboard(params) {
-      return client.post('/Dashboard/deleteDashboard', params).then(res => res.data)
+      return client.post('/Dashboard/deleteDashboard', params).then(res => res.data);
     },
     getDashboard: function getDashboard(params) {
       return client.put('/Dashboard/getDashboard', params).then(res => res.data);
@@ -157,7 +157,7 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     updateDashboard: function updateDashboard(params) {
       return client.post('/Dashboard/updateDashboard', params).then(res => res.data);
     }
-  }
+  };
   exports.ChatThread = {
     createChatMessage: function createChatMessage(params) {
       return client.post('/ChatThread/createChatMessage', params).then(res => res.data);
@@ -178,13 +178,13 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     }
   };
   exports.Model = {
-    createChart: function (params) {
+    createChart: function(params) {
       return client.post('/Model/createChart', params).then(res => res.data);
     },
     createDocument: function(params) {
       return client.post('/Model/createDocument', params).then(res => res.data);
     },
-    deleteDocument: function (params) {
+    deleteDocument: function(params) {
       return client.post('/Model/deleteDocument', params).then(res => res.data);
     },
     deleteDocuments: function(params) {
@@ -196,8 +196,8 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return fetch(window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/exportQueryResults?' + new URLSearchParams(params).toString(), {
         method: 'GET',
         headers: {
-          'Authorization': `${accessToken}`, // Set your authorization token here
-          'Accept': 'text/csv'
+          Authorization: `${accessToken}`, // Set your authorization token here
+          Accept: 'text/csv'
         }
       })
         .then(response => {
@@ -324,12 +324,11 @@ module.exports = app => app.component('async-button', {
 
 
 const api = __webpack_require__(/*! ../../api */ "./frontend/src/api.js");
-const marked = (__webpack_require__(/*! marked */ "./node_modules/marked/lib/marked.cjs").marked);
 const template = __webpack_require__(/*! ./chat-message-script.html */ "./frontend/src/chat/chat-message-script/chat-message-script.html");
 const vanillatoasts = __webpack_require__(/*! vanillatoasts */ "./node_modules/vanillatoasts/vanillatoasts.js");
 
 module.exports = app => app.component('chat-message-script', {
-  template: template,
+  template,
   props: ['message', 'script', 'language'],
   data: () => ({ activeTab: 'code', showDetailModal: false }),
   computed: {
@@ -441,7 +440,7 @@ module.exports = app => app.component('chat-message', {
       });
       message.executionResult = chatMessage.executionResult;
       console.log(message);
-    },
+    }
   }
 });
 
@@ -469,7 +468,8 @@ module.exports = app => app.component('chat', {
     newMessage: '',
     chatThreadId: null,
     chatThreads: [],
-    chatMessages: []
+    chatMessages: [],
+    hideSidebar: null
   }),
   methods: {
     async sendMessage() {
@@ -543,7 +543,7 @@ module.exports = app => app.component('chat', {
         });
       });
     }
-  },
+  }
 });
 
 
@@ -563,7 +563,7 @@ const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
 const { BSON, EJSON } = __webpack_require__(/*! bson */ "./node_modules/bson/lib/bson.mjs");
 
 const ObjectId = new Proxy(BSON.ObjectId, {
-  apply (target, thisArg, argumentsList) {
+  apply(target, thisArg, argumentsList) {
     return new target(...argumentsList);
   }
 });
@@ -572,7 +572,7 @@ const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/append
 
 appendCSS(__webpack_require__(/*! ./clone-document.css */ "./frontend/src/clone-document/clone-document.css"));
 
-const template = __webpack_require__(/*! ./clone-document.html */ "./frontend/src/clone-document/clone-document.html")
+const template = __webpack_require__(/*! ./clone-document.html */ "./frontend/src/clone-document/clone-document.html");
 
 module.exports = app => app.component('clone-document', {
   props: ['currentModel', 'doc', 'schemaPaths'],
@@ -582,7 +582,7 @@ module.exports = app => app.component('clone-document', {
       documentData: '',
       editor: null,
       errors: []
-    }
+    };
   },
   methods: {
     async cloneDocument() {
@@ -590,17 +590,17 @@ module.exports = app => app.component('clone-document', {
       const { doc } = await api.Model.createDocument({ model: this.currentModel, data }).catch(err => {
         if (err.response?.data?.message) {
           console.log(err.response.data);
-          const message = err.response.data.message.split(": ").slice(1).join(": ");
+          const message = err.response.data.message.split(': ').slice(1).join(': ');
           this.errors = message.split(',').map(error => {
             return error.split(': ').slice(1).join(': ').trim();
-          })
+          });
           throw new Error(err.response?.data?.message);
         }
         throw err;
       });
       this.errors.length = 0;
       this.$emit('close', doc);
-    },
+    }
   },
   mounted: function() {
     const pathsToClone = this.schemaPaths.map(x => x.path);
@@ -626,8 +626,8 @@ module.exports = app => app.component('clone-document', {
       lineNumbers: true,
       smartIndent: false
     });
-  },
-})
+  }
+});
 
 /***/ }),
 
@@ -642,7 +642,7 @@ module.exports = app => app.component('clone-document', {
 
 const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
 
-const template = __webpack_require__(/*! ./create-dashboard.html */ "./frontend/src/create-dashboard/create-dashboard.html")
+const template = __webpack_require__(/*! ./create-dashboard.html */ "./frontend/src/create-dashboard/create-dashboard.html");
 
 module.exports = app => app.component('create-dashboard', {
   template,
@@ -651,7 +651,7 @@ module.exports = app => app.component('create-dashboard', {
       title: '',
       code: '',
       errors: []
-    }
+    };
   },
   methods: {
     async createDashboard() {
@@ -659,25 +659,25 @@ module.exports = app => app.component('create-dashboard', {
       const { dashboard } = await api.Dashboard.createDashboard({ code: this.code, title: this.title }).catch(err => {
         if (err.response?.data?.message) {
           console.log(err.response.data);
-          const message = err.response.data.message.split(": ").slice(1).join(": ");
+          const message = err.response.data.message.split(': ').slice(1).join(': ');
           this.errors = message.split(',').map(error => {
             return error.split(': ').slice(1).join(': ').trim();
-          })
+          });
           throw new Error(err.response?.data?.message);
         }
         throw err;
       });
       this.errors.length = 0;
       this.$emit('close', dashboard);
-    },
+    }
   },
   mounted: function() {
     this._editor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
       mode: 'javascript',
       lineNumbers: true
     });
-  },
-})
+  }
+});
 
 /***/ }),
 
@@ -695,7 +695,7 @@ const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
 const { BSON, EJSON } = __webpack_require__(/*! bson */ "./node_modules/bson/lib/bson.mjs");
 
 const ObjectId = new Proxy(BSON.ObjectId, {
-  apply (target, thisArg, argumentsList) {
+  apply(target, thisArg, argumentsList) {
     return new target(...argumentsList);
   }
 });
@@ -704,7 +704,7 @@ const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/append
 
 appendCSS(__webpack_require__(/*! ./create-document.css */ "./frontend/src/create-document/create-document.css"));
 
-const template = __webpack_require__(/*! ./create-document.html */ "./frontend/src/create-document/create-document.html")
+const template = __webpack_require__(/*! ./create-document.html */ "./frontend/src/create-document/create-document.html");
 
 module.exports = app => app.component('create-document', {
   props: ['currentModel', 'paths'],
@@ -714,7 +714,7 @@ module.exports = app => app.component('create-document', {
       documentData: '',
       editor: null,
       errors: []
-    }
+    };
   },
   methods: {
     async createDocument() {
@@ -722,24 +722,24 @@ module.exports = app => app.component('create-document', {
       const { doc } = await api.Model.createDocument({ model: this.currentModel, data }).catch(err => {
         if (err.response?.data?.message) {
           console.log(err.response.data);
-          const message = err.response.data.message.split(": ").slice(1).join(": ");
+          const message = err.response.data.message.split(': ').slice(1).join(': ');
           this.errors = message.split(',').map(error => {
             return error.split(': ').slice(1).join(': ').trim();
-          })
+          });
           throw new Error(err.response?.data?.message);
         }
         throw err;
       });
       this.errors.length = 0;
       this.$emit('close', doc);
-    },
+    }
   },
   mounted: function() {
     const requiredPaths = this.paths.filter(x => x.required);
-    this.documentData = `{\n`;
+    this.documentData = '{\n';
     for (let i = 0; i < requiredPaths.length; i++) {
       const isLast = i + 1 >= requiredPaths.length;
-      this.documentData += `  ${requiredPaths[i].path}: ${isLast ? '': ','}\n`
+      this.documentData += `  ${requiredPaths[i].path}: ${isLast ? '' : ','}\n`;
     }
     this.documentData += '}';
     this.$refs.codeEditor.value = this.documentData;
@@ -748,8 +748,8 @@ module.exports = app => app.component('create-document', {
       lineNumbers: true,
       smartIndent: false
     });
-  },
-})
+  }
+});
 
 /***/ }),
 
@@ -946,7 +946,7 @@ module.exports = app => app.component('dashboard', {
       dashboard: null,
       result: null,
       errorMessage: null
-    }
+    };
   },
   methods: {
     toggleEditor() {
@@ -1005,11 +1005,11 @@ module.exports = app => app.component('edit-dashboard', {
       editor: null,
       title: '',
       description: ''
-    }
+    };
   },
   methods: {
     closeEditor() {
-        this.$emit('close')
+      this.$emit('close');
     },
     async updateCode() {
       this.status = 'loading';
@@ -1040,7 +1040,7 @@ module.exports = app => app.component('edit-dashboard', {
       indentWithTabs: true,
       cursorBlinkRate: 300,
       lineWrapping: true,
-      showCursorWhenSelecting: true,
+      showCursorWhenSelecting: true
     });
     // this.editor.focus();
     // this.editor.refresh(); // if anything weird happens on load, this usually fixes it. However, this breaks it in this case.
@@ -1092,7 +1092,7 @@ module.exports = app => app.component('dashboards', {
     const { dashboards } = await api.Dashboard.getDashboards();
     this.dashboards = dashboards;
     this.status = 'loaded';
-  },
+  }
 });
 
 
@@ -1167,7 +1167,7 @@ module.exports = app => app.component('detail-default', {
 
 
 const mpath = __webpack_require__(/*! mpath */ "./node_modules/mpath/index.js");
-const template = __webpack_require__(/*! ./document-details.html */ "./frontend/src/document-details/document-details.html")
+const template = __webpack_require__(/*! ./document-details.html */ "./frontend/src/document-details/document-details.html");
 
 const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/appendCSS.js");
 
@@ -1194,9 +1194,9 @@ module.exports = app => app.component('document-details', {
       }
 
       return result;
-    },
+    }
   }
-})
+});
 
 /***/ }),
 
@@ -1210,7 +1210,7 @@ module.exports = app => app.component('document-details', {
 
 
 const mpath = __webpack_require__(/*! mpath */ "./node_modules/mpath/index.js");
-const template = __webpack_require__(/*! ./document-property.html */ "./frontend/src/document-details/document-property/document-property.html")
+const template = __webpack_require__(/*! ./document-property.html */ "./frontend/src/document-details/document-property/document-property.html");
 
 const appendCSS = __webpack_require__(/*! ../../appendCSS */ "./frontend/src/appendCSS.js");
 
@@ -1221,7 +1221,7 @@ module.exports = app => app.component('document-property', {
   data: function() {
     return {
       dateType: 'picker' // picker, iso
-    }
+    };
   },
   props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid'],
   methods: {
@@ -1262,7 +1262,7 @@ module.exports = app => app.component('document-property', {
       return path in this.changes ? this.changes[path] : mpath.get(path, this.document);
     }
   }
-})
+});
 
 /***/ }),
 
@@ -1287,10 +1287,10 @@ module.exports = app => app.component('confirm-changes', {
   },
   methods: {
     closeConfirm() {
-        this.$emit('close')
+      this.$emit('close');
     },
     startSave() {
-        this.$emit('save');
+      this.$emit('save');
     }
   },
   mounted() {
@@ -1321,10 +1321,10 @@ module.exports = app => app.component('confirm-delete', {
   },
   methods: {
     closeDelete() {
-        this.$emit('close')
+      this.$emit('close');
     },
     startDelete() {
-        this.$emit('remove');
+      this.$emit('remove');
     }
   },
   mounted() {
@@ -1427,11 +1427,11 @@ module.exports = app => app.component('document', {
           timeout: 3000,
           positionClass: 'bottomRight'
         });
-        this.$router.push({ path: `/model/${this.model}`});
+        this.$router.push({ path: `/model/${this.model}` });
       }
     },
     showClonedDocument(doc) {
-      this.$router.push({ path: `/model/${this.model}/document/${doc._id}`});
+      this.$router.push({ path: `/model/${this.model}/document/${doc._id}` });
     }
   }
 });
@@ -1453,7 +1453,7 @@ const template = __webpack_require__(/*! ./edit-array.html */ "./frontend/src/ed
 const { BSON } = __webpack_require__(/*! bson */ "./node_modules/bson/lib/bson.mjs");
 
 const ObjectId = new Proxy(BSON.ObjectId, {
-  apply (target, thisArg, argumentsList) {
+  apply(target, thisArg, argumentsList) {
     return new target(...argumentsList);
   }
 });
@@ -1647,7 +1647,7 @@ const template = __webpack_require__(/*! ./edit-subdocument.html */ "./frontend/
 const { BSON, EJSON } = __webpack_require__(/*! bson */ "./node_modules/bson/lib/bson.mjs");
 
 const ObjectId = new Proxy(BSON.ObjectId, {
-  apply (target, thisArg, argumentsList) {
+  apply(target, thisArg, argumentsList) {
     return new target(...argumentsList);
   }
 });
@@ -1941,7 +1941,7 @@ module.exports = app => app.component('list-default', {
     copyText(value) {
       const storage = document.createElement('textarea');
       storage.value = value;
-      const elem = this.$refs.itemData
+      const elem = this.$refs.itemData;
       elem.appendChild(storage);
       storage.select();
       storage.setSelectionRange(0, 99999);
@@ -1956,7 +1956,7 @@ module.exports = app => app.component('list-default', {
       });
     },
     goToDoc(id) {
-      this.$router.push({ path: `/model/${this.allude}/document/${id}`});
+      this.$router.push({ path: `/model/${this.allude}/document/${id}` });
     }
   },
   computed: {
@@ -1968,7 +1968,7 @@ module.exports = app => app.component('list-default', {
         return 'undefined';
       }
       if (this.value.length > 30) {
-        return this.value.substring(0,30) + '...';
+        return this.value.substring(0, 30) + '...';
       }
       return this.value;
     },
@@ -2224,7 +2224,7 @@ const { BSON, EJSON } = __webpack_require__(/*! bson */ "./node_modules/bson/lib
 
 
 const ObjectId = new Proxy(BSON.ObjectId, {
-  apply (target, thisArg, argumentsList) {
+  apply(target, thisArg, argumentsList) {
     return new target(...argumentsList);
   }
 });
@@ -2302,7 +2302,7 @@ module.exports = app => app.component('models', {
     }
     if (this.$route.query?.fields) {
       const filter = this.$route.query.fields.split(',');
-      this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path))
+      this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path));
     }
 
 
@@ -2337,7 +2337,7 @@ module.exports = app => app.component('models', {
 
       this.$nextTick(() => {
         const input = this.$refs.searchInput;
-        const cursorIndex = this.searchText.lastIndexOf(":") + 2; // Move cursor after ": "
+        const cursorIndex = this.searchText.lastIndexOf(':') + 2; // Move cursor after ": "
 
         input.focus();
         input.setSelectionRange(cursorIndex, cursorIndex);
@@ -2352,7 +2352,7 @@ module.exports = app => app.component('models', {
     },
     filterDocument(doc) {
       const filteredDoc = {};
-      console.log(doc, this.filteredPaths)
+      console.log(doc, this.filteredPaths);
       for (let i = 0; i < this.filteredPaths.length; i++) {
         filteredDoc[this.filteredPaths[i].path] = doc[this.filteredPaths[i].path];
       }
@@ -2391,7 +2391,7 @@ module.exports = app => app.component('models', {
       }
       if (!sorted) {
         this.sortBy[path] = num;
-        this.query.sort = `{${path}:${num}}`
+        this.query.sort = `{${path}:${num}}`;
         this.$router.push({ query: this.query });
       }
       await this.loadMoreDocuments();
@@ -2417,11 +2417,11 @@ module.exports = app => app.component('models', {
     },
     checkIndexLocation(indexName) {
       if (this.schemaIndexes.find(x => x.name == indexName) && this.mongoDBIndexes.find(x => x.name == indexName)) {
-        return 'text-gray-500'
+        return 'text-gray-500';
       } else if (this.schemaIndexes.find(x => x.name == indexName)) {
-        return 'text-forest-green-500'
+        return 'text-forest-green-500';
       } else {
-        return 'text-valencia-500'
+        return 'text-valencia-500';
       }
     },
     async getDocuments() {
@@ -2485,7 +2485,7 @@ module.exports = app => app.component('models', {
     openFieldSelection() {
       if (this.$route.query?.fields) {
         this.selectedPaths.length = 0;
-        console.log('there are fields in play', this.$route.query.fields)
+        console.log('there are fields in play', this.$route.query.fields);
         const fields = this.$route.query.fields.split(',');
         for (let i = 0; i < fields.length; i++) {
           this.selectedPaths.push({ path: fields[i] });
@@ -2558,7 +2558,7 @@ module.exports = app => app.component('models', {
     handleDocumentClick(document) {
       console.log(this.selectedDocuments);
       if (this.selectMultiple) {
-        const exists = this.selectedDocuments.find(x => x._id.toString() == document._id.toString())
+        const exists = this.selectedDocuments.find(x => x._id.toString() == document._id.toString());
         if (exists) {
           const index = this.selectedDocuments.findIndex(x => x._id.toString() == document._id.toString());
           if (index !== -1) {
@@ -2568,7 +2568,7 @@ module.exports = app => app.component('models', {
           this.selectedDocuments.push(document);
         }
       } else {
-       this.$router.push('/model/' + this.currentModel + '/document/' + document._id)
+        this.$router.push('/model/' + this.currentModel + '/document/' + document._id);
       }
     },
     async deleteDocuments() {
@@ -2681,7 +2681,7 @@ exports.hasAPIKey = client.hasAPIKey;
 const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
 const mothership = __webpack_require__(/*! ../mothership */ "./frontend/src/mothership.js");
 const template = __webpack_require__(/*! ./navbar.html */ "./frontend/src/navbar/navbar.html");
-const  { routes, hasAccess } = __webpack_require__(/*! ../routes */ "./frontend/src/routes.js");
+const { routes, hasAccess } = __webpack_require__(/*! ../routes */ "./frontend/src/routes.js");
 
 const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/appendCSS.js");
 
@@ -2700,10 +2700,26 @@ module.exports = app => app.component('navbar', {
         this.$router.push({ name: firstAllowedRoute.name });
       }
     }
+
+    const mobileMenuMask = document.querySelector('#mobile-menu-mask');
+    const mobileMenu = document.querySelector('#mobile-menu');
+
+    document.querySelector('#open-mobile-menu').addEventListener('click', (event) => {
+      event.stopPropagation();
+      mobileMenuMask.style.display = 'block';
+      mobileMenu.classList.remove('translate-x-full');
+      mobileMenu.classList.add('translate-x-0');
+    });
+
+    document.querySelector('body').addEventListener('click', () => {
+      mobileMenuMask.style.display = 'none';
+      mobileMenu.classList.remove('translate-x-0');
+      mobileMenu.classList.add('translate-x-full');
+    });
   },
   computed: {
     dashboardView() {
-      return routes.filter(x => x.name.startsWith('dashboard')).map(x => x.name).includes(this.$route.name)
+      return routes.filter(x => x.name.startsWith('dashboard')).map(x => x.name).includes(this.$route.name);
     },
     documentView() {
       return ['root', 'model', 'document'].includes(this.$route.name);
@@ -2744,7 +2760,7 @@ module.exports = app => app.component('navbar', {
     logout() {
       window.localStorage.setItem('_mongooseStudioAccessToken', '');
       window.location.reload();
-    },
+    }
   },
   directives: {
     clickOutside: {
@@ -3015,7 +3031,7 @@ const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
 const { BSON, EJSON } = __webpack_require__(/*! bson */ "./node_modules/bson/lib/bson.mjs");
 
 const ObjectId = new Proxy(BSON.ObjectId, {
-  apply (target, thisArg, argumentsList) {
+  apply(target, thisArg, argumentsList) {
     return new target(...argumentsList);
   }
 });
@@ -3024,7 +3040,7 @@ const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/append
 
 appendCSS(__webpack_require__(/*! ./update-document.css */ "./frontend/src/update-document/update-document.css"));
 
-const template = __webpack_require__(/*! ./update-document.html */ "./frontend/src/update-document/update-document.html")
+const template = __webpack_require__(/*! ./update-document.html */ "./frontend/src/update-document/update-document.html");
 
 module.exports = app => app.component('update-document', {
   props: ['currentModel', 'document', 'multiple'],
@@ -3033,7 +3049,7 @@ module.exports = app => app.component('update-document', {
     return {
       editor: null,
       errors: []
-    }
+    };
   },
   methods: {
     async updateDocument() {
@@ -3041,43 +3057,43 @@ module.exports = app => app.component('update-document', {
       if (this.multiple) {
         const ids = this.document.map(x => x._id);
         await api.Model.updateDocuments({ model: this.currentModel, _id: ids, update: data }).catch(err => {
-            if (err.response?.data?.message) {
-              console.log(err.response.data);
-              const message = err.response.data.message.split(": ").slice(1).join(": ");
-              this.errors = message.split(',').map(error => {
-                return error.split(': ').slice(1).join(': ').trim();
-              })
-              throw new Error(err.response?.data?.message);
-            }
-            throw err;
+          if (err.response?.data?.message) {
+            console.log(err.response.data);
+            const message = err.response.data.message.split(': ').slice(1).join(': ');
+            this.errors = message.split(',').map(error => {
+              return error.split(': ').slice(1).join(': ').trim();
+            });
+            throw new Error(err.response?.data?.message);
+          }
+          throw err;
         });
       } else {
         await api.Model.updateDocument({ model: this.currentModel, _id: this.document._id, update: data }).catch(err => {
-            if (err.response?.data?.message) {
-              console.log(err.response.data);
-              const message = err.response.data.message.split(": ").slice(1).join(": ");
-              this.errors = message.split(',').map(error => {
-                return error.split(': ').slice(1).join(': ').trim();
-              })
-              throw new Error(err.response?.data?.message);
-            }
-            throw err;
+          if (err.response?.data?.message) {
+            console.log(err.response.data);
+            const message = err.response.data.message.split(': ').slice(1).join(': ');
+            this.errors = message.split(',').map(error => {
+              return error.split(': ').slice(1).join(': ').trim();
+            });
+            throw new Error(err.response?.data?.message);
+          }
+          throw err;
         });
       }
       this.errors.length = 0;
       this.$emit('update');
       this.$emit('close');
-    },
+    }
   },
   mounted: function() {
-    this.$refs.codeEditor.value = `{\n    \n}`
+    this.$refs.codeEditor.value = '{\n    \n}';
     this.editor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
       mode: 'javascript',
       lineNumbers: true,
       smartIndent: false
     });
-  },
-})
+  }
+});
 
 /***/ }),
 
@@ -3881,7 +3897,7 @@ module.exports = "<button v-bind=\"attrsToBind\" :disabled=\"isDisabled\" @click
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"relative border rounded bg-gray-100 text-black text-sm overflow-hidden\">\n  <div class=\"flex border-b pt-[1px] text-xs font-medium bg-gray-200\">\n    <button\n      class=\"px-3 py-1 border-r border-gray-300 hover:bg-green-300\"\n      :class=\"{'bg-gray-300': activeTab === 'code', 'bg-green-300': activeTab === 'code'}\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-3 py-1 hover:bg-green-300\"\n      :class=\"{'bg-green-300': activeTab === 'output'}\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex\">\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-500 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center\"\n        @click=\"copyOutput\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-blue-500 text-white border-none rounded cursor-pointer hover:bg-blue-600 transition-colors flex items-center\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n      <async-button\n        class=\"px-2 py-1 text-xs bg-green-500 text-white border-none rounded cursor-pointer hover:bg-green-600 transition-colors disabled:bg-gray-400\"\n        @click=\"executeScript(message, script)\">\n        Execute\n      </async-button>\n    </div>\n  </div>\n\n  <pre class=\"p-3 whitespace-pre-wrap max-h-[30vh] max-w-[calc(100vw-25rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[30vh] overflow-y-auto bg-white border-t max-w-[calc(100vw-25rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n        <pre v-else class=\"whitespace-pre-wrap\">{{ message.executionResult?.output || 'No output' }}</pre>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"relative border rounded bg-gray-100 text-black text-sm overflow-hidden\">\n  <div class=\"flex border-b pt-[1px] text-xs font-medium bg-gray-200\">\n    <button\n      class=\"px-3 py-1 border-r border-gray-300 hover:bg-green-300\"\n      :class=\"{'bg-gray-300': activeTab === 'code', 'bg-green-300': activeTab === 'code'}\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-3 py-1 hover:bg-green-300\"\n      :class=\"{'bg-green-300': activeTab === 'output'}\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex\">\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-500 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center\"\n        @click=\"copyOutput\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-blue-500 text-white border-none rounded cursor-pointer hover:bg-blue-600 transition-colors flex items-center\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n      <async-button\n        class=\"px-2 py-1 text-xs bg-green-500 text-white border-none rounded cursor-pointer hover:bg-green-600 transition-colors disabled:bg-gray-400\"\n        @click=\"executeScript(message, script)\">\n        Execute\n      </async-button>\n    </div>\n  </div>\n\n  <pre class=\"p-3 whitespace-pre-wrap max-h-[30vh] max-w-[calc(100vw-4rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[30vh] overflow-y-auto bg-white border-t max-w-[calc(100vw-4rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n        <pre v-else class=\"whitespace-pre-wrap\">{{ message.executionResult?.output || 'No output' }}</pre>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -3892,7 +3908,7 @@ module.exports = "<div class=\"relative border rounded bg-gray-100 text-black te
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"relative flex items-start space-x-3\" :class=\"{'justify-end': message.role === 'user'}\">\n  <div\n    class=\"min-w-0 max-w-[calc(100%-6.5rem)]\"\n    :class=\"{'text-right': message.role === 'user'}\">\n\n    <div class=\"text-sm text-gray-900 p-3 rounded-md inline-block\" :class=\"styleForMessage\">\n      <div v-for=\"part in contentSplitByScripts\">\n        <div v-if=\"part.type === 'text'\" v-html=\"marked(part.content)\">\n        </div>\n        <div v-else-if=\"part.type === 'code'\">\n          <chat-message-script :message=\"message\" :script=\"part.content\" :language=\"part.language\"></chat-message-script>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
+module.exports = "<div class=\"relative flex items-start space-x-3\" :class=\"{'justify-end': message.role === 'user'}\">\n  <div\n    class=\"min-w-0 max-w-[calc(100vw-4rem)]\"\n    :class=\"{'text-right': message.role === 'user'}\">\n\n    <div class=\"text-sm text-gray-900 p-3 rounded-md inline-block\" :class=\"styleForMessage\">\n      <div v-for=\"part in contentSplitByScripts\">\n        <div v-if=\"part.type === 'text'\" v-html=\"marked(part.content)\">\n        </div>\n        <div v-else-if=\"part.type === 'code'\">\n          <chat-message-script :message=\"message\" :script=\"part.content\" :language=\"part.language\"></chat-message-script>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -3903,7 +3919,7 @@ module.exports = "<div class=\"relative flex items-start space-x-3\" :class=\"{'
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"flex\" style=\"height: calc(100vh - 55px)\">\n    <!-- Sidebar: Chat Threads -->\n  <aside class=\"w-64 bg-gray-100 border-r overflow-y-auto h-full\">\n    <div class=\"p-4 font-bold text-lg border-b\">Chat Threads</div>\n    <div class=\"p-4\">\n      <async-button\n        @click=\"createNewThread\"\n        class=\"w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700\"\n      >\n        Create New Thread\n      </async-button>\n    </div>\n    <div v-if=\"status === 'loaded' && chatThreads.length === 0\" class=\"p-4 text-sm text-gray-700\">\n      No threads yet\n    </div>\n    <ul vif=\"status === 'loaded'\">\n      <li\n        v-for=\"thread in chatThreads\"\n        :key=\"thread._id\"\n        @click=\"selectThread(thread._id)\"\n        class=\"p-4 hover:bg-gray-200 cursor-pointer\"\n        :class=\"{ 'bg-gray-300': thread._id === chatThreadId }\"\n      >\n        {{ thread.title || 'Untitled Thread' }}\n      </li>\n    </ul>\n  </aside>\n\n  <!-- Main Chat Area -->\n  <main class=\"flex-1 flex flex-col\">\n    <div class=\"flex-1 overflow-y-auto p-6 space-y-4\" ref=\"messagesContainer\">\n      <ul role=\"list\" class=\"space-y-4\">\n        <div v-if=\"true\">\n          <div class=\"flex items-center justify-center py-3 mb-4\">\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n            <p class=\"mx-4 text-sm font-medium text-gray-500\">This is the beginning of the message thread</p>\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n          </div>\n        </div>\n        <li v-for=\"message in chatMessages\" :key=\"message._id\">\n          <chat-message :message=\"message\"></chat-message>\n        </li>\n      </ul>\n    </div>\n\n\n    <!-- Input Area -->\n    <div class=\"border-t p-4\">\n      <form @submit.prevent=\"sendMessage\" :disabled=\"sendingMessage\" class=\"flex gap-2\">\n        <input\n          v-model=\"newMessage\"\n          placeholder=\"Ask something...\"\n          class=\"flex-1 border rounded px-4 py-2\"\n        />\n        <button class=\"bg-blue-600 text-white px-4 py-2 rounded disabled:bg-gray-600\" :disabled=\"sendingMessage\">\n          <svg v-if=\"sendingMessage\" style=\"height: 1em\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.3\" />\n              <path d=\"M12 2a10 10 0 0 1 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n                <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\" />\n              </path>\n            </g>\n          </svg>\n          <span v-else>Send</span>\n        </button>\n      </form>\n    </div>\n  </main>\n</div>\n";
+module.exports = "<div class=\"flex\" style=\"height: calc(100vh - 55px)\">\n  <div class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\" @click=\"hideSidebar = false\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\"><path d=\"M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z\"/></svg>\n  </div>\n  <!-- Sidebar: Chat Threads -->\n  <aside class=\"bg-gray-50 border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 md:w-64 fixed md:relative\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-64' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-64 overflow-x-hidden\">\n      <div class=\"p-4 font-bold text-lg\">Chat Threads</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>\n      </button>\n    </div>\n    <div class=\"p-4 w-64\">\n      <async-button\n        @click=\"createNewThread\"\n        class=\"w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700\"\n      >\n        Create New Thread\n      </async-button>\n    </div>\n    <div v-if=\"status === 'loaded' && chatThreads.length === 0\" class=\"p-4 text-sm text-gray-700\">\n      No threads yet\n    </div>\n    <ul v-if=\"status === 'loaded'\" class=\"w-64\">\n      <li\n        v-for=\"thread in chatThreads\"\n        :key=\"thread._id\"\n        @click=\"selectThread(thread._id)\"\n        class=\"p-4 hover:bg-gray-200 cursor-pointer w-64\"\n        :class=\"{ 'bg-gray-300': thread._id === chatThreadId }\"\n      >\n        {{ thread.title || 'Untitled Thread' }}\n      </li>\n    </ul>\n  </aside>\n\n  <!-- Main Chat Area -->\n  <main class=\"flex-1 flex flex-col\">\n    <div class=\"flex-1 overflow-y-auto p-6 space-y-4\" ref=\"messagesContainer\">\n      <ul role=\"list\" class=\"space-y-4\">\n        <div v-if=\"true\">\n          <div class=\"flex items-center justify-center py-3 mb-4\">\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n            <p class=\"mx-4 text-sm font-medium text-gray-500\">This is the beginning of the message thread</p>\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n          </div>\n        </div>\n        <li v-for=\"message in chatMessages\" :key=\"message._id\">\n          <chat-message :message=\"message\"></chat-message>\n        </li>\n      </ul>\n    </div>\n\n\n    <!-- Input Area -->\n    <div class=\"border-t p-4\">\n      <form @submit.prevent=\"sendMessage\" :disabled=\"sendingMessage\" class=\"flex gap-2\">\n        <input\n          v-model=\"newMessage\"\n          placeholder=\"Ask something...\"\n          class=\"flex-1 border rounded px-4 py-2\"\n        />\n        <button class=\"bg-blue-600 text-white px-4 py-2 rounded disabled:bg-gray-600\" :disabled=\"sendingMessage\">\n          <svg v-if=\"sendingMessage\" style=\"height: 1em\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.3\" />\n              <path d=\"M12 2a10 10 0 0 1 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n                <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\" />\n              </path>\n            </g>\n          </svg>\n          <span v-else>Send</span>\n        </button>\n      </form>\n    </div>\n  </main>\n</div>\n";
 
 /***/ }),
 
@@ -4431,7 +4447,7 @@ module.exports = "<div class=\"models\">\n  <div>\n    <div class=\"flex grow fl
 /***/ ((module) => {
 
 "use strict";
-module.exports = ".navbar {\n  width: 100%;\n  background-color: #eee;\n}\n\n.active {\n  text-decoration: underline;\n}\n\n.spacing {\n  margin-right: 10px;\n}\n\n.navbar .nav-left {\n  float: left;\n  line-height: 54px;\n  font-size: 20px;\n  padding-left: 20px;\n}\n\n.navbar .nav-left a {\n  color: #232323;\n}\n\n.navbar {\n  border-bottom: 1px solid #ddd;\n  height: 55px;\n}\n\n.navbar .nav-left img {\n  height: 32px;\n  vertical-align: middle;\n  margin-right: 0.5em;\n  margin-top: 8px;\n}\n\n.navbar .nav-right {\n  float: right;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  font-size: 16px;\n  line-height: 54px;\n  padding-right: 20px;\n}\n\n.navbar .nav-right .nav-item {\n  flex-grow: 1;\n  padding: 0px 12px;\n  position: relative;\n  z-index: 21000;\n}\n\n.navbar .nav-right .nav-item:hover {\n  flex-grow: 1;\n  padding: 0px 12px;\n  border-bottom: 1px solid #E1B9A0;\n}\n\n.navbar .nav-right .nav-item.active {\n  border-bottom: 1px solid #E1B9A0;\n}\n\n.navbar .nav-action {\n  cursor: pointer;\n  color: #E1B9A0;\n}\n\n.navbar .nav-action svg {\n  height: 1em;\n  vertical-align: middle;\n}\n\n.navbar .nav-right .nav-item .flyout {\n  position: absolute;\n  top: 55px;\n  right: 0px;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity .25s,visibility .25s,transform .25s;\n  width: auto;\n  box-shadow: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);\n  background-color: #393944;\n  padding-left: 0.5em;\n  padding-right: 0.5em;\n  z-index: 1000;\n  min-width: 192px;\n  font-size: 0.9em;\n}\n\n.navbar .nav-right .nav-item:hover .flyout a {\n  color: #E1B9A0;\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n\n.navbar .nav-right .nav-item:hover .flyout a:hover {\n  color: #E1B9A0;\n}\n\n.navbar .nav-right .nav-item:hover .flyout .nav-action {\n  color: #E1B9A0;\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n\n.navbar .nav-right .nav-item:hover .flyout .nav-action:hover {\n  color: #E1B9A0;\n}\n\n.navbar .nav-right .nav-item:hover .flyout {\n  visibility: visible;\n  opacity: 1;\n}\n\n#bar-1 {\n\ttransform: translateY(-4px);\n}\n#bar-3 {\n\ttransform: translateY(4px);\n}\n.menu {\n  display: none;\n}\n.menu {\n\twidth: 35px;\n\theight: 30px;\n\tmargin: 18px 2px 0px 0px;\n\tcursor: pointer;\n  float: right;\n}\n.bar {\n\theight: 5px;\n\twidth: 100%;\n\tbackground-color: #fff;\n\tdisplay: block;\n\tborder-radius: 5px;\n\ttransition: 0.4s ease;\n}\n.change-icon #bar-1 {\n  transform: translateY(4px) rotateZ(-405deg);\n}\n.change-icon #bar-2 {\n  opacity: 0;\n}\n.change-icon #bar-3 {\n  transform: translateY(-6px) rotateZ(405deg);\n}\n\n@media (max-width: 767px) {\n  .menu {\n    display: block;\n  }\n\n  .change-icon ~ div.nav-right {\n    left: 0;\n  }\n\n  .navbar .nav-right {\n\t\tposition: fixed;\n\t\ttop: 55px;\n\t\tleft: -130%;\n\t\tbackground: #111;\n\t\theight: 100vh;\n\t\twidth: 100%;\n\t\ttext-align: center;\n\t\tdisplay: block;\n\t\ttransition: all 0.3s ease;\n    z-index: 10000;\n\t}\n}\n";
+module.exports = ".active {\n  text-decoration: underline;\n}\n\n.navbar .nav-left {\n  float: left;\n  line-height: 54px;\n  font-size: 20px;\n  padding-left: 20px;\n}\n\n.navbar .nav-left a {\n  color: #232323;\n}\n\n.navbar .nav-right {\n  float: right;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  font-size: 16px;\n  line-height: 54px;\n  padding-right: 20px;\n}\n\n.navbar .nav-right .nav-item {\n  flex-grow: 1;\n  padding: 0px 12px;\n  position: relative;\n  z-index: 21000;\n}\n\n.navbar .nav-right .nav-item:hover {\n  flex-grow: 1;\n  padding: 0px 12px;\n  border-bottom: 1px solid #E1B9A0;\n}\n\n.navbar .nav-right .nav-item.active {\n  border-bottom: 1px solid #E1B9A0;\n}\n\n.navbar .nav-action {\n  cursor: pointer;\n  color: #E1B9A0;\n}\n\n.navbar .nav-action svg {\n  height: 1em;\n  vertical-align: middle;\n}\n\n.navbar .nav-right .nav-item .flyout {\n  position: absolute;\n  top: 55px;\n  right: 0px;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity .25s,visibility .25s,transform .25s;\n  width: auto;\n  box-shadow: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);\n  background-color: #393944;\n  padding-left: 0.5em;\n  padding-right: 0.5em;\n  z-index: 1000;\n  min-width: 192px;\n  font-size: 0.9em;\n}\n\n.navbar .nav-right .nav-item:hover .flyout a {\n  color: #E1B9A0;\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n\n.navbar .nav-right .nav-item:hover .flyout a:hover {\n  color: #E1B9A0;\n}\n\n.navbar .nav-right .nav-item:hover .flyout .nav-action {\n  color: #E1B9A0;\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n\n.navbar .nav-right .nav-item:hover .flyout .nav-action:hover {\n  color: #E1B9A0;\n}\n\n.navbar .nav-right .nav-item:hover .flyout {\n  visibility: visible;\n  opacity: 1;\n}\n\n#bar-1 {\n\ttransform: translateY(-4px);\n}\n#bar-3 {\n\ttransform: translateY(4px);\n}\n.menu {\n  display: none;\n}\n.menu {\n\twidth: 35px;\n\theight: 30px;\n\tmargin: 18px 2px 0px 0px;\n\tcursor: pointer;\n  float: right;\n}\n.bar {\n\theight: 5px;\n\twidth: 100%;\n\tbackground-color: #fff;\n\tdisplay: block;\n\tborder-radius: 5px;\n\ttransition: 0.4s ease;\n}\n.change-icon #bar-1 {\n  transform: translateY(4px) rotateZ(-405deg);\n}\n.change-icon #bar-2 {\n  opacity: 0;\n}\n.change-icon #bar-3 {\n  transform: translateY(-6px) rotateZ(405deg);\n}\n\n@media (max-width: 767px) {\n  .menu {\n    display: block;\n  }\n\n  .change-icon ~ div.nav-right {\n    left: 0;\n  }\n\n  .navbar .nav-right {\n\t\tposition: fixed;\n\t\ttop: 55px;\n\t\tleft: -130%;\n\t\tbackground: #111;\n\t\theight: 100vh;\n\t\twidth: 100%;\n\t\ttext-align: center;\n\t\tdisplay: block;\n\t\ttransition: all 0.3s ease;\n    z-index: 10000;\n\t}\n}\n";
 
 /***/ }),
 
@@ -4442,7 +4458,7 @@ module.exports = ".navbar {\n  width: 100%;\n  background-color: #eee;\n}\n\n.ac
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"navbar\">\n  <div class=\"nav-left flex items-center gap-4 h-full\">\n    <router-link :to=\"{ name: defaultRoute }\">\n      <img src=\"images/logo.svg\" alt=\"Mongoose Studio Logo\" />\n    </router-link>\n    <div v-if=\"!!state.nodeEnv\" class=\"inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900\" :class=\"warnEnv ? 'bg-red-300' : 'bg-yellow-300'\">\n      {{state.nodeEnv}}\n    </div>\n  </div>\n  <div class=\"nav-right h-full\">\n    <div class=\"sm:ml-6 sm:flex sm:space-x-8 h-full\">\n      <a v-if=\"hasAccess(roles, 'root')\"\n        href=\"#/\"\n        class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium\"\n        :class=\"documentView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Documents</a>\n      <a v-if=\"hasAccess(roles, 'dashboards')\"\n        href=\"#/dashboards\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Dashboards</a>\n      <a v-if=\"hasAccess(roles, 'chat')\"\n        href=\"#/chat\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"chatView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Chat</a>\n\n      <div class=\"h-full flex items-center\" v-if=\"!user && hasAPIKey\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"h-full flex items-center relative\" v-clickOutside=\"hideFlyout\">\n        <div>\n          <button type=\"button\" @click=\"showFlyout = !showFlyout\" class=\"relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800\" id=\"user-menu-button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n            <span class=\"absolute -inset-1.5\"></span>\n            <span class=\"sr-only\">Open user menu</span>\n            <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          </button>\n        </div>\n\n        <div v-if=\"showFlyout\" class=\"absolute right-0 z-10 top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"user-menu-button\" tabindex=\"-1\">\n          <router-link to=\"/team\" v-if=\"hasAccess(roles, 'team')\" @click=\"showFlyout = false\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Team</router-link>\n          <span @click=\"logout\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Sign out</span>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div style=\"clear: both\"></div>\n</div>\n";
+module.exports = "<div class=\"navbar w-full bg-gray-50 flex justify-between border-b border-gray-200 !h-[55px]\">\n  <div class=\"flex items-center gap-4 h-full pl-4\">\n    <router-link :to=\"{ name: defaultRoute }\">\n      <img src=\"images/logo.svg\" class=\"h-[32px] mr-1\" alt=\"Mongoose Studio Logo\" />\n    </router-link>\n    <div v-if=\"!!state.nodeEnv\" class=\"inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900\" :class=\"warnEnv ? 'bg-red-300' : 'bg-yellow-300'\">\n      {{state.nodeEnv}}\n    </div>\n  </div>\n  <div class=\"h-full pr-4 hidden md:block\">\n    <div class=\"sm:ml-6 sm:flex sm:space-x-8 h-full\">\n      <a v-if=\"hasAccess(roles, 'root')\"\n        href=\"#/\"\n        class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium\"\n        :class=\"documentView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Documents</a>\n      <a v-if=\"hasAccess(roles, 'dashboards')\"\n        href=\"#/dashboards\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Dashboards</a>\n      <a v-if=\"hasAccess(roles, 'chat')\"\n        href=\"#/chat\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"chatView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Chat</a>\n\n      <div class=\"h-full flex items-center\" v-if=\"!user && hasAPIKey\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"h-full flex items-center relative\" v-clickOutside=\"hideFlyout\">\n        <div>\n          <button type=\"button\" @click=\"showFlyout = !showFlyout\" class=\"relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800\" id=\"user-menu-button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n            <span class=\"absolute -inset-1.5\"></span>\n            <span class=\"sr-only\">Open user menu</span>\n            <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          </button>\n        </div>\n\n        <div v-if=\"showFlyout\" class=\"absolute right-0 z-10 top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"user-menu-button\" tabindex=\"-1\">\n          <router-link to=\"/team\" v-if=\"hasAccess(roles, 'team')\" @click=\"showFlyout = false\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Team</router-link>\n          <span @click=\"logout\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Sign out</span>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div class=\"md:hidden flex items-center\">\n    <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->\n    <button type=\"button\" id=\"open-mobile-menu\" class=\"-ml-2 rounded-md p-2 pr-4 text-gray-400\">\n      <span class=\"sr-only\">Open menu</span>\n      <svg class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Mobile menu mask -->\n  <div id=\"mobile-menu-mask\" class=\"fixed inset-0 bg-black bg-opacity-40 z-40 hidden\"></div>\n  <!-- Mobile menu drawer -->\n  <div id=\"mobile-menu\" class=\"fixed inset-0 bg-white shadow-lg z-50 transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col\">\n    <div class=\"flex items-center justify-between px-4 !h-[55px] border-b border-gray-200\">\n      <router-link :to=\"{ name: defaultRoute }\">\n        <img src=\"images/logo.svg\" class=\"h-[32px]\" alt=\"Mongoose Studio Logo\" />\n      </router-link>\n      <button type=\"button\" id=\"close-mobile-menu\" class=\"text-gray-400 p-2 rounded-md\">\n        <span class=\"sr-only\">Close menu</span>\n        <svg class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </div>\n    <nav class=\"flex-1 px-4 py-4 space-y-2\">\n      <a v-if=\"hasAccess(roles, 'root')\"\n        href=\"#/\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"documentView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'\">Documents</a>\n      <a v-if=\"hasAccess(roles, 'dashboards')\"\n        href=\"#/dashboards\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"dashboardView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'\">Dashboards</a>\n      <a v-if=\"hasAccess(roles, 'chat')\"\n        href=\"#/chat\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"chatView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'\">Chat</a>\n      <div v-if=\"!user && hasAPIKey\" class=\"mt-4\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"w-full rounded bg-ultramarine-600 px-3 py-2 text-base font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"mt-4\">\n        <div class=\"flex items-center gap-3 px-3 py-2 bg-gray-50 rounded-md\">\n          <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          <span class=\"text-gray-900 font-medium\">{{ user.name }}</span>\n        </div>\n        <div class=\"mt-2 space-y-1\">\n          <router-link to=\"/team\" v-if=\"hasAccess(roles, 'team')\" class=\"block px-3 py-2 rounded-md text-base text-gray-700 hover:bg-ultramarine-100\">Team</router-link>\n          <span @click=\"logout\" class=\"block px-3 py-2 rounded-md text-base text-gray-700 hover:bg-ultramarine-100 cursor-pointer\">Sign out</span>\n        </div>\n      </div>\n    </nav>\n  </div>\n</div>\n";
 
 /***/ }),