docs: enhance report generation instructions with detailed formatting guidelines for code examples and Mermaid diagrams

surfsense_backend/app/agents/new_chat/tools/report.py

@@ -46,6 +46,13 @@ _REPORT_PROMPT = """You are an expert report writer. Generate a well-structured,
 5. Be thorough and comprehensive — include all relevant information from the source content.
 6. End with a conclusion or key takeaways section.
 7. The report should be professional and ready to export.
+8. When including code examples, ALWAYS format them as proper fenced code blocks with the correct language identifier (e.g. ```java, ```python). Code inside code blocks MUST have proper line breaks and indentation — NEVER put multiple statements on a single line. Each statement, brace, and logical block must be on its own line with correct indentation.
+9. When including Mermaid diagrams, use ```mermaid fenced code blocks. Each Mermaid statement MUST be on its own line — NEVER use semicolons to join multiple statements on one line. For line breaks inside node labels, use <br> (NOT <br/>). Example:
+   ```mermaid
+   graph TD
+       A[Source Code] --> B[Compiler]
+       B --> C[Bytecode]
+   ```
 
 Write the report now:
 """

surfsense_web/components/markdown-viewer.tsx

@@ -9,15 +9,6 @@ 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}
@@ -77,35 +68,21 @@ export function MarkdownViewer({ content, className }: MarkdownViewerProps) {
 		),
 		th: ({ ...props }) => <th className="px-3 py-2 text-left font-medium bg-muted" {...props} />,
 		td: ({ ...props }) => <td className="px-3 py-2 border-t border-border" {...props} />,
-		code: ({ className, children, ...props }) => {
-			const match = /language-(\w+)/.exec(className || "");
-			const isInline = !match;
-
-			if (isInline) {
-				return (
-					<code className="bg-muted px-1 py-0.5 rounded text-xs" {...props}>
-						{children}
-					</code>
-				);
-			}
-
-			// For code blocks, let Streamdown handle syntax highlighting
-			return (
-				<code className={className} {...props}>
-					{children}
-				</code>
-			);
-		},
 	};
 
 	return (
 		<div
 			className={cn(
-				"prose prose-sm dark:prose-invert max-w-none overflow-hidden [&_pre]:overflow-x-auto [&_code]:wrap-break-word [&_table]:block [&_table]:overflow-x-auto",
+				"prose prose-sm dark:prose-invert max-w-none overflow-hidden [&_table]:block [&_table]:overflow-x-auto",
 				className
 			)}
 		>
-			<Streamdown components={components} shikiTheme={["github-light", "github-dark"]}>
+			<Streamdown
+				components={components}
+				shikiTheme={["github-light", "github-dark"]}
+				controls={{ code: true }}
+				mode="static"
+			>
 				{content}
 			</Streamdown>
 		</div>