From 4639b4454c369ce23fc1407cdf9f0d33bdbfb13a Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Fri, 13 Dec 2024 00:12:16 +0100
Subject: [PATCH 1/9] [sparkle/src/components] - refactor: update Citation
 component structure and remove CitationNew

 - Refactored Citation component to be more modular, introducing subcomponents for better readability and maintenance
 - Removed the now redundant CitationNew component and related stories in favor of the updated Citation structure
 - Streamlined and condensed citation components into a more cohesive and manageable set of subcomponents
 - Simplified the usage of Citation components in stories by using the new subcomponent architecture
 - Updated class names and ordering for better consistency and to follow naming conventions

[src/stories] - refactor: update stories to reflect changes in Citation components

 - Adapted Citation stories to utilize the new subcomponents introduced in the Citation refactor
 - Removed CitationNew stories as the component has been deprecated and merged with Citation

[src/components/Sheet.tsx] - fix: adjust shadow-tale-white order for sheet header style

 - Modified the ordering of class names to adhere to styling conventions and ensure visual consistency

[src/components] - cleanup: remove deprecated export of CitationNew component

 - Removed the export statement for the now-nonexistent CitationNew component after its deprecation and merge into Citation
---
 sparkle/src/components/Citation.tsx         | 376 ++++++++++++--------
 sparkle/src/components/CitationNew.tsx      | 242 -------------
 sparkle/src/components/Sheet.tsx            |   2 +-
 sparkle/src/components/index.ts             |   1 -
 sparkle/src/stories/Citation.stories.tsx    | 331 ++++++++---------
 sparkle/src/stories/CitationNew.stories.tsx | 161 ---------
 6 files changed, 360 insertions(+), 753 deletions(-)
 delete mode 100644 sparkle/src/components/CitationNew.tsx
 delete mode 100644 sparkle/src/stories/CitationNew.stories.tsx

diff --git a/sparkle/src/components/Citation.tsx b/sparkle/src/components/Citation.tsx
index 680fb12f5b38..18bbdfed6747 100644
--- a/sparkle/src/components/Citation.tsx
+++ b/sparkle/src/components/Citation.tsx
@@ -1,180 +1,242 @@
 import React, { ReactNode } from "react";
 
-import { Avatar } from "@sparkle/components/Avatar";
-import { CardButton } from "@sparkle/components/CardButton";
-import { Icon } from "@sparkle/components/Icon";
-import { IconButton } from "@sparkle/components/IconButton";
-import Spinner from "@sparkle/components/Spinner";
-import { Tooltip } from "@sparkle/components/Tooltip";
-import { XCircleIcon } from "@sparkle/icons";
-import { DocumentTextStrokeIcon, ImageStrokeIcon } from "@sparkle/icons/stroke";
-import { classNames } from "@sparkle/lib/utils";
 import {
-  ConfluenceLogo,
-  DriveLogo,
-  GithubLogo,
-  IntercomLogo,
-  MicrosoftLogo,
-  NotionLogo,
-  SlackLogo,
-  SnowflakeLogo,
-  ZendeskLogo,
-} from "@sparkle/logo/platforms";
-
-export type CitationType =
-  | "confluence"
-  | "document"
-  | "github"
-  | "google_drive"
-  | "image"
-  | "intercom"
-  | "microsoft"
-  | "zendesk"
-  | "notion"
-  | "slack"
-  | "snowflake";
-
-const typeIcons = {
-  confluence: ConfluenceLogo,
-  document: DocumentTextStrokeIcon,
-  github: GithubLogo,
-  google_drive: DriveLogo,
-  intercom: IntercomLogo,
-  microsoft: MicrosoftLogo,
-  zendesk: ZendeskLogo,
-  notion: NotionLogo,
-  slack: SlackLogo,
-  image: ImageStrokeIcon,
-  snowflake: SnowflakeLogo,
-};
+  Button,
+  CardButton,
+  CardButtonProps,
+  Spinner,
+  Tooltip,
+} from "@sparkle/components/";
+import { XMarkIcon } from "@sparkle/icons";
+import { cn } from "@sparkle/lib/utils";
 
-const typeSizing = {
-  fixed: { xs: "s-w-48", sm: "s-w-64" },
-  fluid: "s-w-full",
+type CitationProps = CardButtonProps & {
+  children: React.ReactNode;
+  isLoading?: boolean;
+  tooltip?: string;
 };
 
-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 Citation = React.forwardRef<HTMLDivElement, CitationProps>(
+  (
+    { children, variant = "primary", isLoading, className, tooltip, ...props },
+    ref
+  ) => {
+    const cardButton = (
+      <CardButton
+        ref={ref}
+        variant={variant}
+        size="md"
+        className={cn(
+          "s-relative s-flex s-aspect-[2/1] s-min-w-[140px] s-flex-none s-flex-col s-justify-end",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {isLoading && <CitationLoading />}
+      </CardButton>
+    );
 
-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={classNames(
-            "s-absolute s-left-0 s-top-0 s-brightness-90 s-filter s-transition s-duration-200 s-ease-out active:s-brightness-100 group-active:s-brightness-100",
-            href
-              ? "hover:s-brightness-110 group-hover:s-brightness-110 group-hover:s-filter"
-              : ""
-          )}
-          style={{
-            backgroundImage: `url(${imgSrc})`,
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-            height: "100%",
-            width: "100%",
-          }}
-        />
+    if (tooltip) {
+      return <Tooltip trigger={cardButton} label={tooltip} />;
+    }
+
+    return cardButton;
+  }
+);
+
+Citation.displayName = "Citation";
+
+const CitationIndex = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "s-z-10",
+        "s-flex s-h-4 s-w-4 s-items-center s-justify-center s-rounded-full s-bg-primary-600 s-text-xs s-font-medium s-text-primary-200",
+        className
       )}
-      <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>
-        )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+CitationIndex.displayName = "CitationIndex";
 
-        {!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="outline"
-              onClick={onClose}
-            />
-          </div>
-        )}
+const CitationGrid = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div ref={ref} className={cn("s-@container", className)} {...props}>
+      <div className="s-grid s-grid-cols-1 s-gap-2 @sm:s-grid-cols-2 @xl:s-grid-cols-3 @2xl:s-grid-cols-4 @3xl:s-grid-cols-5">
+        {children}
       </div>
