From d5958e2134de74141c166a7a49c44375929cf9a9 Mon Sep 17 00:00:00 2001
From: thibaud-lclr <thibaud.leclere2@protonmail.com>
Date: Thu, 16 Apr 2026 08:30:41 +0200
Subject: [PATCH] feat: show loader in streaming agent bubble

---
 src/components/projects/ProjectLiveAgent.tsx | 40 +++++++++++++++-----
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/components/projects/ProjectLiveAgent.tsx b/src/components/projects/ProjectLiveAgent.tsx
index ec469c3..f4f41af 100644
--- a/src/components/projects/ProjectLiveAgent.tsx
+++ b/src/components/projects/ProjectLiveAgent.tsx
@@ -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>