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

package/src/components/markdown/TableBlock.tsx

@@ -1,12 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { memo, ReactNode, useMemo } from "react";
+import React, { 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;
@@ -21,127 +18,100 @@ const getNodeText = (node: ReactNode): string => {
   return "";
 };
 
-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)
-);
-
-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>
-    );
-  },
-  (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>
+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)
     );
-  },
-  (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>
+    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("");
+      })
     );
-  },
-  (prev, next) => sameNodePosition(prev.node, next.node)
-);
-
-MemoTableDataBlock.displayName = "TableDataBlock";
+    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>
+  );
+}

package/src/components/markdown/index.ts

@@ -1,12 +1,8 @@
 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/utils.ts

@@ -1,5 +1,3 @@
-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.
@@ -41,38 +39,3 @@ 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/icons/actions/Atom.tsx

@@ -10,7 +10,7 @@ const SvgAtom = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      fill="currentColor"
+      fill="#000"
       fillRule="evenodd"
       d="M14.974 2.284c.831-.248 1.733-.268 2.526.19.793.458 1.227 1.249 1.428 2.093.2.841.196 1.827.047 2.866-.029.196-.065.396-.104.599.196.068.387.137.571.21.975.39 1.83.88 2.46 1.474C22.531 10.313 23 11.084 23 12c0 .915-.468 1.687-1.099 2.283-.628.594-1.484 1.084-2.459 1.473-.184.074-.375.143-.57.211.038.204.074.404.103.6.15 1.039.153 2.025-.047 2.866-.201.844-.635 1.635-1.428 2.093-.793.458-1.695.438-2.526.19-.83-.247-1.681-.743-2.506-1.392a12.997 12.997 0 0 1-.468-.389c-.157.136-.312.266-.468.389-.825.649-1.677 1.145-2.506 1.392-.831.248-1.733.268-2.526-.19-.793-.458-1.227-1.249-1.428-2.093-.2-.841-.196-1.827-.047-2.866.029-.196.064-.396.103-.6a13.01 13.01 0 0 1-.57-.21c-.975-.39-1.83-.88-2.46-1.474C1.469 13.687 1 12.915 1 12c0-.916.468-1.687 1.099-2.284.628-.594 1.484-1.083 2.459-1.473.184-.074.374-.143.57-.211-.04-.203-.074-.403-.103-.599-.15-1.039-.153-2.025.047-2.866.201-.844.635-1.635 1.428-2.093.793-.458 1.695-.438 2.526-.19.83.247 1.681.743 2.506 1.392.156.123.312.253.468.388.156-.135.312-.265.468-.388.825-.649 1.677-1.145 2.506-1.392ZM7.06 16.502a10.7 10.7 0 0 0-.056.35c-.128.89-.11 1.605.013 2.118.121.51.319.73.482.825.163.094.452.155.955.005.506-.15 1.134-.492 1.84-1.049.092-.07.182-.146.274-.223a21.574 21.574 0 0 1-1.368-1.683 21.558 21.558 0 0 1-2.14-.343Zm9.878 0c-.677.145-1.394.26-2.141.343a21.577 21.577 0 0 1-1.368 1.683c.092.077.183.152.274.224.707.556 1.335.898 1.84 1.048.504.15.793.089.956-.006.163-.094.36-.314.482-.824.123-.513.141-1.229.013-2.119a10.715 10.715 0 0 0-.056-.35ZM12 17l-.114-.002.113.127.114-.127L12 17Zm0-8c-.582 0-1.15.022-1.698.061A23.841 23.841 0 0 0 8.605 12a23.888 23.888 0 0 0 1.697 2.939 23.855 23.855 0 0 0 3.395 0 23.915 23.915 0 0 0 1.697-2.94 23.902 23.902 0 0 0-1.697-2.937A23.853 23.853 0 0 0 12 9Zm4.33 5.5c-.019.033-.04.065-.058.098l.168-.035-.054-.163c-.02.033-.037.067-.056.1Zm-8.77.063.168.034-.058-.097-.057-.1-.053.163Zm10.808-4.59c-.212.66-.47 1.338-.772 2.027.301.688.56 1.366.772 2.025.113-.041.224-.082.331-.125.835-.334 1.445-.708 1.828-1.07.381-.36.473-.642.473-.83 0-.19-.092-.47-.473-.83-.383-.363-.993-.737-1.828-1.07a10.657 10.657 0 0 0-.33-.127Zm-12.737 0c-.113.041-.223.083-.33.126-.835.334-1.445.708-1.828 1.07-.381.36-.473.642-.473.83 0 .19.092.47.473.83.383.363.993.737 1.828 1.071.107.043.217.084.33.125.212-.659.471-1.337.772-2.025a21.546 21.546 0 0 1-.772-2.027Zm1.929-.537.053.162.057-.098.058-.098-.168.034Zm8.77.064.056.098.053-.162-.168-.035.06.099ZM8.455 4.2c-.503-.15-.792-.089-.955.006-.163.094-.36.314-.482.824-.123.513-.141 1.229-.013 2.119.016.114.035.23.056.349a21.543 21.543 0 0 1 2.14-.345c.446-.605.904-1.17 1.368-1.683-.091-.077-.183-.15-.273-.221-.707-.557-1.335-.898-1.84-1.05Zm8.045.006c-.163-.095-.452-.156-.955-.006-.506.15-1.134.492-1.84 1.049-.091.07-.184.144-.275.221a21.56 21.56 0 0 1 1.368 1.683c.747.083 1.464.199 2.14.345.021-.119.04-.235.057-.349.128-.89.11-1.606-.013-2.12-.121-.51-.319-.73-.482-.823ZM11.887 7 12 7h.112A17.69 17.69 0 0 0 12 6.874L11.887 7Z"
       clipRule="evenodd"