+    </div>
+  );
+});
+CitationGrid.displayName = "CitationGrid";
+
+interface CitationCloseProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const CitationClose = React.forwardRef<HTMLButtonElement, CitationCloseProps>(
+  ({ className, onClick, ...props }, ref) => {
+    return (
+      <Button
+        ref={ref}
+        variant="ghost"
+        size="xs"
+        className={cn(
+          "s-z-10",
+          "s-absolute s-right-2 s-top-2 s-z-10",
+          className
+        )}
+        icon={XMarkIcon}
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick?.(e);
+        }}
+        {...props}
+      />
+    );
+  }
+);
+
+CitationClose.displayName = "CitationClose";
+
+interface CitationImageProps extends React.HTMLAttributes<HTMLDivElement> {
+  imgSrc: string;
+}
+
+const CitationImage = React.forwardRef<HTMLDivElement, CitationImageProps>(
+  ({ imgSrc, className, ...props }, ref) => {
+    return (
       <div
-        className={classNames(
-          "s-line-clamp-1 s-text-sm s-text-element-800",
-          size === "sm" ? "s-font-bold" : "s-font-semibold"
+        ref={ref}
+        className={cn(
+          "s-absolute s-inset-0",
+          "s-bg-cover s-bg-center",
+          className
         )}
+        style={{
+          backgroundImage: `url(${imgSrc})`,
+        }}
+        {...props}
       >
-        {title}
+        <div className="s-z-0 s-h-full s-w-full s-bg-primary-100/80 s-transition s-duration-200 group-hover:s-bg-primary-200/70 group-active:s-bg-primary-100/60" />
       </div>
+    );
+  }
+);
+
+CitationImage.displayName = "CitationImage";
 
-      {description && (
-        <div className="s-line-clamp-2 s-text-xs s-font-normal s-text-element-700">
-          {description}
-        </div>
+const CitationIcons = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "s-z-10",
+        "s-flex s-items-center s-gap-2 s-pb-1",
+        className
       )}
-    </>
+      {...props}
+    >
+      {children}
+    </div>
   );
+});
+CitationIcons.displayName = "CitationIcons";
+
+CitationImage.displayName = "CitationImage";
 
-  const props = href
-    ? { href, target: "_blank", rel: "noopener noreferrer" }
-    : {};
-
-  const cardButton = (
-    <CardButton
-      variant="secondary"
-      size="sm"
-      className={classNames(
-        "s-relative s-flex s-h-full 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" : ""
+const CitationLoading = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "s-absolute s-inset-0 s-z-20 s-flex s-h-full s-w-full s-items-center s-justify-center s-bg-primary-100/80",
+        className
       )}
       {...props}
     >
-      {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>
+      <Spinner variant="dark" size="md" />
+    </div>
   );
-  return href ? <Tooltip trigger={cardButton} label={title} /> : cardButton;
+});
+CitationLoading.displayName = "CitationLoading";
+
+interface CitationTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+const CitationTitle = React.forwardRef<HTMLDivElement, CitationTitleProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "s-z-10",
+          "s-line-clamp-1 s-overflow-hidden s-text-ellipsis",
+          "s-text-sm s-font-medium s-text-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+CitationTitle.displayName = "CitationTitle";
+
+interface CitationDescriptionProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
 }
