@@ -156,6 +202,64 @@
private const string SampleImage = "data:image/svg+xml;utf8,
";
+ private readonly string[] _suggestions = { "What is ShellUI?", "Show me a dialog example", "How do I add a theme?" };
+
+ private string? _reasoning;
+ private bool _reasoningStreaming;
+ private TimeSpan? _reasoningTime;
+ private string _toolState = "pending";
+ private string? _toolResult;
+ private bool _agentRunning;
+ private const string ToolArguments = "{ \"query\": \"dialog focus trap\", \"limit\": 3 }";
+
+ private async Task RunAgentAsync()
+ {
+ _agentRunning = true;
+ _reasoning = "";
+ _reasoningTime = null;
+ _toolState = "pending";
+ _toolResult = null;
+ _reasoningStreaming = true;
+ var started = DateTime.UtcNow;
+ foreach (var word in "The user wants to know how dialogs keep focus. I should search the docs for the focus trap, then summarise what Tab does inside an open dialog.".Split(' '))
+ {
+ _reasoning += word + " ";
+ StateHasChanged();
+ await Task.Delay(90);
+ }
+ _reasoningStreaming = false;
+ _reasoningTime = DateTime.UtcNow - started;
+ _toolState = "running";
+ StateHasChanged();
+ await Task.Delay(1500);
+ _toolResult = "[\n \"overlays/dialog.md#focus\",\n \"guides/accessibility.md\",\n \"changelog.md#0-3-5\"\n]";
+ _toolState = "done";
+ _agentRunning = false;
+ }
+
+ private sealed class SignupModel
+ {
+ [System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Email is required.")]
+ [System.ComponentModel.DataAnnotations.EmailAddress(ErrorMessage = "Enter a valid email address.")]
+ public string Email { get; set; } = "";
+
+ public bool Digest { get; set; } = true;
+ }
+
+ private readonly SignupModel _signup = new();
+ private bool _signedUp;
+
+ private readonly object _sampleJson = new
+ {
+ name = "ShellUI",
+ version = "0.4.0-alpha.3",
+ stable = false,
+ stars = 42,
+ targets = new[] { "net8.0", "net10.0" },
+ theme = new { radius = "0.5rem", colors = new { primary = "oklch(0.21 0.006 285.88)", destructive = "oklch(0.58 0.24 28.48)" } },
+ homepage = (string?)null
+ };
+
private async Task SendAsync(string text)
{
_messages.Add(("user", text));
diff --git a/NET10/BlazorInteractiveServer/Components/Pages/Components/NewComponents.razor b/NET10/BlazorInteractiveServer/Components/Pages/Components/NewComponents.razor
index b5ce4f4..e680b59 100644
--- a/NET10/BlazorInteractiveServer/Components/Pages/Components/NewComponents.razor
+++ b/NET10/BlazorInteractiveServer/Components/Pages/Components/NewComponents.razor
@@ -8,7 +8,7 @@
New in 0.4
-
Kbd, AspectRatio, ButtonGroup, ToggleGroup, InputGroup, NumberInput, StatCard, Timeline, TreeView, QrCode, ImageViewer and Chat.
+
Kbd, AspectRatio, ButtonGroup, ToggleGroup, InputGroup, NumberInput, StatCard, Timeline, TreeView, QrCode, ImageViewer, Chat, PromptSuggestions, Reasoning, ToolCall, Field and JsonViewer.
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Field.razor b/NET10/BlazorInteractiveServer/Components/UI/Field.razor
new file mode 100644
index 0000000..bfaec52
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/Field.razor
@@ -0,0 +1,70 @@
+@namespace BlazorInteractiveServer.Components.UI
+@using System.Linq.Expressions
+@using Microsoft.AspNetCore.Components.Forms
+
+
+
+ @if (IsHorizontal)
+ {
+
+ @if (!string.IsNullOrEmpty(Label))
+ {
+
+ }
+ @if (!string.IsNullOrEmpty(Description))
+ {
+
@Description
+ }
+
+
+
@ChildContent
+ }
+ else
+ {
+ @if (!string.IsNullOrEmpty(Label))
+ {
+
+ }
+ @ChildContent
+ @if (!string.IsNullOrEmpty(Description))
+ {
+
@Description
+ }
+
+ }
+
+
+@code {
+ [Parameter] public string? Label { get; set; }
+ // The id of the control inside, so clicking the label focuses it.
+ [Parameter] public string? LabelFor { get; set; }
+ [Parameter] public string? Description { get; set; }
+ // Shown instead of the EditForm's validation messages for For.
+ [Parameter] public string? Error { get; set; }
+ // The model property whose validation messages to show, as in FormField.
+ [Parameter] public Expression
>? For { get; set; }
+ [Parameter] public bool Required { get; set; }
+ // "vertical" or "horizontal" (label and description beside the control, for switches and checkboxes).
+ [Parameter] public string Orientation { get; set; } = "vertical";
+ [Parameter] public RenderFragment? ChildContent { get; set; }
+ [Parameter] public string? Class { get; set; }
+ [Parameter(CaptureUnmatchedValues = true)]
+ public Dictionary? AdditionalAttributes { get; set; }
+
+ private bool IsHorizontal => string.Equals(Orientation, "horizontal", StringComparison.OrdinalIgnoreCase);
+
+ private FieldIdentifier FieldIdentifier => For != null ? FieldIdentifier.Create(For) : default;
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/FormMessage.razor b/NET10/BlazorInteractiveServer/Components/UI/FormMessage.razor
new file mode 100644
index 0000000..6833745
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/FormMessage.razor
@@ -0,0 +1,48 @@
+@namespace BlazorInteractiveServer.Components.UI
+@using Microsoft.AspNetCore.Components.Forms
+@implements IDisposable
+
+@if (Messages.Length > 0)
+{
+
+ @string.Join(", ", Messages)
+
+}
+
+@code {
+ [CascadingParameter] private EditContext? EditContext { get; set; }
+ [CascadingParameter(Name = "ShellUIFormField")] private FieldIdentifier Field { get; set; }
+ [Parameter] public string? Message { get; set; }
+ [Parameter] public string? FieldName { get; set; }
+ [Parameter] public string? Class { get; set; }
+ [Parameter(CaptureUnmatchedValues = true)]
+ public Dictionary? AdditionalAttributes { get; set; }
+
+ private EditContext? _subscribed;
+
+ private string[] Messages
+ {
+ get
+ {
+ if (!string.IsNullOrEmpty(Message)) return new[] { Message };
+ if (EditContext == null) return Array.Empty();
+ var target = string.IsNullOrEmpty(FieldName) ? Field : new FieldIdentifier(EditContext.Model, FieldName);
+ return target.Model == null ? Array.Empty() : EditContext.GetValidationMessages(target).ToArray();
+ }
+ }
+
+ protected override void OnParametersSet()
+ {
+ if (_subscribed == EditContext) return;
+ if (_subscribed != null) _subscribed.OnValidationStateChanged -= OnValidationStateChanged;
+ _subscribed = EditContext;
+ if (_subscribed != null) _subscribed.OnValidationStateChanged += OnValidationStateChanged;
+ }
+
+ private void OnValidationStateChanged(object? sender, ValidationStateChangedEventArgs e) => InvokeAsync(StateHasChanged);
+
+ public void Dispose()
+ {
+ if (_subscribed != null) _subscribed.OnValidationStateChanged -= OnValidationStateChanged;
+ }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/JsonViewer.razor b/NET10/BlazorInteractiveServer/Components/UI/JsonViewer.razor
new file mode 100644
index 0000000..01cea13
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/JsonViewer.razor
@@ -0,0 +1,57 @@
+@namespace BlazorInteractiveServer.Components.UI
+@using System.Text.Json
+
+
+ @if (_error != null)
+ {
+
@_error
+ }
+ else if (_root is { } root)
+ {
+ @if (ShowCopy)
+ {
+
+ }
+ @* Keyed on the source so new JSON resets which nodes are open. *@
+
+ }
+
+ @if (IsContainer)
+ {
+
+ @if (_open)
+ {
+
+ @foreach (var (child, name, index) in Children)
+ {
+
+ }
+
+
@(Close)@Comma
+ }
+ }
+ else
+ {
+
+ @if (Name != null)
+ {
+ "@Name":
+ }
+ @Element.GetRawText()@Comma
+
+ }
+
+ @foreach (var suggestion in Suggestions)
+ {
+
+ }
+
+
+@code {
+ [Parameter] public IEnumerable Suggestions { get; set; } = Array.Empty();
+ [Parameter] public EventCallback OnSelect { get; set; }
+ [Parameter] public bool Disabled { get; set; }
+ [Parameter] public string? Class { get; set; }
+ [Parameter(CaptureUnmatchedValues = true)]
+ public Dictionary? AdditionalAttributes { get; set; }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Reasoning.razor b/NET10/BlazorInteractiveServer/Components/UI/Reasoning.razor
new file mode 100644
index 0000000..e7be890
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/Reasoning.razor
@@ -0,0 +1,52 @@
+@namespace BlazorInteractiveServer.Components.UI
+
+
+
+ @if (_open)
+ {
+
@(Text)@ChildContent
+ }
+
+
+ @if (_open)
+ {
+
+ @if (!string.IsNullOrEmpty(Arguments))
+ {
+
+
Arguments
+
@Arguments
+
+ }
+ @if (!string.IsNullOrEmpty(Result))
+ {
+
+ }
+ @if (!string.IsNullOrEmpty(Error))
+ {
+
+ }
+ @ChildContent
+
+ }
+
+ @if (IsHorizontal)
+ {
+
+ @if (!string.IsNullOrEmpty(Label))
+ {
+
+ }
+ @if (!string.IsNullOrEmpty(Description))
+ {
+
@Description
+ }
+
+
+
@ChildContent
+ }
+ else
+ {
+ @if (!string.IsNullOrEmpty(Label))
+ {
+
+ }
+ @ChildContent
+ @if (!string.IsNullOrEmpty(Description))
+ {
+
@Description
+ }
+
+ }
+
+ @if (_error != null)
+ {
+
@_error
+ }
+ else if (_root is { } root)
+ {
+ @if (ShowCopy)
+ {
+
+ }
+ @* Keyed on the source so new JSON resets which nodes are open. *@
+
+ }
+
+ @if (IsContainer)
+ {
+
+ @if (_open)
+ {
+
+ @foreach (var (child, name, index) in Children)
+ {
+
+ }
+
+
@(Close)@Comma
+ }
+ }
+ else
+ {
+
+ @if (Name != null)
+ {
+ "@Name":
+ }
+ @Element.GetRawText()@Comma
+
+ }
+
+ @foreach (var suggestion in Suggestions)
+ {
+
+ }
+
+
+@code {
+ [Parameter] public IEnumerable Suggestions { get; set; } = Array.Empty();
+ [Parameter] public EventCallback OnSelect { get; set; }
+ [Parameter] public bool Disabled { get; set; }
+ [Parameter] public string? Class { get; set; }
+ [Parameter(CaptureUnmatchedValues = true)]
+ public Dictionary? AdditionalAttributes { get; set; }
+}
diff --git a/src/ShellUI.Components/Components/Reasoning.razor b/src/ShellUI.Components/Components/Reasoning.razor
new file mode 100644
index 0000000..c2e80e8
--- /dev/null
+++ b/src/ShellUI.Components/Components/Reasoning.razor
@@ -0,0 +1,52 @@
+@namespace ShellUI.Components
+
+
+
+ @if (_open)
+ {
+
@(Text)@ChildContent
+ }
+
+
+ @if (_open)
+ {
+
+ @if (!string.IsNullOrEmpty(Arguments))
+ {
+
+
Arguments
+
@Arguments
+
+ }
+ @if (!string.IsNullOrEmpty(Result))
+ {
+
+ }
+ @if (!string.IsNullOrEmpty(Error))
+ {
+
+ }
+ @ChildContent
+
+ }
+
+ @if (IsHorizontal)
+ {
+
+ @if (!string.IsNullOrEmpty(Label))
+ {
+
+ }
+ @if (!string.IsNullOrEmpty(Description))
+ {
+
@Description
+ }
+
+
+
@ChildContent
+ }
+ else
+ {
+ @if (!string.IsNullOrEmpty(Label))
+ {
+
+ }
+ @ChildContent
+ @if (!string.IsNullOrEmpty(Description))
+ {
+
@Description
+ }
+
+ }
+
+ @if (IsContainer)
+ {
+
+ @if (_open)
+ {
+
+ @foreach (var (child, name, index) in Children)
+ {
+
+ }
+
+
@(Close)@Comma
+ }
+ }
+ else
+ {
+
+ @if (Name != null)
+ {
+ ""@Name"":
+ }
+ @Element.GetRawText()@Comma
+
+ }
+
+ @if (_error != null)
+ {
+
@_error
+ }
+ else if (_root is { } root)
+ {
+ @if (ShowCopy)
+ {
+
+ }
+ @* Keyed on the source so new JSON resets which nodes are open. *@
+
+ }
+
+ @foreach (var suggestion in Suggestions)
+ {
+
+ }
+
+
+@code {
+ [Parameter] public IEnumerable Suggestions { get; set; } = Array.Empty();
+ [Parameter] public EventCallback OnSelect { get; set; }
+ [Parameter] public bool Disabled { get; set; }
+ [Parameter] public string? Class { get; set; }
+ [Parameter(CaptureUnmatchedValues = true)]
+ public Dictionary? AdditionalAttributes { get; set; }
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/ReasoningTemplate.cs b/src/ShellUI.Templates/Templates/ReasoningTemplate.cs
new file mode 100644
index 0000000..e088076
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/ReasoningTemplate.cs
@@ -0,0 +1,71 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class ReasoningTemplate
+{
+ public static ComponentMetadata Metadata => new()
+ {
+ Name = "reasoning",
+ DisplayName = "Reasoning",
+ Description = "Collapsible block that streams a model's reasoning",
+ Category = ComponentCategory.DataDisplay,
+ FilePath = "Reasoning.razor",
+ Dependencies = new List(),
+ Tags = new List { "chat", "ai", "reasoning", "thinking", "collapsible" }
+ };
+
+ public static string Content => @"@namespace YourProjectNamespace.Components.UI
+
+
+
+ @if (_open)
+ {
+
@(Text)@ChildContent
+ }
+
+
+ @if (_open)
+ {
+
+ @if (!string.IsNullOrEmpty(Arguments))
+ {
+
+
Arguments
+
@Arguments
+
+ }
+ @if (!string.IsNullOrEmpty(Result))
+ {
+
+ }
+ @if (!string.IsNullOrEmpty(Error))
+ {
+
+ }
+ @ChildContent
+
+ }
+