@dust-tt/sparkle 0.2.645 → 0.2.646-rc-2

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,31 +9,43 @@ 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",
-};
+import { useAnimatedText } from "./useAnimatedText";
 
 const sizes = {
   p: "s-copy-sm @sm:s-text-base @sm:s-leading-7",
@@ -56,6 +67,7 @@ function showUnsupportedDirective() {
 export function Markdown({
   content,
   isStreaming = false,
+  shouldHaveStreamingAnimation = false,
   textColor = "s-text-foreground dark:s-text-foreground-night",
   forcedTextSize,
   isLastMessage = false,
@@ -64,6 +76,7 @@ export function Markdown({
 }: {
   content: string;
   isStreaming?: boolean;
+  shouldHaveStreamingAnimation?: boolean;
   textColor?: string;
   isLastMessage?: boolean;
   forcedTextSize?: string;
@@ -72,6 +85,11 @@ export function Markdown({
 }) {
   const processedContent = useMemo(() => sanitizeContent(content), [content]);
 
+  const markdownContent = useAnimatedText(
+    processedContent,
+    isStreaming && shouldHaveStreamingAnimation
+  );
+
   // Note on re-renderings. A lot of effort has been put into preventing rerendering across markdown
   // AST parsing rounds (happening at each token being streamed).
   //
@@ -89,123 +107,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>
-      ),
-      strong: ({ children }) => (
-        <strong className="s-font-semibold s-text-foreground dark:s-text-foreground-night">
-          {children}
-        </strong>
+        </MemoH6Block>
       ),
-      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]);
@@ -225,7 +233,7 @@ export function Markdown({
 
   try {
     return (
-      <div className={cn("s-w-full", isStreaming ? "s-blinking-cursor" : "")}>
+      <div className={cn("s-w-full")}>
         <MarkdownContentContext.Provider
           value={{
             content: processedContent,
@@ -239,14 +247,14 @@ export function Markdown({
             remarkPlugins={markdownPlugins}
             rehypePlugins={rehypePlugins}
           >
-            {processedContent}
+            {markdownContent}
           </ReactMarkdown>
         </MarkdownContentContext.Provider>
       </div>
     );
   } catch (error) {
     return (
-      <div className={cn("s-w-full", isStreaming ? "s-blinking-cursor" : "")}>
+      <div className={cn("s-w-full")}>
         <Chip color="warning">
           There was an error parsing this markdown content
         </Chip>
@@ -255,74 +263,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";