@mongoosejs/studio 0.0.95 → 0.0.96

package/frontend/public/app.js

@@ -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: {
@@ -469,7 +468,8 @@ module.exports = app => app.component('chat', {
     newMessage: '',
     chatThreadId: null,
     chatThreads: [],
-    chatMessages: []
+    chatMessages: [],
+    hideSidebar: null
   }),
   methods: {
     async sendMessage() {
@@ -2700,6 +2700,22 @@ 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() {
@@ -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";
 
 /***/ }),
 

package/frontend/public/tw.css

@@ -594,6 +594,10 @@ video {
   pointer-events: none;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -610,6 +614,15 @@ video {
   inset: -0.375rem;
 }
 
+.inset-0 {
+  inset: 0px;
+}
+
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -626,6 +639,50 @@ video {
   top: 90%;
 }
 
+.bottom-0 {
+  bottom: 0px;
+}
+
+.top-1\/2 {
+  top: 50%;
+}
+
+.top-full {
+  top: 100%;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.top-\[100px\] {
+  top: 100px;
+}
+
+.top-\[80px\] {
+  top: 80px;
+}
+
+.top-\[60px\] {
+  top: 60px;
+}
+
+.top-\[65px\] {
+  top: 65px;
+}
+
+.top-\[70px\] {
+  top: 70px;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.top-\[55px\] {
+  top: 55px;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -634,6 +691,22 @@ video {
   z-index: 10;
 }
 
+.z-40 {
+  z-index: 40;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
+.z-30 {
+  z-index: 30;
+}
+
 .col-start-1 {
   grid-column-start: 1;
 }
@@ -646,6 +719,10 @@ video {
   margin: 0px;
 }
 
+.-m-2 {
+  margin: -0.5rem;
+}
+
 .-mx-4 {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -751,6 +828,14 @@ video {
   margin-top: 2rem;
 }
 
+.-ml-2 {
+  margin-left: -0.5rem;
+}
+
+.-ml-4 {
+  margin-left: -1rem;
+}
+
 .block {
   display: block;
 }
@@ -838,6 +923,10 @@ video {
   height: 300px;
 }
 
+.h-\[32px\] {
+  height: 32px;
+}
+
 .h-\[42px\] {
   height: 42px;
 }
@@ -854,6 +943,34 @@ video {
   height: 1px;
 }
 
+.\!h-\[55px\] {
+  height: 55px !important;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-0 {
+  height: 0px;
+}
+
+.h-0\.5 {
+  height: 0.125rem;
+}
+
+.h-\[170px\] {
+  height: 170px;
+}
+
+.h-\[190px\] {
+  height: 190px;
+}
+
+.h-\[55px\] {
+  height: 55px;
+}
+
 .max-h-\[30vh\] {
   max-height: 30vh;
 }
@@ -902,6 +1019,34 @@ video {
   width: 100%;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-\[170px\] {
+  width: 170px;
+}
+
+.w-\[200px\] {
+  width: 200px;
+}
+
+.w-0 {
+  width: 0px;
+}
+
+.w-\[255px\] {
+  width: 255px;
+}
+
+.\!w-0 {
+  width: 0px !important;
+}
+
+.\!w-64 {
+  width: 16rem !important;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -914,18 +1059,34 @@ video {
   max-width: 64rem;
 }
 
-.max-w-\[70vw\] {
-  max-width: 70vw;
-}
-
 .max-w-\[calc\(100\%-6\.5rem\)\] {
   max-width: calc(100% - 6.5rem);
 }
 
+.max-w-\[calc\(100vw-25rem\)\] {
+  max-width: calc(100vw - 25rem);
+}
+
 .max-w-xs {
   max-width: 20rem;
 }
 
+.max-w-7xl {
+  max-width: 80rem;
+}
+
+.max-w-\[100vw\] {
+  max-width: 100vw;
+}
+
+.max-w-\[calc\(100vw-6rem\)\] {
+  max-width: calc(100vw - 6rem);
+}
+
+.max-w-\[calc\(100vw-4rem\)\] {
+  max-width: calc(100vw - 4rem);
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -962,6 +1123,21 @@ video {
   transform-origin: top right;
 }
 
+.translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-x-full {
+  --tw-translate-x: -100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-full {
+  --tw-translate-x: 100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -992,6 +1168,10 @@ video {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1044,6 +1224,10 @@ video {
   gap: 2rem;
 }
 
+.gap-16 {
+  gap: 4rem;
+}
+
 .gap-x-4 {
   -moz-column-gap: 1rem;
        column-gap: 1rem;
@@ -1086,6 +1270,18 @@ video {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-x-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0px * var(--tw-space-x-reverse));
+  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1135,6 +1331,10 @@ video {
   overflow-y: auto;
 }
 
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1235,11 +1435,6 @@ video {
   border-color: rgb(63 83 255 / var(--tw-border-opacity));
 }
 
-.border-red-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
-}
-
 .bg-blue-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
@@ -1374,6 +1569,11 @@ video {
   background-color: rgb(229 234 255 / var(--tw-bg-opacity));
 }
 
+.bg-ultramarine-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(63 83 255 / var(--tw-bg-opacity));
+}
+
 .bg-ultramarine-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(24 35 255 / var(--tw-bg-opacity));
@@ -1399,9 +1599,40 @@ video {
   background-color: rgb(253 224 71 / var(--tw-bg-opacity));
 }
 
-.bg-ultramarine-500 {
+.bg-indigo-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(63 83 255 / var(--tw-bg-opacity));
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
+
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.bg-opacity-25 {
+  --tw-bg-opacity: 0.25;
+}
+
+.bg-opacity-40 {
+  --tw-bg-opacity: 0.4;
+}
+
+.bg-cover {
+  background-size: cover;
+}
+
+.bg-center {
+  background-position: center;
+}
+
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.object-center {
+  -o-object-position: center;
+     object-position: center;
 }
 
 .p-1 {
@@ -1489,6 +1720,26 @@ video {
   padding-bottom: 1.5rem;
 }
 
+.px-\[10px\] {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.py-\[10px\] {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1537,6 +1788,14 @@ video {
   padding-top: 1px;
 }
 
+.pb-12 {
+  padding-bottom: 3rem;
+}
+
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1695,6 +1954,16 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-indigo-600 {
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity));
+}
+
+.text-ultramarine-700 {
+  --tw-text-opacity: 1;
+  color: rgb(7 19 250 / var(--tw-text-opacity));
+}
+
 .accent-sky-600 {
   accent-color: #0284c7;
 }
@@ -1703,6 +1972,14 @@ video {
   opacity: 0.5;
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1715,6 +1992,18 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1777,16 +2066,6 @@ video {
   --tw-ring-color: rgb(22 163 74 / 0.2);
 }
 
-.ring-yellow-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(133 77 14 / var(--tw-ring-opacity));
-}
-
-.ring-yellow-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity));
-}
-
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1805,6 +2084,52 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-150 {
+  transition-duration: 150ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
+.ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ease-linear {
+  transition-timing-function: linear;
+}
+
 .placeholder\:text-gray-400::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1830,6 +2155,10 @@ video {
   --tw-ring-color: rgb(0 168 165 / var(--tw-ring-opacity));
 }
 
+.hover\:border-b:hover {
+  border-bottom-width: 1px;
+}
+
 .hover\:border-gray-300:hover {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -1930,6 +2259,11 @@ video {
   background-color: rgb(63 83 255 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-ultramarine-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(24 35 255 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-valencia-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(235 126 126 / var(--tw-bg-opacity));
@@ -1940,9 +2274,9 @@ video {
   background-color: rgb(220 73 73 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-ultramarine-600:hover {
+.hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(24 35 255 / var(--tw-bg-opacity));
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
 .hover\:text-gray-700:hover {
@@ -1955,6 +2289,16 @@ video {
   color: rgb(10 87 87 / var(--tw-text-opacity));
 }
 
+.hover\:text-black:hover {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .focus\:z-10:focus {
   z-index: 10;
 }
@@ -2075,6 +2419,10 @@ video {
   outline-color: #d1d5db;
 }
 
+.focus-visible\:outline-gray-500:focus-visible {
+  outline-color: #6b7280;
+}
+
 .focus-visible\:outline-green-600:focus-visible {
   outline-color: #16a34a;
 }
@@ -2107,14 +2455,6 @@ video {
   outline-color: #1823ff;
 }
 
-.focus-visible\:outline-gray-600:focus-visible {
-  outline-color: #4b5563;
-}
-
-.focus-visible\:outline-gray-500:focus-visible {
-  outline-color: #6b7280;
-}
-
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
@@ -2157,6 +2497,10 @@ video {
     margin-top: 0px;
   }
 
+  .sm\:mt-5 {
+    margin-top: 1.25rem;
+  }
+
   .sm\:flex {
     display: flex;
   }
@@ -2174,6 +2518,15 @@ video {
     flex: none;
   }
 
+  .sm\:translate-y-px {
+    --tw-translate-y: 1px;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
+  .sm\:transform {
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
   .sm\:flex-col {
     flex-direction: column;
   }
@@ -2228,12 +2581,46 @@ video {
   }
 }
 
+@media (min-width: 768px) {
+  .md\:relative {
+    position: relative;
+  }
+
+  .md\:block {
+    display: block;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:w-64 {
+    width: 16rem;
+  }
+}
+
 @media (min-width: 1024px) {
   .lg\:-mx-8 {
     margin-left: -2rem;
     margin-right: -2rem;
   }
 
+  .lg\:block {
+    display: block;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
+  .lg\:flex-1 {
+    flex: 1 1 0%;
+  }
+
+  .lg\:self-stretch {
+    align-self: stretch;
+  }
+
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;

package/frontend/src/chat/chat-message/chat-message.html

@@ -1,6 +1,6 @@
 <div class="relative flex items-start space-x-3" :class="{'justify-end': message.role === 'user'}">
   <div
-    class="min-w-0 max-w-[calc(100%-6.5rem)]"
+    class="min-w-0 max-w-[calc(100vw-4rem)]"
     :class="{'text-right': message.role === 'user'}">
 
     <div class="text-sm text-gray-900 p-3 rounded-md inline-block" :class="styleForMessage">

package/frontend/src/chat/chat-message-script/chat-message-script.html

@@ -37,9 +37,9 @@
     </div>
   </div>
 
-  <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>
+  <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>
 
-  <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'">
+  <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'">
     <dashboard-chart v-if="message.executionResult?.output?.$chart" :value="message.executionResult?.output" />
     <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>
   </div>

package/frontend/src/chat/chat-message-script/chat-message-script.js

@@ -1,12 +1,11 @@
 'use strict';
 
 const api = require('../../api');
-const marked = require('marked').marked;
 const template = require('./chat-message-script.html');
 const vanillatoasts = require('vanillatoasts');
 
 module.exports = app => app.component('chat-message-script', {
-  template: template,
+  template,
   props: ['message', 'script', 'language'],
   data: () => ({ activeTab: 'code', showDetailModal: false }),
   computed: {

package/frontend/src/chat/chat.html

@@ -1,8 +1,20 @@
 <div class="flex" style="height: calc(100vh - 55px)">
-    <!-- Sidebar: Chat Threads -->
-  <aside class="w-64 bg-gray-100 border-r overflow-y-auto h-full">
-    <div class="p-4 font-bold text-lg border-b">Chat Threads</div>
-    <div class="p-4">
+  <div class="fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10" @click="hideSidebar = false">
+    <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>
+  </div>
+  <!-- Sidebar: Chat Threads -->
+  <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' : ''">
+    <div class="flex items-center border-b border-gray-100 w-64 overflow-x-hidden">
+      <div class="p-4 font-bold text-lg">Chat Threads</div>
+      <button
+        @click="hideSidebar = true"
+        class="ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none"
+        aria-label="Close sidebar"
+      >
+        <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>
+      </button>
+    </div>
+    <div class="p-4 w-64">
       <async-button
         @click="createNewThread"
         class="w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
@@ -13,12 +25,12 @@
     <div v-if="status === 'loaded' && chatThreads.length === 0" class="p-4 text-sm text-gray-700">
       No threads yet
     </div>
-    <ul vif="status === 'loaded'">
+    <ul v-if="status === 'loaded'" class="w-64">
       <li
         v-for="thread in chatThreads"
         :key="thread._id"
         @click="selectThread(thread._id)"
-        class="p-4 hover:bg-gray-200 cursor-pointer"
+        class="p-4 hover:bg-gray-200 cursor-pointer w-64"
         :class="{ 'bg-gray-300': thread._id === chatThreadId }"
       >
         {{ thread.title || 'Untitled Thread' }}

package/frontend/src/chat/chat.js

@@ -12,7 +12,8 @@ module.exports = app => app.component('chat', {
     newMessage: '',
     chatThreadId: null,
     chatThreads: [],
-    chatMessages: []
+    chatMessages: [],
+    hideSidebar: null
   }),
   methods: {
     async sendMessage() {

package/frontend/src/navbar/navbar.css

@@ -1,16 +1,7 @@
-.navbar {
-  width: 100%;
-  background-color: #eee;
-}
-
 .active {
   text-decoration: underline;
 }
 
-.spacing {
-  margin-right: 10px;
-}
-
 .navbar .nav-left {
   float: left;
   line-height: 54px;
@@ -22,18 +13,6 @@
   color: #232323;
 }
 
-.navbar {
-  border-bottom: 1px solid #ddd;
-  height: 55px;
-}
-
-.navbar .nav-left img {
-  height: 32px;
-  vertical-align: middle;
-  margin-right: 0.5em;
-  margin-top: 8px;
-}
-
 .navbar .nav-right {
   float: right;
   display: flex;

package/frontend/src/navbar/navbar.html

@@ -1,13 +1,13 @@
-<div class="navbar">
-  <div class="nav-left flex items-center gap-4 h-full">
+<div class="navbar w-full bg-gray-50 flex justify-between border-b border-gray-200 !h-[55px]">
+  <div class="flex items-center gap-4 h-full pl-4">
     <router-link :to="{ name: defaultRoute }">
-      <img src="images/logo.svg" alt="Mongoose Studio Logo" />
+      <img src="images/logo.svg" class="h-[32px] mr-1" alt="Mongoose Studio Logo" />
     </router-link>
     <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'">
       {{state.nodeEnv}}
     </div>
   </div>
-  <div class="nav-right h-full">
+  <div class="h-full pr-4 hidden md:block">
     <div class="sm:ml-6 sm:flex sm:space-x-8 h-full">
       <a v-if="hasAccess(roles, 'root')"
         href="#/"
@@ -47,5 +47,62 @@
 
     </div>
   </div>
-  <div style="clear: both"></div>
+  <div class="md:hidden flex items-center">
+    <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
+    <button type="button" id="open-mobile-menu" class="-ml-2 rounded-md p-2 pr-4 text-gray-400">
+      <span class="sr-only">Open menu</span>
+      <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+      </svg>
+    </button>
+  </div>
+
+  <!-- Mobile menu mask -->
+  <div id="mobile-menu-mask" class="fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
+  <!-- Mobile menu drawer -->
+  <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">
+    <div class="flex items-center justify-between px-4 !h-[55px] border-b border-gray-200">
+      <router-link :to="{ name: defaultRoute }">
+        <img src="images/logo.svg" class="h-[32px]" alt="Mongoose Studio Logo" />
+      </router-link>
+      <button type="button" id="close-mobile-menu" class="text-gray-400 p-2 rounded-md">
+        <span class="sr-only">Close menu</span>
+        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+    <nav class="flex-1 px-4 py-4 space-y-2">
+      <a v-if="hasAccess(roles, 'root')"
+        href="#/"
+        class="block px-3 py-2 rounded-md text-base font-medium"
+        :class="documentView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'">Documents</a>
+      <a v-if="hasAccess(roles, 'dashboards')"
+        href="#/dashboards"
+        class="block px-3 py-2 rounded-md text-base font-medium"
+        :class="dashboardView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'">Dashboards</a>
+      <a v-if="hasAccess(roles, 'chat')"
+        href="#/chat"
+        class="block px-3 py-2 rounded-md text-base font-medium"
+        :class="chatView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'">Chat</a>
+      <div v-if="!user && hasAPIKey" class="mt-4">
+        <button
+          type="button"
+          @click="loginWithGithub"
+          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">
+            Login
+        </button>
+      </div>
+      <div v-if="user && hasAPIKey" class="mt-4">
+        <div class="flex items-center gap-3 px-3 py-2 bg-gray-50 rounded-md">
+          <img class="size-8 rounded-full" :src="user.picture" alt="">
+          <span class="text-gray-900 font-medium">{{ user.name }}</span>
+        </div>
+        <div class="mt-2 space-y-1">
+          <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>
+          <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>
+        </div>
+      </div>
+    </nav>
+  </div>
 </div>

package/frontend/src/navbar/navbar.js

@@ -22,6 +22,22 @@ 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() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.95",
+  "version": "0.0.96",
   "description": "A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.",
   "homepage": "https://studio.mongoosejs.io/",
   "repository": {