From daf00cbe062e91540392afeb8f2b6d5ea2cff5f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peer=20Sch=C3=BCtt?=
 <20603780+peerschuett@users.noreply.github.com>
Date: Thu, 12 Mar 2026 13:43:05 +0100
Subject: [PATCH] It now looks and acts as expected

---
 .../Components/ChatComponent.razor            | 64 +++++++++++--------
 .../Components/ProfileSelection.razor         |  4 +-
 app/MindWork AI Studio/wwwroot/app.js         | 12 ++--
 3 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/app/MindWork AI Studio/Components/ChatComponent.razor b/app/MindWork AI Studio/Components/ChatComponent.razor
index 5686f49c..828d97cb 100644
--- a/app/MindWork AI Studio/Components/ChatComponent.razor	
+++ b/app/MindWork AI Studio/Components/ChatComponent.razor	
@@ -54,23 +54,8 @@
                 Class="@this.UserInputClass"
                 Style="@this.UserInputStyle"/>
         </MudElement>
-        <MudToolBar WrapContent="true" Gutters="@false" Class="border border-solid rounded" Style="border-color: lightgrey;">
-            <MudTooltip Text="@T("Insert code formatting")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
-                <MudIconButton Icon="@Icons.Material.Filled.Code" OnClick="() => this.ApplyMarkdownFormat(MARKDOWN_CODE)" Disabled="@this.IsInputForbidden()"/>
-            </MudTooltip>
-            <MudTooltip Text="@T("Insert bold formatting")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
-                <MudIconButton Icon="@Icons.Material.Filled.FormatBold" OnClick="() => this.ApplyMarkdownFormat(MARKDOWN_BOLD)" Disabled="@this.IsInputForbidden()"/>
-            </MudTooltip>
-            <MudTooltip Text="@T("Insert italic formatting")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
-                <MudIconButton Icon="@Icons.Material.Filled.FormatItalic" OnClick="() => this.ApplyMarkdownFormat(MARKDOWN_ITALIC)" Disabled="@this.IsInputForbidden()"/>
-            </MudTooltip>
-            <MudTooltip Text="@T("Insert heading formatting")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
-                <MudIconButton Icon="@Icons.Material.Filled.TextFields" OnClick="() => this.ApplyMarkdownFormat(MARKDOWN_HEADING)" Disabled="@this.IsInputForbidden()"/>
-            </MudTooltip>
-            <MudTooltip Text="@T("Insert bulleted list formatting")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
-                <MudIconButton Icon="@Icons.Material.Filled.FormatListBulleted" OnClick="() => this.ApplyMarkdownFormat(MARKDOWN_BULLET_LIST)" Disabled="@this.IsInputForbidden()"/>
-            </MudTooltip>
-
+        <MudToolBar WrapContent="true" Gutters="@false" Class="border border-solid rounded" Style="border-color: lightgrey; gap: 2px;">
+            
             @if (
                 this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is not WorkspaceStorageBehavior.DISABLE_WORKSPACES
                 && this.SettingsManager.ConfigurationData.Workspace.DisplayBehavior is WorkspaceDisplayBehavior.TOGGLE_OVERLAY)
@@ -97,9 +82,9 @@
                     <MudIconButton Icon="@Icons.Material.Filled.CommentBank" OnClick="@(() => this.StartNewChat(useSameWorkspace: true))"/>
                 </MudTooltip>
             }
+
+            <ChatTemplateSelection MarginLeft="" CanChatThreadBeUsedForTemplate="@this.CanThreadBeSaved" CurrentChatThread="@this.ChatThread" CurrentChatTemplate="@this.currentChatTemplate" CurrentChatTemplateChanged="@this.ChatTemplateWasChanged"/>
             
