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

package/src/components/markdown/TableBlock.tsx

@@ -1,9 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { ReactNode, useMemo } from "react";
+import React, { memo, ReactNode, useMemo } from "react";
 
 import { ScrollArea, ScrollBar } from "@sparkle/components";
 import { ContentBlockWrapper } from "@sparkle/components/markdown/ContentBlockWrapper";
 
+import { MarkdownNode } from "./types";
+import { sameNodePosition } from "./utils";
+
 const getNodeText = (node: ReactNode): string => {
   if (["string", "number"].includes(typeof node)) {
     return node as string;
@@ -18,100 +21,127 @@ const getNodeText = (node: ReactNode): string => {
   return "";
 };
 
-export function TableBlock({ children }: { children: React.ReactNode }) {
-  const tableData = useMemo(() => {
-    const [headNode, bodyNode] = Array.from(children as [any, any]);
-    if (
-      !headNode ||
-      !bodyNode ||
-      !("props" in headNode) ||
-      !("props" in bodyNode)
-    ) {
-      return;
-    }
-
-    const headCells = headNode.props.children[0].props.children.map((c: any) =>
-      getNodeText(c.props.children)
+export const MemoTableBlock = memo(
+  ({ children }: { children: React.ReactNode; node?: MarkdownNode }) => {
+    const tableData = useMemo(() => {
+      const [headNode, bodyNode] = Array.from(children as [any, any]);
+      if (
+        !headNode ||
+        !bodyNode ||
+        !("props" in headNode) ||
+        !("props" in bodyNode)
+      ) {
+        return;
+      }
+
+      const headCells = headNode.props.children[0].props.children.map(
+        (c: any) => getNodeText(c.props.children)
+      );
+
+      const headHtml = `<thead><tr>${headCells
+        .map((c: any) => `<th><b>${c}</b></th>`)
+        .join("")}</tr></thead>`;
+      const headPlain = headCells.join("\t");
+
+      const bodyRows = bodyNode.props.children.map((row: any) =>
+        row.props.children.map((cell: any) => {
+          const children = cell.props.children;
+          return (Array.isArray(children) ? children : [children])
+            .map((child: any) =>
+              child?.type?.name === "CiteBlock" ? "" : getNodeText(child)
+            )
+            .join("");
+        })
+      );
+      const bodyHtml = `<tbody>${bodyRows
+        .map((row: any) => {
+          return `<tr>${row
+            .map((cell: any) => `<td>${cell}</td>`)
+            .join("")}</tr>`;
+        })
+        .join("")}</tbody>`;
+      const bodyPlain = bodyRows.map((row: any) => row.join("\t")).join("\n");
+
+      return {
+        "text/html": `<table>${headHtml}${bodyHtml}</table>`,
+        "text/plain": headPlain + "\n" + bodyPlain,
+      };
+    }, [children]);
+
+    return (
+      <ContentBlockWrapper
+        innerClassName="s-relative s-my-2 s-w-full s-border s-border-border dark:s-border-border-night s-rounded-2xl"
+        content={tableData}
+      >
+        <ScrollArea className="s-w-full s-rounded-2xl">
+          <table className="s-w-full">{children}</table>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+      </ContentBlockWrapper>
     );
+  },
+  (prev, next) => sameNodePosition(prev.node, next.node)
+);
 
-    const headHtml = `<thead><tr>${headCells
-      .map((c: any) => `<th><b>${c}</b></th>`)
-      .join("")}</tr></thead>`;
-    const headPlain = headCells.join("\t");
-
-    const bodyRows = bodyNode.props.children.map((row: any) =>
-      row.props.children.map((cell: any) => {
-        const children = cell.props.children;
-        return (Array.isArray(children) ? children : [children])
-          .map((child: any) =>
-            child?.type?.name === "CiteBlock" ? "" : getNodeText(child)
-          )
-          .join("");
-      })
+MemoTableBlock.displayName = "TableBlock";
+
+export const MemoTableHeadBlock = memo(
+  ({ children }: { children: React.ReactNode; node?: MarkdownNode }) => {
+    return (
+      <thead className="s-bg-muted-background s-px-2 s-py-2 dark:s-bg-muted-background-night">
+        {children}
+      </thead>
     );
-    const bodyHtml = `<tbody>${bodyRows
-      .map((row: any) => {
-        return `<tr>${row
-          .map((cell: any) => `<td>${cell}</td>`)
-          .join("")}</tr>`;
-      })
-      .join("")}</tbody>`;
-    const bodyPlain = bodyRows.map((row: any) => row.join("\t")).join("\n");
-
-    return {
-      "text/html": `<table>${headHtml}${bodyHtml}</table>`,
-      "text/plain": headPlain + "\n" + bodyPlain,
-    };
-  }, [children]);
-
-  return (
-    <ContentBlockWrapper
-      innerClassName="s-relative s-my-2 s-w-full s-border s-border-border dark:s-border-border-night s-rounded-2xl"
-      content={tableData}
-    >
-      <ScrollArea className="s-w-full s-rounded-2xl">
-        <table className="s-w-full">{children}</table>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-    </ContentBlockWrapper>
-  );
-}
-
-export function TableHeadBlock({ children }: { children: React.ReactNode }) {
-  return (
-    <thead className="s-bg-muted-background s-px-2 s-py-2 dark:s-bg-muted-background-night">
-      {children}
-    </thead>
-  );
-}
-
-export function TableBodyBlock({ children }: { children: React.ReactNode }) {
-  return (
-    <tbody className="s-bg-white dark:s-bg-background-night">{children}</tbody>
-  );
-}
-
-export function TableHeaderBlock({ children }: { children: React.ReactNode }) {
-  return (
-    <th className="s-truncate s-whitespace-nowrap s-break-words s-py-3.5 s-pl-4 s-text-left s-text-xs s-font-semibold s-text-muted-foreground dark:s-text-muted-foreground-night">
-      {children}
-    </th>
-  );
-}
-
-export function TableDataBlock({ children }: { children: React.ReactNode }) {
-  return (
-    <td className="s-px-4 s-py-3 s-text-sm s-text-foreground dark:s-text-foreground-night">
-      {Array.isArray(children) ? (
-        children.map((child: any, i) => {
-          if (child === "<br>") {
-            return <br key={i} />;
-          }
-          return <React.Fragment key={i}>{child}</React.Fragment>;
-        })
-      ) : (
-        <>{children}</>
-      )}
-    </td>
-  );
-}
+  },
+  (prev, next) => sameNodePosition(prev.node, next.node)
+);
+
+MemoTableHeadBlock.displayName = "TableHeadBlock";
+
+export const MemoTableBodyBlock = memo(
+  ({ children }: { children: React.ReactNode; node?: MarkdownNode }) => {
+    return (
+      <tbody className="s-bg-white dark:s-bg-background-night">
+        {children}
+      </tbody>
+    );
+  },
+  (prev, next) => sameNodePosition(prev.node, next.node)
+);
+
+MemoTableBodyBlock.displayName = "TableBodyBlock";
+
+export const MemoTableHeaderBlock = memo(
+  ({ children }: { children: React.ReactNode; node?: MarkdownNode }) => {
+    return (
+      <th className="s-truncate s-whitespace-nowrap s-break-words s-py-3.5 s-pl-4 s-text-left s-text-xs s-font-semibold s-text-muted-foreground dark:s-text-muted-foreground-night">
+        {children}
+      </th>
+    );
+  },
+  (prev, next) => sameNodePosition(prev.node, next.node)
+);
+
+MemoTableHeaderBlock.displayName = "TableHeaderBlock";
+
+export const MemoTableDataBlock = memo(
+  ({ children }: { children: React.ReactNode; node?: MarkdownNode }) => {
+    return (
+      <td className="s-px-4 s-py-3 s-text-sm s-text-foreground dark:s-text-foreground-night">
+        {Array.isArray(children) ? (
+          children.map((child: any, i) => {
+            if (child === "<br>") {
+              return <br key={i} />;
+            }
+            return <React.Fragment key={i}>{child}</React.Fragment>;
+          })
+        ) : (
+          <>{children}</>
+        )}
+      </td>
+    );
+  },
+  (prev, next) => sameNodePosition(prev.node, next.node)
+);
+
+MemoTableDataBlock.displayName = "TableDataBlock";

package/src/components/markdown/TextFormattingBlocks.tsx

@@ -0,0 +1,31 @@
+import React, { memo } from "react";
+
+import { sameNodePosition } from "@sparkle/components/markdown/utils";
+
+import { MarkdownNode } from "./types";
+
+interface StrongBlockProps {
+  children: React.ReactNode;
+  node?: MarkdownNode;
+}
+
+export const MemoStrongBlock = memo(
+  ({ children }: StrongBlockProps) => {
+    return (
+      <strong className="s-font-semibold s-text-foreground dark:s-text-foreground-night">
+        {children}
+      </strong>
+    );
+  },
+  (prev, next) => sameNodePosition(prev.node, next.node)
+);
+
+MemoStrongBlock.displayName = "StrongBlock";
+
+export const MemoHorizontalRuleBlock = memo(() => {
+  return (
+    <div className="s-my-6 s-border-b s-border-primary-150 dark:s-border-primary-150-night" />
+  );
+});
+
+MemoHorizontalRuleBlock.displayName = "HorizontalRuleBlock";

package/src/components/markdown/index.ts

@@ -1,8 +1,12 @@
 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";

package/src/components/markdown/types.ts

@@ -0,0 +1,5 @@
+type MarkdownPoint = { line?: number; column?: number };
+type MarkdownPosition = { start?: MarkdownPoint; end?: MarkdownPoint };
+export type MarkdownNode = {
+  position?: MarkdownPosition;
+};

package/src/components/markdown/useAnimatedText.ts

@@ -0,0 +1,36 @@
+import { animate } from "framer-motion";
+import { useEffect, useState } from "react";
+
+const delimiter = /(?=[\s\S])/;
+
+export function useAnimatedText(text: string, shouldAnimate: boolean) {
+  const [cursor, setCursor] = useState(0);
+  const [startingCursor, setStartingCursor] = useState(0);
+  const [prevText, setPrevText] = useState(text);
+
+  if (prevText !== text) {
+    setPrevText(text);
+    setStartingCursor(cursor);
+  }
+
+  useEffect(() => {
+    if (shouldAnimate) {
+      const textParts = text.split(delimiter);
+      const controls = animate(startingCursor, textParts.length, {
+        duration: 4,
+        ease: "easeOut",
+        onUpdate(latest) {
+          setCursor(Math.floor(latest));
+        },
+      });
+
+      return () => controls.stop();
+    }
+  }, [startingCursor, text]);
+
+  if (!shouldAnimate) {
+    return text;
+  }
+
+  return text.split(delimiter).slice(0, cursor).join("");
+}

package/src/components/markdown/utils.ts

@@ -1,3 +1,5 @@
+import { MarkdownNode } from "./types";
+
 export function sanitizeContent(str: string): string {
   // (1) Add closing backticks if they are missing such that we render a code block or inline
   // element during streaming.
@@ -39,3 +41,38 @@ export function detectLanguage(children: React.ReactNode) {
 
   return "text";
 }
+
+export function sameNodePosition(
+  prev?: MarkdownNode,
+  next?: MarkdownNode
+): boolean {
+  if (!(prev?.position || next?.position)) {
+    return true;
+  }
+  if (!(prev?.position && next?.position)) {
+    return false;
+  }
+
+  const prevStart = prev.position.start;
+  const nextStart = next.position.start;
+  const prevEnd = prev.position.end;
+  const nextEnd = next.position.end;
+
+  return (
+    prevStart?.line === nextStart?.line &&
+    prevStart?.column === nextStart?.column &&
+    prevEnd?.line === nextEnd?.line &&
+    prevEnd?.column === nextEnd?.column
+  );
+}
+
+export function sameTextStyling(
+  prev: { textColor?: string; textSize?: string; forcedTextSize?: string },
+  next: { textColor?: string; textSize?: string; forcedTextSize?: string }
+): boolean {
+  return (
+    prev.textColor === next.textColor &&
+    prev.textSize === next.textSize &&
+    prev.forcedTextSize === next.forcedTextSize
+  );
+}

package/src/stories/DataTable.stories.tsx

@@ -52,7 +52,6 @@ type Data = {
   >;
   id?: number;
   roundedAvatar?: boolean;
-  avatarStack?: { name: string; visual: string }[];
 };
 
 type TransformedData = {
@@ -182,130 +181,6 @@ const data: TransformedData[] = [
   },
 ];
 
-const avatarStackData: TransformedData[] = [
-  {
-    name: "Team Alpha",
-    description: "Development team",
-    usedBy: 12,
-    addedBy: "Project Manager",
-    lastUpdated: "2024-01-15",
-    size: "256kb",
-    avatarStack: [
-      {
-        name: "Alice Johnson",
-        visual: "https://avatars.githubusercontent.com/u/1?s=200&v=4",
-      },
-      {
-        name: "Bob Smith",
-        visual: "https://avatars.githubusercontent.com/u/2?s=200&v=4",
-      },
-      {
-        name: "Carol Davis",
-        visual: "https://avatars.githubusercontent.com/u/3?s=200&v=4",
-      },
-      {
-        name: "David Wilson",
-        visual: "https://avatars.githubusercontent.com/u/4?s=200&v=4",
-      },
-      {
-        name: "Eve Brown",
-        visual: "https://avatars.githubusercontent.com/u/5?s=200&v=4",
-      },
-    ],
-    onClick: () => alert("Team Alpha clicked"),
-  },
-  {
-    name: "Marketing Team",
-    description: "Marketing and communications",
-    usedBy: 8,
-    addedBy: "Marketing Director",
-    lastUpdated: "2024-01-14",
-    size: "128kb",
-    avatarStack: [
-      {
-        name: "Frank Miller",
-        visual: "https://avatars.githubusercontent.com/u/6?s=200&v=4",
-      },
-      {
-        name: "Grace Lee",
-        visual: "https://avatars.githubusercontent.com/u/7?s=200&v=4",
-      },
-      {
-        name: "Henry Taylor",
-        visual: "https://avatars.githubusercontent.com/u/8?s=200&v=4",
-      },
-    ],
-    onClick: () => alert("Marketing Team clicked"),
-  },
-  {
-    name: "Design Squad",
-    description: "UI/UX design team",
-    usedBy: 6,
-    addedBy: "Design Lead",
-    lastUpdated: "2024-01-13",
-    size: "512kb",
-    avatarStack: [
-      {
-        name: "Ivy Chen",
-        visual: "https://avatars.githubusercontent.com/u/9?s=200&v=4",
-      },
-      {
-        name: "Jack Rodriguez",
-        visual: "https://avatars.githubusercontent.com/u/10?s=200&v=4",
-      },
-      {
-        name: "Kate Anderson",
-        visual: "https://avatars.githubusercontent.com/u/11?s=200&v=4",
-      },
-      {
-        name: "Liam Thompson",
-        visual: "https://avatars.githubusercontent.com/u/12?s=200&v=4",
-      },
-    ],
-    roundedAvatar: true,
-    onClick: () => alert("Design Squad clicked"),
-  },
-  {
-    name: "Large Team",
-    description: "Cross-functional team with many members",
-    usedBy: 25,
-    addedBy: "Team Lead",
-    lastUpdated: "2024-01-12",
-    size: "1.2mb",
-    avatarStack: [
-      {
-        name: "Maya Patel",
-        visual: "https://avatars.githubusercontent.com/u/13?s=200&v=4",
-      },
-      {
-        name: "Noah Garcia",
-        visual: "https://avatars.githubusercontent.com/u/14?s=200&v=4",
-      },
-      {
-        name: "Olivia Martinez",
-        visual: "https://avatars.githubusercontent.com/u/15?s=200&v=4",
-      },
-      {
-        name: "Paul Kim",
-        visual: "https://avatars.githubusercontent.com/u/16?s=200&v=4",
-      },
-      {
-        name: "Quinn White",
-        visual: "https://avatars.githubusercontent.com/u/17?s=200&v=4",
-      },
-      {
-        name: "Rachel Green",
-        visual: "https://avatars.githubusercontent.com/u/18?s=200&v=4",
-      },
-      {
-        name: "Sam Johnson",
-        visual: "https://avatars.githubusercontent.com/u/19?s=200&v=4",
-      },
-    ],
-    onClick: () => alert("Large Team clicked"),
-  },
-];
-
 const columns: ColumnDef<Data>[] = [
   {
     accessorKey: "name",
@@ -895,113 +770,3 @@ export const DataTableWithRadioSelectionExample = () => {
     </div>
   );
 };
-
-// Column definition for avatar stack story
-const avatarStackColumns: ColumnDef<Data>[] = [
-  {
-    accessorKey: "name",
-    header: "Team Name",
-    sortingFn: "text",
-    id: "name",
-    meta: {
-      className: "s-w-full",
-      tooltip: "Team name with member avatars",
-    },
-    cell: (info) => (
-      <DataTable.CellContent
-        avatarStack={
-          info.row.original.avatarStack
-            ? {
-                items: info.row.original.avatarStack,
-                nbVisibleItems: 3,
-              }
-            : undefined
-        }
-        description={info.row.original.description}
-        roundedAvatar={info.row.original.roundedAvatar}
-      >
-        {info.row.original.name}
-      </DataTable.CellContent>
-    ),
-  },
-  {
-    accessorKey: "usedBy",
-    id: "usedBy",
-    meta: {
-      className: "s-w-[82px] s-hidden @xs/table:s-table-cell",
-    },
-    header: "Members",
-    cell: (info) => (
-      <DataTable.BasicCellContent label={info.row.original.usedBy} />
-    ),
-  },
-  {
-    accessorKey: "addedBy",
-    header: "Created by",
-    id: "addedBy",
-    meta: {
-      className: "s-w-[128px]",
-    },
-    cell: (info) => (
-      <DataTable.BasicCellContent
-        label={info.row.original.addedBy}
-        textToCopy={info.row.original.addedBy}
-        tooltip={info.row.original.addedBy}
-      />
-    ),
-  },
-  {
-    accessorKey: "lastUpdated",
-    id: "lastUpdated",
-    header: "Last updated",
-    meta: {
-      className: "s-w-[128px] s-hidden @sm/table:s-table-cell",
-    },
-    cell: (info) => (
-      <DataTable.BasicCellContent label={info.row.original.lastUpdated} />
-    ),
-    enableSorting: false,
-  },
-  {
-    accessorKey: "size",
-    id: "size",
-    header: "Size",
-    meta: {
-      className: "s-w-[48px] s-hidden @sm/table:s-table-cell",
-    },
-    cell: (info) => (
-      <DataTable.BasicCellContent label={info.row.original.size} />
-    ),
-  },
-];
-
-export const DataTableWithAvatarStackExample = () => {
-  const [filter, setFilter] = React.useState<string>("");
-
-  return (
-    <div className="s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6">
-      <h3 className="s-text-lg s-font-medium">DataTable with Avatar Stack</h3>
-      <p className="s-text-sm s-text-muted-foreground">
-        This example demonstrates the DataTable with avatar stacks showing team
-        members. The avatar stack displays up to 4 visible avatars with a count
-        indicator for additional members.
-      </p>
-
-      <div className="s-flex s-flex-col s-gap-4">
-        <Input
-          name="filter"
-          placeholder="Filter teams..."
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-        />
-
-        <DataTable
-          data={avatarStackData}
-          filter={filter}
-          filterColumn="name"
-          columns={avatarStackColumns}
-        />
-      </div>
-    </div>
-  );
-};

package/src/styles/global.css

@@ -51,15 +51,3 @@
     --tw-checker-color: theme("colors.slate.950"); /* Dark mode pattern color */
   }
 }
-
-.s-blinking-cursor > :not(pre):last-child::after {
-  content: "";
-  width: 8px;
-  height: 16px;
-  @apply s-bg-success-400;
-  display: inline-block;
-  @apply s-animate-cursor-blink;
-  margin-left: 5px;
-  position: relative;
-  top: 4px;
-}

package/src/styles/global_with_tw_base.css

@@ -2,18 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-.s-blinking-cursor > :not(pre):last-child::after {
-  content: "";
-  width: 8px;
-  height: 16px;
-  @apply s-bg-success-400;
-  display: inline-block;
-  @apply s-animate-cursor-blink;
-  margin-left: 5px;
-  position: relative;
-  top: 4px;
-}
-
 @keyframes collapse-down {
   from {
     height: 0;

package/src/styles/tailwind.css

@@ -2,17 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-.s-blinking-cursor > :not(pre):last-child::after {
-  content: "";
-  width: 8px;
-  height: 16px;
-  @apply s-bg-success-400;
-  display: inline-block;
-  @apply s-animate-cursor-blink;
-  margin-left: 5px;
-  position: relative;
-  top: 4px;
-}
 
 @keyframes bgblink {
   0%,