@dust-tt/sparkle 0.2.183 → 0.2.184

package/src/components/Tab.tsx

@@ -0,0 +1,241 @@
+import React, { ComponentType, MouseEvent, ReactNode } from "react";
+
+import {
+  noHrefLink,
+  SparkleContext,
+  SparkleContextLinkType,
+} from "@sparkle/context";
+import { ChevronRightIcon } from "@sparkle/index";
+import { classNames } from "@sparkle/lib/utils";
+
+import { Icon } from "./Icon";
+import { Tooltip } from "./Tooltip";
+
+type TabType<E> = {
+  label: string;
+  id?: E;
+  hideLabel?: boolean;
+  current: boolean;
+  sizing?: "hug" | "expand";
+  icon?: ComponentType<{ className?: string }>;
+  hasSeparator?: boolean;
+} & (
+  | { onClick?: (event: MouseEvent<HTMLAnchorElement>) => void; href?: never }
+  | { onClick?: never; href: string }
+);
+
+type TabProps<E> = {
+  variant?: "default" | "stepper";
+  tabs: Array<TabType<E>>;
+  setCurrentTab?: (tabId: E, e: MouseEvent<HTMLAnchorElement>) => void;
+  tabClassName?: string;
+  className?: string;
+};
+
+const tabClasses = {
+  default: {
+    base: "s-text-element-800 s-border-transparent s-cursor-pointer s-border-b-2",
+    hover: "hover:s-text-action-500 hover:s-border-action-300",
+    dark: {
+      base: "dark:s-text-element-700-dark",
+      hover: "dark:hover:s-text-action-600-dark",
+    },
+  },
+  selected: {
+    base: "s-border-action-500 s-text-action-500 s-cursor-default s-border-b-2",
+    hover: "",
+    dark: {
+      base: "dark:s-border-action-500-dark dark:s-text-action-500-dark",
+      hover: "",
+    },
+  },
+  stepperDefault: {
+    base: "s-text-element-800 s-cursor-pointer",
+    hover: "hover:s-text-action-500",
+    dark: {
+      base: "dark:s-text-element-700-dark",
+      hover: "dark:hover:s-text-action-600-dark",
+    },
+  },
+  stepperSelected: {
+    base: "s-text-action-500 s-cursor-default",
+    hover: "",
+    dark: {
+      base: "dark:dark:s-text-action-500-dark",
+      hover: "",
+    },
+  },
+};
+
+const iconClasses = {
+  default: {
+    base: "s-text-element-600",
+    hover: "group-hover:s-text-action-400",
+    dark: {
+      base: "dark:s-text-element-600-dark",
+      hover: "dark:group-hover:s-text-action-500-dark",
+    },
+  },
+  selected: {
+    base: "s-text-action-400",
+    hover: "",
+    dark: {
+      base: "dark:s-text-action-500-dark",
+      hover: "",
+    },
+  },
+};
+
+const tabSizingClasses = {
+  hug: "",
+  expand: "s-flex-1",
+};
+
+/**
+ * Tab component displaying a list of tabs.
+ *
+ * Tab click action is specified:
+ * - either per tab, by providing either an href or an onClick handler in tab
+ *   data (mutually exclusive);
+ * - or globally, by providing a setCurrentTab function.
+ * Both per-tab and global actions can be set, the per-tab action taking precedence.
+ */
+export function Tab<E>({
+  variant = "default",
+  tabs,
+  setCurrentTab,
+  className,
+  tabClassName = "",
+}: TabProps<E>) {
+  const { components } = React.useContext(SparkleContext);
+
+  const renderTabs = () =>
+    tabs.map((tab, i) => {
+      const tabStateClasses =
+        variant === "stepper"
+          ? tab.current
+            ? tabClasses.stepperSelected
+            : tabClasses.stepperDefault
+          : tab.current
+            ? tabClasses.selected
+            : tabClasses.default;
+      const iconStateClasses = tab.current
+        ? iconClasses.selected
+        : iconClasses.default;
+
+      const finalTabClasses = classNames(
+        "s-group s-justify-center s-flex s-text-sm s-font-semibold s-py-2.5 s-transition-all ease-out s-duration-400 s-whitespace-nowrap s-select-none",
+        variant === "default"
+          ? tab.icon
+            ? tab.hideLabel
+              ? "s-px-3"
+              : "s-pr-3.5 s-pl-2.5"
+            : "s-px-3"
+          : "s-pl-1",
+
+        tabStateClasses.base,
+        tabStateClasses.hover,
+        tabStateClasses.dark.base,
+        tabStateClasses.dark.hover,
+        tabClassName
+      );
+
+      const finalIconClasses = classNames(
+        "s-transition-colors s-duration-400",
+        iconStateClasses.base,
+        iconStateClasses.hover,
+        iconStateClasses.dark.base,
+        iconStateClasses.dark.hover,
+        tabClassName
+      );
+
+      const Link: SparkleContextLinkType = tab.href
+        ? components.link
+        : noHrefLink;
+
+      // precedence on href and onClick (mutually exclusive), then setCurrentTab
+      const setCurrentTabFn = (e: MouseEvent<HTMLAnchorElement>) => {
+        if (!tab.id) {
+          throw new Error("Tab id is required to use setCurrentTab");
+        }
+        setCurrentTab?.(tab.id, e);
+      };
+      const onClickAction = tab.href
+        ? undefined
+        : tab.onClick ?? setCurrentTabFn;
+
+      const content: ReactNode = (
+        <Link
+          key={tab.label}
+          className={finalTabClasses}
+          aria-current={tab.current ? "page" : undefined}
+          onClick={onClickAction}
+          href={tab.href || "#"}
+        >
+          <div
+            className={
+              tab.current
+                ? "s-flex s-gap-x-2"
+                : "s-flex s-gap-x-2 s-transition s-duration-300 s-ease-out"
+            }
+          >
+            {tab.icon && (
+              <Icon visual={tab.icon} className={finalIconClasses} size="sm" />
+            )}
+            {tab.hideLabel ?? tab.label}
+            {variant === "stepper" && i < tabs.length - 1 && (
+              <Icon
+                visual={ChevronRightIcon}
+                className="s-mx-2 s-text-element-500"
+                size="sm"
+              />
+            )}
+          </div>
+        </Link>
+      );
+      return tab.hideLabel ? (
+        tab.label ? (
+          <React.Fragment key={`tab-${i}`}>
+            <div className={tabSizingClasses[tab.sizing ?? "hug"]}>
+              <Tooltip label={tab.label}>{content}</Tooltip>
+            </div>
+            {tab.hasSeparator && (
+              <div className="s-flex s-h-full s-grow" key={`sep-${i}`} />
+            )}
+          </React.Fragment>
+        ) : (
+          <React.Fragment key={`tab-${i}`}>
+            <div className={tabSizingClasses[tab.sizing ?? "hug"]}>
+              {content}
+            </div>
+            {tab.hasSeparator && (
+              <div className="s-flex s-h-full s-grow" key={`sep-${i}`} />
+            )}
+          </React.Fragment>
+        )
+      ) : (
+        <React.Fragment key={`tab-${i}`}>
+          <div className={tabSizingClasses[tab.sizing ?? "hug"]}>{content}</div>
+          {tab.hasSeparator && (
+            <div className="s-flex s-h-full s-grow" key={`sep-${i}`} />
+          )}
+        </React.Fragment>
+      );
+    });
+
+  return (
+    <div
+      className={classNames(
+        variant === "default"
+          ? "s-border-b s-border-structure-200 dark:s-border-structure-200-dark"
+          : "",
+        className ?? "",
+        "s-overflow-x-auto s-overflow-y-hidden s-scrollbar-hide"
+      )}
+    >
+      <nav className="s-flex s-space-x-0" aria-label="Tabs">
+        {renderTabs()}
+      </nav>
+    </div>
+  );
+}

