@mongoosejs/studio 0.1.12 → 0.1.13

package/backend/actions/ChatThread/createChatThread.js

@@ -14,12 +14,21 @@ const CreateChatThreadParams = new Archetype({
   $workspaceId: {
     $type: mongoose.Types.ObjectId,
     $required: false
+  },
+  initialMessage: {
+    $type: 'string',
+    $required: false
+  },
+  dashboardId: {
+    $type: mongoose.Types.ObjectId,
+    $required: false
   }
 }).compile('CreateChatThreadParams');
 
 module.exports = ({ studioConnection }) => async function createChatThread(params) {
-  const { initiatedById, roles, $workspaceId } = new CreateChatThreadParams(params);
+  const { initiatedById, roles, $workspaceId, initialMessage, dashboardId } = new CreateChatThreadParams(params);
   const ChatThread = studioConnection.model('__Studio_ChatThread');
+  const ChatMessage = studioConnection.model('__Studio_ChatMessage');
 
   await authorize('ChatThread.createChatThread', roles);
 
@@ -30,7 +39,20 @@ module.exports = ({ studioConnection }) => async function createChatThread(param
   if ($workspaceId && !initiatedById) {
     throw new Error('initiatedById is required when creating a chat thread in a workspace');
   }
+  if (dashboardId) {
+    doc.dashboardId = dashboardId;
+  }
   const chatThread = await ChatThread.create(doc);
 
+  if (initialMessage != null && initialMessage.trim() !== '') {
+    await ChatMessage.create({
+      chatThreadId: chatThread._id,
+      role: 'user',
+      content: initialMessage.trim(),
+      script: null,
+      executionResult: null
+    });
+  }
+
   return { chatThread };
 };

package/backend/db/chatThreadSchema.js

@@ -10,6 +10,10 @@ const chatThreadSchema = new mongoose.Schema({
     type: mongoose.ObjectId,
     ref: 'User'
   },
+  dashboardId: {
+    type: mongoose.ObjectId,
+    ref: 'Dashboard'
+  },
   workspaceId: {
     type: mongoose.ObjectId,
     ref: 'Workspace'

package/frontend/public/app.js

@@ -668,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        <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";
+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            v-if=\"canOverwriteDashboard\"\n            class=\"block w-full text-left px-4 py-2 text-xs text-gray-700 hover:bg-gray-100\"\n            @click=\"openOverwriteDashboardConfirmation(); showDropdown = false\">\n            Overwrite 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=\"createError\" 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  <modal v-if=\"showOverwriteDashboardConfirmationModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showOverwriteDashboardConfirmationModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-gray-900 font-semibold\">Overwrite Dashboard</div>\n        <p class=\"mt-2 text-sm text-gray-700\">\n          This will replace the linked dashboard's code with the script below.\n        </p>\n        <p class=\"mt-1 text-xs text-gray-600 break-all\" v-if=\"targetDashboardId\">\n          Dashboard ID: {{ targetDashboardId }}\n        </p>\n        <div class=\"my-4 border border-gray-200 bg-gray-50 rounded\">\n          <pre class=\"p-2 h-[300px] overflow-auto whitespace-pre-wrap text-xs\">{{ overwriteDashboardCode }}</pre>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <async-button\n            @click=\"confirmOverwriteDashboard\"\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            Confirm Overwrite\n          </async-button>\n          <button\n            class=\"px-2.5 py-1.5 rounded-md text-sm font-semibold text-gray-700 bg-gray-200 hover:bg-gray-300\"\n            @click=\"showOverwriteDashboardConfirmationModal = false\">\n            Cancel\n          </button>\n        </div>\n        <div v-if=\"overwriteError\" class=\"rounded-md bg-red-50 p-4 mt-3\">\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                {{overwriteError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -688,13 +688,14 @@ const vanillatoasts = __webpack_require__(/*! vanillatoasts */ "./node_modules/v
 
 module.exports = app => app.component('chat-message-script', {
   template,
-  props: ['message', 'script', 'language'],
+  props: ['message', 'script', 'language', 'targetDashboardId'],
   emits: ['copyMessage'],
   data() {
     return {
       activeTab: 'code',
       showDetailModal: false,
       showCreateDashboardModal: false,
+      showOverwriteDashboardConfirmationModal: false,
       showDropdown: false,
       newDashboardTitle: '',
       dashboardCode: '',
@@ -702,12 +703,17 @@ module.exports = app => app.component('chat-message-script', {
       dashboardEditor: null,
       isEditing: false,
       codeEditor: null,
-      editedScript: null
+      editedScript: null,
+      overwriteDashboardCode: '',
+      overwriteError: null
     };
   },
   computed: {
     styleForMessage() {
       return this.message.role === 'user' ? 'bg-gray-100' : '';
+    },
+    canOverwriteDashboard() {
+      return !!this.targetDashboardId;
     }
   },
   methods: {
@@ -739,7 +745,7 @@ module.exports = app => app.component('chat-message-script', {
     openCreateDashboardModal() {
       this.newDashboardTitle = '';
       this.dashboardCode = this.script;
-      this.createErrors = [];
+      this.createError = null;
       this.showCreateDashboardModal = true;
       this.$nextTick(() => {
         if (this.dashboardEditor) {
@@ -755,6 +761,14 @@ module.exports = app => app.component('chat-message-script', {
         });
       });
     },
+    openOverwriteDashboardConfirmation() {
+      if (!this.canOverwriteDashboard) {
+        return;
+      }
+      this.overwriteDashboardCode = this.codeEditor?.getValue?.() ?? this.script;
+      this.overwriteError = null;
+      this.showOverwriteDashboardConfirmationModal = true;
+    },
     toggleDropdown() {
       this.showDropdown = !this.showDropdown;
     },
@@ -827,6 +841,32 @@ module.exports = app => app.component('chat-message-script', {
       this.showCreateDashboardModal = false;
       this.$router.push('/dashboard/' + dashboard._id);
     },
+    async confirmOverwriteDashboard() {
+      if (!this.canOverwriteDashboard) {
+        this.overwriteError = 'This chat is not linked to a dashboard.';
+        return;
+      }
+
+      this.overwriteDashboardCode = this.codeEditor?.getValue?.() ?? this.script;
+
+      const params = {
+        dashboardId: this.targetDashboardId,
+        code: this.overwriteDashboardCode
+      };
+
+      const { doc } = await api.Dashboard.updateDashboard(params).catch(err => {
+        if (err.response?.data?.message) {
+          const message = err.response.data.message.split(': ').slice(1).join(': ');
+          this.overwriteError = message;
+          throw new Error(err.response?.data?.message);
+        }
+        throw err;
+      });
+
+      this.overwriteError = null;
+      this.showOverwriteDashboardConfirmationModal = false;
+      this.$router.push('/dashboard/' + doc._id);
+    },
     async copyOutput() {
       const executionResult = this.message.executionResult || {};
       let output = executionResult.output;
@@ -892,7 +932,7 @@ module.exports = app => app.component('chat-message-script', {
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"relative flex items-start\" :class=\"{'justify-end': message.role === 'user'}\">\n  <div\n    class=\"min-w-0 max-w-[calc(100vw-3rem)] lg:max-w-[calc(100vw-15rem)]\"\n    :class=\"{'text-right': message.role === 'user'}\">\n\n    <div class=\"text-sm text-gray-900 rounded-md inline-block relative\" :class=\"styleForMessage\">\n      <div v-for=\"part in contentSplitByScripts\">\n        <div v-if=\"part.type === 'text'\" v-html=\"marked(part.content)\">\n        </div>\n        <div v-else-if=\"part.type === 'code'\">\n          <chat-message-script :message=\"message\" :script=\"part.content\" :language=\"part.language\" @copyMessage=\"copyMessage\"></chat-message-script>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
+module.exports = "<div class=\"relative flex items-start\" :class=\"{'justify-end': message.role === 'user'}\">\n  <div\n    class=\"min-w-0 max-w-[calc(100vw-3rem)] lg:max-w-[calc(100vw-15rem)]\"\n    :class=\"{'text-right': message.role === 'user'}\">\n\n    <div class=\"text-sm text-gray-900 rounded-md inline-block relative\" :class=\"styleForMessage\">\n      <div v-for=\"part in contentSplitByScripts\">\n        <div v-if=\"part.type === 'text'\" v-html=\"marked(part.content)\">\n        </div>\n        <div v-else-if=\"part.type === 'code'\">\n          <chat-message-script\n            :message=\"message\"\n            :script=\"part.content\"\n            :language=\"part.language\"\n            :target-dashboard-id=\"targetDashboardId\"\n            @copyMessage=\"copyMessage\"></chat-message-script>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -912,7 +952,7 @@ const template = __webpack_require__(/*! ./chat-message.html */ "./frontend/src/
 
 module.exports = app => app.component('chat-message', {
   template: template,
-  props: ['message'],
+  props: ['message', 'targetDashboardId'],
   computed: {
     styleForMessage() {
       return this.message.role === 'user' ? 'p-3 bg-gray-100' : 'py-3 pr-3';
@@ -1012,7 +1052,7 @@ module.exports = app => app.component('chat-message', {
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"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  <button\n    class=\"fixed top-[65px] right-4 z-10 p-2 rounded-md shadow bg-white\"\n    :class=\"hasWorkspace ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 cursor-not-allowed bg-gray-50'\"\n    @click=\"toggleShareThread\"\n    :disabled=\"!hasWorkspace || !chatThreadId || sharingThread\"\n    aria-label=\"Share thread with workspace\"\n    title=\"Share thread with workspace\"\n  >\n    <svg v-if=\"hasWorkspace\" xmlns=\"http://www.w3.org/2000/svg\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a2.48 2.48 0 0 0 0-1.39l7.02-4.11a2.5 2.5 0 1 0-.87-1.37L8.04 9.94a2.5 2.5 0 1 0 0 4.12l7.12 4.16a2.5 2.5 0 1 0 .84-1.34l-7.05-4.12c-.04-.02-.08-.05-.11-.07a2.48 2.48 0 0 0 0-1.39c.03-.02.07-.04.11-.07l7.11-4.16c.52.47 1.2.76 1.94.76a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0-1.94.94L7.97 8.43a2.5 2.5 0 1 0 0 7.14l9.09 5.3c.52-.47 1.2-.76 1.94-.76a2.5 2.5 0 1 0 0-5z\"/></svg>\n    <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9zm9 2v9H6v-9h12z\"/></svg>\n  </button>\n  <!-- Sidebar: Chat Threads -->\n  <aside class=\"bg-gray-50 border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-64 fixed lg:relative\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-64' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-64 overflow-x-hidden\">\n      <div class=\"p-4 font-bold text-lg\">Chat Threads</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    <div class=\"p-4 w-64\">\n      <async-button\n        @click=\"createNewThread\"\n        class=\"w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700\"\n      >\n        Create New Thread\n      </async-button>\n    </div>\n    <div v-if=\"status === 'loaded' && chatThreads.length === 0\" class=\"p-4 text-sm text-gray-700\">\n      No threads yet\n    </div>\n    <ul v-if=\"status === 'loaded'\" class=\"w-64\">\n      <li\n        v-for=\"thread in chatThreads\"\n        :key=\"thread._id\"\n        @click=\"selectThread(thread._id)\"\n        class=\"p-4 hover:bg-gray-200 cursor-pointer w-64\"\n        :class=\"{ 'bg-gray-300': thread._id === chatThreadId }\"\n      >\n        {{ thread.title || 'Untitled Thread' }}\n      </li>\n    </ul>\n  </aside>\n\n  <!-- Main Chat Area -->\n  <main class=\"flex-1 flex flex-col\">\n    <div class=\"flex-1 overflow-y-auto p-6 space-y-4\" ref=\"messagesContainer\">\n      <ul role=\"list\" class=\"space-y-4\">\n        <div v-if=\"true\">\n          <div class=\"flex items-center justify-center py-3 mb-4\">\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n            <p class=\"mx-4 text-sm font-medium text-gray-500\">This is the beginning of the message thread</p>\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n          </div>\n        </div>\n        <li v-for=\"message in chatMessages\" :key=\"message._id\">\n          <chat-message :message=\"message\"></chat-message>\n        </li>\n      </ul>\n    </div>\n\n\n    <!-- Input Area -->\n    <div class=\"border-t p-4\">\n      <form @submit.prevent=\"sendMessage\" :disabled=\"sendingMessage\" class=\"flex gap-2 items-end justify-end\">\n        <textarea\n          v-model=\"newMessage\"\n          :placeholder=\"sendingMessage ? 'Sending...' : 'Ask something...'\"\n          class=\"flex-1 border rounded px-4 py-2 resize-none overflow-y-auto\"\n          :disabled=\"sendingMessage\"\n          rows=\"1\"\n          ref=\"messageInput\"\n          @input=\"adjustTextareaHeight\"\n          @keydown.enter.exact.prevent=\"handleEnter\"\n        ></textarea>\n        <button class=\"bg-blue-600 text-white px-4 h-[42px] rounded disabled:bg-gray-600\" :disabled=\"sendingMessage\">\n          <svg v-if=\"sendingMessage\" style=\"height: 1em\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.3\" />\n              <path d=\"M12 2a10 10 0 0 1 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n                <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\" />\n              </path>\n            </g>\n          </svg>\n          <span v-else>Send</span>\n        </button>\n      </form>\n    </div>\n  </main>\n</div>\n";
+module.exports = "<div class=\"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  <button\n    class=\"fixed top-[65px] right-4 z-10 p-2 rounded-md shadow bg-white\"\n    :class=\"hasWorkspace ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 cursor-not-allowed bg-gray-50'\"\n    @click=\"toggleShareThread\"\n    :disabled=\"!hasWorkspace || !chatThreadId || sharingThread\"\n    aria-label=\"Share thread with workspace\"\n    title=\"Share thread with workspace\"\n  >\n    <svg v-if=\"hasWorkspace\" xmlns=\"http://www.w3.org/2000/svg\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a2.48 2.48 0 0 0 0-1.39l7.02-4.11a2.5 2.5 0 1 0-.87-1.37L8.04 9.94a2.5 2.5 0 1 0 0 4.12l7.12 4.16a2.5 2.5 0 1 0 .84-1.34l-7.05-4.12c-.04-.02-.08-.05-.11-.07a2.48 2.48 0 0 0 0-1.39c.03-.02.07-.04.11-.07l7.11-4.16c.52.47 1.2.76 1.94.76a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0-1.94.94L7.97 8.43a2.5 2.5 0 1 0 0 7.14l9.09 5.3c.52-.47 1.2-.76 1.94-.76a2.5 2.5 0 1 0 0-5z\"/></svg>\n    <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9zm9 2v9H6v-9h12z\"/></svg>\n  </button>\n  <!-- Sidebar: Chat Threads -->\n  <aside class=\"bg-gray-50 border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-64 fixed lg:relative\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-64' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-64 overflow-x-hidden\">\n      <div class=\"p-4 font-bold text-lg\">Chat Threads</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    <div class=\"p-4 w-64\">\n      <async-button\n        @click=\"createNewThread\"\n        class=\"w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700\"\n      >\n        Create New Thread\n      </async-button>\n    </div>\n    <div v-if=\"status === 'loaded' && chatThreads.length === 0\" class=\"p-4 text-sm text-gray-700\">\n      No threads yet\n    </div>\n    <ul v-if=\"status === 'loaded'\" class=\"w-64\">\n      <li\n        v-for=\"thread in chatThreads\"\n        :key=\"thread._id\"\n        @click=\"selectThread(thread._id)\"\n        class=\"p-4 hover:bg-gray-200 cursor-pointer w-64\"\n        :class=\"{ 'bg-gray-300': thread._id === chatThreadId }\"\n      >\n        {{ thread.title || 'Untitled Thread' }}\n      </li>\n    </ul>\n  </aside>\n\n  <!-- Main Chat Area -->\n  <main class=\"flex-1 flex flex-col\">\n    <div class=\"flex-1 overflow-y-auto p-6 space-y-4\" ref=\"messagesContainer\">\n      <ul role=\"list\" class=\"space-y-4\">\n        <div v-if=\"true\">\n          <div class=\"flex items-center justify-center py-3 mb-4\">\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n            <p class=\"mx-4 text-sm font-medium text-gray-500\">This is the beginning of the message thread</p>\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n          </div>\n        </div>\n        <li v-for=\"message in chatMessages\" :key=\"message._id\">\n          <chat-message :message=\"message\" :target-dashboard-id=\"currentThread?.dashboardId\"></chat-message>\n        </li>\n      </ul>\n    </div>\n\n\n    <!-- Input Area -->\n    <div class=\"border-t p-4\">\n      <form @submit.prevent=\"sendMessage\" :disabled=\"sendingMessage\" class=\"flex gap-2 items-end justify-end\">\n        <textarea\n          v-model=\"newMessage\"\n          :placeholder=\"sendingMessage ? 'Sending...' : 'Ask something...'\"\n          class=\"flex-1 border rounded px-4 py-2 resize-none overflow-y-auto\"\n          :disabled=\"sendingMessage\"\n          rows=\"1\"\n          ref=\"messageInput\"\n          @input=\"adjustTextareaHeight\"\n          @keydown.enter.exact.prevent=\"handleEnter\"\n        ></textarea>\n        <button class=\"bg-blue-600 text-white px-4 h-[42px] rounded disabled:bg-gray-600\" :disabled=\"sendingMessage\">\n          <svg v-if=\"sendingMessage\" style=\"height: 1em\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.3\" />\n              <path d=\"M12 2a10 10 0 0 1 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n                <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\" />\n              </path>\n            </g>\n          </svg>\n          <span v-else>Send</span>\n        </button>\n      </form>\n    </div>\n  </main>\n</div>\n";
 
 /***/ }),
 
@@ -1832,7 +1872,7 @@ module.exports = app => app.component('dashboard-text', {
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"status === 'loading'\" class=\"max-w-5xl mx-auto text-center\">\n    <img src=\"images/loader.gif\" class=\"inline mt-10\">\n  </div>\n  <div v-if=\"dashboard && status !== 'loading'\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\" v-if=\"!showEditor\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{title}}</h2>\n      <div class=\"flex gap-2\">\n        <button\n          @click=\"showEditor = true\"\n          type=\"button\"\n          :disabled=\"status === 'evaluating'\"\n          class=\"flex items-center 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-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\">\n          <img src=\"images/edit.svg\" class=\"inline h-[1.25em] mr-1\" /> Edit\n        </button>\n\n        <async-button\n          @click=\"evaluateDashboard\"\n          type=\"button\"\n          :disabled=\"status === 'evaluating'\"\n          class=\"flex items-center rounded-md bg-ultramarine-600 px-4 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-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\"\n        >\n          <svg class=\"inline h-[1.25em] mr-1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"m670-140 160-100-160-100v200ZM240-600h480v-80H240v80ZM720-40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40ZM120-80v-680q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v267q-19-9-39-15t-41-9v-243H200v562h243q5 31 15.5 59T486-86l-6 6-60-60-60 60-60-60-60 60-60-60-60 60Zm120-200h203q3-21 9-41t15-39H240v80Zm0-160h284q38-37 88.5-58.5T720-520H240v80Zm-40 242v-562 562Z\"/></svg>\n          Evaluate\n        </async-button>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <div v-if=\"dashboardResults.length === 0\">\n        <div class=\"flex flex-col items-center justify-center py-8\">\n          <p class=\"text-gray-700 text-base mb-4\">This dashboard hasn't been evaluated yet.</p>\n          <async-button\n            @click=\"evaluateDashboard\"\n            type=\"button\"\n            :disabled=\"status === 'evaluating'\"\n            class=\"rounded-md bg-ultramarine-600 px-4 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 disabled:cursor-not-allowed disabled:bg-gray-600\"\n          >\n            Evaluate Dashboard\n          </async-button>\n        </div>\n      </div>\n      <div v-else-if=\"dashboardResult\">\n        <div class=\"relative\">\n          <div v-if=\"status === 'evaluating'\" class=\"absolute inset-0 flex items-center justify-center bg-white bg-opacity-60 z-10 flex flex-col gap-2\">\n            <div>Evaluating Dashboard...</div>\n            <img src=\"images/loader.gif\" class=\"h-12 w-12\" alt=\"Loading...\" />\n          </div>\n          <div v-else-if=\"dashboardResult.error\" class=\"rounded-md bg-red-50 p-4 mt-4\">\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\" data-slot=\"icon\">\n                  <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-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\">{{dashboardResult.error.message || 'Unknown Error'}}</h3>\n              </div>\n            </div>\n          </div>\n          <dashboard-result\n            v-else\n            :key=\"dashboardResult.finishedEvaluatingAt\"\n            :result=\"dashboardResult.result\"\n            :finishedEvaluatingAt=\"dashboardResult.finishedEvaluatingAt\"\n            @fullscreen=\"showDetailModal = true\"\n            class=\"h-[40vh]\"\n          >\n          </dashboard-result>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"showEditor\" class=\"mt-4\">\n      <edit-dashboard\n        :dashboardId=\"dashboard._id\"\n        :code=\"code\"\n        :currentDescription=\"description\"\n        :currentTitle=\"title\"\n        @close=\"showEditor=false;\"\n        @update=\"updateCode\"></edit-dashboard>\n    </div>\n\n  </div>\n  <div v-if=\"!dashboard && status !== 'loading'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>\n\n<modal\n  v-if=\"showDetailModal\"\n  containerClass=\"!h-[90vh] !w-[90vw]\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Dashboard Details\"\n>\n  <template #body>\n    <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n    <div class=\"h-full overflow-auto\">\n      <dashboard-result\n        v-if=\"dashboardResult\"\n        :result=\"dashboardResult.result\"\n        :finishedEvaluatingAt=\"dashboardResult.finishedEvaluatingAt\"\n        :fullscreen=\"true\"\n        :responsive=\"true\">\n      </dashboard-result>\n    </div>\n  </template>\n</modal>\n";
+module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"status === 'loading'\" class=\"max-w-5xl mx-auto text-center\">\n    <img src=\"images/loader.gif\" class=\"inline mt-10\">\n  </div>\n  <div v-if=\"dashboard && status !== 'loading'\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\" v-if=\"!showEditor\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{title}}</h2>\n      <div class=\"flex gap-2\">\n        <button\n          @click=\"showEditor = true\"\n          type=\"button\"\n          :disabled=\"status === 'evaluating'\"\n          class=\"flex items-center 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-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\">\n          <img src=\"images/edit.svg\" class=\"inline h-[1.25em] mr-1\" /> Edit\n        </button>\n\n        <async-button\n          @click=\"evaluateDashboard\"\n          type=\"button\"\n          :disabled=\"status === 'evaluating'\"\n          class=\"flex items-center rounded-md bg-ultramarine-600 px-4 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-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\"\n        >\n          <svg class=\"inline h-[1.25em] mr-1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"m670-140 160-100-160-100v200ZM240-600h480v-80H240v80ZM720-40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40ZM120-80v-680q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v267q-19-9-39-15t-41-9v-243H200v562h243q5 31 15.5 59T486-86l-6 6-60-60-60 60-60-60-60 60-60-60-60 60Zm120-200h203q3-21 9-41t15-39H240v80Zm0-160h284q38-37 88.5-58.5T720-520H240v80Zm-40 242v-562 562Z\"/></svg>\n          Evaluate\n        </async-button>\n        <div class=\"relative\" ref=\"actionsMenu\">\n          <button\n            type=\"button\"\n            @click.stop=\"toggleActionsMenu\"\n            class=\"flex items-center rounded-md bg-gray-100 px-3 py-1.5 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\"\n            aria-haspopup=\"true\"\n            :aria-expanded=\"showActionsMenu\"\n          >\n            More\n            <svg class=\"ml-1 h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"m6 9 6 6 6-6\" />\n            </svg>\n          </button>\n          <div\n            v-if=\"showActionsMenu\"\n            class=\"absolute right-0 mt-2 w-44 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 z-20\"\n            role=\"menu\"\n            aria-label=\"Dashboard actions\"\n          >\n            <button\n              type=\"button\"\n              :disabled=\"startingChat\"\n              @click.stop=\"startChatWithDashboard\"\n              class=\"flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-gray-700 hover:bg-ultramarine-100 disabled:cursor-not-allowed disabled:text-gray-400\"\n              role=\"menuitem\"\n            >\n              <svg class=\"h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M8 10h.01M12 10h.01M16 10h.01m-8 4h8m-9 5 10-3.333L7 12.333 3 14l.667-4.333L9 7l4-3 4.333 2.667L21 11l-3 3.667V19a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1z\" />\n              </svg>\n              Start Chat\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <div v-if=\"dashboardResults.length === 0\">\n        <div class=\"flex flex-col items-center justify-center py-8\">\n          <p class=\"text-gray-700 text-base mb-4\">This dashboard hasn't been evaluated yet.</p>\n          <async-button\n            @click=\"evaluateDashboard\"\n            type=\"button\"\n            :disabled=\"status === 'evaluating'\"\n            class=\"rounded-md bg-ultramarine-600 px-4 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 disabled:cursor-not-allowed disabled:bg-gray-600\"\n          >\n            Evaluate Dashboard\n          </async-button>\n        </div>\n      </div>\n      <div v-else-if=\"dashboardResult\">\n        <div class=\"relative\">\n          <div v-if=\"status === 'evaluating'\" class=\"absolute inset-0 flex items-center justify-center bg-white bg-opacity-60 z-10 flex flex-col gap-2\">\n            <div>Evaluating Dashboard...</div>\n            <img src=\"images/loader.gif\" class=\"h-12 w-12\" alt=\"Loading...\" />\n          </div>\n          <div v-else-if=\"dashboardResult.error\" class=\"rounded-md bg-red-50 p-4 mt-4\">\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\" data-slot=\"icon\">\n                  <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-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\">{{dashboardResult.error.message || 'Unknown Error'}}</h3>\n              </div>\n            </div>\n          </div>\n          <dashboard-result\n            v-else\n            :key=\"dashboardResult.finishedEvaluatingAt\"\n            :result=\"dashboardResult.result\"\n            :finishedEvaluatingAt=\"dashboardResult.finishedEvaluatingAt\"\n            @fullscreen=\"showDetailModal = true\"\n            class=\"h-[40vh]\"\n          >\n          </dashboard-result>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"showEditor\" class=\"mt-4\">\n      <edit-dashboard\n        :dashboardId=\"dashboard._id\"\n        :code=\"code\"\n        :currentDescription=\"description\"\n        :currentTitle=\"title\"\n        @close=\"showEditor=false;\"\n        @update=\"updateCode\"></edit-dashboard>\n    </div>\n\n  </div>\n  <div v-if=\"!dashboard && status !== 'loading'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>\n\n<modal\n  v-if=\"showDetailModal\"\n  containerClass=\"!h-[90vh] !w-[90vw]\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Dashboard Details\"\n>\n  <template #body>\n    <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n    <div class=\"h-full overflow-auto\">\n      <dashboard-result\n        v-if=\"dashboardResult\"\n        :result=\"dashboardResult.result\"\n        :finishedEvaluatingAt=\"dashboardResult.finishedEvaluatingAt\"\n        :fullscreen=\"true\"\n        :responsive=\"true\">\n      </dashboard-result>\n    </div>\n  </template>\n</modal>\n";
 
 /***/ }),
 
@@ -1861,7 +1901,9 @@ module.exports = app => app.component('dashboard', {
       dashboard: null,
       dashboardResults: [],
       errorMessage: null,
-      showDetailModal: false
+      showDetailModal: false,
+      startingChat: false,
+      showActionsMenu: false
     };
   },
   methods: {
@@ -1908,6 +1950,55 @@ module.exports = app => app.component('dashboard', {
       }
 
       return finishedAt < sixHoursAgo;
+    },
+    toggleActionsMenu() {
+      this.showActionsMenu = !this.showActionsMenu;
+    },
+    closeActionsMenu() {
+      this.showActionsMenu = false;
+    },
+    handleDocumentClick(ev) {
+      if (!this.showActionsMenu) {
+        return;
+      }
+      const menuEl = this.$refs.actionsMenu;
+      if (!menuEl) {
+        return;
+      }
+      if (!menuEl.contains(ev.target)) {
+        this.closeActionsMenu();
+      }
+    },
+    async startChatWithDashboard() {
+      if (this.startingChat) {
+        return;
+      }
+
+      this.startingChat = true;
+      try {
+        const description = this.description?.trim();
+        const parts = [
+          'I want to edit this dashboard.',
+          `Title: ${this.title || 'Untitled Dashboard'}`
+        ];
+
+        if (description) {
+          parts.push(`Description: ${description}`);
+        }
+
+        parts.push('Here is the current dashboard code:', '```javascript', this.code, '```');
+
+        const initialMessage = parts.join('\n\n');
+
+        const { chatThread } = await api.ChatThread.createChatThread({
+          initialMessage,
+          dashboardId: this.dashboard?._id
+        });
+        this.$router.push('/chat/' + chatThread._id);
+      } finally {
+        this.startingChat = false;
+        this.showActionsMenu = false;
+      }
     }
   },
   computed: {
@@ -1916,6 +2007,7 @@ module.exports = app => app.component('dashboard', {
     }
   },
   mounted: async function() {
+    document.addEventListener('click', this.handleDocumentClick);
     this.showEditor = this.$route.query.edit;
     const { dashboard, dashboardResults, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: false });
     if (!dashboard) {
@@ -1931,7 +2023,10 @@ module.exports = app => app.component('dashboard', {
       return;
     }
     this.status = 'loaded';
-  }
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleDocumentClick);
+  },
 });
 
 
@@ -16939,7 +17034,7 @@ module.exports = function stringToParts(str) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.1.12","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/google":"2.x","@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"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.1.13","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/google":"2.x","@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

@@ -1016,6 +1016,10 @@ video {
   width: 1rem;
 }
 
+.w-44 {
+  width: 11rem;
+}
+
 .w-48 {
   width: 12rem;
 }
@@ -1364,6 +1368,10 @@ video {
   overflow-wrap: break-word;
 }
 
+.break-all {
+  word-break: break-all;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -2698,6 +2706,11 @@ video {
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
+.disabled\:text-gray-400:disabled {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }

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

@@ -8,7 +8,12 @@
         <div v-if="part.type === 'text'" v-html="marked(part.content)">
         </div>
         <div v-else-if="part.type === 'code'">
-          <chat-message-script :message="message" :script="part.content" :language="part.language" @copyMessage="copyMessage"></chat-message-script>
+          <chat-message-script
+            :message="message"
+            :script="part.content"
+            :language="part.language"
+            :target-dashboard-id="targetDashboardId"
+            @copyMessage="copyMessage"></chat-message-script>
         </div>
       </div>
     </div>

package/frontend/src/chat/chat-message/chat-message.js

@@ -7,7 +7,7 @@ const template = require('./chat-message.html');
 
 module.exports = app => app.component('chat-message', {
   template: template,
-  props: ['message'],
+  props: ['message', 'targetDashboardId'],
   computed: {
     styleForMessage() {
       return this.message.role === 'user' ? 'p-3 bg-gray-100' : 'py-3 pr-3';

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

@@ -59,6 +59,12 @@
             @click="openCreateDashboardModal(); showDropdown = false">
             Create Dashboard
           </button>
+          <button
+            v-if="canOverwriteDashboard"
+            class="block w-full text-left px-4 py-2 text-xs text-gray-700 hover:bg-gray-100"
+            @click="openOverwriteDashboardConfirmation(); showDropdown = false">
+            Overwrite Dashboard
+          </button>
           <button
             class="block w-full text-left px-4 py-2 text-xs text-gray-700 hover:bg-gray-100"
             @click="$emit('copyMessage'); showDropdown = false">
@@ -138,7 +144,7 @@
           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">
           Submit
         </async-button>
-        <div v-if="createErrors.length > 0" class="rounded-md bg-red-50 p-4 mt-1">
+        <div v-if="createError" class="rounded-md bg-red-50 p-4 mt-1">
           <div class="flex">
             <div class="flex-shrink-0">
               <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -156,4 +162,48 @@
       </div>
     </template>
   </modal>
+  <modal v-if="showOverwriteDashboardConfirmationModal">
+    <template #body>
+      <div class="modal-exit" @click="showOverwriteDashboardConfirmationModal = false">&times;</div>
+      <div>
+        <div class="mt-4 text-gray-900 font-semibold">Overwrite Dashboard</div>
+        <p class="mt-2 text-sm text-gray-700">
+          This will replace the linked dashboard's code with the script below.
+        </p>
+        <p class="mt-1 text-xs text-gray-600 break-all" v-if="targetDashboardId">
+          Dashboard ID: {{ targetDashboardId }}
+        </p>
+        <div class="my-4 border border-gray-200 bg-gray-50 rounded">
+          <pre class="p-2 h-[300px] overflow-auto whitespace-pre-wrap text-xs">{{ overwriteDashboardCode }}</pre>
+        </div>
+        <div class="flex items-center gap-2">
+          <async-button
+            @click="confirmOverwriteDashboard"
+            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">
+            Confirm Overwrite
+          </async-button>
+          <button
+            class="px-2.5 py-1.5 rounded-md text-sm font-semibold text-gray-700 bg-gray-200 hover:bg-gray-300"
+            @click="showOverwriteDashboardConfirmationModal = false">
+            Cancel
+          </button>
+        </div>
+        <div v-if="overwriteError" class="rounded-md bg-red-50 p-4 mt-3">
+          <div class="flex">
+            <div class="flex-shrink-0">
+              <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <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" />
+              </svg>
+            </div>
+            <div class="ml-3">
+              <h3 class="text-sm font-medium text-red-800">Error</h3>
+              <div class="mt-2 text-sm text-red-700">
+                {{overwriteError}}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </modal>
 </div>

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

@@ -7,13 +7,14 @@ const vanillatoasts = require('vanillatoasts');
 
 module.exports = app => app.component('chat-message-script', {
   template,
-  props: ['message', 'script', 'language'],
+  props: ['message', 'script', 'language', 'targetDashboardId'],
   emits: ['copyMessage'],
   data() {
     return {
       activeTab: 'code',
       showDetailModal: false,
       showCreateDashboardModal: false,
+      showOverwriteDashboardConfirmationModal: false,
       showDropdown: false,
       newDashboardTitle: '',
       dashboardCode: '',
@@ -21,12 +22,17 @@ module.exports = app => app.component('chat-message-script', {
       dashboardEditor: null,
       isEditing: false,
       codeEditor: null,
-      editedScript: null
+      editedScript: null,
+      overwriteDashboardCode: '',
+      overwriteError: null
     };
   },
   computed: {
     styleForMessage() {
       return this.message.role === 'user' ? 'bg-gray-100' : '';
+    },
+    canOverwriteDashboard() {
+      return !!this.targetDashboardId;
     }
   },
   methods: {
@@ -58,7 +64,7 @@ module.exports = app => app.component('chat-message-script', {
     openCreateDashboardModal() {
       this.newDashboardTitle = '';
       this.dashboardCode = this.script;
-      this.createErrors = [];
+      this.createError = null;
       this.showCreateDashboardModal = true;
       this.$nextTick(() => {
         if (this.dashboardEditor) {
@@ -74,6 +80,14 @@ module.exports = app => app.component('chat-message-script', {
         });
       });
     },
+    openOverwriteDashboardConfirmation() {
+      if (!this.canOverwriteDashboard) {
+        return;
+      }
+      this.overwriteDashboardCode = this.codeEditor?.getValue?.() ?? this.script;
+      this.overwriteError = null;
+      this.showOverwriteDashboardConfirmationModal = true;
+    },
     toggleDropdown() {
       this.showDropdown = !this.showDropdown;
     },
@@ -146,6 +160,32 @@ module.exports = app => app.component('chat-message-script', {
       this.showCreateDashboardModal = false;
       this.$router.push('/dashboard/' + dashboard._id);
     },
+    async confirmOverwriteDashboard() {
+      if (!this.canOverwriteDashboard) {
+        this.overwriteError = 'This chat is not linked to a dashboard.';
+        return;
+      }
+
+      this.overwriteDashboardCode = this.codeEditor?.getValue?.() ?? this.script;
+
+      const params = {
+        dashboardId: this.targetDashboardId,
+        code: this.overwriteDashboardCode
+      };
+
+      const { doc } = await api.Dashboard.updateDashboard(params).catch(err => {
+        if (err.response?.data?.message) {
+          const message = err.response.data.message.split(': ').slice(1).join(': ');
+          this.overwriteError = message;
+          throw new Error(err.response?.data?.message);
+        }
+        throw err;
+      });
+
+      this.overwriteError = null;
+      this.showOverwriteDashboardConfirmationModal = false;
+      this.$router.push('/dashboard/' + doc._id);
+    },
     async copyOutput() {
       const executionResult = this.message.executionResult || {};
       let output = executionResult.output;

package/frontend/src/chat/chat.html

@@ -61,7 +61,7 @@
           </div>
         </div>
         <li v-for="message in chatMessages" :key="message._id">
-          <chat-message :message="message"></chat-message>
+          <chat-message :message="message" :target-dashboard-id="currentThread?.dashboardId"></chat-message>
         </li>
       </ul>
     </div>

package/frontend/src/dashboard/dashboard.html

@@ -23,6 +23,39 @@
           <svg class="inline h-[1.25em] mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="m670-140 160-100-160-100v200ZM240-600h480v-80H240v80ZM720-40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40ZM120-80v-680q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v267q-19-9-39-15t-41-9v-243H200v562h243q5 31 15.5 59T486-86l-6 6-60-60-60 60-60-60-60 60-60-60-60 60Zm120-200h203q3-21 9-41t15-39H240v80Zm0-160h284q38-37 88.5-58.5T720-520H240v80Zm-40 242v-562 562Z"/></svg>
           Evaluate
         </async-button>
+        <div class="relative" ref="actionsMenu">
+          <button
+            type="button"
+            @click.stop="toggleActionsMenu"
+            class="flex items-center rounded-md bg-gray-100 px-3 py-1.5 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500"
+            aria-haspopup="true"
+            :aria-expanded="showActionsMenu"
+          >
+            More
+            <svg class="ml-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m6 9 6 6 6-6" />
+            </svg>
+          </button>
+          <div
+            v-if="showActionsMenu"
+            class="absolute right-0 mt-2 w-44 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 z-20"
+            role="menu"
+            aria-label="Dashboard actions"
+          >
+            <button
+              type="button"
+              :disabled="startingChat"
+              @click.stop="startChatWithDashboard"
+              class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-gray-700 hover:bg-ultramarine-100 disabled:cursor-not-allowed disabled:text-gray-400"
+              role="menuitem"
+            >
+              <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01m-8 4h8m-9 5 10-3.333L7 12.333 3 14l.667-4.333L9 7l4-3 4.333 2.667L21 11l-3 3.667V19a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1z" />
+              </svg>
+              Start Chat
+            </button>
+          </div>
+        </div>
       </div>
     </div>
     <div v-if="!showEditor" class="mt-4 mb-4">

package/frontend/src/dashboard/dashboard.js

@@ -16,7 +16,9 @@ module.exports = app => app.component('dashboard', {
       dashboard: null,
       dashboardResults: [],
       errorMessage: null,
-      showDetailModal: false
+      showDetailModal: false,
+      startingChat: false,
+      showActionsMenu: false
     };
   },
   methods: {
@@ -63,6 +65,55 @@ module.exports = app => app.component('dashboard', {
       }
 
       return finishedAt < sixHoursAgo;
+    },
+    toggleActionsMenu() {
+      this.showActionsMenu = !this.showActionsMenu;
+    },
+    closeActionsMenu() {
+      this.showActionsMenu = false;
+    },
+    handleDocumentClick(ev) {
+      if (!this.showActionsMenu) {
+        return;
+      }
+      const menuEl = this.$refs.actionsMenu;
+      if (!menuEl) {
+        return;
+      }
+      if (!menuEl.contains(ev.target)) {
+        this.closeActionsMenu();
+      }
+    },
+    async startChatWithDashboard() {
+      if (this.startingChat) {
+        return;
+      }
+
+      this.startingChat = true;
+      try {
+        const description = this.description?.trim();
+        const parts = [
+          'I want to edit this dashboard.',
+          `Title: ${this.title || 'Untitled Dashboard'}`
+        ];
+
+        if (description) {
+          parts.push(`Description: ${description}`);
+        }
+
+        parts.push('Here is the current dashboard code:', '```javascript', this.code, '```');
+
+        const initialMessage = parts.join('\n\n');
+
+        const { chatThread } = await api.ChatThread.createChatThread({
+          initialMessage,
+          dashboardId: this.dashboard?._id
+        });
+        this.$router.push('/chat/' + chatThread._id);
+      } finally {
+        this.startingChat = false;
+        this.showActionsMenu = false;
+      }
     }
   },
   computed: {
@@ -71,6 +122,7 @@ module.exports = app => app.component('dashboard', {
     }
   },
   mounted: async function() {
+    document.addEventListener('click', this.handleDocumentClick);
     this.showEditor = this.$route.query.edit;
     const { dashboard, dashboardResults, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: false });
     if (!dashboard) {
@@ -86,5 +138,8 @@ module.exports = app => app.component('dashboard', {
       return;
     }
     this.status = 'loaded';
-  }
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleDocumentClick);
+  },
 });

package/package.json

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