@mongoosejs/studio 0.5.0 → 0.5.2

package/frontend/src/models/models.html

@@ -117,7 +117,7 @@
             @click="stagingSelect"
             type="button"
             :class="{
-              'bg-gray-700 ring-inset ring-2 ring-gray-300 hover:bg-gray-200 text-content-secondary': selectMultiple,
+              'bg-gray-700 ring-inset ring-2 ring-gray-300 text-white hover:bg-gray-600': selectMultiple,
               'bg-primary hover:bg-primary-hover text-primary-text': !selectMultiple
             }"
             class="rounded px-2 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
@@ -190,6 +190,13 @@
                 >
                   Find oldest document
                 </button>
+                <button
+                  @click="openDropCollectionModal"
+                  type="button"
+                  class="block w-full px-4 py-2 text-left text-sm text-red-700 hover:bg-red-50"
+                >
+                  Drop Collection
+                </button>
                 <button
                   @click="toggleRowNumbers()"
                   type="button"
@@ -404,8 +411,10 @@
                 v-for="(document, docIndex) in documents"
                 :key="document._id"
                 @click="handleDocumentClick(document, $event)"
-                class="border-b border-edge cursor-pointer transition-colors hover:bg-muted/60"
-                :class="{ 'bg-primary-subtle/50 hover:bg-primary-subtle/70': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }"
+                class="border-b border-edge cursor-pointer transition-colors"
+                :class="selectedDocuments.some(x => x._id.toString() === document._id.toString())
+                  ? 'bg-blue-200'
+                  : 'hover:bg-muted'"
               >
                 <td v-if="showRowNumbers" class="px-3 py-2 border-r border-edge align-top text-content-tertiary whitespace-nowrap">
                   {{ docIndex + 1 }}
@@ -448,13 +457,13 @@
           No documents to show. Use Projection in the menu to choose columns.
         </p>
       </div>
-      <div v-else-if="outputType === 'json'" class="flex flex-col space-y-2 p-1 mt-1">
+      <div v-else-if="outputType === 'json'" class="flex min-w-0 flex-col space-y-2 p-1 mt-1">
         <div
           v-for="document in documents"
           :key="document._id"
           @click="handleDocumentContainerClick(document, $event)"
           :class="[
-            'group relative transition-colors rounded-md border border-slate-100',
+            'group relative min-w-0 max-w-full transition-colors rounded-md border border-slate-100',
             selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:shadow-sm hover:border-slate-300 bg-surface'
           ]"
         >
@@ -609,6 +618,37 @@
       </div>
     </template>
   </modal>
+  <modal v-if="shouldShowDropCollectionModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="shouldShowDropCollectionModal = false">&times;</div>
+      <h2 class="text-xl font-bold mb-3">Are you sure?</h2>
+      <p class="text-content-secondary mb-3">
+        This will permanently drop the <span class="font-semibold">{{ currentModel }}</span> collection and all its documents.
+      </p>
+      <div v-if="requiresDropCollectionNameConfirmation()" class="rounded border border-red-300 bg-red-50 px-3 py-2 mb-4">
+        <p class="text-sm font-semibold text-red-700">Danger zone</p>
+        <p class="text-sm text-red-700 mb-2">Type <span class="font-mono font-semibold">{{ currentModel }}</span> to confirm.</p>
+        <input
+          v-model="dropCollectionConfirmName"
+          type="text"
+          :placeholder="currentModel"
+          class="w-full rounded border border-red-300 px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-red-200"
+        />
+      </div>
+      <div class="flex gap-4">
+        <async-button
+          @click="dropCollection"
+          :disabled="requiresDropCollectionNameConfirmation() && dropCollectionConfirmName !== currentModel"
+          class="rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Drop Collection
+        </async-button>
+        <button @click="shouldShowDropCollectionModal = false" class="rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-page0">
+          Cancel
+        </button>
+      </div>
+    </template>
+  </modal>
   <model-switcher
     :show="showModelSwitcher"
     :models="models"

package/frontend/src/models/models.js

