[Draft] Add Spright Chat Message Welcome to Chat Component

change/@ni-spright-angular-3dd80b72-fa3a-4f62-9749-f852ef6a2b91.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add welcome message for spright chat conversation",
+  "packageName": "@ni/spright-angular",
+  "email": "5265744+hellovolcano@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@ni-spright-blazor-d588028d-8950-4858-88e6-3fc776f415fa.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add welcome message for spright chat conversation",
+  "packageName": "@ni/spright-blazor",
+  "email": "5265744+hellovolcano@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@ni-spright-components-8210bc64-3fb5-426c-9a91-82be850e2405.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add welcome message for spright chat conversation",
+  "packageName": "@ni/spright-components",
+  "email": "5265744+hellovolcano@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@ni-spright-react-0718d981-c3df-4a58-8307-7bd5e895e960.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add welcome message for spright chat conversation",
+  "packageName": "@ni/spright-react",
+  "email": "5265744+hellovolcano@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/angular-workspace/spright-angular/chat/message/welcome/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+}

packages/angular-workspace/spright-angular/chat/message/welcome/public-api.ts

@@ -0,0 +1,2 @@
+export * from './spright-chat-message-welcome.directive';
+export * from './spright-chat-message-welcome.module';

packages/angular-workspace/spright-angular/chat/message/welcome/spright-chat-message-welcome.directive.ts

@@ -0,0 +1,32 @@
+import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
+import { type ChatMessageWelcome, chatMessageWelcomeTag } from '@ni/spright-components/dist/esm/chat/message/welcome';
+
+export type { ChatMessageWelcome };
+export { chatMessageWelcomeTag };
+
+/**
+ * Directive to provide Angular integration for the chat welcome message.
+ */
+@Directive({
+    selector: 'spright-chat-message-welcome',
+    standalone: false
+})
+export class SprightChatMessageWelcomeDirective {
+    public get title(): string | undefined {
+        return this.elementRef.nativeElement.welcomeTitle;
+    }
+
+    @Input() public set title(value: string | undefined) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'welcomeTitle', value);
+    }
+
+    public get subtitle(): string | undefined {
+        return this.elementRef.nativeElement.subtitle;
+    }
+
+    @Input() public set subtitle(value: string | undefined) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'subtitle', value);
+    }
+
+    public constructor(private readonly renderer: Renderer2, private readonly elementRef: ElementRef<ChatMessageWelcome>) {}
+}

packages/angular-workspace/spright-angular/chat/message/welcome/spright-chat-message-welcome.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SprightChatMessageWelcomeDirective } from './spright-chat-message-welcome.directive';
+
+import '@ni/spright-components/dist/esm/chat/message/welcome';
+
+@NgModule({
+    declarations: [
+        SprightChatMessageWelcomeDirective
+    ],
+    imports: [CommonModule],
+    exports: [
+        SprightChatMessageWelcomeDirective
+    ]
+})
+export class SprightChatMessageWelcomeModule { }

packages/angular-workspace/spright-angular/chat/message/welcome/tests/spright-chat-message-welcome.directive.spec.ts

