@dust-tt/sparkle 0.2.609 → 0.2.611-rc-1

package/dist/esm/components/ToolCard.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 export interface ToolCardProps {
     icon: React.ComponentType;
     label: string;
-    description: string;
+    description: string | React.ReactNode;
     isSelected: boolean;
     canAdd: boolean;
     cantAddReason?: string;

package/dist/esm/components/ToolCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCard.d.ts","sourceRoot":"","sources":["../../../src/components/ToolCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,sFA0DpB,CAAC"}
+{"version":3,"file":"ToolCard.d.ts","sourceRoot":"","sources":["../../../src/components/ToolCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,sFA0DpB,CAAC"}

package/dist/esm/components/ToolCard.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { Avatar, Button, Card, Chip } from "../components";
+import { TruncatedText } from "../components/TruncatedText";
 import { PlusIcon } from "../icons/app";
 import { cn } from "../lib/utils";
 var FADE_TRANSITION_CLASSES = "s-transition-opacity s-duration-300 s-ease-in-out";
@@ -14,7 +15,7 @@ export var ToolCard = React.forwardRef(function (_a, ref) {
                     isSelected && (React.createElement(Chip, { size: "xs", color: "green", label: "ADDED", className: cn(FADE_TRANSITION_CLASSES, "s-opacity-100") }))),
                 canAdd && (React.createElement(Button, { size: "xs", variant: "outline", icon: PlusIcon, label: "Add", className: cn(FADE_TRANSITION_CLASSES, "s-flex-shrink-0") })),
                 cantAddReason && (React.createElement("div", { className: "s-flex-shrink-0 s-text-xs s-italic s-text-muted-foreground dark:s-text-muted-foreground-night" }, cantAddReason))),
-            React.createElement("div", { className: "s-line-clamp-2 s-h-10 s-overflow-hidden s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night" }, description))));
+            React.createElement(TruncatedText, { className: "s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night" }, description))));
 });
 ToolCard.displayName = "ToolCard";
 //# sourceMappingURL=ToolCard.js.map

