Added the possibility to attach files to the chat (#585)

Co-authored-by: Thorsten Sommer

app/MindWork AI Studio/Components/AttachDocuments.razor

@@ -1,27 +1,59 @@
 @inherits MSGComponentBase
 
-<MudStack Row="true" AlignItems="AlignItems.Center" StretchItems="StretchItems.None" Wrap="Wrap.Wrap">
-    <MudText Typo="Typo.body1" Inline="true">
-        @T("Drag and drop files into the marked area or click here to attach documents: ")
-    </MudText>
-    <MudButton 
-        Variant="Variant.Filled" 
-        Icon="@Icons.Material.Filled.Add" 
-        Color="Color.Primary" 
-        OnClick="@(() => this.AddFilesManually())"
-        Style="vertical-align: top; margin-top: -2px;"
-        Size="Size.Small"
-        T>@T("Add file")
-    </MudButton>
-</MudStack>
-<div @onmouseenter="@this.OnMouseEnter" @onmouseleave="@this.OnMouseLeave">
-    <MudPaper Height="20em" Outlined="true" Class="@this.dragClass" Style="overflow-y: auto;">
-        @foreach (var fileInfo in this.DocumentPaths.Select(file => new FileInfo(file)))
-        {
-            <MudChip T="string" Color="Color.Dark" Text="@fileInfo.Name" tabindex="-1" Icon="@Icons.Material.Filled.Search" OnClick="@(() => this.InvestigateFile(@fileInfo))" OnClose="@(() => this.RemoveDocumentPathFromDocumentPaths(@fileInfo))"/>
+@if (this.UseSmallForm)
+{
+    <div @onmouseenter="@this.OnMouseEnter" @onmouseleave="@this.OnMouseLeave">
+        @{
+            var fileInfos = this.DocumentPaths.Select(file => new FileInfo(file)).ToList();
         }
-    </MudPaper>
-</div>
-<MudButton OnClick="@(async () => await this.ClearAllFiles())" Variant="Variant.Filled" Color="Color.Info" Class="mt-2" StartIcon="@Icons.Material.Filled.Delete">
-    @T("Clear file list")
-</MudButton>
+        @if (fileInfos.Any())
+        {
+            <MudBadge
+                Content="@this.DocumentPaths.Count"
+                Color="Color.Primary"
+                Overlap="true">
+                <MudIconButton
+                    Icon="@Icons.Material.Filled.AttachFile"
+                    Color="Color.Default"
+                    OnClick="@AddFilesManually"/>
+            </MudBadge>
+        }
+        else
+        {
+            <MudTooltip Text="@T("Click to attach files")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
+                <MudIconButton
+                    Icon="@Icons.Material.Filled.AttachFile"
+                    Color="Color.Default"
+                    OnClick="@AddFilesManually"/>
+            </MudTooltip>
+        }
+    </div>
+}
+else
+{
+    <MudStack Row="true" AlignItems="AlignItems.Center" StretchItems="StretchItems.None" Wrap="Wrap.Wrap">
+        <MudText Typo="Typo.body1" Inline="true">
+            @T("Drag and drop files into the marked area or click here to attach documents: ")
+        </MudText>
+        <MudButton
+            Variant="Variant.Filled"
+            StartIcon="@Icons.Material.Filled.Add"
+            Color="Color.Primary"
+            OnClick="@(() => this.AddFilesManually())"
+            Style="vertical-align: top; margin-top: -2px;"
+            Size="Size.Small">
+            @T("Add file")
+        </MudButton>
+    </MudStack>
+    <div @onmouseenter="@this.OnMouseEnter" @onmouseleave="@this.OnMouseLeave">
+        <MudPaper Height="20em" Outlined="true" Class="@this.dragClass" Style="overflow-y: auto;">
+            @foreach (var fileInfo in this.DocumentPaths.Select(file => new FileInfo(file)))
+            {
+                <MudChip T="string" Color="Color.Dark" Text="@fileInfo.Name" tabindex="-1" Icon="@Icons.Material.Filled.Search" OnClick="@(() => this.InvestigateFile(@fileInfo))" OnClose="@(() => this.RemoveDocumentPathFromDocumentPaths(@fileInfo))"/>
+            }
+        </MudPaper>
+    </div>
+    <MudButton OnClick="@(async () => await this.ClearAllFiles())" Variant="Variant.Filled" Color="Color.Info" Class="mt-2" StartIcon="@Icons.Material.Filled.Delete">
+        @T("Clear file list")
+    </MudButton>
+}

app/MindWork AI Studio/Components/AttachDocuments.razor.cs

@@ -28,6 +28,9 @@ public partial class AttachDocuments : MSGComponentBase
     [Parameter] 
     public bool CatchAllDocuments { get; set; }
     
+    [Parameter]
+    public bool UseSmallForm { get; set; }
+    
     [Inject]
     private ILogger<AttachDocuments> Logger { get; set; } = null!;
     
@@ -37,6 +40,8 @@ public partial class AttachDocuments : MSGComponentBase
     [Inject]
     private IDialogService DialogService { get; init; } = null!;
     
+    private const Placement TOOLBAR_TOOLTIP_PLACEMENT = Placement.Top;
+    
     #region Overrides of MSGComponentBase
 
     protected override async Task OnInitializedAsync()

app/MindWork AI Studio/Components/ChatComponent.razor

@@ -82,6 +82,11 @@
             }
             
             <ChatTemplateSelection CanChatThreadBeUsedForTemplate="@this.CanThreadBeSaved" CurrentChatThread="@this.ChatThread" CurrentChatTemplate="@this.currentChatTemplate" CurrentChatTemplateChanged="@this.ChatTemplateWasChanged"/>
+
+            @if (this.isPandocAvailable)
+            {
+                <AttachDocuments Name="File Attachments" @bind-DocumentPaths="@this.chatDocumentPaths" CatchAllDocuments="true" UseSmallForm="true"/>
+            }
             
             @if (this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is WorkspaceStorageBehavior.STORE_CHATS_AUTOMATICALLY)
             {

app/MindWork AI Studio/Components/ChatComponent.razor.cs

@@ -3,6 +3,7 @@ using AIStudio.Dialogs;
 using AIStudio.Provider;
 using AIStudio.Settings;
 using AIStudio.Settings.DataModel;
+using AIStudio.Tools.Services;
 
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
@@ -33,9 +34,12 @@ public partial class ChatComponent : MSGComponentBase, IAsyncDisposable
     
     [Inject]
     private ILogger<ChatComponent> Logger { get; set; } = null!;
-    
+
     [Inject]
     private IDialogService DialogService { get; init; } = null!;
+
+    [Inject]
+    private PandocAvailabilityService PandocAvailabilityService { get; init; } = null!;
     
     private const Placement TOOLBAR_TOOLTIP_PLACEMENT = Placement.Top;
     private static readonly Dictionary<string, object?> USER_INPUT_ATTRIBUTES = new();
@@ -57,6 +61,8 @@ public partial class ChatComponent : MSGComponentBase, IAsyncDisposable
     private string currentWorkspaceName = string.Empty;
     private Guid currentWorkspaceId = Guid.Empty;
     private CancellationTokenSource? cancellationTokenSource;
+    private HashSet<string> chatDocumentPaths = [];
+    private bool isPandocAvailable;
 
     // Unfortunately, we need the input field reference to blur the focus away. Without
     // this, we cannot clear the input field.
@@ -197,6 +203,10 @@ public partial class ChatComponent : MSGComponentBase, IAsyncDisposable
         
         // Select the correct provider:
         await this.SelectProviderWhenLoadingChat();
+
+        // Check if Pandoc is available (no dialog or messages):
+        this.isPandocAvailable = await this.PandocAvailabilityService.IsAvailableAsync();
+
         await base.OnInitializedAsync();
     }
 
@@ -462,6 +472,7 @@ public partial class ChatComponent : MSGComponentBase, IAsyncDisposable
             lastUserPrompt = new ContentText
             {
                 Text = this.userInput,
+                FileAttachments = this.chatDocumentPaths.ToList(),
             };
 
             //
@@ -507,6 +518,7 @@ public partial class ChatComponent : MSGComponentBase, IAsyncDisposable
         // Clear the input field:
         await this.inputField.FocusAsync();
         this.userInput = string.Empty;
+        this.chatDocumentPaths.Clear();
         await this.inputField.BlurAsync();
         
         // Enable the stream state for the chat component:

app/MindWork AI Studio/Components/ReadFileContent.razor.cs

@@ -24,6 +24,9 @@ public partial class ReadFileContent : MSGComponentBase
     
     [Inject]
     private ILogger<ReadFileContent> Logger { get; init; } = null!;
+
+    [Inject]
+    private PandocAvailabilityService PandocAvailabilityService { get; init; } = null!;
     
     private async Task SelectFile()
     {
@@ -62,6 +65,11 @@ public partial class ReadFileContent : MSGComponentBase
             return;
         }
 
+        // Ensure that Pandoc is installed and ready:
+        await this.PandocAvailabilityService.EnsureAvailabilityAsync(
+            showSuccessMessage: false,
+            showDialog: true);
+        
         try
         {
             var fileContent = await UserFile.LoadFileData(selectedFile.SelectedFilePath, this.RustService, this.DialogService);