@acorex/components 22.0.0-next.32 → 22.0.0-next.33

package/fesm2022/acorex-components-conversation.mjs

@@ -5695,7 +5695,7 @@ class AXConversationComposerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationComposerComponent, isStandalone: true, selector: "ax-conversation-composer", outputs: { messageSent: "messageSent", emojiClick: "emojiClick", attachClick: "attachClick", voiceClick: "voiceClick" }, viewQueries: [{ propertyName: "textAreaRef", first: true, predicate: ["inputElement"], descendants: true, read: AXTextAreaComponent, isSignal: true }, { propertyName: "emojiPopoverRef", first: true, predicate: ["emojiPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "    @if (activeConversation()) {\n      <div class=\"composer\">\n        <!-- Full-Width Component Mode -->\n        @if (activeComponent()) {\n          <div class=\"composer-component-fullwidth\">\n            <ax-conversation-registry-component-outlet\n              [component]=\"activeComponent()!.component\"\n              [componentLoader]=\"activeComponent()!.componentLoader\"\n              [inputs]=\"getComponentInputs()\"\n            />\n          </div>\n        } @else {\n          <!-- Normal Composer Mode -->\n          <!-- Edit/Reply Banner -->\n          @if (editingMessage() || replyingToMessage()) {\n            <div\n              class=\"ax-conversation-composer-banner\"\n              [class.ax-conversation-composer-banner--edit]=\"!!editingMessage()\"\n              [class.ax-conversation-composer-banner--reply]=\"!!replyingToMessage()\"\n            >\n              <div class=\"ax-conversation-composer-banner__accent\" aria-hidden=\"true\"></div>\n              @if (editingMessage()) {\n                <div class=\"ax-conversation-composer-banner__content\">\n                  <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n                    ><i class=\"fa-light fa-pen-to-square\"></i\n                  ></span>\n                  <div class=\"ax-conversation-composer-banner__body\">\n                    <span class=\"ax-conversation-composer-banner__label\">{{\n                      '@acorex:chat.composer.editing-message' | translate | async\n                    }}</span>\n                    @if (getEditingPreview(); as preview) {\n                      <span class=\"ax-conversation-composer-banner__preview\">\n                        @if (preview.type !== 'text') {\n                          <i [class]=\"preview.icon\"></i>\n                        }\n                        {{ getComposerPreviewLabel(preview) }}\n                      </span>\n                    }\n                  </div>\n                </div>\n              } @else if (replyingToMessage()) {\n                <div class=\"ax-conversation-composer-banner__content\">\n                  <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n                    ><i class=\"fa-light fa-reply\"></i\n                  ></span>\n                  <div\n                    class=\"ax-conversation-composer-banner__body ax-conversation-composer-banner__body--clickable\"\n                    (click)=\"onReplyPreviewClick()\"\n                  >\n                    <span class=\"ax-conversation-composer-banner__label\">\n                      {{ '@acorex:chat.composer.replying-to' | translate | async }} {{ getReplyingSenderName() }}\n                    </span>\n                    @if (getReplyingPreview(); as preview) {\n                      <span class=\"ax-conversation-composer-banner__preview\">\n                        @if (preview.type !== 'text') {\n                          <i [class]=\"preview.icon\"></i>\n                        }\n                        {{ getComposerPreviewLabel(preview) }}\n                      </span>\n                    }\n                  </div>\n                </div>\n              }\n              <button\n                type=\"button\"\n                class=\"ax-conversation-composer-banner__close\"\n                (click)=\"cancelEditReply()\"\n                [attr.aria-label]=\"'@acorex:chat.actions.cancel' | translate | async\"\n              >\n                <i class=\"fa-light fa-xmark\"></i>\n              </button>\n            </div>\n          }\n\n          <!-- Input Area -->\n          <div class=\"composer-input-container\">\n            <!-- Left Actions -->\n            <div class=\"composer-actions-left\">\n              @for (action of leftInlineActions(); track action.id) {\n                <button\n                  type=\"button\"\n                  class=\"action-button\"\n                  #leftActionButton\n                  (click)=\"onActionClick(action.id, $event)\"\n                  [attr.aria-label]=\"getActionLabel(action)\"\n                  [disabled]=\"!isActionEnabled(action)\"\n                  [class]=\"action.className\"\n                >\n                  <i [class]=\"action.icon\"></i>\n                  @if (action.badge) {\n                    <span class=\"action-badge\">{{ action.badge }}</span>\n                  }\n                </button>\n              }\n\n              <!-- Menu Actions Dropdown -->\n              @if (leftMenuActions().length > 0) {\n                <ax-button color=\"primary\" look=\"outline\">\n                  <i class=\"fa-light fa-ellipsis\"></i>\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      @for (action of leftMenuActions(); track action.id) {\n                        <ax-button-item\n                          [text]=\"getActionLabel(action)\"\n                          (click)=\"onActionClick(action.id)\"\n                          [disabled]=\"!isActionEnabled(action)\"\n                        >\n                          <ax-prefix>\n                            <i [class]=\"action.icon\"></i>\n                          </ax-prefix>\n                        </ax-button-item>\n                      }\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-button>\n              }\n            </div>\n\n            <!-- Text Input -->\n            <div class=\"composer-input-wrapper\">\n              <ax-text-area\n                #inputElement\n                [(ngModel)]=\"draftText\"\n                (onKeyDown)=\"onKeyDown($event)\"\n                (onValueChanged)=\"onInput()\"\n                [placeholder]=\"placeholder()\"\n                (onKeyDown)=\"onEnter($event)\"\n                [rows]=\"inputRows()\"\n              ></ax-text-area>\n            </div>\n\n            <!-- Right Actions -->\n            <div class=\"composer-actions-right\">\n              @if (draftText().trim().length === 0 && !attachments().length) {\n                <!-- Show action buttons when empty -->\n                @for (action of rightInlineActions(); track action.id) {\n                  <button\n                    type=\"button\"\n                    class=\"action-button\"\n                    [class.action-voice]=\"action.id === 'voice-recording'\"\n                    (click)=\"onActionClick(action.id)\"\n                    [attr.aria-label]=\"getActionLabel(action)\"\n                    [disabled]=\"!isActionEnabled(action)\"\n                    [class]=\"action.className\"\n                    [attr.axUploaderBrowseHandle]=\"action.id === 'attach' ? '' : null\"\n                  >\n                    <i [class]=\"action.icon\"></i>\n                    @if (action.badge) {\n                      <span class=\"action-badge\">{{ action.badge }}</span>\n                    }\n                  </button>\n                }\n\n                <!-- Menu Actions Dropdown -->\n                @if (rightMenuActions().length > 0) {\n                  <ax-button look=\"blank\">\n                    <i class=\"fa-light fa-ellipsis-vertical\"></i>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        @for (action of rightMenuActions(); track action.id) {\n                          <ax-button-item\n                            [text]=\"getActionLabel(action)\"\n                            (click)=\"onActionClick(action.id)\"\n                            [disabled]=\"!isActionEnabled(action)\"\n                          >\n                            <ax-prefix>\n                              <i [class]=\"action.icon\"></i>\n                            </ax-prefix>\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    </ax-dropdown-panel>\n                  </ax-button>\n                }\n              } @else {\n                <!-- Show send/save button when has content -->\n                <button\n                  type=\"button\"\n                  class=\"action-button action-send\"\n                  (click)=\"onSendClick()\"\n                  [disabled]=\"!canSend()\"\n                  [attr.aria-label]=\"\n                    editingMessage()\n                      ? ('@acorex:chat.actions.save' | translate | async)\n                      : ('@acorex:chat.actions.send' | translate | async)\n                  \"\n                >\n                  <i\n                    [class]=\"editingMessage() ? 'send-icon fa-light fa-check' : 'send-icon fa-light fa-paper-plane'\"\n                  ></i>\n                </button>\n              }\n            </div>\n          </div>\n\n          <!-- Attachments Preview -->\n          @if (attachments().length > 0) {\n            <div class=\"composer-attachments\">\n              @for (attachment of attachments(); track $index) {\n                <div class=\"attachment-item\">\n                  <span class=\"attachment-icon\"><i class=\"fa-light fa-paperclip\"></i></span>\n                  <span class=\"attachment-name\">{{ attachment.name }}</span>\n                  <button\n                    type=\"button\"\n                    class=\"attachment-remove\"\n                    (click)=\"removeAttachment($index)\"\n                    [attr.aria-label]=\"'@acorex:chat.actions.remove-attachment' | translate | async\"\n                  >\n                    <i class=\"fa-light fa-xmark\"></i>\n                  </button>\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Typing Indicator -->\n          @if (showTypingIndicator()) {\n            <div class=\"typing-indicator-container\">\n              <span class=\"typing-indicator\">{{ '@acorex:chat.status.someone-typing' | translate | async }}</span>\n            </div>\n          }\n        }\n      </div>\n    }\n\n    <!-- Popover for emoji/sticker picker -->\n    @if (emojiPopoverTarget()) {\n      <ax-popover\n        #emojiPopover\n        [target]=\"emojiPopoverTarget()\"\n        [openOn]=\"'manual'\"\n        [closeOn]=\"'clickOut'\"\n        [placement]=\"'top-start'\"\n        (onClosed)=\"onEmojiPopoverClosed()\"\n      >\n        <div class=\"composer-emoji-popover\">\n          <ax-conversation-registry-component-outlet\n            [componentLoader]=\"composerPopupLoader\"\n            [inputs]=\"getEmojiPopupInputs()\"\n          />\n        </div>\n      </ax-popover>\n    }\n", styles: ["@layer properties;@layer components{ax-conversation-composer{display:block;width:100%}ax-conversation-composer .ax-conversation-composer-banner{display:flex;min-height:2.75rem;align-items:stretch;gap:calc(var(--spacing, .25rem) * 0);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-composer .ax-conversation-composer-banner__accent{width:3px;flex-shrink:0;border-start-end-radius:var(--radius-sm, .25rem);border-end-end-radius:var(--radius-sm, .25rem);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__accent{background-color:rgba(var(--ax-sys-color-secondary-500))}ax-conversation-composer .ax-conversation-composer-banner__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer .ax-conversation-composer-banner__icon{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600));background:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__icon{color:rgba(var(--ax-sys-color-secondary-600));background:rgba(var(--ax-sys-color-secondary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner__body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-composer .ax-conversation-composer-banner__body--clickable{cursor:pointer;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__body--clickable:hover{opacity:.85}}ax-conversation-composer .ax-conversation-composer-banner__label{font-size:.6875rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-600));text-transform:uppercase}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__label{color:rgba(var(--ax-sys-color-secondary-600))}ax-conversation-composer .ax-conversation-composer-banner__preview{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);overflow:hidden;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:.88}ax-conversation-composer .ax-conversation-composer-banner__preview i{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .ax-conversation-composer-banner__close{margin-inline-end:calc(var(--spacing, .25rem) * 1.5);display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;align-self:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.55);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__close:hover{color:rgba(var(--ax-sys-color-on-surface));background:rgba(var(--ax-sys-color-on-surface),.06)}}ax-conversation-composer .ax-conversation-composer-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .emoji-icon{flex-shrink:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-input-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right{display:flex;align-items:center}ax-conversation-composer .composer-input-wrapper{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-composer .composer-input{max-height:120px;min-height:calc(var(--spacing, .25rem) * 10);width:100%;resize:none;border-radius:1.25rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-outline-style: none;outline-style:none;transition:border-color .2s}ax-conversation-composer .composer-input:focus{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .action-button{position:relative;display:flex;height:calc(var(--spacing, .25rem) * 10);width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));transition:all .2s}@media(hover:hover){ax-conversation-composer .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-composer .action-button:disabled{cursor:not-allowed;opacity:50%}ax-conversation-composer .action-send{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}@media(hover:hover){ax-conversation-composer .action-send:hover:not(:disabled){background-color:rgba(var(--ax-sys-color-primary-600))}}ax-conversation-composer .send-icon{position:relative;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));inset-inline-start:-1px}ax-conversation-composer .action-voice{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-attachments{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-composer .attachment-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-conversation-composer .attachment-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-composer .attachment-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-composer .attachment-remove{display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:background .2s}@media(hover:hover){ax-conversation-composer .attachment-remove:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}}ax-conversation-composer .typing-indicator-container{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .action-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1);display:flex;height:calc(var(--spacing, .25rem) * 4);min-width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-surface));padding-inline:calc(var(--spacing, .25rem) * 1);font-size:.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-primary-surface))}ax-conversation-composer .composer-emoji-popover{width:100%;max-width:var(--container-md, 28rem);max-height:31.25rem}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-tracking: initial;--tw-leading: initial;--tw-outline-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs"] }, { kind: "ngmodule", type: FormsModule }, { 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: AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXCommonModule }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationComposerComponent, isStandalone: true, selector: "ax-conversation-composer", outputs: { messageSent: "messageSent", emojiClick: "emojiClick", attachClick: "attachClick", voiceClick: "voiceClick" }, viewQueries: [{ propertyName: "textAreaRef", first: true, predicate: ["inputElement"], descendants: true, read: AXTextAreaComponent, isSignal: true }, { propertyName: "emojiPopoverRef", first: true, predicate: ["emojiPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "    @if (activeConversation()) {\n      <div class=\"composer\">\n        <!-- Full-Width Component Mode -->\n        @if (activeComponent()) {\n          <div class=\"composer-component-fullwidth\">\n            <ax-conversation-registry-component-outlet\n              [component]=\"activeComponent()!.component\"\n              [componentLoader]=\"activeComponent()!.componentLoader\"\n              [inputs]=\"getComponentInputs()\"\n            />\n          </div>\n        } @else {\n          <!-- Normal Composer Mode -->\n          <!-- Edit/Reply Banner -->\n          @if (editingMessage() || replyingToMessage()) {\n            <div\n              class=\"ax-conversation-composer-banner\"\n              [class.ax-conversation-composer-banner--edit]=\"!!editingMessage()\"\n              [class.ax-conversation-composer-banner--reply]=\"!!replyingToMessage()\"\n            >\n              <div class=\"ax-conversation-composer-banner__accent\" aria-hidden=\"true\"></div>\n              @if (editingMessage()) {\n                <div class=\"ax-conversation-composer-banner__content\">\n                  <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n                    ><i class=\"fa-light fa-pen-to-square\"></i\n                  ></span>\n                  <div class=\"ax-conversation-composer-banner__body\">\n                    <span class=\"ax-conversation-composer-banner__label\">{{\n                      '@acorex:chat.composer.editing-message' | translate | async\n                    }}</span>\n                    @if (getEditingPreview(); as preview) {\n                      <span class=\"ax-conversation-composer-banner__preview\">\n                        @if (preview.type !== 'text') {\n                          <i [class]=\"preview.icon\"></i>\n                        }\n                        {{ getComposerPreviewLabel(preview) }}\n                      </span>\n                    }\n                  </div>\n                </div>\n              } @else if (replyingToMessage()) {\n                <div class=\"ax-conversation-composer-banner__content\">\n                  <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n                    ><i class=\"fa-light fa-reply\"></i\n                  ></span>\n                  <div\n                    class=\"ax-conversation-composer-banner__body ax-conversation-composer-banner__body--clickable\"\n                    (click)=\"onReplyPreviewClick()\"\n                  >\n                    <span class=\"ax-conversation-composer-banner__label\">\n                      {{ '@acorex:chat.composer.replying-to' | translate | async }} {{ getReplyingSenderName() }}\n                    </span>\n                    @if (getReplyingPreview(); as preview) {\n                      <span class=\"ax-conversation-composer-banner__preview\">\n                        @if (preview.type !== 'text') {\n                          <i [class]=\"preview.icon\"></i>\n                        }\n                        {{ getComposerPreviewLabel(preview) }}\n                      </span>\n                    }\n                  </div>\n                </div>\n              }\n              <button\n                type=\"button\"\n                class=\"ax-conversation-composer-banner__close\"\n                (click)=\"cancelEditReply()\"\n                [attr.aria-label]=\"'@acorex:chat.actions.cancel' | translate | async\"\n              >\n                <i class=\"fa-light fa-xmark\"></i>\n              </button>\n            </div>\n          }\n\n          <!-- Input Area -->\n          <div class=\"composer-input-container\">\n            <!-- Left Actions -->\n            <div class=\"composer-actions-left\">\n              @for (action of leftInlineActions(); track action.id) {\n                <button\n                  type=\"button\"\n                  class=\"action-button\"\n                  #leftActionButton\n                  (click)=\"onActionClick(action.id, $event)\"\n                  [attr.aria-label]=\"getActionLabel(action)\"\n                  [disabled]=\"!isActionEnabled(action)\"\n                  [class]=\"action.className\"\n                >\n                  <i [class]=\"action.icon\"></i>\n                  @if (action.badge) {\n                    <span class=\"action-badge\">{{ action.badge }}</span>\n                  }\n                </button>\n              }\n\n              <!-- Menu Actions Dropdown -->\n              @if (leftMenuActions().length > 0) {\n                <ax-button color=\"primary\" look=\"outline\">\n                  <i class=\"fa-light fa-ellipsis\"></i>\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      @for (action of leftMenuActions(); track action.id) {\n                        <ax-button-item\n                          [text]=\"getActionLabel(action)\"\n                          (click)=\"onActionClick(action.id)\"\n                          [disabled]=\"!isActionEnabled(action)\"\n                        >\n                          <ax-prefix>\n                            <i [class]=\"action.icon\"></i>\n                          </ax-prefix>\n                        </ax-button-item>\n                      }\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-button>\n              }\n            </div>\n\n            <!-- Text Input -->\n            <div class=\"composer-input-wrapper\">\n              <ax-text-area\n                #inputElement\n                [(ngModel)]=\"draftText\"\n                (onKeyDown)=\"onKeyDown($event)\"\n                (onValueChanged)=\"onInput()\"\n                [placeholder]=\"placeholder()\"\n                (onKeyDown)=\"onEnter($event)\"\n                [rows]=\"inputRows()\"\n              ></ax-text-area>\n            </div>\n\n            <!-- Right Actions -->\n            <div class=\"composer-actions-right\">\n              @if (draftText().trim().length === 0 && !attachments().length) {\n                <!-- Show action buttons when empty -->\n                @for (action of rightInlineActions(); track action.id) {\n                  <button\n                    type=\"button\"\n                    class=\"action-button\"\n                    [class.action-voice]=\"action.id === 'voice-recording'\"\n                    (click)=\"onActionClick(action.id)\"\n                    [attr.aria-label]=\"getActionLabel(action)\"\n                    [disabled]=\"!isActionEnabled(action)\"\n                    [class]=\"action.className\"\n                    [attr.axUploaderBrowseHandle]=\"action.id === 'attach' ? '' : null\"\n                  >\n                    <i [class]=\"action.icon\"></i>\n                    @if (action.badge) {\n                      <span class=\"action-badge\">{{ action.badge }}</span>\n                    }\n                  </button>\n                }\n\n                <!-- Menu Actions Dropdown -->\n                @if (rightMenuActions().length > 0) {\n                  <ax-button look=\"blank\">\n                    <i class=\"fa-light fa-ellipsis-vertical\"></i>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        @for (action of rightMenuActions(); track action.id) {\n                          <ax-button-item\n                            [text]=\"getActionLabel(action)\"\n                            (click)=\"onActionClick(action.id)\"\n                            [disabled]=\"!isActionEnabled(action)\"\n                          >\n                            <ax-prefix>\n                              <i [class]=\"action.icon\"></i>\n                            </ax-prefix>\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    </ax-dropdown-panel>\n                  </ax-button>\n                }\n              } @else {\n                <!-- Show send/save button when has content -->\n                <button\n                  type=\"button\"\n                  class=\"action-button action-send\"\n                  (click)=\"onSendClick()\"\n                  [disabled]=\"!canSend()\"\n                  [attr.aria-label]=\"\n                    editingMessage()\n                      ? ('@acorex:chat.actions.save' | translate | async)\n                      : ('@acorex:chat.actions.send' | translate | async)\n                  \"\n                >\n                  <i\n                    [class]=\"editingMessage() ? 'send-icon fa-light fa-check' : 'send-icon fa-light fa-paper-plane'\"\n                  ></i>\n                </button>\n              }\n            </div>\n          </div>\n\n          <!-- Attachments Preview -->\n          @if (attachments().length > 0) {\n            <div class=\"composer-attachments\">\n              @for (attachment of attachments(); track $index) {\n                <div class=\"attachment-item\">\n                  <span class=\"attachment-icon\"><i class=\"fa-light fa-paperclip\"></i></span>\n                  <span class=\"attachment-name\">{{ attachment.name }}</span>\n                  <button\n                    type=\"button\"\n                    class=\"attachment-remove\"\n                    (click)=\"removeAttachment($index)\"\n                    [attr.aria-label]=\"'@acorex:chat.actions.remove-attachment' | translate | async\"\n                  >\n                    <i class=\"fa-light fa-xmark\"></i>\n                  </button>\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Typing Indicator -->\n          @if (showTypingIndicator()) {\n            <div class=\"typing-indicator-container\">\n              <span class=\"typing-indicator\">{{ '@acorex:chat.status.someone-typing' | translate | async }}</span>\n            </div>\n          }\n        }\n      </div>\n    }\n\n    <!-- Popover for emoji/sticker picker -->\n    @if (emojiPopoverTarget()) {\n      <ax-popover\n        #emojiPopover\n        [target]=\"emojiPopoverTarget()\"\n        [openOn]=\"'manual'\"\n        [closeOn]=\"'clickOut'\"\n        [placement]=\"'top-start'\"\n        (onClosed)=\"onEmojiPopoverClosed()\"\n      >\n        <div class=\"composer-emoji-popover\">\n          <ax-conversation-registry-component-outlet\n            [componentLoader]=\"composerPopupLoader\"\n            [inputs]=\"getEmojiPopupInputs()\"\n          />\n        </div>\n      </ax-popover>\n    }\n", styles: ["@layer properties;@layer components{ax-conversation-composer{display:block;width:100%}ax-conversation-composer .ax-conversation-composer-banner{display:flex;min-height:2.75rem;align-items:stretch;gap:calc(var(--spacing, .25rem) * 0);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-composer .ax-conversation-composer-banner__accent{width:3px;flex-shrink:0;border-start-end-radius:var(--radius-sm, .25rem);border-end-end-radius:var(--radius-sm, .25rem);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__accent{background-color:rgba(var(--ax-sys-color-secondary-500))}ax-conversation-composer .ax-conversation-composer-banner__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer .ax-conversation-composer-banner__icon{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600));background:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__icon{color:rgba(var(--ax-sys-color-secondary-600));background:rgba(var(--ax-sys-color-secondary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner__body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-composer .ax-conversation-composer-banner__body--clickable{cursor:pointer;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__body--clickable:hover{opacity:.85}}ax-conversation-composer .ax-conversation-composer-banner__label{font-size:.6875rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-600));text-transform:uppercase}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__label{color:rgba(var(--ax-sys-color-secondary-600))}ax-conversation-composer .ax-conversation-composer-banner__preview{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);overflow:hidden;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:.88}ax-conversation-composer .ax-conversation-composer-banner__preview i{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .ax-conversation-composer-banner__close{margin-inline-end:calc(var(--spacing, .25rem) * 1.5);display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;align-self:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.55);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__close:hover{color:rgba(var(--ax-sys-color-on-surface));background:rgba(var(--ax-sys-color-on-surface),.06)}}ax-conversation-composer .ax-conversation-composer-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .emoji-icon{flex-shrink:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-input-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right{display:flex;align-items:center}ax-conversation-composer .composer-input-wrapper{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-composer .composer-input-wrapper .ax-editor-container{padding:calc(var(--spacing, .25rem) * 0)}ax-conversation-composer .composer-input{max-height:120px;min-height:calc(var(--spacing, .25rem) * 10);width:100%;resize:none;border-radius:1.25rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-outline-style: none;outline-style:none;transition:border-color .2s}ax-conversation-composer .composer-input:focus{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .action-button{position:relative;display:flex;height:calc(var(--spacing, .25rem) * 10);width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));transition:all .2s}@media(hover:hover){ax-conversation-composer .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-composer .action-button:disabled{cursor:not-allowed;opacity:50%}ax-conversation-composer .action-send{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}@media(hover:hover){ax-conversation-composer .action-send:hover:not(:disabled){background-color:rgba(var(--ax-sys-color-primary-600))}}ax-conversation-composer .send-icon{position:relative;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));inset-inline-start:-1px}ax-conversation-composer .action-voice{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-attachments{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-composer .attachment-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-conversation-composer .attachment-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-composer .attachment-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-composer .attachment-remove{display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:background .2s}@media(hover:hover){ax-conversation-composer .attachment-remove:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}}ax-conversation-composer .typing-indicator-container{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .action-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1);display:flex;height:calc(var(--spacing, .25rem) * 4);min-width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-surface));padding-inline:calc(var(--spacing, .25rem) * 1);font-size:.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-primary-surface))}ax-conversation-composer .composer-emoji-popover{width:100%;max-width:var(--container-md, 28rem);max-height:31.25rem}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-tracking: initial;--tw-leading: initial;--tw-outline-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs"] }, { kind: "ngmodule", type: FormsModule }, { 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: AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXCommonModule }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerComponent, decorators: [{
             type: Component,
@@ -5712,7 +5712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXPopoverComponent,
                         AXDropdownPanelComponent,
                         AXTranslationModule,
-                    ], template: "    @if (activeConversation()) {\n      <div class=\"composer\">\n        <!-- Full-Width Component Mode -->\n        @if (activeComponent()) {\n          <div class=\"composer-component-fullwidth\">\n            <ax-conversation-registry-component-outlet\n              [component]=\"activeComponent()!.component\"\n              [componentLoader]=\"activeComponent()!.componentLoader\"\n              [inputs]=\"getComponentInputs()\"\n            />\n          </div>\n        } @else {\n          <!-- Normal Composer Mode -->\n          <!-- Edit/Reply Banner -->\n          @if (editingMessage() || replyingToMessage()) {\n            <div\n              class=\"ax-conversation-composer-banner\"\n              [class.ax-conversation-composer-banner--edit]=\"!!editingMessage()\"\n              [class.ax-conversation-composer-banner--reply]=\"!!replyingToMessage()\"\n            >\n              <div class=\"ax-conversation-composer-banner__accent\" aria-hidden=\"true\"></div>\n              @if (editingMessage()) {\n                <div class=\"ax-conversation-composer-banner__content\">\n                  <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n                    ><i class=\"fa-light fa-pen-to-square\"></i\n                  ></span>\n                  <div class=\"ax-conversation-composer-banner__body\">\n                    <span class=\"ax-conversation-composer-banner__label\">{{\n                      '@acorex:chat.composer.editing-message' | translate | async\n                    }}</span>\n                    @if (getEditingPreview(); as preview) {\n                      <span class=\"ax-conversation-composer-banner__preview\">\n                        @if (preview.type !== 'text') {\n                          <i [class]=\"preview.icon\"></i>\n                        }\n                        {{ getComposerPreviewLabel(preview) }}\n                      </span>\n                    }\n                  </div>\n                </div>\n              } @else if (replyingToMessage()) {\n                <div class=\"ax-conversation-composer-banner__content\">\n                  <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n                    ><i class=\"fa-light fa-reply\"></i\n                  ></span>\n                  <div\n                    class=\"ax-conversation-composer-banner__body ax-conversation-composer-banner__body--clickable\"\n                    (click)=\"onReplyPreviewClick()\"\n                  >\n                    <span class=\"ax-conversation-composer-banner__label\">\n                      {{ '@acorex:chat.composer.replying-to' | translate | async }} {{ getReplyingSenderName() }}\n                    </span>\n                    @if (getReplyingPreview(); as preview) {\n                      <span class=\"ax-conversation-composer-banner__preview\">\n                        @if (preview.type !== 'text') {\n                          <i [class]=\"preview.icon\"></i>\n                        }\n                        {{ getComposerPreviewLabel(preview) }}\n                      </span>\n                    }\n                  </div>\n                </div>\n              }\n              <button\n                type=\"button\"\n                class=\"ax-conversation-composer-banner__close\"\n                (click)=\"cancelEditReply()\"\n                [attr.aria-label]=\"'@acorex:chat.actions.cancel' | translate | async\"\n              >\n                <i class=\"fa-light fa-xmark\"></i>\n              </button>\n            </div>\n          }\n\n          <!-- Input Area -->\n          <div class=\"composer-input-container\">\n            <!-- Left Actions -->\n            <div class=\"composer-actions-left\">\n              @for (action of leftInlineActions(); track action.id) {\n                <button\n                  type=\"button\"\n                  class=\"action-button\"\n                  #leftActionButton\n                  (click)=\"onActionClick(action.id, $event)\"\n                  [attr.aria-label]=\"getActionLabel(action)\"\n                  [disabled]=\"!isActionEnabled(action)\"\n                  [class]=\"action.className\"\n                >\n                  <i [class]=\"action.icon\"></i>\n                  @if (action.badge) {\n                    <span class=\"action-badge\">{{ action.badge }}</span>\n                  }\n                </button>\n              }\n\n              <!-- Menu Actions Dropdown -->\n              @if (leftMenuActions().length > 0) {\n                <ax-button color=\"primary\" look=\"outline\">\n                  <i class=\"fa-light fa-ellipsis\"></i>\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      @for (action of leftMenuActions(); track action.id) {\n                        <ax-button-item\n                          [text]=\"getActionLabel(action)\"\n                          (click)=\"onActionClick(action.id)\"\n                          [disabled]=\"!isActionEnabled(action)\"\n                        >\n                          <ax-prefix>\n                            <i [class]=\"action.icon\"></i>\n                          </ax-prefix>\n                        </ax-button-item>\n                      }\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-button>\n              }\n            </div>\n\n            <!-- Text Input -->\n            <div class=\"composer-input-wrapper\">\n              <ax-text-area\n                #inputElement\n                [(ngModel)]=\"draftText\"\n                (onKeyDown)=\"onKeyDown($event)\"\n                (onValueChanged)=\"onInput()\"\n                [placeholder]=\"placeholder()\"\n                (onKeyDown)=\"onEnter($event)\"\n                [rows]=\"inputRows()\"\n              ></ax-text-area>\n            </div>\n\n            <!-- Right Actions -->\n            <div class=\"composer-actions-right\">\n              @if (draftText().trim().length === 0 && !attachments().length) {\n                <!-- Show action buttons when empty -->\n                @for (action of rightInlineActions(); track action.id) {\n                  <button\n                    type=\"button\"\n                    class=\"action-button\"\n                    [class.action-voice]=\"action.id === 'voice-recording'\"\n                    (click)=\"onActionClick(action.id)\"\n                    [attr.aria-label]=\"getActionLabel(action)\"\n                    [disabled]=\"!isActionEnabled(action)\"\n                    [class]=\"action.className\"\n                    [attr.axUploaderBrowseHandle]=\"action.id === 'attach' ? '' : null\"\n                  >\n                    <i [class]=\"action.icon\"></i>\n                    @if (action.badge) {\n                      <span class=\"action-badge\">{{ action.badge }}</span>\n                    }\n                  </button>\n                }\n\n                <!-- Menu Actions Dropdown -->\n                @if (rightMenuActions().length > 0) {\n                  <ax-button look=\"blank\">\n                    <i class=\"fa-light fa-ellipsis-vertical\"></i>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        @for (action of rightMenuActions(); track action.id) {\n                          <ax-button-item\n                            [text]=\"getActionLabel(action)\"\n                            (click)=\"onActionClick(action.id)\"\n                            [disabled]=\"!isActionEnabled(action)\"\n                          >\n                            <ax-prefix>\n                              <i [class]=\"action.icon\"></i>\n                            </ax-prefix>\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    </ax-dropdown-panel>\n                  </ax-button>\n                }\n              } @else {\n                <!-- Show send/save button when has content -->\n                <button\n                  type=\"button\"\n                  class=\"action-button action-send\"\n                  (click)=\"onSendClick()\"\n                  [disabled]=\"!canSend()\"\n                  [attr.aria-label]=\"\n                    editingMessage()\n                      ? ('@acorex:chat.actions.save' | translate | async)\n                      : ('@acorex:chat.actions.send' | translate | async)\n                  \"\n                >\n                  <i\n                    [class]=\"editingMessage() ? 'send-icon fa-light fa-check' : 'send-icon fa-light fa-paper-plane'\"\n                  ></i>\n                </button>\n              }\n            </div>\n          </div>\n\n          <!-- Attachments Preview -->\n          @if (attachments().length > 0) {\n            <div class=\"composer-attachments\">\n              @for (attachment of attachments(); track $index) {\n                <div class=\"attachment-item\">\n                  <span class=\"attachment-icon\"><i class=\"fa-light fa-paperclip\"></i></span>\n                  <span class=\"attachment-name\">{{ attachment.name }}</span>\n                  <button\n                    type=\"button\"\n                    class=\"attachment-remove\"\n                    (click)=\"removeAttachment($index)\"\n                    [attr.aria-label]=\"'@acorex:chat.actions.remove-attachment' | translate | async\"\n                  >\n                    <i class=\"fa-light fa-xmark\"></i>\n                  </button>\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Typing Indicator -->\n          @if (showTypingIndicator()) {\n            <div class=\"typing-indicator-container\">\n              <span class=\"typing-indicator\">{{ '@acorex:chat.status.someone-typing' | translate | async }}</span>\n            </div>\n          }\n        }\n      </div>\n    }\n\n    <!-- Popover for emoji/sticker picker -->\n    @if (emojiPopoverTarget()) {\n      <ax-popover\n        #emojiPopover\n        [target]=\"emojiPopoverTarget()\"\n        [openOn]=\"'manual'\"\n        [closeOn]=\"'clickOut'\"\n        [placement]=\"'top-start'\"\n        (onClosed)=\"onEmojiPopoverClosed()\"\n      >\n        <div class=\"composer-emoji-popover\">\n          <ax-conversation-registry-component-outlet\n            [componentLoader]=\"composerPopupLoader\"\n            [inputs]=\"getEmojiPopupInputs()\"\n          />\n        </div>\n      </ax-popover>\n    }\n", styles: ["@layer properties;@layer components{ax-conversation-composer{display:block;width:100%}ax-conversation-composer .ax-conversation-composer-banner{display:flex;min-height:2.75rem;align-items:stretch;gap:calc(var(--spacing, .25rem) * 0);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-composer .ax-conversation-composer-banner__accent{width:3px;flex-shrink:0;border-start-end-radius:var(--radius-sm, .25rem);border-end-end-radius:var(--radius-sm, .25rem);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__accent{background-color:rgba(var(--ax-sys-color-secondary-500))}ax-conversation-composer .ax-conversation-composer-banner__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer .ax-conversation-composer-banner__icon{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600));background:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__icon{color:rgba(var(--ax-sys-color-secondary-600));background:rgba(var(--ax-sys-color-secondary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner__body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-composer .ax-conversation-composer-banner__body--clickable{cursor:pointer;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__body--clickable:hover{opacity:.85}}ax-conversation-composer .ax-conversation-composer-banner__label{font-size:.6875rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-600));text-transform:uppercase}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__label{color:rgba(var(--ax-sys-color-secondary-600))}ax-conversation-composer .ax-conversation-composer-banner__preview{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);overflow:hidden;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:.88}ax-conversation-composer .ax-conversation-composer-banner__preview i{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .ax-conversation-composer-banner__close{margin-inline-end:calc(var(--spacing, .25rem) * 1.5);display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;align-self:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.55);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__close:hover{color:rgba(var(--ax-sys-color-on-surface));background:rgba(var(--ax-sys-color-on-surface),.06)}}ax-conversation-composer .ax-conversation-composer-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .emoji-icon{flex-shrink:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-input-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right{display:flex;align-items:center}ax-conversation-composer .composer-input-wrapper{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-composer .composer-input{max-height:120px;min-height:calc(var(--spacing, .25rem) * 10);width:100%;resize:none;border-radius:1.25rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-outline-style: none;outline-style:none;transition:border-color .2s}ax-conversation-composer .composer-input:focus{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .action-button{position:relative;display:flex;height:calc(var(--spacing, .25rem) * 10);width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));transition:all .2s}@media(hover:hover){ax-conversation-composer .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-composer .action-button:disabled{cursor:not-allowed;opacity:50%}ax-conversation-composer .action-send{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}@media(hover:hover){ax-conversation-composer .action-send:hover:not(:disabled){background-color:rgba(var(--ax-sys-color-primary-600))}}ax-conversation-composer .send-icon{position:relative;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));inset-inline-start:-1px}ax-conversation-composer .action-voice{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-attachments{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-composer .attachment-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-conversation-composer .attachment-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-composer .attachment-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-composer .attachment-remove{display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:background .2s}@media(hover:hover){ax-conversation-composer .attachment-remove:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}}ax-conversation-composer .typing-indicator-container{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .action-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1);display:flex;height:calc(var(--spacing, .25rem) * 4);min-width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-surface));padding-inline:calc(var(--spacing, .25rem) * 1);font-size:.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-primary-surface))}ax-conversation-composer .composer-emoji-popover{width:100%;max-width:var(--container-md, 28rem);max-height:31.25rem}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-tracking: initial;--tw-leading: initial;--tw-outline-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "    @if (activeConversation()) {\n      <div class=\"composer\">\n        <!-- Full-Width Component Mode -->\n        @if (activeComponent()) {\n          <div class=\"composer-component-fullwidth\">\n            <ax-conversation-registry-component-outlet\n              [component]=\"activeComponent()!.component\"\n              [componentLoader]=\"activeComponent()!.componentLoader\"\n              [inputs]=\"getComponentInputs()\"\n            />\n          </div>\n        } @else {\n          <!-- Normal Composer Mode -->\n          <!-- Edit/Reply Banner -->\n          @if (editingMessage() || replyingToMessage()) {\n            <div\n              class=\"ax-conversation-composer-banner\"\n              [class.ax-conversation-composer-banner--edit]=\"!!editingMessage()\"\n              [class.ax-conversation-composer-banner--reply]=\"!!replyingToMessage()\"\n            >\n              <div class=\"ax-conversation-composer-banner__accent\" aria-hidden=\"true\"></div>\n              @if (editingMessage()) {\n                <div class=\"ax-conversation-composer-banner__content\">\n                  <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n                    ><i class=\"fa-light fa-pen-to-square\"></i\n                  ></span>\n                  <div class=\"ax-conversation-composer-banner__body\">\n                    <span class=\"ax-conversation-composer-banner__label\">{{\n                      '@acorex:chat.composer.editing-message' | translate | async\n                    }}</span>\n                    @if (getEditingPreview(); as preview) {\n                      <span class=\"ax-conversation-composer-banner__preview\">\n                        @if (preview.type !== 'text') {\n                          <i [class]=\"preview.icon\"></i>\n                        }\n                        {{ getComposerPreviewLabel(preview) }}\n                      </span>\n                    }\n                  </div>\n                </div>\n              } @else if (replyingToMessage()) {\n                <div class=\"ax-conversation-composer-banner__content\">\n                  <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n                    ><i class=\"fa-light fa-reply\"></i\n                  ></span>\n                  <div\n                    class=\"ax-conversation-composer-banner__body ax-conversation-composer-banner__body--clickable\"\n                    (click)=\"onReplyPreviewClick()\"\n                  >\n                    <span class=\"ax-conversation-composer-banner__label\">\n                      {{ '@acorex:chat.composer.replying-to' | translate | async }} {{ getReplyingSenderName() }}\n                    </span>\n                    @if (getReplyingPreview(); as preview) {\n                      <span class=\"ax-conversation-composer-banner__preview\">\n                        @if (preview.type !== 'text') {\n                          <i [class]=\"preview.icon\"></i>\n                        }\n                        {{ getComposerPreviewLabel(preview) }}\n                      </span>\n                    }\n                  </div>\n                </div>\n              }\n              <button\n                type=\"button\"\n                class=\"ax-conversation-composer-banner__close\"\n                (click)=\"cancelEditReply()\"\n                [attr.aria-label]=\"'@acorex:chat.actions.cancel' | translate | async\"\n              >\n                <i class=\"fa-light fa-xmark\"></i>\n              </button>\n            </div>\n          }\n\n          <!-- Input Area -->\n          <div class=\"composer-input-container\">\n            <!-- Left Actions -->\n            <div class=\"composer-actions-left\">\n              @for (action of leftInlineActions(); track action.id) {\n                <button\n                  type=\"button\"\n                  class=\"action-button\"\n                  #leftActionButton\n                  (click)=\"onActionClick(action.id, $event)\"\n                  [attr.aria-label]=\"getActionLabel(action)\"\n                  [disabled]=\"!isActionEnabled(action)\"\n                  [class]=\"action.className\"\n                >\n                  <i [class]=\"action.icon\"></i>\n                  @if (action.badge) {\n                    <span class=\"action-badge\">{{ action.badge }}</span>\n                  }\n                </button>\n              }\n\n              <!-- Menu Actions Dropdown -->\n              @if (leftMenuActions().length > 0) {\n                <ax-button color=\"primary\" look=\"outline\">\n                  <i class=\"fa-light fa-ellipsis\"></i>\n                  <ax-dropdown-panel>\n                    <ax-button-item-list>\n                      @for (action of leftMenuActions(); track action.id) {\n                        <ax-button-item\n                          [text]=\"getActionLabel(action)\"\n                          (click)=\"onActionClick(action.id)\"\n                          [disabled]=\"!isActionEnabled(action)\"\n                        >\n                          <ax-prefix>\n                            <i [class]=\"action.icon\"></i>\n                          </ax-prefix>\n                        </ax-button-item>\n                      }\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                </ax-button>\n              }\n            </div>\n\n            <!-- Text Input -->\n            <div class=\"composer-input-wrapper\">\n              <ax-text-area\n                #inputElement\n                [(ngModel)]=\"draftText\"\n                (onKeyDown)=\"onKeyDown($event)\"\n                (onValueChanged)=\"onInput()\"\n                [placeholder]=\"placeholder()\"\n                (onKeyDown)=\"onEnter($event)\"\n                [rows]=\"inputRows()\"\n              ></ax-text-area>\n            </div>\n\n            <!-- Right Actions -->\n            <div class=\"composer-actions-right\">\n              @if (draftText().trim().length === 0 && !attachments().length) {\n                <!-- Show action buttons when empty -->\n                @for (action of rightInlineActions(); track action.id) {\n                  <button\n                    type=\"button\"\n                    class=\"action-button\"\n                    [class.action-voice]=\"action.id === 'voice-recording'\"\n                    (click)=\"onActionClick(action.id)\"\n                    [attr.aria-label]=\"getActionLabel(action)\"\n                    [disabled]=\"!isActionEnabled(action)\"\n                    [class]=\"action.className\"\n                    [attr.axUploaderBrowseHandle]=\"action.id === 'attach' ? '' : null\"\n                  >\n                    <i [class]=\"action.icon\"></i>\n                    @if (action.badge) {\n                      <span class=\"action-badge\">{{ action.badge }}</span>\n                    }\n                  </button>\n                }\n\n                <!-- Menu Actions Dropdown -->\n                @if (rightMenuActions().length > 0) {\n                  <ax-button look=\"blank\">\n                    <i class=\"fa-light fa-ellipsis-vertical\"></i>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        @for (action of rightMenuActions(); track action.id) {\n                          <ax-button-item\n                            [text]=\"getActionLabel(action)\"\n                            (click)=\"onActionClick(action.id)\"\n                            [disabled]=\"!isActionEnabled(action)\"\n                          >\n                            <ax-prefix>\n                              <i [class]=\"action.icon\"></i>\n                            </ax-prefix>\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    </ax-dropdown-panel>\n                  </ax-button>\n                }\n              } @else {\n                <!-- Show send/save button when has content -->\n                <button\n                  type=\"button\"\n                  class=\"action-button action-send\"\n                  (click)=\"onSendClick()\"\n                  [disabled]=\"!canSend()\"\n                  [attr.aria-label]=\"\n                    editingMessage()\n                      ? ('@acorex:chat.actions.save' | translate | async)\n                      : ('@acorex:chat.actions.send' | translate | async)\n                  \"\n                >\n                  <i\n                    [class]=\"editingMessage() ? 'send-icon fa-light fa-check' : 'send-icon fa-light fa-paper-plane'\"\n                  ></i>\n                </button>\n              }\n            </div>\n          </div>\n\n          <!-- Attachments Preview -->\n          @if (attachments().length > 0) {\n            <div class=\"composer-attachments\">\n              @for (attachment of attachments(); track $index) {\n                <div class=\"attachment-item\">\n                  <span class=\"attachment-icon\"><i class=\"fa-light fa-paperclip\"></i></span>\n                  <span class=\"attachment-name\">{{ attachment.name }}</span>\n                  <button\n                    type=\"button\"\n                    class=\"attachment-remove\"\n                    (click)=\"removeAttachment($index)\"\n                    [attr.aria-label]=\"'@acorex:chat.actions.remove-attachment' | translate | async\"\n                  >\n                    <i class=\"fa-light fa-xmark\"></i>\n                  </button>\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Typing Indicator -->\n          @if (showTypingIndicator()) {\n            <div class=\"typing-indicator-container\">\n              <span class=\"typing-indicator\">{{ '@acorex:chat.status.someone-typing' | translate | async }}</span>\n            </div>\n          }\n        }\n      </div>\n    }\n\n    <!-- Popover for emoji/sticker picker -->\n    @if (emojiPopoverTarget()) {\n      <ax-popover\n        #emojiPopover\n        [target]=\"emojiPopoverTarget()\"\n        [openOn]=\"'manual'\"\n        [closeOn]=\"'clickOut'\"\n        [placement]=\"'top-start'\"\n        (onClosed)=\"onEmojiPopoverClosed()\"\n      >\n        <div class=\"composer-emoji-popover\">\n          <ax-conversation-registry-component-outlet\n            [componentLoader]=\"composerPopupLoader\"\n            [inputs]=\"getEmojiPopupInputs()\"\n          />\n        </div>\n      </ax-popover>\n    }\n", styles: ["@layer properties;@layer components{ax-conversation-composer{display:block;width:100%}ax-conversation-composer .ax-conversation-composer-banner{display:flex;min-height:2.75rem;align-items:stretch;gap:calc(var(--spacing, .25rem) * 0);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-composer .ax-conversation-composer-banner__accent{width:3px;flex-shrink:0;border-start-end-radius:var(--radius-sm, .25rem);border-end-end-radius:var(--radius-sm, .25rem);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__accent{background-color:rgba(var(--ax-sys-color-secondary-500))}ax-conversation-composer .ax-conversation-composer-banner__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer .ax-conversation-composer-banner__icon{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600));background:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__icon{color:rgba(var(--ax-sys-color-secondary-600));background:rgba(var(--ax-sys-color-secondary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner__body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-composer .ax-conversation-composer-banner__body--clickable{cursor:pointer;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__body--clickable:hover{opacity:.85}}ax-conversation-composer .ax-conversation-composer-banner__label{font-size:.6875rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-600));text-transform:uppercase}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__label{color:rgba(var(--ax-sys-color-secondary-600))}ax-conversation-composer .ax-conversation-composer-banner__preview{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);overflow:hidden;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:.88}ax-conversation-composer .ax-conversation-composer-banner__preview i{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .ax-conversation-composer-banner__close{margin-inline-end:calc(var(--spacing, .25rem) * 1.5);display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;align-self:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.55);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__close:hover{color:rgba(var(--ax-sys-color-on-surface));background:rgba(var(--ax-sys-color-on-surface),.06)}}ax-conversation-composer .ax-conversation-composer-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .emoji-icon{flex-shrink:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-input-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right{display:flex;align-items:center}ax-conversation-composer .composer-input-wrapper{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-composer .composer-input-wrapper .ax-editor-container{padding:calc(var(--spacing, .25rem) * 0)}ax-conversation-composer .composer-input{max-height:120px;min-height:calc(var(--spacing, .25rem) * 10);width:100%;resize:none;border-radius:1.25rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-outline-style: none;outline-style:none;transition:border-color .2s}ax-conversation-composer .composer-input:focus{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .action-button{position:relative;display:flex;height:calc(var(--spacing, .25rem) * 10);width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));transition:all .2s}@media(hover:hover){ax-conversation-composer .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}}ax-conversation-composer .action-button:disabled{cursor:not-allowed;opacity:50%}ax-conversation-composer .action-send{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}@media(hover:hover){ax-conversation-composer .action-send:hover:not(:disabled){background-color:rgba(var(--ax-sys-color-primary-600))}}ax-conversation-composer .send-icon{position:relative;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));inset-inline-start:-1px}ax-conversation-composer .action-voice{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-attachments{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-composer .attachment-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-conversation-composer .attachment-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-composer .attachment-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-composer .attachment-remove{display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:background .2s}@media(hover:hover){ax-conversation-composer .attachment-remove:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}}ax-conversation-composer .typing-indicator-container{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .action-badge{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:calc(var(--spacing, .25rem) * 1);display:flex;height:calc(var(--spacing, .25rem) * 4);min-width:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-surface));padding-inline:calc(var(--spacing, .25rem) * 1);font-size:.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-primary-surface))}ax-conversation-composer .composer-emoji-popover{width:100%;max-width:var(--container-md, 28rem);max-height:31.25rem}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-tracking: initial;--tw-leading: initial;--tw-outline-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { textAreaRef: [{ type: i0.ViewChild, args: ['inputElement', { ...{ read: AXTextAreaComponent }, isSignal: true }] }], messageSent: [{ type: i0.Output, args: ["messageSent"] }], emojiClick: [{ type: i0.Output, args: ["emojiClick"] }], attachClick: [{ type: i0.Output, args: ["attachClick"] }], voiceClick: [{ type: i0.Output, args: ["voiceClick"] }], emojiPopoverRef: [{ type: i0.ViewChild, args: ['emojiPopover', { isSignal: true }] }] } });
 
 /**