@@ -0,0 +1,142 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SprightChatMessageWelcomeDirective, type ChatMessageWelcome } from '../spright-chat-message-welcome.directive';
+import { SprightChatMessageWelcomeModule } from '../spright-chat-message-welcome.module';
+
+describe('Spright chat message welcome', () => {
+    describe('module', () => {
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                imports: [SprightChatMessageWelcomeModule]
+            });
+        });
+
+        it('custom element is defined', () => {
+            expect(customElements.get('spright-chat-message-welcome')).not.toBeUndefined();
+        });
+    });
+
+    describe('with no values in template', () => {
+        @Component({
+            template: `
+                <spright-chat-message-welcome #message>Content</spright-chat-message-welcome>
+            `,
+            standalone: false
+        })
+        class TestHostComponent {
+            @ViewChild('message', { read: SprightChatMessageWelcomeDirective }) public directive: SprightChatMessageWelcomeDirective;
+            @ViewChild('message', { read: ElementRef }) public elementRef: ElementRef<ChatMessageWelcome>;
+        }
+
+        let fixture: ComponentFixture<TestHostComponent>;
+        let directive: SprightChatMessageWelcomeDirective;
+        let nativeElement: ChatMessageWelcome;
+
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                declarations: [TestHostComponent],
+                imports: [SprightChatMessageWelcomeModule]
+            });
+            fixture = TestBed.createComponent(TestHostComponent);
+            fixture.detectChanges();
+            directive = fixture.componentInstance.directive;
+            nativeElement = fixture.componentInstance.elementRef.nativeElement;
+        });
+
+        it('has expected defaults for title', () => {
+            expect(directive.title).toBeUndefined();
+            expect(nativeElement.welcomeTitle).toBeUndefined();
+        });
+
+        it('has expected defaults for subtitle', () => {
+            expect(directive.subtitle).toBeUndefined();
+            expect(nativeElement.subtitle).toBeUndefined();
+        });
+    });
+
+    describe('with template string values', () => {
+        @Component({
+            template: `
+                <spright-chat-message-welcome #message title="Welcome title" subtitle="Welcome subtitle">
+                    Content
+                </spright-chat-message-welcome>`,
+            standalone: false
+        })
+        class TestHostComponent {
+            @ViewChild('message', { read: SprightChatMessageWelcomeDirective }) public directive: SprightChatMessageWelcomeDirective;
+            @ViewChild('message', { read: ElementRef }) public elementRef: ElementRef<ChatMessageWelcome>;
+        }
+
+        let fixture: ComponentFixture<TestHostComponent>;
+        let directive: SprightChatMessageWelcomeDirective;
+        let nativeElement: ChatMessageWelcome;
+
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                declarations: [TestHostComponent],
+                imports: [SprightChatMessageWelcomeModule]
+            });
+            fixture = TestBed.createComponent(TestHostComponent);
+            fixture.detectChanges();
+            directive = fixture.componentInstance.directive;
+            nativeElement = fixture.componentInstance.elementRef.nativeElement;
+        });
+
+        it('will use template string values for title', () => {
+            expect(directive.title).toBe('Welcome title');
+            expect(nativeElement.welcomeTitle).toBe('Welcome title');
+        });
+
+        it('will use template string values for subtitle', () => {
+            expect(directive.subtitle).toBe('Welcome subtitle');
+            expect(nativeElement.subtitle).toBe('Welcome subtitle');
+        });
+    });
+
+    describe('with property bound values', () => {
+        @Component({
+            template: `
+                <spright-chat-message-welcome #message [title]="title" [subtitle]="subtitle">
+                    Content
+                </spright-chat-message-welcome>`,
+            standalone: false
+        })
+        class TestHostComponent {
+            @ViewChild('message', { read: SprightChatMessageWelcomeDirective }) public directive: SprightChatMessageWelcomeDirective;
+            @ViewChild('message', { read: ElementRef }) public elementRef: ElementRef<ChatMessageWelcome>;
+            public title = 'initial title';
+            public subtitle = 'initial subtitle';
+        }
+
+        let fixture: ComponentFixture<TestHostComponent>;
+        let directive: SprightChatMessageWelcomeDirective;
+        let nativeElement: ChatMessageWelcome;
+
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                declarations: [TestHostComponent],
+                imports: [SprightChatMessageWelcomeModule]
+            });
+            fixture = TestBed.createComponent(TestHostComponent);
+            fixture.detectChanges();
+            directive = fixture.componentInstance.directive;
+            nativeElement = fixture.componentInstance.elementRef.nativeElement;
+        });
+
+        it('can be configured with property binding for title and subtitle', () => {
+            expect(directive.title).toBe('initial title');
+            expect(nativeElement.welcomeTitle).toBe('initial title');
+            expect(directive.subtitle).toBe('initial subtitle');
+            expect(nativeElement.subtitle).toBe('initial subtitle');
+
+            fixture.componentInstance.title = 'updated title';
+            fixture.componentInstance.subtitle = 'updated subtitle';
+            fixture.detectChanges();
+
+            expect(directive.title).toBe('updated title');
+            expect(nativeElement.welcomeTitle).toBe('updated title');
+            expect(directive.subtitle).toBe('updated subtitle');
+            expect(nativeElement.subtitle).toBe('updated subtitle');
+        });
+    });
+});

packages/blazor-workspace/SprightBlazor/Components/SprightChatMessageWelcome.razor

@@ -0,0 +1,7 @@
+@namespace SprightBlazor
+<spright-chat-message-welcome
+    @attributes="AdditionalAttributes"
+    title="@Title"
+    subtitle="@Subtitle">
+    @ChildContent
+</spright-chat-message-welcome>

packages/blazor-workspace/SprightBlazor/Components/SprightChatMessageWelcome.razor.cs