package/src/components/TextArea.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef } from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+type TextAreaProps = {
+  placeholder: string;
+  value: string | null;
+  onChange: (value: string) => void;
+  error?: string | null;
+  showErrorLabel?: boolean;
+  className?: string;
+};
+
+export function TextArea({
+  placeholder,
+  value,
+  onChange,
+  error,
+  showErrorLabel = false,
+  className,
+}: TextAreaProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = `${textarea.scrollHeight}px`; // Set to scroll height
+    }
+  }, [value]); // Re-run when value changes
+  return (
+    <div className="s-flex s-flex-col s-gap-1 s-p-px">
+      <textarea
+        ref={textareaRef}
+        className={classNames(
+          "overflow-y-auto s-block s-min-h-60 s-w-full s-min-w-0 s-rounded-xl s-text-sm s-transition-all s-duration-200 s-scrollbar-hide",
+          !error
+            ? "s-border-structure-100 focus:s-border-action-300 focus:s-ring-action-300"
+            : "s-border-red-500 focus:s-border-red-500 focus:s-ring-red-500",
+          "s-border-structure-200 s-bg-structure-50",
+          "s-resize-y",
+          className ?? ""
+        )}
+        placeholder={placeholder}
+        value={value ?? ""}
+        onChange={(e) => {
+          const newValue = e.target.value;
+          const textAreaComponent = textareaRef.current;
+          if (
+            textAreaComponent &&
+            value?.length &&
+            newValue.length < value.length
+          ) {
+            textAreaComponent.style.height = "auto"; // Reset height to recalculate
+          }
+          onChange(e.target.value);
+        }}
+      />
+      {error && showErrorLabel && (
+        <div className="s-ml-2 s-text-sm s-text-warning-500">{error}</div>
+      )}
+    </div>
+  );
+}

