@memberjunction/ng-conversations 2.128.0 → 2.130.0

package/dist/lib/components/attachment/image-viewer.component.d.ts

@@ -0,0 +1,95 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Full-screen image viewer modal with zoom and pan capabilities.
+ * Provides a lightbox-style experience for viewing attachment images.
+ */
+export declare class ImageViewerComponent implements OnInit, OnDestroy {
+    /** Image source URL (can be data URL or regular URL) */
+    imageUrl: string;
+    /** Image alt text */
+    alt: string;
+    /** Image filename for download */
+    fileName: string;
+    /** Whether the viewer is visible */
+    visible: boolean;
+    /** Emits when the viewer should be closed */
+    closed: EventEmitter<void>;
+    zoomLevel: number;
+    minZoom: number;
+    maxZoom: number;
+    translateX: number;
+    translateY: number;
+    isDragging: boolean;
+    private lastMouseX;
+    private lastMouseY;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Handle escape key to close
+     */
+    onEscapeKey(): void;
+    /**
+     * Handle mouse wheel for zoom
+     */
+    onWheel(event: WheelEvent): void;
+    /**
+     * Close the viewer
+     */
+    close(): void;
+    /**
+     * Handle backdrop click
+     */
+    onBackdropClick(event: MouseEvent): void;
+    /**
+     * Zoom in
+     */
+    zoomIn(): void;
+    /**
+     * Zoom out
+     */
+    zoomOut(): void;
+    /**
+     * Reset to 100% zoom
+     */
+    resetZoom(): void;
+    /**
+     * Fit image to screen
+     */
+    fitToScreen(): void;
+    /**
+     * Reset view to initial state
+     */
+    private resetView;
+    /**
+     * Adjust zoom level
+     */
+    private adjustZoom;
+    /**
+     * Handle mouse down for dragging
+     */
+    onMouseDown(event: MouseEvent): void;
+    /**
+     * Handle mouse move for dragging
+     */
+    onMouseMove(event: MouseEvent): void;
+    /**
+     * Handle mouse up to stop dragging
+     */
+    onMouseUp(): void;
+    /**
+     * Download the image
+     */
+    downloadImage(): void;
+    /**
+     * Get current zoom percentage for display
+     */
+    get zoomPercentage(): string;
+    /**
+     * Get transform style for image
+     */
+    get imageTransform(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImageViewerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageViewerComponent, "mj-image-viewer", never, { "imageUrl": { "alias": "imageUrl"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "fileName": { "alias": "fileName"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, { "closed": "closed"; }, never, never, false, never>;
+}
+//# sourceMappingURL=image-viewer.component.d.ts.map

package/dist/lib/components/attachment/image-viewer.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-viewer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/attachment/image-viewer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EAEZ,MAAM,EACN,SAAS,EACV,MAAM,eAAe,CAAC;;AAEvB;;;GAGG;AACH,qBAKa,oBAAqB,YAAW,MAAM,EAAE,SAAS;IAC5D,wDAAwD;IAC/C,QAAQ,EAAE,MAAM,CAAM;IAE/B,qBAAqB;IACZ,GAAG,EAAE,MAAM,CAAW;IAE/B,kCAAkC;IACzB,QAAQ,EAAE,MAAM,CAAW;IAEpC,oCAAoC;IAC3B,OAAO,EAAE,OAAO,CAAS;IAElC,6CAA6C;IACnC,MAAM,qBAA4B;IAGrC,SAAS,EAAE,MAAM,CAAK;IACtB,OAAO,EAAE,MAAM,CAAO;IACtB,OAAO,EAAE,MAAM,CAAK;IACpB,UAAU,EAAE,MAAM,CAAK;IACvB,UAAU,EAAE,MAAM,CAAK;IAGvB,UAAU,EAAE,OAAO,CAAS;IACnC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,UAAU,CAAa;IAE/B,QAAQ,IAAI,IAAI;IAOhB,WAAW,IAAI,IAAI;IAKnB;;OAEG;IAEH,WAAW,IAAI,IAAI;IAMnB;;OAEG;IAEH,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAQhC;;OAEG;IACH,KAAK,IAAI,IAAI;IAMb;;OAEG;IACH,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAQxC;;OAEG;IACH,MAAM,IAAI,IAAI;IAId;;OAEG;IACH,OAAO,IAAI,IAAI;IAIf;;OAEG;IACH,SAAS,IAAI,IAAI;IAMjB;;OAEG;IACH,WAAW,IAAI,IAAI;IAKnB;;OAEG;IACH,OAAO,CAAC,SAAS;IAMjB;;OAEG;IACH,OAAO,CAAC,UAAU;IAoBlB;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAUpC;;OAEG;IAEH,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAapC;;OAEG;IAEH,SAAS,IAAI,IAAI;IAIjB;;OAEG;IACH,aAAa,IAAI,IAAI;IAOrB;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAE3B;IAED;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAE3B;yCA7MU,oBAAoB;2CAApB,oBAAoB;CA8MhC"}

package/dist/lib/components/attachment/image-viewer.component.js

@@ -0,0 +1,293 @@
+import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+function ImageViewerComponent_div_0_span_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 25);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.fileName);
+} }
+function ImageViewerComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵlistener("click", function ImageViewerComponent_div_0_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onBackdropClick($event)); });
+    i0.ɵɵelementStart(1, "div", 2)(2, "div", 3);
+    i0.ɵɵtemplate(3, ImageViewerComponent_div_0_span_3_Template, 2, 1, "span", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 5)(5, "button", 6);
+    i0.ɵɵlistener("click", function ImageViewerComponent_div_0_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.zoomOut()); });
+    i0.ɵɵelement(6, "i", 7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 8);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "button", 9);
+    i0.ɵɵlistener("click", function ImageViewerComponent_div_0_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.zoomIn()); });
+    i0.ɵɵelement(10, "i", 10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(11, "div", 11);
+    i0.ɵɵelementStart(12, "button", 12);
+    i0.ɵɵlistener("click", function ImageViewerComponent_div_0_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.resetZoom()); });
+    i0.ɵɵelement(13, "i", 13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "button", 14);
+    i0.ɵɵlistener("click", function ImageViewerComponent_div_0_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.fitToScreen()); });
+    i0.ɵɵelement(15, "i", 15);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 16)(17, "button", 17);
+    i0.ɵɵlistener("click", function ImageViewerComponent_div_0_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.downloadImage()); });
+    i0.ɵɵelement(18, "i", 18);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "button", 19);
+    i0.ɵɵlistener("click", function ImageViewerComponent_div_0_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
+    i0.ɵɵelement(20, "i", 20);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(21, "div", 21);
+    i0.ɵɵlistener("mousedown", function ImageViewerComponent_div_0_Template_div_mousedown_21_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMouseDown($event)); });
+    i0.ɵɵelement(22, "img", 22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "div", 23)(24, "span");
+    i0.ɵɵtext(25, "Scroll to zoom");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "span", 24);
+    i0.ɵɵtext(27, "|");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(28, "span");
+    i0.ɵɵtext(29, "Drag to pan when zoomed");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "span", 24);
+    i0.ɵɵtext(31, "|");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(32, "span");
+    i0.ɵɵtext(33, "Esc to close");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r1.fileName);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.zoomPercentage);
+    i0.ɵɵadvance(13);
+    i0.ɵɵstyleProp("cursor", ctx_r1.zoomLevel > 1 ? ctx_r1.isDragging ? "grabbing" : "grab" : "default");
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("transform", ctx_r1.imageTransform);
+    i0.ɵɵproperty("src", ctx_r1.imageUrl, i0.ɵɵsanitizeUrl)("alt", ctx_r1.alt);
+} }
+/**
+ * Full-screen image viewer modal with zoom and pan capabilities.
+ * Provides a lightbox-style experience for viewing attachment images.
+ */
+export class ImageViewerComponent {
+    /** Image source URL (can be data URL or regular URL) */
+    imageUrl = '';
+    /** Image alt text */
+    alt = 'Image';
+    /** Image filename for download */
+    fileName = 'image';
+    /** Whether the viewer is visible */
+    visible = false;
+    /** Emits when the viewer should be closed */
+    closed = new EventEmitter();
+    // Zoom and pan state
+    zoomLevel = 1;
+    minZoom = 0.1;
+    maxZoom = 5;
+    translateX = 0;
+    translateY = 0;
+    // Drag state
+    isDragging = false;
+    lastMouseX = 0;
+    lastMouseY = 0;
+    ngOnInit() {
+        // Lock body scroll when viewer is open
+        if (this.visible) {
+            document.body.style.overflow = 'hidden';
+        }
+    }
+    ngOnDestroy() {
+        // Restore body scroll
+        document.body.style.overflow = '';
+    }
+    /**
+     * Handle escape key to close
+     */
+    onEscapeKey() {
+        if (this.visible) {
+            this.close();
+        }
+    }
+    /**
+     * Handle mouse wheel for zoom
+     */
+    onWheel(event) {
+        if (!this.visible)
+            return;
+        event.preventDefault();
+        const delta = event.deltaY > 0 ? -0.1 : 0.1;
+        this.adjustZoom(delta, event.clientX, event.clientY);
+    }
+    /**
+     * Close the viewer
+     */
+    close() {
+        this.resetView();
+        document.body.style.overflow = '';
+        this.closed.emit();
+    }
+    /**
+     * Handle backdrop click
+     */
+    onBackdropClick(event) {
+        // Only close if clicking directly on backdrop
+        const target = event.target;
+        if (target.classList.contains('image-viewer-backdrop')) {
+            this.close();
+        }
+    }
+    /**
+     * Zoom in
+     */
+    zoomIn() {
+        this.adjustZoom(0.25);
+    }
+    /**
+     * Zoom out
+     */
+    zoomOut() {
+        this.adjustZoom(-0.25);
+    }
+    /**
+     * Reset to 100% zoom
+     */
+    resetZoom() {
+        this.zoomLevel = 1;
+        this.translateX = 0;
+        this.translateY = 0;
+    }
+    /**
+     * Fit image to screen
+     */
+    fitToScreen() {
+        // Reset position and set zoom to 1 (CSS will handle fitting)
+        this.resetView();
+    }
+    /**
+     * Reset view to initial state
+     */
+    resetView() {
+        this.zoomLevel = 1;
+        this.translateX = 0;
+        this.translateY = 0;
+    }
+    /**
+     * Adjust zoom level
+     */
+    adjustZoom(delta, centerX, centerY) {
+        const newZoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.zoomLevel + delta));
+        if (centerX !== undefined && centerY !== undefined && newZoom !== this.zoomLevel) {
+            // Zoom towards mouse position
+            const factor = newZoom / this.zoomLevel;
+            const imageContainer = document.querySelector('.image-container');
+            if (imageContainer) {
+                const rect = imageContainer.getBoundingClientRect();
+                const offsetX = centerX - rect.left - rect.width / 2 - this.translateX;
+                const offsetY = centerY - rect.top - rect.height / 2 - this.translateY;
+                this.translateX = this.translateX - offsetX * (factor - 1);
+                this.translateY = this.translateY - offsetY * (factor - 1);
+            }
+        }
+        this.zoomLevel = newZoom;
+    }
+    /**
+     * Handle mouse down for dragging
+     */
+    onMouseDown(event) {
+        if (event.button !== 0)
+            return; // Only left click
+        if (this.zoomLevel <= 1)
+            return; // Only allow pan when zoomed in
+        this.isDragging = true;
+        this.lastMouseX = event.clientX;
+        this.lastMouseY = event.clientY;
+        event.preventDefault();
+    }
+    /**
+     * Handle mouse move for dragging
+     */
+    onMouseMove(event) {
+        if (!this.isDragging)
+            return;
+        const deltaX = event.clientX - this.lastMouseX;
+        const deltaY = event.clientY - this.lastMouseY;
+        this.translateX += deltaX;
+        this.translateY += deltaY;
+        this.lastMouseX = event.clientX;
+        this.lastMouseY = event.clientY;
+    }
+    /**
+     * Handle mouse up to stop dragging
+     */
+    onMouseUp() {
+        this.isDragging = false;
+    }
+    /**
+     * Download the image
+     */
+    downloadImage() {
+        const link = document.createElement('a');
+        link.href = this.imageUrl;
+        link.download = this.fileName;
+        link.click();
+    }
+    /**
+     * Get current zoom percentage for display
+     */
+    get zoomPercentage() {
+        return Math.round(this.zoomLevel * 100) + '%';
+    }
+    /**
+     * Get transform style for image
+     */
+    get imageTransform() {
+        return `translate(${this.translateX}px, ${this.translateY}px) scale(${this.zoomLevel})`;
+    }
+    static ɵfac = function ImageViewerComponent_Factory(t) { return new (t || ImageViewerComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ImageViewerComponent, selectors: [["mj-image-viewer"]], hostBindings: function ImageViewerComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown.escape", function ImageViewerComponent_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, false, i0.ɵɵresolveDocument)("wheel", function ImageViewerComponent_wheel_HostBindingHandler($event) { return ctx.onWheel($event); })("mousemove", function ImageViewerComponent_mousemove_HostBindingHandler($event) { return ctx.onMouseMove($event); }, false, i0.ɵɵresolveDocument)("mouseup", function ImageViewerComponent_mouseup_HostBindingHandler() { return ctx.onMouseUp(); }, false, i0.ɵɵresolveDocument);
+        } }, inputs: { imageUrl: "imageUrl", alt: "alt", fileName: "fileName", visible: "visible" }, outputs: { closed: "closed" }, decls: 1, vars: 1, consts: [["class", "image-viewer-backdrop", 3, "click", 4, "ngIf"], [1, "image-viewer-backdrop", 3, "click"], [1, "viewer-toolbar"], [1, "toolbar-left"], ["class", "file-name", 4, "ngIf"], [1, "toolbar-center"], ["title", "Zoom Out", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-minus"], [1, "zoom-display"], ["title", "Zoom In", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "toolbar-separator"], ["title", "Reset Zoom (100%)", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-expand"], ["title", "Fit to Screen", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-compress"], [1, "toolbar-right"], ["title", "Download", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-download"], ["title", "Close (Esc)", 1, "toolbar-btn", "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "image-container", 3, "mousedown"], ["draggable", "false", 1, "viewer-image", 3, "src", "alt"], [1, "viewer-instructions"], [1, "separator"], [1, "file-name"]], template: function ImageViewerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, ImageViewerComponent_div_0_Template, 34, 8, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.visible);
+        } }, dependencies: [i1.NgIf], styles: [".image-viewer-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n  background: rgba(0, 0, 0, 0.92);\n  display: flex;\n  flex-direction: column;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n\n\n.viewer-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(10px);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.toolbar-left[_ngcontent-%COMP%], \n.toolbar-center[_ngcontent-%COMP%], \n.toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n  flex: 1;\n  justify-content: flex-end;\n}\n\n.file-name[_ngcontent-%COMP%] {\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 14px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 300px;\n}\n\n.toolbar-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: background 0.2s, transform 0.15s;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:hover {\n  background: rgba(255, 255, 255, 0.2);\n  transform: scale(1.05);\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:active {\n  transform: scale(0.95);\n}\n\n.toolbar-btn.close-btn[_ngcontent-%COMP%] {\n  background: rgba(255, 59, 48, 0.2);\n}\n\n.toolbar-btn.close-btn[_ngcontent-%COMP%]:hover {\n  background: rgba(255, 59, 48, 0.4);\n}\n\n.toolbar-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.zoom-display[_ngcontent-%COMP%] {\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 13px;\n  font-weight: 500;\n  min-width: 50px;\n  text-align: center;\n  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;\n}\n\n.toolbar-separator[_ngcontent-%COMP%] {\n  width: 1px;\n  height: 20px;\n  background: rgba(255, 255, 255, 0.2);\n  margin: 0 4px;\n}\n\n\n\n.image-container[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: 20px;\n}\n\n.viewer-image[_ngcontent-%COMP%] {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  transition: transform 0.1s ease-out;\n  user-select: none;\n  pointer-events: none;\n  border-radius: 4px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\n}\n\n\n\n.viewer-instructions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 10px;\n  color: rgba(255, 255, 255, 0.5);\n  font-size: 12px;\n}\n\n.viewer-instructions[_ngcontent-%COMP%]   .separator[_ngcontent-%COMP%] {\n  opacity: 0.3;\n}\n\n\n\n@media (max-width: 768px) {\n  .viewer-toolbar[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n  }\n\n  .toolbar-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n  }\n\n  .file-name[_ngcontent-%COMP%] {\n    max-width: 150px;\n    font-size: 12px;\n  }\n\n  .zoom-display[_ngcontent-%COMP%] {\n    min-width: 40px;\n    font-size: 11px;\n  }\n\n  .viewer-instructions[_ngcontent-%COMP%] {\n    font-size: 10px;\n    padding: 8px;\n  }\n\n  .image-container[_ngcontent-%COMP%] {\n    padding: 10px;\n  }\n}\n\n\n\n@media (hover: none) {\n  .toolbar-btn[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 255, 255, 0.1);\n    transform: none;\n  }\n\n  .toolbar-btn.close-btn[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 59, 48, 0.2);\n  }\n\n  .viewer-instructions[_ngcontent-%COMP%] {\n    display: none;\n  }\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImageViewerComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-image-viewer', template: "<div class=\"image-viewer-backdrop\"\n     *ngIf=\"visible\"\n     (click)=\"onBackdropClick($event)\">\n\n  <!-- Toolbar -->\n  <div class=\"viewer-toolbar\">\n    <div class=\"toolbar-left\">\n      <span class=\"file-name\" *ngIf=\"fileName\">{{ fileName }}</span>\n    </div>\n\n    <div class=\"toolbar-center\">\n      <button class=\"toolbar-btn\" (click)=\"zoomOut()\" title=\"Zoom Out\">\n        <i class=\"fa-solid fa-minus\"></i>\n      </button>\n\n      <span class=\"zoom-display\">{{ zoomPercentage }}</span>\n\n      <button class=\"toolbar-btn\" (click)=\"zoomIn()\" title=\"Zoom In\">\n        <i class=\"fa-solid fa-plus\"></i>\n      </button>\n\n      <div class=\"toolbar-separator\"></div>\n\n      <button class=\"toolbar-btn\" (click)=\"resetZoom()\" title=\"Reset Zoom (100%)\">\n        <i class=\"fa-solid fa-expand\"></i>\n      </button>\n\n      <button class=\"toolbar-btn\" (click)=\"fitToScreen()\" title=\"Fit to Screen\">\n        <i class=\"fa-solid fa-compress\"></i>\n      </button>\n    </div>\n\n    <div class=\"toolbar-right\">\n      <button class=\"toolbar-btn\" (click)=\"downloadImage()\" title=\"Download\">\n        <i class=\"fa-solid fa-download\"></i>\n      </button>\n\n      <button class=\"toolbar-btn close-btn\" (click)=\"close()\" title=\"Close (Esc)\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- Image Container -->\n  <div class=\"image-container\"\n       (mousedown)=\"onMouseDown($event)\"\n       [style.cursor]=\"zoomLevel > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default'\">\n    <img [src]=\"imageUrl\"\n         [alt]=\"alt\"\n         class=\"viewer-image\"\n         [style.transform]=\"imageTransform\"\n         draggable=\"false\">\n  </div>\n\n  <!-- Instructions -->\n  <div class=\"viewer-instructions\">\n    <span>Scroll to zoom</span>\n    <span class=\"separator\">|</span>\n    <span>Drag to pan when zoomed</span>\n    <span class=\"separator\">|</span>\n    <span>Esc to close</span>\n  </div>\n</div>\n", styles: [".image-viewer-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n  background: rgba(0, 0, 0, 0.92);\n  display: flex;\n  flex-direction: column;\n  animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Toolbar */\n.viewer-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(10px);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.toolbar-left,\n.toolbar-center,\n.toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toolbar-left {\n  flex: 1;\n  min-width: 0;\n}\n\n.toolbar-right {\n  flex: 1;\n  justify-content: flex-end;\n}\n\n.file-name {\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 14px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 300px;\n}\n\n.toolbar-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: background 0.2s, transform 0.15s;\n}\n\n.toolbar-btn:hover {\n  background: rgba(255, 255, 255, 0.2);\n  transform: scale(1.05);\n}\n\n.toolbar-btn:active {\n  transform: scale(0.95);\n}\n\n.toolbar-btn.close-btn {\n  background: rgba(255, 59, 48, 0.2);\n}\n\n.toolbar-btn.close-btn:hover {\n  background: rgba(255, 59, 48, 0.4);\n}\n\n.toolbar-btn i {\n  font-size: 14px;\n}\n\n.zoom-display {\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 13px;\n  font-weight: 500;\n  min-width: 50px;\n  text-align: center;\n  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;\n}\n\n.toolbar-separator {\n  width: 1px;\n  height: 20px;\n  background: rgba(255, 255, 255, 0.2);\n  margin: 0 4px;\n}\n\n/* Image Container */\n.image-container {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: 20px;\n}\n\n.viewer-image {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  transition: transform 0.1s ease-out;\n  user-select: none;\n  pointer-events: none;\n  border-radius: 4px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\n}\n\n/* Instructions */\n.viewer-instructions {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 10px;\n  color: rgba(255, 255, 255, 0.5);\n  font-size: 12px;\n}\n\n.viewer-instructions .separator {\n  opacity: 0.3;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .viewer-toolbar {\n    padding: 8px 12px;\n  }\n\n  .toolbar-btn {\n    width: 32px;\n    height: 32px;\n  }\n\n  .file-name {\n    max-width: 150px;\n    font-size: 12px;\n  }\n\n  .zoom-display {\n    min-width: 40px;\n    font-size: 11px;\n  }\n\n  .viewer-instructions {\n    font-size: 10px;\n    padding: 8px;\n  }\n\n  .image-container {\n    padding: 10px;\n  }\n}\n\n/* Touch support */\n@media (hover: none) {\n  .toolbar-btn:hover {\n    background: rgba(255, 255, 255, 0.1);\n    transform: none;\n  }\n\n  .toolbar-btn.close-btn:hover {\n    background: rgba(255, 59, 48, 0.2);\n  }\n\n  .viewer-instructions {\n    display: none;\n  }\n}\n"] }]
+    }], null, { imageUrl: [{
+            type: Input
+        }], alt: [{
+            type: Input
+        }], fileName: [{
+            type: Input
+        }], visible: [{
+            type: Input
+        }], closed: [{
+            type: Output
+        }], onEscapeKey: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
+        }], onWheel: [{
+            type: HostListener,
+            args: ['wheel', ['$event']]
+        }], onMouseMove: [{
+            type: HostListener,
+            args: ['document:mousemove', ['$event']]
+        }], onMouseUp: [{
+            type: HostListener,
+            args: ['document:mouseup']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ImageViewerComponent, { className: "ImageViewerComponent", filePath: "src/lib/components/attachment/image-viewer.component.ts", lineNumber: 20 }); })();
+//# sourceMappingURL=image-viewer.component.js.map

