@mongoosejs/studio 0.0.74 → 0.0.75

package/frontend/src/chat/chat.js

@@ -0,0 +1,89 @@
+'use strict';
+
+const api = require('../api');
+const template = require('./chat.html');
+
+module.exports = app => app.component('chat', {
+  template: template,
+  props: ['threadId'],
+  data: () => ({
+    status: 'loading',
+    sendingMessage: false,
+    newMessage: '',
+    chatThreadId: null,
+    chatThreads: [],
+    chatMessages: []
+  }),
+  methods: {
+    async sendMessage() {
+      this.sendingMessage = true;
+      try {
+        if (!this.chatThreadId) {
+          const { chatThread } = await api.ChatThread.createChatThread();
+          this.chatThreads.unshift(chatThread);
+          this.chatThreadId = chatThread._id;
+          this.chatMessages = [];
+        }
+
+        this.chatMessages.push({
+          content: this.newMessage,
+          role: 'user'
+        });
+
+        this.$nextTick(() => {
+          if (this.$refs.messagesContainer) {
+            this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
+          }
+        });
+
+        const { chatMessages } = await api.ChatThread.createChatMessage({
+          chatThreadId: this.chatThreadId,
+          content: this.newMessage
+        });
+        this.chatMessages.push(chatMessages[1]);
+
+        this.newMessage = '';
+
+        this.$nextTick(() => {
+          if (this.$refs.messagesContainer) {
+            this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
+          }
+        });
+      } finally {
+        this.sendingMessage = false;
+      }
+    },
+    selectThread(threadId) {
+      this.$router.push('/chat/' + threadId);
+    },
+    styleForMessage(message) {
+      return message.role === 'user' ? 'bg-gray-100' : '';
+    },
+    async createNewThread() {
+
+    }
+  },
+  async mounted() {
+    this.chatThreadId = this.threadId;
+    const { chatThreads } = await api.ChatThread.listChatThreads();
+    this.chatThreads = chatThreads;
+    if (this.chatThreadId) {
+      const { chatMessages } = await api.ChatThread.getChatThread({ chatThreadId: this.chatThreadId });
+      this.chatMessages = chatMessages;
+    }
+    this.status = 'loaded';
+
+    if (this.chatThreadId) {
+      // Scroll to bottom of messages container after messages are loaded
+      this.$nextTick(() => {
+        if (this.$refs.messagesContainer) {
+          this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
+        }
+
+        this.$refs.messagesContainer.querySelectorAll('code').forEach(el => {
+          Prism.highlightElement(el);
+        });
+      });
+    }
+  },
+});

package/frontend/src/index.js

@@ -12,43 +12,28 @@ const app = Vue.createApp({
   template: '<app-component />'
 });
 
