@mongoosejs/studio 0.1.9 → 0.1.11

package/backend/actions/ChatThread/createChatMessage.js

@@ -16,16 +16,13 @@ const CreateChatMessageParams = new Archetype({
   content: {
     $type: 'string'
   },
-  authorization: {
-    $type: 'string'
-  },
   roles: {
     $type: ['string']
   }
 }).compile('CreateChatMessageParams');
 
 module.exports = ({ db, studioConnection, options }) => async function createChatMessage(params) {
-  const { chatThreadId, initiatedById, content, script, authorization, roles } = new CreateChatMessageParams(params);
+  const { chatThreadId, initiatedById, content, script, roles } = new CreateChatMessageParams(params);
   const ChatThread = studioConnection.model('__Studio_ChatThread');
   const ChatMessage = studioConnection.model('__Studio_ChatMessage');
 
@@ -54,6 +51,7 @@ module.exports = ({ db, studioConnection, options }) => async function createCha
   if (chatThread.title == null) {
     const threadText = messages
       .filter(m => m.role === 'user' || m.role === 'assistant')
+      .concat([{ role: 'user', content }])
       .map(m => `${m.role.toUpperCase()}: ${m.content}`)
       .join('\n')
       .slice(0, 5000);

package/backend/actions/ChatThread/index.js

@@ -5,3 +5,4 @@ exports.createChatThread = require('./createChatThread');
 exports.getChatThread = require('./getChatThread');
 exports.listChatThreads = require('./listChatThreads');
 exports.shareChatThread = require('./shareChatThread');
+exports.streamChatMessage = require('./streamChatMessage');

package/backend/actions/ChatThread/streamChatMessage.js

@@ -0,0 +1,158 @@
+'use strict';
+
+const Archetype = require('archetype');
+const authorize = require('../../authorize');
+const callLLM = require('../../integrations/callLLM');
+const streamLLM = require('../../integrations/streamLLM');
+const getModelDescriptions = require('../../helpers/getModelDescriptions');
+const mongoose = require('mongoose');
+
+const CreateChatMessageParams = new Archetype({
+  chatThreadId: {
+    $type: mongoose.Types.ObjectId
+  },
+  initiatedById: {
+    $type: mongoose.Types.ObjectId
+  },
+  content: {
+    $type: 'string'
+  },
+  roles: {
+    $type: ['string']
+  }
+}).compile('CreateChatMessageParams');
+
+module.exports = ({ db, studioConnection, options }) => async function* createChatMessage(params) {
+  const { chatThreadId, initiatedById, content, script, roles } = new CreateChatMessageParams(params);
+  const ChatThread = studioConnection.model('__Studio_ChatThread');
+  const ChatMessage = studioConnection.model('__Studio_ChatMessage');
+
+  await authorize('ChatThread.createChatMessage', roles);
+
+  // Check that the user owns the thread
+  const chatThread = await ChatThread.findOne({ _id: chatThreadId });
+  if (!chatThread) {
+    throw new Error('Chat thread not found');
+  }
+  if (initiatedById != null && chatThread.userId.toString() !== initiatedById.toString()) {
+    throw new Error('Not authorized');
+  }
+
+  const messages = await ChatMessage.find({ chatThreadId }).sort({ createdAt: 1 });
+  const llmMessages = messages.map(m => ({
+    role: m.role,
+    content: [{
+      type: 'text',
+      text: m.content
+    }]
+  }));
+  llmMessages.push({ role: 'user', content: [{ type: 'text', text: content }] });
+
+  let summarizePromise = Promise.resolve();
+  if (chatThread.title == null) {
+    const threadText = messages
+      .filter(m => m.role === 'user' || m.role === 'assistant')
+      .concat([{ role: 'user', content }])
+      .map(m => `${m.role.toUpperCase()}: ${m.content}`)
+      .join('\n')
+      .slice(0, 5000);
+    summarizePromise = callLLM(
+      [{
+        role: 'user',
+        content: [{
+          type: 'text',
+          text: 'Summarize the following chat thread into a concise, helpful title (≤ 6 words).\n\n' +
+            `${threadText}\n\n` +
+            'Return only the title.'
+        }]
+      }],
+      'You are a helpful assistant that summarizes chat threads into titles.',
+      options
+    ).then(res => {
+      const title = res.text;
+      chatThread.title = title;
+      return chatThread.save();
+    });
+  }
+
+  const modelDescriptions = getModelDescriptions(db);
+  const system = systemPrompt + '\n\n' + modelDescriptions + (options?.context ? '\n\n' + options.context : '');
+
+  const userChatMessage = await ChatMessage.create({
+    chatThreadId,
+    role: 'user',
+    content,
+    script,
+    executionResult: null
+  });
+
+  yield { chatMessage: userChatMessage };
+
+  const assistantChatMessage = new ChatMessage({
+    chatThreadId,
+    role: 'assistant',
+    content: '',
+    script: null,
+    executionResult: null
+  });
+  const textStream = streamLLM(llmMessages, system, options);
+  let count = 0;
+  for await (const textPart of textStream) {
+    assistantChatMessage.content += textPart;
+    // Only save every 10th chunk for performance
+    if (count++ % 10 === 0) {
+      await assistantChatMessage.save();
+    }
+    yield { textPart };
+  }
+
+  await assistantChatMessage.save();
+  yield { chatMessage: assistantChatMessage };
+
+  const updatedChatThread = await summarizePromise;
+  if (updatedChatThread != null) {
+    yield { chatThread: updatedChatThread };
+  }
+  return {};
+};
+
+const systemPrompt = `
+  You are a data querying assistant who writes scripts for users accessing MongoDB data using Node.js and Mongoose.
+
+  Keep scripts concise. Avoid unnecessary comments, error handling, and temporary variables.
+
+  Do not write any imports or require() statements, that will cause the script to break.
+
+  If the user approves the script, the script will run in the Node.js server in a sandboxed vm.createContext() call with only 1 global variable: db, which contains the Mongoose connection. The script return value will then send the response via JSON to the client. Be aware that the result of the query will be serialized to JSON before being displayed to the user. MAKE SURE TO RETURN A VALUE FROM THE SCRIPT.
+
+  Optimize scripts for readability first, followed by reliability, followed by performance. Avoid using the aggregation framework unless explicitly requested by the user. Use indexed fields in queries where possible.
+
+  Assume the user has pre-defined schemas and models. Do not define any new schemas or models for the user.
+
+  Use async/await where possible. Assume top-level await is allowed.
+
+  Write at most one script, unless the user explicitly asks for multiple scripts.
+
+  Think carefully about the user's input and identify the models referred to by the user's query.
+
+  Format output as Markdown, including code fences for any scripts the user requested.
+
+  Add a brief text description of what the script does.
+
+  If the user's query is best answered with a chart, return a Chart.js 4 configuration as \`return { $chart: chartJSConfig };\`. Disable ChartJS animation by default unless user asks for it. Set responsive: true, maintainAspectRatio: false options unless the user explicitly asks.
+
+  If the user\'s query is best answered by a map, return an object { $featureCollection } which contains a GeoJSON FeatureCollection
+
+  Example output:
+
+  The following script counts the number of users which are not deleted.
+
+  \`\`\`javascript
+  const users = await db.model('User').find({ isDeleted: false });
+  return { numUsers: users.length };
+  \`\`\`
+
+  -----------
+
+  Here is a description of the user's models. Assume these are the only models available in the system unless explicitly instructed otherwise by the user.
+  `.trim();

package/backend/actions/Model/createDocument.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const Archetype = require('archetype');
-const { EJSON } = require('bson');
+const { EJSON } = require('mongodb/lib/bson');
 const authorize = require('../../authorize');
 
 const CreateDocumentParams = new Archetype({

package/backend/integrations/streamLLM.js

@@ -0,0 +1,56 @@
+'use strict';
+
+const { createAnthropic } = require('@ai-sdk/anthropic');
+const { createOpenAI } = require('@ai-sdk/openai');
+const { streamText } = require('ai');
+
+module.exports = async function* streamLLM(messages, system, options) {
+  let provider = null;
+  let model = null;
+  if (options?.openAIAPIKey && options?.anthropicAPIKey) {
+    throw new Error('Cannot set both OpenAI and Anthropic API keys');
+  }
+
+  if (options?.openAIAPIKey) {
+    provider = createOpenAI({ apiKey: options.openAIAPIKey });
+    model = options?.model ?? 'gpt-4o-mini';
+  } else if (options?.anthropicAPIKey) {
+    provider = createAnthropic({ apiKey: options.anthropicAPIKey });
+    model = options?.model ?? 'claude-haiku-4-5-20251001';
+  }
+
+  if (provider) {
+    const { textStream } = streamText({
+      model: provider(model),
+      system,
+      messages
+    });
+    for await (const chunk of textStream) {
+      yield chunk;
+    }
+    return;
+  }
+
+  // If not using OpenAI or Anthropic, fallback to Mongoose (no streaming)
+  const headers = { 'Content-Type': 'application/json' };
+  const response = await fetch('https://mongoose-js.netlify.app/.netlify/functions/getChatCompletion', {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      messages,
+      model: options?.model
+    })
+  }).then(response => {
+    if (!response.ok) {
+      return response.json().then(data => {
+        throw new Error(`Mongoose Studio chat completion error: ${data.message}`);
+      });
+    }
+    return response;
+  });
+
+  const data = await response.json();
+
+  // Simulate streaming by yielding the whole response at once as a single chunk
+  yield data.response;
+};

package/frontend/public/app.js

@@ -272,6 +272,13 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     },
     shareChatThread(params) {
       return client.post('', { action: 'ChatThread.shareChatThread', ...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: 'ChatThread.createChatMessage', ...params }).then(res => res.data);
+      yield { chatMessage: data.chatMessages[0] };
+      yield { chatMessage: data.chatMessages[1] };
+      yield { chatThread: data.chatThread };
     }
   };
   exports.ChatMessage = {
@@ -388,6 +395,55 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     },
     shareChatThread: function shareChatThread(params) {
       return client.post('/ChatThread/shareChatThread', params).then(res => res.data);
+    },
+    streamChatMessage: async function* streamChatMessage(params) {
+      const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+      const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/ChatThread/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;
+            }
+          }
+        }
+      }
     }
   };
   exports.ChatMessage = {
@@ -612,7 +668,7 @@ module.exports = app => app.component('async-button', {
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"relative border rounded bg-gray-100 text-black text-sm overflow-hidden\">\n  <div class=\"flex border-b pt-[1px] text-xs font-medium bg-gray-200\">\n    <button\n      class=\"px-3 py-1 border-r border-gray-300 hover:bg-green-300\"\n      :class=\"{'bg-gray-300': activeTab === 'code', 'bg-green-300': activeTab === 'code'}\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-3 py-1 hover:bg-green-300\"\n      :class=\"{'bg-green-300': activeTab === 'output'}\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex\">\n      <button\n        v-if=\"activeTab === 'output'\"\n        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\"\n        @click=\"copyOutput\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <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\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'output'\"\n        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\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'code' && !isEditing\"\n        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\"\n        @click.stop=\"startEditing\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path d=\"M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM4 13.5V16h2.5l7.086-7.086-2.828-2.828L4 13.5z\" />\n        </svg>\n      </button>\n      <async-button\n        v-if=\"!isEditing\"\n        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\"\n        @click=\"executeScript\">\n        Execute\n      </async-button>\n      <div class=\"relative ml-1\" ref=\"dropdown\">\n        <button\n          @click.stop=\"toggleDropdown\"\n          class=\"px-1 py-1 text-xs hover:bg-gray-300 rounded flex items-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path d=\"M10 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z\" />\n          </svg>\n        </button>\n        <div\n          v-if=\"showDropdown\"\n          class=\"absolute right-0 z-10 mt-1 w-64 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5\">\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-gray-700 hover:bg-gray-100\"\n            @click=\"openCreateDashboardModal(); showDropdown = false\">\n            Create Dashboard\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-gray-700 hover:bg-gray-100\"\n            @click=\"$emit('copyMessage'); showDropdown = false\">\n            Copy Full Message\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <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'\">\n    <div v-if=\"isEditing\" class=\"flex flex-col space-y-2\">\n      <div class=\"border border-gray-200\">\n        <textarea ref=\"scriptEditor\" class=\"w-full h-[45vh]\" @input=\"handleScriptInput\"></textarea>\n      </div>\n      <div class=\"flex justify-end gap-2\">\n        <button\n          class=\"px-2 py-1 text-xs bg-gray-300 text-gray-800 border-none rounded cursor-pointer hover:bg-gray-400 transition-colors\"\n          @click.stop=\"cancelEditing\">\n          Cancel\n        </button>\n        <async-button\n          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\"\n          @click=\"executeScript\">\n          Execute\n        </async-button>\n      </div>\n    </div>\n    <pre v-else class=\"whitespace-pre-wrap\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n  </div>\n\n  <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'\">\n    <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n    <dashboard-map v-else-if=\"message.executionResult?.output?.$featureCollection\" :value=\"message.executionResult?.output\" />\n    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>\n\n    <div v-if=\"message.executionResult?.logs?.length\" class=\"mt-3 pt-3 border-t border-gray-200\">\n      <div class=\"text-xs font-semibold text-gray-600 uppercase tracking-wide\">Console</div>\n      <pre class=\"mt-1 bg-gray-100 text-gray-900 p-3 rounded whitespace-pre-wrap overflow-x-auto max-h-[280px]\">{{ message.executionResult.logs }}</pre>\n    </div>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" :responsive=\"true\" />\n        <pre v-else class=\"whitespace-pre-wrap\">{{ message.executionResult?.output || 'No output' }}</pre>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showCreateDashboardModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-gray-900 font-semibold\">Create Dashboard</div>\n        <div class=\"mt-4\">\n          <label class=\"block text-sm font-medium leading-6 text-gray-900\">Title</label>\n          <div class=\"mt-2\">\n            <div class=\"w-full flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-600\">\n              <input type=\"text\" v-model=\"newDashboardTitle\" class=\"outline-none block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6\" placeholder=\"My Dashboard\">\n            </div>\n          </div>\n        </div>\n        <div class=\"my-4\">\n          <label class=\"block text-sm font-medium leading-6 text-gray-900\">Code</label>\n          <div class=\"border border-gray-200\">\n            <textarea class=\"p-2 h-[300px] w-full\" ref=\"dashboardCodeEditor\"></textarea>\n          </div>\n        </div>\n        <async-button\n          @click=\"createDashboardFromScript\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          Submit\n        </async-button>\n        <div v-if=\"createErrors.length > 0\" class=\"rounded-md bg-red-50 p-4 mt-1\">\n          <div class=\"flex\">\n            <div class=\"flex-shrink-0\">\n              <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            <div class=\"ml-3\">\n              <h3 class=\"text-sm font-medium text-red-800\">Error</h3>\n              <div class=\"mt-2 text-sm text-red-700\">\n                {{createError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"relative border rounded bg-gray-100 text-black text-sm overflow-hidden\">\n  <div class=\"flex border-b pt-[1px] text-xs font-medium bg-gray-200\">\n    <button\n      class=\"px-3 py-1 border-r border-gray-300 hover:bg-green-300\"\n      :class=\"{'bg-gray-300': activeTab === 'code', 'bg-green-300': activeTab === 'code'}\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-3 py-1 hover:bg-green-300\"\n      :class=\"{'bg-green-300': activeTab === 'output'}\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex\">\n      <button\n        v-if=\"activeTab === 'output'\"\n        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\"\n        @click=\"copyOutput\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <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\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'output'\"\n        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\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'code' && !isEditing\"\n        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\"\n        @click.stop=\"startEditing\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path d=\"M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM4 13.5V16h2.5l7.086-7.086-2.828-2.828L4 13.5z\" />\n        </svg>\n      </button>\n      <async-button\n        v-if=\"!isEditing\"\n        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\"\n        @click=\"executeScript\">\n        Execute\n      </async-button>\n      <div class=\"relative ml-1\" ref=\"dropdown\">\n        <button\n          @click.stop=\"toggleDropdown\"\n          class=\"px-1 py-1 text-xs hover:bg-gray-300 rounded flex items-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path d=\"M10 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z\" />\n          </svg>\n        </button>\n        <div\n          v-if=\"showDropdown\"\n          class=\"absolute right-0 z-10 mt-1 w-64 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5\">\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-gray-700 hover:bg-gray-100\"\n            @click=\"openCreateDashboardModal(); showDropdown = false\">\n            Create Dashboard\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-gray-700 hover:bg-gray-100\"\n            @click=\"$emit('copyMessage'); showDropdown = false\">\n            Copy Full Message\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <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'\">\n    <div v-if=\"isEditing\" class=\"flex flex-col space-y-2\">\n      <div class=\"border border-gray-200\">\n        <textarea ref=\"scriptEditor\" class=\"w-full h-[45vh]\" @input=\"handleScriptInput\"></textarea>\n      </div>\n      <div class=\"flex justify-end gap-2\">\n        <button\n          class=\"px-2 py-1 text-xs bg-gray-300 text-gray-800 border-none rounded cursor-pointer hover:bg-gray-400 transition-colors\"\n          @click.stop=\"cancelEditing\">\n          Cancel\n        </button>\n        <async-button\n          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\"\n          @click=\"executeScript\">\n          Execute\n        </async-button>\n      </div>\n    </div>\n    <pre v-else class=\"whitespace-pre-wrap\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n  </div>\n\n  <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'\">\n    <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n    <dashboard-map v-else-if=\"message.executionResult?.output?.$featureCollection\" :value=\"message.executionResult?.output\" />\n    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>\n\n    <div v-if=\"message.executionResult?.logs?.length\" class=\"mt-3 pt-3 border-t border-gray-200\">\n      <div class=\"text-xs font-semibold text-gray-600 uppercase tracking-wide\">Console</div>\n      <pre class=\"mt-1 bg-gray-100 text-gray-900 p-3 rounded whitespace-pre-wrap overflow-x-auto max-h-[280px]\">{{ message.executionResult.logs }}</pre>\n    </div>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" :responsive=\"true\" />\n        <dashboard-map\n          v-else-if=\"message.executionResult?.output?.$featureCollection\"\n          :value=\"message.executionResult?.output\"\n          height=\"80vh\" />\n        <pre v-else class=\"whitespace-pre-wrap\">{{ message.executionResult?.output || 'No output' }}</pre>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showCreateDashboardModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-gray-900 font-semibold\">Create Dashboard</div>\n        <div class=\"mt-4\">\n          <label class=\"block text-sm font-medium leading-6 text-gray-900\">Title</label>\n          <div class=\"mt-2\">\n            <div class=\"w-full flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-600\">\n              <input type=\"text\" v-model=\"newDashboardTitle\" class=\"outline-none block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6\" placeholder=\"My Dashboard\">\n            </div>\n          </div>\n        </div>\n        <div class=\"my-4\">\n          <label class=\"block text-sm font-medium leading-6 text-gray-900\">Code</label>\n          <div class=\"border border-gray-200\">\n            <textarea class=\"p-2 h-[300px] w-full\" ref=\"dashboardCodeEditor\"></textarea>\n          </div>\n        </div>\n        <async-button\n          @click=\"createDashboardFromScript\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          Submit\n        </async-button>\n        <div v-if=\"createErrors.length > 0\" class=\"rounded-md bg-red-50 p-4 mt-1\">\n          <div class=\"flex\">\n            <div class=\"flex-shrink-0\">\n              <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            <div class=\"ml-3\">\n              <h3 class=\"text-sm font-medium text-red-800\">Error</h3>\n              <div class=\"mt-2 text-sm text-red-700\">\n                {{createError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -1010,14 +1066,45 @@ module.exports = app => app.component('chat', {
           }
         });
 
