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

package/src/components/markdown/CodeBlockWithExtendedSupport.tsx

@@ -1,5 +1,5 @@
 import mermaid from "mermaid";
-import React, { memo, useContext, useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import {
   amber,
   blue,
@@ -25,8 +25,6 @@ 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";
 
@@ -315,159 +313,150 @@ export function StyledMermaidGraph({
   );
 }
 
-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") {
+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 () => {
         try {
-          const parsed = JSON.parse(validChildrenContent);
-          setParsedJson(parsed);
-          const prettyJsonPreference = getPrettyJsonPreference();
-          setShowPrettyJson(prettyJsonPreference);
+          await mermaid.parse(validChildrenContent);
+          setIsValidMermaid(true);
+          setShowMermaid(true);
         } catch (e) {
-          setParsedJson(null);
-          setShowPrettyJson(false);
+          setIsValidMermaid(false);
+          setShowMermaid(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 (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 (inline) {
+    return (
+      <CodeBlock className={className} inline={inline}>
+        {children}
+      </CodeBlock>
+    );
+  }
 
-    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 (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}
-        buttonDisplay="inside"
+        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"
       >
-        <CodeBlock className={className} inline={inline}>
-          {children}
-        </CodeBlock>
+        {showPrettyJson ? (
+          <PrettyJsonViewer data={parsedJson} />
+        ) : (
+          <CodeBlock className={className} inline={inline}>
+            {children}
+          </CodeBlock>
+        )}
       </ContentBlockWrapper>
     );
-  },
-  (prev, next) =>
-    sameNodePosition(prev.node, next.node) &&
-    prev.className === next.className &&
-    prev.inline === next.inline
-);
+  }
 
-MemoCodeBlockWithExtendedSupport.displayName = "CodeBlockWithExtendedSupport";
+  return (
+    <ContentBlockWrapper
+      content={validChildrenContent}
+      getContentToDownload={getContentToDownload}
+      buttonDisplay="inside"
+      displayActions="hover"
+    >
+      <CodeBlock className={className} inline={inline}>
+        {children}
+      </CodeBlock>
+    </ContentBlockWrapper>
+  );
+}

package/src/components/markdown/List.tsx

@@ -1,36 +1,21 @@
 import { cva } from "class-variance-authority";
-import React, { memo } from "react";
+import React from "react";
 
 import { cn } from "@sparkle/lib";
 
-import { sameNodePosition, sameTextStyling } from "./utils";
-
-type MarkdownPoint = { line?: number; column?: number };
-type MarkdownPosition = { start?: MarkdownPoint; end?: MarkdownPoint };
-type MarkdownNode = {
-  position?: MarkdownPosition;
-};
-
 export const ulBlockVariants = cva(["s-list-disc s-pb-2 s-pl-6"]);
 
 interface UlBlockProps {
   children: React.ReactNode;
   textColor: string;
   textSize: string;
-  node?: MarkdownNode;
 }
 
-export const MemoUlBlock = memo(
-  ({ children, textColor, textSize }: UlBlockProps) => {
-    return (
-      <ul className={cn(ulBlockVariants(), textColor, textSize)}>{children}</ul>
-    );
-  },
-  (prev, next) =>
-    sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next)
-);
-
-MemoUlBlock.displayName = "UlBlock";
+export function UlBlock({ children, textColor, textSize }: UlBlockProps) {
+  return (
+    <ul className={cn(ulBlockVariants(), textColor, textSize)}>{children}</ul>
+  );
+}
 
 export const olBlockVariants = cva(["s-list-decimal s-pb-2 s-pl-6"]);
 
@@ -39,24 +24,20 @@ interface OlBlockProps {
   start?: number;
   textColor: string;
   textSize: string;
-  node?: MarkdownNode;
 }
 
-export const MemoOlBlock = memo(
-  ({ children, start, textColor, textSize }: OlBlockProps) => {
-    return (
-      <ol start={start} className={cn(olBlockVariants(), textColor, textSize)}>
-        {children}
-      </ol>
-    );
-  },
-  (prev, next) =>
-    sameNodePosition(prev.node, next.node) &&
-    prev.start === next.start &&
-    sameTextStyling(prev, next)
-);
-
-MemoOlBlock.displayName = "OlBlock";
+export function OlBlock({
+  children,
+  start,
+  textColor,
+  textSize,
+}: OlBlockProps) {
+  return (
+    <ol start={start} className={cn(olBlockVariants(), textColor, textSize)}>
+      {children}
+    </ol>
+  );
+}
 
 export const liBlockVariants = cva(["s-break-words"]);
 
@@ -65,21 +46,17 @@ interface LiBlockProps {
   className?: string;
   textColor: string;
   textSize: string;
-  node?: MarkdownNode;
 }
 
-export const MemoLiBlock = memo(
-  ({ children, className, textColor, textSize }: LiBlockProps) => {
-    return (
-      <li className={cn(liBlockVariants(), textColor, textSize, className)}>
-        {children}
-      </li>
-    );
-  },
-  (prev, next) =>
-    sameNodePosition(prev.node, next.node) &&
-    prev.className === next.className &&
-    sameTextStyling(prev, next)
-);
-
-MemoLiBlock.displayName = "LiBlock";
+export function LiBlock({
+  children,
+  className,
+  textColor,
+  textSize,
+}: LiBlockProps) {
+  return (
+    <li className={cn(liBlockVariants(), textColor, textSize, className)}>
+      {children}
+    </li>
+  );
+}