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>
+}