fix: removed large spacing between elements in rendered markdown

Author: nickytonline

src/components/BotMessage.tsx

@@ -61,7 +61,7 @@ export function BotMessage({ message, isLoading }: BotMessageProps) {
             <Copy className="h-4 w-4" aria-hidden="true" />
             <span className="sr-only">Copy</span>
           </button>
-          <div className="prose prose-sm dark:prose-invert max-w-none break-words break-all whitespace-pre-wrap">
+          <div className="prose prose-sm dark:prose-invert">
             <MarkdownContent content={message.content} />
           </div>
         </div>

src/components/MarkdownContent.tsx

@@ -7,7 +7,7 @@ type MarkdownContentProps = {
 
 export function MarkdownContent({ content }: MarkdownContentProps) {
   return (
-    <div className="prose prose-sm dark:prose-invert max-w-none break-words">
+    <div className="prose prose-sm dark:prose-invert max-w-none break-words [&>*+*]:mt-4 [&>h1+*]:mt-3 [&>h2+*]:mt-3 [&>h3+*]:mt-3 [&>p+ul]:mt-3 [&>p+ol]:mt-3">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         components={{

src/components/ReasoningMessage.tsx

@@ -83,7 +83,7 @@ export function ReasoningMessage({
           <div className="text-xs space-y-1 mt-1">
             {effort && <div>Effort: {effort}</div>}
             {summary && (
-              <div className="prose prose-sm dark:prose-invert max-w-none break-words break-all whitespace-pre-wrap">
+              <div className="prose prose-sm dark:prose-invert">
                 <MarkdownContent content={summary} />
               </div>
             )}

src/components/UserMessage.tsx

@@ -32,7 +32,7 @@ export function UserMessage({ message }: UserMessageProps) {
             'rounded-2xl px-4 py-2 text-sm w-full bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100',
           )}
         >
-          <div className="prose prose-sm dark:prose-invert max-w-none break-words break-all whitespace-pre-wrap">
+          <div className="prose prose-sm dark:prose-invert">
             <MarkdownContent content={message.content} />
           </div>
         </div>

src/routes/api/chat.ts

@@ -64,8 +64,29 @@ export const ServerRoute = createServerFileRoute('/api/chat').methods({
           },
         })) satisfies Tool[]
 
+      // System prompt for proper markdown formatting
+      const systemPrompt = `You are a helpful AI assistant that communicates using properly formatted markdown. Follow these strict formatting rules:
+
+MARKDOWN FORMATTING REQUIREMENTS:
+1. **Lists**: Always keep list items on the same line as the marker
+   - ✅ CORRECT: "1. Lorem ipsum dolor sit amet..."
+   - ❌ WRONG: "1.  \\nLorem ipsum dolor sit amet..."
+
+2. **No line breaks after list markers**: Never put a line break immediately after numbered lists (1. 2. 3.) or bullet lists (- * +)
+
+3. **Proper list syntax**:
+   - Numbered lists: "1. Content here"
+   - Bullet lists: "- Content here" or "* Content here"
+   - No extra spaces or line breaks between marker and content
+
+4. **Other markdown**: Use standard markdown for headers, emphasis, links, tables, and code blocks
+
+5. **Consistency**: Maintain consistent formatting throughout your response
+
+Remember: Keep list content on the same line as the list marker to ensure proper rendering.`
+
       // Format the conversation history into a single input string with proper message parts
-      const input = messages
+      const conversationHistory = messages
         .map((msg) => ({
           role: msg.role,
           parts: [
@@ -81,6 +102,9 @@ export const ServerRoute = createServerFileRoute('/api/chat').methods({
         )
         .join('\n\n')
 
+      // Combine system prompt with conversation
+      const input = `${systemPrompt}\n\n--- CONVERSATION ---\n\n${conversationHistory}`
+
       const client = new OpenAI()
 
       let answer