@mongoosejs/studio 0.3.4 → 0.3.6

package/frontend/public/tw.css

@@ -719,10 +719,6 @@ video {
   right: 0.5rem;
 }
 
-.right-4 {
-  right: 1rem;
-}
-
 .top-0 {
   top: 0px;
 }
@@ -3328,6 +3324,11 @@ video {
   color: var(--color-primary);
 }
 
+.hover\:text-red-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(127 29 29 / var(--tw-text-opacity));
+}
+
 .hover\:text-slate-700:hover {
   --tw-text-opacity: 1;
   color: rgb(51 65 85 / var(--tw-text-opacity));

package/frontend/src/chat/chat.html

@@ -10,17 +10,6 @@
       <path stroke-linecap="round" stroke-linejoin="round" d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
     </svg>
   </button>
-  <button
-    class="fixed top-[65px] right-4 z-10 p-2 rounded-md shadow bg-surface"
-    :class="hasWorkspace ? 'text-content-secondary hover:bg-muted' : 'text-gray-300 cursor-not-allowed bg-page'"
-    @click="toggleShareThread"
-    :disabled="!hasWorkspace || !chatThreadId || sharingThread"
-    aria-label="Share thread with workspace"
-    title="Share thread with workspace"
-  >
-    <svg v-if="hasWorkspace" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a2.48 2.48 0 0 0 0-1.39l7.02-4.11a2.5 2.5 0 1 0-.87-1.37L8.04 9.94a2.5 2.5 0 1 0 0 4.12l7.12 4.16a2.5 2.5 0 1 0 .84-1.34l-7.05-4.12c-.04-.02-.08-.05-.11-.07a2.48 2.48 0 0 0 0-1.39c.03-.02.07-.04.11-.07l7.11-4.16c.52.47 1.2.76 1.94.76a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0-1.94.94L7.97 8.43a2.5 2.5 0 1 0 0 7.14l9.09 5.3c.52-.47 1.2-.76 1.94-.76a2.5 2.5 0 1 0 0-5z"/></svg>
-    <svg v-else xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9zm9 2v9H6v-9h12z"/></svg>
-  </button>
   <!-- Sidebar: Chat Threads -->
   <aside
     class="bg-page border-r overflow-hidden h-full transition-all duration-300 ease-in-out z-20 w-64 fixed lg:relative shrink-0 flex flex-col"
@@ -84,6 +73,18 @@
           <path stroke-linecap="round" stroke-linejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" />
         </svg>
       </button>
+      <button
+        type="button"
+        @click="hasWorkspace ? toggleShareThread() : (showProUpgradeModal = true)"
+        class="rounded p-1.5"
+        :class="hasWorkspace && chatThreadId ? 'text-gray-400 hover:text-gray-600 hover:bg-muted' : !hasWorkspace ? 'text-gray-400 hover:text-gray-600 hover:bg-muted' : 'text-gray-300 cursor-not-allowed'"
+        :disabled="hasWorkspace && !chatThreadId"
+        aria-label="Share thread with workspace"
+        :title="'Share thread with workspace' + (!hasWorkspace ? ' (requires a pro workspace)' : !chatThreadId ? ': Open a thread first!' : '')"
+      >
+        <svg v-if="hasWorkspace" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a2.48 2.48 0 0 0 0-1.39l7.02-4.11a2.5 2.5 0 1 0-.87-1.37L8.04 9.94a2.5 2.5 0 1 0 0 4.12l7.12 4.16a2.5 2.5 0 1 0 .84-1.34l-7.05-4.12c-.04-.02-.08-.05-.11-.07a2.48 2.48 0 0 0 0-1.39c.03-.02.07-.04.11-.07l7.11-4.16c.52.47 1.2.76 1.94.76a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0-1.94.94L7.97 8.43a2.5 2.5 0 1 0 0 7.14l9.09 5.3c.52-.47 1.2-.76 1.94-.76a2.5 2.5 0 1 0 0-5z"/></svg>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9zm9 2v9H6v-9h12z"/></svg>
+      </button>
     </div>
   </aside>
 
@@ -118,7 +119,7 @@
           @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">
+        <button class="bg-primary hover:bg-primary-hover 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" />
@@ -132,4 +133,10 @@
       </form>
     </div>
   </main>
+
+  <pro-upgrade-modal
+    :show="showProUpgradeModal"
+    feature-description="Sharing threads lets you collaborate with your team by sharing chat threads within your workspace."
+    @close="showProUpgradeModal = false"
+  ></pro-upgrade-modal>
 </div>

package/frontend/src/chat/chat.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const api = require('../api');
+const getCurrentDateTimeContext = require('../getCurrentDateTimeContext');
 const template = require('./chat.html');
 
 module.exports = {
@@ -15,7 +16,8 @@ module.exports = {
     chatMessages: [],
     hideSidebar: null,
     sharingThread: false,
-    threadSearch: ''
+    threadSearch: '',
+    showProUpgradeModal: false
   }),
   methods: {
     async sendMessage() {
@@ -44,7 +46,11 @@ module.exports = {
           }
         });
 
-        const params = { chatThreadId: this.chatThreadId, content };
+        const params = {
+          chatThreadId: this.chatThreadId,
+          content,
+          currentDateTime: getCurrentDateTimeContext()
+        };
         let userChatMessage = null;
         let assistantChatMessage = null;
         for await (const event of api.ChatThread.streamChatMessage(params)) {
@@ -151,7 +157,7 @@ module.exports = {
     },
     async toggleShareThread() {
       if (!this.chatThreadId || !this.hasWorkspace) {
-        return;
+        throw new Error('Cannot share thread: chatThreadId or hasWorkspace is missing');
       }
       this.sharingThread = true;
       try {

package/frontend/src/create-document/create-document.js

@@ -11,6 +11,7 @@ const ObjectId = new Proxy(BSON.ObjectId, {
 });
 
 const appendCSS = require('../appendCSS');
+const getCurrentDateTimeContext = require('../getCurrentDateTimeContext');
 
 appendCSS(require('./create-document.css'));
 
@@ -49,7 +50,8 @@ module.exports = app => app.component('create-document', {
         for await (const event of api.Model.streamChatMessage({
           model: this.currentModel,
           content: prompt,
-          documentData: this.aiOriginalDocument
+          documentData: this.aiOriginalDocument,
+          currentDateTime: getCurrentDateTimeContext()
         })) {
           if (event?.textPart) {
             this.aiSuggestion += event.textPart;

package/frontend/src/getCurrentDateTimeContext.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const time = require('time-commando');
+
+module.exports = function getCurrentDateTimeContext() {
+  const date = time.now();
+  const components = [
+    date.getFullYear(),
+    date.getMonth() + 1,
+    date.getDate(),
+    date.getHours(),
+    date.getMinutes(),
+    date.getSeconds()
+  ].map(num => num.toString().padStart(2, '0'));
+  const [yyyy, mm, dd, hh, mi, ss] = components;
+  return `${yyyy}-${mm}-${dd}T${hh}:${mi}:${ss}`;
+};

package/frontend/src/list-json/list-json.js

@@ -28,13 +28,6 @@ module.exports = app => app.component('list-json', {
       topLevelExpanded: false
     };
   },
-  watch: {
-    value: {
-      handler() {
-        this.resetCollapse();
-      }
-    }
-  },
   created() {
     this.resetCollapse();
     for (const field of this.expandedFields) {

package/frontend/src/modal/modal.js

@@ -7,5 +7,29 @@ appendCSS(require('./modal.css'));
 
 module.exports = app => app.component('modal', {
   template,
-  props: ['containerClass']
+  props: ['containerClass'],
+  mounted() {
+    window.addEventListener('keydown', this.onEscape);
+  },
+  beforeUnmount() {
+    window.removeEventListener('keydown', this.onEscape);
+  },
+  methods: {
+    onEscape(event) {
+      if (event.key !== 'Escape') {
+        return;
+      }
+
+      const modalMasks = Array.from(document.querySelectorAll('.modal-mask'));
+      const currentMask = this.$el?.classList?.contains('modal-mask') ? this.$el : this.$el?.querySelector('.modal-mask') || this.$el;
+      const isTopMostModal = modalMasks.length > 0 && modalMasks[modalMasks.length - 1] === currentMask;
+
+      if (!isTopMostModal) {
+        return;
+      }
+
+      const closeButton = currentMask.querySelector('.modal-exit, [data-modal-close]');
+      closeButton?.click();
+    }
+  }
 });

package/frontend/src/models/document-search/document-search.js

@@ -41,6 +41,9 @@ module.exports = app => app.component('document-search', {
   created() {
     this.buildAutocompleteTrie();
   },
+  mounted() {
+    this.$refs.searchInput.focus();
+  },
   methods: {
     emitSearch() {
       this.$emit('input', this.searchText);

package/frontend/src/models/models.html

@@ -226,7 +226,7 @@
                   @click="applyDefaultProjectionColumns()"
                   class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
                 >
-                  Default
+                  Default Projection
                 </async-button>
               </div>
             </div>
@@ -280,6 +280,24 @@
         <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative m-4 rounded-md" role="alert">
           <span class="block font-bold">Error</span>
           <span class="block">{{ error }}</span>
+          <span class="block mt-2">
+            Need help?
+            <a
+              href="https://discord.gg/P3YCfKYxpy"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="underline font-medium text-red-800 hover:text-red-900"
+            >Ask in Discord</a>
+            or
+            <a
+              href="https://github.com/mongoosejs/studio/issues"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="underline font-medium text-red-800 hover:text-red-900"
+            >
+              open a GitHub issue.
+            </a>
+          </span>
         </div>
       </div>
       <div v-else-if="outputType === 'table'" class="flex-1 min-h-0 flex flex-col overflow-hidden">
@@ -442,13 +460,15 @@
             selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:shadow-sm hover:border-slate-300 bg-surface'
           ]"
         >
-          <button
-            type="button"
+          <router-link
             class="absolute top-2 right-2 z-10 inline-flex items-center rounded bg-primary px-2 py-1 text-xs font-semibold text-primary-text shadow-sm transition-opacity duration-150 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
-            @click.stop="openDocument(document)"
+            :to="{ path: '/model/' + currentModel + '/document/' + document._id, query: $route.query }"
+            target="_blank"
+            rel="noopener noreferrer"
+            @click.stop
           >
-            Open this Document
-          </button>
+            Open
+          </router-link>
           <list-json :value="filterDocument(document)" :references="referenceMap">
           </list-json>
         </div>

package/frontend/src/models/models.js

@@ -14,7 +14,6 @@ const limit = 20;
 const DEFAULT_FIRST_N_FIELDS = 6;
 const OUTPUT_TYPE_STORAGE_KEY = 'studio:model-output-type';
 const SELECTED_GEO_FIELD_STORAGE_KEY = 'studio:model-selected-geo-field';
-const PROJECTION_STORAGE_KEY_PREFIX = 'studio:model-projection:';
 const SHOW_ROW_NUMBERS_STORAGE_KEY = 'studio:model-show-row-numbers';
 const PROJECTION_MODE_QUERY_KEY = 'projectionMode';
 const RECENTLY_VIEWED_MODELS_KEY = 'studio:recently-viewed-models';
@@ -262,7 +261,7 @@ module.exports = app => app.component('models', {
   computed: {
     referenceMap() {
       const map = {};
-      for (const path of this.filteredPaths) {
+      for (const path of this.schemaPaths) {
         if (path?.ref) {
           map[path.path] = path.ref;
         }
@@ -627,7 +626,7 @@ module.exports = app => app.component('models', {
       // mount/remount respects deep-linked projections before `filteredPaths`
       // is rehydrated from schema paths.
       let fieldsParam = normalizeFieldsParamForApi(this.query?.fields);
-      if (!fieldsParam) {
+      if (!fieldsParam && this.isProjectionMenuSelected === true) {
         const fieldPaths = this.filteredPaths && this.filteredPaths.length > 0
           ? this.filteredPaths.map(p => p.path).filter(Boolean)
           : null;
@@ -678,7 +677,6 @@ module.exports = app => app.component('models', {
           this.filteredPaths = urlPaths.map(path => this.schemaPaths.find(p => p.path === path)).filter(Boolean);
           if (this.filteredPaths.length > 0) {
             this.syncProjectionFromPaths();
-            this.saveProjectionPreference();
           }
         }
       }
@@ -827,6 +825,10 @@ module.exports = app => app.component('models', {
         }
       } else {
         delete this.query[PROJECTION_MODE_QUERY_KEY];
+        delete this.query.fields;
+        this.filteredPaths = [];
+        this.selectedPaths = [];
+        this.projectionText = '';
       }
 
       this.$router.push({ query: this.query });
@@ -966,34 +968,13 @@ module.exports = app => app.component('models', {
             for (const { path } of this.schemaPaths) {
               this.shouldExport[path] = true;
             }
-            const shouldUseSavedProjection = this.isProjectionMenuSelected === true;
-            const savedPaths = shouldUseSavedProjection ? this.loadProjectionPreference() : null;
-            if (savedPaths === null) {
+            const isProjectionModeOn = this.isProjectionMenuSelected === true;
+            if (isProjectionModeOn) {
               this.applyDefaultProjection(event.suggestedFields);
-              if (shouldUseSavedProjection) {
-                this.saveProjectionPreference();
-              }
-            } else if (Array.isArray(savedPaths) && savedPaths.length === 0) {
+            } else {
               this.filteredPaths = [];
+              this.selectedPaths = [];
               this.projectionText = '';
-              if (shouldUseSavedProjection) {
-                this.saveProjectionPreference();
-              }
-            } else if (savedPaths && savedPaths.length > 0) {
-              this.filteredPaths = savedPaths
-                .map(path => this.schemaPaths.find(p => p.path === path))
-                .filter(Boolean);
-              if (this.filteredPaths.length === 0) {
-                this.applyDefaultProjection(event.suggestedFields);
-                if (shouldUseSavedProjection) {
-                  this.saveProjectionPreference();
-                }
-              }
-            } else {
-              this.applyDefaultProjection(event.suggestedFields);
-              if (shouldUseSavedProjection) {
-                this.saveProjectionPreference();
-              }
             }
             this.selectedPaths = [...this.filteredPaths];
             this.syncProjectionFromPaths();
@@ -1073,36 +1054,6 @@ module.exports = app => app.component('models', {
         this.filteredPaths = this.schemaPaths.filter(p => p.path === '_id');
       }
     },
-    loadProjectionPreference() {
-      if (typeof window === 'undefined' || !window.localStorage || !this.currentModel) {
-        return null;
-      }
-      const key = PROJECTION_STORAGE_KEY_PREFIX + this.currentModel;
-      const stored = window.localStorage.getItem(key);
-      if (stored === null || stored === undefined) {
-        return null;
-      }
-      if (stored === '') {
-        return [];
-      }
-      try {
-        const parsed = JSON.parse(stored);
-        if (Array.isArray(parsed)) {
-          return parsed.map(x => String(x).trim()).filter(Boolean);
-        }
-      } catch (e) {
-        return null;
-      }
-      return null;
-    },
-    saveProjectionPreference() {
-      if (typeof window === 'undefined' || !window.localStorage || !this.currentModel) {
-        return;
-      }
-      const key = PROJECTION_STORAGE_KEY_PREFIX + this.currentModel;
-      const paths = this.filteredPaths.map(p => p.path);
-      window.localStorage.setItem(key, JSON.stringify(paths));
-    },
     clearProjection() {
       // Keep current filter input in sync with the URL so projection reset
       // does not unintentionally wipe the filter on remount.
@@ -1111,7 +1062,6 @@ module.exports = app => app.component('models', {
       this.selectedPaths = [];
       this.projectionText = '';
       this.updateProjectionQuery();
-      this.saveProjectionPreference();
     },
     resetFilter() {
       // Reuse the existing "apply filter + update URL" flow.
@@ -1131,7 +1081,6 @@ module.exports = app => app.component('models', {
       this.selectedPaths = [...this.filteredPaths];
       this.syncProjectionFromPaths();
       this.updateProjectionQuery();
-      this.saveProjectionPreference();
     },
     initProjection(ev) {
       if (!this.projectionText || !this.projectionText.trim()) {
@@ -1240,7 +1189,6 @@ module.exports = app => app.component('models', {
       this.selectedPaths = [...this.filteredPaths];
       this.syncProjectionFromPaths();
       this.updateProjectionQuery();
-      this.saveProjectionPreference();
     },
     updateProjectionQuery() {
       const paths = this.filteredPaths.map(x => x.path).filter(Boolean);
@@ -1270,7 +1218,6 @@ module.exports = app => app.component('models', {
         }
         this.syncProjectionFromPaths();
         this.updateProjectionQuery();
-        this.saveProjectionPreference();
       }
     },
     addField(schemaPath) {
@@ -1292,7 +1239,6 @@ module.exports = app => app.component('models', {
         });
         this.syncProjectionFromPaths();
         this.updateProjectionQuery();
-        this.saveProjectionPreference();
         this.showAddFieldDropdown = false;
         this.addFieldFilterText = '';
       }

package/frontend/src/navbar/navbar.html

@@ -42,7 +42,8 @@
       </svg>
     </span>
     <a
-      :href="hasTaskVisualizer"
+      v-if="hasTaskVisualizer"
+      href="#/tasks"
       class="inline-flex items-center px-1 border-b-2 text-sm font-medium"
       :class="taskView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'">
       Tasks
@@ -210,6 +211,10 @@
           <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="hasTaskVisualizer"
+        href="#/tasks"
+        class="block px-3 py-2 rounded-md text-base font-medium"
+        :class="taskView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'">Tasks</a>
       <div v-if="!user && hasAPIKey" class="mt-4">
         <button
           type="button"

package/frontend/src/navbar/navbar.js

@@ -67,12 +67,7 @@ module.exports = app => app.component('navbar', {
       return this.roles && this.roles[0] === 'dashboards' ? 'dashboards' : 'root';
     },
     hasTaskVisualizer() {
-      if (window.MONGOOSE_STUDIO_CONFIG.enableTaskVisualizer) {
-        return '#/tasks';
-      } else {
-        return 'https://www.npmjs.com/package/@mongoosejs/task';
-      }
-
+      return !!window.MONGOOSE_STUDIO_CONFIG.enableTaskVisualizer;
     }
   },
   methods: {

package/frontend/src/pro-upgrade-modal/pro-upgrade-modal.html

@@ -0,0 +1,38 @@
+<modal v-if="show" containerClass="!max-w-md">
+  <template v-slot:body>
+    <div @keydown.esc="$emit('close')" tabindex="0" ref="overlay">
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="text-lg font-semibold text-gray-900">Pro Feature</h3>
+        <button
+          type="button"
+          @click="$emit('close')"
+          class="text-gray-400 hover:text-gray-600 cursor-pointer"
+          aria-label="Close"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <p class="text-gray-600 mb-6">
+        {{ featureDescription }} Upgrade to a Pro workspace to unlock this feature.
+      </p>
+      <div class="flex justify-end gap-3">
+        <button
+          type="button"
+          @click="$emit('close')"
+          class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 cursor-pointer"
+        >
+          Cancel
+        </button>
+        <a
+          href="https://studio.mongoosejs.io/pro"
+          target="_blank"
+          class="px-4 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary-hover inline-flex items-center"
+        >
+          Upgrade to Pro
+        </a>
+      </div>
+    </div>
+  </template>
+</modal>

package/frontend/src/pro-upgrade-modal/pro-upgrade-modal.js

@@ -0,0 +1,23 @@
+'use strict';
+
+const template = require('./pro-upgrade-modal.html');
+
+module.exports = app => app.component('pro-upgrade-modal', {
+  template,
+  props: {
+    show: { type: Boolean, default: false },
+    featureDescription: { type: String, default: 'This feature is available on the Pro plan.' }
+  },
+  emits: ['close'],
+  watch: {
+    show(val) {
+      if (val) {
+        this.$nextTick(() => {
+          if (this.$refs.overlay) {
+            this.$refs.overlay.focus();
+          }
+        });
+      }
+    }
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {
@@ -25,6 +25,7 @@
     "vue": "3.x",
     "vue-toastification": "^2.0.0-rc.5",
     "webpack": "5.x",
+    "time-commando": "1.0.1",
     "xss": "^1.0.15"
   },
   "peerDependencies": {