-        const { chatMessages, chatThread } = await api.ChatThread.createChatMessage({
-          chatThreadId: this.chatThreadId,
-          content
-        });
-        this.chatMessages.push(chatMessages[1]);
-        for (const thread of this.chatThreads) {
-          if (thread._id === chatThread._id) {
-            thread.title = chatThread.title;
+        const params = { chatThreadId: this.chatThreadId, content };
+        let userChatMessage = null;
+        let assistantChatMessage = null;
+        for await (const event of api.ChatThread.streamChatMessage(params)) {
+          if (event.chatMessage) {
+            if (!userChatMessage) {
+              userChatMessage = event.chatMessage;
+            } else {
+              const assistantChatMessageIndex = this.chatMessages.indexOf(assistantChatMessage);
+              assistantChatMessage = event.chatMessage;
+              this.chatMessages[assistantChatMessageIndex] = assistantChatMessage;
+            }
+          } else if (event.chatThread) {
+            for (const thread of this.chatThreads) {
+              if (thread._id === event.chatThread._id) {
+                thread.title = event.chatThread.title;
+              }
+            }
+          } else if (event.textPart) {
+            if (!assistantChatMessage) {
+              assistantChatMessage = {
+                content: event.textPart,
+                role: 'assistant'
+              };
+              this.chatMessages.push(assistantChatMessage);
+              assistantChatMessage = this.chatMessages[this.chatMessages.length - 1];
+              this.$nextTick(() => {
+                if (this.$refs.messagesContainer) {
+                  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
+                }
+              });
+            } else {
+              assistantChatMessage.content += event.textPart;
+              this.$nextTick(() => {
+                if (this.$refs.messagesContainer) {
+                  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
+                }
+              });
+            }
           }
         }
 
@@ -1159,7 +1246,7 @@ module.exports = "<div>\n    <div class=\"mb-2\">\n      <textarea class=\"borde
 
 const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
 
-const { BSON, EJSON } = __webpack_require__(/*! bson */ "./node_modules/bson/lib/bson.mjs");
+const { BSON, EJSON } = __webpack_require__(/*! mongodb/lib/bson */ "./node_modules/mongodb/lib/bson.js");
 
 const ObjectId = new Proxy(BSON.ObjectId, {
   apply(target, thisArg, argumentsList) {
@@ -1203,7 +1290,7 @@ module.exports = app => app.component('clone-document', {
   },
   mounted: function() {
     const pathsToClone = this.schemaPaths.map(x => x.path);
-    
+
     // Create a filtered version of the document data
     const filteredDoc = {};
     pathsToClone.forEach(path => {
@@ -1228,6 +1315,7 @@ module.exports = app => app.component('clone-document', {
   }
 });
 
+
 /***/ }),
 
 /***/ "./frontend/src/create-dashboard/create-dashboard.html":
@@ -1547,7 +1635,7 @@ module.exports = app => app.component('dashboard-grid', {
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"py-2\">\n  <div v-if=\"header\" class=\"border-b border-gray-100 px-2 pb-2 text-xl font-bold\">\n    {{header}}\n  </div>\n  <div class=\"text-xl\">\n    <div ref=\"map\" class=\"w-full\" style=\"height: 300px;\"></div>\n  </div>\n</div>\n";
+module.exports = "<div class=\"py-2 h-full flex flex-col\">\n  <div v-if=\"header\" class=\"border-b border-gray-100 px-2 pb-2 text-xl font-bold\">\n    {{header}}\n  </div>\n  <div class=\"text-xl flex-1 min-h-[200px]\">\n    <div ref=\"map\" class=\"w-full h-full\" :style=\"mapStyle\"></div>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -1565,7 +1653,7 @@ const template = __webpack_require__(/*! ./dashboard-map.html */ "./frontend/src
 
 module.exports = app => app.component('dashboard-map', {
   template: template,
-  props: ['value'],
+  props: ['value', 'height'],
   mounted() {
     const fc = this.value.$featureCollection.featureCollection || this.value.$featureCollection;
     const map = L.map(this.$refs.map).setView([0, 0], 1);
@@ -1583,6 +1671,9 @@ module.exports = app => app.component('dashboard-map', {
     });
   },
   computed: {
+    mapStyle() {
+      return { height: this.height || '300px' };
+    },
     header() {
       if (this.value != null && this.value.$featureCollection.header) {
         return this.value.$featureCollection.header;
@@ -16846,7 +16937,7 @@ module.exports = function stringToParts(str) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.1.9","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"},"license":"Apache-2.0","dependencies":{"@ai-sdk/openai":"2.x","@ai-sdk/anthropic":"2.x","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.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":{"mongoose":"7.x || 8.x || ^9.0.0-0"},"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":"9.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.1.11","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"},"license":"Apache-2.0","dependencies":{"@ai-sdk/openai":"2.x","@ai-sdk/anthropic":"2.x","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.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":{"mongoose":"7.x || 8.x || ^9.0.0"},"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":"9.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

@@ -976,6 +976,10 @@ video {
   min-height: 0px;
 }
 
+.min-h-\[200px\] {
+  min-height: 200px;
+}
+
 .\!w-0 {
   width: 0px !important;
 }

package/frontend/src/api.js

@@ -61,6 +61,13 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     },
     shareChatThread(params) {
       return client.post('', { action: 'ChatThread.shareChatThread', ...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: 'ChatThread.createChatMessage', ...params }).then(res => res.data);
+      yield { chatMessage: data.chatMessages[0] };
+      yield { chatMessage: data.chatMessages[1] };
+      yield { chatThread: data.chatThread };
     }
   };
   exports.ChatMessage = {
@@ -177,6 +184,55 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     },
     shareChatThread: function shareChatThread(params) {
       return client.post('/ChatThread/shareChatThread', params).then(res => res.data);
+    },
+    streamChatMessage: async function* streamChatMessage(params) {
+      const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+      const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/ChatThread/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;
+            }
+          }
+        }
+      }
     }
   };
   exports.ChatMessage = {

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

@@ -106,6 +106,10 @@
       <div class="absolute font-mono right-1 top-1 cursor-pointer text-xl" @click="showDetailModal = false;">&times;</div>
       <div class="h-full overflow-auto">
         <dashboard-chart v-if="message.executionResult?.output?.$chart" :value="message.executionResult?.output" :responsive="true" />
+        <dashboard-map
+          v-else-if="message.executionResult?.output?.$featureCollection"
+          :value="message.executionResult?.output"
+          height="80vh" />
         <pre v-else class="whitespace-pre-wrap">{{ message.executionResult?.output || 'No output' }}</pre>
       </div>
     </template>

package/frontend/src/chat/chat.js

@@ -41,14 +41,45 @@ module.exports = app => app.component('chat', {
           }
         });
 
-        const { chatMessages, chatThread } = await api.ChatThread.createChatMessage({
-          chatThreadId: this.chatThreadId,
-          content
-        });
-        this.chatMessages.push(chatMessages[1]);
-        for (const thread of this.chatThreads) {
-          if (thread._id === chatThread._id) {
-            thread.title = chatThread.title;
+        const params = { chatThreadId: this.chatThreadId, content };
+        let userChatMessage = null;
+        let assistantChatMessage = null;
+        for await (const event of api.ChatThread.streamChatMessage(params)) {
+          if (event.chatMessage) {
+            if (!userChatMessage) {
+              userChatMessage = event.chatMessage;
+            } else {
+              const assistantChatMessageIndex = this.chatMessages.indexOf(assistantChatMessage);
+              assistantChatMessage = event.chatMessage;
+              this.chatMessages[assistantChatMessageIndex] = assistantChatMessage;
+            }
+          } else if (event.chatThread) {
+            for (const thread of this.chatThreads) {
+              if (thread._id === event.chatThread._id) {
+                thread.title = event.chatThread.title;
+              }
+            }
+          } else if (event.textPart) {
+            if (!assistantChatMessage) {
+              assistantChatMessage = {
+                content: event.textPart,
+                role: 'assistant'
+              };
+              this.chatMessages.push(assistantChatMessage);
+              assistantChatMessage = this.chatMessages[this.chatMessages.length - 1];
+              this.$nextTick(() => {
+                if (this.$refs.messagesContainer) {
+                  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
+                }
+              });
+            } else {
+              assistantChatMessage.content += event.textPart;
+              this.$nextTick(() => {
+                if (this.$refs.messagesContainer) {
+                  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
+                }
+              });
+            }
           }
         }
 

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

@@ -2,7 +2,7 @@
 
 const api = require('../api');
 
-const { BSON, EJSON } = require('bson');
+const { BSON, EJSON } = require('mongodb/lib/bson');
 
 const ObjectId = new Proxy(BSON.ObjectId, {
   apply(target, thisArg, argumentsList) {
@@ -46,7 +46,7 @@ module.exports = app => app.component('clone-document', {
   },
   mounted: function() {
     const pathsToClone = this.schemaPaths.map(x => x.path);
-    
+
     // Create a filtered version of the document data
     const filteredDoc = {};
     pathsToClone.forEach(path => {
@@ -69,4 +69,4 @@ module.exports = app => app.component('clone-document', {
       smartIndent: false
     });
   }
-});
+});

package/frontend/src/dashboard-result/dashboard-map/dashboard-map.html

@@ -1,8 +1,8 @@
-<div class="py-2">
+<div class="py-2 h-full flex flex-col">
   <div v-if="header" class="border-b border-gray-100 px-2 pb-2 text-xl font-bold">
     {{header}}
   </div>
-  <div class="text-xl">
-    <div ref="map" class="w-full" style="height: 300px;"></div>
+  <div class="text-xl flex-1 min-h-[200px]">
+    <div ref="map" class="w-full h-full" :style="mapStyle"></div>
   </div>
 </div>

package/frontend/src/dashboard-result/dashboard-map/dashboard-map.js

@@ -5,7 +5,7 @@ const template = require('./dashboard-map.html');
 
 module.exports = app => app.component('dashboard-map', {
   template: template,
-  props: ['value'],
+  props: ['value', 'height'],
   mounted() {
     const fc = this.value.$featureCollection.featureCollection || this.value.$featureCollection;
     const map = L.map(this.$refs.map).setView([0, 0], 1);
@@ -23,6 +23,9 @@ module.exports = app => app.component('dashboard-map', {
     });
   },
   computed: {
+    mapStyle() {
+      return { height: this.height || '300px' };
+    },
     header() {
       if (this.value != null && this.value.$featureCollection.header) {
         return this.value.$featureCollection.header;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "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": {
@@ -24,7 +24,7 @@
     "webpack": "5.x"
   },
   "peerDependencies": {
-    "mongoose": "7.x || 8.x || ^9.0.0-0"
+    "mongoose": "7.x || 8.x || ^9.0.0"
   },
   "devDependencies": {
     "@masteringjs/eslint-config": "0.1.1",