Add scrolling behavior to chat

change/@ni-spright-angular-2188570c-9255-47e7-8f52-a34d062b7b81.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add auto-scroll attribute to conversation.",
+  "packageName": "@ni/spright-angular",
+  "email": "163188334+Alexia-Claudia-Micu@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@ni-spright-components-98a40075-e551-4376-aa9a-f3a3fb1d4c4a.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add scrolling behavior to chat.",
+  "packageName": "@ni/spright-components",
+  "email": "163188334+Alexia-Claudia-Micu@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/angular-workspace/example-client-app/src/app/customapp/chat-conversation-section.component.ts

@@ -1,61 +1,193 @@
-import { Component } from '@angular/core';
+import { Component, type OnDestroy } from '@angular/core';
 import type { ChatInputSendEventDetail } from '@ni/spright-angular/chat/input';
 
+interface ChatEntry {
+    type: 'user' | 'advisor' | 'system';
+    text: string;
+    streaming: boolean;
+}
+
+const singleResponse = `To configure your Python version, select Adapters from the Configure menu.
+Configure the Python adapter. Choose the desired version from the Version dropdown.
+You can also specify a Python version for a specific module call in the Advanced Settings of the Python adapter.
+Additionally, you can set environment variables in the adapter configuration to control runtime behavior.
+This gives you fine-grained control over which interpreter is used per step in your test sequence.
+If you have multiple virtual environments, make sure to point the adapter to the correct executable path.
+The path must be absolute and should not contain spaces unless properly quoted.
+For further reference, consult the NI TestStand help documentation under the Python Adapter section.`;
+
+const cannedResponseWords = Array(5).fill(singleResponse).join('\n').split(/\s+/);
+
 @Component({
     selector: 'example-chat-conversation-section',
     template: `
         <example-sub-container label="Chat Conversation and Messages (Spright)">
-            <spright-chat-conversation>
-                <nimble-toolbar slot="toolbar">
-                    <nimble-icon-messages-sparkle slot="start"></nimble-icon-messages-sparkle>
-                    <span class="toolbar-title">AI Assistant</span>
-                    <nimble-button appearance="ghost" content-hidden title="Create new chat" slot="end">
-                        Create new chat
-                        <nimble-icon-pencil-to-rectangle slot="start"></nimble-icon-pencil-to-rectangle>
-                    </nimble-button>
-                </nimble-toolbar>
-                <nimble-banner slot="start" open severity="information">
-                    <span slot="title">Title of the banner</span>
+            <div class="conversations">
+                <spright-chat-conversation [auto-scroll]="false">
+                    <nimble-toolbar slot="toolbar">
+                        <nimble-icon-messages-sparkle slot="start"></nimble-icon-messages-sparkle>
+                        <span class="toolbar-title">AI Assistant</span>
+                        <nimble-button appearance="ghost" content-hidden title="Create new chat" slot="end">
+                            Create new chat
+                            <nimble-icon-pencil-to-rectangle slot="start"></nimble-icon-pencil-to-rectangle>
+                        </nimble-button>
+                    </nimble-toolbar>
+                    <nimble-banner slot="start" open severity="information">
+                        <span slot="title">Title of the banner</span>
                         This is the message text of this banner. It tells you something interesting.
-                </nimble-banner>
-                <spright-chat-message-system>To start, press any key.</spright-chat-message-system>
-                <spright-chat-message-outbound>Where is the Any key?</spright-chat-message-outbound>
-                <spright-chat-message-system>
-                    <nimble-spinner appearance="accent"></nimble-spinner>
-                </spright-chat-message-system>
-                <spright-chat-message-inbound>
-                    <nimble-button slot="footer-actions" appearance='ghost' content-hidden>
-                        <nimble-icon-copy-text slot="start"></nimble-icon-copy-text>
-                        Copy
-                    </nimble-button>
-                    <nimble-icon-webvi-custom style="height: 100px; width: 100px;"></nimble-icon-webvi-custom>
-                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
-                    <nimble-button slot="end" appearance="block">Order a tab</nimble-button>
-                    <nimble-button slot="end" appearance="block">Check core temperature</nimble-button>
-                </spright-chat-message-inbound>
-                @for (message of chatUserMessages; track message) {
-                    <spright-chat-message-outbound><span>{{message}}</span></spright-chat-message-outbound>
-                }
-                <spright-chat-input slot="input" placeholder="Type here" (send)="onChatInputSend($event)"></spright-chat-input>
-                <span slot="end">
-                    AI-generated content may be incorrect.
-                    <nimble-anchor href="https://www.ni.com" target="_blank">View Terms and Conditions</nimble-anchor>
-                </span>
-            </spright-chat-conversation>
+                    </nimble-banner>
+                    <spright-chat-message-system>To start, press any key.</spright-chat-message-system>
+                    <spright-chat-message-outbound>Where is the Any key?</spright-chat-message-outbound>
+                    <spright-chat-message-system>
+                        <nimble-spinner appearance="accent"></nimble-spinner>
+                    </spright-chat-message-system>
+                    <spright-chat-message-inbound>
+                        <nimble-button slot="footer-actions" appearance='ghost' content-hidden>
+                            <nimble-icon-copy-text slot="start"></nimble-icon-copy-text>
+                            Copy
+                        </nimble-button>
+                        <nimble-icon-webvi-custom style="height: 100px; width: 100px;"></nimble-icon-webvi-custom>
+                        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+                        <nimble-button slot="end" appearance="block">Order a tab</nimble-button>
+                        <nimble-button slot="end" appearance="block">Check core temperature</nimble-button>
+                    </spright-chat-message-inbound>
+                     @for (message of staticUserMessages; track message) {
+                        <spright-chat-message-outbound><span>{{message}}</span></spright-chat-message-outbound>
+                    }
+                    <spright-chat-input slot="input" placeholder="Type here" (send)="onStaticChatInputSend($event)"></spright-chat-input>
+                    <span slot="end">
+                        AI-generated content may be incorrect.
+                        <nimble-anchor href="https://www.ni.com" target="_blank">View Terms and Conditions</nimble-anchor>
+                    </span>
+                </spright-chat-conversation>
+
+                <div class="streaming-section">
+                <label class="response-label">Custom advisor response (leave empty for canned):</label>
+                <textarea class="response-input" rows="3" (input)="onCustomAdvisorTextInput($event)"></textarea>
+                <spright-chat-conversation>
+                    <nimble-toolbar slot="toolbar">
+                        <nimble-icon-messages-sparkle slot="start"></nimble-icon-messages-sparkle>
+                        <span class="toolbar-title">AI Assistant (Streaming)</span>
+                    </nimble-toolbar>
+                    @for (entry of messages; track entry) {
+                        @if (entry.type === 'user') {
+                            <spright-chat-message-outbound>
+                                <span>{{entry.text}}</span>
+                            </spright-chat-message-outbound>
+                        }
+                        @if (entry.type === 'system') {
+                            <spright-chat-message-system>
+                                <nimble-spinner appearance="accent"></nimble-spinner>
+                            </spright-chat-message-system>
+                        }
+                        @if (entry.type === 'advisor') {
+                            <spright-chat-message-inbound>
+                                <span>{{entry.text}}</span>
+                                @if (!entry.streaming) {
+                                    <nimble-button slot="footer-actions" appearance="ghost" content-hidden title="Copy">
+                                        <nimble-icon-copy-text slot="start"></nimble-icon-copy-text>
+                                        Copy
+                                    </nimble-button>
+                                }
+                            </spright-chat-message-inbound>
+                        }
+                    }
+                    <spright-chat-input slot="input" placeholder="Send a message…" (send)="onChatInputSend($event)" [send-disabled]="isStreaming"></spright-chat-input>
+                    <span slot="end">AI-generated content may be incorrect.</span>
+                </spright-chat-conversation>
+                </div>
+            </div>
         </example-sub-container>
     `,
     styles: [`
-        spright-chat-conversation { max-width: 700px; }
-        spright-chat-message span { white-space: pre-wrap; }
+        .conversations {
+            display: flex;
+            gap: 16px;
+        }
+        spright-chat-conversation {
+            width: 700px;
+            height: 650px;
+        }
+        .streaming-section {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .response-label {
+            font: var(--ni-nimble-body-font);
+            color: var(--ni-nimble-body-font-color);
+        }
+        .response-input {
+            font: var(--ni-nimble-body-font);
+            color: var(--ni-nimble-body-font-color);
+            background: var(--ni-nimble-fill-secondary-color);
+            border: 1px solid var(--ni-nimble-border-color);
+            padding: 4px;
+            width: 700px;
+            resize: vertical;
+        }
+        spright-chat-message-outbound span,
+        spright-chat-message-inbound span { white-space: pre-wrap; }
     `],
     standalone: false
 })
