@dust-tt/sparkle 0.2.534 → 0.2.536

package/src/components/markdown/PrettyJsonViewer.tsx

@@ -0,0 +1,223 @@
+import React from "react";
+
+import { Chip } from "@sparkle/components/Chip";
+import { cn } from "@sparkle/lib/utils";
+
+// Constants for consistent styling
+const VALUE_CLASSES =
+  "s-text-primary-700 dark:s-text-primary-700-night s-pt-1 s-text-sm";
+const EMPTY_CLASSES =
+  "s-text-primary-500 dark:s-text-primary-500-night s-pt-1 s-text-sm s-italic";
+const INDENT_CLASSES =
+  "s-border-structure-200 dark:s-border-structure-200-night s-max-w-full s-border-l s-pl-4 s-ml-4";
+
+export type JsonValueType =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | JsonValueType[]
+  | { [key: string]: JsonValueType };
+
+// Helper component for rendering key-value pairs with consistent styling.
+function KeyValuePair({
+  keyName,
+  value,
+  depth,
+  chipColor,
+  isRootLevel = false,
+}: {
+  keyName: string;
+  value: JsonValueType;
+  depth: number;
+  chipColor: "info" | "highlight";
+  isRootLevel?: boolean;
+}) {
+  const isComplexValue = typeof value === "object" && value !== null;
+
+  if (isComplexValue) {
+    return (
+      <>
+        <Chip
+          size="xs"
+          color={chipColor}
+          label={formatKey(keyName)}
+          className="s-mb-2"
+        />
+        <div className={cn("s-max-w-full", isRootLevel && "s-ml-4")}>
+          <JsonValue value={value} depth={depth + 1} />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "s-flex s-items-start",
+        isRootLevel ? "s-gap-3" : "s-gap-2"
+      )}
+    >
+      <Chip size="xs" color={chipColor} label={formatKey(keyName)} />
+      <JsonValue value={value} depth={depth + 1} />
+    </div>
+  );
+}
+
+function JsonValue({
+  value,
+  depth = 0,
+}: {
+  value: JsonValueType;
+  depth?: number;
+}) {
+  if (value === null || value === undefined) {
+    return <span className={EMPTY_CLASSES}>empty</span>;
+  }
+
+  if (typeof value === "boolean") {
+    return <span className={VALUE_CLASSES}>{value ? "Yes" : "No"}</span>;
+  }
+
+  if (typeof value === "number") {
+    return <span className={VALUE_CLASSES}>{value}</span>;
+  }
+
+  if (typeof value === "string") {
+    return (
+      <span className={`${VALUE_CLASSES} s-whitespace-pre-wrap s-break-normal`}>
+        {value}
+      </span>
+    );
+  }
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return <span className={EMPTY_CLASSES}>empty list</span>;
+    }
+
+    // Check if it's a simple array of primitives.
+    const isSimpleArray = value.every(
+      (item) => typeof item !== "object" || item === null
+    );
+
+    if (isSimpleArray && value.length <= 5) {
+      return (
+        <span className={VALUE_CLASSES}>
+          {value.map((item, index) => (
+            <span key={index}>
+              <JsonValue value={item} depth={depth + 1} />
+              {index < value.length - 1 && ", "}
+            </span>
+          ))}
+        </span>
+      );
+    }
+
+    return (
+      <div className="s-mt-2">
+        {value.map((item, index) => (
+          <div key={index} className={cn(INDENT_CLASSES)}>
+            <div className="s-flex s-flex-col s-gap-2">
+              <Chip size="xs" color="primary" label={`Item ${index + 1}`} />
+              <div className="s-max-w-full">
+                <JsonValue value={item} depth={depth + 1} />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (typeof value === "object") {
+    const entries = Object.entries(value);
+    if (entries.length === 0) {
+      return <span className={EMPTY_CLASSES}>empty</span>;
+    }
+
+    // For nested objects, use a card-like layout with vertical bars.
+    if (depth > 0) {
+      return (
+        <div className="s-space-y-2">
+          {entries.map(([key, val]) => (
+            <div key={key} className={cn(INDENT_CLASSES)}>
+              <KeyValuePair
+                keyName={key}
+                value={val}
+                depth={depth}
+                chipColor="info"
+              />
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    // Root level objects use a table-like layout.
+    return (
+      <div className="s-max-w-full s-space-y-3">
+        {entries.map(([key, val]) => (
+          <div
+            key={key}
+            className={cn(
+              "s-max-w-full s-border-b s-pb-3 last:s-border-0",
+              "s-border-structure-200 dark:s-border-structure-200-night"
+            )}
+          >
+            <KeyValuePair
+              keyName={key}
+              value={val}
+              depth={depth}
+              chipColor="highlight"
+              isRootLevel
+            />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <span
+      className={cn(
+        "s-text-sm",
+        "s-text-element-700 dark:s-text-element-700-night"
+      )}
+    >
+      {String(value)}
+    </span>
+  );
+}
+
+function formatKey(key: string): string {
+  // Convert snake_case or camelCase to Title Case.
+  return key
+    .replace(/_/g, " ")
+    .replace(/([A-Z])/g, " $1")
+    .trim()
+    .split(" ")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(" ");
+}
+
+interface JsonViewerProps {
+  data: JsonValueType;
+  className?: string;
+}
+export function PrettyJsonViewer({ data, className }: JsonViewerProps) {
+  return (
+    <div
+      className={cn(
+        "s-bg-structure-50 dark:s-bg-structure-50-night",
+        "s-overflow-hidden s-rounded-lg s-p-6 s-text-base",
+        className
+      )}
+    >
+      <div className="s-max-w-full s-overflow-x-auto">
+        <JsonValue value={data} />
+      </div>
+    </div>
+  );
+}

package/src/components/markdown/index.ts

@@ -3,5 +3,6 @@ export * from "./CodeBlockWithExtendedSupport";
 export * from "./ContentBlockWrapper";
 export * from "./Markdown";
 export * from "./MarkdownContentContext";
+export * from "./PrettyJsonViewer";
 export * from "./TableBlock";
 export * from "./utils";

package/src/logo/platforms/Stripe.tsx

@@ -10,10 +10,16 @@ const SvgStripe = (props: SVGProps<SVGSVGElement>) => (
     fill="#6772e5"
     {...props}
   >
-    <path d="M111.328 15.602c0-4.97-2.415-8.9-7.013-8.9s-7.423 3.924-7.423 8.863c0 5.85 3.32 8.8 8.036 8.8 2.318 0 4.06-.528 5.377-1.26V19.22a10.246 10.246 0 0 1-4.764 1.075c-1.9 0-3.556-.67-3.774-2.943h9.497a39.64 39.64 0 0 0 .063-1.748zm-9.606-1.835c0-2.186 1.35-3.1 2.56-3.1s2.454.906 2.454 3.1zM89.4 6.712a5.434 5.434 0 0 0-3.801 1.509l-.254-1.208h-4.27v22.64l4.85-1.032v-5.488a5.434 5.434 0 0 0 3.444 1.265c3.472 0 6.64-2.792 6.64-8.957.003-5.66-3.206-8.73-6.614-8.73zM88.23 20.1a2.898 2.898 0 0 1-2.288-.906l-.03-7.2a2.928 2.928 0 0 1 2.315-.96c1.775 0 2.998 2 2.998 4.528.003 2.593-1.198 4.546-2.995 4.546zM79.25.57l-4.87 1.035v3.95l4.87-1.032z" fill-rule="evenodd"/>
-    <path d="M74.38 7.035h4.87V24.04h-4.87z"/>
-    <path d="M69.164 8.47l-.302-1.434h-4.196V24.04h4.848V12.5c1.147-1.5 3.082-1.208 3.698-1.017V7.038c-.646-.232-2.913-.658-4.048 1.43zm-9.73-5.646L54.698 3.83l-.02 15.562c0 2.87 2.158 4.993 5.038 4.993 1.585 0 2.756-.302 3.405-.643v-3.95c-.622.248-3.683 1.138-3.683-1.72v-6.9h3.683V7.035h-3.683zM46.3 11.97c0-.758.63-1.05 1.648-1.05a10.868 10.868 0 0 1 4.83 1.25V7.6a12.815 12.815 0 0 0-4.83-.888c-3.924 0-6.557 2.056-6.557 5.488 0 5.37 7.375 4.498 7.375 6.813 0 .906-.78 1.186-1.863 1.186-1.606 0-3.68-.664-5.307-1.55v4.63a13.461 13.461 0 0 0 5.307 1.117c4.033 0 6.813-1.992 6.813-5.485 0-5.796-7.417-4.76-7.417-6.943zM13.88 9.515c0-1.37 1.14-1.9 2.982-1.9A19.661 19.661 0 0 1 25.6 9.876v-8.27A23.184 23.184 0 0 0 16.862.001C9.762.001 5 3.72 5 9.93c0 9.716 13.342 8.138 13.342 12.326 0 1.638-1.4 2.146-3.37 2.146-2.905 0-6.657-1.202-9.6-2.802v8.378A24.353 24.353 0 0 0 14.973 32C22.27 32 27.3 28.395 27.3 22.077c0-10.486-13.42-8.613-13.42-12.56z" fill-rule="evenodd"/>
+    <path
+      d="M111.328 15.602c0-4.97-2.415-8.9-7.013-8.9s-7.423 3.924-7.423 8.863c0 5.85 3.32 8.8 8.036 8.8 2.318 0 4.06-.528 5.377-1.26V19.22a10.246 10.246 0 0 1-4.764 1.075c-1.9 0-3.556-.67-3.774-2.943h9.497a39.64 39.64 0 0 0 .063-1.748zm-9.606-1.835c0-2.186 1.35-3.1 2.56-3.1s2.454.906 2.454 3.1zM89.4 6.712a5.434 5.434 0 0 0-3.801 1.509l-.254-1.208h-4.27v22.64l4.85-1.032v-5.488a5.434 5.434 0 0 0 3.444 1.265c3.472 0 6.64-2.792 6.64-8.957.003-5.66-3.206-8.73-6.614-8.73zM88.23 20.1a2.898 2.898 0 0 1-2.288-.906l-.03-7.2a2.928 2.928 0 0 1 2.315-.96c1.775 0 2.998 2 2.998 4.528.003 2.593-1.198 4.546-2.995 4.546zM79.25.57l-4.87 1.035v3.95l4.87-1.032z"
+      fill-rule="evenodd"
+    />
+    <path d="M74.38 7.035h4.87V24.04h-4.87z" />
+    <path
+      d="M69.164 8.47l-.302-1.434h-4.196V24.04h4.848V12.5c1.147-1.5 3.082-1.208 3.698-1.017V7.038c-.646-.232-2.913-.658-4.048 1.43zm-9.73-5.646L54.698 3.83l-.02 15.562c0 2.87 2.158 4.993 5.038 4.993 1.585 0 2.756-.302 3.405-.643v-3.95c-.622.248-3.683 1.138-3.683-1.72v-6.9h3.683V7.035h-3.683zM46.3 11.97c0-.758.63-1.05 1.648-1.05a10.868 10.868 0 0 1 4.83 1.25V7.6a12.815 12.815 0 0 0-4.83-.888c-3.924 0-6.557 2.056-6.557 5.488 0 5.37 7.375 4.498 7.375 6.813 0 .906-.78 1.186-1.863 1.186-1.606 0-3.68-.664-5.307-1.55v4.63a13.461 13.461 0 0 0 5.307 1.117c4.033 0 6.813-1.992 6.813-5.485 0-5.796-7.417-4.76-7.417-6.943zM13.88 9.515c0-1.37 1.14-1.9 2.982-1.9A19.661 19.661 0 0 1 25.6 9.876v-8.27A23.184 23.184 0 0 0 16.862.001C9.762.001 5 3.72 5 9.93c0 9.716 13.342 8.138 13.342 12.326 0 1.638-1.4 2.146-3.37 2.146-2.905 0-6.657-1.202-9.6-2.802v8.378A24.353 24.353 0 0 0 14.973 32C22.27 32 27.3 28.395 27.3 22.077c0-10.486-13.42-8.613-13.42-12.56z"
+      fill-rule="evenodd"
+    />
   </svg>
 );
 
-export default SvgStripe; 
+export default SvgStripe;

package/src/stories/Markdown.stories.tsx

@@ -345,3 +345,82 @@ export const ExtendedMarkdownStory: Story = {
     content: example,
   },
 };
+
+const mermaidAndJSON = `
+\`\`\`mermaid pie chart
+pie title Distribution
+    "Category A" : 30
+    "Category B" : 20
+    "Category C" : 15
+    "Category D" : 10
+    "Category E" : 25
+\`\`\`
+
+
+\`\`\`json
+{
+  "message": "Invalid JSON should not be pretty printed",
+  "status": "success",
+}
+\`\`\`
+
+\`\`\`json
+{
+  "message": "Soupi soupi soupinou ! Youhou !",
+  "status": "success",
+  "data": null
+}
+\`\`\`
+
+\`\`\`json
+{
+  "query": "SELECT COUNT() FROM Account"
+}
+\`\`\`
+
+\`\`\`json
+{
+  "records": [
+    {
+      "attributes": {
+        "type": "Account",
+        "url": "/services/data/v57.0/sobjects/Account/001Qy00000ccRXcIAM"
+      },
+      "Name": "Awesome Company",
+      "Type": "Customer - Direct",
+      "Industry": "Apparel",
+      "BillingCountry": "USA"
+    },
+    {
+      "attributes": {
+        "type": "Account",
+        "url": "/services/data/v57.0/sobjects/Account/001Qy00000ccRXeIAM"
+      },
+      "Name": "Awesomest Company",
+      "Type": "Customer - Channel",
+      "Industry": "Consulting",
+      "BillingCountry": "USA"
+    },
+    {
+      "attributes": {
+        "type": "Account",
+        "url": "/services/data/v57.0/sobjects/Account/001Qy00000ccRXbIAM"
+      },
+      "Name": "Awesomer Company",
+      "Type": "Customer - Direct",
+      "Industry": "Electronics",
+      "BillingCountry": null
+    }
+  ],
+  "totalSize": 18,
+  "done": true
+}
+\`\`\`
+
+`;
+
+export const JSONMarkdownStory: Story = {
+  args: {
+    content: mermaidAndJSON,
+  },
+};