@acorex/components 17.0.14 → 17.0.16

package/fesm2022/{acorex-components-chat.mjs → acorex-components-conversation.mjs}

@@ -17,11 +17,15 @@ import { AXTranslationModule } from '@acorex/core/translation';
 import { isBrowser } from '@acorex/core/platform';
 import * as i1$1 from '@angular/cdk/portal';
 import { ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
-import * as i3$1 from '@acorex/core/format';
+import * as i2$1 from '@acorex/components/avatar';
+import { AXAvatarModule } from '@acorex/components/avatar';
+import * as i4$1 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
-import * as i2$1 from '@acorex/components/audio-wave';
+import * as i2$2 from '@acorex/components/audio-wave';
 import { AXAudioWaveModule } from '@acorex/components/audio-wave';
 import { AXCircularProgressModule } from '@acorex/components/circular-progress';
+import * as i3$1 from '@acorex/components/loading';
+import { AXLoadingModule } from '@acorex/components/loading';
 import { AXDateTimeModule } from '@acorex/core/date-time';
 
 class AXRecordingService {
@@ -100,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
             type: Injectable
         }] });
 
-class AXChatInputComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
+class AXConversationInputComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
     constructor() {
         super(...arguments);
         this.hasAttachment = true;
@@ -168,27 +172,27 @@ class AXChatInputComponent extends classes((MXInputBaseValueComponent), MXLookCo
             isUserInteraction: true,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXChatInputComponent, selector: "ax-chat-input", inputs: { maxLength: "maxLength", hasAttachment: "hasAttachment", haVoice: "haVoice", acceptFileType: "acceptFileType" }, outputs: { onSendClick: "onSendClick", onStartRecording: "onStartRecording", onStopRecording: "onStopRecording", onFileChange: "onFileChange" }, providers: [
-            { provide: AXComponent, useExisting: AXChatInputComponent },
-            { provide: AXFocusableComponent, useExisting: AXChatInputComponent },
-            { provide: AXValuableComponent, useExisting: AXChatInputComponent },
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXConversationInputComponent, selector: "ax-conversation-input", inputs: { maxLength: "maxLength", hasAttachment: "hasAttachment", haVoice: "haVoice", acceptFileType: "acceptFileType" }, outputs: { onSendClick: "onSendClick", onStartRecording: "onStartRecording", onStopRecording: "onStopRecording", onFileChange: "onFileChange" }, providers: [
+            { provide: AXComponent, useExisting: AXConversationInputComponent },
+            { provide: AXFocusableComponent, useExisting: AXConversationInputComponent },
+            { provide: AXValuableComponent, useExisting: AXConversationInputComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => AXChatInputComponent),
+                useExisting: forwardRef(() => AXConversationInputComponent),
                 multi: true,
             },
         ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-chat-input\" [class.ax-state-recording]=\"recording()\">\n  @if (recording()) {\n  <div class=\"ax-chat-input-start-side\">\n    <span class=\"ax-record-dot\"></span>\n    <span>{{ recordingService.timer() }}</span>\n  </div>\n  <div class=\"ax-chat-input-main-side\">\n    <ax-button class=\"ax-sm\" look=\"blank\" color=\"primary\" [text]=\"'cancel' | translate | async\"\n      (onClick)=\"handleStopClick()\"></ax-button>\n  </div>\n  <div class=\"ax-chat-input-end-side\">\n    <ax-button look=\"solid\" color=\"danger\" class=\"ax-blob ax-sm\" (onClick)=\"handleSendVoiceClick()\">\n      <ax-icon>\n        <i class=\"ax-icon ax-icon-send\"></i>\n      </ax-icon>\n    </ax-button>\n  </div>\n  } @else {\n  <div class=\"ax-chat-input-start-side\">\n    <ax-button look=\"blank\" class=\"ax-sm\">\n      <ax-icon>\n        <i class=\"ax-icon ax-icon-emoji\"></i>\n      </ax-icon>\n      <ax-dropdown-panel>\n        <ng-container>\n          <div class=\"ax-emoji-container\">\n            <div>\u26A0\uFE0F</div>\n            <div>\u27A1\uFE0F</div>\n            <div>\uD83D\uDD03</div>\n            <div>\uD83D\uDD37</div>\n            <div>\uD83E\uDD1A</div>\n            <div>\uD83D\uDE02</div>\n            <div>\uD83D\uDE0A</div>\n          </div>\n        </ng-container>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n  <textarea class=\"ax-chat-input-main-side\"\n    oninput='this.style.height = \"\";this.style.height = this.scrollHeight + \"px\"' type=\"text\" rows=\"1\" [id]=\"id\"\n    [name]=\"name\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\" [disabled]=\"disabled\"\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"value\" (ngModelChange)=\"_handleModelChange($event)\"\n    [ngModelOptions]=\"{ updateOn: _updateOn }\" (keydown)=\"emitOnKeydownEvent($event)\" (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\" (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"></textarea>\n  <div class=\"ax-chat-input-end-side\">\n    @if (!value) {\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"handleAttachClick()\">\n      <ax-icon>\n        <i class=\"ax-icon ax-icon-attach\"></i>\n      </ax-icon>\n    </ax-button>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"handleRecordClick()\">\n      <ax-icon>\n        <i class=\"ax-icon ax-icon-mic\"></i>\n      </ax-icon>\n    </ax-button>\n    <input #inputFile [accept]=\"acceptFileType\" type=\"file\" class=\"ax-attach-input\" (change)=\"handleChangeFile($event)\">\n    }\n\n    @if (value) {\n    <ax-button look=\"solid\" color=\"primary\" class=\"ax-sm\" (onClick)=\"handleSendClick()\">\n      <ax-icon>\n        <i class=\"ax-icon ax-icon-send\"></i>\n      </ax-icon>\n    </ax-button>\n    }\n  </div>\n  }\n</div>", styles: [".ax-dark .ax-chat-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-color-primary-200));border-color:rgba(var(--ax-color-primary-200))}.ax-chat-input{border:1px solid;border-color:rgba(var(--ax-color-border-default));display:flex;align-items:flex-end;border-radius:var(--ax-rounded-border-default);position:relative;resize:vertical;height:auto;padding:.5rem;font-size:.875rem}.ax-chat-input.ax-state-recording{align-items:center;display:grid;grid-template-columns:repeat(3,1fr)}.ax-chat-input.ax-state-recording .ax-chat-input-start-side{justify-content:flex-start}.ax-chat-input.ax-state-recording .ax-chat-input-end-side{justify-content:flex-end}.ax-chat-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-color-primary-500));border-color:rgba(var(--ax-color-primary-500))}.ax-chat-input>textarea{font-size:.875rem;background-color:transparent;max-height:10rem;min-height:1.5rem;line-height:2rem;flex:1 1 auto;height:auto;resize:none}.ax-chat-input>textarea:focus,.ax-chat-input>textarea:focus-visible{outline:unset}.ax-chat-input .ax-chat-input-start-side,.ax-chat-input .ax-chat-input-end-side{display:flex;align-items:center;justify-content:center}.ax-chat-input .ax-chat-input-start-side{padding-inline-end:.75rem}.ax-chat-input .ax-chat-input-main-side{flex:1 1 auto;display:flex;align-items:center;justify-content:center}.ax-chat-input .ax-chat-input-end-side{padding-inline-start:.75rem;gap:.5rem}.ax-chat-input .ax-record-dot{display:inline-flex;width:.5rem;height:.5rem;background-color:rgba(var(--ax-color-danger-500));border-radius:999rem;margin-inline-end:.5rem}.ax-chat-input .ax-blob{animation:pulse .75s infinite}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 rgba(var(--ax-color-danger-500),.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(var(--ax-color-danger-500),0)}to{transform:scale(1);box-shadow:0 0 rgba(var(--ax-color-danger-500),0)}}.ax-chat-input .ax-attach-input{opacity:0;width:0;height:0;position:absolute}.ax-emoji-container{padding:.75rem;gap:.5rem;display:grid;grid-template-columns:repeat(7,1fr)}.ax-emoji-container>div{padding:.25rem;cursor:pointer;border-radius:var(--ax-rounded-border-default)}.ax-emoji-container>div:hover{background-color:rgba(var(--ax-color-on-surface))}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-chat-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
-                        { provide: AXComponent, useExisting: AXChatInputComponent },
-                        { provide: AXFocusableComponent, useExisting: AXChatInputComponent },
-                        { provide: AXValuableComponent, useExisting: AXChatInputComponent },
+            args: [{ selector: 'ax-conversation-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: AXComponent, useExisting: AXConversationInputComponent },
+                        { provide: AXFocusableComponent, useExisting: AXConversationInputComponent },
+                        { provide: AXValuableComponent, useExisting: AXConversationInputComponent },
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => AXChatInputComponent),
+                            useExisting: forwardRef(() => AXConversationInputComponent),
                             multi: true,
                         },
                     ], template: "<div class=\"ax-chat-input\" [class.ax-state-recording]=\"recording()\">\n  @if (recording()) {\n  <div class=\"ax-chat-input-start-side\">\n    <span class=\"ax-record-dot\"></span>\n    <span>{{ recordingService.timer() }}</span>\n  </div>\n  <div class=\"ax-chat-input-main-side\">\n    <ax-button class=\"ax-sm\" look=\"blank\" color=\"primary\" [text]=\"'cancel' | translate | async\"\n      (onClick)=\"handleStopClick()\"></ax-button>\n  </div>\n  <div class=\"ax-chat-input-end-side\">\n    <ax-button look=\"solid\" color=\"danger\" class=\"ax-blob ax-sm\" (onClick)=\"handleSendVoiceClick()\">\n      <ax-icon>\n        <i class=\"ax-icon ax-icon-send\"></i>\n      </ax-icon>\n    </ax-button>\n  </div>\n  } @else {\n  <div class=\"ax-chat-input-start-side\">\n    <ax-button look=\"blank\" class=\"ax-sm\">\n      <ax-icon>\n        <i class=\"ax-icon ax-icon-emoji\"></i>\n      </ax-icon>\n      <ax-dropdown-panel>\n        <ng-container>\n          <div class=\"ax-emoji-container\">\n            <div>\u26A0\uFE0F</div>\n            <div>\u27A1\uFE0F</div>\n            <div>\uD83D\uDD03</div>\n            <div>\uD83D\uDD37</div>\n            <div>\uD83E\uDD1A</div>\n            <div>\uD83D\uDE02</div>\n            <div>\uD83D\uDE0A</div>\n          </div>\n        </ng-container>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n  <textarea class=\"ax-chat-input-main-side\"\n    oninput='this.style.height = \"\";this.style.height = this.scrollHeight + \"px\"' type=\"text\" rows=\"1\" [id]=\"id\"\n    [name]=\"name\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\" [disabled]=\"disabled\"\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"value\" (ngModelChange)=\"_handleModelChange($event)\"\n    [ngModelOptions]=\"{ updateOn: _updateOn }\" (keydown)=\"emitOnKeydownEvent($event)\" (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\" (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"></textarea>\n  <div class=\"ax-chat-input-end-side\">\n    @if (!value) {\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"handleAttachClick()\">\n      <ax-icon>\n        <i class=\"ax-icon ax-icon-attach\"></i>\n      </ax-icon>\n    </ax-button>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"handleRecordClick()\">\n      <ax-icon>\n        <i class=\"ax-icon ax-icon-mic\"></i>\n      </ax-icon>\n    </ax-button>\n    <input #inputFile [accept]=\"acceptFileType\" type=\"file\" class=\"ax-attach-input\" (change)=\"handleChangeFile($event)\">\n    }\n\n    @if (value) {\n    <ax-button look=\"solid\" color=\"primary\" class=\"ax-sm\" (onClick)=\"handleSendClick()\">\n      <ax-icon>\n        <i class=\"ax-icon ax-icon-send\"></i>\n      </ax-icon>\n    </ax-button>\n    }\n  </div>\n  }\n</div>", styles: [".ax-dark .ax-chat-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-color-primary-200));border-color:rgba(var(--ax-color-primary-200))}.ax-chat-input{border:1px solid;border-color:rgba(var(--ax-color-border-default));display:flex;align-items:flex-end;border-radius:var(--ax-rounded-border-default);position:relative;resize:vertical;height:auto;padding:.5rem;font-size:.875rem}.ax-chat-input.ax-state-recording{align-items:center;display:grid;grid-template-columns:repeat(3,1fr)}.ax-chat-input.ax-state-recording .ax-chat-input-start-side{justify-content:flex-start}.ax-chat-input.ax-state-recording .ax-chat-input-end-side{justify-content:flex-end}.ax-chat-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-color-primary-500));border-color:rgba(var(--ax-color-primary-500))}.ax-chat-input>textarea{font-size:.875rem;background-color:transparent;max-height:10rem;min-height:1.5rem;line-height:2rem;flex:1 1 auto;height:auto;resize:none}.ax-chat-input>textarea:focus,.ax-chat-input>textarea:focus-visible{outline:unset}.ax-chat-input .ax-chat-input-start-side,.ax-chat-input .ax-chat-input-end-side{display:flex;align-items:center;justify-content:center}.ax-chat-input .ax-chat-input-start-side{padding-inline-end:.75rem}.ax-chat-input .ax-chat-input-main-side{flex:1 1 auto;display:flex;align-items:center;justify-content:center}.ax-chat-input .ax-chat-input-end-side{padding-inline-start:.75rem;gap:.5rem}.ax-chat-input .ax-record-dot{display:inline-flex;width:.5rem;height:.5rem;background-color:rgba(var(--ax-color-danger-500));border-radius:999rem;margin-inline-end:.5rem}.ax-chat-input .ax-blob{animation:pulse .75s infinite}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 rgba(var(--ax-color-danger-500),.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(var(--ax-color-danger-500),0)}to{transform:scale(1);box-shadow:0 0 rgba(var(--ax-color-danger-500),0)}}.ax-chat-input .ax-attach-input{opacity:0;width:0;height:0;position:absolute}.ax-emoji-container{padding:.75rem;gap:.5rem;display:grid;grid-template-columns:repeat(7,1fr)}.ax-emoji-container>div{padding:.25rem;cursor:pointer;border-radius:var(--ax-rounded-border-default)}.ax-emoji-container>div:hover{background-color:rgba(var(--ax-color-on-surface))}\n"] }]
@@ -213,7 +217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                 type: Output
             }] } });
 
