@dust-tt/sparkle 0.2.646-rc-4 → 0.2.646

package/src/components/markdown/Markdown.tsx

@@ -2,6 +2,7 @@
 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";
@@ -9,43 +10,31 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import { visit } from "unist-util-visit";
 
-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 { 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 { MarkdownContentContext } from "@sparkle/components/markdown/MarkdownContentContext";
-import { MemoParagraphBlock } from "@sparkle/components/markdown/ParagraphBlock";
-import { MemoPreBlock } from "@sparkle/components/markdown/PreBlock";
+import { ParagraphBlock } from "@sparkle/components/markdown/ParagraphBlock";
+import { PreBlock } from "@sparkle/components/markdown/PreBlock";
 import {
-  MemoTableBlock,
-  MemoTableBodyBlock,
-  MemoTableDataBlock,
-  MemoTableHeadBlock,
-  MemoTableHeaderBlock,
+  TableBlock,
+  TableBodyBlock,
+  TableDataBlock,
+  TableHeadBlock,
+  TableHeaderBlock,
 } 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";
 
-import { useAnimatedText } from "./useAnimatedText";
+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",
@@ -67,7 +56,6 @@ function showUnsupportedDirective() {
 export function Markdown({
   content,
   isStreaming = false,
-  shouldHaveStreamingAnimation = false,
   textColor = "s-text-foreground dark:s-text-foreground-night",
   forcedTextSize,
   isLastMessage = false,
@@ -76,7 +64,6 @@ export function Markdown({
 }: {
   content: string;
   isStreaming?: boolean;
-  shouldHaveStreamingAnimation?: boolean;
   textColor?: string;
   isLastMessage?: boolean;
   forcedTextSize?: string;
@@ -85,11 +72,6 @@ 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).
   //
@@ -107,113 +89,123 @@ export function Markdown({
   // Memoize markdown components to avoid unnecessary re-renders that disrupt text selection
   const markdownComponents: Components = useMemo(() => {
     return {
-      pre: ({ children, node }) => (
-        <MemoPreBlock node={node}>{children}</MemoPreBlock>
-      ),
-      a: MemoLinkBlock,
-      ul: ({ children, node }) => (
-        <MemoUlBlock
+      pre: ({ children }) => <PreBlock>{children}</PreBlock>,
+      a: LinkBlock,
+      ul: ({ children }) => (
+        <UlBlock
           textSize={forcedTextSize ? forcedTextSize : sizes.p}
           textColor={textColor}
-          node={node}
         >
           {children}
-        </MemoUlBlock>
+        </UlBlock>
       ),
-      ol: ({ children, start, node }) => (
-        <MemoOlBlock
+      ol: ({ children, start }) => (
+        <OlBlock
           start={start}
           textColor={textColor}
           textSize={forcedTextSize ? forcedTextSize : sizes.p}
-          node={node}
         >
           {children}
-        </MemoOlBlock>
+        </OlBlock>
       ),
-      li: ({ children, node }) => (
-        <MemoLiBlock
+      li: ({ children }) => (
+        <LiBlock
           textColor={textColor}
           textSize={forcedTextSize ? forcedTextSize : sizes.p}
-          node={node}
         >
           {children}
-        </MemoLiBlock>
+        </LiBlock>
       ),
-      p: ({ children, node }) => (
-        <MemoParagraphBlock
+      p: ({ children }) => (
+        <ParagraphBlock
           textColor={textColor}
           textSize={forcedTextSize ? forcedTextSize : sizes.p}
-          node={node}
         >
           {children}
-        </MemoParagraphBlock>
+        </ParagraphBlock>
       ),
-      table: MemoTableBlock,
-      thead: MemoTableHeadBlock,
-      tbody: MemoTableBodyBlock,
-      th: MemoTableHeaderBlock,
-      td: MemoTableDataBlock,
-      h1: ({ children, node }) => (
-        <MemoH1Block
-          textColor={textColor}
-          forcedTextSize={forcedTextSize}
-          node={node}
+      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
+          )}
         >
           {children}
-        </MemoH1Block>
+        </h1>
       ),
-      h2: ({ children, node }) => (
-        <MemoH2Block
-          textColor={textColor}
-          forcedTextSize={forcedTextSize}
-          node={node}
+      h2: ({ children }) => (
+        <h2
+          className={cn(
+            "s-pb-2 s-pt-4",
+            forcedTextSize ? forcedTextSize : sizes.h2,
+            textColor
+          )}
         >
           {children}
-        </MemoH2Block>
+        </h2>
       ),
-      h3: ({ children, node }) => (
-        <MemoH3Block
-          textColor={textColor}
-          forcedTextSize={forcedTextSize}
-          node={node}
+      h3: ({ children }) => (
+        <h3
+          className={cn(
+            "s-pb-2 s-pt-4",
+            forcedTextSize ? forcedTextSize : sizes.h3,
+            textColor
+          )}
         >
           {children}
-        </MemoH3Block>
+        </h3>
       ),
-      h4: ({ children, node }) => (
-        <MemoH4Block
-          textColor={textColor}
-          forcedTextSize={forcedTextSize}
-          node={node}
+      h4: ({ children }) => (
+        <h4
+          className={cn(
+            "s-pb-2 s-pt-3",
+            forcedTextSize ? forcedTextSize : sizes.h4,
+            textColor
+          )}
         >
           {children}
-        </MemoH4Block>
+        </h4>
       ),
-      h5: ({ children, node }) => (
-        <MemoH5Block
-          textColor={textColor}
-          forcedTextSize={forcedTextSize}
-          node={node}
+      h5: ({ children }) => (
+        <h5
+          className={cn(
+            "s-pb-1.5 s-pt-2.5",
+            forcedTextSize ? forcedTextSize : sizes.h5,
+            textColor
+          )}
         >
           {children}
-        </MemoH5Block>
+        </h5>
       ),
-      h6: ({ children, node }) => (
-        <MemoH6Block
-          textColor={textColor}
-          forcedTextSize={forcedTextSize}
-          node={node}
+      h6: ({ children }) => (
+        <h6
+          className={cn(
+            "s-pb-1.5 s-pt-2.5",
+            forcedTextSize ? forcedTextSize : sizes.h6,
+            textColor
+          )}
         >
           {children}
-        </MemoH6Block>
+        </h6>
+      ),
+      strong: ({ children }) => (
+        <strong className="s-font-semibold s-text-foreground dark:s-text-foreground-night">
+          {children}
+        </strong>
       ),
-      strong: ({ children, node }) => (
-        <MemoStrongBlock node={node}>{children}</MemoStrongBlock>
+      input: Input,
+      blockquote: BlockquoteBlock,
+      hr: () => (
+        <div className="s-my-6 s-border-b s-border-primary-150 dark:s-border-primary-150-night" />
       ),
-      input: MemoInputBlock,
-      blockquote: MemoBlockquoteBlock,
-      hr: MemoHorizontalRuleBlock,
-      code: MemoCodeBlockWithExtendedSupport,
+      code: CodeBlockWithExtendedSupport,
       ...additionalMarkdownComponents,
     };
   }, [textColor, additionalMarkdownComponents]);
@@ -233,7 +225,7 @@ export function Markdown({
 
   try {
     return (
-      <div className={cn("s-w-full")}>
+      <div className={cn("s-w-full", isStreaming ? "s-blinking-cursor" : "")}>
         <MarkdownContentContext.Provider
           value={{
             content: processedContent,
@@ -247,14 +239,14 @@ export function Markdown({
             remarkPlugins={markdownPlugins}
             rehypePlugins={rehypePlugins}
           >
-            {markdownContent}
+            {processedContent}
           </ReactMarkdown>
         </MarkdownContentContext.Provider>
       </div>
     );
   } catch (error) {
     return (
-      <div className={cn("s-w-full")}>
+      <div className={cn("s-w-full", isStreaming ? "s-blinking-cursor" : "")}>
         <Chip color="warning">
           There was an error parsing this markdown content
         </Chip>
@@ -263,3 +255,74 @@ 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,11 +1,8 @@
 import { cva } from "class-variance-authority";
-import React, { memo } from "react";
+import React 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",
@@ -15,19 +12,16 @@ interface ParagraphBlockProps {
   children: React.ReactNode;
   textColor: string;
   textSize: string;
-  node?: MarkdownNode;
 }
 
-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";
+export function ParagraphBlock({
+  children,
+  textColor,
+  textSize,
+}: ParagraphBlockProps) {
+  return (
+    <div className={cn(paragraphBlockVariants(), textSize, textColor)}>
+      {children}
+    </div>
+  );
+}

package/src/components/markdown/PreBlock.tsx

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