Blazor chat components

change/@ni-spright-blazor-99902f16-3e43-4f68-85f6-11bc2f3ebc00.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Added Blazor wrappers for the chat components",
+  "packageName": "@ni/spright-blazor",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor

@@ -431,5 +431,30 @@
             <div class="container-label">Rectangle (Spright)</div>
             <SprightRectangle>Spright!</SprightRectangle>
         </div>
+        <div class="sub-container">
+            <div class="container-label">Chat Conversation and Messages (Spright)</div>
+            <SprightChatConversation class="conversation">
+                <SprightChatMessage message-type="inbound">
+                    To start, press any key.
+                </SprightChatMessage>
+                <SprightChatMessage message-type="outbound">
+                    Where is the Any key?
+                </SprightChatMessage>
+                <SprightChatMessage>
+                    <NimbleSpinner Appearance="SpinnerAppearance.Accent"></NimbleSpinner>
+                </SprightChatMessage>
+                <SprightChatMessage message-type="inbound">
+                    <NimbleIconWebviCustom style="height: 100px; width: 100px;"></NimbleIconWebviCustom>
+                </SprightChatMessage>
+                <SprightChatMessage>
+                    <NimbleButton Appearance=ButtonAppearance.Block>
+                        Order a tab
+                    </NimbleButton>
+                    <NimbleButton Appearance=ButtonAppearance.Block>
+                        Check core temperature
+                    </NimbleButton>
+                </SprightChatMessage>
+            </SprightChatConversation>
+        </div>
     </div>
 </div>

packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor.css

@@ -66,4 +66,9 @@ example-header {
 
 .drawer-footer {
     gap: var(--ni-nimble-standard-padding);
+}
+
+::deep spright-chat-conversation {
+    border: dashed lightgray;
+    max-width: 700px;
 }

packages/blazor-workspace/SprightBlazor/ChatMessageType.cs

@@ -0,0 +1,15 @@
+namespace SprightBlazor;
+
+public enum ChatMessageType
+{
+    System,
+    Outbound,
+    Inbound
+}
+
+internal static class ChatMessageTypeExtensions
+{
+    private static readonly Dictionary<ChatMessageType, string> _enumValues = AttributeHelpers.GetEnumNamesAsKebabCaseValues<ChatMessageType>();
+
+    public static string? ToAttributeValue(this ChatMessageType? value) => value == null ? null : _enumValues[value.Value];
+}

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

@@ -0,0 +1,5 @@
+@namespace SprightBlazor
+<spright-chat-conversation
+    @attributes="AdditionalAttributes">
+    @ChildContent
+</spright-chat-conversation>

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

@@ -0,0 +1,18 @@
+using Microsoft.AspNetCore.Components;
+
+namespace SprightBlazor;
+
+public partial class SprightChatConversation : ComponentBase
+{
+    /// <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/SprightBlazor/Components/SprightChatMessage.razor

@@ -0,0 +1,6 @@
+@namespace SprightBlazor
+<spright-chat-message
+    message-type="@MessageType.ToAttributeValue()"
+    @attributes="AdditionalAttributes">
+    @ChildContent
+</spright-chat-message>

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

@@ -0,0 +1,24 @@
+using Microsoft.AspNetCore.Components;
+
+namespace SprightBlazor;
+
+public partial class SprightChatMessage : ComponentBase
+{
+    /// <summary>
+    /// The message type of the message
+    /// </summary>
+    [Parameter]
+    public ChatMessageType? MessageType { 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/SprightChatConversationTests.cs

@@ -0,0 +1,31 @@
+using Bunit;
+using Xunit;
+
+namespace SprightBlazor.Tests.Unit.Components;
+
+/// <summary>
+/// Test for <see cref="SprightChatConversation"/>.
+/// </summary>
+public class SprightChatConversationTests
+{
+    [Fact]
+    public void SprightChatConversation_Render_HasChatConversationMarkup()
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var expectedMarkup = "spright-chat-conversation";
+
+        var component = context.RenderComponent<SprightChatConversation>();
+
+        Assert.Contains(expectedMarkup, component.Markup);
+    }
+
+    [Fact]
+    public void SprightChatConversation_SupportsAdditionalAttributes()
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var exception = Record.Exception(() => context.RenderComponent<SprightChatConversation>(ComponentParameter.CreateParameter("class", "foo")));
+        Assert.Null(exception);
+    }
+}

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

@@ -0,0 +1,51 @@
+using System;
+using System.Linq.Expressions;
+using Bunit;
+using Xunit;
+
+namespace SprightBlazor.Tests.Unit.Components;
+
+/// <summary>
+/// Test for <see cref="SprightChatMessage"/>.
+/// </summary>
+public class SprightChatMessageTests
+{
+    [Fact]
+    public void SprightChatMessage_Render_HasChatConversationMarkup()
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var expectedMarkup = "spright-chat-message";
+
+        var component = context.RenderComponent<SprightChatMessage>();
+
+        Assert.Contains(expectedMarkup, component.Markup);
+    }
+
+    [Fact]
+    public void SprightChatMessage_SupportsAdditionalAttributes()
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var exception = Record.Exception(() => context.RenderComponent<SprightChatMessage>(ComponentParameter.CreateParameter("class", "foo")));
+        Assert.Null(exception);
+    }
+
+    [Theory]
+    [InlineData(ChatMessageType.Outbound, "message-type=\"outbound\"")]
+    [InlineData(ChatMessageType.Inbound, "message-type=\"inbound\"")]
+    [InlineData(ChatMessageType.System, "message-type=\"system\"")]
+    public void SprightChatMessageTypeVariant_AttributeIsSet(ChatMessageType value, string expectedAttribute)
+    {
+        var message = RenderWithPropertySet(x => x.MessageType, value);
+
+        Assert.Contains(expectedAttribute, message.Markup);
+    }
+
+    private IRenderedComponent<SprightChatMessage> RenderWithPropertySet<TProperty>(Expression<Func<SprightChatMessage, TProperty>> propertyGetter, TProperty propertyValue)
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        return context.RenderComponent<SprightChatMessage>(p => p.Add(propertyGetter, propertyValue));
+    }
+}

packages/storybook/src/docs/component-status.stories.ts

@@ -145,7 +145,7 @@ const components = [
         designLabel: 'Figma',
         componentStatus: ComponentFrameworkStatus.spright,
         angularStatus: ComponentFrameworkStatus.doesNotExist,
-        blazorStatus: ComponentFrameworkStatus.doesNotExist
+        blazorStatus: ComponentFrameworkStatus.ready
     },
     {
         componentName: 'Checkbox',