package/dist/lib/components/attachment/image-viewer.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-viewer.component.js","sourceRoot":"","sources":["../../../../src/lib/components/attachment/image-viewer.component.ts","../../../../src/lib/components/attachment/image-viewer.component.html"],"names":[],"mappings":"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"}

package/dist/lib/components/conversation/conversation-chat-area.component.d.ts

@@ -1,14 +1,19 @@
 import { EventEmitter, OnInit, OnDestroy, ChangeDetectorRef, AfterViewChecked } from '@angular/core';
 import { UserInfo, CompositeKey } from '@memberjunction/core';
-import { ConversationEntity, ConversationDetailEntity, AIAgentRunEntity, AIAgentRunEntityExtended, ArtifactEntity, TaskEntity } from '@memberjunction/core-entities';
+import { ConversationEntity, ConversationDetailEntity, AIAgentRunEntity, ArtifactEntity, TaskEntity } from '@memberjunction/core-entities';
+import { AIAgentRunEntityExtended } from "@memberjunction/ai-core-plus";
 import { ConversationDataService } from '../../services/conversation-data.service';
 import { AgentStateService } from '../../services/agent-state.service';
 import { ConversationAgentService } from '../../services/conversation-agent.service';
 import { ActiveTasksService } from '../../services/active-tasks.service';
 import { MentionAutocompleteService } from '../../services/mention-autocomplete.service';
 import { ArtifactPermissionService } from '../../services/artifact-permission.service';