package/dist/esm/components/ToolCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCard.js","sourceRoot":"","sources":["../../../src/components/ToolCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,IAAM,uBAAuB,GAC3B,mDAAmD,CAAC;AAatD,MAAM,CAAC,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,UACE,EASC,EACD,GAAG;QATD,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,OAAO,aAAA,EACP,SAAS,eAAA;IAIX,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAC7C,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,MAAM,EACjB,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC;QAExC,6BAAK,SAAS,EAAC,4BAA4B;YACzC,6BAAK,SAAS,EAAC,uDAAuD;gBACpE,6BAAK,SAAS,EAAC,+BAA+B;oBAC5C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;oBAChC,8BAAM,SAAS,EAAC,yBAAyB,IAAE,KAAK,CAAQ;oBACvD,UAAU,IAAI,CACb,oBAAC,IAAI,IACH,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,OAAO,EACb,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,eAAe,CAAC,GACvD,CACH,CACG;gBACL,MAAM,IAAI,CACT,oBAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,KAAK,EACX,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,iBAAiB,CAAC,GACzD,CACH;gBACA,aAAa,IAAI,CAChB,6BAAK,SAAS,EAAC,+FAA+F,IAC3G,aAAa,CACV,CACP,CACG;YACN,6BAAK,SAAS,EAAC,8GAA8G,IAC1H,WAAW,CACR,CACF,CACD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
+{"version":3,"file":"ToolCard.js","sourceRoot":"","sources":["../../../src/components/ToolCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,IAAM,uBAAuB,GAC3B,mDAAmD,CAAC;AAatD,MAAM,CAAC,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,UACE,EASC,EACD,GAAG;QATD,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,OAAO,aAAA,EACP,SAAS,eAAA;IAIX,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAC7C,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,MAAM,EACjB,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC;QAExC,6BAAK,SAAS,EAAC,4BAA4B;YACzC,6BAAK,SAAS,EAAC,uDAAuD;gBACpE,6BAAK,SAAS,EAAC,+BAA+B;oBAC5C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;oBAChC,8BAAM,SAAS,EAAC,yBAAyB,IAAE,KAAK,CAAQ;oBACvD,UAAU,IAAI,CACb,oBAAC,IAAI,IACH,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,OAAO,EACb,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,eAAe,CAAC,GACvD,CACH,CACG;gBACL,MAAM,IAAI,CACT,oBAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,KAAK,EACX,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,iBAAiB,CAAC,GACzD,CACH;gBACA,aAAa,IAAI,CAChB,6BAAK,SAAS,EAAC,+FAA+F,IAC3G,aAAa,CACV,CACP,CACG;YACN,oBAAC,aAAa,IAAC,SAAS,EAAC,sEAAsE,IAC5F,WAAW,CACE,CACZ,CACD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/esm/components/Tooltip.d.ts

@@ -5,6 +5,8 @@ declare const TooltipRoot: React.FC<TooltipPrimitive.TooltipProps>;
 declare const TooltipPortal: React.FC<TooltipPrimitive.TooltipPortalProps>;
 declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 interface TooltipContentProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
+    mountPortal?: boolean;
+    mountPortalContainer?: HTMLElement;
 }
 declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
 interface TooltipProps extends TooltipContentProps {

package/dist/esm/components/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,eAAe,iDAA4B,CAAC;AAElD,QAAA,MAAM,WAAW,yCAAwB,CAAC;AAC1C,QAAA,MAAM,aAAa,+CAA0B,CAAC;AAE9C,QAAA,MAAM,cAAc,gHAA2B,CAAC;AAEhD,UAAU,mBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC;CAAG;AAE5E,QAAA,MAAM,cAAc,4FAmBlB,CAAC;AAEH,UAAU,YAAa,SAAQ,mBAAmB;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,OAAO,qFAkBZ,CAAC;AAIF,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,eAAe,EACf,WAAW,EACX,cAAc,GACf,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,QAAA,MAAM,eAAe,iDAA4B,CAAC;AAElD,QAAA,MAAM,WAAW,yCAAwB,CAAC;AAC1C,QAAA,MAAM,aAAa,+CAA0B,CAAC;AAE9C,QAAA,MAAM,cAAc,gHAA2B,CAAC;AAEhD,UAAU,mBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,WAAW,CAAC;CACpC;AAED,QAAA,MAAM,cAAc,4FA2ClB,CAAC;AAEH,UAAU,YAAa,SAAQ,mBAAmB;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,OAAO,qFAgBZ,CAAC;AAIF,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,eAAe,EACf,WAAW,EACX,cAAc,GACf,CAAC"}

package/dist/esm/components/Tooltip.js

@@ -1,22 +1,31 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
+import { useEffect, useState } from "react";
 import { classNames } from "../lib/utils";
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
 var TooltipPortal = TooltipPrimitive.Portal;
 var TooltipTrigger = TooltipPrimitive.Trigger;
 var TooltipContent = React.forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.sideOffset, sideOffset = _b === void 0 ? 4 : _b, props = __rest(_a, ["className", "sideOffset"]);
-    return (React.createElement(TooltipPrimitive.Content, __assign({ ref: ref, sideOffset: sideOffset, className: classNames("s-z-50 s-max-w-sm s-overflow-hidden s-whitespace-pre-wrap s-break-words s-rounded-md s-border", "s-bg-background dark:s-bg-background-night", "s-text-foreground dark:s-text-foreground-night", "s-border-border dark:s-border-border-night", "s-px-3 s-py-1.5 s-text-sm s-shadow-md", "s-animate-in s-fade-in-0 s-zoom-in-95", "data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=closed]:s-zoom-out-95 data-[side=bottom]:s-slide-in-from-top-2 data-[side=left]:s-slide-in-from-right-2 data-[side=right]:s-slide-in-from-left-2 data-[side=top]:s-slide-in-from-bottom-2", className || "") }, props)));
+    var className = _a.className, _b = _a.sideOffset, sideOffset = _b === void 0 ? 4 : _b, _c = _a.mountPortal, mountPortal = _c === void 0 ? true : _c, mountPortalContainer = _a.mountPortalContainer, props = __rest(_a, ["className", "sideOffset", "mountPortal", "mountPortalContainer"]);
+    var content = (React.createElement(TooltipPrimitive.Content, __assign({ ref: ref, sideOffset: sideOffset, className: classNames("s-z-50 s-max-w-sm s-overflow-hidden s-whitespace-pre-wrap s-break-words s-rounded-md s-border", "s-bg-background dark:s-bg-background-night", "s-text-foreground dark:s-text-foreground-night", "s-border-border dark:s-border-border-night", "s-px-3 s-py-1.5 s-text-sm s-shadow-md", "s-animate-in s-fade-in-0 s-zoom-in-95", "data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=closed]:s-zoom-out-95 data-[side=bottom]:s-slide-in-from-top-2 data-[side=left]:s-slide-in-from-right-2 data-[side=right]:s-slide-in-from-left-2 data-[side=top]:s-slide-in-from-bottom-2", className || "") }, props)));
+    var _d = __read(useState(mountPortalContainer), 2), container = _d[0], setContainer = _d[1];
+    useEffect(function () {
+        if (mountPortal && !container) {
+            var dialogElements = document.querySelectorAll(".s-sheet[role=dialog][data-state=open]");
+            var defaultContainer = dialogElements[dialogElements.length - 1];
+            setContainer(defaultContainer);
+        }
+    }, [mountPortal, container]);
+    return mountPortal ? (React.createElement(TooltipPrimitive.Portal, { container: container }, content)) : (content);
 });
 var Tooltip = React.forwardRef(function (_a, ref) {
     var trigger = _a.trigger, _b = _a.tooltipTriggerAsChild, tooltipTriggerAsChild = _b === void 0 ? false : _b, label = _a.label, props = __rest(_a, ["trigger", "tooltipTriggerAsChild", "label"]);
     return (React.createElement(TooltipProvider, null,
         React.createElement(TooltipRoot, null,
             React.createElement(TooltipTrigger, { asChild: tooltipTriggerAsChild }, trigger),
-            React.createElement(TooltipPortal, null,
-                React.createElement(TooltipContent, __assign({}, props, { ref: ref }), label)))));
+            React.createElement(TooltipContent, __assign({}, props, { ref: ref }), label))));
 });
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, };