-class AXChatMessageTypeRegistryService {
+class AXConversationMessageTypeRegistryService {
     constructor() {
         this.plugins = new Map();
     }
@@ -223,19 +227,19 @@ class AXChatMessageTypeRegistryService {
     resolve(name) {
         return this.plugins.get(name);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatMessageTypeRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatMessageTypeRegistryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationMessageTypeRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationMessageTypeRegistryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatMessageTypeRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationMessageTypeRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
-class AXChatMessageComponent extends MXBaseComponent {
+class AXConversationMessageComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
         this.chatMessage = input();
-        this.registryService = inject(AXChatMessageTypeRegistryService);
+        this.registryService = inject(AXConversationMessageTypeRegistryService);
     }
     get isOwn() {
         return !this.chatMessage().fromId;
@@ -252,51 +256,57 @@ class AXChatMessageComponent extends MXBaseComponent {
             Object.assign(ref.instance, { message: this.chatMessage() });
             this.cdr.markForCheck();
             const prefix = this.getHostElement().querySelector('ax-prefix');
-            const container = this.getHostElement().querySelector('.ax-message-prefix');
-            if (prefix && container) {
+            const suffix = this.getHostElement().querySelector('ax-suffix');
+            const prefixContainer = this.getHostElement().querySelector('.ax-message-prefix');
+            const suffixContainer = this.getHostElement().querySelector('.ax-message-suffix');
+            if (prefix && prefixContainer) {
                 prefix.style.display = 'flex';
-                container.append(prefix);
+                prefixContainer.append(prefix);
+            }
+            if (suffix && suffixContainer) {
+                suffix.style.display = 'flex';
+                suffixContainer.append(suffix);
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXChatMessageComponent, selector: "ax-chat-message", inputs: { chatMessage: { classPropertyName: "chatMessage", publicName: "chatMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-template [cdkPortalOutlet]=\"_portal\" (attached)=\"_handleAttched($event)\"></ng-template>\n\n<div class=\"ax-chat-message-status\">\n    <div class=\"ax-message-prefix\">\n    </div>\n    <div>\n        <span>{{ chatMessage().sendTime | format:'datetime':'HH:mm' | async }}</span>\n        <span>\n            @if(isOwn)\n            {\n            @if(chatMessage().deliverTime){\n            <i class=\"ax-icon ax-icon-check\"></i>\n            }\n            @if(chatMessage().readTime){\n            <i class=\"ax-icon ax-icon-dobble-check\"></i>\n            }\n            }\n        </span>\n    </div>\n</div>", styles: ["ax-chat-message{display:block;padding:.75rem;font-size:.875rem;line-height:1.25rem;border-radius:.75rem;border:1px solid;--ax-other-color: rgba(var(--ax-color-surface));--ax-other-color-fore: rgba(var(--ax-color-surface-fore));--ax-own-color: rgba(var(--ax-color-primary-100));--ax-own-color-fore: rgba(var(--ax-color-primary-fore-tint))}ax-chat-message.ax-state-own{border-end-end-radius:0!important;background-color:var(--ax-own-color);border-color:var(--ax-own-color);color:var(--ax-own-color-fore)}ax-chat-message.ax-state-own .ax-chat-message-status{color:var(--ax-own-color-fore)}ax-chat-message.ax-state-other{border-end-start-radius:0!important;background-color:var(--ax-other-color);border-color:var(--ax-other-color);border-color:rgba(var(--ax-color-border-default))}ax-chat-message.ax-state-other .ax-chat-message-status{color:var(--ax-own-color-fore)}ax-chat-message .ax-chat-message-status{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}ax-chat-message .ax-chat-message-status>div{display:flex;gap:.125rem;align-items:center}ax-chat-message ax-prefix{display:none}.ax-dark ax-chat-message{--ax-reply-bk: rgba(var(--ax-color-primary-800));--ax-reply-color: rgba(var(--ax-color-primary-fore));--ax-reply-border-color: rgba(var(--ax-color-primary-fore));--ax-own-color: rgba(var(--ax-color-primary-700));--ax-own-color-fore: rgba(var(--ax-color-primary-fore))}\n"], dependencies: [{ kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXConversationMessageComponent, selector: "ax-conversation-message", inputs: { chatMessage: { classPropertyName: "chatMessage", publicName: "chatMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "@if(chatMessage().fromId){\n<ax-avatar [size]=\"36\"></ax-avatar>\n}\n<div class=\"ax-message-content\" [class.ax-state-own]=\"!chatMessage().fromId\"\n    [class.ax-state-other]=\"chatMessage().fromId\">\n    <ng-template [cdkPortalOutlet]=\"_portal\" (attached)=\"_handleAttched($event)\"></ng-template>\n\n    <div class=\"ax-chat-message-status\">\n        <div class=\"ax-message-prefix\">\n        </div>\n        <div>\n            <div class=\"ax-message-suffix\"></div>\n            <span>{{ chatMessage().sendTime | format:'datetime':'HH:mm' | async }}</span>\n            <span>\n                @if(isOwn)\n                {\n                @if(chatMessage().deliverTime){\n                <i class=\"ax-icon ax-icon-check ax-message-status\"></i>\n                }\n                @if(chatMessage().readTime){\n                <i class=\"ax-icon ax-icon-dobble-check ax-message-status\"></i>\n                }\n                }\n            </span>\n        </div>\n    </div>\n</div>\n\n@if(!chatMessage().fromId){\n<ax-avatar [size]=\"36\"></ax-avatar>\n}", styles: [":root{--ax-message-other-color: rgba(var(--ax-color-primary-500));--ax-message-other-color-fore: rgba(var(--ax-color-primary-fore));--ax-message-status-color: rgba(var(--ax-color-primary-700));--ax-message-other-bar-color: rgba(var(--ax-color-primary-400));--ax-message-other-progress-color: rgba(var(--ax-color-primary-fore));--ax-message-own-color: rgba(var(--ax-color-primary-100));--ax-message-own-color-fore: rgba(var(--ax-color-primary-700));--ax-message-own-bar-color: rgba(var(--ax-color-primary-200));--ax-message-own-progress-color: rgba(var(--ax-color-primary-700))}ax-conversation-message{display:flex;gap:.5rem;align-items:flex-end}ax-conversation-message.ax-state-own{justify-content:flex-end}ax-conversation-message .ax-message-content{display:block;padding:.5rem;font-size:.875rem;line-height:1.25rem;border-radius:1rem;width:fit-content}ax-conversation-message .ax-message-content.ax-state-own{border-end-end-radius:0!important;background-color:var(--ax-message-own-color);color:var(--ax-message-own-color-fore);justify-content:flex-end}ax-conversation-message .ax-message-content.ax-state-own .ax-chat-message-status{color:var(--ax-message-own-color-fore)}ax-conversation-message .ax-message-content.ax-state-other{border-end-start-radius:0!important;background-color:var(--ax-message-other-color);color:var(--ax-message-other-color-fore)}ax-conversation-message .ax-message-content.ax-state-other .ax-chat-message-status{color:var(--ax-message-other-color-fore)}ax-conversation-message .ax-message-content .ax-chat-message-status{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}ax-conversation-message .ax-message-content .ax-chat-message-status>div{display:flex;gap:.125rem;align-items:center}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-message-status{color:var(--ax-message-status-color);font-weight:700}ax-conversation-message .ax-message-content ax-prefix,ax-conversation-message .ax-message-content ax-suffix{display:none}.ax-dark ax-conversation-message{--ax-message-other-color: rgba(var(--ax-color-primary-900));--ax-message-other-color-fore: rgba(var(--ax-color-primary-fore));--ax-message-own-color: rgba(var(--ax-color-primary-700));--ax-message-own-color-fore: rgba(var(--ax-color-primary-fore));--ax-message-status-color: rgba(var(--ax-color-primary-100))}\n"], dependencies: [{ kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i2$1.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "look"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-chat-message', encapsulation: ViewEncapsulation.None, template: "<ng-template [cdkPortalOutlet]=\"_portal\" (attached)=\"_handleAttched($event)\"></ng-template>\n\n<div class=\"ax-chat-message-status\">\n    <div class=\"ax-message-prefix\">\n    </div>\n    <div>\n        <span>{{ chatMessage().sendTime | format:'datetime':'HH:mm' | async }}</span>\n        <span>\n            @if(isOwn)\n            {\n            @if(chatMessage().deliverTime){\n            <i class=\"ax-icon ax-icon-check\"></i>\n            }\n            @if(chatMessage().readTime){\n            <i class=\"ax-icon ax-icon-dobble-check\"></i>\n            }\n            }\n        </span>\n    </div>\n</div>", styles: ["ax-chat-message{display:block;padding:.75rem;font-size:.875rem;line-height:1.25rem;border-radius:.75rem;border:1px solid;--ax-other-color: rgba(var(--ax-color-surface));--ax-other-color-fore: rgba(var(--ax-color-surface-fore));--ax-own-color: rgba(var(--ax-color-primary-100));--ax-own-color-fore: rgba(var(--ax-color-primary-fore-tint))}ax-chat-message.ax-state-own{border-end-end-radius:0!important;background-color:var(--ax-own-color);border-color:var(--ax-own-color);color:var(--ax-own-color-fore)}ax-chat-message.ax-state-own .ax-chat-message-status{color:var(--ax-own-color-fore)}ax-chat-message.ax-state-other{border-end-start-radius:0!important;background-color:var(--ax-other-color);border-color:var(--ax-other-color);border-color:rgba(var(--ax-color-border-default))}ax-chat-message.ax-state-other .ax-chat-message-status{color:var(--ax-own-color-fore)}ax-chat-message .ax-chat-message-status{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}ax-chat-message .ax-chat-message-status>div{display:flex;gap:.125rem;align-items:center}ax-chat-message ax-prefix{display:none}.ax-dark ax-chat-message{--ax-reply-bk: rgba(var(--ax-color-primary-800));--ax-reply-color: rgba(var(--ax-color-primary-fore));--ax-reply-border-color: rgba(var(--ax-color-primary-fore));--ax-own-color: rgba(var(--ax-color-primary-700));--ax-own-color-fore: rgba(var(--ax-color-primary-fore))}\n"] }]
+            args: [{ selector: 'ax-conversation-message', encapsulation: ViewEncapsulation.None, template: "@if(chatMessage().fromId){\n<ax-avatar [size]=\"36\"></ax-avatar>\n}\n<div class=\"ax-message-content\" [class.ax-state-own]=\"!chatMessage().fromId\"\n    [class.ax-state-other]=\"chatMessage().fromId\">\n    <ng-template [cdkPortalOutlet]=\"_portal\" (attached)=\"_handleAttched($event)\"></ng-template>\n\n    <div class=\"ax-chat-message-status\">\n        <div class=\"ax-message-prefix\">\n        </div>\n        <div>\n            <div class=\"ax-message-suffix\"></div>\n            <span>{{ chatMessage().sendTime | format:'datetime':'HH:mm' | async }}</span>\n            <span>\n                @if(isOwn)\n                {\n                @if(chatMessage().deliverTime){\n                <i class=\"ax-icon ax-icon-check ax-message-status\"></i>\n                }\n                @if(chatMessage().readTime){\n                <i class=\"ax-icon ax-icon-dobble-check ax-message-status\"></i>\n                }\n                }\n            </span>\n        </div>\n    </div>\n</div>\n\n@if(!chatMessage().fromId){\n<ax-avatar [size]=\"36\"></ax-avatar>\n}", styles: [":root{--ax-message-other-color: rgba(var(--ax-color-primary-500));--ax-message-other-color-fore: rgba(var(--ax-color-primary-fore));--ax-message-status-color: rgba(var(--ax-color-primary-700));--ax-message-other-bar-color: rgba(var(--ax-color-primary-400));--ax-message-other-progress-color: rgba(var(--ax-color-primary-fore));--ax-message-own-color: rgba(var(--ax-color-primary-100));--ax-message-own-color-fore: rgba(var(--ax-color-primary-700));--ax-message-own-bar-color: rgba(var(--ax-color-primary-200));--ax-message-own-progress-color: rgba(var(--ax-color-primary-700))}ax-conversation-message{display:flex;gap:.5rem;align-items:flex-end}ax-conversation-message.ax-state-own{justify-content:flex-end}ax-conversation-message .ax-message-content{display:block;padding:.5rem;font-size:.875rem;line-height:1.25rem;border-radius:1rem;width:fit-content}ax-conversation-message .ax-message-content.ax-state-own{border-end-end-radius:0!important;background-color:var(--ax-message-own-color);color:var(--ax-message-own-color-fore);justify-content:flex-end}ax-conversation-message .ax-message-content.ax-state-own .ax-chat-message-status{color:var(--ax-message-own-color-fore)}ax-conversation-message .ax-message-content.ax-state-other{border-end-start-radius:0!important;background-color:var(--ax-message-other-color);color:var(--ax-message-other-color-fore)}ax-conversation-message .ax-message-content.ax-state-other .ax-chat-message-status{color:var(--ax-message-other-color-fore)}ax-conversation-message .ax-message-content .ax-chat-message-status{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}ax-conversation-message .ax-message-content .ax-chat-message-status>div{display:flex;gap:.125rem;align-items:center}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-message-status{color:var(--ax-message-status-color);font-weight:700}ax-conversation-message .ax-message-content ax-prefix,ax-conversation-message .ax-message-content ax-suffix{display:none}.ax-dark ax-conversation-message{--ax-message-other-color: rgba(var(--ax-color-primary-900));--ax-message-other-color-fore: rgba(var(--ax-color-primary-fore));--ax-message-own-color: rgba(var(--ax-color-primary-700));--ax-message-own-color-fore: rgba(var(--ax-color-primary-fore));--ax-message-status-color: rgba(var(--ax-color-primary-100))}\n"] }]
         }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class AXChatViewComponent extends MXBaseComponent {
+class AXConversationViewComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
-        this._chats = signal([]);
+        this._conversations = signal([]);
     }
-    set chats(items) {
-        this._chats.set(items);
+    set conversations(items) {
+        this._conversations.set(items);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXChatViewComponent, selector: "ax-chat-view", inputs: { chats: "chats" }, usesInheritance: true, ngImport: i0, template: "@for (item of _chats(); track $index) {\n<ax-chat-message [chatMessage]=\"item\"></ax-chat-message>\n}", styles: ["ax-chat-view{display:flex;flex-direction:column;gap:1rem;height:100%;width:100%;overflow-y:auto;overflow-x:hidden}\n"], dependencies: [{ kind: "component", type: AXChatMessageComponent, selector: "ax-chat-message", inputs: ["chatMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXConversationViewComponent, selector: "ax-conversation-view", inputs: { conversations: "conversations" }, usesInheritance: true, ngImport: i0, template: "@for (item of _conversations(); track $index) {\n<ax-conversation-message [chatMessage]=\"item\"></ax-conversation-message>\n}", styles: ["ax-conversation-view{display:flex;flex-direction:column;gap:.5rem;height:100%;width:100%;overflow-y:auto;overflow-x:hidden}\n"], dependencies: [{ kind: "component", type: AXConversationMessageComponent, selector: "ax-conversation-message", inputs: ["chatMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-chat-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@for (item of _chats(); track $index) {\n<ax-chat-message [chatMessage]=\"item\"></ax-chat-message>\n}", styles: ["ax-chat-view{display:flex;flex-direction:column;gap:1rem;height:100%;width:100%;overflow-y:auto;overflow-x:hidden}\n"] }]
-        }], propDecorators: { chats: [{
+            args: [{ selector: 'ax-conversation-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@for (item of _conversations(); track $index) {\n<ax-conversation-message [chatMessage]=\"item\"></ax-conversation-message>\n}", styles: ["ax-conversation-view{display:flex;flex-direction:column;gap:.5rem;height:100%;width:100%;overflow-y:auto;overflow-x:hidden}\n"] }]
+        }], propDecorators: { conversations: [{
                 type: Input
             }] } });
 
-class AXChatMessageBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatMessageBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatMessageBaseComponent }); }
+class AXConversationMessageBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationMessageBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationMessageBaseComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatMessageBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationMessageBaseComponent, decorators: [{
             type: Injectable
         }] });
 
-class AXChatTextMessageComponent extends AXChatMessageBaseComponent {
+class AXConversationTextMessageComponent extends AXConversationMessageBaseComponent {
     constructor() {
         super(...arguments);
         this._text = signal('');
@@ -304,10 +314,10 @@ class AXChatTextMessageComponent extends AXChatMessageBaseComponent {
     ngOnInit() {
         this._text.set(this.message?.content);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatTextMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXChatTextMessageComponent, selector: "ng-component", inputs: { message: "message" }, usesInheritance: true, ngImport: i0, template: `<div [innerHtml]="_text()"></div>`, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationTextMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXConversationTextMessageComponent, selector: "ng-component", inputs: { message: "message" }, usesInheritance: true, ngImport: i0, template: `<div [innerHtml]="_text()"></div>`, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatTextMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationTextMessageComponent, decorators: [{
             type: Component,
             args: [{
                     template: `<div [innerHtml]="_text()"></div>`,
@@ -316,31 +326,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                 }]
         }] });
 
-class AXChatAudioMessageComponent extends AXChatMessageBaseComponent {
+class AXConversationAudioMessageComponent extends AXConversationMessageBaseComponent {
     constructor() {
         super();
         this.config = { url: '' };
         this.audioState = signal('paused');
+        this.selectedRate = signal(1);
+        this.selectedRateIndex = signal(1);
         this.audioProgress = signal(0);
         this.timeLeft = signal(0);
         this.currentTime = signal(0);
         this.duration = signal(0);
         afterNextRender(() => {
             this.config.url = this.message?.content;
-            this.audioState.set('loading');
+            this.config.audioRate = 0.25;
+            this.setWaveColor();
+            this.handleLoadingProgress();
         });
     }
+    setWaveColor() {
+        let waveColor = '';
+        let progressColor = '';
+        if (this.message.fromId) {
+            waveColor = getComputedStyle(document.body).getPropertyValue('--ax-message-other-bar-color');
+            progressColor = getComputedStyle(document.body).getPropertyValue('--ax-message-other-progress-color');
+        }
+        else {
+            waveColor = getComputedStyle(document.body).getPropertyValue('--ax-message-own-bar-color');
+            progressColor = getComputedStyle(document.body).getPropertyValue('--ax-message-own-progress-color');
+        }
+        this.config.waveColor = waveColor;
+        this.config.progressColor = progressColor;
+    }
     handlePauseClick() {
-        this.audio.pause();
+        this.audio?.pause();
         this.audioState.set('paused');
     }
     handlePlayClick() {
-        this.audio.play().then(() => {
+        this.audio?.play()?.then(() => {
             this.audioState.set('playing');
         });
     }
     handleOnStatusChanged(e) {
-        console.log(e.status, e.data);
+        if (e.status === 'load' || e.status === 'loading') {
+            this.audioState.set('loading');
+        }
         if (e.status === 'loading') {
             this.audioProgress.set(e.data.percent);
             this.duration.set(Math.ceil(e.data.duration * 1000));
@@ -356,24 +386,55 @@ class AXChatAudioMessageComponent extends AXChatMessageBaseComponent {
             this.timeLeft.set(this.duration() - e.data.currentTime * 1000);
             this.currentTime.set(e.data.currentTime * 1000);
         }
+        if (e.status === 'error') {
+            this.audioState.set('error');
+        }
+    }
+    handleLoadingProgress() {
+        // this.audioLoaderProgress?.nativeElement.style.cssText = `--ax-audio-progress: ${this.audioProgress()}`;
+    }
+    handleCancelLoading() {
+        //
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatAudioMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXChatAudioMessageComponent, selector: "ax-chat-message-audio", inputs: { message: "message" }, viewQueries: [{ propertyName: "audio", first: true, predicate: ["a"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-audio-controller\">\n\n\n  @switch (audioState()) {\n  @case ('playing') {\n  <button (click)=\"handlePauseClick()\">\n    <i class=\"fa-solid fa-pause\"></i>\n  </button>\n  }\n  @case ('paused')\n  {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"fa-solid fa-play\" style=\"margin-inline-start: 0.25rem;\"></i>\n  </button>\n  }\n  @case ('loading') {\n  <!-- <button (click)=\"handlePlayClick()\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 40 40\" class=\"loader\">\n      <circle class=\"progress\" fill=\"none\" stroke-linecap=\"round\" cx=\"20\" cy=\"20\" r=\"15.915494309\" />\n    </svg>\n  </button> -->\n  }\n  @default {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"fa-solid fa-play\" style=\"margin-inline-start: 0.25rem;\"></i>\n  </button>\n  }\n  }\n\n</div>\n<ax-audio-wave #a [config]=\"config\" (onStatusChanged)=\"handleOnStatusChanged($event)\"></ax-audio-wave>\n\n<ax-prefix>\n  @switch (audioState()) {\n  @case ('paused')\n  {\n  {{currentTime() | format:'time-duration' | async}}\n  }\n  @case ('playing')\n  {\n  {{currentTime() | format:'time-duration' | async}}\n  }\n  @default {\n  {{duration() | format:'time-duration' | async}}\n  }\n  }\n</ax-prefix>", styles: ["ax-chat-message-audio{display:flex;align-items:center;justify-content:space-between;gap:.25rem}ax-chat-message-audio .ax-audio-controller button{width:2.5rem;height:2.5rem;background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:999rem;display:flex;align-items:center;justify-content:center}ax-chat-message-audio .ax-audio-controller button>i{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem}ax-chat-message-audio .ax-audio-wave{flex:1}\n"], dependencies: [{ kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i2$1.AXAudioWaveComponent, selector: "ax-audio-wave", inputs: ["config"], outputs: ["onStatusChanged"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
+    handleReloadClick() {
+        //
+        this.audioState.set('loading');
+        this.audio.load();
+    }
+    handleRateClick() {
+        const rates = [0.5, 1, 2, 4];
+        if (this.selectedRateIndex() == rates.length - 1) {
+            this.selectedRateIndex.set(0);
+        }
+        else {
+            this.selectedRateIndex.set(this.selectedRateIndex() + 1);
+        }
+        this.selectedRate.set(rates[this.selectedRateIndex()]);
+        this.audio.setRate(this.selectedRate());
+    }
+    get __hostClass() {
+        return `${this.message.fromId ? 'ax-state-other' : 'ax-state-own'}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationAudioMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXConversationAudioMessageComponent, selector: "ax-conversation-message-audio", inputs: { message: "message" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "audio", first: true, predicate: ["a"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-prefix>\n  @switch (audioState()) {\n  @case ('paused')\n  {\n  {{currentTime() | format:'time-duration' | async}}\n  }\n  @case ('playing')\n  {\n  {{currentTime() | format:'time-duration' | async}}\n  }\n  @default {\n  {{duration() | format:'time-duration' | async}}\n  }\n  }\n  <button class=\"ax-audio-speed\" (click)=\"handleRateClick()\"></button>\n\n</ax-prefix>\n<div class=\"ax-audio-controller\">\n\n  @switch (audioState()) {\n  @case ('playing') {\n  <button (click)=\"handlePauseClick()\">\n    <i class=\"ax-icon ax-icon-pause\"></i>\n  </button>\n  }\n\n  @case ('ready') {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"ax-icon ax-icon-play\" style=\"margin-inline-start: 0.25rem;\"></i>\n  </button>\n  }\n\n  @case ('paused')\n  {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"ax-icon ax-icon-play\" style=\"margin-inline-start: 0.25rem;\"></i>\n  </button>\n  }\n\n  @case ('error')\n  {\n  <button class=\"ax-state-error\" (click)=\"handleReloadClick()\">\n    <i class=\"ax-icon ax-icon-reload\"></i>\n  </button>\n  }\n\n  @default {\n  <button (click)=\"handleCancelLoading()\">\n    <ax-loading-spinner [size]=\"24\" [stroke]=\"2\"\n      [color]=\"message.fromId?'var(--ax-other-color)':'var(--ax-own-color)'\"></ax-loading-spinner>\n  </button>\n  }\n  }\n\n</div>\n<ax-audio-wave #a [config]=\"config\" (onStatusChanged)=\"handleOnStatusChanged($event)\"></ax-audio-wave>\n<ax-suffix>\n  <div class=\"ax-audio-rate-button\" [class.ax-state-own]=\"!message?.fromId\" (click)=\"handleRateClick()\">\n    {{selectedRate()}}X</div>\n</ax-suffix>", styles: ["ax-conversation-message-audio{display:flex;align-items:center;justify-content:space-between;gap:.25rem;min-width:320px}ax-conversation-message-audio.ax-state-own .ax-audio-controller button{background-color:var(--ax-message-own-color-fore);color:var(--ax-message-own-color)}ax-conversation-message-audio.ax-state-other .ax-audio-controller button{background-color:var(--ax-message-other-color-fore);color:var(--ax-message-other-color)}ax-conversation-message-audio .ax-audio-controller button{width:2.5rem;height:2.5rem;border-radius:999rem;display:flex;align-items:center;justify-content:center}ax-conversation-message-audio .ax-audio-controller button ax-loading-spinner{display:flex}ax-conversation-message-audio .ax-audio-controller button.ax-state-error{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-conversation-message-audio .ax-audio-controller button>i{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700}ax-conversation-message-audio .ax-audio-wave{flex:1}.ax-audio-rate-button{background-color:var(--ax-message-other-color-fore);color:var(--ax-message-other-color);border-radius:.5rem;padding:0 .5rem;font-weight:700;margin-inline-end:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ax-audio-rate-button.ax-state-own{background-color:var(--ax-message-own-color-fore);color:var(--ax-message-own-color)}\n"], dependencies: [{ kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i2$2.AXAudioWaveComponent, selector: "ax-audio-wave", inputs: ["config"], outputs: ["onStatusChanged"] }, { kind: "component", type: i3$1.AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["color", "size", "stroke"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatAudioMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationAudioMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-chat-message-audio', encapsulation: ViewEncapsulation.None, inputs: ['message'], template: "<div class=\"ax-audio-controller\">\n\n\n  @switch (audioState()) {\n  @case ('playing') {\n  <button (click)=\"handlePauseClick()\">\n    <i class=\"fa-solid fa-pause\"></i>\n  </button>\n  }\n  @case ('paused')\n  {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"fa-solid fa-play\" style=\"margin-inline-start: 0.25rem;\"></i>\n  </button>\n  }\n  @case ('loading') {\n  <!-- <button (click)=\"handlePlayClick()\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 40 40\" class=\"loader\">\n      <circle class=\"progress\" fill=\"none\" stroke-linecap=\"round\" cx=\"20\" cy=\"20\" r=\"15.915494309\" />\n    </svg>\n  </button> -->\n  }\n  @default {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"fa-solid fa-play\" style=\"margin-inline-start: 0.25rem;\"></i>\n  </button>\n  }\n  }\n\n</div>\n<ax-audio-wave #a [config]=\"config\" (onStatusChanged)=\"handleOnStatusChanged($event)\"></ax-audio-wave>\n\n<ax-prefix>\n  @switch (audioState()) {\n  @case ('paused')\n  {\n  {{currentTime() | format:'time-duration' | async}}\n  }\n  @case ('playing')\n  {\n  {{currentTime() | format:'time-duration' | async}}\n  }\n  @default {\n  {{duration() | format:'time-duration' | async}}\n  }\n  }\n</ax-prefix>", styles: ["ax-chat-message-audio{display:flex;align-items:center;justify-content:space-between;gap:.25rem}ax-chat-message-audio .ax-audio-controller button{width:2.5rem;height:2.5rem;background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:999rem;display:flex;align-items:center;justify-content:center}ax-chat-message-audio .ax-audio-controller button>i{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem}ax-chat-message-audio .ax-audio-wave{flex:1}\n"] }]
+            args: [{ selector: 'ax-conversation-message-audio', encapsulation: ViewEncapsulation.None, inputs: ['message'], template: "<ax-prefix>\n  @switch (audioState()) {\n  @case ('paused')\n  {\n  {{currentTime() | format:'time-duration' | async}}\n  }\n  @case ('playing')\n  {\n  {{currentTime() | format:'time-duration' | async}}\n  }\n  @default {\n  {{duration() | format:'time-duration' | async}}\n  }\n  }\n  <button class=\"ax-audio-speed\" (click)=\"handleRateClick()\"></button>\n\n</ax-prefix>\n<div class=\"ax-audio-controller\">\n\n  @switch (audioState()) {\n  @case ('playing') {\n  <button (click)=\"handlePauseClick()\">\n    <i class=\"ax-icon ax-icon-pause\"></i>\n  </button>\n  }\n\n  @case ('ready') {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"ax-icon ax-icon-play\" style=\"margin-inline-start: 0.25rem;\"></i>\n  </button>\n  }\n\n  @case ('paused')\n  {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"ax-icon ax-icon-play\" style=\"margin-inline-start: 0.25rem;\"></i>\n  </button>\n  }\n\n  @case ('error')\n  {\n  <button class=\"ax-state-error\" (click)=\"handleReloadClick()\">\n    <i class=\"ax-icon ax-icon-reload\"></i>\n  </button>\n  }\n\n  @default {\n  <button (click)=\"handleCancelLoading()\">\n    <ax-loading-spinner [size]=\"24\" [stroke]=\"2\"\n      [color]=\"message.fromId?'var(--ax-other-color)':'var(--ax-own-color)'\"></ax-loading-spinner>\n  </button>\n  }\n  }\n\n</div>\n<ax-audio-wave #a [config]=\"config\" (onStatusChanged)=\"handleOnStatusChanged($event)\"></ax-audio-wave>\n<ax-suffix>\n  <div class=\"ax-audio-rate-button\" [class.ax-state-own]=\"!message?.fromId\" (click)=\"handleRateClick()\">\n    {{selectedRate()}}X</div>\n</ax-suffix>", styles: ["ax-conversation-message-audio{display:flex;align-items:center;justify-content:space-between;gap:.25rem;min-width:320px}ax-conversation-message-audio.ax-state-own .ax-audio-controller button{background-color:var(--ax-message-own-color-fore);color:var(--ax-message-own-color)}ax-conversation-message-audio.ax-state-other .ax-audio-controller button{background-color:var(--ax-message-other-color-fore);color:var(--ax-message-other-color)}ax-conversation-message-audio .ax-audio-controller button{width:2.5rem;height:2.5rem;border-radius:999rem;display:flex;align-items:center;justify-content:center}ax-conversation-message-audio .ax-audio-controller button ax-loading-spinner{display:flex}ax-conversation-message-audio .ax-audio-controller button.ax-state-error{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-conversation-message-audio .ax-audio-controller button>i{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700}ax-conversation-message-audio .ax-audio-wave{flex:1}.ax-audio-rate-button{background-color:var(--ax-message-other-color-fore);color:var(--ax-message-other-color);border-radius:.5rem;padding:0 .5rem;font-weight:700;margin-inline-end:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ax-audio-rate-button.ax-state-own{background-color:var(--ax-message-own-color-fore);color:var(--ax-message-own-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { audio: [{
                 type: ViewChild,
                 args: ['a']
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 const COMPONENT = [
-    AXChatViewComponent,
-    AXChatInputComponent,
-    AXChatMessageComponent,
-    AXChatTextMessageComponent,
-    AXChatAudioMessageComponent,
+    AXConversationViewComponent,
+    AXConversationInputComponent,
+    AXConversationMessageComponent,
+    AXConversationTextMessageComponent,
+    AXConversationAudioMessageComponent,
 ];
 const MODULES = [
     CommonModule,
@@ -389,11 +450,13 @@ const MODULES = [
     AXCircularProgressModule,
     AXDateTimeModule,
     CdkPortalOutlet,
+    AXLoadingModule,
+    AXAvatarModule,
 ];
-class AXChatModule {
+class AXConversationModule {
     static forRoot(config) {
         return {
-            ngModule: AXChatModule,
+            ngModule: AXConversationModule,
             providers: [
                 {
                     provide: 'AXChatModuleFactory',
@@ -403,14 +466,14 @@ class AXChatModule {
                         }
                         registry.register({
                             name: 'text',
-                            component: AXChatTextMessageComponent,
+                            component: AXConversationTextMessageComponent,
                         });
                         registry.register({
                             name: 'audio',
-                            component: AXChatAudioMessageComponent,
+                            component: AXConversationAudioMessageComponent,
                         });
                     },
-                    deps: [AXChatMessageTypeRegistryService],
+                    deps: [AXConversationMessageTypeRegistryService],
                     multi: true,
                 },
             ],
@@ -418,7 +481,7 @@ class AXChatModule {
     }
     static forChild(config) {
         return {
-            ngModule: AXChatModule,
+            ngModule: AXConversationModule,
             providers: [
                 {
                     provide: 'AXPWorkflowModuleFactory',
@@ -427,7 +490,7 @@ class AXChatModule {
                             registry.register(...config.types);
                         }
                     },
-                    deps: [AXChatMessageTypeRegistryService],
+                    deps: [AXConversationMessageTypeRegistryService],
                     multi: true,
                 },
             ],
@@ -441,12 +504,12 @@ class AXChatModule {
             f();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatModule, deps: [{ token: 'AXChatModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: AXChatModule, declarations: [AXChatViewComponent,
-            AXChatInputComponent,
-            AXChatMessageComponent,
-            AXChatTextMessageComponent,
-            AXChatAudioMessageComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationModule, deps: [{ token: 'AXChatModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: AXConversationModule, declarations: [AXConversationViewComponent,
+            AXConversationInputComponent,
+            AXConversationMessageComponent,
+            AXConversationTextMessageComponent,
+            AXConversationAudioMessageComponent], imports: [CommonModule,
             FormsModule,
             AsyncPipe,
             AXRippleDirective,
@@ -458,12 +521,14 @@ class AXChatModule {
             AXAudioWaveModule,
             AXCircularProgressModule,
             AXDateTimeModule,
-            CdkPortalOutlet], exports: [AXChatViewComponent,
-            AXChatInputComponent,
-            AXChatMessageComponent,
-            AXChatTextMessageComponent,
-            AXChatAudioMessageComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatModule, providers: [AXRecordingService], imports: [CommonModule,
+            CdkPortalOutlet,
+            AXLoadingModule,
+            AXAvatarModule], exports: [AXConversationViewComponent,
+            AXConversationInputComponent,
+            AXConversationMessageComponent,
+            AXConversationTextMessageComponent,
+            AXConversationAudioMessageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationModule, providers: [AXRecordingService], imports: [CommonModule,
             FormsModule,
             AXButtonModule,
             AXDecoratorModule,
@@ -472,9 +537,11 @@ class AXChatModule {
             AXFormatModule,
             AXAudioWaveModule,
             AXCircularProgressModule,
-            AXDateTimeModule] }); }
+            AXDateTimeModule,
+            AXLoadingModule,
+            AXAvatarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],
@@ -489,11 +556,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                     args: ['AXChatModuleFactory']
                 }] }] });
 
-class AXChatService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatService }); }
+class AXConversationService {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXConversationService, decorators: [{
             type: Injectable
         }] });
 
@@ -501,5 +568,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXChatAudioMessageComponent, AXChatInputComponent, AXChatMessageBaseComponent, AXChatMessageComponent, AXChatMessageTypeRegistryService, AXChatModule, AXChatService, AXChatTextMessageComponent, AXChatViewComponent, AXRecordingService };
-//# sourceMappingURL=acorex-components-chat.mjs.map
+export { AXConversationAudioMessageComponent, AXConversationInputComponent, AXConversationMessageBaseComponent, AXConversationMessageComponent, AXConversationMessageTypeRegistryService, AXConversationModule, AXConversationService, AXConversationTextMessageComponent, AXConversationViewComponent, AXRecordingService };
+//# sourceMappingURL=acorex-components-conversation.mjs.map