[sparkle] - refactor: standardize Button usage in `ConversationMessag…

…eXXX` (#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 <[email protected]>
dust-tt · Oct 28, 2024 · 6796f44 · 6796f44
1 parent f83c6a0
commit 6796f44
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 42 deletions.
diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
diff --git 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
@@ -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
@@ -1,5 +1,4 @@
 import React, { useRef } from "react";
-import { ComponentType, MouseEventHandler } from "react";
 
 import { Button } from "@sparkle/components/Button";
 import {
@@ -12,33 +11,16 @@ 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;
 };
 
 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
@@ -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