From 711759572f62766cb18698d44dbeaaafa3b1859b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 13 Jan 2026 19:35:19 +0000
Subject: [PATCH] Fix newline rendering in chat messages

The Text component was not properly rendering newlines in chat messages.
The previous implementation had buggy logic that only rendered <br /> for
empty lines and used an inconsistent mix of spans and divs for non-empty
lines, which didn't create proper line breaks between consecutive text lines.

Changes:
- Render each line in a span with <br /> between consecutive lines
- Remove unused useMemo import and fix React hooks violation
- Simplify logic for better maintainability

This ensures that multi-line messages in chat (and other text content)
display correctly with proper line breaks.

Fixes rendering of newlines in NIP-29 groups and NIP-53 live chat.
---
 src/components/nostr/RichText/Text.tsx | 36 ++++++++++++--------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/nostr/RichText/Text.tsx b/src/components/nostr/RichText/Text.tsx
index 12a03eb..7ac4823 100644
--- a/src/components/nostr/RichText/Text.tsx
+++ b/src/components/nostr/RichText/Text.tsx
@@ -1,5 +1,4 @@
 import { CommonData } from "applesauce-content/nast";
-import { useMemo } from "react";
 
 interface TextNodeProps {
   node: {
@@ -11,23 +10,22 @@ interface TextNodeProps {
 
 export function Text({ node }: TextNodeProps) {
   const text = node.value;
-  const lines = useMemo(() => text.split("\n"), [text]);
-  if (text.includes("\n")) {
-    return (
-      <>
-        {lines.map((line, idx) =>
-          line.trim().length === 0 ? (
-            <br />
-          ) : idx === 0 || idx === lines.length - 1 ? (
-            <span dir="auto">{line}</span> // FIXME: this should be span or div depnding on context
-          ) : (
-            <div dir="auto" key={idx}>
-              {line}
-            </div>
-          ),
-        )}
-      </>
-    );
+
+  // If no newlines, render as simple span
+  if (!text.includes("\n")) {
+    return <span dir="auto">{text}</span>;
   }
-  return <span dir="auto">{text}</span>;
+
+  // Multi-line text: split and render with <br /> between lines
+  const lines = text.split("\n");
+  return (
+    <>
+      {lines.map((line, idx) => (
+        <span key={idx} dir="auto">
+          {line}
+          {idx < lines.length - 1 && <br />}
+        </span>
+      ))}
+    </>
+  );
 }