+import { ConversationAttachmentService } from '../../services/conversation-attachment.service';
+import { ConversationStreamingService } from '../../services/conversation-streaming.service';
+import { MessageAttachment } from '../message/message-item.component';
 import { LazyArtifactInfo } from '../../models/lazy-artifact-info';
 import { RatingJSON } from '../../models/conversation-complete-query.model';
+import { PendingAttachment } from '../mention/mention-editor.component';
 import { DialogService } from '@progress/kendo-angular-dialog';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
@@ -21,6 +26,8 @@ export declare class ConversationChatAreaComponent implements OnInit, OnDestroy,
     private mentionAutocompleteService;
     private artifactPermissionService;
     private dialogService;
+    private attachmentService;
+    private streamingService;
     environmentId: string;
     currentUser: UserInfo;
     private _conversationId;
@@ -29,9 +36,15 @@ export declare class ConversationChatAreaComponent implements OnInit, OnDestroy,
     conversation: ConversationEntity | null;
     threadId: string | null;
     isNewConversation: boolean;
-    pendingMessage: string | null;
+    private _pendingMessage;
+    set pendingMessage(value: string | null);
+    get pendingMessage(): string | null;
+    private _pendingAttachments;
+    set pendingAttachments(value: PendingAttachment[] | null);
+    get pendingAttachments(): PendingAttachment[] | null;
     pendingArtifactId: string | null;
     pendingArtifactVersionNumber: number | null;