-require('./async-button/async-button')(app);
-require('./clone-document/clone-document')(app);
-require('./create-dashboard/create-dashboard')(app);
-require('./create-document/create-document')(app);
-require('./dashboards/dashboards')(app);
-require('./dashboard/dashboard')(app);
-require('./dashboard-result/dashboard-result')(app);
-require('./dashboard-result/dashboard-chart/dashboard-chart')(app);
-require('./dashboard-result/dashboard-document/dashboard-document')(app);
-require('./dashboard-result/dashboard-primitive/dashboard-primitive')(app);
-require('./dashboard-result/dashboard-text/dashboard-text')(app);
-require('./dashboard/edit-dashboard/edit-dashboard')(app)
-require('./detail-array/detail-array')(app);
-require('./detail-default/detail-default')(app);
-require('./document/document')(app);
-require('./document/confirm-changes/confirm-changes')(app);
-require('./document/confirm-delete/confirm-delete')(app);
-require('./document-details/document-details')(app);
-require('./document-details/document-property/document-property')(app);
-require('./edit-array/edit-array')(app);
-require('./edit-default/edit-default')(app);
-require('./edit-number/edit-number')(app);
-require('./edit-date/edit-date')(app);
-require('./edit-subdocument/edit-subdocument')(app);
-require('./export-query-results/export-query-results')(app);
-require('./list-array/list-array')(app);
-require('./list-default/list-default')(app);
-require('./list-json/list-json')(app)
-require('./list-mixed/list-mixed')(app);
-require('./list-string/list-string')(app);
-require('./list-subdocument/list-subdocument')(app);
-require('./modal/modal')(app);
-require('./models/models')(app);
-require('./navbar/navbar')(app);
-require('./splash/splash')(app);
-require('./team/team')(app);
-require('./team/new-invitation/new-invitation')(app);
+// Import all components
+const requireComponents = require.context(
+  '.', // Relative path (current directory)
+  true // Include subdirectories
+);
+// Object to store the imported modules
+const components = {};
+// Iterate over the matched keys (file paths)
+requireComponents.keys().forEach((filePath) => {
+  // Extract directory name and file name from the path
+  const pieces = filePath.split('/');
+  const directoryName = pieces[pieces.length - 2];
+  const fileName = pieces[pieces.length - 1].replace('.js', '');
+
+  // Check if the file name matches the directory name
+  if (directoryName === fileName) {
+    components[directoryName] = requireComponents(filePath);
+    components[directoryName](app);
+  }
+});
+
+console.log('Loaded components', Object.keys(components).sort());
 
 app.component('app-component', {
   template: `

package/frontend/src/modal/modal.html

@@ -1,7 +1,7 @@
 <transition name="modal">
   <div class="modal-mask">
     <div class="modal-wrapper">
-      <div class="modal-container">
+      <div class="modal-container" :class="containerClass">
         <div class="modal-body">
           <slot name="body">
           </slot>
@@ -9,4 +9,4 @@
       </div>
     </div>
   </div>
-</transition>
+</transition>

package/frontend/src/modal/modal.js

@@ -6,5 +6,6 @@ const template = require('./modal.html');
 appendCSS(require('./modal.css'));
 
 module.exports = app => app.component('modal', {
-  template
-});
+  template,
+  props: ['containerClass']
+});

package/frontend/src/navbar/navbar.html

@@ -17,6 +17,10 @@
         href="#/dashboards"
         class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
         :class="dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Dashboards</a>
+      <a v-if="hasAccess(roles, 'chat')"
+        href="#/chat"
+        class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
+        :class="chatView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Chat</a>
 
       <div class="h-full flex items-center" v-if="!user && hasAPIKey">
         <button

package/frontend/src/navbar/navbar.js

@@ -30,6 +30,9 @@ module.exports = app => app.component('navbar', {
     documentView() {
       return ['root', 'model', 'document'].includes(this.$route.name);
     },
+    chatView() {
+      return ['chat index', 'chat'].includes(this.$route.name);
+    },
     routeName() {
       return this.$route.name;
     },

package/frontend/src/routes.js

@@ -2,9 +2,9 @@
 
 // Role-based access control configuration
 const roleAccess = {
-  owner: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team'],
-  admin: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team'],
-  member: ['root', 'model', 'document', 'dashboards', 'dashboard'],
+  owner: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team', 'chat'],
+  admin: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team', 'chat'],
+  member: ['root', 'model', 'document', 'dashboards', 'dashboard', 'chat'],
   readonly: ['root', 'model', 'document'],
   dashboards: ['dashboards', 'dashboard']
 };
@@ -65,6 +65,22 @@ module.exports = {
       meta: {
         authorized: true
       }
+    },
+    {
+      path: '/chat',
+      name: 'chat index',
+      component: 'chat',
+      meta: {
+        authorized: true
+      }
+    },
+    {
+      path: '/chat/:threadId',
+      name: 'chat',
+      component: 'chat',
+      meta: {
+        authorized: true
+      }
     }
   ],
   roleAccess,

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.74",
+  "version": "0.0.75",
   "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",