package/src/components/Tooltip.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+export interface TooltipProps {
+  children: React.ReactNode;
+  label?: string;
+  position?: "above" | "below";
+  contentChildren?: React.ReactNode;
+}
+
+export function Tooltip({
+  children,
+  label,
+  position = "above",
+  contentChildren,
+}: TooltipProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [timerId, setTimerId] = useState<number | null>(null);
+  const [isTouchDevice, setIsTouchDevice] = useState(false);
+
+  const handleMouseOver = () => {
+    const id = window.setTimeout(() => {
+      setIsHovered(true);
+    }, 800);
+    setTimerId(id);
+  };
+
+  const handleMouseLeave = () => {
+    if (timerId !== null) {
+      clearTimeout(timerId);
+    }
+    setIsHovered(false);
+  };
+
+  useEffect(() => {
+    setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    return () => {
+      if (timerId) {
+        window.clearTimeout(timerId);
+      }
+    };
+  }, [timerId]);
+
+  if (isTouchDevice) {
+    return <>{children}</>;
+  }
+
+  const baseClasses = classNames(
+    "s-absolute s-z-10 s-px-3 s-py-2 s-text-sm s-rounded-xl s-border s-shadow-md s-transition-all s-duration-500 s-ease-out s-transform",
+    "s-border-structure-100 dark:s-border-structure-50-dark s-bg-structure-0 dark:s-bg-structure-100-dark s-text-element-700 dark:s-text-element-600-dark"
+  );
+  const hiddenClasses = "s-translate-y-2 s-opacity-0 s-pointer-events-none"; // Added s-pointer-events-none
+  const visibleClasses = "-s-translate-y-0 s-opacity-100";
+  const hiddenOnMobileClasses = "s-hidden sm:s-block";
+  const tooltipCenterClasses = "s-left-1/2 -s-translate-x-1/2";
+  const tooltipPositionClasses =
+    position === "above" ? "s-bottom-full s-mb-2" : "s-top-full s-mt-2";
+
+  // if tooltip text is too long we need to wrap it
+  const labelLength = label?.length || 0;
+  const labelClasses = labelLength > 80 ? "s-w-[38em]" : "s-whitespace-nowrap";
+
+  return (
+    <div
+      onMouseEnter={handleMouseOver}
+      onMouseLeave={handleMouseLeave}
+      className="s-relative s-inline-block"
+    >
+      {children}
+      <div
+        className={classNames(
+          `${isHovered ? visibleClasses : hiddenClasses}`,
+          baseClasses,
+          hiddenOnMobileClasses,
+          tooltipPositionClasses,
+          tooltipCenterClasses,
+          contentChildren ? "" : labelClasses
+        )}
+        onAnimationEnd={() => setIsHovered(false)}
+      >
+        {contentChildren || label}
+      </div>
+    </div>
+  );
+}

package/src/components/Tree.tsx

