Spright blazor chat input (#2664)

# Pull Request

## 🤨 Rationale

- #2610 (Blazor wrapper and example app)

Author: atmgrifter00

change/@ni-spright-blazor-9dbbf874-9b21-4e8f-a443-5f7dd79b05e5.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add SprightChatInput to Blazor.",
+  "packageName": "@ni/spright-blazor",
+  "email": "26874831+atmgrifter00@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -464,6 +464,13 @@
                         Check core temperature
                     </NimbleButton>
                 </SprightChatMessage>
+                @foreach(var message in _userMessages)
+                {
+                    <SprightChatMessage MessageType="ChatMessageType.Outbound">
+                        @message
+                    </SprightChatMessage>
+                }
+                <SprightChatInput slot="input" Placeholder="Type here" Send="UpdateUserMessages"></SprightChatInput>
             </SprightChatConversation>
         </div>
     </div>

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

@@ -3,6 +3,7 @@
 using Apache.Arrow;
 using Apache.Arrow.Types;
 using NimbleBlazor;
+using SprightBlazor;
 
 namespace Demo.Shared.Pages;
 
@@ -31,16 +32,17 @@ public partial class ComponentsDemo
     };
     private readonly HashSet<string> _recordsLoadingChildren = new();
     private readonly HashSet<string> _recordsWithLoadedChildren = new();
-
-    public const string MarkdownString = "Supported rich text formatting options:\n" +
-                                         "1. **Bold**\n" +
-                                         "2. *Italics*\n" +
-                                         "3. Numbered lists\n" +
-                                         "   1. Option 1\n" +
-                                         "   2. Option 2\n" +
-                                         "4. Bulleted lists\n" +
-                                         "   * Option 1\n" +
-                                         "   * Option 2\n" +
+    private List<string> _userMessages = new List<string>();
+
+    public const string MarkdownString = "Supported rich text formatting options:\n" +
+                                         "1. **Bold**\n" +
+                                         "2. *Italics*\n" +
+                                         "3. Numbered lists\n" +
+                                         "   1. Option 1\n" +
+                                         "   2. Option 2\n" +
+                                         "4. Bulleted lists\n" +
+                                         "   * Option 1\n" +
+                                         "   * Option 2\n" +
                                          "5. Absolute link: <https://nimble.ni.dev/>\n";
 
     public IEnumerable<DemoColor> PossibleColors
@@ -313,6 +315,11 @@ public void RemoveDiesFromRadius(int numberOfDies)
     {
         UpdateDiesTable(DiesTable.Length - (int)(numberOfDies * numberOfDies * Math.PI));
     }
+
+    public void UpdateUserMessages(ChatInputSendEventArgs e)
+    {
+        _userMessages.Add(e.Text);
+    }
 }
 
 public enum DemoColor

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

@@ -0,0 +1,8 @@
+@namespace SprightBlazor
+<spright-chat-input 
+    @attributes="AdditionalAttributes"
+    placeholder="@Placeholder"
+    value="@Value"
+    @onsprightchatinputsend="(__value) => HandleChatInputSend(__value)">
+    @ChildContent
+</spright-chat-input>

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

@@ -0,0 +1,35 @@
+using Microsoft.AspNetCore.Components;
+
+namespace SprightBlazor;
+
+public partial class SprightChatInput : ComponentBase
+{
+    [Parameter]
+    public string? Placeholder { get; set; }
+
+    [Parameter]
+    public string? Value { get; set; }
+
+    /// <summary>
+    /// Gets or sets a callback that is invoked when the send event is raised.
+    /// </summary>
+    [Parameter]
+    public EventCallback<ChatInputSendEventArgs> Send { 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; }
+
+    private async void HandleChatInputSend(ChatInputSendEventArgs eventArgs)
+    {
+        await Send.InvokeAsync(eventArgs);
+    }
+}

packages/blazor-workspace/SprightBlazor/EventHandlers.cs

@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Components;
+
+namespace SprightBlazor;
+
+public class ChatInputSendEventArgs : EventArgs
+{
+    public string Text { get; set; } = string.Empty;
+}
+
+[EventHandler("onsprightchatinputsend", typeof(ChatInputSendEventArgs), enableStopPropagation: true, enablePreventDefault: false)]
+public static class EventHandlers
+{
+}

packages/blazor-workspace/SprightBlazor/wwwroot/SprightBlazor.lib.module.js

@@ -34,6 +34,15 @@ function registerEvents(Blazor) {
         }
     });
     */
+
+    Blazor.registerCustomEventType('sprightchatinputsend', {
+        browserEventName: 'send',
+        createEventArgs: event => {
+            return {
+                text: event.target.value
+            };
+        }
+    });
 }
 
 function handleRuntimeStarted() {

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

@@ -0,0 +1,58 @@
+using System;
+using System.Linq.Expressions;
+using Bunit;
+using Xunit;
+
+namespace SprightBlazor.Tests.Unit.Components;
+
+/// <summary>
+/// Test for <see cref="SprightChaInputTests"/>.
+/// </summary>
+public class SprightChatInputTests
+{
+    [Fact]
+    public void SprightChatInput_Render_HasChatInputMarkup()
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var expectedMarkup = "spright-chat-input";
+
+        var component = context.RenderComponent<SprightChatInput>();
+
+        Assert.Contains(expectedMarkup, component.Markup);
+    }
+
+    [Fact]
+    public void SprightChatInput_SupportsAdditionalAttributes()
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var exception = Record.Exception(() => context.RenderComponent<SprightChatInput>(ComponentParameter.CreateParameter("class", "foo")));
+        Assert.Null(exception);
+    }
+
+    [Fact]
+    public void SprightChatInputValue_AttributeIsSet()
+    {
+        var value = "Tell me something.";
+        var chatInput = RenderWithPropertySet(x => x.Value, value);
+
+        Assert.Contains("value", chatInput.Markup);
+    }
+
+    [Fact]
+    public void SprightChatInputPlaceholder_AttributeIsSet()
+    {
+        var placeholder = "Type here...";
+        var chatInput = RenderWithPropertySet(x => x.Placeholder, placeholder);
+
+        Assert.Contains("placeholder", chatInput.Markup);
+    }
+
+    private IRenderedComponent<SprightChatInput> RenderWithPropertySet<TProperty>(Expression<Func<SprightChatInput, TProperty>> propertyGetter, TProperty propertyValue)
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        return context.RenderComponent<SprightChatInput>(p => p.Add(propertyGetter, propertyValue));
+    }
+}

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

@@ -11,7 +11,7 @@ namespace SprightBlazor.Tests.Unit.Components;
 public class SprightChatMessageTests
 {
     [Fact]
-    public void SprightChatMessage_Render_HasChatConversationMarkup()
+    public void SprightChatMessage_Render_HasChatMessageMarkup()
     {
         var context = new TestContext();
         context.JSInterop.Mode = JSRuntimeMode.Loose;