@acorex/components 21.0.2-next.20 → 21.0.2-next.22

package/fesm2022/acorex-components-conversation2.mjs

@@ -6043,6 +6043,17 @@ class AXComposerService {
         this._replyMessage.set(null);
         this._editMessage.set(null);
     }
+    /**
+     * Persist draft for the previous conversation and reset composer UI state when switching conversations.
+     */
+    onConversationChanged(previousConversationId, currentConversationId) {
+        if (previousConversationId && previousConversationId !== currentConversationId && !this.editMessage()) {
+            this.saveDraft(previousConversationId, this.draftText());
+        }
+        this.clear();
+        this.attachments.set([]);
+        this.draftText.set(currentConversationId ? this.loadDraft(currentConversationId) : '');
+    }
     async sendTypingIndicator(conversationId) {
         await this.conversationService.sendTypingIndicator(conversationId);
     }
@@ -9021,8 +9032,8 @@ class AXVideoPickerComponent {
             mediaId: video.mediaId,
             mimeType: video.file.type,
             size: video.file.size,
-            thumbnailUrl: video.preview,
-        }, video.duration ?? 0, video.preview));
+            // thumbnailUrl: video.preview,
+        }, video.duration ?? 0));
         if (videos.length === 0) {
             return;
         }
@@ -9172,7 +9183,9 @@ class AXVideoPickerComponent {
                     class="ax-cnv-picker__remove"
                     (click)="removeVideo($index)"
                     [attr.aria-label]="
-                      video.uploading ? getCancelUploadLabel() : translation.translateSync('@acorex:chat.pickers.common.remove')
+                      video.uploading
+                        ? getCancelUploadLabel()
+                        : translation.translateSync('@acorex:chat.pickers.common.remove')
                     "
                   >
                     <i class="fa-light fa-xmark"></i>
@@ -9287,7 +9300,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     class="ax-cnv-picker__remove"
                     (click)="removeVideo($index)"
                     [attr.aria-label]="
-                      video.uploading ? getCancelUploadLabel() : translation.translateSync('@acorex:chat.pickers.common.remove')
+                      video.uploading
+                        ? getCancelUploadLabel()
+                        : translation.translateSync('@acorex:chat.pickers.common.remove')
                     "
                   >
                     <i class="fa-light fa-xmark"></i>
@@ -11188,7 +11203,8 @@ class AXConversationMessageRendererStateComponent {
         this.hasVisibleChrome = computed(() => this.showSending() || this.showFailed() || this.showContentError(), ...(ngDevMode ? [{ debugName: "hasVisibleChrome" }] : []));
         this.showRetryButton = computed(() => this.showFailed(), ...(ngDevMode ? [{ debugName: "showRetryButton" }] : []));
         this.contentErrorText = computed(() => this.contentErrorLabel() ?? this.translation.translateSync('@acorex:chat.renderer-state.could-not-load-content'), ...(ngDevMode ? [{ debugName: "contentErrorText" }] : []));
-        this.deliveryFailedText = computed(() => this.deliveryFailedLabel() ?? this.translation.translateSync('@acorex:chat.renderer-state.could-not-send-message'), ...(ngDevMode ? [{ debugName: "deliveryFailedText" }] : []));
+        this.deliveryFailedText = computed(() => this.deliveryFailedLabel() ??
+            this.translation.translateSync('@acorex:chat.renderer-state.could-not-send-message'), ...(ngDevMode ? [{ debugName: "deliveryFailedText" }] : []));
     }
     async onRetry() {
         const msg = this.message();
@@ -11586,7 +11602,7 @@ class AXAudioAttachmentComponent {
         <span class="ax-cnv-audio__time">{{ durationLabel() }}</span>
       } -->
     </div>
-  `, isInline: true, styles: [":host{display:block}.ax-cnv-audio{display:flex;align-items:center;gap:.5rem;width:100%;min-width:18rem;min-height:2.75rem;padding:.5rem .625rem;border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface))}.ax-cnv-audio__icon{flex-shrink:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(var(--ax-sys-color-primary-500),.1);color:rgb(var(--ax-sys-color-primary-500));font-size:.875rem}.ax-cnv-audio__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.ax-cnv-audio__title{font-size:.75rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgb(var(--ax-sys-color-on-surface))}.ax-cnv-audio__el{width:100%;height:1.75rem}.ax-cnv-audio__time{flex-shrink:0;font-size:.6875rem;font-variant-numeric:tabular-nums;color:rgba(var(--ax-sys-color-on-surface),.65)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}.ax-cnv-audio{display:flex;align-items:center;gap:.5rem;width:100%;min-width:22rem;min-height:2.75rem;padding:.5rem .625rem;border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface))}.ax-cnv-audio__icon{flex-shrink:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(var(--ax-sys-color-primary-500),.1);color:rgb(var(--ax-sys-color-primary-500));font-size:.875rem}.ax-cnv-audio__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.ax-cnv-audio__title{font-size:.75rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgb(var(--ax-sys-color-on-surface))}.ax-cnv-audio__el{width:100%;height:1.75rem}.ax-cnv-audio__time{flex-shrink:0;font-size:.6875rem;font-variant-numeric:tabular-nums;color:rgba(var(--ax-sys-color-on-surface),.65)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXAudioAttachmentComponent, decorators: [{
             type: Component,
@@ -11613,16 +11629,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         <span class="ax-cnv-audio__time">{{ durationLabel() }}</span>
       } -->
     </div>
-  `, styles: [":host{display:block}.ax-cnv-audio{display:flex;align-items:center;gap:.5rem;width:100%;min-width:18rem;min-height:2.75rem;padding:.5rem .625rem;border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface))}.ax-cnv-audio__icon{flex-shrink:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(var(--ax-sys-color-primary-500),.1);color:rgb(var(--ax-sys-color-primary-500));font-size:.875rem}.ax-cnv-audio__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.ax-cnv-audio__title{font-size:.75rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgb(var(--ax-sys-color-on-surface))}.ax-cnv-audio__el{width:100%;height:1.75rem}.ax-cnv-audio__time{flex-shrink:0;font-size:.6875rem;font-variant-numeric:tabular-nums;color:rgba(var(--ax-sys-color-on-surface),.65)}\n"] }]
+  `, styles: [":host{display:block}.ax-cnv-audio{display:flex;align-items:center;gap:.5rem;width:100%;min-width:22rem;min-height:2.75rem;padding:.5rem .625rem;border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface))}.ax-cnv-audio__icon{flex-shrink:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(var(--ax-sys-color-primary-500),.1);color:rgb(var(--ax-sys-color-primary-500));font-size:.875rem}.ax-cnv-audio__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.ax-cnv-audio__title{font-size:.75rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgb(var(--ax-sys-color-on-surface))}.ax-cnv-audio__el{width:100%;height:1.75rem}.ax-cnv-audio__time{flex-shrink:0;font-size:.6875rem;font-variant-numeric:tabular-nums;color:rgba(var(--ax-sys-color-on-surface),.65)}\n"] }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], playingChange: [{ type: i0.Output, args: ["playingChange"] }], timeUpdate: [{ type: i0.Output, args: ["timeUpdate"] }], durationChange: [{ type: i0.Output, args: ["durationChange"] }], playbackEnded: [{ type: i0.Output, args: ["playbackEnded"] }], playbackError: [{ type: i0.Output, args: ["playbackError"] }], audioElementRef: [{ type: i0.ViewChild, args: ['audioElement', { isSignal: true }] }] } });
 
-/** Push playback state to the info-bar banner for a message. */
-function syncPlaybackInfoBarBanner(infoBar, message, inputs, options) {
-    const forceOpen = options?.forceOpen ?? false;
-    const shouldOpen = forceOpen || inputs.isPlaying || infoBar.isMessageBannerActive(message.id);
-    if (!shouldOpen) {
-        return;
-    }
+function buildPlaybackBannerPayload(inputs) {
     const payload = {
         title: inputs.title,
         currentTime: inputs.currentTime ?? 0,
@@ -11640,8 +11650,21 @@ function syncPlaybackInfoBarBanner(infoBar, message, inputs, options) {
     if (inputs.showSpeedControl !== undefined) {
         payload['showSpeedControl'] = inputs.showSpeedControl;
     }
+    return payload;
+}
+/** Push playback state to the info-bar banner for a message. */
+function syncPlaybackInfoBarBanner(infoBar, message, inputs, options) {
+    const forceOpen = options?.forceOpen ?? false;
+    const shouldOpen = forceOpen || inputs.isPlaying || infoBar.isMessageBannerActive(message.id);
+    if (!shouldOpen) {
+        return;
+    }
+    const payload = buildPlaybackBannerPayload(inputs);
+    if (infoBar.isMessageBannerActive(message.id)) {
+        infoBar.updateMessageBannerInputs(message.id, payload);
+        return;
+    }
     infoBar.showMessageBanner(message, payload);
-    infoBar.updateMessageBannerInputs(message.id, payload);
 }
 
 /**
@@ -11657,21 +11680,6 @@ const RENDERER_SHARED_STYLES = `
     display: flex;
     flex-direction: column;
     gap: 0.375rem;