+
+const CitationDescription = React.forwardRef<
+  HTMLDivElement,
+  CitationDescriptionProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "s-z-10",
+        "s-line-clamp-1 s-overflow-hidden s-text-ellipsis",
+        "s-text-xs s-font-normal s-text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+CitationDescription.displayName = "CitationDescription";
+
+export {
+  Citation,
+  CitationClose,
+  CitationDescription,
+  CitationGrid,
+  CitationIcons,
+  CitationImage,
+  CitationIndex,
+  CitationTitle,
+};
diff --git a/sparkle/src/components/CitationNew.tsx b/sparkle/src/components/CitationNew.tsx
deleted file mode 100644
index ba014a42b18f..000000000000
--- a/sparkle/src/components/CitationNew.tsx
+++ /dev/null
@@ -1,242 +0,0 @@
-import React, { ReactNode } from "react";
-
-import {
-  Button,
-  CardButton,
-  CardButtonProps,
-  Spinner,
-  Tooltip,
-} from "@sparkle/components/";
-import { XMarkIcon } from "@sparkle/icons";
-import { cn } from "@sparkle/lib/utils";
-
-type CitationNewProps = CardButtonProps & {
-  children: React.ReactNode;
-  isLoading?: boolean;
-  tooltip?: string;
-};
-
-const CitationNew = React.forwardRef<HTMLDivElement, CitationNewProps>(
-  (
-    { children, variant = "primary", isLoading, className, tooltip, ...props },
-    ref
-  ) => {
-    const cardButton = (
-      <CardButton
-        ref={ref}
-        variant={variant}
-        size="md"
-        className={cn(
-          "s-relative s-flex s-aspect-[2/1] s-min-w-[140px] s-flex-none s-flex-col s-justify-end",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {isLoading && <CitationNewLoading />}
-      </CardButton>
-    );
-
-    if (tooltip) {
-      return <Tooltip trigger={cardButton} label={tooltip} />;
-    }
-
-    return cardButton;
-  }
-);
-
-CitationNew.displayName = "CitationNew";
-
-const CitationNewIndex = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ children, className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "s-z-10",
-        "s-flex s-h-4 s-w-4 s-items-center s-justify-center s-rounded-full s-bg-primary-600 s-text-xs s-font-medium s-text-primary-200",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-CitationNewIndex.displayName = "CitationNewIndex";
-
-const CitationNewGrid = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ children, className, ...props }, ref) => {
-  return (
-    <div ref={ref} className={cn("s-@container", className)} {...props}>
-      <div className="s-grid s-grid-cols-1 s-gap-2 @sm:s-grid-cols-2 @xl:s-grid-cols-3 @2xl:s-grid-cols-4 @3xl:s-grid-cols-5">
-        {children}
-      </div>
-    </div>
-  );
-});
-CitationNewGrid.displayName = "CitationNewGrid";
-
-interface CitationNewCloseProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  className?: string;
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-}
-
-const CitationNewClose = React.forwardRef<
-  HTMLButtonElement,
-  CitationNewCloseProps
->(({ className, onClick, ...props }, ref) => {
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="xs"
-      className={cn("s-z-10", "s-absolute s-right-2 s-top-2 s-z-10", className)}
-      icon={XMarkIcon}
-      onClick={(e) => {
-        e.stopPropagation();
-        onClick?.(e);
-      }}
-      {...props}
-    />
-  );
-});
-
-CitationNewClose.displayName = "CitationNewClose";
-
-interface CitationNewImageProps extends React.HTMLAttributes<HTMLDivElement> {
-  imgSrc: string;
-}
-
-const CitationNewImage = React.forwardRef<
-  HTMLDivElement,
-  CitationNewImageProps
->(({ imgSrc, className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "s-absolute s-inset-0",
-        "s-bg-cover s-bg-center",
-        className
-      )}
-      style={{
-        backgroundImage: `url(${imgSrc})`,
-      }}
-      {...props}
-    >
-      <div className="s-z-0 s-h-full s-w-full s-bg-primary-100/80 s-transition s-duration-200 group-hover:s-bg-primary-200/70 group-active:s-bg-primary-100/60" />
-    </div>
-  );
-});
-
-CitationNewImage.displayName = "CitationNewImage";
-
-const CitationNewIcons = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ children, className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "s-z-10",
-        "s-flex s-items-center s-gap-2 s-pb-1",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-CitationNewIcons.displayName = "CitationNewIcons";
-
-CitationNewImage.displayName = "CitationNewImage";
-
-const CitationNewLoading = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "s-absolute s-inset-0 s-z-20 s-flex s-h-full s-w-full s-items-center s-justify-center s-bg-primary-100/80",
-        className
-      )}
-      {...props}
-    >
-      <Spinner variant="dark" size="md" />
-    </div>
-  );
-});
-CitationNewLoading.displayName = "CitationNewLoading";
-
-interface CitationNewTitleProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: ReactNode;
-}
-
-const CitationNewTitle = React.forwardRef<
-  HTMLDivElement,
-  CitationNewTitleProps
->(({ children, className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "s-z-10",
-        "s-line-clamp-1 s-overflow-hidden s-text-ellipsis",
-        "s-text-sm s-font-medium s-text-foreground",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-CitationNewTitle.displayName = "CitationNewTitle";
-
-// Description component
-interface CitationNewDescriptionProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  children: ReactNode;
-}
-
-const CitationNewDescription = React.forwardRef<
-  HTMLDivElement,
-  CitationNewDescriptionProps
->(({ children, className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "s-z-10",
-        "s-line-clamp-1 s-overflow-hidden s-text-ellipsis",
-        "s-text-xs s-font-normal s-text-muted-foreground",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-CitationNewDescription.displayName = "CitationNewDescription";
-
-export {
-  CitationNew,
-  CitationNewClose,
-  CitationNewDescription,
-  CitationNewGrid,
-  CitationNewIcons,
-  CitationNewImage,
-  CitationNewIndex,
-  CitationNewTitle,
-};
diff --git a/sparkle/src/components/Sheet.tsx b/sparkle/src/components/Sheet.tsx
index bfdbbeab7633..9f982a0354c3 100644
--- a/sparkle/src/components/Sheet.tsx
+++ b/sparkle/src/components/Sheet.tsx
@@ -85,7 +85,7 @@ const SheetHeader = ({
 }: SheetHeaderProps) => (
   <div
     className={cn(
-      "s-shadow-tale-white s-z-50 s-flex s-flex-none s-flex-col s-gap-2 s-bg-background s-p-5 s-text-left",
+      "s-z-50 s-flex s-flex-none s-flex-col s-gap-2 s-bg-background s-p-5 s-text-left s-shadow-tale-white",
       className
     )}
     {...props}
diff --git a/sparkle/src/components/index.ts b/sparkle/src/components/index.ts
index 125feba5dd83..80cb0d02f41d 100644
--- a/sparkle/src/components/index.ts
+++ b/sparkle/src/components/index.ts
@@ -17,7 +17,6 @@ export {
 } from "./Checkbox";
 export { Chip } from "./Chip";
 export * from "./Citation";
-export * from "./CitationNew";
 export { default as CollapseButton } from "./CollapseButton";
 export { Collapsible } from "./Collapsible";
 export { ColorPicker } from "./ColorPicker";
diff --git a/sparkle/src/stories/Citation.stories.tsx b/sparkle/src/stories/Citation.stories.tsx
index 124a503f1bec..ded9d1a593c2 100644
--- a/sparkle/src/stories/Citation.stories.tsx
+++ b/sparkle/src/stories/Citation.stories.tsx
@@ -1,9 +1,26 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
 
-import { ZoomableImageCitationWrapper } from "@sparkle/components/ZoomableImageCitationWrapper";
-
-import { Citation } from "../index_with_tw_base";
+import {
+  Button,
+  Citation,
+  CitationClose,
+  CitationDescription,
+  CitationGrid,
+  CitationIcons,
+  CitationImage,
+  CitationIndex,
+  CitationTitle,
+  DocumentIcon,
+  ExternalLinkIcon,
+  GlobeAltIcon,
+  Icon,
+  ImageIcon,
+  NotionLogo,
+  Popover,
+  SlackLogo,
+  TableIcon,
+} from "../index_with_tw_base";
 
 const meta = {
   title: "Components/Citation",
@@ -14,199 +31,131 @@ export default meta;
 
 export const CitationsExample = () => (
   <div className="s-flex s-flex-col s-gap-8">
-    <h2>Size XS</h2>
-    <h3>In Flex</h3>
-    <div className="s-flex s-gap-2">
-      <Citation
-        title="With close action"
-        size="xs"
-        type="document"
-        index="3"
-        onClose={() => alert("Close action clicked")}
-        isBlinking={true}
-      />
-      <Citation
-        title="With imgSrc"
-        size="xs"
-        type="document"
-        onClose={() => alert("Close action clicked")}
-        isBlinking={true}
-        avatarSrc="https://dust.tt/static/droidavatar/Droid_Black_4.jpg"
-      />
-      <Citation
-        title="With imgSrc"
-        size="xs"
-        type="image"
-        onClose={() => alert("Close action clicked")}
-        isBlinking={true}
-        imgSrc="https://dust.tt/static/droidavatar/Droid_Black_4.jpg"
-      />
-      <Citation
-        title="Loading state"
-        size="xs"
-        type="image"
-        onClose={() => alert("Close action clicked")}
-        isLoading={true}
-      />
-      <div>
-        <Citation
-          title=""
-          size="xs"
-          type="image"
-          imgSrc="https://dust.tt/static/droidavatar/Droid_Black_4.jpg"
-        />
-      </div>
-    </div>
-    <h3>In Grid</h3>
-    <div className="s-w-full">
-      <div className="s-grid s-grid-cols-2 s-items-stretch s-gap-2 md:s-grid-cols-3 lg:s-grid-cols-4">
-        <Citation
-          title="Source: Thread on #general message from @ed"
-          size="xs"
-          sizing="fluid"
-          type="slack"
-          index="1"
-          href="https://www.google.com"
-        />
-        <Citation
-          title="Title"
-          type="github"
-          size="xs"
-          sizing="fluid"
-          index="2"
-          href="https://www.google.com"
-        />
-        <Citation
-          title="Source: Thread on #general message from @ed"
-          size="xs"
-          sizing="fluid"
-          type="slack"
-          index="1"
-          href="https://www.google.com"
-        />
-        <Citation
-          title="Title"
-          type="github"
-          size="xs"
-          sizing="fluid"
-          index="2"
-          href="https://www.google.com"
-        />
-        <Citation
-          title="Source: Thread on #general message from @ed"
-          size="xs"
-          sizing="fluid"
-          type="slack"
-          index="1"
-          href="https://www.google.com"
-        />
-        <Citation
-          title="Title"
-          type="github"
-          sizing="fluid"
-          size="xs"
-          index="2"
-          href="https://www.google.com"
-        />
-      </div>
-    </div>
-    <div className="s-flex s-gap-2">
-      <Citation
-        title="Source: Thread on #general message from @ed"
-        size="xs"
-        type="slack"
-        index="1"
-        href="https://www.google.com"
-      />
-      <Citation
-        title="Title"
-        type="github"
-        size="xs"
-        index="2"
-        href="https://www.google.com"
-      />
-    </div>
-    <h2>Size SM</h2>
-    <div className="s-flex s-gap-2">
-      <Citation
-        title="Title"
-        type="google_drive"
-        index="3"
-        href="https://www.google.com"
-        description="Write a 120 character description of the citation here to be displayed in the citation list. Write a 120 character description of the citation here to be displayed in the citation list. Write a 120 character description of the citation here to be displayed in the citation list."
-        isBlinking={true}
-      />
-      <Citation
-        title="Awesome article"
-        type="intercom"
-        index="3"
-        href="https://www.google.com"
-        description="Write a 120 character description of the citation here to be displayed in the citation list."
-        isBlinking={false}
-      />
-    </div>
+    Example of attachement
     <div className="s-flex s-gap-2">
-      <Citation
-        title="With close action"
-        type="document"
-        index="3"
-        onClose={() => alert("Close action clicked")}
-        description="Write a 120 character description of the citation here to be displayed in the citation list."
-        isBlinking={true}
-      />
+      <Citation onClick={() => alert("Card clicked")} className="s-w-48">
+        <CitationIcons>
+          <Icon visual={SlackLogo} size="sm" />
+        </CitationIcons>
+        <CitationTitle>Slack thread</CitationTitle>
+        <CitationDescription>
+          @ed at 16:32 This is the latest ve
+        </CitationDescription>
+      </Citation>
+      <Citation onClick={() => alert("Card clicked")} className="s-w-48">
+        <CitationIcons>
+          <Icon visual={TableIcon} size="sm" />
+        </CitationIcons>
+        <CitationTitle>extract_financa.csv</CitationTitle>
+      </Citation>
+      <Citation onClick={() => alert("Card clicked")} className="s-w-48">
+        <CitationIcons>
+          <Icon visual={GlobeAltIcon} size="sm" />
+        </CitationIcons>
+        <CitationTitle>Linkedin, Edouard Wautier</CitationTitle>
+      </Citation>
 
-      <Citation
-        title="With imgSrc"
-        type="document"
-        onClose={() => alert("Close action clicked")}
-        description="Write a 120 character description of the citation here to be displayed in the citation list."
-        isBlinking={true}
-        imgSrc="https://cdn.discordapp.com/attachments/995248824375316560/1143857310142316685/duncid_friendly_Scandinavian_droid_designed_by_Wes_Anderson_and_29eec588-b898-4e4a-9776-10c27790cbf9.png"
-      />
-    </div>
-    <div className="s-flex s-gap-2">
-      <Citation
-        title="Source: Thread on #general message from @ed"
-        type="slack"
-        index="1"
-        href="https://www.google.com"
-        description="Write a 120 character description of the citation here to be displayed in the citation list."
-      />
-      <Citation
-        title="Title"
-        type="github"
-        index="2"
-        href="https://www.google.com"
-        description="Write a 120 character description of the citation here to be displayed in the citation list."
-      />
+      <Citation onClick={() => alert("Card clicked")} className="s-w-48">
+        <CitationImage imgSrc="https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" />
+        <CitationIcons>
+          <Icon visual={ImageIcon} size="sm" />
+        </CitationIcons>
+        <CitationTitle>screenshot.png</CitationTitle>
+      </Citation>
+
+      <Citation className="s-w-48" isLoading={true}>
+        <CitationIcons>
+          <Icon visual={ImageIcon} size="sm" />
+        </CitationIcons>
+        <CitationTitle>screenshot.png</CitationTitle>
+      </Citation>
     </div>
-    <div className="s-flex s-gap-2">
-      <Citation
-        title="Title"
-        type="google_drive"
-        index="3"
-        href="https://www.google.com"
-        description="Write a 120 character description of the citation here to be displayed in the citation list."
-        isBlinking={true}
-      />
-      <Citation
-        title="Awesome article"
-        type="snowflake"
-        index="3"
-        href="https://www.google.com"
-        description="Write a 120 character description of the citation here to be displayed in the citation list."
-        isBlinking={false}
-      />
+    Example of dissmissable attachements
+    <div className="s-flex s-gap-8">
+      <Citation onClick={() => alert("Card clicked")} className="s-w-48">
+        <CitationIcons>
+          <Icon visual={SlackLogo} size="sm" />
+        </CitationIcons>
+        <CitationTitle>Slack thread</CitationTitle>
+        <CitationClose onClick={() => alert("Close clicked")} />
+        <CitationDescription>
+          @ed at 16:32 This is the latest ve
+        </CitationDescription>
+      </Citation>
+      <Citation onClick={() => alert("Card clicked")} className="s-w-48">
+        <CitationIcons>
+          <Icon visual={TableIcon} size="sm" />
+        </CitationIcons>
+        <CitationClose onClick={() => alert("Close clicked")} />
+        <CitationTitle>extract_financa.csv</CitationTitle>
+      </Citation>
+      <Citation onClick={() => alert("Card clicked")} className="s-w-48">
+        <CitationIcons>
+          <Icon visual={GlobeAltIcon} size="sm" />
+        </CitationIcons>
+        <CitationClose onClick={() => alert("Close clicked")} />
+        <CitationTitle>Linkedin, Edouard Wautier</CitationTitle>
+      </Citation>
+
+      <Citation onClick={() => alert("Card clicked")} className="s-w-48">
+        <CitationImage imgSrc="https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" />
+        <CitationIcons>
+          <Icon visual={ImageIcon} size="sm" />
+        </CitationIcons>
+        <CitationClose onClick={() => alert("Close clicked")} />
+        <CitationTitle>screenshot.png</CitationTitle>
+      </Citation>
     </div>
-    <h2>With zoom effect</h2>
-    <div className="s-flex s-gap-2">
-      <ZoomableImageCitationWrapper
-        size="sm"
-        title="With imgSrc"
-        // size="xs"
-        imgSrc="https://dust.tt/static/droidavatar/Droid_Black_4.jpg"
-        alt="A nice image."
+    Example of citations in markdown
+    <div>
+      <Popover
+        trigger={<CitationIndex>1</CitationIndex>}
+        content={
+          <>
+            <CitationIcons>
+              <CitationIndex>1</CitationIndex>
+              <Icon visual={SlackLogo} size="sm" />
+            </CitationIcons>
+            <CitationTitle>Hello</CitationTitle>
+            <Button
+              variant={"ghost"}
+              icon={ExternalLinkIcon}
+              className="s-absolute s-right-2 s-top-2"
+            />
+          </>
+        }
       />
     </div>
+    Example of dynamic grid
+    <CitationGrid>
+      <Citation onClick={() => alert("Card clicked")}>
+        <CitationIcons>
+          <CitationIndex>1</CitationIndex>
+          <Icon visual={SlackLogo} size="sm" />
+        </CitationIcons>
+        <CitationTitle>Hello</CitationTitle>
+      </Citation>
+      <Citation onClick={() => alert("Close action clicked")}>
+        <CitationIcons>
+          <CitationIndex>2</CitationIndex>
+          <Icon visual={NotionLogo} size="sm" />
+        </CitationIcons>
+        <CitationTitle>Hello</CitationTitle>
+      </Citation>
+      <Citation onClick={() => alert("Close action clicked")}>
+        <CitationIcons>
+          <CitationIndex>3</CitationIndex>
+          <Icon visual={DocumentIcon} size="sm" />
+        </CitationIcons>
+        <CitationTitle>Hello</CitationTitle>
+      </Citation>
+      <Citation onClick={() => alert("Close action clicked")}>
+        <CitationIcons>
+          <CitationIndex>4</CitationIndex>
+          <Icon visual={GlobeAltIcon} size="sm" />
+        </CitationIcons>
+        <CitationTitle>Hello</CitationTitle>
+      </Citation>
+    </CitationGrid>
   </div>
 );
diff --git a/sparkle/src/stories/CitationNew.stories.tsx b/sparkle/src/stories/CitationNew.stories.tsx
deleted file mode 100644
index 7918ba627b62..000000000000
--- a/sparkle/src/stories/CitationNew.stories.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import type { Meta } from "@storybook/react";
-import React from "react";
-
-import {
-  Button,
-  CitationNew,
-  CitationNewClose,
-  CitationNewDescription,
-  CitationNewGrid,
-  CitationNewIcons,
-  CitationNewImage,
-  CitationNewIndex,
-  CitationNewTitle,
-  DocumentIcon,
-  ExternalLinkIcon,
-  GlobeAltIcon,
-  Icon,
-  ImageIcon,
-  NotionLogo,
-  Popover,
-  SlackLogo,
-  TableIcon,
-} from "../index_with_tw_base";
-
-const meta = {
-  title: "Components/CitationNew",
-  component: CitationNew,
-} satisfies Meta<typeof CitationNew>;
-
-export default meta;
-
-export const CitationsExample = () => (
-  <div className="s-flex s-flex-col s-gap-8">
-    Example of attachement
-    <div className="s-flex s-gap-2">
-      <CitationNew onClick={() => alert("Card clicked")} className="s-w-48">
-        <CitationNewIcons>
-          <Icon visual={SlackLogo} size="sm" />
-        </CitationNewIcons>
-        <CitationNewTitle>Slack thread</CitationNewTitle>
-        <CitationNewDescription>
-          @ed at 16:32 This is the latest ve
-        </CitationNewDescription>
-      </CitationNew>
-      <CitationNew onClick={() => alert("Card clicked")} className="s-w-48">
-        <CitationNewIcons>
-          <Icon visual={TableIcon} size="sm" />
-        </CitationNewIcons>
-        <CitationNewTitle>extract_financa.csv</CitationNewTitle>
-      </CitationNew>
-      <CitationNew onClick={() => alert("Card clicked")} className="s-w-48">
-        <CitationNewIcons>
-          <Icon visual={GlobeAltIcon} size="sm" />
-        </CitationNewIcons>
-        <CitationNewTitle>Linkedin, Edouard Wautier</CitationNewTitle>
-      </CitationNew>
-
-      <CitationNew onClick={() => alert("Card clicked")} className="s-w-48">
-        <CitationNewImage imgSrc="https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" />
-        <CitationNewIcons>
-          <Icon visual={ImageIcon} size="sm" />
-        </CitationNewIcons>
-        <CitationNewTitle>screenshot.png</CitationNewTitle>
-      </CitationNew>
-
-      <CitationNew className="s-w-48" isLoading={true}>
-        <CitationNewIcons>
-          <Icon visual={ImageIcon} size="sm" />
-        </CitationNewIcons>
-        <CitationNewTitle>screenshot.png</CitationNewTitle>
-      </CitationNew>
-    </div>
-    Example of dissmissable attachements
-    <div className="s-flex s-gap-8">
-      <CitationNew onClick={() => alert("Card clicked")} className="s-w-48">
-        <CitationNewIcons>
-          <Icon visual={SlackLogo} size="sm" />
-        </CitationNewIcons>
-        <CitationNewTitle>Slack thread</CitationNewTitle>
-        <CitationNewClose onClick={() => alert("Close clicked")} />
-        <CitationNewDescription>
-          @ed at 16:32 This is the latest ve
-        </CitationNewDescription>
-      </CitationNew>
-      <CitationNew onClick={() => alert("Card clicked")} className="s-w-48">
-        <CitationNewIcons>
-          <Icon visual={TableIcon} size="sm" />
-        </CitationNewIcons>
-        <CitationNewClose onClick={() => alert("Close clicked")} />
-        <CitationNewTitle>extract_financa.csv</CitationNewTitle>
-      </CitationNew>
-      <CitationNew onClick={() => alert("Card clicked")} className="s-w-48">
-        <CitationNewIcons>
-          <Icon visual={GlobeAltIcon} size="sm" />
-        </CitationNewIcons>
-        <CitationNewClose onClick={() => alert("Close clicked")} />
-        <CitationNewTitle>Linkedin, Edouard Wautier</CitationNewTitle>
-      </CitationNew>
-
-      <CitationNew onClick={() => alert("Card clicked")} className="s-w-48">
-        <CitationNewImage imgSrc="https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" />
-        <CitationNewIcons>
-          <Icon visual={ImageIcon} size="sm" />
-        </CitationNewIcons>
-        <CitationNewClose onClick={() => alert("Close clicked")} />
-        <CitationNewTitle>screenshot.png</CitationNewTitle>
-      </CitationNew>
-    </div>
-    Example of citations in markdown
-    <div>
-      <Popover
-        trigger={<CitationNewIndex>1</CitationNewIndex>}
-        content={
-          <>
-            <CitationNewIcons>
-              <CitationNewIndex>1</CitationNewIndex>
-              <Icon visual={SlackLogo} size="sm" />
-            </CitationNewIcons>
-            <CitationNewTitle>Hello</CitationNewTitle>
-            <Button
-              variant={"ghost"}
-              icon={ExternalLinkIcon}
-              className="s-absolute s-right-2 s-top-2"
-            />
-          </>
-        }
-      />
-    </div>
-    Example of dynamic grid
-    <CitationNewGrid>
-      <CitationNew onClick={() => alert("Card clicked")}>
-        <CitationNewIcons>
-          <CitationNewIndex>1</CitationNewIndex>
-          <Icon visual={SlackLogo} size="sm" />
-        </CitationNewIcons>
-        <CitationNewTitle>Hello</CitationNewTitle>
-      </CitationNew>
-      <CitationNew onClick={() => alert("Close action clicked")}>
-        <CitationNewIcons>
-          <CitationNewIndex>2</CitationNewIndex>
-          <Icon visual={NotionLogo} size="sm" />
-        </CitationNewIcons>
-        <CitationNewTitle>Hello</CitationNewTitle>
-      </CitationNew>
-      <CitationNew onClick={() => alert("Close action clicked")}>
-        <CitationNewIcons>
-          <CitationNewIndex>3</CitationNewIndex>
-          <Icon visual={DocumentIcon} size="sm" />
-        </CitationNewIcons>
-        <CitationNewTitle>Hello</CitationNewTitle>
-      </CitationNew>
-      <CitationNew onClick={() => alert("Close action clicked")}>
-        <CitationNewIcons>
-          <CitationNewIndex>4</CitationNewIndex>
-          <Icon visual={GlobeAltIcon} size="sm" />
-        </CitationNewIcons>
-        <CitationNewTitle>Hello</CitationNewTitle>
-      </CitationNew>
-    </CitationNewGrid>
-  </div>
-);

From 64e8e850bb22c0e91d3682179675eb0045e76455 Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Fri, 13 Dec 2024 00:19:35 +0100
Subject: [PATCH 2/9] [sparkle] - refactor: remove ZoomableImageCitationWrapper
 component

 - Deleted the ZoomableImageCitationWrapper to simplify the image citation features
 - Removed the component export from the main index to clean up unused code references
---
 .../ZoomableImageCitationWrapper.tsx          | 61 -------------------
 sparkle/src/components/index.ts               |  1 -
 2 files changed, 62 deletions(-)
 delete mode 100644 sparkle/src/components/ZoomableImageCitationWrapper.tsx

diff --git a/sparkle/src/components/ZoomableImageCitationWrapper.tsx b/sparkle/src/components/ZoomableImageCitationWrapper.tsx
deleted file mode 100644
index 96d9d8a0ca61..000000000000
--- a/sparkle/src/components/ZoomableImageCitationWrapper.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Dialog } from "@headlessui/react";
-import React, { useState } from "react";
-
-import { Citation } from "@sparkle/components/Citation";
-import { IconButton } from "@sparkle/components/IconButton";
-import { XCircleIcon } from "@sparkle/icons/solid";
-
-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-flex">
-        <Citation
-          title={title}
-          size={size}
-          type="image"
-          imgSrc={imgSrc}
-          sizing="fluid"
-        />
-      </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="ghost"
-                />
-              </div>
-            </Dialog.Title>
-            <img src={imgSrc} alt={alt} />
-          </Dialog.Panel>
-        </div>
-      </Dialog>
-    </>
-  );
-}
diff --git a/sparkle/src/components/index.ts b/sparkle/src/components/index.ts
index 80cb0d02f41d..17bacc9827a1 100644
--- a/sparkle/src/components/index.ts
+++ b/sparkle/src/components/index.ts
@@ -114,4 +114,3 @@ export {
 } from "./Tooltip";
 export { Tree } from "./Tree";
 export { TypingAnimation } from "./TypingAnimation";
-export { ZoomableImageCitationWrapper } from "./ZoomableImageCitationWrapper";

From c0ca5afb260deee43919a988c37535e6adf00e96 Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Fri, 13 Dec 2024 00:23:14 +0100
Subject: [PATCH 3/9] [sparkle] - refactor: streamline ConversationMessage
 citations

 - Replace individual Citation components with a more flexible structure including CitationIcons and CitationTitle
 - Remove usage of ZoomableImageCitationWrapper in favor of a unified Citation component structure
---
 .../stories/ConversationMessage.stories.tsx   | 98 +++++++------------
 1 file changed, 33 insertions(+), 65 deletions(-)

diff --git a/sparkle/src/stories/ConversationMessage.stories.tsx b/sparkle/src/stories/ConversationMessage.stories.tsx
index 90daa93c7560..5c63deda5312 100644
--- a/sparkle/src/stories/ConversationMessage.stories.tsx
+++ b/sparkle/src/stories/ConversationMessage.stories.tsx
@@ -4,9 +4,13 @@ import React from "react";
 import {
   Button,
   Citation,
+  CitationIcons,
+  CitationTitle,
   ConversationMessage,
+  GithubIcon,
+  Icon,
   MagnifyingGlassIcon,
-  ZoomableImageCitationWrapper,
+  SlackLogo,
 } from "../index_with_tw_base";
 
 const meta = {
@@ -43,47 +47,20 @@ export const ConversationExample = () => {
               />,
             ]}
             citations={[
-              <Citation
-                title="Source: Thread on #general message from @ed"
-                size="xs"
-                sizing="fluid"
-                type="slack"
-                index="1"
-                href="https://www.google.com"
-              />,
-              <Citation
-                title="Title"
-                type="github"
-                size="xs"
-                sizing="fluid"
-                index="2"
-                href="https://www.google.com"
-              />,
-
-              <ZoomableImageCitationWrapper
-                size="xs"
-                title="Title"
-                imgSrc="https://dust.tt/static/droidavatar/Droid_Lime_1.jpg"
-                alt={"Image"}
-              />,
-              <ZoomableImageCitationWrapper
-                size="xs"
-                title="Title"
-                imgSrc="https://placecats.com/poppy/600/600" // Service that generates random cat images of a given size
-                alt={"Image"}
-              />,
-              <ZoomableImageCitationWrapper
-                size="xs"
-                title="Title"
-                imgSrc="https://placecats.com/neo/1200/700"
-                alt={"Image"}
-              />,
-              <ZoomableImageCitationWrapper
-                size="xs"
-                title="Title"
-                imgSrc="https://placecats.com/800/400"
-                alt={"Image"}
-              />,
+              <Citation href="https://www.google.com">
+                <CitationIcons>
+                  <Icon visual={SlackLogo} size="sm" />
+                </CitationIcons>
+                <CitationTitle>
+                  Source: Thread on #general message from @ed
+                </CitationTitle>
+              </Citation>,
+              <Citation href="https://www.google.com">
+                <CitationIcons>
+                  <Icon visual={GithubIcon} size="sm" />
+                </CitationIcons>
+                <CitationTitle>Title</CitationTitle>
+              </Citation>,
             ]}
           >
             To conditionally render the citations only if a citations React node
@@ -129,29 +106,20 @@ export const ConversationExample = () => {
               />,
             ]}
             citations={[
-              <Citation
-                title="Source: Thread on #general message from @ed"
-                size="xs"
-                sizing="fluid"
-                type="slack"
-                index="1"
-                href="https://www.google.com"
-              />,
-              <Citation
-                title="Title"
-                type="github"
-                size="xs"
-                sizing="fluid"
-                index="2"
-                href="https://www.google.com"
-              />,
-
-              <ZoomableImageCitationWrapper
-                size="xs"
-                title="Title"
-                imgSrc="https://dust.tt/static/droidavatar/Droid_Lime_1.jpg"
-                alt={"Image"}
-              />,
+              <Citation href="https://www.google.com">
+                <CitationIcons>
+                  <Icon visual={SlackLogo} size="sm" />
+                </CitationIcons>
+                <CitationTitle>
+                  Source: Thread on #general message from @ed
+                </CitationTitle>
+              </Citation>,
+              <Citation href="https://www.google.com">
+                <CitationIcons>
+                  <Icon visual={GithubIcon} size="sm" />
+                </CitationIcons>
+                <CitationTitle>Title</CitationTitle>
+              </Citation>,
             ]}
           >
             To conditionally render the citations only if a citations React node

From f6a8afe3985db9a2a2e7837d5fa2a85418b08dd1 Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Fri, 13 Dec 2024 00:33:40 +0100
Subject: [PATCH 4/9] [sparkle] - refactor: update citation components
 structure in PaginatedCitationsGrid

 - Remove the display name assignment for CitationImage component
 - Restructure Citation items to use composition rather than props in PaginatedCitationsGrid
 - Replace CitationType with icon JSX element for flexibility in citation rendering
 - Update storybook for PaginatedCitationsGrid with the new component design and DocumentIcon usage
---
 sparkle/src/components/Citation.tsx           |  2 --
 .../src/components/PaginatedCitationsGrid.tsx | 27 +++++++++++--------
 .../PaginatedCitationsGrid.stories.tsx        |  6 ++---
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/sparkle/src/components/Citation.tsx b/sparkle/src/components/Citation.tsx
index 18bbdfed6747..fdc4e36bfc8c 100644
--- a/sparkle/src/components/Citation.tsx
+++ b/sparkle/src/components/Citation.tsx
@@ -159,8 +159,6 @@ const CitationIcons = React.forwardRef<
 });
 CitationIcons.displayName = "CitationIcons";
 
-CitationImage.displayName = "CitationImage";
-
 const CitationLoading = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
diff --git a/sparkle/src/components/PaginatedCitationsGrid.tsx b/sparkle/src/components/PaginatedCitationsGrid.tsx
index 4c842305be56..ea0ebb67aff3 100644
--- a/sparkle/src/components/PaginatedCitationsGrid.tsx
+++ b/sparkle/src/components/PaginatedCitationsGrid.tsx
@@ -2,14 +2,20 @@ import { PaginationState } from "@tanstack/react-table";
 import { useState } from "react";
 import React from "react";
 
-import { Citation, CitationType } from "@sparkle/components/Citation";
+import {
+  Citation,
+  CitationDescription,
+  CitationIcons,
+  CitationIndex,
+  CitationTitle,
+} from "@sparkle/components/Citation";
 import { Pagination } from "@sparkle/components/Pagination";
 import { classNames } from "@sparkle/lib/utils";
 
 interface CitationItem {
   description?: string;
   title: string;
-  type: CitationType;
+  icon: React.JSX.Element;
   href?: string;
 }
 
@@ -50,15 +56,14 @@ export function PaginatedCitationsGrid({
       >
         {paginatedItems.map((d, idx) => {
           return (
-            <Citation
-              size="xs"
-              sizing="fluid"
-              key={idx}
-              description={d.description}
-              href={d.href}
-              title={d.title}
-              type={d.type}
-            />
+            <Citation href={d.href}>
+              <CitationIcons>
+                <CitationIndex>{idx}</CitationIndex>
+                {d.icon}
+              </CitationIcons>
+              <CitationTitle>{d.title}</CitationTitle>
+              <CitationDescription>{d.description}</CitationDescription>
+            </Citation>
           );
         })}
       </div>
diff --git a/sparkle/src/stories/PaginatedCitationsGrid.stories.tsx b/sparkle/src/stories/PaginatedCitationsGrid.stories.tsx
index 66e05f912daa..f06bd0e4c8c2 100644
--- a/sparkle/src/stories/PaginatedCitationsGrid.stories.tsx
+++ b/sparkle/src/stories/PaginatedCitationsGrid.stories.tsx
@@ -1,9 +1,7 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
 
-import { CitationType } from "@sparkle/components/Citation";
-
-import { PaginatedCitationsGrid } from "../index_with_tw_base";
+import { DocumentIcon, PaginatedCitationsGrid } from "../index_with_tw_base";
 
 const meta = {
   title: "Modules/PaginatedCitationsGrid",
@@ -16,7 +14,7 @@ function makeCitationItems(items: number) {
   return Array.from({ length: items }, (_, idx) => ({
     title: `test ${idx + 1}`,
     href: "empty",
-    type: "document" as CitationType,
+    icon: <DocumentIcon />,
   }));
 }
 

From a09a3e0e95ffb74e0247a35159aff4c45f7b4c86 Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Fri, 13 Dec 2024 16:33:29 +0100
Subject: [PATCH 5/9] [sparkle] - refactor: update CardButton component padding
 and alignment

 - Change padding specificity from general to horizontal for small, medium, and large sizes
 - Adjust the button alignment to center justify within its container
---
 sparkle/src/components/CardButton.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/sparkle/src/components/CardButton.tsx b/sparkle/src/components/CardButton.tsx
index 4f13b369da6f..30299db108d5 100644
--- a/sparkle/src/components/CardButton.tsx
+++ b/sparkle/src/components/CardButton.tsx
@@ -27,13 +27,13 @@ const CARD_BUTTON_SIZES = ["sm", "md", "lg"] as const;
 type CardButtonSizeType = (typeof CARD_BUTTON_SIZES)[number];
 
 const sizeVariants: Record<CardButtonSizeType, string> = {
-  sm: "s-p-3 s-rounded-xl",
-  md: "s-p-4 s-rounded-2xl",
-  lg: "s-p-5 s-rounded-3xl",
+  sm: "s-px-3 s-rounded-xl",
+  md: "s-px-4 s-rounded-2xl",
+  lg: "s-px-5 s-rounded-3xl",
 };
 
 const cardButtonVariants = cva(
-  "s-flex s-text-left s-group s-border s-overflow-hidden s-text-foreground",
+  "s-flex s-text-left  s-justify-center s-group s-border s-overflow-hidden s-text-foreground",
   {
     variants: {
       variant: variantClasses,

From bb8ad1b424232d9e051db42d6173f3c7c90ca7a2 Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Sat, 14 Dec 2024 11:36:34 +0100
Subject: [PATCH 6/9] [sparkle] - feature: add compact size option to
 ConversationMessage component

 - Introduced a 'compact' size property to reduce the visual space taken by agent messages in conversations
---
 sparkle/src/stories/ConversationMessage.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/sparkle/src/stories/ConversationMessage.stories.tsx b/sparkle/src/stories/ConversationMessage.stories.tsx
index 5c63deda5312..6d21beaec621 100644
--- a/sparkle/src/stories/ConversationMessage.stories.tsx
+++ b/sparkle/src/stories/ConversationMessage.stories.tsx
@@ -97,6 +97,7 @@ export const ConversationExample = () => {
           <ConversationMessage
             type="agent"
             name="@assistant"
+            size="compact"
             pictureUrl="https://dust.tt/static/droidavatar/Droid_Pink_3.jpg"
             buttons={[
               <Button

From a7e0b13b3a6a230302455a70e2320eb4f795c038 Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Mon, 16 Dec 2024 10:48:58 +0100
Subject: [PATCH 7/9] [sparkle] - feature: bump package version to 0.2.341

 - Update `package-lock.json` and `package.json` to reflect the new package version
 - Ensure dependencies are aligned with the upgraded version
---
 sparkle/package-lock.json | 4 ++--
 sparkle/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
index 99ada6ec1066..00f6d6379b9f 100644
--- a/sparkle/package-lock.json
+++ b/sparkle/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.340",
+  "version": "0.2.341",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dust-tt/sparkle",
-      "version": "0.2.340",
+      "version": "0.2.341",
       "license": "ISC",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
diff --git a/sparkle/package.json b/sparkle/package.json
index 4e3d743bdf8f..6ae0c9cc44b3 100644
--- a/sparkle/package.json
+++ b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.340",
+  "version": "0.2.341",
   "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",

From e125622da228a8e22056a79a567191685ca331cd Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Mon, 16 Dec 2024 15:32:03 +0100
Subject: [PATCH 8/9] [sparkle] - refactor: update responsive grid and
 container styles in ConversationMessageContent

 - Removed fixed grid column classes and added responsive grid classes to support various screen sizes
 - Included new container utility class to enhance structure in conversation message layouts
---
 sparkle/src/components/ConversationMessageContent.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/sparkle/src/components/ConversationMessageContent.tsx b/sparkle/src/components/ConversationMessageContent.tsx
index 5e2519afde53..006c521552eb 100644
--- a/sparkle/src/components/ConversationMessageContent.tsx
+++ b/sparkle/src/components/ConversationMessageContent.tsx
@@ -17,7 +17,7 @@ export function ConversationMessageContent({
   return (
     <div
       className={cn(
-        "s-flex s-flex-col s-justify-stretch",
+        "s-flex s-flex-col s-justify-stretch s-@container",
         size === "compact" ? "s-gap-3" : "s-gap-4"
       )}
     >
@@ -32,8 +32,10 @@ export function ConversationMessageContent({
       {citations && (
         <div
           className={cn(
-            "s-grid s-gap-2",
-            size === "compact" ? "s-grid-cols-2" : "s-grid-cols-4"
+            "s-grid s-grid-cols-2 s-gap-2",
+            size === "compact"
+              ? ""
+              : "@xs:s-grid-cols-1 @sm:s-grid-cols-3 @lg:s-grid-cols-4 @xl:s-grid-cols-5"
           )}
         >
           {citations}

From 45865521257edbe129b6df8ad7b50bd93bae7e73 Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Mon, 16 Dec 2024 16:22:15 +0100
Subject: [PATCH 9/9] [sparkle] - fix: adjust responsive grid columns for
 ConversationMessageContent

 - Change the grid column setup at 'xs' breakpoint to start with 2 columns instead of 1
---
 sparkle/src/components/ConversationMessageContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sparkle/src/components/ConversationMessageContent.tsx b/sparkle/src/components/ConversationMessageContent.tsx
index 006c521552eb..32f75a91cc8f 100644
--- a/sparkle/src/components/ConversationMessageContent.tsx
+++ b/sparkle/src/components/ConversationMessageContent.tsx
@@ -35,7 +35,7 @@ export function ConversationMessageContent({
             "s-grid s-grid-cols-2 s-gap-2",
             size === "compact"
               ? ""
-              : "@xs:s-grid-cols-1 @sm:s-grid-cols-3 @lg:s-grid-cols-4 @xl:s-grid-cols-5"
+              : "@xs:s-grid-cols-2 @sm:s-grid-cols-3 @lg:s-grid-cols-4 @xl:s-grid-cols-5"
           )}
         >
           {citations}