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

package/dist/esm/components/markdown/TextFormattingBlocks.js

@@ -0,0 +1,12 @@
+import React, { memo } from "react";
+import { sameNodePosition } from "../../components/markdown/utils";
+export var MemoStrongBlock = memo(function (_a) {
+    var children = _a.children;
+    return (React.createElement("strong", { className: "s-font-semibold s-text-foreground dark:s-text-foreground-night" }, children));
+}, function (prev, next) { return sameNodePosition(prev.node, next.node); });
+MemoStrongBlock.displayName = "StrongBlock";
+export var MemoHorizontalRuleBlock = memo(function () {
+    return (React.createElement("div", { className: "s-my-6 s-border-b s-border-primary-150 dark:s-border-primary-150-night" }));
+});
+MemoHorizontalRuleBlock.displayName = "HorizontalRuleBlock";
+//# sourceMappingURL=TextFormattingBlocks.js.map

package/dist/esm/components/markdown/TextFormattingBlocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFormattingBlocks.js","sourceRoot":"","sources":["../../../../src/components/markdown/TextFormattingBlocks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAStE,MAAM,CAAC,IAAM,eAAe,GAAG,IAAI,CACjC,UAAC,EAA8B;QAA5B,QAAQ,cAAA;IACT,OAAO,CACL,gCAAQ,SAAS,EAAC,gEAAgE,IAC/E,QAAQ,CACF,CACV,CAAC;AACJ,CAAC,EACD,UAAC,IAAI,EAAE,IAAI,IAAK,OAAA,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,EAAtC,CAAsC,CACvD,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,aAAa,CAAC;AAE5C,MAAM,CAAC,IAAM,uBAAuB,GAAG,IAAI,CAAC;IAC1C,OAAO,CACL,6BAAK,SAAS,EAAC,wEAAwE,GAAG,CAC3F,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,WAAW,GAAG,qBAAqB,CAAC"}

package/dist/esm/components/markdown/index.d.ts

@@ -1,9 +1,13 @@
 export * from "./CodeBlock";
 export * from "./CodeBlockWithExtendedSupport";
 export * from "./ContentBlockWrapper";
+export * from "./HeaderBlocks";
+export * from "./InputBlock";
+export * from "./LinkBlock";
 export * from "./Markdown";
 export * from "./MarkdownContentContext";
 export * from "./PrettyJsonViewer";
 export * from "./TableBlock";
+export * from "./TextFormattingBlocks";
 export * from "./utils";
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/markdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/markdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/markdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC"}

package/dist/esm/components/markdown/index.js

@@ -1,9 +1,13 @@
 export * from "./CodeBlock";
 export * from "./CodeBlockWithExtendedSupport";
 export * from "./ContentBlockWrapper";
+export * from "./HeaderBlocks";
+export * from "./InputBlock";
+export * from "./LinkBlock";
 export * from "./Markdown";
 export * from "./MarkdownContentContext";
 export * from "./PrettyJsonViewer";
 export * from "./TableBlock";
+export * from "./TextFormattingBlocks";
 export * from "./utils";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/markdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/markdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/markdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC"}

package/dist/esm/components/markdown/types.d.ts

@@ -0,0 +1,13 @@
+type MarkdownPoint = {
+    line?: number;
+    column?: number;
+};
+type MarkdownPosition = {
+    start?: MarkdownPoint;
+    end?: MarkdownPoint;
+};
+export type MarkdownNode = {
+    position?: MarkdownPosition;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/components/markdown/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/markdown/types.ts"],"names":[],"mappings":"AAAA,KAAK,aAAa,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACxD,KAAK,gBAAgB,GAAG;IAAE,KAAK,CAAC,EAAE,aAAa,CAAC;IAAC,GAAG,CAAC,EAAE,aAAa,CAAA;CAAE,CAAC;AACvE,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B,CAAC"}

package/dist/esm/components/markdown/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/components/markdown/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/markdown/types.ts"],"names":[],"mappings":""}

package/dist/esm/components/markdown/utils.d.ts

@@ -1,4 +1,15 @@
 /// <reference types="react" />
+import { MarkdownNode } from "./types";
 export declare function sanitizeContent(str: string): string;
 export declare function detectLanguage(children: React.ReactNode): any;
+export declare function sameNodePosition(prev?: MarkdownNode, next?: MarkdownNode): boolean;
+export declare function sameTextStyling(prev: {
+    textColor?: string;
+    textSize?: string;
+    forcedTextSize?: string;
+}, next: {
+    textColor?: string;
+    textSize?: string;
+    forcedTextSize?: string;
+}): boolean;
 //# sourceMappingURL=utils.d.ts.map

package/dist/esm/components/markdown/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/markdown/utils.ts"],"names":[],"mappings":";AAAA,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAgCnD;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,OAMvD"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/markdown/utils.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAgCnD;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,OAMvD;AAED,wBAAgB,gBAAgB,CAC9B,IAAI,CAAC,EAAE,YAAY,EACnB,IAAI,CAAC,EAAE,YAAY,GAClB,OAAO,CAmBT;AAED,wBAAgB,eAAe,CAC7B,IAAI,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,EACxE,IAAI,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,GACvE,OAAO,CAMT"}

