valtech-components 4.0.225 → 4.0.226

package/lib/components/molecules/chat-composer/chat-composer.component.d.ts

@@ -0,0 +1,46 @@
+import { MessageReplyTo } from '../../../services/chat/types';
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ */
+export declare class ChatComposerComponent {
+    private i18n;
+    readonly placeholder: import("@angular/core").InputSignal<string>;
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    readonly maxLength: import("@angular/core").InputSignal<number>;
+    readonly replyingTo: import("@angular/core").InputSignal<MessageReplyTo>;
+    readonly showAttach: import("@angular/core").InputSignal<boolean>;
+    readonly showEmoji: import("@angular/core").InputSignal<boolean>;
+    readonly showMic: import("@angular/core").InputSignal<boolean>;
+    readonly send: import("@angular/core").OutputEmitterRef<string>;
+    readonly typing: import("@angular/core").OutputEmitterRef<void>;
+    readonly attach: import("@angular/core").OutputEmitterRef<File>;
+    readonly voice: import("@angular/core").OutputEmitterRef<void>;
+    readonly cancelReply: import("@angular/core").OutputEmitterRef<void>;
+    protected readonly body: import("@angular/core").WritableSignal<string>;
+    protected readonly emojiOpen: import("@angular/core").WritableSignal<boolean>;
+    protected readonly quickEmojis: string[];
+    private lastTypingEmit;
+    constructor();
+    protected readonly canSend: import("@angular/core").Signal<boolean>;
+    protected readonly placeholderText: import("@angular/core").Signal<string>;
+    protected onInput(event: Event): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onSend(): void;
+    protected toggleEmoji(): void;
+    protected insertEmoji(emoji: string): void;
+    protected onFile(event: Event): void;
+    /**
+     * 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.
+     */
+    private emitTypingDebounced;
+    t(key: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChatComposerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChatComposerComponent, "val-chat-composer", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "replyingTo": { "alias": "replyingTo"; "required": false; "isSignal": true; }; "showAttach": { "alias": "showAttach"; "required": false; "isSignal": true; }; "showEmoji": { "alias": "showEmoji"; "required": false; "isSignal": true; }; "showMic": { "alias": "showMic"; "required": false; "isSignal": true; }; }, { "send": "send"; "typing": "typing"; "attach": "attach"; "voice": "voice"; "cancelReply": "cancelReply"; }, never, never, true, never>;
+}

package/lib/components/molecules/conversation-list-item/conversation-list-item.component.d.ts

