@dust-tt/sparkle 0.2.644 → 0.2.646-rc-1

package/src/components/markdown/Markdown.tsx

@@ -2,7 +2,6 @@
 import React, { useMemo } from "react";
 import type { Components } from "react-markdown";
 import ReactMarkdown from "react-markdown";
-import type { ReactMarkdownProps } from "react-markdown/lib/ast-to-react";
 import type { PluggableList } from "react-markdown/lib/react-markdown";
 import rehypeKatex from "rehype-katex";
 import remarkDirective from "remark-directive";
@@ -10,32 +9,42 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import { visit } from "unist-util-visit";
 
-import { Checkbox, Chip } from "@sparkle/components";
-import { BlockquoteBlock } from "@sparkle/components/markdown/BlockquoteBlock";
-import { CodeBlockWithExtendedSupport } from "@sparkle/components/markdown/CodeBlockWithExtendedSupport";
-import { LiBlock, OlBlock, UlBlock } from "@sparkle/components/markdown/List";
+import { Chip } from "@sparkle/components";
+import { MemoBlockquoteBlock } from "@sparkle/components/markdown/BlockquoteBlock";
+import { MemoCodeBlockWithExtendedSupport } from "@sparkle/components/markdown/CodeBlockWithExtendedSupport";
+import {
+  markdownHeaderClasses,
+  MemoH1Block,
+  MemoH2Block,
+  MemoH3Block,
+  MemoH4Block,
+  MemoH5Block,
+  MemoH6Block,
+} from "@sparkle/components/markdown/HeaderBlocks";
+import { MemoInputBlock } from "@sparkle/components/markdown/InputBlock";
+import { MemoLinkBlock } from "@sparkle/components/markdown/LinkBlock";
+import {
+  MemoLiBlock,
+  MemoOlBlock,
+  MemoUlBlock,
+} from "@sparkle/components/markdown/List";
 import { MarkdownContentContext } from "@sparkle/components/markdown/MarkdownContentContext";
-import { ParagraphBlock } from "@sparkle/components/markdown/ParagraphBlock";
-import { PreBlock } from "@sparkle/components/markdown/PreBlock";
+import { MemoParagraphBlock } from "@sparkle/components/markdown/ParagraphBlock";
+import { MemoPreBlock } from "@sparkle/components/markdown/PreBlock";
 import {
-  TableBlock,
-  TableBodyBlock,
-  TableDataBlock,
-  TableHeadBlock,
-  TableHeaderBlock,
+  MemoTableBlock,
+  MemoTableBodyBlock,
+  MemoTableDataBlock,
+  MemoTableHeadBlock,
+  MemoTableHeaderBlock,
 } from "@sparkle/components/markdown/TableBlock";
+import {
+  MemoHorizontalRuleBlock,
+  MemoStrongBlock,
+} from "@sparkle/components/markdown/TextFormattingBlocks";
 import { sanitizeContent } from "@sparkle/components/markdown/utils";
 import { cn } from "@sparkle/lib/utils";
 