package/src/icons/app/ArrowDownDash.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgArrowDownDash = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m13.5 17.5 5-5 2 2L12 23l-8.5-8.5 2-2 5 5V7h3v10.5ZM16 5H8V2h8v3Z"
+    />
+  </svg>
+);
+export default SvgArrowDownDash;

package/src/icons/app/Atom.tsx

@@ -10,7 +10,7 @@ const SvgAtom = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      fill="currentColor"
+      fill="#000"
       fillRule="evenodd"
       d="M14.974 2.284c.831-.248 1.733-.268 2.526.19.793.458 1.227 1.249 1.428 2.093.2.841.196 1.827.047 2.866-.029.196-.065.396-.104.599.196.068.387.137.571.21.975.39 1.83.88 2.46 1.474C22.531 10.313 23 11.084 23 12c0 .915-.468 1.687-1.099 2.283-.628.594-1.484 1.084-2.459 1.473-.184.074-.375.143-.57.211.038.204.074.404.103.6.15 1.039.153 2.025-.047 2.866-.201.844-.635 1.635-1.428 2.093-.793.458-1.695.438-2.526.19-.83-.247-1.681-.743-2.506-1.392a12.997 12.997 0 0 1-.468-.389c-.157.136-.312.266-.468.389-.825.649-1.677 1.145-2.506 1.392-.831.248-1.733.268-2.526-.19-.793-.458-1.227-1.249-1.428-2.093-.2-.841-.196-1.827-.047-2.866.029-.196.064-.396.103-.6a13.01 13.01 0 0 1-.57-.21c-.975-.39-1.83-.88-2.46-1.474C1.469 13.687 1 12.915 1 12c0-.916.468-1.687 1.099-2.284.628-.594 1.484-1.083 2.459-1.473.184-.074.374-.143.57-.211-.04-.203-.074-.403-.103-.599-.15-1.039-.153-2.025.047-2.866.201-.844.635-1.635 1.428-2.093.793-.458 1.695-.438 2.526-.19.83.247 1.681.743 2.506 1.392.156.123.312.253.468.388.156-.135.312-.265.468-.388.825-.649 1.677-1.145 2.506-1.392ZM7.06 16.502a10.7 10.7 0 0 0-.056.35c-.128.89-.11 1.605.013 2.118.121.51.319.73.482.825.163.094.452.155.955.005.506-.15 1.134-.492 1.84-1.049.092-.07.182-.146.274-.223a21.574 21.574 0 0 1-1.368-1.683 21.558 21.558 0 0 1-2.14-.343Zm9.878 0c-.677.145-1.394.26-2.141.343a21.577 21.577 0 0 1-1.368 1.683c.092.077.183.152.274.224.707.556 1.335.898 1.84 1.048.504.15.793.089.956-.006.163-.094.36-.314.482-.824.123-.513.141-1.229.013-2.119a10.715 10.715 0 0 0-.056-.35ZM12 17l-.114-.002.113.127.114-.127L12 17Zm0-8c-.582 0-1.15.022-1.698.061A23.841 23.841 0 0 0 8.605 12a23.888 23.888 0 0 0 1.697 2.939 23.855 23.855 0 0 0 3.395 0 23.915 23.915 0 0 0 1.697-2.94 23.902 23.902 0 0 0-1.697-2.937A23.853 23.853 0 0 0 12 9Zm4.33 5.5c-.019.033-.04.065-.058.098l.168-.035-.054-.163c-.02.033-.037.067-.056.1Zm-8.77.063.168.034-.058-.097-.057-.1-.053.163Zm10.808-4.59c-.212.66-.47 1.338-.772 2.027.301.688.56 1.366.772 2.025.113-.041.224-.082.331-.125.835-.334 1.445-.708 1.828-1.07.381-.36.473-.642.473-.83 0-.19-.092-.47-.473-.83-.383-.363-.993-.737-1.828-1.07a10.657 10.657 0 0 0-.33-.127Zm-12.737 0c-.113.041-.223.083-.33.126-.835.334-1.445.708-1.828 1.07-.381.36-.473.642-.473.83 0 .19.092.47.473.83.383.363.993.737 1.828 1.071.107.043.217.084.33.125.212-.659.471-1.337.772-2.025a21.546 21.546 0 0 1-.772-2.027Zm1.929-.537.053.162.057-.098.058-.098-.168.034Zm8.77.064.056.098.053-.162-.168-.035.06.099ZM8.455 4.2c-.503-.15-.792-.089-.955.006-.163.094-.36.314-.482.824-.123.513-.141 1.229-.013 2.119.016.114.035.23.056.349a21.543 21.543 0 0 1 2.14-.345c.446-.605.904-1.17 1.368-1.683-.091-.077-.183-.15-.273-.221-.707-.557-1.335-.898-1.84-1.05Zm8.045.006c-.163-.095-.452-.156-.955-.006-.506.15-1.134.492-1.84 1.049-.091.07-.184.144-.275.221a21.56 21.56 0 0 1 1.368 1.683c.747.083 1.464.199 2.14.345.021-.119.04-.235.057-.349.128-.89.11-1.606-.013-2.12-.121-.51-.319-.73-.482-.823ZM11.887 7 12 7h.112A17.69 17.69 0 0 0 12 6.874L11.887 7Z"
       clipRule="evenodd"

