Skip to content

Commit 212ec65

Browse files
justinyoojustinyoo
committed
Refactor ConfigWindowComponent
1 parent 6657bef commit 212ec65

File tree

12 files changed

+478
-584
lines changed

12 files changed

+478
-584
lines changed

‎src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Playground.razor‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@
88

99
<FluentGrid Spacing="3" AdaptiveRendering="true" Justify="JustifyContent.FlexStart">
1010
<FluentGridItem Class="config-grid" xs="12" sm="12" md="4" lg="4" xl="4" xxl="4">
11-
<ApiKeyInputComponent Id="api-key" @rendermode="InteractiveServer" />
12-
<ConfigTabComponent @rendermode="InteractiveServer"/>
11+
<ConfigWindowComponent Id="config-window" @rendermode="InteractiveServer" />
1312
</FluentGridItem>
1413

1514
<FluentGridItem Class="chat-grid" xs="12" sm="12" md="8" lg="8" xl="8" xxl="8" Style="height: 900px;">

‎src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Tests.razor‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ApiKeyInputComponent.razor‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
<FluentTextField Id="@Id" @bind-Value=apiKeyValue TextFieldType="TextFieldType.Password" data-type="GUID" @oninput="SetApiKey" Required="true">API key input</FluentTextField>
1+
<FluentStack Id="@Id" Style="width: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Top">
2+
<FluentTextField Id="api-key-field" Label="API key" Required="true"
3+
TextFieldType="TextFieldType.Password"
4+
Placeholder="Enter API key"
5+
@bind-Value="apiKeyValue"
6+
@oninput="SetApiKey" />
7+
</FluentStack>
28