-            <ChatTemplateSelection CanChatThreadBeUsedForTemplate="@this.CanThreadBeSaved" CurrentChatThread="@this.ChatThread" CurrentChatTemplate="@this.currentChatTemplate" CurrentChatTemplateChanged="@this.ChatTemplateWasChanged"/>
-            <AttachDocuments Name="File Attachments" Layer="@DropLayers.PAGES" @bind-DocumentPaths="@this.chatDocumentPaths" CatchAllDocuments="true" UseSmallForm="true" Provider="@this.Provider"/>
 
             @if (this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is WorkspaceStorageBehavior.STORE_CHATS_AUTOMATICALLY)
             {
@@ -114,7 +99,36 @@
                     <MudIconButton Icon="@Icons.Material.Filled.MoveToInbox" Disabled="@(!this.CanThreadBeSaved)" OnClick="@(() => this.MoveChatToWorkspace())"/>
                 </MudTooltip>
             }
-
+            
+            <AttachDocuments Name="File Attachments" Layer="@DropLayers.PAGES" @bind-DocumentPaths="@this.chatDocumentPaths" CatchAllDocuments="true" UseSmallForm="true" Provider="@this.Provider"/>
+            
+            <MudDivider Vertical="true" Style="height: 24px; align-self: center;"/>
+            
+            <MudTooltip Text="@T("Bold")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
+                <MudIconButton Icon="@Icons.Material.Filled.FormatBold" OnClick="() => this.ApplyMarkdownFormat(MARKDOWN_BOLD)" Disabled="@this.IsInputForbidden()"/>
+            </MudTooltip>
+            <MudTooltip Text="@T("Italic")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
+                <MudIconButton Icon="@Icons.Material.Filled.FormatItalic" OnClick="() => this.ApplyMarkdownFormat(MARKDOWN_ITALIC)" Disabled="@this.IsInputForbidden()"/>
+            </MudTooltip>
+            <MudTooltip Text="@T("Heading")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
+                <MudIconButton Icon="@Icons.Material.Filled.TextFields" OnClick="() => this.ApplyMarkdownFormat(MARKDOWN_HEADING)" Disabled="@this.IsInputForbidden()"/>
+            </MudTooltip>
+            <MudTooltip Text="@T("Bulleted List")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
+                <MudIconButton Icon="@Icons.Material.Filled.FormatListBulleted" OnClick="() => this.ApplyMarkdownFormat(MARKDOWN_BULLET_LIST)" Disabled="@this.IsInputForbidden()"/>
+            </MudTooltip>
+            <MudTooltip Text="@T("Code")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
+                <MudIconButton Icon="@Icons.Material.Filled.Code" OnClick="() => this.ApplyMarkdownFormat(MARKDOWN_CODE)" Disabled="@this.IsInputForbidden()"/>
+            </MudTooltip>
+            
+            <MudDivider Vertical="true" Style="height: 24px; align-self: center;"/>
+            
+            <ProfileSelection MarginLeft="" CurrentProfile="@this.currentProfile" CurrentProfileChanged="@this.ProfileWasChanged" Disabled="@(!this.currentChatTemplate.AllowProfileUsage)" DisabledText="@T("Profile usage is disabled according to your chat template settings.")"/>
+            
+            @if (PreviewFeatures.PRE_RAG_2024.IsEnabled(this.SettingsManager))
+            {
+                <DataSourceSelection @ref="@this.dataSourceSelectionComponent" PopoverTriggerMode="PopoverTriggerMode.BUTTON" LLMProvider="@this.Provider" DataSourceOptions="@this.GetCurrentDataSourceOptions()" DataSourceOptionsChanged="@(async options => await this.SetCurrentDataSourceOptions(options))" DataSourcesAISelected="@this.GetAgentSelectedDataSources()"/>
+            }
+            
             @if (this.SettingsManager.ConfigurationData.LLMProviders.ShowProviderConfidence)
             {
                 <ConfidenceInfo Mode="PopoverTriggerMode.ICON" LLMProvider="@this.Provider.UsedLLMProvider"/>
@@ -126,21 +140,15 @@
                     <MudIconButton Icon="@Icons.Material.Filled.Stop" Color="Color.Error" OnClick="@(() => this.CancelStreaming())"/>
                 </MudTooltip>
             }