+    showSidebarToggle: boolean;
     conversationRenamed: EventEmitter<{
         conversationId: string;
         name: string;
@@ -46,19 +59,27 @@ export declare class ConversationChatAreaComponent implements OnInit, OnDestroy,
         type: 'conversation' | 'collection';
         id: string;
     }>;
-    conversationCreated: EventEmitter<ConversationEntity>;
+    sidebarToggleClicked: EventEmitter<void>;
+    conversationCreated: EventEmitter<{
+        conversation: ConversationEntity;
+        pendingMessage?: string | undefined;
+        pendingAttachments?: PendingAttachment[] | undefined;
+    }>;
     threadOpened: EventEmitter<string>;
     threadClosed: EventEmitter<void>;
     pendingArtifactConsumed: EventEmitter<void>;
     pendingMessageConsumed: EventEmitter<void>;
-    pendingMessageRequested: EventEmitter<string>;
+    pendingMessageRequested: EventEmitter<{
+        text: string;
+        attachments: PendingAttachment[];
+    }>;
     private scrollContainer;
     private messageInputComponents;
     private artifactViewerComponent?;
     messages: ConversationDetailEntity[];
     showScrollToBottomIcon: boolean;
     private scrollToBottom;
-    private lastLoadedConversationId;
+    private loadedPeripheralConversationIds;
     private currentlyLoadingConversationId;
     isProcessing: boolean;
     private intentCheckMessage;
