@dust-tt/sparkle 0.2.448 → 0.2.449-rc-samuel

package/src/components/CommandPalette.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+
+import { cn } from "@sparkle/lib/utils";
+
+import { useCommandPalette } from "../hooks/useCommandPalette";
+import {
+  SamsCommand,
+  SamsCommandDialog,
+  SamsCommandEmpty,
+  SamsCommandGroup,
+  SamsCommandInput,
+  SamsCommandItem,
+  SamsCommandList,
+} from "./SamsCommandPalette";
+
+export const CommandPalette: React.FC = () => {
+  const { commands, isOpen, setOpen, closeCommandPalette } =
+    useCommandPalette();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Focus the input when the palette opens
+  useEffect(() => {
+    if (isOpen) {
+      // Use a small timeout to ensure the dialog is fully rendered before focusing
+      const focusTimeout = setTimeout(() => {
+        inputRef.current?.focus();
+      }, 50);
+
+      return () => clearTimeout(focusTimeout);
+    }
+  }, [isOpen]);
+
+  // Group commands by category
+  const groupedCommands = commands.reduce<Record<string, typeof commands>>(
+    (acc, command) => {
+      const category = command.category || "General";
+      if (!acc[category]) {
+        acc[category] = [];
+      }
+      acc[category].push(command);
+      return acc;
+    },
+    {}
+  );
+
+  // Sort categories and commands
+  const sortedCategories = Object.keys(groupedCommands).sort();
+
+  // Sort commands by priority (if specified)
+  Object.keys(groupedCommands).forEach((category) => {
+    groupedCommands[category].sort((a, b) => {
+      const priorityA = a.priority ?? 0;
+      const priorityB = b.priority ?? 0;
+      return priorityA - priorityB; // Lower priority first
+    });
+  });
+
+  return (
+    <SamsCommandDialog open={isOpen} onOpenChange={setOpen}>
+      <SamsCommand>
+        <SamsCommandInput
+          ref={inputRef}
+          placeholder="Type a command or search..."
+          autoFocus
+        />
+        <SamsCommandList>
+          <SamsCommandEmpty>No results found.</SamsCommandEmpty>
+          {sortedCategories.map((category, categoryIndex) => (
+            <SamsCommandGroup key={category} heading={category}>
+              {groupedCommands[category].map((command, commandIndex) => (
+                <SamsCommandItem
+                  key={command.id}
+                  onSelect={() => {
+                    command.action();
+                    // Optionally close the palette after executing a command
+                    closeCommandPalette();
+                  }}
+                  className={cn(
+                    "s-relative s-flex s-items-center s-gap-2 s-rounded-md s-px-2 s-py-1.5 s-text-sm s-font-medium",
+                    command.id.includes("warning")
+                      ? "s-text-warning-500 data-[selected=true]:s-bg-warning-50 data-[selected=true]:s-text-warning-500"
+                      : "s-text-foreground data-[selected=true]:s-bg-muted-background data-[selected=true]:s-text-foreground",
+
+                    // if it's the last one, rounded-b-md"
+                    categoryIndex === sortedCategories.length - 1 &&
+                      commandIndex === groupedCommands[category].length - 1
+                      ? "s-rounded-b-xl"
+                      : ""
+                  )}
+                >
+                  {command.icon && (
+                    <span className="s-mr-2 s-flex s-h-5 s-w-5 s-items-center s-justify-center">
+                      {command.icon}
+                    </span>
+                  )}
+                  <span>{command.label}</span>
+                  {command.shortcut && (
+                    <span className="s-ml-auto s-text-xs s-tracking-widest s-text-muted-foreground">
+                      {command.shortcut}
+                    </span>
+                  )}
+                </SamsCommandItem>
+              ))}
+            </SamsCommandGroup>
+          ))}
+        </SamsCommandList>
+      </SamsCommand>
+    </SamsCommandDialog>
+  );
+};

package/src/components/Input.tsx

@@ -19,6 +19,7 @@ export interface InputProps
   isError?: boolean;
   className?: string;
   label?: string;
+  isInCommandPalette?: boolean;
 }
 
 const INPUT_STATES = ["error", "disabled", "default"];
@@ -91,6 +92,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       label,
       isError,
       disabled,
+      isInCommandPalette,
       ...props
     },
     ref
