@dust-tt/sparkle 0.2.587 → 0.2.589-rc-1

package/src/components/ToolCard.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+
+import { Avatar, Button, Card, Chip } from "@sparkle/components/";
+import { PlusIcon } from "@sparkle/icons/app/";
+import { cn } from "@sparkle/lib/utils";
+
+const FADE_TRANSITION_CLASSES =
+  "s-transition-opacity s-duration-300 s-ease-in-out";
+
+export interface ToolCardProps {
+  icon: React.ComponentType;
+  label: string;
+  description: string;
+  isSelected: boolean;
+  canAdd: boolean;
+  cantAddReason?: string;
+  onClick?: () => void;
+  className?: string;
+}
+
+export const ToolCard = React.forwardRef<HTMLDivElement, ToolCardProps>(
+  (
+    {
+      icon,
+      label,
+      description,
+      isSelected,
+      canAdd,
+      cantAddReason,
+      onClick,
+      className,
+    },
+    ref
+  ) => {
+    return (
+      <Card
+        ref={ref}
+        variant={isSelected ? "secondary" : "primary"}
+        onClick={canAdd && !isSelected ? onClick : undefined}
+        disabled={!canAdd || isSelected}
+        className={cn("s-h-24 s-p-3", className)}
+     >
+        <div className="s-flex s-w-full s-flex-col">
+          <div className="s-mb-2 s-flex s-items-start s-justify-between s-gap-2">
+            <div className="s-flex s-items-center s-gap-2">
+              <Avatar icon={icon} size="sm" />
+              <span className="s-text-sm s-font-medium">{label}</span>
+              {isSelected && (
+                <Chip
+                  size="xs"
+                  color="green"
+                  label="ADDED"
+                  className={cn(FADE_TRANSITION_CLASSES, "s-opacity-100")}
+                />
+              )}
+            </div>
+            {canAdd && !isSelected && (
+              <Button
+                size="xs"
+                variant="outline"
+                icon={PlusIcon}
+                label="Add"
+                className={cn(FADE_TRANSITION_CLASSES, "s-flex-shrink-0")}
+              />
+            )}
+            {!canAdd && cantAddReason && (
+              <div className="s-flex-shrink-0 s-text-xs s-italic s-text-muted-foreground dark:s-text-muted-foreground-night">
+                {cantAddReason}
+              </div>
+            )}
+          </div>
+          <div className="s-line-clamp-2 s-h-10 s-overflow-hidden s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night">
+            {description}
+          </div>
+        </div>
+      </Card>
+    );
+  }
+);
+ToolCard.displayName = "ToolCard";
+
+

package/src/components/index.ts

@@ -174,6 +174,7 @@ export { default as Spinner } from "./Spinner";
 export { FlexSplitButton, SplitButton } from "./SplitButton";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs";
 export { ReadOnlyTextArea, TextArea } from "./TextArea";
+export { ToolCard } from "./ToolCard";
 export {
   Tooltip,
   TooltipContent,

package/src/stories/Button.stories.tsx

@@ -59,6 +59,10 @@ const meta = {
       description: "Whether the button should display a counter",
       control: "boolean",
     },
+    briefPulse: {
+      description: "Whether the button should display a brief pulse",
+      control: "boolean",
+    },
     counterValue: {
       description: "Value to display in the counter (if isCounter is true)",
       control: "text",
@@ -88,6 +92,7 @@ export const ExampleButton: Story = {
     isLoading: false,
     isPulsing: false,
     isSelect: false,
+    briefPulse: false,
     disabled: false,
     isCounter: false,
     counterValue: "1",

package/src/stories/ContextItem.stories.tsx

@@ -77,6 +77,7 @@ export const ListItemExample = () => (
       <ContextItem
         title="Slack"
         visual={<ContextItem.Visual visual={SlackLogo} />}
+        hoverAction
         action={
           <div className="s-flex s-gap-1">
             <Button icon={TrashIcon} variant="warning" label="Remove" />

package/src/stories/ToolCard.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { ToolCard } from "@sparkle/components";
+import { BookOpenIcon, CommandLineIcon } from "@sparkle/icons/app";
+
+const meta: Meta<typeof ToolCard> = {
+  title: "Modules/ToolCard",
+  component: ToolCard,
+};
+
+export default meta;
+
+export const Examples = () => (
+  <div className="s-grid s-grid-cols-2 s-gap-3">
+    {/* Not added */}
+    <ToolCard
+      icon={BookOpenIcon}
+      label="Image Generation"
+      description="Agent can generate images (GPT Image 1)."
+      isSelected={false}
+      canAdd={true}
+      onClick={() => console.log("Add Image Generation")}
+    />
+
+    {/* Added */}
+    <ToolCard
+      icon={CommandLineIcon}
+      label="Reasoning"
+      description="Agent can decide to trigger a reasoning model for complex tasks."
+      isSelected={true}
+      canAdd={false}
+    />
+  </div>
+);
+
+