@@ -100,13 +121,15 @@ export declare class ConversationChatAreaComponent implements OnInit, OnDestroy,
      * Ratings by conversation detail ID (parsed from RatingsJSON)
      */
     ratingsByDetailId: Map<string, RatingJSON[]>;
+    /**
+     * Attachments by conversation detail ID (loaded from ConversationDetailAttachments)
+     */
+    attachmentsByDetailId: Map<string, MessageAttachment[]>;
     /**
      * In-progress message IDs for streaming reconnection
      * Passed to message-input component to reconnect PubSub updates
      */
     inProgressMessageIds: string[];
-    private agentRunUpdateTimer;
-    private previousMessageStatuses;
     private messageInputMetadataCache;
     readonly emptyArtifactsMap: Map<string, LazyArtifactInfo[]>;
     readonly emptyAgentRunsMap: Map<string, AIAgentRunEntityExtended>;
@@ -116,13 +139,35 @@ export declare class ConversationChatAreaComponent implements OnInit, OnDestroy,
         artifactId: string;
         versionNumber: number;
     }>;
+    private destroy$;
     private isInitialized;
     private isResizing;
     private startX;
     private startWidth;
     private readonly ARTIFACT_PANE_WIDTH_KEY;
-    constructor(conversationData: ConversationDataService, agentStateService: AgentStateService, conversationAgentService: ConversationAgentService, activeTasks: ActiveTasksService, cdr: ChangeDetectorRef, mentionAutocompleteService: MentionAutocompleteService, artifactPermissionService: ArtifactPermissionService, dialogService: DialogService);
+    showImageViewer: boolean;
+    selectedImageUrl: string;
+    selectedImageAlt: string;
+    selectedImageFileName: string;
+    isUploadingAttachments: boolean;
+    uploadingMessage: string;
+    enableAttachments: boolean;
+    maxAttachments: number;
+    maxAttachmentSizeBytes: number;
+    acceptedFileTypes: string;
+    private conversationManagerAgent;
+    constructor(conversationData: ConversationDataService, agentStateService: AgentStateService, conversationAgentService: ConversationAgentService, activeTasks: ActiveTasksService, cdr: ChangeDetectorRef, mentionAutocompleteService: MentionAutocompleteService, artifactPermissionService: ArtifactPermissionService, dialogService: DialogService, attachmentService: ConversationAttachmentService, streamingService: ConversationStreamingService);
     ngOnInit(): Promise<void>;