-            
-            <ProfileSelection CurrentProfile="@this.currentProfile" CurrentProfileChanged="@this.ProfileWasChanged" Disabled="@(!this.currentChatTemplate.AllowProfileUsage)" DisabledText="@T("Profile usage is disabled according to your chat template settings.")"/>
 
-            @if (PreviewFeatures.PRE_RAG_2024.IsEnabled(this.SettingsManager))
-            {
-                <DataSourceSelection @ref="@this.dataSourceSelectionComponent" PopoverTriggerMode="PopoverTriggerMode.BUTTON" PopoverButtonClasses="ma-3" LLMProvider="@this.Provider" DataSourceOptions="@this.GetCurrentDataSourceOptions()" DataSourceOptionsChanged="@(async options => await this.SetCurrentDataSourceOptions(options))" DataSourcesAISelected="@this.GetAgentSelectedDataSources()"/>
-            }
-            
+
             @if (!this.ChatThread.IsLLMProviderAllowed(this.Provider))
             {
                 <MudTooltip Text="@T("The selected provider is not allowed in this chat due to data security reasons.")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                     <MudIconButton Icon="@Icons.Material.Filled.Error" Color="Color.Error"/>
                 </MudTooltip>
             }
-            <MudIconButton />
+            <MudIconButton/>
         </MudToolBar>
     </FooterContent>
 </InnerScrolling>
diff --git a/app/MindWork AI Studio/Components/ProfileSelection.razor b/app/MindWork AI Studio/Components/ProfileSelection.razor
index 02105589..36d2a35e 100644
--- a/app/MindWork AI Studio/Components/ProfileSelection.razor	
+++ b/app/MindWork AI Studio/Components/ProfileSelection.razor	
@@ -11,7 +11,7 @@
             }
             else
             {
-                <MudIconButton Size="Size.Small" Icon="@Icons.Material.Filled.Person4" />
+                <MudIconButton Icon="@Icons.Material.Filled.Person4" Color="Color.Default" />
             }
         </ActivatorContent>
         <ChildContent>
@@ -25,4 +25,4 @@
             }
         </ChildContent>
     </MudMenu>
-</MudTooltip>
\ No newline at end of file
+</MudTooltip>
diff --git a/app/MindWork AI Studio/wwwroot/app.js b/app/MindWork AI Studio/wwwroot/app.js
index 0db881e9..a2f8f967 100644
--- a/app/MindWork AI Studio/wwwroot/app.js	
+++ b/app/MindWork AI Studio/wwwroot/app.js	
@@ -49,7 +49,7 @@ window.formatChatInputMarkdown = function (inputId, formatType) {
 
     switch (formatType) {
         case 'bold': {
-            const text = hasSelection ? selectedText : 'bold text'
+            const text = hasSelection ? selectedText : ''
             insertedText = `**${text}**`
             selectionStart = start + 2
             selectionEnd = selectionStart + text.length
@@ -57,7 +57,7 @@ window.formatChatInputMarkdown = function (inputId, formatType) {
         }
 
         case 'italic': {
-            const text = hasSelection ? selectedText : 'italic text'
+            const text = hasSelection ? selectedText : ''
             insertedText = `*${text}*`
             selectionStart = start + 1
             selectionEnd = selectionStart + text.length
@@ -74,7 +74,7 @@ window.formatChatInputMarkdown = function (inputId, formatType) {
                 selectionStart = start
                 selectionEnd = start + insertedText.length
             } else {
-                const text = 'Heading'
+                const text = ''
                 insertedText = `# ${text}`
                 selectionStart = start + 2
                 selectionEnd = selectionStart + text.length
@@ -114,9 +114,9 @@ window.formatChatInputMarkdown = function (inputId, formatType) {
                     selectionEnd = selectionStart + selectedText.length
                 }
             } else {
-                const text = 'code'
-                insertedText = `\`\`\`\n${text}\n\`\`\``
-                selectionStart = start + 4
+                const text = ''
+                insertedText = `\`${text}\``
+                selectionStart = start + 1
                 selectionEnd = selectionStart + text.length
             }