@mongoosejs/studio 0.5.1 → 0.5.2

package/frontend/public/tw.css

@@ -1583,6 +1583,16 @@ video {
   gap: 2rem;
 }
 
+.gap-x-1 {
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
+}
+
+.gap-x-1\.5 {
+  -moz-column-gap: 0.375rem;
+       column-gap: 0.375rem;
+}
+
 .gap-x-4 {
   -moz-column-gap: 1rem;
        column-gap: 1rem;
@@ -1867,6 +1877,11 @@ video {
   border-color: rgb(254 202 202 / var(--tw-border-opacity));
 }
 
+.border-red-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 165 165 / var(--tw-border-opacity));
+}
+
 .border-red-400 {
   --tw-border-opacity: 1;
   border-color: rgb(248 113 113 / var(--tw-border-opacity));
@@ -2446,6 +2461,10 @@ video {
   font-size: 10px;
 }
 
+.text-\[11px\] {
+  font-size: 11px;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -3227,6 +3246,11 @@ video {
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-red-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-red-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -3487,6 +3511,11 @@ video {
   --tw-ring-color: var(--color-primary-subtle);
 }
 
+.focus\:ring-red-200:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-sky-600:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(2 132 199 / var(--tw-ring-opacity));

package/frontend/src/api.js

@@ -9,6 +9,7 @@ const client = axios.create({
 console.log('API baseURL:', window.MONGOOSE_STUDIO_CONFIG.baseURL);
 
 window.apiClient = client;
+exports.fetch = fetch;
 client.interceptors.request.use(req => {
   const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
   if (accessToken) {
@@ -24,10 +25,92 @@ client.interceptors.response.use(
     if (typeof err?.response?.data === 'string') {
       throw new Error(`Error in ${err.config?.method} ${err.config?.url}: ${err.response.data}`);
     }
+    if (typeof err?.response?.data?.message === 'string') {
+      throw new Error(`Error in ${err.config?.method} ${err.config?.url}: ${err.response.data.message}`);
+    }
     throw err;
   }
 );
 
+async function* streamSSE(url, options = {}) {
+  const fetch = exports.fetch;
+  const response = await fetch(url, {
+    method: 'GET',
+    ...options,
+    headers: {
+      ...(options.headers || {}),
+      Accept: 'text/event-stream'
+    }
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! Status: ${response.status}`);
+  }
+
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder('utf-8');
+  let buffer = '';
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) {
+      break;
+    }
+    buffer += decoder.decode(value, { stream: true });
+
+    let eventEnd;
+    while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
+      const eventStr = buffer.slice(0, eventEnd);
+      buffer = buffer.slice(eventEnd + 2);
+
+      const event = parseSSEEvent(eventStr);
+      if (event == null) {
+        continue;
+      }
+      if (event.type === 'error') {
+        const message = getSSEErrorMessage(event.data);
+        throw new Error(message);
+      }
+      yield event.data;
+    }
+  }
+}
+
+function parseSSEEvent(eventStr) {
+  const lines = eventStr.split('\n');
+  let type = 'message';
+  let data = '';
+  for (const line of lines) {
+    if (line.startsWith('event:')) {
+      type = line.slice(6).trim() || 'message';
+    } else if (line.startsWith('data:')) {
+      data += line.slice(5).trim();
+    }
+  }
+  if (!data) {
+    return null;
+  }
+
+  try {
+    return { type, data: JSON.parse(data) };
+  } catch (err) {
+    return { type, data };
+  }
+}
+
+function getSSEErrorMessage(data) {
+  if (typeof data === 'string') {
+    return data || 'Streaming request failed.';
+  }
+  if (typeof data?.message === 'string' && data.message.length > 0) {
+    return data.message;
+  }
+  if (typeof data?.error === 'string' && data.error.length > 0) {
+    return data.error;
+  }
+  return 'Streaming request failed.';
+}
+
 if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
   exports.getCapabilities = function getCapabilities() {
     return client.post('', { action: 'getCapabilities' }).then(res => res.data);
@@ -103,6 +186,7 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     exportQueryResults(params) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
 
+      const fetch = exports.fetch;
       return fetch(window.MONGOOSE_STUDIO_CONFIG.baseURL + '?' + new URLSearchParams({ ...params, action: 'Model.exportQueryResults' }).toString(), {
         method: 'GET',
         headers: {
@@ -166,6 +250,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     dropIndex: function dropIndex(params) {
       return client.post('', { action: 'Model.dropIndex', ...params }).then(res => res.data);
     },
+    dropCollection: function dropCollection(params) {
+      return client.post('', { action: 'Model.dropCollection', ...params }).then(res => res.data);
+    },
     listModels: function listModels() {
       return client.post('', { action: 'Model.listModels' }).then(res => res.data);
     },
@@ -254,50 +341,11 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
       const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/ChatThread/streamChatMessage?' + new URLSearchParams(params).toString();
 
-      const response = await fetch(url, {
-        method: 'GET',
+      yield* streamSSE(url, {
         headers: {
-          Authorization: `${accessToken}`,
-          Accept: 'text/event-stream'
+          Authorization: `${accessToken}`
         }
       });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder('utf-8');
-      let buffer = '';
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-
-        let eventEnd;
-        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
-          const eventStr = buffer.slice(0, eventEnd);
-          buffer = buffer.slice(eventEnd + 2);
-
-          // Parse SSE event
-          const lines = eventStr.split('\n');
-          let data = '';
-          for (const line of lines) {
-            if (line.startsWith('data:')) {
-              data += line.slice(5).trim();
-            }
-          }
-          if (data) {
-            try {
-              const res = JSON.parse(data);
-              yield res;
-            } catch (err) {
-              yield data;
-            }
-          }
-        }
-      }
     }
   };
   exports.ChatMessage = {
@@ -330,6 +378,7 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     exportQueryResults(params) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
 
+      const fetch = exports.fetch;
       return fetch(window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/exportQueryResults?' + new URLSearchParams(params).toString(), {
         method: 'GET',
         headers: {
@@ -367,50 +416,11 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
       const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/getDocumentsStream?' + new URLSearchParams(params).toString();
 
-      const response = await fetch(url, {
-        method: 'GET',
+      yield* streamSSE(url, {
         headers: {
-          Authorization: `${accessToken}`,
-          Accept: 'text/event-stream'
+          Authorization: `${accessToken}`
         }
       });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder('utf-8');
-      let buffer = '';
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-
-        let eventEnd;
-        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
-          const eventStr = buffer.slice(0, eventEnd);
-          buffer = buffer.slice(eventEnd + 2);
-
-          // Parse SSE event
-          const lines = eventStr.split('\n');
-          let data = '';
-          for (const line of lines) {
-            if (line.startsWith('data:')) {
-              data += line.slice(5).trim();
-            }
-          }
-          if (data) {
-            try {
-              yield JSON.parse(data);
-            } catch (err) {
-              // If not JSON, yield as string
-              yield data;
-            }
-          }
-        }
-      }
     },
     getEstimatedDocumentCounts: function getEstimatedDocumentCounts() {
       return client.post('/Model/getEstimatedDocumentCounts', {}).then(res => res.data);
@@ -419,51 +429,12 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
       const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/streamDocumentChanges?' + new URLSearchParams(params).toString();
 
-      const response = await fetch(url, {
-        method: 'GET',
+      yield* streamSSE(url, {
         headers: {
-          Authorization: `${accessToken}`,
-          Accept: 'text/event-stream'
+          Authorization: `${accessToken}`
         },
         signal: options.signal
       });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder('utf-8');
-      let buffer = '';
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-
-        let eventEnd;
-        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
-          const eventStr = buffer.slice(0, eventEnd);
-          buffer = buffer.slice(eventEnd + 2);
-
-          // Parse SSE event
-          const lines = eventStr.split('\n');
-          let data = '';
-          for (const line of lines) {
-            if (line.startsWith('data:')) {
-              data += line.slice(5).trim();
-            }
-          }
-          if (data) {
-            try {
-              yield JSON.parse(data);
-            } catch (err) {
-              // If not JSON, yield as string
-              yield data;
-            }
-          }
-        }
-      }
     },
     getCollectionInfo: function getCollectionInfo(params) {
       return client.post('/Model/getCollectionInfo', params).then(res => res.data);
@@ -484,50 +455,11 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
       const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/streamChatMessage?' + new URLSearchParams(params).toString();
 
-      const response = await fetch(url, {
-        method: 'GET',
+      yield* streamSSE(url, {
         headers: {
-          Authorization: `${accessToken}`,
-          Accept: 'text/event-stream'
+          Authorization: `${accessToken}`
         }
       });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder('utf-8');
-      let buffer = '';
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-
-        let eventEnd;
-        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
-          const eventStr = buffer.slice(0, eventEnd);
-          buffer = buffer.slice(eventEnd + 2);
-
-          // Parse SSE event
-          const lines = eventStr.split('\n');
-          let data = '';
-          for (const line of lines) {
-            if (line.startsWith('data:')) {
-              data += line.slice(5).trim();
-            }
-          }
-          if (data) {
-            try {
-              yield JSON.parse(data);
-            } catch (err) {
-              // If not JSON, yield as string
-              yield data;
-            }
-          }
-        }
-      }
     },
     updateDocuments: function updateDocument(params) {
       return client.post('/Model/updateDocuments', params).then(res => res.data);

package/frontend/src/chat/chat.html

@@ -12,7 +12,7 @@
   </button>
   <!-- Sidebar: Chat Threads -->
   <aside
-    class="bg-page border-r overflow-hidden h-full transition-all duration-300 ease-in-out z-20 w-64 fixed lg:relative shrink-0 flex flex-col"
+    class="bg-page border-r overflow-hidden transition-all duration-300 ease-in-out z-20 w-64 fixed top-[55px] bottom-0 lg:top-auto lg:bottom-auto lg:relative lg:h-full shrink-0 flex flex-col"
     :class="hideSidebar === false ? 'translate-x-0' : hideSidebar === true ? '-translate-x-full lg:translate-x-0 lg:!w-0 lg:!border-r-0' : '-translate-x-full lg:translate-x-0'"
     style="z-index: 1000">
     <!-- Search + New Thread -->

package/frontend/src/document/confirm-changes/confirm-changes.js

@@ -26,9 +26,29 @@ module.exports = app => app.component('confirm-changes', {
     },
     startSave() {
       this.$emit('save');
+    },
+    onEnter(event) {
+      if (event.key !== 'Enter') {
+        return;
+      }
+
+      const modalMasks = Array.from(document.querySelectorAll('.modal-mask'));
+      const currentMask = this.$el?.closest('.modal-mask');
+      const isTopMostModal = modalMasks.length > 0 && modalMasks[modalMasks.length - 1] === currentMask;
+
+      if (!isTopMostModal) {
+        return;
+      }
+
+      event.preventDefault();
+      this.startSave();
     }
   },
   mounted() {
+    window.addEventListener('keydown', this.onEnter);
     Prism.highlightElement(this.$refs.code);
+  },
+  beforeUnmount() {
+    window.removeEventListener('keydown', this.onEnter);
   }
 });

package/frontend/src/index.js

@@ -221,6 +221,11 @@ router.beforeEach((to, from, next) => {
 });
 
 router.beforeEach((to, from, next) => {
+  if (['chat index', 'chat'].includes(to.name) && !window.MONGOOSE_STUDIO_CONFIG.hasLLMAPIKey) {
+    next({ name: 'root' });
+    return;
+  }
+
   if (to.name === 'root' && window.state.roles && window.state.roles[0] === 'dashboards') {
     return next({ name: 'dashboards' });
   } else {

package/frontend/src/json-node/json-node.html

@@ -1,5 +1,5 @@
-<div>
-  <div class="flex items-baseline whitespace-pre" :style="indentStyle">
+<div class="min-w-0 max-w-full">
+  <div class="flex min-w-0 max-w-full items-baseline whitespace-pre-wrap break-words" :style="indentStyle">
     <button
       v-if="showToggle"
       type="button"
@@ -23,36 +23,32 @@
       </template>
     </template>
     <template v-else>
-      <!--
-        If value is a string and overflows its container (i.e. goes over one line), show an ellipsis.
-        This is done via CSS ellipsis strategy.
-      -->
       <span
         v-if="shouldShowReferenceLink"
-        class="inline-flex items-baseline group"
+        class="group inline-flex min-w-0 max-w-full items-baseline flex-wrap gap-x-1.5"
       >
-        <span
-          :class="[...valueClasses, 'underline', 'decoration-dotted', 'underline-offset-2']"
-          :style="typeof value === 'string'
-            ? {
-                display: 'inline-block',
-                maxWidth: '100%',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                verticalAlign: 'bottom'
-              }
-            : {}"
-          :title="typeof value === 'string' && $el && $el.scrollWidth > $el.clientWidth ? value : undefined"
-        >
-          {{ formattedValue }}
-        </span>
-        <span>
-          {{ comma }}
+        <span class="min-w-0 max-w-full">
+          <span
+            :class="[...valueClasses, ...stringWrapperClasses, 'underline', 'decoration-dotted', 'underline-offset-2']"
+            :style="isStringValue ? { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' } : {}"
+            :title="shouldTruncateString && !isStringExpanded ? value : undefined"
+          >
+            {{ displayedValue }}
+          </span><template v-if="!(shouldTruncateString && !isStringExpanded)">{{ comma }}</template>
         </span>
+        <button
+          v-if="shouldTruncateString"
+          type="button"
+          class="inline-flex shrink-0 items-center gap-1 rounded-full border border-edge bg-surface px-2 py-0.5 text-[11px] font-medium text-content-secondary shadow-sm transition-colors hover:bg-muted hover:text-content focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30"
+          :title="stringToggleLabel"
+          :aria-expanded="isStringExpanded"
+          @click.stop="toggleStringExpansion"
+        >
+          <span class="leading-none">{{ stringToggleLabel }}</span>
+        </button>
         <a
           href="#"
-          class="ml-1 text-sm text-primary opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity"
+          class="ml-1 shrink-0 text-sm text-primary opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100"
           @click.stop.prevent="goToReference()"
         >
           View Document
@@ -60,20 +56,25 @@
       </span>
       <span
         v-else
-        :class="valueClasses"
-        :style="typeof value === 'string'
-          ? {
-              display: 'inline-block',
-              maxWidth: '100%',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              verticalAlign: 'bottom'
-            }
-          : {}"
-        :title="typeof value === 'string' && $el && $el.scrollWidth > $el.clientWidth ? value : undefined"
+        class="inline-flex min-w-0 max-w-full items-baseline flex-wrap gap-x-1.5"
       >
-        {{ formattedValue }}{{ comma }}
+        <span
+          :class="[...valueClasses, ...stringWrapperClasses]"
+          :style="isStringValue ? { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' } : {}"
+          :title="shouldTruncateString && !isStringExpanded ? value : undefined"
+        >
+          {{ displayedValue }}<template v-if="!(shouldTruncateString && !isStringExpanded)">{{ comma }}</template>
+        </span>
+        <button
+          v-if="shouldTruncateString"
+          type="button"
+          class="inline-flex shrink-0 items-center gap-1 rounded-full border border-edge bg-surface px-2 py-0.5 text-[11px] font-medium text-content-secondary shadow-sm transition-colors hover:bg-muted hover:text-content focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30"
+          :title="stringToggleLabel"
+          :aria-expanded="isStringExpanded"
+          @click.stop="toggleStringExpansion"
+        >
+          <span class="leading-none">{{ stringToggleLabel }}</span>
+        </button>
       </span>
     </template>
   </div>
@@ -94,6 +95,7 @@
       :top-level-expanded="topLevelExpanded"
       :expand-top-level="expandTopLevel"
       :references="references"
+      :max-string-length="maxStringLength"
     ></json-node>
     <div
       v-if="hasHiddenRootChildren"

package/frontend/src/json-node/json-node.js

@@ -56,8 +56,17 @@ module.exports = app => app.component('json-node', {
     references: {
       type: Object,
       default: () => ({})
+    },
+    maxStringLength: {
+      type: Number,
+      default: 200
     }
   },
+  data() {
+    return {
+      isStringExpanded: false
+    };
+  },
   computed: {
     hasKey() {
       return this.nodeKey !== null && this.nodeKey !== undefined;
@@ -151,6 +160,29 @@ module.exports = app => app.component('json-node', {
       }
       return stringified;
     },
+    isStringValue() {
+      return typeof this.value === 'string';
+    },
+    shouldTruncateString() {
+      return this.isStringValue && this.formattedValue.length > this.maxStringLength;
+    },
+    displayedValue() {
+      if (!this.shouldTruncateString || this.isStringExpanded) {
+        return this.formattedValue;
+      }
+      const keep = Math.max(0, this.maxStringLength - 1);
+      return `${this.formattedValue.slice(0, keep)}…`;
+    },
+    stringWrapperClasses() {
+      const classes = ['min-w-0', 'max-w-full', 'break-words'];
+      if (this.shouldTruncateString && this.isStringExpanded) {
+        classes.push('rounded-md', 'border', 'border-edge', 'bg-muted/60', 'px-2', 'py-1');
+      }
+      return classes;
+    },
+    stringToggleLabel() {
+      return this.isStringExpanded ? 'Show less' : 'Show more';
+    },
     valueClasses() {
       const classes = ['text-slate-700'];
       if (this.value === null) {
@@ -267,6 +299,12 @@ module.exports = app => app.component('json-node', {
         return;
       }
       this.$router.push({ path: `/model/${this.referenceModel}/document/${id}` });
+    },
+    toggleStringExpansion() {
+      if (!this.shouldTruncateString) {
+        return;
+      }
+      this.isStringExpanded = !this.isStringExpanded;
     }
   }
 });

package/frontend/src/list-json/list-json.html

@@ -1,5 +1,5 @@
-<div class="tooltip w-full font-mono text-sm py-1 text-slate-800">
-  <div class="w-full">
+<div class="tooltip w-full min-w-0 max-w-full font-mono text-sm py-1 text-slate-800">
+  <div class="w-full min-w-0 max-w-full">
     <json-node
       :node-key="null"
       :value="value"
@@ -14,6 +14,7 @@
       :top-level-expanded="topLevelExpanded"
       :expand-top-level="expandTopLevel"
       :references="references"
+      :max-string-length="maxStringLength"
     ></json-node>
   </div>
 </div>

package/frontend/src/list-json/list-json.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const template = require('./list-json.html');
+const DEFAULT_MAX_STRING_LENGTH = 200;
 
 module.exports = app => app.component('list-json', {
   template: template,
@@ -19,6 +20,10 @@ module.exports = app => app.component('list-json', {
     expandedFields: {
       type: Array,
       default: () => []
+    },
+    maxStringLength: {
+      type: Number,
+      default: DEFAULT_MAX_STRING_LENGTH
     }
   },
   data() {