@@ -168,6 +168,8 @@ module.exports = app => app.component('models', {
     showAddFieldDropdown: false,
     shouldShowIndexModal: false,
     shouldShowCollectionInfoModal: false,
+    shouldShowDropCollectionModal: false,
+    dropCollectionConfirmName: '',
     shouldShowUpdateMultipleModal: false,
     shouldShowDeleteMultipleModal: false,
     shouldExport: {},
@@ -923,6 +925,30 @@ module.exports = app => app.component('models', {
       const { info } = await api.Model.getCollectionInfo({ model: this.currentModel });
       this.collectionInfo = info;
     },
+    openDropCollectionModal() {
+      this.closeActionsMenu();
+      this.dropCollectionConfirmName = '';
+      this.shouldShowDropCollectionModal = true;
+    },
+    requiresDropCollectionNameConfirmation() {
+      const nodeEnv = window?.state?.nodeEnv;
+      return nodeEnv !== 'local';
+    },
+    async dropCollection() {
+      if (this.requiresDropCollectionNameConfirmation() && this.dropCollectionConfirmName !== this.currentModel) {
+        this.$toast.error('Please type the collection name exactly to confirm.');
+        return;
+      }
+
+      await api.Model.dropCollection({ model: this.currentModel });
+      this.shouldShowDropCollectionModal = false;
+      this.dropCollectionConfirmName = '';
+      this.documents = [];
+      this.numDocuments = 0;
+      this.selectedDocuments = [];
+      this.$toast.success(`Collection ${this.currentModel} dropped.`);
+      await this.getDocuments();
+    },
     async findOldestDocument() {
       this.closeActionsMenu();
       const { docs } = await api.Model.getDocuments({

package/frontend/src/navbar/navbar.html

@@ -31,10 +31,18 @@
         <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
       </svg>
     </span>
-    <a v-if="hasAccess(roles, 'chat')"
+    <a v-if="hasAccess(roles, 'chat') && hasLLMAPIKey"
       href="#/chat"
       class="inline-flex items-center px-1 border-b-2 text-sm font-medium"
       :class="chatView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'">Chat</a>
+    <span v-else-if="hasAccess(roles, 'chat') && !hasLLMAPIKey"
+      class="inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-300 cursor-not-allowed"
+      :title="chatDisabledReason">
+      Chat
+      <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+      </svg>
+    </span>
     <span v-else class="inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-300 cursor-not-allowed">
       Chat
       <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -154,7 +162,7 @@
   <!-- Mobile menu mask -->
   <div id="mobile-menu-mask" class="fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
   <!-- Mobile menu drawer -->
-  <div id="mobile-menu" style="z-index: 10000" class="fixed inset-0 bg-page shadow-lg transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col">
+  <div id="mobile-menu" style="z-index: 100000" class="fixed inset-0 bg-page shadow-lg transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col">
     <div class="flex items-center justify-between px-4 !h-[55px] border-b border-edge">
       <router-link :to="{ name: defaultRoute }">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-[32px] text-primary" viewBox="0 0 250 250" fill="currentColor" aria-label="Mongoose Studio Logo">
@@ -201,10 +209,18 @@
           <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
         </svg>
       </span>
-      <a v-if="hasAccess(roles, 'chat')"
+      <a v-if="hasAccess(roles, 'chat') && hasLLMAPIKey"
         href="#/chat"
         class="block px-3 py-2 rounded-md text-base font-medium"
         :class="chatView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'">Chat</a>
+      <span v-else-if="hasAccess(roles, 'chat') && !hasLLMAPIKey"
+        class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed"
+        :title="chatDisabledReason">
+        Chat
+        <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+        </svg>
+      </span>
       <span v-else class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed">
         Chat
         <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">

package/frontend/src/navbar/navbar.js

@@ -68,6 +68,12 @@ module.exports = app => app.component('navbar', {
     },
     hasTaskVisualizer() {
       return !!window.MONGOOSE_STUDIO_CONFIG.enableTaskVisualizer;
+    },
+    hasLLMAPIKey() {
+      return !!window.MONGOOSE_STUDIO_CONFIG.hasLLMAPIKey;
+    },
+    chatDisabledReason() {
+      return 'Chat requires an Anthropic, Gemini, or OpenAI API key.';
     }
   },
   methods: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "AI-Powered Data Workspace for MongoDB: Turn your MongoDB data into dashboards, maps, and interactive workflows - powered by your Mongoose models and AI.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {