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

package/dist/sparkle.css

@@ -5409,40 +5409,6 @@ select {
           mask-image: radial-gradient(white,black);
 }
 
-.s-blinking-cursor > :not(pre):last-child::after {
-  content: "";
-  width: 8px;
-  height: 16px;
-  --tw-bg-opacity: 1;
-  background-color: rgb(145 193 116 / var(--tw-bg-opacity));
-  display: inline-block;
-}
-
-@keyframes s-cursor-blink {
-  0% {
-    opacity: 1;
-  }
-
-  60% {
-    opacity: 1;
-  }
-
-  70% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.s-blinking-cursor > :not(pre):last-child::after {
-  animation: s-cursor-blink 0.9s infinite;;
-  margin-left: 5px;
-  position: relative;
-  top: 4px;
-}
-
 @keyframes bgblink {
   0%,
   100% {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.645",
+  "version": "0.2.646-rc-2",
   "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,6 +118,7 @@
     "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,14 +961,12 @@ export interface DataTableMoreButtonProps {
     React.ComponentPropsWithoutRef<typeof DropdownMenu>,
     "modal"
   >;
-  disabled?: boolean;
 }
 
 DataTable.MoreButton = function MoreButton({
   className,
   menuItems,
   dropdownMenuProps,
-  disabled,
 }: DataTableMoreButtonProps) {
   if (!menuItems?.length) {
     return null;
@@ -986,15 +984,11 @@ DataTable.MoreButton = function MoreButton({
           icon={MoreIcon}
           size="mini"
           variant="ghost-secondary"
-          disabled={disabled}
-          className={cn(
-            disabled && "s-cursor-not-allowed s-opacity-50",
-            className
-          )}
+          className={cn(className)}
         />
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent align="end" hidden={disabled}>
+      <DropdownMenuContent align="end">
         <DropdownMenuGroup>
           {menuItems.map((item, index) => renderMenuItem(item, index))}
         </DropdownMenuGroup>
@@ -1038,11 +1032,6 @@ interface CellContentProps extends React.TdHTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
   description?: string;
   grow?: boolean;
-  disabled?: boolean;
-  avatarStack?: {
-    items: { name: string; visual: string }[];
-    nbVisibleItems?: number;
-  };
 }
 
 DataTable.CellContent = function CellContent({
@@ -1055,8 +1044,6 @@ DataTable.CellContent = function CellContent({
   iconClassName,
   description,
   grow = false,
-  disabled,
-  avatarStack,
   ...props
 }: CellContentProps) {
   return (
@@ -1064,10 +1051,8 @@ 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 && (
@@ -1091,14 +1076,6 @@ 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}
@@ -1140,7 +1117,6 @@ interface BasicCellContentProps extends React.TdHTMLAttributes<HTMLDivElement> {
   label: string | number;
   tooltip?: string | number;
   textToCopy?: string | number;
-  disabled?: boolean;
 }
 
 DataTable.BasicCellContent = function BasicCellContent({
@@ -1148,7 +1124,6 @@ DataTable.BasicCellContent = function BasicCellContent({
   tooltip,
   className,
   textToCopy,
-  disabled,
   ...props
 }: BasicCellContentProps) {
   const [isCopied, copyToClipboard] = useCopyToClipboard();
@@ -1175,10 +1150,8 @@ 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>
@@ -1204,10 +1177,8 @@ 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,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";