Code(WEB::AssistantForm): Add AssistantForm component

ktutak1337 · May 22, 2024 · 495aa3c · 495aa3c
1 parent f2eed84
commit 495aa3c
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 16 deletions.
diff --git a/src/Client/StellarChat.Client.Web/Components/Assistants/AssistantForm.razor b/src/Client/StellarChat.Client.Web/Components/Assistants/AssistantForm.razor
@@ -0,0 +1,101 @@
+@inject NavigationManager _navigationManager
+@inject IAssistantService _assistantService
+
+<EditForm Model="@Assistant" OnValidSubmit="OnValidSubmit">
+    <DataAnnotationsValidator />
+    <div class="d-flex flex-column flex-grow-1 gap-3 pa-4">
+        <MudText>Name</MudText>
+        <MudTextField @bind-Value="Assistant!.Name" Variant="Variant.Outlined" Margin="Margin.Dense" />
+
+        <MudText>Description</MudText>
+        <MudTextField @bind-Value="Assistant!.Description" Variant="Variant.Outlined" Margin="Margin.Dense" />
+
+        <MudText>Avatar</MudText>
+        <div class="d-flex flex-row flex-grow-1 gap-4 align-center">
+            <MudAvatar Size="Size.Medium" Color="Color.Secondary">
+                <MudImage Src="@Assistant.AvatarUrl" />
+            </MudAvatar>
+            <MudFileUpload T="IBrowserFile">
+                <ButtonTemplate Context="fileContext">
+                    <MudButton HtmlTag="label"
+                               Variant="Variant.Filled"
+                               Color="Color.Primary"
+                               Size="Size.Small"
+                               for="@fileContext.Id">
+                        Change
+                    </MudButton>
+                </ButtonTemplate>
+                <SelectedTemplate Context="fileContext"/>
+            </MudFileUpload>
+        </div>
+        <MudText Typo="Typo.caption">Max file size: 5MB. Accepted formats: JPG, PNG, GIF</MudText>
+
+        <MudText>Model</MudText>
+        <MudSelect @bind-Value="Assistant.DefaultModel" Margin="Margin.Dense" T="string" Variant="Variant.Outlined">
+            @foreach (var model in AvailableModels)
+            {
+                <MudSelectItem Value="@model" />
+            }
+        </MudSelect>
+
+        <MudText>Metaprompt</MudText>
+        <MudTextField @bind-Value="Assistant!.Metaprompt" T="string" Variant="Variant.Outlined" AutoGrow Lines="7" MaxLines="10" Margin="Margin.Dense" HelperText="@assistantBehaviorGuidelines" />
+    </div>
+    <div class="d-flex flex-row flex-grow-1 justify-end gap-4 pa-4">
+        <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Class="ml-auto">Save</MudButton>
+    </div>
+</EditForm>
+
+@code 
+{
+    [Parameter] public Guid AssistantId { get; set; }
+    private Assistant? Assistant { get; set; } = new();
+    private List<string> AvailableModels { get; set; } = new() { "gpt-4", "gpt-3.5-turbo" };
+
+    private const string assistantBehaviorGuidelines = @"
+Enter the Metaprompt here. This set of instructions will define your assistant's behavior
+in every conversation, guiding how it interacts and responds. Keep it concise, clear, and
+reflective of the assistant's intended personality and capabilities.";
+
+
+    private bool success;
+
+    protected async override Task OnParametersSetAsync()
+    {
+        await PopulateForm();
+    }
+
+    private void OnValidSubmit(EditContext context)
+    {
+        success = true;
+        StateHasChanged();
+    }
+
+    private async Task PopulateForm()
+    {
+        if (Guid.Empty != AssistantId)
+        {
+            var assistant = await _assistantService.GetAssistant(AssistantId);
+
+            if (assistant is not null)
+            {
+                var (id, name, metaprompt, description, avatarUrl, defaultModel, defaultVoice, isDefault, createdAt, updatedAt) = assistant;
+
+                Assistant = new Assistant
+                {
+                    Id = id,
+                    Name = name,
+                    Metaprompt = metaprompt,
+                    Description = description,
+                    // TODO: temp solution
+                    AvatarUrl = "https://th.bing.com/th/id/OIG3.PYK1.ctv1ceJsoR9RZxZ?w=270&h=270&c=6&r=0&o=5&dpr=1.1&pid=ImgGn",
+                    DefaultModel = defaultModel,
+                    DefaultVoice = defaultVoice,
+                    IsDefault = isDefault,
+                    CreatedAt = createdAt,
+                    UpdatedAt = updatedAt
+                };
+            }
+        }
+    }
+}
diff --git a/src/Client/StellarChat.Client.Web/Components/Assistants/AssistantItem.razor b/src/Client/StellarChat.Client.Web/Components/Assistants/AssistantItem.razor
@@ -11,26 +11,27 @@
             <MudSpacer />
             <MudMenu Icon="@Icons.Material.Filled.MoreVert">
                 <MudMenuItem OnClick="SetDefaultAssitant">Set as default</MudMenuItem>
