valtech-components 4.0.231 → 4.0.233

package/fesm2022/valtech-components.mjs

@@ -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.231';
+const VERSION = '4.0.233';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -72209,10 +72209,21 @@ class ConversationService {
         return this.http.delete(`${this.baseUrl}/conversations/${convId}/participants/${userId}`);
     }
     /**
-     * Envia un mensaje a una conversacion.
+     * 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.
      */
-    sendMessage(convId, body) {
-        return this.http.post(`${this.baseUrl}/conversations/${convId}/messages`, { body });
+    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);
     }
     /**
      * Elimina (marca como eliminado) un mensaje.
@@ -72439,7 +72450,8 @@ class MessageBubbleComponent {
             return (parts[0][0] + (parts[1]?.[0] ?? '')).toUpperCase();
         });
         this.imageAttachments = computed(() => (this.msg().attachments ?? []).filter(a => a.mimeType?.startsWith('image/')));
-        this.fileAttachments = 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':
@@ -72510,6 +72522,13 @@ class MessageBubbleComponent {
                 }
               </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) {
@@ -72573,7 +72592,7 @@ class MessageBubbleComponent {
         }
       </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}.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"] }] }); }
+  `, 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,
@@ -72618,6 +72637,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }
               </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) {
@@ -72681,7 +72707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }
       </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}.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"] }]
+  `, 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: () => [] });
 
 addIcons({ sendOutline });
@@ -72834,35 +72860,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-addIcons({ addOutline, closeOutline, happyOutline, micOutline, arrowUpOutline });
+addIcons({ addOutline, closeOutline, documentOutline, 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',
+        remove: 'Quitar',
     },
     en: {
         placeholder: 'Write a message',
         send: 'Send',
         attach: 'Attach',
-        emoji: 'Emoji',
         voice: 'Voice message',
         replyingTo: 'Replying to',
         cancel: 'Cancel',
+        remove: 'Remove',
     },
 };
-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.
+ * Pill con: adjuntar (+), textarea auto-grow, y mic/enviar (mic cuando está vacío,
+ * enviar cuando hay texto o adjuntos). Los adjuntos (botón + / pegar imagen) se
+ * acumulan como PREVIEW (miniaturas) y se emiten por `(attach)` recién al ENVIAR
+ * — no se van solos al chat. Audio grabado se emite directo al parar.
+ * No incluye picker de emoji: el teclado del sistema ya lo trae.
  */
 class ChatComposerComponent {
     constructor() {
@@ -72872,7 +72898,6 @@ class ChatComposerComponent {
         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();
@@ -72880,12 +72905,24 @@ class ChatComposerComponent {
         this.voice = output();
         this.cancelReply = output();
         this.body = signal('');
-        this.emojiOpen = signal(false);
-        this.quickEmojis = QUICK_EMOJIS;
+        this.pending = signal([]);
+        this.pendingId = 0;
+        // 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();
+            if (this.disabled())
+                return false;
+            return (t.length > 0 && t.length <= this.maxLength()) || this.pending().length > 0;
         });
         this.placeholderText = computed(() => {
             this.i18n.lang();
@@ -72905,29 +72942,61 @@ class ChatComposerComponent {
         }
     }
     onSend() {
-        const trimmed = this.body().trim();
-        if (!trimmed || trimmed.length > this.maxLength())
+        if (!this.canSend())
             return;
-        this.send.emit(trimmed);
+        // Primero los adjuntos pendientes (cada uno se sube y manda en el consumer),
+        // luego el texto como mensaje aparte si lo hay.
+        const files = this.pending();
+        for (const att of files) {
+            this.attach.emit(att.file);
+            if (att.url)
+                URL.revokeObjectURL(att.url);
+        }
+        this.pending.set([]);
+        const trimmed = this.body().trim();
+        if (trimmed && trimmed.length <= this.maxLength()) {
+            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);
+            this.addPending(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.addPending(file);
+                }
+                return;
+            }
+        }
+    }
+    addPending(file) {
+        const isImage = file.type.startsWith('image/');
+        const url = isImage ? URL.createObjectURL(file) : undefined;
+        this.pending.update(arr => [...arr, { id: this.pendingId++, file, url, isImage }]);
+    }
+    removePending(id) {
+        this.pending.update(arr => {
+            const found = arr.find(a => a.id === id);
+            if (found?.url)
+                URL.revokeObjectURL(found.url);
+            return arr.filter(a => a.id !== id);
+        });
+    }
     /**
-     * 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.
+     * Emite typing como máximo 1 vez cada 2s. performance.now es seguro en runtime.
      */
     emitTypingDebounced() {
         const now = performance.now();
@@ -72936,11 +73005,94 @@ class ChatComposerComponent {
             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();
+        for (const att of this.pending()) {
+            if (att.url)
+                URL.revokeObjectURL(att.url);
+        }
+    }
     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: `
+    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 }, 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">
@@ -72954,52 +73106,75 @@ class ChatComposerComponent {
         </div>
       }
 
-      @if (emojiOpen()) {
-        <div class="emoji-row">
-          @for (e of quickEmojis; track e) {
-            <button class="emoji" (click)="insertEmoji(e)">{{ e }}</button>
+      @if (pending().length > 0) {
+        <div class="pending-row">
+          @for (att of pending(); track att.id) {
+            <div class="thumb" [class.file]="!att.isImage">
+              @if (att.isImage) {
+                <img [src]="att.url" [alt]="att.file.name" />
+              } @else {
+                <ion-icon name="document-outline" aria-hidden="true" />
+                <span class="thumb-name">{{ att.file.name }}</span>
+              }
+              <button class="thumb-remove" [attr.aria-label]="t('remove')" (click)="removePending(att.id)">
+                <ion-icon name="close-outline" aria-hidden="true" />
+              </button>
+            </div>
           }
         </div>
       }
 
-      <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()"
-          (ionInput)="onInput($event)"
-          (keydown)="onKeydown($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" />
+      @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>
-        }
-
-        @if (canSend()) {
-          <button class="send-btn" [attr.aria-label]="t('send')" (click)="onSend()">
+          <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>
-        } @else if (showMic()) {
-          <button class="icon-btn mic" [attr.aria-label]="t('voice')" (click)="voice.emit()">
-            <ion-icon name="mic-outline" aria-hidden="true" />
-          </button>
-        }
-      </div>
+        </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 (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)}\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"] }] }); }
+  `, 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)}.pending-row{display:flex;gap:8px;flex-wrap:wrap;padding:2px 4px}.thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.thumb img{width:100%;height:100%;object-fit:cover}.thumb.file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;color:var(--ion-color-medium, #92949c);font-size:1.5rem}.thumb-name{font-size:.5625rem;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ion-text-color, #000)}.thumb-remove{position:absolute;top:2px;right:2px;width:20px;height:20px;border:none;border-radius:50%;background:#0000008c;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.875rem}.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{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,
@@ -73017,52 +73192,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       }
 
