@mongoosejs/studio 0.2.5 → 0.2.7

package/frontend/public/tw.css

@@ -594,6 +594,10 @@ video {
   pointer-events: none;
 }
 
+.visible {
+  visibility: visible;
+}
+
 .invisible {
   visibility: hidden;
 }
@@ -631,6 +635,10 @@ video {
   bottom: 0px;
 }
 
+.-left-1 {
+  left: -0.25rem;
+}
+
 .-left-2 {
   left: -0.5rem;
 }
@@ -643,6 +651,10 @@ video {
   left: 0px;
 }
 
+.left-full {
+  left: 100%;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -934,6 +946,10 @@ video {
   height: 90vh !important;
 }
 
+.h-0 {
+  height: 0px;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -966,6 +982,10 @@ video {
   height: 1.5rem;
 }
 
+.h-64 {
+  height: 16rem;
+}
+
 .h-8 {
   height: 2rem;
 }
@@ -1018,6 +1038,10 @@ video {
   min-height: 200px;
 }
 
+.min-h-\[400px\] {
+  min-height: 400px;
+}
+
 .\!w-0 {
   width: 0px !important;
 }
@@ -1206,6 +1230,10 @@ video {
   cursor: auto;
 }
 
+.cursor-help {
+  cursor: help;
+}
+
 .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1497,6 +1525,10 @@ video {
   border-bottom-width: 2px;
 }
 
+.border-b-4 {
+  border-bottom-width: 4px;
+}
+
 .border-l-\[3px\] {
   border-left-width: 3px;
 }
@@ -1509,10 +1541,18 @@ video {
   border-right-width: 0px;
 }
 
+.border-r-4 {
+  border-right-width: 4px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
 
+.border-t-4 {
+  border-top-width: 4px;
+}
+
 .border-none {
   border-style: none;
 }
@@ -1566,6 +1606,11 @@ video {
   border-left-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
+.border-r-gray-900 {
+  --tw-border-opacity: 1;
+  border-right-color: rgb(17 24 39 / var(--tw-border-opacity));
+}
+
 .\!bg-zinc-50 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(250 250 250 / var(--tw-bg-opacity)) !important;
@@ -1611,6 +1656,11 @@ video {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
+.bg-emerald-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
+}
+
 .bg-forest-green-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(0 202 44 / var(--tw-bg-opacity));
@@ -1772,6 +1822,10 @@ video {
   padding: 0px;
 }
 
+.p-0\.5 {
+  padding: 0.125rem;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -2244,6 +2298,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2269,6 +2329,12 @@ video {
   outline-color: #d1d5db;
 }
 
+.ring {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2446,6 +2512,11 @@ video {
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-emerald-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(16 185 129 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-forest-green-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(0 242 58 / var(--tw-bg-opacity));
@@ -2486,6 +2557,11 @@ video {
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-green-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
@@ -2576,6 +2652,11 @@ video {
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 
+.hover\:text-gray-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
@@ -2586,6 +2667,11 @@ video {
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 
+.hover\:text-gray-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
 .hover\:text-slate-700:hover {
   --tw-text-opacity: 1;
   color: rgb(51 65 85 / var(--tw-text-opacity));
@@ -2620,6 +2706,11 @@ video {
   border-color: transparent;
 }
 
+.focus\:border-ultramarine-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(63 83 255 / var(--tw-border-opacity));
+}
+
 .focus\:opacity-100:focus {
   opacity: 1;
 }
@@ -2871,6 +2962,10 @@ video {
     flex: none;
   }
 
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
   .sm\:flex-col {
     flex-direction: column;
   }

package/frontend/src/api.js

@@ -147,6 +147,14 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     updateDocument: function updateDocument(params) {
       return client.post('', { action: 'Model.updateDocument', ...params }).then(res => res.data);
     },
+    createChatMessage(params) {
+      return client.post('', { action: 'Model.createChatMessage', ...params }).then(res => res.data);
+    },
+    streamChatMessage: async function* streamChatMessage(params) {
+      // Don't stream on Next.js or Netlify for now.
+      const data = await client.post('', { action: 'Model.createChatMessage', ...params }).then(res => res.data);
+      yield { textPart: data.text };
+    },
     updateDocuments: function updateDocuments(params) {
       return client.post('', { action: 'Model.updateDocuments', ...params }).then(res => res.data);
     }
@@ -250,6 +258,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     createChart: function(params) {
       return client.post('/Model/createChart', params).then(res => res.data);
     },
+    createChatMessage: function(params) {
+      return client.post('/Model/createChatMessage', params).then(res => res.data);
+    },
     createDocument: function(params) {
       return client.post('/Model/createDocument', params).then(res => res.data);
     },
@@ -356,6 +367,55 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     updateDocument: function updateDocument(params) {
       return client.post('/Model/updateDocument', params).then(res => res.data);
     },
+    streamChatMessage: async function* streamChatMessage(params) {
+      const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+      const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/streamChatMessage?' + new URLSearchParams(params).toString();
+
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          Authorization: `${accessToken}`,
+          Accept: 'text/event-stream'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder('utf-8');
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+
+        let eventEnd;
+        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
+          const eventStr = buffer.slice(0, eventEnd);
+          buffer = buffer.slice(eventEnd + 2);
+
+          // Parse SSE event
+          const lines = eventStr.split('\n');
+          let data = '';
+          for (const line of lines) {
+            if (line.startsWith('data:')) {
+              data += line.slice(5).trim();
+            }
+          }
+          if (data) {
+            try {
+              yield JSON.parse(data);
+            } catch (err) {
+              // If not JSON, yield as string
+              yield data;
+            }
+          }
+        }
+      }
+    },
     updateDocuments: function updateDocument(params) {
       return client.post('/Model/updateDocuments', params).then(res => res.data);
     }

package/frontend/src/chat/chat.js

@@ -30,7 +30,9 @@ module.exports = {
           this.$toast.success('Chat thread created!');
         }
 
+        const userChatMessageIndex = this.chatMessages.length;
         this.chatMessages.push({
+          _id: Math.random().toString(36).substr(2, 9),
           content,
           role: 'user'
         });
@@ -48,11 +50,12 @@ module.exports = {
           if (event.chatMessage) {
             if (!userChatMessage) {
               userChatMessage = event.chatMessage;
-            } else if (!assistantChatMessage) {
+              this.chatMessages.splice(userChatMessageIndex, 1, userChatMessage);
+            } else {
               const assistantChatMessageIndex = this.chatMessages.indexOf(assistantChatMessage);
               assistantChatMessage = event.chatMessage;
               if (assistantChatMessageIndex !== -1) {
-                this.chatMessages[assistantChatMessageIndex] = assistantChatMessage;
+                this.chatMessages.splice(assistantChatMessageIndex, 1, assistantChatMessage);
               } else {
                 this.chatMessages.push(assistantChatMessage);
               }
@@ -66,6 +69,7 @@ module.exports = {
           } else if (event.textPart) {
             if (!assistantChatMessage) {
               assistantChatMessage = {
+                _id: Math.random().toString(36).substr(2, 9),
                 content: event.textPart,
                 role: 'assistant'
               };

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

@@ -1,6 +1,41 @@
 <div>
+  <div class="mb-4">
+    <label class="block text-sm font-bold text-gray-900">AI Mode</label>
+    <div class="mt-2 flex flex-col gap-2 sm:flex-row sm:items-center">
+      <input
+        v-model="aiPrompt"
+        type="text"
+        placeholder="Describe the document you'd like to create..."
+        @keydown.enter.prevent="requestAiSuggestion()"
+        class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-ultramarine-500 focus:outline-none focus:ring-1 focus:ring-ultramarine-500"
+      />
+      <button
+        @click="requestAiSuggestion()"
+        :disabled="aiStreaming || !aiPrompt.trim()"
+        class="inline-flex items-center justify-center rounded-md bg-ultramarine-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        {{ aiStreaming ? 'Generating...' : 'Generate' }}
+      </button>
+    </div>
+    <p class="mt-2 text-xs text-gray-500">Use AI to draft the document. You can accept or reject the suggestion once it finishes.</p>
+    <div v-if="aiSuggestionReady" class="mt-3 flex flex-wrap gap-2">
+      <button
+        @click="acceptAiSuggestion()"
+        class="rounded-md bg-emerald-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500"
+      >
+        Accept suggestion
+      </button>
+      <button
+        @click="rejectAiSuggestion()"
+        class="rounded-md bg-gray-100 px-2.5 py-1.5 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-200"
+      >
+        Reject suggestion
+      </button>
+    </div>
+  </div>
   <div class="mb-2">
-    <textarea class="border border-gray-200 p-2 h-[300px] w-full" ref="codeEditor"></textarea>
+    <label class="block text-sm font-bold text-gray-900">Document to Create</label>
+    <textarea class="border border-gray-200 p-2 h-[300px] w-full mt-2" ref="codeEditor"></textarea>
   </div>
   <button @click="createDocument()" 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">Submit</button>
   <div v-if="errors.length > 0" class="rounded-md bg-red-50 p-4 mt-1">

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

@@ -23,10 +23,60 @@ module.exports = app => app.component('create-document', {
     return {
       documentData: '',
       editor: null,
-      errors: []
+      errors: [],
+      aiPrompt: '',
+      aiSuggestion: '',
+      aiOriginalDocument: '',
+      aiStreaming: false,
+      aiSuggestionReady: false
     };
   },
   methods: {
+    async requestAiSuggestion() {
+      if (this.aiStreaming) {
+        return;
+      }
+      const prompt = this.aiPrompt.trim();
+      if (!prompt) {
+        return;
+      }
+
+      this.aiOriginalDocument = this.editor.getValue();
+      this.aiSuggestion = '';
+      this.aiSuggestionReady = false;
+      this.aiStreaming = true;
+
+      try {
+        for await (const event of api.Model.streamChatMessage({
+          model: this.currentModel,
+          content: prompt,
+          documentData: this.aiOriginalDocument
+        })) {
+          if (event?.textPart) {
+            this.aiSuggestion += event.textPart;
+            this.editor.setValue(this.aiSuggestion);
+          }
+        }
+        this.aiSuggestionReady = true;
+      } catch (err) {
+        this.editor.setValue(this.aiOriginalDocument);
+        this.$toast.error('Failed to generate a document suggestion.');
+        throw err;
+      } finally {
+        this.aiStreaming = false;
+      }
+    },
+    acceptAiSuggestion() {
+      this.aiSuggestionReady = false;
+      this.aiSuggestion = '';
+      this.aiOriginalDocument = '';
+    },
+    rejectAiSuggestion() {
+      this.editor.setValue(this.aiOriginalDocument);
+      this.aiSuggestionReady = false;
+      this.aiSuggestion = '';
+      this.aiOriginalDocument = '';
+    },
     async createDocument() {
       const data = EJSON.serialize(eval(`(${this.editor.getValue()})`));
       try {

package/frontend/src/detail-default/detail-default.html

@@ -1,3 +1,16 @@
 <div class="w-full">
-  <pre class="w-full whitespace-pre-wrap break-words font-mono text-sm text-gray-700 m-0">{{displayValue}}</pre>
-</div>
+  <pre v-if="!isGeoJsonGeometry || !mapVisible" class="w-full whitespace-pre-wrap break-words font-mono text-sm text-gray-700 m-0">{{displayValue}}</pre>
+  <div v-show="isGeoJsonGeometry && mapVisible" class="mt-2 border border-gray-200 rounded relative">
+    <div ref="map" class="h-64 w-full" style="min-height: 256px; height: 256px;"></div>
+    <!-- Undo button below map -->
+    <div v-if="isEditable && canUndo" class="mt-2 flex justify-end">
+      <button
+        @click="undoDelete"
+        class="text-xs px-3 py-1.5 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
+        title="Undo all changes"
+      >
+        Undo
+      </button>
+    </div>
+  </div>
+</div>