From 1c39f7e4efc6026a22094a926e0e2f0281b1fda4 Mon Sep 17 00:00:00 2001 From: "Jose A. Hernandez" Date: Fri, 14 Feb 2025 08:57:34 -0600 Subject: [PATCH 1/6] Added Blazor wrappers for chat components --- .../SprightBlazor/ChatMessageType.cs | 15 ++++++ .../Components/SprightChatConversation.razor | 5 ++ .../SprightChatConversation.razor.cs | 18 +++++++ .../Components/SprightChatMessage.razor | 6 +++ .../Components/SprightChatMessage.razor.cs | 24 +++++++++ .../SprightChatConversationTests.cs | 31 +++++++++++ .../Components/SprightChatMessageTests.cs | 51 +++++++++++++++++++ 7 files changed, 150 insertions(+) create mode 100644 packages/blazor-workspace/SprightBlazor/ChatMessageType.cs create mode 100644 packages/blazor-workspace/SprightBlazor/Components/SprightChatConversation.razor create mode 100644 packages/blazor-workspace/SprightBlazor/Components/SprightChatConversation.razor.cs create mode 100644 packages/blazor-workspace/SprightBlazor/Components/SprightChatMessage.razor create mode 100644 packages/blazor-workspace/SprightBlazor/Components/SprightChatMessage.razor.cs create mode 100644 packages/blazor-workspace/Tests/SprightBlazor.Tests/Unit/Components/SprightChatConversationTests.cs create mode 100644 packages/blazor-workspace/Tests/SprightBlazor.Tests/Unit/Components/SprightChatMessageTests.cs diff --git a/packages/blazor-workspace/SprightBlazor/ChatMessageType.cs b/packages/blazor-workspace/SprightBlazor/ChatMessageType.cs new file mode 100644 index 0000000000..285bd7de7c --- /dev/null +++ b/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 _enumValues = AttributeHelpers.GetEnumNamesAsKebabCaseValues(); + + public static string? ToAttributeValue(this ChatMessageType? value) => value == null ? null : _enumValues[value.Value]; +} diff --git a/packages/blazor-workspace/SprightBlazor/Components/SprightChatConversation.razor b/packages/blazor-workspace/SprightBlazor/Components/SprightChatConversation.razor new file mode 100644 index 0000000000..9e59d0a579 --- /dev/null +++ b/packages/blazor-workspace/SprightBlazor/Components/SprightChatConversation.razor @@ -0,0 +1,5 @@ +@namespace SprightBlazor + + @ChildContent + diff --git a/packages/blazor-workspace/SprightBlazor/Components/SprightChatConversation.razor.cs b/packages/blazor-workspace/SprightBlazor/Components/SprightChatConversation.razor.cs new file mode 100644 index 0000000000..ff7d63aaa7 --- /dev/null +++ b/packages/blazor-workspace/SprightBlazor/Components/SprightChatConversation.razor.cs @@ -0,0 +1,18 @@ +using Microsoft.AspNetCore.Components; + +namespace SprightBlazor; + +public partial class SprightChatConversation : ComponentBase +{ + /// + /// The child content of the element. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + /// + /// Any additional attributes that did not match known properties. + /// + [Parameter(CaptureUnmatchedValues = true)] + public IDictionary? AdditionalAttributes { get; set; } +} diff --git a/packages/blazor-workspace/SprightBlazor/Components/SprightChatMessage.razor b/packages/blazor-workspace/SprightBlazor/Components/SprightChatMessage.razor new file mode 100644 index 0000000000..c9a709b717 --- /dev/null +++ b/packages/blazor-workspace/SprightBlazor/Components/SprightChatMessage.razor @@ -0,0 +1,6 @@ +@namespace SprightBlazor + + @ChildContent + \ No newline at end of file diff --git a/packages/blazor-workspace/SprightBlazor/Components/SprightChatMessage.razor.cs b/packages/blazor-workspace/SprightBlazor/Components/SprightChatMessage.razor.cs new file mode 100644 index 0000000000..ecebd30af3 --- /dev/null +++ b/packages/blazor-workspace/SprightBlazor/Components/SprightChatMessage.razor.cs @@ -0,0 +1,24 @@ +using Microsoft.AspNetCore.Components; + +namespace SprightBlazor; + +public partial class SprightChatMessage : ComponentBase +{ + /// + /// The message type of the message + /// + [Parameter] + public ChatMessageType? MessageType { get; set; } + + /// + /// The child content of the element. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + /// + /// Any additional attributes that did not match known properties. + /// + [Parameter(CaptureUnmatchedValues = true)] + public IDictionary? AdditionalAttributes { get; set; } +} diff --git a/packages/blazor-workspace/Tests/SprightBlazor.Tests/Unit/Components/SprightChatConversationTests.cs b/packages/blazor-workspace/Tests/SprightBlazor.Tests/Unit/Components/SprightChatConversationTests.cs new file mode 100644 index 0000000000..f594b9f256 --- /dev/null +++ b/packages/blazor-workspace/Tests/SprightBlazor.Tests/Unit/Components/SprightChatConversationTests.cs @@ -0,0 +1,31 @@ +using Bunit; +using Xunit; + +namespace SprightBlazor.Tests.Unit.Components; + +/// +/// Test for . +/// +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(); + + 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(ComponentParameter.CreateParameter("class", "foo"))); + Assert.Null(exception); + } +} diff --git a/packages/blazor-workspace/Tests/SprightBlazor.Tests/Unit/Components/SprightChatMessageTests.cs b/packages/blazor-workspace/Tests/SprightBlazor.Tests/Unit/Components/SprightChatMessageTests.cs new file mode 100644 index 0000000000..86adff06d8 --- /dev/null +++ b/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; + +/// +/// Test for . +/// +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(); + + 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(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 button = RenderWithPropertySet(x => x.MessageType, value); + + Assert.Contains(expectedAttribute, button.Markup); + } + + private IRenderedComponent RenderWithPropertySet(Expression> propertyGetter, TProperty propertyValue) + { + var context = new TestContext(); + context.JSInterop.Mode = JSRuntimeMode.Loose; + return context.RenderComponent(p => p.Add(propertyGetter, propertyValue)); + } +} From 15f4e1e8c0023a5fb6bd94390b7c00a9a97b5364 Mon Sep 17 00:00:00 2001 From: "Jose A. Hernandez" Date: Fri, 14 Feb 2025 09:08:31 -0600 Subject: [PATCH 2/6] Change files --- ...pright-blazor-99902f16-3e43-4f68-85f6-11bc2f3ebc00.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-spright-blazor-99902f16-3e43-4f68-85f6-11bc2f3ebc00.json diff --git a/change/@ni-spright-blazor-99902f16-3e43-4f68-85f6-11bc2f3ebc00.json b/change/@ni-spright-blazor-99902f16-3e43-4f68-85f6-11bc2f3ebc00.json new file mode 100644 index 0000000000..48fe0fc0f5 --- /dev/null +++ b/change/@ni-spright-blazor-99902f16-3e43-4f68-85f6-11bc2f3ebc00.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Added Blazor wrappers for chat components", + "packageName": "@ni/spright-blazor", + "email": "jose.a.hernandez@ni.com", + "dependentChangeType": "patch" +} From 32080158a96374bf7bb7a6397d3bd36d5b41563f Mon Sep 17 00:00:00 2001 From: "Jose A. Hernandez" Date: Fri, 14 Feb 2025 09:10:36 -0600 Subject: [PATCH 3/6] Updated Blazor status for chat components --- packages/storybook/src/docs/component-status.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/storybook/src/docs/component-status.stories.ts b/packages/storybook/src/docs/component-status.stories.ts index 50fa740b9f..c9a8fb1b60 100644 --- a/packages/storybook/src/docs/component-status.stories.ts +++ b/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', From 15ebb1b26d6522f19127dee3116fc2fa61faebb3 Mon Sep 17 00:00:00 2001 From: "Jose A. Hernandez" Date: Fri, 14 Feb 2025 09:15:26 -0600 Subject: [PATCH 4/6] Added new line at the end of the SprightChatMessage.razor file --- .../SprightBlazor/Components/SprightChatMessage.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blazor-workspace/SprightBlazor/Components/SprightChatMessage.razor b/packages/blazor-workspace/SprightBlazor/Components/SprightChatMessage.razor index c9a709b717..2c035b2c0d 100644 --- a/packages/blazor-workspace/SprightBlazor/Components/SprightChatMessage.razor +++ b/packages/blazor-workspace/SprightBlazor/Components/SprightChatMessage.razor @@ -3,4 +3,4 @@ message-type="@MessageType.ToAttributeValue()" @attributes="AdditionalAttributes"> @ChildContent - \ No newline at end of file + From c120620949440a9a6e8e199d590ea06cc2b79d79 Mon Sep 17 00:00:00 2001 From: "Jose A. Hernandez" <107654185+joseahdz@users.noreply.github.com> Date: Fri, 14 Feb 2025 17:31:19 -0600 Subject: [PATCH 5/6] Added Blazor examples for the chat coversation and message --- ...-99902f16-3e43-4f68-85f6-11bc2f3ebc00.json | 4 +-- .../Demo.Shared/Pages/ComponentsDemo.razor | 35 +++++++++++++++++++ .../Pages/ComponentsDemo.razor.css | 5 +++ 3 files changed, 42 insertions(+), 2 deletions(-) diff --git a/change/@ni-spright-blazor-99902f16-3e43-4f68-85f6-11bc2f3ebc00.json b/change/@ni-spright-blazor-99902f16-3e43-4f68-85f6-11bc2f3ebc00.json index 48fe0fc0f5..4a0786c7b8 100644 --- a/change/@ni-spright-blazor-99902f16-3e43-4f68-85f6-11bc2f3ebc00.json +++ b/change/@ni-spright-blazor-99902f16-3e43-4f68-85f6-11bc2f3ebc00.json @@ -1,7 +1,7 @@ { "type": "minor", - "comment": "Added Blazor wrappers for chat components", + "comment": "Added Blazor wrappers for the chat components", "packageName": "@ni/spright-blazor", - "email": "jose.a.hernandez@ni.com", + "email": "107654185+joseahdz@users.noreply.github.com", "dependentChangeType": "patch" } diff --git a/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor b/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor index 88f7c21332..5b4448e5cd 100644 --- a/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor +++ b/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor @@ -431,5 +431,40 @@
Rectangle (Spright)
Spright! +
+
Chat Conversation and Messages (Spright)
+ + + To start, press any key. + + + Where is the Any key? + + + + Text Area Label + + + + + + + + + + + Order a tab + + + Check core temperature + + + +
diff --git a/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor.css b/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor.css index 21403fad42..5348b734e2 100644 --- a/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor.css +++ b/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; } \ No newline at end of file From 89af4d9f0361d777f845372b99ebf0bed64be55f Mon Sep 17 00:00:00 2001 From: "Jose A. Hernandez" <107654185+joseahdz@users.noreply.github.com> Date: Mon, 17 Feb 2025 09:21:39 -0600 Subject: [PATCH 6/6] Implemented feedback --- .../Examples/Demo.Shared/Pages/ComponentsDemo.razor | 10 ---------- .../Unit/Components/SprightChatMessageTests.cs | 4 ++-- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor b/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor index 5b4448e5cd..2a4c3599e9 100644 --- a/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor +++ b/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor @@ -440,16 +440,6 @@ Where is the Any key? - - - Text Area Label - - diff --git a/packages/blazor-workspace/Tests/SprightBlazor.Tests/Unit/Components/SprightChatMessageTests.cs b/packages/blazor-workspace/Tests/SprightBlazor.Tests/Unit/Components/SprightChatMessageTests.cs index 86adff06d8..36eee8a5d5 100644 --- a/packages/blazor-workspace/Tests/SprightBlazor.Tests/Unit/Components/SprightChatMessageTests.cs +++ b/packages/blazor-workspace/Tests/SprightBlazor.Tests/Unit/Components/SprightChatMessageTests.cs @@ -37,9 +37,9 @@ public void SprightChatMessage_SupportsAdditionalAttributes() [InlineData(ChatMessageType.System, "message-type=\"system\"")] public void SprightChatMessageTypeVariant_AttributeIsSet(ChatMessageType value, string expectedAttribute) { - var button = RenderWithPropertySet(x => x.MessageType, value); + var message = RenderWithPropertySet(x => x.MessageType, value); - Assert.Contains(expectedAttribute, button.Markup); + Assert.Contains(expectedAttribute, message.Markup); } private IRenderedComponent RenderWithPropertySet(Expression> propertyGetter, TProperty propertyValue)