@mongoosejs/studio 0.0.112 → 0.0.114

package/backend/actions/ChatMessage/executeScript.js

@@ -6,7 +6,7 @@ const mongoose = require('mongoose');
 const vm = require('vm');
 
 const ExecuteScriptParams = new Archetype({
-  userId: {
+  initiatedById: {
     $type: mongoose.Types.ObjectId
   },
   chatMessageId: {
@@ -21,7 +21,7 @@ const ExecuteScriptParams = new Archetype({
 }).compile('ExecuteScriptParams');
 
 module.exports = ({ db, studioConnection }) => async function executeScript(params) {
-  const { userId, chatMessageId, script, roles } = new ExecuteScriptParams(params);
+  const { initiatedById, chatMessageId, script, roles } = new ExecuteScriptParams(params);
   const ChatMessage = studioConnection.model('__Studio_ChatMessage');
 
   await authorize('ChatMessage.executeScript', roles);
@@ -31,6 +31,10 @@ module.exports = ({ db, studioConnection }) => async function executeScript(para
     throw new Error('Chat message not found');
   }
 
+  if (initiatedById && chatMessage.userId?.toString() !== initiatedById.toString()) {
+    throw new Error('Unauthorized');
+  }
+
   // Create a sandbox with the db object
   const logs = [];
   const sandbox = { db, console: {}, ObjectId: mongoose.Types.ObjectId };

package/backend/actions/ChatThread/createChatMessage.js

@@ -9,7 +9,7 @@ const CreateChatMessageParams = new Archetype({
   chatThreadId: {
     $type: mongoose.Types.ObjectId
   },
-  userId: {
+  initiatedById: {
     $type: mongoose.Types.ObjectId
   },
   content: {
@@ -24,7 +24,7 @@ const CreateChatMessageParams = new Archetype({
 }).compile('CreateChatMessageParams');
 
 module.exports = ({ db, studioConnection, options }) => async function createChatMessage(params) {
-  const { chatThreadId, userId, content, script, authorization, roles } = new CreateChatMessageParams(params);
+  const { chatThreadId, initiatedById, content, script, authorization, roles } = new CreateChatMessageParams(params);
   const ChatThread = studioConnection.model('__Studio_ChatThread');
   const ChatMessage = studioConnection.model('__Studio_ChatMessage');
 
@@ -35,7 +35,7 @@ module.exports = ({ db, studioConnection, options }) => async function createCha
   if (!chatThread) {
     throw new Error('Chat thread not found');
   }
-  if (userId != null && chatThread.userId.toString() !== userId.toString()) {
+  if (initiatedById != null && chatThread.userId.toString() !== initiatedById.toString()) {
     throw new Error('Not authorized');
   }
 
@@ -46,12 +46,13 @@ module.exports = ({ db, studioConnection, options }) => async function createCha
   }));
   llmMessages.push({ role: 'user', content });
 
+  let summarizePromise = Promise.resolve();
   if (chatThread.title == null) {
-    summarizeChatThread(llmMessages).then(res => {
+    summarizePromise = summarizeChatThread(llmMessages, authorization).then(res => {
       const title = res.response;
       chatThread.title = title;
       return chatThread.save();
-    }).catch(() => {});
+    });
   }
 
   if (options.context) {
@@ -82,6 +83,7 @@ module.exports = ({ db, studioConnection, options }) => async function createCha
     })
   ]);
 
+  await summarizePromise;
   return { chatMessages, chatThread };
 };
 

package/backend/actions/ChatThread/createChatThread.js

@@ -5,21 +5,32 @@ const authorize = require('../../authorize');
 const mongoose = require('mongoose');
 
 const CreateChatThreadParams = new Archetype({
-  userId: {
+  initiatedById: {
     $type: mongoose.Types.ObjectId
   },
   roles: {
     $type: ['string']
+  },
+  $workspaceId: {
+    $type: mongoose.Types.ObjectId,
+    $required: false
   }
 }).compile('CreateChatThreadParams');
 
 module.exports = ({ studioConnection }) => async function createChatThread(params) {
-  const { userId, roles } = new CreateChatThreadParams(params);
+  const { initiatedById, roles, $workspaceId } = new CreateChatThreadParams(params);
   const ChatThread = studioConnection.model('__Studio_ChatThread');
 
   await authorize('ChatThread.createChatThread', roles);
 
-  const chatThread = await ChatThread.create({ userId });
+  const doc = { userId: initiatedById };
+  if ($workspaceId) {
+    doc.workspaceId = $workspaceId;
+  }
+  if ($workspaceId && !initiatedById) {
+    throw new Error('initiatedById is required when creating a chat thread in a workspace');
+  }
+  const chatThread = await ChatThread.create(doc);
 
   return { chatThread };
 };

package/backend/actions/ChatThread/getChatThread.js

@@ -8,16 +8,19 @@ const GetChatThreadParams = new Archetype({
   chatThreadId: {
     $type: mongoose.Types.ObjectId
   },
-  userId: {
+  initiatedById: {
     $type: mongoose.Types.ObjectId
   },
   roles: {
     $type: ['string']
+  },
+  $workspaceId: {
+    $type: mongoose.Types.ObjectId
   }
 }).compile('GetChatThreadParams');
 
 module.exports = ({ db, studioConnection }) => async function getChatThread(params) {
-  const { chatThreadId, userId, roles } = new GetChatThreadParams(params);
+  const { chatThreadId, initiatedById, roles, $workspaceId } = new GetChatThreadParams(params);
   const ChatThread = studioConnection.model('__Studio_ChatThread');
   const ChatMessage = studioConnection.model('__Studio_ChatMessage');
 
@@ -28,8 +31,11 @@ module.exports = ({ db, studioConnection }) => async function getChatThread(para
   if (!chatThread) {
     throw new Error('Chat thread not found');
   }
-  if (userId && chatThread.userId?.toString() !== userId.toString()) {
-    throw new Error('Not authorized');
+  if (initiatedById && chatThread.userId?.toString() !== initiatedById.toString()) {
+    
+    if (!$workspaceId || chatThread.workspaceId?.toString() !== $workspaceId.toString() || !chatThread.sharingOptions?.sharedWithWorkspace) {
+      throw new Error('Not authorized');
+    }
   }
 
   const chatMessages = await ChatMessage.find({ chatThreadId })

package/backend/actions/ChatThread/index.js

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

package/backend/actions/ChatThread/listChatThreads.js

@@ -5,7 +5,7 @@ const authorize = require('../../authorize');
 const mongoose = require('mongoose');
 
 const ListChatThreadsParams = new Archetype({
-  userId: {
+  initiatedById: {
     $type: mongoose.Types.ObjectId
   },
   roles: {
@@ -15,13 +15,15 @@ const ListChatThreadsParams = new Archetype({
 
 module.exports = ({ db, studioConnection }) => async function listChatThreads(params) {
   // Validate the params object
-  const { userId, roles } = new ListChatThreadsParams(params);
+  const { initiatedById, roles } = new ListChatThreadsParams(params);
   const ChatThread = studioConnection.model('__Studio_ChatThread');
 
   await authorize('ChatThread.listChatThreads', roles);
 
+  const query = { userId: initiatedById };
+
   // Get all chat threads
-  const chatThreads = await ChatThread.find(userId ? { userId } : {})
+  const chatThreads = await ChatThread.find(query)
     .sort({ updatedAt: -1 }); // Sort by most recently updated
 
   return {

package/backend/actions/ChatThread/shareChatThread.js

@@ -0,0 +1,46 @@
+'use strict';
+
+const Archetype = require('archetype');
+const authorize = require('../../authorize');
+const mongoose = require('mongoose');
+
+const ShareChatThreadParams = new Archetype({
+  chatThreadId: {
+    $type: mongoose.Types.ObjectId
+  },
+  share: {
+    $type: 'boolean'
+  },
+  initiatedById: {
+    $type: mongoose.Types.ObjectId
+  },
+  roles: {
+    $type: ['string']
+  },
+  $workspaceId: {
+    $type: mongoose.Types.ObjectId
+  }
+}).compile('ShareChatThreadParams');
+
+module.exports = ({ studioConnection }) => async function shareChatThread(params) {
+  const { chatThreadId, share, initiatedById, roles, $workspaceId } = new ShareChatThreadParams(params);
+  const ChatThread = studioConnection.model('__Studio_ChatThread');
+
+  await authorize('ChatThread.shareChatThread', roles);
+
+  const chatThread = await ChatThread.findById(chatThreadId).orFail();
+  if (initiatedById != null && chatThread.userId?.toString() !== initiatedById.toString()) {
+    throw new Error('Not authorized');
+  }
+
+  if (!$workspaceId || !chatThread.workspaceId || chatThread.workspaceId.toString() !== $workspaceId.toString()) {
+    throw new Error('Workspace required to share');
+  }
+
+  chatThread.sharingOptions = chatThread.sharingOptions || {};
+  chatThread.sharingOptions.sharedWithWorkspace = !!share;
+
+  await chatThread.save();
+
+  return { chatThread };
+};

package/backend/authorize.js

@@ -6,6 +6,7 @@ const actionsToRequiredRoles = {
   'ChatThread.createChatThread': ['owner', 'admin', 'member'],
   'ChatThread.getChatThread': ['owner', 'admin', 'member'],
   'ChatThread.listChatThreads': ['owner', 'admin', 'member'],
+  'ChatThread.shareChatThread': ['owner', 'admin', 'member'],
   'Dashboard.createDashboard': ['owner', 'admin', 'member'],
   'Dashboard.deleteDashboard': ['owner', 'admin', 'member'],
   'Dashboard.getDashboard': ['owner', 'admin', 'member', 'readonly', 'dashboards'],

package/backend/db/chatThreadSchema.js

@@ -9,6 +9,16 @@ const chatThreadSchema = new mongoose.Schema({
   userId: {
     type: mongoose.ObjectId,
     ref: 'User'
+  },
+  workspaceId: {
+    type: mongoose.ObjectId,
+    ref: 'Workspace'
+  },
+  sharingOptions: {
+    sharedWithWorkspace: {
+      type: Boolean,
+      default: false
+    }
   }
 }, { timestamps: true });
 

package/backend/netlify.js

@@ -61,6 +61,7 @@ module.exports = function netlify(conn, options) {
       params.$workspaceId = workspace._id;
       params.roles = roles;
       params.userId = user._id;
+      params.initiatedById = user._id;
     }
 
     if (typeof actionName !== 'string') {

package/frontend/public/app.js

@@ -68,6 +68,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     },
     listChatThreads(params) {
       return client.post('', { action: 'ChatThread.listChatThreads', ...params }).then(res => res.data);
+    },
+    shareChatThread(params) {
+      return client.post('', { action: 'ChatThread.shareChatThread', ...params }).then(res => res.data);
     }
   };
   exports.ChatMessage = {
@@ -170,6 +173,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     },
     listChatThreads: function listChatThreads(params) {
       return client.post('/ChatThread/listChatThreads', params).then(res => res.data);
+    },
+    shareChatThread: function shareChatThread(params) {
+      return client.post('/ChatThread/shareChatThread', params).then(res => res.data);
     }
   };
   exports.ChatMessage = {
@@ -528,6 +534,7 @@ module.exports = app => app.component('chat-message', {
 
 const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
 const template = __webpack_require__(/*! ./chat.html */ "./frontend/src/chat/chat.html");
+const vanillatoasts = __webpack_require__(/*! vanillatoasts */ "./node_modules/vanillatoasts/vanillatoasts.js");
 
 module.exports = app => app.component('chat', {
   template: template,
@@ -539,7 +546,8 @@ module.exports = app => app.component('chat', {
     chatThreadId: null,
     chatThreads: [],
     chatMessages: [],
-    hideSidebar: null
+    hideSidebar: null,
+    sharingThread: false
   }),
   methods: {
     async sendMessage() {
@@ -563,11 +571,16 @@ module.exports = app => app.component('chat', {
           }
         });
 
-        const { chatMessages } = await api.ChatThread.createChatMessage({
+        const { chatMessages, chatThread } = await api.ChatThread.createChatMessage({
           chatThreadId: this.chatThreadId,
           content: this.newMessage
         });
         this.chatMessages.push(chatMessages[1]);
+        for (const thread of this.chatThreads) {
+          if (thread._id === chatThread._id) {
+            thread.title = chatThread.title;
+          }
+        }
 
         this.newMessage = '';
         this.$nextTick(() => {
@@ -606,6 +619,44 @@ module.exports = app => app.component('chat', {
     async createNewThread() {
       const { chatThread } = await api.ChatThread.createChatThread();
       this.$router.push('/chat/' + chatThread._id);
+    },
+    async toggleShareThread() {
+      if (!this.chatThreadId || !this.hasWorkspace) {
+        return;
+      }
+      this.sharingThread = true;
+      try {
+        const share = true;
+        const { chatThread } = await api.ChatThread.shareChatThread({ chatThreadId: this.chatThreadId, share });
+        const idx = this.chatThreads.findIndex(t => t._id === chatThread._id);
+        if (idx !== -1) {
+          this.chatThreads.splice(idx, 1, chatThread);
+        }
+
+        // Copy current URL to clipboard and show a toast
+        const url = window.location.href;
+        await navigator.clipboard.writeText(url);
+        vanillatoasts.create({
+          title: 'Share link copied!',
+          type: 'success',
+          timeout: 3000,
+          icon: 'images/success.png',
+          positionClass: 'bottomRight'
+        });
+      } finally {
+        this.sharingThread = false;
+      }
+    }
+  },
+  computed: {
+    currentThread() {
+      return this.chatThreads.find(t => t._id === this.chatThreadId);
+    },
+    hasWorkspace() {
+      return !!window.MONGOOSE_STUDIO_CONFIG.workspace?._id;
+    },
+    sharedWithWorkspace() {
+      return !!this.currentThread?.sharingOptions?.sharedWithWorkspace;
     }
   },
   async mounted() {
@@ -1096,7 +1147,8 @@ module.exports = app => app.component('dashboard', {
       showEditor: false,
       dashboard: null,
       dashboardResults: [],
-      errorMessage: null
+      errorMessage: null,
+      showDetailModal: false
     };
   },
   methods: {
@@ -1128,6 +1180,9 @@ module.exports = app => app.component('dashboard', {
       } finally {
         this.status = 'loaded';
       }
+    },
+    openDetailModal() {
+      this.showDetailModal = true;
     }
   },
   computed: {
@@ -4136,7 +4191,7 @@ module.exports = "<div class=\"relative flex items-start\" :class=\"{'justify-en
 /***/ ((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  <!-- 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=\"Ask something...\"\n          class=\"flex-1 border rounded px-4 py-2 resize-none overflow-y-auto\"\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\"></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=\"Ask something...\"\n          class=\"flex-1 border rounded px-4 py-2 resize-none overflow-y-auto\"\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";
 
 /***/ }),
 
@@ -4268,7 +4323,7 @@ module.exports = "<div class=\"py-2\">\n  <div v-if=\"header\" class=\"border-b
 /***/ ((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>\n        <dashboard-result\n          :key=\"dashboardResult.finishedEvaluatingAt\"\n          :result=\"dashboardResult.result\"\n          :finishedEvaluatingAt=\"dashboardResult.finishedEvaluatingAt\">\n        </dashboard-result>\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    <div v-if=\"errorMessage\" 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\">{{errorMessage}}</h3>\n        </div>\n      </div>\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";
+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>\n        <div class=\"relative\">\n          <button\n            class=\"absolute top-2 right-2 px-2 py-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            aria-label=\"Expand dashboard result\">\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          <dashboard-result\n            :key=\"dashboardResult.finishedEvaluatingAt\"\n            :result=\"dashboardResult.result\"\n            :finishedEvaluatingAt=\"dashboardResult.finishedEvaluatingAt\">\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    <div v-if=\"errorMessage\" 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\">{{errorMessage}}</h3>\n        </div>\n      </div>\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      </dashboard-result>\n    </div>\n  </template>\n</modal>\n";
 
 /***/ }),
 
@@ -14782,7 +14837,7 @@ var bson = /*#__PURE__*/Object.freeze({
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.112","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","dedent":"^1.6.0","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.114","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","dedent":"^1.6.0","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/public/tw.css

@@ -626,6 +626,10 @@ video {
   right: 0.25rem;
 }
 
+.right-4 {
+  right: 1rem;
+}
+
 .top-1 {
   top: 0.25rem;
 }
@@ -1788,6 +1792,12 @@ video {
   opacity: 0.5;
 }
 
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);

package/frontend/src/api.js

@@ -58,6 +58,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     },
     listChatThreads(params) {
       return client.post('', { action: 'ChatThread.listChatThreads', ...params }).then(res => res.data);
+    },
+    shareChatThread(params) {
+      return client.post('', { action: 'ChatThread.shareChatThread', ...params }).then(res => res.data);
     }
   };
   exports.ChatMessage = {
@@ -160,6 +163,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     },
     listChatThreads: function listChatThreads(params) {
       return client.post('/ChatThread/listChatThreads', params).then(res => res.data);
+    },
+    shareChatThread: function shareChatThread(params) {
+      return client.post('/ChatThread/shareChatThread', params).then(res => res.data);
     }
   };
   exports.ChatMessage = {

package/frontend/src/chat/chat.html

@@ -2,6 +2,17 @@
   <div class="fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10" @click="hideSidebar = false">
     <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>
   </div>
+  <button
+    class="fixed top-[65px] right-4 z-10 p-2 rounded-md shadow bg-white"
+    :class="hasWorkspace ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 cursor-not-allowed bg-gray-50'"
+    @click="toggleShareThread"
+    :disabled="!hasWorkspace || !chatThreadId || sharingThread"
+    aria-label="Share thread with workspace"
+    title="Share thread with workspace"
+  >
+    <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>
+    <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>
+  </button>
   <!-- Sidebar: Chat Threads -->
   <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' : ''">
     <div class="flex items-center border-b border-gray-100 w-64 overflow-x-hidden">

package/frontend/src/chat/chat.js

@@ -2,6 +2,7 @@
 
 const api = require('../api');
 const template = require('./chat.html');
+const vanillatoasts = require('vanillatoasts');
 
 module.exports = app => app.component('chat', {
   template: template,
@@ -13,7 +14,8 @@ module.exports = app => app.component('chat', {
     chatThreadId: null,
     chatThreads: [],
     chatMessages: [],
-    hideSidebar: null
+    hideSidebar: null,
+    sharingThread: false
   }),
   methods: {
     async sendMessage() {
@@ -37,11 +39,16 @@ module.exports = app => app.component('chat', {
           }
         });
 
-        const { chatMessages } = await api.ChatThread.createChatMessage({
+        const { chatMessages, chatThread } = await api.ChatThread.createChatMessage({
           chatThreadId: this.chatThreadId,
           content: this.newMessage
         });
         this.chatMessages.push(chatMessages[1]);
+        for (const thread of this.chatThreads) {
+          if (thread._id === chatThread._id) {
+            thread.title = chatThread.title;
+          }
+        }
 
         this.newMessage = '';
         this.$nextTick(() => {
@@ -80,6 +87,44 @@ module.exports = app => app.component('chat', {
     async createNewThread() {
       const { chatThread } = await api.ChatThread.createChatThread();
       this.$router.push('/chat/' + chatThread._id);
+    },
+    async toggleShareThread() {
+      if (!this.chatThreadId || !this.hasWorkspace) {
+        return;
+      }
+      this.sharingThread = true;
+      try {
+        const share = true;
+        const { chatThread } = await api.ChatThread.shareChatThread({ chatThreadId: this.chatThreadId, share });
+        const idx = this.chatThreads.findIndex(t => t._id === chatThread._id);
+        if (idx !== -1) {
+          this.chatThreads.splice(idx, 1, chatThread);
+        }
+
+        // Copy current URL to clipboard and show a toast
+        const url = window.location.href;
+        await navigator.clipboard.writeText(url);
+        vanillatoasts.create({
+          title: 'Share link copied!',
+          type: 'success',
+          timeout: 3000,
+          icon: 'images/success.png',
+          positionClass: 'bottomRight'
+        });
+      } finally {
+        this.sharingThread = false;
+      }
+    }
+  },
+  computed: {
+    currentThread() {
+      return this.chatThreads.find(t => t._id === this.chatThreadId);
+    },
+    hasWorkspace() {
+      return !!window.MONGOOSE_STUDIO_CONFIG.workspace?._id;
+    },
+    sharedWithWorkspace() {
+      return !!this.currentThread?.sharingOptions?.sharedWithWorkspace;
     }
   },
   async mounted() {

package/frontend/src/dashboard/dashboard.html

@@ -40,11 +40,21 @@
         </div>
       </div>
       <div v-else>
-        <dashboard-result
-          :key="dashboardResult.finishedEvaluatingAt"
-          :result="dashboardResult.result"
-          :finishedEvaluatingAt="dashboardResult.finishedEvaluatingAt">
-        </dashboard-result>
+        <div class="relative">
+          <button
+            class="absolute top-2 right-2 px-2 py-1 text-xs bg-blue-500 text-white border-none rounded cursor-pointer hover:bg-blue-600 transition-colors flex items-center"
+            @click="openDetailModal"
+            aria-label="Expand dashboard result">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <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>
+          <dashboard-result
+            :key="dashboardResult.finishedEvaluatingAt"
+            :result="dashboardResult.result"
+            :finishedEvaluatingAt="dashboardResult.finishedEvaluatingAt">
+          </dashboard-result>
+        </div>
       </div>
     </div>
     <div v-if="showEditor" class="mt-4">
@@ -74,3 +84,22 @@
     No dashboard with the given id could be found.
   </div>
 </div>
+
+<modal
+  v-if="showDetailModal"
+  containerClass="!h-[90vh] !w-[90vw]"
+  role="dialog"
+  aria-modal="true"
+  aria-label="Dashboard Details"
+>
+  <template #body>
+    <div class="absolute font-mono right-1 top-1 cursor-pointer text-xl" @click="showDetailModal = false;" role="button" aria-label="Close modal">&times;</div>
+    <div class="h-full overflow-auto">
+      <dashboard-result
+        v-if="dashboardResult"
+        :result="dashboardResult.result"
+        :finishedEvaluatingAt="dashboardResult.finishedEvaluatingAt">
+      </dashboard-result>
+    </div>
+  </template>
+</modal>

package/frontend/src/dashboard/dashboard.js

@@ -15,7 +15,8 @@ module.exports = app => app.component('dashboard', {
       showEditor: false,
       dashboard: null,
       dashboardResults: [],
-      errorMessage: null
+      errorMessage: null,
+      showDetailModal: false
     };
   },
   methods: {
@@ -47,6 +48,9 @@ module.exports = app => app.component('dashboard', {
       } finally {
         this.status = 'loaded';
       }
+    },
+    openDetailModal() {
+      this.showDetailModal = true;
     }
   },
   computed: {

package/package.json

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

package/valnotes.md

@@ -0,0 +1,2 @@
+1. Export to PNG causes charts to scroll down
+2. Chat summarization broken