From c0cf620fe3dd4218e62fb6328d87c808a5749432 Mon Sep 17 00:00:00 2001
From: Thorsten Sommer <SommerEngineering@users.noreply.github.com>
Date: Fri, 16 May 2025 15:36:08 +0200
Subject: [PATCH] Refactored some text fields to use the DebouncedTextField
 component (#459)

---
 .../Assistants/Agenda/AssistantAgenda.razor   |  2 +-
 .../Assistants/EMail/AssistantEMail.razor     |  2 +-
 .../Translation/AssistantTranslation.razor    |  2 +-
 .../Components/DebouncedTextField.razor       |  3 +
 .../Components/DebouncedTextField.razor.cs    | 80 +++++++++++++++++++
 .../wwwroot/changelog/v0.9.44.md              |  3 +-
 6 files changed, 88 insertions(+), 4 deletions(-)
 create mode 100644 app/MindWork AI Studio/Components/DebouncedTextField.razor
 create mode 100644 app/MindWork AI Studio/Components/DebouncedTextField.razor.cs

diff --git a/app/MindWork AI Studio/Assistants/Agenda/AssistantAgenda.razor b/app/MindWork AI Studio/Assistants/Agenda/AssistantAgenda.razor
index 19e98966..8056467c 100644
--- a/app/MindWork AI Studio/Assistants/Agenda/AssistantAgenda.razor	
+++ b/app/MindWork AI Studio/Assistants/Agenda/AssistantAgenda.razor	
@@ -3,7 +3,7 @@
 
 <MudTextField T="string" @bind-Text="@this.inputName" Validation="@this.ValidateName" Label="@T("Meeting Name")" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Tag" Variant="Variant.Outlined" Margin="Margin.Dense" UserAttributes="@USER_INPUT_ATTRIBUTES" HelperText="@T("Name the meeting, seminar, etc.")" Placeholder="@T("Weekly jour fixe")" Class="mb-3"/>
 <MudTextField T="string" @bind-Text="@this.inputTopic" Validation="@this.ValidateTopic" Label="@T("Topic")" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.EventNote" Variant="Variant.Outlined" Margin="Margin.Dense" UserAttributes="@USER_INPUT_ATTRIBUTES" HelperText="@T("Describe the topic of the meeting, seminar, etc. Is it about quantum computing, software engineering, or is it a general business meeting?")" Placeholder="@T("Project meeting")" Class="mb-3"/>
-<MudTextField T="string" @bind-Text="@this.inputContent" Validation="@this.ValidateContent" Label="@T("Content list")" Variant="Variant.Outlined" Lines="6" Margin="Margin.Dense" UserAttributes="@USER_INPUT_ATTRIBUTES" HelperText="@T("Bullet list the content of the meeting, seminar, etc. roughly. Use dashes (-) to separate the items.")" Placeholder="@PLACEHOLDER_CONTENT" Class="mb-3" Immediate="@false" DebounceInterval="1_000" OnDebounceIntervalElapsed="@this.OnContentChanged" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.ListAlt"/>
+<DebouncedTextField @bind-Text="@this.inputContent" ValidationFunc="@this.ValidateContent" DebounceTime="TimeSpan.FromSeconds(1)" Label="@T("Content list")" Lines="6" Attributes="@USER_INPUT_ATTRIBUTES" HelpText="@T("Bullet list the content of the meeting, seminar, etc. roughly. Use dashes (-) to separate the items.")" Placeholder="@PLACEHOLDER_CONTENT" WhenTextCanged="@this.OnContentChanged" Icon="@Icons.Material.Filled.ListAlt"/>
 <MudSelect T="string" Label="@T("(Optional) What topics should be the focus?")" MultiSelection="@true" @bind-SelectedValues="@this.selectedFoci" Variant="Variant.Outlined" Class="mb-3" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.ListAlt">
     @foreach (var contentLine in this.contentLines)
     {
diff --git a/app/MindWork AI Studio/Assistants/EMail/AssistantEMail.razor b/app/MindWork AI Studio/Assistants/EMail/AssistantEMail.razor
index 9220f499..2f8783b3 100644
--- a/app/MindWork AI Studio/Assistants/EMail/AssistantEMail.razor	
+++ b/app/MindWork AI Studio/Assistants/EMail/AssistantEMail.razor	
@@ -10,7 +10,7 @@
 }
 
 <MudTextField T="string" @bind-Text="@this.inputGreeting" Label="@T("(Optional) The greeting phrase to use")" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Person" Variant="Variant.Outlined" Margin="Margin.Dense" UserAttributes="@USER_INPUT_ATTRIBUTES" Placeholder="@T("Dear Colleagues")" Class="mb-3"/>
-<MudTextField T="string" @bind-Text="@this.inputBulletPoints" Validation="@this.ValidateBulletPoints" AdornmentIcon="@Icons.Material.Filled.ListAlt" Adornment="Adornment.Start" Label="@T("Your bullet points")" Variant="Variant.Outlined" Lines="6" AutoGrow="@true" MaxLines="12" Class="mb-3" UserAttributes="@USER_INPUT_ATTRIBUTES" HelperText="@T("Bullet list the content of the e-mail roughly. Use dashes (-) to separate the items.")" Immediate="@false" DebounceInterval="1_000" OnDebounceIntervalElapsed="@this.OnContentChanged" Placeholder="@PLACEHOLDER_BULLET_POINTS"/>
+<DebouncedTextField @bind-Text="@this.inputBulletPoints" ValidationFunc="@this.ValidateBulletPoints" Icon="@Icons.Material.Filled.ListAlt" Label="@T("Your bullet points")" Lines="6" MaxLines="12" Attributes="@USER_INPUT_ATTRIBUTES" HelpText="@T("Bullet list the content of the e-mail roughly. Use dashes (-) to separate the items.")" DebounceTime="TimeSpan.FromSeconds(1)" WhenTextCanged="@this.OnContentChanged" Placeholder="@PLACEHOLDER_BULLET_POINTS"/>
 <MudSelect T="string" Label="@T("(Optional) Are any of your points particularly important?")" MultiSelection="@true" @bind-SelectedValues="@this.selectedFoci" Variant="Variant.Outlined" Class="mb-3" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.ListAlt">
     @foreach (var contentLine in this.bulletPointsLines)
     {
diff --git a/app/MindWork AI Studio/Assistants/Translation/AssistantTranslation.razor b/app/MindWork AI Studio/Assistants/Translation/AssistantTranslation.razor
index 27b902ce..571b408e 100644
--- a/app/MindWork AI Studio/Assistants/Translation/AssistantTranslation.razor	
+++ b/app/MindWork AI Studio/Assistants/Translation/AssistantTranslation.razor	
@@ -15,7 +15,7 @@
 <MudTextSwitch Label="@T("Live translation")" @bind-Value="@this.liveTranslation" LabelOn="@T("Live translation")" LabelOff="@T("No live translation")"/>
 @if (this.liveTranslation)
 {
-    <MudTextField T="string" Disabled="@this.isAgentRunning" @bind-Text="@this.inputText" Validation="@this.ValidatingText" AdornmentIcon="@Icons.Material.Filled.DocumentScanner" Adornment="Adornment.Start" Label="@T("Your input")" Variant="Variant.Outlined" Lines="6" AutoGrow="@true" MaxLines="12" Class="mb-3" Immediate="@true" DebounceInterval="@this.SettingsManager.ConfigurationData.Translation.DebounceIntervalMilliseconds" OnDebounceIntervalElapsed="() => this.TranslateText(force: false)" UserAttributes="@USER_INPUT_ATTRIBUTES"/>
+    <DebouncedTextField Disabled="@this.isAgentRunning" @bind-Text="@this.inputText" ValidationFunc="@this.ValidatingText" Icon="@Icons.Material.Filled.DocumentScanner" Label="@T("Your input")" Lines="6" MaxLines="12" DebounceTime="@TimeSpan.FromMilliseconds(this.SettingsManager.ConfigurationData.Translation.DebounceIntervalMilliseconds)" WhenTextChangedAsync="async _ => await this.TranslateText(force: false)" Attributes="@USER_INPUT_ATTRIBUTES"/>
 }
 else
 {
diff --git a/app/MindWork AI Studio/Components/DebouncedTextField.razor b/app/MindWork AI Studio/Components/DebouncedTextField.razor
new file mode 100644
index 00000000..83e205d8
--- /dev/null
+++ b/app/MindWork AI Studio/Components/DebouncedTextField.razor	
@@ -0,0 +1,3 @@
+@inherits MudComponentBase
+
+<MudTextField T="string" Disabled="@this.Disabled" Text="@this.text" TextChanged="@this.OnTextChanged" Validation="@this.ValidationFunc" Label="@this.Label" Variant="Variant.Outlined" Lines="@this.Lines" MaxLines="@this.MaxLines" AutoGrow="@(this.MaxLines > this.Lines)" Margin="Margin.Dense" UserAttributes="@this.Attributes" HelperText="@this.HelpText" Placeholder="@this.Placeholder" Class="mb-3" Immediate="true" Adornment="Adornment.Start" AdornmentIcon="@this.Icon"/>
\ No newline at end of file
diff --git a/app/MindWork AI Studio/Components/DebouncedTextField.razor.cs b/app/MindWork AI Studio/Components/DebouncedTextField.razor.cs
new file mode 100644
index 00000000..885a8488
--- /dev/null
+++ b/app/MindWork AI Studio/Components/DebouncedTextField.razor.cs	
@@ -0,0 +1,80 @@
+using Microsoft.AspNetCore.Components;
+
+using Timer = System.Timers.Timer;
+
+namespace AIStudio.Components;
+
+public partial class DebouncedTextField : MudComponentBase
+{
+    [Parameter]
+    public string Label { get; set; } = string.Empty;
+    
+    [Parameter]
+    public string Text { get; set; } =  string.Empty;
+    
+    [Parameter]
+    public EventCallback<string> TextChanged { get; set; }
+    
+    [Parameter]
+    public Func<string, Task> WhenTextChangedAsync { get; set; } = _ => Task.CompletedTask;
+    
+    [Parameter]
+    public Action<string> WhenTextCanged { get; set; } = _ => { };
+    
+    [Parameter]
+    public int Lines { get; set; } = 1;
+
+    [Parameter]
+    public int MaxLines { get; set; } = 1;
+
+    [Parameter]
+    public Dictionary<string, object?> Attributes { get; set; } = [];
+
+    [Parameter]
+    public Func<string, string?> ValidationFunc { get; set; } = _ => null;
+    
+    [Parameter]
+    public string HelpText { get; set; } = string.Empty;
+    
+    [Parameter]
+    public string Placeholder { get; set; } = string.Empty;
+    
+    [Parameter]
+    public string Icon { get; set; } = string.Empty;
+    
+    [Parameter]
+    public TimeSpan DebounceTime { get; set; } = TimeSpan.FromMilliseconds(800);
+    
+    [Parameter]
+    public bool Disabled { get; set; }
+    
+    private readonly Timer debounceTimer = new();
+    private string text = string.Empty;
+
+    #region Overrides of ComponentBase
+
+    protected override async Task OnInitializedAsync()
+    {
+        this.text = this.Text;
+        this.debounceTimer.AutoReset = false;
+        this.debounceTimer.Interval = this.DebounceTime.TotalMilliseconds;
+        this.debounceTimer.Elapsed += (_, _) =>
+        {
+            this.debounceTimer.Stop();
+            this.InvokeAsync(async () => await this.TextChanged.InvokeAsync(this.text));
+            this.InvokeAsync(async () => await this.WhenTextChangedAsync(this.text));
+            this.InvokeAsync(() => this.WhenTextCanged(this.text));
+        };
+        
+        await base.OnInitializedAsync();
+    }
+
+    #endregion
+
+    private void OnTextChanged(string value)
+    {
+        this.text = value;
+        this.debounceTimer.Stop();
+        this.debounceTimer.Start();
+    }
+}
\ No newline at end of file
diff --git a/app/MindWork AI Studio/wwwroot/changelog/v0.9.44.md b/app/MindWork AI Studio/wwwroot/changelog/v0.9.44.md
index a27239e4..98f485e4 100644
--- a/app/MindWork AI Studio/wwwroot/changelog/v0.9.44.md	
+++ b/app/MindWork AI Studio/wwwroot/changelog/v0.9.44.md	
@@ -1,2 +1,3 @@
 # v0.9.44, build 219 (2025-05-xx xx:xx UTC)
-- Improved localization code & German translation.
\ No newline at end of file
+- Improved localization code & German translation.
+- Fixed a bug with text fields when their content was read live. This issue caused the user interface to refresh too frequently, resulting in increased energy consumption.
\ No newline at end of file