@mongoosejs/studio 0.0.124 → 0.0.125

package/README.md

@@ -34,6 +34,8 @@ If you have a Mongoose Studio Pro API key, you can set it as follows:
 const opts = process.env.MONGOOSE_STUDIO_API_KEY ? { apiKey: process.env.MONGOOSE_STUDIO_API_KEY } : {};
 // Optionally specify which ChatGPT model to use for chat messages
 opts.model = 'gpt-4o-mini';
+// Provide your own OpenAI API key to run chat completions locally
+opts.openAIAPIKey = process.env.OPENAI_API_KEY;
 
 // Mount Mongoose Studio on '/studio'
 app.use('/studio', await studio('/studio/api', mongoose, opts));
@@ -52,7 +54,9 @@ const { execSync } = require('child_process');
 const opts = {
   apiKey: process.env.MONGOOSE_STUDIO_API_KEY,
   // Optionally specify which ChatGPT model to use for chat messages
-  model: 'gpt-4o-mini'
+  model: 'gpt-4o-mini',
+  // Provide your own OpenAI API key to run chat completions locally
+  openAIAPIKey: process.env.OPENAI_API_KEY
 };
 console.log('Creating Mongoose studio', opts);
 require('@mongoosejs/studio/frontend')(`/.netlify/functions/studio`, true, opts).then(() => {
@@ -70,7 +74,8 @@ const mongoose = require('mongoose');
 
 const handler = require('@mongoosejs/studio/backend/netlify')({
   apiKey: process.env.MONGOOSE_STUDIO_API_KEY,
-  model: 'gpt-4o-mini'
+  model: 'gpt-4o-mini',
+  openAIAPIKey: process.env.OPENAI_API_KEY
 }).handler;
 
 let conn = null;

package/backend/actions/ChatThread/createChatMessage.js

@@ -48,7 +48,7 @@ module.exports = ({ db, studioConnection, options }) => async function createCha
 
   let summarizePromise = Promise.resolve();
   if (chatThread.title == null) {
-    summarizePromise = summarizeChatThread(llmMessages, authorization).then(res => {
+    summarizePromise = summarizeChatThread(llmMessages, authorization, options).then(res => {
       const title = res.response;
       chatThread.title = title;
       return chatThread.save();
@@ -73,7 +73,7 @@ module.exports = ({ db, studioConnection, options }) => async function createCha
       script,
       executionResult: null
     }),
-    createChatMessageCore(llmMessages, modelDescriptions, options?.model, authorization).then(res => {
+    createChatMessageCore(llmMessages, modelDescriptions, options?.model, authorization, options).then(res => {
       const content = res.response;
       return ChatMessage.create({
         chatThreadId,
@@ -87,7 +87,23 @@ module.exports = ({ db, studioConnection, options }) => async function createCha
   return { chatMessages, chatThread };
 };
 
-async function summarizeChatThread(messages, authorization) {
+async function summarizeChatThread(messages, authorization, options) {
+  if (options?.openAIAPIKey) {
+    const response = await callOpenAI({
+      apiKey: options.openAIAPIKey,
+      model: options.model,
+      messages: [
+        {
+          role: 'system',
+          content: 'Summarize the following conversation into a concise title of at most 7 words. Respond with the title only.'
+        },
+        ...messages
+      ]
+    });
+
+    return { response };
+  }
+
   const headers = { 'Content-Type': 'application/json' };
   if (authorization) {
     headers.Authorization = authorization;
@@ -110,7 +126,26 @@ async function summarizeChatThread(messages, authorization) {
   return await response.json();
 }
 
-async function createChatMessageCore(messages, modelDescriptions, model, authorization) {
+async function createChatMessageCore(messages, modelDescriptions, model, authorization, options) {
+  if (options?.openAIAPIKey) {
+    const openAIMessages = [];
+    if (modelDescriptions) {
+      openAIMessages.push({
+        role: 'system',
+        content: `Here are the Mongoose model descriptions you can refer to:\n\n${modelDescriptions}`
+      });
+    }
+    openAIMessages.push(...messages);
+
+    const response = await callOpenAI({
+      apiKey: options.openAIAPIKey,
+      model,
+      messages: openAIMessages
+    });
+
+    return { response };
+  }
+
   const headers = { 'Content-Type': 'application/json' };
   if (authorization) {
     headers.Authorization = authorization;
@@ -134,3 +169,34 @@ async function createChatMessageCore(messages, modelDescriptions, model, authori
 
   return await response.json();
 }
+
+async function callOpenAI({ apiKey, model, messages }) {
+  if (!apiKey) {
+    throw new Error('OpenAI API key required');
+  }
+
+  const response = await fetch('https://api.openai.com/v1/chat/completions', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${apiKey}`
+    },
+    body: JSON.stringify({
+      model: model || 'gpt-4o-mini',
+      messages
+    })
+  });
+
+  const data = await response.json();
+
+  if (response.status < 200 || response.status >= 400) {
+    throw new Error(`OpenAI chat completion error ${response.status}: ${data.error?.message || data.message || 'Unknown error'}`);
+  }
+
+  const content = data?.choices?.[0]?.message?.content;
+  if (!content) {
+    throw new Error('OpenAI chat completion error: missing response content');
+  }
+
+  return content.trim();
+}

package/frontend/public/app.js

@@ -2607,6 +2607,34 @@ const template = __webpack_require__(/*! ./models.html */ "./frontend/src/models
 const mpath = __webpack_require__(/*! mpath */ "./node_modules/mpath/index.js");
 
 const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/appendCSS.js");
+const { Trie } = __webpack_require__(/*! ./trie */ "./frontend/src/models/trie.js");
+
+const QUERY_SELECTORS = [
+  '$eq',
+  '$ne',
+  '$gt',
+  '$gte',
+  '$lt',
+  '$lte',
+  '$in',
+  '$nin',
+  '$exists',
+  '$regex',
+  '$options',
+  '$text',
+  '$search',
+  '$and',
+  '$or',
+  '$nor',
+  '$not',
+  '$elemMatch',
+  '$size',
+  '$all',
+  '$type',
+  '$expr',
+  '$jsonSchema',
+  '$mod'
+];
 
 
 appendCSS(__webpack_require__(/*! ./models.css */ "./frontend/src/models/models.css"));
@@ -2633,6 +2661,9 @@ module.exports = app => app.component('models', {
     selectMultiple: false,
     selectedDocuments: [],
     searchText: '',
+    autocompleteSuggestions: [],
+    autocompleteIndex: 0,
+    autocompleteTrie: null,
     shouldShowExportModal: false,
     shouldShowCreateModal: false,
     shouldShowFieldModal: false,
@@ -2645,10 +2676,12 @@ module.exports = app => app.component('models', {
     scrollHeight: 0,
     interval: null,
     outputType: 'table', // json, table
-    hideSidebar: null
+    hideSidebar: null,
+    lastSelectedIndex: null
   }),
   created() {
     this.currentModel = this.model;
+    this.buildAutocompleteTrie();
   },
   beforeDestroy() {
     document.removeEventListener('scroll', this.onScroll, true);
@@ -2667,6 +2700,16 @@ module.exports = app => app.component('models', {
     await this.initSearchFromUrl();
   },
   methods: {
+    buildAutocompleteTrie() {
+      this.autocompleteTrie = new Trie();
+      this.autocompleteTrie.bulkInsert(QUERY_SELECTORS, 5);
+      if (Array.isArray(this.schemaPaths) && this.schemaPaths.length > 0) {
+        const paths = this.schemaPaths
+          .map(path => path?.path)
+          .filter(path => typeof path === 'string' && path.length > 0);
+        this.autocompleteTrie.bulkInsert(paths, 10);
+      }
+    },
     async initSearchFromUrl() {
       this.status = 'loading';
       this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
@@ -2704,6 +2747,62 @@ module.exports = app => app.component('models', {
         });
       }
     },
+    updateAutocomplete() {
+      const input = this.$refs.searchInput;
+      const cursorPos = input ? input.selectionStart : 0;
+      const before = this.searchText.slice(0, cursorPos);
+      const match = before.match(/(?:\{|,)\s*([^:\s]*)$/);
+      if (match && match[1]) {
+        const term = match[1].replace(/["']/g, '');
+        if (!term) {
+          this.autocompleteSuggestions = [];
+          return;
+        }
+        if (this.autocompleteTrie) {
+          this.autocompleteSuggestions = this.autocompleteTrie.getSuggestions(term, 10);
+          this.autocompleteIndex = 0;
+          return;
+        }
+      }
+      this.autocompleteSuggestions = [];
+    },
+    handleKeyDown(ev) {
+      if (this.autocompleteSuggestions.length === 0) {
+        return;
+      }
+      if (ev.key === 'Tab' || ev.key === 'Enter') {
+        ev.preventDefault();
+        this.applySuggestion(this.autocompleteIndex);
+      } else if (ev.key === 'ArrowDown') {
+        ev.preventDefault();
+        this.autocompleteIndex = (this.autocompleteIndex + 1) % this.autocompleteSuggestions.length;
+      } else if (ev.key === 'ArrowUp') {
+        ev.preventDefault();
+        this.autocompleteIndex = (this.autocompleteIndex + this.autocompleteSuggestions.length - 1) % this.autocompleteSuggestions.length;
+      }
+    },
+    applySuggestion(index) {
+      const suggestion = this.autocompleteSuggestions[index];
+      if (!suggestion) {
+        return;
+      }
+      const input = this.$refs.searchInput;
+      const cursorPos = input.selectionStart;
+      const before = this.searchText.slice(0, cursorPos);
+      const after = this.searchText.slice(cursorPos);
+      const match = before.match(/(?:\{|,)\s*([^:\s]*)$/);
+      if (!match) {
+        return;
+      }
+      const token = match[1];
+      const start = cursorPos - token.length;
+      this.searchText = this.searchText.slice(0, start) + suggestion + after;
+      this.$nextTick(() => {
+        const pos = start + suggestion.length;
+        input.setSelectionRange(pos, pos);
+      });
+      this.autocompleteSuggestions = [];
+    },
     clickFilter(path) {
       if (this.searchText) {
         if (this.searchText.endsWith('}')) {
@@ -2816,8 +2915,10 @@ module.exports = app => app.component('models', {
       // Clear previous data
       this.documents = [];
       this.schemaPaths = [];
+      this.buildAutocompleteTrie();
       this.numDocuments = null;
       this.loadedAllDocs = false;
+      this.lastSelectedIndex = null;
 
       let docsCount = 0;
       let schemaPathsReceived = false;
@@ -2849,6 +2950,7 @@ module.exports = app => app.component('models', {
           }
           this.filteredPaths = [...this.schemaPaths];
           this.selectedPaths = [...this.schemaPaths];
+          this.buildAutocompleteTrie();
           schemaPathsReceived = true;
         }
         if (event.numDocs !== undefined) {
@@ -2991,17 +3093,38 @@ module.exports = app => app.component('models', {
       }
       this.edittingDoc = null;
     },
-    handleDocumentClick(document) {
-      console.log(this.selectedDocuments);
+    handleDocumentClick(document, event) {
       if (this.selectMultiple) {
-        const exists = this.selectedDocuments.find(x => x._id.toString() == document._id.toString());
-        if (exists) {
-          const index = this.selectedDocuments.findIndex(x => x._id.toString() == document._id.toString());
-          if (index !== -1) {
-            this.selectedDocuments.splice(index, 1);
+        const documentIndex = this.documents.findIndex(doc => doc._id.toString() == document._id.toString());
+        if (event?.shiftKey && this.selectedDocuments.length > 0) {
+          const anchorIndex = this.lastSelectedIndex;
+          if (anchorIndex != null && anchorIndex !== -1 && documentIndex !== -1) {
+            const start = Math.min(anchorIndex, documentIndex);
+            const end = Math.max(anchorIndex, documentIndex);
+            const selectedDocumentIds = new Set(this.selectedDocuments.map(doc => doc._id.toString()));
+            for (let i = start; i <= end; i++) {
+              const docInRange = this.documents[i];
+              const existsInRange = selectedDocumentIds.has(docInRange._id.toString());
+              if (!existsInRange) {
+                this.selectedDocuments.push(docInRange);
+              }
+            }
+            this.lastSelectedIndex = documentIndex;
+            return;
+          }
+        }
+        const index = this.selectedDocuments.findIndex(x => x._id.toString() == document._id.toString());
+        if (index !== -1) {
+          this.selectedDocuments.splice(index, 1);
+          if (this.selectedDocuments.length === 0) {
+            this.lastSelectedIndex = null;
+          } else {
+            const lastDoc = this.selectedDocuments[this.selectedDocuments.length - 1];
+            this.lastSelectedIndex = this.documents.findIndex(doc => doc._id.toString() == lastDoc._id.toString());
           }
         } else {
           this.selectedDocuments.push(document);
+          this.lastSelectedIndex = documentIndex;
         }
       } else {
         this.$router.push('/model/' + this.currentModel + '/document/' + document._id);
@@ -3015,18 +3138,21 @@ module.exports = app => app.component('models', {
       });
       await this.getDocuments();
       this.selectedDocuments.length = 0;
+      this.lastSelectedIndex = null;
       this.shouldShowDeleteMultipleModal = false;
       this.selectMultiple = false;
     },
     async updateDocuments() {
       await this.getDocuments();
       this.selectedDocuments.length = 0;
+      this.lastSelectedIndex = null;
       this.selectMultiple = false;
     },
     stagingSelect() {
       if (this.selectMultiple) {
         this.selectMultiple = false;
         this.selectedDocuments.length = 0;
+        this.lastSelectedIndex = null;
       } else {
         this.selectMultiple = true;
       }
@@ -3035,6 +3161,134 @@ module.exports = app => app.component('models', {
 });
 
 
+/***/ }),
+
+/***/ "./frontend/src/models/trie.js":
+/*!*************************************!*\
+  !*** ./frontend/src/models/trie.js ***!
+  \*************************************/
+/***/ ((module) => {
+
+"use strict";
+
+
+class TrieNode {
+  constructor() {
+    this.children = Object.create(null);
+    this.isEnd = false;
+    this.freq = 0;
+  }
+}
+
+class Trie {
+  constructor() {
+    this.root = new TrieNode();
+  }
+
+  insert(word, freq = 1) {
+    if (!word) {
+      return;
+    }
+    let node = this.root;
+    for (const ch of word) {
+      if (!node.children[ch]) {
+        node.children[ch] = new TrieNode();
+      }
+      node = node.children[ch];
+    }
+    node.isEnd = true;
+    node.freq += freq;
+  }
+
+  bulkInsert(words, freq = 1) {
+    if (!Array.isArray(words)) {
+      return;
+    }
+    for (const word of words) {
+      this.insert(word, freq);
+    }
+  }
+
+  collect(node, prefix, out) {
+    if (node.isEnd) {
+      out.push([prefix, node.freq]);
+    }
+    for (const [ch, child] of Object.entries(node.children)) {
+      this.collect(child, prefix + ch, out);
+    }
+  }
+
+  suggest(prefix, limit = 10) {
+    let node = this.root;
+    for (const ch of prefix) {
+      if (!node.children[ch]) {
+        return [];
+      }
+      node = node.children[ch];
+    }
+    const results = [];
+    this.collect(node, prefix, results);
+    results.sort((a, b) => b[1] - a[1]);
+    return results.slice(0, limit).map(([word]) => word);
+  }
+
+  fuzzySuggest(prefix, limit = 10) {
+    const results = new Set();
+
+    const dfs = (node, path, edits) => {
+      if (edits > 1) {
+        return;
+      }
+      if (node.isEnd && Math.abs(path.length - prefix.length) <= 1) {
+        const dist = levenshtein(prefix, path);
+        if (dist <= 1) {
+          results.add(path);
+        }
+      }
+      for (const [ch, child] of Object.entries(node.children)) {
+        const nextEdits = ch === prefix[path.length] ? edits : edits + 1;
+        dfs(child, path + ch, nextEdits);
+      }
+    };
+
+    dfs(this.root, '', 0);
+    return Array.from(results).slice(0, limit);
+  }
+
+  getSuggestions(prefix, limit = 10) {
+    if (!prefix) {
+      return [];
+    }
+    const exact = this.suggest(prefix, limit);
+    if (exact.length >= limit) {
+      return exact;
+    }
+    const fuzzy = this.fuzzySuggest(prefix, limit - exact.length);
+    return [...exact, ...fuzzy];
+  }
+}
+
+function levenshtein(a, b) {
+  const dp = Array.from({ length: a.length + 1 }, (_, i) =>
+    Array.from({ length: b.length + 1 }, (_, j) => (i === 0 ? j : j === 0 ? i : 0))
+  );
+  for (let i = 1; i <= a.length; i++) {
+    for (let j = 1; j <= b.length; j++) {
+      dp[i][j] =
+        a[i - 1] === b[j - 1]
+          ? dp[i - 1][j - 1]
+          : 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
+    }
+  }
+  return dp[a.length][b.length];
+}
+
+module.exports = {
+  Trie,
+  TrieNode
+};
+
+
 /***/ }),
 
 /***/ "./frontend/src/mothership.js":
@@ -3669,6 +3923,8 @@ var map = {
 	"./models/models.css": "./frontend/src/models/models.css",
 	"./models/models.html": "./frontend/src/models/models.html",
 	"./models/models.js": "./frontend/src/models/models.js",
+	"./models/trie": "./frontend/src/models/trie.js",
+	"./models/trie.js": "./frontend/src/models/trie.js",
 	"./mothership": "./frontend/src/mothership.js",
 	"./mothership.js": "./frontend/src/mothership.js",
 	"./navbar/navbar": "./frontend/src/navbar/navbar.js",
@@ -4893,7 +5149,7 @@ module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-dir
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"models flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 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  <aside class=\"bg-white border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-48 fixed lg:relative shrink-0\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-48' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-48 overflow-x-hidden\">\n      <div class=\"p-4 font-bold text-lg\">Models</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    <nav class=\"flex flex-1 flex-col\">\n      <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n        <li>\n          <ul role=\"list\">\n            <li v-for=\"model in models\">\n              <router-link\n                :to=\"'/model/' + model\"\n                class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n                {{model}}\n              </router-link>\n            </li>\n          </ul>\n        </li>\n      </ul>\n    </nav>\n  </aside>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px]\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"flex-grow m-0\">\n            <input ref=\"searchInput\" class=\"w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none\" type=\"text\" placeholder=\"Filter\" v-model=\"searchText\" @click=\"initFilter\" />\n          </form>\n          <div>\n            <span v-if=\"numDocuments == null\">Loading ...</span>\n            <span v-else-if=\"typeof numDocuments === 'number'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Export\n          </button>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{ 'bg-ultramarine-500 ring-inset ring-2 ring-gray-300 hover:bg-ultramarine-600': selectMultiple }\"\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          >\n            Select\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\"\n            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500\"\n            >\n            Delete\n          </button>\n          <button\n            @click=\"openIndexModal\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Indexes\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Create\n          </button>\n          <button\n            @click=\"openFieldSelection\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"outputType = 'table'\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"outputType = 'json'\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <table v-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\" @click=\"clickFilter(path.path)\" class=\"cursor-pointer\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"handleDocumentClick(document)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"outputType === 'json'\">\n        <div v-for=\"document in documents\" @click=\"handleDocumentClick(document)\" :key=\"document._id\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n          <list-json :value=\"filterDocument(document)\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :search-text=\"searchText\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold\">{{ index.name }}</div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <async-button\n              type=\"button\"\n              @click=\"dropIndex(index.name)\"\n              class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </async-button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"button\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 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-teal-600\">Filter Selection</button>\n        <button type=\"button\" @click=\"selectAll()\" class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">Select All</button>\n        <button type=\"button\" @click=\"deselectAll()\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">Deselect All</button>\n        <button type=\"button\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"models flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 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  <aside class=\"bg-white border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-48 fixed lg:relative shrink-0\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-48' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-48 overflow-x-hidden\">\n      <div class=\"p-4 font-bold text-lg\">Models</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    <nav class=\"flex flex-1 flex-col\">\n      <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n        <li>\n          <ul role=\"list\">\n            <li v-for=\"model in models\">\n              <router-link\n                :to=\"'/model/' + model\"\n                class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n                {{model}}\n              </router-link>\n            </li>\n          </ul>\n        </li>\n      </ul>\n    </nav>\n  </aside>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px] z-10\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"relative flex-grow m-0\">\n            <input ref=\"searchInput\" class=\"w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none\" type=\"text\" placeholder=\"Filter\" v-model=\"searchText\" @click=\"initFilter\" @input=\"updateAutocomplete\" @keydown=\"handleKeyDown\" />\n            <ul v-if=\"autocompleteSuggestions.length\" class=\"absolute z-[9999] bg-white border border-gray-300 rounded mt-1 w-full max-h-40 overflow-y-auto shadow\">\n              <li v-for=\"(suggestion, index) in autocompleteSuggestions\" :key=\"suggestion\" class=\"px-2 py-1 cursor-pointer\" :class=\"{ 'bg-ultramarine-100': index === autocompleteIndex }\" @mousedown.prevent=\"applySuggestion(index)\">{{ suggestion }}</li>\n            </ul>\n          </form>\n          <div>\n            <span v-if=\"numDocuments == null\">Loading ...</span>\n            <span v-else-if=\"typeof numDocuments === 'number'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Export\n          </button>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{ 'bg-gray-500 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-ultramarine-600 hover:bg-ultramarine-500' : !selectMultiple }\"\n            class=\"rounded px-2 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n          >\n            {{ selectMultiple ? 'Cancel' : 'Select' }}\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\"\n            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500\"\n            >\n            Delete\n          </button>\n          <button\n            @click=\"openIndexModal\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Indexes\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Create\n          </button>\n          <button\n            @click=\"openFieldSelection\"\n            type=\"button\"\n            v-show=\"!selectMultiple\"\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            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"outputType = 'table'\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"outputType = 'json'\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <table v-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\" @click=\"clickFilter(path.path)\" class=\"cursor-pointer\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"handleDocumentClick(document, $event)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"outputType === 'json'\">\n        <div v-for=\"document in documents\" @click=\"handleDocumentClick(document, $event)\" :key=\"document._id\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n          <list-json :value=\"filterDocument(document)\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :search-text=\"searchText\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold\">{{ index.name }}</div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <async-button\n              type=\"button\"\n              @click=\"dropIndex(index.name)\"\n              class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </async-button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"button\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 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-teal-600\">Filter Selection</button>\n        <button type=\"button\" @click=\"selectAll()\" class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">Select All</button>\n        <button type=\"button\" @click=\"deselectAll()\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">Deselect All</button>\n        <button type=\"button\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -15011,7 +15267,7 @@ var bson = /*#__PURE__*/Object.freeze({
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.124","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":{"type":"git","url":"https://github.com/mongoosejs/studio"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.1.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.125","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":{"type":"git","url":"https://github.com/mongoosejs/studio"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.1.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
 
 /***/ })
 

package/frontend/public/tw.css

@@ -662,6 +662,10 @@ video {
   z-index: 50;
 }
 
+.z-\[9999\] {
+  z-index: 9999;
+}
+
 .col-start-1 {
   grid-column-start: 1;
 }
@@ -902,6 +906,10 @@ video {
   height: 1px;
 }
 
+.max-h-40 {
+  max-height: 10rem;
+}
+
 .max-h-\[50vh\] {
   max-height: 50vh;
 }
@@ -1474,11 +1482,6 @@ video {
   background-color: rgb(229 234 255 / var(--tw-bg-opacity));
 }
 
-.bg-ultramarine-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(63 83 255 / var(--tw-bg-opacity));
-}
-
 .bg-ultramarine-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(24 35 255 / var(--tw-bg-opacity));
@@ -2086,11 +2089,6 @@ video {
   background-color: rgb(63 83 255 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-ultramarine-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(24 35 255 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-valencia-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(235 126 126 / var(--tw-bg-opacity));

package/frontend/src/models/models.html

@@ -31,11 +31,14 @@
     </nav>
   </aside>
   <div class="documents" ref="documentsList">
-    <div class="relative h-[42px]">
+    <div class="relative h-[42px] z-10">
       <div class="documents-menu">
         <div class="flex flex-row items-center w-full gap-2">
-          <form @submit.prevent="search" class="flex-grow m-0">
-            <input ref="searchInput" class="w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none" type="text" placeholder="Filter" v-model="searchText" @click="initFilter" />
+          <form @submit.prevent="search" class="relative flex-grow m-0">
+            <input ref="searchInput" class="w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none" type="text" placeholder="Filter" v-model="searchText" @click="initFilter" @input="updateAutocomplete" @keydown="handleKeyDown" />
+            <ul v-if="autocompleteSuggestions.length" class="absolute z-[9999] bg-white border border-gray-300 rounded mt-1 w-full max-h-40 overflow-y-auto shadow">
+              <li v-for="(suggestion, index) in autocompleteSuggestions" :key="suggestion" class="px-2 py-1 cursor-pointer" :class="{ 'bg-ultramarine-100': index === autocompleteIndex }" @mousedown.prevent="applySuggestion(index)">{{ suggestion }}</li>
+            </ul>
           </form>
           <div>
             <span v-if="numDocuments == null">Loading ...</span>
@@ -51,10 +54,10 @@
           <button
             @click="stagingSelect"
             type="button"
-            :class="{ 'bg-ultramarine-500 ring-inset ring-2 ring-gray-300 hover:bg-ultramarine-600': selectMultiple }"
-            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"
+            :class="{ 'bg-gray-500 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-ultramarine-600 hover:bg-ultramarine-500' : !selectMultiple }"
+            class="rounded px-2 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600"
           >
-            Select
+            {{ selectMultiple ? 'Cancel' : 'Select' }}
           </button>
           <button
             v-show="selectMultiple"
@@ -125,7 +128,7 @@
           </th>
         </thead>
         <tbody>
-          <tr v-for="document in documents" @click="handleDocumentClick(document)" :key="document._id">
+          <tr v-for="document in documents" @click="handleDocumentClick(document, $event)" :key="document._id">
             <td v-for="schemaPath in filteredPaths" :class="{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }">
               <component
                 :is="getComponentForPath(schemaPath)"
@@ -137,7 +140,7 @@
         </tbody>
       </table>
       <div v-if="outputType === 'json'">
-        <div v-for="document in documents" @click="handleDocumentClick(document)" :key="document._id" :class="{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }">
+        <div v-for="document in documents" @click="handleDocumentClick(document, $event)" :key="document._id" :class="{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }">
           <list-json :value="filterDocument(document)">
           </list-json>
         </div>

package/frontend/src/models/models.js

@@ -5,6 +5,34 @@ const template = require('./models.html');
 const mpath = require('mpath');
 
 const appendCSS = require('../appendCSS');
+const { Trie } = require('./trie');
+
+const QUERY_SELECTORS = [
+  '$eq',
+  '$ne',
+  '$gt',
+  '$gte',
+  '$lt',
+  '$lte',
+  '$in',
+  '$nin',
+  '$exists',
+  '$regex',
+  '$options',
+  '$text',
+  '$search',
+  '$and',
+  '$or',
+  '$nor',
+  '$not',
+  '$elemMatch',
+  '$size',
+  '$all',
+  '$type',
+  '$expr',
+  '$jsonSchema',
+  '$mod'
+];
 
 
 appendCSS(require('./models.css'));
@@ -31,6 +59,9 @@ module.exports = app => app.component('models', {
     selectMultiple: false,
     selectedDocuments: [],
     searchText: '',
+    autocompleteSuggestions: [],
+    autocompleteIndex: 0,
+    autocompleteTrie: null,
     shouldShowExportModal: false,
     shouldShowCreateModal: false,
     shouldShowFieldModal: false,
@@ -43,10 +74,12 @@ module.exports = app => app.component('models', {
     scrollHeight: 0,
     interval: null,
     outputType: 'table', // json, table
-    hideSidebar: null
+    hideSidebar: null,
+    lastSelectedIndex: null
   }),
   created() {
     this.currentModel = this.model;
+    this.buildAutocompleteTrie();
   },
   beforeDestroy() {
     document.removeEventListener('scroll', this.onScroll, true);
@@ -65,6 +98,16 @@ module.exports = app => app.component('models', {
     await this.initSearchFromUrl();
   },
   methods: {
+    buildAutocompleteTrie() {
+      this.autocompleteTrie = new Trie();
+      this.autocompleteTrie.bulkInsert(QUERY_SELECTORS, 5);
+      if (Array.isArray(this.schemaPaths) && this.schemaPaths.length > 0) {
+        const paths = this.schemaPaths
+          .map(path => path?.path)
+          .filter(path => typeof path === 'string' && path.length > 0);
+        this.autocompleteTrie.bulkInsert(paths, 10);
+      }
+    },
     async initSearchFromUrl() {
       this.status = 'loading';
       this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
@@ -102,6 +145,62 @@ module.exports = app => app.component('models', {
         });
       }
     },
+    updateAutocomplete() {
+      const input = this.$refs.searchInput;
+      const cursorPos = input ? input.selectionStart : 0;
+      const before = this.searchText.slice(0, cursorPos);
+      const match = before.match(/(?:\{|,)\s*([^:\s]*)$/);
+      if (match && match[1]) {
+        const term = match[1].replace(/["']/g, '');
+        if (!term) {
+          this.autocompleteSuggestions = [];
+          return;
+        }
+        if (this.autocompleteTrie) {
+          this.autocompleteSuggestions = this.autocompleteTrie.getSuggestions(term, 10);
+          this.autocompleteIndex = 0;
+          return;
+        }
+      }
+      this.autocompleteSuggestions = [];
+    },
+    handleKeyDown(ev) {
+      if (this.autocompleteSuggestions.length === 0) {
+        return;
+      }
+      if (ev.key === 'Tab' || ev.key === 'Enter') {
+        ev.preventDefault();
+        this.applySuggestion(this.autocompleteIndex);
+      } else if (ev.key === 'ArrowDown') {
+        ev.preventDefault();
+        this.autocompleteIndex = (this.autocompleteIndex + 1) % this.autocompleteSuggestions.length;
+      } else if (ev.key === 'ArrowUp') {
+        ev.preventDefault();
+        this.autocompleteIndex = (this.autocompleteIndex + this.autocompleteSuggestions.length - 1) % this.autocompleteSuggestions.length;
+      }
+    },
+    applySuggestion(index) {
+      const suggestion = this.autocompleteSuggestions[index];
+      if (!suggestion) {
+        return;
+      }
+      const input = this.$refs.searchInput;
+      const cursorPos = input.selectionStart;
+      const before = this.searchText.slice(0, cursorPos);
+      const after = this.searchText.slice(cursorPos);
+      const match = before.match(/(?:\{|,)\s*([^:\s]*)$/);
+      if (!match) {
+        return;
+      }
+      const token = match[1];
+      const start = cursorPos - token.length;
+      this.searchText = this.searchText.slice(0, start) + suggestion + after;
+      this.$nextTick(() => {
+        const pos = start + suggestion.length;
+        input.setSelectionRange(pos, pos);
+      });
+      this.autocompleteSuggestions = [];
+    },
     clickFilter(path) {
       if (this.searchText) {
         if (this.searchText.endsWith('}')) {
@@ -214,8 +313,10 @@ module.exports = app => app.component('models', {
       // Clear previous data
       this.documents = [];
       this.schemaPaths = [];
+      this.buildAutocompleteTrie();
       this.numDocuments = null;
       this.loadedAllDocs = false;
+      this.lastSelectedIndex = null;
 
       let docsCount = 0;
       let schemaPathsReceived = false;
@@ -247,6 +348,7 @@ module.exports = app => app.component('models', {
           }
           this.filteredPaths = [...this.schemaPaths];
           this.selectedPaths = [...this.schemaPaths];
+          this.buildAutocompleteTrie();
           schemaPathsReceived = true;
         }
         if (event.numDocs !== undefined) {
@@ -389,17 +491,38 @@ module.exports = app => app.component('models', {
       }
       this.edittingDoc = null;
     },
-    handleDocumentClick(document) {
-      console.log(this.selectedDocuments);
+    handleDocumentClick(document, event) {
       if (this.selectMultiple) {
-        const exists = this.selectedDocuments.find(x => x._id.toString() == document._id.toString());
-        if (exists) {
-          const index = this.selectedDocuments.findIndex(x => x._id.toString() == document._id.toString());
-          if (index !== -1) {
-            this.selectedDocuments.splice(index, 1);
+        const documentIndex = this.documents.findIndex(doc => doc._id.toString() == document._id.toString());
+        if (event?.shiftKey && this.selectedDocuments.length > 0) {
+          const anchorIndex = this.lastSelectedIndex;
+          if (anchorIndex != null && anchorIndex !== -1 && documentIndex !== -1) {
+            const start = Math.min(anchorIndex, documentIndex);
+            const end = Math.max(anchorIndex, documentIndex);
+            const selectedDocumentIds = new Set(this.selectedDocuments.map(doc => doc._id.toString()));
+            for (let i = start; i <= end; i++) {
+              const docInRange = this.documents[i];
+              const existsInRange = selectedDocumentIds.has(docInRange._id.toString());
+              if (!existsInRange) {
+                this.selectedDocuments.push(docInRange);
+              }
+            }
+            this.lastSelectedIndex = documentIndex;
+            return;
+          }
+        }
+        const index = this.selectedDocuments.findIndex(x => x._id.toString() == document._id.toString());
+        if (index !== -1) {
+          this.selectedDocuments.splice(index, 1);
+          if (this.selectedDocuments.length === 0) {
+            this.lastSelectedIndex = null;
+          } else {
+            const lastDoc = this.selectedDocuments[this.selectedDocuments.length - 1];
+            this.lastSelectedIndex = this.documents.findIndex(doc => doc._id.toString() == lastDoc._id.toString());
           }
         } else {
           this.selectedDocuments.push(document);
+          this.lastSelectedIndex = documentIndex;
         }
       } else {
         this.$router.push('/model/' + this.currentModel + '/document/' + document._id);
@@ -413,18 +536,21 @@ module.exports = app => app.component('models', {
       });
       await this.getDocuments();
       this.selectedDocuments.length = 0;
+      this.lastSelectedIndex = null;
       this.shouldShowDeleteMultipleModal = false;
       this.selectMultiple = false;
     },
     async updateDocuments() {
       await this.getDocuments();
       this.selectedDocuments.length = 0;
+      this.lastSelectedIndex = null;
       this.selectMultiple = false;
     },
     stagingSelect() {
       if (this.selectMultiple) {
         this.selectMultiple = false;
         this.selectedDocuments.length = 0;
+        this.lastSelectedIndex = null;
       } else {
         this.selectMultiple = true;
       }

package/frontend/src/models/trie.js

@@ -0,0 +1,117 @@
+'use strict';
+
+class TrieNode {
+  constructor() {
+    this.children = Object.create(null);
+    this.isEnd = false;
+    this.freq = 0;
+  }
+}
+
+class Trie {
+  constructor() {
+    this.root = new TrieNode();
+  }
+
+  insert(word, freq = 1) {
+    if (!word) {
+      return;
+    }
+    let node = this.root;
+    for (const ch of word) {
+      if (!node.children[ch]) {
+        node.children[ch] = new TrieNode();
+      }
+      node = node.children[ch];
+    }
+    node.isEnd = true;
+    node.freq += freq;
+  }
+
+  bulkInsert(words, freq = 1) {
+    if (!Array.isArray(words)) {
+      return;
+    }
+    for (const word of words) {
+      this.insert(word, freq);
+    }
+  }
+
+  collect(node, prefix, out) {
+    if (node.isEnd) {
+      out.push([prefix, node.freq]);
+    }
+    for (const [ch, child] of Object.entries(node.children)) {
+      this.collect(child, prefix + ch, out);
+    }
+  }
+
+  suggest(prefix, limit = 10) {
+    let node = this.root;
+    for (const ch of prefix) {
+      if (!node.children[ch]) {
+        return [];
+      }
+      node = node.children[ch];
+    }
+    const results = [];
+    this.collect(node, prefix, results);
+    results.sort((a, b) => b[1] - a[1]);
+    return results.slice(0, limit).map(([word]) => word);
+  }
+
+  fuzzySuggest(prefix, limit = 10) {
+    const results = new Set();
+
+    const dfs = (node, path, edits) => {
+      if (edits > 1) {
+        return;
+      }
+      if (node.isEnd && Math.abs(path.length - prefix.length) <= 1) {
+        const dist = levenshtein(prefix, path);
+        if (dist <= 1) {
+          results.add(path);
+        }
+      }
+      for (const [ch, child] of Object.entries(node.children)) {
+        const nextEdits = ch === prefix[path.length] ? edits : edits + 1;
+        dfs(child, path + ch, nextEdits);
+      }
+    };
+
+    dfs(this.root, '', 0);
+    return Array.from(results).slice(0, limit);
+  }
+
+  getSuggestions(prefix, limit = 10) {
+    if (!prefix) {
+      return [];
+    }
+    const exact = this.suggest(prefix, limit);
+    if (exact.length >= limit) {
+      return exact;
+    }
+    const fuzzy = this.fuzzySuggest(prefix, limit - exact.length);
+    return [...exact, ...fuzzy];
+  }
+}
+
+function levenshtein(a, b) {
+  const dp = Array.from({ length: a.length + 1 }, (_, i) =>
+    Array.from({ length: b.length + 1 }, (_, j) => (i === 0 ? j : j === 0 ? i : 0))
+  );
+  for (let i = 1; i <= a.length; i++) {
+    for (let j = 1; j <= b.length; j++) {
+      dp[i][j] =
+        a[i - 1] === b[j - 1]
+          ? dp[i - 1][j - 1]
+          : 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
+    }
+  }
+  return dp[a.length][b.length];
+}
+
+module.exports = {
+  Trie,
+  TrieNode
+};

package/package.json

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