+    /**
+     * Initializes attachment support by checking if the conversation manager agent (Sage)
+     * or any recent agent in the conversation supports non-text input modalities.
+     */
+    private initializeAttachmentSupport;
+    /**
+     * Updates attachment support based on the current conversation context.
+     * Called when conversation changes to check if any agent in the conversation supports attachments.
+     */
+    private updateAttachmentSupport;
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
     private onConversationChanged;
@@ -168,7 +213,12 @@ export declare class ConversationChatAreaComponent implements OnInit, OnDestroy,
      * Restoring them here causes duplicate "Agent Processing..." entries.
      */
     private restoreActiveTasks;
-    onMessageSent(message: ConversationDetailEntity): void;
+    onMessageSent(message: ConversationDetailEntity): Promise<void>;
+    /**
+     * Loads attachments for a single message and adds them to the attachmentsByDetailId map.
+     * Called after a new message is sent to ensure attachments are displayed immediately.
+     */
+    private loadAttachmentsForMessage;
     /**
      * Ensures the current user is in the avatar map
      * Called when new messages are created to ensure avatar data is available
@@ -190,6 +240,15 @@ export declare class ConversationChatAreaComponent implements OnInit, OnDestroy,
         conversationDetailId: string;
         agentId?: string;
     }): Promise<void>;
+    /**
+     * Handle message completion from PubSub streaming service.
+     * This is the primary completion handler that replaces timer-based polling.
+     * Called when the streaming service receives a completion event from the backend.
+     *
+     * @param message The message entity that completed
+     * @param agentRunId The agent run ID from the completion event
+     */
+    private handleMessageCompletion;
     /**
      * Handle agent run update event from progress updates
      * This is called on EVERY progress update with the full, live agent run object
@@ -200,26 +259,11 @@ export declare class ConversationChatAreaComponent implements OnInit, OnDestroy,
         agentRun?: AIAgentRunEntityExtended;
         agentRunId?: string;
     }): Promise<void>;
-    /**
-     * Start 1-second timer for smooth agent run UI updates
-     * Updates the message list every second to keep elapsed times current
-     * Also detects when messages complete and reloads agent runs
-     */
-    private startAgentRunUpdateTimer;
-    /**
-     * Stop the agent run update timer
-     */
-    private stopAgentRunUpdateTimer;
     /**
      * Reload messages for the active conversation from the database
      * Called when completion is detected to discover newly delegated agent messages
      */
     private reloadMessagesForActiveConversation;