package/dist/esm/components/markdown/utils.js

@@ -39,4 +39,25 @@ export function detectLanguage(children) {
     }
     return "text";
 }
+export function sameNodePosition(prev, next) {
+    if (!((prev === null || prev === void 0 ? void 0 : prev.position) || (next === null || next === void 0 ? void 0 : next.position))) {
+        return true;
+    }
+    if (!((prev === null || prev === void 0 ? void 0 : prev.position) && (next === null || next === void 0 ? void 0 : next.position))) {
+        return false;
+    }
+    var prevStart = prev.position.start;
+    var nextStart = next.position.start;
+    var prevEnd = prev.position.end;
+    var nextEnd = next.position.end;
+    return ((prevStart === null || prevStart === void 0 ? void 0 : prevStart.line) === (nextStart === null || nextStart === void 0 ? void 0 : nextStart.line) &&
+        (prevStart === null || prevStart === void 0 ? void 0 : prevStart.column) === (nextStart === null || nextStart === void 0 ? void 0 : nextStart.column) &&
+        (prevEnd === null || prevEnd === void 0 ? void 0 : prevEnd.line) === (nextEnd === null || nextEnd === void 0 ? void 0 : nextEnd.line) &&
+        (prevEnd === null || prevEnd === void 0 ? void 0 : prevEnd.column) === (nextEnd === null || nextEnd === void 0 ? void 0 : nextEnd.column));
+}
+export function sameTextStyling(prev, next) {
+    return (prev.textColor === next.textColor &&
+        prev.textSize === next.textSize &&
+        prev.forcedTextSize === next.forcedTextSize);
+}
 //# sourceMappingURL=utils.js.map

package/dist/esm/components/markdown/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/markdown/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,eAAe,CAAC,GAAW;IACzC,2FAA2F;IAC3F,4BAA4B;IAE5B,0EAA0E;IAC1E,IAAM,KAAK,GAAG,WAAW,CAAC;IAC1B,IAAI,eAAe,GAAG,CAAC,CAAC;IACxB,IAAI,eAAe,GAAG,CAAC,CAAC;IAExB,2DAA2D;IAC3D,IAAI,KAAK,CAAC;IACV,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;QAC1C,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC;YACvB,eAAe,EAAE,CAAC;QACpB,CAAC;aAAM,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;YAC5B,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IACD,qCAAqC;IACrC,IAAI,eAAe,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;QAC9B,IAAI,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YACtB,GAAG,IAAI,IAAI,CAAC;QACd,CAAC;aAAM,IAAI,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YAC9B,GAAG,IAAI,GAAG,CAAC;QACb,CAAC;aAAM,CAAC;YACN,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QAC9C,CAAC;IACH,CAAC;SAAM,IAAI,eAAe,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;QACrC,GAAG,IAAI,GAAG,CAAC;IACb,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,QAAyB;;IACtD,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3C,OAAO,CAAA,MAAA,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,0CAAE,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,KAAI,MAAM,CAAC;IACzE,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/markdown/utils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.644",
+  "version": "0.2.646-rc-1",
   "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",

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,7 +1032,6 @@ interface CellContentProps extends React.TdHTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
   description?: string;
   grow?: boolean;
-  disabled?: boolean;
 }
 
 DataTable.CellContent = function CellContent({
@@ -1051,7 +1044,6 @@ DataTable.CellContent = function CellContent({
   iconClassName,
   description,
   grow = false,
-  disabled,
   ...props
 }: CellContentProps) {
   return (
@@ -1059,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 && (
@@ -1127,7 +1117,6 @@ interface BasicCellContentProps extends React.TdHTMLAttributes<HTMLDivElement> {
   label: string | number;
   tooltip?: string | number;
   textToCopy?: string | number;
-  disabled?: boolean;
 }
 
 DataTable.BasicCellContent = function BasicCellContent({
@@ -1135,7 +1124,6 @@ DataTable.BasicCellContent = function BasicCellContent({
   tooltip,
   className,
   textToCopy,
-  disabled,
   ...props
 }: BasicCellContentProps) {
   const [isCopied, copyToClipboard] = useCopyToClipboard();
@@ -1162,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>
@@ -1191,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";