@mongoosejs/studio 0.0.96 → 0.0.97

package/frontend/public/app.js

@@ -500,6 +500,11 @@ module.exports = app => app.component('chat', {
         this.chatMessages.push(chatMessages[1]);
 
         this.newMessage = '';
+        this.$nextTick(() => {
+          if (this.$refs.messageInput) {
+            this.$refs.messageInput.style.height = 'auto';
+          }
+        });
 
         this.$nextTick(() => {
           if (this.$refs.messagesContainer) {
@@ -510,6 +515,18 @@ module.exports = app => app.component('chat', {
         this.sendingMessage = false;
       }
     },
+    handleEnter(ev) {
+      if (!ev.shiftKey) {
+        this.sendMessage();
+      }
+    },
+    adjustTextareaHeight(ev) {
+      const textarea = ev.target;
+      textarea.style.height = 'auto';
+      const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight, 10);
+      const maxHeight = lineHeight * 5;
+      textarea.style.height = Math.min(textarea.scrollHeight, maxHeight) + 'px';
+    },
     selectThread(threadId) {
       this.$router.push('/chat/' + threadId);
     },
@@ -1756,6 +1773,7 @@ if (typeof process === 'undefined') {
 
 const api = __webpack_require__(/*! ./api */ "./frontend/src/api.js");
 const mothership = __webpack_require__(/*! ./mothership */ "./frontend/src/mothership.js");
+const { routes } = __webpack_require__(/*! ./routes */ "./frontend/src/routes.js");
 const vanillatoasts = __webpack_require__(/*! vanillatoasts */ "./node_modules/vanillatoasts/vanillatoasts.js");
 
 const app = Vue.createApp({
@@ -1814,7 +1832,7 @@ app.component('app-component', {
     window.state = this;
 
     if (mothership.hasAPIKey) {
-      const hash = window.location.hash.replace(/^#?\/?\??/, '') || '';
+      const hash = window.location.hash.replace(/^#?\/?/, '') || '';
       const hashQuery = hash.split('?')[1] || '';
       const hashParams = new URLSearchParams(hashQuery);
       if (hashParams.has('code')) {
@@ -1857,6 +1875,7 @@ app.component('app-component', {
       const { nodeEnv } = await api.status();
       this.nodeEnv = nodeEnv;
     }
+
     this.status = 'loaded';
   },
   setup() {
@@ -1873,7 +1892,6 @@ app.component('app-component', {
   }
 });
 
-const { routes } = __webpack_require__(/*! ./routes */ "./frontend/src/routes.js");
 const router = VueRouter.createRouter({
   history: VueRouter.createWebHashHistory(),
   routes: routes.map(route => ({
@@ -1883,6 +1901,14 @@ const router = VueRouter.createRouter({
   }))
 });
 
+router.beforeEach((to, from, next) => {
+  if (to.name === 'root' && window.state.roles && window.state.roles[0] === 'dashboards') {
+    return next({ name: 'dashboards' });
+  } else {
+    next();
+  }
+});
+
 app.use(router);
 
 app.mount('#content');
@@ -2693,14 +2719,6 @@ module.exports = app => app.component('navbar', {
   inject: ['state'],
   data: () => ({ showFlyout: false }),
   mounted: function() {
-    // Redirect to first allowed route if current route is not allowed
-    if (!this.hasAccess(this.roles, this.$route.name)) {
-      const firstAllowedRoute = this.allowedRoutes[0];
-      if (firstAllowedRoute) {
-        this.$router.push({ name: firstAllowedRoute.name });
-      }
-    }
-
     const mobileMenuMask = document.querySelector('#mobile-menu-mask');
     const mobileMenu = document.querySelector('#mobile-menu');
 
@@ -2739,11 +2757,8 @@ module.exports = app => app.component('navbar', {
     canViewTeam() {
       return this.hasAccess(this.roles, 'team');
     },
-    allowedRoutes() {
-      return routes.filter(route => this.hasAccess(this.roles, route.name));
-    },
     defaultRoute() {
-      return this.allowedRoutes[0]?.name || 'dashboards';
+      return this.roles && this.roles[0] === 'dashboards' ? 'dashboards' : 'root';
     }
   },
   methods: {
@@ -2804,10 +2819,12 @@ const roleAccess = {
   dashboards: ['dashboards', 'dashboard']
 };
 
+const allowedRoutesForLocalDev = ['document', 'root', 'chat'];
+
 // Helper function to check if a role has access to a route
 function hasAccess(roles, routeName) {
   // change to true for local development
-  if (!roles) return false;
+  if (!roles) return allowedRoutesForLocalDev.includes(routeName);
   return roles.some(role => roleAccess[role]?.includes(routeName));
 }
 
@@ -3897,7 +3914,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-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";
+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-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] 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-[50vh] overflow-y-auto bg-white border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] 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";
 
 /***/ }),
 
@@ -3908,7 +3925,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(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";
+module.exports = "<div class=\"relative flex items-start\" :class=\"{'justify-end': message.role === 'user'}\">\n  <div\n    class=\"min-w-0 max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)]\"\n    :class=\"{'text-right': message.role === 'user'}\">\n\n    <div class=\"text-sm text-gray-900 md: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";
 
 /***/ }),
 
@@ -3919,7 +3936,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  <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";
+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\" class=\"w-5\" 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 lg:w-64 fixed lg: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\" class=\"w-5\" 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 items-end justify-end\">\n        <textarea\n          v-model=\"newMessage\"\n          placeholder=\"Ask something...\"\n          class=\"flex-1 border rounded px-4 py-2 resize-none overflow-y-auto\"\n          rows=\"1\"\n          ref=\"messageInput\"\n          @input=\"adjustTextareaHeight\"\n          @keydown.enter.exact.prevent=\"handleEnter\"\n        ></textarea>\n        <button class=\"bg-blue-600 text-white px-4 h-[42px] 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";
 
 /***/ }),
 
@@ -4458,7 +4475,7 @@ module.exports = ".active {\n  text-decoration: underline;\n}\n\n.navbar .nav-le
 /***/ ((module) => {
 
 "use strict";
-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";
+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\" title=\"NODE_ENV\" 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      <span v-else class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium text-gray-300 cursor-not-allowed\" aria-disabled=\"true\">\n        Documents\n        <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\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      <span v-else class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-300 cursor-not-allowed\">\n        Dashboards\n        <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\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      <span v-else class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-300 cursor-not-allowed\">\n        Chat\n        <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\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 v-else class=\"block px-4 py-2 text-sm text-gray-300 cursor-not-allowed\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">\n            Team\n            <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n            </svg>\n          </span>\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      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Documents\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\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      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Dashboards\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\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      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Chat\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\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 v-else class=\"block px-3 py-2 rounded-md text-base text-gray-300 cursor-not-allowed\">\n            Team\n            <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n            </svg>\n          </span>\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

@@ -618,11 +618,6 @@ video {
   inset: 0px;
 }
 
-.inset-x-0 {
-  left: 0px;
-  right: 0px;
-}
-
 .right-0 {
   right: 0px;
 }
@@ -635,52 +630,12 @@ video {
   top: 0.25rem;
 }
 
-.top-\[90\%\] {
-  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;
+.top-\[90\%\] {
+  top: 90%;
 }
 
 .isolate {
@@ -691,6 +646,10 @@ video {
   z-index: 10;
 }
 
+.z-20 {
+  z-index: 20;
+}
+
 .z-40 {
   z-index: 40;
 }
@@ -699,14 +658,6 @@ video {
   z-index: 50;
 }
 
-.z-20 {
-  z-index: 20;
-}
-
-.z-30 {
-  z-index: 30;
-}
-
 .col-start-1 {
   grid-column-start: 1;
 }
@@ -719,10 +670,6 @@ video {
   margin: 0px;
 }
 
-.-m-2 {
-  margin: -0.5rem;
-}
-
 .-mx-4 {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -756,6 +703,10 @@ video {
   margin-left: -0.125rem;
 }
 
+.-ml-2 {
+  margin-left: -0.5rem;
+}
+
 .-ml-px {
   margin-left: -1px;
 }
@@ -828,14 +779,6 @@ video {
   margin-top: 2rem;
 }
 
-.-ml-2 {
-  margin-left: -0.5rem;
-}
-
-.-ml-4 {
-  margin-left: -1rem;
-}
-
 .block {
   display: block;
 }
@@ -887,6 +830,10 @@ video {
   height: 2rem;
 }
 
+.\!h-\[55px\] {
+  height: 55px !important;
+}
+
 .\!h-\[90vh\] {
   height: 90vh !important;
 }
@@ -911,6 +858,10 @@ video {
   height: 1.25rem;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
 .h-8 {
   height: 2rem;
 }
@@ -943,32 +894,12 @@ 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-10 {
+  height: 2.5rem;
 }
 
-.h-\[190px\] {
-  height: 190px;
-}
-
-.h-\[55px\] {
-  height: 55px;
+.h-11 {
+  height: 2.75rem;
 }
 
 .max-h-\[30vh\] {
@@ -979,10 +910,22 @@ video {
   max-height: 50vh;
 }
 
+.\!w-0 {
+  width: 0px !important;
+}
+
+.\!w-64 {
+  width: 16rem !important;
+}
+
 .\!w-\[90vw\] {
   width: 90vw !important;
 }
 
+.w-0 {
+  width: 0px;
+}
+
 .w-16 {
   width: 4rem;
 }
@@ -1003,6 +946,10 @@ video {
   width: 1.25rem;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
 .w-64 {
   width: 16rem;
 }
@@ -1019,34 +966,6 @@ 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;
 }
@@ -1059,34 +978,14 @@ video {
   max-width: 64rem;
 }
 
-.max-w-\[calc\(100\%-6\.5rem\)\] {
-  max-width: calc(100% - 6.5rem);
-}
-
-.max-w-\[calc\(100vw-25rem\)\] {
-  max-width: calc(100vw - 25rem);
+.max-w-\[calc\(100vw-4rem\)\] {
+  max-width: calc(100vw - 4rem);
 }
 
 .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%;
 }
@@ -1128,11 +1027,6 @@ video {
   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));
@@ -1150,6 +1044,10 @@ video {
   cursor: pointer;
 }
 
+.resize-none {
+  resize: none;
+}
+
 .list-disc {
   list-style-type: disc;
 }
@@ -1168,10 +1066,6 @@ 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;
 }
@@ -1184,6 +1078,10 @@ video {
   align-items: flex-start;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1224,10 +1122,6 @@ video {
   gap: 2rem;
 }
 
-.gap-16 {
-  gap: 4rem;
-}
-
 .gap-x-4 {
   -moz-column-gap: 1rem;
        column-gap: 1rem;
@@ -1264,24 +1158,18 @@ video {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  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));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * 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)));
@@ -1435,6 +1323,11 @@ video {
   border-color: rgb(63 83 255 / var(--tw-border-opacity));
 }
 
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .bg-blue-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
@@ -1599,42 +1492,10 @@ video {
   background-color: rgb(253 224 71 / var(--tw-bg-opacity));
 }
 
-.bg-indigo-600 {
-  --tw-bg-opacity: 1;
-  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 {
   padding: 0.25rem;
 }
@@ -1720,26 +1581,6 @@ 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;
 }
@@ -1788,14 +1629,6 @@ video {
   padding-top: 1px;
 }
 
-.pb-12 {
-  padding-bottom: 3rem;
-}
-
-.pt-5 {
-  padding-top: 1.25rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -1889,6 +1722,11 @@ video {
   color: rgb(0 242 58 / var(--tw-text-opacity));
 }
 
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1944,6 +1782,11 @@ video {
   color: rgb(0 168 165 / var(--tw-text-opacity));
 }
 
+.text-ultramarine-700 {
+  --tw-text-opacity: 1;
+  color: rgb(7 19 250 / var(--tw-text-opacity));
+}
+
 .text-valencia-500 {
   --tw-text-opacity: 1;
   color: rgb(220 73 73 / var(--tw-text-opacity));
@@ -1954,16 +1797,6 @@ 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;
 }
@@ -1972,14 +1805,6 @@ 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);
@@ -1992,18 +1817,6 @@ 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;
@@ -2078,14 +1891,14 @@ video {
   transition-duration: 150ms;
 }
 
-.transition-colors {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+.transition-all {
+  transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
-.transition-opacity {
-  transition-property: opacity;
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -2096,16 +1909,6 @@ video {
   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;
 }
@@ -2114,22 +1917,10 @@ video {
   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));
@@ -2155,10 +1946,6 @@ 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));
@@ -2179,6 +1966,11 @@ video {
   background-color: rgb(0 242 58 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -2274,11 +2066,6 @@ video {
   background-color: rgb(220 73 73 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
@@ -2289,16 +2076,6 @@ 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;
 }
@@ -2497,10 +2274,6 @@ video {
     margin-top: 0px;
   }
 
-  .sm\:mt-5 {
-    margin-top: 1.25rem;
-  }
-
   .sm\:flex {
     display: flex;
   }
@@ -2518,15 +2291,6 @@ 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;
   }
@@ -2597,28 +2361,36 @@ video {
   .md\:w-64 {
     width: 16rem;
   }
+
+  .md\:max-w-\[calc\(100vw-16rem\)\] {
+    max-width: calc(100vw - 16rem);
+  }
+
+  .md\:max-w-\[calc\(100vw-20rem\)\] {
+    max-width: calc(100vw - 20rem);
+  }
+
+  .md\:p-3 {
+    padding: 0.75rem;
+  }
 }
 
 @media (min-width: 1024px) {
+  .lg\:relative {
+    position: relative;
+  }
+
   .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\:w-64 {
+    width: 16rem;
   }
 
-  .lg\:self-stretch {
-    align-self: stretch;
+  .lg\:max-w-\[calc\(100vw-20rem\)\] {
+    max-width: calc(100vw - 20rem);
   }
 
   .lg\:px-8 {

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

@@ -1,9 +1,9 @@
-<div class="relative flex items-start space-x-3" :class="{'justify-end': message.role === 'user'}">
+<div class="relative flex items-start" :class="{'justify-end': message.role === 'user'}">
   <div
-    class="min-w-0 max-w-[calc(100vw-4rem)]"
+    class="min-w-0 max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)]"
     :class="{'text-right': message.role === 'user'}">
 
-    <div class="text-sm text-gray-900 p-3 rounded-md inline-block" :class="styleForMessage">
+    <div class="text-sm text-gray-900 md:p-3 rounded-md inline-block" :class="styleForMessage">
       <div v-for="part in contentSplitByScripts">
         <div v-if="part.type === 'text'" v-html="marked(part.content)">
         </div>

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-4rem)] 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-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] 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-4rem)] relative" v-show="activeTab === 'output'">
+  <div class="p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-white border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] 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.html

@@ -1,9 +1,9 @@
 <div class="flex" style="height: calc(100vh - 55px)">
   <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>
+    <svg xmlns="http://www.w3.org/2000/svg" style="h-5 w-5" viewBox="0 -960 960 960" class="w-5" 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' : ''">
+  <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 lg:w-64 fixed lg: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
@@ -11,7 +11,7 @@
         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>
+        <svg xmlns="http://www.w3.org/2000/svg" style="h-5 w-5" viewBox="0 -960 960 960" class="w-5" 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">
@@ -58,13 +58,17 @@
 
     <!-- Input Area -->
     <div class="border-t p-4">
-      <form @submit.prevent="sendMessage" :disabled="sendingMessage" class="flex gap-2">
-        <input
+      <form @submit.prevent="sendMessage" :disabled="sendingMessage" class="flex gap-2 items-end justify-end">
+        <textarea
           v-model="newMessage"
           placeholder="Ask something..."
-          class="flex-1 border rounded px-4 py-2"
-        />
-        <button class="bg-blue-600 text-white px-4 py-2 rounded disabled:bg-gray-600" :disabled="sendingMessage">
+          class="flex-1 border rounded px-4 py-2 resize-none overflow-y-auto"
+          rows="1"
+          ref="messageInput"
+          @input="adjustTextareaHeight"
+          @keydown.enter.exact.prevent="handleEnter"
+        ></textarea>
+        <button class="bg-blue-600 text-white px-4 h-[42px] rounded disabled:bg-gray-600" :disabled="sendingMessage">
           <svg v-if="sendingMessage" style="height: 1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <g>
               <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3" />

package/frontend/src/chat/chat.js

@@ -44,6 +44,11 @@ module.exports = app => app.component('chat', {
         this.chatMessages.push(chatMessages[1]);
 
         this.newMessage = '';
+        this.$nextTick(() => {
+          if (this.$refs.messageInput) {
+            this.$refs.messageInput.style.height = 'auto';
+          }
+        });
 
         this.$nextTick(() => {
           if (this.$refs.messagesContainer) {
@@ -54,6 +59,18 @@ module.exports = app => app.component('chat', {
         this.sendingMessage = false;
       }
     },
+    handleEnter(ev) {
+      if (!ev.shiftKey) {
+        this.sendMessage();
+      }
+    },
+    adjustTextareaHeight(ev) {
+      const textarea = ev.target;
+      textarea.style.height = 'auto';
+      const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight, 10);
+      const maxHeight = lineHeight * 5;
+      textarea.style.height = Math.min(textarea.scrollHeight, maxHeight) + 'px';
+    },
     selectThread(threadId) {
       this.$router.push('/chat/' + threadId);
     },

package/frontend/src/index.js

@@ -6,6 +6,7 @@ if (typeof process === 'undefined') {
 
 const api = require('./api');
 const mothership = require('./mothership');
+const { routes } = require('./routes');
 const vanillatoasts = require('vanillatoasts');
 
 const app = Vue.createApp({
@@ -67,7 +68,7 @@ app.component('app-component', {
     window.state = this;
 
     if (mothership.hasAPIKey) {
-      const hash = window.location.hash.replace(/^#?\/?\??/, '') || '';
+      const hash = window.location.hash.replace(/^#?\/?/, '') || '';
       const hashQuery = hash.split('?')[1] || '';
       const hashParams = new URLSearchParams(hashQuery);
       if (hashParams.has('code')) {
@@ -110,6 +111,7 @@ app.component('app-component', {
       const { nodeEnv } = await api.status();
       this.nodeEnv = nodeEnv;
     }
+
     this.status = 'loaded';
   },
   setup() {
@@ -126,7 +128,6 @@ app.component('app-component', {
   }
 });
 
-const { routes } = require('./routes');
 const router = VueRouter.createRouter({
   history: VueRouter.createWebHashHistory(),
   routes: routes.map(route => ({
@@ -136,6 +137,14 @@ const router = VueRouter.createRouter({
   }))
 });
 
+router.beforeEach((to, from, next) => {
+  if (to.name === 'root' && window.state.roles && window.state.roles[0] === 'dashboards') {
+    return next({ name: 'dashboards' });
+  } else {
+    next();
+  }
+});
+
 app.use(router);
 
 app.mount('#content');

package/frontend/src/navbar/navbar.html

@@ -3,7 +3,7 @@
     <router-link :to="{ name: defaultRoute }">
       <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'">
+    <div v-if="!!state.nodeEnv" title="NODE_ENV" 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>
@@ -13,14 +13,32 @@
         href="#/"
         class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
         :class="documentView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Documents</a>
+      <span v-else class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium text-gray-300 cursor-not-allowed" aria-disabled="true">
+        Documents
+        <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+        </svg>
+      </span>
       <a v-if="hasAccess(roles, 'dashboards')"
         href="#/dashboards"
         class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
         :class="dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Dashboards</a>
+      <span v-else class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-300 cursor-not-allowed">
+        Dashboards
+        <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+        </svg>
+      </span>
       <a v-if="hasAccess(roles, 'chat')"
         href="#/chat"
         class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
         :class="chatView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Chat</a>
+      <span v-else class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-300 cursor-not-allowed">
+        Chat
+        <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+        </svg>
+      </span>
 
       <div class="h-full flex items-center" v-if="!user && hasAPIKey">
         <button
@@ -41,6 +59,12 @@
 
         <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">
           <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>
+          <span v-else class="block px-4 py-2 text-sm text-gray-300 cursor-not-allowed" role="menuitem" tabindex="-1" id="user-menu-item-2">
+            Team
+            <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+            </svg>
+          </span>
           <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>
         </div>
       </div>
@@ -77,14 +101,32 @@
         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>
+      <span v-else class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed">
+        Documents
+        <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+        </svg>
+      </span>
       <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>
+      <span v-else class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed">
+        Dashboards
+        <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+        </svg>
+      </span>
       <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>
+      <span v-else class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed">
+        Chat
+        <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+        </svg>
+      </span>
       <div v-if="!user && hasAPIKey" class="mt-4">
         <button
           type="button"
@@ -100,6 +142,12 @@
         </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 v-else class="block px-3 py-2 rounded-md text-base text-gray-300 cursor-not-allowed">
+            Team
+            <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+            </svg>
+          </span>
           <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>

package/frontend/src/navbar/navbar.js

@@ -15,14 +15,6 @@ module.exports = app => app.component('navbar', {
   inject: ['state'],
   data: () => ({ showFlyout: false }),
   mounted: function() {
-    // Redirect to first allowed route if current route is not allowed
-    if (!this.hasAccess(this.roles, this.$route.name)) {
-      const firstAllowedRoute = this.allowedRoutes[0];
-      if (firstAllowedRoute) {
-        this.$router.push({ name: firstAllowedRoute.name });
-      }
-    }
-
     const mobileMenuMask = document.querySelector('#mobile-menu-mask');
     const mobileMenu = document.querySelector('#mobile-menu');
 
@@ -61,11 +53,8 @@ module.exports = app => app.component('navbar', {
     canViewTeam() {
       return this.hasAccess(this.roles, 'team');
     },
-    allowedRoutes() {
-      return routes.filter(route => this.hasAccess(this.roles, route.name));
-    },
     defaultRoute() {
-      return this.allowedRoutes[0]?.name || 'dashboards';
+      return this.roles && this.roles[0] === 'dashboards' ? 'dashboards' : 'root';
     }
   },
   methods: {

package/frontend/src/routes.js

@@ -9,10 +9,12 @@ const roleAccess = {
   dashboards: ['dashboards', 'dashboard']
 };
 
+const allowedRoutesForLocalDev = ['document', 'root', 'chat'];
+
 // Helper function to check if a role has access to a route
 function hasAccess(roles, routeName) {
   // change to true for local development
-  if (!roles) return false;
+  if (!roles) return allowedRoutesForLocalDev.includes(routeName);
   return roles.some(role => roleAccess[role]?.includes(routeName));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.96",
+  "version": "0.0.97",
   "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": {