Add 10px bottom padding to paragraph tags in markdown rendering (#8440)

Co-authored-by: openhands <openhands@all-hands.dev>

frontend/src/components/features/chat/chat-message.tsx

@@ -6,6 +6,7 @@ import { cn } from "#/utils/utils";
 import { ul, ol } from "../markdown/list";
 import { CopyToClipboardButton } from "#/components/shared/buttons/copy-to-clipboard-button";
 import { anchor } from "../markdown/anchor";
+import { paragraph } from "../markdown/paragraph";
 
 interface ChatMessageProps {
   type: "user" | "assistant";
@@ -64,6 +65,7 @@ export function ChatMessage({
             ul,
             ol,
             a: anchor,
+            p: paragraph,
           }}
           remarkPlugins={[remarkGfm]}
         >

frontend/src/components/features/chat/expandable-message.tsx

@@ -15,6 +15,7 @@ import { OpenHandsObservation } from "#/types/core/observations";
 import { cn } from "#/utils/utils";
 import { code } from "../markdown/code";
 import { ol, ul } from "../markdown/list";
+import { paragraph } from "../markdown/paragraph";
 import { MonoComponent } from "./mono-component";
 import { PathComponent } from "./path-component";
 
@@ -196,6 +197,7 @@ export function ExpandableMessage({
                 code,
                 ul,
                 ol,
+                p: paragraph,
               }}
               remarkPlugins={[remarkGfm]}
             >

frontend/src/components/features/jupyter/jupyter-cell-output.tsx

@@ -4,6 +4,7 @@ import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
 import { JupyterLine } from "#/utils/parse-cell-content";
+import { paragraph } from "../markdown/paragraph";
 
 interface JupyterCellOutputProps {
   lines: JupyterLine[];
@@ -25,7 +26,12 @@ export function JupyterCellOutput({ lines }: JupyterCellOutputProps) {
           if (line.type === "image") {
             return (
               <div key={index}>
-                <Markdown urlTransform={(value: string) => value}>
+                <Markdown
+                  components={{
+                    p: paragraph,
+                  }}
+                  urlTransform={(value: string) => value}
+                >
                   {line.content}
                 </Markdown>
               </div>

frontend/src/components/features/markdown/paragraph.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { ExtraProps } from "react-markdown";
+
+// Custom component to render <p> in markdown with bottom padding
+export function paragraph({
+  children,
+}: React.ClassAttributes<HTMLParagraphElement> &
+  React.HTMLAttributes<HTMLParagraphElement> &
+  ExtraProps) {
+  return <p className="pb-[10px]">{children}</p>;
+}