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

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

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

在 EP 27 當中有提到關於第二點問題：

當附加檔案的文字內容頗多時，看起來就會有點顯得弔詭，雖然在該回有處理了一種方式：如果內容太長就中略，留下開頭與結尾的一部份文字顯示出來。

但可能稍嫌不夠好，本回來介紹一下另一種處理概念。

其處理的方式是把附加文字檔案的內容不要附加上來呈現，改用一個圖示來代替；但其內文還是要加入到要丟給 AOAI 的 Chat，這樣才能保持正常的對話過程。

大概是呈現如此的感覺：

要完成這樣的設計，其實本身也仰賴 Avalonia UI 的 Library 在設計 TextBlock 時所使用的 InlineUIContainer 設計囉！

來看看吧~~~

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

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

完成如下圖紅框：

再次找到 ChatPageViewModel 類別當中的 Attach 方法，在讀取文字檔後設定上述兩欄位的資料。

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

完成如下圖紅框：

再繼續於此 ChatPageViewModel 類別設計一個 RelayCommand 的 BuildInline 方法。

[RelayCommand]
private void BuildInline(Control control)
{
    System.Diagnostics.Debug.WriteLine("BuildInline...");

    if (control is not null && control is SelectableTextBlock selectableTextBlock)
    {
        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)..]));
    }
}

完成如下圖紅框：

找到 ViewModels/ChatPageView.axmal 的 SelectableTextBlock 把原本的設計從：

<SelectableTextBlock Name="mainChatText" Margin="0,4" FontSize="20" Text="{Binding ChatText}" TextWrapping="WrapWithOverflow" />

替換成：

<SelectableTextBlock Name="mainChatText" Margin="0,4" FontSize="20" TextWrapping="WrapWithOverflow">
    Welcome to TopAOAIConnector!
    <LineBreak />
    <Interaction.Behaviors>
        <ValueChangedTriggerBehavior Binding="{Binding ChatText}">
            <InvokeCommandAction Command="{Binding BuildInlineCommand}" CommandParameter="{Binding #mainChatText}" />
        </ValueChangedTriggerBehavior>
    </Interaction.Behaviors>
</SelectableTextBlock>

完成如下圖紅框：

偵錯執行(F5)的結果如下：

首先，先把新聞內容附檔附上。

再輸入提問 "請將上述新聞內容總結至 40 字內。" 後，點選 "送出"。

此時會看到 AOAI 的 "回應"。

再輸入提問 "新聞內容提及的電費每度電為多少元。" 後，點選 "送出"。

看到 AOAI 的 "回應"。

再輸入提問 "新聞內容當中所提到的人物名稱為那些？" 後，點選 "送出"。

此時會看到 AOAI 的 "回應"。

大體上完成附檔文字不再出現在 UI 的內容顯示當中，改用圖示顯示，但與 AOAI 對談效果仍是順利完成。

完成！！！