Skip to content

Commit c7991e7

Browse files
yjchun626yjchun626
authored
[Playground] System Message Tab: UI Component only aliencube#289 (aliencube#312)
1 parent e0d0ee4 commit c7991e7

File tree

6 files changed

+321
-58
lines changed

6 files changed

+321
-58
lines changed

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,22 @@
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-
<ConfigWindowComponent Id="config-window" @rendermode="InteractiveServer" />
11+
<ConfigWindowComponent Id="config-window" OnSystemMessageChanged="SetSystemMessage" @rendermode="InteractiveServer" />
1212
</FluentGridItem>
1313

1414
<FluentGridItem Class="chat-grid" xs="12" sm="12" md="8" lg="8" xl="8" xxl="8" Style="height: 900px;">
1515
<ChatWindowComponent Id="chat-window" @rendermode="InteractiveServer" />
1616
</FluentGridItem>
1717
</FluentGrid>
1818
</FluentLayout>
19+
20+
@code {
21+
private string? systemMessage;
22+
23+
private async Task SetSystemMessage(string systemMessage)
24+
{
25+
this.systemMessage = systemMessage;
26+
27+
await Task.CompletedTask;
28+
}
29+
}

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<FluentStack Id="@Id" Style="width: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Top">
22
<FluentTabs Id="config-tabs" Style="width: 100%;" ActiveTabId="system-message-tab" OnTabChange="ChangeTab">
33
<FluentTab Id="system-message-tab" Label="System message">
4-
This is "System message" tab.
4+
<SystemMessageTabComponent Id="system-message-tab-component" OnSystemMessageChanged="SetSystemMessage" />
55
</FluentTab>
66
<FluentTab Id="parameters-tab" Label="Parameters">
77
This is "Parameters" tab.
@@ -11,13 +11,25 @@
1111

1212
@code {
1313
private FluentTab? selectedTab { get; set; }
14+
private string? systemMessage;
1415

1516
[Parameter]
1617
public string? Id { get; set; }
1718

19+
[Parameter]
20+
public EventCallback<string> OnSystemMessageChanged { get; set; }
21+
1822
private async Task ChangeTab(FluentTab tab)
1923
{
2024
this.selectedTab = tab;
25+
2126
await Task.CompletedTask;
2227
}
28+
29+
private async Task SetSystemMessage(string systemMessage)
30+
{
31+
this.systemMessage = systemMessage;
32+
33+
await OnSystemMessageChanged.InvokeAsync(systemMessage);
34+
}
2335
}

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,20 @@
55
<ApiKeyInputComponent Id="api-key" OnKeyInput="SetApiKey" @rendermode="InteractiveServer" />
66
<DeploymentModelListComponent Id="deployment-model-list" OnUserOptionSelected="SetDeploymentModel" @rendermode="InteractiveServer" />
77
<FluentDivider />
8-
<ConfigTabComponent id="config-tab" @rendermode="InteractiveServer" />
8+
<ConfigTabComponent id="config-tab" OnSystemMessageChanged="SetSystemMessage" @rendermode="InteractiveServer" />
99
</FluentStack>
1010

1111
@code {
1212
private string? apiKey;
1313
private string? deploymentModel;
14+
private string? systemMessage;
1415

1516
[Parameter]
1617
public string? Id { get; set; }
1718

19+
[Parameter]
20+
public EventCallback<string> OnSystemMessageChanged { get; set; }
21+
1822
private async Task SetApiKey(string apiKey)
1923
{
2024
this.apiKey = apiKey;
@@ -28,4 +32,11 @@
2832

2933
await Task.CompletedTask;
3034
}
35+
36+
private async Task SetSystemMessage(string systemMessage)
37+
{
38+
this.systemMessage = systemMessage;
39+
40+
await OnSystemMessageChanged.InvokeAsync(systemMessage);
41+
}
3142
}

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<FluentLayout Id="@Id" Style="margin: 10px;">
2+
<FluentToolbar id="system-message-tab-toolbar" Style="display: flex; align-items: center; padding-bottom: 10px; background-color: white;">
3+
<FluentButton id="system-message-tab-apply-button" @onclick="OnApplyChanges" Disabled="@(isApplyButtonEnabled == false)"
4+
IconStart="@(new Icons.Filled.Size20.ArrowSwap())" Appearance="Appearance.Stealth">
5+
Apply changes
6+
</FluentButton>
7+
<FluentButton id="system-message-tab-reset-button" @onclick="OnResetToDefault" Disabled="@(isResetButtonEnabled == false)"
8+
IconStart="@(new Icons.Filled.Size20.ArrowReset())" Appearance="Appearance.Stealth">
9+
Reset to default
10+
</FluentButton>
11+
</FluentToolbar>
12+
13+
<div style="display: flex; align-items: center; margin-bottom: 5px;">
14+
<label id="system-message-tab-label" for="system-message-tab-textarea" style="margin-right: 5px;">System message</label>
15+
<FluentIcon Value="@(new Icons.Regular.Size16.Info())" Color="@Color.Info" />
16+
</div>
17+
<FluentTextArea id="system-message-tab-textarea" Rows="5" Style="width: 100%;" Value="@userSystemMessage" @oninput="OnInputChanged" Resize="TextAreaResize.Vertical"></FluentTextArea>
18+
</FluentLayout>
19+
20+
@code {
21+
private string? userSystemMessage;
22+
private string? userInput;
23+
private string? defaultSystemMessage = "You are an AI assistant that helps people find information.";
24+
private bool isApplyButtonEnabled;
25+
private bool isResetButtonEnabled;
26+
27+
[Parameter]
28+
public string? Id { get; set; }
29+
30+
[Parameter]
31+
public EventCallback<string> OnSystemMessageChanged { get; set; }
32+
33+
protected override async Task OnInitializedAsync()
34+
{
35+
userSystemMessage = defaultSystemMessage;
36+
37+
await OnSystemMessageChanged.InvokeAsync(userSystemMessage);
38+
}
39+
40+
private async Task OnInputChanged(ChangeEventArgs userInput)
41+
{
42+
this.userInput = userInput.Value!.ToString();
43+
isApplyButtonEnabled = true;
44+
isResetButtonEnabled = true;
45+
46+
await Task.CompletedTask;
47+
}
48+
49+
private async Task OnApplyChanges()
50+
{
51+
userSystemMessage = userInput;
52+
isApplyButtonEnabled = false;
53+
54+
if(userSystemMessage == defaultSystemMessage)
55+
{
56+
isResetButtonEnabled = false;
57+
}
58+
59+
await OnSystemMessageChanged.InvokeAsync(userSystemMessage);
60+
}
61+
62+
private async Task OnResetToDefault()
63+
{
64+
userSystemMessage = defaultSystemMessage;
65+
isApplyButtonEnabled = false;
66+
isResetButtonEnabled = false;
67+
68+
await OnSystemMessageChanged.InvokeAsync(userSystemMessage);
69+
}
70+
}

