@acorex/components 22.1.0-next.6 → 22.1.0-next.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/fesm2022/acorex-components-conversation.mjs +166 -91
  2. package/fesm2022/acorex-components-conversation.mjs.map +1 -1
  3. package/fesm2022/acorex-components-lookup.mjs +14 -19
  4. package/fesm2022/acorex-components-lookup.mjs.map +1 -1
  5. package/package.json +3 -3
  6. package/types/acorex-components-conversation.d.ts +74 -48
package/fesm2022/acorex-components-conversation.mjs CHANGED
@@ -14,7 +14,6 @@ import * as i3 from '@acorex/core/translation';
14
14
  import { translateSync, AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
15
15
  import { Subject, BehaviorSubject, takeUntil, catchError, EMPTY, throttleTime, debounceTime, distinctUntilChanged, Observable, filter, firstValueFrom } from 'rxjs';
16
16
  import { AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent } from '@acorex/components/button';
17
- import { AXDropdownPanelComponent } from '@acorex/components/dropdown';
18
17
  import { AXPopoverComponent } from '@acorex/components/popover';
19
18
  import { AXTextAreaComponent } from '@acorex/components/text-area';
20
19
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -23,6 +22,7 @@ import { FormsModule } from '@angular/forms';
23
22
  import { AXLoadingComponent } from '@acorex/components/loading';
24
23
  import { AXResizableDirective } from '@acorex/cdk/resizable';
25
24
  import { AXToastService } from '@acorex/components/toast';
25
+ import { AXDropdownPanelComponent } from '@acorex/components/dropdown';
26
26
  import * as i2$1 from '@acorex/components/label';
27
27
  import { AXLabelComponent, AXLabelModule } from '@acorex/components/label';
28
28
  import { AXAvatarComponent } from '@acorex/components/avatar';
@@ -2236,28 +2236,31 @@ class AXConversationComposerActionRegistry {
2236
2236
  this.composerTabRegistry = inject(AXConversationComposerTabRegistry);
2237
2237
  /** All registered actions */
2238
2238
  this.actions = this._actions.asReadonly();
2239
- /** Left-side actions sorted by priority */
2240
- this.leftActions = computed(() => [...this._actions()]
2241
- .filter((action) => action.position === 'left')
2239
+ /** Start-side actions sorted by priority */
2240
+ this.startActions = computed(() => [...this._actions()]
2241
+ .filter((action) => action.position === 'start')
2242
2242
  .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0)), /* @ts-ignore */
2243
- ...(ngDevMode ? [{ debugName: "leftActions" }] : /* istanbul ignore next */ []));
2244
- /** Right-side actions sorted by priority */
2245
- this.rightActions = computed(() => [...this._actions()]
2246
- .filter((action) => action.position === 'right')
2243
+ ...(ngDevMode ? [{ debugName: "startActions" }] : /* istanbul ignore next */ []));
2244
+ /** End-side actions sorted by priority */
2245
+ this.endActions = computed(() => [...this._actions()]
2246
+ .filter((action) => action.position === 'end')
2247
2247
  .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0)), /* @ts-ignore */
2248
- ...(ngDevMode ? [{ debugName: "rightActions" }] : /* istanbul ignore next */ []));
2249
- /** Left-side inline actions (location = 'inline' or undefined) */
2250
- this.leftInlineActions = computed(() => this.leftActions().filter((action) => action.location !== 'menu'), /* @ts-ignore */
2251
- ...(ngDevMode ? [{ debugName: "leftInlineActions" }] : /* istanbul ignore next */ []));
2252
- /** Left-side menu actions (location = 'menu') */
2253
- this.leftMenuActions = computed(() => this.leftActions().filter((action) => action.location === 'menu'), /* @ts-ignore */
2254
- ...(ngDevMode ? [{ debugName: "leftMenuActions" }] : /* istanbul ignore next */ []));
2255
- /** Right-side inline actions (location = 'inline' or undefined) */
2256
- this.rightInlineActions = computed(() => this.rightActions().filter((action) => action.location !== 'menu'), /* @ts-ignore */
2257
- ...(ngDevMode ? [{ debugName: "rightInlineActions" }] : /* istanbul ignore next */ []));
2258
- /** Right-side menu actions (location = 'menu') */
2259
- this.rightMenuActions = computed(() => this.rightActions().filter((action) => action.location === 'menu'), /* @ts-ignore */
2260
- ...(ngDevMode ? [{ debugName: "rightMenuActions" }] : /* istanbul ignore next */ []));
2248
+ ...(ngDevMode ? [{ debugName: "endActions" }] : /* istanbul ignore next */ []));
2249
+ /** Start-side inline actions (location = 'inline' or undefined) */
2250
+ this.startInlineActions = computed(() => this.startActions().filter((action) => action.location !== 'menu'), /* @ts-ignore */
2251
+ ...(ngDevMode ? [{ debugName: "startInlineActions" }] : /* istanbul ignore next */ []));
2252
+ /** Start-side menu actions (location = 'menu') — shown in the attachment popup */
2253
+ this.startMenuActions = computed(() => this.startActions().filter((action) => action.location === 'menu'), /* @ts-ignore */
2254
+ ...(ngDevMode ? [{ debugName: "startMenuActions" }] : /* istanbul ignore next */ []));
2255
+ /** End-side inline actions inside the input pill (excludes default action) */
2256
+ this.endInlineActions = computed(() => this.endActions().filter((action) => action.location !== 'menu' && !action.default), /* @ts-ignore */
2257
+ ...(ngDevMode ? [{ debugName: "endInlineActions" }] : /* istanbul ignore next */ []));
2258
+ /** End-side menu actions (location = 'menu') */
2259
+ this.endMenuActions = computed(() => this.endActions().filter((action) => action.location === 'menu'), /* @ts-ignore */
2260
+ ...(ngDevMode ? [{ debugName: "endMenuActions" }] : /* istanbul ignore next */ []));
2261
+ /** The single default end action (voice/send morph button) */
2262
+ this.defaultAction = computed(() => this.endActions().find((action) => action.default), /* @ts-ignore */
2263
+ ...(ngDevMode ? [{ debugName: "defaultAction" }] : /* istanbul ignore next */ []));
2261
2264
  inject(AX_CONVERSATION_FILE_TYPES_READY);
2262
2265
  // Register default actions from individual token
2263
2266
  inject(AX_CONVERSATION_DEFAULT_COMPOSER_ACTIONS, { optional: true })?.forEach((action) => this.register(action));
@@ -2288,6 +2291,10 @@ class AXConversationComposerActionRegistry {
2288
2291
  console.warn(`Composer action "${action.id}" is already registered. Replacing...`);
2289
2292
  this.unregister(action.id);
2290
2293
  }
2294
+ // Only one action may be default
2295
+ if (action.default) {
2296
+ this._actions.update((actions) => actions.map((a) => (a.default && a.id !== action.id ? { ...a, default: undefined } : a)));
2297
+ }
2291
2298
  // Add to registry
2292
2299
  this._actions.update((actions) => [...actions, action]);
