Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會展開使用 Avalonia UI 技術所建立的 TopAOAIConnector App 。由於使用 Avalonia UI 可以很快速的進行各平台的 桌面 應用程式開發，並且透過此 TopAOAIConnector App 來串接 Azure OpenAI Service 時所需的功能研究。

本篇是 就是要來點 A.I. 的 TopAOAIConnector App 系列文的 EP18。

在 EP 17 介紹到，透過 ChatPageViewModel 類別簡單設計了一個 systemMessage 與 systemChatMessage 的靜態欄位，並且透過此設計讓 List<ChatMessage> 能保持一個 "Role:system" 的系統角色扮演的 prompt。

不過這非長久之計，所以要來調整一下 UI 設計，可以在使用 "Chat" 時可以根據情境需要，選擇使用不同的系統角色扮演的 prompt 進行 "Chat"。

開始吧~~~

首先，找到 ViewModels/ChatPageViewModel.cs 的 ChatPageViewModel 類別設計，此時刪除在 EP17 所設計的 systemMessage 與 systemChatMessage 的靜態欄位，並把 messages 的初始物件換回空內容的設定。

接著再加入以下設計：

public ChatPageViewModel()
{
    SelectedSystemRole = SystemRoles[0];
    messages.Add(ChatMessage.CreateSystemMessage(SelectedSystemRole.Value));
}

public ObservableCollection<KeyValuePair<string, string>> SystemRoles { get; } =
[
    new ("Default System Role", "你是協助人員尋找資訊的 AI 助理。"),
    new ("Movie Reviewer Role", "你是一位專業的電影評論員，請根據使用者的輸入評論來做回答。" +
                                "僅能回答 \"好\" 或 \"壞\" 並針對使用者輸入的評論給予最多 10 字的反饋。")
];

[ObservableProperty]
public KeyValuePair<string, string> _selectedSystemRole;

如下圖紅框所示：

在找到 Attach 方法其中的 if 判斷這部分：

if (!string.IsNullOrEmpty(fileContent) && messages.Count > 1)
{
    ChatText = $"{Environment.NewLine}{ChatText}{Environment.NewLine}=======Another Attach TextFile======={Environment.NewLine}";
    
    messages.Clear();
    messages.Add(systemChatMessage);
}

改成以下寫法：

if (!string.IsNullOrEmpty(fileContent) && messages.Count > 1)
{
    ChatText = $"{Environment.NewLine}{ChatText}{Environment.NewLine}=======Another Attach TextFile======={Environment.NewLine}";
    
    messages.Clear();
    messages.Add(ChatMessage.CreateSystemMessage(SelectedSystemRole.Value));
}

變更處如下圖紅框所示：

再繼續於 ChatPageViewModel 當中加入：

[RelayCommand]
private void Selected()
{
    System.Diagnostics.Debug.WriteLine("Selected...");

    messages.Clear();
    messages.Add(ChatMessage.CreateSystemMessage(SelectedSystemRole.Value));
}

如下圖紅框所示：

接著就是找到 Views/ChatPageView.axmal 檔案，並在其中的 ScrollViewer 下方增加以下標記：

<ComboBox
    Margin="4"
    HorizontalAlignment="Right"
    ItemsSource="{Binding SystemRoles}"
    MaxDropDownHeight="100"
    SelectedItem="{Binding SelectedSystemRole}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Path=Key}" />
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

如下圖紅框所示：

接著可以來偵錯並執行(F5)看看：

可以看到這個 ComboBox 上面的資料就是所設計的 ObservableCollection 內容沒問題。

But...

但若改變 ComboBox 所選擇的項目需要執行程式的話，就得再撰寫相關的處理囉！

畢竟在本回所設計的 Selected 方法很明顯的沒有任何會被執行的可能性😊😊😊

哈哈...那就下回見~~~