@mongoosejs/studio 0.0.103 → 0.0.105

package/frontend/public/app.js

@@ -330,7 +330,17 @@ const vanillatoasts = __webpack_require__(/*! vanillatoasts */ "./node_modules/v
 module.exports = app => app.component('chat-message-script', {
   template,
   props: ['message', 'script', 'language'],
-  data: () => ({ activeTab: 'code', showDetailModal: false }),
+  data() {
+    return {
+      activeTab: 'code',
+      showDetailModal: false,
+      showCreateDashboardModal: false,
+      newDashboardTitle: '',
+      dashboardCode: '',
+      createError: null,
+      dashboardEditor: null
+    };
+  },
   computed: {
     styleForMessage() {
       return this.message.role === 'user' ? 'bg-gray-100' : '';
@@ -348,6 +358,42 @@ module.exports = app => app.component('chat-message-script', {
     openDetailModal() {
       this.showDetailModal = true;
     },
+    openCreateDashboardModal() {
+      this.newDashboardTitle = '';
+      this.dashboardCode = this.script;
+      this.createErrors = [];
+      this.showCreateDashboardModal = true;
+      this.$nextTick(() => {
+        if (this.dashboardEditor) {
+          this.dashboardEditor.toTextArea();
+        }
+        this.$refs.dashboardCodeEditor.value = this.dashboardCode;
+        this.dashboardEditor = CodeMirror.fromTextArea(this.$refs.dashboardCodeEditor, {
+          mode: 'javascript',
+          lineNumbers: true
+        });
+        this.dashboardEditor.on('change', () => {
+          this.dashboardCode = this.dashboardEditor.getValue();
+        });
+      });
+    },
+    async createDashboardFromScript() {
+      this.dashboardCode = this.dashboardEditor.getValue();
+      const { dashboard } = await api.Dashboard.createDashboard({
+        code: this.dashboardCode,
+        title: this.newDashboardTitle
+      }).catch(err => {
+        if (err.response?.data?.message) {
+          const message = err.response.data.message.split(': ').slice(1).join(': ');
+          this.createError = message;
+          throw new Error(err.response?.data?.message);
+        }
+        throw err;
+      });
+      this.createError = null;
+      this.showCreateDashboardModal = false;
+      this.$router.push('/dashboard/' + dashboard._id);
+    },
     async copyOutput() {
       await navigator.clipboard.writeText(this.message.executionResult.output);
       vanillatoasts.create({
@@ -359,6 +405,14 @@ module.exports = app => app.component('chat-message-script', {
       });
     }
   },
+  watch: {
+    showCreateDashboardModal(val) {
+      if (!val && this.dashboardEditor) {
+        this.dashboardEditor.toTextArea();
+        this.dashboardEditor = null;
+      }
+    }
+  },
   mounted() {
     Prism.highlightElement(this.$refs.code);
     if (this.message.executionResult?.output) {
@@ -3962,7 +4016,7 @@ module.exports = "<button v-bind=\"attrsToBind\" :disabled=\"isDisabled\" @click
 /***/ ((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      <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(message, script)\">\n        Execute\n      </async-button>\n    </div>\n  </div>\n\n  <pre class=\"p-3 whitespace-pre-wrap max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\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    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>\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</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        class=\"px-2 py-1 mr-1 text-xs bg-ultramarine-500 text-white border-none rounded cursor-pointer hover:bg-ultramarine-600 transition-colors flex items-center\"\n        @click=\"openCreateDashboardModal\">\n        Create Dashboard\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(message, script)\">\n        Execute\n      </async-button>\n    </div>\n  </div>\n\n  <pre class=\"p-3 whitespace-pre-wrap max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\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    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>\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";
 
 /***/ }),
 
@@ -4193,7 +4247,7 @@ module.exports = ".document-details {\n    width: 100%;\n  }\n  \n  .document-de
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div>\n  <div class=\"relative path-key p-1 flex\">\n    <div class=\"grow\">\n      {{path.path}}\n      <span class=\"path-type\">\n        ({{(path.instance || 'unknown').toLowerCase()}})\n      </span>\n    </div>\n    <div v-if=\"editting && path.instance === 'Date'\" class=\"flex gap-1.5\">\n      <div\n        @click=\"dateType = 'picker'\"\n        :class=\"dateType === 'picker' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'picker' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          Date Picker\n        </div>\n      </div>\n      <div\n        @click=\"dateType = 'iso'\"\n        :class=\"dateType === 'iso' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'iso' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          ISO String\n        </div>\n      </div>\n    </div>\n  </div>\n  <div v-if=\"editting && path.path !== '_id'\" class=\"pl-1\">\n    <component\n      :is=\"getEditComponentForPath(path)\"\n      :value=\"getEditValueForPath(path)\"\n      :format=\"dateType\"\n      @input=\"changes[path.path] = $event; delete invalid[path.path];\"\n      @error=\"invalid[path.path] = $event;\"\n      >\n    </component>\n  </div>\n  <div v-else class=\"pl-1\">\n    <component :is=\"getComponentForPath(path)\" :value=\"getValueForPath(path.path)\"></component>\n  </div>\n</div>";
+module.exports = "<div>\n  <div class=\"relative path-key p-1 flex\">\n    <div class=\"grow flex justify-between items-center\">\n      <div>\n        {{path.path}}\n        <span class=\"path-type\">\n          ({{(path.instance || 'unknown').toLowerCase()}})\n        </span>\n      </div>\n      <div>\n        <router-link\n          v-if=\"path.ref && getValueForPath(path.path)\"\n          :to=\"`/model/${path.ref}/document/${getValueForPath(path.path)}`\"\n          class=\"bg-ultramarine-600 hover:bg-ultramarine-500 text-white px-2 py-1 text-sm mr-1 rounded-md\"\n          >View Document\n        </router-link>\n      </div>\n    </div>\n    <div v-if=\"editting && path.instance === 'Date'\" class=\"flex gap-1.5\">\n      <div\n        @click=\"dateType = 'picker'\"\n        :class=\"dateType === 'picker' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'picker' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          Date Picker\n        </div>\n      </div>\n      <div\n        @click=\"dateType = 'iso'\"\n        :class=\"dateType === 'iso' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'iso' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          ISO String\n        </div>\n      </div>\n    </div>\n  </div>\n  <div v-if=\"editting && path.path !== '_id'\" class=\"pl-1\">\n    <component\n      :is=\"getEditComponentForPath(path)\"\n      :value=\"getEditValueForPath(path)\"\n      :format=\"dateType\"\n      @input=\"changes[path.path] = $event; delete invalid[path.path];\"\n      @error=\"invalid[path.path] = $event;\"\n      >\n    </component>\n  </div>\n  <div v-else class=\"pl-1\">\n    <component :is=\"getComponentForPath(path)\" :value=\"getValueForPath(path.path)\"></component>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -14619,7 +14673,7 @@ var bson = /*#__PURE__*/Object.freeze({
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.102","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"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"0.0.26","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"8.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.0.105","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"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"0.0.26","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"8.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/src/chat/chat-message-script/chat-message-script.html

@@ -29,6 +29,11 @@
           <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" />
         </svg>
       </button>
+      <button
+        class="px-2 py-1 mr-1 text-xs bg-ultramarine-500 text-white border-none rounded cursor-pointer hover:bg-ultramarine-600 transition-colors flex items-center"
+        @click="openCreateDashboardModal">
+        Create Dashboard
+      </button>
       <async-button
         class="px-2 py-1 text-xs bg-green-500 text-white border-none rounded cursor-pointer hover:bg-green-600 transition-colors disabled:bg-gray-400"
         @click="executeScript(message, script)">
@@ -53,4 +58,46 @@
       </div>
     </template>
   </modal>
+  <modal v-if="showCreateDashboardModal">
+    <template #body>
+      <div class="modal-exit" @click="showCreateDashboardModal = false">&times;</div>
+      <div>
+        <div class="mt-4 text-gray-900 font-semibold">Create Dashboard</div>
+        <div class="mt-4">
+          <label class="block text-sm font-medium leading-6 text-gray-900">Title</label>
+          <div class="mt-2">
+            <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">
+              <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">
+            </div>
+          </div>
+        </div>
+        <div class="my-4">
+          <label class="block text-sm font-medium leading-6 text-gray-900">Code</label>
+          <div class="border border-gray-200">
+            <textarea class="p-2 h-[300px] w-full" ref="dashboardCodeEditor"></textarea>
+          </div>
+        </div>
+        <async-button
+          @click="createDashboardFromScript"
+          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 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">
+                {{createError}}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </modal>
 </div>

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

@@ -7,7 +7,17 @@ const vanillatoasts = require('vanillatoasts');
 module.exports = app => app.component('chat-message-script', {
   template,
   props: ['message', 'script', 'language'],
-  data: () => ({ activeTab: 'code', showDetailModal: false }),
+  data() {
+    return {
+      activeTab: 'code',
+      showDetailModal: false,
+      showCreateDashboardModal: false,
+      newDashboardTitle: '',
+      dashboardCode: '',
+      createError: null,
+      dashboardEditor: null
+    };
+  },
   computed: {
     styleForMessage() {
       return this.message.role === 'user' ? 'bg-gray-100' : '';
@@ -25,6 +35,42 @@ module.exports = app => app.component('chat-message-script', {
     openDetailModal() {
       this.showDetailModal = true;
     },
+    openCreateDashboardModal() {
+      this.newDashboardTitle = '';
+      this.dashboardCode = this.script;
+      this.createErrors = [];
+      this.showCreateDashboardModal = true;
+      this.$nextTick(() => {
+        if (this.dashboardEditor) {
+          this.dashboardEditor.toTextArea();
+        }
+        this.$refs.dashboardCodeEditor.value = this.dashboardCode;
+        this.dashboardEditor = CodeMirror.fromTextArea(this.$refs.dashboardCodeEditor, {
+          mode: 'javascript',
+          lineNumbers: true
+        });
+        this.dashboardEditor.on('change', () => {
+          this.dashboardCode = this.dashboardEditor.getValue();
+        });
+      });
+    },
+    async createDashboardFromScript() {
+      this.dashboardCode = this.dashboardEditor.getValue();
+      const { dashboard } = await api.Dashboard.createDashboard({
+        code: this.dashboardCode,
+        title: this.newDashboardTitle
+      }).catch(err => {
+        if (err.response?.data?.message) {
+          const message = err.response.data.message.split(': ').slice(1).join(': ');
+          this.createError = message;
+          throw new Error(err.response?.data?.message);
+        }
+        throw err;
+      });
+      this.createError = null;
+      this.showCreateDashboardModal = false;
+      this.$router.push('/dashboard/' + dashboard._id);
+    },
     async copyOutput() {
       await navigator.clipboard.writeText(this.message.executionResult.output);
       vanillatoasts.create({
@@ -36,6 +82,14 @@ module.exports = app => app.component('chat-message-script', {
       });
     }
   },
+  watch: {
+    showCreateDashboardModal(val) {
+      if (!val && this.dashboardEditor) {
+        this.dashboardEditor.toTextArea();
+        this.dashboardEditor = null;
+      }
+    }
+  },
   mounted() {
     Prism.highlightElement(this.$refs.code);
     if (this.message.executionResult?.output) {

package/frontend/src/document-details/document-property/document-property.html

@@ -1,10 +1,20 @@
 <div>
   <div class="relative path-key p-1 flex">
-    <div class="grow">
-      {{path.path}}
-      <span class="path-type">
-        ({{(path.instance || 'unknown').toLowerCase()}})
-      </span>
+    <div class="grow flex justify-between items-center">
+      <div>
+        {{path.path}}
+        <span class="path-type">
+          ({{(path.instance || 'unknown').toLowerCase()}})
+        </span>
+      </div>
+      <div>
+        <router-link
+          v-if="path.ref && getValueForPath(path.path)"
+          :to="`/model/${path.ref}/document/${getValueForPath(path.path)}`"
+          class="bg-ultramarine-600 hover:bg-ultramarine-500 text-white px-2 py-1 text-sm mr-1 rounded-md"
+          >View Document
+        </router-link>
+      </div>
     </div>
     <div v-if="editting && path.instance === 'Date'" class="flex gap-1.5">
       <div
@@ -42,4 +52,4 @@
   <div v-else class="pl-1">
     <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
   </div>
-</div>
+</div>

package/package.json

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