2293
2300
  if (action.fileType) {
@@ -2316,7 +2323,7 @@ class AXConversationComposerActionRegistry {
2316
2323
  * Get visible actions for a position
2317
2324
  */
2318
2325
  getVisibleActions(position, context) {
2319
- const actions = position === 'left' ? this.leftActions() : this.rightActions();
2326
+ const actions = position === 'start' ? this.startActions() : this.endActions();
2320
2327
  const hasComposerTabs = this.composerTabRegistry.hasEnabledTabs();
2321
2328
  return actions.filter((action) => {
2322
2329
  if (action.id === 'emoji' && !hasComposerTabs) {
@@ -4760,11 +4767,11 @@ class AXConversationComposerPopupComponent {
4760
4767
  this.onClosed.emit(event);
4761
4768
  }
4762
4769
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4763
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationComposerPopupComponent, isStandalone: true, selector: "ax-conversation-composer-popup", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, onItemSelected: { classPropertyName: "onItemSelected", publicName: "onItemSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", itemSelected: "itemSelected", onClosed: "onClosed" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div\n class=\"composer-popup\"\n [class.composer-popup--single-tab]=\"!hasMultipleTabs()\"\n>\n @if (hasMultipleTabs()) {\n <header class=\"composer-popup__header\">\n <ax-tabs look=\"default\" location=\"top\" [fitParent]=\"true\" (onActiveTabChanged)=\"onTabChange($event)\">\n @for (tab of enabledTabs(); track tab.id) {\n <ax-tab-item\n [text]=\"getTabTitle(tab.id)\"\n [key]=\"tab.id\"\n [active]=\"activeTabId() === tab.id\"\n [attr.aria-label]=\"getTabTitle(tab.id)\"\n [title]=\"getTabTitle(tab.id)\"\n >\n <ax-prefix>\n @if (tab.icon) {\n <i [class]=\"tab.icon\" aria-hidden=\"true\"></i>\n }\n </ax-prefix>\n </ax-tab-item>\n }\n </ax-tabs>\n </header>\n }\n\n <div class=\"composer-popup__content\">\n <ng-container #contentContainer></ng-container>\n </div>\n</div>\n", styles: ["@layer properties;@layer components{.composer-emoji-popover-panel{overflow:hidden;border-radius:.65rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));width:min(22rem,92vw);box-shadow:0 4px 16px #0000001a}.composer-emoji-popover{display:block;width:100%}ax-conversation-composer-popup{display:block;height:100%;width:100%}ax-conversation-composer-popup .composer-popup{display:flex;width:100%;flex-direction:column;overflow:hidden;height:min(22rem,55vh);min-height:18rem}ax-conversation-composer-popup .composer-popup--single-tab .composer-popup__content{padding-top:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer-popup .composer-popup__header{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-top:calc(var(--spacing, .25rem) * 2.5);padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer-popup .composer-popup__header ax-tabs{width:100%}ax-conversation-composer-popup .composer-popup__header ax-tab-item{min-height:calc(var(--spacing, .25rem) * 9);justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer-popup .composer-popup__header ax-tab-item .ax-tab-item-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}ax-conversation-composer-popup .composer-popup__header ax-tab-item ax-prefix{display:flex;align-items:center;justify-content:center}ax-conversation-composer-popup .composer-popup__header ax-tab-item ax-prefix i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-composer-popup .composer-popup__content{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow-x:hidden;overflow-y:auto;padding-inline:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 3);scrollbar-gutter:stable}ax-conversation-composer-popup .composer-popup__content>ng-component{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex-direction:column}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.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: AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
4770
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationComposerPopupComponent, isStandalone: true, selector: "ax-conversation-composer-popup", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, onItemSelected: { classPropertyName: "onItemSelected", publicName: "onItemSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", itemSelected: "itemSelected", onClosed: "onClosed" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div\n class=\"composer-popup\"\n [class.composer-popup--single-tab]=\"!hasMultipleTabs()\"\n>\n @if (hasMultipleTabs()) {\n <header class=\"composer-popup__header\">\n <ax-tabs look=\"default\" location=\"top\" [fitParent]=\"true\" (onActiveTabChanged)=\"onTabChange($event)\">\n @for (tab of enabledTabs(); track tab.id) {\n <ax-tab-item\n [text]=\"getTabTitle(tab.id)\"\n [key]=\"tab.id\"\n [active]=\"activeTabId() === tab.id\"\n [attr.aria-label]=\"getTabTitle(tab.id)\"\n [title]=\"getTabTitle(tab.id)\"\n >\n <ax-prefix>\n @if (tab.icon) {\n <i [class]=\"tab.icon\" aria-hidden=\"true\"></i>\n }\n </ax-prefix>\n </ax-tab-item>\n }\n </ax-tabs>\n </header>\n }\n\n <div class=\"composer-popup__content\">\n <ng-container #contentContainer></ng-container>\n </div>\n</div>\n", styles: ["@layer properties;@layer components{.composer-emoji-popover-panel{overflow:hidden;border-radius:.65rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));width:min(22rem,92vw);box-shadow:0 4px 16px #0000001a}.composer-emoji-popover{display:block;width:100%}ax-conversation-composer-popup{display:block;height:100%;width:100%}ax-conversation-composer-popup .composer-popup{display:flex;width:100%;flex-direction:column;overflow:hidden;height:min(22rem,55vh);min-height:18rem}ax-conversation-composer-popup .composer-popup--single-tab .composer-popup__content{padding-top:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer-popup .composer-popup__header{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-top:calc(var(--spacing, .25rem) * 2.5);padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer-popup .composer-popup__header ax-tabs{width:100%}ax-conversation-composer-popup .composer-popup__header ax-tab-item{min-height:calc(var(--spacing, .25rem) * 9);justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer-popup .composer-popup__header ax-tab-item .ax-tab-item-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}ax-conversation-composer-popup .composer-popup__header ax-tab-item ax-prefix{display:flex;align-items:center;justify-content:center}ax-conversation-composer-popup .composer-popup__header ax-tab-item ax-prefix i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-composer-popup .composer-popup__content{min-height:calc(var(--spacing, .25rem) * 0);width:calc(var(--spacing, .25rem) * 80);flex:1;overflow-x:hidden;overflow-y:auto;padding-inline:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 3);scrollbar-gutter:stable}ax-conversation-composer-popup .composer-popup__content>ng-component{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex-direction:column}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.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: AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
4764
4771
  }
4765
4772
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerPopupComponent, decorators: [{
4766
4773
  type: Component,
4767
- args: [{ selector: 'ax-conversation-composer-popup', encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXDecoratorModule, AXTabsComponent, AXTabItemComponent], template: "<div\n class=\"composer-popup\"\n [class.composer-popup--single-tab]=\"!hasMultipleTabs()\"\n>\n @if (hasMultipleTabs()) {\n <header class=\"composer-popup__header\">\n <ax-tabs look=\"default\" location=\"top\" [fitParent]=\"true\" (onActiveTabChanged)=\"onTabChange($event)\">\n @for (tab of enabledTabs(); track tab.id) {\n <ax-tab-item\n [text]=\"getTabTitle(tab.id)\"\n [key]=\"tab.id\"\n [active]=\"activeTabId() === tab.id\"\n [attr.aria-label]=\"getTabTitle(tab.id)\"\n [title]=\"getTabTitle(tab.id)\"\n >\n <ax-prefix>\n @if (tab.icon) {\n <i [class]=\"tab.icon\" aria-hidden=\"true\"></i>\n }\n </ax-prefix>\n </ax-tab-item>\n }\n </ax-tabs>\n </header>\n }\n\n <div class=\"composer-popup__content\">\n <ng-container #contentContainer></ng-container>\n </div>\n</div>\n", styles: ["@layer properties;@layer components{.composer-emoji-popover-panel{overflow:hidden;border-radius:.65rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));width:min(22rem,92vw);box-shadow:0 4px 16px #0000001a}.composer-emoji-popover{display:block;width:100%}ax-conversation-composer-popup{display:block;height:100%;width:100%}ax-conversation-composer-popup .composer-popup{display:flex;width:100%;flex-direction:column;overflow:hidden;height:min(22rem,55vh);min-height:18rem}ax-conversation-composer-popup .composer-popup--single-tab .composer-popup__content{padding-top:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer-popup .composer-popup__header{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-top:calc(var(--spacing, .25rem) * 2.5);padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer-popup .composer-popup__header ax-tabs{width:100%}ax-conversation-composer-popup .composer-popup__header ax-tab-item{min-height:calc(var(--spacing, .25rem) * 9);justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer-popup .composer-popup__header ax-tab-item .ax-tab-item-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}ax-conversation-composer-popup .composer-popup__header ax-tab-item ax-prefix{display:flex;align-items:center;justify-content:center}ax-conversation-composer-popup .composer-popup__header ax-tab-item ax-prefix i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-composer-popup .composer-popup__content{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow-x:hidden;overflow-y:auto;padding-inline:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 3);scrollbar-gutter:stable}ax-conversation-composer-popup .composer-popup__content>ng-component{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex-direction:column}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
4774
+ args: [{ selector: 'ax-conversation-composer-popup', encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXDecoratorModule, AXTabsComponent, AXTabItemComponent], template: "<div\n class=\"composer-popup\"\n [class.composer-popup--single-tab]=\"!hasMultipleTabs()\"\n>\n @if (hasMultipleTabs()) {\n <header class=\"composer-popup__header\">\n <ax-tabs look=\"default\" location=\"top\" [fitParent]=\"true\" (onActiveTabChanged)=\"onTabChange($event)\">\n @for (tab of enabledTabs(); track tab.id) {\n <ax-tab-item\n [text]=\"getTabTitle(tab.id)\"\n [key]=\"tab.id\"\n [active]=\"activeTabId() === tab.id\"\n [attr.aria-label]=\"getTabTitle(tab.id)\"\n [title]=\"getTabTitle(tab.id)\"\n >\n <ax-prefix>\n @if (tab.icon) {\n <i [class]=\"tab.icon\" aria-hidden=\"true\"></i>\n }\n </ax-prefix>\n </ax-tab-item>\n }\n </ax-tabs>\n </header>\n }\n\n <div class=\"composer-popup__content\">\n <ng-container #contentContainer></ng-container>\n </div>\n</div>\n", styles: ["@layer properties;@layer components{.composer-emoji-popover-panel{overflow:hidden;border-radius:.65rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));width:min(22rem,92vw);box-shadow:0 4px 16px #0000001a}.composer-emoji-popover{display:block;width:100%}ax-conversation-composer-popup{display:block;height:100%;width:100%}ax-conversation-composer-popup .composer-popup{display:flex;width:100%;flex-direction:column;overflow:hidden;height:min(22rem,55vh);min-height:18rem}ax-conversation-composer-popup .composer-popup--single-tab .composer-popup__content{padding-top:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer-popup .composer-popup__header{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-top:calc(var(--spacing, .25rem) * 2.5);padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer-popup .composer-popup__header ax-tabs{width:100%}ax-conversation-composer-popup .composer-popup__header ax-tab-item{min-height:calc(var(--spacing, .25rem) * 9);justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer-popup .composer-popup__header ax-tab-item .ax-tab-item-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}ax-conversation-composer-popup .composer-popup__header ax-tab-item ax-prefix{display:flex;align-items:center;justify-content:center}ax-conversation-composer-popup .composer-popup__header ax-tab-item ax-prefix i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-composer-popup .composer-popup__content{min-height:calc(var(--spacing, .25rem) * 0);width:calc(var(--spacing, .25rem) * 80);flex:1;overflow-x:hidden;overflow-y:auto;padding-inline:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 3);scrollbar-gutter:stable}ax-conversation-composer-popup .composer-popup__content>ng-component{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex-direction:column}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
4768
4775
  }], ctorParameters: () => [], propDecorators: { contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { ...{
4769
4776
  read: ViewContainerRef,
4770
4777
  }, isSignal: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], onItemSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "onItemSelected", required: false }] }], onClosed: [{ type: i0.Output, args: ["onClosed"] }] } });
@@ -5341,50 +5348,58 @@ class AXConversationComposerService {
5341
5348
  };
5342
5349
  }, /* @ts-ignore */
5343
5350
  ...(ngDevMode ? [{ debugName: "actionContext" }] : /* istanbul ignore next */ []));
5344
- /** Left actions from registry */
5345
- this.leftActions = computed(() => {
5351
+ /** Start actions from registry */
5352
+ this.startActions = computed(() => {
5346
5353
  const context = this.actionContext();
5347
5354
  return this.registry.composerActions
5348
- .getVisibleActions('left', context)
5355
+ .getVisibleActions('start', context)
5349
5356
  .sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
5350
5357
  }, /* @ts-ignore */
5351
- ...(ngDevMode ? [{ debugName: "leftActions" }] : /* istanbul ignore next */ []));
5352
- /** Right actions from registry */
5353
- this.rightActions = computed(() => {
5358
+ ...(ngDevMode ? [{ debugName: "startActions" }] : /* istanbul ignore next */ []));
5359
+ /** End actions from registry */
5360
+ this.endActions = computed(() => {
5354
5361
  const context = this.actionContext();
5355
5362
  return this.registry.composerActions
5356
- .getVisibleActions('right', context)
5363
+ .getVisibleActions('end', context)
5357
5364
  .sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
5358
5365
  }, /* @ts-ignore */
5359
- ...(ngDevMode ? [{ debugName: "rightActions" }] : /* istanbul ignore next */ []));
5360
- /** Left inline actions (location = 'inline' or undefined) */
5361
- this.leftInlineActions = computed(() => {
5362
- return this.leftActions()
5366
+ ...(ngDevMode ? [{ debugName: "endActions" }] : /* istanbul ignore next */ []));
5367
+ /** Start inline actions (location = 'inline' or undefined) */
5368
+ this.startInlineActions = computed(() => {
5369
+ return this.startActions()
5363
5370
  .filter((action) => action.location !== 'menu')
5364
5371
  .sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
5365
5372
  }, /* @ts-ignore */
5366
- ...(ngDevMode ? [{ debugName: "leftInlineActions" }] : /* istanbul ignore next */ []));
5367
- /** Left menu actions (location = 'menu') */
5368
- this.leftMenuActions = computed(() => {
5369
- return this.leftActions()
5373
+ ...(ngDevMode ? [{ debugName: "startInlineActions" }] : /* istanbul ignore next */ []));
5374
+ /** Start menu actions — shown in the attachment popup */
5375
+ this.startMenuActions = computed(() => {
5376
+ return this.startActions()
5370
5377
  .filter((action) => action.location === 'menu')
5371
5378
  .sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
5372
5379
  }, /* @ts-ignore */
5373
- ...(ngDevMode ? [{ debugName: "leftMenuActions" }] : /* istanbul ignore next */ []));
5374
- /** Right inline actions (location = 'inline' or undefined) */
5375
- this.rightInlineActions = computed(() => {
5376
- return this.rightActions()
5377
- .filter((action) => action.location !== 'menu')
5380
+ ...(ngDevMode ? [{ debugName: "startMenuActions" }] : /* istanbul ignore next */ []));
5381
+ /** End inline actions inside the input pill (excludes default action) */
5382
+ this.endInlineActions = computed(() => {
5383
+ return this.endActions()
5384
+ .filter((action) => action.location !== 'menu' && !action.default)
5378
5385
  .sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
5379
5386
  }, /* @ts-ignore */
5380
- ...(ngDevMode ? [{ debugName: "rightInlineActions" }] : /* istanbul ignore next */ []));
5381
- /** Right menu actions (location = 'menu') */
5382
- this.rightMenuActions = computed(() => {
5383
- return this.rightActions()
5387
+ ...(ngDevMode ? [{ debugName: "endInlineActions" }] : /* istanbul ignore next */ []));
5388
+ /** End menu actions (location = 'menu') */
5389
+ this.endMenuActions = computed(() => {
5390
+ return this.endActions()
5384
5391
  .filter((action) => action.location === 'menu')
5385
5392
  .sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
5386
5393
  }, /* @ts-ignore */
5387
- ...(ngDevMode ? [{ debugName: "rightMenuActions" }] : /* istanbul ignore next */ []));
5394
+ ...(ngDevMode ? [{ debugName: "endMenuActions" }] : /* istanbul ignore next */ []));
5395
+ /** Default end action (voice/send morph button) */
5396
+ this.defaultAction = computed(() => {
5397
+ const context = this.actionContext();
5398
+ return this.registry.composerActions
5399
+ .getVisibleActions('end', context)
5400
+ .find((action) => action.default);
5401
+ }, /* @ts-ignore */
5402
+ ...(ngDevMode ? [{ debugName: "defaultAction" }] : /* istanbul ignore next */ []));
5388
5403
  }
5389
5404
  // Access registry through conversation service
5390
5405
  get registry() {
@@ -5540,8 +5555,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
5540
5555
  */
5541
5556
  class AXConversationComposerComponent {
5542
5557
  /** Access registry through conversation service */
5543
- get registry() {
5544
- return this.conversationService.registry;
5558
+ get composerActionRegistry() {
5559
+ return this.conversationService.registry.composerActions;
5545
5560
  }
5546
5561
  // Setup typing indicator throttling
5547
5562
  constructor() {
@@ -5582,6 +5597,11 @@ class AXConversationComposerComponent {
5582
5597
  ...(ngDevMode ? [{ debugName: "emojiPopoverRef" }] : /* istanbul ignore next */ []));
5583
5598
  this.emojiPopoverTarget = signal(null, /* @ts-ignore */
5584
5599
  ...(ngDevMode ? [{ debugName: "emojiPopoverTarget" }] : /* istanbul ignore next */ []));
5600
+ /** Attachment menu popover state */
5601
+ this.attachPopoverRef = viewChild('attachPopover', /* @ts-ignore */
5602
+ ...(ngDevMode ? [{ debugName: "attachPopoverRef" }] : /* istanbul ignore next */ []));
5603
+ this.attachPopoverTarget = signal(null, /* @ts-ignore */
5604
+ ...(ngDevMode ? [{ debugName: "attachPopoverTarget" }] : /* istanbul ignore next */ []));
5585
5605
  this.composerPopupLoader = () => Promise.resolve().then(function () { return composerPopup_component; }).then((m) => m.AXConversationComposerPopupComponent);
5586
5606
  /** Input placeholder - use service */
5587
5607
  this.placeholder = this.composerService.placeholder;
@@ -5617,6 +5637,7 @@ class AXConversationComposerComponent {
5617
5637
  const currentId = this.activeConversation()?.id;
5618
5638
  if (this.#previousConversationId !== undefined && this.#previousConversationId !== currentId) {
5619
5639
  this.emojiPopoverTarget.set(null);
5640
+ this.attachPopoverTarget.set(null);
5620
5641
  this.editingMessage.set(null);
5621
5642
  this.replyingToMessage.set(null);
5622
5643
  }
@@ -5647,18 +5668,20 @@ class AXConversationComposerComponent {
5647
5668
  this.inputRows = this.composerService.inputRows;
5648
5669
  /** Can send message - use service */
5649
5670
  this.canSend = this.composerService.canSend;
5650
- /** Left actions from registry - use service */
5651
- this.leftActions = this.composerService.leftActions;
5652
- /** Right actions from registry - use service */
5653
- this.rightActions = this.composerService.rightActions;
5654
- /** Left inline actions (location = 'inline' or undefined) */
5655
- this.leftInlineActions = this.composerService.leftInlineActions;
5656
- /** Left menu actions (location = 'menu') */
5657
- this.leftMenuActions = this.composerService.leftMenuActions;
5658
- /** Right inline actions (location = 'inline' or undefined) */
5659
- this.rightInlineActions = this.composerService.rightInlineActions;
5660
- /** Right menu actions (location = 'menu') */
5661
- this.rightMenuActions = this.composerService.rightMenuActions;
5671
+ /** Start actions from registry - use service */
5672
+ this.startActions = this.composerService.startActions;
5673
+ /** End actions from registry - use service */
5674
+ this.endActions = this.composerService.endActions;
5675
+ /** Start inline actions */
5676
+ this.startInlineActions = this.composerService.startInlineActions;
5677
+ /** Start menu actions (attachment popup) */
5678
+ this.startMenuActions = this.composerService.startMenuActions;
5679
+ /** End inline actions inside input pill */
5680
+ this.endInlineActions = this.composerService.endInlineActions;
5681
+ /** End menu actions */
5682
+ this.endMenuActions = this.composerService.endMenuActions;
5683
+ /** Default end action (voice/send morph) */
5684
+ this.defaultAction = this.composerService.defaultAction;
5662
5685
  this.typingSubject
5663
5686
  .pipe(throttleTime(this.config.typingIndicatorThrottle ?? 2000), takeUntilDestroyed())
5664
5687
  .subscribe((conversationId) => {
@@ -5757,7 +5780,7 @@ class AXConversationComposerComponent {
5757
5780
  /** Handle emoji click */
5758
5781
  async onEmojiClick(event) {
5759
5782
  this.emojiClick.emit();
5760
- const target = event?.currentTarget;
5783
+ const target = this.getClickTarget(event);
5761
5784
  if (!target)
5762
5785
  return;
5763
5786
  const popover = this.emojiPopoverRef();
@@ -5821,9 +5844,49 @@ class AXConversationComposerComponent {
5821
5844
  onItemSelected: (item) => this.onEmojiItemSelected(item),
5822
5845
  };
5823
5846
  }
5824
- /** Handle attach click */
5825
- onAttachClick() {
5847
+ /** Handle attach menu click */
5848
+ onAttachMenuClick(event) {
5826
5849
  this.attachClick.emit();
5850
+ const target = event.htmlElement;
5851
+ if (!target)
5852
+ return;
5853
+ const popover = this.attachPopoverRef();
5854
+ if (popover?.isOpen) {
5855
+ popover.close();
5856
+ }
5857
+ else {
5858
+ this.attachPopoverTarget.set(target);
5859
+ setTimeout(() => {
5860
+ this.attachPopoverRef()?.open();
5861
+ }, 0);
5862
+ }
5863
+ }
5864
+ /** Handle attachment popover closed */
5865
+ onAttachPopoverClosed() {
5866
+ this.attachPopoverTarget.set(null);
5867
+ }
5868
+ /** Handle attachment menu action selection */
5869
+ async onAttachMenuAction(actionId) {
5870
+ this.attachPopoverRef()?.close();
5871
+ await this.onActionClick(actionId);
5872
+ }
5873
+ /** Handle default action click (voice when empty, send when has content) */
5874
+ async onDefaultActionClick() {
5875
+ if (this.canSend()) {
5876
+ await this.onSendClick();
5877
+ return;
5878
+ }
5879
+ const action = this.defaultAction();
5880
+ if (action) {
5881
+ await this.onActionClick(action.id);
5882
+ }
5883
+ }
5884
+ /** Icon for the default morph button */
5885
+ getDefaultActionIcon() {
5886
+ if (this.canSend()) {
5887
+ return this.editingMessage() ? 'fa-light fa-check' : 'fa-light fa-paper-plane';
5888
+ }
5889
+ return this.defaultAction()?.icon ?? 'fa-light fa-paper-plane';
5827
5890
  }
5828
5891
  /** Handle voice click */
5829
5892
  onVoiceClick() {
@@ -5856,9 +5919,17 @@ class AXConversationComposerComponent {
5856
5919
  this.textAreaRef()?.input?.nativeElement?.focus();
5857
5920
  }, 0);
5858
5921
  }
5922
+ getClickTarget(event) {
5923
+ if (!event)
5924
+ return undefined;
5925
+ if (event instanceof MouseEvent) {
5926
+ return event.currentTarget;
5927
+ }
5928
+ return event.htmlElement;
5929
+ }
5859
5930
  /** Handle action click */
5860
5931
  async onActionClick(actionId, event) {
5861
- const action = this.registry.composerActions.getActionById(actionId);
5932
+ const action = this.composerActionRegistry.getActionById(actionId);
5862
5933
  if (!action)
5863
5934
  return;
5864
5935
  const context = this.composerService.actionContext();
@@ -5881,7 +5952,7 @@ class AXConversationComposerComponent {
5881
5952
  // Otherwise execute the handler
5882
5953
  if (action.handler) {
5883
5954
  try {
5884
- await this.registry.composerActions.executeAction(actionId, context);
5955
+ await this.composerActionRegistry.executeAction(actionId, context);
5885
5956
  }
5886
5957
  catch (error) {
5887
5958
  console.error('Failed to execute action:', error);
@@ -5891,7 +5962,7 @@ class AXConversationComposerComponent {
5891
5962
  /** Check if action is enabled */
5892
5963
  isActionEnabled(action) {
5893
5964
  const context = this.composerService.actionContext();
5894
- return this.registry.composerActions.isActionEnabled(action, context);
5965
+ return this.composerActionRegistry.isActionEnabled(action, context);
5895
5966
  }
5896
5967
  /** Get replying sender name */
5897
5968
  getReplyingSenderName() {
@@ -5903,7 +5974,10 @@ class AXConversationComposerComponent {
5903
5974
  return participant?.name || this.translation.translateSync('@acorex:chat.fallbacks.unknown-user');
5904
5975
  }
5905
5976
  getActionLabel(action) {
5906
- return this.registry.composerActions.getActionLabel(action);
5977
+ return this.composerActionRegistry.getActionLabel(action);
5978
+ }
5979
+ getActionButtonClass(action) {
5980
+ return action.className ? `rounded-full ${action.className}` : 'rounded-full';
5907
5981
  }
5908
5982
  /** Get replying message text */
5909
5983
  getReplyingMessageText() {
@@ -5986,7 +6060,7 @@ class AXConversationComposerComponent {
5986
6060
  }
5987
6061
  }
5988
6062
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5989
- 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 panelClass=\"composer-emoji-popover-panel\"\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%}}@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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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.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", "visualContextScope", "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 }); }
6063
+ 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 }, { propertyName: "attachPopoverRef", first: true, predicate: ["attachPopover"], 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 <!-- Start actions -->\n <div class=\"composer-actions-left\">\n @if (startMenuActions().length > 0) {\n <ax-button\n class=\"rounded-full\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [text]=\"('@acorex:chat.tooltips.attach-file' | translate | async) ?? ''\"\n (onClick)=\"onAttachMenuClick($event)\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-paperclip\"></i>\n </ax-prefix>\n </ax-button>\n }\n\n @for (action of startInlineActions(); track action.id) {\n <ax-button\n look=\"blank\"\n [iconOnly]=\"true\"\n [text]=\"getActionLabel(action)\"\n [disabled]=\"!isActionEnabled(action)\"\n [class]=\"getActionButtonClass(action)\"\n (onClick)=\"onActionClick(action.id, $event)\"\n >\n <ax-prefix>\n <i [class]=\"action.icon\"></i>\n </ax-prefix>\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 <!-- End actions -->\n <div class=\"composer-actions-right\">\n @for (action of endInlineActions(); track action.id) {\n <ax-button\n look=\"blank\"\n [iconOnly]=\"true\"\n [text]=\"getActionLabel(action)\"\n [disabled]=\"!isActionEnabled(action)\"\n [class]=\"getActionButtonClass(action)\"\n (onClick)=\"onActionClick(action.id, $event)\"\n >\n <ax-prefix>\n <i [class]=\"action.icon\"></i>\n </ax-prefix>\n </ax-button>\n }\n\n @if (defaultAction() || canSend()) {\n <ax-button\n class=\"rounded-full\"\n color=\"primary\"\n look=\"solid\"\n [iconOnly]=\"true\"\n [text]=\"\n canSend()\n ? editingMessage()\n ? (('@acorex:chat.actions.save' | translate | async) ?? '')\n : (('@acorex:chat.actions.send' | translate | async) ?? '')\n : getActionLabel(defaultAction()!)\n \"\n [disabled]=\"!canSend() && defaultAction() ? !isActionEnabled(defaultAction()!) : false\"\n (onClick)=\"onDefaultActionClick()\"\n >\n <ax-prefix>\n <i [class]=\"getDefaultActionIcon()\"></i>\n </ax-prefix>\n </ax-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 attachment menu -->\n@if (attachPopoverTarget()) {\n <ax-popover\n #attachPopover\n [target]=\"attachPopoverTarget()\"\n [openOn]=\"'manual'\"\n [closeOn]=\"'clickOut'\"\n [placement]=\"'top-start'\"\n (onClosed)=\"onAttachPopoverClosed()\"\n >\n <ax-button-item-list>\n @for (action of startMenuActions(); track action.id) {\n <ax-button-item\n [text]=\"getActionLabel(action)\"\n (click)=\"onAttachMenuAction(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-popover>\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 panelClass=\"composer-emoji-popover-panel\"\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;gap:calc(var(--spacing, .25rem) * 1)}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 .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 .composer-emoji-popover{width:100%}}@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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.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", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
5990
6064
  }
5991
6065
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerComponent, decorators: [{
5992
6066
  type: Component,
@@ -5997,14 +6071,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
5997
6071
  AXTextAreaComponent,
5998
6072
  AXCommonModule,
5999
6073
  AXButtonComponent,
6000
- AXButtonItemComponent,
6001
- AXButtonItemListComponent,
6002
6074
  AXDecoratorModule,
6003
6075
  AXPopoverComponent,
6004
- AXDropdownPanelComponent,
6005
6076
  AXTranslationModule,
6006
- ], 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 panelClass=\"composer-emoji-popover-panel\"\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%}}@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"] }]
6007
- }], 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 }] }] } });
6077
+ AXButtonItemComponent,
6078
+ AXButtonItemListComponent,
6079
+ ], 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 <!-- Start actions -->\n <div class=\"composer-actions-left\">\n @if (startMenuActions().length > 0) {\n <ax-button\n class=\"rounded-full\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [text]=\"('@acorex:chat.tooltips.attach-file' | translate | async) ?? ''\"\n (onClick)=\"onAttachMenuClick($event)\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-paperclip\"></i>\n </ax-prefix>\n </ax-button>\n }\n\n @for (action of startInlineActions(); track action.id) {\n <ax-button\n look=\"blank\"\n [iconOnly]=\"true\"\n [text]=\"getActionLabel(action)\"\n [disabled]=\"!isActionEnabled(action)\"\n [class]=\"getActionButtonClass(action)\"\n (onClick)=\"onActionClick(action.id, $event)\"\n >\n <ax-prefix>\n <i [class]=\"action.icon\"></i>\n </ax-prefix>\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 <!-- End actions -->\n <div class=\"composer-actions-right\">\n @for (action of endInlineActions(); track action.id) {\n <ax-button\n look=\"blank\"\n [iconOnly]=\"true\"\n [text]=\"getActionLabel(action)\"\n [disabled]=\"!isActionEnabled(action)\"\n [class]=\"getActionButtonClass(action)\"\n (onClick)=\"onActionClick(action.id, $event)\"\n >\n <ax-prefix>\n <i [class]=\"action.icon\"></i>\n </ax-prefix>\n </ax-button>\n }\n\n @if (defaultAction() || canSend()) {\n <ax-button\n class=\"rounded-full\"\n color=\"primary\"\n look=\"solid\"\n [iconOnly]=\"true\"\n [text]=\"\n canSend()\n ? editingMessage()\n ? (('@acorex:chat.actions.save' | translate | async) ?? '')\n : (('@acorex:chat.actions.send' | translate | async) ?? '')\n : getActionLabel(defaultAction()!)\n \"\n [disabled]=\"!canSend() && defaultAction() ? !isActionEnabled(defaultAction()!) : false\"\n (onClick)=\"onDefaultActionClick()\"\n >\n <ax-prefix>\n <i [class]=\"getDefaultActionIcon()\"></i>\n </ax-prefix>\n </ax-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 attachment menu -->\n@if (attachPopoverTarget()) {\n <ax-popover\n #attachPopover\n [target]=\"attachPopoverTarget()\"\n [openOn]=\"'manual'\"\n [closeOn]=\"'clickOut'\"\n [placement]=\"'top-start'\"\n (onClosed)=\"onAttachPopoverClosed()\"\n >\n <ax-button-item-list>\n @for (action of startMenuActions(); track action.id) {\n <ax-button-item\n [text]=\"getActionLabel(action)\"\n (click)=\"onAttachMenuAction(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-popover>\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 panelClass=\"composer-emoji-popover-panel\"\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;gap:calc(var(--spacing, .25rem) * 1)}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 .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 .composer-emoji-popover{width:100%}}@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"] }]
6080
+ }], 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 }] }], attachPopoverRef: [{ type: i0.ViewChild, args: ['attachPopover', { isSignal: true }] }] } });
6008
6081
 