-    /**
-     * Detect messages that changed from In-Progress to Complete and reload their agent runs
-     * This handles the navigation scenario where onMessageComplete event isn't fired
-     */
-    private detectAndHandleCompletedMessages;
     onAgentResponse(event: {
         message: ConversationDetailEntity;
         agentResult: any;
@@ -311,6 +355,21 @@ export declare class ConversationChatAreaComponent implements OnInit, OnDestroy,
         customInput?: string;
     }): Promise<void>;
     onRetryMessage(message: ConversationDetailEntity): void;
+    /**
+     * Handle attachment click - opens the image viewer for images
+     */
+    onAttachmentClicked(attachment: MessageAttachment): void;
+    /**
+     * Handle image viewer close
+     */
+    onImageViewerClosed(): void;
+    /**
+     * Handle upload state changes from message input component
+     */
+    onUploadStateChanged(event: {
+        isUploading: boolean;
+        message: string;
+    }): void;
     onArtifactClicked(data: {
         artifactId: string;
         versionId?: string;
@@ -373,7 +432,10 @@ export declare class ConversationChatAreaComponent implements OnInit, OnDestroy,
      * Handle message sent from empty state component
      * Creates a new conversation and emits to parent to update selection
      */
-    onEmptyStateMessageSent(messageText: string): Promise<void>;
+    onEmptyStateMessageSent(event: {
+        text: string;
+        attachments: PendingAttachment[];
+    }): Promise<void>;
     onOpenEntityRecord(event: {
         entityName: string;
         compositeKey: CompositeKey;
@@ -435,6 +497,6 @@ export declare class ConversationChatAreaComponent implements OnInit, OnDestroy,
      */
     onIntentCheckCompleted(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConversationChatAreaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ConversationChatAreaComponent, "mj-conversation-chat-area", never, { "environmentId": { "alias": "environmentId"; "required": false; }; "currentUser": { "alias": "currentUser"; "required": false; }; "conversationId": { "alias": "conversationId"; "required": false; }; "conversation": { "alias": "conversation"; "required": false; }; "threadId": { "alias": "threadId"; "required": false; }; "isNewConversation": { "alias": "isNewConversation"; "required": false; }; "pendingMessage": { "alias": "pendingMessage"; "required": false; }; "pendingArtifactId": { "alias": "pendingArtifactId"; "required": false; }; "pendingArtifactVersionNumber": { "alias": "pendingArtifactVersionNumber"; "required": false; }; }, { "conversationRenamed": "conversationRenamed"; "openEntityRecord": "openEntityRecord"; "taskClicked": "taskClicked"; "artifactLinkClicked": "artifactLinkClicked"; "conversationCreated": "conversationCreated"; "threadOpened": "threadOpened"; "threadClosed": "threadClosed"; "pendingArtifactConsumed": "pendingArtifactConsumed"; "pendingMessageConsumed": "pendingMessageConsumed"; "pendingMessageRequested": "pendingMessageRequested"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConversationChatAreaComponent, "mj-conversation-chat-area", never, { "environmentId": { "alias": "environmentId"; "required": false; }; "currentUser": { "alias": "currentUser"; "required": false; }; "conversationId": { "alias": "conversationId"; "required": false; }; "conversation": { "alias": "conversation"; "required": false; }; "threadId": { "alias": "threadId"; "required": false; }; "isNewConversation": { "alias": "isNewConversation"; "required": false; }; "pendingMessage": { "alias": "pendingMessage"; "required": false; }; "pendingAttachments": { "alias": "pendingAttachments"; "required": false; }; "pendingArtifactId": { "alias": "pendingArtifactId"; "required": false; }; "pendingArtifactVersionNumber": { "alias": "pendingArtifactVersionNumber"; "required": false; }; "showSidebarToggle": { "alias": "showSidebarToggle"; "required": false; }; }, { "conversationRenamed": "conversationRenamed"; "openEntityRecord": "openEntityRecord"; "taskClicked": "taskClicked"; "artifactLinkClicked": "artifactLinkClicked"; "sidebarToggleClicked": "sidebarToggleClicked"; "conversationCreated": "conversationCreated"; "threadOpened": "threadOpened"; "threadClosed": "threadClosed"; "pendingArtifactConsumed": "pendingArtifactConsumed"; "pendingMessageConsumed": "pendingMessageConsumed"; "pendingMessageRequested": "pendingMessageRequested"; }, never, never, false, never>;
 }
 //# sourceMappingURL=conversation-chat-area.component.d.ts.map