-    max-width: min(100%, 18.5rem);
-  }
-
-  .ax-cnv-msg--wide {
-    max-width: min(100%, 22rem);
-  }
-
-  @media (min-width: 480px) {
-    .ax-cnv-msg {
-      max-width: min(100%, 24rem);
-    }
-
-    .ax-cnv-msg--wide {
-      max-width: min(100%, 28rem);
-    }
   }
 
   .ax-cnv-msg__stack {
@@ -11703,11 +11711,13 @@ const RENDERER_SHARED_STYLES = `
 
   .ax-cnv-msg__grid--multi {
     grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: 10rem;
   }
 
   @media (max-width: 380px) {
     .ax-cnv-msg__grid--multi {
       grid-template-columns: repeat(2, 1fr);
+      grid-auto-rows: 10rem;
     }
   }
 
@@ -11720,6 +11730,30 @@ const RENDERER_SHARED_STYLES = `
     opacity: 0.88;
   }
 
+  /* Flush layout: media fills the message bubble edge-to-edge (image / video). */
+  .ax-cnv-msg--flush {
+    width: 100%;
+    max-width: 100%;
+    gap: 0;
+  }
+
+  .ax-cnv-msg--flush .ax-cnv-msg__caption {
+    padding: 0.375rem 0.625rem 0;
+  }
+
+  .ax-cnv-msg--flush .ax-cnv-msg__grid {
+    border-radius: 0;
+    background: transparent;
+  }
+
+  .ax-cnv-msg--flush .ax-cnv-msg__stack {
+    gap: 2px;
+  }
+
+  .ax-cnv-msg--flush ::ng-deep .ax-cnv-video {
+    border-radius: 0;
+  }
+
   .ax-cnv-msg__card {
     border-radius: var(--ax-sys-border-radius, 0.5rem);
     border: 1px solid rgb(var(--ax-sys-color-border-light-surface));
@@ -11840,7 +11874,7 @@ class AXAudioRendererComponent {
         <p class="ax-cnv-msg__caption">{{ caption() }}</p>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;max-width:100%}.ax-cnv-msg{display:flex;flex-direction:column;gap:.375rem;max-width:min(100%,18.5rem)}.ax-cnv-msg--wide{max-width:min(100%,22rem)}@media(min-width:480px){.ax-cnv-msg{max-width:min(100%,24rem)}.ax-cnv-msg--wide{max-width:min(100%,28rem)}}.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr)}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr)}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXAudioAttachmentComponent, selector: "ax-cnv-audio-attachment", inputs: ["item"], outputs: ["playingChange", "timeUpdate", "durationChange", "playbackEnded", "playbackError"] }, { kind: "component", type: AXConversationMessageRendererStateComponent, selector: "ax-conversation-message-renderer-state", inputs: ["rendererState", "message", "contentErrorLabel", "deliveryFailedLabel", "showContentErrorChrome", "contentErrorStyle", "contentErrorIconClass", "placement", "contentRetryEnabled"], outputs: ["contentRetry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;max-width:100%}.ax-cnv-msg,.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr);grid-auto-rows:10rem}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr);grid-auto-rows:10rem}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg--flush{width:100%;max-width:100%;gap:0}.ax-cnv-msg--flush .ax-cnv-msg__caption{padding:.375rem .625rem 0}.ax-cnv-msg--flush .ax-cnv-msg__grid{border-radius:0;background:transparent}.ax-cnv-msg--flush .ax-cnv-msg__stack{gap:2px}.ax-cnv-msg--flush ::ng-deep .ax-cnv-video{border-radius:0}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXAudioAttachmentComponent, selector: "ax-cnv-audio-attachment", inputs: ["item"], outputs: ["playingChange", "timeUpdate", "durationChange", "playbackEnded", "playbackError"] }, { kind: "component", type: AXConversationMessageRendererStateComponent, selector: "ax-conversation-message-renderer-state", inputs: ["rendererState", "message", "contentErrorLabel", "deliveryFailedLabel", "showContentErrorChrome", "contentErrorStyle", "contentErrorIconClass", "placement", "contentRetryEnabled"], outputs: ["contentRetry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXAudioRendererComponent, decorators: [{
             type: Component,
@@ -11863,7 +11897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         <p class="ax-cnv-msg__caption">{{ caption() }}</p>
       }
     </div>
-  `, styles: [":host{display:block;max-width:100%}.ax-cnv-msg{display:flex;flex-direction:column;gap:.375rem;max-width:min(100%,18.5rem)}.ax-cnv-msg--wide{max-width:min(100%,22rem)}@media(min-width:480px){.ax-cnv-msg{max-width:min(100%,24rem)}.ax-cnv-msg--wide{max-width:min(100%,28rem)}}.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr)}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr)}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"] }]
+  `, styles: [":host{display:block;max-width:100%}.ax-cnv-msg,.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr);grid-auto-rows:10rem}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr);grid-auto-rows:10rem}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg--flush{width:100%;max-width:100%;gap:0}.ax-cnv-msg--flush .ax-cnv-msg__caption{padding:.375rem .625rem 0}.ax-cnv-msg--flush .ax-cnv-msg__grid{border-radius:0;background:transparent}.ax-cnv-msg--flush .ax-cnv-msg__stack{gap:2px}.ax-cnv-msg--flush ::ng-deep .ax-cnv-video{border-radius:0}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { attachments: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => AXAudioAttachmentComponent), { isSignal: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] } });
 
 class AXFallbackRendererComponent {
@@ -11982,7 +12016,7 @@ class AXFileRendererComponent {
         <p class="ax-cnv-msg__caption">{{ caption() }}</p>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;max-width:100%}.ax-cnv-msg{display:flex;flex-direction:column;gap:.375rem;max-width:min(100%,18.5rem)}.ax-cnv-msg--wide{max-width:min(100%,22rem)}@media(min-width:480px){.ax-cnv-msg{max-width:min(100%,24rem)}.ax-cnv-msg--wide{max-width:min(100%,28rem)}}.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr)}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr)}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXFileAttachmentComponent, selector: "ax-cnv-file-attachment", inputs: ["item"] }, { kind: "component", type: AXConversationMessageRendererStateComponent, selector: "ax-conversation-message-renderer-state", inputs: ["rendererState", "message", "contentErrorLabel", "deliveryFailedLabel", "showContentErrorChrome", "contentErrorStyle", "contentErrorIconClass", "placement", "contentRetryEnabled"], outputs: ["contentRetry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;max-width:100%}.ax-cnv-msg,.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr);grid-auto-rows:10rem}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr);grid-auto-rows:10rem}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg--flush{width:100%;max-width:100%;gap:0}.ax-cnv-msg--flush .ax-cnv-msg__caption{padding:.375rem .625rem 0}.ax-cnv-msg--flush .ax-cnv-msg__grid{border-radius:0;background:transparent}.ax-cnv-msg--flush .ax-cnv-msg__stack{gap:2px}.ax-cnv-msg--flush ::ng-deep .ax-cnv-video{border-radius:0}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXFileAttachmentComponent, selector: "ax-cnv-file-attachment", inputs: ["item"] }, { kind: "component", type: AXConversationMessageRendererStateComponent, selector: "ax-conversation-message-renderer-state", inputs: ["rendererState", "message", "contentErrorLabel", "deliveryFailedLabel", "showContentErrorChrome", "contentErrorStyle", "contentErrorIconClass", "placement", "contentRetryEnabled"], outputs: ["contentRetry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFileRendererComponent, decorators: [{
             type: Component,
@@ -11998,7 +12032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         <p class="ax-cnv-msg__caption">{{ caption() }}</p>
       }
     </div>
-  `, styles: [":host{display:block;max-width:100%}.ax-cnv-msg{display:flex;flex-direction:column;gap:.375rem;max-width:min(100%,18.5rem)}.ax-cnv-msg--wide{max-width:min(100%,22rem)}@media(min-width:480px){.ax-cnv-msg{max-width:min(100%,24rem)}.ax-cnv-msg--wide{max-width:min(100%,28rem)}}.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr)}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr)}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"] }]
+  `, styles: [":host{display:block;max-width:100%}.ax-cnv-msg,.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr);grid-auto-rows:10rem}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr);grid-auto-rows:10rem}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg--flush{width:100%;max-width:100%;gap:0}.ax-cnv-msg--flush .ax-cnv-msg__caption{padding:.375rem .625rem 0}.ax-cnv-msg--flush .ax-cnv-msg__grid{border-radius:0;background:transparent}.ax-cnv-msg--flush .ax-cnv-msg__stack{gap:2px}.ax-cnv-msg--flush ::ng-deep .ax-cnv-video{border-radius:0}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"] }]
         }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] } });
 
 class AXImageAttachmentComponent {
@@ -12022,7 +12056,7 @@ class AXImageAttachmentComponent {
     >
       <img [src]="thumbnailUrl()" [alt]="alt()" loading="lazy" (load)="ready.set(true)" />
     </button>
-  `, isInline: true, styles: [":host{display:block;min-width:0;min-height:0}.ax-cnv-image-attachment{display:block;width:100%;height:100%;min-height:4.5rem;padding:0;border:none;background:rgb(var(--ax-sys-color-light-surface));cursor:pointer;overflow:hidden}.ax-cnv-image-attachment img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s ease}.ax-cnv-image-attachment--ready img{opacity:1}.ax-cnv-image-attachment:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;min-width:0;min-height:0}.ax-cnv-image-attachment{display:block;width:100%;height:100%;min-height:4.5rem;padding:0;border-radius:.5rem;border:none;background:rgb(var(--ax-sys-color-light-surface));cursor:pointer;overflow:hidden}.ax-cnv-image-attachment img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s ease}.ax-cnv-image-attachment--ready img{opacity:1}.ax-cnv-image-attachment:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageAttachmentComponent, decorators: [{
             type: Component,
@@ -12036,7 +12070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
     >
       <img [src]="thumbnailUrl()" [alt]="alt()" loading="lazy" (load)="ready.set(true)" />
     </button>
-  `, styles: [":host{display:block;min-width:0;min-height:0}.ax-cnv-image-attachment{display:block;width:100%;height:100%;min-height:4.5rem;padding:0;border:none;background:rgb(var(--ax-sys-color-light-surface));cursor:pointer;overflow:hidden}.ax-cnv-image-attachment img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s ease}.ax-cnv-image-attachment--ready img{opacity:1}.ax-cnv-image-attachment:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}\n"] }]
+  `, styles: [":host{display:block;min-width:0;min-height:0}.ax-cnv-image-attachment{display:block;width:100%;height:100%;min-height:4.5rem;padding:0;border-radius:.5rem;border:none;background:rgb(var(--ax-sys-color-light-surface));cursor:pointer;overflow:hidden}.ax-cnv-image-attachment img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s ease}.ax-cnv-image-attachment--ready img{opacity:1}.ax-cnv-image-attachment:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}\n"] }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], imageClick: [{ type: i0.Output, args: ["imageClick"] }] } });
 
 class AXImageRendererComponent {
@@ -12069,14 +12103,10 @@ class AXImageRendererComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXImageRendererComponent, isStandalone: true, selector: "ax-conversation-image-renderer", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { imageClick: "imageClick" }, ngImport: i0, template: `
-    <div class="ax-cnv-msg">
+    <div class="ax-cnv-msg ax-cnv-msg--flush">
       <div class="ax-cnv-msg__grid" [class]="gridModeClass()">
         @for (image of images(); track image.mediaId ?? image.url) {
-          <ax-cnv-image-attachment
-            [item]="image"
-            [alt]="caption() || 'Image'"
-            (imageClick)="onImageClick(image)"
-          />
+          <ax-cnv-image-attachment [item]="image" [alt]="caption() || 'Image'" (imageClick)="onImageClick(image)" />
         }
       </div>
       @if (caption()) {
@@ -12090,19 +12120,15 @@ class AXImageRendererComponent {
         placement="below"
       />
     </div>
-  `, isInline: true, styles: [":host{display:block;max-width:100%}.ax-cnv-msg{display:flex;flex-direction:column;gap:.375rem;max-width:min(100%,18.5rem)}.ax-cnv-msg--wide{max-width:min(100%,22rem)}@media(min-width:480px){.ax-cnv-msg{max-width:min(100%,24rem)}.ax-cnv-msg--wide{max-width:min(100%,28rem)}}.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr)}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr)}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXImageAttachmentComponent, selector: "ax-cnv-image-attachment", inputs: ["item", "alt"], outputs: ["imageClick"] }, { kind: "component", type: AXConversationMessageRendererStateComponent, selector: "ax-conversation-message-renderer-state", inputs: ["rendererState", "message", "contentErrorLabel", "deliveryFailedLabel", "showContentErrorChrome", "contentErrorStyle", "contentErrorIconClass", "placement", "contentRetryEnabled"], outputs: ["contentRetry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;max-width:100%}.ax-cnv-msg,.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr);grid-auto-rows:10rem}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr);grid-auto-rows:10rem}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg--flush{width:100%;max-width:100%;gap:0}.ax-cnv-msg--flush .ax-cnv-msg__caption{padding:.375rem .625rem 0}.ax-cnv-msg--flush .ax-cnv-msg__grid{border-radius:0;background:transparent}.ax-cnv-msg--flush .ax-cnv-msg__stack{gap:2px}.ax-cnv-msg--flush ::ng-deep .ax-cnv-video{border-radius:0}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXImageAttachmentComponent, selector: "ax-cnv-image-attachment", inputs: ["item", "alt"], outputs: ["imageClick"] }, { kind: "component", type: AXConversationMessageRendererStateComponent, selector: "ax-conversation-message-renderer-state", inputs: ["rendererState", "message", "contentErrorLabel", "deliveryFailedLabel", "showContentErrorChrome", "contentErrorStyle", "contentErrorIconClass", "placement", "contentRetryEnabled"], outputs: ["contentRetry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-conversation-image-renderer', imports: [CommonModule, AXImageAttachmentComponent, AXConversationMessageRendererStateComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="ax-cnv-msg">
+    <div class="ax-cnv-msg ax-cnv-msg--flush">
       <div class="ax-cnv-msg__grid" [class]="gridModeClass()">
         @for (image of images(); track image.mediaId ?? image.url) {
-          <ax-cnv-image-attachment
-            [item]="image"
-            [alt]="caption() || 'Image'"
-            (imageClick)="onImageClick(image)"
-          />
+          <ax-cnv-image-attachment [item]="image" [alt]="caption() || 'Image'" (imageClick)="onImageClick(image)" />
         }
       </div>
       @if (caption()) {
@@ -12116,7 +12142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         placement="below"
       />
     </div>
-  `, styles: [":host{display:block;max-width:100%}.ax-cnv-msg{display:flex;flex-direction:column;gap:.375rem;max-width:min(100%,18.5rem)}.ax-cnv-msg--wide{max-width:min(100%,22rem)}@media(min-width:480px){.ax-cnv-msg{max-width:min(100%,24rem)}.ax-cnv-msg--wide{max-width:min(100%,28rem)}}.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr)}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr)}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"] }]
+  `, styles: [":host{display:block;max-width:100%}.ax-cnv-msg,.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr);grid-auto-rows:10rem}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr);grid-auto-rows:10rem}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg--flush{width:100%;max-width:100%;gap:0}.ax-cnv-msg--flush .ax-cnv-msg__caption{padding:.375rem .625rem 0}.ax-cnv-msg--flush .ax-cnv-msg__grid{border-radius:0;background:transparent}.ax-cnv-msg--flush .ax-cnv-msg__stack{gap:2px}.ax-cnv-msg--flush ::ng-deep .ax-cnv-video{border-radius:0}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"] }]
         }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], imageClick: [{ type: i0.Output, args: ["imageClick"] }] } });
 
 class AXLocationRendererComponent {
@@ -12458,147 +12484,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 class AXVideoAttachmentComponent {
     constructor() {
         this.item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
-        this.playbackActive = output();
-        this.playbackIdle = output();
-        this.playbackTimeUpdate = output();
-        this.playbackPlayingChange = output();
+        this.playingChange = output();
+        this.timeUpdate = output();
+        this.durationChange = output();
+        this.playbackEnded = output();
         this.videoElementRef = viewChild('videoEl', ...(ngDevMode ? [{ debugName: "videoElementRef" }] : []));
-        this.showPlayer = signal(false, ...(ngDevMode ? [{ debugName: "showPlayer" }] : []));
         this.playbackReference = computed(() => toUploaderReference(this.item()), ...(ngDevMode ? [{ debugName: "playbackReference" }] : []));
-        this.thumbReference = computed(() => ({
-            ...toUploaderReference(this.item()),
-            url: this.item().thumbnailUrl ?? this.item().url,
-        }), ...(ngDevMode ? [{ debugName: "thumbReference" }] : []));
         this.resolvedPlaybackUrl = createResolvedMediaUrlSignal(this.playbackReference);
-        this.resolvedThumbnailUrl = createResolvedMediaUrlSignal(this.thumbReference);
         this.playbackUrl = computed(() => this.resolvedPlaybackUrl() ?? this.item().url ?? '', ...(ngDevMode ? [{ debugName: "playbackUrl" }] : []));
-        this.thumbnailUrl = computed(() => this.resolvedThumbnailUrl() ?? this.item().thumbnailUrl, ...(ngDevMode ? [{ debugName: "thumbnailUrl" }] : []));
         this.duration = computed(() => this.item().duration ?? 0, ...(ngDevMode ? [{ debugName: "duration" }] : []));
         this.durationLabel = computed(() => formatMediaDuration(this.duration()), ...(ngDevMode ? [{ debugName: "durationLabel" }] : []));
-        this.playAriaLabel = computed(() => {
-            const d = this.duration();
-            return d > 0 ? `Play video, ${this.durationLabel()}` : 'Play video';
-        }, ...(ngDevMode ? [{ debugName: "playAriaLabel" }] : []));
+    }
+    togglePlay() {
+        const el = this.videoElementRef()?.nativeElement;
+        if (!el) {
+            return;
+        }
+        if (el.paused) {
+            void el.play();
+        }
+        else {
+            el.pause();
+        }
+    }
+    pause() {
+        this.videoElementRef()?.nativeElement?.pause();
     }
     onLoadedMetadata() {
-        this.emitPlaybackState();
         const el = this.videoElementRef()?.nativeElement;
-        if (el) {
-            this.playbackActive.emit(el);
+        if (el && Number.isFinite(el.duration)) {
+            this.durationChange.emit(el.duration);
         }
     }
     onTimeUpdate() {
-        this.emitPlaybackState();
+        const el = this.videoElementRef()?.nativeElement;
+        if (el) {
+            this.timeUpdate.emit(el.currentTime);
+        }
     }
     onPlay() {
-        this.playbackPlayingChange.emit(true);
-        this.emitPlaybackState();
+        this.playingChange.emit(true);
     }
     onPause() {
-        this.playbackPlayingChange.emit(false);
-        this.emitPlaybackState();
+        this.playingChange.emit(false);
     }
     onEnded() {
-        this.playbackPlayingChange.emit(false);
-        this.emitPlaybackState();
-    }
-    emitPlaybackState() {
-        const el = this.videoElementRef()?.nativeElement;
-        if (!el) {
-            return;
-        }
-        this.playbackTimeUpdate.emit({
-            currentTime: el.currentTime,
-            duration: Number.isFinite(el.duration) ? el.duration : this.duration(),
-        });
+        this.playingChange.emit(false);
+        this.playbackEnded.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXVideoAttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXVideoAttachmentComponent, isStandalone: true, selector: "ax-cnv-video-attachment", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { playbackActive: "playbackActive", playbackIdle: "playbackIdle", playbackTimeUpdate: "playbackTimeUpdate", playbackPlayingChange: "playbackPlayingChange" }, viewQueries: [{ propertyName: "videoElementRef", first: true, predicate: ["videoEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: AXVideoAttachmentComponent, isStandalone: true, selector: "ax-cnv-video-attachment", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { playingChange: "playingChange", timeUpdate: "timeUpdate", durationChange: "durationChange", playbackEnded: "playbackEnded" }, viewQueries: [{ propertyName: "videoElementRef", first: true, predicate: ["videoEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="ax-cnv-video">
-      @if (!showPlayer()) {
-        <button
-          type="button"
-          class="ax-cnv-video__preview"
-          (click)="showPlayer.set(true)"
-          [disabled]="!playbackUrl()"
-          [attr.aria-label]="playAriaLabel()"
-        >
-          @if (thumbnailUrl()) {
-            <img class="ax-cnv-video__thumb" [src]="thumbnailUrl()!" alt="" loading="lazy" />
-          } @else {
-            <span class="ax-cnv-video__placeholder"><i class="fa-light fa-video"></i></span>
-          }
-          <span class="ax-cnv-video__play" aria-hidden="true"><i class="fa-solid fa-play"></i></span>
-          @if (duration() > 0) {
-            <span class="ax-cnv-video__duration">{{ durationLabel() }}</span>
-          }
-        </button>
-      } @else {
-        <video
-          #videoEl
-          class="ax-cnv-video__player"
-          [src]="playbackUrl()"
-          controls
-          playsinline
-          preload="metadata"
-          (loadedmetadata)="onLoadedMetadata()"
-          (timeupdate)="onTimeUpdate()"
-          (play)="onPlay()"
-          (pause)="onPause()"
-          (ended)="onEnded()"
-        ></video>
-      }
+      <video
+        #videoEl
+        class="ax-cnv-video__player"
+        [src]="playbackUrl()"
+        controls
+        playsinline
+        preload="metadata"
+        (loadedmetadata)="onLoadedMetadata()"
+        (timeupdate)="onTimeUpdate()"
+        (play)="onPlay()"
+        (pause)="onPause()"
+        (ended)="onEnded()"
+      ></video>
     </div>
-  `, isInline: true, styles: [":host{display:block}.ax-cnv-video{width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-darker-surface))}.ax-cnv-video__preview{position:relative;display:block;width:100%;min-height:7rem;padding:0;border:none;cursor:pointer;background:rgb(var(--ax-sys-color-darker-surface));touch-action:manipulation}.ax-cnv-video__thumb{width:100%;max-height:min(40dvh,14rem);object-fit:cover;display:block}.ax-cnv-video__placeholder{display:flex;align-items:center;justify-content:center;min-height:7rem;color:rgba(var(--ax-sys-color-on-surface),.45);font-size:2rem}.ax-cnv-video__play{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000047;color:rgb(var(--ax-sys-color-light));font-size:1.75rem}.ax-cnv-video__duration{position:absolute;inset-inline-end:.375rem;inset-block-end:.375rem;padding:.125rem .375rem;border-radius:var(--ax-sys-border-radius, .25rem);background:#000000a6;color:rgb(var(--ax-sys-color-light));font-size:.6875rem;font-variant-numeric:tabular-nums}.ax-cnv-video__player{width:100%;max-height:min(40dvh,14rem);display:block;vertical-align:middle}.ax-cnv-video__preview:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}.ax-cnv-video{width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-darker-surface))}.ax-cnv-video__player{width:100%;max-height:min(40dvh,14rem);display:block;vertical-align:middle}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXVideoAttachmentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-cnv-video-attachment', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="ax-cnv-video">
-      @if (!showPlayer()) {
-        <button
-          type="button"
-          class="ax-cnv-video__preview"
-          (click)="showPlayer.set(true)"
-          [disabled]="!playbackUrl()"
-          [attr.aria-label]="playAriaLabel()"
-        >
-          @if (thumbnailUrl()) {
-            <img class="ax-cnv-video__thumb" [src]="thumbnailUrl()!" alt="" loading="lazy" />
-          } @else {
-            <span class="ax-cnv-video__placeholder"><i class="fa-light fa-video"></i></span>
-          }
-          <span class="ax-cnv-video__play" aria-hidden="true"><i class="fa-solid fa-play"></i></span>
-          @if (duration() > 0) {
-            <span class="ax-cnv-video__duration">{{ durationLabel() }}</span>
-          }
-        </button>
-      } @else {
-        <video
-          #videoEl
-          class="ax-cnv-video__player"
-          [src]="playbackUrl()"
-          controls
-          playsinline
-          preload="metadata"
-          (loadedmetadata)="onLoadedMetadata()"
-          (timeupdate)="onTimeUpdate()"
-          (play)="onPlay()"
-          (pause)="onPause()"
-          (ended)="onEnded()"
-        ></video>
-      }
+      <video
+        #videoEl
+        class="ax-cnv-video__player"
+        [src]="playbackUrl()"
+        controls
+        playsinline
+        preload="metadata"
+        (loadedmetadata)="onLoadedMetadata()"
+        (timeupdate)="onTimeUpdate()"
+        (play)="onPlay()"
+        (pause)="onPause()"
+        (ended)="onEnded()"
+      ></video>
     </div>
-  `, styles: [":host{display:block}.ax-cnv-video{width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-darker-surface))}.ax-cnv-video__preview{position:relative;display:block;width:100%;min-height:7rem;padding:0;border:none;cursor:pointer;background:rgb(var(--ax-sys-color-darker-surface));touch-action:manipulation}.ax-cnv-video__thumb{width:100%;max-height:min(40dvh,14rem);object-fit:cover;display:block}.ax-cnv-video__placeholder{display:flex;align-items:center;justify-content:center;min-height:7rem;color:rgba(var(--ax-sys-color-on-surface),.45);font-size:2rem}.ax-cnv-video__play{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000047;color:rgb(var(--ax-sys-color-light));font-size:1.75rem}.ax-cnv-video__duration{position:absolute;inset-inline-end:.375rem;inset-block-end:.375rem;padding:.125rem .375rem;border-radius:var(--ax-sys-border-radius, .25rem);background:#000000a6;color:rgb(var(--ax-sys-color-light));font-size:.6875rem;font-variant-numeric:tabular-nums}.ax-cnv-video__player{width:100%;max-height:min(40dvh,14rem);display:block;vertical-align:middle}.ax-cnv-video__preview:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}\n"] }]
-        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], playbackActive: [{ type: i0.Output, args: ["playbackActive"] }], playbackIdle: [{ type: i0.Output, args: ["playbackIdle"] }], playbackTimeUpdate: [{ type: i0.Output, args: ["playbackTimeUpdate"] }], playbackPlayingChange: [{ type: i0.Output, args: ["playbackPlayingChange"] }], videoElementRef: [{ type: i0.ViewChild, args: ['videoEl', { isSignal: true }] }] } });
+  `, styles: [":host{display:block}.ax-cnv-video{width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-darker-surface))}.ax-cnv-video__player{width:100%;max-height:min(40dvh,14rem);display:block;vertical-align:middle}\n"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], playingChange: [{ type: i0.Output, args: ["playingChange"] }], timeUpdate: [{ type: i0.Output, args: ["timeUpdate"] }], durationChange: [{ type: i0.Output, args: ["durationChange"] }], playbackEnded: [{ type: i0.Output, args: ["playbackEnded"] }], videoElementRef: [{ type: i0.ViewChild, args: ['videoEl', { isSignal: true }] }] } });
 
 class AXVideoRendererComponent {
     constructor() {
         this.platformId = inject(PLATFORM_ID);
         this.destroyRef = inject(DestroyRef);
         this.infoBarService = inject(AXInfoBarService);
-        this.activeVideoEl = null;
-        this.activeVideoIndex = signal(null, ...(ngDevMode ? [{ debugName: "activeVideoIndex" }] : []));
+        this.attachments = viewChildren(AXVideoAttachmentComponent, ...(ngDevMode ? [{ debugName: "attachments" }] : []));
+        this.activeVideoIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeVideoIndex" }] : []));
         this.message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
         this.rendererState = computed(() => ({
             deliveryStatus: this.message().status,
@@ -12617,62 +12597,62 @@ class AXVideoRendererComponent {
             }
         });
     }
-    onPlaybackActive(element, index) {
-        this.activeVideoEl = element;
-        this.activeVideoIndex.set(index);
-        this.duration.set(Number.isFinite(element.duration) ? element.duration : this.videos()[index]?.duration ?? 0);
-        this.syncInfoBarBanner(true);
+    onPlayingChange(index, playing) {
+        if (playing) {
+            this.activeVideoIndex.set(index);
+            this.pauseOtherVideos(index);
+            this.isPlaying.set(true);
+            this.syncInfoBarBanner(true);
+            return;
+        }
+        if (this.activeVideoIndex() === index) {
+            this.isPlaying.set(false);
+            this.syncInfoBarBanner();
+        }
     }
-    onPlaybackIdle(index) {
+    onTimeUpdate(index, time) {
         if (this.activeVideoIndex() !== index) {
             return;
         }
-        this.activeVideoEl = null;
-        this.activeVideoIndex.set(null);
-        this.isPlaying.set(false);
-        this.currentTime.set(0);
-        this.infoBarService.hideMessageBanner(this.message().id);
+        this.currentTime.set(time);
+        this.syncInfoBarBanner();
     }
-    onPlaybackTimeUpdate(event) {
-        this.currentTime.set(event.currentTime);
-        if (event.duration > 0) {
-            this.duration.set(event.duration);
+    onDurationChange(index, duration) {
+        if (this.activeVideoIndex() !== index) {
+            return;
         }
+        this.duration.set(duration);
         this.syncInfoBarBanner();
     }
-    onPlaybackPlayingChange(playing) {
-        this.isPlaying.set(playing);
-        this.syncInfoBarBanner(playing);
+    onPlaybackEnded(index) {
+        if (this.activeVideoIndex() !== index) {
+            return;
+        }
+        this.isPlaying.set(false);
+        this.currentTime.set(0);
+        this.syncInfoBarBanner();
     }
     togglePlay() {
-        if (!isPlatformBrowser(this.platformId) || !this.activeVideoEl) {
+        if (!isPlatformBrowser(this.platformId)) {
             return;
         }
-        const el = this.activeVideoEl;
-        if (el.paused) {
-            void el.play();
-            this.isPlaying.set(true);
-        }
-        else {
-            el.pause();
-            this.isPlaying.set(false);
-        }
-        this.syncInfoBarBanner();
+        this.attachments()[this.activeVideoIndex()]?.togglePlay();
+    }
+    pauseOtherVideos(activeIndex) {
+        this.attachments().forEach((attachment, index) => {
+            if (index !== activeIndex) {
+                attachment.pause();
+            }
+        });
     }
     pausePlayback() {
-        if (this.activeVideoEl) {
-            this.activeVideoEl.pause();
-        }
+        this.attachments()[this.activeVideoIndex()]?.pause();
         this.isPlaying.set(false);
     }
     syncInfoBarBanner(forceOpen = false) {
         const message = this.message();
         const index = this.activeVideoIndex();
-        if (index === null) {
-            return;
-        }
-        const title = this.payload().caption?.trim() ||
-            (this.videos().length > 1 ? `Video ${index + 1}` : 'Video');
+        const title = this.payload().caption?.trim() || (this.videos().length > 1 ? `Video ${index + 1}` : 'Video');
         syncPlaybackInfoBarBanner(this.infoBarService, message, {
             title,
             currentTime: this.currentTime(),
@@ -12683,17 +12663,17 @@ class AXVideoRendererComponent {
         }, { forceOpen });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXVideoRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXVideoRendererComponent, isStandalone: true, selector: "ax-conversation-video-renderer", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXVideoRendererComponent, isStandalone: true, selector: "ax-conversation-video-renderer", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "attachments", predicate: AXVideoAttachmentComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="ax-cnv-msg">
       <ax-conversation-message-renderer-state [rendererState]="rendererState()" [message]="message()" />
       <div class="ax-cnv-msg__stack">
         @for (video of videos(); track video.mediaId ?? video.url; let i = $index) {
           <ax-cnv-video-attachment
             [item]="video"
-            (playbackActive)="onPlaybackActive($event, i)"
-            (playbackIdle)="onPlaybackIdle(i)"
-            (playbackTimeUpdate)="onPlaybackTimeUpdate($event)"
-            (playbackPlayingChange)="onPlaybackPlayingChange($event)"
+            (playingChange)="onPlayingChange(i, $event)"
+            (timeUpdate)="onTimeUpdate(i, $event)"
+            (durationChange)="onDurationChange(i, $event)"
+            (playbackEnded)="onPlaybackEnded(i)"
           />
         }
       </div>
@@ -12701,7 +12681,7 @@ class AXVideoRendererComponent {
         <p class="ax-cnv-msg__caption">{{ caption() }}</p>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;max-width:100%}.ax-cnv-msg{display:flex;flex-direction:column;gap:.375rem;max-width:min(100%,18.5rem)}.ax-cnv-msg--wide{max-width:min(100%,22rem)}@media(min-width:480px){.ax-cnv-msg{max-width:min(100%,24rem)}.ax-cnv-msg--wide{max-width:min(100%,28rem)}}.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr)}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr)}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXVideoAttachmentComponent, selector: "ax-cnv-video-attachment", inputs: ["item"], outputs: ["playbackActive", "playbackIdle", "playbackTimeUpdate", "playbackPlayingChange"] }, { kind: "component", type: AXConversationMessageRendererStateComponent, selector: "ax-conversation-message-renderer-state", inputs: ["rendererState", "message", "contentErrorLabel", "deliveryFailedLabel", "showContentErrorChrome", "contentErrorStyle", "contentErrorIconClass", "placement", "contentRetryEnabled"], outputs: ["contentRetry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;max-width:100%}.ax-cnv-msg,.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr);grid-auto-rows:10rem}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr);grid-auto-rows:10rem}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg--flush{width:100%;max-width:100%;gap:0}.ax-cnv-msg--flush .ax-cnv-msg__caption{padding:.375rem .625rem 0}.ax-cnv-msg--flush .ax-cnv-msg__grid{border-radius:0;background:transparent}.ax-cnv-msg--flush .ax-cnv-msg__stack{gap:2px}.ax-cnv-msg--flush ::ng-deep .ax-cnv-video{border-radius:0}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXVideoAttachmentComponent, selector: "ax-cnv-video-attachment", inputs: ["item"], outputs: ["playingChange", "timeUpdate", "durationChange", "playbackEnded"] }, { kind: "component", type: AXConversationMessageRendererStateComponent, selector: "ax-conversation-message-renderer-state", inputs: ["rendererState", "message", "contentErrorLabel", "deliveryFailedLabel", "showContentErrorChrome", "contentErrorStyle", "contentErrorIconClass", "placement", "contentRetryEnabled"], outputs: ["contentRetry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXVideoRendererComponent, decorators: [{
             type: Component,
@@ -12712,10 +12692,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         @for (video of videos(); track video.mediaId ?? video.url; let i = $index) {
           <ax-cnv-video-attachment
             [item]="video"
-            (playbackActive)="onPlaybackActive($event, i)"
-            (playbackIdle)="onPlaybackIdle(i)"
-            (playbackTimeUpdate)="onPlaybackTimeUpdate($event)"
-            (playbackPlayingChange)="onPlaybackPlayingChange($event)"
+            (playingChange)="onPlayingChange(i, $event)"
+            (timeUpdate)="onTimeUpdate(i, $event)"
+            (durationChange)="onDurationChange(i, $event)"
+            (playbackEnded)="onPlaybackEnded(i)"
           />
         }
       </div>
@@ -12723,8 +12703,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         <p class="ax-cnv-msg__caption">{{ caption() }}</p>
       }
     </div>
-  `, styles: [":host{display:block;max-width:100%}.ax-cnv-msg{display:flex;flex-direction:column;gap:.375rem;max-width:min(100%,18.5rem)}.ax-cnv-msg--wide{max-width:min(100%,22rem)}@media(min-width:480px){.ax-cnv-msg{max-width:min(100%,24rem)}.ax-cnv-msg--wide{max-width:min(100%,28rem)}}.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr)}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr)}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] } });
+  `, styles: [":host{display:block;max-width:100%}.ax-cnv-msg,.ax-cnv-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-cnv-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-cnv-msg__grid--single{grid-template-columns:1fr}.ax-cnv-msg__grid--single ::ng-deep .ax-cnv-image-attachment{max-height:min(50dvh,20rem)}.ax-cnv-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-cnv-msg__grid--multi{grid-template-columns:repeat(3,1fr);grid-auto-rows:10rem}@media(max-width:380px){.ax-cnv-msg__grid--multi{grid-template-columns:repeat(2,1fr);grid-auto-rows:10rem}}.ax-cnv-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-cnv-msg--flush{width:100%;max-width:100%;gap:0}.ax-cnv-msg--flush .ax-cnv-msg__caption{padding:.375rem .625rem 0}.ax-cnv-msg--flush .ax-cnv-msg__grid{border-radius:0;background:transparent}.ax-cnv-msg--flush .ax-cnv-msg__stack{gap:2px}.ax-cnv-msg--flush ::ng-deep .ax-cnv-video{border-radius:0}.ax-cnv-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { attachments: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => AXVideoAttachmentComponent), { isSignal: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] } });
 
 /** Decorative bars when payload has no waveform (deterministic, no random). */
 const FALLBACK_WAVEFORM = [
@@ -15212,39 +15192,33 @@ class AXComposerComponent {
                 this.replyingToMessage.set(null);
             }
         }, ...(ngDevMode ? [{ debugName: "#controllerEffect" }] : []));
-        // Reset composer state when conversation changes
+        // Close composer popovers when conversation changes (draft/reply/edit reset is handled by message-list).
         this.#previousConversationId = undefined;
-        this.#conversationChangeEffect = effect(() => {
-            const conversation = this.activeConversation();
-            const currentId = conversation?.id;
-            // Save draft for previous conversation
-            if (this.#previousConversationId && this.#previousConversationId !== currentId) {
-                this.composerService.saveDraft(this.#previousConversationId, this.draftText());
-            }
-            // Only reset if conversation ID actually changed (not on initial load)
-            if (currentId !== this.#previousConversationId && this.#previousConversationId !== undefined) {
-                this.resetComposerState();
-            }
-            // Load draft for new conversation
-            if (currentId && currentId !== this.#previousConversationId) {
-                const draft = this.composerService.loadDraft(currentId);
-                if (draft) {
-                    this.draftText.set(draft);
-                }
+        this.#conversationUiResetEffect = effect(() => {
+            const currentId = this.activeConversation()?.id;
+            if (this.#previousConversationId !== undefined && this.#previousConversationId !== currentId) {
+                this.emojiPopoverTarget.set(null);
+                this.editingMessage.set(null);
+                this.replyingToMessage.set(null);
             }
             this.#previousConversationId = currentId;
-        }, ...(ngDevMode ? [{ debugName: "#conversationChangeEffect" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#conversationUiResetEffect" }] : []));
         // Auto-save draft on text change
         this.#draftAutoSaveEffect = effect(() => {
             const text = this.draftText();
             const conversation = this.activeConversation();
-            if (conversation?.id) {
+            const isEditing = !!this.composerService.editMessage();
+            if (conversation?.id && !isEditing) {
+                const conversationId = conversation.id;
                 // Debounce auto-save
                 if (this.draftSaveTimeout) {
                     clearTimeout(this.draftSaveTimeout);
                 }
                 this.draftSaveTimeout = window.setTimeout(() => {
-                    this.composerService.saveDraft(conversation.id, text);
+                    if (this.activeConversation()?.id !== conversationId || this.composerService.editMessage()) {
+                        return;
+                    }
+                    this.composerService.saveDraft(conversationId, text);
                 }, 500);
             }
         }, ...(ngDevMode ? [{ debugName: "#draftAutoSaveEffect" }] : []));
@@ -15274,9 +15248,9 @@ class AXComposerComponent {
     #focusComposerEffect;
     // React to controller signals (reply/edit)
     #controllerEffect;
-    // Reset composer state when conversation changes
+    // Close composer popovers when conversation changes (draft/reply/edit reset is handled by message-list).
     #previousConversationId;
-    #conversationChangeEffect;
+    #conversationUiResetEffect;
     // Auto-save draft on text change
     #draftAutoSaveEffect;
     /** Handle key down */
@@ -15310,7 +15284,7 @@ class AXComposerComponent {
         this.typingSubject.complete();
         // Save draft before destroying
         const conversation = this.activeConversation();
-        if (conversation?.id) {
+        if (conversation?.id && !this.composerService.editMessage()) {
             this.composerService.saveDraft(conversation.id, this.draftText());
         }
         // Clear timeout
@@ -15483,20 +15457,6 @@ class AXComposerComponent {
         this.replyingToMessage.set(null);
         this.composerService.clear();
     }
-    /** Reset all composer states (used when switching conversations) */
-    resetComposerState() {
-        // Clear edit/reply states
-        this.editingMessage.set(null);
-        this.replyingToMessage.set(null);
-        // Clear service states (reply/edit messages, active component)
-        this.composerService.clear();
-        // Close any open popover/popup
-        this.emojiPopoverTarget.set(null);
-        // Clear attachments
-        this.attachments.set([]);
-        // Clear draft text
-        this.draftText.set('');
-    }
     /** Start editing a message */
     startEdit(message) {
         this.editingMessage.set(message);
@@ -16331,10 +16291,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * Manages info bar state and actions
  */
 class AXInfoBarService {
-    // Access registry through conversation service
-    get registry() {
-        return this.conversationService.registry;
-    }
     constructor() {
         this.conversationService = inject(AXConversationService);
         this.injector = inject(Injector);
@@ -16354,13 +16310,17 @@ class AXInfoBarService {
         /** Current search result index */
         this._currentSearchIndex = signal(0, ...(ngDevMode ? [{ debugName: "_currentSearchIndex" }] : []));
         this.currentSearchIndex = this._currentSearchIndex.asReadonly();
-        effect(() => {
-            const activeConversationId = this.activeConversation()?.id;
-            const activeBanner = this._activeBanner();
-            if (activeBanner && activeBanner.message.conversationId !== activeConversationId) {
-                this._activeBanner.set(null);
-            }
-        });
+    }
+    // Access registry through conversation service
+    get registry() {
+        return this.conversationService.registry;
+    }
+    /**
+     * Reset info-bar overlays when the active conversation changes.
+     */
+    onConversationChanged() {
+        this.hideMessageBanner();
+        this.hideComponent();
     }
     /**
      * Get actions for the active conversation
@@ -16445,6 +16405,10 @@ class AXInfoBarService {
             return;
         }
         const current = this._activeBanner();
+        if (current?.message.id === message.id) {
+            this.updateMessageBannerInputs(message.id, inputs ?? {});
+            return;
+        }
         if (current && current.message.id !== message.id) {
             this.hideMessageBanner(current.message.id);
         }
@@ -16565,7 +16529,7 @@ class AXInfoBarService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXInfoBarService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * Members Popover Component
@@ -17756,6 +17720,8 @@ class AXMessageListComponent {
     constructor() {
         this.conversationService = inject(AXConversationService);
         this.messageListService = inject(AXMessageListService);
+        this.composerService = inject(AXComposerService);
+        this.infoBarService = inject(AXInfoBarService);
         this.translation = inject(AXTranslationService);
         this.config = inject(CONVERSATION_CONFIG);
         /** Fallback when no conversation is active and no `ax-conversation-message-list-no-active` content is projected. */
@@ -17834,6 +17800,8 @@ class AXMessageListComponent {
             untracked(() => {
                 if (currentConversationId !== previousConversationId) {
                     this.contextMenuMessageId.set(null);
+                    this.composerService.onConversationChanged(previousConversationId, currentConversationId);
+                    this.infoBarService.onConversationChanged();
                 }
                 // Only scroll if the conversation ID actually changed (not just updated)
                 if (currentConversationId && currentConversationId !== previousConversationId) {