‎test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/PlaygroundPageConfigWindowTests.cs‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,4 +209,163 @@ string hiddenPanelSelector
209209
await Expect(selectedPanel).ToBeVisibleAsync();
210210
await Expect(hiddenPanel).ToBeHiddenAsync();
211211
}
212+
213+
[Test]
214+
[TestCase(
215+
"fluent-tab#system-message-tab",
216+
"fluent-tab-panel#system-message-tab-panel",
217+
"div#system-message-tab-component"
218+
)]
219+
public async Task Given_ConfigTab_When_Selected_Then_Tab_Component_Should_Be_Displayed(
220+
string selectedTabSelector,
221+
string selectedPanelSelector,
222+
string componenetSelector
223+
)
224+
{
225+
// Arrange
226+
var selectedTab = Page.Locator(selectedTabSelector);
227+
var selectedPanel = Page.Locator(selectedPanelSelector);
228+
var component = Page.Locator(componenetSelector);
229+
230+
// Act
231+
await selectedTab.ClickAsync();
232+
233+
// Assert
234+
await Expect(selectedPanel).ToBeVisibleAsync();
235+
await Expect(component).ToBeVisibleAsync();
236+
}
237+
238+
[Test]
239+
[TestCase(
240+
"fluent-tab#system-message-tab",
241+
"fluent-text-area#system-message-tab-textarea",
242+
"You are an AI assistant that helps people find information."
243+
)]
244+
public async Task Given_ConfigTab_When_Selected_Then_Tab_Component_Should_Have_Default_Value(
245+
string selectedTabSelector,
246+
string componentSelector,
247+
string expectedValue
248+
)
249+
{
250+
// Arrange
251+
var selectedTab = Page.Locator(selectedTabSelector);
252+
253+
// Act
254+
await selectedTab.ClickAsync();
255+
var actualValue = await Page.Locator(componentSelector).GetAttributeAsync("value");
256+
257+
// Assert
258+
actualValue.Should().Be(expectedValue);
259+
}
260+
261+
[Test]
262+
public async Task Given_SystemMessageTab_Buttons_When_TextArea_Value_Changed_Then_All_Buttons_Should_Be_Enabled()
263+
{
264+
// Arrange
265+
var systemMessageTab = Page.Locator("fluent-tab#system-message-tab");
266+
var systemMessageTextAreaControl = Page.Locator("fluent-text-area#system-message-tab-textarea textarea");
267+
var applyButton = Page.Locator("fluent-button#system-message-tab-apply-button");
268+
var resetButton = Page.Locator("fluent-button#system-message-tab-reset-button");
269+
270+
// Act
271+
await systemMessageTab.ClickAsync();
272+
await systemMessageTextAreaControl.FillAsync("New system message");
273+
await Task.Delay(1000);
274+
275+
var isApplyButtonEnabled = await applyButton.GetAttributeAsync("disabled");
276+
var isResetButtonEnabled = await resetButton.GetAttributeAsync("disabled");
277+
278+
// Assert
279+
isApplyButtonEnabled.Should().BeNull();
280+
isResetButtonEnabled.Should().BeNull();
281+
}
282+
283+
[Test]
284+
[TestCase("1 New system message 1")]
285+
[TestCase("2 New system message 2")]
286+
public async Task Given_SystemMessageTab_ApplyButton_When_Clicked_Then_Changed_TextArea_Value_Should_Be_Applied_As_SystemMessage_And_ApplyButton_Should_Be_Disabled_And_ResetButton_Should_Be_Enabled(
287+
string expectedValue
288+
)
289+
{
290+
// Arrange
291+
var systemMessageTab = Page.Locator("fluent-tab#system-message-tab");
292+
var systemMessageTextArea = Page.Locator("fluent-text-area#system-message-tab-textarea");
293+
var systemMessageTextAreaControl = Page.Locator("fluent-text-area#system-message-tab-textarea textarea");
294+
var applyButton = Page.Locator("fluent-button#system-message-tab-apply-button");
295+
var resetButton = Page.Locator("fluent-button#system-message-tab-reset-button");
296+
297+
// Act
298+
await systemMessageTab.ClickAsync();
299+
await systemMessageTextAreaControl.FillAsync(expectedValue);
300+
await applyButton.ClickAsync(new() { Delay = 500 });
301+
await Task.Delay(1000);
302+
303+
var actualValue = await systemMessageTextArea.GetAttributeAsync("value");
304+
var isApplyButtonEnabled = await applyButton.GetAttributeAsync("disabled");
305+
var isResetButtonEnabled = await resetButton.GetAttributeAsync("disabled");
306+
307+
// Assert
308+
actualValue.Should().Be(expectedValue);
309+
isApplyButtonEnabled.Should().NotBeNull();
310+
isResetButtonEnabled.Should().BeNull();
311+
}
312+
313+
[Test]
314+
[TestCase("You are an AI assistant that helps people find information.")]
315+
public async Task Given_SystemMessageTab_ApplyButton_When_Clicked_Then_Default_TextArea_Value_Should_Be_Applied_As_SystemMessage_And_All_Buttons_Should_Be_Disabled(
316+
string expectedValue
317+
)
318+
{
319+
// Arrange
320+
var systemMessageTab = Page.Locator("fluent-tab#system-message-tab");
321+
var systemMessageTextArea = Page.Locator("fluent-text-area#system-message-tab-textarea");
322+
var systemMessageTextAreaControl = Page.Locator("fluent-text-area#system-message-tab-textarea textarea");
323+
var applyButton = Page.Locator("fluent-button#system-message-tab-apply-button");
324+
var resetButton = Page.Locator("fluent-button#system-message-tab-reset-button");
325+
326+
// Act
327+
await systemMessageTab.ClickAsync();
328+
await systemMessageTextAreaControl.FillAsync(expectedValue);
329+
await applyButton.ClickAsync(new() { Delay = 500 });
330+
await Task.Delay(1000);
331+
332+
var actualValue = await systemMessageTextArea.GetAttributeAsync("value");
333+
var isApplyButtonEnabled = await applyButton.GetAttributeAsync("disabled");
334+
var isResetButtonEnabled = await resetButton.GetAttributeAsync("disabled");
335+
336+
// Assert
337+
actualValue.Should().Be(expectedValue);
338+
isApplyButtonEnabled.Should().NotBeNull();
339+
isResetButtonEnabled.Should().NotBeNull();
340+
}
341+
342+
[Test]
343+
[TestCase("You are an AI assistant that helps people find information.")]
344+
public async Task Given_SystemMessageTab_ResetButton_When_Clicked_Then_SystemMessage_And_TextArea_Should_Have_Default_Value_And_All_Buttons_Should_Be_Disabled(
345+
string expectedValue
346+
)
347+
{
348+
// Arrange
349+
var systemMessageTab = Page.Locator("fluent-tab#system-message-tab");
350+
var systemMessageTextArea = Page.Locator("fluent-text-area#system-message-tab-textarea");
351+
var systemMessageTextAreaControl = Page.Locator("fluent-text-area#system-message-tab-textarea textarea");
352+
var applyButton = Page.Locator("fluent-button#system-message-tab-apply-button");
353+
var resetButton = Page.Locator("fluent-button#system-message-tab-reset-button");
354+
355+
// Act
356+
await systemMessageTab.ClickAsync();
357+
await systemMessageTextAreaControl.FillAsync("New system message");
358+
await applyButton.ClickAsync(new() { Delay = 500 });
359+
await resetButton.ClickAsync(new() { Delay = 500 });
360+
await Task.Delay(1000);
361+
362+
var actualValue = await systemMessageTextArea.GetAttributeAsync("value");
363+
var isApplyButtonEnabled = await applyButton.GetAttributeAsync("disabled");
364+
var isResetButtonEnabled = await resetButton.GetAttributeAsync("disabled");
365+
366+
// Assert
367+
actualValue.Should().Be(expectedValue);
368+
isApplyButtonEnabled.Should().NotBeNull();
369+
isResetButtonEnabled.Should().NotBeNull();
370+
}
212371
}

0 commit comments

Comments
 (0)