valtech-components 4.0.227 → 4.0.228

package/fesm2022/valtech-components.mjs

@@ -25,7 +25,7 @@ import { getApps, getApp, initializeApp as initializeApp$1 } from 'firebase/app'
 import * as i2$1 from '@ionic/angular/standalone';
 import { AlertController, IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonSkeletonText, IonFab, IonFabButton, IonFabList, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonRadio, IonRadioGroup, IonTextarea, IonDatetime, IonSelect, IonSelectOption, IonPopover, IonList, IonItem, IonInput, IonChip, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonRippleEffect, IonAccordion, IonAccordionGroup, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonInfiniteScroll, IonInfiniteScrollContent, IonNote, IonDatetimeButton, ToastController as ToastController$1, IonCol, IonRow, IonRefresher, IonRefresherContent, IonMenuButton, IonFooter, IonListHeader, IonGrid, MenuController, IonMenu, IonMenuToggle, IonSplitPane } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, peopleOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, cloudUploadOutline, textOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, cloudOutline, gitBranchOutline, layersOutline, serverOutline, warningOutline, bulbOutline, lockOpenOutline, diamondOutline, newspaperOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, attachOutline, cameraOutline, closeCircleOutline, imageOutline, printOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, laptopOutline, swapHorizontalOutline, codeSlashOutline, notificationsOffOutline, alarmOutline, chatboxEllipsesOutline, checkmarkDoneOutline, cogOutline, shareSocialOutline, helpCircleOutline, menuOutline, stopCircleOutline, videocamOffOutline, checkmarkDone, arrowUndoOutline, micOutline, arrowUpOutline } from 'ionicons/icons';
+import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, peopleOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, cloudUploadOutline, textOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, cloudOutline, gitBranchOutline, layersOutline, serverOutline, warningOutline, bulbOutline, lockOpenOutline, diamondOutline, newspaperOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, attachOutline, cameraOutline, closeCircleOutline, imageOutline, printOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, laptopOutline, swapHorizontalOutline, codeSlashOutline, notificationsOffOutline, alarmOutline, chatboxEllipsesOutline, checkmarkDoneOutline, cogOutline, shareSocialOutline, helpCircleOutline, menuOutline, stopCircleOutline, videocamOffOutline, checkmarkDone, returnDownBackOutline } from 'ionicons/icons';
 import { Browser } from '@capacitor/browser';
 import * as i1$6 from '@angular/platform-browser';
 import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.227';
+const VERSION = '4.0.228';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -1538,59 +1538,6 @@ function getTimeOfDayKey(date = new Date()) {
         return 'goodAfternoon';
     return 'goodEvening';
 }
-/** Convierte un valor de fecha (Date | ISO string | undefined) a Date válido o null. */
-function toDate(value) {
-    if (!value)
-        return null;
-    const d = value instanceof Date ? value : new Date(value);
-    return Number.isNaN(d.getTime()) ? null : d;
-}
-/** Diferencia en días-calendario entre `from` y `to` (to - from), ignorando la hora. */
-function calendarDayDiff(from, to) {
-    const a = new Date(from.getFullYear(), from.getMonth(), from.getDate());
-    const b = new Date(to.getFullYear(), to.getMonth(), to.getDate());
-    return Math.round((b.getTime() - a.getTime()) / 86_400_000);
-}
-/** Hora corta local, ej. "14:05". */
-function formatClockTime(value, locale = 'es-CL') {
-    const d = toDate(value);
-    if (!d)
-        return '';
-    return d.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' });
-}
-/**
- * Etiqueta corta para listas de conversaciones (estilo Telegram/WhatsApp):
- * hoy → hora ("14:05"), ayer → label `yesterday`, esta semana → día de semana,
- * más viejo → fecha corta. `labels.today/yesterday` se inyectan ya traducidos.
- */
-function formatRelativeTime(value, locale = 'es-CL', labels = {}) {
-    const d = toDate(value);
-    if (!d)
-        return '';
-    const diff = calendarDayDiff(d, new Date());
-    if (diff <= 0)
-        return formatClockTime(d, locale);
-    if (diff === 1)
-        return labels.yesterday ?? 'Ayer';
-    if (diff < 7)
-        return d.toLocaleDateString(locale, { weekday: 'short' });
-    return d.toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: '2-digit' });
-}
-/**
- * Etiqueta para separadores de fecha dentro de un chat: "Hoy" / "Ayer" /
- * fecha larga ("12 de junio de 2026"). `labels.today/yesterday` ya traducidos.
- */
-function formatDateSeparator(value, locale = 'es-CL', labels = {}) {
-    const d = toDate(value);
-    if (!d)
-        return '';
-    const diff = calendarDayDiff(d, new Date());
-    if (diff <= 0)
-        return labels.today ?? 'Hoy';
-    if (diff === 1)
-        return labels.yesterday ?? 'Ayer';
-    return d.toLocaleDateString(locale, { day: 'numeric', month: 'long', year: 'numeric' });
-}
 
 /**
  * Servicio de internacionalización basado en Angular Signals.
@@ -7083,8 +7030,6 @@ const VALTECH_DEFAULT_CONTENT = {
             loading: 'Cargando...',
             search: 'Buscar',
             learnMore: 'Saber más',
-            today: 'Hoy',
-            yesterday: 'Ayer',
             // Estados
             success: 'Éxito',
             error: 'Error',
@@ -7242,8 +7187,6 @@ const VALTECH_DEFAULT_CONTENT = {
             loading: 'Loading...',
             search: 'Search',
             learnMore: 'Learn more',
-            today: 'Today',
-            yesterday: 'Yesterday',
             // States
             success: 'Success',
             error: 'Error',
@@ -72097,29 +72040,21 @@ class ConversationService {
     }
     /**
      * Crea una nueva conversacion.
-     * El backend responde con un envelope { operationId, conversation } — lo
-     * desenvolvemos para devolver la Conversation directa.
      */
     createConversation(req) {
-        return this.http
-            .post(`${this.baseUrl}/conversations`, req)
-            .pipe(map(r => r.conversation));
+        return this.http.post(`${this.baseUrl}/conversations`, req);
     }
     /**
-     * Obtiene o crea una conversacion asociada a una entidad (post, request, org, etc.).
+     * Obtiene o crea una conversacion asociada a una entidad (post, request, etc.).
      * Usa el patron upsert del backend: si ya existe una conversacion para esa entidad,
      * la devuelve; si no, la crea.
-     *
-     * El backend espera { entityRef: { type, id }, type } y responde con un envelope
-     * { operationId, conversation, created }.
      */
