From 6622a8c582afb8dedc8ae3684ccaeb0eb2921233 Mon Sep 17 00:00:00 2001
From: "DESKTOP-RTLN3BA\\$punk" <vermarohanfinal@gmail.com>
Date: Tue, 13 Jan 2026 01:48:43 -0800
Subject: [PATCH] feat: add custom callout component to MarkdownViewer for
 enhanced styling

---
 surfsense_web/components/markdown-viewer.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/surfsense_web/components/markdown-viewer.tsx b/surfsense_web/components/markdown-viewer.tsx
index 93e3f26e1..91f97830a 100644
--- a/surfsense_web/components/markdown-viewer.tsx
+++ b/surfsense_web/components/markdown-viewer.tsx
@@ -10,6 +10,14 @@ interface MarkdownViewerProps {
 export function MarkdownViewer({ content, className }: MarkdownViewerProps) {
 	const components: StreamdownProps["components"] = {
 		// Define custom components for markdown elements
+		callout: ({ children, ...props }) => (
+			<div
+				className="my-4 rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-950"
+				{...props}
+			>
+				{children}
+			</div>
+		),
 		p: ({ children, ...props }) => (
 			<p className="my-2" {...props}>
 				{children}