@mk-kit/ui 0.36.0 → 0.38.0

package/fesm2022/mk-kit-ui-chat.mjs

@@ -0,0 +1,490 @@
+import * as i0 from '@angular/core';
+import { inject, model, input, booleanAttribute, numberAttribute, output, signal, viewChild, computed, afterRenderEffect, ChangeDetectionStrategy, Component, TemplateRef, Directive, contentChild, untracked } from '@angular/core';
+import { MK_I18N, mkUniqueId } from '@mk-kit/ui/core';
+import { MkButton } from '@mk-kit/ui/button';
+import { MkChip } from '@mk-kit/ui/chip';
+import { MkIcon } from '@mk-kit/ui/icon';
+import { MkAvatar, MkMarkdown } from '@mk-kit/ui/data';
+import { MkCopyToClipboard } from '@mk-kit/ui/directives';
+import { NgTemplateOutlet } from '@angular/common';
+
+/**
+ * PromptBox — the composer of a chat: an auto-growing textarea, attachments
+ * (button, drop, paste), quick-reply suggestions and a send button that turns
+ * into *stop* while a reply is being generated.
+ *
+ * Enter sends, Shift+Enter breaks the line (`sendOnEnter="false"` to swap).
+ *
+ * ```html
+ * <mk-prompt-box
+ *   [(value)]="draft"
+ *   [busy]="generating()"
+ *   attachments
+ *   [suggestions]="['Summarise this page', 'Draft a reply']"
+ *   (send)="ask($event)"
+ *   (stop)="abort()"
+ * />
+ * ```
+ */
+class MkPromptBox {
+    i18n = inject(MK_I18N);
+    id = mkUniqueId('mk-prompt');
+    /** The draft text (two-way). */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Placeholder of the textarea. */
+    placeholder = input(this.i18n.chatPlaceholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Disable everything (e.g. while offline). */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** A reply is being generated: the send button becomes *stop*, sending is paused. */
+    busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Allow attaching files (button, drag & drop, paste). */
+    attachments = input(false, { ...(ngDevMode ? { debugName: "attachments" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accepted file types for the picker (`accept` attribute syntax). */
+    accept = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    /** Maximum number of attached files (0 = unlimited). */
+    maxFiles = input(0, { ...(ngDevMode ? { debugName: "maxFiles" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Maximum draft length; shows a counter when set. */
+    maxLength = input(0, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Minimum visible rows. */
+    rows = input(1, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Rows the textarea grows to before scrolling. */
+    maxRows = input(8, { ...(ngDevMode ? { debugName: "maxRows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Enter sends and Shift+Enter breaks the line (default); `false` swaps them. */
+    sendOnEnter = input(true, { ...(ngDevMode ? { debugName: "sendOnEnter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Quick replies shown above the box; clicking one sends it. */
+    suggestions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    /** Focus the textarea on render. */
+    autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The user submitted the draft (and any files). */
+    send = output();
+    /** The user pressed *stop* while `busy`. */
+    stop = output();
+    /** Files waiting to be sent. */
+    files = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    textarea = viewChild.required('textarea', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textarea" }] : /* istanbul ignore next */ []));
+    fileInput = viewChild('fileInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
+    canSend = computed(() => !this.disabled() && !this.busy() && (this.value().trim().length > 0 || this.files().length > 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canSend" }] : /* istanbul ignore next */ []));
+    remaining = computed(() => (this.maxLength() > 0 ? this.maxLength() - this.value().length : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "remaining" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterRenderEffect(() => {
+            this.value();
+            this.rows();
+            this.maxRows();
+            this.autosize();
+        });
+        afterRenderEffect(() => {
+            if (this.autofocus())
+                this.textarea().nativeElement.focus();
+        });
+    }
+    /** Focus the textarea. */
+    focus() {
+        this.textarea().nativeElement.focus();
+    }
+    /** Empty the draft and the attachment list. */
+    clear() {
+        this.value.set('');
+        this.files.set([]);
+    }
+    /** Submit the current draft (no-op when there is nothing to send or while busy). */
+    submit() {
+        if (!this.canSend())
+            return;
+        this.send.emit({ text: this.value().trim(), files: this.files() });
+        this.clear();
+    }
+    /** Add files, honouring `maxFiles` and `accept`. */
+    addFiles(list) {
+        if (!list || !this.attachments() || this.disabled())
+            return;
+        const accepted = Array.from(list).filter((f) => this.accepts(f));
+        if (!accepted.length)
+            return;
+        this.files.update((current) => {
+            const next = [...current, ...accepted];
+            const max = this.maxFiles();
+            return max > 0 ? next.slice(0, max) : next;
+        });
+    }
+    removeFile(index) {
+        this.files.update((current) => current.filter((_, i) => i !== index));
+        this.focus();
+    }
+    onInput(event) {
+        this.value.set(event.target.value);
+    }
+    onKeydown(event) {
+        if (event.key !== 'Enter' || event.isComposing)
+            return;
+        const plain = !event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey;
+        const sends = this.sendOnEnter() ? plain : event.ctrlKey || event.metaKey;
+        if (!sends)
+            return;
+        event.preventDefault();
+        if (this.busy())
+            return;
+        this.submit();
+    }
+    onPaste(event) {
+        const files = event.clipboardData?.files;
+        if (files?.length && this.attachments()) {
+            event.preventDefault();
+            this.addFiles(files);
+        }
+    }
+    onDragOver(event) {
+        if (!this.attachments() || this.disabled())
+            return;
+        event.preventDefault();
+        this.dragging.set(true);
+    }
+    onDrop(event) {
+        this.dragging.set(false);
+        if (!this.attachments() || this.disabled())
+            return;
+        event.preventDefault();
+        this.addFiles(event.dataTransfer?.files);
+    }
+    openPicker() {
+        this.fileInput()?.nativeElement.click();
+    }
+    onFilesPicked(event) {
+        const el = event.target;
+        this.addFiles(el.files);
+        el.value = '';
+    }
+    onSuggestion(text) {
+        if (this.disabled() || this.busy())
+            return;
+        this.send.emit({ text, files: [] });
+    }
+    onPrimary() {
+        if (this.busy())
+            this.stop.emit();
+        else
+            this.submit();
+    }
+    /** Human-readable size, e.g. `1.2 MB`. */
+    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`;
+    }
+    accepts(file) {
+        const accept = this.accept().trim();
+        if (!accept)
+            return true;
+        const ext = file.name.includes('.') ? '.' + file.name.split('.').pop().toLowerCase() : '';
+        return accept.split(',').some((rule) => {
+            const r = rule.trim().toLowerCase();
+            if (!r)
+                return false;
+            if (r.startsWith('.'))
+                return ext === r;
+            if (r.endsWith('/*'))
+                return file.type.toLowerCase().startsWith(r.slice(0, -1));
+            return file.type.toLowerCase() === r;
+        });
+    }
+    autosize() {
+        const el = this.textarea().nativeElement;
+        const view = el.ownerDocument.defaultView;
+        if (!view)
+            return;
+        const style = view.getComputedStyle(el);
+        const line = parseFloat(style.lineHeight) || 20;
+        const pad = (parseFloat(style.paddingTop) || 0) + (parseFloat(style.paddingBottom) || 0);
+        const min = this.rows() * line + pad;
+        const max = this.maxRows() * line + pad;
+        el.style.height = 'auto';
+        const next = Math.min(Math.max(el.scrollHeight, min), max);
+        el.style.height = `${next}px`;
+        el.style.overflowY = el.scrollHeight > max ? 'auto' : 'hidden';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPromptBox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkPromptBox, isStandalone: true, selector: "mk-prompt-box", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", 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 }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, sendOnEnter: { classPropertyName: "sendOnEnter", publicName: "sendOnEnter", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", send: "send", stop: "stop" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "dragging.set(false)", "drop": "onDrop($event)" }, properties: { "class.mk-prompt-box--disabled": "disabled()", "class.mk-prompt-box--dragging": "dragging()" }, classAttribute: "mk-prompt-box" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (suggestions().length) {\n  <div class=\"mk-prompt-box__suggestions\" role=\"group\" [attr.aria-label]=\"i18n.chatSuggestions\">\n    @for (s of suggestions(); track s) {\n      <button type=\"button\" class=\"mk-prompt-box__suggestion\" [disabled]=\"disabled() || busy()\" (click)=\"onSuggestion(s)\">\n        {{ s }}\n      </button>\n    }\n  </div>\n}\n\n<div class=\"mk-prompt-box__frame\">\n  @if (files().length) {\n    <ul class=\"mk-prompt-box__files\" [attr.aria-label]=\"i18n.chatAttachments\">\n      @for (file of files(); track $index) {\n        <li>\n          <mk-chip size=\"sm\" removable [removeLabel]=\"i18n.chatRemoveAttachment\" (removed)=\"removeFile($index)\">\n            <mk-icon [name]=\"file.type.startsWith('image/') ? 'image' : 'file'\" size=\"sm\" />\n            {{ file.name }}\n            <span class=\"mk-prompt-box__size\">{{ formatSize(file.size) }}</span>\n          </mk-chip>\n        </li>\n      }\n    </ul>\n  }\n\n  <textarea\n    #textarea\n    class=\"mk-prompt-box__input\"\n    [id]=\"id\"\n    [value]=\"value()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [attr.maxlength]=\"maxLength() > 0 ? maxLength() : null\"\n    [attr.aria-label]=\"i18n.chatComposerLabel\"\n    rows=\"1\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (paste)=\"onPaste($event)\"\n  ></textarea>\n\n  <div class=\"mk-prompt-box__actions\">\n    @if (attachments()) {\n      <input #fileInput type=\"file\" class=\"mk-prompt-box__file-input\" multiple [accept]=\"accept()\" tabindex=\"-1\" aria-hidden=\"true\" (change)=\"onFilesPicked($event)\" />\n      <button\n        mkButton\n        type=\"button\"\n        variant=\"ghost\"\n        tone=\"neutral\"\n        size=\"sm\"\n        class=\"mk-prompt-box__attach\"\n        [disabled]=\"disabled()\"\n        [attr.aria-label]=\"i18n.chatAttach\"\n        (click)=\"openPicker()\"\n      >\n        <mk-icon name=\"paperclip\" />\n      </button>\n    }\n    @if (remaining() !== null) {\n      <span class=\"mk-prompt-box__counter\" [class.mk-prompt-box__counter--over]=\"remaining()! < 0\" aria-live=\"polite\">{{ remaining() }}</span>\n    }\n    <button\n      mkButton\n      type=\"button\"\n      size=\"sm\"\n      class=\"mk-prompt-box__send\"\n      [tone]=\"busy() ? 'neutral' : 'primary'\"\n      [disabled]=\"disabled() || (!busy() && !canSend())\"\n      [attr.aria-label]=\"busy() ? i18n.chatStop : i18n.chatSend\"\n      (click)=\"onPrimary()\"\n    >\n      <mk-icon [name]=\"busy() ? 'square' : 'send'\" />\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;color:var(--mk-text)}.mk-prompt-box__suggestions{display:flex;flex-wrap:wrap;gap:var(--mk-space-2);margin-bottom:var(--mk-space-2)}.mk-prompt-box__suggestion{padding:var(--mk-space-1) var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-full, 999px);background:var(--mk-surface);color:var(--mk-text);font:inherit;font-size:var(--mk-font-size-sm);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-prompt-box__suggestion:hover:not(:disabled){background:var(--mk-surface-2);border-color:var(--mk-border-strong, var(--mk-border))}.mk-prompt-box__suggestion:disabled{opacity:.5;cursor:default}.mk-prompt-box__suggestion:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-prompt-box__frame{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"files files\" \"input actions\";align-items:end;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-2) var(--mk-space-2) var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);background:var(--mk-surface);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-prompt-box__frame:focus-within{border-color:var(--mk-primary);box-shadow:0 0 0 var(--mk-focus-ring-width) var(--mk-focus-ring, var(--mk-primary-subtle))}:host(.mk-prompt-box--dragging) .mk-prompt-box__frame{border-style:dashed;border-color:var(--mk-primary);background:var(--mk-primary-subtle, var(--mk-surface-2))}:host(.mk-prompt-box--disabled) .mk-prompt-box__frame{opacity:.6}.mk-prompt-box__files{grid-area:files;display:flex;flex-wrap:wrap;gap:var(--mk-space-2);margin:0;padding:0;list-style:none}.mk-prompt-box__size{margin-inline-start:var(--mk-space-1);color:var(--mk-text-muted)}.mk-prompt-box__input{grid-area:input;width:100%;min-height:2.25rem;padding:var(--mk-space-2) 0;border:0;background:transparent;color:inherit;font:inherit;line-height:1.5;resize:none;outline:none}.mk-prompt-box__input::placeholder{color:var(--mk-text-muted)}.mk-prompt-box__actions{grid-area:actions;display:flex;align-items:center;gap:var(--mk-space-1)}.mk-prompt-box__file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.mk-prompt-box__counter{font-size:var(--mk-font-size-xs);color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-prompt-box__counter--over{color:var(--mk-danger)}@media(pointer:coarse){.mk-prompt-box__input{font-size:max(var(--mk-font-size-md),16px)}}\n"], dependencies: [{ kind: "component", type: MkButton, selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }, { kind: "component", type: MkChip, selector: "mk-chip", inputs: ["tone", "variant", "size", "selectable", "removable", "disabled", "removeLabel", "selected"], outputs: ["selectedChange", "removed"] }, { kind: "component", type: MkIcon, selector: "mk-icon", inputs: ["name", "size", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPromptBox, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-prompt-box', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkButton, MkChip, MkIcon], host: {
+                        class: 'mk-prompt-box',
+                        '[class.mk-prompt-box--disabled]': 'disabled()',
+                        '[class.mk-prompt-box--dragging]': 'dragging()',
+                        '(dragover)': 'onDragOver($event)',
+                        '(dragleave)': 'dragging.set(false)',
+                        '(drop)': 'onDrop($event)',
+                    }, template: "@if (suggestions().length) {\n  <div class=\"mk-prompt-box__suggestions\" role=\"group\" [attr.aria-label]=\"i18n.chatSuggestions\">\n    @for (s of suggestions(); track s) {\n      <button type=\"button\" class=\"mk-prompt-box__suggestion\" [disabled]=\"disabled() || busy()\" (click)=\"onSuggestion(s)\">\n        {{ s }}\n      </button>\n    }\n  </div>\n}\n\n<div class=\"mk-prompt-box__frame\">\n  @if (files().length) {\n    <ul class=\"mk-prompt-box__files\" [attr.aria-label]=\"i18n.chatAttachments\">\n      @for (file of files(); track $index) {\n        <li>\n          <mk-chip size=\"sm\" removable [removeLabel]=\"i18n.chatRemoveAttachment\" (removed)=\"removeFile($index)\">\n            <mk-icon [name]=\"file.type.startsWith('image/') ? 'image' : 'file'\" size=\"sm\" />\n            {{ file.name }}\n            <span class=\"mk-prompt-box__size\">{{ formatSize(file.size) }}</span>\n          </mk-chip>\n        </li>\n      }\n    </ul>\n  }\n\n  <textarea\n    #textarea\n    class=\"mk-prompt-box__input\"\n    [id]=\"id\"\n    [value]=\"value()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [attr.maxlength]=\"maxLength() > 0 ? maxLength() : null\"\n    [attr.aria-label]=\"i18n.chatComposerLabel\"\n    rows=\"1\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (paste)=\"onPaste($event)\"\n  ></textarea>\n\n  <div class=\"mk-prompt-box__actions\">\n    @if (attachments()) {\n      <input #fileInput type=\"file\" class=\"mk-prompt-box__file-input\" multiple [accept]=\"accept()\" tabindex=\"-1\" aria-hidden=\"true\" (change)=\"onFilesPicked($event)\" />\n      <button\n        mkButton\n        type=\"button\"\n        variant=\"ghost\"\n        tone=\"neutral\"\n        size=\"sm\"\n        class=\"mk-prompt-box__attach\"\n        [disabled]=\"disabled()\"\n        [attr.aria-label]=\"i18n.chatAttach\"\n        (click)=\"openPicker()\"\n      >\n        <mk-icon name=\"paperclip\" />\n      </button>\n    }\n    @if (remaining() !== null) {\n      <span class=\"mk-prompt-box__counter\" [class.mk-prompt-box__counter--over]=\"remaining()! < 0\" aria-live=\"polite\">{{ remaining() }}</span>\n    }\n    <button\n      mkButton\n      type=\"button\"\n      size=\"sm\"\n      class=\"mk-prompt-box__send\"\n      [tone]=\"busy() ? 'neutral' : 'primary'\"\n      [disabled]=\"disabled() || (!busy() && !canSend())\"\n      [attr.aria-label]=\"busy() ? i18n.chatStop : i18n.chatSend\"\n      (click)=\"onPrimary()\"\n    >\n      <mk-icon [name]=\"busy() ? 'square' : 'send'\" />\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;color:var(--mk-text)}.mk-prompt-box__suggestions{display:flex;flex-wrap:wrap;gap:var(--mk-space-2);margin-bottom:var(--mk-space-2)}.mk-prompt-box__suggestion{padding:var(--mk-space-1) var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-full, 999px);background:var(--mk-surface);color:var(--mk-text);font:inherit;font-size:var(--mk-font-size-sm);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-prompt-box__suggestion:hover:not(:disabled){background:var(--mk-surface-2);border-color:var(--mk-border-strong, var(--mk-border))}.mk-prompt-box__suggestion:disabled{opacity:.5;cursor:default}.mk-prompt-box__suggestion:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-prompt-box__frame{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"files files\" \"input actions\";align-items:end;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-2) var(--mk-space-2) var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);background:var(--mk-surface);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-prompt-box__frame:focus-within{border-color:var(--mk-primary);box-shadow:0 0 0 var(--mk-focus-ring-width) var(--mk-focus-ring, var(--mk-primary-subtle))}:host(.mk-prompt-box--dragging) .mk-prompt-box__frame{border-style:dashed;border-color:var(--mk-primary);background:var(--mk-primary-subtle, var(--mk-surface-2))}:host(.mk-prompt-box--disabled) .mk-prompt-box__frame{opacity:.6}.mk-prompt-box__files{grid-area:files;display:flex;flex-wrap:wrap;gap:var(--mk-space-2);margin:0;padding:0;list-style:none}.mk-prompt-box__size{margin-inline-start:var(--mk-space-1);color:var(--mk-text-muted)}.mk-prompt-box__input{grid-area:input;width:100%;min-height:2.25rem;padding:var(--mk-space-2) 0;border:0;background:transparent;color:inherit;font:inherit;line-height:1.5;resize:none;outline:none}.mk-prompt-box__input::placeholder{color:var(--mk-text-muted)}.mk-prompt-box__actions{grid-area:actions;display:flex;align-items:center;gap:var(--mk-space-1)}.mk-prompt-box__file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.mk-prompt-box__counter{font-size:var(--mk-font-size-xs);color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-prompt-box__counter--over{color:var(--mk-danger)}@media(pointer:coarse){.mk-prompt-box__input{font-size:max(var(--mk-font-size-md),16px)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], sendOnEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendOnEnter", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], send: [{ type: i0.Output, args: ["send"] }], stop: [{ type: i0.Output, args: ["stop"] }], textarea: [{ type: i0.ViewChild, args: ['textarea', { isSignal: true }] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+
+/**
+ * ChatMessage — one bubble: avatar, author and time, attachment previews,
+ * tool-call cards, the text (Markdown for assistants) with a streaming
+ * cursor, and copy / retry actions. `mk-chat` renders these for you; use it
+ * directly to build your own list.
+ */
+class MkChatMessageComponent {
+    i18n = inject(MK_I18N);
+    /** The message to render. */
+    message = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** Render on the "own" (end) side — `mk-chat` sets this from `ownRole`. */
+    own = input(false, { ...(ngDevMode ? { debugName: "own" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Render `text` as Markdown (assistants only; user text is always plain). */
+    markdown = input(true, { ...(ngDevMode ? { debugName: "markdown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showAvatar = input(true, { ...(ngDevMode ? { debugName: "showAvatar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showTimestamp = input(true, { ...(ngDevMode ? { debugName: "showTimestamp" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Offer a copy button on hover / focus. */
+    copyable = input(true, { ...(ngDevMode ? { debugName: "copyable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The retry button of a failed message was pressed. */
+    retry = output();
+    authorName = computed(() => {
+        const m = this.message();
+        if (m.author?.name)
+            return m.author.name;
+        return m.role === 'user' ? this.i18n.chatYou : m.role === 'assistant' ? this.i18n.chatAssistant : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "authorName" }] : /* istanbul ignore next */ []));
+    time = computed(() => {
+        const ts = this.message().timestamp;
+        if (ts == null)
+            return '';
+        const d = ts instanceof Date ? ts : new Date(ts);
+        if (Number.isNaN(d.getTime()))
+            return '';
+        return new Intl.DateTimeFormat(undefined, { hour: '2-digit', minute: '2-digit' }).format(d);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => {
+        const parts = [this.authorName(), this.time()].filter(Boolean);
+        return parts.join(', ') || null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    useMarkdown = computed(() => this.markdown() && this.message().role === 'assistant', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "useMarkdown" }] : /* istanbul ignore next */ []));
+    isImage(a) {
+        return !!a.url && !!a.type?.startsWith('image/');
+    }
+    formatSize(bytes) {
+        if (bytes == null)
+            return '';
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(0)} kB`;
+        return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+    }
+    toolIcon(tool) {
+        return tool.status === 'done' ? 'check' : tool.status === 'error' ? 'circle-alert' : 'loader';
+    }
+    toolStatus(tool) {
+        return tool.status === 'done'
+            ? this.i18n.chatToolDone
+            : tool.status === 'error'
+                ? this.i18n.chatToolError
+                : this.i18n.chatToolRunning;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkChatMessageComponent, isStandalone: true, selector: "mk-chat-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, own: { classPropertyName: "own", publicName: "own", isSignal: true, isRequired: false, transformFunction: null }, markdown: { classPropertyName: "markdown", publicName: "markdown", isSignal: true, isRequired: false, transformFunction: null }, showAvatar: { classPropertyName: "showAvatar", publicName: "showAvatar", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry" }, host: { attributes: { "role": "article" }, properties: { "class.mk-chat-message--own": "own()", "class.mk-chat-message--system": "message().role === \"system\"", "class.mk-chat-message--streaming": "message().streaming", "class.mk-chat-message--error": "!!message().error", "attr.aria-label": "ariaLabel()" }, classAttribute: "mk-chat-message" }, ngImport: i0, template: "@let m = message();\n@if (m.role === 'system') {\n  <div class=\"mk-chat-message__system\">{{ m.text }}</div>\n} @else {\n  @if (showAvatar()) {\n    <mk-avatar class=\"mk-chat-message__avatar\" [name]=\"authorName()\" [src]=\"m.author?.avatar\" size=\"sm\" />\n  }\n  <div class=\"mk-chat-message__body\">\n    <div class=\"mk-chat-message__meta\">\n      <span class=\"mk-chat-message__author\">{{ authorName() }}</span>\n      @if (showTimestamp() && time()) {\n        <span class=\"mk-chat-message__time\">{{ time() }}</span>\n      }\n    </div>\n\n    <div class=\"mk-chat-message__bubble\">\n      @if (m.tools?.length) {\n        <div class=\"mk-chat-message__tools\">\n          @for (tool of m.tools; track tool.id ?? $index) {\n            <details class=\"mk-chat-message__tool\" [class.mk-chat-message__tool--error]=\"tool.status === 'error'\">\n              <summary>\n                <mk-icon [name]=\"toolIcon(tool)\" size=\"sm\" [class.mk-chat-message__spin]=\"tool.status === 'running'\" />\n                <code>{{ tool.name }}</code>\n                @if (tool.summary) { <span class=\"mk-chat-message__tool-summary\">{{ tool.summary }}</span> }\n                <span class=\"mk-visually-hidden\">{{ toolStatus(tool) }}</span>\n              </summary>\n              @if (tool.input) { <pre class=\"mk-chat-message__tool-io\"><code>{{ tool.input }}</code></pre> }\n              @if (tool.output) { <pre class=\"mk-chat-message__tool-io\"><code>{{ tool.output }}</code></pre> }\n            </details>\n          }\n        </div>\n      }\n\n      @if (m.attachments?.length) {\n        <ul class=\"mk-chat-message__attachments\" [attr.aria-label]=\"i18n.chatAttachments\">\n          @for (a of m.attachments; track $index) {\n            <li>\n              @if (isImage(a)) {\n                <a [href]=\"a.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"mk-chat-message__image\">\n                  <img [src]=\"a.url\" [alt]=\"a.name\" loading=\"lazy\" />\n                </a>\n              } @else {\n                <a [href]=\"a.url || null\" [attr.download]=\"a.url ? a.name : null\" class=\"mk-chat-message__file\">\n                  <mk-icon name=\"file\" size=\"sm\" />\n                  <span>{{ a.name }}</span>\n                  @if (a.size != null) { <span class=\"mk-chat-message__file-size\">{{ formatSize(a.size) }}</span> }\n                </a>\n              }\n            </li>\n          }\n        </ul>\n      }\n\n      @if (m.text || m.streaming) {\n        <div class=\"mk-chat-message__text\">\n          @if (useMarkdown()) {\n            <mk-markdown [source]=\"m.text\" linkTarget=\"_blank\" />\n          } @else {\n            <p class=\"mk-chat-message__plain\">{{ m.text }}</p>\n          }\n          @if (m.streaming) {\n            <span class=\"mk-chat-message__cursor\" aria-hidden=\"true\"></span>\n            <span class=\"mk-visually-hidden\">{{ i18n.chatStreaming }}</span>\n          }\n        </div>\n      }\n    </div>\n\n    @if (m.error) {\n      <div class=\"mk-chat-message__error\" role=\"alert\">\n        <mk-icon name=\"circle-alert\" size=\"sm\" />\n        <span>{{ m.error }}</span>\n        <button mkButton type=\"button\" variant=\"ghost\" tone=\"danger\" size=\"sm\" (click)=\"retry.emit(m)\">\n          <mk-icon name=\"refresh-cw\" size=\"sm\" /> {{ i18n.chatRetry }}\n        </button>\n      </div>\n    }\n\n    @if (copyable() && m.text && !m.streaming) {\n      <div class=\"mk-chat-message__actions\">\n        <button mkButton type=\"button\" variant=\"ghost\" tone=\"neutral\" size=\"sm\" [mkCopyToClipboard]=\"m.text\" [attr.aria-label]=\"i18n.chatCopy\">\n          <mk-icon name=\"copy\" size=\"sm\" />\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:flex;gap:var(--mk-space-3);max-width:100%;color:var(--mk-text)}:host(.mk-chat-message--own){flex-direction:row-reverse}:host(.mk-chat-message--system){justify-content:center}.mk-chat-message__system{padding:var(--mk-space-1) var(--mk-space-3);border-radius:var(--mk-radius-full, 999px);background:var(--mk-surface-2);color:var(--mk-text-muted);font-size:var(--mk-font-size-xs);text-align:center}.mk-chat-message__avatar{flex:none;margin-top:var(--mk-space-5)}.mk-chat-message__body{display:flex;flex-direction:column;gap:var(--mk-space-1);min-width:0;max-width:min(100%,44rem)}:host(.mk-chat-message--own) .mk-chat-message__body{align-items:flex-end}.mk-chat-message__meta{display:flex;gap:var(--mk-space-2);align-items:baseline;padding:0 var(--mk-space-1);font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}.mk-chat-message__author{font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}.mk-chat-message__bubble{display:flex;flex-direction:column;gap:var(--mk-space-2);padding:var(--mk-space-3) var(--mk-space-4);border-radius:var(--mk-radius-lg);border-start-start-radius:var(--mk-radius-sm);background:var(--mk-surface-2);font-size:var(--mk-font-size-md);line-height:1.55;overflow-wrap:break-word}:host(.mk-chat-message--own) .mk-chat-message__bubble{border-start-start-radius:var(--mk-radius-lg);border-start-end-radius:var(--mk-radius-sm);background:var(--mk-primary);color:var(--mk-primary-contrast, #fff)}.mk-chat-message__plain{margin:0;color:inherit;white-space:pre-wrap}.mk-chat-message__text{position:relative}.mk-chat-message__text ::ng-deep .mk-markdown,.mk-chat-message__text ::ng-deep .mk-markdown p{color:inherit}.mk-chat-message__text ::ng-deep .mk-markdown>:first-child{margin-top:0}.mk-chat-message__text ::ng-deep .mk-markdown>:last-child{margin-bottom:0}.mk-chat-message__cursor{display:inline-block;width:.55em;height:1.1em;margin-inline-start:.15em;vertical-align:text-bottom;background:currentColor;border-radius:1px;animation:mk-chat-blink 1s steps(2,start) infinite}@keyframes mk-chat-blink{to{visibility:hidden}}.mk-chat-message__tools{display:flex;flex-direction:column;gap:var(--mk-space-1)}.mk-chat-message__tool{border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface);font-size:var(--mk-font-size-sm)}.mk-chat-message__tool summary{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-1) var(--mk-space-2);cursor:pointer;list-style:none}.mk-chat-message__tool summary::-webkit-details-marker{display:none}.mk-chat-message__tool code{font-family:var(--mk-font-mono);font-size:var(--mk-font-size-xs)}.mk-chat-message__tool--error{border-color:var(--mk-danger);color:var(--mk-danger)}.mk-chat-message__tool-summary{color:var(--mk-text-muted)}.mk-chat-message__tool-io{margin:0;padding:var(--mk-space-2);border-top:var(--mk-border-width) solid var(--mk-border);font-family:var(--mk-font-mono);font-size:var(--mk-font-size-xs);white-space:pre-wrap;overflow-wrap:break-word;max-height:16rem;overflow:auto}.mk-chat-message__spin{animation:mk-chat-spin 1s linear infinite}@keyframes mk-chat-spin{to{transform:rotate(360deg)}}.mk-chat-message__attachments{display:flex;flex-wrap:wrap;gap:var(--mk-space-2);margin:0;padding:0;list-style:none}.mk-chat-message__image{display:block;max-width:16rem;border-radius:var(--mk-radius-md);overflow:hidden}.mk-chat-message__image img{display:block;max-width:100%;height:auto}.mk-chat-message__file{display:inline-flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-1) var(--mk-space-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface);color:var(--mk-text);font-size:var(--mk-font-size-sm);text-decoration:none}.mk-chat-message__file-size{color:var(--mk-text-muted)}.mk-chat-message__error{display:flex;align-items:center;gap:var(--mk-space-2);padding:0 var(--mk-space-1);color:var(--mk-danger);font-size:var(--mk-font-size-sm)}.mk-chat-message__actions{display:flex;gap:var(--mk-space-1);opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}:host(:hover) .mk-chat-message__actions,:host(:focus-within) .mk-chat-message__actions{opacity:1}@media(prefers-reduced-motion:reduce){.mk-chat-message__cursor,.mk-chat-message__spin{animation:none}}@media(hover:none){.mk-chat-message__actions{opacity:1}}\n"], dependencies: [{ kind: "component", type: MkAvatar, selector: "mk-avatar", inputs: ["src", "name", "alt", "size", "shape", "status"] }, { kind: "component", type: MkButton, selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }, { kind: "directive", type: MkCopyToClipboard, selector: "[mkCopyToClipboard]", inputs: ["mkCopyToClipboard", "mkCopyFeedbackDuration"], outputs: ["copiedText", "copyFailed"], exportAs: ["mkCopyToClipboard"] }, { kind: "component", type: MkIcon, selector: "mk-icon", inputs: ["name", "size", "label"] }, { kind: "component", type: MkMarkdown, selector: "mk-markdown", inputs: ["source", "autolink", "linkTarget"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkChatMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-chat-message', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkAvatar, MkButton, MkCopyToClipboard, MkIcon, MkMarkdown], host: {
+                        class: 'mk-chat-message',
+                        role: 'article',
+                        '[class.mk-chat-message--own]': 'own()',
+                        '[class.mk-chat-message--system]': 'message().role === "system"',
+                        '[class.mk-chat-message--streaming]': 'message().streaming',
+                        '[class.mk-chat-message--error]': '!!message().error',
+                        '[attr.aria-label]': 'ariaLabel()',
+                    }, template: "@let m = message();\n@if (m.role === 'system') {\n  <div class=\"mk-chat-message__system\">{{ m.text }}</div>\n} @else {\n  @if (showAvatar()) {\n    <mk-avatar class=\"mk-chat-message__avatar\" [name]=\"authorName()\" [src]=\"m.author?.avatar\" size=\"sm\" />\n  }\n  <div class=\"mk-chat-message__body\">\n    <div class=\"mk-chat-message__meta\">\n      <span class=\"mk-chat-message__author\">{{ authorName() }}</span>\n      @if (showTimestamp() && time()) {\n        <span class=\"mk-chat-message__time\">{{ time() }}</span>\n      }\n    </div>\n\n    <div class=\"mk-chat-message__bubble\">\n      @if (m.tools?.length) {\n        <div class=\"mk-chat-message__tools\">\n          @for (tool of m.tools; track tool.id ?? $index) {\n            <details class=\"mk-chat-message__tool\" [class.mk-chat-message__tool--error]=\"tool.status === 'error'\">\n              <summary>\n                <mk-icon [name]=\"toolIcon(tool)\" size=\"sm\" [class.mk-chat-message__spin]=\"tool.status === 'running'\" />\n                <code>{{ tool.name }}</code>\n                @if (tool.summary) { <span class=\"mk-chat-message__tool-summary\">{{ tool.summary }}</span> }\n                <span class=\"mk-visually-hidden\">{{ toolStatus(tool) }}</span>\n              </summary>\n              @if (tool.input) { <pre class=\"mk-chat-message__tool-io\"><code>{{ tool.input }}</code></pre> }\n              @if (tool.output) { <pre class=\"mk-chat-message__tool-io\"><code>{{ tool.output }}</code></pre> }\n            </details>\n          }\n        </div>\n      }\n\n      @if (m.attachments?.length) {\n        <ul class=\"mk-chat-message__attachments\" [attr.aria-label]=\"i18n.chatAttachments\">\n          @for (a of m.attachments; track $index) {\n            <li>\n              @if (isImage(a)) {\n                <a [href]=\"a.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"mk-chat-message__image\">\n                  <img [src]=\"a.url\" [alt]=\"a.name\" loading=\"lazy\" />\n                </a>\n              } @else {\n                <a [href]=\"a.url || null\" [attr.download]=\"a.url ? a.name : null\" class=\"mk-chat-message__file\">\n                  <mk-icon name=\"file\" size=\"sm\" />\n                  <span>{{ a.name }}</span>\n                  @if (a.size != null) { <span class=\"mk-chat-message__file-size\">{{ formatSize(a.size) }}</span> }\n                </a>\n              }\n            </li>\n          }\n        </ul>\n      }\n\n      @if (m.text || m.streaming) {\n        <div class=\"mk-chat-message__text\">\n          @if (useMarkdown()) {\n            <mk-markdown [source]=\"m.text\" linkTarget=\"_blank\" />\n          } @else {\n            <p class=\"mk-chat-message__plain\">{{ m.text }}</p>\n          }\n          @if (m.streaming) {\n            <span class=\"mk-chat-message__cursor\" aria-hidden=\"true\"></span>\n            <span class=\"mk-visually-hidden\">{{ i18n.chatStreaming }}</span>\n          }\n        </div>\n      }\n    </div>\n\n    @if (m.error) {\n      <div class=\"mk-chat-message__error\" role=\"alert\">\n        <mk-icon name=\"circle-alert\" size=\"sm\" />\n        <span>{{ m.error }}</span>\n        <button mkButton type=\"button\" variant=\"ghost\" tone=\"danger\" size=\"sm\" (click)=\"retry.emit(m)\">\n          <mk-icon name=\"refresh-cw\" size=\"sm\" /> {{ i18n.chatRetry }}\n        </button>\n      </div>\n    }\n\n    @if (copyable() && m.text && !m.streaming) {\n      <div class=\"mk-chat-message__actions\">\n        <button mkButton type=\"button\" variant=\"ghost\" tone=\"neutral\" size=\"sm\" [mkCopyToClipboard]=\"m.text\" [attr.aria-label]=\"i18n.chatCopy\">\n          <mk-icon name=\"copy\" size=\"sm\" />\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:flex;gap:var(--mk-space-3);max-width:100%;color:var(--mk-text)}:host(.mk-chat-message--own){flex-direction:row-reverse}:host(.mk-chat-message--system){justify-content:center}.mk-chat-message__system{padding:var(--mk-space-1) var(--mk-space-3);border-radius:var(--mk-radius-full, 999px);background:var(--mk-surface-2);color:var(--mk-text-muted);font-size:var(--mk-font-size-xs);text-align:center}.mk-chat-message__avatar{flex:none;margin-top:var(--mk-space-5)}.mk-chat-message__body{display:flex;flex-direction:column;gap:var(--mk-space-1);min-width:0;max-width:min(100%,44rem)}:host(.mk-chat-message--own) .mk-chat-message__body{align-items:flex-end}.mk-chat-message__meta{display:flex;gap:var(--mk-space-2);align-items:baseline;padding:0 var(--mk-space-1);font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}.mk-chat-message__author{font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}.mk-chat-message__bubble{display:flex;flex-direction:column;gap:var(--mk-space-2);padding:var(--mk-space-3) var(--mk-space-4);border-radius:var(--mk-radius-lg);border-start-start-radius:var(--mk-radius-sm);background:var(--mk-surface-2);font-size:var(--mk-font-size-md);line-height:1.55;overflow-wrap:break-word}:host(.mk-chat-message--own) .mk-chat-message__bubble{border-start-start-radius:var(--mk-radius-lg);border-start-end-radius:var(--mk-radius-sm);background:var(--mk-primary);color:var(--mk-primary-contrast, #fff)}.mk-chat-message__plain{margin:0;color:inherit;white-space:pre-wrap}.mk-chat-message__text{position:relative}.mk-chat-message__text ::ng-deep .mk-markdown,.mk-chat-message__text ::ng-deep .mk-markdown p{color:inherit}.mk-chat-message__text ::ng-deep .mk-markdown>:first-child{margin-top:0}.mk-chat-message__text ::ng-deep .mk-markdown>:last-child{margin-bottom:0}.mk-chat-message__cursor{display:inline-block;width:.55em;height:1.1em;margin-inline-start:.15em;vertical-align:text-bottom;background:currentColor;border-radius:1px;animation:mk-chat-blink 1s steps(2,start) infinite}@keyframes mk-chat-blink{to{visibility:hidden}}.mk-chat-message__tools{display:flex;flex-direction:column;gap:var(--mk-space-1)}.mk-chat-message__tool{border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface);font-size:var(--mk-font-size-sm)}.mk-chat-message__tool summary{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-1) var(--mk-space-2);cursor:pointer;list-style:none}.mk-chat-message__tool summary::-webkit-details-marker{display:none}.mk-chat-message__tool code{font-family:var(--mk-font-mono);font-size:var(--mk-font-size-xs)}.mk-chat-message__tool--error{border-color:var(--mk-danger);color:var(--mk-danger)}.mk-chat-message__tool-summary{color:var(--mk-text-muted)}.mk-chat-message__tool-io{margin:0;padding:var(--mk-space-2);border-top:var(--mk-border-width) solid var(--mk-border);font-family:var(--mk-font-mono);font-size:var(--mk-font-size-xs);white-space:pre-wrap;overflow-wrap:break-word;max-height:16rem;overflow:auto}.mk-chat-message__spin{animation:mk-chat-spin 1s linear infinite}@keyframes mk-chat-spin{to{transform:rotate(360deg)}}.mk-chat-message__attachments{display:flex;flex-wrap:wrap;gap:var(--mk-space-2);margin:0;padding:0;list-style:none}.mk-chat-message__image{display:block;max-width:16rem;border-radius:var(--mk-radius-md);overflow:hidden}.mk-chat-message__image img{display:block;max-width:100%;height:auto}.mk-chat-message__file{display:inline-flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-1) var(--mk-space-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface);color:var(--mk-text);font-size:var(--mk-font-size-sm);text-decoration:none}.mk-chat-message__file-size{color:var(--mk-text-muted)}.mk-chat-message__error{display:flex;align-items:center;gap:var(--mk-space-2);padding:0 var(--mk-space-1);color:var(--mk-danger);font-size:var(--mk-font-size-sm)}.mk-chat-message__actions{display:flex;gap:var(--mk-space-1);opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}:host(:hover) .mk-chat-message__actions,:host(:focus-within) .mk-chat-message__actions{opacity:1}@media(prefers-reduced-motion:reduce){.mk-chat-message__cursor,.mk-chat-message__spin{animation:none}}@media(hover:none){.mk-chat-message__actions{opacity:1}}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], own: [{ type: i0.Input, args: [{ isSignal: true, alias: "own", required: false }] }], markdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "markdown", required: false }] }], showAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatar", required: false }] }], showTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamp", required: false }] }], copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }], retry: [{ type: i0.Output, args: ["retry"] }] } });
+
+/**
+ * Custom message rendering for `mk-chat`:
+ *
+ * ```html
+ * <mk-chat [messages]="messages()">
+ *   <ng-template mkChatMessageDef let-message let-own="own">
+ *     <my-bubble [message]="message" [mine]="own" />
+ *   </ng-template>
+ * </mk-chat>
+ * ```
+ */
+class MkChatMessageDef {
+    template = inject((TemplateRef));
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkChatMessageDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MkChatMessageDef, isStandalone: true, selector: "ng-template[mkChatMessageDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkChatMessageDef, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[mkChatMessageDef]' }]
+        }] });
+/**
+ * Chat — a conversation: a scrolling, screen-reader-announced log of
+ * `mk-chat-message` bubbles that stays pinned to the newest message while
+ * text streams in (with a *jump to latest* button once the reader scrolls
+ * up), a typing indicator, and an `mk-prompt-box` composer.
+ *
+ * The component is presentational: hand it `messages` (replace the array or
+ * a message object to update — signals compare by reference) and react to
+ * `(send)` / `(stop)` / `(retry)` with your own transport.
+ *
+ * ```html
+ * <mk-chat
+ *   [messages]="messages()"
+ *   [busy]="generating()"
+ *   [typing]="peerTyping()"
+ *   attachments
+ *   [suggestions]="starters"
+ *   (send)="ask($event)"
+ *   (stop)="abort()"
+ *   (retry)="resend($event)"
+ *   style="height: 32rem"
+ * >
+ *   <div mkChatHeader>…title, model picker…</div>
+ *   <div mkChatEmpty>…first-run hint…</div>
+ * </mk-chat>
+ * ```
+ *
+ * Slots: `[mkChatHeader]`, `[mkChatEmpty]`, `[mkChatFooter]` (under the composer).
+ */
+class MkChat {
+    i18n = inject(MK_I18N);
+    /** The conversation, oldest first. */
+    messages = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** Which role renders on the "own" side (default `user`). */
+    ownRole = input('user', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownRole" }] : /* istanbul ignore next */ []));
+    /** Render assistant text as Markdown. */
+    markdown = input(true, { ...(ngDevMode ? { debugName: "markdown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showAvatars = input(true, { ...(ngDevMode ? { debugName: "showAvatars" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showTimestamps = input(true, { ...(ngDevMode ? { debugName: "showTimestamps" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Someone else is typing (shows the dots indicator). */
+    typing = input(false, { ...(ngDevMode ? { debugName: "typing" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** A reply is being generated: composer shows *stop*. */
+    busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Disable the composer. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Hide the composer entirely (read-only transcript). */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    placeholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Allow attachments in the composer. */
+    attachments = input(false, { ...(ngDevMode ? { debugName: "attachments" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    accept = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    maxFiles = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []));
+    maxLength = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    /** Quick replies above the composer; each click sends its text. */
+    suggestions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    /** Text shown when there are no messages (or project `[mkChatEmpty]`). */
+    emptyMessage = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /** Keep the log pinned to the newest message while the reader is at the bottom. */
+    autoScroll = input(true, { ...(ngDevMode ? { debugName: "autoScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name of the log region. */
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    send = output();
+    stop = output();
+    retry = output();
+    messageDef = contentChild(MkChatMessageDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messageDef" }] : /* istanbul ignore next */ []));
+    log = viewChild.required('log', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "log" }] : /* istanbul ignore next */ []));
+    composer = viewChild(MkPromptBox, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "composer" }] : /* istanbul ignore next */ []));
+    /** The reader is (near) the bottom of the log. */
+    atBottom = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atBottom" }] : /* istanbul ignore next */ []));
+    /** Messages that arrived while scrolled up. */
+    unseen = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unseen" }] : /* istanbul ignore next */ []));
+    lastCount = 0;
+    resolvedEmpty = computed(() => this.emptyMessage() ?? this.i18n.chatEmpty, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedEmpty" }] : /* istanbul ignore next */ []));
+    resolvedPlaceholder = computed(() => this.placeholder() ?? this.i18n.chatPlaceholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Pin to the bottom on new content while the reader is there.
+        afterRenderEffect(() => {
+            const list = this.messages();
+            const last = list[list.length - 1];
+            // Track text growth of a streaming message as well as new messages.
+            void last?.text.length;
+            void this.typing();
+            const count = list.length;
+            untracked(() => {
+                const grew = count > this.lastCount;
+                this.lastCount = count;
+                if (!this.autoScroll())
+                    return;
+                if (this.atBottom())
+                    this.scrollToBottom();
+                else if (grew)
+                    this.unseen.update((n) => n + 1);
+            });
+        });
+    }
+    /** Scroll the log to the newest message. */
+    scrollToBottom() {
+        const el = this.log().nativeElement;
+        el.scrollTop = el.scrollHeight;
+        this.atBottom.set(true);
+        this.unseen.set(0);
+    }
+    /** Focus the composer. */
+    focus() {
+        this.composer()?.focus();
+    }
+    onScroll() {
+        const el = this.log().nativeElement;
+        const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
+        const near = distance < 48;
+        this.atBottom.set(near);
+        if (near)
+            this.unseen.set(0);
+    }
+    isOwn(m) {
+        return m.role === this.ownRole();
+    }
+    trackMessage = (_, m) => m.id;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkChat, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkChat, isStandalone: true, selector: "mk-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, ownRole: { classPropertyName: "ownRole", publicName: "ownRole", isSignal: true, isRequired: false, transformFunction: null }, markdown: { classPropertyName: "markdown", publicName: "markdown", isSignal: true, isRequired: false, transformFunction: null }, showAvatars: { classPropertyName: "showAvatars", publicName: "showAvatars", isSignal: true, isRequired: false, transformFunction: null }, showTimestamps: { classPropertyName: "showTimestamps", publicName: "showTimestamps", isSignal: true, isRequired: false, transformFunction: null }, typing: { classPropertyName: "typing", publicName: "typing", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { send: "send", stop: "stop", retry: "retry" }, host: { classAttribute: "mk-chat" }, queries: [{ propertyName: "messageDef", first: true, predicate: MkChatMessageDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "log", first: true, predicate: ["log"], descendants: true, isSignal: true }, { propertyName: "composer", first: true, predicate: MkPromptBox, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mk-chat__header\">\n  <ng-content select=\"[mkChatHeader]\" />\n</div>\n\n<div class=\"mk-chat__viewport\">\n  <div\n    #log\n    class=\"mk-chat__log\"\n    role=\"log\"\n    aria-live=\"polite\"\n    aria-relevant=\"additions text\"\n    [attr.aria-label]=\"ariaLabel() ?? i18n.chatLabel\"\n    (scroll)=\"onScroll()\"\n  >\n    @if (!messages().length) {\n      <div class=\"mk-chat__empty\">\n        <ng-content select=\"[mkChatEmpty]\">\n          <mk-icon name=\"message-circle\" size=\"lg\" />\n          <p>{{ resolvedEmpty() }}</p>\n        </ng-content>\n      </div>\n    }\n    @for (m of messages(); track m.id; let i = $index) {\n      @if (messageDef(); as def) {\n        <ng-container *ngTemplateOutlet=\"def.template; context: { $implicit: m, own: isOwn(m), index: i }\" />\n      } @else {\n        <mk-chat-message\n          [message]=\"m\"\n          [own]=\"isOwn(m)\"\n          [markdown]=\"markdown()\"\n          [showAvatar]=\"showAvatars()\"\n          [showTimestamp]=\"showTimestamps()\"\n          (retry)=\"retry.emit($event)\"\n        />\n      }\n    }\n    @if (typing()) {\n      <div class=\"mk-chat__typing\" [attr.aria-label]=\"i18n.chatTyping\" role=\"status\">\n        <span></span><span></span><span></span>\n      </div>\n    }\n  </div>\n\n  @if (!atBottom()) {\n    <button mkButton type=\"button\" size=\"sm\" variant=\"outline\" tone=\"neutral\" class=\"mk-chat__jump\" (click)=\"scrollToBottom()\">\n      <mk-icon name=\"arrow-down\" size=\"sm\" />\n      {{ i18n.chatJumpToLatest }}\n      @if (unseen() > 0) { <span class=\"mk-chat__badge\">{{ unseen() }}</span> }\n    </button>\n  }\n</div>\n\n@if (!readonly()) {\n  <div class=\"mk-chat__composer\">\n    <mk-prompt-box\n      [placeholder]=\"resolvedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [busy]=\"busy()\"\n      [attachments]=\"attachments()\"\n      [accept]=\"accept()\"\n      [maxFiles]=\"maxFiles()\"\n      [maxLength]=\"maxLength()\"\n      [suggestions]=\"suggestions()\"\n      (send)=\"send.emit($event)\"\n      (stop)=\"stop.emit()\"\n    />\n    <div class=\"mk-chat__footer\">\n      <ng-content select=\"[mkChatFooter]\" />\n    </div>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;min-height:0;height:100%;color:var(--mk-text);background:var(--mk-bg)}.mk-chat__header:empty,.mk-chat__footer:empty{display:none}.mk-chat__header{flex:none;padding:var(--mk-space-3) var(--mk-space-4);border-bottom:var(--mk-border-width) solid var(--mk-border)}.mk-chat__viewport{position:relative;flex:1 1 auto;min-height:0;display:flex}.mk-chat__log{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--mk-space-4);padding:var(--mk-space-4);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){.mk-chat__log{scroll-behavior:auto}}.mk-chat__empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:var(--mk-space-2);color:var(--mk-text-muted);text-align:center}.mk-chat__empty p{margin:0}.mk-chat__typing{display:inline-flex;gap:4px;align-self:flex-start;padding:var(--mk-space-3) var(--mk-space-4);border-radius:var(--mk-radius-lg);background:var(--mk-surface-2)}.mk-chat__typing span{width:6px;height:6px;border-radius:50%;background:var(--mk-text-muted);animation:mk-chat-dot 1.2s infinite ease-in-out}.mk-chat__typing span:nth-child(2){animation-delay:.15s}.mk-chat__typing span:nth-child(3){animation-delay:.3s}@keyframes mk-chat-dot{0%,60%,to{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}@media(prefers-reduced-motion:reduce){.mk-chat__typing span{animation:none}}.mk-chat__jump{position:absolute;bottom:var(--mk-space-3);left:50%;transform:translate(-50%);box-shadow:var(--mk-shadow-md)}.mk-chat__badge{min-width:1.25em;padding:0 .4em;border-radius:var(--mk-radius-full, 999px);background:var(--mk-primary);color:var(--mk-primary-contrast, #fff);font-size:var(--mk-font-size-xs);text-align:center}.mk-chat__composer{flex:none;padding:var(--mk-space-3) var(--mk-space-4) var(--mk-space-4);border-top:var(--mk-border-width) solid var(--mk-border);background:var(--mk-bg)}.mk-chat__footer{margin-top:var(--mk-space-2);font-size:var(--mk-font-size-xs);color:var(--mk-text-muted);text-align:center}\n"], dependencies: [{ kind: "component", type: MkButton, selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }, { kind: "component", type: MkChatMessageComponent, selector: "mk-chat-message", inputs: ["message", "own", "markdown", "showAvatar", "showTimestamp", "copyable"], outputs: ["retry"] }, { kind: "component", type: MkIcon, selector: "mk-icon", inputs: ["name", "size", "label"] }, { kind: "component", type: MkPromptBox, selector: "mk-prompt-box", inputs: ["value", "placeholder", "disabled", "busy", "attachments", "accept", "maxFiles", "maxLength", "rows", "maxRows", "sendOnEnter", "suggestions", "autofocus"], outputs: ["valueChange", "send", "stop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkChat, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-chat', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkButton, MkChatMessageComponent, MkIcon, MkPromptBox, NgTemplateOutlet], host: { class: 'mk-chat' }, template: "<div class=\"mk-chat__header\">\n  <ng-content select=\"[mkChatHeader]\" />\n</div>\n\n<div class=\"mk-chat__viewport\">\n  <div\n    #log\n    class=\"mk-chat__log\"\n    role=\"log\"\n    aria-live=\"polite\"\n    aria-relevant=\"additions text\"\n    [attr.aria-label]=\"ariaLabel() ?? i18n.chatLabel\"\n    (scroll)=\"onScroll()\"\n  >\n    @if (!messages().length) {\n      <div class=\"mk-chat__empty\">\n        <ng-content select=\"[mkChatEmpty]\">\n          <mk-icon name=\"message-circle\" size=\"lg\" />\n          <p>{{ resolvedEmpty() }}</p>\n        </ng-content>\n      </div>\n    }\n    @for (m of messages(); track m.id; let i = $index) {\n      @if (messageDef(); as def) {\n        <ng-container *ngTemplateOutlet=\"def.template; context: { $implicit: m, own: isOwn(m), index: i }\" />\n      } @else {\n        <mk-chat-message\n          [message]=\"m\"\n          [own]=\"isOwn(m)\"\n          [markdown]=\"markdown()\"\n          [showAvatar]=\"showAvatars()\"\n          [showTimestamp]=\"showTimestamps()\"\n          (retry)=\"retry.emit($event)\"\n        />\n      }\n    }\n    @if (typing()) {\n      <div class=\"mk-chat__typing\" [attr.aria-label]=\"i18n.chatTyping\" role=\"status\">\n        <span></span><span></span><span></span>\n      </div>\n    }\n  </div>\n\n  @if (!atBottom()) {\n    <button mkButton type=\"button\" size=\"sm\" variant=\"outline\" tone=\"neutral\" class=\"mk-chat__jump\" (click)=\"scrollToBottom()\">\n      <mk-icon name=\"arrow-down\" size=\"sm\" />\n      {{ i18n.chatJumpToLatest }}\n      @if (unseen() > 0) { <span class=\"mk-chat__badge\">{{ unseen() }}</span> }\n    </button>\n  }\n</div>\n\n@if (!readonly()) {\n  <div class=\"mk-chat__composer\">\n    <mk-prompt-box\n      [placeholder]=\"resolvedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [busy]=\"busy()\"\n      [attachments]=\"attachments()\"\n      [accept]=\"accept()\"\n      [maxFiles]=\"maxFiles()\"\n      [maxLength]=\"maxLength()\"\n      [suggestions]=\"suggestions()\"\n      (send)=\"send.emit($event)\"\n      (stop)=\"stop.emit()\"\n    />\n    <div class=\"mk-chat__footer\">\n      <ng-content select=\"[mkChatFooter]\" />\n    </div>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;min-height:0;height:100%;color:var(--mk-text);background:var(--mk-bg)}.mk-chat__header:empty,.mk-chat__footer:empty{display:none}.mk-chat__header{flex:none;padding:var(--mk-space-3) var(--mk-space-4);border-bottom:var(--mk-border-width) solid var(--mk-border)}.mk-chat__viewport{position:relative;flex:1 1 auto;min-height:0;display:flex}.mk-chat__log{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--mk-space-4);padding:var(--mk-space-4);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){.mk-chat__log{scroll-behavior:auto}}.mk-chat__empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:var(--mk-space-2);color:var(--mk-text-muted);text-align:center}.mk-chat__empty p{margin:0}.mk-chat__typing{display:inline-flex;gap:4px;align-self:flex-start;padding:var(--mk-space-3) var(--mk-space-4);border-radius:var(--mk-radius-lg);background:var(--mk-surface-2)}.mk-chat__typing span{width:6px;height:6px;border-radius:50%;background:var(--mk-text-muted);animation:mk-chat-dot 1.2s infinite ease-in-out}.mk-chat__typing span:nth-child(2){animation-delay:.15s}.mk-chat__typing span:nth-child(3){animation-delay:.3s}@keyframes mk-chat-dot{0%,60%,to{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}@media(prefers-reduced-motion:reduce){.mk-chat__typing span{animation:none}}.mk-chat__jump{position:absolute;bottom:var(--mk-space-3);left:50%;transform:translate(-50%);box-shadow:var(--mk-shadow-md)}.mk-chat__badge{min-width:1.25em;padding:0 .4em;border-radius:var(--mk-radius-full, 999px);background:var(--mk-primary);color:var(--mk-primary-contrast, #fff);font-size:var(--mk-font-size-xs);text-align:center}.mk-chat__composer{flex:none;padding:var(--mk-space-3) var(--mk-space-4) var(--mk-space-4);border-top:var(--mk-border-width) solid var(--mk-border);background:var(--mk-bg)}.mk-chat__footer{margin-top:var(--mk-space-2);font-size:var(--mk-font-size-xs);color:var(--mk-text-muted);text-align:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], ownRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "ownRole", required: false }] }], markdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "markdown", required: false }] }], showAvatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatars", required: false }] }], showTimestamps: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamps", required: false }] }], typing: [{ type: i0.Input, args: [{ isSignal: true, alias: "typing", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], send: [{ type: i0.Output, args: ["send"] }], stop: [{ type: i0.Output, args: ["stop"] }], retry: [{ type: i0.Output, args: ["retry"] }], messageDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MkChatMessageDef), { isSignal: true }] }], log: [{ type: i0.ViewChild, args: ['log', { isSignal: true }] }], composer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MkPromptBox), { isSignal: true }] }] } });
+
+/**
+ * @mk-kit/ui/chat — conversational UI: `mk-chat` (log + composer),
+ * `mk-chat-message` and `mk-prompt-box`.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkChat, MkChatMessageComponent, MkChatMessageDef, MkPromptBox };
+//# sourceMappingURL=mk-kit-ui-chat.mjs.map