@mongoosejs/studio 0.0.74 → 0.0.75

package/frontend/public/tw.css

@@ -614,6 +614,14 @@ video {
   right: 0px;
 }
 
+.right-1 {
+  right: 0.25rem;
+}
+
+.top-1 {
+  top: 0.25rem;
+}
+
 .top-\[90\%\] {
   top: 90%;
 }
@@ -648,6 +656,11 @@ video {
   margin-bottom: -0.5rem;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -694,6 +707,10 @@ video {
   margin-left: 0.75rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -785,10 +802,18 @@ video {
   height: 2rem;
 }
 
+.\!h-\[90vh\] {
+  height: 90vh !important;
+}
+
 .h-16 {
   height: 4rem;
 }
 
+.h-3 {
+  height: 0.75rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -825,14 +850,30 @@ video {
   height: 100%;
 }
 
+.h-px {
+  height: 1px;
+}
+
+.max-h-\[30vh\] {
+  max-height: 30vh;
+}
+
 .max-h-\[50vh\] {
   max-height: 50vh;
 }
 
+.\!w-\[90vw\] {
+  width: 90vw !important;
+}
+
 .w-16 {
   width: 4rem;
 }
 
+.w-3 {
+  width: 0.75rem;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -873,6 +914,14 @@ video {
   max-width: 64rem;
 }
 
+.max-w-\[calc\(100\%-6\.5rem\)\] {
+  max-width: calc(100% - 6.5rem);
+}
+
+.max-w-xs {
+  max-width: 20rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -909,6 +958,10 @@ video {
   transform-origin: top right;
 }
 
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -943,10 +996,18 @@ video {
   flex-direction: column;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -1003,6 +1064,12 @@ video {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1052,10 +1119,18 @@ video {
   overflow: auto;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .overflow-x-auto {
   overflow-x: auto;
 }
 
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1066,6 +1141,10 @@ video {
   white-space: nowrap;
 }
 
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1120,6 +1199,14 @@ video {
   border-right-width: 1px;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-none {
+  border-style: none;
+}
+
 .border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
@@ -1149,6 +1236,11 @@ video {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
 .bg-forest-green-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(0 202 44 / var(--tw-bg-opacity));
@@ -1164,6 +1256,11 @@ video {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
 .bg-gray-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
@@ -1189,11 +1286,21 @@ video {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
+.bg-green-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
+}
+
 .bg-green-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(240 253 244 / var(--tw-bg-opacity));
 }
 
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
 .bg-green-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
@@ -1281,6 +1388,10 @@ video {
   padding: 0.5rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1398,6 +1509,10 @@ video {
   padding-top: 0.25rem;
 }
 
+.pt-\[1px\] {
+  padding-top: 1px;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1644,6 +1759,12 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .placeholder\:text-gray-400::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1679,11 +1800,21 @@ video {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-forest-green-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(0 242 58 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@@ -1704,11 +1835,21 @@ video {
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-green-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-green-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-green-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-red-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
@@ -1926,6 +2067,11 @@ video {
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }
 
+.disabled\:bg-gray-600:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
 .disabled\:text-gray-300:disabled {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));

package/frontend/src/api.js

@@ -46,6 +46,25 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return client.post('', { action: 'Dashboard.updateDashboard', ...params}).then(res => res.data);
     }
   }
+  exports.ChatThread = {
+    createChatMessage(params) {
+      return client.post('', { action: 'ChatThread.createChatMessage', ...params }).then(res => res.data);
+    },
+    createChatThread(params) {
+      return client.post('', { action: 'ChatThread.createChatThread', ...params }).then(res => res.data);
+    },
+    getChatThread(params) {
+      return client.post('', { action: 'ChatThread.getChatThread', ...params }).then(res => res.data);
+    },
+    listChatThreads(params) {
+      return client.post('', { action: 'ChatThread.listChatThreads', ...params }).then(res => res.data);
+    }
+  }
+  exports.ChatMessage = {
+    executeScript(params) {
+      return client.post('', { action: 'ChatMessage.executeScript', ...params }).then(res => res.data);
+    }
+  }
   exports.Model = {
     createChart(params) {
       return client.post('', { action: 'Model.createChart', ...params}).then(res => res.data);
@@ -117,6 +136,25 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return client.post('/Dashboard/updateDashboard', params).then(res => res.data);
     }
   }
+  exports.ChatThread = {
+    createChatMessage: function createChatMessage(params) {
+      return client.post('/ChatThread/createChatMessage', params).then(res => res.data);
+    },
+    createChatThread: function createChatThread(params) {
+      return client.post('/ChatThread/createChatThread', params).then(res => res.data);
+    },
+    getChatThread: function getChatThread(params) {
+      return client.post('/ChatThread/getChatThread', params).then(res => res.data);
+    },
+    listChatThreads: function listChatThreads(params) {
+      return client.post('/ChatThread/listChatThreads', params).then(res => res.data);
+    }
+  };
+  exports.ChatMessage = {
+    executeScript: function executeScript(params) {
+      return client.post('/ChatMessage/executeScript', params).then(res => res.data);
+    }
+  };
   exports.Model = {
     createChart: function (params) {
       return client.post('/Model/createChart', params).then(res => res.data);
@@ -170,7 +208,4 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return client.post('/Model/updateDocument', params).then(res => res.data);
     }
   };
-  exports.Script = {
-
-  };
 }

package/frontend/src/async-button/async-button.html

@@ -1,3 +1,13 @@
 <button v-bind="attrsToBind" :disabled="isDisabled" @click="handleClick">
-  <slot></slot>
-</button>
+  <div v-if="status === 'in_progress'" style="text-align: center">
+    <svg style="height: 1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g>
+        <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3" />
+        <path d="M12 2a10 10 0 0 1 10 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite" />
+        </path>
+      </g>
+    </svg>
+  </div>
+  <slot v-if="status == 'success' || status == 'init'"></slot>
+</button>

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

@@ -0,0 +1,16 @@
+<div class="relative flex items-start space-x-3" :class="{'justify-end': message.role === 'user'}">
+  <div
+    class="min-w-0 max-w-[calc(100%-6.5rem)]"
+    :class="{'text-right': message.role === 'user'}">
+
+    <div class="text-sm text-gray-900 p-3 rounded-md inline-block" :class="styleForMessage">
+      <div v-for="part in contentSplitByScripts">
+        <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"></chat-message-script>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,66 @@
+'use strict';
+
+const api = require('../../api');
+const marked = require('marked').marked;
+const template = require('./chat-message.html');
+
+module.exports = app => app.component('chat-message', {
+  template: template,
+  props: ['message'],
+  computed: {
+    styleForMessage() {
+      return this.message.role === 'user' ? 'bg-gray-100' : '';
+    },
+    contentSplitByScripts() {
+      const content = this.message.content;
+      const parts = [];
+      let currentIndex = 0;
+      let codeBlockMatch;
+
+      // Regular expression to match markdown code blocks
+      const codeBlockRegex = /```(\w*)\n([\s\S]*?)\n```/g;
+
+      while ((codeBlockMatch = codeBlockRegex.exec(content)) !== null) {
+        // Add text before the code block
+        if (codeBlockMatch.index > currentIndex) {
+          parts.push({
+            type: 'text',
+            content: content.substring(currentIndex, codeBlockMatch.index)
+          });
+        }
+
+        // Add the code block
+        parts.push({
+          type: 'code',
+          language: codeBlockMatch[1] || '',
+          content: codeBlockMatch[2]
+        });
+
+        currentIndex = codeBlockMatch.index + codeBlockMatch[0].length;
+      }
+
+      // Add any remaining text after the last code block
+      if (currentIndex < content.length) {
+        parts.push({
+          type: 'text',
+          content: content.substring(currentIndex)
+        });
+      }
+
+      return parts;
+    }
+  },
+  methods: {
+    marked(text) {
+      return marked(text);
+    },
+    async executeScript(message, script) {
+      const { chatMessage } = await api.ChatMessage.executeScript({
+        chatMessageId: message._id,
+        script
+      });
+      message.executionResult = chatMessage.executionResult;
+      console.log(message);
+    },
+  }
+});

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

@@ -0,0 +1,52 @@
+<div class="relative border rounded bg-gray-100 text-black text-sm overflow-hidden">
+  <div class="flex border-b pt-[1px] text-xs font-medium bg-gray-200">
+    <button
+      class="px-3 py-1 border-r border-gray-300 hover:bg-green-300"
+      :class="{'bg-gray-300': activeTab === 'code', 'bg-green-300': activeTab === 'code'}"
+      @click="activeTab = 'code'">
+      Code
+    </button>
+    <button
+      class="px-3 py-1 hover:bg-green-300"
+      :class="{'bg-green-300': activeTab === 'output'}"
+      @click="activeTab = 'output'">
+      Output
+    </button>
+    <div class="ml-auto mr-1 flex">
+      <button
+        v-if="activeTab === 'output'"
+        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"
+        @click="openDetailModal">
+        <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>
+      <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)">
+        Execute
+      </async-button>
+    </div>
+  </div>
+
+  <pre class="p-3 whitespace-pre-wrap max-h-[30vh] overflow-y-auto" v-show="activeTab === 'code'"><code v-text="script" ref="code" :class="'language-' + language"></code></pre>
+
+  <pre class="p-3 whitespace-pre-wrap max-h-[30vh] overflow-y-auto bg-white border-t" v-show="activeTab === 'output'">
+    <dashboard-chart v-if="message.executionResult?.output?.$chart" :value="message.executionResult?.output" />
+    <div v-else>
+      {{ message.executionResult?.output ? JSON.stringify(message.executionResult.output, null, 2) : 'No output' }}
+    </div>
+  </pre>
+
+  <modal ref="outputModal" v-if="showDetailModal" containerClass="!h-[90vh] !w-[90vw]">
+    <template #body>
+      <div class="absolute font-mono right-1 top-1 cursor-pointer text-xl" @click="showDetailModal = false;">&times;</div>
+      <div class="h-full overflow-auto">
+        <dashboard-chart v-if="message.executionResult?.output?.$chart" :value="message.executionResult?.output" />
+        <pre v-else class="whitespace-pre-wrap">
+          {{ message.executionResult?.output ? JSON.stringify(message.executionResult.output, null, 2) : 'No output' }}
+        </pre>
+      </div>
+    </template>
+  </modal>
+</div>

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

@@ -0,0 +1,35 @@
+'use strict';
+
+const api = require('../../api');
+const marked = require('marked').marked;
+const template = require('./chat-message-script.html');
+
+module.exports = app => app.component('chat-message-script', {
+  template: template,
+  props: ['message', 'script', 'language'],
+  data: () => ({ activeTab: 'code', showDetailModal: false }),
+  computed: {
+    styleForMessage() {
+      return this.message.role === 'user' ? 'bg-gray-100' : '';
+    }
+  },
+  methods: {
+    async executeScript(message, script) {
+      const { chatMessage } = await api.ChatMessage.executeScript({
+        chatMessageId: message._id,
+        script
+      });
+      message.executionResult = chatMessage.executionResult;
+      this.activeTab = 'output';
+    },
+    openDetailModal() {
+      this.showDetailModal = true;
+    }
+  },
+  mounted() {
+    Prism.highlightElement(this.$refs.code);
+    if (this.message.executionResult?.output) {
+      this.activeTab = 'output';
+    }
+  }
+});

package/frontend/src/chat/chat.html

@@ -0,0 +1,69 @@
+<div class="flex" style="height: calc(100vh - 55px)">
+    <!-- Sidebar: Chat Threads -->
+  <aside class="w-64 bg-gray-100 border-r overflow-y-auto h-full">
+    <div class="p-4 font-bold text-lg border-b">Chat Threads</div>
+    <div class="p-4">
+      <button
+        @click="createNewThread"
+        class="w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+      >
+        Create New Thread
+      </button>
+    </div>
+    <div v-if="status === 'loaded' && chatThreads.length === 0" class="p-4 text-sm text-gray-700">
+      No threads yet
+    </div>
+    <ul vif="status === 'loaded'">
+      <li
+        v-for="thread in chatThreads"
+        :key="thread._id"
+        @click="selectThread(thread._id)"
+        class="p-4 hover:bg-gray-200 cursor-pointer"
+        :class="{ 'bg-gray-300': thread._id === chatThreadId }"
+      >
+        {{ thread.title || 'Untitled Thread' }}
+      </li>
+    </ul>
+  </aside>
+
+  <!-- Main Chat Area -->
+  <main class="flex-1 flex flex-col">
+    <div class="flex-1 overflow-y-auto p-6 space-y-4" ref="messagesContainer">
+      <ul role="list" class="space-y-4">
+        <div v-if="true">
+          <div class="flex items-center justify-center py-3 mb-4">
+            <div class="bg-gray-300 h-px flex-grow max-w-xs"></div>
+            <p class="mx-4 text-sm font-medium text-gray-500">This is the beginning of the message thread</p>
+            <div class="bg-gray-300 h-px flex-grow max-w-xs"></div>
+          </div>
+        </div>
+        <li v-for="message in chatMessages" :key="message._id">
+          <chat-message :message="message"></chat-message>
+        </li>
+      </ul>
+    </div>
+
+
+    <!-- Input Area -->
+    <div class="border-t p-4">
+      <form @submit.prevent="sendMessage" :disabled="sendingMessage" class="flex gap-2">
+        <input
+          v-model="newMessage"
+          placeholder="Ask something..."
+          class="flex-1 border rounded px-4 py-2"
+        />
+        <button class="bg-blue-600 text-white px-4 py-2 rounded disabled:bg-gray-600" :disabled="sendingMessage">
+          <svg v-if="sendingMessage" style="height: 1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <g>
+              <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3" />
+              <path d="M12 2a10 10 0 0 1 10 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite" />
+              </path>
+            </g>
+          </svg>
+          <span v-else>Send</span>
+        </button>
+      </form>
+    </div>
+  </main>
+</div>