@mongoosejs/studio 0.1.20 → 0.2.0

package/frontend/public/index.html

@@ -5,7 +5,7 @@
     <meta content="width=device-width, initial-scale=1" name="viewport">
     <meta name="msapplication-TileColor" />
     <meta name="theme-color" content="#ffffff"/>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter"/>
     <link rel="stylesheet" type="text/css" href="style.css"/>
     <link rel="stylesheet" href="https://unpkg.com/prismjs@1.29.0/themes/prism.css"/>
     <link rel="stylesheet" href="tw.css">

package/frontend/public/style.css

@@ -2,7 +2,7 @@ body {
   min-height: 100%;
   margin: 0;
   padding: 0;
-  font-family: "Open Sans", Helvetica, Arial, FreeSans, sans-serif;
+  font-family: "Inter", Helvetica, Arial, FreeSans, sans-serif;
 }
 
 a {

package/frontend/public/tw.css

@@ -731,6 +731,11 @@ video {
   margin: 1rem;
 }
 
+.\!my-0 {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
+
 .-mx-4 {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -756,6 +761,11 @@ video {
   margin-right: auto;
 }
 
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -924,6 +934,10 @@ video {
   height: 90vh !important;
 }
 
+.h-10 {
+  height: 2.5rem;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -984,10 +998,6 @@ video {
   height: 100%;
 }
 
-.h-px {
-  height: 1px;
-}
-
 .max-h-40 {
   max-height: 10rem;
 }
@@ -1000,10 +1010,6 @@ video {
   max-height: 50vh;
 }
 
-.max-h-\[6\.5em\] {
-  max-height: 6.5em;
-}
-
 .min-h-0 {
   min-height: 0px;
 }
@@ -1104,8 +1110,8 @@ video {
   max-width: 64rem;
 }
 
-.max-w-\[30em\] {
-  max-width: 30em;
+.max-w-7xl {
+  max-width: 80rem;
 }
 
 .max-w-\[calc\(100vw-3rem\)\] {
@@ -1116,10 +1122,6 @@ video {
   max-width: calc(100vw - 4rem);
 }
 
-.max-w-xs {
-  max-width: 20rem;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1200,6 +1202,10 @@ video {
   animation: spin 1s linear infinite;
 }
 
+.cursor-auto {
+  cursor: auto;
+}
+
 .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1338,12 +1344,6 @@ video {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
-.space-y-6 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
-}
-
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1403,6 +1403,10 @@ video {
   white-space: nowrap;
 }
 
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1543,6 +1547,11 @@ video {
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
 
+.border-slate-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(241 245 249 / var(--tw-border-opacity));
+}
+
 .border-transparent {
   border-color: transparent;
 }
@@ -1557,6 +1566,11 @@ video {
   border-left-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
+.\!bg-zinc-50 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity)) !important;
+}
+
 .bg-amber-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 243 199 / var(--tw-bg-opacity));
@@ -1637,14 +1651,14 @@ video {
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
-.bg-gray-800 {
+.bg-gray-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
-.bg-green-300 {
+.bg-gray-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
 .bg-green-50 {
@@ -1652,29 +1666,19 @@ video {
   background-color: rgb(240 253 244 / var(--tw-bg-opacity));
 }
 
-.bg-green-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
-}
-
 .bg-green-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
-.bg-pink-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 39 119 / var(--tw-bg-opacity));
-}
-
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
 
-.bg-red-300 {
+.bg-red-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
 }
 
 .bg-red-50 {
@@ -1692,6 +1696,16 @@ video {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
+.bg-slate-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
+}
+
+.bg-slate-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+}
+
 .bg-slate-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
@@ -1716,6 +1730,11 @@ video {
   background-color: rgb(229 234 255 / var(--tw-bg-opacity));
 }
 
+.bg-ultramarine-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(206 218 255 / var(--tw-bg-opacity));
+}
+
 .bg-ultramarine-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(24 35 255 / var(--tw-bg-opacity));
@@ -1736,9 +1755,9 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-300 {
+.bg-yellow-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
 }
 
 .bg-opacity-40 {
@@ -1749,6 +1768,10 @@ video {
   --tw-bg-opacity: 0.6;
 }
 
+.p-0 {
+  padding: 0px;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -1910,10 +1933,6 @@ video {
   padding-top: 1rem;
 }
 
-.pt-\[1px\] {
-  padding-top: 1px;
-}
-
 .text-left {
   text-align: left;
 }
@@ -2398,6 +2417,11 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.hover\:border-slate-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity));
+}
+
 .hover\:border-l-blue-600:hover {
   --tw-border-opacity: 1;
   border-left-color: rgb(37 99 235 / var(--tw-border-opacity));
@@ -2463,26 +2487,11 @@ video {
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-green-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-green-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-green-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-green-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-pink-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(252 231 243 / var(--tw-bg-opacity));
@@ -2538,6 +2547,11 @@ video {
   background-color: rgb(206 218 255 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-ultramarine-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 255 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-ultramarine-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(63 83 255 / var(--tw-bg-opacity));
@@ -2588,6 +2602,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.hover\:shadow-sm:hover {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:z-10:focus {
   z-index: 10;
 }
@@ -2663,11 +2683,6 @@ video {
   --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-green-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
-}
-
 .focus\:ring-red-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
@@ -2923,6 +2938,10 @@ video {
     gap: 0.75rem;
   }
 
+  .md\:gap-6 {
+    gap: 1.5rem;
+  }
+
   .md\:px-0 {
     padding-left: 0px;
     padding-right: 0px;

package/frontend/src/_util/document-search-autocomplete.js

@@ -0,0 +1,229 @@
+'use strict';
+
+const { Trie } = require('../models/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'
+];
+
+const VALUE_HELPERS = [
+  'objectIdRange',
+  'ObjectId',
+  'Date',
+  'Math'
+];
+
+// Helpers that are function calls and should have () added
+const FUNCTION_HELPERS = new Set([
+  'objectIdRange',
+  'ObjectId',
+  'Date'
+]);
+
+function buildAutocompleteTrie(schemaPaths) {
+  const trie = new Trie();
+  // Query operators can appear as field names in nested objects, so add with both roles
+  trie.bulkInsert(QUERY_SELECTORS, 5, 'operator');
+  trie.bulkInsert(QUERY_SELECTORS, 5, 'fieldName');
+  trie.bulkInsert(VALUE_HELPERS, 5, 'value');
+  
+  if (Array.isArray(schemaPaths) && schemaPaths.length > 0) {
+    const paths = schemaPaths
+      .map(path => path?.path)
+      .filter(path => typeof path === 'string' && path.length > 0);
+    for (const path of schemaPaths) {
+      if (path.schema) {
+        paths.push(...Object.keys(path.schema).map(subpath => `${path.path}.${subpath}`));
+      }
+    }
+    trie.bulkInsert(paths, 10, 'fieldName');
+  }
+  
+  return trie;
+}
+
+function getAutocompleteContext(searchText, cursorPos) {
+  const before = searchText.slice(0, cursorPos);
+  
+  // Check if we're in a field name context (after { or ,)
+  // This takes precedence over value context to handle cases like { _id: { $gt
+  const fieldMatch = before.match(/(?:\{|,)\s*([^:\s]*)$/);
+  if (fieldMatch) {
+    const token = fieldMatch[1];
+    return {
+      token,
+      role: 'fieldName',
+      startPos: cursorPos - token.length
+    };
+  }
+  
+  // Check if we're in a value context (after a colon)
+  // Match the last colon followed by optional whitespace and capture everything after
+  const valueMatch = before.match(/:\s*([^\s,\}\]:]*)$/);
+  if (valueMatch) {
+    const token = valueMatch[1];
+    return {
+      token,
+      role: 'value',
+      startPos: cursorPos - token.length
+    };
+  }
+  
+  return null;
+}
+
+function getAutocompleteSuggestions(trie, searchText, cursorPos, schemaPaths) {
+  const context = getAutocompleteContext(searchText, cursorPos);
+  
+  if (!context) {
+    return [];
+  }
+  
+  const { token, role } = context;
+  
+  // Extract the actual term without quotes
+  const leadingQuoteMatch = token.match(/^["']/);
+  const trailingQuoteMatch = token.length > 1 && /["']$/.test(token)
+    ? token[token.length - 1]
+    : '';
+  const term = token
+    .replace(/^["']/, '')
+    .replace(trailingQuoteMatch ? new RegExp(`[${trailingQuoteMatch}]$`) : '', '')
+    .trim();
+  
+  if (!term) {
+    return [];
+  }
+  
+  const primarySuggestions = trie.getSuggestions(term, 10, role);
+  const suggestionsSet = new Set(primarySuggestions);
+  
+  // Add schema path suggestions for field names
+  if (role === 'fieldName' && Array.isArray(schemaPaths) && schemaPaths.length > 0) {
+    for (const schemaPath of schemaPaths) {
+      const path = schemaPath?.path;
+      if (
+        typeof path === 'string' &&
+        path.startsWith(`${term}.`) &&
+        !suggestionsSet.has(path)
+      ) {
+        suggestionsSet.add(path);
+        if (suggestionsSet.size >= 10) {
+          break;
+        }
+      }
+    }
+  }
+  
+  let suggestions = Array.from(suggestionsSet);
+  
+  // Preserve quotes if present
+  if (leadingQuoteMatch) {
+    const leadingQuote = leadingQuoteMatch[0];
+    suggestions = suggestions.map(suggestion => `${leadingQuote}${suggestion}`);
+  }
+  if (trailingQuoteMatch) {
+    suggestions = suggestions.map(suggestion =>
+      suggestion.endsWith(trailingQuoteMatch) ? suggestion : `${suggestion}${trailingQuoteMatch}`
+    );
+  }
+  
+  return suggestions;
+}
+
+function applySuggestion(searchText, cursorPos, suggestion) {
+  const before = searchText.slice(0, cursorPos);
+  const after = searchText.slice(cursorPos);
+  
+  // Check if we're in a value context
+  const valueMatch = before.match(/:\s*([^\s,\}\]:]*)$/);
+  if (valueMatch) {
+    const token = valueMatch[1];
+    const start = cursorPos - token.length;
+    let replacement = suggestion;
+    let cursorOffset = replacement.length;
+    
+    // Add parentheses for function helpers and position cursor inside
+    if (FUNCTION_HELPERS.has(suggestion)) {
+      replacement = `${suggestion}()`;
+      cursorOffset = suggestion.length + 1; // Position cursor between ()
+    }
+    
+    return {
+      text: searchText.slice(0, start) + replacement + after,
+      newCursorPos: start + cursorOffset
+    };
+  }
+  
+  // Check if we're in a field name context
+  const fieldMatch = before.match(/(?:\{|,)\s*([^:\s]*)$/);
+  if (fieldMatch) {
+    const token = fieldMatch[1];
+    const start = cursorPos - token.length;
+    let replacement = suggestion;
+    
+    const leadingQuote = token.startsWith('"') || token.startsWith('\'') ? token[0] : '';
+    const trailingQuote = token.length > 1 && (token.endsWith('"') || token.endsWith('\'')) ? token[token.length - 1] : '';
+    const colonNeeded = !/^\s*:/.test(after);
+    
+    // If suggestion already has quotes, use it as-is
+    const suggestionHasQuotes = (suggestion.startsWith('"') || suggestion.startsWith('\'')) &&
+                                (suggestion.endsWith('"') || suggestion.endsWith('\''));
+    if (suggestionHasQuotes) {
+      replacement = suggestion;
+    } else {
+      if (leadingQuote && !replacement.startsWith(leadingQuote)) {
+        replacement = `${leadingQuote}${replacement}`;
+      }
+      if (trailingQuote && !replacement.endsWith(trailingQuote)) {
+        replacement = `${replacement}${trailingQuote}`;
+      }
+    }
+    
+    // Only insert : if we know the user isn't entering in a nested path
+    // If suggestion has full quotes or user typed both quotes, add colon
+    if (colonNeeded && (suggestionHasQuotes || !leadingQuote || trailingQuote)) {
+      replacement = `${replacement}:`;
+    }
+    
+    return {
+      text: searchText.slice(0, start) + replacement + after,
+      newCursorPos: start + replacement.length
+    };
+  }
+  
+  return null;
+}
+
+module.exports = {
+  buildAutocompleteTrie,
+  getAutocompleteContext,
+  getAutocompleteSuggestions,
+  applySuggestion,
+  QUERY_SELECTORS,
+  VALUE_HELPERS,
+  FUNCTION_HELPERS
+};

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

@@ -1,26 +1,28 @@
-<div class="relative border rounded bg-gray-100 text-black text-sm overflow-hidden">
-  <div class="flex border-b pt-[1px] text-xs font-medium bg-gray-200">
+<div class="relative border rounded bg-white my-1 text-black text-sm overflow-hidden">
+  <div class="flex border-b py-1 pl-1 text-xs font-medium bg-white">
     <button
-      class="px-3 py-1 border-r border-gray-300 hover:bg-green-300"
-      :class="{'bg-gray-300': activeTab === 'code', 'bg-green-300': activeTab === 'code'}"
+      class="px-4 py-1 border-r border-gray-300 text-gray-700 font-semibold transition-colors duration-200 focus:outline-none"
+      :class="[
+        'rounded-l-md',
+        activeTab === 'code'
+          ? 'bg-gray-700 text-white shadow'
+          : 'bg-gray-100 hover:bg-gray-200 text-gray-600'
+      ]"
       @click="activeTab = 'code'">
       Code
     </button>
     <button
-      class="px-3 py-1 hover:bg-green-300"
-      :class="{'bg-green-300': activeTab === 'output'}"
+      class="px-4 py-1 text-gray-700 font-semibold transition-colors duration-200 focus:outline-none"
+      :class="[
+        'rounded-r-md',
+        activeTab === 'output'
+          ? 'bg-gray-700 text-white shadow'
+          : 'bg-gray-100 hover:bg-gray-200 text-gray-600'
+      ]"
       @click="activeTab = 'output'">
       Output
     </button>
     <div class="ml-auto mr-1 flex">
-      <button
-        v-if="activeTab === 'output'"
-        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"
-        @click="copyOutput">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <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" />
-        </svg>
-      </button>
       <button
         v-if="activeTab === 'output'"
         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"
@@ -39,9 +41,9 @@
       </button>
       <async-button
         v-if="!isEditing"
-        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"
+        class="px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white border-none rounded cursor-pointer transition-colors disabled:bg-gray-400"
         @click="executeScript">
-        Execute
+        Run
       </async-button>
       <div class="relative ml-1" ref="dropdown">
         <button
@@ -59,6 +61,11 @@
             @click="openCreateDashboardModal(); showDropdown = false">
             Create Dashboard
           </button>
+          <button
+            class="block w-full text-left px-4 py-2 text-xs text-gray-700 hover:bg-gray-100"
+            @click="copyOutput(); showDropdown = false">
+            Copy Output As Text
+          </button>
           <button
             v-if="canOverwriteDashboard"
             class="block w-full text-left px-4 py-2 text-xs text-gray-700 hover:bg-gray-100"
@@ -75,25 +82,25 @@
     </div>
   </div>
 
-  <div class="p-3 max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto" v-show="activeTab === 'code'">
+  <div class="p-0 max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto" v-show="activeTab === 'code'">
     <div v-if="isEditing" class="flex flex-col space-y-2">
       <div class="border border-gray-200">
         <textarea ref="scriptEditor" class="w-full h-[45vh]" @input="handleScriptInput"></textarea>
       </div>
-      <div class="flex justify-end gap-2">
+      <div class="flex justify-end gap-2 pb-2">
         <button
           class="px-2 py-1 text-xs bg-gray-300 text-gray-800 border-none rounded cursor-pointer hover:bg-gray-400 transition-colors"
           @click.stop="cancelEditing">
           Cancel
         </button>
         <async-button
-          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"
+          class="px-2 py-1 text-xs bg-blue-600 text-white border-none rounded cursor-pointer hover:bg-blue-700 transition-colors disabled:bg-gray-400"
           @click="executeScript">
           Execute
         </async-button>
       </div>
     </div>
-    <pre v-else class="whitespace-pre-wrap"><code v-text="script" ref="code" :class="'language-' + language"></code></pre>
+    <pre v-else class="whitespace-pre-wrap !my-0 !bg-zinc-50"><code v-text="script" ref="code" :class="'language-' + language"></code></pre>
   </div>
 
   <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'">