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

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

@@ -11484,6 +11484,63 @@ class ChatComponent {
             return true;
         return role === mode;
     }
+    /** Whether a message carries a semantic (non-`default`) status. */
+    isSemanticStatus(status) {
+        return !!status && status !== 'default';
+    }
+    /** Rail icon for a semantic status — reuses the `lc-alert` icon names. */
+    statusIcon(status) {
+        switch (status) {
+            case 'info':
+                return 'information-circle';
+            case 'success':
+                return 'check-circle';
+            case 'warning':
+                return 'exclamation-triangle';
+            case 'error':
+                return 'x-circle';
+            default:
+                return '';
+        }
+    }
+    /** Semantic token colour for a status dot/icon. */
+    statusColor(status) {
+        switch (status) {
+            case 'info':
+                return 'var(--color-info-500)';
+            case 'success':
+                return 'var(--color-success-500)';
+            case 'warning':
+                return 'var(--color-warning-500)';
+            case 'error':
+                return 'var(--color-error-500)';
+            default:
+                return 'currentColor';
+        }
+    }
+    /** Visually-hidden prefix so colour/icon is never the only signal. */
+    statusLabel(status) {
+        switch (status) {
+            case 'info':
+                return 'Info:';
+            case 'success':
+                return 'Erfolg:';
+            case 'warning':
+                return 'Warnung:';
+            case 'error':
+                return 'Fehler:';
+            default:
+                return '';
+        }
+    }
+    /** ARIA live priority: assertive for `error`, polite for other statuses. */
+    statusAriaLive(status) {
+        if (status === 'error')
+            return 'assertive';
+        if (this.isSemanticStatus(status))
+            return 'polite';
+        return null;
+    }
     scrollToBottom() {
         if (this.scrollContainer) {
             const el = this.scrollContainer.nativeElement;
@@ -11491,11 +11548,11 @@ 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 }, 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 });
+    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          [attr.role]=\"msg.status === 'error' ? 'alert' : null\"\n          [attr.aria-live]=\"statusAriaLive(msg.status)\"\n        >\n          @if (msg.role !== 'user' && (showAvatars() || isSemanticStatus(msg.status))) {\n            <div class=\"lc-chat__marker\">\n              @if (isSemanticStatus(msg.status)) {\n                <span class=\"lc-chat__status-icon\">\n                  <lc-icon [name]=\"statusIcon(msg.status)\" size=\"xs\" [color]=\"statusColor(msg.status)\" [decorative]=\"true\" />\n                </span>\n              } @else 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 (isSemanticStatus(msg.status)) {\n                <span class=\"lc-chat__sr-only\">{{ statusLabel(msg.status) }} </span>\n              }\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__status-icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-top:.0625rem;border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 2px var(--color-surface)}.lc-chat__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.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"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], 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\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"] }]
+            args: [{ selector: 'lc-chat', standalone: true, imports: [NgTemplateOutlet, MarkdownComponent, IconComponent], 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          [attr.role]=\"msg.status === 'error' ? 'alert' : null\"\n          [attr.aria-live]=\"statusAriaLive(msg.status)\"\n        >\n          @if (msg.role !== 'user' && (showAvatars() || isSemanticStatus(msg.status))) {\n            <div class=\"lc-chat__marker\">\n              @if (isSemanticStatus(msg.status)) {\n                <span class=\"lc-chat__status-icon\">\n                  <lc-icon [name]=\"statusIcon(msg.status)\" size=\"xs\" [color]=\"statusColor(msg.status)\" [decorative]=\"true\" />\n                </span>\n              } @else 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 (isSemanticStatus(msg.status)) {\n                <span class=\"lc-chat__sr-only\">{{ statusLabel(msg.status) }} </span>\n              }\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__status-icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-top:.0625rem;border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 2px var(--color-surface)}.lc-chat__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.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']