From d4b0637cd5ac54262dd994b65a8131547da0b1f1 Mon Sep 17 00:00:00 2001
From: saridsa2 <s.satya.suman@globaluniversityfoundation.com>
Date: Fri, 17 Apr 2026 12:24:49 +0530
Subject: [PATCH] fix: suggestions below chat + hide raw JSON during streaming
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Suggestions moved from above chat to below (before input) — agent
  reads summary first, sees suggestions after AI responds
- During streaming, the last assistant message (raw JSON) is hidden —
  only the typing indicator shows. Once complete, parsed message renders.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/call-desk/ai-chat-panel.tsx | 29 ++++++++++++++--------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/call-desk/ai-chat-panel.tsx b/src/components/call-desk/ai-chat-panel.tsx
index 4e0b70f..3598bc1 100644
--- a/src/components/call-desk/ai-chat-panel.tsx
+++ b/src/components/call-desk/ai-chat-panel.tsx
@@ -120,22 +120,25 @@ export const AiChatPanel = ({ callerContext, callerSummary, onChatStart }: AiCha
         });
     }, [append]);
 
-    const displayMessages = messages.map(msg => {
-        if (msg.role === 'assistant') {
-            const parsed = parseAiResponse(msg.content);
-            return { ...msg, content: parsed.message };
-        }
-        return msg;
-    });
+    // Filter out the currently-streaming assistant message (shows raw JSON).
+    // Only display completed assistant messages with parsed content.
+    const displayMessages = messages
+        .filter((msg, i) => {
+            if (msg.role === 'assistant' && isLoading && i === messages.length - 1) return false;
+            return true;
+        })
+        .map(msg => {
+            if (msg.role === 'assistant') {
+                const parsed = parseAiResponse(msg.content);
+                return { ...msg, content: parsed.message };
+            }
+            return msg;
+        });
 
     return (
         <div className="flex h-full flex-col gap-2 p-3">
             {!isSupervisor && <AiSummaryCard caller={callerSummary ?? null} />}
 
-            {!isSupervisor && suggestions.length > 0 && (
-                <AiSuggestions suggestions={suggestions} onTellMeMore={handleTellMeMore} />
-            )}
-
             <div className="flex-1 space-y-3 overflow-y-auto min-h-0">
                 {displayMessages.length === 0 && (
                     <div className="flex flex-col items-center justify-center py-6 text-center">
@@ -187,6 +190,10 @@ export const AiChatPanel = ({ callerContext, callerSummary, onChatStart }: AiCha
                 <div ref={messagesEndRef} />
             </div>
 
+            {!isSupervisor && suggestions.length > 0 && (
+                <AiSuggestions suggestions={suggestions} onTellMeMore={handleTellMeMore} />
+            )}
+
             <form onSubmit={handleSubmit} className="flex items-center gap-2 shrink-0">
                 <div className="flex flex-1 items-center rounded-lg border border-secondary bg-primary shadow-xs transition duration-100 ease-linear focus-within:border-brand focus-within:ring-4 focus-within:ring-brand-100">
                     <FontAwesomeIcon icon={faUserHeadset} className="ml-2.5 size-3.5 text-fg-quaternary" />