From 9d5e670344d68ea34d68912046e9efbe553516fb Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 21 May 2025 22:25:43 +0700
Subject: [PATCH] enhancement: message toolbar using tooltip

---
 web-app/src/containers/ThreadContent.tsx | 115 +++++++++++++----------
 1 file changed, 67 insertions(+), 48 deletions(-)

diff --git a/web-app/src/containers/ThreadContent.tsx b/web-app/src/containers/ThreadContent.tsx
index 82f7d8d7b..a4d9c608d 100644
--- a/web-app/src/containers/ThreadContent.tsx
+++ b/web-app/src/containers/ThreadContent.tsx
@@ -26,6 +26,11 @@ import {
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
 import { toast } from 'sonner'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 
 const CopyButton = ({ text }: { text: string }) => {
   const [copied, setCopied] = useState(false)
@@ -47,12 +52,14 @@ const CopyButton = ({ text }: { text: string }) => {
           <span className="opacity-100">Copied!</span>
         </>
       ) : (
-        <>
-          <IconCopy size={16} />
-          <span className="opacity-0 w-0 overflow-hidden whitespace-nowrap group-hover:w-auto group-hover:opacity-100 transition-all duration-300 ease-in-out">
-            Copy
-          </span>
-        </>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <IconCopy size={16} />
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Copy</p>
+          </TooltipContent>
+        </Tooltip>
       )}
     </button>
   )
@@ -140,17 +147,16 @@ export const ThreadContent = memo(
             <div className="flex items-center justify-end gap-2 text-main-view-fg/60 text-xs mt-2">
               <Dialog>
                 <DialogTrigger asChild>
-                  <button
-                    className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
-                    onClick={() => {
-                      console.log('Edit clicked')
-                    }}
-                  >
-                    <IconPencil size={16} />
-                    <span className="opacity-0 w-0 overflow-hidden whitespace-nowrap group-hover:w-auto group-hover:opacity-100 transition-all duration-300 ease-in-out">
-                      Edit
-                    </span>
-                  </button>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative">
+                        <IconPencil size={16} />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Edit</p>
+                    </TooltipContent>
+                  </Tooltip>
                 </DialogTrigger>
                 <DialogContent>
                   <DialogHeader>
@@ -195,17 +201,21 @@ export const ThreadContent = memo(
                   </DialogHeader>
                 </DialogContent>
               </Dialog>
-              <button
-                className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
-                onClick={() => {
-                  deleteMessage(item.thread_id, item.id)
-                }}
-              >
-                <IconTrash size={16} />
-                <span className="opacity-0 w-0 overflow-hidden whitespace-nowrap group-hover:w-auto group-hover:opacity-100 transition-all duration-300 ease-in-out">
-                  Delete
-                </span>
-              </button>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
+                    onClick={() => {
+                      deleteMessage(item.thread_id, item.id)
+                    }}
+                  >
+                    <IconTrash size={16} />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Delete</p>
+                </TooltipContent>
+              </Tooltip>
             </div>
           </div>
         )}
@@ -245,27 +255,36 @@ export const ThreadContent = memo(
                   )}
                 >
                   <CopyButton text={item.content?.[0]?.text.value || ''} />
-                  <button
-                    className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
-                    onClick={() => {
-                      deleteMessage(item.thread_id, item.id)
-                    }}
-                  >
-                    <IconTrash size={16} />
-                    <span className="opacity-0 w-0 overflow-hidden whitespace-nowrap group-hover:w-auto group-hover:opacity-100 transition-all duration-300 ease-in-out">
-                      Delete
-                    </span>
-                  </button>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
+                        onClick={() => {
+                          deleteMessage(item.thread_id, item.id)
+                        }}
+                      >
+                        <IconTrash size={16} />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Delete</p>
+                    </TooltipContent>
+                  </Tooltip>
+
                   {item.isLastMessage && (
-                    <button
-                      className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
-                      onClick={regenerate}
-                    >
-                      <IconRefresh size={16} />
-                      <span className="opacity-0 w-0 overflow-hidden whitespace-nowrap group-hover:w-auto group-hover:opacity-100 transition-all duration-300 ease-in-out">
-                        Regenerate
-                      </span>
-                    </button>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
+                          onClick={regenerate}
+                        >
+                          <IconRefresh size={16} />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Regenerate</p>
+                      </TooltipContent>
+                    </Tooltip>
                   )}
                 </div>
               </div>