AI/orchai
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: show loader in streaming agent bubble

Browse source
This commit is contained in:
thibaud-lclr 2026-04-16 08:30:41 +02:00
parent 52fd2cfbef
commit d5958e2134
1 changed files with 31 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/components/projects/ProjectLiveAgent.tsx
View file

@ -30,6 +30,35 @@ interface LiveStreamStatusPayload {
error?: string | null;
}
function StreamingAgentBubble({ content }: { content: string }) {
return (
<div className="rounded bg-blue-100 px-3 py-2 text-sm text-blue-900">
<div className="mb-1 text-[11px] font-semibold uppercase tracking-wide opacity-70">
agent
</div>
<div className="whitespace-pre-wrap">{content || "Réponse en cours..."}</div>
<div
role="status"
aria-live="polite"
className="mt-3 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wide opacity-70"
>
<span aria-hidden="true" className="flex items-center gap-1">
<span
className="h-1.5 w-1.5 animate-bounce rounded-full bg-current"
style={{ animationDelay: "-0.3s" }}
/>
<span
className="h-1.5 w-1.5 animate-bounce rounded-full bg-current"
style={{ animationDelay: "-0.15s" }}
/>
<span className="h-1.5 w-1.5 animate-bounce rounded-full bg-current" />
</span>
<span>Génération en cours</span>
</div>
</div>
);
}
export default function ProjectLiveAgent() {
const { projectId } = useParams<{ projectId: string }>();
const [agents, setAgents] = useState<Agent[]>([]);
@ -128,7 +157,7 @@ export default function ProjectLiveAgent() {
return next;
});
if (payload.message.sender === "agent") {
if (payload.message.sender === "agent" && payload.message.content.trim() !== "") {
setStreamingAgentResponse(null);
}
}),
@ -338,14 +367,7 @@ export default function ProjectLiveAgent() {
</div>
))}
{streamingAgentResponse !== null && (
<div className="rounded bg-blue-100 px-3 py-2 text-sm text-blue-900">
<div className="mb-1 text-[11px] font-semibold uppercase tracking-wide opacity-70">
agent
</div>
<div className="whitespace-pre-wrap">
{streamingAgentResponse || "En train de repondre..."}
</div>
</div>
<StreamingAgentBubble content={streamingAgentResponse} />
)}
{messages.length === 0 && streamingAgentResponse === null && (
<div className="text-sm text-gray-400">Pas encore de message.</div>