From 77eab962a67014ceb329bd140e0f92671d31f9f0 Mon Sep 17 00:00:00 2001
From: Jules Belveze <32683010+JulesBelveze@users.noreply.github.com>
Date: Mon, 28 Oct 2024 14:17:01 +0100
Subject: [PATCH] [front] - chore: hide conversation message labels (#8274)

* [front] - refactor: replace options objects with Button components in AgentMessage

 - Converted action options in AgentMessage to use Button component for improved maintainability and consistency
 - Added tooltip to buttons for enhanced user experience and accessibility

* [front] - feature: update @dust-tt/sparkle to v0.2.281-rc-1

 - Upgraded @dust-tt/sparkle to include new features and improvements in release candidate version
 - Ensured package-lock.json reflects the updated resolution and integrity of the package

* [front] - feature: update copy and retry buttons in AgentMessage component

 - Added 'outline' variant and 'xs' size to the copy and retry buttons for visual consistency
 - Enhancements aim to improve the user interface by scaling the buttons appropriately within the agent message bubble

---------

Co-authored-by: Jules <jules@MacBook-Pro.local>
---
 .../assistant/conversation/AgentMessage.tsx   | 32 +++++++++++--------
 front/package-lock.json                       |  8 ++---
 front/package.json                            |  2 +-
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/front/components/assistant/conversation/AgentMessage.tsx b/front/components/assistant/conversation/AgentMessage.tsx
index dce431628196..c103f2c1fbcf 100644
--- a/front/components/assistant/conversation/AgentMessage.tsx
+++ b/front/components/assistant/conversation/AgentMessage.tsx
@@ -325,23 +325,29 @@ export function AgentMessage({
     message.status === "failed"
       ? []
       : [
-          {
-            label: "Copy to clipboard",
-            icon: ClipboardIcon,
-            onClick: () => {
+          <Button
+            key="copy-msg-button"
+            tooltip="Copy to clipboard"
+            variant="outline"
+            size="xs"
+            onClick={() => {
               void navigator.clipboard.writeText(
                 cleanUpCitations(agentMessageToRender.content || "")
               );
-            },
-          },
-          {
-            label: "Retry",
-            icon: ArrowPathIcon,
-            onClick: () => {
+            }}
+            icon={ClipboardIcon}
+          />,
+          <Button
+            key="retry-msg-button"
+            tooltip="Retry"
+            variant="outline"
+            size="xs"
+            onClick={() => {
               void retryHandler(agentMessageToRender);
-            },
-            disabled: isRetryHandlerProcessing || shouldStream,
-          },
+            }}
+            icon={ArrowPathIcon}
+            disabled={isRetryHandlerProcessing || shouldStream}
+          />,
         ];
 
   // References logic.
diff --git a/front/package-lock.json b/front/package-lock.json
index c7e2ff589c76..1e4828d8db82 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -7,7 +7,7 @@
       "dependencies": {
         "@auth0/nextjs-auth0": "^3.5.0",
         "@dust-tt/client": "file:../sdks/js",
-        "@dust-tt/sparkle": "^0.2.280",
+        "@dust-tt/sparkle": "^0.2.281",
         "@dust-tt/types": "file:../types",
         "@headlessui/react": "^1.7.7",
         "@heroicons/react": "^2.0.11",
@@ -11504,9 +11504,9 @@
       "link": true
     },
     "node_modules/@dust-tt/sparkle": {
-      "version": "0.2.280",
-      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.280.tgz",
-      "integrity": "sha512-eWBwMBHsWj/W4J23+vMdoygQfsm5v+lxVtDJPOOuUW48JKP8gg8GTkXsZiVQ5j9ZAQp0C1ng8r0G8C0sOKjHlA==",
+      "version": "0.2.281",
+      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.281.tgz",
+      "integrity": "sha512-Hs85n/GVix/SIhxkTM+8iY6DzGVHogQnyKypIqyb6y7yWiAQUjbYhxbxJTbZo46PMd3pGLFU615WLxxX2skRUw==",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
         "@emoji-mart/react": "^1.1.1",
diff --git a/front/package.json b/front/package.json
index 9e07978d02fc..07d74cae85cf 100644
--- a/front/package.json
+++ b/front/package.json
@@ -25,7 +25,7 @@
   "dependencies": {
     "@auth0/nextjs-auth0": "^3.5.0",
     "@dust-tt/client": "file:../sdks/js",
-    "@dust-tt/sparkle": "^0.2.280",
+    "@dust-tt/sparkle": "^0.2.281",
     "@dust-tt/types": "file:../types",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.11",