@@ -0,0 +1,30 @@
+import * as i0 from "@angular/core";
+/**
+ * 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)" />
+ */
+export declare class ConversationListItemComponent {
+    private i18n;
+    readonly name: import("@angular/core").InputSignal<string>;
+    readonly avatarUrl: import("@angular/core").InputSignal<string>;
+    readonly lastMessage: import("@angular/core").InputSignal<string>;
+    readonly timestamp: import("@angular/core").InputSignal<string | Date>;
+    readonly unreadCount: import("@angular/core").InputSignal<number>;
+    readonly locale: import("@angular/core").InputSignal<string>;
+    readonly select: import("@angular/core").OutputEmitterRef<void>;
+    constructor();
+    protected readonly initials: import("@angular/core").Signal<string>;
+    protected readonly timeLabel: import("@angular/core").Signal<string>;
+    protected emptyText(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConversationListItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConversationListItemComponent, "val-conversation-list-item", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; "isSignal": true; }; "lastMessage": { "alias": "lastMessage"; "required": false; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": false; "isSignal": true; }; "unreadCount": { "alias": "unreadCount"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>;
+}

package/lib/components/molecules/message-bubble/message-bubble.component.d.ts

@@ -1,40 +1,41 @@
-import { EventEmitter, OnInit } from '@angular/core';
-import { I18nService } from '../../../services/i18n';
-import { MessageBubbleMetadata, MessageReactionClickEvent, MessageReplyClickEvent, MessageDeleteClickEvent, MessageEditClickEvent } from './types';
-import { MessageReaction } from '../../../services/chat/types';
+import { MessageBubbleMetadata } from './types';
 import * as i0 from "@angular/core";
+/** Acción disparada desde una burbuja. Un solo output tipado en vez de 4. */
+export interface MessageBubbleAction {
+    type: 'reply' | 'edit' | 'delete' | 'react';
+    msgId: string;
+    /** Token del emoji, solo para type 'react'. */
+    token?: string;
+}
 /**
- * val-message-bubble
+ * val-message-bubble — burbuja de mensaje presentacional (signal inputs).
  *
- * 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.
+ * 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.
  *
- * @example
- * <val-message-bubble
- *   [props]="msg"
- *   (reactionClick)="onReaction($event)"
- *   (replyClick)="onReply($event)"
- *   (deleteClick)="onDelete($event)"
- * />
+ * Read receipts estilo WhatsApp: sending → reloj, sent → ✓, delivered/read → ✓✓
+ * (read en color), failed → alerta.
  */
-export declare class MessageBubbleComponent implements OnInit {
-    protected i18n: I18nService;
-    props: MessageBubbleMetadata;
-    reactionClick: EventEmitter<MessageReactionClickEvent>;
-    replyClick: EventEmitter<MessageReplyClickEvent>;
-    deleteClick: EventEmitter<MessageDeleteClickEvent>;
-    editClick: EventEmitter<MessageEditClickEvent>;
+export declare class MessageBubbleComponent {
+    private i18n;
+    readonly msg: import("@angular/core").InputSignal<MessageBubbleMetadata>;
+    readonly showAvatar: import("@angular/core").InputSignal<boolean>;
+    readonly showName: import("@angular/core").InputSignal<boolean>;
+    readonly tail: import("@angular/core").InputSignal<boolean>;
+    readonly locale: import("@angular/core").InputSignal<string>;
+    readonly action: import("@angular/core").OutputEmitterRef<MessageBubbleAction>;
+    protected readonly actionsOpen: import("@angular/core").WritableSignal<boolean>;
     constructor();
-    ngOnInit(): void;
-    deletedText(): string;
-    editedLabel(): string;
-    formatTime(date: Date): string;
-    statusIcon(): string;
-    onReactionClick(reaction: MessageReaction): void;
-    onReplyClick(): void;
-    onDeleteClick(): void;
-    onEditClick(): void;
+    protected readonly time: import("@angular/core").Signal<string>;
+    protected readonly initials: import("@angular/core").Signal<string>;
+    protected readonly imageAttachments: import("@angular/core").Signal<import("valtech-components").MessageAttachment[]>;
+    protected readonly fileAttachments: import("@angular/core").Signal<import("valtech-components").MessageAttachment[]>;
+    protected readonly statusIcon: import("@angular/core").Signal<"time-outline" | "alert-circle" | "checkmark-done" | "checkmark">;
+    protected toggleActions(): void;
+    protected emit(type: MessageBubbleAction['type'], token?: string): void;
+    t(key: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageBubbleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageBubbleComponent, "val-message-bubble", never, { "props": { "alias": "props"; "required": false; }; }, { "reactionClick": "reactionClick"; "replyClick": "replyClick"; "deleteClick": "deleteClick"; "editClick": "editClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageBubbleComponent, "val-message-bubble", never, { "msg": { "alias": "msg"; "required": true; "isSignal": true; }; "showAvatar": { "alias": "showAvatar"; "required": false; "isSignal": true; }; "showName": { "alias": "showName"; "required": false; "isSignal": true; }; "tail": { "alias": "tail"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
 }

package/lib/components/molecules/typing-indicator/typing-indicator.component.d.ts

@@ -3,17 +3,18 @@ import * as i0 from "@angular/core";
 /**
  * val-typing-indicator
  *
- * Muestra quienes estan escribiendo en el chat con animacion de tres puntos.
- * Se oculta automaticamente si typingUsers esta vacio.
+ * 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.
  *
  * @example
  * <val-typing-indicator [typingUsers]="['Maria', 'Carlos']" />
  */
 export declare class TypingIndicatorComponent {
     protected i18n: I18nService;
-    typingUsers: string[];
+    readonly typingUsers: import("@angular/core").InputSignal<string[]>;
     constructor();
     protected typingText: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TypingIndicatorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TypingIndicatorComponent, "val-typing-indicator", never, { "typingUsers": { "alias": "typingUsers"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TypingIndicatorComponent, "val-typing-indicator", never, { "typingUsers": { "alias": "typingUsers"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/components/organisms/chat-window/chat-window.component.d.ts

@@ -1,64 +1,64 @@
-import { EventEmitter, OnChanges, SimpleChanges, AfterViewChecked } from '@angular/core';
-import { I18nService } from '../../../services/i18n';
-import { MessageBubbleMetadata, MessageReactionClickEvent } from '../../molecules/message-bubble/types';
+import { MessageReplyTo } from '../../../services/chat/types';
+import { MessageBubbleAction } from '../../molecules/message-bubble/message-bubble.component';
+import { MessageBubbleMetadata } from '../../molecules/message-bubble/types';
 import * as i0 from "@angular/core";
-/** Estructura interna para agrupar mensajes por fecha. */
-interface MessageGroup {
-    dateLabel: string;
-    messages: MessageBubbleMetadata[];
-}
+type ChatRow = {
+    kind: 'date';
+    id: string;
+    label: string;
+} | {
+    kind: 'msg';
+    id: string;
+    msg: MessageBubbleMetadata;
+    showName: boolean;
+    showAvatar: boolean;
+    tail: boolean;
+};
 /**
- * val-chat-window
+ * val-chat-window — ventana de chat completa (signal inputs).
  *
- * 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.
+ * 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.
  *
- * @example
- * <val-chat-window
- *   [convId]="conv.id"
- *   [messages]="messages()"
- *   [currentUserId]="userId"
- *   [isOpen]="conv.status === 'open'"
- *   [typingUsers]="typingUsers()"
- *   (sendMessage)="onSend($event)"
- *   (reactionClick)="onReaction($event)"
- * />
+ * 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).
  */
-export declare class ChatWindowComponent implements OnChanges, AfterViewChecked {
-    protected i18n: I18nService;
-    convId: string;
-    messages: MessageBubbleMetadata[];
-    participants: string[];
-    currentUserId: string;
-    isOpen: boolean;
-    typingUsers: string[];
-    isLoading: boolean;
-    sendMessage: EventEmitter<string>;
-    loadMore: EventEmitter<void>;
-    reactionClick: EventEmitter<{
+export declare class ChatWindowComponent {
+    private i18n;
+    readonly convId: import("@angular/core").InputSignal<string>;
+    readonly messages: import("@angular/core").InputSignal<MessageBubbleMetadata[]>;
+    readonly currentUserId: import("@angular/core").InputSignal<string>;
+    readonly isOpen: import("@angular/core").InputSignal<boolean>;
+    readonly typingUsers: import("@angular/core").InputSignal<string[]>;
+    readonly isLoading: import("@angular/core").InputSignal<boolean>;
+    readonly sendMessage: import("@angular/core").OutputEmitterRef<string>;
+    readonly loadMore: import("@angular/core").OutputEmitterRef<void>;
+    readonly reactionClick: import("@angular/core").OutputEmitterRef<{
         msgId: string;
         token: string;
     }>;
-    deleteMessage: EventEmitter<string>;
-    replyTo: EventEmitter<string>;
-    private messagesListRef?;
-    private prevMessageCount;
-    private shouldScrollToBottom;
-    private readonly messagesSig;
+    readonly deleteMessage: import("@angular/core").OutputEmitterRef<string>;
+    readonly replyTo: import("@angular/core").OutputEmitterRef<string>;
+    readonly editMessage: import("@angular/core").OutputEmitterRef<string>;
+    readonly typing: import("@angular/core").OutputEmitterRef<void>;
+    readonly attach: import("@angular/core").OutputEmitterRef<File>;
+    readonly voice: import("@angular/core").OutputEmitterRef<void>;
+    private readonly msgsEl;
+    protected readonly replyingTo: import("@angular/core").WritableSignal<MessageReplyTo>;
+    protected readonly atBottom: import("@angular/core").WritableSignal<boolean>;
+    protected readonly hasNew: import("@angular/core").WritableSignal<boolean>;
+    protected readonly locale: import("@angular/core").Signal<"es-CL" | "en-US">;
     constructor();
-    ngOnChanges(changes: SimpleChanges): void;
-    ngAfterViewChecked(): void;
-    protected messageGroups: import("@angular/core").Signal<MessageGroup[]>;
-    protected closedText: import("@angular/core").Signal<string>;
-    protected loadingText: import("@angular/core").Signal<string>;
-    protected onReactionClick(event: MessageReactionClickEvent): void;
-    protected onEditClick(_msgId: string): void;
-    protected onTyping(): void;
-    private scrollToBottom;
-    private formatDateLabel;
+    protected readonly rows: import("@angular/core").Signal<ChatRow[]>;
+    protected onScroll(): void;
+    protected scrollToBottom(smooth: boolean): void;
+    protected onSend(body: string): void;
+    protected onAction(event: MessageBubbleAction): void;
+    t(key: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChatWindowComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChatWindowComponent, "val-chat-window", never, { "convId": { "alias": "convId"; "required": false; }; "messages": { "alias": "messages"; "required": false; }; "participants": { "alias": "participants"; "required": false; }; "currentUserId": { "alias": "currentUserId"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "typingUsers": { "alias": "typingUsers"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; }, { "sendMessage": "sendMessage"; "loadMore": "loadMore"; "reactionClick": "reactionClick"; "deleteMessage": "deleteMessage"; "replyTo": "replyTo"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChatWindowComponent, "val-chat-window", never, { "convId": { "alias": "convId"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "currentUserId": { "alias": "currentUserId"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "typingUsers": { "alias": "typingUsers"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; }, { "sendMessage": "sendMessage"; "loadMore": "loadMore"; "reactionClick": "reactionClick"; "deleteMessage": "deleteMessage"; "replyTo": "replyTo"; "editMessage": "editMessage"; "typing": "typing"; "attach": "attach"; "voice": "voice"; }, never, never, true, never>;
 }
 export {};

package/lib/services/chat/types.d.ts

@@ -70,8 +70,12 @@ export interface Conversation {
 }
 /** Tipo de mensaje. */
 export type MessageType = 'text' | 'image' | 'file' | 'system';
-/** Estado de envio del mensaje. */
-export type MessageStatus = 'sending' | 'sent' | 'failed';
+/**
+ * Estado de envio/entrega de un mensaje (para read receipts estilo WhatsApp):
+ *   sending → reloj · sent → ✓ · delivered → ✓✓ gris · read → ✓✓ primary · failed → alerta.
+ * El backend hoy solo emite hasta `sent`; los demas estan soportados para el futuro.
+ */
+export type MessageStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
 /** Archivo adjunto en un mensaje. */
 export interface MessageAttachment {
     /** Nombre del archivo. */

package/lib/shared/utils/datetime.d.ts

@@ -19,3 +19,22 @@ export type TimeOfDayKey = 'goodMorning' | 'goodAfternoon' | 'goodEvening';
  * const text = i18n.t(key);               // 'Buenos días' | 'Buenas tardes' | 'Buenas noches'
  */
 export declare function getTimeOfDayKey(date?: Date): TimeOfDayKey;
+/** Hora corta local, ej. "14:05". */
+export declare function formatClockTime(value: Date | string | undefined | null, locale?: string): string;
+/**
+ * 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.
+ */
+export declare function formatRelativeTime(value: Date | string | undefined | null, locale?: string, labels?: {
+    today?: string;
+    yesterday?: string;
+}): string;
+/**
+ * Etiqueta para separadores de fecha dentro de un chat: "Hoy" / "Ayer" /
+ * fecha larga ("12 de junio de 2026"). `labels.today/yesterday` ya traducidos.
+ */
+export declare function formatDateSeparator(value: Date | string | undefined | null, locale?: string, labels?: {
+    today?: string;
+    yesterday?: string;
+}): string;

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "4.0.225";
+export declare const VERSION = "4.0.226";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "4.0.225",
+  "version": "4.0.226",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/public-api.d.ts

@@ -474,10 +474,12 @@ export { ConversationService } from './lib/services/chat/conversation.service';
 export { provideValtechChat, VALTECH_CHAT_CONFIG } from './lib/services/chat/config';
 export type { ValtechChatConfig } from './lib/services/chat/config';
 export * from './lib/services/chat/types';
-export { MessageBubbleComponent } from './lib/components/molecules/message-bubble/message-bubble.component';
+export { MessageBubbleComponent, type MessageBubbleAction, } from './lib/components/molecules/message-bubble/message-bubble.component';
 export * from './lib/components/molecules/message-bubble/types';
 export { ChatInputComponent } from './lib/components/molecules/chat-input/chat-input.component';
 export * from './lib/components/molecules/chat-input/types';
+export { ChatComposerComponent } from './lib/components/molecules/chat-composer/chat-composer.component';
+export { ConversationListItemComponent } from './lib/components/molecules/conversation-list-item/conversation-list-item.component';
 export { TypingIndicatorComponent } from './lib/components/molecules/typing-indicator/typing-indicator.component';
 export { ChatWindowComponent } from './lib/components/organisms/chat-window/chat-window.component';
 export * from './lib/components/organisms/chat-window/types';