-    getOrCreateForEntity(entityType, entityId, type = 'thread') {
-        return this.http
-            .post(`${this.baseUrl}/entity-conversations`, {
-            entityRef: { type: entityType, id: entityId },
+    getOrCreateForEntity(entityType, entityId, type = 'entity') {
+        return this.http.post(`${this.baseUrl}/conversations/entity-conversations`, {
+            entityType,
+            entityId,
             type,
-        })
-            .pipe(map(r => r.conversation));
+        });
     }
     /**
      * Lista las conversaciones del usuario autenticado.
@@ -72134,17 +72069,13 @@ class ConversationService {
      * Obtiene una conversacion por ID.
      */
     getConversation(convId) {
-        return this.http
-            .get(`${this.baseUrl}/conversations/${convId}`)
-            .pipe(map(r => r.conversation));
+        return this.http.get(`${this.baseUrl}/conversations/${convId}`);
     }
     /**
-     * Actualiza el nombre o settings de una conversacion.
+     * Actualiza el titulo o estado de una conversacion.
      */
     updateConversation(convId, req) {
-        return this.http
-            .patch(`${this.baseUrl}/conversations/${convId}`, req)
-            .pipe(map(r => r.conversation));
+        return this.http.patch(`${this.baseUrl}/conversations/${convId}`, req);
     }
     /**
      * Abre una conversacion cerrada.
@@ -72171,21 +72102,10 @@ class ConversationService {
         return this.http.delete(`${this.baseUrl}/conversations/${convId}/participants/${userId}`);
     }
     /**
-     * Envia un mensaje a una conversacion, opcionalmente con adjuntos.
-     * El backend espera `attachments: { url, type, name, size }[]` (key `type` = MIME),
-     * mientras que el front usa `mimeType` — se mapea aqui.
+     * Envia un mensaje a una conversacion.
      */
-    sendMessage(convId, body, attachments) {
-        const payload = { body };
-        if (attachments?.length) {
-            payload['attachments'] = attachments.map(a => ({
-                url: a.url,
-                type: a.mimeType,
-                name: a.name,
-                size: a.size ?? 0,
-            }));
-        }
-        return this.http.post(`${this.baseUrl}/conversations/${convId}/messages`, payload);
+    sendMessage(convId, body) {
+        return this.http.post(`${this.baseUrl}/conversations/${convId}/messages`, { body });
     }
     /**
      * Elimina (marca como eliminado) un mensaje.
@@ -72354,323 +72274,241 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 
 addIcons({
-    alertCircle,
     checkmark,
     checkmarkDone,
-    createOutline,
-    documentOutline,
-    happyOutline,
-    arrowUndoOutline,
     timeOutline,
-    trashOutline,
+    alertCircle,
+    pencil,
+    trash,
+    returnDownBackOutline,
 });
-const MESSAGE_BUBBLE_I18N = {
+const CHAT_I18N = {
     es: {
+        messageDeleted: '[mensaje eliminado]',
+        edited: '(editado)',
+        react: 'Reaccionar',
         reply: 'Responder',
         edit: 'Editar',
         delete: 'Eliminar',
-        react: 'Reaccionar',
-        deleted: 'Mensaje eliminado',
-        edited: 'editado',
     },
     en: {
+        messageDeleted: '[message deleted]',
+        edited: '(edited)',
+        react: 'React',
         reply: 'Reply',
         edit: 'Edit',
         delete: 'Delete',
-        react: 'React',
-        deleted: 'Message deleted',
-        edited: 'edited',
     },
 };
 /**
- * val-message-bubble — burbuja de mensaje presentacional (signal inputs).
+ * val-message-bubble
  *
- * Sin lógica de negocio: el contenedor (`val-chat-window`) decide agrupación y
- * pasa flags (showAvatar/showName/tail). Las acciones (responder/editar/borrar/
- * reaccionar) NO están siempre visibles: se revelan en hover (desktop) o al tocar
- * la burbuja (móvil), y se emiten por un único `(action)` tipado.
+ * Burbuja de mensaje para el chat. Alineada a la derecha si isMine, a la izquierda si no.
+ * Muestra nombre del emisor, cuerpo, timestamp, estado de envio, reacciones y acciones.
+ * Si el mensaje fue eliminado muestra un texto en gris sin acciones.
  *
- * Read receipts estilo WhatsApp: sending → reloj, sent → ✓, delivered/read → ✓✓
- * (read en color), failed → alerta.
+ * @example
+ * <val-message-bubble
+ *   [props]="msg"
+ *   (reactionClick)="onReaction($event)"
+ *   (replyClick)="onReply($event)"
+ *   (deleteClick)="onDelete($event)"
+ * />
  */
 class MessageBubbleComponent {
     constructor() {
         this.i18n = inject(I18nService);
-        this.msg = input.required();
-        this.showAvatar = input(false);
-        this.showName = input(false);
-        this.tail = input(true);
-        this.locale = input('es-CL');
-        this.action = output();
-        this.actionsOpen = signal(false);
-        this.time = computed(() => formatClockTime(this.msg().createdAt, this.locale()));
-        this.initials = computed(() => {
-            const name = this.msg().senderName?.trim() ?? '';
-            if (!name)
-                return '?';
-            const parts = name.split(/\s+/);
-            return (parts[0][0] + (parts[1]?.[0] ?? '')).toUpperCase();
-        });
-        this.imageAttachments = computed(() => (this.msg().attachments ?? []).filter(a => a.mimeType?.startsWith('image/')));
-        this.audioAttachments = computed(() => (this.msg().attachments ?? []).filter(a => a.mimeType?.startsWith('audio/')));
-        this.fileAttachments = computed(() => (this.msg().attachments ?? []).filter(a => !a.mimeType?.startsWith('image/') && !a.mimeType?.startsWith('audio/')));
-        this.statusIcon = computed(() => {
-            switch (this.msg().status) {
-                case 'sending':
-                    return 'time-outline';
-                case 'failed':
-                    return 'alert-circle';
-                case 'delivered':
-                case 'read':
-                    return 'checkmark-done';
-                case 'sent':
-                default:
-                    return 'checkmark';
-            }
-        });
-        this.i18n.registerDefaults('MessageBubble', MESSAGE_BUBBLE_I18N);
+        this.reactionClick = new EventEmitter();
+        this.replyClick = new EventEmitter();
+        this.deleteClick = new EventEmitter();
+        this.editClick = new EventEmitter();
+        if (!this.i18n.hasNamespace('Chat')) {
+            this.i18n.registerDefaults('Chat', CHAT_I18N);
+        }
     }
-    toggleActions() {
-        if (this.msg().isDeleted)
-            return;
-        this.actionsOpen.update(v => !v);
+    ngOnInit() { }
+    deletedText() {
+        this.i18n.lang();
+        return this.i18n.t('messageDeleted', 'Chat');
     }
-    emit(type, token) {
-        this.actionsOpen.set(false);
-        this.action.emit({ type, msgId: this.msg().msgId, token });
+    editedLabel() {
+        this.i18n.lang();
+        return this.i18n.t('edited', 'Chat');
     }
-    t(key) {
-        return this.i18n.t(key, 'MessageBubble');
+    formatTime(date) {
+        if (!date)
+            return '';
+        const d = date instanceof Date ? date : new Date(date);
+        return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+    statusIcon() {
+        switch (this.props.status) {
+            case 'sending':
+                return 'time-outline';
+            case 'failed':
+                return 'alert-circle';
+            case 'sent':
+            default:
+                return 'checkmark';
+        }
+    }
+    onReactionClick(reaction) {
+        this.reactionClick.emit({ token: reaction.token, msgId: this.props.msgId });
+    }
+    onReplyClick() {
+        this.replyClick.emit({ msgId: this.props.msgId });
+    }
+    onDeleteClick() {
+        this.deleteClick.emit({ msgId: this.props.msgId });
+    }
+    onEditClick() {
+        this.editClick.emit({ msgId: this.props.msgId });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageBubbleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MessageBubbleComponent, isStandalone: true, selector: "val-message-bubble", inputs: { msg: { classPropertyName: "msg", publicName: "msg", isSignal: true, isRequired: true, transformFunction: null }, showAvatar: { classPropertyName: "showAvatar", publicName: "showAvatar", isSignal: true, isRequired: false, transformFunction: null }, showName: { classPropertyName: "showName", publicName: "showName", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: `
-    <div class="row" [class.mine]="msg().isMine" [class.tail]="tail()" [class.with-avatar]="showAvatar()">
-      @if (showAvatar() && !msg().isMine) {
-        <div class="avatar" [class.hidden]="!tail()">
-          @if (msg().senderAvatar) {
-            <img [src]="msg().senderAvatar" [alt]="msg().senderName" />
-          } @else {
-            <span>{{ initials() }}</span>
-          }
-        </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MessageBubbleComponent, isStandalone: true, selector: "val-message-bubble", inputs: { props: "props" }, outputs: { reactionClick: "reactionClick", replyClick: "replyClick", deleteClick: "deleteClick", editClick: "editClick" }, ngImport: i0, template: `
+    <div class="message-bubble-wrapper" [class.is-mine]="props.isMine">
+      @if (!props.isMine && !props.isDeleted) {
+        <span class="sender-name">{{ props.senderName }}</span>
       }
 
-      <div class="bubble-wrap">
-        <div
-          class="bubble"
-          [class.deleted]="msg().isDeleted"
-          (click)="toggleActions()"
-          (keyup.enter)="toggleActions()"
-          tabindex="0"
-        >
-          @if (showName() && !msg().isMine && !msg().isDeleted) {
-            <span class="name">{{ msg().senderName }}</span>
-          }
+      <div class="bubble">
+        @if (props.replyTo && !props.isDeleted) {
+          <div class="reply-preview">
+            <div class="reply-sender">{{ props.replyTo.senderName }}</div>
+            <div class="reply-body">{{ props.replyTo.body }}</div>
+          </div>
+        }
 
-          @if (msg().replyTo && !msg().isDeleted) {
-            <div class="reply-preview">
-              <span class="reply-name">{{ msg().replyTo!.senderName }}</span>
-              <span class="reply-body">{{ msg().replyTo!.body }}</span>
-            </div>
-          }
+        @if (props.isDeleted) {
+          <span class="deleted-text">{{ deletedText() }}</span>
+        } @else {
+          <div class="bubble-body">{{ props.body }}</div>
+        }
 
-          @if (msg().isDeleted) {
-            <span class="body deleted-text">{{ t('deleted') }}</span>
-          } @else {
-            @if (imageAttachments().length > 0) {
-              <div class="attachments">
-                @for (att of imageAttachments(); track att.url) {
-                  <img class="att-image" [src]="att.url" [alt]="att.name" />
-                }
-              </div>
-            }
-            @if (audioAttachments().length > 0) {
-              <div class="audios">
-                @for (att of audioAttachments(); track att.url) {
-                  <audio class="att-audio" controls preload="metadata" [src]="att.url"></audio>
-                }
-              </div>
-            }
-            @if (fileAttachments().length > 0) {
-              <div class="files">
-                @for (att of fileAttachments(); track att.url) {
-                  <a class="file-chip" [href]="att.url" target="_blank" rel="noopener">
-                    <ion-icon name="document-outline" aria-hidden="true" />
-                    <span>{{ att.name }}</span>
-                  </a>
-                }
-              </div>
-            }
-            @if (msg().body) {
-              <span class="body">{{ msg().body }}</span>
-            }
+        <div class="bubble-meta">
+          <span class="timestamp">{{ formatTime(props.createdAt) }}</span>
+          @if (props.isEdited && !props.isDeleted) {
+            <span class="edited-label">{{ editedLabel() }}</span>
+          }
+          @if (props.isMine && props.status) {
+            <ion-icon
+              [name]="statusIcon()"
+              [class]="'status-icon ' + (props.status ?? '')"
+              aria-hidden="true"
+            ></ion-icon>
           }
-
-          <span class="meta">
-            @if (msg().isEdited && !msg().isDeleted) {
-              <span class="edited">{{ t('edited') }}</span>
-            }
-            <span class="time">{{ time() }}</span>
-            @if (msg().isMine && !msg().isDeleted) {
-              <ion-icon
-                class="status"
-                [class.read]="msg().status === 'read'"
-                [class.failed]="msg().status === 'failed'"
-                [name]="statusIcon()"
-                aria-hidden="true"
-              />
-            }
-          </span>
         </div>
+      </div>
 
-        @if (msg().reactions && msg().reactions!.length > 0) {
-          <div class="reactions">
-            @for (r of msg().reactions!; track r.token) {
-              <button class="reaction" [class.active]="r.active" (click)="emit('react', r.token)">
-                <span>{{ r.token }}</span>
-                <span class="count">{{ r.count }}</span>
-              </button>
-            }
-          </div>
-        }
-
-        @if (!msg().isDeleted) {
-          <div class="actions" [class.open]="actionsOpen()">
-            <button class="act" [attr.aria-label]="t('react')" (click)="emit('react', '👍')">
-              <ion-icon name="happy-outline" aria-hidden="true" />
-            </button>
-            <button class="act" [attr.aria-label]="t('reply')" (click)="emit('reply')">
-              <ion-icon name="arrow-undo-outline" aria-hidden="true" />
+      @if (!props.isDeleted && props.reactions && props.reactions.length > 0) {
+        <div class="reactions-bar">
+          @for (reaction of props.reactions; track reaction.token) {
+            <button class="reaction-btn" [class.active]="reaction.active" (click)="onReactionClick(reaction)">
+              <span>{{ reaction.token }}</span>
+              @if (reaction.count > 0) {
+                <span class="reaction-count">{{ reaction.count }}</span>
+              }
             </button>
-            @if (msg().isMine) {
-              <button class="act" [attr.aria-label]="t('edit')" (click)="emit('edit')">
-                <ion-icon name="create-outline" aria-hidden="true" />
-              </button>
-              <button class="act danger" [attr.aria-label]="t('delete')" (click)="emit('delete')">
-                <ion-icon name="trash-outline" aria-hidden="true" />
-              </button>
-            }
-          </div>
-        }
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:block}.row{display:flex;align-items:flex-end;gap:8px;margin:1px 0}.row.mine{flex-direction:row-reverse}.row.tail{margin-bottom:8px}.avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--ion-color-primary);color:#fff;font-size:.6875rem;font-weight:700}.avatar.hidden{visibility:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.bubble-wrap{position:relative;max-width:min(78%,520px);display:flex;flex-direction:column}.row.mine .bubble-wrap{align-items:flex-end}.bubble{position:relative;padding:7px 11px;border-radius:16px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));color:var(--ion-text-color, #000);font-size:.9375rem;line-height:1.35;cursor:pointer;outline:none;word-break:break-word}.row:not(.mine).tail .bubble{border-bottom-left-radius:5px}.mine .bubble{background:var(--ion-color-primary);border-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff)}.mine.tail .bubble{border-bottom-right-radius:5px}.bubble.deleted{background:transparent;border-style:dashed;cursor:default}.name{display:block;font-size:.75rem;font-weight:700;color:var(--ion-color-primary);margin-bottom:2px}.reply-preview{display:flex;flex-direction:column;gap:1px;padding:4px 8px;margin-bottom:4px;border-left:3px solid currentColor;border-radius:6px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));font-size:.8125rem;opacity:.85}.reply-name{font-weight:700}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.body{white-space:pre-wrap}.deleted-text{font-style:italic;opacity:.6}.attachments{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-image{max-width:100%;border-radius:10px;display:block}.audios{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-audio{width:240px;max-width:100%;height:40px}.files{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.file-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:inherit;text-decoration:none;font-size:.8125rem}.meta{display:inline-flex;align-items:center;gap:4px;float:right;margin:2px 0 -2px 8px;font-size:.6875rem;opacity:.7}.edited{font-style:italic}.status{font-size:.875rem}.status.read{color:var(--ion-color-secondary, #4fc3f7);opacity:1}.status.failed{color:var(--ion-color-danger, #eb445a);opacity:1}.reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.reaction{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));font-size:.75rem;cursor:pointer;color:var(--ion-text-color, #000)}.reaction.active{border-color:var(--ion-color-primary);background:var(--ion-color-primary-tint, var(--ion-color-primary));color:var(--ion-color-primary-contrast, #fff)}.reaction .count{opacity:.75}.actions{position:absolute;top:-14px;display:flex;gap:2px;padding:2px;border-radius:999px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));box-shadow:0 2px 8px #0000001f;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:2}.row.mine .actions{right:0}.row:not(.mine) .actions{left:0}.bubble-wrap:hover .actions,.actions.open{opacity:1;pointer-events:auto}.act{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:transparent;color:var(--ion-color-medium, #92949c);cursor:pointer;font-size:1rem}.act:hover{background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:var(--ion-text-color, #000)}.act.danger:hover{color:var(--ion-color-danger, #eb445a)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageBubbleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-message-bubble', standalone: true, imports: [CommonModule, IonIcon], template: `
-    <div class="row" [class.mine]="msg().isMine" [class.tail]="tail()" [class.with-avatar]="showAvatar()">
-      @if (showAvatar() && !msg().isMine) {
-        <div class="avatar" [class.hidden]="!tail()">
-          @if (msg().senderAvatar) {
-            <img [src]="msg().senderAvatar" [alt]="msg().senderName" />
-          } @else {
-            <span>{{ initials() }}</span>
           }
         </div>
       }
 
-      <div class="bubble-wrap">
-        <div
-          class="bubble"
-          [class.deleted]="msg().isDeleted"
-          (click)="toggleActions()"
-          (keyup.enter)="toggleActions()"
-          tabindex="0"
-        >
-          @if (showName() && !msg().isMine && !msg().isDeleted) {
-            <span class="name">{{ msg().senderName }}</span>
-          }
-
-          @if (msg().replyTo && !msg().isDeleted) {
-            <div class="reply-preview">
-              <span class="reply-name">{{ msg().replyTo!.senderName }}</span>
-              <span class="reply-body">{{ msg().replyTo!.body }}</span>
-            </div>
-          }
-
-          @if (msg().isDeleted) {
-            <span class="body deleted-text">{{ t('deleted') }}</span>
-          } @else {
-            @if (imageAttachments().length > 0) {
-              <div class="attachments">
-                @for (att of imageAttachments(); track att.url) {
-                  <img class="att-image" [src]="att.url" [alt]="att.name" />
-                }
-              </div>
-            }
-            @if (audioAttachments().length > 0) {
-              <div class="audios">
-                @for (att of audioAttachments(); track att.url) {
-                  <audio class="att-audio" controls preload="metadata" [src]="att.url"></audio>
-                }
-              </div>
-            }
-            @if (fileAttachments().length > 0) {
-              <div class="files">
-                @for (att of fileAttachments(); track att.url) {
-                  <a class="file-chip" [href]="att.url" target="_blank" rel="noopener">
-                    <ion-icon name="document-outline" aria-hidden="true" />
-                    <span>{{ att.name }}</span>
-                  </a>
-                }
-              </div>
-            }
-            @if (msg().body) {
-              <span class="body">{{ msg().body }}</span>
-            }
+      @if (!props.isDeleted) {
+        <div class="bubble-actions">
+          <ion-button fill="clear" size="small" (click)="onReplyClick()">
+            <ion-icon name="return-down-back-outline" slot="icon-only" aria-hidden="true"></ion-icon>
+          </ion-button>
+          @if (props.isMine) {
+            <ion-button fill="clear" size="small" (click)="onEditClick()">
+              <ion-icon name="pencil" slot="icon-only" aria-hidden="true"></ion-icon>
+            </ion-button>
+            <ion-button fill="clear" size="small" color="danger" (click)="onDeleteClick()">
+              <ion-icon name="trash" slot="icon-only" aria-hidden="true"></ion-icon>
+            </ion-button>
           }
-
-          <span class="meta">
-            @if (msg().isEdited && !msg().isDeleted) {
-              <span class="edited">{{ t('edited') }}</span>
-            }
-            <span class="time">{{ time() }}</span>
-            @if (msg().isMine && !msg().isDeleted) {
-              <ion-icon
-                class="status"
-                [class.read]="msg().status === 'read'"
-                [class.failed]="msg().status === 'failed'"
-                [name]="statusIcon()"
-                aria-hidden="true"
-              />
-            }
-          </span>
         </div>
+      }
+    </div>
+  `, isInline: true, styles: [".message-bubble-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:4px}.message-bubble-wrapper.is-mine{align-items:flex-end}.message-bubble-wrapper.is-mine .bubble{background:var(--ion-color-primary);color:#fff;border-radius:18px 18px 4px}.message-bubble-wrapper.is-mine .bubble-meta{justify-content:flex-end}.message-bubble-wrapper:not(.is-mine) .bubble{background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-text-color, #000);border-radius:18px 18px 18px 4px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.sender-name{font-size:.75rem;font-weight:600;color:var(--ion-color-medium, #92949c);margin:0 0 2px 12px}.bubble{max-width:75%;min-width:60px;padding:10px 14px;word-break:break-word;position:relative;box-shadow:0 1px 2px #0000000f}.reply-preview{background:#0000000f;border-left:3px solid var(--ion-color-primary);border-radius:6px;padding:6px 8px;margin-bottom:6px;font-size:.75rem;opacity:.85}.reply-preview .reply-sender{font-weight:700;margin-bottom:2px}.reply-preview .reply-body{opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.bubble-body{font-size:.9375rem;line-height:1.4;white-space:pre-wrap}.deleted-text{font-size:.875rem;font-style:italic;opacity:.6}.bubble-meta{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:.6875rem;opacity:.7}.edited-label{font-style:italic}.status-icon{font-size:.75rem}.status-icon.sending{color:var(--ion-color-medium)}.status-icon.sent{color:#fff}.status-icon.failed{color:var(--ion-color-danger)}.reactions-bar{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.reactions-bar .reaction-btn{display:inline-flex;align-items:center;gap:3px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:12px;padding:2px 8px;font-size:.8125rem;cursor:pointer;transition:background .15s ease}.reactions-bar .reaction-btn.active{background:var(--ion-color-primary-tint, #4c8dff);color:#fff;border-color:var(--ion-color-primary)}.reactions-bar .reaction-btn .reaction-count{font-weight:600}.bubble-actions{display:flex;gap:4px;margin-top:2px}.bubble-actions ion-button{--padding-start: 6px;--padding-end: 6px;font-size:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageBubbleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-message-bubble', standalone: true, imports: [CommonModule, IonIcon, IonButton], template: `
+    <div class="message-bubble-wrapper" [class.is-mine]="props.isMine">
+      @if (!props.isMine && !props.isDeleted) {
+        <span class="sender-name">{{ props.senderName }}</span>
+      }
 
-        @if (msg().reactions && msg().reactions!.length > 0) {
-          <div class="reactions">
-            @for (r of msg().reactions!; track r.token) {
-              <button class="reaction" [class.active]="r.active" (click)="emit('react', r.token)">
-                <span>{{ r.token }}</span>
-                <span class="count">{{ r.count }}</span>
-              </button>
-            }
+      <div class="bubble">
+        @if (props.replyTo && !props.isDeleted) {
+          <div class="reply-preview">
+            <div class="reply-sender">{{ props.replyTo.senderName }}</div>
+            <div class="reply-body">{{ props.replyTo.body }}</div>
           </div>
         }
 
-        @if (!msg().isDeleted) {
-          <div class="actions" [class.open]="actionsOpen()">
-            <button class="act" [attr.aria-label]="t('react')" (click)="emit('react', '👍')">
-              <ion-icon name="happy-outline" aria-hidden="true" />
-            </button>
-            <button class="act" [attr.aria-label]="t('reply')" (click)="emit('reply')">
-              <ion-icon name="arrow-undo-outline" aria-hidden="true" />
-            </button>
-            @if (msg().isMine) {
-              <button class="act" [attr.aria-label]="t('edit')" (click)="emit('edit')">
-                <ion-icon name="create-outline" aria-hidden="true" />
-              </button>
-              <button class="act danger" [attr.aria-label]="t('delete')" (click)="emit('delete')">
-                <ion-icon name="trash-outline" aria-hidden="true" />
-              </button>
-            }
-          </div>
+        @if (props.isDeleted) {
+          <span class="deleted-text">{{ deletedText() }}</span>
+        } @else {
+          <div class="bubble-body">{{ props.body }}</div>
         }
+
+        <div class="bubble-meta">
+          <span class="timestamp">{{ formatTime(props.createdAt) }}</span>
+          @if (props.isEdited && !props.isDeleted) {
+            <span class="edited-label">{{ editedLabel() }}</span>
+          }
+          @if (props.isMine && props.status) {
+            <ion-icon
+              [name]="statusIcon()"
+              [class]="'status-icon ' + (props.status ?? '')"
+              aria-hidden="true"
+            ></ion-icon>
+          }
+        </div>
       </div>
+
+      @if (!props.isDeleted && props.reactions && props.reactions.length > 0) {
+        <div class="reactions-bar">
+          @for (reaction of props.reactions; track reaction.token) {
+            <button class="reaction-btn" [class.active]="reaction.active" (click)="onReactionClick(reaction)">
+              <span>{{ reaction.token }}</span>
+              @if (reaction.count > 0) {
+                <span class="reaction-count">{{ reaction.count }}</span>
+              }
+            </button>
+          }
+        </div>
+      }
+
+      @if (!props.isDeleted) {
+        <div class="bubble-actions">
+          <ion-button fill="clear" size="small" (click)="onReplyClick()">
+            <ion-icon name="return-down-back-outline" slot="icon-only" aria-hidden="true"></ion-icon>
+          </ion-button>
+          @if (props.isMine) {
+            <ion-button fill="clear" size="small" (click)="onEditClick()">
+              <ion-icon name="pencil" slot="icon-only" aria-hidden="true"></ion-icon>
+            </ion-button>
+            <ion-button fill="clear" size="small" color="danger" (click)="onDeleteClick()">
+              <ion-icon name="trash" slot="icon-only" aria-hidden="true"></ion-icon>
+            </ion-button>
+          }
+        </div>
+      }
     </div>
-  `, styles: [":host{display:block}.row{display:flex;align-items:flex-end;gap:8px;margin:1px 0}.row.mine{flex-direction:row-reverse}.row.tail{margin-bottom:8px}.avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--ion-color-primary);color:#fff;font-size:.6875rem;font-weight:700}.avatar.hidden{visibility:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.bubble-wrap{position:relative;max-width:min(78%,520px);display:flex;flex-direction:column}.row.mine .bubble-wrap{align-items:flex-end}.bubble{position:relative;padding:7px 11px;border-radius:16px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));color:var(--ion-text-color, #000);font-size:.9375rem;line-height:1.35;cursor:pointer;outline:none;word-break:break-word}.row:not(.mine).tail .bubble{border-bottom-left-radius:5px}.mine .bubble{background:var(--ion-color-primary);border-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff)}.mine.tail .bubble{border-bottom-right-radius:5px}.bubble.deleted{background:transparent;border-style:dashed;cursor:default}.name{display:block;font-size:.75rem;font-weight:700;color:var(--ion-color-primary);margin-bottom:2px}.reply-preview{display:flex;flex-direction:column;gap:1px;padding:4px 8px;margin-bottom:4px;border-left:3px solid currentColor;border-radius:6px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));font-size:.8125rem;opacity:.85}.reply-name{font-weight:700}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.body{white-space:pre-wrap}.deleted-text{font-style:italic;opacity:.6}.attachments{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-image{max-width:100%;border-radius:10px;display:block}.audios{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-audio{width:240px;max-width:100%;height:40px}.files{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.file-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:inherit;text-decoration:none;font-size:.8125rem}.meta{display:inline-flex;align-items:center;gap:4px;float:right;margin:2px 0 -2px 8px;font-size:.6875rem;opacity:.7}.edited{font-style:italic}.status{font-size:.875rem}.status.read{color:var(--ion-color-secondary, #4fc3f7);opacity:1}.status.failed{color:var(--ion-color-danger, #eb445a);opacity:1}.reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.reaction{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));font-size:.75rem;cursor:pointer;color:var(--ion-text-color, #000)}.reaction.active{border-color:var(--ion-color-primary);background:var(--ion-color-primary-tint, var(--ion-color-primary));color:var(--ion-color-primary-contrast, #fff)}.reaction .count{opacity:.75}.actions{position:absolute;top:-14px;display:flex;gap:2px;padding:2px;border-radius:999px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));box-shadow:0 2px 8px #0000001f;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:2}.row.mine .actions{right:0}.row:not(.mine) .actions{left:0}.bubble-wrap:hover .actions,.actions.open{opacity:1;pointer-events:auto}.act{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:transparent;color:var(--ion-color-medium, #92949c);cursor:pointer;font-size:1rem}.act:hover{background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:var(--ion-text-color, #000)}.act.danger:hover{color:var(--ion-color-danger, #eb445a)}\n"] }]
-        }], ctorParameters: () => [] });
+  `, styles: [".message-bubble-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:4px}.message-bubble-wrapper.is-mine{align-items:flex-end}.message-bubble-wrapper.is-mine .bubble{background:var(--ion-color-primary);color:#fff;border-radius:18px 18px 4px}.message-bubble-wrapper.is-mine .bubble-meta{justify-content:flex-end}.message-bubble-wrapper:not(.is-mine) .bubble{background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-text-color, #000);border-radius:18px 18px 18px 4px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.sender-name{font-size:.75rem;font-weight:600;color:var(--ion-color-medium, #92949c);margin:0 0 2px 12px}.bubble{max-width:75%;min-width:60px;padding:10px 14px;word-break:break-word;position:relative;box-shadow:0 1px 2px #0000000f}.reply-preview{background:#0000000f;border-left:3px solid var(--ion-color-primary);border-radius:6px;padding:6px 8px;margin-bottom:6px;font-size:.75rem;opacity:.85}.reply-preview .reply-sender{font-weight:700;margin-bottom:2px}.reply-preview .reply-body{opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.bubble-body{font-size:.9375rem;line-height:1.4;white-space:pre-wrap}.deleted-text{font-size:.875rem;font-style:italic;opacity:.6}.bubble-meta{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:.6875rem;opacity:.7}.edited-label{font-style:italic}.status-icon{font-size:.75rem}.status-icon.sending{color:var(--ion-color-medium)}.status-icon.sent{color:#fff}.status-icon.failed{color:var(--ion-color-danger)}.reactions-bar{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.reactions-bar .reaction-btn{display:inline-flex;align-items:center;gap:3px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:12px;padding:2px 8px;font-size:.8125rem;cursor:pointer;transition:background .15s ease}.reactions-bar .reaction-btn.active{background:var(--ion-color-primary-tint, #4c8dff);color:#fff;border-color:var(--ion-color-primary)}.reactions-bar .reaction-btn .reaction-count{font-weight:600}.bubble-actions{display:flex;gap:4px;margin-top:2px}.bubble-actions ion-button{--padding-start: 6px;--padding-end: 6px;font-size:.75rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], reactionClick: [{
+                type: Output
+            }], replyClick: [{
+                type: Output
+            }], deleteClick: [{
+                type: Output
+            }], editClick: [{
+                type: Output
+            }] } });
 
 addIcons({ sendOutline });
 const CHAT_INPUT_I18N = {
@@ -72763,6 +72601,10 @@ class ChatInputComponent {
           [autoGrow]="true"
           [rows]="1"
           [value]="body()"
+          enterkeyhint="send"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
           (ionInput)="onInput($event)"
           (keydown)="onKeydown($event)"
         ></ion-textarea>
@@ -72795,6 +72637,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [autoGrow]="true"
           [rows]="1"
           [value]="body()"
+          enterkeyhint="send"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
           (ionInput)="onInput($event)"
           (keydown)="onKeydown($event)"
         ></ion-textarea>
@@ -72822,493 +72668,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-addIcons({ addOutline, closeOutline, happyOutline, micOutline, arrowUpOutline, trashOutline });
-const CHAT_COMPOSER_I18N = {
-    es: {
-        placeholder: 'Escribe un mensaje',
-        send: 'Enviar',
-        attach: 'Adjuntar',
-        emoji: 'Emoji',
-        voice: 'Mensaje de voz',
-        replyingTo: 'Respondiendo a',
-        cancel: 'Cancelar',
-    },
-    en: {
-        placeholder: 'Write a message',
-        send: 'Send',
-        attach: 'Attach',
-        emoji: 'Emoji',
-        voice: 'Voice message',
-        replyingTo: 'Replying to',
-        cancel: 'Cancel',
-    },
-};
-const QUICK_EMOJIS = ['👍', '❤️', '😂', '🎉', '🙏', '🔥', '😮', '😢'];
-/**
- * val-chat-composer — barra de redacción de chat moderna (signal inputs).
- *
- * Pill con: adjuntar (+), textarea auto-grow, emoji (fila rápida) y mic/enviar
- * (mic cuando está vacío, enviar cuando hay texto — patrón WhatsApp/Telegram).
- * Muestra una barra de contexto "respondiendo a" cuando `replyingTo` está seteado.
- * `typing` se emite con debounce (máx. 1 vez cada 2s) para no spamear writes.
- */
-class ChatComposerComponent {
-    constructor() {
-        this.i18n = inject(I18nService);
-        this.placeholder = input('');
-        this.disabled = input(false);
-        this.maxLength = input(2000);
-        this.replyingTo = input(null);
-        this.showAttach = input(true);
-        this.showEmoji = input(true);
-        this.showMic = input(true);
-        this.send = output();
-        this.typing = output();
-        this.attach = output();
-        this.voice = output();
-        this.cancelReply = output();
-        this.body = signal('');
-        this.emojiOpen = signal(false);
-        this.quickEmojis = QUICK_EMOJIS;
-        // Grabación de audio (MediaRecorder).
-        this.recording = signal(false);
-        this.recSeconds = signal(0);
-        this.recChunks = [];
-        this.recTimeLabel = computed(() => {
-            const s = this.recSeconds();
-            const mm = String(Math.floor(s / 60)).padStart(2, '0');
-            const ss = String(s % 60).padStart(2, '0');
-            return `${mm}:${ss}`;
-        });
-        this.lastTypingEmit = 0;
-        this.canSend = computed(() => {
-            const t = this.body().trim();
-            return t.length > 0 && t.length <= this.maxLength() && !this.disabled();
-        });
-        this.placeholderText = computed(() => {
-            this.i18n.lang();
-            return this.placeholder() || this.i18n.t('placeholder', 'ChatComposer');
-        });
-        this.i18n.registerDefaults('ChatComposer', CHAT_COMPOSER_I18N);
-    }
-    onInput(event) {
-        const target = event.target;
-        this.body.set(target.value ?? '');
-        this.emitTypingDebounced();
-    }
-    onKeydown(event) {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            this.onSend();
-        }
-    }
-    onSend() {
-        const trimmed = this.body().trim();
-        if (!trimmed || trimmed.length > this.maxLength())
-            return;
-        this.send.emit(trimmed);
-        this.body.set('');
-        this.emojiOpen.set(false);
-    }
-    toggleEmoji() {
-        this.emojiOpen.update(v => !v);
-    }
-    insertEmoji(emoji) {
-        this.body.update(v => v + emoji);
-    }
-    onFile(event) {
-        const input = event.target;
-        const file = input.files?.[0];
-        if (file)
-            this.attach.emit(file);
-        input.value = '';
-    }
-    /** Pegar imagen desde el portapapeles (captura de pantalla, copiar imagen). */
-    onPaste(event) {
-        const items = event.clipboardData?.items;
-        if (!items)
-            return;
-        for (const item of Array.from(items)) {
-            if (item.type.startsWith('image/')) {
-                const file = item.getAsFile();
-                if (file) {
-                    event.preventDefault();
-                    this.attach.emit(file);
-                }
-                return;
-            }
-        }
-    }
-    /**
-     * Emite typing como máximo 1 vez cada 2s. No usa Date.now() directo en plantillas
-     * de workflow; aquí estamos en runtime de navegador, performance.now es seguro.
-     */
-    emitTypingDebounced() {
-        const now = performance.now();
-        if (now - this.lastTypingEmit > 2000) {
-            this.lastTypingEmit = now;
-            this.typing.emit();
-        }
-    }
-    // ─── Grabación de audio ───────────────────────────────────────────────────
-    /** Selecciona un mimeType de audio soportado por el navegador. */
-    pickAudioMime() {
-        const candidates = ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4'];
-        const MR = window.MediaRecorder;
-        if (!MR?.isTypeSupported)
-            return '';
-        return candidates.find(c => MR.isTypeSupported(c)) ?? '';
-    }
-    async startRecording() {
-        if (this.recording())
-            return;
-        if (!navigator.mediaDevices?.getUserMedia || !('MediaRecorder' in window)) {
-            this.voice.emit(); // sin soporte: deja que el consumer decida (fallback)
-            return;
-        }
-        try {
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            this.recStream = stream;
-            const mimeType = this.pickAudioMime();
-            this.recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
-            this.recChunks = [];
-            this.recorder.ondataavailable = e => {
-                if (e.data.size > 0)
-                    this.recChunks.push(e.data);
-            };
-            this.recorder.start();
-            this.recording.set(true);
-            this.recSeconds.set(0);
-            this.recTimer = setInterval(() => this.recSeconds.update(s => s + 1), 1000);
-        }
-        catch {
-            this.cleanupRecording();
-        }
-    }
-    stopAndSend() {
-        const rec = this.recorder;
-        if (!rec) {
-            this.cleanupRecording();
-            return;
-        }
-        rec.onstop = () => {
-            const type = rec.mimeType || 'audio/webm';
-            const blob = new Blob(this.recChunks, { type });
-            const ext = type.includes('mp4') ? 'm4a' : 'webm';
-            const file = new File([blob], `audio-${this.recSeconds()}s.${ext}`, { type });
-            if (blob.size > 0)
-                this.attach.emit(file);
-            this.cleanupRecording();
-        };
-        rec.stop();
-    }
-    cancelRecording() {
-        const rec = this.recorder;
-        if (rec)
-            rec.onstop = () => this.cleanupRecording();
-        try {
-            rec?.stop();
-        }
-        catch {
-            this.cleanupRecording();
-        }
-        if (!rec)
-            this.cleanupRecording();
-    }
-    cleanupRecording() {
-        if (this.recTimer)
-            clearInterval(this.recTimer);
-        this.recTimer = undefined;
-        this.recStream?.getTracks().forEach(t => t.stop());
-        this.recStream = undefined;
-        this.recorder = undefined;
-        this.recChunks = [];
-        this.recording.set(false);
-        this.recSeconds.set(0);
-    }
-    ngOnDestroy() {
-        this.cleanupRecording();
-    }
-    t(key) {
-        return this.i18n.t(key, 'ChatComposer');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatComposerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatComposerComponent, isStandalone: true, selector: "val-chat-composer", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, replyingTo: { classPropertyName: "replyingTo", publicName: "replyingTo", isSignal: true, isRequired: false, transformFunction: null }, showAttach: { classPropertyName: "showAttach", publicName: "showAttach", isSignal: true, isRequired: false, transformFunction: null }, showEmoji: { classPropertyName: "showEmoji", publicName: "showEmoji", isSignal: true, isRequired: false, transformFunction: null }, showMic: { classPropertyName: "showMic", publicName: "showMic", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { send: "send", typing: "typing", attach: "attach", voice: "voice", cancelReply: "cancelReply" }, ngImport: i0, template: `
-    <div class="composer">
-      @if (replyingTo()) {
-        <div class="reply-bar">
-          <div class="reply-content">
-            <span class="reply-name">{{ replyingTo()!.senderName }}</span>
-            <span class="reply-body">{{ replyingTo()!.body }}</span>
-          </div>
-          <button class="icon-btn" [attr.aria-label]="t('cancel')" (click)="cancelReply.emit()">
-            <ion-icon name="close-outline" aria-hidden="true" />
-          </button>
-        </div>
-      }
-
-      @if (emojiOpen()) {
-        <div class="emoji-row">
-          @for (e of quickEmojis; track e) {
-            <button class="emoji" (click)="insertEmoji(e)">{{ e }}</button>
-          }
-        </div>
-      }
-
-      @if (recording()) {
-        <div class="rec-bar">
-          <button class="icon-btn danger" [attr.aria-label]="t('cancel')" (click)="cancelRecording()">
-            <ion-icon name="trash-outline" aria-hidden="true" />
-          </button>
-          <span class="rec-dot"></span>
-          <span class="rec-time">{{ recTimeLabel() }}</span>
-          <span class="rec-spacer"></span>
-          <button class="send-btn" [attr.aria-label]="t('send')" (click)="stopAndSend()">
-            <ion-icon name="arrow-up-outline" aria-hidden="true" />
-          </button>
-        </div>
-      } @else {
-        <div class="pill">
-          @if (showAttach()) {
-            <label class="icon-btn" [attr.aria-label]="t('attach')">
-              <ion-icon name="add-outline" aria-hidden="true" />
-              <input type="file" hidden (change)="onFile($event)" accept="image/*,application/pdf" />
-            </label>
-          }
-
-          <ion-textarea
-            class="field"
-            [placeholder]="placeholderText()"
-            [disabled]="disabled()"
-            [maxlength]="maxLength()"
-            [autoGrow]="true"
-            [rows]="1"
-            [value]="body()"
-            [spellcheck]="false"
-            autocapitalize="sentences"
-            autocorrect="off"
-            enterkeyhint="enter"
-            (ionInput)="onInput($event)"
-            (keydown)="onKeydown($event)"
-            (paste)="onPaste($event)"
-          ></ion-textarea>
-
-          @if (showEmoji()) {
-            <button
-              class="icon-btn"
-              [class.active]="emojiOpen()"
-              [attr.aria-label]="t('emoji')"
-              (click)="toggleEmoji()"
-            >
-              <ion-icon name="happy-outline" aria-hidden="true" />
-            </button>
-          }
-
-          @if (canSend()) {
-            <button class="send-btn" [attr.aria-label]="t('send')" (click)="onSend()">
-              <ion-icon name="arrow-up-outline" aria-hidden="true" />
-            </button>
-          } @else if (showMic()) {
-            <button class="icon-btn mic" [attr.aria-label]="t('voice')" (click)="startRecording()">
-              <ion-icon name="mic-outline" aria-hidden="true" />
-            </button>
-          }
-        </div>
-      }
-    </div>
-  `, isInline: true, styles: [":host{display:block}.composer{display:flex;flex-direction:column;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--ion-background-color, #fff);border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.reply-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-left:3px solid var(--ion-color-primary);border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.reply-content{display:flex;flex-direction:column;flex:1;min-width:0;font-size:.8125rem}.reply-name{font-weight:700;color:var(--ion-color-primary)}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ion-color-medium, #92949c)}.emoji-row{display:flex;gap:4px;flex-wrap:wrap}.emoji{border:none;background:var(--ion-color-step-100, rgba(127, 127, 127, .1));border-radius:10px;padding:4px 8px;font-size:1.25rem;cursor:pointer}.pill{display:flex;align-items:flex-end;gap:4px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:24px;padding:2px 6px}.field{flex:1;--background: transparent;--padding-start: 6px;--padding-end: 6px;--padding-top: 8px;--padding-bottom: 8px;margin:0;max-height:120px;font-size:.9375rem}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border:none;border-radius:50%;background:transparent;color:var(--ion-color-medium, #92949c);cursor:pointer;font-size:1.375rem}.icon-btn:hover,.icon-btn.active,.icon-btn.mic:hover{color:var(--ion-color-primary)}.send-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border:none;border-radius:50%;background:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff);cursor:pointer;font-size:1.25rem;transition:transform .1s ease}.send-btn:active{transform:scale(.92)}.icon-btn.danger{color:var(--ion-color-danger, #eb445a)}.rec-bar{display:flex;align-items:center;gap:10px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:24px;padding:2px 6px}.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--ion-color-danger, #eb445a);animation:rec-pulse 1.2s ease-in-out infinite}.rec-time{font-variant-numeric:tabular-nums;font-size:.9375rem;color:var(--ion-text-color, #000)}.rec-spacer{flex:1}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.3}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatComposerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-chat-composer', standalone: true, imports: [CommonModule, IonTextarea, IonIcon], template: `
-    <div class="composer">
-      @if (replyingTo()) {
-        <div class="reply-bar">
-          <div class="reply-content">
-            <span class="reply-name">{{ replyingTo()!.senderName }}</span>
-            <span class="reply-body">{{ replyingTo()!.body }}</span>
-          </div>
-          <button class="icon-btn" [attr.aria-label]="t('cancel')" (click)="cancelReply.emit()">
-            <ion-icon name="close-outline" aria-hidden="true" />
-          </button>
-        </div>
-      }
-
-      @if (emojiOpen()) {
-        <div class="emoji-row">
-          @for (e of quickEmojis; track e) {
-            <button class="emoji" (click)="insertEmoji(e)">{{ e }}</button>
-          }
-        </div>
-      }
-
-      @if (recording()) {
-        <div class="rec-bar">
-          <button class="icon-btn danger" [attr.aria-label]="t('cancel')" (click)="cancelRecording()">
-            <ion-icon name="trash-outline" aria-hidden="true" />
-          </button>
-          <span class="rec-dot"></span>
-          <span class="rec-time">{{ recTimeLabel() }}</span>
-          <span class="rec-spacer"></span>
-          <button class="send-btn" [attr.aria-label]="t('send')" (click)="stopAndSend()">
-            <ion-icon name="arrow-up-outline" aria-hidden="true" />
-          </button>
-        </div>
-      } @else {
-        <div class="pill">
-          @if (showAttach()) {
-            <label class="icon-btn" [attr.aria-label]="t('attach')">
-              <ion-icon name="add-outline" aria-hidden="true" />
-              <input type="file" hidden (change)="onFile($event)" accept="image/*,application/pdf" />
-            </label>
-          }
-
-          <ion-textarea
-            class="field"
-            [placeholder]="placeholderText()"
-            [disabled]="disabled()"
-            [maxlength]="maxLength()"
-            [autoGrow]="true"
-            [rows]="1"
-            [value]="body()"
-            [spellcheck]="false"
-            autocapitalize="sentences"
-            autocorrect="off"
-            enterkeyhint="enter"
-            (ionInput)="onInput($event)"
-            (keydown)="onKeydown($event)"
-            (paste)="onPaste($event)"
-          ></ion-textarea>
-
-          @if (showEmoji()) {
-            <button
-              class="icon-btn"
-              [class.active]="emojiOpen()"
-              [attr.aria-label]="t('emoji')"
-              (click)="toggleEmoji()"
-            >
-              <ion-icon name="happy-outline" aria-hidden="true" />
-            </button>
-          }
-
-          @if (canSend()) {
-            <button class="send-btn" [attr.aria-label]="t('send')" (click)="onSend()">
-              <ion-icon name="arrow-up-outline" aria-hidden="true" />
-            </button>
-          } @else if (showMic()) {
-            <button class="icon-btn mic" [attr.aria-label]="t('voice')" (click)="startRecording()">
-              <ion-icon name="mic-outline" aria-hidden="true" />
-            </button>
-          }
-        </div>
-      }
-    </div>
-  `, styles: [":host{display:block}.composer{display:flex;flex-direction:column;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--ion-background-color, #fff);border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.reply-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-left:3px solid var(--ion-color-primary);border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.reply-content{display:flex;flex-direction:column;flex:1;min-width:0;font-size:.8125rem}.reply-name{font-weight:700;color:var(--ion-color-primary)}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ion-color-medium, #92949c)}.emoji-row{display:flex;gap:4px;flex-wrap:wrap}.emoji{border:none;background:var(--ion-color-step-100, rgba(127, 127, 127, .1));border-radius:10px;padding:4px 8px;font-size:1.25rem;cursor:pointer}.pill{display:flex;align-items:flex-end;gap:4px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:24px;padding:2px 6px}.field{flex:1;--background: transparent;--padding-start: 6px;--padding-end: 6px;--padding-top: 8px;--padding-bottom: 8px;margin:0;max-height:120px;font-size:.9375rem}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border:none;border-radius:50%;background:transparent;color:var(--ion-color-medium, #92949c);cursor:pointer;font-size:1.375rem}.icon-btn:hover,.icon-btn.active,.icon-btn.mic:hover{color:var(--ion-color-primary)}.send-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border:none;border-radius:50%;background:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff);cursor:pointer;font-size:1.25rem;transition:transform .1s ease}.send-btn:active{transform:scale(.92)}.icon-btn.danger{color:var(--ion-color-danger, #eb445a)}.rec-bar{display:flex;align-items:center;gap:10px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:24px;padding:2px 6px}.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--ion-color-danger, #eb445a);animation:rec-pulse 1.2s ease-in-out infinite}.rec-time{font-variant-numeric:tabular-nums;font-size:.9375rem;color:var(--ion-text-color, #000)}.rec-spacer{flex:1}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.3}}\n"] }]
-        }], ctorParameters: () => [] });
-
-/**
- * val-conversation-list-item — fila de lista de conversaciones estilo
- * Telegram/WhatsApp: avatar (imagen o iniciales), nombre + hora relativa,
- * preview del último mensaje + badge de no-leídos. Signal inputs, dark-safe.
- *
- * @example
- * <val-conversation-list-item
- *   [name]="conv.name"
- *   [lastMessage]="conv.lastMsgPreview"
- *   [timestamp]="conv.lastMsgAt"
- *   [unreadCount]="conv.unread"
- *   (select)="open(conv.convId)" />
- */
-class ConversationListItemComponent {
-    constructor() {
-        this.i18n = inject(I18nService);
-        this.name = input('');
-        this.avatarUrl = input(undefined);
-        this.lastMessage = input('');
-        this.timestamp = input(undefined);
-        this.unreadCount = input(0);
-        this.locale = input('es-CL');
-        this.select = output();
-        this.initials = computed(() => {
-            const name = this.name().trim();
-            if (!name)
-                return '?';
-            const parts = name.split(/\s+/);
-            return (parts[0][0] + (parts[1]?.[0] ?? '')).toUpperCase();
-        });
-        this.timeLabel = computed(() => formatRelativeTime(this.timestamp(), this.locale(), {
-            today: '',
-            yesterday: this.i18n.t('yesterday', '_global'),
-        }));
-        this.i18n.registerDefaults('ConversationListItem', {
-            es: { empty: 'Sin mensajes' },
-            en: { empty: 'No messages' },
-        });
-    }
-    emptyText() {
-        this.i18n.lang();
-        return this.i18n.t('empty', 'ConversationListItem');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConversationListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ConversationListItemComponent, isStandalone: true, selector: "val-conversation-list-item", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, lastMessage: { classPropertyName: "lastMessage", publicName: "lastMessage", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, unreadCount: { classPropertyName: "unreadCount", publicName: "unreadCount", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, ngImport: i0, template: `
-    <button class="item" (click)="select.emit()">
-      <div class="avatar">
-        @if (avatarUrl()) {
-          <img [src]="avatarUrl()" [alt]="name()" />
-        } @else {
-          <span>{{ initials() }}</span>
-        }
-      </div>
-      <div class="content">
-        <div class="top">
-          <span class="name">{{ name() }}</span>
-          @if (timeLabel()) {
-            <span class="time" [class.unread]="unreadCount() > 0">{{ timeLabel() }}</span>
-          }
-        </div>
-        <div class="bottom">
-          <span class="preview" [class.muted]="!lastMessage()">
-            {{ lastMessage() || emptyText() }}
-          </span>
-          @if (unreadCount() > 0) {
-            <span class="badge">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>
-          }
-        </div>
-      </div>
-    </button>
-  `, isInline: true, styles: [":host{display:block}.item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:none;background:transparent;cursor:pointer;text-align:left;border-radius:12px;transition:background .12s ease}.item:hover{background:var(--ion-color-step-50, rgba(127, 127, 127, .06))}.avatar{width:48px;height:48px;flex-shrink:0;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--ion-color-primary);color:#fff;font-weight:700;font-size:1rem}.avatar img{width:100%;height:100%;object-fit:cover}.content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.top,.bottom{display:flex;align-items:center;gap:8px}.name{flex:1;min-width:0;font-weight:600;font-size:.9375rem;color:var(--ion-text-color, #000);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{flex-shrink:0;font-size:.75rem;color:var(--ion-color-medium, #92949c)}.time.unread{color:var(--ion-color-primary);font-weight:600}.preview{flex:1;min-width:0;font-size:.875rem;color:var(--ion-color-medium, #92949c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview.muted{font-style:italic;opacity:.7}.badge{flex-shrink:0;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff);font-size:.6875rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConversationListItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-conversation-list-item', standalone: true, imports: [CommonModule], template: `
-    <button class="item" (click)="select.emit()">
-      <div class="avatar">
-        @if (avatarUrl()) {
-          <img [src]="avatarUrl()" [alt]="name()" />
-        } @else {
-          <span>{{ initials() }}</span>
-        }
-      </div>
-      <div class="content">
-        <div class="top">
-          <span class="name">{{ name() }}</span>
-          @if (timeLabel()) {
-            <span class="time" [class.unread]="unreadCount() > 0">{{ timeLabel() }}</span>
-          }
-        </div>
-        <div class="bottom">
-          <span class="preview" [class.muted]="!lastMessage()">
-            {{ lastMessage() || emptyText() }}
-          </span>
-          @if (unreadCount() > 0) {
-            <span class="badge">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>
-          }
-        </div>
-      </div>
-    </button>
-  `, styles: [":host{display:block}.item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:none;background:transparent;cursor:pointer;text-align:left;border-radius:12px;transition:background .12s ease}.item:hover{background:var(--ion-color-step-50, rgba(127, 127, 127, .06))}.avatar{width:48px;height:48px;flex-shrink:0;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--ion-color-primary);color:#fff;font-weight:700;font-size:1rem}.avatar img{width:100%;height:100%;object-fit:cover}.content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.top,.bottom{display:flex;align-items:center;gap:8px}.name{flex:1;min-width:0;font-weight:600;font-size:.9375rem;color:var(--ion-text-color, #000);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{flex-shrink:0;font-size:.75rem;color:var(--ion-color-medium, #92949c)}.time.unread{color:var(--ion-color-primary);font-weight:600}.preview{flex:1;min-width:0;font-size:.875rem;color:var(--ion-color-medium, #92949c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview.muted{font-style:italic;opacity:.7}.badge{flex-shrink:0;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff);font-size:.6875rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}\n"] }]
-        }], ctorParameters: () => [] });
-
 const TYPING_I18N = {
     es: {
         one: '{name} esta escribiendo',
@@ -73324,9 +72683,8 @@ const TYPING_I18N = {
 /**
  * val-typing-indicator
  *
- * Muestra quienes estan escribiendo con animacion de tres puntos. Se oculta
- * si `typingUsers` esta vacio. Usa signal input para que `typingText` (computed)
- * recompute al cambiar la lista.
+ * Muestra quienes estan escribiendo en el chat con animacion de tres puntos.
+ * Se oculta automaticamente si typingUsers esta vacio.
  *
  * @example
  * <val-typing-indicator [typingUsers]="['Maria', 'Carlos']" />
@@ -73334,10 +72692,10 @@ const TYPING_I18N = {
 class TypingIndicatorComponent {
     constructor() {
         this.i18n = inject(I18nService);
-        this.typingUsers = input([]);
+        this.typingUsers = [];
         this.typingText = computed(() => {
             this.i18n.lang();
-            const users = this.typingUsers();
+            const users = this.typingUsers ?? [];
             if (users.length === 0)
                 return '';
             if (users.length === 1) {
@@ -73351,8 +72709,8 @@ class TypingIndicatorComponent {
         this.i18n.registerDefaults('TypingIndicator', TYPING_I18N);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TypingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TypingIndicatorComponent, isStandalone: true, selector: "val-typing-indicator", inputs: { typingUsers: { classPropertyName: "typingUsers", publicName: "typingUsers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (typingUsers().length > 0) {
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TypingIndicatorComponent, isStandalone: true, selector: "val-typing-indicator", inputs: { typingUsers: "typingUsers" }, ngImport: i0, template: `
+    @if (typingUsers && typingUsers.length > 0) {
       <div class="typing-indicator">
         <div class="dots">
           <span></span>
@@ -73367,7 +72725,7 @@ class TypingIndicatorComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TypingIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-typing-indicator', standalone: true, imports: [CommonModule], template: `
-    @if (typingUsers().length > 0) {
+    @if (typingUsers && typingUsers.length > 0) {
       <div class="typing-indicator">
         <div class="dots">
           <span></span>
@@ -73378,280 +72736,270 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </div>
     }
   `, styles: [".typing-indicator{display:flex;align-items:center;gap:8px;padding:4px 12px;min-height:28px}.typing-text{font-size:.8125rem;color:var(--ion-color-medium, #92949c);font-style:italic}.dots{display:flex;align-items:center;gap:3px}.dots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ion-color-medium, #92949c);animation:typing-dot 1.2s infinite ease-in-out}.dots span:nth-child(1){animation-delay:0s}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}@keyframes typing-dot{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { typingUsers: [{
+                type: Input
+            }] } });
 
-addIcons({ arrowDownOutline, chatbubblesOutline });
+addIcons({ chatbubblesOutline });
 const CHAT_WINDOW_I18N = {
     es: {
         conversationClosed: 'Esta conversacion esta cerrada',
         loading: 'Cargando mensajes...',
-        noMessages: 'Aun no hay mensajes. Escribe el primero.',
-        newMessages: 'Mensajes nuevos',
+        noMessages: 'No hay mensajes aun',
     },
     en: {
         conversationClosed: 'This conversation is closed',
         loading: 'Loading messages...',
-        noMessages: 'No messages yet. Send the first one.',
-        newMessages: 'New messages',
+        noMessages: 'No messages yet',
     },
 };
 /**
- * val-chat-window — ventana de chat completa (signal inputs).
+ * val-chat-window
  *
- * Agrupa mensajes consecutivos del mismo emisor y por día (separadores sticky),
- * muestra avatar/nombre solo en los bordes del grupo, scroll-to-bottom inteligente
- * (auto-scroll si estás abajo, pill "mensajes nuevos" si estás leyendo arriba),
- * composer moderno con contexto de respuesta, y typing indicator.
+ * Ventana de chat completa. Muestra la lista de mensajes agrupados por fecha,
+ * el indicador de escritura, el input de mensaje (solo si isOpen) y un banner
+ * cuando la conversacion esta cerrada. Auto-scroll al ultimo mensaje cuando
+ * llegan mensajes nuevos.
  *
- * API pública estable (consumida por thread-panel y showcase): inputs convId,
- * messages, currentUserId, isOpen, typingUsers, isLoading; outputs sendMessage,
- * loadMore, reactionClick, deleteMessage, replyTo (+ editMessage/attach/voice nuevos).
+ * @example
+ * <val-chat-window
+ *   [convId]="conv.id"
+ *   [messages]="messages()"
+ *   [currentUserId]="userId"
+ *   [isOpen]="conv.status === 'open'"
+ *   [typingUsers]="typingUsers()"
+ *   (sendMessage)="onSend($event)"
+ *   (reactionClick)="onReaction($event)"
+ * />
  */
 class ChatWindowComponent {
     constructor() {
         this.i18n = inject(I18nService);
-        this.convId = input('');
-        this.messages = input([]);
-        this.currentUserId = input('');
-        this.isOpen = input(true);
-        this.typingUsers = input([]);
-        this.isLoading = input(false);
-        this.sendMessage = output();
-        this.loadMore = output();
-        this.reactionClick = output();
-        this.deleteMessage = output();
-        this.replyTo = output();
-        this.editMessage = output();
-        this.typing = output();
-        this.attach = output();
-        this.voice = output();
-        this.msgsEl = viewChild('msgs');
-        this.replyingTo = signal(null);
-        this.atBottom = signal(true);
-        this.hasNew = signal(false);
-        this.locale = computed(() => (this.i18n.lang() === 'en' ? 'en-US' : 'es-CL'));
-        this.rows = computed(() => {
-            const msgs = this.messages();
+        this.convId = '';
+        this.messages = [];
+        this.participants = [];
+        this.currentUserId = '';
+        this.isOpen = true;
+        this.typingUsers = [];
+        this.isLoading = false;
+        this.sendMessage = new EventEmitter();
+        this.loadMore = new EventEmitter();
+        this.reactionClick = new EventEmitter();
+        this.deleteMessage = new EventEmitter();
+        this.replyTo = new EventEmitter();
+        this.prevMessageCount = 0;
+        this.shouldScrollToBottom = false;
+        this.messageGroups = computed(() => {
+            const msgs = this.messages ?? [];
             if (msgs.length === 0)
                 return [];
-            const labels = {
-                today: this.i18n.t('today', '_global'),
-                yesterday: this.i18n.t('yesterday', '_global'),
-            };
-            const out = [];
-            let prevDay = '';
-            for (let i = 0; i < msgs.length; i++) {
-                const m = msgs[i];
-                const d = m.createdAt instanceof Date ? m.createdAt : new Date(m.createdAt);
-                const day = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
-                const newDay = day !== prevDay;
-                if (newDay) {
-                    out.push({ kind: 'date', id: 'date-' + day, label: formatDateSeparator(d, this.locale(), labels) });
-                    prevDay = day;
+            const groups = [];
+            let currentLabel = '';
+            let currentGroup = [];
+            for (const msg of msgs) {
+                const label = this.formatDateLabel(msg.createdAt);
+                if (label !== currentLabel) {
+                    if (currentGroup.length > 0) {
+                        groups.push({ dateLabel: currentLabel, messages: currentGroup });
+                    }
+                    currentLabel = label;
+                    currentGroup = [msg];
+                }
+                else {
+                    currentGroup.push(msg);
                 }
-                const prev = msgs[i - 1];
-                const next = msgs[i + 1];
-                const firstInGroup = newDay || !prev || prev.senderId !== m.senderId;
-                const nextDay = next
-                    ? `${new Date(next.createdAt).getFullYear()}-${new Date(next.createdAt).getMonth()}-${new Date(next.createdAt).getDate()}`
-                    : '';
-                const lastInGroup = !next || next.senderId !== m.senderId || nextDay !== day;
-                out.push({
-                    kind: 'msg',
-                    id: m.msgId,
-                    msg: m,
-                    showName: firstInGroup && !m.isMine,
-                    showAvatar: lastInGroup && !m.isMine,
-                    tail: lastInGroup,
-                });
             }
-            return out;
+            if (currentGroup.length > 0) {
+                groups.push({ dateLabel: currentLabel, messages: currentGroup });
+            }
+            return groups;
+        });
+        this.closedText = computed(() => {
+            this.i18n.lang();
+            return this.i18n.t('conversationClosed', 'ChatWindow');
+        });
+        this.loadingText = computed(() => {
+            this.i18n.lang();
+            return this.i18n.t('loading', 'ChatWindow');
         });
         this.i18n.registerDefaults('ChatWindow', CHAT_WINDOW_I18N);
-        // Auto-scroll al fondo cuando llegan mensajes y el usuario ya estaba abajo
-        // (o el último mensaje es propio). Si está leyendo arriba, marca "nuevos".
-        let prevCount = 0;
-        effect(() => {
-            const rows = this.rows();
-            const count = rows.length;
-            if (count === prevCount)
-                return;
-            const grew = count > prevCount;
-            prevCount = count;
-            const last = this.messages()[this.messages().length - 1];
-            const mine = last?.isMine ?? false;
-            if (this.atBottom() || mine) {
-                setTimeout(() => this.scrollToBottom(false), 0);
-            }
-            else if (grew) {
-                this.hasNew.set(true);
+    }
+    ngAfterViewInit() {
+        if (typeof window !== 'undefined' && window.visualViewport) {
+            this.vvListener = () => this.adjustToKeyboard();
+            window.visualViewport.addEventListener('resize', this.vvListener);
+            this.adjustToKeyboard();
+        }
+    }
+    ngOnDestroy() {
+        if (this.vvListener && typeof window !== 'undefined' && window.visualViewport) {
+            window.visualViewport.removeEventListener('resize', this.vvListener);
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['messages']) {
+            const current = changes['messages'].currentValue ?? [];
+            if (current.length !== this.prevMessageCount) {
+                this.prevMessageCount = current.length;
+                this.shouldScrollToBottom = true;
             }
-        });
+        }
     }
-    onScroll() {
-        const el = this.msgsEl()?.nativeElement;
-        if (!el)
-            return;
-        const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
-        this.atBottom.set(nearBottom);
-        if (nearBottom)
-            this.hasNew.set(false);
-        if (el.scrollTop < 40)
-            this.loadMore.emit();
+    ngAfterViewChecked() {
+        if (this.shouldScrollToBottom) {
+            this.scrollToBottom();
+            this.shouldScrollToBottom = false;
+        }
     }
-    scrollToBottom(smooth) {
-        const el = this.msgsEl()?.nativeElement;
-        if (!el)
+    adjustToKeyboard() {
+        const el = this.chatWindowElRef?.nativeElement;
+        if (!el || !window.visualViewport)
             return;
-        el.scrollTo({ top: el.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
-        this.atBottom.set(true);
-        this.hasNew.set(false);
+        const rect = el.getBoundingClientRect();
+        const available = window.visualViewport.height - rect.top;
+        if (available > 50) {
+            el.style.height = `${available}px`;
+        }
     }
-    onSend(body) {
-        this.sendMessage.emit(body);
-        this.replyingTo.set(null);
+    onReactionClick(event) {
+        this.reactionClick.emit({ msgId: event.msgId, token: event.token });
     }
-    onAction(event) {
-        switch (event.type) {
-            case 'reply': {
-                const m = this.messages().find(x => x.msgId === event.msgId);
-                if (m) {
-                    this.replyingTo.set({ msgId: m.msgId, senderName: m.senderName, body: m.body });
-                }
-                this.replyTo.emit(event.msgId);
-                break;
-            }
-            case 'edit':
-                this.editMessage.emit(event.msgId);
-                break;
-            case 'delete':
-                this.deleteMessage.emit(event.msgId);
-                break;
-            case 'react':
-                this.reactionClick.emit({ msgId: event.msgId, token: event.token ?? '👍' });
-                break;
+    onEditClick(_msgId) {
+        // Implementacion futura: emitir evento de edicion
+    }
+    onTyping() {
+        // El padre puede suscribirse al output typing si necesita propagar a Firestore
+    }
+    scrollToBottom() {
+        const el = this.messagesListRef?.nativeElement;
+        if (el) {
+            el.scrollTop = el.scrollHeight;
         }
     }
-    t(key) {
-        return this.i18n.t(key, 'ChatWindow');
+    formatDateLabel(date) {
+        if (!date)
+            return '';
+        const d = date instanceof Date ? date : new Date(date);
+        const now = new Date();
+        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+        const msgDay = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+        const diffMs = today.getTime() - msgDay.getTime();
+        const diffDays = Math.round(diffMs / 86400000);
+        if (diffDays === 0)
+            return this.i18n.t('today', '_global') || 'Hoy';
+        if (diffDays === 1)
+            return this.i18n.t('yesterday', '_global') || 'Ayer';
+        return d.toLocaleDateString([], { day: '2-digit', month: 'short', year: 'numeric' });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatWindowComponent, isStandalone: true, selector: "val-chat-window", inputs: { convId: { classPropertyName: "convId", publicName: "convId", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, typingUsers: { classPropertyName: "typingUsers", publicName: "typingUsers", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", loadMore: "loadMore", reactionClick: "reactionClick", deleteMessage: "deleteMessage", replyTo: "replyTo", editMessage: "editMessage", typing: "typing", attach: "attach", voice: "voice" }, viewQueries: [{ propertyName: "msgsEl", first: true, predicate: ["msgs"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="chat">
-      <div #msgs class="messages" (scroll)="onScroll()">
-        @if (isLoading()) {
-          <div class="state">
-            <span>{{ t('loading') }}</span>
-          </div>
-        } @else if (rows().length === 0) {
-          <div class="state empty">
-            <ion-icon name="chatbubbles-outline" aria-hidden="true" />
-            <span>{{ t('noMessages') }}</span>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatWindowComponent, isStandalone: true, selector: "val-chat-window", inputs: { convId: "convId", messages: "messages", participants: "participants", currentUserId: "currentUserId", isOpen: "isOpen", typingUsers: "typingUsers", isLoading: "isLoading" }, outputs: { sendMessage: "sendMessage", loadMore: "loadMore", reactionClick: "reactionClick", deleteMessage: "deleteMessage", replyTo: "replyTo" }, viewQueries: [{ propertyName: "messagesListRef", first: true, predicate: ["messagesList"], descendants: true }, { propertyName: "chatWindowElRef", first: true, predicate: ["chatWindowEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div class="chat-window" #chatWindowEl>
+      <div class="messages-list" #messagesList>
+        @if (isLoading) {
+          <div class="loading-state">
+            <ion-spinner name="dots"></ion-spinner>
+            <span>{{ loadingText() }}</span>
           </div>
         } @else {
-          @for (row of rows(); track row.id) {
-            @if (row.kind === 'date') {
-              <div class="date-sep">
-                <span>{{ row.label }}</span>
-              </div>
-            } @else {
+          @for (group of messageGroups(); track group.dateLabel) {
+            <div class="date-separator">
+              <div class="date-line"></div>
+              <span class="date-label">{{ group.dateLabel }}</span>
+              <div class="date-line"></div>
+            </div>
+            @for (msg of group.messages; track msg.msgId) {
               <val-message-bubble
-                [msg]="row.msg"
-                [showName]="row.showName"
-                [showAvatar]="row.showAvatar"
-                [tail]="row.tail"
-                [locale]="locale()"
-                (action)="onAction($event)"
+                [props]="msg"
+                (reactionClick)="onReactionClick($event)"
+                (replyClick)="replyTo.emit($event.msgId)"
+                (deleteClick)="deleteMessage.emit($event.msgId)"
+                (editClick)="onEditClick($event.msgId)"
               />
             }
           }
         }
-        <val-typing-indicator [typingUsers]="typingUsers()" />
       </div>
 
-      @if (!atBottom()) {
-        <button class="scroll-down" (click)="scrollToBottom(true)" aria-label="scroll">
-          <ion-icon name="arrow-down-outline" aria-hidden="true" />
-          @if (hasNew()) {
-            <span class="dot"></span>
-          }
-        </button>
-      }
+      <val-typing-indicator [typingUsers]="typingUsers" />
 
-      @if (isOpen()) {
-        <val-chat-composer
-          [replyingTo]="replyingTo()"
-          (send)="onSend($event)"
-          (typing)="typing.emit()"
-          (attach)="attach.emit($event)"
-          (voice)="voice.emit()"
-          (cancelReply)="replyingTo.set(null)"
-        />
+      @if (!isOpen) {
+        <div class="closed-banner">{{ closedText() }}</div>
       } @else {
-        <div class="closed-banner">{{ t('conversationClosed') }}</div>
+        <val-chat-input [props]="{ disabled: isLoading }" (send)="sendMessage.emit($event)" (typing)="onTyping()" />
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}.chat{position:relative;display:flex;flex-direction:column;height:100%;min-height:0}.messages{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:0}.state{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ion-color-medium, #92949c);font-size:.9375rem;text-align:center;padding:24px}.state.empty ion-icon{font-size:2.5rem;opacity:.5}.date-sep{position:sticky;top:4px;z-index:1;display:flex;justify-content:center;margin:8px 0}.date-sep span{font-size:.75rem;color:var(--ion-color-medium, #92949c);background:var(--ion-color-step-100, rgba(127, 127, 127, .14));padding:3px 12px;border-radius:999px;backdrop-filter:blur(4px)}.scroll-down{position:absolute;right:14px;bottom:84px;width:40px;height:40px;border-radius:50%;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium, #92949c);box-shadow:0 2px 10px #00000026;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;z-index:3}.scroll-down .dot{position:absolute;top:0;right:0;width:12px;height:12px;border-radius:50%;background:var(--ion-color-primary);border:2px solid var(--ion-card-background, #fff)}.closed-banner{text-align:center;padding:14px;color:var(--ion-color-medium, #92949c);font-size:.875rem;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: MessageBubbleComponent, selector: "val-message-bubble", inputs: ["msg", "showAvatar", "showName", "tail", "locale"], outputs: ["action"] }, { kind: "component", type: ChatComposerComponent, selector: "val-chat-composer", inputs: ["placeholder", "disabled", "maxLength", "replyingTo", "showAttach", "showEmoji", "showMic"], outputs: ["send", "typing", "attach", "voice", "cancelReply"] }, { kind: "component", type: TypingIndicatorComponent, selector: "val-typing-indicator", inputs: ["typingUsers"] }] }); }
+  `, isInline: true, styles: [".chat-window{display:flex;flex-direction:column;height:100%;background:var(--ion-background-color, #f4f5f8);overflow:hidden}.messages-list{flex:1;overflow-y:auto;padding:12px 8px;scroll-behavior:smooth}.messages-list::-webkit-scrollbar{width:4px}.messages-list::-webkit-scrollbar-thumb{background:var(--ion-color-light-shade, #d7d8da);border-radius:2px}.date-separator{display:flex;align-items:center;gap:8px;margin:12px 0}.date-separator .date-line{flex:1;height:1px;background:var(--ion-border-color, rgba(0, 0, 0, .1))}.date-separator .date-label{font-size:.75rem;color:var(--ion-color-medium, #92949c);white-space:nowrap;padding:0 4px}.loading-state{display:flex;align-items:center;justify-content:center;padding:24px;color:var(--ion-color-medium, #92949c);font-size:.875rem;gap:8px}.closed-banner{padding:10px 16px;background:var(--ion-color-warning-tint, #fff9e6);border-top:1px solid var(--ion-color-warning, #ffc409);text-align:center;font-size:.875rem;color:var(--ion-color-warning-shade, #b29500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: MessageBubbleComponent, selector: "val-message-bubble", inputs: ["props"], outputs: ["reactionClick", "replyClick", "deleteClick", "editClick"] }, { kind: "component", type: ChatInputComponent, selector: "val-chat-input", inputs: ["props"], outputs: ["send", "typing"] }, { kind: "component", type: TypingIndicatorComponent, selector: "val-typing-indicator", inputs: ["typingUsers"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatWindowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-chat-window', standalone: true, imports: [CommonModule, IonIcon, MessageBubbleComponent, ChatComposerComponent, TypingIndicatorComponent], template: `
-    <div class="chat">
-      <div #msgs class="messages" (scroll)="onScroll()">
-        @if (isLoading()) {
-          <div class="state">
-            <span>{{ t('loading') }}</span>
-          </div>
-        } @else if (rows().length === 0) {
-          <div class="state empty">
-            <ion-icon name="chatbubbles-outline" aria-hidden="true" />
-            <span>{{ t('noMessages') }}</span>
+            args: [{ selector: 'val-chat-window', standalone: true, imports: [CommonModule, IonIcon, IonSpinner, MessageBubbleComponent, ChatInputComponent, TypingIndicatorComponent], template: `
+    <div class="chat-window" #chatWindowEl>
+      <div class="messages-list" #messagesList>
+        @if (isLoading) {
+          <div class="loading-state">
+            <ion-spinner name="dots"></ion-spinner>
+            <span>{{ loadingText() }}</span>
           </div>
         } @else {
-          @for (row of rows(); track row.id) {
-            @if (row.kind === 'date') {
-              <div class="date-sep">
-                <span>{{ row.label }}</span>
-              </div>
-            } @else {
+          @for (group of messageGroups(); track group.dateLabel) {
+            <div class="date-separator">
+              <div class="date-line"></div>
+              <span class="date-label">{{ group.dateLabel }}</span>
+              <div class="date-line"></div>
+            </div>
+            @for (msg of group.messages; track msg.msgId) {
               <val-message-bubble
-                [msg]="row.msg"
-                [showName]="row.showName"
-                [showAvatar]="row.showAvatar"
-                [tail]="row.tail"
-                [locale]="locale()"
-                (action)="onAction($event)"
+                [props]="msg"
+                (reactionClick)="onReactionClick($event)"
+                (replyClick)="replyTo.emit($event.msgId)"
+                (deleteClick)="deleteMessage.emit($event.msgId)"
+                (editClick)="onEditClick($event.msgId)"
               />
             }
           }
         }
-        <val-typing-indicator [typingUsers]="typingUsers()" />
       </div>
 
-      @if (!atBottom()) {
-        <button class="scroll-down" (click)="scrollToBottom(true)" aria-label="scroll">
-          <ion-icon name="arrow-down-outline" aria-hidden="true" />
-          @if (hasNew()) {
-            <span class="dot"></span>
-          }
-        </button>
-      }
+      <val-typing-indicator [typingUsers]="typingUsers" />
 
-      @if (isOpen()) {
-        <val-chat-composer
-          [replyingTo]="replyingTo()"
-          (send)="onSend($event)"
-          (typing)="typing.emit()"
-          (attach)="attach.emit($event)"
-          (voice)="voice.emit()"
-          (cancelReply)="replyingTo.set(null)"
-        />
+      @if (!isOpen) {
+        <div class="closed-banner">{{ closedText() }}</div>
       } @else {
-        <div class="closed-banner">{{ t('conversationClosed') }}</div>
+        <val-chat-input [props]="{ disabled: isLoading }" (send)="sendMessage.emit($event)" (typing)="onTyping()" />
       }
     </div>
-  `, styles: [":host{display:block;height:100%}.chat{position:relative;display:flex;flex-direction:column;height:100%;min-height:0}.messages{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:0}.state{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ion-color-medium, #92949c);font-size:.9375rem;text-align:center;padding:24px}.state.empty ion-icon{font-size:2.5rem;opacity:.5}.date-sep{position:sticky;top:4px;z-index:1;display:flex;justify-content:center;margin:8px 0}.date-sep span{font-size:.75rem;color:var(--ion-color-medium, #92949c);background:var(--ion-color-step-100, rgba(127, 127, 127, .14));padding:3px 12px;border-radius:999px;backdrop-filter:blur(4px)}.scroll-down{position:absolute;right:14px;bottom:84px;width:40px;height:40px;border-radius:50%;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium, #92949c);box-shadow:0 2px 10px #00000026;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;z-index:3}.scroll-down .dot{position:absolute;top:0;right:0;width:12px;height:12px;border-radius:50%;background:var(--ion-color-primary);border:2px solid var(--ion-card-background, #fff)}.closed-banner{text-align:center;padding:14px;color:var(--ion-color-medium, #92949c);font-size:.875rem;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}\n"] }]
-        }], ctorParameters: () => [] });
+  `, styles: [".chat-window{display:flex;flex-direction:column;height:100%;background:var(--ion-background-color, #f4f5f8);overflow:hidden}.messages-list{flex:1;overflow-y:auto;padding:12px 8px;scroll-behavior:smooth}.messages-list::-webkit-scrollbar{width:4px}.messages-list::-webkit-scrollbar-thumb{background:var(--ion-color-light-shade, #d7d8da);border-radius:2px}.date-separator{display:flex;align-items:center;gap:8px;margin:12px 0}.date-separator .date-line{flex:1;height:1px;background:var(--ion-border-color, rgba(0, 0, 0, .1))}.date-separator .date-label{font-size:.75rem;color:var(--ion-color-medium, #92949c);white-space:nowrap;padding:0 4px}.loading-state{display:flex;align-items:center;justify-content:center;padding:24px;color:var(--ion-color-medium, #92949c);font-size:.875rem;gap:8px}.closed-banner{padding:10px 16px;background:var(--ion-color-warning-tint, #fff9e6);border-top:1px solid var(--ion-color-warning, #ffc409);text-align:center;font-size:.875rem;color:var(--ion-color-warning-shade, #b29500)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { convId: [{
+                type: Input
+            }], messages: [{
+                type: Input
+            }], participants: [{
+                type: Input
+            }], currentUserId: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], typingUsers: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], sendMessage: [{
+                type: Output
+            }], loadMore: [{
+                type: Output
+            }], reactionClick: [{
+                type: Output
+            }], deleteMessage: [{
+                type: Output
+            }], replyTo: [{
+                type: Output
+            }], messagesListRef: [{
+                type: ViewChild,
+                args: ['messagesList']
+            }], chatWindowElRef: [{
+                type: ViewChild,
+                args: ['chatWindowEl']
+            }] } });
 
 const THREAD_PANEL_I18N = {
     es: {
@@ -73694,7 +73042,7 @@ class ThreadPanelComponent {
         this.conv = signal(null);
         this.messages = signal([]);
         this.typingUsers = signal([]);
-        this.isConvOpen = computed(() => this.conv()?.settings?.isOpen === true);
+        this.isConvOpen = computed(() => this.conv()?.status === 'open');
         this.loadingText = computed(() => {
             this.i18n.lang();
             return this.i18n.t('loading', 'ThreadPanel');
@@ -73732,10 +73080,10 @@ class ThreadPanelComponent {
             const appId = this.chatConfig?.appId ?? '';
             if (orgId && appId) {
                 this.msgSub = this.conversationSvc
-                    .watchMessages(conversation.convId, orgId, appId)
+                    .watchMessages(conversation.id, orgId, appId)
                     .subscribe(msgs => this.messages.set(msgs));
                 this.typingSub = this.conversationSvc
-                    .watchTyping(conversation.convId, orgId, appId)
+                    .watchTyping(conversation.id, orgId, appId)
                     .subscribe(users => this.typingUsers.set(users));
             }
         }
@@ -73753,14 +73101,14 @@ class ThreadPanelComponent {
         const orgId = this.getOrgId();
         const appId = this.chatConfig?.appId ?? '';
         if (conv && orgId && appId && this.conversationSvc) {
-            this.conversationSvc.stopTyping(conv.convId, orgId, appId);
+            this.conversationSvc.stopTyping(conv.id, orgId, appId);
         }
     }
     onSend(body) {
         const conv = this.conv();
         if (!conv || !this.conversationSvc)
             return;
-        this.conversationSvc.sendMessage(conv.convId, body).subscribe();
+        this.conversationSvc.sendMessage(conv.id, body).subscribe();
     }
     onReactionClick(event) {
         // Reacciones se implementan a nivel de app consumer
@@ -73770,7 +73118,7 @@ class ThreadPanelComponent {
         const conv = this.conv();
         if (!conv || !this.conversationSvc)
             return;
-        this.conversationSvc.deleteMessage(conv.convId, msgId).subscribe();
+        this.conversationSvc.deleteMessage(conv.id, msgId).subscribe();
     }
     onReplyTo(_msgId) {
         // Implementacion futura: seleccionar mensaje de respuesta
@@ -73795,7 +73143,7 @@ class ThreadPanelComponent {
       } @else {
         <div class="thread-chat">
           <val-chat-window
-            [convId]="conv()?.convId ?? ''"
+            [convId]="conv()?.id ?? ''"
             [messages]="bubbleMessages()"
             [currentUserId]="currentUserId"
             [isOpen]="isConvOpen()"
@@ -73809,7 +73157,7 @@ class ThreadPanelComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".thread-panel{display:flex;flex-direction:column;height:100%;background:var(--ion-background-color, #f4f5f8)}.thread-header{padding:12px 16px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff))}.thread-header .thread-title{font-size:1rem;font-weight:600;color:var(--ion-text-color, #000);margin:0}.thread-loading{display:flex;align-items:center;justify-content:center;flex:1;gap:10px;color:var(--ion-color-medium, #92949c);font-size:.875rem}.thread-chat{flex:1;overflow:hidden;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: ChatWindowComponent, selector: "val-chat-window", inputs: ["convId", "messages", "currentUserId", "isOpen", "typingUsers", "isLoading"], outputs: ["sendMessage", "loadMore", "reactionClick", "deleteMessage", "replyTo", "editMessage", "typing", "attach", "voice"] }] }); }
+  `, isInline: true, styles: [".thread-panel{display:flex;flex-direction:column;height:100%;background:var(--ion-background-color, #f4f5f8)}.thread-header{padding:12px 16px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff))}.thread-header .thread-title{font-size:1rem;font-weight:600;color:var(--ion-text-color, #000);margin:0}.thread-loading{display:flex;align-items:center;justify-content:center;flex:1;gap:10px;color:var(--ion-color-medium, #92949c);font-size:.875rem}.thread-chat{flex:1;overflow:hidden;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: ChatWindowComponent, selector: "val-chat-window", inputs: ["convId", "messages", "participants", "currentUserId", "isOpen", "typingUsers", "isLoading"], outputs: ["sendMessage", "loadMore", "reactionClick", "deleteMessage", "replyTo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThreadPanelComponent, decorators: [{
             type: Component,
@@ -73829,7 +73177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       } @else {
         <div class="thread-chat">
           <val-chat-window
-            [convId]="conv()?.convId ?? ''"
+            [convId]="conv()?.id ?? ''"
             [messages]="bubbleMessages()"
             [currentUserId]="currentUserId"
             [isOpen]="isConvOpen()"
@@ -73863,5 +73211,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, APP_VERSION_PLATFORM_PLUGIN, APP_VERSION_REMOTE_PLUGIN, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, ARTICLE_STRIP_DEFAULTS, AUTH_CTA_DEFAULTS, AVATAR_UPLOAD_DEFAULTS, AboutViewComponent, AccordionComponent, AccountViewComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, ApiKeyCreateModalComponent, ApiKeyService, ApiKeysModalComponent, ApiKeysViewComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, ArticleStripComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthCtaComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, ChatComposerComponent, ChatInputComponent, ChatWindowComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, ConversationListItemComponent, ConversationService, CookieBannerComponent, CookieSettingsComponent, CountdownComponent, CreateOrgModalComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_BUTTON_PRESETS, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_LOGIN_LOGO, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_POST_UPDATE_GRACE_MS, DEFAULT_PRESETS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DatePickerComponent, DateRangeInputComponent, DebugConsoleComponent, DeleteAccountModalComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EditOrgModalComponent, EmptyStateComponent, EntityCardComponent, EntityFeedService, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FieldListComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FontSizeOption, FontSizeSelectorComponent, FontSizeService, FooterComponent, FooterLinksComponent, FormComponent, FormFieldComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HapticsService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HrefComponent, HtmlViewerModalComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, IONIC_COLORS$5 as IONIC_COLORS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, InviteMemberModalComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGGED_IN_HINT_COOKIE, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LanguageSelectorV2Component, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadMoreComponent, LoadingDirective, LocalStorageService, LocaleService, LoginAttemptModalComponent, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, METRIC_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MemberDetailModalComponent, MemberImportModalComponent, MenuComponent, MessageBubbleComponent, MessagingService, MetaService, MetricCardComponent, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationPreferencesViewComponent, NotificationsService, NotificationsViewComponent, NumberFromToComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OptionCardsComponent, OrgInfoSheetComponent, OrgService, OrgSwitchService, OrganizationViewComponent, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, POST_UPDATE_TS_KEY, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PdfService, PermissionCatalogService, PermissionSelectorComponent, PermissionsModalComponent, PermissionsViewComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PreferencesViewComponent, PresetService, PriceTagComponent, ProcessLinksPipe, ProfileSkeletonComponent, ProfileViewComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QrScannerComponent, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, ReactionBarComponent, ReactionsService, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestFormComponent, RequestModalComponent, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SETTINGS_SECTIONS_CATALOG, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SectionHeaderComponent, SecurityViewComponent, SegmentControlComponent, SelectSearchComponent, SessionListModalComponent, SessionService, SettingsHubComponent, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SplashComponent, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, SwitchOrgModalComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, ThreadPanelComponent, TicketCardComponent, TicketCardImageService, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TransferOwnershipModalComponent, TranslatePipe, TypedCollection, TypingIndicatorComponent, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_CHAT_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_REACTIONS_CONFIG, VALTECH_SETTINGS_MENU_LINKS, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VALTECH_WHATSAPP_CONFIG, VERSION, ValtechErrorService, VerifyViewComponent, WhatsappFabComponent, WhatsappService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, beautifyLegalArticle, blogPost, buildCompanyFooterProps, buildFooterLinks, buildLegalLinkResolver, buildPath, buildSettingsCards, button, canSubmitRequestType, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createPageState, createPermissionLabeler, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, formatClockTime, formatDateSeparator, formatRelativeTime, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, groupPermissionsByScope, guestGuard, hasEmulators, iconButton, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isIonicColor, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAboutRoutes, provideValtechAccountRoutes, provideValtechAds, provideValtechApiKeysRoutes, provideValtechAppConfig, provideValtechAppVersion, provideValtechAppVersionHttp, provideValtechAuth, provideValtechAuthInterceptor, provideValtechChat, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechNotificationPreferencesRoutes, provideValtechNotificationsRoutes, provideValtechOrganizationRoutes, provideValtechPermissionsRoutes, provideValtechPreferencesRoutes, provideValtechPresets, provideValtechProfileRoutes, provideValtechReactions, provideValtechSecurityRoutes, provideValtechSettingsRoutes, provideValtechSite, provideValtechSkeleton, provideValtechWhatsapp, query, rbacGuard, renderPatternSvgInner, replaceSpecialChars, requestSubmitMode, resolveColor, resolveInputDefaultValue, resolveIonicColor, resolveWebBaseUrl, roleGuard, selectableRequestTypes, storagePaths, superAdminGuard, toArticle };
+export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, APP_VERSION_PLATFORM_PLUGIN, APP_VERSION_REMOTE_PLUGIN, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, ARTICLE_STRIP_DEFAULTS, AUTH_CTA_DEFAULTS, AVATAR_UPLOAD_DEFAULTS, AboutViewComponent, AccordionComponent, AccountViewComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, ApiKeyCreateModalComponent, ApiKeyService, ApiKeysModalComponent, ApiKeysViewComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, ArticleStripComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthCtaComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, ChatInputComponent, ChatWindowComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, ConversationService, CookieBannerComponent, CookieSettingsComponent, CountdownComponent, CreateOrgModalComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_BUTTON_PRESETS, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_LOGIN_LOGO, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_POST_UPDATE_GRACE_MS, DEFAULT_PRESETS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DatePickerComponent, DateRangeInputComponent, DebugConsoleComponent, DeleteAccountModalComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EditOrgModalComponent, EmptyStateComponent, EntityCardComponent, EntityFeedService, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FieldListComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FontSizeOption, FontSizeSelectorComponent, FontSizeService, FooterComponent, FooterLinksComponent, FormComponent, FormFieldComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HapticsService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HrefComponent, HtmlViewerModalComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, IONIC_COLORS$5 as IONIC_COLORS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, InviteMemberModalComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGGED_IN_HINT_COOKIE, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LanguageSelectorV2Component, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadMoreComponent, LoadingDirective, LocalStorageService, LocaleService, LoginAttemptModalComponent, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, METRIC_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MemberDetailModalComponent, MemberImportModalComponent, MenuComponent, MessageBubbleComponent, MessagingService, MetaService, MetricCardComponent, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationPreferencesViewComponent, NotificationsService, NotificationsViewComponent, NumberFromToComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OptionCardsComponent, OrgInfoSheetComponent, OrgService, OrgSwitchService, OrganizationViewComponent, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, POST_UPDATE_TS_KEY, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PdfService, PermissionCatalogService, PermissionSelectorComponent, PermissionsModalComponent, PermissionsViewComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PreferencesViewComponent, PresetService, PriceTagComponent, ProcessLinksPipe, ProfileSkeletonComponent, ProfileViewComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QrScannerComponent, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, ReactionBarComponent, ReactionsService, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestFormComponent, RequestModalComponent, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SETTINGS_SECTIONS_CATALOG, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SectionHeaderComponent, SecurityViewComponent, SegmentControlComponent, SelectSearchComponent, SessionListModalComponent, SessionService, SettingsHubComponent, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SplashComponent, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, SwitchOrgModalComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, ThreadPanelComponent, TicketCardComponent, TicketCardImageService, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TransferOwnershipModalComponent, TranslatePipe, TypedCollection, TypingIndicatorComponent, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_CHAT_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_REACTIONS_CONFIG, VALTECH_SETTINGS_MENU_LINKS, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VALTECH_WHATSAPP_CONFIG, VERSION, ValtechErrorService, VerifyViewComponent, WhatsappFabComponent, WhatsappService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, beautifyLegalArticle, blogPost, buildCompanyFooterProps, buildFooterLinks, buildLegalLinkResolver, buildPath, buildSettingsCards, button, canSubmitRequestType, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createPageState, createPermissionLabeler, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, groupPermissionsByScope, guestGuard, hasEmulators, iconButton, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isIonicColor, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAboutRoutes, provideValtechAccountRoutes, provideValtechAds, provideValtechApiKeysRoutes, provideValtechAppConfig, provideValtechAppVersion, provideValtechAppVersionHttp, provideValtechAuth, provideValtechAuthInterceptor, provideValtechChat, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechNotificationPreferencesRoutes, provideValtechNotificationsRoutes, provideValtechOrganizationRoutes, provideValtechPermissionsRoutes, provideValtechPreferencesRoutes, provideValtechPresets, provideValtechProfileRoutes, provideValtechReactions, provideValtechSecurityRoutes, provideValtechSettingsRoutes, provideValtechSite, provideValtechSkeleton, provideValtechWhatsapp, query, rbacGuard, renderPatternSvgInner, replaceSpecialChars, requestSubmitMode, resolveColor, resolveInputDefaultValue, resolveIonicColor, resolveWebBaseUrl, roleGuard, selectableRequestTypes, storagePaths, superAdminGuard, toArticle };
 //# sourceMappingURL=valtech-components.mjs.map