package/src/icons/app/index.ts

@@ -1,6 +1,7 @@
 export { default as ArrowCircleIcon } from "./ArrowCircle";
 export { default as ArrowDownIcon } from "./ArrowDown";
 export { default as ArrowDownCircleIcon } from "./ArrowDownCircle";
+export { default as ArrowDownDashIcon } from "./ArrowDownDash";
 export { default as ArrowDownOnSquareIcon } from "./ArrowDownOnSquare";
 export { default as ArrowDownSIcon } from "./ArrowDownS";
 export { default as ArrowGoBackIcon } from "./ArrowGoBack";

package/src/icons/src/app/arrow-down-dash.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 17.5L18.5 12.5L20.5 14.5L12 23L3.5 14.5L5.5 12.5L10.5 17.5V7H13.5V17.5ZM16 5H8V2H16V5Z" fill="#111418"/>
+</svg>

package/src/logo/platforms/Discord.tsx

@@ -1,20 +1,18 @@
 import type { SVGProps } from "react";
 import * as React from "react";
-
 const SvgDiscord = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
     {...props}
   >
     <path
-      d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
-      fill="currentColor"
+      fill="#5865F2"
+      d="M18.942 5.256A16.668 16.668 0 0 0 14.816 4c-.178.311-.386.73-.529 1.063a15.632 15.632 0 0 0-4.573 0A11.218 11.218 0 0 0 9.18 4c-1.448.243-2.834.67-4.129 1.26-2.611 3.823-3.319 7.55-2.965 11.226a16.704 16.704 0 0 0 5.06 2.512c.408-.543.771-1.12 1.084-1.729-.596-.22-1.167-.49-1.706-.805a8.44 8.44 0 0 0 .418-.32c3.29 1.49 6.866 1.49 10.118 0 .137.11.277.218.418.32-.54.316-1.113.587-1.71.807.314.607.675 1.186 1.084 1.729a16.668 16.668 0 0 0 5.064-2.514c.415-4.26-.71-7.955-2.973-11.23Zm-10.264 8.97c-.988 0-1.798-.894-1.798-1.982s.792-1.983 1.798-1.983c1.005 0 1.815.893 1.798 1.983.001 1.088-.793 1.982-1.798 1.982Zm6.644 0c-.988 0-1.798-.894-1.798-1.982s.793-1.983 1.798-1.983c1.006 0 1.816.893 1.798 1.983 0 1.088-.793 1.982-1.798 1.982Z"
     />
   </svg>
 );
