fix: suggestions below chat + hide raw JSON during streaming

- 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>
This commit is contained in:
2026-04-17 12:24:49 +05:30
parent b3ba840dec
commit d4b0637cd5

View File

@@ -120,22 +120,25 @@ export const AiChatPanel = ({ callerContext, callerSummary, onChatStart }: AiCha
}); });
}, [append]); }, [append]);
const displayMessages = messages.map(msg => { // Filter out the currently-streaming assistant message (shows raw JSON).
if (msg.role === 'assistant') { // Only display completed assistant messages with parsed content.
const parsed = parseAiResponse(msg.content); const displayMessages = messages
return { ...msg, content: parsed.message }; .filter((msg, i) => {
} if (msg.role === 'assistant' && isLoading && i === messages.length - 1) return false;
return msg; return true;
}); })
.map(msg => {
if (msg.role === 'assistant') {
const parsed = parseAiResponse(msg.content);
return { ...msg, content: parsed.message };
}
return msg;
});
return ( return (
<div className="flex h-full flex-col gap-2 p-3"> <div className="flex h-full flex-col gap-2 p-3">
{!isSupervisor && <AiSummaryCard caller={callerSummary ?? null} />} {!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"> <div className="flex-1 space-y-3 overflow-y-auto min-h-0">
{displayMessages.length === 0 && ( {displayMessages.length === 0 && (
<div className="flex flex-col items-center justify-center py-6 text-center"> <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 ref={messagesEndRef} />
</div> </div>
{!isSupervisor && suggestions.length > 0 && (
<AiSuggestions suggestions={suggestions} onTellMeMore={handleTellMeMore} />
)}
<form onSubmit={handleSubmit} className="flex items-center gap-2 shrink-0"> <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"> <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" /> <FontAwesomeIcon icon={faUserHeadset} className="ml-2.5 size-3.5 text-fg-quaternary" />