package/dist/esm/components/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,IAAM,eAAe,GAAG,gBAAgB,CAAC,QAAQ,CAAC;AAElD,IAAM,WAAW,GAAG,gBAAgB,CAAC,IAAI,CAAC;AAC1C,IAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,CAAC;AAE9C,IAAM,cAAc,GAAG,gBAAgB,CAAC,OAAO,CAAC;AAKhD,IAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAGrC,UAAC,EAAuC,EAAE,GAAG;IAA1C,IAAA,SAAS,eAAA,EAAE,kBAAc,EAAd,UAAU,mBAAG,CAAC,KAAA,EAAK,KAAK,cAArC,2BAAuC,CAAF;IAAY,OAAA,CAClD,oBAAC,gBAAgB,CAAC,OAAO,aACvB,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,UAAU,CACnB,+FAA+F,EAC/F,4CAA4C,EAC5C,gDAAgD,EAChD,4CAA4C,EAC5C,uCAAuC,EACvC,uCAAuC,EACvC,0QAA0Q,EAC1Q,SAAS,IAAI,EAAE,CAChB,IACG,KAAK,EACT,CACH,CAAA;CAAA,CAAC,CAAC;AASH,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAC9B,UACE,EAAyE,EACzE,GAAG;IADD,IAAA,OAAO,aAAA,EAAE,6BAA6B,EAA7B,qBAAqB,mBAAG,KAAK,KAAA,EAAE,KAAK,WAAA,EAAK,KAAK,cAAzD,6CAA2D,CAAF;IAEtD,OAAA,CACH,oBAAC,eAAe;QACd,oBAAC,WAAW;YACV,oBAAC,cAAc,IAAC,OAAO,EAAE,qBAAqB,IAC3C,OAAO,CACO;YACjB,oBAAC,aAAa;gBACZ,oBAAC,cAAc,eAAK,KAAK,IAAE,GAAG,EAAE,GAAG,KAChC,KAAK,CACS,CACH,CACJ,CACE,CACnB,CAAA;CAAA,CACF,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,CAAC;AAElE,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,eAAe,EACf,WAAW,EACX,cAAc,GACf,CAAC"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,IAAM,eAAe,GAAG,gBAAgB,CAAC,QAAQ,CAAC;AAElD,IAAM,WAAW,GAAG,gBAAgB,CAAC,IAAI,CAAC;AAC1C,IAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,CAAC;AAE9C,IAAM,cAAc,GAAG,gBAAgB,CAAC,OAAO,CAAC;AAQhD,IAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAGrC,UAAC,EAAiF,EAAE,GAAG;IAApF,IAAA,SAAS,eAAA,EAAE,kBAAc,EAAd,UAAU,mBAAG,CAAC,KAAA,EAAE,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA,EAAE,oBAAoB,0BAAA,EAAK,KAAK,cAA/E,kEAAiF,CAAF;IAChF,IAAM,OAAO,GAAG,CACd,oBAAC,gBAAgB,CAAC,OAAO,aACvB,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,UAAU,CACnB,+FAA+F,EAC/F,4CAA4C,EAC5C,gDAAgD,EAChD,4CAA4C,EAC5C,uCAAuC,EACvC,uCAAuC,EACvC,0QAA0Q,EAC1Q,SAAS,IAAI,EAAE,CAChB,IACG,KAAK,EACT,CACH,CAAC;IAEI,IAAA,KAAA,OAA4B,QAAQ,CACxC,oBAAoB,CACrB,IAAA,EAFM,SAAS,QAAA,EAAE,YAAY,QAE7B,CAAC;IAEF,SAAS,CAAC;QACR,IAAI,WAAW,IAAI,CAAC,SAAS,EAAE,CAAC;YAC9B,IAAM,cAAc,GAAG,QAAQ,CAAC,gBAAgB,CAC9C,wCAAwC,CACzC,CAAC;YACF,IAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACnE,YAAY,CAAC,gBAAgB,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC;IAE7B,OAAO,WAAW,CAAC,CAAC,CAAC,CACnB,oBAAC,gBAAgB,CAAC,MAAM,IAAC,SAAS,EAAE,SAAS,IAC1C,OAAO,CACgB,CAC3B,CAAC,CAAC,CAAC,CACF,OAAO,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AASH,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAC9B,UACE,EAAyE,EACzE,GAAG;IADD,IAAA,OAAO,aAAA,EAAE,6BAA6B,EAA7B,qBAAqB,mBAAG,KAAK,KAAA,EAAE,KAAK,WAAA,EAAK,KAAK,cAAzD,6CAA2D,CAAF;IAEtD,OAAA,CACH,oBAAC,eAAe;QACd,oBAAC,WAAW;YACV,oBAAC,cAAc,IAAC,OAAO,EAAE,qBAAqB,IAC3C,OAAO,CACO;YACjB,oBAAC,cAAc,eAAK,KAAK,IAAE,GAAG,EAAE,GAAG,KAChC,KAAK,CACS,CACL,CACE,CACnB,CAAA;CAAA,CACF,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,CAAC;AAElE,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,eAAe,EACf,WAAW,EACX,cAAc,GACf,CAAC"}