-export class ChatConversationSectionComponent {
-    public chatUserMessages: string[] = [];
+export class ChatConversationSectionComponent implements OnDestroy {
+    public staticUserMessages: string[] = [];
+    public messages: ChatEntry[] = [];
+    public isStreaming = false;
+
+    private customAdvisorText = '';
+    private streamInterval: ReturnType<typeof setInterval> | null = null;
+
+    public onCustomAdvisorTextInput(e: Event): void {
+        this.customAdvisorText = (e.target as HTMLTextAreaElement).value;
+    }
+
+    public onStaticChatInputSend(e: Event): void {
+        this.staticUserMessages.push((e as CustomEvent<ChatInputSendEventDetail>).detail.text);
+    }
 
     public onChatInputSend(e: Event): void {
-        const chatInputSendEvent = (e as CustomEvent<ChatInputSendEventDetail>);
-        this.chatUserMessages.push(chatInputSendEvent.detail.text);
+        const text = (e as CustomEvent<ChatInputSendEventDetail>).detail.text;
+        this.messages.push({ type: 'user', text, streaming: false });
+        this.startStreaming();
+    }
+
+    public ngOnDestroy(): void {
+        if (this.streamInterval !== null) {
+            clearInterval(this.streamInterval);
+        }
+    }
+
+    private startStreaming(): void {
+        this.isStreaming = true;
+        const spinnerEntry: ChatEntry = { type: 'system', text: '', streaming: true };
+        this.messages.push(spinnerEntry);
+
+        const responseWords = this.customAdvisorText.trim().length > 0
+            ? this.customAdvisorText.trim().split(/\s+/)
+            : cannedResponseWords;
+        let wordIndex = 0;
+        setTimeout(() => {
+            const idx = this.messages.indexOf(spinnerEntry);
+            if (idx !== -1) {
+                this.messages.splice(idx, 1);
+            }
+            const advisorEntry: ChatEntry = { type: 'advisor', text: '', streaming: true };
+            this.messages.push(advisorEntry);
+
+            this.streamInterval = setInterval(() => {
+                if (wordIndex < responseWords.length) {
+                    advisorEntry.text += (wordIndex === 0 ? '' : ' ') + responseWords[wordIndex];
+                    wordIndex += 1;
+                } else {
+                    clearInterval(this.streamInterval!);
+                    this.streamInterval = null;
+                    advisorEntry.streaming = false;
+                    this.isStreaming = false;
+                }
+            }, 30);
+        }, 300);
     }
 }

packages/angular-workspace/spright-angular/chat/conversation/spright-chat-conversation.directive.ts

@@ -1,4 +1,4 @@
-import { Directive } from '@angular/core';
+import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
 import { type ChatConversation, chatConversationTag } from '@ni/spright-components/dist/esm/chat/conversation';
 
 export type { ChatConversation };
@@ -11,4 +11,14 @@ export { chatConversationTag };
     selector: 'spright-chat-conversation',
     standalone: false
 })
