Added timeline

IEvangelist · May 2, 2023 · ec15a54 · ec15a54
1 parent 294e1da
commit ec15a54
Show file tree

Hide file tree

Showing 12 changed files with 384 additions and 22 deletions.
diff --git a/Azure.OpenAI/Client/Components/CultureDialog.razor b/Azure.OpenAI/Client/Components/CultureDialog.razor
@@ -17,8 +17,8 @@
                         }
 
                         <MudSelectItem Value="@(culture)">
-                            <span class="pr-4 fi fi-@(GetCultureTwoLetterRegionName(culture))"></span> 
-                            @azureCulture.Name (@culture.Name)
+                            <span class="pr-4 fi fi-@(GetCultureTwoLetterRegionName(culture))" style="font-size: 1.5rem;"></span>
+                            <span class="pl-2">@azureCulture.Name (@culture.Name)</span>
                         </MudSelectItem>
                     }
                 </MudSelect>
@@ -28,7 +28,7 @@
     <DialogActions>
             <MudSpacer />
             <MudButton Color="Color.Secondary" Size="Size.Large"
-                       StartIcon="@Icons.Material.Filled.Check"
+                       StartIcon="@Icons.Material.Filled.Check" Class="ma-4"
                        Variant="Variant.Filled" OnClick="OnSaveCulture">
                 @Localizer["Select"]
             </MudButton>

diff --git a/Azure.OpenAI/Client/Components/CultureDialog.razor.cs b/Azure.OpenAI/Client/Components/CultureDialog.razor.cs
@@ -19,7 +19,12 @@ public sealed partial class CultureDialog
 
     protected override async Task OnInitializedAsync()
     {
+        _selectedCulture = CultureInfo.CurrentCulture;
         _supportedCultures = await CultureService.GetAvailableCulturesAsync();
+
+        Logger.LogInformation(
+            "Current culture: {Name} ({ISO}), also found {Num} of available cultures.",
+            _selectedCulture.Name, _selectedCulture.TwoLetterISOLanguageName, _supportedCultures.Count);
     }
 
     void OnSaveCulture()

diff --git a/Azure.OpenAI/Client/Components/VoiceDialog.razor b/Azure.OpenAI/Client/Components/VoiceDialog.razor
@@ -43,12 +43,12 @@
     </DialogContent>
     <DialogActions>
         <MudButton OnClick="OnCancel" Size="Size.Large"
-                   Variant="Variant.Filled">
+                   Variant="Variant.Filled" Class="ma-4">
             @Localizer["Cancel"]
         </MudButton>
         <MudSpacer />
         <MudButton Color="Color.Secondary" Size="Size.Large"
-                   StartIcon="@Icons.Material.Filled.Save"
+                   StartIcon="@Icons.Material.Filled.Save" Class="ma-4"
                    Variant="Variant.Filled" OnClick="OnSaveVoiceSelection">
             @Localizer["Save"]
         </MudButton>

diff --git a/Azure.OpenAI/Client/Extensions/StringExtensions.cs b/Azure.OpenAI/Client/Extensions/StringExtensions.cs
@@ -0,0 +1,18 @@
+// Copyright (c) David Pine. All rights reserved.
+// Licensed under the MIT License.
+
+namespace Azure.OpenAI.Client.Extensions;
+
+public static class StringExtensions
+{
+    private static readonly MarkdownPipeline s_pipeline = new MarkdownPipelineBuilder()
+        .ConfigureNewLine("\n")
+        .UseAdvancedExtensions()
+        .UseEmojiAndSmiley()
+        .UseSoftlineBreakAsHardlineBreak()
+        .Build();
+
+    public static string ToHtml(this string markdown) => string.IsNullOrWhiteSpace(markdown) is false
+        ? Markdown.ToHtml(markdown, s_pipeline)
+        : "";
+}
diff --git a/Azure.OpenAI/Client/Models/TimelineItem.cs b/Azure.OpenAI/Client/Models/TimelineItem.cs
@@ -0,0 +1,14 @@
+// Copyright (c) David Pine. All rights reserved.
+// Licensed under the MIT License.
+
+namespace Azure.OpenAI.Client.Models;
+
+public record class TimelineItem(
+    DateOnly Date,
+    string Label,
+    string Reference,
+    Detail[] Details);
+
+public record class Detail(
+    string Feature,
+    string? Reference = null);
diff --git a/Azure.OpenAI/Client/Pages/Timeline.razor b/Azure.OpenAI/Client/Pages/Timeline.razor
@@ -0,0 +1,50 @@
+@page "/history"
+
+<MudTimeline TimelineAlign="TimelineAlign.Start">
+@foreach (var (index, item) in Items.OrderBy(_ => _.Date).Select((item, i) => (i, item)))
+{
+    var (date, label, reference, details) = item;
+    var color = Colors[index % Colors.Length];
+    var isEven = index % 2 is 0;
+    var dateClass = isEven ? "text-align-end" : "";
+    var labelClass = !isEven ? "text-align-end" : "";    
+
+    <MudTimelineItem Color="@color" Size="Size.Medium" Variant="Variant.Filled">
+        <ItemOpposite>
+                <MudText Color="@color" Typo="Typo.h4" Class="@dateClass" Style="font-family: monospace;">
+                @($"{date:MMMM yyyy}")
+            </MudText>
+        </ItemOpposite>
+        <ItemDot>
+            <MudIcon Icon="@Icons.Material.Filled.Code"  />
+        </ItemDot>
+        <ItemContent>
+            <MudText GutterBottom="true" Class="@labelClass">
+                <MudLink Href="@reference" Target="_blank" Typo="Typo.h4"
+                         Style="font-family: monospace;" Color="@color">
+                    @label
+                    <MudIcon Icon="@Icons.Material.Filled.OpenInNew" Size="Size.Small" Color="@color" />
+                </MudLink>
+            </MudText>
+            <MudPaper Class="pa-4 rounded" Width="100%" Outlined="true">
+                <MudList Dense="true" Clickable="true" Color="@color">
+                    @foreach (var (feature, reference) in details.OrderBy(d => d.Feature))
+                    {
+                        <MudListItem Icon="@Icons.Material.Filled.CheckCircle" IconSize="Size.Small"
+                                     IconColor="@color" Disabled=@(reference is null)>
+                            <MudLink Typo="Typo.body1" Color="Color.Default" Target="_blank"
+                                     Style="font-family: monospace;" Href="@(reference ?? "#")">
+                                @((MarkupString)feature.ToHtml())                                
+                            </MudLink>
+                        </MudListItem>
+                    }
+                </MudList>
+            </MudPaper>
+        </ItemContent>
+    </MudTimelineItem>
+}
+    <MudScrollToTop VisibleCssClass="visible absolute"
+                    HiddenCssClass="invisible">
+        <MudFab Color="Color.Primary" IconSize="Size.Large" StartIcon="@Icons.Material.Filled.ArrowUpward" />
+    </MudScrollToTop>
+</MudTimeline>