@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-chat.mjs

@@ -0,0 +1,790 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChild, DestroyRef, Injector, NgZone, ViewChild, afterNextRender, computed, effect, inject, input, output, signal, viewChild } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { MarkdownComponent } from "@lifecorner/angular-ui-kit/markdown";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+var ChatComponent = class ChatComponent {
+	static nextId = 0;
+	inputId = `lc-chat-input-${++ChatComponent.nextId}`;
+	messages = input([], ...ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []);
+	placeholder = input("Nachricht eingeben…", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	inputLabel = input("Nachricht", ...ngDevMode ? [{ debugName: "inputLabel" }] : /* istanbul ignore next */ []);
+	title = input("Chat", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	isStreaming = input(false, ...ngDevMode ? [{ debugName: "isStreaming" }] : /* istanbul ignore next */ []);
+	showHeader = input(true, ...ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []);
+	bordered = input(true, ...ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []);
+	messageAnchor = input("top", ...ngDevMode ? [{ debugName: "messageAnchor" }] : /* istanbul ignore next */ []);
+	contentWidth = input("full", ...ngDevMode ? [{ debugName: "contentWidth" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	showAvatars = input(true, ...ngDevMode ? [{ debugName: "showAvatars" }] : /* istanbul ignore next */ []);
+	showTimestamps = input(true, ...ngDevMode ? [{ debugName: "showTimestamps" }] : /* istanbul ignore next */ []);
+	renderMarkdown = input("agent", ...ngDevMode ? [{ debugName: "renderMarkdown" }] : /* istanbul ignore next */ []);
+	allowFileUpload = input(false, ...ngDevMode ? [{ debugName: "allowFileUpload" }] : /* istanbul ignore next */ []);
+	accept = input("", ...ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []);
+	multiple = input(true, ...ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []);
+	maxFileSize = input(0, ...ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []);
+	locale = input("de-DE", ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	streamingLabel = input("Streaming…", ...ngDevMode ? [{ debugName: "streamingLabel" }] : /* istanbul ignore next */ []);
+	attachAriaLabel = input("Datei anhängen", ...ngDevMode ? [{ debugName: "attachAriaLabel" }] : /* istanbul ignore next */ []);
+	sendAriaLabel = input("Send", ...ngDevMode ? [{ debugName: "sendAriaLabel" }] : /* istanbul ignore next */ []);
+	statusInfoLabel = input("Info:", ...ngDevMode ? [{ debugName: "statusInfoLabel" }] : /* istanbul ignore next */ []);
+	statusSuccessLabel = input("Erfolg:", ...ngDevMode ? [{ debugName: "statusSuccessLabel" }] : /* istanbul ignore next */ []);
+	statusWarningLabel = input("Warnung:", ...ngDevMode ? [{ debugName: "statusWarningLabel" }] : /* istanbul ignore next */ []);
+	statusErrorLabel = input("Fehler:", ...ngDevMode ? [{ debugName: "statusErrorLabel" }] : /* istanbul ignore next */ []);
+	removeAttachmentAriaLabel = input("Entfernen:", ...ngDevMode ? [{ debugName: "removeAttachmentAriaLabel" }] : /* istanbul ignore next */ []);
+	messageSend = output();
+	fileAttach = output();
+	messageTemplate;
+	inputValue = signal("", ...ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []);
+	pendingAttachments = signal([], ...ngDevMode ? [{ debugName: "pendingAttachments" }] : /* istanbul ignore next */ []);
+	attachmentCounter = 0;
+	injector = inject(Injector);
+	destroyRef = inject(DestroyRef);
+	ngZone = inject(NgZone);
+	atBottom = true;
+	static AT_BOTTOM_THRESHOLD = 32;
+	scrollContainer = viewChild.required("scrollContainer", ...ngDevMode ? [{ debugName: "scrollContainer" }] : /* istanbul ignore next */ []);
+	fileInput;
+	composerInput;
+	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) : void 0
+	})), ...ngDevMode ? [{ debugName: "formattedMessages" }] : /* istanbul ignore next */ []);
+	announcement = computed(() => {
+		const msgs = this.messages();
+		for (let i = msgs.length - 1; i >= 0; i--) {
+			const m = msgs[i];
+			if (m.role === "user" || m.streaming || this.isSemanticStatus(m.status)) continue;
+			return m.name ? `${m.name}: ${m.content}` : m.content;
+		}
+		return "";
+	}, ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => {
+			const el = this.scrollContainer().nativeElement;
+			const onScroll = () => {
+				this.atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < ChatComponent.AT_BOTTOM_THRESHOLD;
+			};
+			this.ngZone.runOutsideAngular(() => el.addEventListener("scroll", onScroll, { passive: true }));
+			this.destroyRef.onDestroy(() => el.removeEventListener("scroll", onScroll));
+		});
+		effect(() => {
+			this.messages();
+			this.isStreaming();
+			if (!this.atBottom) return;
+			afterNextRender(() => this.scrollToBottom(), { injector: this.injector });
+		});
+	}
+	onInput(event) {
+		const el = event.target;
+		this.inputValue.set(el.value);
+		this.autoGrow(el);
+	}
+	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 && !event.isComposing) {
+			event.preventDefault();
+			this.send();
+		}
+	}
+	send() {
+		const content = this.inputValue().trim();
+		const attachments = this.pendingAttachments();
+		if (!content && attachments.length === 0 || this.disabled()) return;
+		this.messageSend.emit({
+			content,
+			attachments: attachments.length ? attachments : void 0
+		});
+		this.inputValue.set("");
+		this.pendingAttachments.set([]);
+		this.atBottom = true;
+		afterNextRender(() => this.scrollToBottom(), { injector: this.injector });
+		const el = this.composerInput?.nativeElement;
+		if (el) el.style.height = "auto";
+	}
+	openFilePicker() {
+		if (this.disabled() || !this.allowFileUpload()) return;
+		this.fileInput?.nativeElement.click();
+	}
+	onFilesSelected(event) {
+		const input = event.target;
+		if (!input.files || input.files.length === 0) return;
+		this.addFiles(Array.from(input.files));
+		input.value = "";
+	}
+	removeAttachment(id) {
+		this.pendingAttachments.update((list) => {
+			const removed = list.find((a) => a.id === id);
+			if (removed?.url && removed.file) URL.revokeObjectURL(removed.url);
+			return list.filter((a) => a.id !== id);
+		});
+	}
+	formatBytes(size) {
+		if (!size && size !== 0) return "";
+		if (size < 1024) return `${size} B`;
+		if (size < 1048576) return `${(size / 1024).toFixed(1)} KB`;
+		return `${(size / 1048576).toFixed(1)} MB`;
+	}
+	isImage(att) {
+		return !!att.type?.startsWith("image/");
+	}
+	addFiles(files) {
+		const max = this.maxFileSize();
+		const acceptList = this.accept().split(",").map((s) => s.trim()).filter(Boolean);
+		const accepted = [];
+		const rejected = [];
+		for (const file of files) {
+			if (max > 0 && file.size > max) {
+				rejected.push({
+					file,
+					reason: "size"
+				});
+				continue;
+			}
+			if (acceptList.length > 0 && !this.matchesAccept(file, acceptList)) {
+				rejected.push({
+					file,
+					reason: "type"
+				});
+				continue;
+			}
+			accepted.push({
+				id: `att-${Date.now()}-${this.attachmentCounter++}`,
+				name: file.name,
+				type: file.type,
+				size: file.size,
+				url: URL.createObjectURL(file),
+				file
+			});
+		}
+		if (accepted.length) this.pendingAttachments.update((list) => [...list, ...accepted]);
+		if (accepted.length || rejected.length) this.fileAttach.emit({
+			attachments: accepted,
+			rejected
+		});
+	}
+	matchesAccept(file, acceptList) {
+		const name = file.name.toLowerCase();
+		const type = file.type.toLowerCase();
+		return acceptList.some((rule) => {
+			const r = rule.toLowerCase();
+			if (r.startsWith(".")) return name.endsWith(r);
+			if (r.endsWith("/*")) return type.startsWith(r.slice(0, -1));
+			return type === r;
+		});
+	}
+	formatTime(date) {
+		if (!date) return "";
+		return date.toLocaleTimeString(this.locale(), {
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+	}
+	initials(name) {
+		if (!name) return "";
+		const parts = name.trim().split(/\s+/).filter(Boolean);
+		if (parts.length === 0) return "";
+		return ((parts[0][0] ?? "") + (parts.length > 1 ? parts[parts.length - 1][0] ?? "" : "")).toUpperCase();
+	}
+	showUserAvatar(msg) {
+		return msg.role === "user" && this.showAvatars() && !!(msg.avatar || this.initials(msg.name));
+	}
+	shouldRenderMarkdown(role) {
+		const mode = this.renderMarkdown();
+		if (mode === false) return false;
+		if (mode === true || mode === "all") return true;
+		return role === mode;
+	}
+	isSemanticStatus(status) {
+		return !!status && status !== "default";
+	}
+	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 "";
+		}
+	}
+	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";
+		}
+	}
+	statusLabel(status) {
+		switch (status) {
+			case "info": return this.statusInfoLabel();
+			case "success": return this.statusSuccessLabel();
+			case "warning": return this.statusWarningLabel();
+			case "error": return this.statusErrorLabel();
+			default: return "";
+		}
+	}
+	statusAriaLive(status) {
+		if (status === "error") return "assertive";
+		if (this.isSemanticStatus(status)) return "polite";
+		return null;
+	}
+	scrollToBottom() {
+		const el = this.scrollContainer().nativeElement;
+		el.scrollTop = el.scrollHeight;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ChatComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		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
+			},
+			inputLabel: {
+				classPropertyName: "inputLabel",
+				publicName: "inputLabel",
+				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
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			streamingLabel: {
+				classPropertyName: "streamingLabel",
+				publicName: "streamingLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			attachAriaLabel: {
+				classPropertyName: "attachAriaLabel",
+				publicName: "attachAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sendAriaLabel: {
+				classPropertyName: "sendAriaLabel",
+				publicName: "sendAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			statusInfoLabel: {
+				classPropertyName: "statusInfoLabel",
+				publicName: "statusInfoLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			statusSuccessLabel: {
+				classPropertyName: "statusSuccessLabel",
+				publicName: "statusSuccessLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			statusWarningLabel: {
+				classPropertyName: "statusWarningLabel",
+				publicName: "statusWarningLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			statusErrorLabel: {
+				classPropertyName: "statusErrorLabel",
+				publicName: "statusErrorLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removeAttachmentAriaLabel: {
+				classPropertyName: "removeAttachmentAriaLabel",
+				publicName: "removeAttachmentAriaLabel",
+				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,
+				isSignal: 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\">{{ streamingLabel() }}</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--avatar]=\"showUserAvatar(msg)\"\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))) || showUserAvatar(msg)) {\n            <div class=\"lc-chat__marker\" [class.lc-chat__marker--user]=\"msg.role === 'user'\">\n              @if (isSemanticStatus(msg.status) && msg.role !== 'user') {\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 if (msg.role === 'user') {\n                <span class=\"lc-chat__monogram\" [attr.aria-label]=\"msg.name\">{{ initials(msg.name) }}</span>\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.name && msg.role !== 'user') {\n              @if (showTimestamps() && msg.timestamp) {\n                <div class=\"lc-chat__meta lc-chat__meta--agent\">\n                  <span class=\"lc-chat__name\">{{ msg.name }}</span>\n                  <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n                </div>\n              } @else {\n                <div class=\"lc-chat__name\">{{ msg.name }}</div>\n              }\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' && !msg.name) {\n              <div class=\"lc-chat__time lc-chat__time--tight\">{{ formatTime(msg.timestamp) }}</div>\n            }\n          </div>\n          @if (showTimestamps() && msg.timestamp && msg.role === 'user') {\n            <div class=\"lc-chat__time lc-chat__time--user\">{{ formatTime(msg.timestamp) }}</div>\n          }\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  <!-- Announces the latest completed non-user turn (see `announcement`). -->\n  <div class=\"lc-chat__sr-only lc-chat__announcer\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</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]=\"removeAttachmentAriaLabel() + ' ' + 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      <label class=\"lc-chat__sr-only\" [for]=\"inputId\">{{ inputLabel() }}</label>\n      <textarea\n        #composerInput\n        [id]=\"inputId\"\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            [attr.aria-label]=\"attachAriaLabel()\"\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          [attr.aria-label]=\"sendAriaLabel()\"\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;--lc-chat-thread-gap: var(--spacing-3, .75rem);--lc-chat-messages-pad-block: var(--spacing-4, 1rem);--lc-chat-messages-pad-inline: var(--spacing-3, .75rem);--lc-chat-bubble-font: var(--font-size-sm, .875rem);--lc-chat-bubble-line: var(--line-height-normal, 1.5);--lc-chat-bubble-pad-block: var(--spacing-2, .5rem);--lc-chat-bubble-pad-inline: var(--spacing-3, .75rem);--lc-chat-header-pad-block: var(--spacing-2, .5rem);--lc-chat-input-area-pad: var(--spacing-3, .75rem);--lc-chat-composer-pad: var(--spacing-2, .5rem);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(--lc-chat-header-pad-block) 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(--lc-chat-messages-pad-block);padding-inline:var(--lc-chat-messages-pad-inline)}.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(--lc-chat-thread-gap)}.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__message--user{flex-direction:column;align-items:flex-end;gap:var(--spacing-1, .25rem)}.lc-chat__message--user.lc-chat__message--avatar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"bubble avatar\" \"time   avatar\";column-gap:var(--spacing-2, .5rem);align-items:start}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__bubble{grid-area:bubble;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__time--user{grid-area:time;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__marker--user{grid-area:avatar}.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(--lc-chat-thread-gap));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__marker--user{width:auto}.lc-chat__marker--user:before{display:none}.lc-chat__monogram{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:color-mix(in srgb,var(--color-primary-500) 18%,var(--color-surface-2));color:var(--color-primary-500);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1;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(--lc-chat-bubble-font);line-height:var(--lc-chat-bubble-line);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;flex:0 1 auto;max-width:min(85%,34rem);padding:var(--lc-chat-bubble-pad-block) var(--lc-chat-bubble-pad-inline);border:1px solid color-mix(in srgb,var(--color-primary-500) 22%,transparent);border-radius:var(--border-radius-lg);background:color-mix(in srgb,var(--color-primary-500) 10%,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__time--tight{margin-top:0}.lc-chat__time--user{margin-top:0;padding-inline:var(--spacing-1, .25rem)}.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(--lc-chat-input-area-pad);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(--lc-chat-composer-pad);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",
+					"highlightChanges",
+					"previousContent",
+					"changeHighlightFadeMs",
+					"scrollToFirstChange",
+					"changedMarkerLabel",
+					"changedSummaryOneLabel",
+					"changedSummaryManyLabel",
+					"mermaidLoadingLabel",
+					"mermaidErrorLabel",
+					"mermaidUnavailableLabel"
+				],
+				outputs: [
+					"linkClick",
+					"rendered",
+					"changesHighlighted"
+				]
+			},
+			{
+				kind: "component",
+				type: IconComponent,
+				selector: "lc-icon",
+				inputs: [
+					"name",
+					"variant",
+					"size",
+					"color",
+					"ariaLabel",
+					"decorative",
+					"strict"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ChatComponent,
+	decorators: [{
+		type: Component,
+		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\">{{ streamingLabel() }}</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--avatar]=\"showUserAvatar(msg)\"\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))) || showUserAvatar(msg)) {\n            <div class=\"lc-chat__marker\" [class.lc-chat__marker--user]=\"msg.role === 'user'\">\n              @if (isSemanticStatus(msg.status) && msg.role !== 'user') {\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 if (msg.role === 'user') {\n                <span class=\"lc-chat__monogram\" [attr.aria-label]=\"msg.name\">{{ initials(msg.name) }}</span>\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.name && msg.role !== 'user') {\n              @if (showTimestamps() && msg.timestamp) {\n                <div class=\"lc-chat__meta lc-chat__meta--agent\">\n                  <span class=\"lc-chat__name\">{{ msg.name }}</span>\n                  <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n                </div>\n              } @else {\n                <div class=\"lc-chat__name\">{{ msg.name }}</div>\n              }\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' && !msg.name) {\n              <div class=\"lc-chat__time lc-chat__time--tight\">{{ formatTime(msg.timestamp) }}</div>\n            }\n          </div>\n          @if (showTimestamps() && msg.timestamp && msg.role === 'user') {\n            <div class=\"lc-chat__time lc-chat__time--user\">{{ formatTime(msg.timestamp) }}</div>\n          }\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  <!-- Announces the latest completed non-user turn (see `announcement`). -->\n  <div class=\"lc-chat__sr-only lc-chat__announcer\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</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]=\"removeAttachmentAriaLabel() + ' ' + 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      <label class=\"lc-chat__sr-only\" [for]=\"inputId\">{{ inputLabel() }}</label>\n      <textarea\n        #composerInput\n        [id]=\"inputId\"\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            [attr.aria-label]=\"attachAriaLabel()\"\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          [attr.aria-label]=\"sendAriaLabel()\"\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;--lc-chat-thread-gap: var(--spacing-3, .75rem);--lc-chat-messages-pad-block: var(--spacing-4, 1rem);--lc-chat-messages-pad-inline: var(--spacing-3, .75rem);--lc-chat-bubble-font: var(--font-size-sm, .875rem);--lc-chat-bubble-line: var(--line-height-normal, 1.5);--lc-chat-bubble-pad-block: var(--spacing-2, .5rem);--lc-chat-bubble-pad-inline: var(--spacing-3, .75rem);--lc-chat-header-pad-block: var(--spacing-2, .5rem);--lc-chat-input-area-pad: var(--spacing-3, .75rem);--lc-chat-composer-pad: var(--spacing-2, .5rem);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(--lc-chat-header-pad-block) 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(--lc-chat-messages-pad-block);padding-inline:var(--lc-chat-messages-pad-inline)}.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(--lc-chat-thread-gap)}.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__message--user{flex-direction:column;align-items:flex-end;gap:var(--spacing-1, .25rem)}.lc-chat__message--user.lc-chat__message--avatar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"bubble avatar\" \"time   avatar\";column-gap:var(--spacing-2, .5rem);align-items:start}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__bubble{grid-area:bubble;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__time--user{grid-area:time;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__marker--user{grid-area:avatar}.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(--lc-chat-thread-gap));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__marker--user{width:auto}.lc-chat__marker--user:before{display:none}.lc-chat__monogram{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:color-mix(in srgb,var(--color-primary-500) 18%,var(--color-surface-2));color:var(--color-primary-500);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1;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(--lc-chat-bubble-font);line-height:var(--lc-chat-bubble-line);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;flex:0 1 auto;max-width:min(85%,34rem);padding:var(--lc-chat-bubble-pad-block) var(--lc-chat-bubble-pad-inline);border:1px solid color-mix(in srgb,var(--color-primary-500) 22%,transparent);border-radius:var(--border-radius-lg);background:color-mix(in srgb,var(--color-primary-500) 10%,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__time--tight{margin-top:0}.lc-chat__time--user{margin-top:0;padding-inline:var(--spacing-1, .25rem)}.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(--lc-chat-input-area-pad);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(--lc-chat-composer-pad);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"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		messages: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "messages",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		inputLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputLabel",
+				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
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		streamingLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "streamingLabel",
+				required: false
+			}]
+		}],
+		attachAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "attachAriaLabel",
+				required: false
+			}]
+		}],
+		sendAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sendAriaLabel",
+				required: false
+			}]
+		}],
+		statusInfoLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "statusInfoLabel",
+				required: false
+			}]
+		}],
+		statusSuccessLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "statusSuccessLabel",
+				required: false
+			}]
+		}],
+		statusWarningLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "statusWarningLabel",
+				required: false
+			}]
+		}],
+		statusErrorLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "statusErrorLabel",
+				required: false
+			}]
+		}],
+		removeAttachmentAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removeAttachmentAriaLabel",
+				required: false
+			}]
+		}],
+		messageSend: [{
+			type: i0.Output,
+			args: ["messageSend"]
+		}],
+		fileAttach: [{
+			type: i0.Output,
+			args: ["fileAttach"]
+		}],
+		messageTemplate: [{
+			type: ContentChild,
+			args: ["messageTemplate"]
+		}],
+		scrollContainer: [{
+			type: i0.ViewChild,
+			args: ["scrollContainer", { isSignal: true }]
+		}],
+		fileInput: [{
+			type: ViewChild,
+			args: ["fileInput"]
+		}],
+		composerInput: [{
+			type: ViewChild,
+			args: ["composerInput"]
+		}]
+	}
+});
+export { ChatComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-chat.mjs.map