-      @if (emojiOpen()) {
-        <div class="emoji-row">
-          @for (e of quickEmojis; track e) {
-            <button class="emoji" (click)="insertEmoji(e)">{{ e }}</button>
+      @if (pending().length > 0) {
+        <div class="pending-row">
+          @for (att of pending(); track att.id) {
+            <div class="thumb" [class.file]="!att.isImage">
+              @if (att.isImage) {
+                <img [src]="att.url" [alt]="att.file.name" />
+              } @else {
+                <ion-icon name="document-outline" aria-hidden="true" />
+                <span class="thumb-name">{{ att.file.name }}</span>
+              }
+              <button class="thumb-remove" [attr.aria-label]="t('remove')" (click)="removePending(att.id)">
+                <ion-icon name="close-outline" aria-hidden="true" />
+              </button>
+            </div>
           }
         </div>
       }
 
-      <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()"
-          (ionInput)="onInput($event)"
-          (keydown)="onKeydown($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" />
+      @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>
-        }
-
-        @if (canSend()) {
-          <button class="send-btn" [attr.aria-label]="t('send')" (click)="onSend()">
+          <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>
-        } @else if (showMic()) {
-          <button class="icon-btn mic" [attr.aria-label]="t('voice')" (click)="voice.emit()">
-            <ion-icon name="mic-outline" aria-hidden="true" />
-          </button>
-        }
-      </div>
+        </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 (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)}\n"] }]
+  `, 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)}.pending-row{display:flex;gap:8px;flex-wrap:wrap;padding:2px 4px}.thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.thumb img{width:100%;height:100%;object-fit:cover}.thumb.file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;color:var(--ion-color-medium, #92949c);font-size:1.5rem}.thumb-name{font-size:.5625rem;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ion-text-color, #000)}.thumb-remove{position:absolute;top:2px;right:2px;width:20px;height:20px;border:none;border-radius:50%;background:#0000008c;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.875rem}.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{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: () => [] });
 
 /**
@@ -73450,7 +73648,7 @@ class ChatWindowComponent {
         <div class="closed-banner">{{ t('conversationClosed') }}</div>
       }
     </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: [":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", "showMic"], outputs: ["send", "typing", "attach", "voice", "cancelReply"] }, { 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,