From 6796f441f19aeae8e28fc1f9817769d1f4a82bae Mon Sep 17 00:00:00 2001
From: Jules Belveze <32683010+JulesBelveze@users.noreply.github.com>
Date: Mon, 28 Oct 2024 13:55:14 +0100
Subject: [PATCH] [sparkle] - refactor: standardize Button usage in
 `ConversationMessageXXX`  (#8273)

* [sparkle] - refactor: standardize button usage in conversation components

 - Replace detailed button objects with Button ReactElement across ConversationMessage and ConversationMessageActions components
 - Remove unused imports and redundant button creation logic to streamline component interface

* [sparkle] - refactor: streamline ConversationMessageActions component

 - Removed intermediate buttonNodes array in favor of using buttons directly for UI rendering
 - Simplified conditional rendering logic for message actions by directly checking buttons array length

* [sparkle] - fix: bump package version to 0.2.281

 - Updated package version in package-lock.json and package.json for consistency and to prepare for new release

---------

Co-authored-by: Jules <jules@MacBook-Pro.local>
---
 sparkle/package-lock.json                     |  4 +--
 sparkle/package.json                          |  2 +-
 .../src/components/ConversationMessage.tsx    | 10 +++----
 .../components/ConversationMessageActions.tsx | 26 +++----------------
 .../stories/ConversationMessage.stories.tsx   | 21 ++++++++-------
 5 files changed, 21 insertions(+), 42 deletions(-)

diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
index 917230100c24..b16d37726ec1 100644
--- a/sparkle/package-lock.json
+++ b/sparkle/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.280",
+  "version": "0.2.281",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dust-tt/sparkle",
-      "version": "0.2.280",
+      "version": "0.2.281",
       "license": "ISC",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
diff --git a/sparkle/package.json b/sparkle/package.json
index 63281eeff145..4a25beddc4ac 100644
--- a/sparkle/package.json
+++ b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.280",
+  "version": "0.2.281",
   "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/ConversationMessage.tsx b/sparkle/src/components/ConversationMessage.tsx
index f9b1350c9faa..49dfae2aba83 100644
--- a/sparkle/src/components/ConversationMessage.tsx
+++ b/sparkle/src/components/ConversationMessage.tsx
@@ -1,5 +1,6 @@
-import React, { ComponentType, MouseEventHandler } from "react";
+import React from "react";
 
+import { Button } from "@sparkle/components";
 import {
   ConversationMessageActions,
   ConversationMessageEmojiSelectorProps,
@@ -24,12 +25,7 @@ const messageTypeClasses: Record<MessageType, string> = {
 
 type ConversationMessageProps = {
   avatarBusy?: boolean;
-  buttons?: {
-    disabled?: boolean;
-    icon: ComponentType;
-    label: string;
-    onClick: MouseEventHandler<HTMLButtonElement>;
-  }[];
+  buttons?: React.ReactElement<typeof Button>[];
   children?: React.ReactNode;
   citations?: React.ReactElement[];
   messageEmoji?: ConversationMessageEmojiSelectorProps;
diff --git a/sparkle/src/components/ConversationMessageActions.tsx b/sparkle/src/components/ConversationMessageActions.tsx
index 7b59a7b2208d..87d2cae3fb9c 100644
--- a/sparkle/src/components/ConversationMessageActions.tsx
+++ b/sparkle/src/components/ConversationMessageActions.tsx
@@ -1,5 +1,4 @@
 import React, { useRef } from "react";
-import { ComponentType, MouseEventHandler } from "react";
 
 import { Button } from "@sparkle/components/Button";
 import {
@@ -12,12 +11,7 @@ import { ReactionIcon } from "@sparkle/icons/solid";
 import { cn } from "@sparkle/lib/utils";
 
 type ConversationMessageActionsProps = {
-  buttons?: {
-    label: string;
-    icon: ComponentType;
-    onClick: MouseEventHandler<HTMLButtonElement>;
-    disabled?: boolean;
-  }[];
+  buttons?: React.ReactElement<typeof Button>[];
   messageEmoji?: ConversationMessageEmojiSelectorProps;
 };
 
@@ -25,20 +19,8 @@ export function ConversationMessageActions({
   buttons = [],
   messageEmoji,
 }: ConversationMessageActionsProps) {
-  const buttonNodes = buttons?.map((button, i) => (
-    <Button
-      key={`message-button-${i}`}
-      variant="outline"
-      size="xs"
-      label={button.label}
-      icon={button.icon}
-      onClick={button.onClick}
-      disabled={button.disabled || false}
-    />
-  ));
-
   if (messageEmoji) {
-    buttonNodes.push(
+    buttons.push(
       <ConversationMessageEmojiSelector
         reactions={messageEmoji.reactions}
         onSubmitEmoji={messageEmoji.onSubmitEmoji}
@@ -47,11 +29,11 @@ export function ConversationMessageActions({
     );
   }
 
-  if (buttonNodes.length === 0) {
+  if (buttons.length === 0) {
     return false;
   }
 
-  return <div className="s-flex s-justify-end s-gap-2">{buttonNodes}</div>;
+  return <div className="s-flex s-justify-end s-gap-2">{buttons}</div>;
 }
 
 const MAX_MORE_REACTIONS_TO_SHOW = 9;
diff --git a/sparkle/src/stories/ConversationMessage.stories.tsx b/sparkle/src/stories/ConversationMessage.stories.tsx
index e522c0108d13..0bc57d416616 100644
--- a/sparkle/src/stories/ConversationMessage.stories.tsx
+++ b/sparkle/src/stories/ConversationMessage.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta } from "@storybook/react";
 import React from "react";
 
 import {
+  Button,
   Citation,
   ConversationMessage,
   MagnifyingGlassIcon,
@@ -35,11 +36,11 @@ export const ConversationExample = () => {
             name="@assistant"
             pictureUrl="https://dust.tt/static/droidavatar/Droid_Pink_3.jpg"
             buttons={[
-              {
-                icon: MagnifyingGlassIcon,
-                label: "Search details",
-                onClick: () => {},
-              },
+              <Button
+                icon={MagnifyingGlassIcon}
+                label="Search details"
+                onClick={() => {}}
+              />,
             ]}
             citations={[
               <Citation
@@ -103,11 +104,11 @@ export const ConversationExample = () => {
             name="@assistant"
             pictureUrl="https://dust.tt/static/droidavatar/Droid_Pink_3.jpg"
             buttons={[
-              {
-                icon: MagnifyingGlassIcon,
-                label: "Search details",
-                onClick: () => {},
-              },
+              <Button
+                icon={MagnifyingGlassIcon}
+                label="Search details"
+                onClick={() => {}}
+              />,
             ]}
             citations={[
               <Citation