39
@code {
410
private string? apiKeyValue { get; set; }

‎src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ConfigTabComponent.razor‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
1-
<FluentTabs Id="config-tab" ActiveTabId="system-message" OnTabChange="ChangeTab">
2-
<FluentTab Label="System message" Id="system-message-tab">
3-
This is "System message" tab.
4-
</FluentTab>
5-
<FluentTab Label="Parameters" Id="parameters-tab">
6-
This is "Parameters" tab.
7-
</FluentTab>
8-
</FluentTabs>
9-
10-
<p id="active-tab">[TEST] Active tab changed to: @SelectedTab?.Id</p>
1+
<FluentStack Id="@Id" Style="width: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Top">
2+
<FluentTabs Id="config-tabs" Style="width: 100%;" ActiveTabId="system-message-tab" OnTabChange="ChangeTab">
3+
<FluentTab Id="system-message-tab" Label="System message">
4+
This is "System message" tab.
5+
</FluentTab>
6+
<FluentTab Id="parameters-tab" Label="Parameters">
7+
This is "Parameters" tab.
8+
</FluentTab>
9+
</FluentTabs>
10+
</FluentStack>
1111

1212
@code {
13-
FluentTab? SelectedTab;
13+
private FluentTab? selectedTab { get; set; }
14+
15+
[Parameter]
16+
public string? Id { get; set; }
1417

1518
private async Task ChangeTab(FluentTab tab)
1619
{
17-
SelectedTab = tab;
20+
this.selectedTab = tab;
1821
await Task.CompletedTask;
1922
}
2023
}

‎src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ConfigWindowComponent.razor‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@using AzureOpenAIProxy.PlaygroundApp.Models
2+
3+
<FluentStack Id="@Id" Style="width: 100%; height: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Top">
4+
<FluentLabel Typo="Typography.H2">Setup</FluentLabel>
5+
<ApiKeyInputComponent Id="api-key" OnKeyInput="SetApiKey" @rendermode="InteractiveServer" />
6+
<DeploymentModelListComponent Id="deployment-model-list" OnUserOptionSelected="SetDeploymentModel" @rendermode="InteractiveServer" />
7+
<FluentDivider />
8+
<ConfigTabComponent id="config-tab" @rendermode="InteractiveServer" />
9+
</FluentStack>
10+
11+
@code {
12+
private string? apiKey;
13+
private string? deploymentModel;
14+
15+
[Parameter]
16+
public string? Id { get; set; }
17+
18+
private async Task SetApiKey(string apiKey)
19+
{
20+
this.apiKey = apiKey;
21+
22+
await Task.CompletedTask;
23+
}
24+
25+
private async Task SetDeploymentModel(string deploymentModel)
26+
{
27+
this.deploymentModel = deploymentModel;
28+
29+
await Task.CompletedTask;
30+
}
31+
}

‎src/AzureOpenAIProxy.PlaygroundApp/Components/UI/DebugButtonComponent.razor‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎src/AzureOpenAIProxy.PlaygroundApp/Components/UI/DebugTargetComponent.razor‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎src/AzureOpenAIProxy.PlaygroundApp/Components/UI/DeploymentModelListComponent.razor‎

Lines changed: 26 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,39 @@
1-
<FluentLayout Id="@Id" Style="margin: 10px;">
2-
<div style="display: flex; align-items: center; margin-bottom: 5px;">
3-
<label id="deployment-model-label" for="deployment-model-list-options" style="margin-right: 5px;">Deployment</label>
4-
<span style="color: red;">*</span>
5-
</div>
6-
7-
<FluentSelect Items=@deploymentModelOptions Id="deployment-model-list-options" name="deployment-models"
8-
TOption="Option<string>" Height="300px"
9-
OptionText="@(e => e.Text?.ToString())"
10-
OptionValue="@(e => e.Value?.ToString())"
11-
OptionSelected="@(e => e.Selected)"
12-
@bind-SelectedOption="@selectedOption"
13-
@onclick="OnValueChanged"
14-
aria-labelledby="deployment-model-label">
15-
</FluentSelect>
16-
</FluentLayout>
1+
<FluentStack Id="@Id" Style="width: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Top">
2+
<FluentSelect Id="deployment-model-list-options" Label="Deployment" Required="true"
3+
Placeholder="Select a deployment model"
4+
Items=@deploymentModels
5+
TOption="Option<string>"
6+
OptionText="@(option => option.Text!)"
7+
OptionValue="@(option => option.Value!)"
8+
@bind-SelectedOption="@selectedOption"
9+
@onchange="SetDeploymentModel"/>
10+
</FluentStack>
1711

1812
@code {
19-
private Option<string>? selectedOption { get; set; } = new();
13+
private List<Option<string>>? deploymentModels;
14+
private Option<string>? selectedOption { get; set; }
2015

2116
[Parameter]
2217
public string? Id { get; set; }
2318

2419
[Parameter]
2520
public EventCallback<string> OnUserOptionSelected { get; set; }
26-
27-
private async Task OnValueChanged()
21+
22+
protected override async Task OnInitializedAsync()
2823
{
29-
string? selectedValue = selectedOption?.Value?.ToString();
30-
await OnUserOptionSelected.InvokeAsync(selectedValue);
24+
this.deploymentModels = new()
25+
{
26+
new Option<string> { Value = "model-gpt35turbo16k-0613", Text = "model-gpt35turbo16k-0613" },
27+
new Option<string> { Value = "model-gpt4o-20240513", Text = "model-gpt4o-20240513" },
28+
};
29+
30+
await Task.CompletedTask;
3131
}
3232

33-
static List<Option<string>> deploymentModelOptions = new()
33+
private async Task SetDeploymentModel()
3434
{
35-
new Option<string> { Value = "AL", Text = "Alabama" },
36-
new Option<string> { Value = "AK", Text = "Alaska" },
37-
new Option<string> { Value = "AZ", Text = "Arizona" },
38-
new Option<string> { Value = "AR", Text = "Arkansas" },
39-
new Option<string> { Value = "CA", Text = "California" },
40-
new Option<string> { Value = "CO", Text = "Colorado" },
41-
new Option<string> { Value = "CT", Text = "Connecticut" },
42-
new Option<string> { Value = "DE", Text = "Delaware" },
43-
new Option<string> { Value = "FL", Text = "Florida" },
44-
new Option<string> { Value = "GA", Text = "Georgia" },
45-
new Option<string> { Value = "HI", Text = "Hawaii" },
46-
new Option<string> { Value = "ID", Text = "Idaho" },
47-
new Option<string> { Value = "IL", Text = "Illinois" },
48-
new Option<string> { Value = "IN", Text = "Indiana" },
49-
new Option<string> { Value = "IA", Text = "Iowa" },
50-
new Option<string> { Value = "KS", Text = "Kansas" },
51-
new Option<string> { Value = "KY", Text = "Kentucky" },
52-
new Option<string> { Value = "LA", Text = "Louisiana" },
53-
new Option<string> { Value = "ME", Text = "Maine" },
54-
new Option<string> { Value = "MD", Text = "Maryland" },
55-
new Option<string> { Value = "MA", Text = "Massachussets" },
56-
new Option<string> { Value = "MI", Text = "Michigain" },
57-
new Option<string> { Value = "MN", Text = "Minnesota" },
58-
new Option<string> { Value = "MS", Text = "Mississippi" },
59-
new Option<string> { Value = "MO", Text = "Missouri" },
60-
new Option<string> { Value = "MT", Text = "Montana" },
61-
new Option<string> { Value = "NE", Text = "Nebraska" },
62-
new Option<string> { Value = "NV", Text = "Nevada" },
63-
new Option<string> { Value = "NH", Text = "New Hampshire" },
64-
new Option<string> { Value = "NJ", Text = "New Jersey" },
65-
new Option<string> { Value = "NM", Text = "New Mexico" },
66-
new Option<string> { Value = "NY", Text = "New York" },
67-
new Option<string> { Value = "NC", Text = "North Carolina" },
68-
new Option<string> { Value = "ND", Text = "North Dakota" },
69-
new Option<string> { Value = "OH", Text = "Ohio" },
70-
new Option<string> { Value = "OK", Text = "Oklahoma" },
71-
new Option<string> { Value = "OR", Text = "Oregon" },
72-
new Option<string> { Value = "PA", Text = "Pennsylvania" }
73-
};
35+
var selectedValue = selectedOption?.Value!;
36+
37+
await OnUserOptionSelected.InvokeAsync(selectedValue);
38+
}
7439
}

0 commit comments

Comments
 (0)