Skip to content

Commit 05ea86b

Browse files
justinyoojustinyoo
committed
Add chat history window
1 parent f09ce1a commit 05ea86b

File tree

4 files changed

+132
-74
lines changed

4 files changed

+132
-74
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@
77

88
Welcome to your new app.
99

10-
<ChatWindowComponent @rendermode="InteractiveServer"/>
10+
<OldChatWindowComponent @rendermode="InteractiveServer"/>

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

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,33 +14,52 @@
1414
<FluentGridItem Class="chat-grid" xs="12" sm="12" md="8" lg="8" xl="8" xxl="8" Style="height: 900px;">
1515
<FluentStack Style="width: 100%; height: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Bottom">
1616
<FluentStack Style="width: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Top">
17-
Chat History
17+
@if (this.messages != null && this.messages.Any())
18+
{
19+
foreach (var message in this.messages)
20+
{
21+
<FluentStack Style="width: 70%;" Orientation="Orientation.Horizontal" HorizontalAlignment="@(message.Role == MessageRole.Assistant ? HorizontalAlignment.Start : HorizontalAlignment.End)">
22+
<FluentCard MinimalStyle="true">
23+
<p>@message.Message</p>
24+
</FluentCard>
25+
</FluentStack>
26+
}
27+
}
1828
</FluentStack>
1929
<FluentStack Style="width: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Bottom">
20-
<FluentTextArea Style="width: 100%;" Rows="6" Placeholder="Type user query here. (Shift + Enter for new line)" @bind-Value=value1></FluentTextArea>
21-
<FluentStack Style="width: 100%;" Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Start">
22-
<FluentStack Style="width: 50%;" Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Start">
23-
<FluentButton IconStart="@(new Icons.Regular.Size20.Broom())" OnClick="ClearChat">Clear</FluentButton>
24-
</FluentStack>
25-
<FluentStack Style="width: 50%;" Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.End">
26-
<FluentButton IconStart="@(new Icons.Regular.Size20.Send())" OnClick="CompleteChat">Send</FluentButton>
27-
</FluentStack>
28-
</FluentStack>
30+
<ChatWindowComponent Id="chat-window" OnPromptSent="SendPrompt" />
2931
</FluentStack>
3032
</FluentStack>
3133
</FluentGridItem>
3234
</FluentGrid>
3335
</FluentLayout>
3436

3537
@code {
36-
private string? value1;
38+
private List<ChatMessage>? messages;
3739

38-
private async Task CompleteChat()
40+
protected override async Task OnInitializedAsync()
3941
{
42+
this.messages = [];
43+
4044
await Task.CompletedTask;
4145
}
42-
private async Task ClearChat()
46+
47+
private async Task SendPrompt(string prompt)
4348
{
49+
this.messages!.Add(new ChatMessage() { Role = MessageRole.User, Message = prompt });
50+
4451
await Task.CompletedTask;
4552
}
53+
54+
public class ChatMessage
55+
{
56+
public MessageRole? Role { get; set; }
57+
public string? Message { get; set; }
58+
}
59+
60+
public enum MessageRole
61+
{
62+
User,
63+
Assistant
64+
}
4665
}

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

Lines changed: 27 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,39 @@
1-
@using AzureOpenAIProxy.PlaygroundApp.Clients
2-
@inject IOpenAIApiClient Api
1+
<FluentLayout Id="@Id">
2+
<FluentTextArea Style="width: 100%;" Rows="6" Placeholder="Type user query here. (Shift + Enter for new line)" @bind-Value="prompt" @onchange="UpdatePrompt"></FluentTextArea>
3+
<FluentStack Style="width: 100%;" Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Start">
4+
<FluentStack Style="width: 50%;" Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Start">
5+
<FluentButton IconStart="@(new Icons.Regular.Size20.Broom())" OnClick="ClearChat">Clear</FluentButton>
6+
</FluentStack>
7+
<FluentStack Style="width: 50%;" Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.End">
8+
<FluentButton IconStart="@(new Icons.Regular.Size20.Send())" OnClick="CompleteChat">Send</FluentButton>
9+
</FluentStack>
10+
</FluentStack>
11+
</FluentLayout>
312