6009
6082
  /**
6010
6083
  * ConversationContainer Component
@@ -7896,7 +7969,7 @@ class AXConversationMessageListComponent {
7896
7969
  return message.id;
7897
7970
  }
7898
7971
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationMessageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7899
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationMessageListComponent, isStandalone: true, selector: "ax-conversation-message-list", outputs: { messageAction: "messageAction" }, viewQueries: [{ propertyName: "reactionPopover", first: true, predicate: ["reactionPopover"], descendants: true, isSignal: true }, { propertyName: "messageListRef", first: true, predicate: ["messageList"], descendants: true, isSignal: true }, { propertyName: "messagesContainerRef", first: true, predicate: ["messagesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (activeConversation(); as conv) {\n @for (cid of [conv.id]; track cid) {\n <div\n class=\"message-list message-list--conversation-surface\"\n [class.message-list--drag]=\"messageListDragging()\"\n #messageList\n role=\"log\"\n [attr.aria-label]=\"'@acorex:chat.aria.message-list' | translate | async\"\n aria-live=\"polite\"\n [style.background]=\"messageListBackgroundStyle()\"\n axUploaderZone\n [disableBrowse]=\"true\"\n (dragEnter)=\"onMessageListDragEnter()\"\n (dragLeave)=\"onMessageListDragLeave()\"\n (fileChange)=\"onMessageListFilesDropped($event)\"\n >\n @if (loading()) {\n <div\n class=\"list-loading\"\n role=\"status\"\n aria-busy=\"true\"\n [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n >\n <div class=\"messages-skeleton\" aria-hidden=\"true\">\n @for (item of loadingSkeletonItems; track item) {\n <div class=\"message-skeleton\" [class.message-skeleton--own]=\"$odd\">\n @if ($even && isGroupConversation()) {\n <ax-skeleton class=\"message-skeleton-avatar\" [animated]=\"true\"></ax-skeleton>\n }\n <ax-skeleton\n class=\"message-skeleton-bubble\"\n [class.message-skeleton-bubble--short]=\"$index % 3 === 1\"\n [class.message-skeleton-bubble--medium]=\"$index % 3 === 2\"\n [animated]=\"true\"\n ></ax-skeleton>\n </div>\n }\n </div>\n </div>\n } @else if (messages().length === 0) {\n <div class=\"list-empty\" role=\"status\" [attr.aria-label]=\"'@acorex:chat.status.no-messages' | translate | async\">\n <ng-content select=\"ax-conversation-message-list-empty, [ax-conversation-message-list-empty]\">\n <ng-container\n *ngComponentOutlet=\"resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }\"\n ></ng-container>\n </ng-content>\n </div>\n } @else {\n <div\n class=\"messages-container\"\n (scroll)=\"onScroll($event)\"\n axInfiniteScroll\n [threshold]=\"config.infiniteScrollThreshold\"\n [edge]=\"'top'\"\n [scrollDisabled]=\"loading() || loadingMore() || !hasMoreMessages()\"\n (scrollThreshold)=\"onScrollThreshold($event)\"\n #messagesContainer\n role=\"feed\"\n [attr.aria-label]=\"'@acorex:chat.aria.messages' | translate | async\"\n >\n @if (loadingMore()) {\n <div\n class=\"list-loading-more list-loading-more--prepend\"\n role=\"status\"\n animate.enter=\"load-more-enter\"\n animate.leave=\"load-more-leave\"\n [attr.aria-label]=\"'@acorex:chat.status.loading-older-messages' | translate | async\"\n >\n <div class=\"load-more-indicator\" aria-hidden=\"true\">\n <span class=\"load-more-dot\"></span>\n <span class=\"load-more-dot\"></span>\n <span class=\"load-more-dot\"></span>\n </div>\n <ax-label class=\"load-more-label\">{{\n '@acorex:chat.status.loading-older-messages' | translate | async\n }}</ax-label>\n </div>\n }\n @for (group of messageGroups(); track trackMessageGroup($index, group)) {\n <!-- Date Separator -->\n <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\">\n <ax-badge [text]=\"group.dateLabel\" class=\"date-text\"></ax-badge>\n </div>\n\n <!-- Messages in this date group -->\n @for (message of group.messages; track trackMessage($index, message)) {\n <div\n [class]=\"getMessageClasses(message)\"\n role=\"article\"\n [attr.aria-label]=\"getMessageAriaLabel(message)\"\n [id]=\"'message-' + message.id\"\n >\n <!-- Avatar (only for group conversations and received messages) -->\n @if (shouldShowAvatar(message)) {\n <div class=\"message-avatar\">\n <ax-conversation-avatar\n kind=\"user\"\n [userId]=\"message.senderId\"\n [conversation]=\"activeConversation()\"\n [message]=\"message\"\n [size]=\"32\"\n />\n </div>\n }\n\n <div class=\"message-content-row\" [class.message-content-row-own]=\"isOwnMessage(message)\">\n @if (messageSupportsReactions(message)) {\n <button\n type=\"button\"\n class=\"add-reaction-button add-reaction-outside\"\n [class.add-reaction-visible]=\"reactionPickerTarget() === message.id\"\n (click)=\"toggleReactionPicker(message, $event)\"\n [attr.aria-label]=\"'@acorex:chat.actions.add-reaction' | translate | async\"\n #reactionButton\n >\n <i class=\"fa-light fa-face-smile\"></i>\n </button>\n }\n\n <div\n class=\"message-bubble-container\"\n [id]=\"'message-bubble-' + message.id\"\n [attr.data-message-id]=\"message.id\"\n >\n <div\n [class]=\"getBubbleClasses(message)\"\n [class.message-bubble-sent]=\"message.senderId === currentUser()?.id\"\n [class.message-bubble-received]=\"message.senderId !== currentUser()?.id\"\n >\n <!-- Sender name (only for group conversations and received messages) -->\n @if (shouldShowSenderName(message)) {\n <div class=\"message-sender\">{{ getSenderName(message) }}:</div>\n }\n\n <!-- Reply Preview -->\n @if (message.replyTo) {\n <div\n class=\"reply-preview\"\n (click)=\"scrollToMessage(message.replyTo.id)\"\n role=\"button\"\n [attr.aria-label]=\"'Reply to ' + getSenderName(message.replyTo)\"\n (keydown.enter)=\"scrollToMessage(message.replyTo.id)\"\n (keydown.space)=\"scrollToMessage(message.replyTo.id)\"\n >\n <div class=\"reply-preview-content\">\n <div class=\"reply-preview-sender\">{{ getSenderName(message.replyTo) }}</div>\n <div class=\"reply-preview-text\">\n @if (getMessagePreviewText(message.replyTo); as preview) {\n <span class=\"last-message\">\n @if (preview.type !== 'text') {\n <i [class]=\"preview.icon\"></i\n >{{ '@acorex:chat.' + preview.type | translate | async }}\n } @else {\n {{ preview.value }}\n }\n </span>\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Forwarded Indicator -->\n @if (message.forwarded) {\n <div class=\"forwarded-preview\">\n <i class=\"fa-solid fa-share\"></i>\n <span class=\"forwarded-text\">{{ getForwardedText(message) }}</span>\n </div>\n }\n\n <ax-conversation-registry-component-outlet\n [component]=\"getRendererComponent(message)\"\n [componentLoader]=\"getRendererComponentLoader(message)\"\n [inputs]=\"getRendererInputs(message)\"\n />\n\n @if (messageSupportsReactions(message) && message.reactions.length > 0) {\n <div class=\"message-reactions-container\">\n <div class=\"message-reactions-bubbles\">\n @for (reaction of getGroupedReactions(message); track reaction.emoji) {\n <button\n type=\"button\"\n class=\"reaction-bubble\"\n [class.reaction-bubble-active]=\"reaction.hasReacted\"\n (click)=\"onReactionClick(message, reaction.emoji)\"\n [attr.aria-label]=\"reaction.emoji + ' ' + reaction.count\"\n >\n <span class=\"reaction-emoji\">{{ reaction.emoji }}</span>\n @if (reaction.count > 1) {\n <span class=\"reaction-count\">{{ reaction.count }}</span>\n }\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Message Footer -->\n <div class=\"message-footer\">\n @let replyCount = getReplyCount(message);\n @let forwardCount = getForwardCount(message);\n @if (replyCount > 0) {\n <span class=\"message-footer-count\" [attr.aria-label]=\"replyCount + ' replies'\">\n <i class=\"fa-solid fa-message\" aria-hidden=\"true\"></i>\n <span class=\"message-footer-count-value\">{{ replyCount }}</span>\n </span>\n }\n @if (forwardCount > 0) {\n <span class=\"message-footer-count\" [attr.aria-label]=\"forwardCount + ' forwards'\">\n <i class=\"fa-solid fa-share\" aria-hidden=\"true\"></i>\n <span class=\"message-footer-count-value\">{{ forwardCount }}</span>\n </span>\n }\n @if (replyCount > 0 || forwardCount > 0) {\n <span class=\"message-footer-split\" aria-hidden=\"true\"></span>\n }\n <span class=\"message-time\">{{ message.timestamp | format: 'timeleft' | async }}</span>\n @if (message.editedAt) {\n <span class=\"edited-indicator\">\n <span>{{ '@acorex:chat.status.edited' | translate | async }}</span>\n </span>\n }\n @if (isOwnMessage(message)) {\n <span [class]=\"getStatusIconClasses(message)\">\n <ax-icon><i [class]=\"getStatusIcon(message)\"></i></ax-icon>\n </span>\n }\n </div>\n </div>\n </div>\n </div>\n\n <!-- Context Menu for Message Actions -->\n <ax-context-menu\n [target]=\"'#message-bubble-' + message.id\"\n [openOn]=\"'click'\"\n [closeOn]=\"'click'\"\n (onOpening)=\"handleMessageContextMenuOpening($event, message)\"\n (onClose)=\"contextMenuMessageId.set(null)\"\n (onItemClick)=\"handleMessageContextMenuItemClick($event, message)\"\n >\n </ax-context-menu>\n </div>\n }\n }\n </div>\n\n <!-- Scroll to Bottom Button -->\n @if (showScrollButton()) {\n <div\n class=\"scroll-to-bottom-wrapper\"\n animate.enter=\"scroll-to-bottom-enter\"\n animate.leave=\"scroll-to-bottom-leave\"\n >\n <ax-fab\n class=\"scroll-to-bottom\"\n (onClick)=\"scrollToBottom()\"\n [attr.aria-label]=\"'@acorex:chat.actions.scroll-to-bottom' | translate | async\"\n >\n <ax-icon><i class=\"fa-light fa-arrow-down\" aria-hidden=\"true\"></i></ax-icon>\n </ax-fab>\n </div>\n }\n }\n </div>\n }\n\n <!-- Reaction Picker Popover -->\n @if (reactionsEnabled() && reactionPickerTarget()) {\n <ax-popover\n #reactionPopover\n [target]=\"reactionPickerElement()\"\n [openOn]=\"'manual'\"\n [closeOn]=\"'clickOut'\"\n [placement]=\"reactionPickerPlacement()\"\n (onClose)=\"closeReactionPicker()\"\n >\n <div class=\"reaction-picker-popup\">\n <div class=\"reaction-picker-header\">\n <span class=\"picker-title\">{{ '@acorex:chat.actions.react' | translate | async }}</span>\n <button\n type=\"button\"\n class=\"picker-close\"\n (click)=\"closeReactionPicker()\"\n [attr.aria-label]=\"'@acorex:chat.actions.close' | translate | async\"\n >\n <i class=\"fa-light fa-xmark\"></i>\n </button>\n </div>\n <div\n class=\"reaction-picker-emojis\"\n role=\"listbox\"\n [attr.aria-label]=\"'@acorex:chat.actions.choose-reaction' | translate | async\"\n >\n @for (emoji of availableReactions(); track emoji) {\n <button\n type=\"button\"\n class=\"reaction-picker-emoji\"\n [class.reaction-picker-emoji-active]=\"hasUserReactedById(reactionPickerTarget()!, emoji)\"\n (click)=\"onReactionClickById(reactionPickerTarget()!, emoji); closeReactionPicker()\"\n [attr.aria-label]=\"emoji\"\n >\n {{ emoji }}\n </button>\n }\n </div>\n </div>\n </ax-popover>\n }\n} @else {\n <div\n class=\"message-list message-list--no-active\"\n role=\"region\"\n [attr.aria-label]=\"'@acorex:chat.status.no-conversation-selected' | translate | async\"\n >\n <div class=\"list-no-active\">\n <ng-content select=\"ax-conversation-message-list-no-active, [ax-conversation-message-list-no-active]\">\n <ng-container *ngComponentOutlet=\"noActiveFallbackComponent\"></ng-container>\n </ng-content>\n </div>\n </div>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-message-list{position:relative;display:block;height:100%;container-type:inline-size;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}@keyframes messagesSkeletonIn{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes messagesSkeletonInReduced{0%{opacity:.85}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterPrepend{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeavePrepend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.35rem)}}@keyframes axScrollToBottomEnter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes axScrollToBottomLeave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}}ax-conversation-message-list .message-list{position:relative;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden}ax-conversation-message-list .message-list.ax-drop-zone>.ax-uploader-overlay-state{display:none!important}ax-conversation-message-list .message-list--drag{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:rgba(var(--ax-sys-color-primary-surface));--tw-outline-style: dashed;outline-style:dashed;outline-offset:-2px}ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceIn .36s cubic-bezier(.22,1,.36,1) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceInReduced .18s ease both}}ax-conversation-message-list .list-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;justify-content:flex-end;overflow:hidden}ax-conversation-message-list .messages-skeleton{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 6);animation:messagesSkeletonIn .42s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .message-skeleton{display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .message-skeleton--own{flex-direction:row-reverse}ax-conversation-message-list .message-skeleton-avatar{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-message-list .message-skeleton-bubble{height:calc(var(--spacing, .25rem) * 10);border-radius:var(--radius-2xl, 1rem);width:min(62%,17.5rem)}ax-conversation-message-list .message-skeleton-bubble--short{height:calc(var(--spacing, .25rem) * 8);width:min(36%,9.5rem)}ax-conversation-message-list .message-skeleton-bubble--medium{height:calc(var(--spacing, .25rem) * 9);width:min(48%,13rem)}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .messages-skeleton{animation:messagesSkeletonInReduced .2s ease both}}ax-conversation-message-list .list-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 5);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;animation:fadeInUp .5s ease-out}ax-conversation-message-list .message-list--no-active{height:100%}ax-conversation-message-list .list-no-active{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;align-items:center;justify-content:center}ax-conversation-message-list .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:5.5rem;--tw-leading: 1;line-height:1;opacity:35%;filter:grayscale(.2)}ax-conversation-message-list .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:1.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-tight, -.025em);letter-spacing:var(--tracking-tight, -.025em);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-message-list .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:420px;font-size:1.0625rem;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-message-list .spinner{margin-bottom:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:3px;border-color:rgba(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));animation:spin .8s linear infinite}ax-conversation-message-list .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 2);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:.3rem}ax-conversation-message-list .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-message-list .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-message-list .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-message-list .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-message-list .load-more-enter{animation:axChatLoadMoreEnterPrepend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .load-more-leave{animation:axChatLoadMoreLeavePrepend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .load-more-dot{animation:none;opacity:.65}ax-conversation-message-list .load-more-enter,ax-conversation-message-list .load-more-leave{animation:none}}ax-conversation-message-list .messages-container{position:relative;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex:1;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .date-separator{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:150;display:flex;align-items:center;justify-content:center;padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .date-text{display:flex;width:calc(var(--spacing, .25rem) * 28);align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-conversation-message-list .unread-separator{margin-block:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4)}ax-conversation-message-list .unread-separator-line{height:1px;flex:1;background-color:rgba(var(--ax-sys-color-primary-surface));opacity:30%}ax-conversation-message-list .unread-separator-text{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--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);white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}ax-conversation-message-list .message-item{position:relative;display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);transition:background-color .3s ease}ax-conversation-message-list .message-item-context-active{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.09);box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.22)}ax-conversation-message-list .message-own.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.12)}ax-conversation-message-list .message-highlight{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-message-list .message-item.message-own{flex-direction:row-reverse}ax-conversation-message-list .message-avatar{flex-shrink:0}ax-conversation-message-list .message-avatar-icon{display:flex;height:100%;width:100%;align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-message-list .message-content-row{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:0 1 auto;flex-direction:row;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 1);max-width:min(95%,50rem)}@container (min-width: 768px){ax-conversation-message-list .message-content-row{max-width:min(70%,50rem)}}ax-conversation-message-list .message-content-row-own{justify-content:flex-end}ax-conversation-message-list .message-item:not(.message-own) .message-content-row{justify-content:flex-start}ax-conversation-message-list .message-bubble-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1 1 auto;flex-direction:column}ax-conversation-message-list .message-own .message-bubble-container{align-items:flex-end}ax-conversation-message-list .message-sender{margin-bottom:.1rem;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-bubble{position:relative;display:flex;max-width:100%;flex-direction:column;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2);padding-bottom:.1rem;overflow-wrap:break-word;transition:background-color .3s ease}ax-conversation-message-list .reply-preview{margin-bottom:.1rem;cursor:pointer;border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .reply-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .reply-preview-line{width:3px;flex-shrink:0;border-radius:1.5px;background:currentColor;opacity:.5}ax-conversation-message-list .reply-preview-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-message-list .reply-preview-sender{margin-bottom:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .reply-preview-text{overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .reply-preview-sender{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .reply-preview-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .last-message{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .forwarded-preview{margin-bottom:.1rem;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .forwarded-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .forwarded-preview i{flex-shrink:0;font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .forwarded-text{min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .forwarded-preview i{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .forwarded-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .message-bubble-received{border-end-start-radius:.125rem}ax-conversation-message-list .message-bubble-received:before{content:\"\";display:block;position:absolute;bottom:calc(var(--spacing, .25rem) * 0);height:.8rem;width:.8rem;background-color:rgba(var(--ax-sys-color-lightest-surface));inset-inline-start:-.7rem;border-start-start-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-bubble-sent{border-end-end-radius:.125rem}ax-conversation-message-list .message-bubble-sent:after{content:\"\";display:block;width:.8rem;height:.8rem;position:absolute;bottom:0;background:rgb(var(--ax-sys-color-primary-surface));inset-inline-end:-.7rem;border-start-end-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}ax-conversation-message-list .message-bubble.message-system{background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);max-width:100%}ax-conversation-message-list .message-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}ax-conversation-message-list .message-item:has(.message-system){justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .message-item:has(.message-system) .message-content-row{max-width:100%;justify-content:center}ax-conversation-message-list .message-item:has(.message-system) .message-bubble-container{align-items:center}ax-conversation-message-list .message-content{font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);white-space:pre-wrap}ax-conversation-message-list ax-conversation-registry-component-outlet{display:block;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-conversation-message-list .message-footer{margin-top:.1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1);padding-inline-start:calc(var(--spacing, .25rem) * 1);font-size:.6875rem;--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%;-webkit-user-select:none;user-select:none}ax-conversation-message-list .message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .message-footer-count i{font-size:.625rem;opacity:90%}ax-conversation-message-list .message-footer-count-value{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-footer-split{margin-inline:.2rem;height:.65rem;width:1px;flex-shrink:0;align-self:center;background-color:rgba(var(--ax-sys-color-border-light-surface));opacity:90%}ax-conversation-message-list .message-time{font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .edited-indicator{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline-start:.35rem;font-size:.675rem;opacity:75%}ax-conversation-message-list .status-icon{display:inline-flex;align-items:center}ax-conversation-message-list .status-icon i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}ax-conversation-message-list .status-read{color:rgba(var(--ax-sys-color-primary-200))}ax-conversation-message-list .status-failed{color:rgba(var(--ax-sys-color-danger-200))}ax-conversation-message-list .message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}ax-conversation-message-list .reaction-bubble{margin:calc(var(--spacing, .25rem) * 0);display:inline-flex;min-height:1.375rem;cursor:pointer;align-items:center;justify-content:center;gap:.15rem;border-radius:var(--radius-xl, .75rem);padding-inline:.35rem;padding-block:.1rem;color:rgba(var(--ax-sys-color-on-surface));--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background:rgba(var(--ax-sys-color-on-surface),.06);border:1px solid rgba(var(--ax-sys-color-on-surface),.1);transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ax-conversation-message-list .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}ax-conversation-message-list .reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-message-list .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}ax-conversation-message-list .reaction-emoji{display:inline-block;font-size:.8125rem;--tw-leading: 1;line-height:1}ax-conversation-message-list .reaction-count{font-size:.6875rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:.65}ax-conversation-message-list .reaction-bubble-active .reaction-count{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600));opacity:95%}ax-conversation-message-list .message-own .reaction-bubble{color:rgba(var(--ax-sys-color-on-primary-surface));background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2)}ax-conversation-message-list .message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}ax-conversation-message-list .message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}ax-conversation-message-list .message-own .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:80%}ax-conversation-message-list .message-own .reaction-bubble-active .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:100%}ax-conversation-message-list .message-reactions-container{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.2rem}ax-conversation-message-list .message-own .message-reactions-container{justify-content:flex-end}ax-conversation-message-list .message-own .message-footer .edited-indicator{border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .message-footer .message-footer-split{background:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .add-reaction-button.add-reaction-outside{position:absolute;top:50%;margin:calc(var(--spacing, .25rem) * 0);box-sizing:border-box;display:none;height:1.8rem;width:1.8rem;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 0);inset-inline-end:-2.25rem;box-shadow:0 1px 2px #0000000f}ax-conversation-message-list .add-reaction-button{padding-inline-start:.05rem}ax-conversation-message-list .message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.25rem;inset-inline-end:auto}ax-conversation-message-list .message-item:hover .add-reaction-button.add-reaction-outside,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}ax-conversation-message-list .add-reaction-button.add-reaction-outside:hover,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgba(var(--ax-sys-color-on-surface));opacity:80%}ax-conversation-message-list .reaction-bubble:focus-visible,ax-conversation-message-list .add-reaction-button:focus-visible,ax-conversation-message-list .action-trigger:focus-visible,ax-conversation-message-list ax-fab.scroll-to-bottom ax-button: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-message-list .message-actions{z-index:10;padding-bottom:calc(var(--spacing, .25rem) * 6);opacity:0%;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .message-item:hover .message-actions{opacity:100%}ax-conversation-message-list .action-trigger{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .action-trigger:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-message-list .shortcut{font-size:.6875rem;opacity:70%}ax-conversation-message-list .scroll-to-bottom-wrapper{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);bottom:calc(var(--spacing, .25rem) * 4);z-index:999}ax-conversation-message-list ax-fab.scroll-to-bottom ax-button{display:flex;height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none}ax-conversation-message-list .scroll-to-bottom-enter{animation:axScrollToBottomEnter var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}ax-conversation-message-list .scroll-to-bottom-leave{animation:axScrollToBottomLeave var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .scroll-to-bottom-enter,ax-conversation-message-list .scroll-to-bottom-leave{animation:none}}.reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a}.reaction-picker-header{display:flex;min-height:calc(var(--spacing, .25rem) * 0);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:.45rem;padding-inline-start:.7rem;padding-inline-end:calc(var(--spacing, .25rem) * 2)}.picker-title{font-size:.8125rem;--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-on-surface));opacity:85%}.picker-close{display:flex;height:1.6rem;width:1.6rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:.95rem;color:rgba(var(--ax-sys-color-on-surface),.55);transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}.picker-close:focus-visible,.reaction-picker-emoji:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.2rem;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:.45rem;padding-bottom:calc(var(--spacing, .25rem) * 2)}.reaction-picker-emoji{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;border-radius:.45rem;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:1.15rem;--tw-leading: 1;line-height:1;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{transform:translate3d(0,100%,0);opacity:0}}@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-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXFabComponent, selector: "ax-fab", inputs: ["label", "popupStyle", "popupPlacement", "size"], outputs: ["popupPlacementChange", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXConversationInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge", "scrollDisabled", "cooldownMs"], outputs: ["scrollThreshold"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept", "fileType", "overlayTemplate", "disableBrowse", "disableDragDrop"], outputs: ["fileChange", "onChanged", "dragEnter", "dragLeave", "dragOver", "onFileUploadComplete", "onFilesUploadComplete"] }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXFormatPipe, name: "format" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
7972
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationMessageListComponent, isStandalone: true, selector: "ax-conversation-message-list", outputs: { messageAction: "messageAction" }, viewQueries: [{ propertyName: "reactionPopover", first: true, predicate: ["reactionPopover"], descendants: true, isSignal: true }, { propertyName: "messageListRef", first: true, predicate: ["messageList"], descendants: true, isSignal: true }, { propertyName: "messagesContainerRef", first: true, predicate: ["messagesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (activeConversation(); as conv) {\n @for (cid of [conv.id]; track cid) {\n <div\n class=\"message-list message-list--conversation-surface\"\n [class.message-list--drag]=\"messageListDragging()\"\n #messageList\n role=\"log\"\n [attr.aria-label]=\"'@acorex:chat.aria.message-list' | translate | async\"\n aria-live=\"polite\"\n [style.background]=\"messageListBackgroundStyle()\"\n axUploaderZone\n [disableBrowse]=\"true\"\n (dragEnter)=\"onMessageListDragEnter()\"\n (dragLeave)=\"onMessageListDragLeave()\"\n (fileChange)=\"onMessageListFilesDropped($event)\"\n >\n @if (loading()) {\n <div\n class=\"list-loading\"\n role=\"status\"\n aria-busy=\"true\"\n [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n >\n <div class=\"messages-skeleton\" aria-hidden=\"true\">\n @for (item of loadingSkeletonItems; track item) {\n <div class=\"message-skeleton\" [class.message-skeleton--own]=\"$odd\">\n @if ($even && isGroupConversation()) {\n <ax-skeleton class=\"message-skeleton-avatar\" [animated]=\"true\"></ax-skeleton>\n }\n <ax-skeleton\n class=\"message-skeleton-bubble\"\n [class.message-skeleton-bubble--short]=\"$index % 3 === 1\"\n [class.message-skeleton-bubble--medium]=\"$index % 3 === 2\"\n [animated]=\"true\"\n ></ax-skeleton>\n </div>\n }\n </div>\n </div>\n } @else if (messages().length === 0) {\n <div class=\"list-empty\" role=\"status\" [attr.aria-label]=\"'@acorex:chat.status.no-messages' | translate | async\">\n <ng-content select=\"ax-conversation-message-list-empty, [ax-conversation-message-list-empty]\">\n <ng-container\n *ngComponentOutlet=\"resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }\"\n ></ng-container>\n </ng-content>\n </div>\n } @else {\n <div\n class=\"messages-container\"\n (scroll)=\"onScroll($event)\"\n axInfiniteScroll\n [threshold]=\"config.infiniteScrollThreshold\"\n [edge]=\"'top'\"\n [scrollDisabled]=\"loading() || loadingMore() || !hasMoreMessages()\"\n (scrollThreshold)=\"onScrollThreshold($event)\"\n #messagesContainer\n role=\"feed\"\n [attr.aria-label]=\"'@acorex:chat.aria.messages' | translate | async\"\n >\n @if (loadingMore()) {\n <div\n class=\"list-loading-more list-loading-more--prepend\"\n role=\"status\"\n animate.enter=\"load-more-enter\"\n animate.leave=\"load-more-leave\"\n [attr.aria-label]=\"'@acorex:chat.status.loading-older-messages' | translate | async\"\n >\n <div class=\"load-more-indicator\" aria-hidden=\"true\">\n <span class=\"load-more-dot\"></span>\n <span class=\"load-more-dot\"></span>\n <span class=\"load-more-dot\"></span>\n </div>\n <ax-label class=\"load-more-label\">{{\n '@acorex:chat.status.loading-older-messages' | translate | async\n }}</ax-label>\n </div>\n }\n @for (group of messageGroups(); track trackMessageGroup($index, group)) {\n <!-- Date Separator -->\n <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\">\n <ax-badge [text]=\"group.dateLabel\" class=\"date-text\"></ax-badge>\n </div>\n\n <!-- Messages in this date group -->\n @for (message of group.messages; track trackMessage($index, message)) {\n <div\n [class]=\"getMessageClasses(message)\"\n role=\"article\"\n [attr.aria-label]=\"getMessageAriaLabel(message)\"\n [id]=\"'message-' + message.id\"\n >\n <!-- Avatar (only for group conversations and received messages) -->\n @if (shouldShowAvatar(message)) {\n <div class=\"message-avatar\">\n <ax-conversation-avatar\n kind=\"user\"\n [userId]=\"message.senderId\"\n [conversation]=\"activeConversation()\"\n [message]=\"message\"\n [size]=\"32\"\n />\n </div>\n }\n\n <div class=\"message-content-row\" [class.message-content-row-own]=\"isOwnMessage(message)\">\n @if (messageSupportsReactions(message)) {\n <button\n type=\"button\"\n class=\"add-reaction-button add-reaction-outside\"\n [class.add-reaction-visible]=\"reactionPickerTarget() === message.id\"\n (click)=\"toggleReactionPicker(message, $event)\"\n [attr.aria-label]=\"'@acorex:chat.actions.add-reaction' | translate | async\"\n #reactionButton\n >\n <i class=\"fa-light fa-face-smile\"></i>\n </button>\n }\n\n <div\n class=\"message-bubble-container\"\n [id]=\"'message-bubble-' + message.id\"\n [attr.data-message-id]=\"message.id\"\n >\n <div\n [class]=\"getBubbleClasses(message)\"\n [class.message-bubble-sent]=\"message.senderId === currentUser()?.id\"\n [class.message-bubble-received]=\"message.senderId !== currentUser()?.id\"\n >\n <!-- Sender name (only for group conversations and received messages) -->\n @if (shouldShowSenderName(message)) {\n <div class=\"message-sender\">{{ getSenderName(message) }}:</div>\n }\n\n <!-- Reply Preview -->\n @if (message.replyTo) {\n <div\n class=\"reply-preview\"\n (click)=\"scrollToMessage(message.replyTo.id)\"\n role=\"button\"\n [attr.aria-label]=\"'Reply to ' + getSenderName(message.replyTo)\"\n (keydown.enter)=\"scrollToMessage(message.replyTo.id)\"\n (keydown.space)=\"scrollToMessage(message.replyTo.id)\"\n >\n <div class=\"reply-preview-content\">\n <div class=\"reply-preview-sender\">{{ getSenderName(message.replyTo) }}</div>\n <div class=\"reply-preview-text\">\n @if (getMessagePreviewText(message.replyTo); as preview) {\n <span class=\"last-message\">\n @if (preview.type !== 'text') {\n <i [class]=\"preview.icon\"></i\n >{{ '@acorex:chat.' + preview.type | translate | async }}\n } @else {\n {{ preview.value }}\n }\n </span>\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Forwarded Indicator -->\n @if (message.forwarded) {\n <div class=\"forwarded-preview\">\n <i class=\"fa-solid fa-share\"></i>\n <span class=\"forwarded-text\">{{ getForwardedText(message) }}</span>\n </div>\n }\n\n <ax-conversation-registry-component-outlet\n [component]=\"getRendererComponent(message)\"\n [componentLoader]=\"getRendererComponentLoader(message)\"\n [inputs]=\"getRendererInputs(message)\"\n />\n\n @if (messageSupportsReactions(message) && message.reactions.length > 0) {\n <div class=\"message-reactions-container\">\n <div class=\"message-reactions-bubbles\">\n @for (reaction of getGroupedReactions(message); track reaction.emoji) {\n <button\n type=\"button\"\n class=\"reaction-bubble\"\n [class.reaction-bubble-active]=\"reaction.hasReacted\"\n (click)=\"onReactionClick(message, reaction.emoji)\"\n [attr.aria-label]=\"reaction.emoji + ' ' + reaction.count\"\n >\n <span class=\"reaction-emoji\">{{ reaction.emoji }}</span>\n @if (reaction.count > 1) {\n <span class=\"reaction-count\">{{ reaction.count }}</span>\n }\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Message Footer -->\n <div class=\"message-footer\">\n @let replyCount = getReplyCount(message);\n @let forwardCount = getForwardCount(message);\n @if (replyCount > 0) {\n <span class=\"message-footer-count\" [attr.aria-label]=\"replyCount + ' replies'\">\n <i class=\"fa-solid fa-message\" aria-hidden=\"true\"></i>\n <span class=\"message-footer-count-value\">{{ replyCount }}</span>\n </span>\n }\n @if (forwardCount > 0) {\n <span class=\"message-footer-count\" [attr.aria-label]=\"forwardCount + ' forwards'\">\n <i class=\"fa-solid fa-share\" aria-hidden=\"true\"></i>\n <span class=\"message-footer-count-value\">{{ forwardCount }}</span>\n </span>\n }\n @if (replyCount > 0 || forwardCount > 0) {\n <span class=\"message-footer-split\" aria-hidden=\"true\"></span>\n }\n <span class=\"message-time\">{{ message.timestamp | format: 'timeleft' | async }}</span>\n @if (message.editedAt) {\n <span class=\"edited-indicator\">\n <span>{{ '@acorex:chat.status.edited' | translate | async }}</span>\n </span>\n }\n @if (isOwnMessage(message)) {\n <span [class]=\"getStatusIconClasses(message)\">\n <ax-icon><i [class]=\"getStatusIcon(message)\"></i></ax-icon>\n </span>\n }\n </div>\n </div>\n </div>\n </div>\n\n <!-- Context Menu for Message Actions -->\n <ax-context-menu\n [target]=\"'#message-bubble-' + message.id\"\n [openOn]=\"'click'\"\n [closeOn]=\"'click'\"\n (onOpening)=\"handleMessageContextMenuOpening($event, message)\"\n (onClose)=\"contextMenuMessageId.set(null)\"\n (onItemClick)=\"handleMessageContextMenuItemClick($event, message)\"\n >\n </ax-context-menu>\n </div>\n }\n }\n </div>\n\n <!-- Scroll to Bottom Button -->\n @if (showScrollButton()) {\n <div\n class=\"scroll-to-bottom-wrapper\"\n animate.enter=\"scroll-to-bottom-enter\"\n animate.leave=\"scroll-to-bottom-leave\"\n >\n <ax-fab\n class=\"scroll-to-bottom\"\n (onClick)=\"scrollToBottom()\"\n [attr.aria-label]=\"'@acorex:chat.actions.scroll-to-bottom' | translate | async\"\n >\n <ax-icon><i class=\"fa-light fa-arrow-down\" aria-hidden=\"true\"></i></ax-icon>\n </ax-fab>\n </div>\n }\n }\n </div>\n }\n\n <!-- Reaction Picker Popover -->\n @if (reactionsEnabled() && reactionPickerTarget()) {\n <ax-popover\n #reactionPopover\n [target]=\"reactionPickerElement()\"\n [openOn]=\"'manual'\"\n [closeOn]=\"'clickOut'\"\n [placement]=\"reactionPickerPlacement()\"\n (onClose)=\"closeReactionPicker()\"\n >\n <div class=\"reaction-picker-popup\">\n <div class=\"reaction-picker-header\">\n <span class=\"picker-title\">{{ '@acorex:chat.actions.react' | translate | async }}</span>\n <button\n type=\"button\"\n class=\"picker-close\"\n (click)=\"closeReactionPicker()\"\n [attr.aria-label]=\"'@acorex:chat.actions.close' | translate | async\"\n >\n <i class=\"fa-light fa-xmark\"></i>\n </button>\n </div>\n <div\n class=\"reaction-picker-emojis\"\n role=\"listbox\"\n [attr.aria-label]=\"'@acorex:chat.actions.choose-reaction' | translate | async\"\n >\n @for (emoji of availableReactions(); track emoji) {\n <button\n type=\"button\"\n class=\"reaction-picker-emoji\"\n [class.reaction-picker-emoji-active]=\"hasUserReactedById(reactionPickerTarget()!, emoji)\"\n (click)=\"onReactionClickById(reactionPickerTarget()!, emoji); closeReactionPicker()\"\n [attr.aria-label]=\"emoji\"\n >\n {{ emoji }}\n </button>\n }\n </div>\n </div>\n </ax-popover>\n }\n} @else {\n <div\n class=\"message-list message-list--no-active\"\n role=\"region\"\n [attr.aria-label]=\"'@acorex:chat.status.no-conversation-selected' | translate | async\"\n >\n <div class=\"list-no-active\">\n <ng-content select=\"ax-conversation-message-list-no-active, [ax-conversation-message-list-no-active]\">\n <ng-container *ngComponentOutlet=\"noActiveFallbackComponent\"></ng-container>\n </ng-content>\n </div>\n </div>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-message-list{position:relative;display:block;height:100%;container-type:inline-size;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}@keyframes messagesSkeletonIn{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes messagesSkeletonInReduced{0%{opacity:.85}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterPrepend{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeavePrepend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.35rem)}}@keyframes axScrollToBottomEnter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes axScrollToBottomLeave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}}ax-conversation-message-list .message-list{position:relative;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden}ax-conversation-message-list .message-list.ax-drop-zone>.ax-uploader-overlay-state{display:none!important}ax-conversation-message-list .message-list--drag{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:rgba(var(--ax-sys-color-primary-surface));--tw-outline-style: dashed;outline-style:dashed;outline-offset:-2px}ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceIn .36s cubic-bezier(.22,1,.36,1) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceInReduced .18s ease both}}ax-conversation-message-list .list-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;justify-content:flex-end;overflow:hidden}ax-conversation-message-list .messages-skeleton{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 6);animation:messagesSkeletonIn .42s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .message-skeleton{display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .message-skeleton--own{flex-direction:row-reverse}ax-conversation-message-list .message-skeleton-avatar{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-message-list .message-skeleton-bubble{height:calc(var(--spacing, .25rem) * 10);border-radius:var(--radius-2xl, 1rem);width:min(62%,17.5rem)}ax-conversation-message-list .message-skeleton-bubble--short{height:calc(var(--spacing, .25rem) * 8);width:min(36%,9.5rem)}ax-conversation-message-list .message-skeleton-bubble--medium{height:calc(var(--spacing, .25rem) * 9);width:min(48%,13rem)}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .messages-skeleton{animation:messagesSkeletonInReduced .2s ease both}}ax-conversation-message-list .list-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 5);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;animation:fadeInUp .5s ease-out}ax-conversation-message-list .message-list--no-active{height:100%}ax-conversation-message-list .list-no-active{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;align-items:center;justify-content:center}ax-conversation-message-list .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:5.5rem;--tw-leading: 1;line-height:1;opacity:35%;filter:grayscale(.2)}ax-conversation-message-list .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:1.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-tight, -.025em);letter-spacing:var(--tracking-tight, -.025em);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-message-list .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:420px;font-size:1.0625rem;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-message-list .spinner{margin-bottom:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:3px;border-color:rgba(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));animation:spin .8s linear infinite}ax-conversation-message-list .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 2);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:.3rem}ax-conversation-message-list .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-message-list .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-message-list .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-message-list .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-message-list .load-more-enter{animation:axChatLoadMoreEnterPrepend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .load-more-leave{animation:axChatLoadMoreLeavePrepend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .load-more-dot{animation:none;opacity:.65}ax-conversation-message-list .load-more-enter,ax-conversation-message-list .load-more-leave{animation:none}}ax-conversation-message-list .messages-container{position:relative;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex:1;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .date-separator{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:150;display:flex;align-items:center;justify-content:center;padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .date-text{display:flex;width:calc(var(--spacing, .25rem) * 28);align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-conversation-message-list .unread-separator{margin-block:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4)}ax-conversation-message-list .unread-separator-line{height:1px;flex:1;background-color:rgba(var(--ax-sys-color-primary-surface));opacity:30%}ax-conversation-message-list .unread-separator-text{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--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);white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}ax-conversation-message-list .message-item{position:relative;display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);transition:background-color .3s ease}ax-conversation-message-list .message-item-context-active{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.09);box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.22)}ax-conversation-message-list .message-own.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.12)}ax-conversation-message-list .message-highlight{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-message-list .message-item.message-own{flex-direction:row-reverse}ax-conversation-message-list .message-avatar{flex-shrink:0}ax-conversation-message-list .message-avatar-icon{display:flex;height:100%;width:100%;align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-message-list .message-content-row{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:0 1 auto;flex-direction:row;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 1);max-width:min(95%,50rem)}@container (min-width: 768px){ax-conversation-message-list .message-content-row{max-width:min(70%,50rem)}}ax-conversation-message-list .message-content-row-own{justify-content:flex-end}ax-conversation-message-list .message-item:not(.message-own) .message-content-row{justify-content:flex-start}ax-conversation-message-list .message-bubble-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1 1 auto;flex-direction:column}ax-conversation-message-list .message-own .message-bubble-container{align-items:flex-end}ax-conversation-message-list .message-sender{margin-bottom:.1rem;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-bubble{position:relative;display:flex;max-width:100%;flex-direction:column;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2);padding-bottom:.1rem;overflow-wrap:break-word;transition:background-color .3s ease}ax-conversation-message-list .reply-preview{margin-bottom:.1rem;cursor:pointer;border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .reply-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .reply-preview-line{width:3px;flex-shrink:0;border-radius:1.5px;background:currentColor;opacity:.5}ax-conversation-message-list .reply-preview-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-message-list .reply-preview-sender{margin-bottom:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .reply-preview-text{overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .reply-preview-sender{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .reply-preview-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .last-message{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .forwarded-preview{margin-bottom:.1rem;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .forwarded-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .forwarded-preview i{flex-shrink:0;font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .forwarded-text{min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .forwarded-preview i{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .forwarded-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .message-bubble-received{border-end-start-radius:.125rem}ax-conversation-message-list .message-bubble-received:before,ax-conversation-message-list .message-bubble-sent:after{content:\"\";display:block;position:absolute;bottom:0;width:.8rem;height:.8rem;pointer-events:none;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;mask-mode:alpha}ax-conversation-message-list .message-bubble-received:before{background-color:rgba(var(--ax-sys-color-lightest-surface));inset-inline-start:-.7rem;-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}ax-conversation-message-list .message-bubble-sent{border-end-end-radius:.125rem}ax-conversation-message-list .message-bubble-sent:after{background:rgb(var(--ax-sys-color-primary-surface));inset-inline-end:-.7rem;-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}[dir=rtl] ax-conversation-message-list .message-bubble-received:before{-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}ax-conversation-message-list:dir(rtl) .message-bubble-received:before{-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}[dir=rtl] ax-conversation-message-list .message-bubble-sent:after{-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}ax-conversation-message-list:dir(rtl) .message-bubble-sent:after{-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}[dir=ltr] ax-conversation-message-list .message-bubble-received:before{-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}[dir=ltr] ax-conversation-message-list .message-bubble-sent:after{-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}ax-conversation-message-list .message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}ax-conversation-message-list .message-bubble.message-system{background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);max-width:100%}ax-conversation-message-list .message-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}ax-conversation-message-list .message-item:has(.message-system){justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .message-item:has(.message-system) .message-content-row{max-width:100%;justify-content:center}ax-conversation-message-list .message-item:has(.message-system) .message-bubble-container{align-items:center}ax-conversation-message-list .message-content{font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);white-space:pre-wrap}ax-conversation-message-list ax-conversation-registry-component-outlet{display:block;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-conversation-message-list .message-footer{margin-top:.1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1);padding-inline-start:calc(var(--spacing, .25rem) * 1);font-size:.6875rem;--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%;-webkit-user-select:none;user-select:none}ax-conversation-message-list .message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .message-footer-count i{font-size:.625rem;opacity:90%}ax-conversation-message-list .message-footer-count-value{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-footer-split{margin-inline:.2rem;height:.65rem;width:1px;flex-shrink:0;align-self:center;background-color:rgba(var(--ax-sys-color-border-light-surface));opacity:90%}ax-conversation-message-list .message-time{font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .edited-indicator{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline-start:.35rem;font-size:.675rem;opacity:75%}ax-conversation-message-list .status-icon{display:inline-flex;align-items:center}ax-conversation-message-list .status-icon i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}ax-conversation-message-list .status-read{color:rgba(var(--ax-sys-color-primary-200))}ax-conversation-message-list .status-failed{color:rgba(var(--ax-sys-color-danger-200))}ax-conversation-message-list .message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}ax-conversation-message-list .reaction-bubble{margin:calc(var(--spacing, .25rem) * 0);display:inline-flex;min-height:1.375rem;cursor:pointer;align-items:center;justify-content:center;gap:.15rem;border-radius:var(--radius-xl, .75rem);padding-inline:.35rem;padding-block:.1rem;color:rgba(var(--ax-sys-color-on-surface));--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background:rgba(var(--ax-sys-color-on-surface),.06);border:1px solid rgba(var(--ax-sys-color-on-surface),.1);transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ax-conversation-message-list .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}ax-conversation-message-list .reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-message-list .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}ax-conversation-message-list .reaction-emoji{display:inline-block;font-size:.8125rem;--tw-leading: 1;line-height:1}ax-conversation-message-list .reaction-count{font-size:.6875rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:.65}ax-conversation-message-list .reaction-bubble-active .reaction-count{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600));opacity:95%}ax-conversation-message-list .message-own .reaction-bubble{color:rgba(var(--ax-sys-color-on-primary-surface));background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2)}ax-conversation-message-list .message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}ax-conversation-message-list .message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}ax-conversation-message-list .message-own .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:80%}ax-conversation-message-list .message-own .reaction-bubble-active .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:100%}ax-conversation-message-list .message-reactions-container{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.2rem}ax-conversation-message-list .message-own .message-reactions-container{justify-content:flex-end}ax-conversation-message-list .message-own .message-footer .edited-indicator{border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .message-footer .message-footer-split{background:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .add-reaction-button.add-reaction-outside{position:absolute;top:50%;margin:calc(var(--spacing, .25rem) * 0);box-sizing:border-box;display:none;height:1.8rem;width:1.8rem;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 0);inset-inline-end:-2.25rem;box-shadow:0 1px 2px #0000000f}ax-conversation-message-list .add-reaction-button{padding-inline-start:.05rem}ax-conversation-message-list .message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.25rem;inset-inline-end:auto}ax-conversation-message-list .message-item:hover .add-reaction-button.add-reaction-outside,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}ax-conversation-message-list .add-reaction-button.add-reaction-outside:hover,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgba(var(--ax-sys-color-on-surface));opacity:80%}ax-conversation-message-list .reaction-bubble:focus-visible,ax-conversation-message-list .add-reaction-button:focus-visible,ax-conversation-message-list .action-trigger:focus-visible,ax-conversation-message-list ax-fab.scroll-to-bottom ax-button: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-message-list .message-actions{z-index:10;padding-bottom:calc(var(--spacing, .25rem) * 6);opacity:0%;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .message-item:hover .message-actions{opacity:100%}ax-conversation-message-list .action-trigger{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .action-trigger:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-message-list .shortcut{font-size:.6875rem;opacity:70%}ax-conversation-message-list .scroll-to-bottom-wrapper{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);bottom:calc(var(--spacing, .25rem) * 4);z-index:999}ax-conversation-message-list ax-fab.scroll-to-bottom ax-button{display:flex;height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none}ax-conversation-message-list .scroll-to-bottom-enter{animation:axScrollToBottomEnter var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}ax-conversation-message-list .scroll-to-bottom-leave{animation:axScrollToBottomLeave var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .scroll-to-bottom-enter,ax-conversation-message-list .scroll-to-bottom-leave{animation:none}}.reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(260px,92vw)}.reaction-picker-header{display:flex;min-height:calc(var(--spacing, .25rem) * 0);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:.45rem;padding-inline-start:.7rem;padding-inline-end:calc(var(--spacing, .25rem) * 2)}.picker-title{font-size:.8125rem;--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-on-surface));opacity:85%}.picker-close{display:flex;height:1.6rem;width:1.6rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:.95rem;color:rgba(var(--ax-sys-color-on-surface),.55);transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}.picker-close:focus-visible,.reaction-picker-emoji:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.2rem;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:.45rem;padding-bottom:calc(var(--spacing, .25rem) * 2)}.reaction-picker-emoji{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;border-radius:.45rem;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:1.15rem;--tw-leading: 1;line-height:1;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{transform:translate3d(0,100%,0);opacity:0}}@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-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXFabComponent, selector: "ax-fab", inputs: ["label", "popupStyle", "popupPlacement", "size"], outputs: ["popupPlacementChange", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXConversationInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge", "scrollDisabled", "cooldownMs"], outputs: ["scrollThreshold"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept", "fileType", "overlayTemplate", "disableBrowse", "disableDragDrop"], outputs: ["fileChange", "onChanged", "dragEnter", "dragLeave", "dragOver", "onFileUploadComplete", "onFilesUploadComplete"] }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXFormatPipe, name: "format" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
7900
7973
  }
7901
7974
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationMessageListComponent, decorators: [{
7902
7975
  type: Component,
@@ -7916,7 +7989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
7916
7989
  AXUploaderZoneDirective,
7917
7990
  AXConversationAvatarComponent,
7918
7991
  AXConversationRegistryComponentOutletComponent,
7919
- ], template: "@if (activeConversation(); as conv) {\n @for (cid of [conv.id]; track cid) {\n <div\n class=\"message-list message-list--conversation-surface\"\n [class.message-list--drag]=\"messageListDragging()\"\n #messageList\n role=\"log\"\n [attr.aria-label]=\"'@acorex:chat.aria.message-list' | translate | async\"\n aria-live=\"polite\"\n [style.background]=\"messageListBackgroundStyle()\"\n axUploaderZone\n [disableBrowse]=\"true\"\n (dragEnter)=\"onMessageListDragEnter()\"\n (dragLeave)=\"onMessageListDragLeave()\"\n (fileChange)=\"onMessageListFilesDropped($event)\"\n >\n @if (loading()) {\n <div\n class=\"list-loading\"\n role=\"status\"\n aria-busy=\"true\"\n [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n >\n <div class=\"messages-skeleton\" aria-hidden=\"true\">\n @for (item of loadingSkeletonItems; track item) {\n <div class=\"message-skeleton\" [class.message-skeleton--own]=\"$odd\">\n @if ($even && isGroupConversation()) {\n <ax-skeleton class=\"message-skeleton-avatar\" [animated]=\"true\"></ax-skeleton>\n }\n <ax-skeleton\n class=\"message-skeleton-bubble\"\n [class.message-skeleton-bubble--short]=\"$index % 3 === 1\"\n [class.message-skeleton-bubble--medium]=\"$index % 3 === 2\"\n [animated]=\"true\"\n ></ax-skeleton>\n </div>\n }\n </div>\n </div>\n } @else if (messages().length === 0) {\n <div class=\"list-empty\" role=\"status\" [attr.aria-label]=\"'@acorex:chat.status.no-messages' | translate | async\">\n <ng-content select=\"ax-conversation-message-list-empty, [ax-conversation-message-list-empty]\">\n <ng-container\n *ngComponentOutlet=\"resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }\"\n ></ng-container>\n </ng-content>\n </div>\n } @else {\n <div\n class=\"messages-container\"\n (scroll)=\"onScroll($event)\"\n axInfiniteScroll\n [threshold]=\"config.infiniteScrollThreshold\"\n [edge]=\"'top'\"\n [scrollDisabled]=\"loading() || loadingMore() || !hasMoreMessages()\"\n (scrollThreshold)=\"onScrollThreshold($event)\"\n #messagesContainer\n role=\"feed\"\n [attr.aria-label]=\"'@acorex:chat.aria.messages' | translate | async\"\n >\n @if (loadingMore()) {\n <div\n class=\"list-loading-more list-loading-more--prepend\"\n role=\"status\"\n animate.enter=\"load-more-enter\"\n animate.leave=\"load-more-leave\"\n [attr.aria-label]=\"'@acorex:chat.status.loading-older-messages' | translate | async\"\n >\n <div class=\"load-more-indicator\" aria-hidden=\"true\">\n <span class=\"load-more-dot\"></span>\n <span class=\"load-more-dot\"></span>\n <span class=\"load-more-dot\"></span>\n </div>\n <ax-label class=\"load-more-label\">{{\n '@acorex:chat.status.loading-older-messages' | translate | async\n }}</ax-label>\n </div>\n }\n @for (group of messageGroups(); track trackMessageGroup($index, group)) {\n <!-- Date Separator -->\n <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\">\n <ax-badge [text]=\"group.dateLabel\" class=\"date-text\"></ax-badge>\n </div>\n\n <!-- Messages in this date group -->\n @for (message of group.messages; track trackMessage($index, message)) {\n <div\n [class]=\"getMessageClasses(message)\"\n role=\"article\"\n [attr.aria-label]=\"getMessageAriaLabel(message)\"\n [id]=\"'message-' + message.id\"\n >\n <!-- Avatar (only for group conversations and received messages) -->\n @if (shouldShowAvatar(message)) {\n <div class=\"message-avatar\">\n <ax-conversation-avatar\n kind=\"user\"\n [userId]=\"message.senderId\"\n [conversation]=\"activeConversation()\"\n [message]=\"message\"\n [size]=\"32\"\n />\n </div>\n }\n\n <div class=\"message-content-row\" [class.message-content-row-own]=\"isOwnMessage(message)\">\n @if (messageSupportsReactions(message)) {\n <button\n type=\"button\"\n class=\"add-reaction-button add-reaction-outside\"\n [class.add-reaction-visible]=\"reactionPickerTarget() === message.id\"\n (click)=\"toggleReactionPicker(message, $event)\"\n [attr.aria-label]=\"'@acorex:chat.actions.add-reaction' | translate | async\"\n #reactionButton\n >\n <i class=\"fa-light fa-face-smile\"></i>\n </button>\n }\n\n <div\n class=\"message-bubble-container\"\n [id]=\"'message-bubble-' + message.id\"\n [attr.data-message-id]=\"message.id\"\n >\n <div\n [class]=\"getBubbleClasses(message)\"\n [class.message-bubble-sent]=\"message.senderId === currentUser()?.id\"\n [class.message-bubble-received]=\"message.senderId !== currentUser()?.id\"\n >\n <!-- Sender name (only for group conversations and received messages) -->\n @if (shouldShowSenderName(message)) {\n <div class=\"message-sender\">{{ getSenderName(message) }}:</div>\n }\n\n <!-- Reply Preview -->\n @if (message.replyTo) {\n <div\n class=\"reply-preview\"\n (click)=\"scrollToMessage(message.replyTo.id)\"\n role=\"button\"\n [attr.aria-label]=\"'Reply to ' + getSenderName(message.replyTo)\"\n (keydown.enter)=\"scrollToMessage(message.replyTo.id)\"\n (keydown.space)=\"scrollToMessage(message.replyTo.id)\"\n >\n <div class=\"reply-preview-content\">\n <div class=\"reply-preview-sender\">{{ getSenderName(message.replyTo) }}</div>\n <div class=\"reply-preview-text\">\n @if (getMessagePreviewText(message.replyTo); as preview) {\n <span class=\"last-message\">\n @if (preview.type !== 'text') {\n <i [class]=\"preview.icon\"></i\n >{{ '@acorex:chat.' + preview.type | translate | async }}\n } @else {\n {{ preview.value }}\n }\n </span>\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Forwarded Indicator -->\n @if (message.forwarded) {\n <div class=\"forwarded-preview\">\n <i class=\"fa-solid fa-share\"></i>\n <span class=\"forwarded-text\">{{ getForwardedText(message) }}</span>\n </div>\n }\n\n <ax-conversation-registry-component-outlet\n [component]=\"getRendererComponent(message)\"\n [componentLoader]=\"getRendererComponentLoader(message)\"\n [inputs]=\"getRendererInputs(message)\"\n />\n\n @if (messageSupportsReactions(message) && message.reactions.length > 0) {\n <div class=\"message-reactions-container\">\n <div class=\"message-reactions-bubbles\">\n @for (reaction of getGroupedReactions(message); track reaction.emoji) {\n <button\n type=\"button\"\n class=\"reaction-bubble\"\n [class.reaction-bubble-active]=\"reaction.hasReacted\"\n (click)=\"onReactionClick(message, reaction.emoji)\"\n [attr.aria-label]=\"reaction.emoji + ' ' + reaction.count\"\n >\n <span class=\"reaction-emoji\">{{ reaction.emoji }}</span>\n @if (reaction.count > 1) {\n <span class=\"reaction-count\">{{ reaction.count }}</span>\n }\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Message Footer -->\n <div class=\"message-footer\">\n @let replyCount = getReplyCount(message);\n @let forwardCount = getForwardCount(message);\n @if (replyCount > 0) {\n <span class=\"message-footer-count\" [attr.aria-label]=\"replyCount + ' replies'\">\n <i class=\"fa-solid fa-message\" aria-hidden=\"true\"></i>\n <span class=\"message-footer-count-value\">{{ replyCount }}</span>\n </span>\n }\n @if (forwardCount > 0) {\n <span class=\"message-footer-count\" [attr.aria-label]=\"forwardCount + ' forwards'\">\n <i class=\"fa-solid fa-share\" aria-hidden=\"true\"></i>\n <span class=\"message-footer-count-value\">{{ forwardCount }}</span>\n </span>\n }\n @if (replyCount > 0 || forwardCount > 0) {\n <span class=\"message-footer-split\" aria-hidden=\"true\"></span>\n }\n <span class=\"message-time\">{{ message.timestamp | format: 'timeleft' | async }}</span>\n @if (message.editedAt) {\n <span class=\"edited-indicator\">\n <span>{{ '@acorex:chat.status.edited' | translate | async }}</span>\n </span>\n }\n @if (isOwnMessage(message)) {\n <span [class]=\"getStatusIconClasses(message)\">\n <ax-icon><i [class]=\"getStatusIcon(message)\"></i></ax-icon>\n </span>\n }\n </div>\n </div>\n </div>\n </div>\n\n <!-- Context Menu for Message Actions -->\n <ax-context-menu\n [target]=\"'#message-bubble-' + message.id\"\n [openOn]=\"'click'\"\n [closeOn]=\"'click'\"\n (onOpening)=\"handleMessageContextMenuOpening($event, message)\"\n (onClose)=\"contextMenuMessageId.set(null)\"\n (onItemClick)=\"handleMessageContextMenuItemClick($event, message)\"\n >\n </ax-context-menu>\n </div>\n }\n }\n </div>\n\n <!-- Scroll to Bottom Button -->\n @if (showScrollButton()) {\n <div\n class=\"scroll-to-bottom-wrapper\"\n animate.enter=\"scroll-to-bottom-enter\"\n animate.leave=\"scroll-to-bottom-leave\"\n >\n <ax-fab\n class=\"scroll-to-bottom\"\n (onClick)=\"scrollToBottom()\"\n [attr.aria-label]=\"'@acorex:chat.actions.scroll-to-bottom' | translate | async\"\n >\n <ax-icon><i class=\"fa-light fa-arrow-down\" aria-hidden=\"true\"></i></ax-icon>\n </ax-fab>\n </div>\n }\n }\n </div>\n }\n\n <!-- Reaction Picker Popover -->\n @if (reactionsEnabled() && reactionPickerTarget()) {\n <ax-popover\n #reactionPopover\n [target]=\"reactionPickerElement()\"\n [openOn]=\"'manual'\"\n [closeOn]=\"'clickOut'\"\n [placement]=\"reactionPickerPlacement()\"\n (onClose)=\"closeReactionPicker()\"\n >\n <div class=\"reaction-picker-popup\">\n <div class=\"reaction-picker-header\">\n <span class=\"picker-title\">{{ '@acorex:chat.actions.react' | translate | async }}</span>\n <button\n type=\"button\"\n class=\"picker-close\"\n (click)=\"closeReactionPicker()\"\n [attr.aria-label]=\"'@acorex:chat.actions.close' | translate | async\"\n >\n <i class=\"fa-light fa-xmark\"></i>\n </button>\n </div>\n <div\n class=\"reaction-picker-emojis\"\n role=\"listbox\"\n [attr.aria-label]=\"'@acorex:chat.actions.choose-reaction' | translate | async\"\n >\n @for (emoji of availableReactions(); track emoji) {\n <button\n type=\"button\"\n class=\"reaction-picker-emoji\"\n [class.reaction-picker-emoji-active]=\"hasUserReactedById(reactionPickerTarget()!, emoji)\"\n (click)=\"onReactionClickById(reactionPickerTarget()!, emoji); closeReactionPicker()\"\n [attr.aria-label]=\"emoji\"\n >\n {{ emoji }}\n </button>\n }\n </div>\n </div>\n </ax-popover>\n }\n} @else {\n <div\n class=\"message-list message-list--no-active\"\n role=\"region\"\n [attr.aria-label]=\"'@acorex:chat.status.no-conversation-selected' | translate | async\"\n >\n <div class=\"list-no-active\">\n <ng-content select=\"ax-conversation-message-list-no-active, [ax-conversation-message-list-no-active]\">\n <ng-container *ngComponentOutlet=\"noActiveFallbackComponent\"></ng-container>\n </ng-content>\n </div>\n </div>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-message-list{position:relative;display:block;height:100%;container-type:inline-size;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}@keyframes messagesSkeletonIn{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes messagesSkeletonInReduced{0%{opacity:.85}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterPrepend{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeavePrepend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.35rem)}}@keyframes axScrollToBottomEnter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes axScrollToBottomLeave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}}ax-conversation-message-list .message-list{position:relative;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden}ax-conversation-message-list .message-list.ax-drop-zone>.ax-uploader-overlay-state{display:none!important}ax-conversation-message-list .message-list--drag{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:rgba(var(--ax-sys-color-primary-surface));--tw-outline-style: dashed;outline-style:dashed;outline-offset:-2px}ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceIn .36s cubic-bezier(.22,1,.36,1) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceInReduced .18s ease both}}ax-conversation-message-list .list-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;justify-content:flex-end;overflow:hidden}ax-conversation-message-list .messages-skeleton{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 6);animation:messagesSkeletonIn .42s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .message-skeleton{display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .message-skeleton--own{flex-direction:row-reverse}ax-conversation-message-list .message-skeleton-avatar{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-message-list .message-skeleton-bubble{height:calc(var(--spacing, .25rem) * 10);border-radius:var(--radius-2xl, 1rem);width:min(62%,17.5rem)}ax-conversation-message-list .message-skeleton-bubble--short{height:calc(var(--spacing, .25rem) * 8);width:min(36%,9.5rem)}ax-conversation-message-list .message-skeleton-bubble--medium{height:calc(var(--spacing, .25rem) * 9);width:min(48%,13rem)}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .messages-skeleton{animation:messagesSkeletonInReduced .2s ease both}}ax-conversation-message-list .list-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 5);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;animation:fadeInUp .5s ease-out}ax-conversation-message-list .message-list--no-active{height:100%}ax-conversation-message-list .list-no-active{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;align-items:center;justify-content:center}ax-conversation-message-list .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:5.5rem;--tw-leading: 1;line-height:1;opacity:35%;filter:grayscale(.2)}ax-conversation-message-list .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:1.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-tight, -.025em);letter-spacing:var(--tracking-tight, -.025em);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-message-list .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:420px;font-size:1.0625rem;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-message-list .spinner{margin-bottom:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:3px;border-color:rgba(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));animation:spin .8s linear infinite}ax-conversation-message-list .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 2);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:.3rem}ax-conversation-message-list .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-message-list .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-message-list .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-message-list .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-message-list .load-more-enter{animation:axChatLoadMoreEnterPrepend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .load-more-leave{animation:axChatLoadMoreLeavePrepend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .load-more-dot{animation:none;opacity:.65}ax-conversation-message-list .load-more-enter,ax-conversation-message-list .load-more-leave{animation:none}}ax-conversation-message-list .messages-container{position:relative;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex:1;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .date-separator{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:150;display:flex;align-items:center;justify-content:center;padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .date-text{display:flex;width:calc(var(--spacing, .25rem) * 28);align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-conversation-message-list .unread-separator{margin-block:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4)}ax-conversation-message-list .unread-separator-line{height:1px;flex:1;background-color:rgba(var(--ax-sys-color-primary-surface));opacity:30%}ax-conversation-message-list .unread-separator-text{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--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);white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}ax-conversation-message-list .message-item{position:relative;display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);transition:background-color .3s ease}ax-conversation-message-list .message-item-context-active{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.09);box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.22)}ax-conversation-message-list .message-own.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.12)}ax-conversation-message-list .message-highlight{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-message-list .message-item.message-own{flex-direction:row-reverse}ax-conversation-message-list .message-avatar{flex-shrink:0}ax-conversation-message-list .message-avatar-icon{display:flex;height:100%;width:100%;align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-message-list .message-content-row{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:0 1 auto;flex-direction:row;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 1);max-width:min(95%,50rem)}@container (min-width: 768px){ax-conversation-message-list .message-content-row{max-width:min(70%,50rem)}}ax-conversation-message-list .message-content-row-own{justify-content:flex-end}ax-conversation-message-list .message-item:not(.message-own) .message-content-row{justify-content:flex-start}ax-conversation-message-list .message-bubble-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1 1 auto;flex-direction:column}ax-conversation-message-list .message-own .message-bubble-container{align-items:flex-end}ax-conversation-message-list .message-sender{margin-bottom:.1rem;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-bubble{position:relative;display:flex;max-width:100%;flex-direction:column;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2);padding-bottom:.1rem;overflow-wrap:break-word;transition:background-color .3s ease}ax-conversation-message-list .reply-preview{margin-bottom:.1rem;cursor:pointer;border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .reply-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .reply-preview-line{width:3px;flex-shrink:0;border-radius:1.5px;background:currentColor;opacity:.5}ax-conversation-message-list .reply-preview-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-message-list .reply-preview-sender{margin-bottom:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .reply-preview-text{overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .reply-preview-sender{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .reply-preview-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .last-message{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .forwarded-preview{margin-bottom:.1rem;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .forwarded-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .forwarded-preview i{flex-shrink:0;font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .forwarded-text{min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .forwarded-preview i{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .forwarded-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .message-bubble-received{border-end-start-radius:.125rem}ax-conversation-message-list .message-bubble-received:before{content:\"\";display:block;position:absolute;bottom:calc(var(--spacing, .25rem) * 0);height:.8rem;width:.8rem;background-color:rgba(var(--ax-sys-color-lightest-surface));inset-inline-start:-.7rem;border-start-start-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-bubble-sent{border-end-end-radius:.125rem}ax-conversation-message-list .message-bubble-sent:after{content:\"\";display:block;width:.8rem;height:.8rem;position:absolute;bottom:0;background:rgb(var(--ax-sys-color-primary-surface));inset-inline-end:-.7rem;border-start-end-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}ax-conversation-message-list .message-bubble.message-system{background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);max-width:100%}ax-conversation-message-list .message-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}ax-conversation-message-list .message-item:has(.message-system){justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .message-item:has(.message-system) .message-content-row{max-width:100%;justify-content:center}ax-conversation-message-list .message-item:has(.message-system) .message-bubble-container{align-items:center}ax-conversation-message-list .message-content{font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);white-space:pre-wrap}ax-conversation-message-list ax-conversation-registry-component-outlet{display:block;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-conversation-message-list .message-footer{margin-top:.1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1);padding-inline-start:calc(var(--spacing, .25rem) * 1);font-size:.6875rem;--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%;-webkit-user-select:none;user-select:none}ax-conversation-message-list .message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .message-footer-count i{font-size:.625rem;opacity:90%}ax-conversation-message-list .message-footer-count-value{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-footer-split{margin-inline:.2rem;height:.65rem;width:1px;flex-shrink:0;align-self:center;background-color:rgba(var(--ax-sys-color-border-light-surface));opacity:90%}ax-conversation-message-list .message-time{font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .edited-indicator{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline-start:.35rem;font-size:.675rem;opacity:75%}ax-conversation-message-list .status-icon{display:inline-flex;align-items:center}ax-conversation-message-list .status-icon i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}ax-conversation-message-list .status-read{color:rgba(var(--ax-sys-color-primary-200))}ax-conversation-message-list .status-failed{color:rgba(var(--ax-sys-color-danger-200))}ax-conversation-message-list .message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}ax-conversation-message-list .reaction-bubble{margin:calc(var(--spacing, .25rem) * 0);display:inline-flex;min-height:1.375rem;cursor:pointer;align-items:center;justify-content:center;gap:.15rem;border-radius:var(--radius-xl, .75rem);padding-inline:.35rem;padding-block:.1rem;color:rgba(var(--ax-sys-color-on-surface));--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background:rgba(var(--ax-sys-color-on-surface),.06);border:1px solid rgba(var(--ax-sys-color-on-surface),.1);transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ax-conversation-message-list .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}ax-conversation-message-list .reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-message-list .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}ax-conversation-message-list .reaction-emoji{display:inline-block;font-size:.8125rem;--tw-leading: 1;line-height:1}ax-conversation-message-list .reaction-count{font-size:.6875rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:.65}ax-conversation-message-list .reaction-bubble-active .reaction-count{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600));opacity:95%}ax-conversation-message-list .message-own .reaction-bubble{color:rgba(var(--ax-sys-color-on-primary-surface));background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2)}ax-conversation-message-list .message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}ax-conversation-message-list .message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}ax-conversation-message-list .message-own .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:80%}ax-conversation-message-list .message-own .reaction-bubble-active .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:100%}ax-conversation-message-list .message-reactions-container{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.2rem}ax-conversation-message-list .message-own .message-reactions-container{justify-content:flex-end}ax-conversation-message-list .message-own .message-footer .edited-indicator{border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .message-footer .message-footer-split{background:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .add-reaction-button.add-reaction-outside{position:absolute;top:50%;margin:calc(var(--spacing, .25rem) * 0);box-sizing:border-box;display:none;height:1.8rem;width:1.8rem;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 0);inset-inline-end:-2.25rem;box-shadow:0 1px 2px #0000000f}ax-conversation-message-list .add-reaction-button{padding-inline-start:.05rem}ax-conversation-message-list .message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.25rem;inset-inline-end:auto}ax-conversation-message-list .message-item:hover .add-reaction-button.add-reaction-outside,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}ax-conversation-message-list .add-reaction-button.add-reaction-outside:hover,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgba(var(--ax-sys-color-on-surface));opacity:80%}ax-conversation-message-list .reaction-bubble:focus-visible,ax-conversation-message-list .add-reaction-button:focus-visible,ax-conversation-message-list .action-trigger:focus-visible,ax-conversation-message-list ax-fab.scroll-to-bottom ax-button: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-message-list .message-actions{z-index:10;padding-bottom:calc(var(--spacing, .25rem) * 6);opacity:0%;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .message-item:hover .message-actions{opacity:100%}ax-conversation-message-list .action-trigger{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .action-trigger:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-message-list .shortcut{font-size:.6875rem;opacity:70%}ax-conversation-message-list .scroll-to-bottom-wrapper{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);bottom:calc(var(--spacing, .25rem) * 4);z-index:999}ax-conversation-message-list ax-fab.scroll-to-bottom ax-button{display:flex;height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none}ax-conversation-message-list .scroll-to-bottom-enter{animation:axScrollToBottomEnter var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}ax-conversation-message-list .scroll-to-bottom-leave{animation:axScrollToBottomLeave var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .scroll-to-bottom-enter,ax-conversation-message-list .scroll-to-bottom-leave{animation:none}}.reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a}.reaction-picker-header{display:flex;min-height:calc(var(--spacing, .25rem) * 0);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:.45rem;padding-inline-start:.7rem;padding-inline-end:calc(var(--spacing, .25rem) * 2)}.picker-title{font-size:.8125rem;--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-on-surface));opacity:85%}.picker-close{display:flex;height:1.6rem;width:1.6rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:.95rem;color:rgba(var(--ax-sys-color-on-surface),.55);transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}.picker-close:focus-visible,.reaction-picker-emoji:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.2rem;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:.45rem;padding-bottom:calc(var(--spacing, .25rem) * 2)}.reaction-picker-emoji{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;border-radius:.45rem;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:1.15rem;--tw-leading: 1;line-height:1;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{transform:translate3d(0,100%,0);opacity:0}}@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-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
7992
+ ], template: "@if (activeConversation(); as conv) {\n @for (cid of [conv.id]; track cid) {\n <div\n class=\"message-list message-list--conversation-surface\"\n [class.message-list--drag]=\"messageListDragging()\"\n #messageList\n role=\"log\"\n [attr.aria-label]=\"'@acorex:chat.aria.message-list' | translate | async\"\n aria-live=\"polite\"\n [style.background]=\"messageListBackgroundStyle()\"\n axUploaderZone\n [disableBrowse]=\"true\"\n (dragEnter)=\"onMessageListDragEnter()\"\n (dragLeave)=\"onMessageListDragLeave()\"\n (fileChange)=\"onMessageListFilesDropped($event)\"\n >\n @if (loading()) {\n <div\n class=\"list-loading\"\n role=\"status\"\n aria-busy=\"true\"\n [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n >\n <div class=\"messages-skeleton\" aria-hidden=\"true\">\n @for (item of loadingSkeletonItems; track item) {\n <div class=\"message-skeleton\" [class.message-skeleton--own]=\"$odd\">\n @if ($even && isGroupConversation()) {\n <ax-skeleton class=\"message-skeleton-avatar\" [animated]=\"true\"></ax-skeleton>\n }\n <ax-skeleton\n class=\"message-skeleton-bubble\"\n [class.message-skeleton-bubble--short]=\"$index % 3 === 1\"\n [class.message-skeleton-bubble--medium]=\"$index % 3 === 2\"\n [animated]=\"true\"\n ></ax-skeleton>\n </div>\n }\n </div>\n </div>\n } @else if (messages().length === 0) {\n <div class=\"list-empty\" role=\"status\" [attr.aria-label]=\"'@acorex:chat.status.no-messages' | translate | async\">\n <ng-content select=\"ax-conversation-message-list-empty, [ax-conversation-message-list-empty]\">\n <ng-container\n *ngComponentOutlet=\"resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }\"\n ></ng-container>\n </ng-content>\n </div>\n } @else {\n <div\n class=\"messages-container\"\n (scroll)=\"onScroll($event)\"\n axInfiniteScroll\n [threshold]=\"config.infiniteScrollThreshold\"\n [edge]=\"'top'\"\n [scrollDisabled]=\"loading() || loadingMore() || !hasMoreMessages()\"\n (scrollThreshold)=\"onScrollThreshold($event)\"\n #messagesContainer\n role=\"feed\"\n [attr.aria-label]=\"'@acorex:chat.aria.messages' | translate | async\"\n >\n @if (loadingMore()) {\n <div\n class=\"list-loading-more list-loading-more--prepend\"\n role=\"status\"\n animate.enter=\"load-more-enter\"\n animate.leave=\"load-more-leave\"\n [attr.aria-label]=\"'@acorex:chat.status.loading-older-messages' | translate | async\"\n >\n <div class=\"load-more-indicator\" aria-hidden=\"true\">\n <span class=\"load-more-dot\"></span>\n <span class=\"load-more-dot\"></span>\n <span class=\"load-more-dot\"></span>\n </div>\n <ax-label class=\"load-more-label\">{{\n '@acorex:chat.status.loading-older-messages' | translate | async\n }}</ax-label>\n </div>\n }\n @for (group of messageGroups(); track trackMessageGroup($index, group)) {\n <!-- Date Separator -->\n <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\">\n <ax-badge [text]=\"group.dateLabel\" class=\"date-text\"></ax-badge>\n </div>\n\n <!-- Messages in this date group -->\n @for (message of group.messages; track trackMessage($index, message)) {\n <div\n [class]=\"getMessageClasses(message)\"\n role=\"article\"\n [attr.aria-label]=\"getMessageAriaLabel(message)\"\n [id]=\"'message-' + message.id\"\n >\n <!-- Avatar (only for group conversations and received messages) -->\n @if (shouldShowAvatar(message)) {\n <div class=\"message-avatar\">\n <ax-conversation-avatar\n kind=\"user\"\n [userId]=\"message.senderId\"\n [conversation]=\"activeConversation()\"\n [message]=\"message\"\n [size]=\"32\"\n />\n </div>\n }\n\n <div class=\"message-content-row\" [class.message-content-row-own]=\"isOwnMessage(message)\">\n @if (messageSupportsReactions(message)) {\n <button\n type=\"button\"\n class=\"add-reaction-button add-reaction-outside\"\n [class.add-reaction-visible]=\"reactionPickerTarget() === message.id\"\n (click)=\"toggleReactionPicker(message, $event)\"\n [attr.aria-label]=\"'@acorex:chat.actions.add-reaction' | translate | async\"\n #reactionButton\n >\n <i class=\"fa-light fa-face-smile\"></i>\n </button>\n }\n\n <div\n class=\"message-bubble-container\"\n [id]=\"'message-bubble-' + message.id\"\n [attr.data-message-id]=\"message.id\"\n >\n <div\n [class]=\"getBubbleClasses(message)\"\n [class.message-bubble-sent]=\"message.senderId === currentUser()?.id\"\n [class.message-bubble-received]=\"message.senderId !== currentUser()?.id\"\n >\n <!-- Sender name (only for group conversations and received messages) -->\n @if (shouldShowSenderName(message)) {\n <div class=\"message-sender\">{{ getSenderName(message) }}:</div>\n }\n\n <!-- Reply Preview -->\n @if (message.replyTo) {\n <div\n class=\"reply-preview\"\n (click)=\"scrollToMessage(message.replyTo.id)\"\n role=\"button\"\n [attr.aria-label]=\"'Reply to ' + getSenderName(message.replyTo)\"\n (keydown.enter)=\"scrollToMessage(message.replyTo.id)\"\n (keydown.space)=\"scrollToMessage(message.replyTo.id)\"\n >\n <div class=\"reply-preview-content\">\n <div class=\"reply-preview-sender\">{{ getSenderName(message.replyTo) }}</div>\n <div class=\"reply-preview-text\">\n @if (getMessagePreviewText(message.replyTo); as preview) {\n <span class=\"last-message\">\n @if (preview.type !== 'text') {\n <i [class]=\"preview.icon\"></i\n >{{ '@acorex:chat.' + preview.type | translate | async }}\n } @else {\n {{ preview.value }}\n }\n </span>\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Forwarded Indicator -->\n @if (message.forwarded) {\n <div class=\"forwarded-preview\">\n <i class=\"fa-solid fa-share\"></i>\n <span class=\"forwarded-text\">{{ getForwardedText(message) }}</span>\n </div>\n }\n\n <ax-conversation-registry-component-outlet\n [component]=\"getRendererComponent(message)\"\n [componentLoader]=\"getRendererComponentLoader(message)\"\n [inputs]=\"getRendererInputs(message)\"\n />\n\n @if (messageSupportsReactions(message) && message.reactions.length > 0) {\n <div class=\"message-reactions-container\">\n <div class=\"message-reactions-bubbles\">\n @for (reaction of getGroupedReactions(message); track reaction.emoji) {\n <button\n type=\"button\"\n class=\"reaction-bubble\"\n [class.reaction-bubble-active]=\"reaction.hasReacted\"\n (click)=\"onReactionClick(message, reaction.emoji)\"\n [attr.aria-label]=\"reaction.emoji + ' ' + reaction.count\"\n >\n <span class=\"reaction-emoji\">{{ reaction.emoji }}</span>\n @if (reaction.count > 1) {\n <span class=\"reaction-count\">{{ reaction.count }}</span>\n }\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Message Footer -->\n <div class=\"message-footer\">\n @let replyCount = getReplyCount(message);\n @let forwardCount = getForwardCount(message);\n @if (replyCount > 0) {\n <span class=\"message-footer-count\" [attr.aria-label]=\"replyCount + ' replies'\">\n <i class=\"fa-solid fa-message\" aria-hidden=\"true\"></i>\n <span class=\"message-footer-count-value\">{{ replyCount }}</span>\n </span>\n }\n @if (forwardCount > 0) {\n <span class=\"message-footer-count\" [attr.aria-label]=\"forwardCount + ' forwards'\">\n <i class=\"fa-solid fa-share\" aria-hidden=\"true\"></i>\n <span class=\"message-footer-count-value\">{{ forwardCount }}</span>\n </span>\n }\n @if (replyCount > 0 || forwardCount > 0) {\n <span class=\"message-footer-split\" aria-hidden=\"true\"></span>\n }\n <span class=\"message-time\">{{ message.timestamp | format: 'timeleft' | async }}</span>\n @if (message.editedAt) {\n <span class=\"edited-indicator\">\n <span>{{ '@acorex:chat.status.edited' | translate | async }}</span>\n </span>\n }\n @if (isOwnMessage(message)) {\n <span [class]=\"getStatusIconClasses(message)\">\n <ax-icon><i [class]=\"getStatusIcon(message)\"></i></ax-icon>\n </span>\n }\n </div>\n </div>\n </div>\n </div>\n\n <!-- Context Menu for Message Actions -->\n <ax-context-menu\n [target]=\"'#message-bubble-' + message.id\"\n [openOn]=\"'click'\"\n [closeOn]=\"'click'\"\n (onOpening)=\"handleMessageContextMenuOpening($event, message)\"\n (onClose)=\"contextMenuMessageId.set(null)\"\n (onItemClick)=\"handleMessageContextMenuItemClick($event, message)\"\n >\n </ax-context-menu>\n </div>\n }\n }\n </div>\n\n <!-- Scroll to Bottom Button -->\n @if (showScrollButton()) {\n <div\n class=\"scroll-to-bottom-wrapper\"\n animate.enter=\"scroll-to-bottom-enter\"\n animate.leave=\"scroll-to-bottom-leave\"\n >\n <ax-fab\n class=\"scroll-to-bottom\"\n (onClick)=\"scrollToBottom()\"\n [attr.aria-label]=\"'@acorex:chat.actions.scroll-to-bottom' | translate | async\"\n >\n <ax-icon><i class=\"fa-light fa-arrow-down\" aria-hidden=\"true\"></i></ax-icon>\n </ax-fab>\n </div>\n }\n }\n </div>\n }\n\n <!-- Reaction Picker Popover -->\n @if (reactionsEnabled() && reactionPickerTarget()) {\n <ax-popover\n #reactionPopover\n [target]=\"reactionPickerElement()\"\n [openOn]=\"'manual'\"\n [closeOn]=\"'clickOut'\"\n [placement]=\"reactionPickerPlacement()\"\n (onClose)=\"closeReactionPicker()\"\n >\n <div class=\"reaction-picker-popup\">\n <div class=\"reaction-picker-header\">\n <span class=\"picker-title\">{{ '@acorex:chat.actions.react' | translate | async }}</span>\n <button\n type=\"button\"\n class=\"picker-close\"\n (click)=\"closeReactionPicker()\"\n [attr.aria-label]=\"'@acorex:chat.actions.close' | translate | async\"\n >\n <i class=\"fa-light fa-xmark\"></i>\n </button>\n </div>\n <div\n class=\"reaction-picker-emojis\"\n role=\"listbox\"\n [attr.aria-label]=\"'@acorex:chat.actions.choose-reaction' | translate | async\"\n >\n @for (emoji of availableReactions(); track emoji) {\n <button\n type=\"button\"\n class=\"reaction-picker-emoji\"\n [class.reaction-picker-emoji-active]=\"hasUserReactedById(reactionPickerTarget()!, emoji)\"\n (click)=\"onReactionClickById(reactionPickerTarget()!, emoji); closeReactionPicker()\"\n [attr.aria-label]=\"emoji\"\n >\n {{ emoji }}\n </button>\n }\n </div>\n </div>\n </ax-popover>\n }\n} @else {\n <div\n class=\"message-list message-list--no-active\"\n role=\"region\"\n [attr.aria-label]=\"'@acorex:chat.status.no-conversation-selected' | translate | async\"\n >\n <div class=\"list-no-active\">\n <ng-content select=\"ax-conversation-message-list-no-active, [ax-conversation-message-list-no-active]\">\n <ng-container *ngComponentOutlet=\"noActiveFallbackComponent\"></ng-container>\n </ng-content>\n </div>\n </div>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-message-list{position:relative;display:block;height:100%;container-type:inline-size;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}@keyframes messagesSkeletonIn{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes messagesSkeletonInReduced{0%{opacity:.85}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterPrepend{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeavePrepend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.35rem)}}@keyframes axScrollToBottomEnter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes axScrollToBottomLeave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}}ax-conversation-message-list .message-list{position:relative;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden}ax-conversation-message-list .message-list.ax-drop-zone>.ax-uploader-overlay-state{display:none!important}ax-conversation-message-list .message-list--drag{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:rgba(var(--ax-sys-color-primary-surface));--tw-outline-style: dashed;outline-style:dashed;outline-offset:-2px}ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceIn .36s cubic-bezier(.22,1,.36,1) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceInReduced .18s ease both}}ax-conversation-message-list .list-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;justify-content:flex-end;overflow:hidden}ax-conversation-message-list .messages-skeleton{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 6);animation:messagesSkeletonIn .42s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .message-skeleton{display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .message-skeleton--own{flex-direction:row-reverse}ax-conversation-message-list .message-skeleton-avatar{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-message-list .message-skeleton-bubble{height:calc(var(--spacing, .25rem) * 10);border-radius:var(--radius-2xl, 1rem);width:min(62%,17.5rem)}ax-conversation-message-list .message-skeleton-bubble--short{height:calc(var(--spacing, .25rem) * 8);width:min(36%,9.5rem)}ax-conversation-message-list .message-skeleton-bubble--medium{height:calc(var(--spacing, .25rem) * 9);width:min(48%,13rem)}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .messages-skeleton{animation:messagesSkeletonInReduced .2s ease both}}ax-conversation-message-list .list-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 5);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;animation:fadeInUp .5s ease-out}ax-conversation-message-list .message-list--no-active{height:100%}ax-conversation-message-list .list-no-active{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;align-items:center;justify-content:center}ax-conversation-message-list .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:5.5rem;--tw-leading: 1;line-height:1;opacity:35%;filter:grayscale(.2)}ax-conversation-message-list .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:1.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-tight, -.025em);letter-spacing:var(--tracking-tight, -.025em);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-message-list .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:420px;font-size:1.0625rem;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-message-list .spinner{margin-bottom:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:3px;border-color:rgba(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));animation:spin .8s linear infinite}ax-conversation-message-list .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 2);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:.3rem}ax-conversation-message-list .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-message-list .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-message-list .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-message-list .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-message-list .load-more-enter{animation:axChatLoadMoreEnterPrepend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .load-more-leave{animation:axChatLoadMoreLeavePrepend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .load-more-dot{animation:none;opacity:.65}ax-conversation-message-list .load-more-enter,ax-conversation-message-list .load-more-leave{animation:none}}ax-conversation-message-list .messages-container{position:relative;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex:1;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .date-separator{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:150;display:flex;align-items:center;justify-content:center;padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .date-text{display:flex;width:calc(var(--spacing, .25rem) * 28);align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-conversation-message-list .unread-separator{margin-block:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4)}ax-conversation-message-list .unread-separator-line{height:1px;flex:1;background-color:rgba(var(--ax-sys-color-primary-surface));opacity:30%}ax-conversation-message-list .unread-separator-text{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--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);white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}ax-conversation-message-list .message-item{position:relative;display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);transition:background-color .3s ease}ax-conversation-message-list .message-item-context-active{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.09);box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.22)}ax-conversation-message-list .message-own.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.12)}ax-conversation-message-list .message-highlight{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-message-list .message-item.message-own{flex-direction:row-reverse}ax-conversation-message-list .message-avatar{flex-shrink:0}ax-conversation-message-list .message-avatar-icon{display:flex;height:100%;width:100%;align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-message-list .message-content-row{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:0 1 auto;flex-direction:row;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 1);max-width:min(95%,50rem)}@container (min-width: 768px){ax-conversation-message-list .message-content-row{max-width:min(70%,50rem)}}ax-conversation-message-list .message-content-row-own{justify-content:flex-end}ax-conversation-message-list .message-item:not(.message-own) .message-content-row{justify-content:flex-start}ax-conversation-message-list .message-bubble-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1 1 auto;flex-direction:column}ax-conversation-message-list .message-own .message-bubble-container{align-items:flex-end}ax-conversation-message-list .message-sender{margin-bottom:.1rem;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-bubble{position:relative;display:flex;max-width:100%;flex-direction:column;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2);padding-bottom:.1rem;overflow-wrap:break-word;transition:background-color .3s ease}ax-conversation-message-list .reply-preview{margin-bottom:.1rem;cursor:pointer;border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .reply-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .reply-preview-line{width:3px;flex-shrink:0;border-radius:1.5px;background:currentColor;opacity:.5}ax-conversation-message-list .reply-preview-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-message-list .reply-preview-sender{margin-bottom:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .reply-preview-text{overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .reply-preview-sender{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .reply-preview-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .last-message{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .forwarded-preview{margin-bottom:.1rem;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color:rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .forwarded-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}ax-conversation-message-list .forwarded-preview i{flex-shrink:0;font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .forwarded-text{min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .forwarded-preview i{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .forwarded-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .message-bubble-received{border-end-start-radius:.125rem}ax-conversation-message-list .message-bubble-received:before,ax-conversation-message-list .message-bubble-sent:after{content:\"\";display:block;position:absolute;bottom:0;width:.8rem;height:.8rem;pointer-events:none;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;mask-mode:alpha}ax-conversation-message-list .message-bubble-received:before{background-color:rgba(var(--ax-sys-color-lightest-surface));inset-inline-start:-.7rem;-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}ax-conversation-message-list .message-bubble-sent{border-end-end-radius:.125rem}ax-conversation-message-list .message-bubble-sent:after{background:rgb(var(--ax-sys-color-primary-surface));inset-inline-end:-.7rem;-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}[dir=rtl] ax-conversation-message-list .message-bubble-received:before{-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}ax-conversation-message-list:dir(rtl) .message-bubble-received:before{-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}[dir=rtl] ax-conversation-message-list .message-bubble-sent:after{-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}ax-conversation-message-list:dir(rtl) .message-bubble-sent:after{-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}[dir=ltr] ax-conversation-message-list .message-bubble-received:before{-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}[dir=ltr] ax-conversation-message-list .message-bubble-sent:after{-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}ax-conversation-message-list .message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}ax-conversation-message-list .message-bubble.message-system{background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);max-width:100%}ax-conversation-message-list .message-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}ax-conversation-message-list .message-item:has(.message-system){justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .message-item:has(.message-system) .message-content-row{max-width:100%;justify-content:center}ax-conversation-message-list .message-item:has(.message-system) .message-bubble-container{align-items:center}ax-conversation-message-list .message-content{font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);white-space:pre-wrap}ax-conversation-message-list ax-conversation-registry-component-outlet{display:block;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-conversation-message-list .message-footer{margin-top:.1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1);padding-inline-start:calc(var(--spacing, .25rem) * 1);font-size:.6875rem;--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%;-webkit-user-select:none;user-select:none}ax-conversation-message-list .message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .message-footer-count i{font-size:.625rem;opacity:90%}ax-conversation-message-list .message-footer-count-value{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-footer-split{margin-inline:.2rem;height:.65rem;width:1px;flex-shrink:0;align-self:center;background-color:rgba(var(--ax-sys-color-border-light-surface));opacity:90%}ax-conversation-message-list .message-time{font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .edited-indicator{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline-start:.35rem;font-size:.675rem;opacity:75%}ax-conversation-message-list .status-icon{display:inline-flex;align-items:center}ax-conversation-message-list .status-icon i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}ax-conversation-message-list .status-read{color:rgba(var(--ax-sys-color-primary-200))}ax-conversation-message-list .status-failed{color:rgba(var(--ax-sys-color-danger-200))}ax-conversation-message-list .message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}ax-conversation-message-list .reaction-bubble{margin:calc(var(--spacing, .25rem) * 0);display:inline-flex;min-height:1.375rem;cursor:pointer;align-items:center;justify-content:center;gap:.15rem;border-radius:var(--radius-xl, .75rem);padding-inline:.35rem;padding-block:.1rem;color:rgba(var(--ax-sys-color-on-surface));--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background:rgba(var(--ax-sys-color-on-surface),.06);border:1px solid rgba(var(--ax-sys-color-on-surface),.1);transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ax-conversation-message-list .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}ax-conversation-message-list .reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-message-list .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}ax-conversation-message-list .reaction-emoji{display:inline-block;font-size:.8125rem;--tw-leading: 1;line-height:1}ax-conversation-message-list .reaction-count{font-size:.6875rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:.65}ax-conversation-message-list .reaction-bubble-active .reaction-count{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600));opacity:95%}ax-conversation-message-list .message-own .reaction-bubble{color:rgba(var(--ax-sys-color-on-primary-surface));background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2)}ax-conversation-message-list .message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}ax-conversation-message-list .message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}ax-conversation-message-list .message-own .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:80%}ax-conversation-message-list .message-own .reaction-bubble-active .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:100%}ax-conversation-message-list .message-reactions-container{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.2rem}ax-conversation-message-list .message-own .message-reactions-container{justify-content:flex-end}ax-conversation-message-list .message-own .message-footer .edited-indicator{border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .message-footer .message-footer-split{background:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .add-reaction-button.add-reaction-outside{position:absolute;top:50%;margin:calc(var(--spacing, .25rem) * 0);box-sizing:border-box;display:none;height:1.8rem;width:1.8rem;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 0);inset-inline-end:-2.25rem;box-shadow:0 1px 2px #0000000f}ax-conversation-message-list .add-reaction-button{padding-inline-start:.05rem}ax-conversation-message-list .message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.25rem;inset-inline-end:auto}ax-conversation-message-list .message-item:hover .add-reaction-button.add-reaction-outside,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}ax-conversation-message-list .add-reaction-button.add-reaction-outside:hover,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgba(var(--ax-sys-color-on-surface));opacity:80%}ax-conversation-message-list .reaction-bubble:focus-visible,ax-conversation-message-list .add-reaction-button:focus-visible,ax-conversation-message-list .action-trigger:focus-visible,ax-conversation-message-list ax-fab.scroll-to-bottom ax-button: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-message-list .message-actions{z-index:10;padding-bottom:calc(var(--spacing, .25rem) * 6);opacity:0%;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .message-item:hover .message-actions{opacity:100%}ax-conversation-message-list .action-trigger{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .action-trigger:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-message-list .shortcut{font-size:.6875rem;opacity:70%}ax-conversation-message-list .scroll-to-bottom-wrapper{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);bottom:calc(var(--spacing, .25rem) * 4);z-index:999}ax-conversation-message-list ax-fab.scroll-to-bottom ax-button{display:flex;height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none}ax-conversation-message-list .scroll-to-bottom-enter{animation:axScrollToBottomEnter var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}ax-conversation-message-list .scroll-to-bottom-leave{animation:axScrollToBottomLeave var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .scroll-to-bottom-enter,ax-conversation-message-list .scroll-to-bottom-leave{animation:none}}.reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(260px,92vw)}.reaction-picker-header{display:flex;min-height:calc(var(--spacing, .25rem) * 0);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:.45rem;padding-inline-start:.7rem;padding-inline-end:calc(var(--spacing, .25rem) * 2)}.picker-title{font-size:.8125rem;--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-on-surface));opacity:85%}.picker-close{display:flex;height:1.6rem;width:1.6rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:.95rem;color:rgba(var(--ax-sys-color-on-surface),.55);transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}.picker-close:focus-visible,.reaction-picker-emoji:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.2rem;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:.45rem;padding-bottom:calc(var(--spacing, .25rem) * 2)}.reaction-picker-emoji{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;border-radius:.45rem;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:1.15rem;--tw-leading: 1;line-height:1;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{transform:translate3d(0,100%,0);opacity:0}}@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-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
7920
7993
  }], ctorParameters: () => [], propDecorators: { reactionPopover: [{ type: i0.ViewChild, args: ['reactionPopover', { isSignal: true }] }], messageListRef: [{ type: i0.ViewChild, args: ['messageList', { isSignal: true }] }], messagesContainerRef: [{ type: i0.ViewChild, args: ['messagesContainer', { isSignal: true }] }], messageAction: [{ type: i0.Output, args: ["messageAction"] }] } });
7921
7994
 
7922
7995
  /**
@@ -13924,7 +13997,7 @@ const AX_CONVERSATION_COMPOSER_EMOJI_ACTION = {
13924
13997
  id: 'emoji',
13925
13998
  label: '@acorex:chat.actions.emoji-and-stickers',
13926
13999
  icon: 'fa-light fa-face-smile',
13927
- position: 'left',
14000
+ position: 'end',
13928
14001
  priority: 10,
13929
14002
  visible: () => true,
13930
14003
  handler: async () => undefined,
@@ -13935,13 +14008,13 @@ const AX_CONVERSATION_COMPOSER_IMAGE_ACTION = {
13935
14008
  id: 'image',
13936
14009
  label: '@acorex:chat.image',
13937
14010
  icon: 'fa-light fa-image',
13938
- position: 'right',
14011
+ position: 'start',
13939
14012
  location: 'menu',
13940
14013
  priority: 40,
13941
14014
  componentLoader: () => Promise.resolve().then(function () { return imagePicker_component; }).then((m) => m.AXConversationImagePickerComponent),
13942
14015
  fileType: AX_CONVERSATION_IMAGE_CATALOG,
13943
14016
  toggleable: true,
13944
- visible: (context) => !context.draftText?.trim() && !context.isEditing,
14017
+ visible: (context) => !context.isEditing,
13945
14018
  tooltip: '@acorex:chat.tooltips.send-image',
13946
14019
  };
13947
14020
 
@@ -13949,13 +14022,13 @@ const AX_CONVERSATION_COMPOSER_VIDEO_ACTION = {
13949
14022
  id: 'video',
13950
14023
  label: '@acorex:chat.video',
13951
14024
  icon: 'fa-light fa-video',
13952
- position: 'right',
14025
+ position: 'start',
13953
14026
  location: 'menu',
13954
14027
  priority: 50,
13955
14028
  componentLoader: () => Promise.resolve().then(function () { return videoPicker_component; }).then((m) => m.AXConversationVideoPickerComponent),
13956
14029
  fileType: AX_CONVERSATION_VIDEO_CATALOG,
13957
14030
  toggleable: true,
13958
- visible: (context) => !context.draftText?.trim() && !context.isEditing,
14031
+ visible: (context) => !context.isEditing,
13959
14032
  tooltip: '@acorex:chat.tooltips.send-video',
13960
14033
  };
13961
14034
 
@@ -13963,12 +14036,13 @@ const AX_CONVERSATION_COMPOSER_FILE_ACTION = {
13963
14036
  id: 'file',
13964
14037
  label: '@acorex:chat.file',
13965
14038
  icon: 'fa-light fa-file',
13966
- position: 'right',
14039
+ position: 'start',
14040
+ location: 'menu',
13967
14041
  priority: 20,
13968
14042
  componentLoader: () => Promise.resolve().then(function () { return filePicker_component; }).then((m) => m.AXConversationFilePickerComponent),
13969
14043
  fileType: AX_CONVERSATION_FILE_CATALOG,
13970
14044
  toggleable: true,
13971
- visible: (context) => !context.draftText?.trim() && !context.isEditing,
14045
+ visible: (context) => !context.isEditing,
13972
14046
  tooltip: '@acorex:chat.tooltips.attach-file',
13973
14047
  };
13974
14048
 
@@ -13976,12 +14050,13 @@ const AX_CONVERSATION_COMPOSER_VOICE_RECORDING_ACTION = {
13976
14050
  id: 'voice-recording',
13977
14051
  label: '@acorex:chat.voice',
13978
14052
  icon: 'fa-light fa-microphone',
13979
- position: 'right',
14053
+ position: 'end',
13980
14054
  priority: 30,
14055
+ default: true,
13981
14056
  componentLoader: () => Promise.resolve().then(function () { return voiceRecorder_component; }).then((m) => m.AXConversationVoiceRecorderComponent),
13982
14057
  fileType: AX_CONVERSATION_VOICE_CATALOG,
13983
14058
  toggleable: true,
13984
- visible: (context) => !context.draftText?.trim() && !context.isEditing,
14059
+ visible: (context) => !context.isEditing,
13985
14060
  tooltip: '@acorex:chat.tooltips.record-voice-message',
13986
14061
  };
13987
14062
 
@@ -13989,13 +14064,13 @@ const AX_CONVERSATION_COMPOSER_AUDIO_ACTION = {
13989
14064
  id: 'audio',
13990
14065
  label: '@acorex:chat.audio',
13991
14066
  icon: 'fa-light fa-music',
13992
- position: 'right',
14067
+ position: 'start',
13993
14068
  location: 'menu',
13994
14069
  priority: 60,
13995
14070
  componentLoader: () => Promise.resolve().then(function () { return audioPicker_component; }).then((m) => m.AXConversationAudioPickerComponent),
13996
14071
  fileType: AX_CONVERSATION_AUDIO_CATALOG,
13997
14072
  toggleable: true,
13998
- visible: (context) => !context.draftText?.trim() && !context.isEditing,
14073
+ visible: (context) => !context.isEditing,
13999
14074
  tooltip: '@acorex:chat.tooltips.send-audio-file',
14000
14075
  };
14001
14076
 
@@ -14003,12 +14078,12 @@ const AX_CONVERSATION_COMPOSER_LOCATION_ACTION = {
14003
14078
  id: 'location',
14004
14079
  label: '@acorex:chat.location',
14005
14080
  icon: 'fa-light fa-location-dot',
14006
- position: 'right',
14081
+ position: 'start',
14007
14082
  location: 'menu',
14008
14083
  priority: 70,
14009
14084
  componentLoader: () => Promise.resolve().then(function () { return locationPicker_component; }).then((m) => m.AXConversationLocationPickerComponent),
14010
14085
  toggleable: true,
14011
- visible: (context) => !context.draftText?.trim() && !context.isEditing,
14086
+ visible: (context) => !context.isEditing,
14012
14087
  tooltip: '@acorex:chat.tooltips.send-location',
14013
14088
  };
14014
14089