package/dist/esm/components/TruncatedText.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface TruncatedTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: string | React.ReactNode;
+    lineClamp?: number;
+}
+export declare const TruncatedText: React.FC<TruncatedTextProps>;
+export {};
+//# sourceMappingURL=TruncatedText.d.ts.map

package/dist/esm/components/TruncatedText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TruncatedText.d.ts","sourceRoot":"","sources":["../../../src/components/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4CtD,CAAC"}

package/dist/esm/components/TruncatedText.js

@@ -0,0 +1,25 @@
+import { __assign, __read, __rest } from "tslib";
+import React from "react";
+import { Tooltip } from "../components/Tooltip";
+import { cn } from "../lib/utils";
+export var TruncatedText = function (_a) {
+    var children = _a.children, className = _a.className, _b = _a.lineClamp, lineClamp = _b === void 0 ? 2 : _b, props = __rest(_a, ["children", "className", "lineClamp"]);
+    var _c = __read(React.useState(false), 2), isTruncated = _c[0], setIsTruncated = _c[1];
+    var textRef = React.useRef(null);
+    // Check if content is actually truncated by comparing scroll height to
+    // client height
+    // This ensures we only show the tooltip when text is cut off by line-clamp-
+    React.useLayoutEffect(function () {
+        var element = textRef.current;
+        if (element) {
+            var isOverflowing = element.scrollHeight > element.clientHeight;
+            setIsTruncated(isOverflowing);
+        }
+    });
+    var textElement = (React.createElement("div", __assign({ ref: textRef, className: cn("s-line-clamp-".concat(lineClamp, " s-cursor-pointer s-select-none"), className) }, props), children));
+    if (isTruncated) {
+        return (React.createElement(Tooltip, { trigger: textElement, label: children, tooltipTriggerAsChild: true }));
+    }
+    return textElement;
+};
+//# sourceMappingURL=TruncatedText.js.map

