feat(messages): show AI analysis always expanded without toggle

- Remove collapsible toggle for AI analysis section
- Always show ai_analysis content inline
- Clean up unused ChevronDown/ChevronUp imports and showAnalysis state
- Simplify layout with flex layout instead of button + conditional div

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
MythEclipse
2026-06-03 18:04:08 +07:00
co-authored by Claude Opus 4.8
parent 3a5e9212d9
commit acf6c931e0
@@ -1,8 +1,6 @@
import { import {
AlertCircle, AlertCircle,
CheckCircle2, CheckCircle2,
ChevronDown,
ChevronUp,
Image as ImageIcon, Image as ImageIcon,
Pencil, Pencil,
RotateCw, RotateCw,
@@ -133,7 +131,6 @@ function MessageRow({
const confidence = const confidence =
message.ai_confidence ?? message.ai_moderation_score ?? null; message.ai_confidence ?? message.ai_moderation_score ?? null;
const [isReanalyzing, setIsReanalyzing] = useState(false); const [isReanalyzing, setIsReanalyzing] = useState(false);
const [showAnalysis, setShowAnalysis] = useState(aiStatus === "flagged");
const analysisSummary = useMemo(() => { const analysisSummary = useMemo(() => {
const parts: string[] = []; const parts: string[] = [];
@@ -292,7 +289,7 @@ function MessageRow({
</div> </div>
)} )}
{/* AI Analysis */} {/* AI Analysis — always expanded */}
{message.ai_analysis ? ( {message.ai_analysis ? (
<div <div
className={`rounded-lg border-l-[3px] px-3 py-2 ${ className={`rounded-lg border-l-[3px] px-3 py-2 ${
@@ -301,26 +298,19 @@ function MessageRow({
: "border-l-emerald-400 bg-emerald-50/40" : "border-l-emerald-400 bg-emerald-50/40"
}`} }`}
> >
<button <div className="flex items-start gap-2 text-[11px]">
type="button" <span className="mt-0.5 shrink-0">
onClick={() => setShowAnalysis(!showAnalysis)}
className="flex w-full items-center justify-between gap-2 text-left text-[11px]"
>
<span className="font-medium text-foreground/70">
{aiStatus === "flagged" ? "🚨" : "️"} {aiStatus === "flagged" ? "🚨" : "️"}
</span>
<div className="min-w-0 flex-1">
<span className="block font-medium text-foreground/70 mb-1">
{analysisSummary} {analysisSummary}
</span> </span>
{showAnalysis ? ( <div className="text-[12px] text-muted-foreground leading-relaxed whitespace-pre-wrap">
<ChevronUp className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
) : (
<ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
)}
</button>
{showAnalysis && (
<div className="mt-1.5 border-t border-border/50 pt-1.5 text-[12px] text-muted-foreground leading-relaxed whitespace-pre-wrap">
{message.ai_analysis} {message.ai_analysis}
</div> </div>
)} </div>
</div>
</div> </div>
) : null} ) : null}