@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-chat.mjs

@@ -0,0 +1,1303 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, model, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, DestroyRef, viewChild, signal, afterNextRender, effect, untracked, Injector } from '@angular/core';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { CbCodeBlock } from '@caribeng/ui/code-block';
+import { CbCopyButton } from '@caribeng/ui/copy-button';
+import { CbIcon } from '@caribeng/ui/icon';
+import { DOCUMENT } from '@angular/common';
+
+/*
+ * Markdown ligero y seguro de CaribeNG para mensajes de chat.
+ *
+ * Todo el texto de entrada se escapa: el HTML que llega se muestra como texto,
+ * nunca se interpreta. Solo se generan etiquetas conocidas y enlaces a
+ * http(s), mailto, rutas relativas o anclas. Tolera markdown incompleto (lo
+ * habitual mientras llega una respuesta en streaming): un bloque de código sin
+ * cerrar se pinta igualmente como código.
+ *
+ * Soporta: párrafos (un salto de línea = <br>), encabezados, negrita, cursiva,
+ * tachado, código en línea y en bloque (con lenguaje), enlaces, URLs sueltas,
+ * listas con viñetas, numeradas y de tareas, citas, separadores y tablas.
+ *
+ * Solo emite etiquetas y atributos que conserva el sanitizador de Angular
+ * (`[innerHTML]`): nada de `style` ni `<input>`.
+ */
+function escapeHtml(text) {
+    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+/** URL permitida en un enlace, o `null`. */
+function cbSafeUrl(url) {
+    const trimmed = url.trim();
+    if (/^(https?:|mailto:)/i.test(trimmed))
+        return trimmed;
+    if (/^[a-z][a-z\d+.-]*:/i.test(trimmed))
+        return null;
+    // Relativas, anclas y consultas; nunca "//dominio" (abriría otro origen sin esquema explícito).
+    if (/^(\/(?!\/)|#|\?|\.{1,2}\/)/.test(trimmed) || /^[\w-][\w./-]*$/.test(trimmed))
+        return trimmed;
+    return null;
+}
+function link(href, label) {
+    const external = /^(https?:)?\/\//i.test(href);
+    const attrs = external ? ' target="_blank" rel="noopener noreferrer"' : '';
+    return `<a href="${escapeHtml(href)}"${attrs}>${label}</a>`;
+}
+/** Formato en línea sobre texto aún sin escapar. */
+function inline(text) {
+    const tokens = [];
+    const stash = (html) => `\u0000${tokens.push(html) - 1}\u0000`;
+    // 1) Código en línea: su contenido no se formatea.
+    let out = text.replace(/(`+)([\s\S]*?[^`])\1(?!`)/g, (_m, _ticks, code) => stash(`<code>${escapeHtml(code.trim() === '' ? code : code.replace(/^ (.*) $/, '$1'))}</code>`));
+    // 2) Enlaces [texto](url).
+    out = out.replace(/\[([^\]\n]+)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/g, (m, label, url) => {
+        const safe = cbSafeUrl(url);
+        return safe ? stash(link(safe, formatEmphasis(escapeHtml(label)))) : m;
+    });
+    // 3) URLs sueltas.
+    out = out.replace(/\bhttps?:\/\/[^\s<>()]+[^\s<>().,;:!?'"\]]/g, (url) => stash(link(url, escapeHtml(url))));
+    // 4) Resto: escapar y aplicar énfasis.
+    out = formatEmphasis(escapeHtml(out));
+    // Los tokens pueden contener otros (código dentro del texto de un enlace).
+    for (let depth = 0; depth < 4 && out.includes('\u0000'); depth++) {
+        out = out.replace(/\u0000(\d+)\u0000/g, (_m, i) => tokens[Number(i)]);
+    }
+    return out;
+}
+/** Negrita, cursiva y tachado sobre texto ya escapado. */
+function formatEmphasis(html) {
+    return html
+        .replace(/\*\*\*(?=\S)([\s\S]*?\S)\*\*\*/g, '<strong><em>$1</em></strong>')
+        .replace(/\*\*(?=\S)([\s\S]*?\S)\*\*/g, '<strong>$1</strong>')
+        .replace(/(^|[^\w])__(?=\S)([\s\S]*?\S)__(?!\w)/g, '$1<strong>$2</strong>')
+        .replace(/(^|[^*\w])\*([^\s*](?:[^*\n]*?[^\s*])?)\*(?!\*)/g, '$1<em>$2</em>')
+        .replace(/(^|[^\w])_([^\s_](?:[^_\n]*?[^\s_])?)_(?!\w)/g, '$1<em>$2</em>')
+        .replace(/~~(?=\S)([\s\S]*?\S)~~/g, '<del>$1</del>');
+}
+const FENCE = /^ {0,3}(`{3,}|~{3,})\s*([\w#+.-]*)\s*$/;
+const HEADING = /^ {0,3}(#{1,6})\s+(.*?)\s*#*\s*$/;
+const HR = /^ {0,3}([-*_])(\s*\1){2,}\s*$/;
+const QUOTE = /^ {0,3}>\s?/;
+const BULLET = /^(\s*)([-*+])\s+(.*)$/;
+const ORDERED = /^(\s*)(\d{1,9})[.)]\s+(.*)$/;
+const TABLE_SEP = /^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)*\|?\s*$/;
+function splitRow(line) {
+    let row = line.trim();
+    if (row.startsWith('|'))
+        row = row.slice(1);
+    if (row.endsWith('|') && !row.endsWith('\\|'))
+        row = row.slice(0, -1);
+    return row.split(/(?<!\\)\|/).map((cell) => cell.trim().replace(/\\\|/g, '|'));
+}
+function isBlockStart(line) {
+    return FENCE.test(line) || HEADING.test(line) || HR.test(line) || QUOTE.test(line) || BULLET.test(line) || ORDERED.test(line);
+}
+function renderList(lines, start) {
+    const ordered = ORDERED.test(lines[start]);
+    const pattern = ordered ? ORDERED : BULLET;
+    const first = lines[start].match(pattern);
+    const indent = first[1].length;
+    const items = [];
+    let i = start;
+    while (i < lines.length) {
+        const m = lines[i].match(pattern);
+        if (!m || m[1].length !== indent)
+            break;
+        let body = m[3];
+        i++;
+        // Líneas de continuación y sublistas más indentadas.
+        const nested = [];
+        while (i < lines.length && lines[i].trim() !== '' && !(lines[i].match(pattern)?.[1].length === indent) && (/^\s+/.test(lines[i]) || !isBlockStart(lines[i]))) {
+            nested.push(lines[i]);
+            i++;
+        }
+        let sub = '';
+        const subStart = nested.findIndex((l) => BULLET.test(l) || ORDERED.test(l));
+        if (subStart >= 0) {
+            body += nested.slice(0, subStart).map((l) => '\n' + l.trim()).join('');
+            sub = renderBlocks(nested.slice(subStart).map((l) => l.replace(new RegExp(`^\\s{0,${indent + 4}}`), '')));
+        }
+        else {
+            body += nested.map((l) => '\n' + l.trim()).join('');
+        }
+        const task = !ordered ? body.match(/^\[([ xX])\]\s+(.*)$/s) : null;
+        const content = task
+            ? `<span class="cb-md-check">${task[1].trim() ? '☑' : '☐'}</span> ${inline(task[2]).replace(/\n/g, '<br>')}`
+            : inline(body).replace(/\n/g, '<br>');
+        items.push(`<li${task ? ' class="cb-md-task"' : ''}>${content}${sub}</li>`);
+        if (i < lines.length && lines[i].trim() === '' && lines[i + 1]?.match(pattern)?.[1].length === indent)
+            i++;
+    }
+    const startAttr = ordered && first[2] !== '1' ? ` start="${Number(first[2])}"` : '';
+    return { html: ordered ? `<ol${startAttr}>${items.join('')}</ol>` : `<ul>${items.join('')}</ul>`, next: i };
+}
+/**
+ * Pinta los bloques. Con `sink`, los bloques de código del nivel superior no se
+ * pintan como HTML sino que se entregan aparte (para un componente de código).
+ */
+function renderBlocks(lines, sink) {
+    const out = [];
+    const flush = () => {
+        if (sink && out.length)
+            sink.push({ kind: 'html', html: out.join('') });
+        out.length = 0;
+    };
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        if (line.trim() === '') {
+            i++;
+            continue;
+        }
+        const fence = line.match(FENCE);
+        if (fence) {
+            const marker = fence[1];
+            const lang = fence[2];
+            const code = [];
+            i++;
+            while (i < lines.length && !new RegExp(`^ {0,3}${marker[0]}{${marker.length},}\\s*$`).test(lines[i]))
+                code.push(lines[i++]);
+            i++; // cierre (o fin del texto si llega incompleto)
+            if (sink) {
+                flush();
+                sink.push({ kind: 'code', code: code.join('\n'), language: lang });
+                continue;
+            }
+            const cls = lang ? ` class="language-${escapeHtml(lang)}"` : '';
+            const label = lang ? `<span class="cb-md-lang">${escapeHtml(lang)}</span>` : '';
+            out.push(`<pre>${label}<code${cls}>${escapeHtml(code.join('\n'))}</code></pre>`);
+            continue;
+        }
+        const heading = line.match(HEADING);
+        if (heading) {
+            const level = heading[1].length;
+            out.push(`<h${level}>${inline(heading[2])}</h${level}>`);
+            i++;
+            continue;
+        }
+        if (HR.test(line)) {
+            out.push('<hr />');
+            i++;
+            continue;
+        }
+        if (QUOTE.test(line)) {
+            const quoted = [];
+            while (i < lines.length && (QUOTE.test(lines[i]) || (lines[i].trim() !== '' && !isBlockStart(lines[i]) && quoted.length))) {
+                quoted.push(lines[i].replace(QUOTE, ''));
+                i++;
+            }
+            out.push(`<blockquote>${renderBlocks(quoted)}</blockquote>`);
+            continue;
+        }
+        if (BULLET.test(line) || ORDERED.test(line)) {
+            const list = renderList(lines, i);
+            out.push(list.html);
+            i = list.next;
+            continue;
+        }
+        if (line.includes('|') && i + 1 < lines.length && TABLE_SEP.test(lines[i + 1]) && lines[i + 1].includes('-')) {
+            const header = splitRow(line);
+            const aligns = splitRow(lines[i + 1]).map((c) => (c.startsWith(':') && c.endsWith(':') ? 'center' : c.endsWith(':') ? 'right' : c.startsWith(':') ? 'left' : ''));
+            // Alineación con clases: el sanitizador de Angular elimina los atributos style.
+            const cell = (tag, text, col) => `<${tag}${aligns[col] ? ` class="cb-md-${aligns[col]}"` : ''}>${inline(text)}</${tag}>`;
+            const rows = [];
+            i += 2;
+            while (i < lines.length && lines[i].includes('|') && lines[i].trim() !== '') {
+                const cells = splitRow(lines[i]);
+                rows.push(`<tr>${header.map((_h, c) => cell('td', cells[c] ?? '', c)).join('')}</tr>`);
+                i++;
+            }
+            out.push(`<div class="cb-md-table"><table><thead><tr>${header.map((h, c) => cell('th', h, c)).join('')}</tr></thead>` +
+                `<tbody>${rows.join('')}</tbody></table></div>`);
+            continue;
+        }
+        // Párrafo: hasta una línea vacía o el inicio de otro bloque.
+        const para = [];
+        while (i < lines.length && lines[i].trim() !== '' && (para.length === 0 || !isBlockStart(lines[i])))
+            para.push(lines[i++].trim());
+        out.push(`<p>${inline(para.join('\n')).replace(/\n/g, '<br>')}</p>`);
+    }
+    const html = out.join('');
+    flush();
+    return html;
+}
+function toLines(markdown) {
+    return (markdown ?? '').replace(/\r\n?/g, '\n').split('\n');
+}
+/** Convierte markdown en HTML seguro (todo el HTML de entrada se escapa). */
+function cbMarkdownToHtml(markdown) {
+    return renderBlocks(toLines(markdown));
+}
+/**
+ * Como `cbMarkdownToHtml`, pero separa los bloques de código del nivel
+ * superior para pintarlos con un componente (resaltado, copiar).
+ */
+function cbMarkdownToBlocks(markdown) {
+    const blocks = [];
+    renderBlocks(toLines(markdown), blocks);
+    return blocks;
+}
+
+function formatSize$1(bytes) {
+    if (bytes === undefined)
+        return '';
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(0)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+/**
+ * Mensaje de chat de CaribeNG: burbuja con autor, hora, avatar y estado de
+ * envío. `text` se pinta como markdown seguro y sus bloques de código con
+ * `cb-code-block` (resaltado y copiar). Admite adjuntos, valoración 👍/👎 y
+ * "Regenerar"; con `streaming` muestra un cursor mientras llega la respuesta.
+ * El contenido proyectado (p. ej. `cb-chat-reasoning`, `cb-chat-tool`) va
+ * antes del texto.
+ *
+ * @example
+ * ```html
+ * <cb-chat-message role="user" text="¿Cuál es mi saldo?" time="10:30" />
+ * <cb-chat-message role="assistant" [text]="respuesta" [streaming]="generando" copyable showFeedback [(feedback)]="voto" />
+ * ```
+ */
+class CbChatMessage {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.role = input('assistant', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+        /** Contenido del mensaje (markdown por defecto). */
+        this.text = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /** Interpreta `text` como markdown seguro. Con `false` se muestra tal cual. */
+        this.markdown = input(true, { ...(ngDevMode ? { debugName: "markdown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Nombre del autor. Por defecto, "Tú" o "Asistente". */
+        this.author = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "author" }] : /* istanbul ignore next */ []));
+        /** Hora o fecha ya formateada ("10:30"). */
+        this.time = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []));
+        /** Imagen del avatar. Sin ella, iniciales (usuario) o un icono (asistente). */
+        this.avatar = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "avatar" }] : /* istanbul ignore next */ []));
+        this.showAvatar = input(true, { ...(ngDevMode ? { debugName: "showAvatar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.showAuthor = input(false, { ...(ngDevMode ? { debugName: "showAuthor" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Estado de envío (mensajes propios). `error` muestra "Reintentar". */
+        this.status = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        /** La respuesta sigue llegando: muestra un cursor y marca el mensaje como ocupado. */
+        this.streaming = input(false, { ...(ngDevMode ? { debugName: "streaming" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Botón para copiar el texto (cuando termina de llegar). */
+        this.copyable = input(false, { ...(ngDevMode ? { debugName: "copyable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Archivos adjuntos (las imágenes con URL, en miniatura). */
+        this.attachments = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
+        /** Muestra los botones 👍 / 👎. */
+        this.showFeedback = input(false, { ...(ngDevMode ? { debugName: "showFeedback" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Valoración elegida (bidireccional). Pulsar la misma la quita. */
+        this.feedback = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "feedback" }] : /* istanbul ignore next */ []));
+        /** Muestra el botón "Regenerar respuesta". */
+        this.regenerable = input(false, { ...(ngDevMode ? { debugName: "regenerable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Se pulsó "Reintentar" en un mensaje con error. */
+        this.retry = output();
+        /** Se pulsó "Regenerar respuesta". */
+        this.regenerate = output();
+        this.blocks = computed(() => cbMarkdownToBlocks(this.text()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []));
+        this.authorName = computed(() => this.author() ?? (this.role() === 'user' ? this.t().chatYou : this.t().chatAssistant), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "authorName" }] : /* istanbul ignore next */ []));
+        this.initials = computed(() => this.authorName()
+            .split(/\s+/)
+            .filter(Boolean)
+            .slice(0, 2)
+            .map((w) => w.charAt(0).toUpperCase())
+            .join(''), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+        this.label = computed(() => {
+            if (this.role() === 'system')
+                return null;
+            return this.time() ? `${this.authorName()}, ${this.time()}` : this.authorName();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    }
+    isImage(a) {
+        return !!a.type?.startsWith('image/');
+    }
+    size(a) {
+        return formatSize$1(a.size);
+    }
+    vote(value) {
+        this.feedback.set(this.feedback() === value ? null : value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChatMessage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbChatMessage, isStandalone: true, selector: "cb-chat-message", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, markdown: { classPropertyName: "markdown", publicName: "markdown", isSignal: true, isRequired: false, transformFunction: null }, author: { classPropertyName: "author", publicName: "author", isSignal: true, isRequired: false, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, showAvatar: { classPropertyName: "showAvatar", publicName: "showAvatar", isSignal: true, isRequired: false, transformFunction: null }, showAuthor: { classPropertyName: "showAuthor", publicName: "showAuthor", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: false, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, showFeedback: { classPropertyName: "showFeedback", publicName: "showFeedback", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null }, regenerable: { classPropertyName: "regenerable", publicName: "regenerable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { feedback: "feedbackChange", retry: "retry", regenerate: "regenerate" }, host: { attributes: { "role": "article" }, properties: { "class.cb-chat-message--user": "role() === 'user'", "class.cb-chat-message--assistant": "role() === 'assistant'", "class.cb-chat-message--system": "role() === 'system'", "class.cb-chat-message--error": "status() === 'error'", "attr.aria-label": "label()", "attr.aria-busy": "streaming() ? \"true\" : null" }, classAttribute: "cb-chat-message" }, ngImport: i0, template: `
+    @if (role() !== 'system' && showAvatar()) {
+      <span class="cb-chat-message__avatar" aria-hidden="true">
+        @if (avatar()) {
+          <img [src]="avatar()" alt="" />
+        } @else if (role() === 'assistant') {
+          <cb-icon name="sparkles" [size]="16" />
+        } @else {
+          {{ initials() }}
+        }
+      </span>
+    }
+    <div class="cb-chat-message__body">
+      @if (role() !== 'system' && (showAuthor() || time())) {
+        <div class="cb-chat-message__meta" aria-hidden="true">
+          @if (showAuthor()) {
+            <span class="cb-chat-message__author">{{ authorName() }}</span>
+          }
+          @if (time()) {
+            <span class="cb-chat-message__time">{{ time() }}</span>
+          }
+        </div>
+      }
+      <ng-content select="cb-chat-reasoning, cb-chat-tool, [cb-chat-message-before]" />
+      @if (attachments().length) {
+        <ul class="cb-chat-message__attachments" role="list" [attr.aria-label]="t().chatAttachments">
+          @for (a of attachments(); track $index) {
+            <li class="cb-chat-message__attachment">
+              @if (isImage(a) && a.url) {
+                <a class="cb-chat-message__thumb" [href]="a.url" target="_blank" rel="noopener noreferrer">
+                  <img [src]="a.url" [alt]="a.name" loading="lazy" />
+                </a>
+              } @else {
+                <a class="cb-chat-message__file" [attr.href]="a.url || null" [attr.target]="a.url ? '_blank' : null" [attr.rel]="a.url ? 'noopener noreferrer' : null">
+                  <cb-icon [name]="isImage(a) ? 'image' : 'file'" [size]="18" aria-hidden="true" />
+                  <span class="cb-chat-message__file-text">
+                    <span class="cb-chat-message__file-name">{{ a.name }}</span>
+                    @if (a.size !== undefined) {
+                      <span class="cb-chat-message__file-size">{{ size(a) }}</span>
+                    }
+                  </span>
+                </a>
+              }
+            </li>
+          }
+        </ul>
+      }
+      <!-- Sin texto ni contenido proyectado queda vacía y el CSS la oculta (:empty). -->
+      <div class="cb-chat-message__bubble">
+          @if (text()) {
+            @if (markdown()) {
+              @for (block of blocks(); track $index) {
+                @if (block.kind === 'html') {
+                  <div class="cb-chat-message__markdown" [innerHTML]="block.html"></div>
+                } @else {
+                  <cb-code-block class="cb-chat-message__code" [code]="block.code" [language]="block.language" />
+                }
+              }
+            } @else {
+              <p class="cb-chat-message__plain">{{ text() }}</p>
+            }
+          }
+          <ng-content />
+          @if (streaming()) {
+            <span class="cb-chat-message__caret" aria-hidden="true"></span>
+          }
+      </div>
+      <div class="cb-chat-message__footer">
+        @switch (status()) {
+          @case ('sending') {
+            <span class="cb-chat-message__status">{{ t().chatSending }}</span>
+          }
+          @case ('error') {
+            <span class="cb-chat-message__status cb-chat-message__status--error">
+              <cb-icon name="circle-alert" [size]="14" aria-hidden="true" /> {{ t().chatError }}
+            </span>
+            <button type="button" class="cb-chat-message__action" (click)="retry.emit()">
+              <cb-icon name="rotate-ccw" [size]="14" aria-hidden="true" /> {{ t().chatRetry }}
+            </button>
+          }
+        }
+        <ng-content select="[cb-chat-message-actions]" />
+        @if (!streaming()) {
+          @if (copyable() && text()) {
+            <cb-copy-button [value]="text()" size="sm" />
+          }
+          @if (showFeedback()) {
+            <button type="button" class="cb-chat-message__icon-btn" [attr.aria-pressed]="feedback() === 'up'" [attr.aria-label]="t().chatHelpful" (click)="vote('up')">
+              <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10v11" /><path d="M15 5.9 14 10h5.8a2 2 0 0 1 1.9 2.6l-2.3 7A2 2 0 0 1 17.5 21H7V10l4.6-7.5a1.9 1.9 0 0 1 3.4 1.5z" /></svg>
+            </button>
+            <button type="button" class="cb-chat-message__icon-btn" [attr.aria-pressed]="feedback() === 'down'" [attr.aria-label]="t().chatNotHelpful" (click)="vote('down')">
+              <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 14V3" /><path d="M9 18.1 10 14H4.2a2 2 0 0 1-1.9-2.6l2.3-7A2 2 0 0 1 6.5 3H17v11l-4.6 7.5a1.9 1.9 0 0 1-3.4-1.5z" /></svg>
+            </button>
+          }
+          @if (regenerable()) {
+            <button type="button" class="cb-chat-message__icon-btn" [attr.aria-label]="t().chatRegenerate" (click)="regenerate.emit()">
+              <cb-icon name="refresh-cw" [size]="15" aria-hidden="true" />
+            </button>
+          }
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:flex;align-items:flex-start;gap:.625rem;max-width:100%;color:var(--cb-color-text);font-family:var(--cb-font-sans)}:host(.cb-chat-message--user){flex-direction:row-reverse}:host(.cb-chat-message--system){justify-content:center}.cb-chat-message__avatar{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2rem;height:2rem;overflow:hidden;border-radius:50%;background:var(--cb-color-surface-hover);color:var(--cb-color-text);font-size:.75rem;font-weight:var(--cb-font-weight-semibold, 600)}:host(.cb-chat-message--assistant) .cb-chat-message__avatar{background:color-mix(in srgb,var(--cb-color-primary) 14%,transparent);color:var(--cb-color-primary-text)}.cb-chat-message__avatar img{width:100%;height:100%;object-fit:cover}.cb-chat-message__body{display:flex;flex-direction:column;gap:.25rem;min-width:0;max-width:min(46rem,85%)}:host(.cb-chat-message--user) .cb-chat-message__body{align-items:flex-end}.cb-chat-message__meta{display:flex;gap:.5rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-chat-message__author{font-weight:var(--cb-font-weight-semibold, 600)}.cb-chat-message__bubble{max-width:100%;padding:.625rem .875rem;border-radius:var(--cb-radius-lg, 12px);border-top-left-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-surface-subtle);font-size:var(--cb-text-sm, .875rem);line-height:1.55;overflow-wrap:anywhere}:host(.cb-chat-message--user) .cb-chat-message__bubble{border-top-left-radius:var(--cb-radius-lg, 12px);border-top-right-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast)}:host(.cb-chat-message--system) .cb-chat-message__bubble{padding:.25rem .75rem;border-radius:var(--cb-radius-full, 999px);background:transparent;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);text-align:center}.cb-chat-message__bubble:empty{display:none}.cb-chat-message__bubble>.cb-chat-message__code{margin:.5rem 0}.cb-chat-message__bubble>.cb-chat-message__code:first-child{margin-top:0}.cb-chat-message__bubble>.cb-chat-message__code:last-child{margin-bottom:0}.cb-chat-message__attachments{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}:host(.cb-chat-message--user) .cb-chat-message__attachments{justify-content:flex-end}.cb-chat-message__thumb{display:block;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, 8px)}.cb-chat-message__thumb img{display:block;width:7.5rem;height:7.5rem;object-fit:cover}.cb-chat-message__file{display:inline-flex;align-items:center;gap:.5rem;max-width:16rem;padding:.5rem .75rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, 8px);background:var(--cb-color-surface-raised);color:inherit;text-decoration:none}a.cb-chat-message__file[href]:hover{background:var(--cb-color-surface-hover)}.cb-chat-message__thumb:focus-visible,.cb-chat-message__file:focus-visible,.cb-chat-message__icon-btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-chat-message__file-text{display:flex;flex-direction:column;min-width:0}.cb-chat-message__file-name{overflow:hidden;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap}.cb-chat-message__file-size{color:var(--cb-color-text-muted);font-size:.6875rem}.cb-chat-message__icon-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-chat-message__icon-btn:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-chat-message__icon-btn[aria-pressed=true]{color:var(--cb-color-primary-text)}.cb-chat-message__icon-btn[aria-pressed=true] svg{fill:color-mix(in srgb,currentColor 22%,transparent)}:host(.cb-chat-message--error) .cb-chat-message__bubble{opacity:.75}.cb-chat-message__plain{margin:0;white-space:pre-wrap}.cb-chat-message__caret{display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:text-bottom;background:currentColor;animation:cb-chat-caret 1s steps(1) infinite}@keyframes cb-chat-caret{50%{opacity:0}}.cb-chat-message__footer{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-height:0;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-chat-message__footer:empty{display:none}.cb-chat-message__status{display:inline-flex;align-items:center;gap:.25rem}.cb-chat-message__status--error{color:var(--cb-color-danger-700)}:host-context([data-theme=\"dark\"]) .cb-chat-message__status--error{color:var(--cb-color-danger-400)}.cb-chat-message__action{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .375rem;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text);font:inherit;text-decoration:underline;cursor:pointer}.cb-chat-message__action:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-chat-message__markdown>:first-child{margin-top:0}.cb-chat-message__markdown>:last-child{margin-bottom:0}.cb-chat-message__markdown ::ng-deep p,.cb-chat-message__markdown ::ng-deep ul,.cb-chat-message__markdown ::ng-deep ol,.cb-chat-message__markdown ::ng-deep blockquote,.cb-chat-message__markdown ::ng-deep pre,.cb-chat-message__markdown ::ng-deep .cb-md-table{margin:0 0 .625rem}.cb-chat-message__markdown ::ng-deep :is(p,ul,ol,pre,blockquote,.cb-md-table):last-child{margin-bottom:0}.cb-chat-message__markdown ::ng-deep :is(h1,h2,h3,h4,h5,h6){margin:.75rem 0 .375rem;font-size:1em;font-weight:var(--cb-font-weight-bold, 700)}.cb-chat-message__markdown ::ng-deep h1{font-size:1.2em}.cb-chat-message__markdown ::ng-deep h2{font-size:1.1em}.cb-chat-message__markdown ::ng-deep :is(ul,ol){padding-left:1.25rem}.cb-chat-message__markdown ::ng-deep li+li{margin-top:.125rem}.cb-chat-message__markdown ::ng-deep .cb-md-task{list-style:none;margin-left:-1.25rem}.cb-chat-message__markdown ::ng-deep a{color:inherit;text-decoration:underline}.cb-chat-message__markdown ::ng-deep code{padding:.0625rem .3125rem;border-radius:var(--cb-radius-sm, 4px);background:color-mix(in srgb,currentColor 10%,transparent);font-family:var(--cb-font-mono);font-size:.9em}.cb-chat-message__markdown ::ng-deep pre{position:relative;overflow-x:auto;padding:.75rem;border-radius:var(--cb-radius-md, 8px);background:var(--cb-color-surface-950, #0b1220);color:#e5e7eb}.cb-chat-message__markdown ::ng-deep pre code{padding:0;background:transparent;font-size:.85em;white-space:pre}.cb-chat-message__markdown ::ng-deep .cb-md-lang{display:block;margin-bottom:.375rem;color:#9ca3af;font-family:var(--cb-font-sans);font-size:.7rem;text-transform:uppercase}.cb-chat-message__markdown ::ng-deep blockquote{padding-left:.75rem;border-left:3px solid color-mix(in srgb,currentColor 30%,transparent);opacity:.9}.cb-chat-message__markdown ::ng-deep hr{border:0;border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)}.cb-chat-message__markdown ::ng-deep .cb-md-table{overflow-x:auto}.cb-chat-message__markdown ::ng-deep table{border-collapse:collapse;font-size:.95em}.cb-chat-message__markdown ::ng-deep .cb-md-left{text-align:left}.cb-chat-message__markdown ::ng-deep .cb-md-center{text-align:center}.cb-chat-message__markdown ::ng-deep .cb-md-right{text-align:right}.cb-chat-message__markdown ::ng-deep .cb-md-check{margin-right:.125rem}.cb-chat-message__markdown ::ng-deep :is(th,td){padding:.25rem .625rem;border:1px solid color-mix(in srgb,currentColor 18%,transparent)}@media(prefers-reduced-motion:reduce){.cb-chat-message__caret{animation:none}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbCopyButton, selector: "cb-copy-button", inputs: ["value", "showLabel", "label", "copiedLabel", "timeout", "variant", "severity", "size", "disabled"], outputs: ["copied", "copyError"] }, { kind: "component", type: CbCodeBlock, selector: "cb-code-block", inputs: ["code", "language", "filename", "lineNumbers", "startLine", "highlightLines", "wrap", "copyable", "header", "maxHeight", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChatMessage, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-chat-message', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon, CbCopyButton, CbCodeBlock], host: {
+                        class: 'cb-chat-message',
+                        role: 'article',
+                        '[class.cb-chat-message--user]': "role() === 'user'",
+                        '[class.cb-chat-message--assistant]': "role() === 'assistant'",
+                        '[class.cb-chat-message--system]': "role() === 'system'",
+                        '[class.cb-chat-message--error]': "status() === 'error'",
+                        '[attr.aria-label]': 'label()',
+                        '[attr.aria-busy]': 'streaming() ? "true" : null',
+                    }, template: `
+    @if (role() !== 'system' && showAvatar()) {
+      <span class="cb-chat-message__avatar" aria-hidden="true">
+        @if (avatar()) {
+          <img [src]="avatar()" alt="" />
+        } @else if (role() === 'assistant') {
+          <cb-icon name="sparkles" [size]="16" />
+        } @else {
+          {{ initials() }}
+        }
+      </span>
+    }
+    <div class="cb-chat-message__body">
+      @if (role() !== 'system' && (showAuthor() || time())) {
+        <div class="cb-chat-message__meta" aria-hidden="true">
+          @if (showAuthor()) {
+            <span class="cb-chat-message__author">{{ authorName() }}</span>
+          }
+          @if (time()) {
+            <span class="cb-chat-message__time">{{ time() }}</span>
+          }
+        </div>
+      }
+      <ng-content select="cb-chat-reasoning, cb-chat-tool, [cb-chat-message-before]" />
+      @if (attachments().length) {
+        <ul class="cb-chat-message__attachments" role="list" [attr.aria-label]="t().chatAttachments">
+          @for (a of attachments(); track $index) {
+            <li class="cb-chat-message__attachment">
+              @if (isImage(a) && a.url) {
+                <a class="cb-chat-message__thumb" [href]="a.url" target="_blank" rel="noopener noreferrer">
+                  <img [src]="a.url" [alt]="a.name" loading="lazy" />
+                </a>
+              } @else {
+                <a class="cb-chat-message__file" [attr.href]="a.url || null" [attr.target]="a.url ? '_blank' : null" [attr.rel]="a.url ? 'noopener noreferrer' : null">
+                  <cb-icon [name]="isImage(a) ? 'image' : 'file'" [size]="18" aria-hidden="true" />
+                  <span class="cb-chat-message__file-text">
+                    <span class="cb-chat-message__file-name">{{ a.name }}</span>
+                    @if (a.size !== undefined) {
+                      <span class="cb-chat-message__file-size">{{ size(a) }}</span>
+                    }
+                  </span>
+                </a>
+              }
+            </li>
+          }
+        </ul>
+      }
+      <!-- Sin texto ni contenido proyectado queda vacía y el CSS la oculta (:empty). -->
+      <div class="cb-chat-message__bubble">
+          @if (text()) {
+            @if (markdown()) {
+              @for (block of blocks(); track $index) {
+                @if (block.kind === 'html') {
+                  <div class="cb-chat-message__markdown" [innerHTML]="block.html"></div>
+                } @else {
+                  <cb-code-block class="cb-chat-message__code" [code]="block.code" [language]="block.language" />
+                }
+              }
+            } @else {
+              <p class="cb-chat-message__plain">{{ text() }}</p>
+            }
+          }
+          <ng-content />
+          @if (streaming()) {
+            <span class="cb-chat-message__caret" aria-hidden="true"></span>
+          }
+      </div>
+      <div class="cb-chat-message__footer">
+        @switch (status()) {
+          @case ('sending') {
+            <span class="cb-chat-message__status">{{ t().chatSending }}</span>
+          }
+          @case ('error') {
+            <span class="cb-chat-message__status cb-chat-message__status--error">
+              <cb-icon name="circle-alert" [size]="14" aria-hidden="true" /> {{ t().chatError }}
+            </span>
+            <button type="button" class="cb-chat-message__action" (click)="retry.emit()">
+              <cb-icon name="rotate-ccw" [size]="14" aria-hidden="true" /> {{ t().chatRetry }}
+            </button>
+          }
+        }
+        <ng-content select="[cb-chat-message-actions]" />
+        @if (!streaming()) {
+          @if (copyable() && text()) {
+            <cb-copy-button [value]="text()" size="sm" />
+          }
+          @if (showFeedback()) {
+            <button type="button" class="cb-chat-message__icon-btn" [attr.aria-pressed]="feedback() === 'up'" [attr.aria-label]="t().chatHelpful" (click)="vote('up')">
+              <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10v11" /><path d="M15 5.9 14 10h5.8a2 2 0 0 1 1.9 2.6l-2.3 7A2 2 0 0 1 17.5 21H7V10l4.6-7.5a1.9 1.9 0 0 1 3.4 1.5z" /></svg>
+            </button>
+            <button type="button" class="cb-chat-message__icon-btn" [attr.aria-pressed]="feedback() === 'down'" [attr.aria-label]="t().chatNotHelpful" (click)="vote('down')">
+              <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 14V3" /><path d="M9 18.1 10 14H4.2a2 2 0 0 1-1.9-2.6l2.3-7A2 2 0 0 1 6.5 3H17v11l-4.6 7.5a1.9 1.9 0 0 1-3.4-1.5z" /></svg>
+            </button>
+          }
+          @if (regenerable()) {
+            <button type="button" class="cb-chat-message__icon-btn" [attr.aria-label]="t().chatRegenerate" (click)="regenerate.emit()">
+              <cb-icon name="refresh-cw" [size]="15" aria-hidden="true" />
+            </button>
+          }
+        }
+      </div>
+    </div>
+  `, styles: [":host{display:flex;align-items:flex-start;gap:.625rem;max-width:100%;color:var(--cb-color-text);font-family:var(--cb-font-sans)}:host(.cb-chat-message--user){flex-direction:row-reverse}:host(.cb-chat-message--system){justify-content:center}.cb-chat-message__avatar{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2rem;height:2rem;overflow:hidden;border-radius:50%;background:var(--cb-color-surface-hover);color:var(--cb-color-text);font-size:.75rem;font-weight:var(--cb-font-weight-semibold, 600)}:host(.cb-chat-message--assistant) .cb-chat-message__avatar{background:color-mix(in srgb,var(--cb-color-primary) 14%,transparent);color:var(--cb-color-primary-text)}.cb-chat-message__avatar img{width:100%;height:100%;object-fit:cover}.cb-chat-message__body{display:flex;flex-direction:column;gap:.25rem;min-width:0;max-width:min(46rem,85%)}:host(.cb-chat-message--user) .cb-chat-message__body{align-items:flex-end}.cb-chat-message__meta{display:flex;gap:.5rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-chat-message__author{font-weight:var(--cb-font-weight-semibold, 600)}.cb-chat-message__bubble{max-width:100%;padding:.625rem .875rem;border-radius:var(--cb-radius-lg, 12px);border-top-left-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-surface-subtle);font-size:var(--cb-text-sm, .875rem);line-height:1.55;overflow-wrap:anywhere}:host(.cb-chat-message--user) .cb-chat-message__bubble{border-top-left-radius:var(--cb-radius-lg, 12px);border-top-right-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast)}:host(.cb-chat-message--system) .cb-chat-message__bubble{padding:.25rem .75rem;border-radius:var(--cb-radius-full, 999px);background:transparent;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);text-align:center}.cb-chat-message__bubble:empty{display:none}.cb-chat-message__bubble>.cb-chat-message__code{margin:.5rem 0}.cb-chat-message__bubble>.cb-chat-message__code:first-child{margin-top:0}.cb-chat-message__bubble>.cb-chat-message__code:last-child{margin-bottom:0}.cb-chat-message__attachments{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}:host(.cb-chat-message--user) .cb-chat-message__attachments{justify-content:flex-end}.cb-chat-message__thumb{display:block;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, 8px)}.cb-chat-message__thumb img{display:block;width:7.5rem;height:7.5rem;object-fit:cover}.cb-chat-message__file{display:inline-flex;align-items:center;gap:.5rem;max-width:16rem;padding:.5rem .75rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, 8px);background:var(--cb-color-surface-raised);color:inherit;text-decoration:none}a.cb-chat-message__file[href]:hover{background:var(--cb-color-surface-hover)}.cb-chat-message__thumb:focus-visible,.cb-chat-message__file:focus-visible,.cb-chat-message__icon-btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-chat-message__file-text{display:flex;flex-direction:column;min-width:0}.cb-chat-message__file-name{overflow:hidden;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap}.cb-chat-message__file-size{color:var(--cb-color-text-muted);font-size:.6875rem}.cb-chat-message__icon-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-chat-message__icon-btn:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-chat-message__icon-btn[aria-pressed=true]{color:var(--cb-color-primary-text)}.cb-chat-message__icon-btn[aria-pressed=true] svg{fill:color-mix(in srgb,currentColor 22%,transparent)}:host(.cb-chat-message--error) .cb-chat-message__bubble{opacity:.75}.cb-chat-message__plain{margin:0;white-space:pre-wrap}.cb-chat-message__caret{display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:text-bottom;background:currentColor;animation:cb-chat-caret 1s steps(1) infinite}@keyframes cb-chat-caret{50%{opacity:0}}.cb-chat-message__footer{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-height:0;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-chat-message__footer:empty{display:none}.cb-chat-message__status{display:inline-flex;align-items:center;gap:.25rem}.cb-chat-message__status--error{color:var(--cb-color-danger-700)}:host-context([data-theme=\"dark\"]) .cb-chat-message__status--error{color:var(--cb-color-danger-400)}.cb-chat-message__action{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .375rem;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text);font:inherit;text-decoration:underline;cursor:pointer}.cb-chat-message__action:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-chat-message__markdown>:first-child{margin-top:0}.cb-chat-message__markdown>:last-child{margin-bottom:0}.cb-chat-message__markdown ::ng-deep p,.cb-chat-message__markdown ::ng-deep ul,.cb-chat-message__markdown ::ng-deep ol,.cb-chat-message__markdown ::ng-deep blockquote,.cb-chat-message__markdown ::ng-deep pre,.cb-chat-message__markdown ::ng-deep .cb-md-table{margin:0 0 .625rem}.cb-chat-message__markdown ::ng-deep :is(p,ul,ol,pre,blockquote,.cb-md-table):last-child{margin-bottom:0}.cb-chat-message__markdown ::ng-deep :is(h1,h2,h3,h4,h5,h6){margin:.75rem 0 .375rem;font-size:1em;font-weight:var(--cb-font-weight-bold, 700)}.cb-chat-message__markdown ::ng-deep h1{font-size:1.2em}.cb-chat-message__markdown ::ng-deep h2{font-size:1.1em}.cb-chat-message__markdown ::ng-deep :is(ul,ol){padding-left:1.25rem}.cb-chat-message__markdown ::ng-deep li+li{margin-top:.125rem}.cb-chat-message__markdown ::ng-deep .cb-md-task{list-style:none;margin-left:-1.25rem}.cb-chat-message__markdown ::ng-deep a{color:inherit;text-decoration:underline}.cb-chat-message__markdown ::ng-deep code{padding:.0625rem .3125rem;border-radius:var(--cb-radius-sm, 4px);background:color-mix(in srgb,currentColor 10%,transparent);font-family:var(--cb-font-mono);font-size:.9em}.cb-chat-message__markdown ::ng-deep pre{position:relative;overflow-x:auto;padding:.75rem;border-radius:var(--cb-radius-md, 8px);background:var(--cb-color-surface-950, #0b1220);color:#e5e7eb}.cb-chat-message__markdown ::ng-deep pre code{padding:0;background:transparent;font-size:.85em;white-space:pre}.cb-chat-message__markdown ::ng-deep .cb-md-lang{display:block;margin-bottom:.375rem;color:#9ca3af;font-family:var(--cb-font-sans);font-size:.7rem;text-transform:uppercase}.cb-chat-message__markdown ::ng-deep blockquote{padding-left:.75rem;border-left:3px solid color-mix(in srgb,currentColor 30%,transparent);opacity:.9}.cb-chat-message__markdown ::ng-deep hr{border:0;border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)}.cb-chat-message__markdown ::ng-deep .cb-md-table{overflow-x:auto}.cb-chat-message__markdown ::ng-deep table{border-collapse:collapse;font-size:.95em}.cb-chat-message__markdown ::ng-deep .cb-md-left{text-align:left}.cb-chat-message__markdown ::ng-deep .cb-md-center{text-align:center}.cb-chat-message__markdown ::ng-deep .cb-md-right{text-align:right}.cb-chat-message__markdown ::ng-deep .cb-md-check{margin-right:.125rem}.cb-chat-message__markdown ::ng-deep :is(th,td){padding:.25rem .625rem;border:1px solid color-mix(in srgb,currentColor 18%,transparent)}@media(prefers-reduced-motion:reduce){.cb-chat-message__caret{animation:none}}\n"] }]
+        }], propDecorators: { role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], markdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "markdown", required: false }] }], author: [{ type: i0.Input, args: [{ isSignal: true, alias: "author", required: false }] }], time: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], showAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatar", required: false }] }], showAuthor: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAuthor", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], streaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "streaming", required: false }] }], copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }], showFeedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFeedback", required: false }] }], feedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedback", required: false }] }, { type: i0.Output, args: ["feedbackChange"] }], regenerable: [{ type: i0.Input, args: [{ isSignal: true, alias: "regenerable", required: false }] }], retry: [{ type: i0.Output, args: ["retry"] }], regenerate: [{ type: i0.Output, args: ["regenerate"] }] } });
+
+/** Distancia (px) al final por debajo de la cual la lista sigue los mensajes nuevos. */
+const PIN_THRESHOLD = 48;
+/**
+ * Lista de mensajes de chat de CaribeNG (`role="log"`). Se mantiene pegada al
+ * final mientras llegan mensajes o se alarga una respuesta en streaming, pero
+ * no mueve el scroll si el usuario subió a leer: entonces ofrece "Ir al último
+ * mensaje". Con `typing` muestra el indicador de escritura.
+ *
+ * Accesibilidad: con `busy` (respuesta generándose) el log se marca
+ * `aria-busy` para que el lector no lea cada fragmento, y al terminar se
+ * anuncia "Respuesta lista".
+ *
+ * @example
+ * ```html
+ * <cb-chat-messages [busy]="generando()" [typing]="pensando()" style="height: 30rem">
+ *   @for (m of mensajes(); track m.id) {
+ *     <cb-chat-message [role]="m.role" [text]="m.text" />
+ *   }
+ * </cb-chat-messages>
+ * ```
+ */
+class CbChatMessages {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.document = inject(DOCUMENT);
+        this.destroyRef = inject(DestroyRef);
+        this.scroller = viewChild.required('scroller');
+        this.content = viewChild.required('content');
+        /** Una respuesta se está generando (marca el log como ocupado). */
+        this.busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Muestra el indicador "Escribiendo…". */
+        this.typing = input(false, { ...(ngDevMode ? { debugName: "typing" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Texto del indicador (p. ej. "Laura está escribiendo…"). */
+        this.typingLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "typingLabel" }] : /* istanbul ignore next */ []));
+        /** Nombre del log. Por defecto, "Conversación". */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** La vista está en el final (sigue los mensajes nuevos). */
+        this.pinned = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pinned" }] : /* istanbul ignore next */ []));
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        this.wasBusy = false;
+        afterNextRender(() => {
+            this.scrollToBottom(false);
+            const view = this.document.defaultView;
+            const follow = () => {
+                if (this.pinned())
+                    this.scrollToBottom(false);
+            };
+            const content = this.content().nativeElement;
+            if (view?.ResizeObserver) {
+                const resize = new view.ResizeObserver(follow);
+                resize.observe(content);
+                this.destroyRef.onDestroy(() => resize.disconnect());
+            }
+            if (view?.MutationObserver) {
+                const mutation = new view.MutationObserver(follow);
+                mutation.observe(content, { childList: true, subtree: true, characterData: true });
+                this.destroyRef.onDestroy(() => mutation.disconnect());
+            }
+        });
+        // Al terminar una respuesta, se anuncia una sola vez (en vez de cada fragmento).
+        effect(() => {
+            const busy = this.busy();
+            untracked(() => {
+                if (this.wasBusy && !busy)
+                    this.announcement.set(this.t().chatResponseReady);
+                else if (busy)
+                    this.announcement.set('');
+                this.wasBusy = busy;
+            });
+        });
+    }
+    onScroll() {
+        const el = this.scroller().nativeElement;
+        this.pinned.set(el.scrollHeight - el.scrollTop - el.clientHeight <= PIN_THRESHOLD);
+    }
+    /** Lleva la vista al último mensaje y vuelve a seguir los nuevos. */
+    scrollToBottom(smooth = true) {
+        const el = this.scroller().nativeElement;
+        const reduce = this.document.defaultView?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+        if (typeof el.scrollTo === 'function')
+            el.scrollTo({ top: el.scrollHeight, behavior: smooth && !reduce ? 'smooth' : 'auto' });
+        else
+            el.scrollTop = el.scrollHeight;
+        this.pinned.set(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChatMessages, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbChatMessages, isStandalone: true, selector: "cb-chat-messages", inputs: { busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, typing: { classPropertyName: "typing", publicName: "typing", isSignal: true, isRequired: false, transformFunction: null }, typingLabel: { classPropertyName: "typingLabel", publicName: "typingLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-chat-messages" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      #scroller
+      class="cb-chat-messages__scroller"
+      role="log"
+      tabindex="0"
+      [attr.aria-label]="ariaLabel() ?? t().chatConversation"
+      [attr.aria-busy]="busy() ? 'true' : null"
+      (scroll)="onScroll()"
+    >
+      <div #content class="cb-chat-messages__content">
+        <ng-content />
+        @if (typing()) {
+          <div class="cb-chat-messages__typing">
+            <span class="cb-chat-messages__dots" aria-hidden="true"><span></span><span></span><span></span></span>
+            <span class="cb-chat-messages__typing-label">{{ typingLabel() ?? t().chatTyping }}</span>
+          </div>
+        }
+      </div>
+    </div>
+    @if (!pinned()) {
+      <button type="button" class="cb-chat-messages__jump" (click)="scrollToBottom(true)">
+        <cb-icon name="arrow-down" [size]="16" aria-hidden="true" />
+        <span>{{ t().chatJumpToLatest }}</span>
+      </button>
+    }
+    <div class="cb-chat-messages__status" role="status">{{ announcement() }}</div>
+  `, isInline: true, styles: [":host{position:relative;display:flex;flex-direction:column;min-height:0}.cb-chat-messages__scroller{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.cb-chat-messages__scroller:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-chat-messages__content{display:flex;flex-direction:column;gap:1rem;padding:1rem}.cb-chat-messages__typing{display:flex;align-items:center;gap:.5rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-chat-messages__dots{display:inline-flex;gap:.25rem;padding:.625rem .75rem;border-radius:var(--cb-radius-lg, 12px);background:var(--cb-color-surface-subtle)}.cb-chat-messages__dots span{width:.375rem;height:.375rem;border-radius:50%;background:currentColor;animation:cb-chat-dot 1.2s ease-in-out infinite}.cb-chat-messages__dots span:nth-child(2){animation-delay:.15s}.cb-chat-messages__dots span:nth-child(3){animation-delay:.3s}@keyframes cb-chat-dot{0%,60%,to{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-2px)}}.cb-chat-messages__jump{position:absolute;bottom:.75rem;left:50%;display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-md);color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-xs, .75rem);transform:translate(-50%);cursor:pointer}.cb-chat-messages__jump:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-chat-messages__status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(prefers-reduced-motion:reduce){.cb-chat-messages__dots span{animation:none}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChatMessages, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-chat-messages', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-chat-messages' }, template: `
+    <div
+      #scroller
+      class="cb-chat-messages__scroller"
+      role="log"
+      tabindex="0"
+      [attr.aria-label]="ariaLabel() ?? t().chatConversation"
+      [attr.aria-busy]="busy() ? 'true' : null"
+      (scroll)="onScroll()"
+    >
+      <div #content class="cb-chat-messages__content">
+        <ng-content />
+        @if (typing()) {
+          <div class="cb-chat-messages__typing">
+            <span class="cb-chat-messages__dots" aria-hidden="true"><span></span><span></span><span></span></span>
+            <span class="cb-chat-messages__typing-label">{{ typingLabel() ?? t().chatTyping }}</span>
+          </div>
+        }
+      </div>
+    </div>
+    @if (!pinned()) {
+      <button type="button" class="cb-chat-messages__jump" (click)="scrollToBottom(true)">
+        <cb-icon name="arrow-down" [size]="16" aria-hidden="true" />
+        <span>{{ t().chatJumpToLatest }}</span>
+      </button>
+    }
+    <div class="cb-chat-messages__status" role="status">{{ announcement() }}</div>
+  `, styles: [":host{position:relative;display:flex;flex-direction:column;min-height:0}.cb-chat-messages__scroller{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.cb-chat-messages__scroller:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-chat-messages__content{display:flex;flex-direction:column;gap:1rem;padding:1rem}.cb-chat-messages__typing{display:flex;align-items:center;gap:.5rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-chat-messages__dots{display:inline-flex;gap:.25rem;padding:.625rem .75rem;border-radius:var(--cb-radius-lg, 12px);background:var(--cb-color-surface-subtle)}.cb-chat-messages__dots span{width:.375rem;height:.375rem;border-radius:50%;background:currentColor;animation:cb-chat-dot 1.2s ease-in-out infinite}.cb-chat-messages__dots span:nth-child(2){animation-delay:.15s}.cb-chat-messages__dots span:nth-child(3){animation-delay:.3s}@keyframes cb-chat-dot{0%,60%,to{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-2px)}}.cb-chat-messages__jump{position:absolute;bottom:.75rem;left:50%;display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-md);color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-xs, .75rem);transform:translate(-50%);cursor:pointer}.cb-chat-messages__jump:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-chat-messages__status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(prefers-reduced-motion:reduce){.cb-chat-messages__dots span{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], typing: [{ type: i0.Input, args: [{ isSignal: true, alias: "typing", required: false }] }], typingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "typingLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+let nextUid$2 = 0;
+function formatSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(0)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+/**
+ * Campo para escribir mensajes (prompt) de CaribeNG: crece con el texto hasta
+ * `maxRows`, envía con Enter (Shift + Enter = salto de línea, respetando la
+ * composición de teclados asiáticos), adjunta archivos (botón, pegar o
+ * arrastrar), muestra sugerencias y, mientras se genera una respuesta, cambia
+ * "Enviar" por "Detener".
+ *
+ * @example
+ * ```html
+ * <cb-chat-input [streaming]="generando()" attachments (send)="enviar($event)" (stop)="detener()" />
+ * ```
+ */
+class CbChatInput {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.injector = inject(Injector);
+        this.textarea = viewChild.required('textarea');
+        this.inputId = `cb-chat-input-${++nextUid$2}`;
+        /** Texto escrito (bidireccional). */
+        this.value = model('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Archivos adjuntos (bidireccional). */
+        this.files = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+        this.placeholder = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** Nombre del campo. Por defecto, "Mensaje". */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Se está generando una respuesta: muestra "Detener" y no deja enviar. */
+        this.streaming = input(false, { ...(ngDevMode ? { debugName: "streaming" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Permite adjuntar archivos (botón, pegar o arrastrar). */
+        this.attachments = input(false, { ...(ngDevMode ? { debugName: "attachments" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Tipos aceptados (`image/*,.pdf`). */
+        this.accept = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+        this.multiple = input(true, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Máximo de caracteres, con contador. 0 = sin límite. */
+        this.maxLength = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+        /** Filas máximas antes de hacer scroll. */
+        this.maxRows = input(8, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxRows" }] : /* istanbul ignore next */ []));
+        /** Enter envía (Shift + Enter, salto de línea). Con `false`, Ctrl/⌘ + Enter envía. */
+        this.submitOnEnter = input(true, { ...(ngDevMode ? { debugName: "submitOnEnter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Vacía el campo y los adjuntos al enviar. */
+        this.clearOnSend = input(true, { ...(ngDevMode ? { debugName: "clearOnSend" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Sugerencias de inicio (se muestran con el campo vacío; al pulsar, se envían). */
+        this.suggestions = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+        /** El usuario envió un mensaje. */
+        this.send = output();
+        /** El usuario pidió detener la respuesta. */
+        this.stop = output();
+        this.dragging = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+        this.canSend = computed(() => !this.disabled() && !this.streaming() && (this.value().trim().length > 0 || this.files().length > 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canSend" }] : /* istanbul ignore next */ []));
+        /** URLs temporales de las miniaturas, por archivo. */
+        this.previews = new Map();
+        // Ajusta la altura cuando el valor cambia desde fuera (p. ej. al vaciarse tras enviar).
+        effect(() => {
+            this.value();
+            untracked(() => afterNextRender(() => this.resize(), { injector: this.injector }));
+        });
+        // Libera las miniaturas de los archivos que ya no están.
+        effect(() => {
+            const current = new Set(this.files());
+            untracked(() => {
+                for (const [file, url] of this.previews) {
+                    if (!current.has(file)) {
+                        URL.revokeObjectURL?.(url);
+                        this.previews.delete(file);
+                    }
+                }
+            });
+        });
+        inject(DestroyRef).onDestroy(() => {
+            for (const url of this.previews.values())
+                URL.revokeObjectURL?.(url);
+            this.previews.clear();
+        });
+    }
+    /** Miniatura de una imagen adjunta (`null` si no es imagen o el navegador no la admite). */
+    preview(file) {
+        if (!file.type.startsWith('image/') || typeof URL.createObjectURL !== 'function')
+            return null;
+        let url = this.previews.get(file);
+        if (!url) {
+            url = URL.createObjectURL(file);
+            this.previews.set(file, url);
+        }
+        return url;
+    }
+    /** Enfoca el campo. */
+    focus() {
+        this.textarea().nativeElement.focus();
+    }
+    /** Envía el mensaje si hay texto o adjuntos. */
+    submit() {
+        if (!this.canSend())
+            return;
+        this.send.emit({ text: this.value().trim(), files: [...this.files()] });
+        if (this.clearOnSend()) {
+            this.value.set('');
+            this.files.set([]);
+        }
+    }
+    size(file) {
+        return formatSize(file.size);
+    }
+    onInput(event) {
+        this.value.set(event.target.value);
+        this.resize();
+    }
+    onKeydown(event) {
+        if (event.key !== 'Enter' || event.isComposing || event.keyCode === 229)
+            return;
+        const mod = event.ctrlKey || event.metaKey;
+        const sends = this.submitOnEnter() ? !event.shiftKey : mod;
+        if (!sends)
+            return;
+        event.preventDefault();
+        this.submit();
+    }
+    useSuggestion(text) {
+        this.value.set(text);
+        this.submit();
+    }
+    onFilesChosen(event) {
+        const input = event.target;
+        this.addFiles(Array.from(input.files ?? []));
+        input.value = '';
+    }
+    onPaste(event) {
+        if (!this.attachments())
+            return;
+        const pasted = Array.from(event.clipboardData?.files ?? []);
+        if (!pasted.length)
+            return;
+        event.preventDefault();
+        this.addFiles(pasted);
+    }
+    onDragOver(event) {
+        if (!this.attachments() || this.disabled() || !event.dataTransfer?.types.includes('Files'))
+            return;
+        event.preventDefault();
+        this.dragging.set(true);
+    }
+    onDrop(event) {
+        this.dragging.set(false);
+        if (!this.attachments() || this.disabled())
+            return;
+        const dropped = Array.from(event.dataTransfer?.files ?? []);
+        if (!dropped.length)
+            return;
+        event.preventDefault();
+        this.addFiles(dropped);
+    }
+    removeFile(index) {
+        this.files.update((list) => list.filter((_f, i) => i !== index));
+        this.focus();
+    }
+    addFiles(incoming) {
+        const accepted = incoming.filter((file) => this.isAccepted(file));
+        if (!accepted.length)
+            return;
+        this.files.update((list) => (this.multiple() ? [...list, ...accepted] : [accepted[0]]));
+    }
+    isAccepted(file) {
+        const accept = this.accept().trim();
+        if (!accept)
+            return true;
+        return accept.split(',').some((rule) => {
+            const r = rule.trim().toLowerCase();
+            if (!r)
+                return false;
+            if (r.startsWith('.'))
+                return file.name.toLowerCase().endsWith(r);
+            if (r.endsWith('/*'))
+                return file.type.toLowerCase().startsWith(r.slice(0, -1));
+            return file.type.toLowerCase() === r;
+        });
+    }
+    resize() {
+        const el = this.textarea().nativeElement;
+        const style = el.ownerDocument.defaultView?.getComputedStyle(el);
+        const line = parseFloat(style?.lineHeight ?? '') || 20;
+        const padding = (parseFloat(style?.paddingTop ?? '') || 0) + (parseFloat(style?.paddingBottom ?? '') || 0);
+        el.style.height = 'auto';
+        const max = line * Math.max(1, this.maxRows()) + padding;
+        el.style.height = `${Math.min(el.scrollHeight, max)}px`;
+        el.style.overflowY = el.scrollHeight > max ? 'auto' : 'hidden';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChatInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbChatInput, isStandalone: true, selector: "cb-chat-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, submitOnEnter: { classPropertyName: "submitOnEnter", publicName: "submitOnEnter", isSignal: true, isRequired: false, transformFunction: null }, clearOnSend: { classPropertyName: "clearOnSend", publicName: "clearOnSend", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", files: "filesChange", send: "send", stop: "stop" }, host: { properties: { "class.cb-chat-input--disabled": "disabled()", "class.cb-chat-input--dragging": "dragging()" }, classAttribute: "cb-chat-input" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (suggestions().length && !value() && !files().length) {
+      <div class="cb-chat-input__suggestions">
+        @for (s of suggestions(); track s) {
+          <button type="button" class="cb-chat-input__suggestion" [disabled]="disabled() || streaming()" (click)="useSuggestion(s)">{{ s }}</button>
+        }
+      </div>
+    }
+    <form
+      class="cb-chat-input__box"
+      (submit)="$event.preventDefault(); submit()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="dragging.set(false)"
+      (drop)="onDrop($event)"
+    >
+      @if (files().length) {
+        <ul class="cb-chat-input__files" role="list">
+          @for (file of files(); track $index) {
+            <li class="cb-chat-input__file">
+              @if (preview(file); as src) {
+                <img class="cb-chat-input__file-thumb" [src]="src" alt="" />
+              } @else {
+                <cb-icon [name]="file.type.startsWith('image/') ? 'image' : 'file'" [size]="16" aria-hidden="true" />
+              }
+              <span class="cb-chat-input__file-name">{{ file.name }}</span>
+              <span class="cb-chat-input__file-size">{{ size(file) }}</span>
+              <button type="button" class="cb-chat-input__file-remove" [attr.aria-label]="fmt(t().removeItem, file.name)" (click)="removeFile($index)">
+                <cb-icon name="x" [size]="14" aria-hidden="true" />
+              </button>
+            </li>
+          }
+        </ul>
+      }
+      <div class="cb-chat-input__row">
+        @if (attachments()) {
+          <button type="button" class="cb-chat-input__icon-btn" [attr.aria-label]="t().chatAttach" [disabled]="disabled()" (click)="fileInput.click()">
+            <cb-icon name="plus" [size]="20" aria-hidden="true" />
+          </button>
+          <input #fileInput type="file" hidden [attr.accept]="accept() || null" [multiple]="multiple()" (change)="onFilesChosen($event)" />
+        }
+        <textarea
+          #textarea
+          class="cb-chat-input__textarea"
+          rows="1"
+          [id]="inputId"
+          [value]="value()"
+          [placeholder]="placeholder() ?? t().chatPlaceholder"
+          [disabled]="disabled()"
+          [attr.maxlength]="maxLength() || null"
+          [attr.aria-label]="ariaLabel() ?? t().chatMessage"
+          [attr.aria-describedby]="maxLength() ? inputId + '-count' : null"
+          (input)="onInput($event)"
+          (keydown)="onKeydown($event)"
+          (paste)="onPaste($event)"
+        ></textarea>
+        @if (streaming()) {
+          <button type="button" class="cb-chat-input__send cb-chat-input__send--stop" [attr.aria-label]="t().chatStop" (click)="stop.emit()">
+            <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><rect x="5" y="5" width="14" height="14" rx="2" fill="currentColor" /></svg>
+          </button>
+        } @else {
+          <button type="submit" class="cb-chat-input__send" [attr.aria-label]="t().chatSend" [disabled]="!canSend()">
+            <cb-icon name="arrow-up" [size]="18" aria-hidden="true" />
+          </button>
+        }
+      </div>
+    </form>
+    @if (maxLength()) {
+      <div class="cb-chat-input__count" [id]="inputId + '-count'">{{ value().length }} / {{ maxLength() }}</div>
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:.5rem;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-chat-input__suggestions{display:flex;flex-wrap:wrap;gap:.5rem}.cb-chat-input__suggestion{padding:.375rem .75rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-surface-raised);color:inherit;font:inherit;font-size:var(--cb-text-sm, .875rem);cursor:pointer}.cb-chat-input__suggestion:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-chat-input__suggestion:focus-visible,.cb-chat-input__icon-btn:focus-visible,.cb-chat-input__send:focus-visible,.cb-chat-input__file-remove:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-chat-input__box{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:.5rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-lg, 12px);background:var(--cb-color-surface-raised);transition:border-color var(--cb-duration-fast, .15s) ease}.cb-chat-input__box:focus-within{border-color:var(--cb-color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary) 18%,transparent)}:host(.cb-chat-input--dragging) .cb-chat-input__box{border-style:dashed;border-color:var(--cb-color-primary);background:color-mix(in srgb,var(--cb-color-primary) 6%,var(--cb-color-surface-raised))}:host(.cb-chat-input--disabled) .cb-chat-input__box{opacity:.6}.cb-chat-input__files{display:flex;flex-wrap:wrap;gap:.375rem;margin:0;padding:0;list-style:none}.cb-chat-input__file{display:inline-flex;align-items:center;gap:.375rem;max-width:16rem;padding:.25rem .25rem .25rem .5rem;border-radius:var(--cb-radius-md, 8px);background:var(--cb-color-surface-subtle);font-size:var(--cb-text-xs, .75rem)}.cb-chat-input__file-thumb{flex:none;width:1.75rem;height:1.75rem;border-radius:var(--cb-radius-sm, 4px);object-fit:cover}.cb-chat-input__file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-chat-input__file-size{flex:none;color:var(--cb-color-text-muted)}.cb-chat-input__file-remove{display:inline-flex;flex:none;padding:.125rem;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-chat-input__row{display:flex;align-items:flex-end;gap:.375rem}.cb-chat-input__textarea{flex:1;min-width:0;max-height:none;margin:0;padding:.375rem .25rem;border:0;outline:none;resize:none;overflow-y:hidden;background:transparent;color:inherit;font:inherit;font-size:var(--cb-text-sm, .875rem);line-height:1.5}.cb-chat-input__textarea::placeholder{color:var(--cb-color-text-muted)}.cb-chat-input__icon-btn,.cb-chat-input__send{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:0;border-radius:50%;cursor:pointer}.cb-chat-input__icon-btn{background:transparent;color:var(--cb-color-text-muted)}.cb-chat-input__icon-btn:hover:not(:disabled){background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-chat-input__send{background:var(--cb-color-primary);color:var(--cb-color-primary-contrast)}.cb-chat-input__send:disabled{background:var(--cb-color-surface-hover);color:var(--cb-color-text-muted);cursor:not-allowed}.cb-chat-input__send--stop{background:var(--cb-color-text-strong);color:var(--cb-color-surface-raised)}.cb-chat-input__count{align-self:flex-end;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChatInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-chat-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: {
+                        class: 'cb-chat-input',
+                        '[class.cb-chat-input--disabled]': 'disabled()',
+                        '[class.cb-chat-input--dragging]': 'dragging()',
+                    }, template: `
+    @if (suggestions().length && !value() && !files().length) {
+      <div class="cb-chat-input__suggestions">
+        @for (s of suggestions(); track s) {
+          <button type="button" class="cb-chat-input__suggestion" [disabled]="disabled() || streaming()" (click)="useSuggestion(s)">{{ s }}</button>
+        }
+      </div>
+    }
+    <form
+      class="cb-chat-input__box"
+      (submit)="$event.preventDefault(); submit()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="dragging.set(false)"
+      (drop)="onDrop($event)"
+    >
+      @if (files().length) {
+        <ul class="cb-chat-input__files" role="list">
+          @for (file of files(); track $index) {
+            <li class="cb-chat-input__file">
+              @if (preview(file); as src) {
+                <img class="cb-chat-input__file-thumb" [src]="src" alt="" />
+              } @else {
+                <cb-icon [name]="file.type.startsWith('image/') ? 'image' : 'file'" [size]="16" aria-hidden="true" />
+              }
+              <span class="cb-chat-input__file-name">{{ file.name }}</span>
+              <span class="cb-chat-input__file-size">{{ size(file) }}</span>
+              <button type="button" class="cb-chat-input__file-remove" [attr.aria-label]="fmt(t().removeItem, file.name)" (click)="removeFile($index)">
+                <cb-icon name="x" [size]="14" aria-hidden="true" />
+              </button>
+            </li>
+          }
+        </ul>
+      }
+      <div class="cb-chat-input__row">
+        @if (attachments()) {
+          <button type="button" class="cb-chat-input__icon-btn" [attr.aria-label]="t().chatAttach" [disabled]="disabled()" (click)="fileInput.click()">
+            <cb-icon name="plus" [size]="20" aria-hidden="true" />
+          </button>
+          <input #fileInput type="file" hidden [attr.accept]="accept() || null" [multiple]="multiple()" (change)="onFilesChosen($event)" />
+        }
+        <textarea
+          #textarea
+          class="cb-chat-input__textarea"
+          rows="1"
+          [id]="inputId"
+          [value]="value()"
+          [placeholder]="placeholder() ?? t().chatPlaceholder"
+          [disabled]="disabled()"
+          [attr.maxlength]="maxLength() || null"
+          [attr.aria-label]="ariaLabel() ?? t().chatMessage"
+          [attr.aria-describedby]="maxLength() ? inputId + '-count' : null"
+          (input)="onInput($event)"
+          (keydown)="onKeydown($event)"
+          (paste)="onPaste($event)"
+        ></textarea>
+        @if (streaming()) {
+          <button type="button" class="cb-chat-input__send cb-chat-input__send--stop" [attr.aria-label]="t().chatStop" (click)="stop.emit()">
+            <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><rect x="5" y="5" width="14" height="14" rx="2" fill="currentColor" /></svg>
+          </button>
+        } @else {
+          <button type="submit" class="cb-chat-input__send" [attr.aria-label]="t().chatSend" [disabled]="!canSend()">
+            <cb-icon name="arrow-up" [size]="18" aria-hidden="true" />
+          </button>
+        }
+      </div>
+    </form>
+    @if (maxLength()) {
+      <div class="cb-chat-input__count" [id]="inputId + '-count'">{{ value().length }} / {{ maxLength() }}</div>
+    }
+  `, styles: [":host{display:flex;flex-direction:column;gap:.5rem;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-chat-input__suggestions{display:flex;flex-wrap:wrap;gap:.5rem}.cb-chat-input__suggestion{padding:.375rem .75rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-surface-raised);color:inherit;font:inherit;font-size:var(--cb-text-sm, .875rem);cursor:pointer}.cb-chat-input__suggestion:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-chat-input__suggestion:focus-visible,.cb-chat-input__icon-btn:focus-visible,.cb-chat-input__send:focus-visible,.cb-chat-input__file-remove:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-chat-input__box{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:.5rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-lg, 12px);background:var(--cb-color-surface-raised);transition:border-color var(--cb-duration-fast, .15s) ease}.cb-chat-input__box:focus-within{border-color:var(--cb-color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary) 18%,transparent)}:host(.cb-chat-input--dragging) .cb-chat-input__box{border-style:dashed;border-color:var(--cb-color-primary);background:color-mix(in srgb,var(--cb-color-primary) 6%,var(--cb-color-surface-raised))}:host(.cb-chat-input--disabled) .cb-chat-input__box{opacity:.6}.cb-chat-input__files{display:flex;flex-wrap:wrap;gap:.375rem;margin:0;padding:0;list-style:none}.cb-chat-input__file{display:inline-flex;align-items:center;gap:.375rem;max-width:16rem;padding:.25rem .25rem .25rem .5rem;border-radius:var(--cb-radius-md, 8px);background:var(--cb-color-surface-subtle);font-size:var(--cb-text-xs, .75rem)}.cb-chat-input__file-thumb{flex:none;width:1.75rem;height:1.75rem;border-radius:var(--cb-radius-sm, 4px);object-fit:cover}.cb-chat-input__file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-chat-input__file-size{flex:none;color:var(--cb-color-text-muted)}.cb-chat-input__file-remove{display:inline-flex;flex:none;padding:.125rem;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-chat-input__row{display:flex;align-items:flex-end;gap:.375rem}.cb-chat-input__textarea{flex:1;min-width:0;max-height:none;margin:0;padding:.375rem .25rem;border:0;outline:none;resize:none;overflow-y:hidden;background:transparent;color:inherit;font:inherit;font-size:var(--cb-text-sm, .875rem);line-height:1.5}.cb-chat-input__textarea::placeholder{color:var(--cb-color-text-muted)}.cb-chat-input__icon-btn,.cb-chat-input__send{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:0;border-radius:50%;cursor:pointer}.cb-chat-input__icon-btn{background:transparent;color:var(--cb-color-text-muted)}.cb-chat-input__icon-btn:hover:not(:disabled){background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-chat-input__send{background:var(--cb-color-primary);color:var(--cb-color-primary-contrast)}.cb-chat-input__send:disabled{background:var(--cb-color-surface-hover);color:var(--cb-color-text-muted);cursor:not-allowed}.cb-chat-input__send--stop{background:var(--cb-color-text-strong);color:var(--cb-color-surface-raised)}.cb-chat-input__count{align-self:flex-end;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { textarea: [{ type: i0.ViewChild, args: ['textarea', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], streaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "streaming", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], submitOnEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitOnEnter", required: false }] }], clearOnSend: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearOnSend", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], send: [{ type: i0.Output, args: ["send"] }], stop: [{ type: i0.Output, args: ["stop"] }] } });
+
+let nextUid$1 = 0;
+/**
+ * Razonamiento del modelo ("Pensando…"), plegable. Mientras llega se abre y
+ * muestra un brillo; al terminar se pliega solo (`autoCollapse`) y resume
+ * "Razonó durante N s". El texto admite markdown seguro.
+ *
+ * @example
+ * ```html
+ * <cb-chat-reasoning [text]="m.reasoning" [streaming]="m.pensando" [duration]="m.segundos" />
+ * ```
+ */
+class CbChatReasoning {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.uid = `cb-chat-reasoning-${++nextUid$1}`;
+        /** Texto del razonamiento (markdown). */
+        this.text = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /** El razonamiento sigue llegando. */
+        this.streaming = input(false, { ...(ngDevMode ? { debugName: "streaming" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Segundos que duró (se muestra al terminar). */
+        this.duration = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
+        /** Desplegado. */
+        this.open = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        /** Se abre mientras llega y se pliega al terminar. */
+        this.autoCollapse = input(true, { ...(ngDevMode ? { debugName: "autoCollapse" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.html = computed(() => cbMarkdownToHtml(this.text()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
+        this.summary = computed(() => {
+            if (this.streaming())
+                return this.t().chatThinking;
+            const seconds = this.duration();
+            return seconds !== undefined ? cbFormat(this.t().chatThoughtFor, String(Math.max(1, Math.round(seconds)))) : this.t().chatReasoning;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const streaming = this.streaming();
+            untracked(() => {
+                if (this.autoCollapse())
+                    this.open.set(streaming);
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChatReasoning, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbChatReasoning, isStandalone: true, selector: "cb-chat-reasoning", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, autoCollapse: { classPropertyName: "autoCollapse", publicName: "autoCollapse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class.cb-chat-reasoning--streaming": "streaming()" }, classAttribute: "cb-chat-reasoning" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="cb-chat-reasoning__toggle"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="uid"
+      (click)="open.set(!open())"
+    >
+      <cb-icon name="sparkles" [size]="14" aria-hidden="true" />
+      <span class="cb-chat-reasoning__label">{{ summary() }}</span>
+      <cb-icon class="cb-chat-reasoning__chevron" name="chevron-down" [size]="14" aria-hidden="true" />
+    </button>
+    @if (open()) {
+      <div class="cb-chat-reasoning__body" [id]="uid" role="region" [attr.aria-label]="t().chatReasoning" [attr.aria-busy]="streaming() ? 'true' : null">
+        @if (text()) {
+          <div class="cb-chat-reasoning__markdown" [innerHTML]="html()"></div>
+        }
+        <ng-content />
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:block;max-width:100%;color:var(--cb-color-text-muted);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-chat-reasoning__toggle{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .5rem .25rem .25rem;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:inherit;font:inherit;cursor:pointer}.cb-chat-reasoning__toggle:hover{color:var(--cb-color-text)}.cb-chat-reasoning__toggle:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-chat-reasoning__chevron{transition:transform var(--cb-duration-fast, .15s) ease}.cb-chat-reasoning__toggle[aria-expanded=true] .cb-chat-reasoning__chevron{transform:rotate(180deg)}:host(.cb-chat-reasoning--streaming) .cb-chat-reasoning__label{background:linear-gradient(90deg,currentColor 25%,var(--cb-color-text-strong) 50%,currentColor 75%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cb-chat-shimmer 1.6s linear infinite}@keyframes cb-chat-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.cb-chat-reasoning__body{margin:.25rem 0 0 .5rem;padding:.25rem 0 .25rem .875rem;border-left:2px solid var(--cb-color-border);line-height:1.55}.cb-chat-reasoning__markdown ::ng-deep p{margin:0 0 .5rem}.cb-chat-reasoning__markdown ::ng-deep p:last-child{margin-bottom:0}.cb-chat-reasoning__markdown ::ng-deep code{font-family:var(--cb-font-mono);font-size:.9em}@media(prefers-reduced-motion:reduce){:host(.cb-chat-reasoning--streaming) .cb-chat-reasoning__label{animation:none;background:none;color:inherit}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChatReasoning, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-chat-reasoning', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-chat-reasoning', '[class.cb-chat-reasoning--streaming]': 'streaming()' }, template: `
+    <button
+      type="button"
+      class="cb-chat-reasoning__toggle"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="uid"
+      (click)="open.set(!open())"
+    >
+      <cb-icon name="sparkles" [size]="14" aria-hidden="true" />
+      <span class="cb-chat-reasoning__label">{{ summary() }}</span>
+      <cb-icon class="cb-chat-reasoning__chevron" name="chevron-down" [size]="14" aria-hidden="true" />
+    </button>
+    @if (open()) {
+      <div class="cb-chat-reasoning__body" [id]="uid" role="region" [attr.aria-label]="t().chatReasoning" [attr.aria-busy]="streaming() ? 'true' : null">
+        @if (text()) {
+          <div class="cb-chat-reasoning__markdown" [innerHTML]="html()"></div>
+        }
+        <ng-content />
+      </div>
+    }
+  `, styles: [":host{display:block;max-width:100%;color:var(--cb-color-text-muted);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-chat-reasoning__toggle{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .5rem .25rem .25rem;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:inherit;font:inherit;cursor:pointer}.cb-chat-reasoning__toggle:hover{color:var(--cb-color-text)}.cb-chat-reasoning__toggle:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-chat-reasoning__chevron{transition:transform var(--cb-duration-fast, .15s) ease}.cb-chat-reasoning__toggle[aria-expanded=true] .cb-chat-reasoning__chevron{transform:rotate(180deg)}:host(.cb-chat-reasoning--streaming) .cb-chat-reasoning__label{background:linear-gradient(90deg,currentColor 25%,var(--cb-color-text-strong) 50%,currentColor 75%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cb-chat-shimmer 1.6s linear infinite}@keyframes cb-chat-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.cb-chat-reasoning__body{margin:.25rem 0 0 .5rem;padding:.25rem 0 .25rem .875rem;border-left:2px solid var(--cb-color-border);line-height:1.55}.cb-chat-reasoning__markdown ::ng-deep p{margin:0 0 .5rem}.cb-chat-reasoning__markdown ::ng-deep p:last-child{margin-bottom:0}.cb-chat-reasoning__markdown ::ng-deep code{font-family:var(--cb-font-mono);font-size:.9em}@media(prefers-reduced-motion:reduce){:host(.cb-chat-reasoning--streaming) .cb-chat-reasoning__label{animation:none;background:none;color:inherit}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], streaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "streaming", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], autoCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCollapse", required: false }] }] } });
+
+let nextUid = 0;
+/** Objeto → JSON legible; texto, tal cual. */
+function show(value) {
+    if (value === undefined || value === null || value === '')
+        return null;
+    if (typeof value === 'string') {
+        try {
+            return { code: JSON.stringify(JSON.parse(value), null, 2), language: 'json' };
+        }
+        catch {
+            return { code: value, language: '' };
+        }
+    }
+    try {
+        return { code: JSON.stringify(value, null, 2), language: 'json' };
+    }
+    catch {
+        return { code: String(value), language: '' };
+    }
+}
+/**
+ * Llamada a una herramienta (función) del asistente: nombre, estado
+ * ("Usando buscar_movimientos…", "Usó…", "Falló…") y, al desplegar, la
+ * entrada y el resultado como JSON resaltado.
+ *
+ * @example
+ * ```html
+ * <cb-chat-tool name="buscar_movimientos" status="done" [input]="{ cuenta: '4829' }" [output]="resultado" />
+ * ```
+ */
+class CbChatTool {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.uid = `cb-chat-tool-${++nextUid}`;
+        /** Nombre de la herramienta (`buscar_movimientos`). */
+        this.name = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        /** Texto que sustituye al nombre en la cabecera ("Buscando movimientos"). */
+        this.title = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.status = input('done', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        /** Argumentos (objeto o JSON). */
+        this.input = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
+        /** Resultado (objeto, JSON o texto). */
+        this.output = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "output" }] : /* istanbul ignore next */ []));
+        /** Desplegado. */
+        this.open = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.shownInput = computed(() => show(this.input()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shownInput" }] : /* istanbul ignore next */ []));
+        this.shownOutput = computed(() => show(this.output()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shownOutput" }] : /* istanbul ignore next */ []));
+        this.label = computed(() => {
+            const name = this.title() || this.name();
+            const status = this.status();
+            if (status === 'running')
+                return cbFormat(this.t().chatToolRunning, name);
+            if (status === 'error')
+                return cbFormat(this.t().chatToolError, name);
+            return cbFormat(this.t().chatToolDone, name);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChatTool, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbChatTool, isStandalone: true, selector: "cb-chat-tool", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: false, transformFunction: null }, output: { classPropertyName: "output", publicName: "output", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class.cb-chat-tool--running": "status() === 'running'", "class.cb-chat-tool--done": "status() === 'done'", "class.cb-chat-tool--error": "status() === 'error'" }, classAttribute: "cb-chat-tool" }, ngImport: i0, template: `
+    <button type="button" class="cb-chat-tool__header" [attr.aria-expanded]="open()" [attr.aria-controls]="uid" (click)="open.set(!open())">
+      @switch (status()) {
+        @case ('running') {
+          <span class="cb-chat-tool__spinner" aria-hidden="true"></span>
+        }
+        @case ('error') {
+          <cb-icon class="cb-chat-tool__icon" name="circle-alert" [size]="16" aria-hidden="true" />
+        }
+        @default {
+          <cb-icon class="cb-chat-tool__icon" name="check" [size]="16" aria-hidden="true" />
+        }
+      }
+      <span class="cb-chat-tool__label">{{ label() }}</span>
+      <cb-icon class="cb-chat-tool__chevron" name="chevron-down" [size]="14" aria-hidden="true" />
+    </button>
+    <span class="cb-chat-tool__status" role="status">{{ status() === 'running' ? '' : label() }}</span>
+    @if (open()) {
+      <div class="cb-chat-tool__body" [id]="uid">
+        @if (shownInput(); as i) {
+          <div class="cb-chat-tool__section">{{ t().chatToolInput }}</div>
+          <cb-code-block [code]="i.code" [language]="i.language" [header]="false" wrap maxHeight="14rem" [ariaLabel]="t().chatToolInput" />
+        }
+        @if (shownOutput(); as o) {
+          <div class="cb-chat-tool__section">{{ t().chatToolOutput }}</div>
+          <cb-code-block [code]="o.code" [language]="o.language" [header]="false" wrap maxHeight="14rem" [ariaLabel]="t().chatToolOutput" />
+        }
+        <ng-content />
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:block;max-width:100%;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, 8px);background:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-chat-tool__header{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;border:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}.cb-chat-tool__header:hover{background:var(--cb-color-surface-hover)}.cb-chat-tool__header:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-chat-tool__label{flex:1;min-width:0;overflow:hidden;font-family:var(--cb-font-mono);font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap}:host{--cb-chat-tool-ok: var(--cb-color-success-700);--cb-chat-tool-error: var(--cb-color-danger-700)}:host-context([data-theme=\"dark\"]){--cb-chat-tool-ok: var(--cb-color-success-400);--cb-chat-tool-error: var(--cb-color-danger-400)}:host(.cb-chat-tool--done) .cb-chat-tool__icon{color:var(--cb-chat-tool-ok)}:host(.cb-chat-tool--error) .cb-chat-tool__icon{color:var(--cb-chat-tool-error)}.cb-chat-tool__spinner{flex:none;width:14px;height:14px;border:2px solid var(--cb-color-border-strong);border-top-color:var(--cb-color-primary);border-radius:50%;animation:cb-chat-spin .8s linear infinite}@keyframes cb-chat-spin{to{transform:rotate(360deg)}}.cb-chat-tool__chevron{flex:none;color:var(--cb-color-text-muted);transition:transform var(--cb-duration-fast, .15s) ease}.cb-chat-tool__header[aria-expanded=true] .cb-chat-tool__chevron{transform:rotate(180deg)}.cb-chat-tool__status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.cb-chat-tool__body{display:flex;flex-direction:column;gap:.375rem;padding:0 .75rem .75rem}.cb-chat-tool__section{margin-top:.25rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600)}@media(prefers-reduced-motion:reduce){.cb-chat-tool__spinner{animation-duration:2.4s}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbCodeBlock, selector: "cb-code-block", inputs: ["code", "language", "filename", "lineNumbers", "startLine", "highlightLines", "wrap", "copyable", "header", "maxHeight", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChatTool, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-chat-tool', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon, CbCodeBlock], host: {
+                        class: 'cb-chat-tool',
+                        '[class.cb-chat-tool--running]': "status() === 'running'",
+                        '[class.cb-chat-tool--done]': "status() === 'done'",
+                        '[class.cb-chat-tool--error]': "status() === 'error'",
+                    }, template: `
+    <button type="button" class="cb-chat-tool__header" [attr.aria-expanded]="open()" [attr.aria-controls]="uid" (click)="open.set(!open())">
+      @switch (status()) {
+        @case ('running') {
+          <span class="cb-chat-tool__spinner" aria-hidden="true"></span>
+        }
+        @case ('error') {
+          <cb-icon class="cb-chat-tool__icon" name="circle-alert" [size]="16" aria-hidden="true" />
+        }
+        @default {
+          <cb-icon class="cb-chat-tool__icon" name="check" [size]="16" aria-hidden="true" />
+        }
+      }
+      <span class="cb-chat-tool__label">{{ label() }}</span>
+      <cb-icon class="cb-chat-tool__chevron" name="chevron-down" [size]="14" aria-hidden="true" />
+    </button>
+    <span class="cb-chat-tool__status" role="status">{{ status() === 'running' ? '' : label() }}</span>
+    @if (open()) {
+      <div class="cb-chat-tool__body" [id]="uid">
+        @if (shownInput(); as i) {
+          <div class="cb-chat-tool__section">{{ t().chatToolInput }}</div>
+          <cb-code-block [code]="i.code" [language]="i.language" [header]="false" wrap maxHeight="14rem" [ariaLabel]="t().chatToolInput" />
+        }
+        @if (shownOutput(); as o) {
+          <div class="cb-chat-tool__section">{{ t().chatToolOutput }}</div>
+          <cb-code-block [code]="o.code" [language]="o.language" [header]="false" wrap maxHeight="14rem" [ariaLabel]="t().chatToolOutput" />
+        }
+        <ng-content />
+      </div>
+    }
+  `, styles: [":host{display:block;max-width:100%;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, 8px);background:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-chat-tool__header{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;border:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}.cb-chat-tool__header:hover{background:var(--cb-color-surface-hover)}.cb-chat-tool__header:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-chat-tool__label{flex:1;min-width:0;overflow:hidden;font-family:var(--cb-font-mono);font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap}:host{--cb-chat-tool-ok: var(--cb-color-success-700);--cb-chat-tool-error: var(--cb-color-danger-700)}:host-context([data-theme=\"dark\"]){--cb-chat-tool-ok: var(--cb-color-success-400);--cb-chat-tool-error: var(--cb-color-danger-400)}:host(.cb-chat-tool--done) .cb-chat-tool__icon{color:var(--cb-chat-tool-ok)}:host(.cb-chat-tool--error) .cb-chat-tool__icon{color:var(--cb-chat-tool-error)}.cb-chat-tool__spinner{flex:none;width:14px;height:14px;border:2px solid var(--cb-color-border-strong);border-top-color:var(--cb-color-primary);border-radius:50%;animation:cb-chat-spin .8s linear infinite}@keyframes cb-chat-spin{to{transform:rotate(360deg)}}.cb-chat-tool__chevron{flex:none;color:var(--cb-color-text-muted);transition:transform var(--cb-duration-fast, .15s) ease}.cb-chat-tool__header[aria-expanded=true] .cb-chat-tool__chevron{transform:rotate(180deg)}.cb-chat-tool__status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.cb-chat-tool__body{display:flex;flex-direction:column;gap:.375rem;padding:0 .75rem .75rem}.cb-chat-tool__section{margin-top:.25rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600)}@media(prefers-reduced-motion:reduce){.cb-chat-tool__spinner{animation-duration:2.4s}}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], input: [{ type: i0.Input, args: [{ isSignal: true, alias: "input", required: false }] }], output: [{ type: i0.Input, args: [{ isSignal: true, alias: "output", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/chat
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbChatInput, CbChatMessage, CbChatMessages, CbChatReasoning, CbChatTool, cbMarkdownToBlocks, cbMarkdownToHtml, cbSafeUrl };