@atelier-ui/angular 0.0.28 → 0.0.29

package/fesm2022/atelier-ui-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component, model, viewChild, effect, InjectionToken, inject, ElementRef, signal, output, Injector, viewChildren, Directive, ViewEncapsulation, Injectable, DestroyRef, untracked, contentChildren } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, model, viewChild, effect, InjectionToken, inject, ElementRef, signal, output, Injector, viewChildren, Directive, ViewEncapsulation, Injectable, DestroyRef, untracked, contentChildren, afterNextRender } from '@angular/core';
 import * as i1 from '@angular/cdk/text-field';
 import { TextFieldModule } from '@angular/cdk/text-field';
 import * as i1$1 from '@angular/cdk/a11y';
@@ -4349,6 +4349,7 @@ class LlmChat {
     /** @internal — referenced by LlmChatHeader via LLM_CHAT token for aria-labelledby. */
     headerId = `llm-chat-header-${nextId++}`;
     dialogRef = viewChild('dialogEl', ...(ngDevMode ? [{ debugName: "dialogRef" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
     triggerEl = signal(null, ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => `variant-${this.variant()} status-${this.status()}${this.open() ? ' is-open' : ''}`, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -4370,6 +4371,18 @@ class LlmChat {
                 this.triggerEl.set(null);
             }
         });
+        // Auto-focus the input on open for drawer / popup. Inline variant keeps
+        // user focus where it was.
+        effect(() => {
+            if (!this.open())
+                return;
+            if (this.variant() === 'inline')
+                return;
+            // Wait for the surface to be in the DOM (showModal / @if (open) render).
+            requestAnimationFrame(() => {
+                this.host.nativeElement.querySelector('textarea')?.focus();
+            });
+        });
     }
     onCancel(event) {
         event.preventDefault();
@@ -4572,16 +4585,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
         }] });
 /**
  * Scrollable message list for `llm-chat`. Project `llm-chat-message`,
- * `llm-chat-typing`, or `llm-chat-suggestion` children inside.
+ * `llm-chat-typing`, or `llm-chat-suggestion` children inside. Auto-scrolls
+ * to the bottom whenever children are added or content changes — important
+ * for streaming responses where new tokens are appended live.
  */
 class LlmChatMessages {
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        afterNextRender(() => {
+            const el = this.host.nativeElement;
+            const stickToBottom = () => { el.scrollTop = el.scrollHeight; };
+            stickToBottom();
+            const observer = new MutationObserver(stickToBottom);
+            observer.observe(el, { childList: true, subtree: true, characterData: true });
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LlmChatMessages, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: LlmChatMessages, isStandalone: true, selector: "llm-chat-messages", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host(llm-chat){display:contents}.surface{display:flex;flex-direction:column;background:var(--ui-color-surface);color:var(--ui-color-text);overflow:hidden}:host(.variant-drawer) dialog{all:unset;position:fixed;inset:0 0 0 auto;height:100dvh;width:28rem;display:none;flex-direction:column;background:var(--ui-color-surface);box-shadow:var(--ui-shadow-xl, -8px 0 32px rgba(0, 0, 0, .12));color:var(--ui-color-text);overflow:hidden;transform:translate(100%);transition:transform var(--ui-duration-slow) var(--ui-ease-out, ease-out),display var(--ui-duration-slow) allow-discrete,overlay var(--ui-duration-slow) allow-discrete}:host(.variant-drawer) dialog[open]{display:flex;transform:translate(0)}@starting-style{:host(.variant-drawer) dialog[open]{transform:translate(100%)}}:host(.variant-drawer) dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity var(--ui-duration-slow) var(--ui-ease-out, ease-out),display var(--ui-duration-slow) allow-discrete,overlay var(--ui-duration-slow) allow-discrete}:host(.variant-drawer) .drawer-surface{width:100%;height:100%}:host(.variant-popup) .popup-surface{position:fixed;bottom:calc(var(--ui-spacing-6) + 3.5rem + var(--ui-spacing-4));right:var(--ui-spacing-6);width:23.75rem;height:35rem;border-radius:var(--ui-radius-xl);box-shadow:0 12px 32px #0000002e;z-index:100}:host(.variant-popup) .fab-bubble{position:fixed;bottom:var(--ui-spacing-6);right:var(--ui-spacing-6);width:3.5rem;height:3.5rem;border-radius:var(--ui-radius-full);background:var(--ui-color-brand-ai, #b5e61c);color:var(--ui-color-text);border:none;font-family:var(--ui-font-family);font-size:var(--ui-font-size-lg);font-weight:var(--ui-font-weight-semibold);cursor:pointer;box-shadow:0 6px 16px #0000002e;transition:transform var(--ui-transition-fast),box-shadow var(--ui-transition-fast);z-index:101}:host(.variant-popup) .fab-bubble:hover{transform:scale(1.05);box-shadow:0 8px 20px #00000038}:host(.variant-popup) .fab-bubble:focus-visible{outline:none;box-shadow:var(--ui-focus-ring),0 6px 16px #0000002e}:host(.variant-inline) .inline-surface{width:100%;height:100%;min-height:24rem;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-xl)}:host(.variant-inline) llm-chat-header .close-btn{display:none}:host(llm-chat-header){display:flex;align-items:center;justify-content:space-between;gap:var(--ui-spacing-3);padding:var(--ui-spacing-3) var(--ui-spacing-4);border-bottom:1px solid var(--ui-color-border);flex-shrink:0}:host(llm-chat-header) .title-block{display:flex;align-items:center;gap:var(--ui-spacing-3);font-size:var(--ui-font-size-md);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);letter-spacing:var(--ui-letter-spacing-tight);flex:1;min-width:0}:host(llm-chat-header) .close-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;padding:0;background:transparent;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-sm);cursor:pointer;color:var(--ui-color-text-muted);transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}:host(llm-chat-header) .close-btn:hover{background-color:var(--ui-color-surface-sunken);color:var(--ui-color-text)}:host(llm-chat-header) .close-btn:focus-visible{outline:none;box-shadow:var(--ui-focus-ring)}:host(llm-chat-messages){display:flex;flex-direction:column;gap:var(--ui-spacing-3);padding:var(--ui-spacing-4);overflow-y:auto;flex:1;background:var(--ui-color-surface)}:host(llm-chat-message){display:block;max-width:85%;padding:var(--ui-spacing-3) var(--ui-spacing-4);border-radius:var(--ui-radius-lg);font-size:var(--ui-font-size-sm);line-height:var(--ui-line-height-normal);word-wrap:break-word}:host(llm-chat-message.role-assistant),:host(llm-chat-message.role-system){background:var(--ui-color-surface-sunken);color:var(--ui-color-text);align-self:flex-start}:host(llm-chat-message.role-user){background:var(--ui-color-primary);color:var(--ui-color-text-on-primary);align-self:flex-end}:host(llm-chat-message.role-system){font-style:italic;color:var(--ui-color-text-muted)}:host(llm-chat-message.is-failed){background:var(--ui-color-surface-sunken);border:1px dashed var(--ui-color-danger);color:var(--ui-color-text)}:host(llm-chat-typing){display:inline-flex;align-items:center;gap:var(--ui-spacing-1);padding:var(--ui-spacing-2) var(--ui-spacing-3);background:var(--ui-color-surface-sunken);border-radius:var(--ui-radius-lg);align-self:flex-start}:host(llm-chat-typing) .dot{width:.375rem;height:.375rem;border-radius:50%;background:var(--ui-color-text-muted);animation:llm-chat-typing 1.4s infinite ease-in-out}:host(llm-chat-typing) .dot:nth-child(2){animation-delay:.16s}:host(llm-chat-typing) .dot:nth-child(3){animation-delay:.32s}@keyframes llm-chat-typing{0%,60%,to{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}@media(prefers-reduced-motion:reduce){:host(llm-chat-typing) .dot{animation:none;opacity:.6}}:host(llm-chat-typing) .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}:host(llm-chat-suggestion){display:block}:host(llm-chat-suggestion) .chip{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ui-spacing-1);width:100%;padding:var(--ui-spacing-3) var(--ui-spacing-4);background:var(--ui-color-surface);color:var(--ui-color-text);border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-lg);font-family:var(--ui-font-family);text-align:left;cursor:pointer;transition:background-color var(--ui-transition-fast),border-color var(--ui-transition-fast)}:host(llm-chat-suggestion) .chip:hover{background-color:var(--ui-color-surface-sunken);border-color:var(--ui-color-border-hover)}:host(llm-chat-suggestion) .chip:focus-visible{outline:none;box-shadow:var(--ui-focus-ring)}:host(llm-chat-suggestion) .chip-label{font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-medium);color:var(--ui-color-text)}:host(llm-chat-suggestion) .chip-hint{font-size:var(--ui-font-size-xs);color:var(--ui-color-text-muted)}:host(llm-chat-input){display:flex;align-items:flex-end;gap:var(--ui-spacing-2);padding:var(--ui-spacing-3) var(--ui-spacing-4);border-top:1px solid var(--ui-color-border);background:var(--ui-color-surface);flex-shrink:0}:host(llm-chat-input) .field{flex:1;min-width:0;padding:var(--ui-spacing-2) var(--ui-spacing-3);border:1px solid var(--ui-color-input-border, var(--ui-color-border));border-radius:var(--ui-radius-md);background:var(--ui-color-surface-sunken);color:var(--ui-color-text);font-family:var(--ui-font-family);font-size:var(--ui-font-size-sm);line-height:var(--ui-line-height-normal);resize:none;transition:border-color var(--ui-transition-fast)}:host(llm-chat-input) .field::placeholder{color:var(--ui-color-text-muted)}:host(llm-chat-input) .field:hover:not(:disabled){border-color:var(--ui-color-input-border-hover, var(--ui-color-border-hover))}:host(llm-chat-input) .field:focus-visible{outline:none;border-color:var(--ui-color-primary);box-shadow:var(--ui-focus-ring)}:host(llm-chat-input) .field:disabled{opacity:var(--ui-opacity-disabled);cursor:not-allowed}:host(llm-chat-input) .action-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:var(--ui-spacing-2) var(--ui-spacing-4);border:1px solid transparent;border-radius:var(--ui-radius-md);font-family:var(--ui-font-family);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-medium);cursor:pointer;transition:background-color var(--ui-transition-fast),border-color var(--ui-transition-fast),transform var(--ui-transition-fast)}:host(llm-chat-input) .action-btn.variant-primary{background:var(--ui-color-primary);color:var(--ui-color-text-on-primary);border-color:var(--ui-color-primary)}:host(llm-chat-input) .action-btn.variant-primary:hover:not(:disabled){background:var(--ui-color-primary-hover);border-color:var(--ui-color-primary-hover)}:host(llm-chat-input) .action-btn.variant-danger{background:var(--ui-color-danger);color:var(--ui-color-text-on-danger);border-color:var(--ui-color-danger)}:host(llm-chat-input) .action-btn.variant-danger:hover{background:var(--ui-color-danger-hover);border-color:var(--ui-color-danger-hover)}:host(llm-chat-input) .action-btn:disabled{opacity:var(--ui-opacity-disabled);cursor:not-allowed}:host(llm-chat-input) .action-btn:focus-visible{outline:none;box-shadow:var(--ui-focus-ring)}:host(.status-streaming) llm-chat-input .field{cursor:wait}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LlmChatMessages, decorators: [{
             type: Component,
             args: [{ selector: 'llm-chat-messages', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-content />`, styles: [":host(llm-chat){display:contents}.surface{display:flex;flex-direction:column;background:var(--ui-color-surface);color:var(--ui-color-text);overflow:hidden}:host(.variant-drawer) dialog{all:unset;position:fixed;inset:0 0 0 auto;height:100dvh;width:28rem;display:none;flex-direction:column;background:var(--ui-color-surface);box-shadow:var(--ui-shadow-xl, -8px 0 32px rgba(0, 0, 0, .12));color:var(--ui-color-text);overflow:hidden;transform:translate(100%);transition:transform var(--ui-duration-slow) var(--ui-ease-out, ease-out),display var(--ui-duration-slow) allow-discrete,overlay var(--ui-duration-slow) allow-discrete}:host(.variant-drawer) dialog[open]{display:flex;transform:translate(0)}@starting-style{:host(.variant-drawer) dialog[open]{transform:translate(100%)}}:host(.variant-drawer) dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity var(--ui-duration-slow) var(--ui-ease-out, ease-out),display var(--ui-duration-slow) allow-discrete,overlay var(--ui-duration-slow) allow-discrete}:host(.variant-drawer) .drawer-surface{width:100%;height:100%}:host(.variant-popup) .popup-surface{position:fixed;bottom:calc(var(--ui-spacing-6) + 3.5rem + var(--ui-spacing-4));right:var(--ui-spacing-6);width:23.75rem;height:35rem;border-radius:var(--ui-radius-xl);box-shadow:0 12px 32px #0000002e;z-index:100}:host(.variant-popup) .fab-bubble{position:fixed;bottom:var(--ui-spacing-6);right:var(--ui-spacing-6);width:3.5rem;height:3.5rem;border-radius:var(--ui-radius-full);background:var(--ui-color-brand-ai, #b5e61c);color:var(--ui-color-text);border:none;font-family:var(--ui-font-family);font-size:var(--ui-font-size-lg);font-weight:var(--ui-font-weight-semibold);cursor:pointer;box-shadow:0 6px 16px #0000002e;transition:transform var(--ui-transition-fast),box-shadow var(--ui-transition-fast);z-index:101}:host(.variant-popup) .fab-bubble:hover{transform:scale(1.05);box-shadow:0 8px 20px #00000038}:host(.variant-popup) .fab-bubble:focus-visible{outline:none;box-shadow:var(--ui-focus-ring),0 6px 16px #0000002e}:host(.variant-inline) .inline-surface{width:100%;height:100%;min-height:24rem;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-xl)}:host(.variant-inline) llm-chat-header .close-btn{display:none}:host(llm-chat-header){display:flex;align-items:center;justify-content:space-between;gap:var(--ui-spacing-3);padding:var(--ui-spacing-3) var(--ui-spacing-4);border-bottom:1px solid var(--ui-color-border);flex-shrink:0}:host(llm-chat-header) .title-block{display:flex;align-items:center;gap:var(--ui-spacing-3);font-size:var(--ui-font-size-md);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);letter-spacing:var(--ui-letter-spacing-tight);flex:1;min-width:0}:host(llm-chat-header) .close-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;padding:0;background:transparent;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-sm);cursor:pointer;color:var(--ui-color-text-muted);transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}:host(llm-chat-header) .close-btn:hover{background-color:var(--ui-color-surface-sunken);color:var(--ui-color-text)}:host(llm-chat-header) .close-btn:focus-visible{outline:none;box-shadow:var(--ui-focus-ring)}:host(llm-chat-messages){display:flex;flex-direction:column;gap:var(--ui-spacing-3);padding:var(--ui-spacing-4);overflow-y:auto;flex:1;background:var(--ui-color-surface)}:host(llm-chat-message){display:block;max-width:85%;padding:var(--ui-spacing-3) var(--ui-spacing-4);border-radius:var(--ui-radius-lg);font-size:var(--ui-font-size-sm);line-height:var(--ui-line-height-normal);word-wrap:break-word}:host(llm-chat-message.role-assistant),:host(llm-chat-message.role-system){background:var(--ui-color-surface-sunken);color:var(--ui-color-text);align-self:flex-start}:host(llm-chat-message.role-user){background:var(--ui-color-primary);color:var(--ui-color-text-on-primary);align-self:flex-end}:host(llm-chat-message.role-system){font-style:italic;color:var(--ui-color-text-muted)}:host(llm-chat-message.is-failed){background:var(--ui-color-surface-sunken);border:1px dashed var(--ui-color-danger);color:var(--ui-color-text)}:host(llm-chat-typing){display:inline-flex;align-items:center;gap:var(--ui-spacing-1);padding:var(--ui-spacing-2) var(--ui-spacing-3);background:var(--ui-color-surface-sunken);border-radius:var(--ui-radius-lg);align-self:flex-start}:host(llm-chat-typing) .dot{width:.375rem;height:.375rem;border-radius:50%;background:var(--ui-color-text-muted);animation:llm-chat-typing 1.4s infinite ease-in-out}:host(llm-chat-typing) .dot:nth-child(2){animation-delay:.16s}:host(llm-chat-typing) .dot:nth-child(3){animation-delay:.32s}@keyframes llm-chat-typing{0%,60%,to{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}@media(prefers-reduced-motion:reduce){:host(llm-chat-typing) .dot{animation:none;opacity:.6}}:host(llm-chat-typing) .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}:host(llm-chat-suggestion){display:block}:host(llm-chat-suggestion) .chip{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ui-spacing-1);width:100%;padding:var(--ui-spacing-3) var(--ui-spacing-4);background:var(--ui-color-surface);color:var(--ui-color-text);border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-lg);font-family:var(--ui-font-family);text-align:left;cursor:pointer;transition:background-color var(--ui-transition-fast),border-color var(--ui-transition-fast)}:host(llm-chat-suggestion) .chip:hover{background-color:var(--ui-color-surface-sunken);border-color:var(--ui-color-border-hover)}:host(llm-chat-suggestion) .chip:focus-visible{outline:none;box-shadow:var(--ui-focus-ring)}:host(llm-chat-suggestion) .chip-label{font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-medium);color:var(--ui-color-text)}:host(llm-chat-suggestion) .chip-hint{font-size:var(--ui-font-size-xs);color:var(--ui-color-text-muted)}:host(llm-chat-input){display:flex;align-items:flex-end;gap:var(--ui-spacing-2);padding:var(--ui-spacing-3) var(--ui-spacing-4);border-top:1px solid var(--ui-color-border);background:var(--ui-color-surface);flex-shrink:0}:host(llm-chat-input) .field{flex:1;min-width:0;padding:var(--ui-spacing-2) var(--ui-spacing-3);border:1px solid var(--ui-color-input-border, var(--ui-color-border));border-radius:var(--ui-radius-md);background:var(--ui-color-surface-sunken);color:var(--ui-color-text);font-family:var(--ui-font-family);font-size:var(--ui-font-size-sm);line-height:var(--ui-line-height-normal);resize:none;transition:border-color var(--ui-transition-fast)}:host(llm-chat-input) .field::placeholder{color:var(--ui-color-text-muted)}:host(llm-chat-input) .field:hover:not(:disabled){border-color:var(--ui-color-input-border-hover, var(--ui-color-border-hover))}:host(llm-chat-input) .field:focus-visible{outline:none;border-color:var(--ui-color-primary);box-shadow:var(--ui-focus-ring)}:host(llm-chat-input) .field:disabled{opacity:var(--ui-opacity-disabled);cursor:not-allowed}:host(llm-chat-input) .action-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:var(--ui-spacing-2) var(--ui-spacing-4);border:1px solid transparent;border-radius:var(--ui-radius-md);font-family:var(--ui-font-family);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-medium);cursor:pointer;transition:background-color var(--ui-transition-fast),border-color var(--ui-transition-fast),transform var(--ui-transition-fast)}:host(llm-chat-input) .action-btn.variant-primary{background:var(--ui-color-primary);color:var(--ui-color-text-on-primary);border-color:var(--ui-color-primary)}:host(llm-chat-input) .action-btn.variant-primary:hover:not(:disabled){background:var(--ui-color-primary-hover);border-color:var(--ui-color-primary-hover)}:host(llm-chat-input) .action-btn.variant-danger{background:var(--ui-color-danger);color:var(--ui-color-text-on-danger);border-color:var(--ui-color-danger)}:host(llm-chat-input) .action-btn.variant-danger:hover{background:var(--ui-color-danger-hover);border-color:var(--ui-color-danger-hover)}:host(llm-chat-input) .action-btn:disabled{opacity:var(--ui-opacity-disabled);cursor:not-allowed}:host(llm-chat-input) .action-btn:focus-visible{outline:none;box-shadow:var(--ui-focus-ring)}:host(.status-streaming) llm-chat-input .field{cursor:wait}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 /**
  * A single chat message. Role drives bubble alignment and color.
  *