fix: [ENG-3815] Preserve line breaks in markdown rendering for Gemini models (#5443)

* fix: preserve line breaks in markdown rendering for Gemini models

Fixes line break formatting for Gemini model responses in the Chat view.
Single newlines were being collapsed by the markdown renderer (Streamdown)
following standard markdown behavior, causing text to appear run together.

This change adds a `preserveLineBreaksForMarkdown` utility that converts
single newlines to double newlines (paragraph breaks) for proper display,
while preserving code blocks and existing double newlines.

Affected components:
- TextMessage.tsx
- ChatOnlyView.tsx
- AssistantToolCalls.tsx
- Realtime.tsx

Fixes ENG-3815

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Update web/lib/textHelpers.ts

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

---------

Co-authored-by: replicas-connector[bot] <replicas-connector[bot]@users.noreply.github.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Justin Torre <justintorre75@gmail.com>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Author: 4 people

web/components/templates/requests/components/ChatOnlyView.tsx

@@ -21,6 +21,7 @@ import {
 import { JsonRenderer } from "./chatComponent/single/JsonRenderer";
 import { Streamdown } from "streamdown";
 import type { BundledTheme } from "shiki";
+import { preserveLineBreaksForMarkdown } from "@/lib/textHelpers";
 
 const shikiTheme: [BundledTheme, BundledTheme] = ["vitesse-light", "vitesse-dark"];
 
@@ -269,7 +270,9 @@ function ChatBubble({
               : "text-purple-900 dark:text-purple-100"
           )}
         >
-          <Streamdown shikiTheme={shikiTheme}>{displayContent}</Streamdown>
+          <Streamdown shikiTheme={shikiTheme}>
+            {preserveLineBreaksForMarkdown(displayContent)}
+          </Streamdown>
         </div>
 
         {/* Expand/collapse button for long messages */}

web/components/templates/requests/components/Realtime.tsx

@@ -25,6 +25,7 @@ import {
 } from "react-icons/pi";
 import { Streamdown } from "streamdown";
 import type { BundledTheme } from "shiki";
+import { preserveLineBreaksForMarkdown } from "@/lib/textHelpers";
 
 const shikiTheme: [BundledTheme, BundledTheme] = ["vitesse-light", "vitesse-dark"];
 
@@ -642,7 +643,9 @@ const SessionUpdate: React.FC<SessionUpdateProps> = ({ content }) => {
             }`}
           >
             <div className="prose prose-sm dark:prose-invert prose-headings:text-slate-50 prose-p:text-slate-200 prose-a:text-cyan-200 hover:prose-a:text-cyan-100 prose-blockquote:border-slate-400 prose-blockquote:text-slate-300 prose-strong:text-white prose-em:text-slate-300 prose-code:text-yellow-200 prose-pre:bg-slate-800/50 prose-pre:text-slate-200 prose-ol:text-slate-200 prose-ul:text-slate-200 prose-li:text-slate-200 [&_ol>li::marker]:text-white [&_ul>li::marker]:text-white">
-              <Streamdown shikiTheme={shikiTheme}>{sessionData.instructions}</Streamdown>
+              <Streamdown shikiTheme={shikiTheme}>
+                {preserveLineBreaksForMarkdown(sessionData.instructions)}
+              </Streamdown>
             </div>
           </div>
         </div>

web/components/templates/requests/components/chatComponent/single/AssistantToolCalls.tsx

@@ -8,6 +8,7 @@ import {
 } from "@helicone-package/llm-mapper/types";
 import { Streamdown } from "streamdown";
 import type { BundledTheme } from "shiki";
+import { preserveLineBreaksForMarkdown } from "@/lib/textHelpers";
 
 const shikiTheme: [BundledTheme, BundledTheme] = ["vitesse-light", "vitesse-dark"];
 
@@ -65,7 +66,9 @@ export default function AssistantToolCalls({
       ) : (
         content && (
           <div className="w-full whitespace-pre-wrap break-words p-2 text-xs">
-            <Streamdown shikiTheme={shikiTheme}>{content}</Streamdown>
+            <Streamdown shikiTheme={shikiTheme}>
+              {preserveLineBreaksForMarkdown(content)}
+            </Streamdown>
           </div>
         )
       )}

web/components/templates/requests/components/chatComponent/single/TextMessage.tsx

@@ -8,6 +8,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import CitationAnnotations from "./CitationAnnotations";
 import { Streamdown } from "streamdown";
 import type { BundledTheme } from "shiki";
+import { preserveLineBreaksForMarkdown } from "@/lib/textHelpers";
 
 const shikiTheme: [BundledTheme, BundledTheme] = ["vitesse-light", "vitesse-dark"];
 
@@ -122,7 +123,9 @@ export default function TextMessage({
       {displayContent ? (
         <>
           <div className="w-full whitespace-pre-wrap break-words text-sm">
-            <Streamdown shikiTheme={shikiTheme}>{displayContent}</Streamdown>
+            <Streamdown shikiTheme={shikiTheme}>
+              {preserveLineBreaksForMarkdown(displayContent)}
+            </Streamdown>
           </div>
           {annotations && annotations.length > 0 && (
             <CitationAnnotations

web/lib/textHelpers.ts

@@ -1,3 +1,31 @@
 export function numberWithCommas(x: number) {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
+
+/**
+ * Converts single newlines to double newlines for proper markdown rendering.
+ * Preserves existing double newlines (paragraph breaks) and code blocks.
+ *
+ * In standard markdown, single newlines are treated as spaces.
+ * This function ensures line breaks are preserved when rendering with markdown renderers.
+ *
+ * @param text - The text to process
+ * @returns The text with single newlines converted to double newlines (except in code blocks)
+ */
+export function preserveLineBreaksForMarkdown(text: string): string {
+  // Split by code blocks to preserve formatting inside them
+  const codeBlockRegex = /(```[\s\S]*?```|`[^`\n]+`)/g;
+  const parts = text.split(codeBlockRegex);
+
+  return parts
+    .map((part, index) => {
+      // Odd indices are code blocks, preserve them as-is
+      if (index % 2 === 1) {
+        return part;
+      }
+      // For non-code parts, convert single newlines to double newlines
+      // but don't affect existing double newlines
+      return part.replace(/\n(?!\n)/g, "\n\n");
+    })
+    .join("");
+}