4-
<div class="container">
5-
<h3>Chat Window</h3>
6-
7-
<div class="row">
8-
<div class="col-md-6">
9-
<textarea class="form-control" readonly>@userPrompt</textarea>
10-
</div>
11-
<div class="col-md-6">
12-
<textarea class="form-control" readonly>@assistantMessage</textarea>
13-
</div>
14-
</div>
13+
@code {
14+
private string? prompt;
1515

16-
<div class="row mt-3">
17-
<div class="col-md-6">
18-
<textarea class="form-control" @bind="@userInput"></textarea>
19-
</div>
20-
<div class="col-md-6">
21-
<button class="btn btn-primary" @onclick="SendAsync">Send</button>
22-
<button class="btn btn-secondary" @onclick="ClearAsync">Clear</button>
23-
</div>
24-
</div>
25-
</div>
16+
[Parameter]
17+
public string? Id { get; set; }
2618

27-
@code {
28-
private string? endpoint = "https://localhost:7001/";
29-
private string? apiKey = "abcdef";
30-
private string? deploymentName = "model-gpt35turbo16k-0613";
31-
private int? maxTokens = 4096;
32-
private float? temperature = 0.7f;
33-
private string? systemPrompt = "You are an AI assistant that helps people find information.";
34-
private string? userPrompt;
35-
private string? assistantMessage;
36-
private string? userInput;
19+
[Parameter]
20+
public EventCallback<string?> OnPromptSent { get; set; }
3721

38-
private async Task SendAsync()
22+
private async Task UpdatePrompt(ChangeEventArgs e)
3923
{
40-
userPrompt = userInput;
41-
42-
try
43-
{
44-
var options = new OpenAIApiClientOptions()
45-
{
46-
Endpoint = endpoint,
47-
ApiKey = apiKey,
48-
DeploymentName = deploymentName,
49-
MaxTokens = maxTokens,
50-
Temperature = temperature,
51-
SystemPrompt = systemPrompt,
52-
UserPrompt = userInput,
53-
};
54-
var result = await Api.CompleteChatAsync(options);
55-
assistantMessage = result;
24+
this.prompt = e.Value!.ToString();
5625

57-
}
58-
catch (Exception ex)
59-
{
60-
assistantMessage = ex.Message;
61-
}
26+
await Task.CompletedTask;
6227
}
6328

64-
private async Task ClearAsync()
29+
private async Task CompleteChat()
6530
{
66-
userPrompt = string.Empty;
67-
assistantMessage = string.Empty;
68-
userInput = string.Empty;
31+
await this.OnPromptSent.InvokeAsync(this.prompt);
6932

7033
await Task.CompletedTask;
7134
}
72-
}
35+
private async Task ClearChat()
36+
{
37+
await Task.CompletedTask;
38+
}
39+
}

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
@using AzureOpenAIProxy.PlaygroundApp.Clients
2+
@inject IOpenAIApiClient Api
3+
4+
<div class="container">
5+
<h3>Chat Window</h3>
6+
7+
<div class="row">
8+
<div class="col-md-6">
9+
<textarea class="form-control" readonly>@userPrompt</textarea>
10+
</div>
11+
<div class="col-md-6">
12+
<textarea class="form-control" readonly>@assistantMessage</textarea>
13+
</div>
14+
</div>
15+
16+
<div class="row mt-3">
17+
<div class="col-md-6">
18+
<textarea class="form-control" @bind="@userInput"></textarea>
19+
</div>
20+
<div class="col-md-6">
21+
<button class="btn btn-primary" @onclick="SendAsync">Send</button>
22+
<button class="btn btn-secondary" @onclick="ClearAsync">Clear</button>
23+
</div>
24+
</div>
25+
</div>
26+
27+
@code {
28+
private string? endpoint = "https://localhost:7001/";
29+
private string? apiKey = "abcdef";
30+
private string? deploymentName = "model-gpt35turbo16k-0613";
31+
private int? maxTokens = 4096;
32+
private float? temperature = 0.7f;
33+
private string? systemPrompt = "You are an AI assistant that helps people find information.";
34+
private string? userPrompt;
35+
private string? assistantMessage;
36+
private string? userInput;
37+
38+
private async Task SendAsync()
39+
{
40+
userPrompt = userInput;
41+
42+
try
43+
{
44+
var options = new OpenAIApiClientOptions()
45+
{
46+
Endpoint = endpoint,
47+
ApiKey = apiKey,
48+
DeploymentName = deploymentName,
49+
MaxTokens = maxTokens,
50+
Temperature = temperature,
51+
SystemPrompt = systemPrompt,
52+
UserPrompt = userInput,
53+
};
54+
var result = await Api.CompleteChatAsync(options);
55+
assistantMessage = result;
56+
57+
}
58+
catch (Exception ex)
59+
{
60+
assistantMessage = ex.Message;
61+
}
62+
}
63+
64+
private async Task ClearAsync()
65+
{
66+
userPrompt = string.Empty;
67+
assistantMessage = string.Empty;
68+
userInput = string.Empty;
69+
70+
await Task.CompletedTask;
71+
}
72+
}

0 commit comments

Comments
 (0)