@life-cockpit/angular-ui-kit 2.1.0 → 2.2.1

package/fesm2022/life-cockpit-angular-ui-kit.mjs

@@ -11304,6 +11304,12 @@ class ChatComponent {
      *   messaging apps. Still scrolls to reveal the top once they overflow.
      */
     messageAnchor = input('top', ...(ngDevMode ? [{ debugName: "messageAnchor" }] : /* istanbul ignore next */ []));
+    /**
+     * Width of the message thread and composer.
+     * - `'full'` (default): messages span the full available width.
+     * - `'narrow'`: a centered, readable column (~46rem) like a document-style chat.
+     */
+    contentWidth = input('full', ...(ngDevMode ? [{ debugName: "contentWidth" }] : /* istanbul ignore next */ []));
     /** Disable the input. */
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** Show avatars next to messages. */
@@ -11340,6 +11346,9 @@ class ChatComponent {
     attachmentCounter = 0;
     scrollContainer;
     fileInput;
+    composerInput;
+    /** Upper bound for the auto-growing composer before it starts scrolling (px). */
+    static INPUT_MAX_HEIGHT = 192;
     formattedMessages = computed(() => this.messages().map(m => ({
         ...m,
         timestamp: m.timestamp instanceof Date ? m.timestamp : m.timestamp ? new Date(m.timestamp) : undefined,
@@ -11351,7 +11360,14 @@ class ChatComponent {
         }
     }
     onInput(event) {
-        this.inputValue.set(event.target.value);
+        const el = event.target;
+        this.inputValue.set(el.value);
+        this.autoGrow(el);
+    }
+    /** Resize the textarea to fit its content so the composer hugs the text. */
+    autoGrow(el) {
+        el.style.height = 'auto';
+        el.style.height = `${Math.min(el.scrollHeight, ChatComponent.INPUT_MAX_HEIGHT)}px`;
     }
     onKeydown(event) {
         if (event.key === 'Enter' && !event.shiftKey) {
@@ -11371,6 +11387,10 @@ class ChatComponent {
         this.inputValue.set('');
         this.pendingAttachments.set([]);
         this.shouldScroll = true;
+        // Collapse the auto-grown textarea back to a single row.
+        const el = this.composerInput?.nativeElement;
+        if (el)
+            el.style.height = 'auto';
     }
     openFilePicker() {
         if (this.disabled() || !this.allowFileUpload())
@@ -11471,12 +11491,12 @@ class ChatComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ChatComponent, isStandalone: true, selector: "lc-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isStreaming: { classPropertyName: "isStreaming", publicName: "isStreaming", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, messageAnchor: { classPropertyName: "messageAnchor", publicName: "messageAnchor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, renderMarkdown: { classPropertyName: "renderMarkdown", publicName: "renderMarkdown", isSignal: true, isRequired: false, transformFunction: null }, allowFileUpload: { classPropertyName: "allowFileUpload", publicName: "allowFileUpload", 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 }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSend: "messageSend", fileAttach: "fileAttach" }, queries: [{ propertyName: "messageTemplate", first: true, predicate: ["messageTemplate"], descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"lc-chat\" [class.lc-chat--borderless]=\"!bordered()\">\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    class=\"lc-chat__messages\"\n    [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n    #scrollContainer\n  >\n    @for (msg of formattedMessages(); track msg.id) {\n      <div\n        class=\"lc-chat__message\"\n        [class.lc-chat__message--user]=\"msg.role === 'user'\"\n        [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n        [class.lc-chat__message--system]=\"msg.role === 'system'\"\n      >\n        @if (showAvatars() && msg.role !== 'system') {\n          <div class=\"lc-chat__avatar\">\n            @if (msg.avatar) {\n              <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n            } @else {\n              <span class=\"lc-chat__avatar-fallback\" [class.lc-chat__avatar-fallback--agent]=\"msg.role === 'agent'\">\n                {{ (msg.name || msg.role).charAt(0).toUpperCase() }}\n              </span>\n            }\n          </div>\n        }\n\n        <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n          @if (msg.name && msg.role !== 'user') {\n            <div class=\"lc-chat__name\">{{ msg.name }}</div>\n          }\n          <div class=\"lc-chat__content\">\n            @if (messageTemplate) {\n              <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n            } @else if (shouldRenderMarkdown(msg.role)) {\n              <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n            } @else {\n              {{ msg.content }}\n            }\n            <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n          </div>\n          @if (msg.attachments?.length) {\n            <div class=\"lc-chat__attachments\">\n              @for (att of msg.attachments; track att.id) {\n                @if (isImage(att) && att.url) {\n                  <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n                    <img [src]=\"att.url\" [alt]=\"att.name\" />\n                  </a>\n                } @else {\n                  <a\n                    class=\"lc-chat__attachment lc-chat__attachment--file\"\n                    [href]=\"att.url || null\"\n                    [attr.download]=\"att.url ? att.name : null\"\n                    target=\"_blank\"\n                    rel=\"noopener\"\n                  >\n                    <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                      <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                      <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                    </svg>\n                    <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n                    @if (att.size) {\n                      <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n                    }\n                  </a>\n                }\n              }\n            </div>\n          }\n          @if (showTimestamps() && msg.timestamp) {\n            <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n      <div class=\"lc-chat__message lc-chat__message--agent\">\n        @if (showAvatars()) {\n          <div class=\"lc-chat__avatar\">\n            <span class=\"lc-chat__avatar-fallback lc-chat__avatar-fallback--agent\">A</span>\n          </div>\n        }\n        <div class=\"lc-chat__bubble\">\n          <div class=\"lc-chat__typing\">\n            <span></span><span></span><span></span>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    @if (allowFileUpload() && pendingAttachments().length) {\n      <div class=\"lc-chat__pending-attachments\">\n        @for (att of pendingAttachments(); track att.id) {\n          <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n            @if (isImage(att) && att.url) {\n              <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n            } @else {\n              <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n              </svg>\n            }\n            <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n            @if (att.size) {\n              <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n            }\n            <button\n              type=\"button\"\n              class=\"lc-chat__pending-remove\"\n              (click)=\"removeAttachment(att.id)\"\n              [attr.aria-label]=\"'Entfernen: ' + att.name\"\n            >\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n              </svg>\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <div class=\"lc-chat__input-row\">\n      @if (allowFileUpload()) {\n        <input\n          #fileInput\n          type=\"file\"\n          class=\"lc-chat__file-input\"\n          [accept]=\"accept() || null\"\n          [multiple]=\"multiple()\"\n          (change)=\"onFilesSelected($event)\"\n        />\n        <button\n          type=\"button\"\n          class=\"lc-chat__attach-btn\"\n          [disabled]=\"disabled()\"\n          (click)=\"openFilePicker()\"\n          aria-label=\"Datei anh\u00E4ngen\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n      }\n      <textarea\n        class=\"lc-chat__input\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"inputValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        rows=\"1\"\n      ></textarea>\n      <button\n        class=\"lc-chat__send-btn\"\n        [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n        (click)=\"send()\"\n        aria-label=\"Send\"\n      >\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n          <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n        </svg>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".lc-chat{display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);background-image:var(--gradient-surface);font-family:var(--typography-font-family, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-divider);background:var(--color-surface-2)}.lc-chat__title{font-size:.875rem;font-weight:600;color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:.6875rem;padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:1rem;font-weight:500;animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.lc-chat__messages--anchor-bottom>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{display:flex;align-items:flex-start;gap:.75rem}.lc-chat__message--user{align-self:flex-end;flex-direction:row-reverse;max-width:80%}.lc-chat__message--agent{align-self:stretch;max-width:100%}.lc-chat__message--system{align-self:center;max-width:100%}.lc-chat__avatar{flex-shrink:0;width:2rem;height:2rem}.lc-chat__avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover}.lc-chat__avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:var(--color-surface-hover);color:var(--color-text-secondary);font-size:.75rem;font-weight:700}.lc-chat__avatar-fallback--agent{background:var(--gradient-brand-tile);color:var(--color-neutral-900)}.lc-chat__bubble{font-size:.9375rem;line-height:1.6;word-break:break-word}.lc-chat__message--user .lc-chat__bubble{padding:.625rem .875rem;border-radius:var(--border-radius-lg);border-bottom-right-radius:var(--border-radius-sm);background:var(--color-primary-fill);color:var(--color-on-primary)}.lc-chat__message--agent .lc-chat__bubble{flex:1;min-width:0;padding:0;background:transparent;color:var(--color-text-primary)}.lc-chat__message--system .lc-chat__bubble{background:transparent;color:var(--color-text-tertiary);font-size:.75rem;text-align:center;padding:.25rem .5rem}.lc-chat__message--agent .lc-chat__bubble--streaming{border:none}.lc-chat__name{font-size:.75rem;font-weight:600;color:var(--color-primary-500);margin-bottom:.25rem}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:.625rem;color:var(--color-text-tertiary);margin-top:.25rem}.lc-chat__message--user .lc-chat__time{color:#ffffffb3;text-align:right}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-divider);background:var(--color-surface-2)}.lc-chat__input-row{display:flex;align-items:flex-end;gap:.5rem}.lc-chat__input{flex:1;resize:none;border:1px solid var(--color-border);border-radius:1.25rem;padding:.5rem .875rem;font-size:.875rem;font-family:inherit;line-height:1.4;outline:none;background:var(--color-surface-2);color:var(--color-text-primary);max-height:6rem;overflow-y:auto;transition:border-color .15s}.lc-chat__input:focus{border-color:var(--color-primary-500)}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:50%;background:var(--color-primary-fill);color:#fff;cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:.5rem;font-size:.75rem;color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:.75rem}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:.375rem;max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:.375rem;object-fit:cover;display:block}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MarkdownComponent, selector: "lc-markdown", inputs: ["src", "content", "variant", "linkTarget", "sanitize", "syntaxHighlight", "showHeadingAnchors", "baseUrl"], outputs: ["linkClick", "rendered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ChatComponent, isStandalone: true, selector: "lc-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isStreaming: { classPropertyName: "isStreaming", publicName: "isStreaming", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, messageAnchor: { classPropertyName: "messageAnchor", publicName: "messageAnchor", isSignal: true, isRequired: false, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, renderMarkdown: { classPropertyName: "renderMarkdown", publicName: "renderMarkdown", isSignal: true, isRequired: false, transformFunction: null }, allowFileUpload: { classPropertyName: "allowFileUpload", publicName: "allowFileUpload", 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 }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSend: "messageSend", fileAttach: "fileAttach" }, queries: [{ propertyName: "messageTemplate", first: true, predicate: ["messageTemplate"], descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "composerInput", first: true, predicate: ["composerInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"lc-chat\"\n  [class.lc-chat--borderless]=\"!bordered()\"\n  [class.lc-chat--width-narrow]=\"contentWidth() === 'narrow'\"\n  [class.lc-chat--width-full]=\"contentWidth() === 'full'\"\n>\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    class=\"lc-chat__messages\"\n    [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n    #scrollContainer\n  >\n    <div class=\"lc-chat__thread\">\n      @for (msg of formattedMessages(); track msg.id) {\n        <div\n          class=\"lc-chat__message\"\n          [class.lc-chat__message--user]=\"msg.role === 'user'\"\n          [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n          [class.lc-chat__message--system]=\"msg.role === 'system'\"\n          [class.lc-chat__message--streaming]=\"msg.streaming\"\n        >\n          @if (showAvatars() && msg.role !== 'user') {\n            <div class=\"lc-chat__marker\">\n              @if (msg.avatar) {\n                <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n              } @else {\n                <span\n                  class=\"lc-chat__dot\"\n                  [class.lc-chat__dot--agent]=\"msg.role === 'agent'\"\n                  [class.lc-chat__dot--system]=\"msg.role === 'system'\"\n                ></span>\n              }\n            </div>\n          }\n\n          <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n            @if (msg.role === 'user') {\n              <div class=\"lc-chat__meta\">\n                <span class=\"lc-chat__name\">{{ msg.name || 'Du' }}</span>\n                @if (showTimestamps() && msg.timestamp) {\n                  <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n                }\n              </div>\n            } @else if (msg.name) {\n              <div class=\"lc-chat__name\">{{ msg.name }}</div>\n            }\n            <div class=\"lc-chat__content\">\n              @if (messageTemplate) {\n                <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n              } @else if (shouldRenderMarkdown(msg.role)) {\n                <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n              } @else {\n                {{ msg.content }}\n              }\n              <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n            </div>\n            @if (msg.attachments?.length) {\n              <div class=\"lc-chat__attachments\">\n                @for (att of msg.attachments; track att.id) {\n                  @if (isImage(att) && att.url) {\n                    <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n                      <img [src]=\"att.url\" [alt]=\"att.name\" />\n                    </a>\n                  } @else {\n                    <a\n                      class=\"lc-chat__attachment lc-chat__attachment--file\"\n                      [href]=\"att.url || null\"\n                      [attr.download]=\"att.url ? att.name : null\"\n                      target=\"_blank\"\n                      rel=\"noopener\"\n                    >\n                      <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                        <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                        <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                      </svg>\n                      <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n                      @if (att.size) {\n                        <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n                      }\n                    </a>\n                  }\n                }\n              </div>\n            }\n            @if (showTimestamps() && msg.timestamp && msg.role !== 'user') {\n              <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n        <div class=\"lc-chat__message lc-chat__message--agent\">\n          @if (showAvatars()) {\n            <div class=\"lc-chat__marker\">\n              <span class=\"lc-chat__dot lc-chat__dot--agent\"></span>\n            </div>\n          }\n          <div class=\"lc-chat__bubble\">\n            <div class=\"lc-chat__typing\">\n              <span></span><span></span><span></span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    <div class=\"lc-chat__composer\">\n      @if (allowFileUpload() && pendingAttachments().length) {\n        <div class=\"lc-chat__pending-attachments\">\n          @for (att of pendingAttachments(); track att.id) {\n            <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n              @if (isImage(att) && att.url) {\n                <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n              } @else {\n                <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                </svg>\n              }\n              <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n              @if (att.size) {\n                <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n              }\n              <button\n                type=\"button\"\n                class=\"lc-chat__pending-remove\"\n                (click)=\"removeAttachment(att.id)\"\n                [attr.aria-label]=\"'Entfernen: ' + att.name\"\n              >\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                </svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      <textarea\n        #composerInput\n        class=\"lc-chat__input\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"inputValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        rows=\"1\"\n      ></textarea>\n\n      <div class=\"lc-chat__composer-actions\">\n        @if (allowFileUpload()) {\n          <input\n            #fileInput\n            type=\"file\"\n            class=\"lc-chat__file-input\"\n            [accept]=\"accept() || null\"\n            [multiple]=\"multiple()\"\n            (change)=\"onFilesSelected($event)\"\n          />\n          <button\n            type=\"button\"\n            class=\"lc-chat__attach-btn\"\n            [disabled]=\"disabled()\"\n            (click)=\"openFilePicker()\"\n            aria-label=\"Datei anh\u00E4ngen\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n        }\n        <button\n          class=\"lc-chat__send-btn\"\n          [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n          (click)=\"send()\"\n          aria-label=\"Send\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".lc-chat{--lc-chat-content-width: 46rem;display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-family-sans, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat--width-full{--lc-chat-content-width: 100%}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:var(--font-size-xs, .6875rem);padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:var(--border-radius-full, 1rem);font-weight:var(--font-weight-medium, 500);animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding-block:var(--spacing-6, 1.5rem);padding-inline:var(--spacing-4, 1rem)}.lc-chat__thread{position:relative;width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--spacing-5, 1.25rem)}.lc-chat__messages--anchor-bottom .lc-chat__thread>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{position:relative;display:flex;align-items:stretch;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;flex-direction:column;align-items:center}.lc-chat__marker:before{content:\"\";position:absolute;left:50%;top:.55rem;bottom:calc(-1 * var(--spacing-5, 1.25rem));width:1.5px;transform:translate(-50%);background:var(--color-divider);z-index:-1}.lc-chat__message:last-child .lc-chat__marker:before{display:none}.lc-chat__dot{position:relative;z-index:1;width:.625rem;height:.625rem;margin-top:.25rem;border-radius:50%;background:var(--color-text-tertiary);box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__dot--agent{background:var(--color-primary-500)}.lc-chat__dot--system{background:var(--color-text-tertiary);opacity:.6}.lc-chat__message--streaming .lc-chat__dot--agent{animation:dot-pulse 1.4s ease-out infinite}@keyframes dot-pulse{0%{box-shadow:0 0 0 3px var(--color-surface),0 0 0 3px color-mix(in srgb,var(--color-primary-500) 45%,transparent)}70%,to{box-shadow:0 0 0 3px var(--color-surface),0 0 0 9px color-mix(in srgb,var(--color-primary-500) 0%,transparent)}}.lc-chat__avatar-img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__bubble{flex:1;min-width:0;font-size:var(--font-size-base, .9375rem);line-height:var(--line-height-relaxed, 1.6);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);background:var(--color-surface-2)}.lc-chat__message--agent .lc-chat__bubble{padding:0;background:transparent}.lc-chat__message--system .lc-chat__bubble{padding:0;background:transparent;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .8125rem)}.lc-chat__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-2, .5rem);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__meta .lc-chat__name{margin-bottom:0}.lc-chat__meta .lc-chat__time{margin-top:0}.lc-chat__name{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:var(--spacing-1, .25rem);flex-shrink:0}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{padding:var(--spacing-4, .75rem);border-top:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__composer{width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;display:flex;flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--spacing-3, .75rem);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);transition:border-color .15s,box-shadow .15s}.lc-chat__composer:focus-within{border-color:var(--color-primary-500);box-shadow:var(--elevation-1)}.lc-chat__input{display:block;width:100%;box-sizing:border-box;resize:none;border:none;background:transparent;padding:var(--spacing-1, .25rem) var(--spacing-2, .5rem);font-size:var(--font-size-base, .875rem);font-family:inherit;line-height:var(--line-height-normal, 1.4);color:var(--color-text-primary);outline:none;height:auto;max-height:12rem;overflow-y:auto}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__composer-actions{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:auto;border:none;border-radius:var(--border-radius-md);background:var(--color-primary-fill);color:var(--color-on-primary);cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-size:var(--font-size-xs, .75rem);color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:var(--font-size-xs, .75rem)}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:var(--border-radius-md, .375rem);max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:var(--border-radius-md, .375rem);object-fit:cover;display:block}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MarkdownComponent, selector: "lc-markdown", inputs: ["src", "content", "variant", "linkTarget", "sanitize", "syntaxHighlight", "showHeadingAnchors", "baseUrl"], outputs: ["linkClick", "rendered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lc-chat', standalone: true, imports: [NgTemplateOutlet, MarkdownComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-chat\" [class.lc-chat--borderless]=\"!bordered()\">\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    class=\"lc-chat__messages\"\n    [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n    #scrollContainer\n  >\n    @for (msg of formattedMessages(); track msg.id) {\n      <div\n        class=\"lc-chat__message\"\n        [class.lc-chat__message--user]=\"msg.role === 'user'\"\n        [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n        [class.lc-chat__message--system]=\"msg.role === 'system'\"\n      >\n        @if (showAvatars() && msg.role !== 'system') {\n          <div class=\"lc-chat__avatar\">\n            @if (msg.avatar) {\n              <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n            } @else {\n              <span class=\"lc-chat__avatar-fallback\" [class.lc-chat__avatar-fallback--agent]=\"msg.role === 'agent'\">\n                {{ (msg.name || msg.role).charAt(0).toUpperCase() }}\n              </span>\n            }\n          </div>\n        }\n\n        <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n          @if (msg.name && msg.role !== 'user') {\n            <div class=\"lc-chat__name\">{{ msg.name }}</div>\n          }\n          <div class=\"lc-chat__content\">\n            @if (messageTemplate) {\n              <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n            } @else if (shouldRenderMarkdown(msg.role)) {\n              <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n            } @else {\n              {{ msg.content }}\n            }\n            <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n          </div>\n          @if (msg.attachments?.length) {\n            <div class=\"lc-chat__attachments\">\n              @for (att of msg.attachments; track att.id) {\n                @if (isImage(att) && att.url) {\n                  <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n                    <img [src]=\"att.url\" [alt]=\"att.name\" />\n                  </a>\n                } @else {\n                  <a\n                    class=\"lc-chat__attachment lc-chat__attachment--file\"\n                    [href]=\"att.url || null\"\n                    [attr.download]=\"att.url ? att.name : null\"\n                    target=\"_blank\"\n                    rel=\"noopener\"\n                  >\n                    <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                      <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                      <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                    </svg>\n                    <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n                    @if (att.size) {\n                      <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n                    }\n                  </a>\n                }\n              }\n            </div>\n          }\n          @if (showTimestamps() && msg.timestamp) {\n            <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n      <div class=\"lc-chat__message lc-chat__message--agent\">\n        @if (showAvatars()) {\n          <div class=\"lc-chat__avatar\">\n            <span class=\"lc-chat__avatar-fallback lc-chat__avatar-fallback--agent\">A</span>\n          </div>\n        }\n        <div class=\"lc-chat__bubble\">\n          <div class=\"lc-chat__typing\">\n            <span></span><span></span><span></span>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    @if (allowFileUpload() && pendingAttachments().length) {\n      <div class=\"lc-chat__pending-attachments\">\n        @for (att of pendingAttachments(); track att.id) {\n          <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n            @if (isImage(att) && att.url) {\n              <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n            } @else {\n              <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n              </svg>\n            }\n            <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n            @if (att.size) {\n              <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n            }\n            <button\n              type=\"button\"\n              class=\"lc-chat__pending-remove\"\n              (click)=\"removeAttachment(att.id)\"\n              [attr.aria-label]=\"'Entfernen: ' + att.name\"\n            >\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n              </svg>\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <div class=\"lc-chat__input-row\">\n      @if (allowFileUpload()) {\n        <input\n          #fileInput\n          type=\"file\"\n          class=\"lc-chat__file-input\"\n          [accept]=\"accept() || null\"\n          [multiple]=\"multiple()\"\n          (change)=\"onFilesSelected($event)\"\n        />\n        <button\n          type=\"button\"\n          class=\"lc-chat__attach-btn\"\n          [disabled]=\"disabled()\"\n          (click)=\"openFilePicker()\"\n          aria-label=\"Datei anh\u00E4ngen\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n      }\n      <textarea\n        class=\"lc-chat__input\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"inputValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        rows=\"1\"\n      ></textarea>\n      <button\n        class=\"lc-chat__send-btn\"\n        [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n        (click)=\"send()\"\n        aria-label=\"Send\"\n      >\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n          <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n        </svg>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".lc-chat{display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);background-image:var(--gradient-surface);font-family:var(--typography-font-family, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-divider);background:var(--color-surface-2)}.lc-chat__title{font-size:.875rem;font-weight:600;color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:.6875rem;padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:1rem;font-weight:500;animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.lc-chat__messages--anchor-bottom>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{display:flex;align-items:flex-start;gap:.75rem}.lc-chat__message--user{align-self:flex-end;flex-direction:row-reverse;max-width:80%}.lc-chat__message--agent{align-self:stretch;max-width:100%}.lc-chat__message--system{align-self:center;max-width:100%}.lc-chat__avatar{flex-shrink:0;width:2rem;height:2rem}.lc-chat__avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover}.lc-chat__avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:var(--color-surface-hover);color:var(--color-text-secondary);font-size:.75rem;font-weight:700}.lc-chat__avatar-fallback--agent{background:var(--gradient-brand-tile);color:var(--color-neutral-900)}.lc-chat__bubble{font-size:.9375rem;line-height:1.6;word-break:break-word}.lc-chat__message--user .lc-chat__bubble{padding:.625rem .875rem;border-radius:var(--border-radius-lg);border-bottom-right-radius:var(--border-radius-sm);background:var(--color-primary-fill);color:var(--color-on-primary)}.lc-chat__message--agent .lc-chat__bubble{flex:1;min-width:0;padding:0;background:transparent;color:var(--color-text-primary)}.lc-chat__message--system .lc-chat__bubble{background:transparent;color:var(--color-text-tertiary);font-size:.75rem;text-align:center;padding:.25rem .5rem}.lc-chat__message--agent .lc-chat__bubble--streaming{border:none}.lc-chat__name{font-size:.75rem;font-weight:600;color:var(--color-primary-500);margin-bottom:.25rem}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:.625rem;color:var(--color-text-tertiary);margin-top:.25rem}.lc-chat__message--user .lc-chat__time{color:#ffffffb3;text-align:right}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-divider);background:var(--color-surface-2)}.lc-chat__input-row{display:flex;align-items:flex-end;gap:.5rem}.lc-chat__input{flex:1;resize:none;border:1px solid var(--color-border);border-radius:1.25rem;padding:.5rem .875rem;font-size:.875rem;font-family:inherit;line-height:1.4;outline:none;background:var(--color-surface-2);color:var(--color-text-primary);max-height:6rem;overflow-y:auto;transition:border-color .15s}.lc-chat__input:focus{border-color:var(--color-primary-500)}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:50%;background:var(--color-primary-fill);color:#fff;cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:.5rem;font-size:.75rem;color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:.75rem}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:.375rem;max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:.375rem;object-fit:cover;display:block}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}\n"] }]
-        }], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isStreaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStreaming", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], messageAnchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageAnchor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showAvatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatars", required: false }] }], showTimestamps: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamps", required: false }] }], renderMarkdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMarkdown", required: false }] }], allowFileUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFileUpload", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], messageSend: [{ type: i0.Output, args: ["messageSend"] }], fileAttach: [{ type: i0.Output, args: ["fileAttach"] }], messageTemplate: [{
+            args: [{ selector: 'lc-chat', standalone: true, imports: [NgTemplateOutlet, MarkdownComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"lc-chat\"\n  [class.lc-chat--borderless]=\"!bordered()\"\n  [class.lc-chat--width-narrow]=\"contentWidth() === 'narrow'\"\n  [class.lc-chat--width-full]=\"contentWidth() === 'full'\"\n>\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    class=\"lc-chat__messages\"\n    [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n    #scrollContainer\n  >\n    <div class=\"lc-chat__thread\">\n      @for (msg of formattedMessages(); track msg.id) {\n        <div\n          class=\"lc-chat__message\"\n          [class.lc-chat__message--user]=\"msg.role === 'user'\"\n          [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n          [class.lc-chat__message--system]=\"msg.role === 'system'\"\n          [class.lc-chat__message--streaming]=\"msg.streaming\"\n        >\n          @if (showAvatars() && msg.role !== 'user') {\n            <div class=\"lc-chat__marker\">\n              @if (msg.avatar) {\n                <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n              } @else {\n                <span\n                  class=\"lc-chat__dot\"\n                  [class.lc-chat__dot--agent]=\"msg.role === 'agent'\"\n                  [class.lc-chat__dot--system]=\"msg.role === 'system'\"\n                ></span>\n              }\n            </div>\n          }\n\n          <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n            @if (msg.role === 'user') {\n              <div class=\"lc-chat__meta\">\n                <span class=\"lc-chat__name\">{{ msg.name || 'Du' }}</span>\n                @if (showTimestamps() && msg.timestamp) {\n                  <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n                }\n              </div>\n            } @else if (msg.name) {\n              <div class=\"lc-chat__name\">{{ msg.name }}</div>\n            }\n            <div class=\"lc-chat__content\">\n              @if (messageTemplate) {\n                <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n              } @else if (shouldRenderMarkdown(msg.role)) {\n                <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n              } @else {\n                {{ msg.content }}\n              }\n              <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n            </div>\n            @if (msg.attachments?.length) {\n              <div class=\"lc-chat__attachments\">\n                @for (att of msg.attachments; track att.id) {\n                  @if (isImage(att) && att.url) {\n                    <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n                      <img [src]=\"att.url\" [alt]=\"att.name\" />\n                    </a>\n                  } @else {\n                    <a\n                      class=\"lc-chat__attachment lc-chat__attachment--file\"\n                      [href]=\"att.url || null\"\n                      [attr.download]=\"att.url ? att.name : null\"\n                      target=\"_blank\"\n                      rel=\"noopener\"\n                    >\n                      <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                        <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                        <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                      </svg>\n                      <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n                      @if (att.size) {\n                        <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n                      }\n                    </a>\n                  }\n                }\n              </div>\n            }\n            @if (showTimestamps() && msg.timestamp && msg.role !== 'user') {\n              <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n        <div class=\"lc-chat__message lc-chat__message--agent\">\n          @if (showAvatars()) {\n            <div class=\"lc-chat__marker\">\n              <span class=\"lc-chat__dot lc-chat__dot--agent\"></span>\n            </div>\n          }\n          <div class=\"lc-chat__bubble\">\n            <div class=\"lc-chat__typing\">\n              <span></span><span></span><span></span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    <div class=\"lc-chat__composer\">\n      @if (allowFileUpload() && pendingAttachments().length) {\n        <div class=\"lc-chat__pending-attachments\">\n          @for (att of pendingAttachments(); track att.id) {\n            <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n              @if (isImage(att) && att.url) {\n                <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n              } @else {\n                <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                </svg>\n              }\n              <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n              @if (att.size) {\n                <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n              }\n              <button\n                type=\"button\"\n                class=\"lc-chat__pending-remove\"\n                (click)=\"removeAttachment(att.id)\"\n                [attr.aria-label]=\"'Entfernen: ' + att.name\"\n              >\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                </svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      <textarea\n        #composerInput\n        class=\"lc-chat__input\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"inputValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        rows=\"1\"\n      ></textarea>\n\n      <div class=\"lc-chat__composer-actions\">\n        @if (allowFileUpload()) {\n          <input\n            #fileInput\n            type=\"file\"\n            class=\"lc-chat__file-input\"\n            [accept]=\"accept() || null\"\n            [multiple]=\"multiple()\"\n            (change)=\"onFilesSelected($event)\"\n          />\n          <button\n            type=\"button\"\n            class=\"lc-chat__attach-btn\"\n            [disabled]=\"disabled()\"\n            (click)=\"openFilePicker()\"\n            aria-label=\"Datei anh\u00E4ngen\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n        }\n        <button\n          class=\"lc-chat__send-btn\"\n          [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n          (click)=\"send()\"\n          aria-label=\"Send\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".lc-chat{--lc-chat-content-width: 46rem;display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-family-sans, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat--width-full{--lc-chat-content-width: 100%}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:var(--font-size-xs, .6875rem);padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:var(--border-radius-full, 1rem);font-weight:var(--font-weight-medium, 500);animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding-block:var(--spacing-6, 1.5rem);padding-inline:var(--spacing-4, 1rem)}.lc-chat__thread{position:relative;width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--spacing-5, 1.25rem)}.lc-chat__messages--anchor-bottom .lc-chat__thread>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{position:relative;display:flex;align-items:stretch;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;flex-direction:column;align-items:center}.lc-chat__marker:before{content:\"\";position:absolute;left:50%;top:.55rem;bottom:calc(-1 * var(--spacing-5, 1.25rem));width:1.5px;transform:translate(-50%);background:var(--color-divider);z-index:-1}.lc-chat__message:last-child .lc-chat__marker:before{display:none}.lc-chat__dot{position:relative;z-index:1;width:.625rem;height:.625rem;margin-top:.25rem;border-radius:50%;background:var(--color-text-tertiary);box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__dot--agent{background:var(--color-primary-500)}.lc-chat__dot--system{background:var(--color-text-tertiary);opacity:.6}.lc-chat__message--streaming .lc-chat__dot--agent{animation:dot-pulse 1.4s ease-out infinite}@keyframes dot-pulse{0%{box-shadow:0 0 0 3px var(--color-surface),0 0 0 3px color-mix(in srgb,var(--color-primary-500) 45%,transparent)}70%,to{box-shadow:0 0 0 3px var(--color-surface),0 0 0 9px color-mix(in srgb,var(--color-primary-500) 0%,transparent)}}.lc-chat__avatar-img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__bubble{flex:1;min-width:0;font-size:var(--font-size-base, .9375rem);line-height:var(--line-height-relaxed, 1.6);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);background:var(--color-surface-2)}.lc-chat__message--agent .lc-chat__bubble{padding:0;background:transparent}.lc-chat__message--system .lc-chat__bubble{padding:0;background:transparent;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .8125rem)}.lc-chat__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-2, .5rem);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__meta .lc-chat__name{margin-bottom:0}.lc-chat__meta .lc-chat__time{margin-top:0}.lc-chat__name{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:var(--spacing-1, .25rem);flex-shrink:0}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{padding:var(--spacing-4, .75rem);border-top:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__composer{width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;display:flex;flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--spacing-3, .75rem);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);transition:border-color .15s,box-shadow .15s}.lc-chat__composer:focus-within{border-color:var(--color-primary-500);box-shadow:var(--elevation-1)}.lc-chat__input{display:block;width:100%;box-sizing:border-box;resize:none;border:none;background:transparent;padding:var(--spacing-1, .25rem) var(--spacing-2, .5rem);font-size:var(--font-size-base, .875rem);font-family:inherit;line-height:var(--line-height-normal, 1.4);color:var(--color-text-primary);outline:none;height:auto;max-height:12rem;overflow-y:auto}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__composer-actions{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:auto;border:none;border-radius:var(--border-radius-md);background:var(--color-primary-fill);color:var(--color-on-primary);cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-size:var(--font-size-xs, .75rem);color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:var(--font-size-xs, .75rem)}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:var(--border-radius-md, .375rem);max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:var(--border-radius-md, .375rem);object-fit:cover;display:block}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}\n"] }]
+        }], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isStreaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStreaming", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], messageAnchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageAnchor", required: false }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showAvatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatars", required: false }] }], showTimestamps: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamps", required: false }] }], renderMarkdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMarkdown", required: false }] }], allowFileUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFileUpload", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], messageSend: [{ type: i0.Output, args: ["messageSend"] }], fileAttach: [{ type: i0.Output, args: ["fileAttach"] }], messageTemplate: [{
                 type: ContentChild,
                 args: ['messageTemplate']
             }], scrollContainer: [{
@@ -11485,6 +11505,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
             }], fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
+            }], composerInput: [{
+                type: ViewChild,
+                args: ['composerInput']
             }] } });
 
 const EXTENSION_TYPE_MAP = {