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

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

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

在 EP 29 的調整完畢後，整體雖能夠連續傳檔跟詢問問題，但在操作上仍會發現一些錯誤顯示的狀況。

在本回來處理一下吧！

首先，找到 ViewModels/ChatPageViewModel.cs 的 ChatPageViewModel 類別，幫其設計增加一個欄位。

private string lastFileName = string.Empty;

完成如下圖紅框：

再找到 ChatPageViewModel 類別當中的 Attach 方法，在 if 判斷的條件增加一個判段敘述本為：

if (!string.IsNullOrEmpty(fileContent) && messages.Count > 1)

替換為：

if (!string.IsNullOrEmpty(fileContent) && messages.Count > 1 && !string.IsNullOrEmpty(lastFileName))

在 Attach 方法最後的 if 判斷是否呼叫 Aoai 回應的部分也做調整，原本為：

if (!isInputTextEmpty)

替換為：

if (!isInputTextEmpty || messages.Count > 2)

改變處如下圖紅框：

繼續找到 ChatPageViewModel 類別當中的 BuildInline 方法，在前一回的 if 判斷內容稍作改變，找到原本撰寫：

fileName = string.Empty;

在其上方增加：

lastFileName = fileName;

改變處如下圖紅框：

而由於改變顯示的處理，所以相對的有可能改變 ChatText 的部分還要控制調整一下，例如在 ChatPage 用來選取不同系統角色扮演的 ComboBox 。

繼續找到 ChatPageViewModel 類別當中的 Selected 方法，原本撰寫：

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

    messages.Clear();
    messages.Add(ChatMessage.CreateSystemMessage(SelectedSystemRole!.Prompt));

    ChatText = $"Welcome to TopAOAIConnector!{Environment.NewLine}";
}

變更其方法設計與內容：

private void Selected(Control control)
{
    System.Diagnostics.Debug.WriteLine("Selected...");

    if (control is not null && control is SelectableTextBlock selectableTextBlock)
    {
        messages.Clear();
        messages.Add(ChatMessage.CreateSystemMessage(SelectedSystemRole!.Prompt));

        InputText = string.Empty;

        fileName = string.Empty;
        fileContent = string.Empty;

        selectableTextBlock.Inlines?.Clear();

        appandText = $"Welcome to TopAOAIConnector!{Environment.NewLine}";
        selectableTextBlock.Text = ChatText = appandText;
    }
}

調整處如下圖紅框：

另外也還需變更一下 Views/ChatPageView 的使用 SelectedCommand 的 ComboBox：

<InvokeCommandAction Command="{Binding SelectedCommand}" />

將 selectableTextBlock 透過 CommandParameter 傳遞：

<InvokeCommandAction Command="{Binding SelectedCommand}" CommandParameter="{Binding #mainChatText}" />

調整處如下圖紅框：

接著來偵錯執行(F5)與測試看看吧！

首先，在 ChatPage 當中先確認在 ComboBox 的選項中有不同的系統角色扮演，若沒有的話請到 SettingPage 當中新增：

輸入 "總結下列新聞為 40 字。" 的問題，直接點選 "Send"：

等待回應與顯示結果：

附加新聞內容檔案，並等待回應與顯示結果：

輸入 "其中提到的人物名稱有？" 的問題，直接點選 "Send"：

等待回應與顯示結果：

切換到 "Movie Reviewer Role" 的系統角色扮演，按照設計切換後先前的對話紀錄與畫面都會清除：

輸入 "在這部電影的男女主角扮演的情感表現特別有帶入到原著的描繪。"：

等待回應與顯示結果：

輸入 "電影的改編與原著差異似乎很大。"：

等待回應與顯示結果：

完成！！！