-export class SprightChatConversationDirective { }
+export class SprightChatConversationDirective {
+    public get autoScroll(): boolean | undefined {
+        return this.elementRef.nativeElement.autoScroll;
+    }
+
+    @Input('auto-scroll') public set autoScroll(value: boolean | undefined) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'autoScroll', value);
+    }
+
+    public constructor(private readonly renderer: Renderer2, private readonly elementRef: ElementRef<ChatConversation>) {}
+}

packages/spright-components/src/chat/conversation/index.ts

@@ -3,6 +3,7 @@ import { attr, observable } from '@ni/fast-element';
 import { styles } from './styles';
 import { template } from './template';
 import { ChatConversationAppearance } from './types';
+import { ChatConversationScrollManager } from './scroll-manager';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -17,6 +18,9 @@ export class ChatConversation extends FoundationElement {
     @attr
     public appearance = ChatConversationAppearance.default;
 
+    @attr({ attribute: 'auto-scroll', mode: 'boolean' })
+    public autoScroll = true;
+
     /** @internal */
     @observable
     public inputEmpty = true;
@@ -49,6 +53,30 @@ export class ChatConversation extends FoundationElement {
     @observable
     public readonly slottedEndElements?: HTMLElement[];
 
+    /** @internal */
+    public messagesContainer: HTMLElement | null = null;
+    private scrollManager: ChatConversationScrollManager | null = null;
+
+    public override connectedCallback(): void {
+        super.connectedCallback();
+        const defaultSlot = this.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement | null;
+        if (this.messagesContainer && defaultSlot) {
+            this.scrollManager = new ChatConversationScrollManager(
+                this.messagesContainer,
+                this,
+                defaultSlot,
+                () => this.autoScroll
+            );
+            this.scrollManager.connect();
+        }
+    }
+
+    public override disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.scrollManager?.disconnect();
+        this.scrollManager = null;
+    }
+
     public slottedInputElementsChanged(
         _prev: HTMLElement[] | undefined,
         next: HTMLElement[] | undefined