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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.646-rc-4",
+  "version": "0.2.647",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
@@ -118,7 +118,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "emoji-mart": "^5.5.2",
-    "framer-motion": "^12.23.22",
     "lottie-react": "^2.4.0",
     "lottie-web": "^5.12.2",
     "mermaid": "^11.4.1",

package/src/components/DataTable.tsx

@@ -961,12 +961,14 @@ export interface DataTableMoreButtonProps {
     React.ComponentPropsWithoutRef<typeof DropdownMenu>,
     "modal"
   >;
+  disabled?: boolean;
 }
 
 DataTable.MoreButton = function MoreButton({
   className,
   menuItems,
   dropdownMenuProps,
+  disabled,
 }: DataTableMoreButtonProps) {
   if (!menuItems?.length) {
     return null;
@@ -984,11 +986,15 @@ DataTable.MoreButton = function MoreButton({
           icon={MoreIcon}
           size="mini"
           variant="ghost-secondary"
-          className={cn(className)}
+          disabled={disabled}
+          className={cn(
+            disabled && "s-cursor-not-allowed s-opacity-50",
+            className
+          )}
         />
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent align="end">
+      <DropdownMenuContent align="end" hidden={disabled}>
         <DropdownMenuGroup>
           {menuItems.map((item, index) => renderMenuItem(item, index))}
         </DropdownMenuGroup>
@@ -1032,6 +1038,11 @@ interface CellContentProps extends React.TdHTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
   description?: string;
   grow?: boolean;
+  disabled?: boolean;
+  avatarStack?: {
+    items: { name: string; visual?: string | React.ReactNode }[];
+    nbVisibleItems?: number;
+  };
 }
 
 DataTable.CellContent = function CellContent({
@@ -1044,6 +1055,8 @@ DataTable.CellContent = function CellContent({
   iconClassName,
   description,
   grow = false,
+  disabled,
+  avatarStack,
   ...props
 }: CellContentProps) {
   return (
@@ -1051,8 +1064,10 @@ DataTable.CellContent = function CellContent({
       className={cn(
         "s-flex s-items-center",
         grow ? "s-flex-grow" : "",
+        disabled && "s-cursor-not-allowed s-opacity-50",
         className
       )}
+      aria-disabled={disabled || undefined}
       {...props}
     >
       {avatarUrl && avatarTooltipLabel && (
@@ -1076,6 +1091,14 @@ DataTable.CellContent = function CellContent({
           isRounded={roundedAvatar ?? false}
         />
       )}
+      {avatarStack && (
+        <Avatar.Stack
+          avatars={avatarStack.items}
+          nbVisibleItems={avatarStack.nbVisibleItems}
+          size="xs"
+          isRounded={roundedAvatar ?? false}
+        />
+      )}
       {icon && (
         <Icon
           visual={icon}
@@ -1117,6 +1140,7 @@ interface BasicCellContentProps extends React.TdHTMLAttributes<HTMLDivElement> {
   label: string | number;
   tooltip?: string | number;
   textToCopy?: string | number;
+  disabled?: boolean;
 }
 
 DataTable.BasicCellContent = function BasicCellContent({
@@ -1124,6 +1148,7 @@ DataTable.BasicCellContent = function BasicCellContent({
   tooltip,
   className,
   textToCopy,
+  disabled,
   ...props
 }: BasicCellContentProps) {
   const [isCopied, copyToClipboard] = useCopyToClipboard();
@@ -1150,8 +1175,10 @@ DataTable.BasicCellContent = function BasicCellContent({
                 cellHeight,
                 "s-group s-flex s-items-center s-gap-2 s-text-sm",
                 "s-text-muted-foreground dark:s-text-muted-foreground-night",
+                disabled && "s-cursor-not-allowed s-opacity-50",
                 className
               )}
+              aria-disabled={disabled || undefined}
               {...props}
             >
               <span className="s-truncate">{label}</span>
@@ -1177,8 +1204,10 @@ DataTable.BasicCellContent = function BasicCellContent({
             cellHeight,
             "s-group s-flex s-items-center s-gap-2 s-text-sm",
             "s-text-muted-foreground dark:s-text-muted-foreground-night",
+            disabled && "s-cursor-not-allowed s-opacity-50",
             className
           )}
+          aria-disabled={disabled || undefined}
           {...props}
         >
           <span className="s-truncate">{label}</span>

package/src/components/markdown/BlockquoteBlock.tsx

@@ -1,11 +1,8 @@
 import { cva } from "class-variance-authority";
-import React, { memo } from "react";
+import React 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"],
   {
@@ -23,37 +20,33 @@ export const blockquoteVariants = cva(
 interface BlockquoteBlockProps {
   children: React.ReactNode;
   variant?: "surface";
-  node?: MarkdownNode;
 }
 
-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";
+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>
+  );
+}

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>
+  );
+}