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

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

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

在 EP 28 的調整中，如果只做單一一次的檔案上傳時，沒什麼太大問題，但如果一直換文字檔案上傳處理時，就發生狀況了🫨🫨🫨

而且因為處理上是直接把所有的內容重新顯示到畫面上，感覺顯示新內容時會閃一下畫面。

本回就再來改進處理吧！

P.S. 達到相同目的的做法有很多種，這邊選擇可以改動最少的方式。

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

private string appandText = string.Empty;

完成如下圖紅框：

再次找到 ChatPageViewModel 類別當中的 Attach 方法，在前一回撰寫讀取文字檔後設定上述兩欄位的資料的部分與之後的 if 判斷順序與內容稍作改變，原本為：

fileName = resultFiles[0].Name;
fileContent = await reader.ReadToEndAsync();

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!.Prompt));
}

替換為：

fileContent = await reader.ReadToEndAsync();

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

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

fileName = resultFiles[0].Name;

完成如下圖紅框：

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

selectableTextBlock.Text = string.Empty;
selectableTextBlock.Inlines?.Clear();

int index = ChatText.IndexOf(fileContent);

selectableTextBlock.Inlines?.Add(new Run(ChatText[..index]));

var fileStackPanel = new StackPanel()
{
    Children =
    {
        new SymbolIcon() { FontSize = 60, Symbol = FluentIcons.Common.Symbol.Document, HorizontalAlignment = Avalonia.Layout.HorizontalAlignment.Left},
        new TextBlock() { FontSize = 20, Text = fileName }
    }
};

selectableTextBlock.Inlines?.Add(fileStackPanel);
selectableTextBlock.Inlines?.Add(new Run(ChatText[(index + fileContent.Length)..]));

替換為：

if (!string.IsNullOrEmpty(fileName))
{
    appandText = appandText.Replace(fileContent, string.Empty);

    selectableTextBlock.Inlines?.Add(new Run(appandText));

    var fileStackPanel = new StackPanel()
    {
        Children =
        {
            new SymbolIcon() { FontSize = 60, Symbol = FluentIcons.Common.Symbol.Document, HorizontalAlignment = Avalonia.Layout.HorizontalAlignment.Left},
            new TextBlock() { FontSize = 20, Text = fileName }
        }
    };

    selectableTextBlock.Inlines?.Add(fileStackPanel);
    fileName = string.Empty;
}
else
{
    selectableTextBlock.Inlines?.Add(new Run(appandText));
}

selectableTextBlock.Inlines?.Add(new LineBreak());
appandText = string.Empty;

完成如下圖紅框：

繼續找到 ChatPageViewModel 類別當中的 BuildChatText 方法內容稍作改變，原本為：

ChatText = $"{ChatText}{Environment.NewLine}You:{Environment.NewLine}{textContent}{Environment.NewLine}";

替換為：

appandText = $"{Environment.NewLine}You:{Environment.NewLine}{textContent}";
ChatText = $"{ChatText}{appandText}";    

而 BuildAoaiResultToChatText 方法內容稍作改變，原本為：

var textResult = $"{chatCompletion.Role}:{Environment.NewLine}{chatCompletion.Content[0].Text}";
ChatText = $"{ChatText}{Environment.NewLine}{textResult}{Environment.NewLine}";

替換為：

appandText = $"{Environment.NewLine}{chatCompletion.Role}:{Environment.NewLine}{chatCompletion.Content[0].Text}";
ChatText = $"{ChatText}{Environment.NewLine}{appandText}{Environment.NewLine}";

完成如下圖紅框：

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

輸入 "總結下列新聞為 40 字。" 的問題，並附加第一則新聞內容檔案：

等待回應與顯示結果：

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

等待回應與顯示結果：

輸入 "總結下列新聞為 40 字。" 的問題，並附加第二則新聞內容檔案：

等待回應與顯示結果：

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

等待回應與顯示結果：

輸入 "總結下列新聞為 40 字。" 的問題，並附加第三則新聞內容檔案：

等待回應與顯示結果：

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

等待回應與顯示結果：

完成！！！