From 0da55b388ac2eb5295277b017705f086407aa445 Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Thu, 20 Mar 2025 18:00:09 +0100
Subject: [PATCH 1/2] [sparkle] - feature: update Chip component with link and
 button capabilities

 - Advanced the Chip component version to 0.2.444 to include new interactive features
 - Enhanced the Chip component to support both clickable and link behaviors
 - Adjusted the padding in size variants for improved visual consistency
 - Updated IconButton hover state to match the new outlined style variant
 - Aligned the Chip story to reflect the component's ability to handle onClick events

[sparkle] - refactor: streamline Chip props and types for better clarity

 - Divided the ChipProps into ChipBaseProps, ChipLinkProps, and ChipButtonProps for clearer type distinction
 - Extracted common prop types to simplify the Chip component's interface

[sparkle] - fix: IconButton outline variant hover text color

 - Changed the IconButton outline variant hover text color for better consistency with dark mode
---
 sparkle/package-lock.json             |   4 +-
 sparkle/package.json                  |   2 +-
 sparkle/src/components/Chip.tsx       | 123 +++++++++++++++++---------
 sparkle/src/components/IconButton.tsx |   2 +-
 sparkle/src/stories/Chip.stories.tsx  |   4 +-
 5 files changed, 85 insertions(+), 50 deletions(-)

diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
index c73a60968225..2addcf117daa 100644
--- a/sparkle/package-lock.json
+++ b/sparkle/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.443",
+  "version": "0.2.444",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dust-tt/sparkle",
-      "version": "0.2.443",
+      "version": "0.2.444",
       "license": "ISC",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
diff --git a/sparkle/package.json b/sparkle/package.json
index 1a5445c90538..8fae31549bb0 100644
--- a/sparkle/package.json
+++ b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.443",
+  "version": "0.2.444",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
diff --git a/sparkle/src/components/Chip.tsx b/sparkle/src/components/Chip.tsx
index 53d9a324cc49..c313bd9735a0 100644
--- a/sparkle/src/components/Chip.tsx
+++ b/sparkle/src/components/Chip.tsx
@@ -1,7 +1,12 @@
 import { cva } from "class-variance-authority";
 import React, { ComponentType, ReactNode } from "react";
 
-import { AnimatedText } from "@sparkle/components/";
+import {
+  AnimatedText,
+  IconButton,
+  LinkWrapper,
+  LinkWrapperProps,
+} from "@sparkle/components/";
 import { XMarkIcon } from "@sparkle/icons";
 import { cn } from "@sparkle/lib/utils";
 
@@ -25,20 +30,9 @@ export const CHIP_COLORS = [
 
 type ChipColorType = (typeof CHIP_COLORS)[number];
 
-type ChipProps = {
-  size?: ChipSizeType;
-  color?: ChipColorType;
-  label?: string;
-  children?: ReactNode;
-  className?: string;
-  isBusy?: boolean;
-  icon?: ComponentType;
-  onRemove?: () => void;
-};
-
 const sizeVariants: Record<ChipSizeType, string> = {
-  xs: "s-rounded-lg s-min-h-7 s-text-xs s-font-medium s-px-3 s-gap-2",
-  sm: "s-rounded-xl s-min-h-9 s-text-sm s-font-medium s-px-3 s-gap-2.5",
+  xs: "s-rounded-lg s-min-h-7 s-text-xs s-font-medium s-px-3 s-gap-1",
+  sm: "s-rounded-xl s-min-h-9 s-text-sm s-font-medium s-px-3 s-gap-1.5",
 };
 
 const backgroundVariants: Record<ChipColorType, string> = {
@@ -105,6 +99,28 @@ const chipVariants = cva("s-inline-flex s-box-border s-items-center", {
   },
 });
 
+type ChipBaseProps = {
+  size?: ChipSizeType;
+  color?: ChipColorType;
+  label?: string;
+  children?: ReactNode;
+  className?: string;
+  isBusy?: boolean;
+  icon?: ComponentType;
+  onRemove?: () => void;
+};
+
+type ChipLinkProps = ChipBaseProps &
+  Omit<LinkWrapperProps, "children"> & {
+    onClick?: never;
+  };
+
+type ChipButtonProps = ChipBaseProps & {
+  onClick?: () => void;
+} & Record<keyof Omit<LinkWrapperProps, "children">, never>;
+
+type ChipProps = ChipLinkProps | ChipButtonProps;
+
 const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
   (
     {
@@ -116,38 +132,57 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
       isBusy,
       icon,
       onRemove,
+      onClick,
+      href,
+      ...linkProps
     }: ChipProps,
     ref
-  ) => (
-    <div
-      className={cn(
-        chipVariants({ size, background: color, text: color }),
-        className,
-        onRemove && "s-cursor-pointer"
-      )}
-      aria-label={label}
-      ref={ref}
-      onClick={onRemove ? () => onRemove() : undefined}
-    >
-      {children}
-      {icon && <Icon visual={icon} size={size as IconProps["size"]} />}
-      {label && (
-        <span
-          className={cn(
-            "s-pointer s-grow s-truncate",
-            onRemove ? "s-cursor-pointer" : "s-cursor-default"
-          )}
-        >
-          {isBusy ? (
-            <AnimatedText variant={color}>{label}</AnimatedText>
-          ) : (
-            label
-          )}
-        </span>
-      )}
-      {onRemove && <Icon visual={XMarkIcon} size={size as IconProps["size"]} />}
-    </div>
-  )
+  ) => {
+    const chipContent = (
+      <div
+        className={cn(
+          chipVariants({ size, background: color, text: color }),
+          className,
+          onRemove && "s-cursor-pointer"
+        )}
+        aria-label={label}
+        ref={ref}
+        onClick={onClick ? () => onClick() : undefined}
+      >
+        {children}
+        {icon && <Icon visual={icon} size={size as IconProps["size"]} />}
+        {label && (
+          <span
+            className={cn(
+              "s-pointer s-grow s-truncate",
+              onClick ? "s-cursor-pointer" : "s-cursor-default"
+            )}
+          >
+            {isBusy ? (
+              <AnimatedText variant={color}>{label}</AnimatedText>
+            ) : (
+              label
+            )}
+          </span>
+        )}
+        {onRemove && (
+          <IconButton
+            variant="outline"
+            icon={XMarkIcon}
+            size={size}
+            onClick={onRemove ?? undefined}
+          />
+        )}
+      </div>
+    );
+    return href ? (
+      <LinkWrapper href={href} {...linkProps}>
+        {chipContent}
+      </LinkWrapper>
+    ) : (
+      chipContent
+    );
+  }
 );
 
 Chip.displayName = "Chip";
