@dust-tt/sparkle 0.2.183 → 0.2.184

package/src/components/Citation.tsx

@@ -0,0 +1,168 @@
+import React, { ReactNode } from "react";
+
+import { DocumentTextStrokeIcon, ImageStrokeIcon } from "@sparkle/icons/stroke";
+import { classNames } from "@sparkle/lib/utils";
+import {
+  Confluence,
+  Drive,
+  Github,
+  Intercom,
+  Microsoft,
+  Notion,
+  Slack,
+} from "@sparkle/logo/platforms";
+
+import {
+  Avatar,
+  CardButton,
+  Icon,
+  IconButton,
+  Spinner,
+  Tooltip,
+  XCircleIcon,
+} from "..";
+
+export type CitationType =
+  | "confluence"
+  | "document"
+  | "github"
+  | "google_drive"
+  | "image"
+  | "intercom"
+  | "microsoft"
+  | "notion"
+  | "slack";
+
+interface CitationProps {
+  avatarSrc?: string;
+  description?: string;
+  href?: string;
+  imgSrc?: string;
+  index?: ReactNode;
+  isBlinking?: boolean;
+  isLoading?: boolean;
+  onClose?: () => void;
+  size?: "xs" | "sm";
+  sizing?: "fixed" | "fluid";
+  title: string;
+  type?: CitationType;
+}
+
+const typeIcons = {
+  confluence: Confluence,
+  document: DocumentTextStrokeIcon,
+  github: Github,
+  google_drive: Drive,
+  intercom: Intercom,
+  microsoft: Microsoft,
+  notion: Notion,
+  slack: Slack,
+  image: ImageStrokeIcon,
+};
+
+const typeSizing = {
+  fixed: { xs: "s-w-48", sm: "s-w-64" },
+  fluid: "s-w-full",
+};
+
+export function Citation({
+  avatarSrc,
+  description,
+  href,
+  imgSrc,
+  index,
+  isBlinking = false,
+  isLoading,
+  onClose,
+  size = "sm",
+  sizing = "fixed",
+  title,
+  type = "document",
+}: CitationProps) {
+  const cardContent = (
+    <>
+      {type === "image" && imgSrc && (
+        <div
+          className="s-absolute s-left-0 s-top-0 s-brightness-90 s-filter s-transition s-duration-200 s-ease-out hover:s-brightness-110 active:s-brightness-100 group-hover:s-brightness-110 group-hover:s-filter group-active:s-brightness-100"
+          style={{
+            backgroundImage: `url(${imgSrc})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            height: "100%",
+            width: "100%",
+          }}
+        />
+      )}
+      <div className="s-flex s-items-center s-gap-2">
+        {avatarSrc && <Avatar visual={avatarSrc} size="xs" />}
+        {index && (
+          <div
+            className={classNames(
+              "s-flex s-items-center s-justify-center s-rounded-full s-border s-border-violet-200 s-bg-violet-100 s-text-xs s-font-semibold s-text-element-800",
+              size === "sm" ? "s-h-5 s-w-5" : "s-h-4 s-w-4"
+            )}
+          >
+            {index}
+          </div>
+        )}
+
+        {!isLoading && (
+          <Icon visual={typeIcons[type]} className="s-text-element-700" />
+        )}
+        <div className="s-flex-grow s-text-xs" />
+        {onClose && (
+          <div
+            className={classNames(
+              type === "image"
+                ? "s-z-50 s-h-5 s-w-5 s-rounded-full s-bg-slate-950/30"
+                : ""
+            )}
+          >
+            <IconButton
+              icon={XCircleIcon}
+              variant={type === "image" ? "white" : "tertiary"}
+              onClick={onClose}
+            />
+          </div>
+        )}
+      </div>
+      <Tooltip label={title} position="above">
+        <div
+          className={classNames(
+            "s-line-clamp-1 s-text-sm s-text-element-800",
+            size === "sm" ? "s-font-bold" : "s-font-semibold"
+          )}
+        >
+          {title}
+        </div>
+      </Tooltip>
+      {description && (
+        <div className="s-line-clamp-2 s-text-xs s-font-normal s-text-element-700">
+          {description}
+        </div>
+      )}
+    </>
+  );
+
+  return (
+    <CardButton
+      variant="secondary"
+      size="sm"
+      className={classNames(
+        "s-relative s-flex s-w-48 s-flex-none s-flex-col s-gap-1",
+        sizing === "fluid" ? typeSizing[sizing] : typeSizing[sizing][size],
+        size === "sm" ? "sm:s-w-64" : "",
+        isBlinking ? "s-animate-[bgblink_500ms_3]" : "",
+        type === "image" ? "s-min-h-20" : ""
+      )}
+      {...(href && { href, target: "_blank", rel: "noopener noreferrer" })}
+    >
+      {isLoading && (
+        <div className="s-absolute s-inset-0 s-flex s-items-center s-justify-center">
+          <Spinner size="xs" variant="color" />
+        </div>
+      )}
+      <div className={isLoading ? "s-opacity-50" : ""}>{cardContent}</div>
+    </CardButton>
+  );
+}

package/src/components/CollapseButton.tsx

@@ -0,0 +1,90 @@
+import Lottie, { LottieRefCurrentProps } from "lottie-react";
+import React, { useEffect, useRef } from "react";
+
+import collapseBar from "@sparkle/lottie/collapseBar";
+
+export interface CollapseButtonProps {
+  direction: "left" | "right";
+}
+
+// Constant to store frame numbers
+const FRAMES = {
+  INITIAL: 0,
+  IDLE: 13,
+  LEFT_START: 1,
+  RIGHT_END: 25,
+};
+
+const CollapseButton: React.FC<CollapseButtonProps> = ({ direction }) => {
+  const lottieRef = useRef<LottieRefCurrentProps | null>(null);
+
+  // Function to handle hover event
+  const handleMouseEnter = () => {
+    if (lottieRef.current?.animationItem) {
+      if (direction === "left") {
+        lottieRef.current.animationItem.playSegments(
+          [FRAMES.IDLE, FRAMES.LEFT_START],
+          true
+        );
+      } else if (direction === "right") {
+        lottieRef.current.animationItem.playSegments(
+          [FRAMES.IDLE, FRAMES.RIGHT_END],
+          true
+        );
+      }
+    }
+  };
+
+  // Function to reset animation to idle state
+  const handleMouseLeave = () => {
+    if (lottieRef.current?.animationItem) {
+      if (direction === "left") {
+        lottieRef.current.animationItem.playSegments(
+          [FRAMES.LEFT_START, FRAMES.IDLE],
+          true
+        );
+      } else if (direction === "right") {
+        lottieRef.current.animationItem.playSegments(
+          [FRAMES.RIGHT_END, FRAMES.IDLE],
+          true
+        );
+      }
+    }
+  };
+
+  useEffect(() => {
+    // Ensure the animation starts from the initial state
+    const initializeAnimation = () => {
+      if (lottieRef.current?.animationItem) {
+        lottieRef.current.animationItem.goToAndStop(FRAMES.INITIAL, true);
+        // Set to idle state after initial load
+        setTimeout(() => {
+          lottieRef.current?.animationItem?.goToAndStop(FRAMES.IDLE, true);
+        }, 100);
+      }
+    };
+
+    // Adding a small delay to ensure the animation is ready
+    const timeoutId = setTimeout(initializeAnimation, 100);
+
+    return () => clearTimeout(timeoutId);
+  }, []);
+
+  return (
+    <div
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      style={{ width: `24px`, height: `36px` }}
+      className="s-cursor-pointer"
+    >
+      <Lottie
+        lottieRef={lottieRef}
+        animationData={collapseBar}
+        loop={false}
+        autoplay={false}
+      />
+    </div>
+  );
+};
+
+export default CollapseButton;

package/src/components/Collapsible.tsx

@@ -0,0 +1,165 @@
+import { Disclosure, Transition } from "@headlessui/react";
+import React, { createContext, useContext } from "react";
+
+import { ChevronDownIcon, ChevronRightIcon } from "@sparkle/icons/solid";
+import { classNames } from "@sparkle/lib/utils";
+
+import { Icon } from "./Icon";
+
+const OpenStateContext = createContext<boolean | undefined>(undefined);
+
+const useOpenState = (): boolean => {
+  const context = useContext(OpenStateContext);
+  if (context === undefined) {
+    throw new Error("useOpenState must be used within a OpenStateProvider");
+  }
+  return context;
+};
+
+export interface CollapsibleProps {
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}
+
+export const Collapsible: React.FC<CollapsibleProps> & {
+  Button: React.FC<CollapsibleButtonProps>;
+  Panel: React.FC<CollapsiblePanelProps>;
+} = ({ children, defaultOpen }) => (
+  <Disclosure defaultOpen={defaultOpen}>
+    {({ open }) => (
+      <OpenStateContext.Provider value={open}>
+        {children}
+      </OpenStateContext.Provider>
+    )}
+  </Disclosure>
+);
+
+export interface CollapsibleButtonProps {
+  label?: string;
+  className?: string;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  variant?: "primary" | "secondary";
+}
+Collapsible.Button = function ({
+  label,
+  children,
+  className = "",
+  disabled = false,
+  variant = "primary",
+}: CollapsibleButtonProps) {
+  const open = useOpenState();
+
+  const labelClasses = {
+    primary: {
+      base: "s-text-action-500 s-inline-flex s-transition-colors s-ease-out s-duration-400 s-box-border s-gap-x-2 s-select-none",
+      hover: "group-hover:s-text-action-400",
+      active: "active:s-text-action-600",
+      dark: {
+        base: "dark:s-text-action-500-dark",
+        hover: "dark:group-hover:s-text-action-400-dark",
+        active: "dark:active:s-text-action-600-dark",
+        disabled: "dark:s-element-500-dark",
+      },
+      disabled: "s-element-500",
+    },
+
+    secondary: {
+      base: "s-text-element-900 s-inline-flex s-transition-colors s-ease-out s-duration-400 s-box-border s-gap-x-2 s-select-none",
+      hover: "group-hover:s-text-action-500",
+      active: "active:s-text-action-600",
+      dark: {
+        base: "dark:s-text-element-900-dark",
+        hover: "dark:group-hover:s-text-action-400-dark",
+        active: "dark:active:s-text-action-600-dark",
+        disabled: "dark:s-element-500-dark",
+      },
+      disabled: "s-element-500",
+    },
+  };
+
+  const chevronClasses = {
+    primary: {
+      base: "s-text-element-600",
+      hover: "group-hover:s-text-action-400",
+      active: "active:s-text-action-700",
+      disabled: "s-element-500",
+      dark: {
+        base: "dark:s-text-element-600-dark",
+        hover: "dark:group-hover:s-text-action-500-dark",
+        active: "dark:active:s-text-action-700-dark",
+        disabled: "dark:s-element-500-dark",
+      },
+    },
+    secondary: {
+      base: "s-text-element-600",
+      hover: "group-hover:s-text-action-400",
+      active: "active:s-text-action-700",
+      disabled: "s-element-500",
+      dark: {
+        base: "dark:s-text-element-600-dark",
+        hover: "dark:group-hover:s-text-action-500-dark",
+        active: "dark:active:s-text-action-700-dark",
+        disabled: "dark:s-element-500-dark",
+      },
+    },
+  };
+
+  const finalLabelClasses = classNames(
+    labelClasses[variant].base,
+    labelClasses[variant].dark.base,
+    !disabled ? labelClasses[variant].active : "",
+    !disabled ? labelClasses[variant].dark.active : "",
+    !disabled ? labelClasses[variant].hover : "",
+    !disabled ? labelClasses[variant].dark.hover : "",
+    disabled ? labelClasses[variant].disabled : ""
+  );
+
+  const finalChevronClasses = classNames(
+    chevronClasses[variant].base,
+    chevronClasses[variant].dark.base,
+    !disabled ? chevronClasses[variant].active : "",
+    !disabled ? chevronClasses[variant].dark.active : "",
+    !disabled ? chevronClasses[variant].hover : "",
+    !disabled ? chevronClasses[variant].dark.hover : "",
+    disabled ? chevronClasses[variant].disabled : ""
+  );
+
+  return (
+    <Disclosure.Button
+      disabled={disabled}
+      className={classNames(
+        disabled ? "s-cursor-default" : "s-cursor-pointer",
+        className,
+        "s-group s-flex s-items-center s-justify-items-center s-gap-1 s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0"
+      )}
+    >
+      <Icon
+        visual={open ? ChevronDownIcon : ChevronRightIcon}
+        size="sm"
+        className={finalChevronClasses}
+      />
+      {children ? children : <span className={finalLabelClasses}>{label}</span>}
+    </Disclosure.Button>
+  );
+};
+
+export interface CollapsiblePanelProps {
+  children: React.ReactNode;
+  open?: boolean;
+}
+
+Collapsible.Panel = ({ children }: CollapsiblePanelProps) => (
+  <Transition
+    enter="s-transition s-duration-300 s-ease-out"
+    enterFrom="s-transform s-scale-95 s-opacity-0"
+    enterTo="s-transform s-scale-100 s-opacity-100"
+    leave="s-transition s-duration-300 s-ease-out"
+    leaveFrom="s-transform s-scale-100 s-opacity-100"
+    leaveTo="s-transform s-scale-95 s-opacity-0"
+  >
+    <Disclosure.Panel>
+      <div className="s-text-gray-500">{children}</div>
+    </Disclosure.Panel>
+  </Transition>
+);

package/src/components/ColorPicker.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+interface ColorSwatchProps {
+  onClick: (color: string) => void;
+  color: string;
+}
+
+const ColorSwatch = ({ color, onClick }: ColorSwatchProps) => {
+  return (
+    <div
+      className={`s-${color} s-h-5 s-w-5 s-cursor-pointer s-rounded hover:s-scale-110`}
+      onClick={() => onClick(color)}
+    />
+  );
+};
+
+interface ColorPickerProps<T extends string> {
+  onColorSelect: (color: T) => void;
+  colors: T[];
+}
+
+export function ColorPicker<T extends string>({
+  colors,
+  onColorSelect,
+}: ColorPickerProps<T>) {
+  return (
+    <div className="s-grid-rows-20 w-auto s-grid s-grid-cols-8 s-gap-1.5 s-rounded s-p-2 s-shadow-lg">
+      {colors.map((color) => {
+        return (
+          <ColorSwatch
+            key={color}
+            color={color}
+            onClick={() => onColorSelect(color)}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/components/ConfettiBackground.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useRef, useState } from "react";
+import Confetti from "react-confetti";
+
+const baseConfettiProps = {
+  wind: 0.005,
+  gravity: 0.02,
+  numberOfPieces: 80,
+  colors: ["#FCD34D", "#6EE7B7", "#7DD3FC", "#F9A8D4", "#FCA5A5", "#D8B4FE"],
+};
+
+const baseSnowProps = {
+  wind: 0.003,
+  gravity: 0.01,
+  numberOfPieces: 100,
+  colors: ["#BFDBFE", "#93C5FD", "#DBEAFE", "#EFF6FF"],
+  drawShape: drawSnowflake,
+};
+
+function randomInt(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function drawSnowflake(ctx: CanvasRenderingContext2D): void {
+  const numPoints = randomInt(3, 4) * 2;
+  const innerRadius = 0.2;
+  const outerRadius = 0.8;
+  ctx.beginPath();
+  ctx.moveTo(0, 0 - outerRadius);
+
+  for (let n = 1; n < numPoints * 2; n++) {
+    const radius = n % 2 === 0 ? outerRadius : innerRadius;
+    const x = radius * Math.sin((n * Math.PI) / numPoints);
+    const y = -1 * radius * Math.cos((n * Math.PI) / numPoints);
+    ctx.lineTo(x, y);
+  }
+  ctx.fill();
+  ctx.stroke();
+  ctx.closePath();
+}
+
+export interface ConfettiBackgroundProps {
+  width?: number;
+  height?: number;
+  variant?: "confetti" | "snow";
+  referentSize?: React.RefObject<HTMLElement>;
+}
+
+const ConfettiBackground: React.FC<ConfettiBackgroundProps> = ({
+  width,
+  height,
+  variant = "confetti",
+  referentSize,
+}) => {
+  const [referentWidth, setReferentWidth] = useState(0);
+  const [referentHeight, setReferentHeight] = useState(0);
+  const resizeObserver = useRef<ResizeObserver | null>(null);
+
+  useEffect(() => {
+    if (referentSize && referentSize.current) {
+      const { clientWidth, clientHeight } = referentSize.current;
+      setReferentWidth(clientWidth);
+      setReferentHeight(clientHeight);
+
+      resizeObserver.current = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          setReferentWidth(entry.target.clientWidth);
+          setReferentHeight(entry.target.clientHeight);
+        }
+      });
+
+      resizeObserver.current.observe(referentSize.current);
+    }
+
+    return () => {
+      if (resizeObserver.current && referentSize && referentSize.current) {
+        resizeObserver.current.unobserve(referentSize.current);
+      }
+    };
+  }, [referentSize]);
+
+  const confettiProps = {
+    ...baseConfettiProps,
+    width: referentSize ? referentWidth : width,
+    height: referentSize ? referentHeight : height,
+  };
+
+  const snowProps = {
+    ...baseSnowProps,
+    width: referentSize ? referentWidth : width,
+    height: referentSize ? referentHeight : height,
+  };
+
+  switch (variant) {
+    case "confetti":
+      return <Confetti {...confettiProps} />;
+    case "snow":
+      return <Confetti {...snowProps} />;
+    default:
+      return <Confetti {...confettiProps} />;
+  }
+};
+
+export default ConfettiBackground;

package/src/components/ContentMessage.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+import { Icon, InformationCircleIcon } from "..";
+
+export interface ContentMessageProps {
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+  size?: "sm" | "md";
+  variant?:
+    | "emerald"
+    | "amber"
+    | "slate"
+    | "purple"
+    | "warning"
+    | "sky"
+    | "pink"
+    | "action"
+    | "red";
+}
+
+export function ContentMessage({
+  title,
+  variant = "amber",
+  children,
+  size = "md",
+  className = "",
+}: ContentMessageProps) {
+  const variantClasses = {
+    border: `s-border-${variant}-200`,
+    background: `s-bg-${variant}-100`,
+    iconColor: `s-text-${variant}-800`,
+    titleColor: `s-text-${variant}-800`,
+    textColor: `s-text-${variant}-950`,
+  };
+
+  return (
+    <div
+      className={classNames(
+        "s-flex s-gap-2 s-border",
+        variantClasses.border,
+        variantClasses.background,
+        size === "md"
+          ? "s-max-w-[500px] s-rounded-2xl s-p-4"
+          : "s-max-w-[380px] s-rounded-xl s-px-4 s-py-3",
+        className
+      )}
+    >
+      {size === "md" && (
+        <>
+          <Icon
+            size="md"
+            visual={InformationCircleIcon}
+            className={classNames("s-shrink-0", variantClasses.iconColor)}
+          />
+          <div className="s-flex s-flex-col s-gap-2">
+            <div
+              className={classNames(
+                "s-text-base s-font-semibold",
+                variantClasses.titleColor
+              )}
+            >
+              {title}
+            </div>
+            <div className={classNames("s-text-sm", variantClasses.textColor)}>
+              {children}
+            </div>
+          </div>
+        </>
+      )}
+      {size === "sm" && (
+        <div className={classNames("s-text-sm", variantClasses.textColor)}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}