@@ -102,7 +104,12 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           ? "disabled"
           : "default";
     return (
-      <div className="s-flex s-flex-col s-gap-1">
+      <div
+        className={cn(
+          "s-flex s-flex-col s-gap-1",
+          isInCommandPalette && "s-w-full"
+        )}
+      >
         {label && (
           <Label htmlFor={props.name} className="s-mb-1">
             {label}

package/src/components/Notification.tsx

@@ -1,8 +1,13 @@
+import { cva } from "class-variance-authority";
 import React from "react";
 import { toast, Toaster } from "sonner";
 
-import { CheckCircleIcon, XCircleIcon } from "@sparkle/icons";
-import { cn } from "@sparkle/lib/utils";
+import {
+  CheckCircleIcon,
+  InformationCircleIcon,
+  XCircleIcon,
+} from "@sparkle/icons";
+import { assertNever, cn } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
 
@@ -11,7 +16,7 @@ const NOTIFICATION_DELAY = 5000;
 export type NotificationType = {
   title?: string;
   description?: string;
-  type: "success" | "error";
+  type: "success" | "error" | "info";
 };
 
 const NotificationsContext = React.createContext<(n: NotificationType) => void>(
@@ -21,11 +26,34 @@ export interface NotificationProps {
   className?: string;
   description?: string;
   title?: string;
-  variant: "success" | "error";
+  variant: "success" | "error" | "info";
   onClick?: () => void;
 }
 
 function NotificationContent({ type, title, description }: NotificationType) {
+  const icon = (() => {
+    switch (type) {
+      case "success":
+        return CheckCircleIcon;
+      case "error":
+        return XCircleIcon;
+      case "info":
+        return InformationCircleIcon;
+      default:
+        assertNever(type);
+    }
+  })();
+
+  const variantClassName = cva("s-pt-0.5", {
+    variants: {
+      type: {
+        success: "s-text-success-600 dark:s-text-success-400-night",
+        error: "s-text-warning-500 dark:s-text-warning-500-night",
+        info: "s-text-info-600 dark:s-text-info-400-night",
+      },
+    },
+  });
+
   return (
     <div
       className={cn(
@@ -35,21 +63,12 @@ function NotificationContent({ type, title, description }: NotificationType) {
         "s-p-4 s-shadow-xl"
       )}
     >
-      {type === "success" ? (
-        <Icon
-          size="lg"
-          visual={CheckCircleIcon}
-          className="s-pt-0.5 s-text-success-600 dark:s-text-success-400-night"
-          aria-hidden="true"
-        />
-      ) : (
-        <Icon
-          size="lg"
-          visual={XCircleIcon}
-          className="s-pt-0.5 s-text-warning-500 dark:s-text-warning-500-night"
-          aria-hidden="true"
-        />
-      )}
+      <Icon
+        size="lg"
+        visual={icon}
+        className={variantClassName({ type })}
+        aria-hidden="true"
+      />
       <div className="s-flex s-flex-col">
         <div
           className={cn(

package/src/components/SamsCommandPalette.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import * as React from "react";
+
+import { Dialog, DialogContent, Input } from "@sparkle/components";
+import { menuStyleClasses } from "@sparkle/components/Dropdown";
+import { cn } from "@sparkle/lib";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="s-overflow-hidden s-p-0">
+        <Command className="[&_[cmdk-group-heading]]:s-p-2 [&_[cmdk-group-heading]]:s-font-medium [&_[cmdk-group-heading]]:s-text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:s-pt-0 [&_[cmdk-group]]:s-px-2 [&_[cmdk-input-wrapper]_svg]:s-h-5 [&_[cmdk-input-wrapper]_svg]:s-w-5 [&_[cmdk-input]]:s-h-12 [&_[cmdk-item]]:s-px-2 [&_[cmdk-item]]:s-py-3 [&_[cmdk-item]_svg]:s-h-5 [&_[cmdk-item]_svg]:s-w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div
+    className="s-flex s-w-full s-items-center s-border-b s-p-3"
+    cmdk-input-wrapper=""
+  >
+    <CommandPrimitive.Input
+      asChild
+      ref={ref}
+      className={cn(className, "s-min-w-full")}
+      {...props}
+    >
+      <Input
+        isInCommandPalette
+        className="s-h-10 s-w-full s-min-w-full s-rounded-md s-bg-transparent s-py-3 s-text-sm s-outline-none placeholder:s-text-muted-foreground disabled:s-cursor-not-allowed disabled:s-opacity-50"
+      />
+    </CommandPrimitive.Input>
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn(
+      "s-max-h-[300px] s-overflow-y-auto s-overflow-x-hidden",
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="s-py-6 s-text-center s-text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "s-overflow-hidden s-p-1 s-text-foreground [&_[cmdk-group-heading]]:s-px-2 [&_[cmdk-group-heading]]:s-py-1.5 [&_[cmdk-group-heading]]:s-text-xs [&_[cmdk-group-heading]]:s-font-medium [&_[cmdk-group-heading]]:s-text-muted-foreground [&_[cmdk-group-items]]:s-pb-1",
+      menuStyleClasses,
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn(
+      "-s-mx-1 s-h-px s-bg-border dark:s-bg-border-night",
+      className
+    )}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "data-[selected=true]:s-bg-accent data-[selected=true]:s-text-accent-foreground [&_svg]:s-size-4 s-relative s-flex s-cursor-default s-select-none s-items-center s-gap-2 s-rounded-sm s-px-2 s-py-1.5 s-text-sm s-outline-none data-[disabled=true]:s-pointer-events-none data-[disabled=true]:s-opacity-50 [&_svg]:s-pointer-events-none [&_svg]:s-shrink-0",
+      // menuStyleClasses.item({ variant: "default" }),
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "s-ml-auto s-text-xs s-tracking-widest s-text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command as SamsCommand,
+  CommandDialog as SamsCommandDialog,
+  CommandEmpty as SamsCommandEmpty,
+  CommandGroup as SamsCommandGroup,
+  CommandInput as SamsCommandInput,
+  CommandItem as SamsCommandItem,
+  CommandList as SamsCommandList,
+  CommandSeparator as SamsCommandSeparator,
+  CommandShortcut as SamsCommandShortcut,
+};

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export { AnimatedText } from "./AnimatedText";
+export { AppCommandPalette } from "./AppCommandPalette";
 export { AspectRatio } from "./AspectRatio";
 export {
   AssistantCard,

package/src/components/markdown/List.tsx

@@ -3,9 +3,7 @@ import React from "react";
 
 import { cn } from "@sparkle/lib";
 
-export const ulBlockVariants = cva([
-  "s-list-disc s-py-2 s-pl-8 first:s-pt-0 last:s-pb-0",
-]);
+export const ulBlockVariants = cva(["s-list-disc s-pb-2 s-pl-6"]);
 
 interface UlBlockProps {
   children: React.ReactNode;
@@ -19,9 +17,7 @@ export function UlBlock({ children, textColor, textSize }: UlBlockProps) {
   );
 }
 
-export const olBlockVariants = cva([
-  "s-list-decimal s-py-3 s-pl-8 first:s-pt-0 last:s-pb-0",
-]);
+export const olBlockVariants = cva(["s-list-decimal s-pb-2 s-pl-6"]);
 
 interface OlBlockProps {
   children: React.ReactNode;
@@ -43,7 +39,7 @@ export function OlBlock({
   );
 }
 
-export const liBlockVariants = cva(["s-break-words first:s-pt-0 last:s-pb-0"]);
+export const liBlockVariants = cva(["s-break-words"]);
 
 interface LiBlockProps {
   children: React.ReactNode;

package/src/contexts/CommandPaletteContext.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+// Command type definition
+export interface Command {
+  id: string;
+  label: string;
+  shortcut?: string;
+  icon?: React.ReactNode;
+  action: () => void;
+  category?: string;
+  priority?: number;
+  entityType?: string;
+  entityId?: string;
+}
+
+interface CommandPaletteContextType {
+  commands: Command[];
+  isOpen: boolean;
+  registerCommand: (command: Command) => void;
+  registerCommands: (commands: Command[]) => void;
+  unregisterCommand: (commandId: string) => void;
+  unregisterCommandsByEntityType: (entityType: string) => void;
+  unregisterCommandsByEntityId: (entityId: string) => void;
+  setOpen: (isOpen: boolean) => void;
+}
+
+const CommandPaletteContext = createContext<
+  CommandPaletteContextType | undefined
+>(undefined);
+
+export const CommandPaletteProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const [commands, setCommands] = useState<Command[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Register a single command
+  const registerCommand = useCallback((command: Command) => {
+    setCommands((prevCommands) => {
+      // Check if command with same ID already exists
+      const index = prevCommands.findIndex((c) => c.id === command.id);
+      if (index >= 0) {
+        // Replace existing command
+        const newCommands = [...prevCommands];
+        newCommands[index] = command;
+        return newCommands;
+      }
+      // Add new command
+      return [...prevCommands, command];
+    });
+  }, []);
+
+  // Register multiple commands at once
+  const registerCommands = useCallback((newCommands: Command[]) => {
+    setCommands((prevCommands) => {
+      const commandMap = new Map(prevCommands.map((c) => [c.id, c]));
+
+      // Update or add new commands
+      newCommands.forEach((command) => {
+        commandMap.set(command.id, command);
+      });
+
+      return Array.from(commandMap.values());
+    });
+  }, []);
+
+  // Unregister a command by ID
+  const unregisterCommand = useCallback((commandId: string) => {
+    setCommands((prevCommands) =>
+      prevCommands.filter((c) => c.id !== commandId)
+    );
+  }, []);
+
+  // Unregister commands by entity type
+  const unregisterCommandsByEntityType = useCallback((entityType: string) => {
+    setCommands((prevCommands) =>
+      prevCommands.filter((c) => c.entityType !== entityType)
+    );
+  }, []);
+
+  // Unregister commands by entity ID
+  const unregisterCommandsByEntityId = useCallback((entityId: string) => {
+    setCommands((prevCommands) =>
+      prevCommands.filter((c) => c.entityId !== entityId)
+    );
+  }, []);
+
+  // Handle keyboard shortcut
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === "k") {
+        event.preventDefault();
+        setIsOpen((prev) => !prev);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  const contextValue: CommandPaletteContextType = {
+    commands,
+    isOpen,
+    registerCommand,
+    registerCommands,
+    unregisterCommand,
+    unregisterCommandsByEntityType,
+    unregisterCommandsByEntityId,
+    setOpen: setIsOpen,
+  };
+
+  return (
+    <CommandPaletteContext.Provider value={contextValue}>
+      {children}
+    </CommandPaletteContext.Provider>
+  );
+};
+
+export const useCommandPaletteContext = (): CommandPaletteContextType => {
+  const context = useContext(CommandPaletteContext);
+  if (context === undefined) {
+    throw new Error(
+      "useCommandPaletteContext must be used within a CommandPaletteProvider"
+    );
+  }
+  return context;
+};

package/src/hooks/useCommandPalette.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect } from "react";
+
+import {
+  Command,
+  useCommandPaletteContext,
+} from "../contexts/CommandPaletteContext";
+
+interface UseCommandPaletteProps {
+  commands?: Command[];
+  entityType?: string;
+  entityId?: string;
+}
+
+/**
+ * Hook for interacting with the command palette
+ *
+ * Optionally register commands when the component mounts and
+ * automatically unregister them when the component unmounts.
+ */
+export const useCommandPalette = (props?: UseCommandPaletteProps) => {
+  const {
+    commands: allCommands,
+    isOpen,
+    registerCommand,
+    registerCommands,
+    unregisterCommand,
+    unregisterCommandsByEntityType,
+    unregisterCommandsByEntityId,
+    setOpen,
+  } = useCommandPaletteContext();
+
+  // Register commands on mount, unregister on unmount
+  useEffect(() => {
+    if (props?.commands?.length) {
+      registerCommands(props.commands);
+    }
+
+    return () => {
+      // Clean up commands when component unmounts
+      if (props?.entityType) {
+        unregisterCommandsByEntityType(props.entityType);
+      }
+      if (props?.entityId) {
+        unregisterCommandsByEntityId(props.entityId);
+      }
+      if (props?.commands) {
+        props.commands.forEach((command) => {
+          unregisterCommand(command.id);
+        });
+      }
+    };
+  }, [
+    props?.commands,
+    props?.entityType,
+    props?.entityId,
+    registerCommands,
+    unregisterCommand,
+    unregisterCommandsByEntityType,
+    unregisterCommandsByEntityId,
+  ]);
+
+  // Utility functions
+  const openCommandPalette = () => setOpen(true);
+  const closeCommandPalette = () => setOpen(false);
+  const toggleCommandPalette = () => setOpen(!isOpen);
+
+  return {
+    // State
+    commands: allCommands,
+    isOpen,
+
+    // Register/unregister methods
+    registerCommand,
+    registerCommands,
+    unregisterCommand,
+    unregisterCommandsByEntityType,
+    unregisterCommandsByEntityId,
+
+    // Open/close controls
+    openCommandPalette,
+    closeCommandPalette,
+    toggleCommandPalette,
+    setOpen,
+  };
+};

package/src/stories/Notification.stories.tsx

@@ -44,6 +44,16 @@ const NotificationExample = () => {
         }
         label="Show Error"
       />
+      <Button
+        onClick={() =>
+          sendNotification({
+            title: "Info",
+            description: "Some information",
+            type: "info",
+          })
+        }
+        label="Show Info"
+      />
     </div>
   );
 };