@@ -0,0 +1,30 @@
+using Microsoft.AspNetCore.Components;
+
+namespace SprightBlazor;
+
+public partial class SprightChatMessageWelcome : ComponentBase
+{
+    /// <summary>
+    /// Gets or sets the primary welcome title text.
+    /// </summary>
+    [Parameter]
+    public string? Title { get; set; }
+
+    /// <summary>
+    /// Gets or sets the secondary subtitle text.
+    /// </summary>
+    [Parameter]
+    public string? Subtitle { get; set; }
+
+    /// <summary>
+    /// The child content of the element.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// Any additional attributes that did not match known properties.
+    /// </summary>
+    [Parameter(CaptureUnmatchedValues = true)]
+    public IDictionary<string, object>? AdditionalAttributes { get; set; }
+}

packages/blazor-workspace/Tests/SprightBlazor.Tests/Unit/Components/SprightChatMessageWelcomeTests.cs

@@ -0,0 +1,52 @@
+using System;
+using System.Linq.Expressions;
+using Bunit;
+using Xunit;
+
+namespace SprightBlazor.Tests.Unit.Components;
+
+/// <summary>
+/// Test for <see cref="SprightChatMessageWelcome"/>.
+/// </summary>
+public class SprightChatMessageWelcomeTests
+{
+    [Fact]
+    public void SprightChatMessageWelcome_Render_HasChatMessageMarkup()
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var expectedMarkup = "spright-chat-message-welcome";
+
+        var component = context.RenderComponent<SprightChatMessageWelcome>();
+
+        Assert.Contains(expectedMarkup, component.Markup);
+    }
+
+    [Fact]
+    public void SprightChatMessageWelcome_SupportsAdditionalAttributes()
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var exception = Record.Exception(() => context.RenderComponent<SprightChatMessageWelcome>(ComponentParameter.CreateParameter("class", "foo")));
+        Assert.Null(exception);
+    }
+
+    [Theory]
+    [InlineData("Welcome to Nigel", "title=\"Welcome to Nigel\"")]
+    [InlineData("Log in to continue", "subtitle=\"Log in to continue\"")]
+    public void SprightChatMessageWelcome_AttributeIsSet(string value, string expectedAttribute)
+    {
+        var message = expectedAttribute.StartsWith("title", StringComparison.Ordinal)
+            ? RenderWithPropertySet(x => x.Title, value)
+            : RenderWithPropertySet(x => x.Subtitle, value);
+
+        Assert.Contains(expectedAttribute, message.Markup);
+    }
+
+    private IRenderedComponent<SprightChatMessageWelcome> RenderWithPropertySet<TProperty>(Expression<Func<SprightChatMessageWelcome, TProperty>> propertyGetter, TProperty propertyValue)
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        return context.RenderComponent<SprightChatMessageWelcome>(p => p.Add(propertyGetter, propertyValue));
+    }
+}

packages/react-workspace/spright-react/src/chat/message/welcome/index.ts

@@ -0,0 +1,4 @@
+import { ChatMessageWelcome } from '@ni/spright-components/dist/esm/chat/message/welcome';
+import { wrap } from '../../../utilities/react-wrapper';
+
+export const SprightChatMessageWelcome = wrap(ChatMessageWelcome);

packages/spright-components/src/all-components.ts

@@ -12,5 +12,6 @@ import './chat/message';
 import './chat/message/inbound';
 import './chat/message/outbound';
 import './chat/message/system';
+import './chat/message/welcome';
 import './icons/all-icons';
 import './rectangle';

packages/spright-components/src/chat/message/welcome/index.ts

@@ -0,0 +1,44 @@
+import { attr } from '@ni/fast-element';
+import {
+    applyMixins,
+    DesignSystem,
+    FoundationElement,
+    StartEnd,
+    type FoundationElementDefinition,
+    type StartEndOptions
+} from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'spright-chat-message-welcome': ChatMessageWelcome;
+    }
+}
+
+/**
+ * SprightChatMessageWelcome configuration options
+ * @public
+ */
+export type ChatMessageWelcomeOptions = FoundationElementDefinition & StartEndOptions;
+
+/**
+ * A Spright component for displaying a welcome chat message
+ */
+export class ChatMessageWelcome extends FoundationElement {
+    @attr({ attribute: 'title' })
+    public welcomeTitle?: string;
+
+    @attr
+    public subtitle?: string;
+}
+applyMixins(ChatMessageWelcome, StartEnd);
+
+const sprightChatMessageWelcome = ChatMessageWelcome.compose({
+    baseName: 'chat-message-welcome',
+    template,
+    styles
+});
+
+DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageWelcome());
+export const chatMessageWelcomeTag = 'spright-chat-message-welcome';