Add event bubbling to playground

juhangil · Oct 19, 2024 · 0e4d524 · 0e4d524
1 parent a72bad9
commit 0e4d524
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Playground.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Playground.razor
@@ -1,14 +1,19 @@
 @page "/playground"
 @rendermode InteractiveServer
 
+@using AzureOpenAIProxy.PlaygroundApp.Models
+
 <PageTitle>Playground Page</PageTitle>
 
 <FluentLayout>
     <FluentHeader Style="padding-top: 5px;"><h1>Azure OpenAI Proxy Playground</h1></FluentHeader>
 
     <FluentGrid Spacing="0" AdaptiveRendering="true" Justify="JustifyContent.FlexStart">
         <FluentGridItem Class="config-grid" xs="12" sm="12" md="4" lg="4" xl="4" xxl="4" Style="border:1px solid lightgrey">
-            <ConfigWindowComponent Id="config-window" OnSystemMessageChanged="SetSystemMessage" @rendermode="InteractiveServer" />
+            <ConfigWindowComponent Id="config-window"
+                                   OnSystemMessageChanged="SetSystemMessage"
+                                   OnChatParametersChanged="SetChatParameters"
+                                   @rendermode="InteractiveServer" />
         </FluentGridItem>
 
         <FluentGridItem Class="chat-grid" xs="12" sm="12" md="8" lg="8" xl="8" xxl="8" Style="border:1px solid lightgrey">
@@ -19,11 +24,19 @@
 
 @code {
     private string? systemMessage;
+    private ChatParameters? chatParameters;
 
     private async Task SetSystemMessage(string systemMessage)
     {
         this.systemMessage = systemMessage;
 
         await Task.CompletedTask;
     }
+
+    private async Task SetChatParameters(ChatParameters parameters)
+    {
+        this.chatParameters = parameters;
+
+        await Task.CompletedTask;
+    }
 }
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ConfigTabComponent.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ConfigTabComponent.razor
@@ -1,10 +1,12 @@
+@using AzureOpenAIProxy.PlaygroundApp.Models
+
 <FluentStack Id="@Id" Style="width: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Top">
     <FluentTabs Id="config-tabs" Style="width: 100%;" ActiveTabId="system-message-tab" OnTabChange="ChangeTab">
         <FluentTab Id="system-message-tab" Label="System message">
             <SystemMessageTabComponent Id="system-message-tab-component" OnSystemMessageChanged="SetSystemMessage" />
         </FluentTab>
         <FluentTab Id="parameters-tab" Label="Parameters">
-            <ParametersTabComponent />
+            <ParametersTabComponent OnParametersChanged="OnChatParametersChanged" />
         </FluentTab>
     </FluentTabs>
 </FluentStack>
@@ -19,6 +21,9 @@
     [Parameter]
     public EventCallback<string> OnSystemMessageChanged { get; set; }
 
+    [Parameter]
+    public EventCallback<ChatParameters> OnChatParametersChanged { get; set; }
+
     private async Task ChangeTab(FluentTab tab)
     {
         this.selectedTab = tab;
@@ -29,7 +34,7 @@
     private async Task SetSystemMessage(string systemMessage)
     {
         this.systemMessage = systemMessage;
-        
+
         await OnSystemMessageChanged.InvokeAsync(systemMessage);
     }
 }
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ConfigWindowComponent.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ConfigWindowComponent.razor
@@ -5,7 +5,10 @@
     <ApiKeyInputComponent Id="api-key" OnKeyInput="SetApiKey" @rendermode="InteractiveServer" />
     <DeploymentModelListComponent Id="deployment-model-list" OnUserOptionSelected="SetDeploymentModel" @rendermode="InteractiveServer" />
     <FluentDivider />
-    <ConfigTabComponent id="config-tab" OnSystemMessageChanged="SetSystemMessage" @rendermode="InteractiveServer" />
+    <ConfigTabComponent id="config-tab"
+                        OnSystemMessageChanged="SetSystemMessage"
+                        OnChatParametersChanged="OnChatParametersChanged"
+                        @rendermode="InteractiveServer" />
 </FluentStack>
 
 @code {
@@ -19,6 +22,9 @@
     [Parameter]
     public EventCallback<string> OnSystemMessageChanged { get; set; }
 
+    [Parameter]
+    public EventCallback<ChatParameters> OnChatParametersChanged { get; set; }
+
     private async Task SetApiKey(string apiKey)
     {
         this.apiKey = apiKey;
@@ -36,7 +42,7 @@
     private async Task SetSystemMessage(string systemMessage)
     {
         this.systemMessage = systemMessage;
-        
+
         await OnSystemMessageChanged.InvokeAsync(systemMessage);
     }
 }
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParametersTabComponent.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParametersTabComponent.razor
@@ -1,5 +1,6 @@
 @using System.Linq
-@using PlaygroundApp.Models
+
+@using AzureOpenAIProxy.PlaygroundApp.Models
 
 <FluentLayout Id="@Id" Style="font-size:12px;font-weight:bold;">
     @* Past Messages Range *@