Adding avatar and onClose() on <Citation/>

sparkle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.41",
+  "version": "0.2.42",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

sparkle/src/components/Citation.tsx

@@ -4,7 +4,14 @@ import { DocumentText } from "@sparkle/icons/stroke";
 import { classNames } from "@sparkle/lib/utils";
 import { Drive, Github, Notion, Slack } from "@sparkle/logo/platforms";
 
-import { ExternalLinkIcon, Icon, IconButton, Tooltip } from "..";
+import {
+  Avatar,
+  ExternalLinkIcon,
+  Icon,
+  IconButton,
+  Tooltip,
+  XCircleIcon,
+} from "..";
 
 interface CitationProps {
   type?: "slack" | "google_drive" | "github" | "notion" | "document";
@@ -13,6 +20,8 @@ interface CitationProps {
   index?: ReactNode;
   isBlinking?: boolean;
   href?: string;
+  onClose?: () => void;
+  avatarUrl?: string;
 }
 
 const typeIcons = {
@@ -29,7 +38,9 @@ export function Citation({
   type = "document",
   description,
   href,
+  onClose,
   isBlinking = false,
+  avatarUrl,
 }: CitationProps) {
   return (
     <div
@@ -39,18 +50,31 @@ export function Citation({
       )}
     >
       <div className="s-flex s-items-center s-gap-2">
+        {avatarUrl && <Avatar visual={avatarUrl} size="xs" />}
         {index && (
           <div className="s-flex s-h-5 s-w-5 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">
             {index}
           </div>
         )}
-        <Icon visual={typeIcons[type]} size="sm" />
+        <Icon
+          visual={typeIcons[type]}
+          size="sm"
+          className="s-text-element-700"
+        />
         <div className="s-flex-grow s-text-xs" />
         {href && (
           <a target="_blank" rel="noopener noreferrer" href={href}>
             <IconButton icon={ExternalLinkIcon} size="sm" variant="secondary" />
           </a>
         )}
+        {onClose && (
+          <IconButton
+            icon={XCircleIcon}
+            size="sm"
+            variant="tertiary"
+            onClick={onClose}
+          />
+        )}
       </div>
       <Tooltip label={title} position="above">
         <div className="s-line-clamp-1 s-text-sm s-font-bold s-text-element-900">

sparkle/src/stories/Citation.stories.tsx

@@ -17,6 +17,25 @@ export const CitationsExample = () => (
       type="slack"
       href="https://www.google.com"
     />
+    <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
+        title="With avatarUrl"
+        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}
+        avatarUrl="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"