refactor: Simplify ConversationTimeline component structure and improve readability

src/components/ConversationTimeline.tsx

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