@mckit/chat 20.0.1 → 20.0.2

package/fesm2022/mckit-chat.mjs

@@ -35,6 +35,8 @@ class MCMessageChat {
 }
 
 class MCConversation {
+    id;
+    messages = [];
 }
 
 class MCBaseMessageComponent {
@@ -77,12 +79,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             args: [{ selector: 'mc-message-video', imports: [CommonModule], template: "<div class=\"flex w-full\"\n    [ngClass]=\"{'justify-end': message().side !== 'left', 'justify-start': message().side === 'left'}\">\n\n    <div class=\"max-w-[70%] flex flex-col\"\n        [ngClass]=\"{'items-end': message().side !== 'left', 'items-start': message().side === 'left'}\">\n\n        <div class=\"rounded-lg shadow-sm overflow-hidden\" [ngClass]=\"{\n                        'rounded-br-none': message().side !== 'left',\n                        'rounded-bl-none': message().side === 'left'\n                     }\">\n            <video [src]=\"message().content\" controls width=\"250\" class=\"block\">\n            </video>\n        </div>\n        <span class=\"text-xs text-gray-400 mt-1 px-1\">\n            {{ message().createdAt | date:'shortTime' }}\n        </span>\n    </div>\n</div>" }]
         }] });
 
+class MCMessageAudioComponent extends MCBaseMessageComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MCMessageAudioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: MCMessageAudioComponent, isStandalone: true, selector: "mc-message-audio", usesInheritance: true, ngImport: i0, template: "<div class=\"flex w-full\"\n    [ngClass]=\"{'justify-end': message().side !== 'left', 'justify-start': message().side === 'left'}\">\n\n    <div class=\"max-w-[70%] flex flex-col\"\n        [ngClass]=\"{'items-end': message().side !== 'left', 'items-start': message().side === 'left'}\">\n\n        <div class=\"rounded-lg shadow-sm overflow-hidden\" [ngClass]=\"{\n                        'rounded-br-none': message().side !== 'left',\n                        'rounded-bl-none': message().side === 'left'\n                     }\">\n            <audio [src]=\"message().content\" controls class=\"block w-[250px]\">\n            </audio>\n        </div>\n        <span class=\"text-xs text-gray-400 mt-1 px-1\">\n            {{ message().createdAt | date:'shortTime' }}\n        </span>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MCMessageAudioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mc-message-audio', imports: [CommonModule], template: "<div class=\"flex w-full\"\n    [ngClass]=\"{'justify-end': message().side !== 'left', 'justify-start': message().side === 'left'}\">\n\n    <div class=\"max-w-[70%] flex flex-col\"\n        [ngClass]=\"{'items-end': message().side !== 'left', 'items-start': message().side === 'left'}\">\n\n        <div class=\"rounded-lg shadow-sm overflow-hidden\" [ngClass]=\"{\n                        'rounded-br-none': message().side !== 'left',\n                        'rounded-bl-none': message().side === 'left'\n                     }\">\n            <audio [src]=\"message().content\" controls class=\"block w-[250px]\">\n            </audio>\n        </div>\n        <span class=\"text-xs text-gray-400 mt-1 px-1\">\n            {{ message().createdAt | date:'shortTime' }}\n        </span>\n    </div>\n</div>" }]
+        }] });
+
+class MCMessageFileComponent extends MCBaseMessageComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MCMessageFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: MCMessageFileComponent, isStandalone: true, selector: "mc-message-file", usesInheritance: true, ngImport: i0, template: "<div class=\"flex w-full\"\n    [ngClass]=\"{'justify-end': message().side !== 'left', 'justify-start': message().side === 'left'}\">\n\n    <div class=\"max-w-[70%] flex flex-col\"\n        [ngClass]=\"{'items-end': message().side !== 'left', 'items-start': message().side === 'left'}\">\n\n        <div class=\"rounded-lg shadow-sm p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex items-center gap-3\"\n            [ngClass]=\"{\n                        'rounded-br-none': message().side !== 'left',\n                        'rounded-bl-none': message().side === 'left'\n                     }\">\n\n            <div\n                class=\"w-10 h-10 rounded bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-500 dark:text-gray-400\">\n                <i class=\"pi pi-file text-xl\"></i>\n            </div>\n\n            <div class=\"flex flex-col overflow-hidden\">\n                <span class=\"text-sm font-medium truncate text-gray-900 dark:text-gray-100 max-w-[150px]\">\n                    Attached File\n                </span>\n                <a [href]=\"message().content\" target=\"_blank\"\n                    class=\"text-xs text-blue-500 hover:text-blue-600 hover:underline flex items-center gap-1\">\n                    <span>Download</span>\n                    <i class=\"pi pi-external-link text-[10px]\"></i>\n                </a>\n            </div>\n        </div>\n        <span class=\"text-xs text-gray-400 mt-1 px-1\">\n            {{ message().createdAt | date:'shortTime' }}\n        </span>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MCMessageFileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mc-message-file', imports: [CommonModule], template: "<div class=\"flex w-full\"\n    [ngClass]=\"{'justify-end': message().side !== 'left', 'justify-start': message().side === 'left'}\">\n\n    <div class=\"max-w-[70%] flex flex-col\"\n        [ngClass]=\"{'items-end': message().side !== 'left', 'items-start': message().side === 'left'}\">\n\n        <div class=\"rounded-lg shadow-sm p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex items-center gap-3\"\n            [ngClass]=\"{\n                        'rounded-br-none': message().side !== 'left',\n                        'rounded-bl-none': message().side === 'left'\n                     }\">\n\n            <div\n                class=\"w-10 h-10 rounded bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-500 dark:text-gray-400\">\n                <i class=\"pi pi-file text-xl\"></i>\n            </div>\n\n            <div class=\"flex flex-col overflow-hidden\">\n                <span class=\"text-sm font-medium truncate text-gray-900 dark:text-gray-100 max-w-[150px]\">\n                    Attached File\n                </span>\n                <a [href]=\"message().content\" target=\"_blank\"\n                    class=\"text-xs text-blue-500 hover:text-blue-600 hover:underline flex items-center gap-1\">\n                    <span>Download</span>\n                    <i class=\"pi pi-external-link text-[10px]\"></i>\n                </a>\n            </div>\n        </div>\n        <span class=\"text-xs text-gray-400 mt-1 px-1\">\n            {{ message().createdAt | date:'shortTime' }}\n        </span>\n    </div>\n</div>" }]
+        }] });
+
 class MCChatService {
     registry = new Map();
     constructor() {
         this.register(MCMessageChatType.TEXT, MCMessageTextComponent);
         this.register(MCMessageChatType.IMAGE, MCMessageImageComponent);
         this.register(MCMessageChatType.VIDEO, MCMessageVideoComponent);
+        this.register(MCMessageChatType.AUDIO, MCMessageAudioComponent);
+        this.register(MCMessageChatType.FILE, MCMessageFileComponent);
     }
     register(type, component) {
         this.registry.set(type, component);
@@ -101,43 +123,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
         }], ctorParameters: () => [] });
 
 class MCConversationComponent {
+    conversation = input.required(...(ngDevMode ? [{ debugName: "conversation" }] : []));
     chatService = inject(MCChatService);
-    messages = [];
     newMessage = '';
-    ngOnInit() {
-        // Dummy data for visualization
-        this.messages = [
-            {
-                id: '1',
-                type: MCMessageChatType.TEXT,
-                content: 'Hello! How can I help you?',
-                createdAt: new Date().toISOString(),
-                side: MCMessageChatSide.LEFT,
-                // sentByMe: false // assuming we might need this property, adding strictly to the class later if needed, for now I'll handle "me" vs "them" by some logic or just assumed property if I can modify the entity.
-                // Wait, looking at MCMessageChat entity, it doesn't have a sender field. 
-                // I should probably add one to the entity or extend it locally for the UI.
-                // For now let's assume I check a 'senderId' or something.
-                // Let's modify the entity first or just add a 'sender' property for now to the object literals and see if TS complains (it will).
-                // I will add a sender 'me' or 'other' for this demo.
-            },
-            {
-                id: '2',
-                type: MCMessageChatType.IMAGE,
-                content: 'data:image/png;base64,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',
-                createdAt: new Date().toISOString(),
-                side: MCMessageChatSide.LEFT,
-            },
-            {
-                id: '3',
-                type: MCMessageChatType.VIDEO,
-                content: 'https://www.w3schools.com/html/mov_bbb.mp4',
-                createdAt: new Date().toISOString(),
-                side: MCMessageChatSide.LEFT,
-            },
-        ];
-        // Better yet, let's update the entity to have a sender or owner since checking the file `message.ts` it was very basic. 
-        // actually, I'll stick to the existing entity for now and maybe just use an extra property in the component.
-    }
     // Let's pretend we have a currentUserId = 1.
     currentUserId = 1;
     getComponent(type) {
@@ -154,15 +142,15 @@ class MCConversationComponent {
             side: MCMessageChatSide.RIGHT,
         };
         // Ideally we would push to a service, but for now just local array
-        this.messages.push(message);
+        this.conversation().messages.push(message);
         this.newMessage = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MCConversationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MCConversationComponent, isStandalone: true, selector: "mc-conversation", ngImport: i0, template: "<div\n    class=\"flex flex-col h-full bg-white dark:bg-gray-900 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700\">\n    <!-- Header -->\n    <div class=\"flex items-center p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800\">\n        <p-avatar image=\"https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png\" shape=\"circle\"\n            size=\"large\" styleClass=\"mr-3\">\n        </p-avatar>\n        <div>\n            <h2 class=\"text-lg font-semibold text-gray-800 dark:text-white\">Amy Elsner</h2>\n            <p class=\"text-sm text-green-500 flex items-center\">\n                <span class=\"w-2 h-2 rounded-full bg-green-500 mr-2\"></span>\n                Online\n            </p>\n        </div>\n    </div>\n\n    <!-- Messages Body -->\n    <div class=\"flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-900\">\n        <!-- Message Item -->\n        @for (msg of messages; track $index) {\n        <div class=\"mb-3\">\n            <ng-container *ngComponentOutlet=\"getComponent(msg.type); inputs: { message: msg }\"></ng-container>\n        </div>\n        }\n    </div>\n\n    <!-- Footer / Input Area -->\n    <div class=\"p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700\">\n        <div class=\"flex gap-2\">\n            <input pInputText type=\"text\" class=\"flex-1 w-full\" placeholder=\"Type a message...\" [(ngModel)]=\"newMessage\"\n                (keydown.enter)=\"sendMessage()\" />\n\n            <p-button icon=\"pi pi-send\" (onClick)=\"sendMessage()\" styleClass=\"p-button-rounded p-button-primary\">\n            </p-button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MCConversationComponent, isStandalone: true, selector: "mc-conversation", inputs: { conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n    class=\"flex flex-col h-full bg-white dark:bg-gray-900 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700\">\n    <!-- Header -->\n    <div class=\"flex items-center p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800\">\n        <p-avatar image=\"https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png\" shape=\"circle\"\n            size=\"large\" styleClass=\"mr-3\">\n        </p-avatar>\n        <div>\n            <h2 class=\"text-lg font-semibold text-gray-800 dark:text-white\">Amy Elsner</h2>\n            <p class=\"text-sm text-green-500 flex items-center\">\n                <span class=\"w-2 h-2 rounded-full bg-green-500 mr-2\"></span>\n                Online\n            </p>\n        </div>\n    </div>\n\n    <!-- Messages Body -->\n    <div class=\"flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-900\">\n        <!-- Message Item -->\n        @for (msg of conversation().messages; track $index) {\n        <div class=\"mb-3\">\n            <ng-container *ngComponentOutlet=\"getComponent(msg.type); inputs: { message: msg }\"></ng-container>\n        </div>\n        }\n    </div>\n\n    <!-- Footer / Input Area -->\n    <div class=\"p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700\">\n        <div class=\"flex gap-2\">\n            <input pInputText type=\"text\" class=\"flex-1 w-full\" placeholder=\"Type a message...\" [(ngModel)]=\"newMessage\"\n                (keydown.enter)=\"sendMessage()\" />\n\n            <p-button icon=\"pi pi-send\" (onClick)=\"sendMessage()\" styleClass=\"p-button-rounded p-button-primary\">\n            </p-button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MCConversationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mc-conversation', imports: [CommonModule, FormsModule, AvatarModule, ButtonModule, InputTextModule], template: "<div\n    class=\"flex flex-col h-full bg-white dark:bg-gray-900 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700\">\n    <!-- Header -->\n    <div class=\"flex items-center p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800\">\n        <p-avatar image=\"https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png\" shape=\"circle\"\n            size=\"large\" styleClass=\"mr-3\">\n        </p-avatar>\n        <div>\n            <h2 class=\"text-lg font-semibold text-gray-800 dark:text-white\">Amy Elsner</h2>\n            <p class=\"text-sm text-green-500 flex items-center\">\n                <span class=\"w-2 h-2 rounded-full bg-green-500 mr-2\"></span>\n                Online\n            </p>\n        </div>\n    </div>\n\n    <!-- Messages Body -->\n    <div class=\"flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-900\">\n        <!-- Message Item -->\n        @for (msg of messages; track $index) {\n        <div class=\"mb-3\">\n            <ng-container *ngComponentOutlet=\"getComponent(msg.type); inputs: { message: msg }\"></ng-container>\n        </div>\n        }\n    </div>\n\n    <!-- Footer / Input Area -->\n    <div class=\"p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700\">\n        <div class=\"flex gap-2\">\n            <input pInputText type=\"text\" class=\"flex-1 w-full\" placeholder=\"Type a message...\" [(ngModel)]=\"newMessage\"\n                (keydown.enter)=\"sendMessage()\" />\n\n            <p-button icon=\"pi pi-send\" (onClick)=\"sendMessage()\" styleClass=\"p-button-rounded p-button-primary\">\n            </p-button>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'mc-conversation', imports: [CommonModule, FormsModule, AvatarModule, ButtonModule, InputTextModule], template: "<div\n    class=\"flex flex-col h-full bg-white dark:bg-gray-900 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700\">\n    <!-- Header -->\n    <div class=\"flex items-center p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800\">\n        <p-avatar image=\"https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png\" shape=\"circle\"\n            size=\"large\" styleClass=\"mr-3\">\n        </p-avatar>\n        <div>\n            <h2 class=\"text-lg font-semibold text-gray-800 dark:text-white\">Amy Elsner</h2>\n            <p class=\"text-sm text-green-500 flex items-center\">\n                <span class=\"w-2 h-2 rounded-full bg-green-500 mr-2\"></span>\n                Online\n            </p>\n        </div>\n    </div>\n\n    <!-- Messages Body -->\n    <div class=\"flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-900\">\n        <!-- Message Item -->\n        @for (msg of conversation().messages; track $index) {\n        <div class=\"mb-3\">\n            <ng-container *ngComponentOutlet=\"getComponent(msg.type); inputs: { message: msg }\"></ng-container>\n        </div>\n        }\n    </div>\n\n    <!-- Footer / Input Area -->\n    <div class=\"p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700\">\n        <div class=\"flex gap-2\">\n            <input pInputText type=\"text\" class=\"flex-1 w-full\" placeholder=\"Type a message...\" [(ngModel)]=\"newMessage\"\n                (keydown.enter)=\"sendMessage()\" />\n\n            <p-button icon=\"pi pi-send\" (onClick)=\"sendMessage()\" styleClass=\"p-button-rounded p-button-primary\">\n            </p-button>\n        </div>\n    </div>\n</div>" }]
         }] });
 
 /*
@@ -176,5 +164,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MCBaseMessageComponent, MCChatService, MCConversation, MCConversationComponent, MCMessageChat, MCMessageChatSide, MCMessageChatType, MCMessageImageComponent, MCMessageTextComponent, MCMessageVideoComponent };
+export { MCBaseMessageComponent, MCChatService, MCConversation, MCConversationComponent, MCMessageAudioComponent, MCMessageChat, MCMessageChatSide, MCMessageChatType, MCMessageFileComponent, MCMessageImageComponent, MCMessageTextComponent, MCMessageVideoComponent };
 //# sourceMappingURL=mckit-chat.mjs.map

package/fesm2022/mckit-chat.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mckit-chat.mjs","sources":["../../../../projects/mckit/chat/src/lib/entities/message.ts","../../../../projects/mckit/chat/src/lib/entities/conversation.ts","../../../../projects/mckit/chat/src/lib/messages/base-message.component.ts","../../../../projects/mckit/chat/src/lib/messages/text/text.component.ts","../../../../projects/mckit/chat/src/lib/messages/text/text.component.html","../../../../projects/mckit/chat/src/lib/messages/image/image.component.ts","../../../../projects/mckit/chat/src/lib/messages/image/image.component.html","../../../../projects/mckit/chat/src/lib/messages/video/video.component.ts","../../../../projects/mckit/chat/src/lib/messages/video/video.component.html","../../../../projects/mckit/chat/src/lib/services/chat.service.ts","../../../../projects/mckit/chat/src/lib/components/conversation/conversation.component.ts","../../../../projects/mckit/chat/src/lib/components/conversation/conversation.component.html","../../../../projects/mckit/chat/src/public-api.ts","../../../../projects/mckit/chat/src/mckit-chat.ts"],"sourcesContent":["export enum MCMessageChatType {\n    TEXT = 'text',\n    IMAGE = 'image',\n    VIDEO = 'video',\n    AUDIO = 'audio',\n    FILE = 'file'\n}\n\nexport enum MCMessageChatSide {\n    LEFT = 'left',\n    RIGHT = 'right'\n}\n\nexport class MCMessageChat {\n    id?: string | number;\n    type!: string;\n    side!: MCMessageChatSide;\n    content?: any;\n    createdAt?: string;\n}","export class MCConversation {\n\n}","import { Component, input } from '@angular/core';\nimport { MCMessageChat } from '../entities/message';\n\n@Component({\n    selector: 'mc-base-message',\n    template: ''\n})\nexport class MCBaseMessageComponent {\n    message = input.required<MCMessageChat>();\n}\n","import { Component } from '@angular/core';\nimport { MCBaseMessageComponent } from '../base-message.component';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'mc-message-text',\n  imports: [CommonModule],\n  templateUrl: './text.component.html',\n  styleUrl: './text.component.css'\n})\nexport class MCMessageTextComponent extends MCBaseMessageComponent {\n\n}\n","<div class=\"flex w-full\"\n    [ngClass]=\"{'justify-end': message().side !== 'left', 'justify-start': message().side === 'left'}\">\n\n    <div class=\"max-w-[70%] flex flex-col\"\n        [ngClass]=\"{'items-end': message().side !== 'left', 'items-start': message().side === 'left'}\">\n\n        <div class=\"p-3 rounded-lg shadow-sm\" [ngClass]=\"{\n                        'bg-blue-600 text-white rounded-br-none': message().side !== 'left',\n                        'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-700 rounded-bl-none': message().id === '1'\n                     }\">\n            <p class=\"text-sm\">{{ message().content }}</p>\n        </div>\n        <span class=\"text-xs text-gray-400 mt-1 px-1\">\n            {{ message().createdAt | date:'shortTime' }}\n        </span>\n    </div>\n</div>","import { CommonModule } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { ImageModule } from 'primeng/image';\nimport { MCBaseMessageComponent } from '../base-message.component';\n\n@Component({\n  selector: 'mc-message-image',\n  imports: [CommonModule, ImageModule],\n  templateUrl: './image.component.html',\n  styleUrl: './image.component.css'\n})\nexport class MCMessageImageComponent extends MCBaseMessageComponent {\n\n}\n","<div class=\"flex w-full\"\n    [ngClass]=\"{'justify-end': message().side !== 'left', 'justify-start': message().side === 'left'}\">\n\n    <div class=\"max-w-[70%] flex flex-col\"\n        [ngClass]=\"{'items-end': message().side !== 'left', 'items-start': message().side === 'left'}\">\n\n        <div class=\"rounded-lg shadow-sm overflow-hidden\" [ngClass]=\"{\n                        'rounded-br-none': message().side !== 'left',\n                        'rounded-bl-none': message().side === 'left'\n                     }\">\n            <p-image [src]=\"message().content\" [alt]=\"'Image'\" [preview]=\"true\" width=\"250\">\n            </p-image>\n        </div>\n        <span class=\"text-xs text-gray-400 mt-1 px-1\">\n            {{ message().createdAt | date:'shortTime' }}\n        </span>\n    </div>\n</div>","import { CommonModule } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { MCBaseMessageComponent } from '../base-message.component';\n\n@Component({\n  selector: 'mc-message-video',\n  imports: [CommonModule],\n  templateUrl: './video.component.html',\n  styleUrl: './video.component.css'\n})\nexport class MCMessageVideoComponent extends MCBaseMessageComponent {\n\n}\n","<div class=\"flex w-full\"\n    [ngClass]=\"{'justify-end': message().side !== 'left', 'justify-start': message().side === 'left'}\">\n\n    <div class=\"max-w-[70%] flex flex-col\"\n        [ngClass]=\"{'items-end': message().side !== 'left', 'items-start': message().side === 'left'}\">\n\n        <div class=\"rounded-lg shadow-sm overflow-hidden\" [ngClass]=\"{\n                        'rounded-br-none': message().side !== 'left',\n                        'rounded-bl-none': message().side === 'left'\n                     }\">\n            <video [src]=\"message().content\" controls width=\"250\" class=\"block\">\n            </video>\n        </div>\n        <span class=\"text-xs text-gray-400 mt-1 px-1\">\n            {{ message().createdAt | date:'shortTime' }}\n        </span>\n    </div>\n</div>","import { Injectable, Type } from '@angular/core';\nimport { MCBaseMessageComponent } from '../messages/base-message.component';\nimport { MCMessageChatType } from '../entities/message';\nimport { MCMessageTextComponent } from '../messages/text/text.component';\nimport { MCMessageImageComponent } from '../messages/image/image.component';\nimport { MCMessageVideoComponent } from '../messages/video/video.component';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class MCChatService {\n\n  private registry = new Map<string, Type<MCBaseMessageComponent>>();\n\n  constructor() {\n    this.register(MCMessageChatType.TEXT, MCMessageTextComponent);\n    this.register(MCMessageChatType.IMAGE, MCMessageImageComponent);\n    this.register(MCMessageChatType.VIDEO, MCMessageVideoComponent);\n  }\n\n  register(type: string, component: Type<MCBaseMessageComponent>) {\n    this.registry.set(type, component);\n  }\n\n  getComponent(type: string): Type<MCBaseMessageComponent> | undefined {\n    return this.registry.get(type);\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, inject, OnInit, Type } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AvatarModule } from 'primeng/avatar';\nimport { ButtonModule } from 'primeng/button';\nimport { InputTextModule } from 'primeng/inputtext';\nimport { MCMessageChat, MCMessageChatSide, MCMessageChatType } from '../../entities/message';\nimport { MCChatService } from '../../services/chat.service';\nimport { MCBaseMessageComponent } from '../../messages/base-message.component';\n\n@Component({\n  selector: 'mc-conversation',\n  imports: [CommonModule, FormsModule, AvatarModule, ButtonModule, InputTextModule],\n  templateUrl: './conversation.component.html',\n  styleUrl: './conversation.component.css'\n})\nexport class MCConversationComponent implements OnInit {\n\n  chatService = inject(MCChatService);\n\n  messages: MCMessageChat[] = [];\n  newMessage: string = '';\n\n  ngOnInit(): void {\n    // Dummy data for visualization\n    this.messages = [\n      {\n        id: '1',\n        type: MCMessageChatType.TEXT,\n        content: 'Hello! How can I help you?',\n        createdAt: new Date().toISOString(),\n        side: MCMessageChatSide.LEFT,\n        // sentByMe: false // assuming we might need this property, adding strictly to the class later if needed, for now I'll handle \"me\" vs \"them\" by some logic or just assumed property if I can modify the entity.\n        // Wait, looking at MCMessageChat entity, it doesn't have a sender field. \n        // I should probably add one to the entity or extend it locally for the UI.\n        // For now let's assume I check a 'senderId' or something.\n        // Let's modify the entity first or just add a 'sender' property for now to the object literals and see if TS complains (it will).\n        // I will add a sender 'me' or 'other' for this demo.\n      } as any,\n      {\n        id: '2',\n        type: MCMessageChatType.IMAGE,\n        content: 'data:image/png;base64,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',\n        createdAt: new Date().toISOString(),\n        side: MCMessageChatSide.LEFT,\n      } as any,\n      {\n        id: '3',\n        type: MCMessageChatType.VIDEO,\n        content: 'https://www.w3schools.com/html/mov_bbb.mp4',\n        createdAt: new Date().toISOString(),\n        side: MCMessageChatSide.LEFT,\n      } as any,\n    ];\n\n    // Better yet, let's update the entity to have a sender or owner since checking the file `message.ts` it was very basic. \n    // actually, I'll stick to the existing entity for now and maybe just use an extra property in the component.\n  }\n\n  // Let's pretend we have a currentUserId = 1.\n  currentUserId = 1;\n\n  getComponent(type: string): Type<MCBaseMessageComponent> {\n    return this.chatService.getComponent(type) ?? MCBaseMessageComponent;\n  }\n\n  sendMessage() {\n    if (!this.newMessage.trim()) return;\n\n    const message: MCMessageChat = {\n      id: Date.now().toString(),\n      type: MCMessageChatType.TEXT,\n      content: this.newMessage,\n      createdAt: new Date().toISOString(),\n      side: MCMessageChatSide.RIGHT,\n    };\n\n    // Ideally we would push to a service, but for now just local array\n    this.messages.push(message);\n    this.newMessage = '';\n  }\n}\n","<div\n    class=\"flex flex-col h-full bg-white dark:bg-gray-900 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700\">\n    <!-- Header -->\n    <div class=\"flex items-center p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800\">\n        <p-avatar image=\"https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png\" shape=\"circle\"\n            size=\"large\" styleClass=\"mr-3\">\n        </p-avatar>\n        <div>\n            <h2 class=\"text-lg font-semibold text-gray-800 dark:text-white\">Amy Elsner</h2>\n            <p class=\"text-sm text-green-500 flex items-center\">\n                <span class=\"w-2 h-2 rounded-full bg-green-500 mr-2\"></span>\n                Online\n            </p>\n        </div>\n    </div>\n\n    <!-- Messages Body -->\n    <div class=\"flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-900\">\n        <!-- Message Item -->\n        @for (msg of messages; track $index) {\n        <div class=\"mb-3\">\n            <ng-container *ngComponentOutlet=\"getComponent(msg.type); inputs: { message: msg }\"></ng-container>\n        </div>\n        }\n    </div>\n\n    <!-- Footer / Input Area -->\n    <div class=\"p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700\">\n        <div class=\"flex gap-2\">\n            <input pInputText type=\"text\" class=\"flex-1 w-full\" placeholder=\"Type a message...\" [(ngModel)]=\"newMessage\"\n                (keydown.enter)=\"sendMessage()\" />\n\n            <p-button icon=\"pi pi-send\" (onClick)=\"sendMessage()\" styleClass=\"p-button-rounded p-button-primary\">\n            </p-button>\n        </div>\n    </div>\n</div>","/*\n * Public API Surface of chat\n */\n\n/**\n * Entities\n */\nexport * from './lib/entities/message';\nexport * from './lib/entities/conversation';\n\n/**\n * Messages\n */\nexport * from './lib/messages/base-message.component';\nexport * from './lib/messages/text/text.component';\nexport * from './lib/messages/image/image.component';\nexport * from './lib/messages/video/video.component';\n\n/**\n * Components\n */\nexport * from './lib/components/conversation/conversation.component';\n\n/**\n * Services\n */\nexport * from './lib/services/chat.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2"],"mappings":"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"}
+{"version":3,"file":"mckit-chat.mjs","sources":["../../../../projects/mckit/chat/src/lib/entities/message.ts","../../../../projects/mckit/chat/src/lib/entities/conversation.ts","../../../../projects/mckit/chat/src/lib/messages/base-message.component.ts","../../../../projects/mckit/chat/src/lib/messages/text/text.component.ts","../../../../projects/mckit/chat/src/lib/messages/text/text.component.html","../../../../projects/mckit/chat/src/lib/messages/image/image.component.ts","../../../../projects/mckit/chat/src/lib/messages/image/image.component.html","../../../../projects/mckit/chat/src/lib/messages/video/video.component.ts","../../../../projects/mckit/chat/src/lib/messages/video/video.component.html","../../../../projects/mckit/chat/src/lib/messages/audio/audio.component.ts","../../../../projects/mckit/chat/src/lib/messages/audio/audio.component.html","../../../../projects/mckit/chat/src/lib/messages/file/file.component.ts","../../../../projects/mckit/chat/src/lib/messages/file/file.component.html","../../../../projects/mckit/chat/src/lib/services/chat.service.ts","../../../../projects/mckit/chat/src/lib/components/conversation/conversation.component.ts","../../../../projects/mckit/chat/src/lib/components/conversation/conversation.component.html","../../../../projects/mckit/chat/src/public-api.ts","../../../../projects/mckit/chat/src/mckit-chat.ts"],"sourcesContent":["export enum MCMessageChatType {\n    TEXT = 'text',\n    IMAGE = 'image',\n    VIDEO = 'video',\n    AUDIO = 'audio',\n    FILE = 'file'\n}\n\nexport enum MCMessageChatSide {\n    LEFT = 'left',\n    RIGHT = 'right'\n}\n\nexport class MCMessageChat {\n    id?: string | number;\n    type!: string;\n    side!: MCMessageChatSide;\n    content?: any;\n    createdAt?: string;\n}","import { MCMessageChat } from \"./message\";\n\nexport class MCConversation {\n    id?: string;\n    messages: MCMessageChat[] = [];\n}","import { Component, input } from '@angular/core';\nimport { MCMessageChat } from '../entities/message';\n\n@Component({\n    selector: 'mc-base-message',\n    template: ''\n})\nexport class MCBaseMessageComponent {\n    message = input.required<MCMessageChat>();\n}\n","import { Component } from '@angular/core';\nimport { MCBaseMessageComponent } from '../base-message.component';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'mc-message-text',\n  imports: [CommonModule],\n  templateUrl: './text.component.html',\n  styleUrl: './text.component.css'\n})\nexport class MCMessageTextComponent extends MCBaseMessageComponent {\n\n}\n","<div class=\"flex w-full\"\n    [ngClass]=\"{'justify-end': message().side !== 'left', 'justify-start': message().side === 'left'}\">\n\n    <div class=\"max-w-[70%] flex flex-col\"\n        [ngClass]=\"{'items-end': message().side !== 'left', 'items-start': message().side === 'left'}\">\n\n        <div class=\"p-3 rounded-lg shadow-sm\" [ngClass]=\"{\n                        'bg-blue-600 text-white rounded-br-none': message().side !== 'left',\n                        'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-700 rounded-bl-none': message().id === '1'\n                     }\">\n            <p class=\"text-sm\">{{ message().content }}</p>\n        </div>\n        <span class=\"text-xs text-gray-400 mt-1 px-1\">\n            {{ message().createdAt | date:'shortTime' }}\n        </span>\n    </div>\n</div>","import { CommonModule } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { ImageModule } from 'primeng/image';\nimport { MCBaseMessageComponent } from '../base-message.component';\n\n@Component({\n  selector: 'mc-message-image',\n  imports: [CommonModule, ImageModule],\n  templateUrl: './image.component.html',\n  styleUrl: './image.component.css'\n})\nexport class MCMessageImageComponent extends MCBaseMessageComponent {\n\n}\n","<div class=\"flex w-full\"\n    [ngClass]=\"{'justify-end': message().side !== 'left', 'justify-start': message().side === 'left'}\">\n\n    <div class=\"max-w-[70%] flex flex-col\"\n        [ngClass]=\"{'items-end': message().side !== 'left', 'items-start': message().side === 'left'}\">\n\n        <div class=\"rounded-lg shadow-sm overflow-hidden\" [ngClass]=\"{\n                        'rounded-br-none': message().side !== 'left',\n                        'rounded-bl-none': message().side === 'left'\n                     }\">\n            <p-image [src]=\"message().content\" [alt]=\"'Image'\" [preview]=\"true\" width=\"250\">\n            </p-image>\n        </div>\n        <span class=\"text-xs text-gray-400 mt-1 px-1\">\n            {{ message().createdAt | date:'shortTime' }}\n        </span>\n    </div>\n</div>","import { CommonModule } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { MCBaseMessageComponent } from '../base-message.component';\n\n@Component({\n  selector: 'mc-message-video',\n  imports: [CommonModule],\n  templateUrl: './video.component.html',\n  styleUrl: './video.component.css'\n})\nexport class MCMessageVideoComponent extends MCBaseMessageComponent {\n\n}\n","<div class=\"flex w-full\"\n    [ngClass]=\"{'justify-end': message().side !== 'left', 'justify-start': message().side === 'left'}\">\n\n    <div class=\"max-w-[70%] flex flex-col\"\n        [ngClass]=\"{'items-end': message().side !== 'left', 'items-start': message().side === 'left'}\">\n\n        <div class=\"rounded-lg shadow-sm overflow-hidden\" [ngClass]=\"{\n                        'rounded-br-none': message().side !== 'left',\n                        'rounded-bl-none': message().side === 'left'\n                     }\">\n            <video [src]=\"message().content\" controls width=\"250\" class=\"block\">\n            </video>\n        </div>\n        <span class=\"text-xs text-gray-400 mt-1 px-1\">\n            {{ message().createdAt | date:'shortTime' }}\n        </span>\n    </div>\n</div>","import { CommonModule } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { MCBaseMessageComponent } from '../base-message.component';\n\n@Component({\n  selector: 'mc-message-audio',\n  imports: [CommonModule],\n  templateUrl: './audio.component.html',\n  styleUrl: './audio.component.css'\n})\nexport class MCMessageAudioComponent extends MCBaseMessageComponent {\n\n}\n","<div class=\"flex w-full\"\n    [ngClass]=\"{'justify-end': message().side !== 'left', 'justify-start': message().side === 'left'}\">\n\n    <div class=\"max-w-[70%] flex flex-col\"\n        [ngClass]=\"{'items-end': message().side !== 'left', 'items-start': message().side === 'left'}\">\n\n        <div class=\"rounded-lg shadow-sm overflow-hidden\" [ngClass]=\"{\n                        'rounded-br-none': message().side !== 'left',\n                        'rounded-bl-none': message().side === 'left'\n                     }\">\n            <audio [src]=\"message().content\" controls class=\"block w-[250px]\">\n            </audio>\n        </div>\n        <span class=\"text-xs text-gray-400 mt-1 px-1\">\n            {{ message().createdAt | date:'shortTime' }}\n        </span>\n    </div>\n</div>","import { CommonModule } from '@angular/common';\nimport { Component } from '@angular/core';\nimport { MCBaseMessageComponent } from '../base-message.component';\n\n@Component({\n  selector: 'mc-message-file',\n  imports: [CommonModule],\n  templateUrl: './file.component.html',\n  styleUrl: './file.component.css'\n})\nexport class MCMessageFileComponent extends MCBaseMessageComponent {\n\n}\n","<div class=\"flex w-full\"\n    [ngClass]=\"{'justify-end': message().side !== 'left', 'justify-start': message().side === 'left'}\">\n\n    <div class=\"max-w-[70%] flex flex-col\"\n        [ngClass]=\"{'items-end': message().side !== 'left', 'items-start': message().side === 'left'}\">\n\n        <div class=\"rounded-lg shadow-sm p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex items-center gap-3\"\n            [ngClass]=\"{\n                        'rounded-br-none': message().side !== 'left',\n                        'rounded-bl-none': message().side === 'left'\n                     }\">\n\n            <div\n                class=\"w-10 h-10 rounded bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-500 dark:text-gray-400\">\n                <i class=\"pi pi-file text-xl\"></i>\n            </div>\n\n            <div class=\"flex flex-col overflow-hidden\">\n                <span class=\"text-sm font-medium truncate text-gray-900 dark:text-gray-100 max-w-[150px]\">\n                    Attached File\n                </span>\n                <a [href]=\"message().content\" target=\"_blank\"\n                    class=\"text-xs text-blue-500 hover:text-blue-600 hover:underline flex items-center gap-1\">\n                    <span>Download</span>\n                    <i class=\"pi pi-external-link text-[10px]\"></i>\n                </a>\n            </div>\n        </div>\n        <span class=\"text-xs text-gray-400 mt-1 px-1\">\n            {{ message().createdAt | date:'shortTime' }}\n        </span>\n    </div>\n</div>","import { Injectable, Type } from '@angular/core';\nimport { MCBaseMessageComponent } from '../messages/base-message.component';\nimport { MCMessageChatType } from '../entities/message';\nimport { MCMessageTextComponent } from '../messages/text/text.component';\nimport { MCMessageImageComponent } from '../messages/image/image.component';\nimport { MCMessageVideoComponent } from '../messages/video/video.component';\nimport { MCMessageAudioComponent } from '../messages/audio/audio.component';\nimport { MCMessageFileComponent } from '../messages/file/file.component';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class MCChatService {\n\n  private registry = new Map<string, Type<MCBaseMessageComponent>>();\n\n  constructor() {\n    this.register(MCMessageChatType.TEXT, MCMessageTextComponent);\n    this.register(MCMessageChatType.IMAGE, MCMessageImageComponent);\n    this.register(MCMessageChatType.VIDEO, MCMessageVideoComponent);\n    this.register(MCMessageChatType.AUDIO, MCMessageAudioComponent);\n    this.register(MCMessageChatType.FILE, MCMessageFileComponent);\n  }\n\n  register(type: string, component: Type<MCBaseMessageComponent>) {\n    this.registry.set(type, component);\n  }\n\n  getComponent(type: string): Type<MCBaseMessageComponent> | undefined {\n    return this.registry.get(type);\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, inject, input, Type } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AvatarModule } from 'primeng/avatar';\nimport { ButtonModule } from 'primeng/button';\nimport { InputTextModule } from 'primeng/inputtext';\nimport { MCMessageChat, MCMessageChatSide, MCMessageChatType } from '../../entities/message';\nimport { MCChatService } from '../../services/chat.service';\nimport { MCBaseMessageComponent } from '../../messages/base-message.component';\nimport { MCConversation } from '../../entities/conversation';\n\n@Component({\n  selector: 'mc-conversation',\n  imports: [CommonModule, FormsModule, AvatarModule, ButtonModule, InputTextModule],\n  templateUrl: './conversation.component.html',\n  styleUrl: './conversation.component.css'\n})\nexport class MCConversationComponent {\n\n  conversation = input.required<MCConversation>();\n\n  chatService = inject(MCChatService);\n\n  newMessage: string = '';\n\n  // Let's pretend we have a currentUserId = 1.\n  currentUserId = 1;\n\n  getComponent(type: string): Type<MCBaseMessageComponent> {\n    return this.chatService.getComponent(type) ?? MCBaseMessageComponent;\n  }\n\n  sendMessage() {\n    if (!this.newMessage.trim()) return;\n\n    const message: MCMessageChat = {\n      id: Date.now().toString(),\n      type: MCMessageChatType.TEXT,\n      content: this.newMessage,\n      createdAt: new Date().toISOString(),\n      side: MCMessageChatSide.RIGHT,\n    };\n\n    // Ideally we would push to a service, but for now just local array\n    this.conversation().messages.push(message);\n    this.newMessage = '';\n  }\n}\n","<div\n    class=\"flex flex-col h-full bg-white dark:bg-gray-900 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700\">\n    <!-- Header -->\n    <div class=\"flex items-center p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800\">\n        <p-avatar image=\"https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png\" shape=\"circle\"\n            size=\"large\" styleClass=\"mr-3\">\n        </p-avatar>\n        <div>\n            <h2 class=\"text-lg font-semibold text-gray-800 dark:text-white\">Amy Elsner</h2>\n            <p class=\"text-sm text-green-500 flex items-center\">\n                <span class=\"w-2 h-2 rounded-full bg-green-500 mr-2\"></span>\n                Online\n            </p>\n        </div>\n    </div>\n\n    <!-- Messages Body -->\n    <div class=\"flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-900\">\n        <!-- Message Item -->\n        @for (msg of conversation().messages; track $index) {\n        <div class=\"mb-3\">\n            <ng-container *ngComponentOutlet=\"getComponent(msg.type); inputs: { message: msg }\"></ng-container>\n        </div>\n        }\n    </div>\n\n    <!-- Footer / Input Area -->\n    <div class=\"p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700\">\n        <div class=\"flex gap-2\">\n            <input pInputText type=\"text\" class=\"flex-1 w-full\" placeholder=\"Type a message...\" [(ngModel)]=\"newMessage\"\n                (keydown.enter)=\"sendMessage()\" />\n\n            <p-button icon=\"pi pi-send\" (onClick)=\"sendMessage()\" styleClass=\"p-button-rounded p-button-primary\">\n            </p-button>\n        </div>\n    </div>\n</div>","/*\n * Public API Surface of chat\n */\n\n/**\n * Entities\n */\nexport * from './lib/entities/message';\nexport * from './lib/entities/conversation';\n\n/**\n * Messages\n */\nexport * from './lib/messages/base-message.component';\nexport * from './lib/messages/text/text.component';\nexport * from './lib/messages/image/image.component';\nexport * from './lib/messages/video/video.component';\nexport * from './lib/messages/audio/audio.component';\nexport * from './lib/messages/file/file.component';\n\n/**\n * Components\n */\nexport * from './lib/components/conversation/conversation.component';\n\n/**\n * Services\n */\nexport * from './lib/services/chat.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2"],"mappings":"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"}

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Type, OnInit } from '@angular/core';
+import { Type } from '@angular/core';
 
 declare enum MCMessageChatType {
     TEXT = "text",
@@ -21,6 +21,8 @@ declare class MCMessageChat {
 }
 
 declare class MCConversation {
+    id?: string;
+    messages: MCMessageChat[];
 }
 
 declare class MCBaseMessageComponent {
@@ -44,6 +46,16 @@ declare class MCMessageVideoComponent extends MCBaseMessageComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<MCMessageVideoComponent, "mc-message-video", never, {}, {}, never, never, true, never>;
 }
 
+declare class MCMessageAudioComponent extends MCBaseMessageComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MCMessageAudioComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MCMessageAudioComponent, "mc-message-audio", never, {}, {}, never, never, true, never>;
+}
+
+declare class MCMessageFileComponent extends MCBaseMessageComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MCMessageFileComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MCMessageFileComponent, "mc-message-file", never, {}, {}, never, never, true, never>;
+}
+
 declare class MCChatService {
     private registry;
     constructor();
@@ -53,16 +65,15 @@ declare class MCChatService {
     static ɵprov: i0.ɵɵInjectableDeclaration<MCChatService>;
 }
 
-declare class MCConversationComponent implements OnInit {
+declare class MCConversationComponent {
+    conversation: i0.InputSignal<MCConversation>;
     chatService: MCChatService;
-    messages: MCMessageChat[];
     newMessage: string;
-    ngOnInit(): void;
     currentUserId: number;
     getComponent(type: string): Type<MCBaseMessageComponent>;
     sendMessage(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MCConversationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MCConversationComponent, "mc-conversation", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MCConversationComponent, "mc-conversation", never, { "conversation": { "alias": "conversation"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { MCBaseMessageComponent, MCChatService, MCConversation, MCConversationComponent, MCMessageChat, MCMessageChatSide, MCMessageChatType, MCMessageImageComponent, MCMessageTextComponent, MCMessageVideoComponent };
+export { MCBaseMessageComponent, MCChatService, MCConversation, MCConversationComponent, MCMessageAudioComponent, MCMessageChat, MCMessageChatSide, MCMessageChatType, MCMessageFileComponent, MCMessageImageComponent, MCMessageTextComponent, MCMessageVideoComponent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mckit/chat",
-  "version": "20.0.1",
+  "version": "20.0.2",
   "peerDependencies": {
     "@angular/common": "^20.3.0",
     "@angular/core": "^20.3.0"