package/dist/esm/components/TruncatedText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../../../src/components/TruncatedText.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAOxC,MAAM,CAAC,IAAM,aAAa,GAAiC,UAAC,EAK3D;IAJC,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,iBAAa,EAAb,SAAS,mBAAG,CAAC,KAAA,EACV,KAAK,cAJkD,sCAK3D,CADS;IAEF,IAAA,KAAA,OAAgC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAApD,WAAW,QAAA,EAAE,cAAc,QAAyB,CAAC;IAC5D,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEnD,uEAAuE;IACvE,gBAAgB;IAChB,4EAA4E;IAC5E,KAAK,CAAC,eAAe,CAAC;QACpB,IAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;QAChC,IAAI,OAAO,EAAE,CAAC;YACZ,IAAM,aAAa,GAAG,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;YAClE,cAAc,CAAC,aAAa,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAM,WAAW,GAAG,CAClB,sCACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,EAAE,CACX,uBAAgB,SAAS,oCAAiC,EAC1D,SAAS,CACV,IACG,KAAK,GAER,QAAQ,CACL,CACP,CAAC;IAEF,IAAI,WAAW,EAAE,CAAC;QAChB,OAAO,CACL,oBAAC,OAAO,IACN,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,QAAQ,EACf,qBAAqB,EAAE,IAAI,GAC3B,CACH,CAAC;IACJ,CAAC;IAED,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC"}

package/dist/esm/stories/ToolCard.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCard.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,yBAqBpB,CAAC"}
+{"version":3,"file":"ToolCard.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAI/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,yBAsCpB,CAAC"}

package/dist/esm/stories/ToolCard.stories.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { ToolCard } from "../components";
+import { Hoverable } from "../components";
 import { BookOpenIcon, CommandLineIcon } from "../icons/app";
 var meta = {
     title: "Modules/ToolCard",
@@ -8,5 +9,8 @@ var meta = {
 export default meta;
 export var Examples = function () { return (React.createElement("div", { className: "s-grid s-grid-cols-2 s-gap-3" },
     React.createElement(ToolCard, { icon: BookOpenIcon, label: "Image Generation", description: "Agent can generate images (GPT Image 1).", isSelected: false, canAdd: true, onClick: function () { return console.log("Add Image Generation"); } }),
-    React.createElement(ToolCard, { icon: CommandLineIcon, label: "Reasoning", description: "Agent can decide to trigger a reasoning model for complex tasks.", isSelected: true, canAdd: false }))); };
+    React.createElement(ToolCard, { icon: CommandLineIcon, label: "Reasoning", description: React.createElement(React.Fragment, null,
+            "Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks.",
+            " ",
+            React.createElement(Hoverable, { href: "https://example.com/help", target: "_blank", rel: "noopener noreferrer", variant: "primary" }, "the docs")), isSelected: true, canAdd: false }))); };
 //# sourceMappingURL=ToolCard.stories.js.map