-
 export default SvgDiscord;

package/src/logo/src/platforms/Discord.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9419 5.25625C17.6473 4.66937 16.263 4.24286 14.8157 4C14.638 4.31134 14.4304 4.7301 14.2872 5.06322C12.7487 4.83906 11.2245 4.83906 9.7143 5.06322C9.57116 4.7301 9.3588 4.31134 9.17947 4C7.73067 4.24286 6.3448 4.67094 5.05016 5.25935C2.43887 9.08252 1.73099 12.8107 2.08493 16.486C3.81688 17.7391 5.49534 18.5003 7.14548 18.9985C7.55291 18.4552 7.91628 17.8777 8.22931 17.269C7.63313 17.0495 7.06211 16.7787 6.52256 16.4642C6.6657 16.3615 6.80571 16.254 6.94098 16.1435C10.2318 17.6348 13.8074 17.6348 17.0589 16.1435C17.1958 16.254 17.3358 16.3615 17.4774 16.4642C16.9362 16.7802 16.3637 17.0511 15.7675 17.2706C16.0805 17.8777 16.4423 18.4567 16.8513 19C18.503 18.5019 20.183 17.7407 21.915 16.486C22.3303 12.2254 21.2056 8.53146 18.9419 5.25625ZM8.67765 14.2257C7.68977 14.2257 6.87963 13.3322 6.87963 12.2441C6.87963 11.156 7.67247 10.2609 8.67765 10.2609C9.68285 10.2609 10.493 11.1544 10.4757 12.2441C10.4772 13.3322 9.68285 14.2257 8.67765 14.2257ZM15.3223 14.2257C14.3344 14.2257 13.5243 13.3322 13.5243 12.2441C13.5243 11.156 14.3171 10.2609 15.3223 10.2609C16.3275 10.2609 17.1376 11.1544 17.1203 12.2441C17.1203 13.3322 16.3275 14.2257 15.3223 14.2257Z" fill="#5865F2"/>
+</svg>

package/src/stories/DataTable.stories.tsx

@@ -52,6 +52,7 @@ type Data = {
   >;
   id?: number;
   roundedAvatar?: boolean;
+  avatarStack?: { name: string; visual?: string | React.ReactNode }[];
 };
 
 type TransformedData = {
@@ -181,6 +182,130 @@ 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",
@@ -770,3 +895,113 @@ 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,3 +51,15 @@
     --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,6 +2,18 @@
 @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;