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

package/src/components/markdown/BlockquoteBlock.tsx

@@ -1,8 +1,11 @@
 import { cva } from "class-variance-authority";
-import React from "react";
+import React, { memo } from "react";
 
 import { ContentBlockWrapper } from "@sparkle/components";
 
+import { MarkdownNode } from "./types";
+import { sameNodePosition } from "./utils";
+
 export const blockquoteVariants = cva(
   ["s-w-full s-text-base s-italic s-rounded-2xl s-py-3 s-pl-5 s-pr-12"],
   {
@@ -20,33 +23,37 @@ export const blockquoteVariants = cva(
 interface BlockquoteBlockProps {
   children: React.ReactNode;
   variant?: "surface";
+  node?: MarkdownNode;
 }
 
-export function BlockquoteBlock({
-  children,
-  variant = "surface",
-}: BlockquoteBlockProps) {
-  const elementAt1 = React.Children.toArray(children)[1];
-  const childrenContent =
-    elementAt1 && React.isValidElement(elementAt1)
-      ? elementAt1.props.children
-      : null;
-
-  // Convert array content to string if necessary
-  const contentAsString = Array.isArray(childrenContent)
-    ? childrenContent.join("")
-    : childrenContent;
-
-  // Only pass content if it exists
-  const clipboardContent = contentAsString
-    ? { "text/plain": contentAsString }
-    : undefined;
-
-  return (
-    <ContentBlockWrapper content={clipboardContent} className="s-my-2">
-      <blockquote className={blockquoteVariants({ variant })}>
-        {children}
-      </blockquote>
-    </ContentBlockWrapper>
-  );
-}
+export const MemoBlockquoteBlock = memo(
+  ({ children, variant = "surface" }: BlockquoteBlockProps) => {
+    const elementAt1 = React.Children.toArray(children)[1];
+    const childrenContent =
+      elementAt1 && React.isValidElement(elementAt1)
+        ? elementAt1.props.children
+        : null;
+
+    // Convert array content to string if necessary
+    const contentAsString = Array.isArray(childrenContent)
+      ? childrenContent.join("")
+      : childrenContent;
+
+    // Only pass content if it exists
+    const clipboardContent = contentAsString
+      ? { "text/plain": contentAsString }
+      : undefined;
+
+    return (
+      <ContentBlockWrapper content={clipboardContent} className="s-my-2">
+        <blockquote className={blockquoteVariants({ variant })}>
+          {children}
+        </blockquote>
+      </ContentBlockWrapper>
+    );
+  },
+  (prev, next) =>
+    sameNodePosition(prev.node, next.node) && prev.variant === next.variant
+);
+
+MemoBlockquoteBlock.displayName = "BlockquoteBlock";

package/src/components/markdown/CodeBlockWithExtendedSupport.tsx

@@ -1,5 +1,5 @@
 import mermaid from "mermaid";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { memo, useContext, useEffect, useRef, useState } from "react";
 import {
   amber,
   blue,
@@ -25,6 +25,8 @@ import {
   JsonValueType,
   PrettyJsonViewer,
 } from "@sparkle/components/markdown/PrettyJsonViewer";
+import { MarkdownNode } from "@sparkle/components/markdown/types";
+import { sameNodePosition } from "@sparkle/components/markdown/utils";
 import { CommandLineIcon, SparklesIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib/utils";
 
@@ -313,150 +315,159 @@ export function StyledMermaidGraph({
   );
 }
 
-export function CodeBlockWithExtendedSupport({
-  children,
-  className,
-  inline,
-}: {
-  children?: React.ReactNode;
-  className?: string;
-  inline?: boolean;
-}) {
-  const validChildrenContent = String(children).trim();
-  const [showMermaid, setShowMermaid] = useState<boolean>(false);
-  const [isValidMermaid, setIsValidMermaid] = useState<boolean>(false);
-  const [showPrettyJson, setShowPrettyJson] = useState<boolean>(false);
-  const [parsedJson, setParsedJson] = useState<JsonValueType | null>(null);
-  const { isStreaming } = useContext(MarkdownContentContext);
-
-  // Detect language from className
-  const language = className?.split("-")[1];
-
-  // Only create getContentToDownload when we actually want to enable downloads
-  const getContentToDownload: GetContentToDownloadFunction | undefined =
-    !inline &&
-    validChildrenContent &&
-    (language === "csv" || language === "json")
-      ? async () => ({
-          content: validChildrenContent,
-          filename: `dust_output_${Date.now()}`,
-          type: language === "csv" ? "text/csv" : "application/json",
-        })
-      : undefined;
-
-  // Check for valid Mermaid and JSON.
-  useEffect(() => {
-    if (isStreaming || !validChildrenContent) {
-      return;
-    }
-    if (language === "mermaid") {
-      const checkValidMermaid = async () => {
+export const MemoCodeBlockWithExtendedSupport = memo(
+  ({
+    children,
+    className,
+    inline,
+  }: {
+    children?: React.ReactNode;
+    className?: string;
+    inline?: boolean;
+    node?: MarkdownNode;
+  }) => {
+    const validChildrenContent = String(children).trim();
+    const [showMermaid, setShowMermaid] = useState<boolean>(false);
+    const [isValidMermaid, setIsValidMermaid] = useState<boolean>(false);
+    const [showPrettyJson, setShowPrettyJson] = useState<boolean>(false);
+    const [parsedJson, setParsedJson] = useState<JsonValueType | null>(null);
+    const { isStreaming } = useContext(MarkdownContentContext);
+
+    // Detect language from className
+    const language = className?.split("-")[1];
+
+    // Only create getContentToDownload when we actually want to enable downloads
+    const getContentToDownload: GetContentToDownloadFunction | undefined =
+      !inline &&
+      validChildrenContent &&
+      (language === "csv" || language === "json")
+        ? async () => ({
+            content: validChildrenContent,
+            filename: `dust_output_${Date.now()}`,
+            type: language === "csv" ? "text/csv" : "application/json",
+          })
+        : undefined;
+
+    // Check for valid Mermaid and JSON.
+    useEffect(() => {
+      if (isStreaming || !validChildrenContent) {
+        return;
+      }
+      if (language === "mermaid") {
+        const checkValidMermaid = async () => {
+          try {
+            await mermaid.parse(validChildrenContent);
+            setIsValidMermaid(true);
+            setShowMermaid(true);
+          } catch (e) {
+            setIsValidMermaid(false);
+            setShowMermaid(false);
+          }
+        };
+        void checkValidMermaid();
+      }
+      if (language === "json") {
         try {
-          await mermaid.parse(validChildrenContent);
-          setIsValidMermaid(true);
-          setShowMermaid(true);
+          const parsed = JSON.parse(validChildrenContent);
+          setParsedJson(parsed);
+          const prettyJsonPreference = getPrettyJsonPreference();
+          setShowPrettyJson(prettyJsonPreference);
         } catch (e) {
-          setIsValidMermaid(false);
-          setShowMermaid(false);
+          setParsedJson(null);
+          setShowPrettyJson(false);
         }
-      };
-      void checkValidMermaid();
-    }
-    if (language === "json") {
-      try {
-        const parsed = JSON.parse(validChildrenContent);
-        setParsedJson(parsed);
-        const prettyJsonPreference = getPrettyJsonPreference();
-        setShowPrettyJson(prettyJsonPreference);
-      } catch (e) {
-        setParsedJson(null);
-        setShowPrettyJson(false);
       }
+    }, [isStreaming, language, validChildrenContent]);
+
+    if (inline) {
+      return (
+        <CodeBlock className={className} inline={inline}>
+          {children}
+        </CodeBlock>
+      );
     }
-  }, [isStreaming, language, validChildrenContent]);
 
-  if (inline) {
-    return (
-      <CodeBlock className={className} inline={inline}>
-        {children}
-      </CodeBlock>
-    );
-  }
+    if (isValidMermaid) {
+      return (
+        <ContentBlockWrapper
+          content={validChildrenContent}
+          getContentToDownload={getContentToDownload}
+          actions={
+            <Button
+              className="s-font-sans"
+              size="xs"
+              variant={"outline"}
+              label={showMermaid ? "Markdown" : "Mermaid"}
+              icon={showMermaid ? CommandLineIcon : SparklesIcon}
+              onClick={() => setShowMermaid(!showMermaid)}
+              tooltip={showMermaid ? "Switch to Markdown" : "Switch to Mermaid"}
+            />
+          }
+        >
+          {showMermaid ? (
+            <MermaidGraph chart={validChildrenContent} />
+          ) : (
+            <CodeBlock className={className} inline={inline}>
+              {children}
+            </CodeBlock>
+          )}
+        </ContentBlockWrapper>
+      );
+    }
 
-  if (isValidMermaid) {
-    return (
-      <ContentBlockWrapper
-        content={validChildrenContent}
-        getContentToDownload={getContentToDownload}
-        actions={
-          <Button
-            className="s-font-sans"
-            size="xs"
-            variant={"outline"}
-            label={showMermaid ? "Markdown" : "Mermaid"}
-            icon={showMermaid ? CommandLineIcon : SparklesIcon}
-            onClick={() => setShowMermaid(!showMermaid)}
-            tooltip={showMermaid ? "Switch to Markdown" : "Switch to Mermaid"}
-          />
-        }
-      >
-        {showMermaid ? (
-          <MermaidGraph chart={validChildrenContent} />
-        ) : (
-          <CodeBlock className={className} inline={inline}>
-            {children}
-          </CodeBlock>
-        )}
-      </ContentBlockWrapper>
-    );
-  }
+    if (parsedJson !== null) {
+      return (
+        <ContentBlockWrapper
+          content={validChildrenContent}
+          getContentToDownload={getContentToDownload}
+          actions={
+            <Button
+              className="s-font-sans"
+              size="xs"
+              variant={"outline"}
+              label={showPrettyJson ? "Raw JSON" : "Pretty JSON"}
+              icon={showPrettyJson ? CommandLineIcon : SparklesIcon}
+              onClick={() => {
+                const newValue = !showPrettyJson;
+                setShowPrettyJson(newValue);
+                setPrettyJsonPreference(newValue);
+              }}
+              tooltip={
+                showPrettyJson ? "Switch to Raw JSON" : "Switch to Pretty View"
+              }
+            />
+          }
+          displayActions="hover"
+          buttonDisplay="inside"
+        >
+          {showPrettyJson ? (
+            <PrettyJsonViewer data={parsedJson} />
+          ) : (
+            <CodeBlock className={className} inline={inline}>
+              {children}
+            </CodeBlock>
+          )}
+        </ContentBlockWrapper>
+      );
+    }
 
-  if (parsedJson !== null) {
     return (
       <ContentBlockWrapper
         content={validChildrenContent}
         getContentToDownload={getContentToDownload}
-        actions={
-          <Button
-            className="s-font-sans"
-            size="xs"
-            variant={"outline"}
-            label={showPrettyJson ? "Raw JSON" : "Pretty JSON"}
-            icon={showPrettyJson ? CommandLineIcon : SparklesIcon}
-            onClick={() => {
-              const newValue = !showPrettyJson;
-              setShowPrettyJson(newValue);
-              setPrettyJsonPreference(newValue);
-            }}
-            tooltip={
-              showPrettyJson ? "Switch to Raw JSON" : "Switch to Pretty View"
-            }
-          />
-        }
-        displayActions="hover"
         buttonDisplay="inside"
+        displayActions="hover"
       >
-        {showPrettyJson ? (
-          <PrettyJsonViewer data={parsedJson} />
-        ) : (
-          <CodeBlock className={className} inline={inline}>
-            {children}
-          </CodeBlock>
-        )}
+        <CodeBlock className={className} inline={inline}>
+          {children}
+        </CodeBlock>
       </ContentBlockWrapper>
     );
-  }
+  },
+  (prev, next) =>
+    sameNodePosition(prev.node, next.node) &&
+    prev.className === next.className &&
+    prev.inline === next.inline
+);
 
-  return (
-    <ContentBlockWrapper
-      content={validChildrenContent}
-      getContentToDownload={getContentToDownload}
-      buttonDisplay="inside"
-      displayActions="hover"
-    >
-      <CodeBlock className={className} inline={inline}>
-        {children}
-      </CodeBlock>
-    </ContentBlockWrapper>
-  );
-}
+MemoCodeBlockWithExtendedSupport.displayName = "CodeBlockWithExtendedSupport";

package/src/components/markdown/HeaderBlocks.tsx

@@ -0,0 +1,160 @@
+import React, { memo } from "react";
+
+import { cn } from "@sparkle/lib/utils";
+
+import { MarkdownNode } from "./types";
+import { sameNodePosition, sameTextStyling } from "./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",
+};
+
+interface HeaderBlockProps {
+  children: React.ReactNode;
+  textColor?: string;
+  forcedTextSize?: string;
+  node?: MarkdownNode;
+}
+
+export const MemoH1Block = memo(
+  ({ children, textColor, forcedTextSize }: HeaderBlockProps) => {
+    return (
+      <h1
+        className={cn(
+          "s-pb-2 s-pt-4",
+          forcedTextSize ? forcedTextSize : markdownHeaderClasses.h1,
+          textColor
+        )}
+      >
+        {children}
+      </h1>
+    );
+  },
+  (prev, next) => {
+    return (
+      sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next)
+    );
+  }
+);
+
+MemoH1Block.displayName = "H1Block";
+
+export const MemoH2Block = memo(
+  ({ children, textColor, forcedTextSize }: HeaderBlockProps) => {
+    return (
+      <h2
+        className={cn(
+          "s-pb-2 s-pt-4",
+          forcedTextSize ? forcedTextSize : markdownHeaderClasses.h2,
+          textColor
+        )}
+      >
+        {children}
+      </h2>
+    );
+  },
+  (prev, next) => {
+    return (
+      sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next)
+    );
+  }
+);
+
+MemoH2Block.displayName = "H2Block";
+
+export const MemoH3Block = memo(
+  ({ children, textColor, forcedTextSize }: HeaderBlockProps) => {
+    return (
+      <h3
+        className={cn(
+          "s-pb-2 s-pt-4",
+          forcedTextSize ? forcedTextSize : markdownHeaderClasses.h3,
+          textColor
+        )}
+      >
+        {children}
+      </h3>
+    );
+  },
+  (prev, next) => {
+    return (
+      sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next)
+    );
+  }
+);
+
+MemoH3Block.displayName = "H3Block";
+
+export const MemoH4Block = memo(
+  ({ children, textColor, forcedTextSize }: HeaderBlockProps) => {
+    return (
+      <h4
+        className={cn(
+          "s-pb-2 s-pt-3",
+          forcedTextSize ? forcedTextSize : markdownHeaderClasses.h4,
+          textColor
+        )}
+      >
+        {children}
+      </h4>
+    );
+  },
+  (prev, next) => {
+    return (
+      sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next)
+    );
+  }
+);
+
+MemoH4Block.displayName = "H4Block";
+
+export const MemoH5Block = memo(
+  ({ children, textColor, forcedTextSize }: HeaderBlockProps) => {
+    return (
+      <h5
+        className={cn(
+          "s-pb-1.5 s-pt-2.5",
+          forcedTextSize ? forcedTextSize : markdownHeaderClasses.h5,
+          textColor
+        )}
+      >
+        {children}
+      </h5>
+    );
+  },
+  (prev, next) => {
+    return (
+      sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next)
+    );
+  }
+);
+
+MemoH5Block.displayName = "H5Block";
+
+export const MemoH6Block = memo(
+  ({ children, textColor, forcedTextSize }: HeaderBlockProps) => {
+    return (
+      <h6
+        className={cn(
+          "s-pb-1.5 s-pt-2.5",
+          forcedTextSize ? forcedTextSize : markdownHeaderClasses.h6,
+          textColor
+        )}
+      >
+        {children}
+      </h6>
+    );
+  },
+  (prev, next) => {
+    return (
+      sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next)
+    );
+  }
+);
+
+MemoH6Block.displayName = "H6Block";

