refactor: Simplify ConversationTimeline component structure and improve readability

This commit is contained in:
2025-06-08 02:08:51 -03:00
parent 8e39623bd9
commit b2f227b54a

View File

@@ -262,24 +262,26 @@ export function ConversationTimeline({
} }
return ( return (
<Card> <>
<CardHeader> {/* <CardHeader> */}
<CardTitle className="flex items-center justify-between"> {/* <CardTitle className="flex items-center justify-between"> */}
<div className="flex justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<MessageSquare className="h-5 w-5" /> <MessageSquare className="h-5 w-5" />
Conversation Timeline <h2 className="text-lg font-semibold">Conversation Timeline</h2>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Badge variant="outline" className={statusColors[debt.status]}> {/* <Badge variant="outline" className={statusColors[debt.status]}>
{statusLabels[debt.status]} {statusLabels[debt.status]}
</Badge> </Badge> */}
<span className="text-sm text-gray-500"> <span className="text-sm text-gray-500">
Round {debt.negotiation_round || 1} Round {debt.negotiation_round || 1}
</span> </span>
</div> </div>
</CardTitle> </div>
</CardHeader> {/* </CardTitle> */}
<CardContent className="space-y-4"> {/* </CardHeader> */}
{/* <CardContent className="space-y-4"> */}
{messages.length === 0 ? ( {messages.length === 0 ? (
<div className="text-center py-8 text-gray-500 dark:text-gray-400"> <div className="text-center py-8 text-gray-500 dark:text-gray-400">
<MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" /> <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
@@ -374,17 +376,14 @@ export function ConversationTimeline({
</Badge> </Badge>
{message.ai_analysis.confidence && ( {message.ai_analysis.confidence && (
<span className="text-xs text-gray-500"> <span className="text-xs text-gray-500">
{Math.round( {Math.round(message.ai_analysis.confidence * 100)}
message.ai_analysis.confidence * 100
)}
% confidence % confidence
</span> </span>
)} )}
</div> </div>
)} )}
{!!message.ai_analysis.extractedTerms {!!message.ai_analysis.extractedTerms?.proposedAmount && (
?.proposedAmount && (
<div className="text-xs text-gray-600 dark:text-gray-400"> <div className="text-xs text-gray-600 dark:text-gray-400">
Proposed Amount: $ Proposed Amount: $
{formatCurrency( {formatCurrency(
@@ -457,9 +456,8 @@ export function ConversationTimeline({
</div> </div>
</div> </div>
</> </>
) : debt.metadata.financialOutcome ) : debt.metadata.financialOutcome.financialBenefit
.financialBenefit?.type === ?.type === "payment_restructuring" ? (
"payment_restructuring" ? (
<> <>
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<Calendar className="h-4 w-4 text-blue-600" /> <Calendar className="h-4 w-4 text-blue-600" />
@@ -508,8 +506,7 @@ export function ConversationTimeline({
<div className="font-medium"> <div className="font-medium">
{ {
debt.metadata.financialOutcome debt.metadata.financialOutcome
.paymentStructure .paymentStructure.numberOfPayments
.numberOfPayments
}{" "} }{" "}
months months
</div> </div>
@@ -585,7 +582,7 @@ export function ConversationTimeline({
)} )}
</div> </div>
</div> </div>
</CardContent> {/* </CardContent> */}
</Card> </>
); );
} }