@akcelik/strct 4.22.0 → 4.23.0

package/fesm2022/akcelik-strct.mjs

@@ -23734,6 +23734,322 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     }, styles: [".strct-windock{display:inline-flex;align-items:center;gap:6px}.strct-windock__chip{display:inline-flex;align-items:center;gap:2px;padding-inline:8px 4px;border:1px solid var(--b2);border-radius:var(--radius-full, 999px);background:var(--bg-1);font-size:12px}.strct-windock__open,.strct-windock__close{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:3px 2px;border-radius:var(--radius-sm)}.strct-windock__open:hover{color:var(--acc)}.strct-windock__close{display:inline-flex;color:var(--t3)}.strct-windock__close:hover{color:var(--critical)}.strct-windock__open:focus-visible,.strct-windock__close:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }] } });
 
+/** A card the message carries — an action to approve, a result to read. */
+class StrctChatAttachment {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatAttachment, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctChatAttachment, isStandalone: true, selector: "[strctChatAttachment]", host: { classAttribute: "strct-chat__attachment" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatAttachment, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctChatAttachment]', host: { class: 'strct-chat__attachment' } }]
+        }] });
+/**
+ * A conversation is a thread of messages from two or more authors, and an
+ * assistant panel is built from the library like every other panel.
+ *
+ *   <strct-chat-thread [busy]="thinking()" label="Assistant conversation">
+ *     …<strct-chat-message author="user">…</strct-chat-message>…
+ *   </strct-chat-thread>
+ *
+ * The thread is a `role="log"` with `aria-live="polite"`: a streaming reply is
+ * announced once, when it finishes, rather than token by token.
+ */
+class StrctChatThread {
+    /** The assistant is composing: shows the typing indicator after the last message. */
+    busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The thread's accessible name. */
+    label = input('Conversation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** What the typing indicator says to assistive tech. */
+    typingLabel = input('Assistant is typing', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typingLabel" }] : /* istanbul ignore next */ []));
+    /** Keep the latest message in view — unless the reader scrolled up. */
+    autoScroll = input(true, { ...(ngDevMode ? { debugName: "autoScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    host = inject(ElementRef);
+    /** False once the reader scrolls away from the end; true again at the end. */
+    atEnd = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atEnd" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => this.scrollToEnd());
+        effect(() => {
+            this.busy();
+            if (this.autoScroll() && this.atEnd())
+                queueMicrotask(() => this.scrollToEnd());
+        });
+    }
+    onScroll() {
+        const el = this.host.nativeElement;
+        this.atEnd.set(el.scrollHeight - el.scrollTop - el.clientHeight < 24);
+    }
+    /** Jump to the newest message. */
+    scrollToEnd() {
+        const el = this.host.nativeElement;
+        el.scrollTop = el.scrollHeight;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatThread, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctChatThread, isStandalone: true, selector: "strct-chat-thread", inputs: { busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, typingLabel: { classPropertyName: "typingLabel", publicName: "typingLabel", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "log", "aria-live": "polite", "aria-relevant": "additions" }, listeners: { "scroll": "onScroll()" }, properties: { "attr.aria-label": "label()", "attr.aria-busy": "busy() ? \"true\" : null" }, classAttribute: "strct-chat" }, ngImport: i0, template: `
+    <div class="strct-chat__list" #list><ng-content /></div>
+    @if (busy()) {
+      <div class="strct-chat__typing" [attr.aria-label]="typingLabel()" role="status">
+        <span class="strct-chat__dot"></span>
+        <span class="strct-chat__dot"></span>
+        <span class="strct-chat__dot"></span>
+      </div>
+    }
+  `, isInline: true, styles: [".strct-chat{display:flex;flex-direction:column;gap:var(--space-3);min-height:0;overflow:auto;padding:var(--space-3)}.strct-chat__list{display:flex;flex-direction:column;gap:var(--space-3)}.strct-chat__typing{display:inline-flex;align-items:center;gap:4px;padding-inline-start:38px}.strct-chat__dot{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:strct-chat-bounce 1.1s ease-in-out infinite}.strct-chat__dot:nth-child(2){animation-delay:.15s}.strct-chat__dot:nth-child(3){animation-delay:.3s}@keyframes strct-chat-bounce{0%,70%,to{opacity:.35;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}@media(prefers-reduced-motion:reduce){.strct-chat__dot{animation:none;opacity:.55}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatThread, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-chat-thread', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <div class="strct-chat__list" #list><ng-content /></div>
+    @if (busy()) {
+      <div class="strct-chat__typing" [attr.aria-label]="typingLabel()" role="status">
+        <span class="strct-chat__dot"></span>
+        <span class="strct-chat__dot"></span>
+        <span class="strct-chat__dot"></span>
+      </div>
+    }
+  `, host: {
+                        class: 'strct-chat',
+                        role: 'log',
+                        'aria-live': 'polite',
+                        'aria-relevant': 'additions',
+                        '[attr.aria-label]': 'label()',
+                        '[attr.aria-busy]': 'busy() ? "true" : null',
+                        '(scroll)': 'onScroll()',
+                    }, styles: [".strct-chat{display:flex;flex-direction:column;gap:var(--space-3);min-height:0;overflow:auto;padding:var(--space-3)}.strct-chat__list{display:flex;flex-direction:column;gap:var(--space-3)}.strct-chat__typing{display:inline-flex;align-items:center;gap:4px;padding-inline-start:38px}.strct-chat__dot{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:strct-chat-bounce 1.1s ease-in-out infinite}.strct-chat__dot:nth-child(2){animation-delay:.15s}.strct-chat__dot:nth-child(3){animation-delay:.3s}@keyframes strct-chat-bounce{0%,70%,to{opacity:.35;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}@media(prefers-reduced-motion:reduce){.strct-chat__dot{animation:none;opacity:.55}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], typingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "typingLabel", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }] } });
+/**
+ * One message in a {@link StrctChatThread}: an `article` labelled by its
+ * author, with the author's avatar, its content, and any attachment card.
+ */
+class StrctChatMessage {
+    /** Who wrote it. */
+    author = input('assistant', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "author" }] : /* istanbul ignore next */ []));
+    /** The author's name, shown above the bubble. */
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** An icon avatar instead of initials — an assistant is an icon. */
+    avatarIcon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "avatarIcon" }] : /* istanbul ignore next */ []));
+    /** The reply is still arriving: a caret follows the content. */
+    streaming = input(false, { ...(ngDevMode ? { debugName: "streaming" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** When it was sent. */
+    time = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []));
+    /** How the time reads (localisable). */
+    timeFormat = input((d) => d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    /** Default names per author, overridable with `name` (and localisable). */
+    authorNames = input({
+        user: 'You',
+        assistant: 'Assistant',
+        system: 'System',
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "authorNames" }] : /* istanbul ignore next */ []));
+    displayName = computed(() => this.name() || this.authorNames()[this.author()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayName" }] : /* istanbul ignore next */ []));
+    shortTime = computed(() => {
+        const t = this.time();
+        return t ? this.timeFormat()(t) : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shortTime" }] : /* istanbul ignore next */ []));
+    isoTime = computed(() => this.time()?.toISOString() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isoTime" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctChatMessage, isStandalone: true, selector: "strct-chat-message", inputs: { author: { classPropertyName: "author", publicName: "author", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatarIcon: { classPropertyName: "avatarIcon", publicName: "avatarIcon", isSignal: true, isRequired: false, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: false, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, authorNames: { classPropertyName: "authorNames", publicName: "authorNames", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "article" }, properties: { "attr.data-author": "author()", "attr.aria-label": "displayName()", "attr.aria-busy": "streaming() ? \"true\" : null" }, classAttribute: "strct-msg" }, ngImport: i0, template: `
+    @if (author() !== 'system') {
+      <strct-avatar
+        class="strct-msg__avatar"
+        size="sm"
+        [name]="displayName()"
+        [icon]="avatarIcon()"
+        [tone]="author() === 'user' ? 'neutral' : 'accent-soft'"
+      />
+    }
+    <div class="strct-msg__body">
+      @if (author() !== 'system' && (name() || time())) {
+        <div class="strct-msg__meta">
+          @if (name()) {
+            <span class="strct-msg__name">{{ name() }}</span>
+          }
+          @if (time()) {
+            <time class="strct-msg__time" [attr.datetime]="isoTime()">{{ shortTime() }}</time>
+          }
+        </div>
+      }
+      <div class="strct-msg__bubble">
+        <ng-content />
+        @if (streaming()) {
+          <span class="strct-msg__caret" aria-hidden="true"></span>
+        }
+      </div>
+      <ng-content select="[strctChatAttachment]" />
+    </div>
+  `, isInline: true, styles: [".strct-msg{display:flex;align-items:flex-start;gap:var(--space-2);min-width:0}.strct-msg[data-author=user]{flex-direction:row-reverse}.strct-msg[data-author=system]{justify-content:center}.strct-msg__avatar{flex:none}.strct-msg__body{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:80%}.strct-msg[data-author=user] .strct-msg__body{align-items:flex-end}.strct-msg__meta{display:flex;align-items:baseline;gap:6px;font-size:var(--text-sm);color:var(--t3)}.strct-msg__name{font-weight:600}.strct-msg__bubble{padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);color:var(--t1);font-size:13px;line-height:1.5;min-width:0;overflow-wrap:anywhere}.strct-msg[data-author=user] .strct-msg__bubble{background:var(--acc-s);border-color:var(--acc30)}.strct-msg[data-author=system] .strct-msg__bubble{border:0;background:none;color:var(--t3);font-size:var(--text-sm);text-align:center}.strct-msg__caret{display:inline-block;width:2px;height:1em;margin-inline-start:2px;vertical-align:text-bottom;background:var(--acc);animation:strct-chat-caret 1s steps(2,start) infinite}@keyframes strct-chat-caret{to{opacity:0}}@media(prefers-reduced-motion:reduce){.strct-msg__caret{animation:none}}.strct-chat__attachment{display:block;margin-block-start:4px}\n"], dependencies: [{ kind: "component", type: StrctAvatar, selector: "strct-avatar", inputs: ["icon", "shape", "tone", "src", "name", "size", "status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatMessage, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-chat-message', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctAvatar], template: `
+    @if (author() !== 'system') {
+      <strct-avatar
+        class="strct-msg__avatar"
+        size="sm"
+        [name]="displayName()"
+        [icon]="avatarIcon()"
+        [tone]="author() === 'user' ? 'neutral' : 'accent-soft'"
+      />
+    }
+    <div class="strct-msg__body">
+      @if (author() !== 'system' && (name() || time())) {
+        <div class="strct-msg__meta">
+          @if (name()) {
+            <span class="strct-msg__name">{{ name() }}</span>
+          }
+          @if (time()) {
+            <time class="strct-msg__time" [attr.datetime]="isoTime()">{{ shortTime() }}</time>
+          }
+        </div>
+      }
+      <div class="strct-msg__bubble">
+        <ng-content />
+        @if (streaming()) {
+          <span class="strct-msg__caret" aria-hidden="true"></span>
+        }
+      </div>
+      <ng-content select="[strctChatAttachment]" />
+    </div>
+  `, host: {
+                        class: 'strct-msg',
+                        role: 'article',
+                        '[attr.data-author]': 'author()',
+                        '[attr.aria-label]': 'displayName()',
+                        // A streaming reply is announced when it finishes, not token by token.
+                        '[attr.aria-busy]': 'streaming() ? "true" : null',
+                    }, styles: [".strct-msg{display:flex;align-items:flex-start;gap:var(--space-2);min-width:0}.strct-msg[data-author=user]{flex-direction:row-reverse}.strct-msg[data-author=system]{justify-content:center}.strct-msg__avatar{flex:none}.strct-msg__body{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:80%}.strct-msg[data-author=user] .strct-msg__body{align-items:flex-end}.strct-msg__meta{display:flex;align-items:baseline;gap:6px;font-size:var(--text-sm);color:var(--t3)}.strct-msg__name{font-weight:600}.strct-msg__bubble{padding:var(--space-2) var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);color:var(--t1);font-size:13px;line-height:1.5;min-width:0;overflow-wrap:anywhere}.strct-msg[data-author=user] .strct-msg__bubble{background:var(--acc-s);border-color:var(--acc30)}.strct-msg[data-author=system] .strct-msg__bubble{border:0;background:none;color:var(--t3);font-size:var(--text-sm);text-align:center}.strct-msg__caret{display:inline-block;width:2px;height:1em;margin-inline-start:2px;vertical-align:text-bottom;background:var(--acc);animation:strct-chat-caret 1s steps(2,start) infinite}@keyframes strct-chat-caret{to{opacity:0}}@media(prefers-reduced-motion:reduce){.strct-msg__caret{animation:none}}.strct-chat__attachment{display:block;margin-block-start:4px}\n"] }]
+        }], propDecorators: { author: [{ type: i0.Input, args: [{ isSignal: true, alias: "author", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], avatarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarIcon", required: false }] }], streaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "streaming", required: false }] }], time: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], authorNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "authorNames", required: false }] }] } });
+/**
+ * The box the user writes in: it grows with the text up to `maxRows`, sends on
+ * Enter and breaks a line on Shift+Enter — and never sends mid-composition, so
+ * an IME's Enter commits the candidate instead of the message.
+ */
+class StrctChatComposer {
+    /** The draft (two-way). */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Placeholder text. */
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** The field's accessible name (visually hidden). */
+    label = input('Message', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Disabled while the assistant is busy, say. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** How tall the box grows before it scrolls. */
+    maxRows = input(8, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxRows" }] : /* istanbul ignore next */ []));
+    /** The send button's accessible name. */
+    sendLabel = input('Send', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sendLabel" }] : /* istanbul ignore next */ []));
+    /** The user sent the draft. */
+    send = output();
+    inputId = `strct-composer-${++composerCounter}`;
+    /** True while an IME is composing — Enter must commit, not send. */
+    composing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "composing" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    onInput(event) {
+        const el = event.target;
+        this.value.set(el.value);
+        this.grow(el);
+    }
+    /** Grow with the text: reset first, so deleting a line shrinks it again. */
+    grow(el) {
+        el.style.height = 'auto';
+        el.style.height = `${el.scrollHeight}px`;
+    }
+    onEnter(event) {
+        const e = event;
+        if (e.shiftKey || this.composing() || e.isComposing)
+            return;
+        e.preventDefault();
+        this.submit();
+    }
+    submit() {
+        const text = this.value().trim();
+        if (!text || this.disabled())
+            return;
+        this.send.emit(text);
+        this.value.set('');
+        const el = this.host.nativeElement.querySelector('textarea');
+        if (el) {
+            el.value = '';
+            this.grow(el);
+            el.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatComposer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctChatComposer, isStandalone: true, selector: "strct-chat-composer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, sendLabel: { classPropertyName: "sendLabel", publicName: "sendLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", send: "send" }, host: { classAttribute: "strct-composer" }, ngImport: i0, template: `
+    <label class="strct-composer__label" [attr.for]="inputId">{{ label() }}</label>
+    <div class="strct-composer__box">
+      <textarea
+        class="strct-composer__input"
+        [id]="inputId"
+        rows="1"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [value]="value()"
+        [style.max-height.px]="maxRows() * 20"
+        (input)="onInput($event)"
+        (compositionstart)="composing.set(true)"
+        (compositionend)="composing.set(false)"
+        (keydown.enter)="onEnter($event)"
+      ></textarea>
+      <button
+        type="button"
+        class="strct-composer__send"
+        [attr.aria-label]="sendLabel()"
+        [disabled]="disabled() || !value().trim()"
+        (click)="submit()"
+      >
+        <strct-icon strictName="arrowUp" [size]="15" [strokeWidth]="1.8" />
+      </button>
+    </div>
+  `, isInline: true, styles: [".strct-composer{display:block}.strct-composer__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-composer__box{display:flex;align-items:flex-end;gap:4px;padding:4px 4px 4px var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);transition:border-color .14s ease,box-shadow .14s ease}.strct-composer__box:focus-within{border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-composer__input{flex:1;min-width:0;border:0;background:none;resize:none;padding:6px 0;font-family:var(--font);font-size:13px;line-height:20px;color:var(--t1);overflow-y:auto}.strct-composer__input:focus{outline:none}.strct-composer__input::placeholder{color:var(--t3)}.strct-composer__send{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border:0;border-radius:var(--radius-md);background:var(--acc);color:var(--inv);cursor:pointer}.strct-composer__send:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.strct-composer__send:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChatComposer, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-chat-composer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    <label class="strct-composer__label" [attr.for]="inputId">{{ label() }}</label>
+    <div class="strct-composer__box">
+      <textarea
+        class="strct-composer__input"
+        [id]="inputId"
+        rows="1"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [value]="value()"
+        [style.max-height.px]="maxRows() * 20"
+        (input)="onInput($event)"
+        (compositionstart)="composing.set(true)"
+        (compositionend)="composing.set(false)"
+        (keydown.enter)="onEnter($event)"
+      ></textarea>
+      <button
+        type="button"
+        class="strct-composer__send"
+        [attr.aria-label]="sendLabel()"
+        [disabled]="disabled() || !value().trim()"
+        (click)="submit()"
+      >
+        <strct-icon strictName="arrowUp" [size]="15" [strokeWidth]="1.8" />
+      </button>
+    </div>
+  `, host: { class: 'strct-composer' }, styles: [".strct-composer{display:block}.strct-composer__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-composer__box{display:flex;align-items:flex-end;gap:4px;padding:4px 4px 4px var(--space-3);border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);transition:border-color .14s ease,box-shadow .14s ease}.strct-composer__box:focus-within{border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-composer__input{flex:1;min-width:0;border:0;background:none;resize:none;padding:6px 0;font-family:var(--font);font-size:13px;line-height:20px;color:var(--t1);overflow-y:auto}.strct-composer__input:focus{outline:none}.strct-composer__input::placeholder{color:var(--t3)}.strct-composer__send{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border:0;border-radius:var(--radius-md);background:var(--acc);color:var(--inv);cursor:pointer}.strct-composer__send:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.strct-composer__send:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], sendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendLabel", required: false }] }], send: [{ type: i0.Output, args: ["send"] }] } });
+let composerCounter = 0;
+
 /**
  * A value change, as one phrase: "v10.27 → v10.28". The old value is muted, the
  * arrow is the library's, the new one is emphasised — and assistive tech hears
@@ -25650,5 +25966,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowService, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
+export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowService, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 //# sourceMappingURL=akcelik-strct.mjs.map