From 42cbfbb8d8e5a5004a25379bbf418ee55e663c98 Mon Sep 17 00:00:00 2001
From: cryptooda <crypto.oda@gmail.com>
Date: Tue, 6 Jan 2026 19:00:35 +0700
Subject: [PATCH] Refactor progress update messages and improve UI opacity in
 AiChat component

- Simplified progress update messages in LlmController by removing iteration details for clarity.
- Enhanced the visual appearance of the AiChat component by adjusting opacity levels for progress indicators and text elements, improving overall readability and user experience.
- Updated styling for tool name and error messages to ensure consistent visual feedback during chat interactions.
---
 src/Managing.Api/Controllers/LlmController.cs |  8 +++----
 .../src/components/organism/AiChat.tsx        | 22 +++++++++----------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/Managing.Api/Controllers/LlmController.cs b/src/Managing.Api/Controllers/LlmController.cs
index af54c471..33ab0b18 100644
--- a/src/Managing.Api/Controllers/LlmController.cs
+++ b/src/Managing.Api/Controllers/LlmController.cs
@@ -187,7 +187,7 @@ public class LlmController : BaseController
             await SendProgressUpdate(connectionId, new LlmProgressUpdate
             {
                 Type = "iteration_start",
-                Message = $"Iteration {iteration}/{maxIterations}: Analyzing your request and determining next steps...",
+                Message = "Analyzing your request and determining next steps...",
                 Iteration = iteration,
                 MaxIterations = maxIterations
             });
@@ -215,7 +215,7 @@ public class LlmController : BaseController
             await SendProgressUpdate(connectionId, new LlmProgressUpdate
             {
                 Type = "thinking",
-                Message = $"Iteration {iteration}: Sending request to LLM...",
+                Message = "Sending request to LLM...",
                 Iteration = iteration,
                 MaxIterations = maxIterations
             });
@@ -247,7 +247,7 @@ public class LlmController : BaseController
             await SendProgressUpdate(connectionId, new LlmProgressUpdate
             {
                 Type = "thinking",
-                Message = $"Iteration {iteration}: LLM requested {response.ToolCalls.Count} tool call(s). Executing tools...",
+                Message = $"LLM requested {response.ToolCalls.Count} tool call(s). Executing tools...",
                 Iteration = iteration,
                 MaxIterations = maxIterations
             });
@@ -316,7 +316,7 @@ public class LlmController : BaseController
             await SendProgressUpdate(connectionId, new LlmProgressUpdate
             {
                 Type = "thinking",
-                Message = $"Iteration {iteration}: All tools completed. Analyzing results...",
+                Message = "All tools completed. Analyzing results...",
                 Iteration = iteration,
                 MaxIterations = maxIterations
             });
diff --git a/src/Managing.WebApp/src/components/organism/AiChat.tsx b/src/Managing.WebApp/src/components/organism/AiChat.tsx
index 4778e97a..ace47b17 100644
--- a/src/Managing.WebApp/src/components/organism/AiChat.tsx
+++ b/src/Managing.WebApp/src/components/organism/AiChat.tsx
@@ -238,7 +238,7 @@ function AiChat({ onClose }: AiChatProps): JSX.Element {
         {/* Progress Updates */}
         {isLoading && currentProgress && (
           <div className="flex justify-start">
-            <div className="bg-base-200 p-3 rounded-lg max-w-[80%]">
+            <div className="bg-base-200/40 p-3 rounded-lg max-w-[80%] opacity-70">
               <ProgressIndicator progress={currentProgress} />
             </div>
           </div>
@@ -321,31 +321,31 @@ function ProgressIndicator({ progress }: { progress: LlmProgressUpdate }): JSX.E
   }
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-2 opacity-80">
       <div className="flex items-center gap-2">
-        <span className="text-lg">{getIcon()}</span>
-        <span className={`text-sm font-medium ${getColor()}`}>
+        <span className="text-lg opacity-70">{getIcon()}</span>
+        <span className={`text-sm font-normal ${getColor()} opacity-75`}>
           {progress.message}
         </span>
       </div>
       
       {progress.iteration && progress.maxIterations && (
-        <div className="flex items-center gap-2 text-xs text-base-content/60">
+        <div className="flex items-center gap-2 text-xs text-base-content/40">
           <progress
-            className="progress progress-primary w-32 h-2"
+            className="progress progress-primary w-32 h-1.5 opacity-60"
             value={progress.iteration}
             max={progress.maxIterations}
           />
-          <span>Iteration {progress.iteration}/{progress.maxIterations}</span>
+          <span className="opacity-60">Iteration {progress.iteration}/{progress.maxIterations}</span>
         </div>
       )}
       
       {progress.toolName && (
-        <div className="text-xs text-base-content/60 mt-1">
-          <span className="font-mono bg-base-300 px-2 py-1 rounded">
+        <div className="text-xs text-base-content/40 mt-1">
+          <span className="font-mono bg-base-300/50 px-2 py-1 rounded opacity-70">
             {progress.toolName}
             {progress.toolArguments && Object.keys(progress.toolArguments).length > 0 && (
-              <span className="ml-1 opacity-60">
+              <span className="ml-1 opacity-50">
                 ({Object.keys(progress.toolArguments).length} args)
               </span>
             )}
@@ -354,7 +354,7 @@ function ProgressIndicator({ progress }: { progress: LlmProgressUpdate }): JSX.E
       )}
       
       {progress.error && (
-        <div className="text-xs text-error mt-1">
+        <div className="text-xs text-error mt-1 opacity-80">
           {progress.error}
         </div>
       )}