@kodaris/krubble-app-components 1.0.104 → 1.0.105

package/dist/krubble-app.umd.js

@@ -5533,15 +5533,23 @@
   };
   /** 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.
@@ -6855,8 +6863,9 @@
               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);
@@ -6887,22 +6896,25 @@
           });
           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
-              || `${krubbleHttp.Http.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
+              || `${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${file.conversationFileID}/view`;
           const preview = krubbleComponents.FilePreview.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(`${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${img.conversationFileID}/view?download=true`, '_blank');
+              window.open(`${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${file.conversationFileID}/view?download=true`, '_blank');
           });
       }
       _handleSubmit() {
@@ -7837,15 +7849,18 @@
             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 || `${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${file.conversationFileID}/view`}
@@ -7855,13 +7870,15 @@
                         `;
             }
             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>
@@ -9133,15 +9150,22 @@
       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 {