diff --git a/sparkle/src/components/IconButton.tsx b/sparkle/src/components/IconButton.tsx
index e1b72f84f0ba..0447b7802cf9 100644
--- a/sparkle/src/components/IconButton.tsx
+++ b/sparkle/src/components/IconButton.tsx
@@ -37,7 +37,7 @@ const styleVariants: Record<ButtonVariantType, string> = {
   ),
   outline: cn(
     "s-text-primary-700 dark:s-text-primary-700-night",
-    "hover:s-text-highlight-400 dark:hover:s-text-highlight-500-night",
+    "hover:s-text-primary-400 dark:hover:s-text-primary-400-night",
     "active:s-text-highlight-600 dark:active:s-text-highlight-600-night",
     "s-text-primary-500 dark:s-text-primary-500-night"
   ),
diff --git a/sparkle/src/stories/Chip.stories.tsx b/sparkle/src/stories/Chip.stories.tsx
index 26d7f6682e9a..1b7a0ae1a9b5 100644
--- a/sparkle/src/stories/Chip.stories.tsx
+++ b/sparkle/src/stories/Chip.stories.tsx
@@ -66,9 +66,9 @@ export const ThinkingChip = () => (
   <Chip
     size="sm"
     color="slate"
-    label="
-      Thinking, Searching"
+    label="Thinking, Searching"
     isBusy
+    onClick={() => console.log()}
   />
 );
 

From d91a49e5337f43c8ceecf742717128fe063713c8 Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Fri, 21 Mar 2025 08:47:55 +0100
Subject: [PATCH 2/2] [sparkle] - refactor: streamline ChipButtonProps typing
 in Chip component

- Replace the complex type Record with a simpler type definition and clear keyof Omit construction
---
 sparkle/src/components/Chip.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/sparkle/src/components/Chip.tsx b/sparkle/src/components/Chip.tsx
index c313bd9735a0..b484224ed611 100644
--- a/sparkle/src/components/Chip.tsx
+++ b/sparkle/src/components/Chip.tsx
@@ -110,15 +110,17 @@ type ChipBaseProps = {
   onRemove?: () => void;
 };
 
+type ChipButtonProps = ChipBaseProps & {
+  onClick?: () => void;
+} & {
+  [K in keyof Omit<LinkWrapperProps, "children">]?: never;
+};
+
 type ChipLinkProps = ChipBaseProps &
   Omit<LinkWrapperProps, "children"> & {
     onClick?: never;
   };
 
-type ChipButtonProps = ChipBaseProps & {
-  onClick?: () => void;
-} & Record<keyof Omit<LinkWrapperProps, "children">, never>;
-
 type ChipProps = ChipLinkProps | ChipButtonProps;
 
 const Chip = React.forwardRef<HTMLDivElement, ChipProps>(