package/dist/esm/stories/ToolCard.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCard.stories.js","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEnE,IAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,6BAAK,SAAS,EAAC,8BAA8B;IAE3C,oBAAC,QAAQ,IACP,IAAI,EAAE,YAAY,EAClB,KAAK,EAAC,kBAAkB,EACxB,WAAW,EAAC,0CAA0C,EACtD,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAnC,CAAmC,GAClD;IAGF,oBAAC,QAAQ,IACP,IAAI,EAAE,eAAe,EACrB,KAAK,EAAC,WAAW,EACjB,WAAW,EAAC,kEAAkE,EAC9E,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,KAAK,GACb,CACE,CACP,EArB6B,CAqB7B,CAAC"}
+{"version":3,"file":"ToolCard.stories.js","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEnE,IAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,6BAAK,SAAS,EAAC,8BAA8B;IAE3C,oBAAC,QAAQ,IACP,IAAI,EAAE,YAAY,EAClB,KAAK,EAAC,kBAAkB,EACxB,WAAW,EAAC,0CAA0C,EACtD,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAnC,CAAmC,GAClD;IAGF,oBAAC,QAAQ,IACP,IAAI,EAAE,eAAe,EACrB,KAAK,EAAC,WAAW,EACjB,WAAW,EACT;;YAMyD,GAAG;YAC1D,oBAAC,SAAS,IACR,IAAI,EAAC,0BAA0B,EAC/B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,OAAO,EAAC,SAAS,eAGP,CACX,EAEL,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,KAAK,GACb,CACE,CACP,EAtC6B,CAsC7B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.609",
+  "version": "0.2.611-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/ToolCard.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { Avatar, Button, Card, Chip } from "@sparkle/components/";
+import { TruncatedText } from "@sparkle/components/TruncatedText";
 import { PlusIcon } from "@sparkle/icons/app/";
 import { cn } from "@sparkle/lib/utils";
 
@@ -10,7 +11,7 @@ const FADE_TRANSITION_CLASSES =
 export interface ToolCardProps {
   icon: React.ComponentType;
   label: string;
-  description: string;
+  description: string | React.ReactNode;
   isSelected: boolean;
   canAdd: boolean;
   cantAddReason?: string;
@@ -69,9 +70,9 @@ export const ToolCard = React.forwardRef<HTMLDivElement, ToolCardProps>(
               </div>
             )}
           </div>
-          <div className="s-line-clamp-2 s-h-10 s-overflow-hidden s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night">
+          <TruncatedText className="s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night">
             {description}
-          </div>
+          </TruncatedText>
         </div>
       </Card>
     );

package/src/components/Tooltip.tsx

@@ -1,5 +1,6 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
+import { useEffect, useState } from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
@@ -11,28 +12,55 @@ const TooltipPortal = TooltipPrimitive.Portal;
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
 interface TooltipContentProps
-  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {}
+  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
+  mountPortal?: boolean;
+  mountPortalContainer?: HTMLElement;
+}
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   TooltipContentProps
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={classNames(
-      "s-z-50 s-max-w-sm s-overflow-hidden s-whitespace-pre-wrap s-break-words s-rounded-md s-border",
-      "s-bg-background dark:s-bg-background-night",
-      "s-text-foreground dark:s-text-foreground-night",
-      "s-border-border dark:s-border-border-night",
-      "s-px-3 s-py-1.5 s-text-sm s-shadow-md",
-      "s-animate-in s-fade-in-0 s-zoom-in-95",
-      "data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=closed]:s-zoom-out-95 data-[side=bottom]:s-slide-in-from-top-2 data-[side=left]:s-slide-in-from-right-2 data-[side=right]:s-slide-in-from-left-2 data-[side=top]:s-slide-in-from-bottom-2",
-      className || ""
-    )}
-    {...props}
-  />
-));
+>(({ className, sideOffset = 4, mountPortal = true, mountPortalContainer, ...props }, ref) => {
+  const content = (
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={classNames(
+        "s-z-50 s-max-w-sm s-overflow-hidden s-whitespace-pre-wrap s-break-words s-rounded-md s-border",
+        "s-bg-background dark:s-bg-background-night",
+        "s-text-foreground dark:s-text-foreground-night",
+        "s-border-border dark:s-border-border-night",
+        "s-px-3 s-py-1.5 s-text-sm s-shadow-md",
+        "s-animate-in s-fade-in-0 s-zoom-in-95",
+        "data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=closed]:s-zoom-out-95 data-[side=bottom]:s-slide-in-from-top-2 data-[side=left]:s-slide-in-from-right-2 data-[side=right]:s-slide-in-from-left-2 data-[side=top]:s-slide-in-from-bottom-2",
+        className || ""
+      )}
+      {...props}
+    />
+  );
+
+  const [container, setContainer] = useState<Element | undefined>(
+    mountPortalContainer
+  );
+
+  useEffect(() => {
+    if (mountPortal && !container) {
+      const dialogElements = document.querySelectorAll(
+        ".s-sheet[role=dialog][data-state=open]"
+      );
+      const defaultContainer = dialogElements[dialogElements.length - 1];
+      setContainer(defaultContainer);
+    }
+  }, [mountPortal, container]);
+
+  return mountPortal ? (
+    <TooltipPrimitive.Portal container={container}>
+      {content}
+    </TooltipPrimitive.Portal>
+  ) : (
+    content
+  );
+});
 
 interface TooltipProps extends TooltipContentProps {
   trigger: React.ReactNode;
@@ -51,11 +79,9 @@ const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
         <TooltipTrigger asChild={tooltipTriggerAsChild}>
           {trigger}
         </TooltipTrigger>
-        <TooltipPortal>
-          <TooltipContent {...props} ref={ref}>
-            {label}
-          </TooltipContent>
-        </TooltipPortal>
+        <TooltipContent {...props} ref={ref}>
+          {label}
+        </TooltipContent>
       </TooltipRoot>
     </TooltipProvider>
   )