-                <MudMenuItem OnClick="EditAssistant">Edit</MudMenuItem>
+                <MudMenuItem OnClick="() => EditAssistant(Assistant!.Id)">Edit</MudMenuItem>
                 <MudMenuItem OnClick="DeleteAssistant">Delete</MudMenuItem>
             </MudMenu>
         </div>
     </ChildContent>
 </MudListItem>
 <MudDivider />
 
-@code 
+@code
 {
     [Parameter] public AssistantResponse? Assistant { get; set; }
+    [Parameter] public EventCallback<Guid> OnEdit { get; set; }
 
     private async Task SetDefaultAssitant()
     {
         await Task.CompletedTask;
     }
 
-    private async Task EditAssistant()
+    private async Task EditAssistant(Guid id)
     {
-        await Task.CompletedTask;
+        await OnEdit.InvokeAsync(id);
     }
 
     private async Task DeleteAssistant()

diff --git a/src/Client/StellarChat.Client.Web/Components/Assistants/AssistantsDrawer.razor b/src/Client/StellarChat.Client.Web/Components/Assistants/AssistantsDrawer.razor
@@ -2,18 +2,34 @@
 
 <MudDrawerContainer Class="mud-height-full">
     <MudDrawer @bind-Open="IsOpen" Anchor="Anchor.Left" DisableOverlay="true" Elevation="8">
-        <MudDrawerHeader Class="pr-2 pt-1">
-            <MudText Typo="Typo.h6" Class="mt-2">Select or Manage Assistants</MudText>
-            <MudSpacer />
-            <MudIconButton OnClick="CloseDrawer" Icon="@Icons.Material.Filled.Close" Color="(_IsDarkModeEnabled ? Color.Default : Color.Dark)" />
-        </MudDrawerHeader>
-        <MudList Clickable="true">
-            <MudDivider />
-            @foreach (var assistant in Assistants)
-            {
-                <AssistantItem Assistant="@assistant" />
-            }
-        </MudList>
+        @if (isEditing)
+        {
+            <MudDrawerHeader Class="pr-2 pt-1">
+                <MudText Typo="Typo.h6" Class="mt-2">Edit Assistant</MudText>
+                <MudSpacer />
+                <MudIconButton OnClick="CloseDrawer" Icon="@Icons.Material.Filled.Close" Color="(_IsDarkModeEnabled ? Color.Default : Color.Dark)" />
+            </MudDrawerHeader>
+            <div>
+                <MudDivider />
+                <AssistantForm AssistantId="selectedAssistantId" />
+            </div>
+        }
+        else
+        {
+            <MudDrawerHeader Class="pr-2 pt-1">
+                <MudText Typo="Typo.h6" Class="mt-2">Select or Manage Assistants</MudText>
+                <MudSpacer />
+                <MudIconButton OnClick="CloseDrawer" Icon="@Icons.Material.Filled.Close" Color="(_IsDarkModeEnabled ? Color.Default : Color.Dark)" />
+            </MudDrawerHeader>
+            <MudList Clickable="true">
+                <MudDivider />
+                @foreach (var assistant in Assistants)
+                {
+                    <AssistantItem Assistant="@assistant"
+                                   OnEdit="() => EditAssistant(assistant.Id)" />
+                }
+            </MudList>
+        }
     </MudDrawer>
 </MudDrawerContainer>
 
@@ -28,6 +44,9 @@
     [CascadingParameter]
     private bool _IsDarkModeEnabled { get; set; }
 
+    private bool isEditing = false;
+    private Guid selectedAssistantId;
+
     public List<AssistantResponse> Assistants { get; set; } = new();
 
     protected override async Task OnInitializedAsync()
@@ -44,6 +63,13 @@
     private void CloseDrawer()
     {
         IsOpen = false;
+        isEditing = false;
         IsOpenChanged.InvokeAsync(IsOpen);
     }
+
+    private void EditAssistant(Guid id)
+    {
+        selectedAssistantId = id;
+        isEditing = true;
+    }
 }
diff --git a/src/Client/StellarChat.Client.Web/Models/Assistant.cs b/src/Client/StellarChat.Client.Web/Models/Assistant.cs
@@ -0,0 +1,15 @@
+namespace StellarChat.Client.Web.Models;
+
+public class Assistant
+{
+    public Guid Id { get; set; }
+    public string Name { get; set; } = string.Empty;
+    public string Metaprompt { get; set; } = string.Empty;
+    public string Description { get; set; } = string.Empty;
+    public string AvatarUrl { get; set; } = string.Empty;
+    public string DefaultModel { get; set; } = string.Empty;
+    public string DefaultVoice { get; set; } = string.Empty;
+    public bool IsDefault { get; set; }
+    public DateTimeOffset CreatedAt { get; set; }
+    public DateTimeOffset UpdatedAt { get; set; }
+}
diff --git a/src/Client/StellarChat.Client.Web/_Imports.razor b/src/Client/StellarChat.Client.Web/_Imports.razor
@@ -18,3 +18,5 @@
 @using StellarChat.Client.Web.Services.Chat
 @using StellarChat.Client.Web.Models
 @using StellarChat.Client.Web.State
+@using System.Text.RegularExpressions
+@using System.ComponentModel.DataAnnotations