From 3cea924cf112c9c2d078436546ca2aab3c11d541 Mon Sep 17 00:00:00 2001
From: Alban Dumouilla <alban@dust.tt>
Date: Tue, 26 Nov 2024 15:49:06 +0100
Subject: [PATCH] Add tooltips to feedback thumbs

---
 .../ConversationMessageFeedbackSelector.tsx   | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/sparkle/src/components/ConversationMessageFeedbackSelector.tsx b/sparkle/src/components/ConversationMessageFeedbackSelector.tsx
index 7cd1e7b28bd5..fb148b8ee1fe 100644
--- a/sparkle/src/components/ConversationMessageFeedbackSelector.tsx
+++ b/sparkle/src/components/ConversationMessageFeedbackSelector.tsx
@@ -9,6 +9,7 @@ import {
 } from "@sparkle/components/Popover";
 import { TextArea } from "@sparkle/components/TextArea";
 import { HandThumbDownIcon, HandThumbUpIcon } from "@sparkle/icons/solid";
+import { Tooltip } from "@sparkle/index_with_tw_base";
 
 export type ThumbReaction = "up" | "down";
 export type ConversationMessageFeedbackType = {
@@ -58,21 +59,31 @@ export function FeedbackSelector(
       <PopoverRoot open={isPopoverOpen}>
         <PopoverTrigger asChild>
           <div className="s-flex s-items-center">
-            <Button
-              variant={feedback?.thumb === "up" ? "highlight" : "outline"}
-              size="xs"
-              disabled={isSubmittingThumb}
-              onClick={() => selectThumb("up")}
-              className={"s-rounded-r-none s-border-r-0"}
-              icon={HandThumbUpIcon}
+            <Tooltip
+              label="I love this answer!"
+              trigger={
+                <Button
+                  variant={feedback?.thumb === "up" ? "highlight" : "outline"}
+                  size="xs"
+                  disabled={isSubmittingThumb}
+                  onClick={() => selectThumb("up")}
+                  className={"s-rounded-r-none s-border-r-0"}
+                  icon={HandThumbUpIcon}
+                />
+              }
             />
-            <Button
-              variant={feedback?.thumb === "down" ? "highlight" : "outline"}
-              size="xs"
-              disabled={isSubmittingThumb}
-              onClick={() => selectThumb("down")}
-              className={"s-rounded-l-none s-border-l-0"}
-              icon={HandThumbDownIcon}
+            <Tooltip
+              label="This answer is not good enough."
+              trigger={
+                <Button
+                  variant={feedback?.thumb === "down" ? "highlight" : "outline"}
+                  size="xs"
+                  disabled={isSubmittingThumb}
+                  onClick={() => selectThumb("down")}
+                  className={"s-rounded-l-none s-border-l-0"}
+                  icon={HandThumbDownIcon}
+                />
+              }
             />
           </div>
         </PopoverTrigger>