package/src/components/TruncatedText.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+import { Tooltip } from "@sparkle/components/Tooltip";
+import { cn } from "@sparkle/lib/utils";
+
+interface TruncatedTextProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: string | React.ReactNode;
+  lineClamp?: number;
+}
+
+export const TruncatedText: React.FC<TruncatedTextProps> = ({
+  children,
+  className,
+  lineClamp = 2,
+  ...props
+}) => {
+  const [isTruncated, setIsTruncated] = React.useState(false);
+  const textRef = React.useRef<HTMLDivElement>(null);
+
+  // Check if content is actually truncated by comparing scroll height to
+  // client height
+  // This ensures we only show the tooltip when text is cut off by line-clamp-
+  React.useLayoutEffect(() => {
+    const element = textRef.current;
+    if (element) {
+      const isOverflowing = element.scrollHeight > element.clientHeight;
+      setIsTruncated(isOverflowing);
+    }
+  });
+
+  const textElement = (
+    <div
+      ref={textRef}
+      className={cn(
+        `s-line-clamp-${lineClamp} s-cursor-pointer s-select-none`,
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+
+  if (isTruncated) {
+    return (
+      <Tooltip
+        trigger={textElement}
+        label={children}
+        tooltipTriggerAsChild={true}
+      />
+    );
+  }
+
+  return textElement;
+};

package/src/stories/ToolCard.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta } from "@storybook/react";
 import React from "react";
 
 import { ToolCard } from "@sparkle/components";
+import { Hoverable } from "@sparkle/components";
 import { BookOpenIcon, CommandLineIcon } from "@sparkle/icons/app";
 
 const meta: Meta<typeof ToolCard> = {
@@ -27,7 +28,24 @@ export const Examples = () => (
     <ToolCard
       icon={CommandLineIcon}
       label="Reasoning"
-      description="Agent can decide to trigger a reasoning model for complex tasks."
+      description={
+        <>
+          Agent can decide to trigger a reasoning model for complex tasks. Agent
+          can decide to trigger a reasoning model for complex tasks. Agent can
+          decide to trigger a reasoning model for complex tasks. Agent can
+          decide to trigger a reasoning model for complex tasks. Agent can
+          decide to trigger a reasoning model for complex tasks. Agent can
+          decide to trigger a reasoning model for complex tasks.{" "}
+          <Hoverable
+            href="https://example.com/help"
+            target="_blank"
+            rel="noopener noreferrer"
+            variant="primary"
+          >
+            the docs
+          </Hoverable>
+        </>
+      }
       isSelected={true}
       canAdd={false}
     />