-export const markdownHeaderClasses = {
-  h1: "s-heading-2xl",
-  h2: "s-heading-xl",
-  h3: "s-heading-lg",
-  h4: "s-text-base s-font-semibold",
-  h5: "s-text-sm s-font-semibold",
-  h6: "s-text-sm s-font-regular s-italic",
-};
-
 const sizes = {
   p: "s-copy-sm @sm:s-text-base @sm:s-leading-7",
   ...markdownHeaderClasses,
@@ -89,123 +98,113 @@ export function Markdown({
   // Memoize markdown components to avoid unnecessary re-renders that disrupt text selection
   const markdownComponents: Components = useMemo(() => {
     return {
-      pre: ({ children }) => <PreBlock>{children}</PreBlock>,
-      a: LinkBlock,
-      ul: ({ children }) => (
-        <UlBlock
+      pre: ({ children, node }) => (
+        <MemoPreBlock node={node}>{children}</MemoPreBlock>
+      ),
+      a: MemoLinkBlock,
+      ul: ({ children, node }) => (
+        <MemoUlBlock
           textSize={forcedTextSize ? forcedTextSize : sizes.p}
           textColor={textColor}
+          node={node}
         >
           {children}
-        </UlBlock>
+        </MemoUlBlock>
       ),
-      ol: ({ children, start }) => (
-        <OlBlock
+      ol: ({ children, start, node }) => (
+        <MemoOlBlock
           start={start}
           textColor={textColor}
           textSize={forcedTextSize ? forcedTextSize : sizes.p}
+          node={node}
         >
           {children}
-        </OlBlock>
+        </MemoOlBlock>
       ),
-      li: ({ children }) => (
-        <LiBlock
+      li: ({ children, node }) => (
+        <MemoLiBlock
           textColor={textColor}
           textSize={forcedTextSize ? forcedTextSize : sizes.p}
+          node={node}
         >
           {children}
-        </LiBlock>
+        </MemoLiBlock>
       ),
-      p: ({ children }) => (
-        <ParagraphBlock
+      p: ({ children, node }) => (
+        <MemoParagraphBlock
           textColor={textColor}
           textSize={forcedTextSize ? forcedTextSize : sizes.p}
+          node={node}
         >
           {children}
-        </ParagraphBlock>
+        </MemoParagraphBlock>
       ),
-      table: TableBlock,
-      thead: TableHeadBlock,
-      tbody: TableBodyBlock,
-      th: TableHeaderBlock,
-      td: TableDataBlock,
-      h1: ({ children }) => (
-        <h1
-          className={cn(
-            "s-pb-2 s-pt-4",
-            forcedTextSize ? forcedTextSize : sizes.h1,
-            textColor
-          )}
+      table: MemoTableBlock,
+      thead: MemoTableHeadBlock,
+      tbody: MemoTableBodyBlock,
+      th: MemoTableHeaderBlock,
+      td: MemoTableDataBlock,
+      h1: ({ children, node }) => (
+        <MemoH1Block
+          textColor={textColor}
+          forcedTextSize={forcedTextSize}
+          node={node}
         >
           {children}
-        </h1>
+        </MemoH1Block>
       ),
-      h2: ({ children }) => (
-        <h2
-          className={cn(
-            "s-pb-2 s-pt-4",
-            forcedTextSize ? forcedTextSize : sizes.h2,
-            textColor
-          )}
+      h2: ({ children, node }) => (
+        <MemoH2Block
+          textColor={textColor}
+          forcedTextSize={forcedTextSize}
+          node={node}
         >
           {children}
-        </h2>
+        </MemoH2Block>
       ),
-      h3: ({ children }) => (
-        <h3
-          className={cn(
-            "s-pb-2 s-pt-4",
-            forcedTextSize ? forcedTextSize : sizes.h3,
-            textColor
-          )}
+      h3: ({ children, node }) => (
+        <MemoH3Block
+          textColor={textColor}
+          forcedTextSize={forcedTextSize}
+          node={node}
         >
           {children}
-        </h3>
+        </MemoH3Block>
       ),
-      h4: ({ children }) => (
-        <h4
-          className={cn(
-            "s-pb-2 s-pt-3",
-            forcedTextSize ? forcedTextSize : sizes.h4,
-            textColor
-          )}
+      h4: ({ children, node }) => (
+        <MemoH4Block
+          textColor={textColor}
+          forcedTextSize={forcedTextSize}
+          node={node}
         >
           {children}
-        </h4>
+        </MemoH4Block>
       ),
-      h5: ({ children }) => (
-        <h5
-          className={cn(
-            "s-pb-1.5 s-pt-2.5",
-            forcedTextSize ? forcedTextSize : sizes.h5,
-            textColor
-          )}
+      h5: ({ children, node }) => (
+        <MemoH5Block
+          textColor={textColor}
+          forcedTextSize={forcedTextSize}
+          node={node}
         >
           {children}
-        </h5>
+        </MemoH5Block>
       ),
-      h6: ({ children }) => (
-        <h6
-          className={cn(
-            "s-pb-1.5 s-pt-2.5",
-            forcedTextSize ? forcedTextSize : sizes.h6,
-            textColor
-          )}
+      h6: ({ children, node }) => (
+        <MemoH6Block
+          textColor={textColor}
+          forcedTextSize={forcedTextSize}
+          node={node}
         >
           {children}
-        </h6>
+        </MemoH6Block>
       ),
-      strong: ({ children }) => (
-        <strong className="s-font-semibold s-text-foreground dark:s-text-foreground-night">
-          {children}
-        </strong>
-      ),
-      input: Input,
-      blockquote: BlockquoteBlock,
-      hr: () => (
-        <div className="s-my-6 s-border-b s-border-primary-150 dark:s-border-primary-150-night" />
+      strong: ({ children, node }) => (
+        <MemoStrongBlock node={node}>{children}</MemoStrongBlock>
       ),
-      code: CodeBlockWithExtendedSupport,
+      input: MemoInputBlock,
+      blockquote: MemoBlockquoteBlock,
+      hr: MemoHorizontalRuleBlock,
+      code: MemoCodeBlockWithExtendedSupport,
       ...additionalMarkdownComponents,
     };
   }, [textColor, additionalMarkdownComponents]);
@@ -255,74 +254,3 @@ export function Markdown({
     );
   }
 }
-
-function LinkBlock({
-  href,
-  children,
-}: {
-  href?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <a
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      className={cn(
-        "s-break-all s-font-semibold s-transition-all s-duration-200 s-ease-in-out hover:s-underline",
-        "s-text-highlight dark:s-text-highlight-night",
-        "hover:s-text-highlight-400 dark:hover:s-text-highlight-400-night",
-        "active:s-text-highlight-dark dark:active:s-text-highlight-dark-night"
-      )}
-    >
-      {children}
-    </a>
-  );
-}
-
-type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "ref"> &
-  ReactMarkdownProps & {
-    ref?: React.Ref<HTMLInputElement>;
-  };
-
-function Input({
-  type,
-  checked,
-  className,
-  onChange,
-  ref,
-  ...props
-}: InputProps) {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-  React.useImperativeHandle(ref, () => inputRef.current!);
-
-  if (type !== "checkbox") {
-    return (
-      <input
-        ref={inputRef}
-        type={type}
-        checked={checked}
-        className={className}
-        {...props}
-      />
-    );
-  }
-
-  const handleCheckedChange = (isChecked: boolean) => {
-    onChange?.({
-      target: { type: "checkbox", checked: isChecked },
-    } as React.ChangeEvent<HTMLInputElement>);
-  };
-
-  return (
-    <div className="s-inline-flex s-items-center">
-      <Checkbox
-        ref={inputRef as React.Ref<HTMLButtonElement>}
-        size="xs"
-        checked={checked}
-        className="s-translate-y-[3px]"
-        onCheckedChange={handleCheckedChange}
-      />
-    </div>
-  );
-}

package/src/components/markdown/ParagraphBlock.tsx

@@ -1,8 +1,11 @@
 import { cva } from "class-variance-authority";
-import React from "react";
+import React, { memo } from "react";
 
 import { cn } from "@sparkle/lib";
 
+import { MarkdownNode } from "./types";
+import { sameNodePosition, sameTextStyling } from "./utils";
+
 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",
@@ -12,16 +15,19 @@ interface ParagraphBlockProps {
   children: React.ReactNode;
   textColor: string;
   textSize: string;
+  node?: MarkdownNode;
 }
 
-export function ParagraphBlock({
-  children,
-  textColor,
-  textSize,
-}: ParagraphBlockProps) {
-  return (
-    <div className={cn(paragraphBlockVariants(), textSize, textColor)}>
-      {children}
-    </div>
-  );
-}
+export const MemoParagraphBlock = memo(
+  ({ children, textColor, textSize }: ParagraphBlockProps) => {
+    return (
+      <div className={cn(paragraphBlockVariants(), textSize, textColor)}>
+        {children}
+      </div>
+    );
+  },
+  (prev, next) =>
+    sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next)
+);
+
+MemoParagraphBlock.displayName = "ParagraphBlock";

package/src/components/markdown/PreBlock.tsx

@@ -1,5 +1,8 @@
 import { cva } from "class-variance-authority";
-import React from "react";
+import React, { memo } from "react";
+
+import { MarkdownNode } from "./types";
+import { sameNodePosition } from "./utils";
 
 export const preBlockVariants = cva(
   [
@@ -18,25 +21,32 @@ export const preBlockVariants = cva(
 interface PreBlockProps {
   children: React.ReactNode;
   variant?: "surface";
+  node?: MarkdownNode;
 }
 
-export function PreBlock({ children, variant = "surface" }: PreBlockProps) {
-  const validChildrenContent =
-    Array.isArray(children) && children[0]
-      ? children[0].props.children[0]
-      : null;
-
-  let fallbackData: string | null = null;
-  if (!validChildrenContent) {
-    fallbackData =
+export const MemoPreBlock = memo(
+  ({ children, variant = "surface" }: PreBlockProps) => {
+    const validChildrenContent =
       Array.isArray(children) && children[0]
-        ? children[0].props?.node?.data?.meta
+        ? children[0].props.children[0]
         : null;
-  }
 
-  return (
-    <pre className={preBlockVariants({ variant })}>
-      {validChildrenContent ? children : fallbackData || children}
-    </pre>
-  );
-}
+    let fallbackData: string | null = null;
+    if (!validChildrenContent) {
+      fallbackData =
+        Array.isArray(children) && children[0]
+          ? children[0].props?.node?.data?.meta
+          : null;
+    }
+
+    return (
+      <pre className={preBlockVariants({ variant })}>
+        {validChildrenContent ? children : fallbackData || children}
+      </pre>
+    );
+  },
+  (prev, next) =>
+    sameNodePosition(prev.node, next.node) && prev.variant === next.variant
+);
+
+MemoPreBlock.displayName = "PreBlock";

package/src/components/markdown/TableBlock.tsx

@@ -1,9 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { ReactNode, useMemo } from "react";
+import React, { memo, ReactNode, useMemo } from "react";
 
 import { ScrollArea, ScrollBar } from "@sparkle/components";
 import { ContentBlockWrapper } from "@sparkle/components/markdown/ContentBlockWrapper";
 
+import { MarkdownNode } from "./types";
+import { sameNodePosition } from "./utils";
+
 const getNodeText = (node: ReactNode): string => {
   if (["string", "number"].includes(typeof node)) {
     return node as string;
@@ -18,100 +21,127 @@ const getNodeText = (node: ReactNode): string => {
   return "";
 };
 
-export function TableBlock({ children }: { children: React.ReactNode }) {
-  const tableData = useMemo(() => {
-    const [headNode, bodyNode] = Array.from(children as [any, any]);
-    if (
-      !headNode ||
-      !bodyNode ||
-      !("props" in headNode) ||
-      !("props" in bodyNode)
-    ) {
-      return;
-    }
-
-    const headCells = headNode.props.children[0].props.children.map((c: any) =>
-      getNodeText(c.props.children)
+export const MemoTableBlock = memo(
+  ({ children }: { children: React.ReactNode; node?: MarkdownNode }) => {
+    const tableData = useMemo(() => {
+      const [headNode, bodyNode] = Array.from(children as [any, any]);
+      if (
+        !headNode ||
+        !bodyNode ||
+        !("props" in headNode) ||
+        !("props" in bodyNode)
+      ) {
+        return;
+      }
+
+      const headCells = headNode.props.children[0].props.children.map(
+        (c: any) => getNodeText(c.props.children)
+      );
+
+      const headHtml = `<thead><tr>${headCells
+        .map((c: any) => `<th><b>${c}</b></th>`)
+        .join("")}</tr></thead>`;
+      const headPlain = headCells.join("\t");
+
+      const bodyRows = bodyNode.props.children.map((row: any) =>
+        row.props.children.map((cell: any) => {
+          const children = cell.props.children;
+          return (Array.isArray(children) ? children : [children])
+            .map((child: any) =>
+              child?.type?.name === "CiteBlock" ? "" : getNodeText(child)
+            )
+            .join("");
+        })
+      );
+      const bodyHtml = `<tbody>${bodyRows
+        .map((row: any) => {
+          return `<tr>${row
+            .map((cell: any) => `<td>${cell}</td>`)
+            .join("")}</tr>`;
+        })
+        .join("")}</tbody>`;
+      const bodyPlain = bodyRows.map((row: any) => row.join("\t")).join("\n");
+
+      return {
+        "text/html": `<table>${headHtml}${bodyHtml}</table>`,
+        "text/plain": headPlain + "\n" + bodyPlain,
+      };
+    }, [children]);
+
+    return (
+      <ContentBlockWrapper
+        innerClassName="s-relative s-my-2 s-w-full s-border s-border-border dark:s-border-border-night s-rounded-2xl"
+        content={tableData}
+      >
+        <ScrollArea className="s-w-full s-rounded-2xl">
+          <table className="s-w-full">{children}</table>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+      </ContentBlockWrapper>
     );
+  },
+  (prev, next) => sameNodePosition(prev.node, next.node)
+);
 
-    const headHtml = `<thead><tr>${headCells
-      .map((c: any) => `<th><b>${c}</b></th>`)
-      .join("")}</tr></thead>`;
-    const headPlain = headCells.join("\t");
-
-    const bodyRows = bodyNode.props.children.map((row: any) =>
-      row.props.children.map((cell: any) => {
-        const children = cell.props.children;
-        return (Array.isArray(children) ? children : [children])
-          .map((child: any) =>
-            child?.type?.name === "CiteBlock" ? "" : getNodeText(child)
-          )
-          .join("");
-      })
+MemoTableBlock.displayName = "TableBlock";
+
+export const MemoTableHeadBlock = memo(
+  ({ children }: { children: React.ReactNode; node?: MarkdownNode }) => {
+    return (
+      <thead className="s-bg-muted-background s-px-2 s-py-2 dark:s-bg-muted-background-night">
+        {children}
+      </thead>
     );
-    const bodyHtml = `<tbody>${bodyRows
-      .map((row: any) => {
-        return `<tr>${row
-          .map((cell: any) => `<td>${cell}</td>`)
-          .join("")}</tr>`;
-      })
-      .join("")}</tbody>`;
-    const bodyPlain = bodyRows.map((row: any) => row.join("\t")).join("\n");
-
-    return {
-      "text/html": `<table>${headHtml}${bodyHtml}</table>`,
-      "text/plain": headPlain + "\n" + bodyPlain,
-    };
-  }, [children]);
-
-  return (
-    <ContentBlockWrapper
-      innerClassName="s-relative s-my-2 s-w-full s-border s-border-border dark:s-border-border-night s-rounded-2xl"
-      content={tableData}
-    >
-      <ScrollArea className="s-w-full s-rounded-2xl">
-        <table className="s-w-full">{children}</table>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-    </ContentBlockWrapper>
-  );
-}
-
-export function TableHeadBlock({ children }: { children: React.ReactNode }) {
-  return (
-    <thead className="s-bg-muted-background s-px-2 s-py-2 dark:s-bg-muted-background-night">
-      {children}
-    </thead>
-  );
-}
-
-export function TableBodyBlock({ children }: { children: React.ReactNode }) {
-  return (
-    <tbody className="s-bg-white dark:s-bg-background-night">{children}</tbody>
-  );
-}
-
-export function TableHeaderBlock({ children }: { children: React.ReactNode }) {
-  return (
-    <th className="s-truncate s-whitespace-nowrap s-break-words s-py-3.5 s-pl-4 s-text-left s-text-xs s-font-semibold s-text-muted-foreground dark:s-text-muted-foreground-night">
-      {children}
-    </th>
-  );
-}
-
-export function TableDataBlock({ children }: { children: React.ReactNode }) {
-  return (
-    <td className="s-px-4 s-py-3 s-text-sm s-text-foreground dark:s-text-foreground-night">
-      {Array.isArray(children) ? (
-        children.map((child: any, i) => {
-          if (child === "<br>") {
-            return <br key={i} />;
-          }
-          return <React.Fragment key={i}>{child}</React.Fragment>;
-        })
-      ) : (
-        <>{children}</>
-      )}
-    </td>
-  );
-}
+  },
+  (prev, next) => sameNodePosition(prev.node, next.node)
+);
+
+MemoTableHeadBlock.displayName = "TableHeadBlock";
+
+export const MemoTableBodyBlock = memo(
+  ({ children }: { children: React.ReactNode; node?: MarkdownNode }) => {
+    return (
+      <tbody className="s-bg-white dark:s-bg-background-night">
+        {children}
+      </tbody>
+    );
+  },
+  (prev, next) => sameNodePosition(prev.node, next.node)
+);
+
+MemoTableBodyBlock.displayName = "TableBodyBlock";
+
+export const MemoTableHeaderBlock = memo(
+  ({ children }: { children: React.ReactNode; node?: MarkdownNode }) => {
+    return (
+      <th className="s-truncate s-whitespace-nowrap s-break-words s-py-3.5 s-pl-4 s-text-left s-text-xs s-font-semibold s-text-muted-foreground dark:s-text-muted-foreground-night">
+        {children}
+      </th>
+    );
+  },
+  (prev, next) => sameNodePosition(prev.node, next.node)
+);
+
+MemoTableHeaderBlock.displayName = "TableHeaderBlock";
+
+export const MemoTableDataBlock = memo(
+  ({ children }: { children: React.ReactNode; node?: MarkdownNode }) => {
+    return (
+      <td className="s-px-4 s-py-3 s-text-sm s-text-foreground dark:s-text-foreground-night">
+        {Array.isArray(children) ? (
+          children.map((child: any, i) => {
+            if (child === "<br>") {
+              return <br key={i} />;
+            }
+            return <React.Fragment key={i}>{child}</React.Fragment>;
+          })
+        ) : (
+          <>{children}</>
+        )}
+      </td>
+    );
+  },
+  (prev, next) => sameNodePosition(prev.node, next.node)
+);
+
+MemoTableDataBlock.displayName = "TableDataBlock";