package/src/components/markdown/InputBlock.tsx

@@ -0,0 +1,60 @@
+import React, { memo } from "react";
+import type { ReactMarkdownProps } from "react-markdown/lib/ast-to-react";
+
+import { Checkbox } from "@sparkle/components";
+
+import { MarkdownNode } from "./types";
+import { sameNodePosition } from "./utils";
+
+type InputBlockProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "ref"
+> &
+  ReactMarkdownProps & {
+    ref?: React.Ref<HTMLInputElement>;
+    node?: MarkdownNode;
+  };
+
+export const MemoInputBlock = memo(
+  ({ type, checked, className, onChange, ref, ...props }: InputBlockProps) => {
+    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>
+    );
+  },
+  (prev, next) =>
+    sameNodePosition(prev.node, next.node) &&
+    prev.type === next.type &&
+    prev.checked === next.checked &&
+    prev.className === next.className
+);
+
+MemoInputBlock.displayName = "InputBlock";

package/src/components/markdown/LinkBlock.tsx

@@ -0,0 +1,36 @@
+import React, { memo } from "react";
+
+import { sameNodePosition } from "@sparkle/components/markdown/utils";
+import { cn } from "@sparkle/lib/utils";
+
+import { MarkdownNode } from "./types";
+
+interface LinkBlockProps {
+  href?: string;
+  children: React.ReactNode;
+  node?: MarkdownNode;
+}
+
+export const MemoLinkBlock = memo(
+  ({ href, children }: LinkBlockProps) => {
+    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>
+    );
+  },
+  (prev, next) =>
+    sameNodePosition(prev.node, next.node) && prev.href === next.href
+);
+
+MemoLinkBlock.displayName = "LinkBlock";