Oda/managing-apps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor progress update messages and improve UI opacity in AiChat component

Browse Source 
- 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.
This commit is contained in:
cryptooda
2026-01-06 19:00:35 +07:00
parent 40a39849f5
commit 42cbfbb8d8
2 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/Managing.Api/Controllers/LlmController.cs
View File

@@ -187,7 +187,7 @@ public class LlmController : BaseController
await SendProgressUpdate(connectionId, new LlmProgressUpdate await SendProgressUpdate(connectionId, new LlmProgressUpdate
{ {
Type = "iteration_start", Type = "iteration_start",
Message = $"Iteration {iteration}/{maxIterations}: Analyzing your request and determining next steps...", Message = "Analyzing your request and determining next steps...",
Iteration = iteration, Iteration = iteration,
MaxIterations = maxIterations MaxIterations = maxIterations
}); });
@@ -215,7 +215,7 @@ public class LlmController : BaseController
await SendProgressUpdate(connectionId, new LlmProgressUpdate await SendProgressUpdate(connectionId, new LlmProgressUpdate
{ {
Type = "thinking", Type = "thinking",
Message = $"Iteration {iteration}: Sending request to LLM...", Message = "Sending request to LLM...",
Iteration = iteration, Iteration = iteration,
MaxIterations = maxIterations MaxIterations = maxIterations
}); });
@@ -247,7 +247,7 @@ public class LlmController : BaseController
await SendProgressUpdate(connectionId, new LlmProgressUpdate await SendProgressUpdate(connectionId, new LlmProgressUpdate
{ {
Type = "thinking", 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, Iteration = iteration,
MaxIterations = maxIterations MaxIterations = maxIterations
}); });
@@ -316,7 +316,7 @@ public class LlmController : BaseController
await SendProgressUpdate(connectionId, new LlmProgressUpdate await SendProgressUpdate(connectionId, new LlmProgressUpdate
{ {
Type = "thinking", Type = "thinking",
Message = $"Iteration {iteration}: All tools completed. Analyzing results...", Message = "All tools completed. Analyzing results...",
Iteration = iteration, Iteration = iteration,
MaxIterations = maxIterations MaxIterations = maxIterations
}); });

22
src/Managing.WebApp/src/components/organism/AiChat.tsx
View File

@@ -238,7 +238,7 @@ function AiChat({ onClose }: AiChatProps): JSX.Element {
{/* Progress Updates */} {/* Progress Updates */}
{isLoading && currentProgress && ( {isLoading && currentProgress && (
<div className="flex justify-start"> <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} /> <ProgressIndicator progress={currentProgress} />
</div> </div>
</div> </div>
@@ -321,31 +321,31 @@ function ProgressIndicator({ progress }: { progress: LlmProgressUpdate }): JSX.E
} }
return ( return (
<div className="space-y-2"> <div className="space-y-2 opacity-80">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-lg">{getIcon()}</span> <span className="text-lg opacity-70">{getIcon()}</span>
<span className={`text-sm font-medium ${getColor()}`}> <span className={`text-sm font-normal ${getColor()} opacity-75`}>
{progress.message} {progress.message}
</span> </span>
</div> </div>
{progress.iteration && progress.maxIterations && ( {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 <progress
className="progress progress-primary w-32 h-2" className="progress progress-primary w-32 h-1.5 opacity-60"
value={progress.iteration} value={progress.iteration}
max={progress.maxIterations} max={progress.maxIterations}
/> />
<span>Iteration {progress.iteration}/{progress.maxIterations}</span> <span className="opacity-60">Iteration {progress.iteration}/{progress.maxIterations}</span>
</div> </div>
)} )}
{progress.toolName && ( {progress.toolName && (
<div className="text-xs text-base-content/60 mt-1"> <div className="text-xs text-base-content/40 mt-1">
<span className="font-mono bg-base-300 px-2 py-1 rounded"> <span className="font-mono bg-base-300/50 px-2 py-1 rounded opacity-70">
{progress.toolName} {progress.toolName}
{progress.toolArguments && Object.keys(progress.toolArguments).length > 0 && ( {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) ({Object.keys(progress.toolArguments).length} args)
</span> </span>
)} )}
@@ -354,7 +354,7 @@ function ProgressIndicator({ progress }: { progress: LlmProgressUpdate }): JSX.E
)} )}
{progress.error && ( {progress.error && (
<div className="text-xs text-error mt-1"> <div className="text-xs text-error mt-1 opacity-80">
{progress.error} {progress.error}
</div> </div>
)} )}