Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhancement: message toolbar using tooltip

Browse Source
This commit is contained in:
Faisal Amir 2025-05-21 22:25:43 +07:00
parent ad962c2cf6
commit 9d5e670344
1 changed files with 67 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
web-app/src/containers/ThreadContent.tsx
View File

@ -26,6 +26,11 @@ import {
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea' import { Textarea } from '@/components/ui/textarea'
import { toast } from 'sonner' import { toast } from 'sonner'
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip'
const CopyButton = ({ text }: { text: string }) => { const CopyButton = ({ text }: { text: string }) => {
const [copied, setCopied] = useState(false) const [copied, setCopied] = useState(false)
@ -47,12 +52,14 @@ const CopyButton = ({ text }: { text: string }) => {
<span className="opacity-100">Copied!</span> <span className="opacity-100">Copied!</span>
</> </>
) : ( ) : (
<> <Tooltip>
<IconCopy size={16} /> <TooltipTrigger asChild>
<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"> <IconCopy size={16} />
Copy </TooltipTrigger>
</span> <TooltipContent>
</> <p>Copy</p>
</TooltipContent>
</Tooltip>
)} )}
</button> </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"> <div className="flex items-center justify-end gap-2 text-main-view-fg/60 text-xs mt-2">
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<button <Tooltip>
className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative" <TooltipTrigger asChild>
onClick={() => { <button className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative">
console.log('Edit clicked') <IconPencil size={16} />
}} </button>
> </TooltipTrigger>
<IconPencil size={16} /> <TooltipContent>
<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"> <p>Edit</p>
Edit </TooltipContent>
</span> </Tooltip>
</button>
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
@ -195,17 +201,21 @@ export const ThreadContent = memo(
</DialogHeader> </DialogHeader>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
<button <Tooltip>
className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative" <TooltipTrigger asChild>
onClick={() => { <button
deleteMessage(item.thread_id, item.id) 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 <IconTrash size={16} />
</span> </button>
</button> </TooltipTrigger>
<TooltipContent>
<p>Delete</p>
</TooltipContent>
</Tooltip>
</div> </div>
</div> </div>
)} )}
@ -245,27 +255,36 @@ export const ThreadContent = memo(
)} )}
> >
<CopyButton text={item.content?.[0]?.text.value || ''} /> <CopyButton text={item.content?.[0]?.text.value || ''} />
<button <Tooltip>
className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative" <TooltipTrigger asChild>
onClick={() => { <button
deleteMessage(item.thread_id, item.id) 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 <IconTrash size={16} />
</span> </button>
</button> </TooltipTrigger>
<TooltipContent>
<p>Delete</p>
</TooltipContent>
</Tooltip>
{item.isLastMessage && ( {item.isLastMessage && (
<button <Tooltip>
className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative" <TooltipTrigger asChild>
onClick={regenerate} <button
> className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
<IconRefresh size={16} /> onClick={regenerate}
<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 <IconRefresh size={16} />
</span> </button>
</button> </TooltipTrigger>
<TooltipContent>
<p>Regenerate</p>
</TooltipContent>
</Tooltip>
)} )}
</div> </div>
</div> </div>