@dust-tt/sparkle 0.2.612-rc-1 → 0.2.612-rc-2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/ToolCard.d.ts +5 -0
- package/dist/esm/components/ToolCard.d.ts.map +1 -1
- package/dist/esm/components/ToolCard.js +18 -11
- package/dist/esm/components/ToolCard.js.map +1 -1
- package/dist/esm/components/Tooltip.d.ts.map +1 -1
- package/dist/esm/components/Tooltip.js.map +1 -1
- package/dist/esm/stories/ToolCard.stories.d.ts.map +1 -1
- package/dist/esm/stories/ToolCard.stories.js +14 -6
- package/dist/esm/stories/ToolCard.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ToolCard.tsx +59 -38
- package/src/components/Tooltip.tsx +49 -38
- package/src/stories/ToolCard.stories.tsx +49 -35
|
@@ -6,8 +6,13 @@ export interface ToolCardProps {
|
|
|
6
6
|
isSelected: boolean;
|
|
7
7
|
canAdd: boolean;
|
|
8
8
|
cantAddReason?: string;
|
|
9
|
+
toolInfo?: {
|
|
10
|
+
label: string;
|
|
11
|
+
onClick: () => void;
|
|
12
|
+
};
|
|
9
13
|
onClick?: () => void;
|
|
10
14
|
className?: string;
|
|
15
|
+
cardContainerClassName?: string;
|
|
11
16
|
mountPortal?: boolean;
|
|
12
17
|
mountPortalContainer?: HTMLElement;
|
|
13
18
|
descriptionLineClamp?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,WAAW,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"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,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,WAAW,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,sFAsFpB,CAAC"}
|
|
@@ -5,17 +5,24 @@ import { PlusIcon } from "../icons/app";
|
|
|
5
5
|
import { cn } from "../lib/utils";
|
|
6
6
|
var FADE_TRANSITION_CLASSES = "s-transition-opacity s-duration-300 s-ease-in-out";
|
|
7
7
|
export var ToolCard = React.forwardRef(function (_a, ref) {
|
|
8
|
-
var icon = _a.icon, label = _a.label, description = _a.description, isSelected = _a.isSelected, canAdd = _a.canAdd, cantAddReason = _a.cantAddReason, onClick = _a.onClick, className = _a.className, mountPortal = _a.mountPortal, mountPortalContainer = _a.mountPortalContainer, _b = _a.descriptionLineClamp, descriptionLineClamp = _b === void 0 ?
|
|
9
|
-
return (React.createElement(Card, { ref: ref, variant: isSelected ? "secondary" : "primary", onClick: onClick, disabled: !canAdd, containerClassName: "s-
|
|
10
|
-
React.createElement("div", { className: "s-flex s-w-full s-flex-col" },
|
|
11
|
-
React.createElement("div", { className: "s-
|
|
12
|
-
React.createElement("div", { className: "s-flex s-items-center s-gap-2" },
|
|
13
|
-
React.createElement(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
8
|
+
var icon = _a.icon, label = _a.label, description = _a.description, isSelected = _a.isSelected, canAdd = _a.canAdd, cantAddReason = _a.cantAddReason, toolInfo = _a.toolInfo, onClick = _a.onClick, className = _a.className, cardContainerClassName = _a.cardContainerClassName, mountPortal = _a.mountPortal, mountPortalContainer = _a.mountPortalContainer, _b = _a.descriptionLineClamp, descriptionLineClamp = _b === void 0 ? 2 : _b;
|
|
9
|
+
return (React.createElement(Card, { ref: ref, variant: isSelected ? "secondary" : "primary", onClick: onClick, disabled: !canAdd, containerClassName: cardContainerClassName, className: cn("s-px-3 s-pb-1 s-pt-3", className) },
|
|
10
|
+
React.createElement("div", { className: "s-flex s-h-full s-w-full s-flex-col s-justify-between" },
|
|
11
|
+
React.createElement("div", { className: "s-flex s-flex-col" },
|
|
12
|
+
React.createElement("div", { className: "s-mb-2 s-flex s-items-center s-justify-between s-gap-2" },
|
|
13
|
+
React.createElement("div", { className: "s-flex s-items-center s-gap-2" },
|
|
14
|
+
React.createElement(Avatar, { icon: icon, size: "sm" }),
|
|
15
|
+
React.createElement("span", { className: "s-text-sm s-font-medium" }, label),
|
|
16
|
+
isSelected && (React.createElement(Chip, { size: "xs", color: "green", label: "ADDED", className: cn(FADE_TRANSITION_CLASSES, "s-opacity-100") }))),
|
|
17
|
+
React.createElement("div", { className: "s-flex s-flex-shrink-0 s-items-center s-gap-2" },
|
|
18
|
+
canAdd && (React.createElement(Button, { size: "xs", variant: "outline", icon: PlusIcon, label: "Add", className: cn(FADE_TRANSITION_CLASSES, "s-flex-shrink-0") })),
|
|
19
|
+
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)))),
|
|
20
|
+
React.createElement(TruncatedText, { className: "s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night", mountPortal: mountPortal, mountPortalContainer: mountPortalContainer, lineClamp: descriptionLineClamp }, description)),
|
|
21
|
+
toolInfo && (React.createElement("div", null,
|
|
22
|
+
React.createElement("a", { onClick: function (e) {
|
|
23
|
+
e.stopPropagation();
|
|
24
|
+
toolInfo.onClick();
|
|
25
|
+
}, className: "hover:s-underline-offset-2dark:s-text-muted-foreground-night s-cursor-pointer s-text-sm s-text-muted-foreground hover:s-text-highlight-light hover:s-underline dark:hover:s-text-highlight-light-night" }, toolInfo.label))))));
|
|
19
26
|
});
|
|
20
27
|
ToolCard.displayName = "ToolCard";
|
|
21
28
|
//# sourceMappingURL=ToolCard.js.map
|
|
@@ -1 +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,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;
|
|
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,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;AAkBtD,MAAM,CAAC,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,UACE,EAcC,EACD,GAAG;QAdD,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,SAAS,eAAA,EACT,sBAAsB,4BAAA,EACtB,WAAW,iBAAA,EACX,oBAAoB,0BAAA,EACpB,4BAAwB,EAAxB,oBAAoB,mBAAG,CAAC,KAAA;IAI1B,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,kBAAkB,EAAE,sBAAsB,EAC1C,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC;QAEhD,6BAAK,SAAS,EAAC,uDAAuD;YACpE,6BAAK,SAAS,EAAC,mBAAmB;gBAChC,6BAAK,SAAS,EAAC,wDAAwD;oBACrE,6BAAK,SAAS,EAAC,+BAA+B;wBAC5C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;wBAChC,8BAAM,SAAS,EAAC,yBAAyB,IAAE,KAAK,CAAQ;wBACvD,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;oBACN,6BAAK,SAAS,EAAC,+CAA+C;wBAC3D,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;wBACA,aAAa,IAAI,CAChB,6BAAK,SAAS,EAAC,+FAA+F,IAC3G,aAAa,CACV,CACP,CACG,CACF;gBACN,oBAAC,aAAa,IACZ,SAAS,EAAC,sEAAsE,EAChF,WAAW,EAAE,WAAW,EACxB,oBAAoB,EAAE,oBAAoB,EAC1C,SAAS,EAAE,oBAAoB,IAE9B,WAAW,CACE,CACZ;YACL,QAAQ,IAAI,CACX;gBACE,2BACE,OAAO,EAAE,UAAC,CAAC;wBACT,CAAC,CAAC,eAAe,EAAE,CAAC;wBACpB,QAAQ,CAAC,OAAO,EAAE,CAAC;oBACrB,CAAC,EACD,SAAS,EAAC,wMAAwM,IAEjN,QAAQ,CAAC,KAAK,CACb,CACA,CACP,CACG,CACD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
|
|
@@ -1 +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;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,
|
|
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;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,4FAsDnB,CAAC;AAEF,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"}
|
|
@@ -1 +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;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,
|
|
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;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,CAIrC,UACE,EAMC,EACD,GAAG;IAND,IAAA,SAAS,eAAA,EACT,kBAAc,EAAd,UAAU,mBAAG,CAAC,KAAA,EACd,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA,EAClB,oBAAoB,0BAAA,EACjB,KAAK,cALV,kEAMC,CADS;IAIV,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,CACF,CAAC;AASF,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"}
|
|
@@ -1 +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;AAI/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,
|
|
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;AAI/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,yBAoDpB,CAAC"}
|
|
@@ -7,10 +7,18 @@ var meta = {
|
|
|
7
7
|
component: ToolCard,
|
|
8
8
|
};
|
|
9
9
|
export default meta;
|
|
10
|
-
export var Examples = function () { return (React.createElement("div", { className: "s-
|
|
11
|
-
React.createElement(
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
export var Examples = function () { return (React.createElement("div", { className: "s-flex s-gap-3" },
|
|
11
|
+
React.createElement("div", { className: "s-w-80" },
|
|
12
|
+
React.createElement(ToolCard, { icon: BookOpenIcon, cardContainerClassName: "s-h-36", label: "Image Generation", description: "Agent can generate images (GPT Image 1).", isSelected: true, canAdd: true, onClick: function () { return console.log("Add Image Generation"); }, toolInfo: {
|
|
13
|
+
label: "Click here",
|
|
14
|
+
onClick: function () { return console.log("Click here"); },
|
|
15
|
+
} })),
|
|
16
|
+
React.createElement("div", { className: "s-w-80" },
|
|
17
|
+
React.createElement(ToolCard, { cardContainerClassName: "s-h-36", icon: CommandLineIcon, label: "Reasoning", description: React.createElement(React.Fragment, null,
|
|
18
|
+
"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.",
|
|
19
|
+
" ",
|
|
20
|
+
React.createElement(Hoverable, { href: "https://example.com/help", target: "_blank", rel: "noopener noreferrer", variant: "primary" }, "the docs")), isSelected: true, canAdd: false, toolInfo: {
|
|
21
|
+
label: "Click here",
|
|
22
|
+
onClick: function () { return console.log("Click here"); },
|
|
23
|
+
} })))); };
|
|
16
24
|
//# sourceMappingURL=ToolCard.stories.js.map
|
|
@@ -1 +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,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,
|
|
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,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,gBAAgB;IAE7B,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,QAAQ,IACP,IAAI,EAAE,YAAY,EAClB,sBAAsB,EAAC,QAAQ,EAC/B,KAAK,EAAC,kBAAkB,EACxB,WAAW,EAAC,0CAA0C,EACtD,UAAU,QACV,MAAM,QACN,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAnC,CAAmC,EAClD,QAAQ,EAAE;gBACR,KAAK,EAAE,YAAY;gBACnB,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAzB,CAAyB;aACzC,GACD,CACE;IAGN,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,QAAQ,IACP,sBAAsB,EAAC,QAAQ,EAC/B,IAAI,EAAE,eAAe,EACrB,KAAK,EAAC,WAAW,EACjB,WAAW,EACT;;gBAMmE,GAAG;gBACpE,oBAAC,SAAS,IACR,IAAI,EAAC,0BAA0B,EAC/B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,OAAO,EAAC,SAAS,eAGP,CACX,EAEL,UAAU,QACV,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE;gBACR,KAAK,EAAE,YAAY;gBACnB,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAzB,CAAyB;aACzC,GACD,CACE,CACF,CACP,EApD6B,CAoD7B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dust-tt/sparkle",
|
|
3
|
-
"version": "0.2.612-rc-
|
|
3
|
+
"version": "0.2.612-rc-2",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
|
|
6
6
|
"tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
|
|
@@ -15,8 +15,10 @@ export interface ToolCardProps {
|
|
|
15
15
|
isSelected: boolean;
|
|
16
16
|
canAdd: boolean;
|
|
17
17
|
cantAddReason?: string;
|
|
18
|
+
toolInfo?: { label: string; onClick: () => void };
|
|
18
19
|
onClick?: () => void;
|
|
19
20
|
className?: string;
|
|
21
|
+
cardContainerClassName?: string;
|
|
20
22
|
mountPortal?: boolean;
|
|
21
23
|
mountPortalContainer?: HTMLElement;
|
|
22
24
|
descriptionLineClamp?: number;
|
|
@@ -31,11 +33,13 @@ export const ToolCard = React.forwardRef<HTMLDivElement, ToolCardProps>(
|
|
|
31
33
|
isSelected,
|
|
32
34
|
canAdd,
|
|
33
35
|
cantAddReason,
|
|
36
|
+
toolInfo,
|
|
34
37
|
onClick,
|
|
35
38
|
className,
|
|
39
|
+
cardContainerClassName,
|
|
36
40
|
mountPortal,
|
|
37
41
|
mountPortalContainer,
|
|
38
|
-
descriptionLineClamp =
|
|
42
|
+
descriptionLineClamp = 2,
|
|
39
43
|
},
|
|
40
44
|
ref
|
|
41
45
|
) => {
|
|
@@ -45,46 +49,63 @@ export const ToolCard = React.forwardRef<HTMLDivElement, ToolCardProps>(
|
|
|
45
49
|
variant={isSelected ? "secondary" : "primary"}
|
|
46
50
|
onClick={onClick}
|
|
47
51
|
disabled={!canAdd}
|
|
48
|
-
containerClassName=
|
|
49
|
-
className={className}
|
|
52
|
+
containerClassName={cardContainerClassName}
|
|
53
|
+
className={cn("s-px-3 s-pb-1 s-pt-3", className)}
|
|
50
54
|
>
|
|
51
|
-
<div className="s-flex s-w-full s-flex-col">
|
|
52
|
-
<div className="s-
|
|
53
|
-
<div className="s-flex s-items-center s-gap-2">
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
<
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
{cantAddReason
|
|
55
|
+
<div className="s-flex s-h-full s-w-full s-flex-col s-justify-between">
|
|
56
|
+
<div className="s-flex s-flex-col">
|
|
57
|
+
<div className="s-mb-2 s-flex s-items-center s-justify-between s-gap-2">
|
|
58
|
+
<div className="s-flex s-items-center s-gap-2">
|
|
59
|
+
<Avatar icon={icon} size="sm" />
|
|
60
|
+
<span className="s-text-sm s-font-medium">{label}</span>
|
|
61
|
+
{isSelected && (
|
|
62
|
+
<Chip
|
|
63
|
+
size="xs"
|
|
64
|
+
color="green"
|
|
65
|
+
label="ADDED"
|
|
66
|
+
className={cn(FADE_TRANSITION_CLASSES, "s-opacity-100")}
|
|
67
|
+
/>
|
|
68
|
+
)}
|
|
69
|
+
</div>
|
|
70
|
+
<div className="s-flex s-flex-shrink-0 s-items-center s-gap-2">
|
|
71
|
+
{canAdd && (
|
|
72
|
+
<Button
|
|
73
|
+
size="xs"
|
|
74
|
+
variant="outline"
|
|
75
|
+
icon={PlusIcon}
|
|
76
|
+
label="Add"
|
|
77
|
+
className={cn(FADE_TRANSITION_CLASSES, "s-flex-shrink-0")}
|
|
78
|
+
/>
|
|
79
|
+
)}
|
|
80
|
+
{cantAddReason && (
|
|
81
|
+
<div className="s-flex-shrink-0 s-text-xs s-italic s-text-muted-foreground dark:s-text-muted-foreground-night">
|
|
82
|
+
{cantAddReason}
|
|
83
|
+
</div>
|
|
84
|
+
)}
|
|
77
85
|
</div>
|
|
78
|
-
|
|
86
|
+
</div>
|
|
87
|
+
<TruncatedText
|
|
88
|
+
className="s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night"
|
|
89
|
+
mountPortal={mountPortal}
|
|
90
|
+
mountPortalContainer={mountPortalContainer}
|
|
91
|
+
lineClamp={descriptionLineClamp}
|
|
92
|
+
>
|
|
93
|
+
{description}
|
|
94
|
+
</TruncatedText>
|
|
79
95
|
</div>
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
96
|
+
{toolInfo && (
|
|
97
|
+
<div>
|
|
98
|
+
<a
|
|
99
|
+
onClick={(e) => {
|
|
100
|
+
e.stopPropagation();
|
|
101
|
+
toolInfo.onClick();
|
|
102
|
+
}}
|
|
103
|
+
className="hover:s-underline-offset-2dark:s-text-muted-foreground-night s-cursor-pointer s-text-sm s-text-muted-foreground hover:s-text-highlight-light hover:s-underline dark:hover:s-text-highlight-light-night"
|
|
104
|
+
>
|
|
105
|
+
{toolInfo.label}
|
|
106
|
+
</a>
|
|
107
|
+
</div>
|
|
108
|
+
)}
|
|
88
109
|
</div>
|
|
89
110
|
</Card>
|
|
90
111
|
);
|
|
@@ -20,47 +20,58 @@ interface TooltipContentProps
|
|
|
20
20
|
const TooltipContent = React.forwardRef<
|
|
21
21
|
React.ElementRef<typeof TooltipPrimitive.Content>,
|
|
22
22
|
TooltipContentProps
|
|
23
|
-
>(
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
sideOffset=
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
23
|
+
>(
|
|
24
|
+
(
|
|
25
|
+
{
|
|
26
|
+
className,
|
|
27
|
+
sideOffset = 4,
|
|
28
|
+
mountPortal = true,
|
|
29
|
+
mountPortalContainer,
|
|
30
|
+
...props
|
|
31
|
+
},
|
|
32
|
+
ref
|
|
33
|
+
) => {
|
|
34
|
+
const content = (
|
|
35
|
+
<TooltipPrimitive.Content
|
|
36
|
+
ref={ref}
|
|
37
|
+
sideOffset={sideOffset}
|
|
38
|
+
className={classNames(
|
|
39
|
+
"s-z-50 s-max-w-sm s-overflow-hidden s-whitespace-pre-wrap s-break-words s-rounded-md s-border",
|
|
40
|
+
"s-bg-background dark:s-bg-background-night",
|
|
41
|
+
"s-text-foreground dark:s-text-foreground-night",
|
|
42
|
+
"s-border-border dark:s-border-border-night",
|
|
43
|
+
"s-px-3 s-py-1.5 s-text-sm s-shadow-md",
|
|
44
|
+
"s-animate-in s-fade-in-0 s-zoom-in-95",
|
|
45
|
+
"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",
|
|
46
|
+
className || ""
|
|
47
|
+
)}
|
|
48
|
+
{...props}
|
|
49
|
+
/>
|
|
50
|
+
);
|
|
41
51
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
52
|
+
const [container, setContainer] = useState<Element | undefined>(
|
|
53
|
+
mountPortalContainer
|
|
54
|
+
);
|
|
45
55
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
if (mountPortal && !container) {
|
|
58
|
+
const dialogElements = document.querySelectorAll(
|
|
59
|
+
".s-sheet[role=dialog][data-state=open]"
|
|
60
|
+
);
|
|
61
|
+
const defaultContainer = dialogElements[dialogElements.length - 1];
|
|
62
|
+
setContainer(defaultContainer);
|
|
63
|
+
}
|
|
64
|
+
}, [mountPortal, container]);
|
|
55
65
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}
|
|
66
|
+
return mountPortal ? (
|
|
67
|
+
<TooltipPrimitive.Portal container={container}>
|
|
68
|
+
{content}
|
|
69
|
+
</TooltipPrimitive.Portal>
|
|
70
|
+
) : (
|
|
71
|
+
content
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
);
|
|
64
75
|
|
|
65
76
|
interface TooltipProps extends TooltipContentProps {
|
|
66
77
|
trigger: React.ReactNode;
|
|
@@ -13,41 +13,55 @@ const meta: Meta<typeof ToolCard> = {
|
|
|
13
13
|
export default meta;
|
|
14
14
|
|
|
15
15
|
export const Examples = () => (
|
|
16
|
-
<div className="s-
|
|
17
|
-
{/* Not added */}
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
16
|
+
<div className="s-flex s-gap-3">
|
|
17
|
+
{/* Not added - default md size */}
|
|
18
|
+
<div className="s-w-80">
|
|
19
|
+
<ToolCard
|
|
20
|
+
icon={BookOpenIcon}
|
|
21
|
+
cardContainerClassName="s-h-36"
|
|
22
|
+
label="Image Generation"
|
|
23
|
+
description="Agent can generate images (GPT Image 1)."
|
|
24
|
+
isSelected
|
|
25
|
+
canAdd
|
|
26
|
+
onClick={() => console.log("Add Image Generation")}
|
|
27
|
+
toolInfo={{
|
|
28
|
+
label: "Click here",
|
|
29
|
+
onClick: () => console.log("Click here"),
|
|
30
|
+
}}
|
|
31
|
+
/>
|
|
32
|
+
</div>
|
|
26
33
|
|
|
27
|
-
{/* Added */}
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
34
|
+
{/* Added - xl size */}
|
|
35
|
+
<div className="s-w-80">
|
|
36
|
+
<ToolCard
|
|
37
|
+
cardContainerClassName="s-h-36"
|
|
38
|
+
icon={CommandLineIcon}
|
|
39
|
+
label="Reasoning"
|
|
40
|
+
description={
|
|
41
|
+
<>
|
|
42
|
+
Agent can decide to trigger a reasoning model for complex tasks.
|
|
43
|
+
Agent can decide to trigger a reasoning model for complex tasks.
|
|
44
|
+
Agent can decide to trigger a reasoning model for complex tasks.
|
|
45
|
+
Agent can decide to trigger a reasoning model for complex tasks.
|
|
46
|
+
Agent can decide to trigger a reasoning model for complex tasks.
|
|
47
|
+
Agent can decide to trigger a reasoning model for complex tasks.{" "}
|
|
48
|
+
<Hoverable
|
|
49
|
+
href="https://example.com/help"
|
|
50
|
+
target="_blank"
|
|
51
|
+
rel="noopener noreferrer"
|
|
52
|
+
variant="primary"
|
|
53
|
+
>
|
|
54
|
+
the docs
|
|
55
|
+
</Hoverable>
|
|
56
|
+
</>
|
|
57
|
+
}
|
|
58
|
+
isSelected
|
|
59
|
+
canAdd={false}
|
|
60
|
+
toolInfo={{
|
|
61
|
+
label: "Click here",
|
|
62
|
+
onClick: () => console.log("Click here"),
|
|
63
|
+
}}
|
|
64
|
+
/>
|
|
65
|
+
</div>
|
|
52
66
|
</div>
|
|
53
67
|
);
|