@dust-tt/sparkle 0.2.491 → 0.2.492
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/Dialog.d.ts +5 -3
- package/dist/esm/components/Dialog.d.ts.map +1 -1
- package/dist/esm/components/Dialog.js +5 -4
- package/dist/esm/components/Dialog.js.map +1 -1
- package/dist/esm/components/InteractiveImageGrid.d.ts +4 -1
- package/dist/esm/components/InteractiveImageGrid.d.ts.map +1 -1
- package/dist/esm/components/InteractiveImageGrid.js +53 -63
- package/dist/esm/components/InteractiveImageGrid.js.map +1 -1
- package/dist/esm/stories/InteractiveImageGrid.stories.d.ts.map +1 -1
- package/dist/esm/stories/InteractiveImageGrid.stories.js +7 -1
- package/dist/esm/stories/InteractiveImageGrid.stories.js.map +1 -1
- package/dist/esm/stories/TourGuide.stories.d.ts.map +1 -1
- package/dist/esm/stories/TourGuide.stories.js +73 -28
- package/dist/esm/stories/TourGuide.stories.js.map +1 -1
- package/dist/sparkle.css +91 -15
- package/package.json +1 -1
- package/src/components/Dialog.tsx +16 -3
- package/src/components/InteractiveImageGrid.tsx +67 -70
- package/src/stories/InteractiveImageGrid.stories.tsx +8 -0
- package/src/stories/TourGuide.stories.tsx +345 -40
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { CheckedState } from "@radix-ui/react-checkbox";
|
|
2
2
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
3
3
|
import * as React from "react";
|
|
4
|
-
import { Button, Checkbox } from "../components";
|
|
4
|
+
import { Button, ButtonProps, Checkbox } from "../components";
|
|
5
5
|
declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
|
|
6
6
|
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
7
7
|
declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
8
8
|
declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
|
9
9
|
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
-
declare const DIALOG_SIZES: readonly ["md", "lg", "xl"];
|
|
10
|
+
declare const DIALOG_SIZES: readonly ["md", "lg", "xl", "full"];
|
|
11
11
|
type DialogSizeType = (typeof DIALOG_SIZES)[number];
|
|
12
12
|
interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
|
|
13
13
|
size?: DialogSizeType;
|
|
@@ -16,10 +16,12 @@ interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof Dialo
|
|
|
16
16
|
}
|
|
17
17
|
declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
18
18
|
interface NewDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
19
|
+
buttonSize?: ButtonProps["size"];
|
|
20
|
+
buttonVariant?: ButtonProps["variant"];
|
|
19
21
|
hideButton?: boolean;
|
|
20
22
|
}
|
|
21
23
|
declare const DialogHeader: {
|
|
22
|
-
({ className, children, hideButton, ...props }: NewDialogHeaderProps): React.JSX.Element;
|
|
24
|
+
({ className, children, buttonSize, buttonVariant, hideButton, ...props }: NewDialogHeaderProps): React.JSX.Element;
|
|
23
25
|
displayName: string;
|
|
24
26
|
};
|
|
25
27
|
declare const DialogContainer: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAG1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAG1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,MAAM,EACN,WAAW,EACX,QAAQ,EAGT,MAAM,qBAAqB,CAAC;AAI7B,QAAA,MAAM,MAAM,uCAAuB,CAAC;AACpC,QAAA,MAAM,aAAa,8GAA0B,CAAC;AAC9C,QAAA,MAAM,WAAW,4GAAwB,CAAC;AAC1C,QAAA,MAAM,YAAY,6CAAyB,CAAC;AAE5C,QAAA,MAAM,aAAa,8JAajB,CAAC;AAGH,QAAA,MAAM,YAAY,qCAAsC,CAAC;AACzD,KAAK,cAAc,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AA0BpD,UAAU,kBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;IACtE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,aAAa,2FAwBlB,CAAC;AAGF,UAAU,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,YAAY;+EAOf,oBAAoB;;CAetB,CAAC;AAGF,QAAA,MAAM,eAAe;oBAElB,MAAM,cAAc,CAAC,cAAc,CAAC;;CAWtC,CAAC;AAGF,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;IACtD,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;IACvD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mBAAmB,CAAC,EAAE;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,OAAO,CAAC;QACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;QACxC,KAAK,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;KAC/C,CAAC;CACH;AAED,QAAA,MAAM,YAAY;sHAQf,iBAAiB;;CAwCnB,CAAC;AAGF,QAAA,MAAM,WAAW;aAGJ,MAAM,SAAS;4CAiB1B,CAAC;AAGH,QAAA,MAAM,iBAAiB,8KAarB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,WAAW,EACX,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}
|
|
@@ -3,7 +3,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
|
3
3
|
import { FocusScope } from "@radix-ui/react-focus-scope";
|
|
4
4
|
import { cva } from "class-variance-authority";
|
|
5
5
|
import * as React from "react";
|
|
6
|
-
import { Button, Checkbox, Label, ScrollArea } from "../components";
|
|
6
|
+
import { Button, Checkbox, Label, ScrollArea, } from "../components";
|
|
7
7
|
import { XMarkIcon } from "../icons/app";
|
|
8
8
|
import { cn } from "../lib/utils";
|
|
9
9
|
var Dialog = DialogPrimitive.Root;
|
|
@@ -15,11 +15,12 @@ var DialogOverlay = React.forwardRef(function (_a, ref) {
|
|
|
15
15
|
return (React.createElement(DialogPrimitive.Overlay, __assign({ className: cn("s-fixed s-inset-0 s-z-50 data-[state=open]:s-animate-in data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=open]:s-fade-in-0", "s-bg-muted-foreground/75 dark:s-bg-muted-foreground-night/75", className) }, props, { ref: ref })));
|
|
16
16
|
});
|
|
17
17
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
18
|
-
var DIALOG_SIZES = ["md", "lg", "xl"];
|
|
18
|
+
var DIALOG_SIZES = ["md", "lg", "xl", "full"];
|
|
19
19
|
var sizeClasses = {
|
|
20
20
|
md: "sm:s-max-w-md",
|
|
21
21
|
lg: "sm:s-max-w-xl",
|
|
22
22
|
xl: "sm:s-max-w-3xl",
|
|
23
|
+
full: "sm:s-max-w-full sm:s-h-full",
|
|
23
24
|
};
|
|
24
25
|
var dialogVariants = cva(cn("s-fixed s-left-[50%] s-top-[50%] s-z-50 s-overflow-hidden s-translate-x-[-50%] s-translate-y-[-50%] s-duration-200 data-[state=open]:s-animate-in data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=open]:s-fade-in-0 data-[state=closed]:s-zoom-out-95 data-[state=open]:s-zoom-in-95 data-[state=closed]:s-slide-out-to-left-1/2 data-[state=closed]:s-slide-out-to-top-[48%] data-[state=open]:s-slide-in-from-left-1/2 data-[state=open]:s-slide-in-from-top-[48%]", "s-rounded-2xl s-grid s-w-full s-border s-border s-shadow-lg s-sm:rounded-lg", "s-bg-background dark:s-bg-background-night", "s-border-border dark:s-border-border-night"), {
|
|
25
26
|
variants: {
|
|
@@ -38,10 +39,10 @@ var DialogContent = React.forwardRef(function (_a, ref) {
|
|
|
38
39
|
});
|
|
39
40
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
40
41
|
var DialogHeader = function (_a) {
|
|
41
|
-
var className = _a.className, children = _a.children, _b = _a.hideButton, hideButton =
|
|
42
|
+
var className = _a.className, children = _a.children, _b = _a.buttonSize, buttonSize = _b === void 0 ? "mini" : _b, _c = _a.buttonVariant, buttonVariant = _c === void 0 ? "ghost" : _c, _d = _a.hideButton, hideButton = _d === void 0 ? false : _d, props = __rest(_a, ["className", "children", "buttonSize", "buttonVariant", "hideButton"]);
|
|
42
43
|
return (React.createElement("div", __assign({ className: cn("s-z-50 s-flex s-flex-none s-flex-col s-gap-0 s-px-5 s-py-4 s-text-left", className) }, props),
|
|
43
44
|
children,
|
|
44
|
-
React.createElement(DialogClose, { asChild: true, className: "s-absolute s-right-3 s-top-3" }, !hideButton && React.createElement(Button, { icon: XMarkIcon, variant:
|
|
45
|
+
React.createElement(DialogClose, { asChild: true, className: "s-absolute s-right-3 s-top-3" }, !hideButton && (React.createElement(Button, { icon: XMarkIcon, variant: buttonVariant, size: buttonSize })))));
|
|
45
46
|
};
|
|
46
47
|
DialogHeader.displayName = "DialogHeader";
|
|
47
48
|
var DialogContainer = function (_a) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,6 +9,9 @@ interface InteractiveImageGridProps {
|
|
|
9
9
|
title: string;
|
|
10
10
|
}[];
|
|
11
11
|
}
|
|
12
|
-
declare
|
|
12
|
+
declare function InteractiveImageGrid({ className, images, }: InteractiveImageGridProps): React.JSX.Element;
|
|
13
|
+
declare namespace InteractiveImageGrid {
|
|
14
|
+
var displayName: string;
|
|
15
|
+
}
|
|
13
16
|
export { InteractiveImageGrid };
|
|
14
17
|
//# sourceMappingURL=InteractiveImageGrid.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractiveImageGrid.d.ts","sourceRoot":"","sources":["../../../src/components/InteractiveImageGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"InteractiveImageGrid.d.ts","sourceRoot":"","sources":["../../../src/components/InteractiveImageGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA8G1B,UAAU,yBAAyB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;CACL;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,MAAM,GACP,EAAE,yBAAyB,qBAkL3B;kBArLQ,oBAAoB;;;AAyL7B,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __awaiter, __generator, __read } from "tslib";
|
|
2
2
|
import React from "react";
|
|
3
|
-
import { Button, Spinner } from "../components";
|
|
4
|
-
import { ArrowDownOnSquareIcon, ChevronLeftIcon, ChevronRightIcon,
|
|
3
|
+
import { Button, Dialog, DialogContent, DialogHeader, DialogTrigger, Spinner, } from "../components";
|
|
4
|
+
import { ArrowDownOnSquareIcon, ChevronLeftIcon, ChevronRightIcon, } from "../icons/app";
|
|
5
5
|
import { cn } from "../lib/utils";
|
|
6
6
|
var ImageLoadingState = React.forwardRef(function (_a, ref) {
|
|
7
7
|
var className = _a.className, _b = _a.size, size = _b === void 0 ? "lg" : _b;
|
|
@@ -11,7 +11,7 @@ var ImageLoadingState = React.forwardRef(function (_a, ref) {
|
|
|
11
11
|
ImageLoadingState.displayName = "ImageLoadingState";
|
|
12
12
|
var ImagePreview = React.forwardRef(function (_a, ref) {
|
|
13
13
|
var image = _a.image, onClick = _a.onClick, onDownload = _a.onDownload;
|
|
14
|
-
return (React.createElement("div", { ref: ref, onClick: onClick, className: cn("s-group/preview s-relative", "s-cursor-pointer s-overflow-hidden s-rounded-2xl", "s-bg-muted-background dark:s-bg-muted-background-night") }, image.isLoading ? (React.createElement("div", { className: "s-flex s-h-full s-w-full s-items-center s-justify-center" },
|
|
14
|
+
return (React.createElement("div", { ref: ref, onClick: onClick, className: cn("s-group/preview s-relative s-aspect-square", "s-cursor-pointer s-overflow-hidden s-rounded-2xl", "s-bg-muted-background dark:s-bg-muted-background-night") }, image.isLoading ? (React.createElement("div", { className: "s-flex s-h-full s-w-full s-items-center s-justify-center" },
|
|
15
15
|
React.createElement(Spinner, { variant: "dark", size: "md" }))) : (React.createElement(React.Fragment, null,
|
|
16
16
|
React.createElement("img", { src: image.imageUrl, alt: image.alt, className: "s-h-full s-w-full s-rounded-2xl s-object-cover" }),
|
|
17
17
|
React.createElement("div", { className: cn("s-absolute s-inset-0 s-bg-gradient-to-b", "s-from-black/40 s-via-transparent s-to-black/40", "s-opacity-0 s-transition-opacity s-duration-200", "group-hover/preview:s-opacity-100") }),
|
|
@@ -19,11 +19,11 @@ var ImagePreview = React.forwardRef(function (_a, ref) {
|
|
|
19
19
|
React.createElement(Button, { variant: "ghost", size: "xs", icon: ArrowDownOnSquareIcon, className: "s-text-white dark:s-text-white", tooltip: "Download", onClick: onDownload }))))));
|
|
20
20
|
});
|
|
21
21
|
ImagePreview.displayName = "ImagePreview";
|
|
22
|
-
|
|
22
|
+
function InteractiveImageGrid(_a) {
|
|
23
|
+
var _this = this;
|
|
23
24
|
var className = _a.className, images = _a.images;
|
|
24
25
|
var _b = __read(React.useState(null), 2), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
|
|
25
|
-
var _c = __read(React.useState(false), 2),
|
|
26
|
-
var _d = __read(React.useState(false), 2), imageLoaded = _d[0], setImageLoaded = _d[1];
|
|
26
|
+
var _c = __read(React.useState(false), 2), imageLoaded = _c[0], setImageLoaded = _c[1];
|
|
27
27
|
var handleNext = React.useCallback(function () {
|
|
28
28
|
if (currentImageIndex === null) {
|
|
29
29
|
return;
|
|
@@ -36,7 +36,7 @@ var InteractiveImageGrid = React.forwardRef(function (_a, ref) {
|
|
|
36
36
|
}
|
|
37
37
|
setCurrentImageIndex((currentImageIndex - 1 + images.length) % images.length);
|
|
38
38
|
}, [currentImageIndex, images.length]);
|
|
39
|
-
var handleDownload = React.useCallback(function (downloadUrl, title) { return __awaiter(
|
|
39
|
+
var handleDownload = React.useCallback(function (downloadUrl, title) { return __awaiter(_this, void 0, void 0, function () {
|
|
40
40
|
var link;
|
|
41
41
|
return __generator(this, function (_a) {
|
|
42
42
|
if (!downloadUrl || !title) {
|
|
@@ -52,7 +52,7 @@ var InteractiveImageGrid = React.forwardRef(function (_a, ref) {
|
|
|
52
52
|
});
|
|
53
53
|
}); }, []);
|
|
54
54
|
React.useEffect(function () {
|
|
55
|
-
if (
|
|
55
|
+
if (currentImageIndex === null) {
|
|
56
56
|
return;
|
|
57
57
|
}
|
|
58
58
|
// Only handle keyboard events if the image is zoomed.
|
|
@@ -63,75 +63,65 @@ var InteractiveImageGrid = React.forwardRef(function (_a, ref) {
|
|
|
63
63
|
else if (e.key === "ArrowLeft") {
|
|
64
64
|
handlePrevious();
|
|
65
65
|
}
|
|
66
|
-
else if (e.key === "Escape") {
|
|
67
|
-
setIsZoomed(false);
|
|
68
|
-
setCurrentImageIndex(null);
|
|
69
|
-
}
|
|
70
66
|
};
|
|
71
67
|
window.addEventListener("keydown", handleKeyDown);
|
|
72
68
|
return function () { return window.removeEventListener("keydown", handleKeyDown); };
|
|
73
|
-
}, [
|
|
74
|
-
return (React.createElement(
|
|
75
|
-
|
|
76
|
-
React.createElement(
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
69
|
+
}, [currentImageIndex, handleNext, handlePrevious]);
|
|
70
|
+
return (React.createElement(Dialog, { open: currentImageIndex !== null, onOpenChange: function (open) { return !open && setCurrentImageIndex(null); } },
|
|
71
|
+
React.createElement(DialogTrigger, { asChild: true },
|
|
72
|
+
React.createElement("div", { className: cn("s-@container", className) }, images.length === 1 ? (React.createElement("div", { className: "s-h-80 s-w-80" },
|
|
73
|
+
React.createElement(ImagePreview, { image: images[0], onClick: function () {
|
|
74
|
+
setCurrentImageIndex(0);
|
|
75
|
+
}, onDownload: function (e) { return __awaiter(_this, void 0, void 0, function () {
|
|
76
|
+
return __generator(this, function (_a) {
|
|
77
|
+
switch (_a.label) {
|
|
78
|
+
case 0:
|
|
79
|
+
e.stopPropagation();
|
|
80
|
+
return [4 /*yield*/, handleDownload(images[0].downloadUrl, images[0].title)];
|
|
81
|
+
case 1:
|
|
82
|
+
_a.sent();
|
|
83
|
+
return [2 /*return*/];
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
}); } }))) : (React.createElement("div", { className: "s-grid s-grid-cols-2 s-gap-2 @xxs:s-grid-cols-3 @xs:s-grid-cols-4" }, images.map(function (image, idx) { return (React.createElement(ImagePreview, { key: idx, image: image, onClick: function () {
|
|
87
|
+
setCurrentImageIndex(idx);
|
|
88
|
+
}, onDownload: function (e) { return __awaiter(_this, void 0, void 0, function () {
|
|
80
89
|
return __generator(this, function (_a) {
|
|
81
90
|
switch (_a.label) {
|
|
82
91
|
case 0:
|
|
83
92
|
e.stopPropagation();
|
|
84
|
-
return [4 /*yield*/, handleDownload(
|
|
93
|
+
return [4 /*yield*/, handleDownload(image.downloadUrl, image.title)];
|
|
85
94
|
case 1:
|
|
86
95
|
_a.sent();
|
|
87
96
|
return [2 /*return*/];
|
|
88
97
|
}
|
|
89
98
|
});
|
|
90
|
-
}); } }))
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
case 0:
|
|
99
|
+
}); } })); }))))),
|
|
100
|
+
React.createElement(DialogContent, { size: "full", className: "s-rounded-none s-border-0 s-bg-white/95 s-p-0 s-shadow-none s-outline-none s-ring-0 dark:s-bg-gray-900/95" }, currentImageIndex !== null && (React.createElement("div", { className: "s-relative s-flex s-h-full s-w-full s-flex-col" },
|
|
101
|
+
React.createElement(DialogHeader, { buttonVariant: "outline", buttonSize: "md", className: "s-h-6" }),
|
|
102
|
+
React.createElement("div", { className: "s-flex s-flex-1 s-items-center s-justify-center" },
|
|
103
|
+
React.createElement("div", { className: "s-relative s-flex s-items-center s-gap-4" },
|
|
104
|
+
images.length > 1 && (React.createElement(Button, { variant: "ghost", size: "md", icon: ChevronLeftIcon, onClick: function (e) {
|
|
97
105
|
e.stopPropagation();
|
|
98
|
-
|
|
99
|
-
case 1:
|
|
100
|
-
_a.sent();
|
|
101
|
-
return [2 /*return*/];
|
|
102
|
-
}
|
|
103
|
-
});
|
|
104
|
-
}); } })); }))),
|
|
105
|
-
isZoomed && currentImageIndex !== null && (React.createElement("div", { className: cn("s-fixed s-inset-0 s-z-50 s-flex s-items-center s-justify-center", "s-bg-white/95 dark:s-bg-gray-900/95") },
|
|
106
|
-
React.createElement("div", { className: "s-relative s-flex s-h-full s-w-full s-flex-col" },
|
|
107
|
-
React.createElement("div", { className: "s-absolute s-right-4 s-top-4 s-z-10 s-flex s-gap-2" },
|
|
108
|
-
React.createElement(Button, { variant: "outline", size: "md", icon: XMarkIcon, tooltip: "Close", onClick: function () {
|
|
109
|
-
setIsZoomed(false);
|
|
110
|
-
setCurrentImageIndex(null);
|
|
106
|
+
handlePrevious();
|
|
111
107
|
} })),
|
|
112
|
-
|
|
113
|
-
React.createElement(
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
_a.sent();
|
|
130
|
-
return [2 /*return*/];
|
|
131
|
-
}
|
|
132
|
-
});
|
|
133
|
-
}); } }))) : (React.createElement(ImageLoadingState, { size: "lg" })))))))));
|
|
134
|
-
});
|
|
108
|
+
images[currentImageIndex].isLoading ? (React.createElement(ImageLoadingState, { size: "lg" })) : (React.createElement("img", { src: images[currentImageIndex].imageUrl, alt: images[currentImageIndex].alt, className: cn("s-max-h-[90vh] s-min-h-[50vh] s-w-auto s-min-w-[50vh]", "s-checkerboard s-object-contain"), onLoad: function () { return setImageLoaded(true); } })),
|
|
109
|
+
images.length > 1 && (React.createElement(Button, { variant: "ghost", size: "md", icon: ChevronRightIcon, onClick: function (e) {
|
|
110
|
+
e.stopPropagation();
|
|
111
|
+
handleNext();
|
|
112
|
+
} })))),
|
|
113
|
+
!images[currentImageIndex].isLoading && (React.createElement(React.Fragment, null, imageLoaded ? (React.createElement("div", { className: "s-absolute s-bottom-3 s-right-3 s-z-10" },
|
|
114
|
+
React.createElement(Button, { variant: "outline", size: "md", icon: ArrowDownOnSquareIcon, tooltip: "Download", onClick: function () { return __awaiter(_this, void 0, void 0, function () {
|
|
115
|
+
return __generator(this, function (_a) {
|
|
116
|
+
switch (_a.label) {
|
|
117
|
+
case 0: return [4 /*yield*/, handleDownload(images[currentImageIndex].downloadUrl, images[currentImageIndex].title)];
|
|
118
|
+
case 1:
|
|
119
|
+
_a.sent();
|
|
120
|
+
return [2 /*return*/];
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
}); } }))) : (React.createElement(ImageLoadingState, { size: "lg" })))))))));
|
|
124
|
+
}
|
|
135
125
|
InteractiveImageGrid.displayName = "InteractiveImageGrid";
|
|
136
126
|
export { InteractiveImageGrid };
|
|
137
127
|
//# sourceMappingURL=InteractiveImageGrid.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractiveImageGrid.js","sourceRoot":"","sources":["../../../src/components/InteractiveImageGrid.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,
|
|
1
|
+
{"version":3,"file":"InteractiveImageGrid.js","sourceRoot":"","sources":["../../../src/components/InteractiveImageGrid.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractiveImageGrid.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/InteractiveImageGrid.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,IAAI;;;;;;;CAGuB,CAAC;AAElC,eAAe,IAAI,CAAC;AA8CpB,eAAO,MAAM,uBAAuB,
|
|
1
|
+
{"version":3,"file":"InteractiveImageGrid.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/InteractiveImageGrid.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,IAAI;;;;;;;CAGuB,CAAC;AAElC,eAAe,IAAI,CAAC;AA8CpB,eAAO,MAAM,uBAAuB,yBAmBnC,CAAC"}
|
|
@@ -53,7 +53,13 @@ export var InteractiveImageExample = function () { return (React.createElement("
|
|
|
53
53
|
React.createElement("div", { className: "s-w-[700px]" },
|
|
54
54
|
React.createElement("h2", null, "Interactive Image Grid"),
|
|
55
55
|
React.createElement(InteractiveImageGrid, { images: images })),
|
|
56
|
+
React.createElement("div", { className: "s-w-[300px]" },
|
|
57
|
+
React.createElement("h2", null, "Interactive Image Grid with small width"),
|
|
58
|
+
React.createElement(InteractiveImageGrid, { images: images })),
|
|
56
59
|
React.createElement("div", { className: "s-w-[700px]" },
|
|
57
60
|
React.createElement("h2", null, "Interactive Image Grid with 1 image"),
|
|
58
|
-
React.createElement(InteractiveImageGrid, { images: images.slice(1, 2) }))
|
|
61
|
+
React.createElement(InteractiveImageGrid, { images: images.slice(1, 2) })),
|
|
62
|
+
React.createElement("div", { className: "s-w-[700px]" },
|
|
63
|
+
React.createElement("h2", null, "Interactive Image Grid with 1 image (loading)"),
|
|
64
|
+
React.createElement(InteractiveImageGrid, { images: images.slice(0, 1) })))); };
|
|
59
65
|
//# sourceMappingURL=InteractiveImageGrid.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractiveImageGrid.stories.js","sourceRoot":"","sources":["../../../src/stories/InteractiveImageGrid.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAEhF,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;CACY,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,IAAM,MAAM,GAAG;IACb;QACE,GAAG,EAAE,wCAAwC;QAC7C,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,wCAAwC;KAChD;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,qCAAqC;QAC1C,WAAW,EAAE,+CAA+C;QAC5D,QAAQ,EAAE,+CAA+C;QACzD,KAAK,EAAE,iCAAiC;KACzC;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAG,cAAM,OAAA,CAC3C,6BAAK,SAAS,EAAC,2BAA2B;IACxC,6BAAK,SAAS,EAAC,aAAa;QAC1B,yDAA+B;QAC/B,oBAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,GAAI,CACpC;IACN,6BAAK,SAAS,EAAC,aAAa;QAC1B,sEAA4C;QAC5C,oBAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAI,CAChD,CACF,CACP,
|
|
1
|
+
{"version":3,"file":"InteractiveImageGrid.stories.js","sourceRoot":"","sources":["../../../src/stories/InteractiveImageGrid.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAEhF,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;CACY,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,IAAM,MAAM,GAAG;IACb;QACE,GAAG,EAAE,wCAAwC;QAC7C,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,wCAAwC;KAChD;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,qCAAqC;QAC1C,WAAW,EAAE,+CAA+C;QAC5D,QAAQ,EAAE,+CAA+C;QACzD,KAAK,EAAE,iCAAiC;KACzC;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAG,cAAM,OAAA,CAC3C,6BAAK,SAAS,EAAC,2BAA2B;IACxC,6BAAK,SAAS,EAAC,aAAa;QAC1B,yDAA+B;QAC/B,oBAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,GAAI,CACpC;IACN,6BAAK,SAAS,EAAC,aAAa;QAC1B,0EAAgD;QAChD,oBAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,GAAI,CACpC;IACN,6BAAK,SAAS,EAAC,aAAa;QAC1B,sEAA4C;QAC5C,oBAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAI,CAChD;IACN,6BAAK,SAAS,EAAC,aAAa;QAC1B,gFAAsD;QACtD,oBAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAI,CAChD,CACF,CACP,EAnB4C,CAmB5C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TourGuide.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/TourGuide.stories.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"TourGuide.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/TourGuide.stories.tsx"],"names":[],"mappings":";AA0CA,wBAMU;AAuaV,eAAO,MAAM,OAAO,2HAAoB,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { __read } from "tslib";
|
|
2
2
|
import React, { useRef, useState } from "react";
|
|
3
|
-
import { ConfettiBackground,
|
|
3
|
+
import { Avatar, ConfettiBackground, Tooltip, TypingAnimation, } from "../components";
|
|
4
4
|
import { Button } from "../components/Button";
|
|
5
|
-
import {
|
|
6
|
-
import { GithubLogo,
|
|
5
|
+
import { ActionBrainIcon, ActionGlobeIcon, ActionImageIcon, ActionMagnifyingGlassIcon, ActionScanIcon, ActionTableIcon, PlayIcon, } from "../icons";
|
|
6
|
+
import { BigQueryLogo, ConfluenceLogo, DriveLogo, GithubLogo, GongLogo, IntercomLogo, MicrosoftLogo, NotionLogo, SalesforceLogo, SlackLogo, SnowflakeLogo, ZendeskLogo, } from "../logo";
|
|
7
7
|
import { TourGuide, TourGuideCard, TourGuideCardContent, TourGuideCardTitle, TourGuideCardVisual, } from "../components/TourGuide";
|
|
8
8
|
export default {
|
|
9
|
-
title: "
|
|
9
|
+
title: "Modules/TourGuide",
|
|
10
10
|
component: TourGuide,
|
|
11
11
|
parameters: {
|
|
12
12
|
layout: "fullscreen",
|
|
@@ -21,6 +21,28 @@ var Template = function () {
|
|
|
21
21
|
setKey(function (k) { return k + 1; });
|
|
22
22
|
};
|
|
23
23
|
var referentRef = useRef(null);
|
|
24
|
+
var filteredAgents = [
|
|
25
|
+
{
|
|
26
|
+
name: "Translator",
|
|
27
|
+
emoji: "💬",
|
|
28
|
+
backgroundColor: "s-bg-green-200",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
name: "TrailblazerGuard",
|
|
32
|
+
emoji: "👮",
|
|
33
|
+
backgroundColor: "s-bg-blue-100",
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
name: "Transport",
|
|
37
|
+
emoji: "🚌",
|
|
38
|
+
backgroundColor: "s-bg-blue-200",
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
name: "TrendTracker",
|
|
42
|
+
emoji: "😻",
|
|
43
|
+
backgroundColor: "s-bg-rose-50",
|
|
44
|
+
},
|
|
45
|
+
];
|
|
24
46
|
return (React.createElement("div", { className: "s-relative s-min-h-screen s-w-full" },
|
|
25
47
|
React.createElement("div", { className: "s-absolute s-left-3 s-top-3" },
|
|
26
48
|
React.createElement(Button, { label: "Restart Tour", onClick: handleRestart })),
|
|
@@ -36,51 +58,74 @@ var Template = function () {
|
|
|
36
58
|
React.createElement(TourGuideCardTitle, null,
|
|
37
59
|
"Welcome to the",
|
|
38
60
|
" ",
|
|
39
|
-
React.createElement("span", { className: "s-font-semibold s-text-brand-
|
|
61
|
+
React.createElement("span", { className: "s-font-semibold s-text-brand-hunter-green" }, "Qonto"),
|
|
40
62
|
" ",
|
|
41
63
|
"workspace."),
|
|
42
64
|
React.createElement(TourGuideCardContent, null,
|
|
43
65
|
" ",
|
|
44
|
-
"Discover
|
|
66
|
+
"Discover the basics of Dust in 3 steps.")),
|
|
45
67
|
React.createElement(TourGuideCard, { anchorRef: centerRef },
|
|
46
|
-
React.createElement(TourGuideCardVisual, { className: "s-
|
|
47
|
-
React.createElement("
|
|
48
|
-
React.createElement(
|
|
68
|
+
React.createElement(TourGuideCardVisual, { className: "s-relative s-flex s-overflow-hidden s-bg-brand-support-green s-p-4 s-text-center" },
|
|
69
|
+
React.createElement("div", { className: "s-flex s-gap-1" },
|
|
70
|
+
React.createElement("div", { className: "s-flex s-gap-1" },
|
|
71
|
+
React.createElement("div", { className: "s-heading-2xl s-text-highlight" }, "@tra"),
|
|
72
|
+
React.createElement("div", { className: "s-h-[32px] s-w-[3px] s-animate-cursor-blink s-bg-foreground" })),
|
|
73
|
+
React.createElement("div", { className: "s-flex s-h-[240px] s-flex-col s-gap-3 s-rounded-xl s-border s-border-border s-bg-background s-p-3 s-pr-5 s-shadow-xl" }, filteredAgents.map(function (agent) {
|
|
74
|
+
return (React.createElement("div", { key: agent.name, className: "s-heading-base s-flex s-items-center s-gap-2 s-text-foreground" },
|
|
75
|
+
React.createElement(Avatar, { size: "sm", emoji: agent.emoji, backgroundColor: agent.backgroundColor }),
|
|
76
|
+
agent.name));
|
|
77
|
+
})))),
|
|
49
78
|
React.createElement(TourGuideCardTitle, null,
|
|
50
79
|
"Use",
|
|
51
80
|
" ",
|
|
52
|
-
React.createElement("span", { className: "s-font-semibold s-text-
|
|
81
|
+
React.createElement("span", { className: "s-font-semibold s-text-highlight" }, "@mentions"),
|
|
53
82
|
" ",
|
|
54
|
-
"to call Agents and\u00A0start a conversation"),
|
|
83
|
+
"to call Agents and\u00A0start a conversation."),
|
|
55
84
|
React.createElement(TourGuideCardContent, { className: "s-py-2" },
|
|
56
85
|
React.createElement(Button, { label: "Watch the full video", icon: PlayIcon, variant: "outline" }))),
|
|
57
86
|
React.createElement(TourGuideCard, { anchorRef: topRightRef },
|
|
58
87
|
React.createElement(TourGuideCardVisual, { className: "s-flex s-flex-col s-items-center s-justify-center s-gap-4 s-bg-brand-support-rose s-px-6 s-text-center" },
|
|
59
|
-
React.createElement("div", { className: "s-grid s-grid-cols-
|
|
60
|
-
React.createElement(
|
|
61
|
-
React.createElement(
|
|
62
|
-
React.createElement(
|
|
63
|
-
React.createElement(
|
|
64
|
-
React.createElement(
|
|
65
|
-
React.createElement(
|
|
66
|
-
React.createElement(
|
|
67
|
-
React.createElement(
|
|
68
|
-
|
|
69
|
-
React.createElement(
|
|
88
|
+
React.createElement("div", { className: "s-grid s-grid-cols-6 s-gap-2" },
|
|
89
|
+
React.createElement(Tooltip, { label: "Google Drive Connection", trigger: React.createElement(Avatar, { size: "md", icon: DriveLogo, backgroundColor: "s-bg-white" }) }),
|
|
90
|
+
React.createElement(Tooltip, { label: "Notion Connection", trigger: React.createElement(Avatar, { size: "md", icon: NotionLogo, backgroundColor: "s-bg-white" }) }),
|
|
91
|
+
React.createElement(Tooltip, { label: "Slack Connection", trigger: React.createElement(Avatar, { size: "md", icon: SlackLogo, backgroundColor: "s-bg-white" }) }),
|
|
92
|
+
React.createElement(Tooltip, { label: "Snowflake Connection", trigger: React.createElement(Avatar, { size: "md", icon: SnowflakeLogo, backgroundColor: "s-bg-white" }) }),
|
|
93
|
+
React.createElement(Tooltip, { label: "BigQuery Connection", trigger: React.createElement(Avatar, { size: "md", icon: BigQueryLogo, backgroundColor: "s-bg-white" }) }),
|
|
94
|
+
React.createElement(Tooltip, { label: "Confluence Connection", trigger: React.createElement(Avatar, { size: "md", icon: ConfluenceLogo, backgroundColor: "s-bg-white" }) }),
|
|
95
|
+
React.createElement(Tooltip, { label: "Intercom Connection", trigger: React.createElement(Avatar, { size: "md", icon: IntercomLogo, backgroundColor: "s-bg-white" }) }),
|
|
96
|
+
React.createElement(Tooltip, { label: "Microsoft Connection", trigger: React.createElement(Avatar, { size: "md", icon: MicrosoftLogo, backgroundColor: "s-bg-white" }) }),
|
|
97
|
+
React.createElement(Tooltip, { label: "Salesforce Connection", trigger: React.createElement(Avatar, { size: "md", icon: SalesforceLogo, backgroundColor: "s-bg-white" }) }),
|
|
98
|
+
React.createElement(Tooltip, { label: "Zendesk Connection", trigger: React.createElement(Avatar, { size: "md", icon: ZendeskLogo, backgroundColor: "s-bg-white" }) }),
|
|
99
|
+
React.createElement(Tooltip, { label: "GitHub Connection", trigger: React.createElement(Avatar, { size: "md", icon: GithubLogo, backgroundColor: "s-bg-white" }) }),
|
|
100
|
+
React.createElement(Tooltip, { label: "Gong Connection", trigger: React.createElement(Avatar, { size: "md", icon: GongLogo, backgroundColor: "s-bg-white" }) }),
|
|
101
|
+
React.createElement(Tooltip, { label: "Search data", trigger: React.createElement(Avatar, { size: "md", icon: ActionMagnifyingGlassIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }) }),
|
|
102
|
+
React.createElement(Tooltip, { label: "Quantitative analysis", trigger: React.createElement(Avatar, { size: "md", icon: ActionTableIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }) }),
|
|
103
|
+
React.createElement(Tooltip, { label: "Data extraction", trigger: React.createElement(Avatar, { size: "md", icon: ActionScanIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }) }),
|
|
104
|
+
React.createElement(Tooltip, { label: "Image generation", trigger: React.createElement(Avatar, { size: "md", icon: ActionImageIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }) }),
|
|
105
|
+
React.createElement(Tooltip, { label: "Web search and browsing", trigger: React.createElement(Avatar, { size: "md", icon: ActionGlobeIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }) }),
|
|
106
|
+
React.createElement(Tooltip, { label: "Reasoning", trigger: React.createElement(Avatar, { size: "md", icon: ActionBrainIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }) }))),
|
|
70
107
|
React.createElement(TourGuideCardTitle, null,
|
|
71
108
|
"Make your agents smarter with\u00A0",
|
|
72
|
-
React.createElement("span", { className: "s-text-brand-red-rose" }, "knowledge and tools")
|
|
109
|
+
React.createElement("span", { className: "s-text-brand-red-rose" }, "knowledge and tools"),
|
|
110
|
+
"."),
|
|
73
111
|
React.createElement(TourGuideCardContent, { className: "s-py-2" },
|
|
74
112
|
React.createElement(Button, { label: "Watch the full video", icon: PlayIcon, variant: "outline" }))),
|
|
75
113
|
React.createElement(TourGuideCard, { anchorRef: bottomLeftRef },
|
|
76
|
-
React.createElement(TourGuideCardVisual, { className: "s-flex s-flex-col s-items-center s-justify-center s-gap-0 s-px-6 s-text-center" },
|
|
77
|
-
React.createElement(
|
|
78
|
-
|
|
79
|
-
React.createElement(
|
|
114
|
+
React.createElement(TourGuideCardVisual, { className: "s-flex s-flex-col s-items-center s-justify-center s-gap-0 s-bg-brand-support-golden s-px-6 s-text-center" },
|
|
115
|
+
React.createElement("div", { className: "s-grid s-grid-cols-4 s-gap-2" },
|
|
116
|
+
React.createElement(Tooltip, { label: "FeedbackHelper", trigger: React.createElement(Avatar, { size: "lg", emoji: "\u2764\uFE0F", backgroundColor: "s-bg-rose-100" }) }),
|
|
117
|
+
React.createElement(Tooltip, { label: "RiskAnalyzer", trigger: React.createElement(Avatar, { size: "lg", emoji: "\uD83D\uDC80", backgroundColor: "s-bg-lime-800" }) }),
|
|
118
|
+
React.createElement(Tooltip, { label: "EngagementPro", trigger: React.createElement(Avatar, { size: "lg", emoji: "\uD83D\uDE02", backgroundColor: "s-bg-golden-200" }) }),
|
|
119
|
+
React.createElement(Tooltip, { label: "RunbookMaster", trigger: React.createElement(Avatar, { size: "lg", emoji: "\uD83E\uDDD1\u200D\uD83D\uDE80", backgroundColor: "s-bg-violet-800" }) }),
|
|
120
|
+
React.createElement(Tooltip, { label: "BrandSpecialist", trigger: React.createElement(Avatar, { size: "lg", emoji: "\uD83D\uDC55", backgroundColor: "s-bg-blue-200" }) }),
|
|
121
|
+
React.createElement(Tooltip, { label: "CrisisManager", trigger: React.createElement(Avatar, { size: "lg", emoji: "\uD83D\uDE92", backgroundColor: "s-bg-red-200" }) }),
|
|
122
|
+
React.createElement(Tooltip, { label: "PerformanceCoach", trigger: React.createElement(Avatar, { size: "lg", emoji: "\uD83C\uDFC6", backgroundColor: "s-bg-yellow-200" }) }),
|
|
123
|
+
React.createElement(Tooltip, { label: "StrategyPlanner", trigger: React.createElement(Avatar, { size: "lg", emoji: "\uD83C\uDFAF", backgroundColor: "s-bg-pink-100" }) }))),
|
|
80
124
|
React.createElement(TourGuideCardTitle, null,
|
|
81
125
|
"Create new custom agents",
|
|
82
126
|
" ",
|
|
83
|
-
React.createElement("span", { className: "s-text-brand-orange-golden" }, "designed for your needs")
|
|
127
|
+
React.createElement("span", { className: "s-text-brand-orange-golden" }, "designed for your needs"),
|
|
128
|
+
"."),
|
|
84
129
|
React.createElement(TourGuideCardContent, { className: "s-py-2" },
|
|
85
130
|
React.createElement(Button, { label: "Watch the full video", icon: PlayIcon, variant: "outline" }))))));
|
|
86
131
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TourGuide.stories.js","sourceRoot":"","sources":["../../../src/stories/TourGuide.stories.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,
|
|
1
|
+
{"version":3,"file":"TourGuide.stories.js","sourceRoot":"","sources":["../../../src/stories/TourGuide.stories.tsx"],"names":[],"mappings":"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"}
|