MAUI - 1013994 - Added UG content for Preview Support in SfAIAssistView

MAUI/AIAssistView/items.md

@@ -428,6 +428,121 @@ The `SfAIAssistView` control includes a built-in event called [CardTapped](https
 {% endhighlight %}
 {% endtabs %}
 
+## Attachment item
+
+The [AssistAttachmentItem]() is used to display the preview for a file or an image as a item. Using the [Attachments]() property, you can display the desired attachments as item in the AI AssistView control.
+
+{% tabs %}
+{% highlight c# tabtitle="ViewModel.cs" hl_lines="8" %}
+
+public class ViewModel : INotifyPropertyChanged
+{
+    ...
+
+    private async void GenerateAssistItems()
+    {
+        // Adding a user request as attachments 
+        var requestItem = new AssistAttachmentItem()
+        {
+            Text = "Read the following documents",
+            IsRequested = true,
+            Attachments = new List<IAttachment> { staticAttachment1, staticAttachment2, staticAttachment3 }
+        };
+
+        AssistItems.Add(requestItem);
+
+        // Generating response item
+        await GetResult(requestItem);
+    }
+
+    private async Task GetResult(AssistItem requestItem)
+    {
+        await Task.Delay(1000).ConfigureAwait(true);
+
+        AssistItem responseItem = new AssistItem()
+        {
+            // Adding a text item as a response from the AI service
+            Text = "Thank you for sharing the documents. I will review the text file, the Excel sheet, and the PDF to provide you with a summary or any insights you need. Please let me know if you have any specific questions about these files.",
+            IsRequested = false,
+        };
+
+        // Add the response item to the collection
+        this.AssistItems.Add(responseItem);
+    }
+
+    ...
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## AttachmentTapped Event and Command
+
+The [SfAIAssistView]() control includes a built-in event and command to listen for tap interactions in the attachment preview. The tapped attachment item can be accessed through the [AttachmentTappedEventArgs](). The `AttachmentTappedEventArgs` has the following member:
+
+ * [Attachment]() : Refers to the tapped attachment item.
+
+### AttachmentTapped Event
+
+The [AttachmentTapped]() event is triggered when a preview attachment item is tapped.
+
+{% tabs %}
+{% highlight xaml tabtitle="MainPage.xaml" hl_lines="2" %}
+
+<syncfusion:SfAIAssistView x:Name="sfAIAssistView"
+                        AttachmentTapped="sfAIAssistView_AttachmentTapped" />
+
+{% endhighlight %}
+{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="1" %}
+
+sfAIAssistView.AttachmentTapped += SfAIAssistView_AttachmentTapped;
+
+private void SfAIAssistView_AttachmentTapped(object sender, AttachmentTappedEventArgs e)
+{  
+    DisplayAlert("Attachment", " Tapped on attachment :" + e.Attachment.FileName, "Ok");                  
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### AttachmentTapped Command
+
+The [AttachmentTappedCommand]() is triggered when a preview attachment item is tapped.
+
+{% tabs %}
+{% highlight xaml tabtitle="MainPage.xaml" hl_lines="2" %}   
+
+<syncfusion:SfAIAssistView x:Name="sfAIAssistView"  
+                            AttachmentTappedCommand="{Binding TappedCommand}" />
+
+{% endhighlight %}
+{% highlight c# tabtitle="ViewModel.cs" hl_lines="16" %}
+
+public class ViewModel : INotifyPropertyChanged
+{
+    public Command<object> tappedCommand;
+
+    public ViewModel()
+    {
+        TappedCommand = new Command<object>(AttachmentTapped);
+    }
+
+    public Command<object> TappedCommand
+    {
+        get { return tappedCommand; }
+        set { tappedCommand = value; }
+    }
+
+    private void AttachmentTapped(object obj)
+    {
+        var AttachmentTappedArgs = obj as AttachmentTappedEventArgs;
+        DisplayAlert("Attachment", " Tapped on Attachment item :" + AttachmentTappedArgs.Attachment.FileName, "Ok");                  
+    }      
+}
+
+{% endhighlight %}
+{% endtabs %}
+
 ## Show error response
 
 The `SfAIAssistView` allows to display error responses by setting the error text to the [AssistItem.ErrorMessage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.AIAssistView.IAssistItem.html#Syncfusion_Maui_AIAssistView_IAssistItem_ErrorMessage) property, ensuring clear notification when an error occurs during AI interactions.

MAUI/AIAssistView/working-with-aiassistview.md

@@ -271,6 +271,182 @@ N> **Interaction**: On desktop (Windows, macOS), hover over a request to reveal
 
 ![Edit Option in .NET MAUI AI AssistView](Images/working-with-aiassistview/maui-aiassistview-editoption.gif)
 
+## Attachment Preview in EditorView
+
+The `SfAIAssistView` allows you to add files and images as attachments in the editor using [Attachments]() property. This feature lets you show the preview for attachments added in the editor. `Attachments` are added as [AssistAttachment]() which has the following members:
+
+* [FileName]() : Displays the name of the file.
+* [FileSize]() : Displays the size of the file.
+* [FilePath]() : Displays the local path of the file.
+* [FileExtension]() : Displays the type of the file using the extension.
+* [FileContent]() : Displays the content of the file.
+* [FilePreviewIcon]() : Displays the preview icon for the file.
+
+{% tabs %}
+{% highlight xaml hl_lines="3" %}
+
+<ContentPage.Content>
+      <syncfusion:SfAIAssistView x:Name = "sfAIAssistView"
+                                 Attachments = "{Binding Attachments}">
+      </syncfusion:SfSfAIAssistView>
+</ContentPage.Content>
+
+{% endhighlight %}
+{% highlight c# tabtitle="ViewModel.cs" %}
+
+using Syncfusion.Maui.AIAssistView;
+
+internal class ViewModel : INotifyPropertyChanged
+{
+    private ObservableCollection<IAttachment>? attachments;
+
+    public ViewModel()
+    {
+        Attachments = new ObservableCollection<IAttachment>();
+        UploadCommand = new Command(async () => await UploadFilesAsync());
+    }
+
+    public ObservableCollection<IAttachment>? Attachments
+    {
+        get => attachments;
+        set
+        {
+            if (attachments != value)
+            {
+                attachments = value;
+            }
+        }
+    }
+
+    public ICommand UploadCommand { get; }
+
+    private async Task UploadFilesAsync()
+    {
+        var results = await FilePicker.Default.PickMultipleAsync();
+        if (results == null) return;
+
+        foreach (var file in results)
+        {
+            Stream stream = await file.OpenReadAsync();
+
+            long size;
+            if (stream.CanSeek)
+            {
+                size = stream.Length;
+            }
+            else
+            {
+                using var ms = new MemoryStream();
+                await stream.CopyToAsync(ms);
+                size = ms.Length;
+                stream.Dispose();
+                stream = new MemoryStream(ms.ToArray());
+            }
+
+            Attachments?.Add(new AssistAttachment
+            {
+                FileName = file.FileName,
+                FileSize = size,
+                FilePath = file.FullPath ?? string.Empty,
+                FileExtension = Path.GetExtension(file.FileName) ?? string.Empty,
+                FileContent = stream,
+            });
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Preview support in .NET MAUI AI AssistView](Images/working-with-aiassistview/maui-aiassistview-preview.gif)
+
+### Max Attachment Count
+
+The `SfAIAssistView` control allows you to control the number of attachments using the [MaxAttachmentCount]() property. This feature allows us to restrict the number of attachments that can be added to the `Attachments`. The default value is 10.
+
+{% tabs %}
+{% highlight xaml hl_lines="4" %}
+
+<ContentPage.Content>
+      <syncfusion:SfAIAssistView x:Name = "sfAIAssistView"
+                                 Attachments = "{Binding Attachments}"
+                                 MaxAttachmentCount = 8>                 
+      </syncfusion:SfSfAIAssistView>
+</ContentPage.Content>
+
+{% endhighlight %}
+{% highlight c# hl_lines="11" %}
+
+using Syncfusion.Maui.AIAssistView;
+
+public partial class MainPage : ContentPage
+{
+    SfAIAssistView sfAIAssistView;
+    public MainPage()
+    {
+        InitializeComponent();
+        sfAIAssistView = new SfAIAssistView();
+        sfAIAssistView.Attachment = viewModel.Attachments;
+        sfAIAssistView.MaxAttachmentCount = 8;
+        this.Content = sfAIAssistView;
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Attachment Item Template
+
+The `SfAIAssistView` control allows you to customize the preview for the attachments by using the [AttachmentItemTemplate]() property. This property lets you define a custom layout for the attachment preview UI.
+
+{% tabs %}
+{% highlight xaml hl_lines="13" %}
+
+<ContentPage.Resources>
+    <ResourceDictionary>
+        <DataTemplate x:Key = "attachmentItemTemplate">
+            <Grid>
+                ...
+            </Grid>
+        </DataTemplate>
+    </ResourceDictionary>
+</ContentPage.Resources>
+<ContentPage.Content>
+      <syncfusion:SfAIAssistView x:Name = "sfAIAssistView"
+                                 Attachments = "{Binding Attachments}"
+                                 AttachmentItemTemplate = "{StaticResource attachmentItemTemplate}">
+      </syncfusion:SfSfAIAssistView>
+</ContentPage.Content>
+
+{% endhighlight %}
+{% highlight c# hl_lines="11" %}
+
+using Syncfusion.Maui.AIAssistView;
+
+public partial class MainPage : ContentPage
+{
+    SfAIAssistView sfAIAssistView;
+    public MainPage()
+    {
+        InitializeComponent();
+        sfAIAssistView = new SfAIAssistView();
+        SfAIAssistView.Attachments = viewModel.Attachments;
+        sfAIAssistView.AttachmentItemTemplate = CreateAttachmentItemTemplate();
+        this.Content = sfAIAssistView;
+    }
+
+    private DataTemplate CreateAttachmentItemTemplate()
+    {
+        return new DataTemplate(() =>
+        {
+            ...
+        });
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
 ## EditorView template
 
 The `SfAIAssistView` control allows you to fully customize the editor's appearance by using the [EditorViewTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.AIAssistView.SfAIAssistView.html#Syncfusion_Maui_AIAssistView_SfAIAssistView_EditorViewTemplate) property. This property lets you define a custom layout and style for the editor.