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.
This commit is contained in:
2026-01-06 19:00:35 +07:00
parent 40a39849f5
commit 42cbfbb8d8
2 changed files with 15 additions and 15 deletions

View File

@@ -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
});

View File

@@ -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>
)}