@kodaris/krubble-app-components 1.0.104 → 1.0.106

package/dist/krubble-app.bundled.js

@@ -5530,15 +5530,23 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 /** Image extensions the chatbot renders as thumbnails (used when MIME is absent). */
 const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+/**
+ * Video extensions the picker accepts. The AI cannot watch video — these upload
+ * and store for playback and tool use only, and the backend tells the model so.
+ * Matches what kr-file-preview can play back.
+ */
+const VIDEO_EXTENSIONS = ['mp4', 'webm', 'ogg', 'mov'];
 /**
  * File extensions the picker accepts. Mirrors what the backend can read: the
  * document/spreadsheet family Bedrock ingests, the plain-text family read as
- * fallback, and the image formats. This is a UX convenience — the backend
+ * fallback, and the image formats. Videos are accepted for upload/storage even
+ * though the model can't read them. This is a UX convenience — the backend
  * accepts anything and just tells the model when a type can't be read.
  */
 const ACCEPTED_FILE_EXTENSIONS = [
     'pdf', 'doc', 'docx', 'xls', 'xlsx', 'csv', 'html', 'md', 'txt', 'json', 'xml',
     ...IMAGE_EXTENSIONS,
+    ...VIDEO_EXTENSIONS,
 ];
 /**
  * AI chatbot component with SSE streaming.
@@ -6852,8 +6860,9 @@ let KRChatbot = class KRChatbot extends i$3 {
             return;
         }
         files.forEach((file) => {
-            // Only images get a local preview thumbnail; documents render an icon.
-            // Prefer the File's MIME, falling back to the extension when it's absent.
+            // Only images get a local preview thumbnail; documents (and videos, which are
+            // tiles too) render an icon. Prefer the File's MIME, falling back to the
+            // extension when it's absent.
             let previewUrl;
             if (file.type.startsWith('image/') || IMAGE_EXTENSIONS.includes(this._getFileExtension(file.name))) {
                 previewUrl = URL.createObjectURL(file);
@@ -6884,22 +6893,25 @@ let KRChatbot = class KRChatbot extends i$3 {
         });
         this._pendingConversationFiles = [];
     }
-    /** Open the shared full-screen previewer for a message image. */
-    _handleImageOpen(img) {
+    /** Open the shared full-screen previewer for a message attachment (image or video). */
+    _handleFileOpen(file) {
         // Use the local preview if the upload hasn't finished yet; otherwise the
         // backend view URL (prefixed with the base URL — a raw fetch of a relative
         // path would hit the page origin, e.g. the dev server, not the backend).
-        const src = img.previewUrl
-            || `${KRHttp.getBaseUrl()}/api/system/conversationFile/${img.conversationFileID}/view`;
+        // The previewer picks image vs video playback off the name's extension, so
+        // niceName has to carry it — hence the generic fallback keeps no extension
+        // only when there's no name at all.
+        const src = file.previewUrl
+            || `${KRHttp.getBaseUrl()}/api/system/conversationFile/${file.conversationFileID}/view`;
         const preview = KRFilePreview.open({
             src,
-            name: img.niceName || 'image',
+            name: file.niceName || 'file',
         });
         // The previewer's download button only fires a `download` event — the
         // consumer performs the actual download. Hit the view endpoint with
         // `?download=true` (Content-Disposition: attachment) in a new tab.
         preview.addEventListener('download', () => {
-            window.open(`${KRHttp.getBaseUrl()}/api/system/conversationFile/${img.conversationFileID}/view?download=true`, '_blank');
+            window.open(`${KRHttp.getBaseUrl()}/api/system/conversationFile/${file.conversationFileID}/view?download=true`, '_blank');
         });
     }
     _handleSubmit() {
@@ -7834,15 +7846,18 @@ let KRChatbot = class KRChatbot extends i$3 {
             if (file.mimeType) {
                 isImage = file.mimeType.startsWith('image/');
             }
-            // Images open in the previewer; documents just show a tile
-            // (the previewer is image-only).
+            // An image shows its thumbnail; everything else shows a
+            // file-type tile. Both open the previewer on click — it renders
+            // images, video, PDFs, and text inline, and shows a download
+            // tile for the rest (Office formats), so a click always does
+            // something useful.
             if (isImage) {
                 return b `
                           <button
                             class="attachment"
                             type="button"
                             title=${file.niceName || 'View image'}
-                            @click=${() => this._handleImageOpen(file)}
+                            @click=${() => this._handleFileOpen(file)}
                           >
                             <img
                               src=${file.previewUrl || `${KRHttp.getBaseUrl()}/api/system/conversationFile/${file.conversationFileID}/view`}
@@ -7852,13 +7867,15 @@ let KRChatbot = class KRChatbot extends i$3 {
                         `;
             }
             return b `
-                        <div
-                          class="attachment attachment--doc"
+                        <button
+                          class="attachment attachment--doc attachment--openable"
+                          type="button"
                           title=${fileName}
+                          @click=${() => this._handleFileOpen(file)}
                         >
                           <span class="attachment__type">${this._getFileExtension(fileName) || 'File'}</span>
                           <span class="attachment__name">${fileName}</span>
-                        </div>
+                        </button>
                       `;
         })}
                   </div>
@@ -8409,10 +8426,14 @@ KRChatbot.styles = i$6 `
       gap: 24px;
     }
 
+    /* anywhere, NOT break-word: both break a long unbreakable run (a pasted URL) for
+       layout, but only anywhere also shrinks the element's intrinsic min-content width.
+       With break-word the URL still reports its full unbroken width as the minimum,
+       which sizes this shrink-to-fit bubble past .messages-inner's 768px cap and
+       overflows the page horizontally. */
     .message-content {
       line-height: 1.7;
-      word-wrap: break-word;
-      overflow-wrap: break-word;
+      overflow-wrap: anywhere;
     }
 
     .message--user .message-content {
@@ -9130,15 +9151,22 @@ KRChatbot.styles = i$6 `
       display: block;
     }
 
-    /* Non-image attachment in a sent message — file-type label above the filename
-       (the previewer is image-only, so this isn't clickable). */
+    /* Non-image attachment in a sent message — file-type label above the filename. */
     .attachment--doc {
       display: flex;
       flex-direction: column;
       padding: 16px 14px;
       box-sizing: border-box;
       text-align: left;
-      cursor: default;
+    }
+
+    /* Opens the previewer on click — same affordance as the composer's doc chip. */
+    .attachment--openable {
+      cursor: pointer;
+    }
+
+    .attachment--openable:hover {
+      background: #dfdddd;
     }
 
     .attachment__type {