@dust-tt/sparkle 0.2.634 → 0.2.636-rc-1

package/src/components/DataTable.tsx

@@ -338,6 +338,7 @@ export interface ScrollableDataTableProps<TData extends TBaseData>
   maxHeight?: string | boolean;
   onLoadMore?: () => void;
   isLoading?: boolean;
+  containerRef?: React.Ref<HTMLDivElement>;
 }
 
 // cellHeight in pixels
@@ -361,14 +362,29 @@ export function ScrollableDataTable<TData extends TBaseData>({
   enableRowSelection,
   enableMultiRowSelection = true,
   getRowId,
+  containerRef,
 }: ScrollableDataTableProps<TData>) {
   const windowSize = useWindowSize();
-  const tableContainerRef = useRef<HTMLDivElement>(null);
   const loadMoreRef = useRef<HTMLDivElement>(null);
   const [tableWidth, setTableWidth] = useState(0);
+  const tableContainerRef = useRef<HTMLDivElement | null>(null);
 
   const isSorting = !!setSorting;
 
+  // Handle container ref
+  const setRef = (element: HTMLDivElement | null) => {
+    tableContainerRef.current = element;
+    if (containerRef) {
+      if (typeof containerRef === "function") {
+        containerRef(element);
+      } else if ("current" in containerRef) {
+        (
+          containerRef as React.MutableRefObject<HTMLDivElement | null>
+        ).current = element;
+      }
+    }
+  };
+
   // Monitor table width changes
   useEffect(() => {
     if (!tableContainerRef.current) {
@@ -520,7 +536,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
             ? maxHeight
             : "s-max-h-100"
       )}
-      ref={tableContainerRef}
+      ref={setRef}
     >
       <div className="s-relative">
         <DataTable.Root className="s-w-full s-table-fixed">

package/src/icons/actions/Atom.tsx

@@ -10,7 +10,7 @@ const SvgAtom = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      fill="#000"
+      fill="currentColor"
       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/Atom.tsx

@@ -10,7 +10,7 @@ const SvgAtom = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      fill="#000"
+      fill="currentColor"
       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/stories/ConversationMessage.stories.tsx

@@ -2,11 +2,14 @@ import type { Meta } from "@storybook/react";
 import React from "react";
 
 import {
+  ArrowPathIcon,
+  AtomIcon,
   Avatar,
   Button,
   Citation,
   CitationIcons,
   CitationTitle,
+  ClipboardIcon,
   ClockIcon,
   ConversationContainer,
   ConversationMessage,
@@ -180,3 +183,106 @@ footnote [^1]
 | October 31  | 19                    | 10                   |
 
 `;
+
+export const ConversationHandoffExample = () => {
+  return (
+    <>
+      <div className="s-flex s-w-full s-justify-center s-gap-6">
+        <ConversationContainer>
+          <ConversationMessage
+            type="user"
+            name="Daph"
+            pictureUrl="https://avatars.githubusercontent.com/u/3803406?v=4"
+            timestamp="17:09"
+          >
+            Can you provide an overview of the major frontier language models
+            and their specificities. I'm curious about technical details,
+            benchmarks, business etc.. I need a complete picture
+          </ConversationMessage>
+
+          <ConversationMessage
+            type="agent"
+            name="@soupinou"
+            pictureUrl="https://avatars.githubusercontent.com/u/138893015?&v=4"
+            buttons={[
+              <Button
+                icon={ClipboardIcon}
+                onClick={() => {}}
+                size="xs"
+                variant={"outline"}
+              />,
+              <Button
+                icon={ArrowPathIcon}
+                onClick={() => {}}
+                size="xs"
+                variant={"outline"}
+              />,
+            ]}
+          >
+            <Markdown
+              content={
+                "Let me use Deep Dive to explore this comprehensively. I'll need some time to gather all the information."
+              }
+            />
+          </ConversationMessage>
+
+          <ConversationMessage
+            type="agentHandoff"
+            name="Deep Dive"
+            renderName={(name) => (
+              <span className="s-inline-flex s-items-center s-text-faint dark:s-text-faint-night">
+                <Icon
+                  visual={AtomIcon}
+                  size="sm"
+                  className="s-text-element-600 dark:s-text-element-600-dark"
+                />
+                <span className="s-ml-1">{name}</span>
+              </span>
+            )}
+            citations={[
+              <Citation href="https://www.google.com">
+                <CitationIcons>
+                  <Icon visual={SlackLogo} size="sm" />
+                </CitationIcons>
+                <CitationTitle>
+                  Source: Thread on #general message from @ed
+                </CitationTitle>
+              </Citation>,
+              <Citation href="https://www.google.com">
+                <CitationIcons>
+                  <Icon visual={GithubIcon} size="sm" />
+                </CitationIcons>
+                <CitationTitle>PR from @henry</CitationTitle>
+              </Citation>,
+            ]}
+          >
+            <Markdown content={handoffAnswer} />
+          </ConversationMessage>
+        </ConversationContainer>
+      </div>
+    </>
+  );
+};
+
+const handoffAnswer = `
+**A Complete Technical Overview of Soupinou: The Frontier Feline Model**
+
+Soupinou represents a breakthrough in black cat architecture, featuring a revolutionary single-whisker design that challenges conventional multi-whisker paradigms. This asymmetric sensor configuration demonstrates remarkable efficiency gains in cuddle detection and lap-finding algorithms.
+
+**Technical Specifications:**
+- Processing unit: One (1) whisker sensor array
+- Color depth: Maximum black saturation
+- Purr frequency: Variable, optimized for human dopamine release
+- Cuddle latency: Near-zero response time
+
+**Benchmark Performance:**
+- Achieves 99.7% accuracy in identifying the exact moment you sit down
+- Outperforms all competitors in the "appearing from nowhere when you're sad" metric
+- Sets new industry standards for selective hearing (responds to treat bags but not "get off the counter")
+
+**Business Model:**
+Operates on a simple value exchange - provides unlimited affection in return for food, shelter, and accepting that everything you own now has black fur on it. Market penetration strategy involves strategic placement on keyboards during important work calls.
+
+**Limitations:**
+Occasional system crashes when presented with empty food bowl. Single whisker may cause slight navigation errors when squeezing through spaces designed for two-whiskered models.
+`;