@dust-tt/sparkle 0.4.20 → 0.4.22

package/src/components/markdown/ParagraphBlock.tsx

@@ -3,24 +3,41 @@ import React from "react";
 
 import { cn } from "@sparkle/lib";
 
-export const paragraphBlockVariants = cva([
-  "s-whitespace-pre-wrap s-break-words s-font-normal first:s-pt-0 last:s-pb-0",
-  "s-py-1 @md:s-py-2 @md:s-leading-7",
-]);
+export const paragraphBlockVariants = cva(
+  [
+    "s-whitespace-pre-wrap s-break-words s-font-normal first:s-pt-0 last:s-pb-0",
+  ],
+  {
+    variants: {
+      compactSpacing: {
+        true: ["s-py-0"],
+        false: ["s-py-1 @md:s-py-2 @md:s-leading-7"],
+      },
+    },
+  }
+);
 
 interface ParagraphBlockProps {
   children: React.ReactNode;
   textColor: string;
   textSize: string;
+  compactSpacing?: boolean;
 }
 
 export function ParagraphBlock({
   children,
   textColor,
   textSize,
+  compactSpacing = false,
 }: ParagraphBlockProps) {
   return (
-    <div className={cn(paragraphBlockVariants(), textSize, textColor)}>
+    <div
+      className={cn(
+        paragraphBlockVariants({ compactSpacing }),
+        textSize,
+        textColor
+      )}
+    >
       {children}
     </div>
   );

package/src/components/markdown/utils.ts

@@ -40,6 +40,16 @@ export function detectLanguage(children: React.ReactNode) {
   return "text";
 }
 
+/**
+ * Converts consecutive newlines (\n\n) into hard breaks to preserve line spacing.
+ * Inserts an empty line with a non-breaking space to create visual spacing.
+ */
+export function preserveLineBreaks(content: string): string {
+  // Replace \n\n with \n \n\n to insert an empty line with content
+  // This creates visual spacing between paragraphs
+  return content.replace(/\n\n\n\n/g, "\n\n \n\n");
+}
+
 /**
  * Preprocesses content to escape dollar signs that are likely NOT inlione LaTeX math. This helps
  * prevent false positives when enabling single $ math rendering.