ng-primitives 0.78.0 → 0.80.0

package/fesm2022/ng-primitives-ai.mjs

@@ -0,0 +1,593 @@
+import * as i0 from '@angular/core';
+import { HostListener, Directive, input, booleanAttribute, computed, output, signal, inject, ElementRef, DestroyRef, numberAttribute } from '@angular/core';
+import { injectElementRef, explicitEffect, fromMutationObserver, fromResizeEvent } from 'ng-primitives/internal';
+import { safeTakeUntilDestroyed } from 'ng-primitives/utils';
+import { fromEvent, Subject } from 'rxjs';
+import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { setupButton } from 'ng-primitives/button';
+
+/**
+ * The state token  for the PromptComposer primitive.
+ */
+const NgpPromptComposerStateToken = createStateToken('PromptComposer');
+/**
+ * Provides the PromptComposer state.
+ */
+const providePromptComposerState = createStateProvider(NgpPromptComposerStateToken);
+/**
+ * Injects the PromptComposer state.
+ */
+const injectPromptComposerState = createStateInjector(NgpPromptComposerStateToken);
+/**
+ * The PromptComposer state registration function.
+ */
+const promptComposerState = createState(NgpPromptComposerStateToken);
+
+/**
+ * The state token  for the Thread primitive.
+ */
+const NgpThreadStateToken = createStateToken('Thread');
+/**
+ * Provides the Thread state.
+ */
+const provideThreadState = createStateProvider(NgpThreadStateToken);
+/**
+ * Injects the Thread state.
+ */
+const injectThreadState = createStateInjector(NgpThreadStateToken);
+/**
+ * The Thread state registration function.
+ */
+const threadState = createState(NgpThreadStateToken);
+
+/**
+ * The state token  for the PromptComposerInput primitive.
+ */
+const NgpPromptComposerInputStateToken = createStateToken('PromptComposerInput');
+/**
+ * Provides the PromptComposerInput state.
+ */
+const providePromptComposerInputState = createStateProvider(NgpPromptComposerInputStateToken);
+/**
+ * Injects the PromptComposerInput state.
+ */
+const injectPromptComposerInputState = createStateInjector(NgpPromptComposerInputStateToken);
+/**
+ * The PromptComposerInput state registration function.
+ */
+const promptComposerInputState = createState(NgpPromptComposerInputStateToken);
+
+class NgpPromptComposerInput {
+    constructor() {
+        this.thread = injectThreadState();
+        this.composer = injectPromptComposerState();
+        this.element = injectElementRef();
+        /** The state of the prompt composer input. */
+        this.state = promptComposerInputState(this);
+        // set the initial state
+        this.composer().prompt.set(this.element.nativeElement.value);
+        // listen for requests to set the prompt
+        this.thread()
+            .requestPrompt.pipe(safeTakeUntilDestroyed())
+            .subscribe(value => {
+            // set the cursor to the end
+            this.composer().prompt.set(value);
+            this.element.nativeElement.setSelectionRange(value.length, value.length);
+            this.element.nativeElement.focus();
+        });
+        // listen for changes to the text content
+        fromEvent(this.element.nativeElement, 'input')
+            .pipe(safeTakeUntilDestroyed())
+            .subscribe(() => this.composer().prompt.set(this.element.nativeElement.value));
+        // any time the prompt changes, update the input value if needed
+        explicitEffect([this.composer().prompt], ([prompt]) => (this.element.nativeElement.value = prompt));
+    }
+    /**
+     * If the user presses Enter, the form will be submitted, unless they are holding Shift.
+     * This directive automatically handles that behavior.
+     */
+    onEnterKey(event) {
+        if (event.shiftKey) {
+            return;
+        }
+        event.preventDefault();
+        // if there is no text content, do nothing
+        if (this.element.nativeElement.value.trim().length === 0) {
+            return;
+        }
+        this.composer().submitPrompt();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpPromptComposerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpPromptComposerInput, isStandalone: true, selector: "input[ngpPromptComposerInput], textarea[ngpPromptComposerInput]", host: { listeners: { "keydown.enter": "onEnterKey($event)" } }, providers: [providePromptComposerInputState()], exportAs: ["ngpPromptComposerInput"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpPromptComposerInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[ngpPromptComposerInput], textarea[ngpPromptComposerInput]',
+                    exportAs: 'ngpPromptComposerInput',
+                    providers: [providePromptComposerInputState()],
+                }]
+        }], ctorParameters: () => [], propDecorators: { onEnterKey: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }] } });
+
+/**
+ * The state token  for the PromptComposerSubmit primitive.
+ */
+const NgpPromptComposerSubmitStateToken = createStateToken('PromptComposerSubmit');
+/**
+ * Provides the PromptComposerSubmit state.
+ */
+const providePromptComposerSubmitState = createStateProvider(NgpPromptComposerSubmitStateToken);
+/**
+ * Injects the PromptComposerSubmit state.
+ */
+const injectPromptComposerSubmitState = createStateInjector(NgpPromptComposerSubmitStateToken);
+/**
+ * The PromptComposerSubmit state registration function.
+ */
+const promptComposerSubmitState = createState(NgpPromptComposerSubmitStateToken);
+
+class NgpPromptComposerSubmit {
+    constructor() {
+        this.composer = injectPromptComposerState();
+        /** Whether the submit button should be disabled */
+        this.disabled = input(false, {
+            transform: booleanAttribute,
+        });
+        /** Whether dictation is currently active */
+        this.isDictating = computed(() => this.composer().isDictating());
+        /** The state of the prompt composer submit. */
+        this.state = promptComposerSubmitState(this);
+        setupButton({
+            disabled: computed(() => this.state.disabled() || this.composer().hasPrompt() === false),
+        });
+    }
+    onClick() {
+        this.composer().submitPrompt();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpPromptComposerSubmit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpPromptComposerSubmit, isStandalone: true, selector: "button[ngpPromptComposerSubmit]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "attr.data-prompt": "composer().hasPrompt() ? \"\" : null", "attr.data-dictating": "isDictating() ? \"\" : null", "attr.data-dictation-supported": "composer().dictationSupported ? \"\" : null" } }, providers: [providePromptComposerSubmitState()], exportAs: ["ngpPromptComposerSubmit"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpPromptComposerSubmit, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[ngpPromptComposerSubmit]',
+                    exportAs: 'ngpPromptComposerSubmit',
+                    providers: [providePromptComposerSubmitState()],
+                    host: {
+                        type: 'button',
+                        '[attr.data-prompt]': 'composer().hasPrompt() ? "" : null',
+                        '[attr.data-dictating]': 'isDictating() ? "" : null',
+                        '[attr.data-dictation-supported]': 'composer().dictationSupported ? "" : null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class NgpPromptComposer {
+    constructor() {
+        this.thread = injectThreadState();
+        /** Emits whenever the user submits the prompt. */
+        this.submit = output({ alias: 'ngpPromptComposerSubmit' });
+        /** @internal Store the current prompt text. */
+        this.prompt = signal('');
+        /** @internal Track whether the prompt is currently being dictated */
+        this.isDictating = signal(false);
+        /** @internal Determine whether the prompt input has content */
+        this.hasPrompt = computed(() => this.prompt().trim().length > 0);
+        /** Whether dictation is supported by the browser */
+        this.dictationSupported = !!(globalThis.SpeechRecognition || globalThis.webkitSpeechRecognition);
+        /** The state of the prompt composer. */
+        this.state = promptComposerState(this);
+    }
+    /**
+     * @internal
+     * Submits the current prompt if there is content, and clears the input.
+     */
+    submitPrompt() {
+        if (this.hasPrompt()) {
+            this.submit.emit(this.prompt());
+            this.prompt.set('');
+            this.thread().scrollToBottom('smooth');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpPromptComposer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpPromptComposer, isStandalone: true, selector: "[ngpPromptComposer]", outputs: { submit: "ngpPromptComposerSubmit" }, host: { properties: { "attr.data-prompt": "hasPrompt() ? \"\" : null", "attr.data-dictating": "isDictating() ? \"\" : null", "attr.data-dictation-supported": "dictationSupported ? \"\" : null" } }, providers: [providePromptComposerState()], exportAs: ["ngpPromptComposer"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpPromptComposer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpPromptComposer]',
+                    exportAs: 'ngpPromptComposer',
+                    providers: [providePromptComposerState()],
+                    host: {
+                        '[attr.data-prompt]': 'hasPrompt() ? "" : null',
+                        '[attr.data-dictating]': 'isDictating() ? "" : null',
+                        '[attr.data-dictation-supported]': 'dictationSupported ? "" : null',
+                    },
+                }]
+        }] });
+
+/**
+ * The state token  for the ThreadMessage primitive.
+ */
+const NgpThreadMessageStateToken = createStateToken('ThreadMessage');
+/**
+ * Provides the ThreadMessage state.
+ */
+const provideThreadMessageState = createStateProvider(NgpThreadMessageStateToken);
+/**
+ * Injects the ThreadMessage state.
+ */
+const injectThreadMessageState = createStateInjector(NgpThreadMessageStateToken);
+/**
+ * The ThreadMessage state registration function.
+ */
+const threadMessageState = createState(NgpThreadMessageStateToken);
+
+class NgpThreadMessage {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+        this.destroyRef = inject(DestroyRef);
+        this.thread = injectThreadState();
+        /** The state of the thread message. */
+        this.state = threadMessageState(this);
+        // Watch for content changes (like streaming text) and maintain scroll position
+        fromMutationObserver(this.elementRef.nativeElement, {
+            childList: true, // Watch for new/removed child nodes
+            subtree: true, // Watch changes in all descendants
+            characterData: true, // Watch for text content changes in text nodes
+            attributes: false, // We don't care about attribute changes for content streaming
+        })
+            .pipe(safeTakeUntilDestroyed())
+            .subscribe(() => {
+            // if this is the last message, scroll to bottom
+            if (this.thread().isLastMessage(this)) {
+                this.thread().scrollToBottom('smooth');
+            }
+        });
+        this.thread().registerMessage(this);
+        this.destroyRef.onDestroy(() => this.thread().unregisterMessage(this));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpThreadMessage, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpThreadMessage, isStandalone: true, selector: "[ngpThreadMessage]", providers: [provideThreadMessageState()], exportAs: ["ngpThreadMessage"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpThreadMessage, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpThreadMessage]',
+                    exportAs: 'ngpThreadMessage',
+                    providers: [provideThreadMessageState()],
+                }]
+        }], ctorParameters: () => [] });
+
+class NgpThread {
+    constructor() {
+        this.messages = [];
+        /** @internal emit event to trigger scrolling to bottom */
+        this.scrollRequest = new Subject();
+        /** @internal emit event to trigger setting the prompt */
+        this.requestPrompt = new Subject();
+        /** The state of the thread. */
+        this.state = threadState(this);
+    }
+    scrollToBottom(behavior) {
+        this.scrollRequest.next(behavior);
+    }
+    /** @internal Register a message with the thread */
+    registerMessage(message) {
+        this.messages.push(message);
+    }
+    /** @internal Unregister a message from the thread */
+    unregisterMessage(message) {
+        this.messages = this.messages.filter(m => m !== message);
+    }
+    /** @internal Determine if the given message is the last message in the thread */
+    isLastMessage(message) {
+        return this.messages.length > 0 && this.messages[this.messages.length - 1] === message;
+    }
+    /** @internal Set the prompt text in the associated prompt composer */
+    setPrompt(value) {
+        this.requestPrompt.next(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpThread, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpThread, isStandalone: true, selector: "[ngpThread]", providers: [provideThreadState()], exportAs: ["ngpThread"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpThread, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpThread]',
+                    exportAs: 'ngpThread',
+                    providers: [provideThreadState()],
+                }]
+        }] });
+
+/**
+ * The state token  for the PromptComposerDictation primitive.
+ */
+const NgpPromptComposerDictationStateToken = createStateToken('PromptComposerDictation');
+/**
+ * Provides the PromptComposerDictation state.
+ */
+const providePromptComposerDictationState = createStateProvider(NgpPromptComposerDictationStateToken);
+/**
+ * Injects the PromptComposerDictation state.
+ */
+const injectPromptComposerDictationState = createStateInjector(NgpPromptComposerDictationStateToken);
+/**
+ * The PromptComposerDictation state registration function.
+ */
+const promptComposerDictationState = createState(NgpPromptComposerDictationStateToken);
+
+class NgpPromptComposerDictation {
+    constructor() {
+        this.composer = injectPromptComposerState();
+        this.recognition = null;
+        this.basePrompt = signal(''); // Store the prompt before dictation started
+        /** Whether the submit button should be disabled. */
+        this.disabled = input(false, {
+            transform: booleanAttribute,
+        });
+        /** Whether dictation is currently active */
+        this.isDictating = computed(() => this.composer().isDictating());
+        /** The state of the prompt composer. */
+        this.state = promptComposerDictationState(this);
+        setupButton({
+            disabled: computed(() => this.state.disabled() || this.composer().dictationSupported === false),
+        });
+        this.initializeSpeechRecognition();
+    }
+    ngOnDestroy() {
+        if (this.recognition) {
+            this.recognition.stop();
+            this.recognition = null;
+        }
+    }
+    onClick() {
+        if (!this.recognition) {
+            console.warn('Speech recognition is not supported in this browser');
+            return;
+        }
+        if (this.composer().isDictating()) {
+            this.stopDictation();
+        }
+        else {
+            this.startDictation();
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape' && this.composer().isDictating()) {
+            event.preventDefault();
+            this.stopDictation();
+        }
+    }
+    initializeSpeechRecognition() {
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (!SpeechRecognition) {
+            return;
+        }
+        this.recognition = new SpeechRecognition();
+        this.recognition.continuous = true; // Enable continuous listening
+        this.recognition.interimResults = true; // Enable interim results for live updates
+        this.recognition.lang = 'en-US';
+        this.recognition.onstart = () => {
+            this.composer().isDictating.set(true);
+            // Store the current prompt as the base
+            this.basePrompt.set(this.composer().prompt());
+        };
+        this.recognition.onresult = (event) => {
+            let interimTranscript = '';
+            let finalTranscript = '';
+            // Process all results
+            for (let i = 0; i < event.results.length; i++) {
+                const transcript = event.results[i][0].transcript;
+                if (event.results[i].isFinal) {
+                    finalTranscript += transcript;
+                }
+                else {
+                    interimTranscript += transcript;
+                }
+            }
+            // Combine base prompt with final transcript and interim transcript
+            const baseText = this.basePrompt();
+            const separator = baseText ? ' ' : '';
+            const newPrompt = baseText + separator + finalTranscript + interimTranscript;
+            this.composer().prompt.set(newPrompt.trim());
+        };
+        this.recognition.onend = () => {
+            this.composer().isDictating.set(false);
+        };
+        this.recognition.onerror = (event) => {
+            console.error('Speech recognition error:', event.error);
+            this.composer().isDictating.set(false);
+        };
+    }
+    startDictation() {
+        if (this.recognition && !this.composer().isDictating()) {
+            this.recognition.start();
+        }
+    }
+    stopDictation() {
+        if (this.recognition && this.composer().isDictating()) {
+            this.recognition.stop();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpPromptComposerDictation, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpPromptComposerDictation, isStandalone: true, selector: "button[ngpPromptComposerDictation]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()", "document:keydown": "onKeydown($event)" }, properties: { "attr.data-dictating": "isDictating() ? \"\" : null", "attr.data-dictation-supported": "composer().dictationSupported ? \"\" : null", "attr.data-prompt": "composer().hasPrompt() ? \"\" : null" } }, providers: [providePromptComposerDictationState()], exportAs: ["ngpPromptComposerDictation"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpPromptComposerDictation, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[ngpPromptComposerDictation]',
+                    exportAs: 'ngpPromptComposerDictation',
+                    providers: [providePromptComposerDictationState()],
+                    host: {
+                        type: 'button',
+                        '[attr.data-dictating]': 'isDictating() ? "" : null',
+                        '[attr.data-dictation-supported]': 'composer().dictationSupported ? "" : null',
+                        '[attr.data-prompt]': 'composer().hasPrompt() ? "" : null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+/**
+ * The state token  for the ThreadViewport primitive.
+ */
+const NgpThreadViewportStateToken = createStateToken('ThreadViewport');
+/**
+ * Provides the ThreadViewport state.
+ */
+const provideThreadViewportState = createStateProvider(NgpThreadViewportStateToken);
+/**
+ * Injects the ThreadViewport state.
+ */
+const injectThreadViewportState = createStateInjector(NgpThreadViewportStateToken);
+/**
+ * The ThreadViewport state registration function.
+ */
+const threadViewportState = createState(NgpThreadViewportStateToken);
+
+class NgpThreadViewport {
+    constructor() {
+        this.thread = injectThreadState();
+        this.elementRef = inject((ElementRef));
+        /**
+         * The distance in pixels from the bottom of the scrollable container that is considered "at the bottom".
+         * When the user scrolls within this threshold, the thread is treated as being at the bottom.
+         * This value is used to determine whether automatic scrolling to the bottom should occur,
+         * for example when new content is added or the container is resized.
+         *
+         * @default 70
+         */
+        this.threshold = input(70, {
+            alias: 'ngpThreadViewportThreshold',
+            transform: numberAttribute,
+        });
+        /**
+         * Whether the thread should automatically scroll to the bottom when new content is added.
+         */
+        this.autoScroll = input(true, {
+            alias: 'ngpThreadViewportAutoScroll',
+            transform: booleanAttribute,
+        });
+        /** Store the last known scroll position */
+        this.lastScrollTop = 0;
+        /** Determine if we are at the bottom of the scrollable container (within the threshold) */
+        this.isAtBottom = false;
+        /** The state of the thread viewport. */
+        this.state = threadViewportState(this);
+        // listen for scroll requests from the thread
+        this.thread()
+            .scrollRequest.pipe(safeTakeUntilDestroyed())
+            .subscribe(behavior => this.scrollToBottom(behavior));
+        fromResizeEvent(this.elementRef.nativeElement)
+            .pipe(safeTakeUntilDestroyed())
+            .subscribe(() => {
+            if (this.isAtBottom) {
+                this.scrollToBottom('instant');
+            }
+            this.onScroll();
+        });
+    }
+    /**
+     * Scroll the container to the bottom.
+     * @internal
+     */
+    scrollToBottom(behavior) {
+        if (!this.state.autoScroll()) {
+            return;
+        }
+        this.elementRef.nativeElement.scrollTo({
+            top: this.elementRef.nativeElement.scrollHeight,
+            behavior,
+        });
+    }
+    onScroll() {
+        const element = this.elementRef.nativeElement;
+        const isAtBottom = element.scrollHeight - element.scrollTop <= element.clientHeight;
+        if (isAtBottom || this.lastScrollTop >= element.scrollTop) {
+            this.isAtBottom = isAtBottom;
+        }
+        this.lastScrollTop = element.scrollTop;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpThreadViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpThreadViewport, isStandalone: true, selector: "[ngpThreadViewport]", inputs: { threshold: { classPropertyName: "threshold", publicName: "ngpThreadViewportThreshold", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "ngpThreadViewportAutoScroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "scroll": "onScroll()" } }, providers: [provideThreadViewportState()], exportAs: ["ngpThreadViewport"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpThreadViewport, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpThreadViewport]',
+                    exportAs: 'ngpThreadViewport',
+                    providers: [provideThreadViewportState()],
+                }]
+        }], ctorParameters: () => [], propDecorators: { onScroll: [{
+                type: HostListener,
+                args: ['scroll']
+            }] } });
+
+/**
+ * The state token  for the ThreadSuggestion primitive.
+ */
+const NgpThreadSuggestionStateToken = createStateToken('ThreadSuggestion');
+/**
+ * Provides the ThreadSuggestion state.
+ */
+const provideThreadSuggestionState = createStateProvider(NgpThreadSuggestionStateToken);
+/**
+ * Injects the ThreadSuggestion state.
+ */
+const injectThreadSuggestionState = createStateInjector(NgpThreadSuggestionStateToken);
+/**
+ * The ThreadSuggestion state registration function.
+ */
+const threadSuggestionState = createState(NgpThreadSuggestionStateToken);
+
+class NgpThreadSuggestion {
+    constructor() {
+        this.thread = injectThreadState();
+        /** The suggested text to display in the input field. */
+        this.suggestion = input('', { alias: 'ngpThreadSuggestion' });
+        /** Whether the suggestion should populate the prompt when clicked. */
+        this.setPromptOnClick = input(true, {
+            alias: 'ngpThreadSuggestionSetPromptOnClick',
+            transform: booleanAttribute,
+        });
+        /** The state of the thread suggestion. */
+        this.state = threadSuggestionState(this);
+    }
+    submitSuggestion() {
+        if (this.state.setPromptOnClick() && this.state.suggestion().length > 0) {
+            this.thread().setPrompt(this.state.suggestion());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpThreadSuggestion, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpThreadSuggestion, isStandalone: true, selector: "button[ngpThreadSuggestion]", inputs: { suggestion: { classPropertyName: "suggestion", publicName: "ngpThreadSuggestion", isSignal: true, isRequired: false, transformFunction: null }, setPromptOnClick: { classPropertyName: "setPromptOnClick", publicName: "ngpThreadSuggestionSetPromptOnClick", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "submitSuggestion()" } }, providers: [provideThreadSuggestionState()], exportAs: ["ngpThreadSuggestion"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpThreadSuggestion, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[ngpThreadSuggestion]',
+                    exportAs: 'ngpThreadSuggestion',
+                    providers: [provideThreadSuggestionState()],
+                }]
+        }], propDecorators: { submitSuggestion: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgpPromptComposer, NgpPromptComposerDictation, NgpPromptComposerInput, NgpPromptComposerSubmit, NgpThread, NgpThreadMessage, NgpThreadSuggestion, NgpThreadViewport, injectPromptComposerDictationState, injectPromptComposerInputState, injectPromptComposerState, injectPromptComposerSubmitState, injectThreadMessageState, injectThreadState, injectThreadSuggestionState, injectThreadViewportState, providePromptComposerDictationState, providePromptComposerInputState, providePromptComposerState, providePromptComposerSubmitState, provideThreadMessageState, provideThreadState, provideThreadSuggestionState, provideThreadViewportState };
+//# sourceMappingURL=ng-primitives-ai.mjs.map