@@ -0,0 +1,147 @@
+import React, { useState } from "react";
+
+import {
+  ChatBubbleBottomCenterTextStrokeIcon,
+  DocumentTextStrokeIcon,
+  FolderStrokeIcon,
+  Square3Stack3DStrokeIcon,
+} from "@sparkle/icons/stroke";
+import { ChevronDownIcon, ChevronRightIcon, Spinner } from "@sparkle/index";
+import { classNames } from "@sparkle/lib/utils";
+
+import { Checkbox, CheckboxProps } from "./Checkbox";
+import { Icon } from "./Icon";
+import { IconButton } from "./IconButton";
+
+export interface TreeProps {
+  children?: React.ReactNode;
+  isLoading?: boolean;
+}
+
+export function Tree({ children, isLoading }: TreeProps) {
+  return isLoading ? (
+    <div className="s-py-2 s-pl-4">
+      <Spinner size="xs" variant="dark" />
+    </div>
+  ) : (
+    <div className="s-flex s-flex-col s-gap-1 s-overflow-hidden">
+      {children}
+    </div>
+  );
+}
+
+const visualTable = {
+  file: DocumentTextStrokeIcon,
+  folder: FolderStrokeIcon,
+  database: Square3Stack3DStrokeIcon,
+  channel: ChatBubbleBottomCenterTextStrokeIcon,
+};
+
+interface TreeItemProps {
+  label?: string;
+  type?: "node" | "item" | "leaf";
+  variant?: "file" | "folder" | "database" | "channel";
+  visual?: React.ReactNode;
+  checkbox?: CheckboxProps;
+  onChevronClick?: () => void;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  className?: string;
+  actions?: React.ReactNode;
+}
+
+export interface TreeItemPropsWithChildren extends TreeItemProps {
+  renderTreeItems?: never;
+  children?: React.ReactNode;
+}
+
+export interface TreeItemPropsWithRender extends TreeItemProps {
+  renderTreeItems: () => React.ReactNode;
+  children?: never;
+}
+
+Tree.Item = function ({
+  label,
+  type = "node",
+  className = "",
+  variant = "file",
+  visual,
+  checkbox,
+  onChevronClick,
+  collapsed,
+  defaultCollapsed,
+  actions,
+  renderTreeItems,
+  children,
+}: TreeItemPropsWithChildren | TreeItemPropsWithRender) {
+  const [collapsedState, setCollapsedState] = useState<boolean>(
+    defaultCollapsed ?? true
+  );
+
+  const isControlledCollapse = collapsed !== undefined;
+
+  const effectiveCollapsed = isControlledCollapse ? collapsed : collapsedState;
+  const effectiveOnChevronClick = isControlledCollapse
+    ? onChevronClick
+    : () => setCollapsedState(!collapsedState);
+
+  const getChildren = () => {
+    if (effectiveCollapsed) {
+      return [];
+    }
+
+    return typeof renderTreeItems === "function" ? renderTreeItems() : children;
+  };
+
+  const childrenToRender = getChildren();
+
+  return (
+    <>
+      <div
+        className={classNames(
+          className ? className : "",
+          "s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4 s-py-1"
+        )}
+      >
+        {type === "node" && (
+          <IconButton
+            icon={
+              childrenToRender && !effectiveCollapsed
+                ? ChevronDownIcon
+                : ChevronRightIcon
+            }
+            size="sm"
+            variant="secondary"
+            onClick={effectiveOnChevronClick}
+          />
+        )}
+        {type === "leaf" && <div className="s-w-5"></div>}
+        {checkbox && <Checkbox {...checkbox} />}
+
+        <div className="s-flex s-w-full s-items-center s-gap-1.5 s-text-sm s-font-medium s-text-element-900">
+          <div className="s-grid s-w-full s-grid-cols-[auto,1fr,auto] s-items-center s-gap-1.5 s-text-sm s-font-medium s-text-element-900">
+            {visual ? (
+              visual
+            ) : (
+              <Icon
+                visual={visualTable[variant]}
+                size="sm"
+                className="s-flex-shrink-0 s-text-element-700"
+              />
+            )}
+
+            <div className="s-truncate">{label}</div>
+            {actions && (
+              <div className="s-inline-block s-transform s-pl-5 s-opacity-0 s-duration-300 group-hover:s-opacity-100">
+                {actions}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      {React.Children.count(childrenToRender) > 0 && (
+        <div className="s-pl-5">{childrenToRender}</div>
+      )}
+    </>
+  );
+};

package/src/components/ZoomableImageCitationWrapper.tsx

@@ -0,0 +1,54 @@
+import { Dialog } from "@headlessui/react";
+import React, { useState } from "react";
+
+import { XCircleIcon } from "@sparkle/icons/solid";
+import { Citation, IconButton } from "@sparkle/index";
+
+interface ZoomableImageCitationWrapperProps {
+  alt: string;
+  imgSrc: string;
+  title: string;
+  size: "xs" | "sm";
+}
+
+export function ZoomableImageCitationWrapper({
+  alt,
+  imgSrc,
+  title,
+  size = "sm",
+}: ZoomableImageCitationWrapperProps) {
+  const [isZoomed, setIsZoomed] = useState(false);
+
+  const handleZoomToggle = () => {
+    setIsZoomed(!isZoomed);
+  };
+
+  return (
+    <>
+      <div onClick={handleZoomToggle} className="s-min-h-76 s-group s-h-full">
+        <Citation title={title} size={size} type="image" imgSrc={imgSrc} />
+      </div>
+
+      <Dialog
+        open={isZoomed}
+        onClose={handleZoomToggle}
+        className="s-relative s-z-50"
+      >
+        <div className="s-fixed s-inset-0 s-flex s-w-screen s-items-center s-justify-center s-bg-black/70 s-p-4 s-transition-opacity">
+          <Dialog.Panel className="s-max-w-lg s-space-y-4">
+            <Dialog.Title>
+              <div className="s-flex s-justify-end">
+                <IconButton
+                  icon={XCircleIcon}
+                  onClick={handleZoomToggle}
+                  variant="white"
+                />
+              </div>
+            </Dialog.Title>
+            <img src={imgSrc} alt={alt} />
+          </Dialog.Panel>
+        </div>
+      </Dialog>
+    </>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,46 @@
+export { AssistantPreview } from "./AssistantPreview";
+export { Avatar } from "./Avatar";
+export { Banner } from "./Banner";
+export { BarHeader } from "./BarHeader";
+export { Button } from "./Button";
+export { CardButton } from "./CardButton";
+export { Checkbox } from "./Checkbox";
+export { Chip } from "./Chip";
+export { Citation } from "./Citation";
+export { default as CollapseButton } from "./CollapseButton";
+export { Collapsible } from "./Collapsible";
+export { ColorPicker } from "./ColorPicker";
+export { default as ConfettiBackground } from "./ConfettiBackground";
+export { ContentMessage } from "./ContentMessage";
+export { ContextItem } from "./ContextItem";
+export { DataTable } from "./DataTable";
+export { Dialog } from "./Dialog";
+export { DropdownMenu } from "./DropdownMenu";
+export { ElementDialog } from "./ElementDialog";
+export { ElementModal } from "./ElementModal";
+export { EmojiPicker } from "./EmojiPicker";
+export { FilterChips } from "./FilterChips";
+export { Div3D, Hover3D } from "./Hover3D";
+export { Hoverable } from "./Hoverable";
+export { Icon } from "./Icon";
+export { IconButton } from "./IconButton";
+export { IconToggleButton } from "./IconToggleButton";
+export { Input } from "./Input";
+export { Item } from "./Item";
+export { Markdown } from "./Markdown";
+export { Modal } from "./Modal";
+export { Notification } from "./Notification";
+export { Page } from "./Page";
+export { PaginatedCitationsGrid } from "./PaginatedCitationsGrid";
+export { Pagination } from "./Pagination";
+export { Popup } from "./Popup";
+export { PriceTable } from "./PriceTable";
+export { RadioButton } from "./RadioButton";
+export { Searchbar } from "./Searchbar";
+export { SliderToggle } from "./SliderToggle";
+export { default as Spinner } from "./Spinner";
+export { Tab } from "./Tab";
+export { TextArea } from "./TextArea";
+export { Tooltip } from "./Tooltip";
+export { Tree } from "./Tree";
+export { ZoomableImageCitationWrapper } from "./ZoomableImageCitationWrapper";