gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

implemented dropdown menu on conversations

Browse source
This commit is contained in:
Lucas Oliveira 2025-09-24 13:56:47 -03:00
parent 4483ff82a8
commit 357ab739bf
1 changed files with 66 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
frontend/components/navigation.tsx
View file

@ -1,9 +1,11 @@
"use client"; "use client";
import { import {
EllipsisVertical,
FileText, FileText,
Library, Library,
MessageSquare, MessageSquare,
MoreHorizontal,
Plus, Plus,
Settings2, Settings2,
Trash2, Trash2,
@ -13,6 +15,12 @@ import { usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { useDeleteSessionMutation } from "@/app/api/queries/useDeleteSessionMutation"; import { useDeleteSessionMutation } from "@/app/api/queries/useDeleteSessionMutation";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { type EndpointType, useChat } from "@/contexts/chat-context"; import { type EndpointType, useChat } from "@/contexts/chat-context";
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context"; import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -236,14 +244,30 @@ export function Navigation({
const handleDeleteConversation = ( const handleDeleteConversation = (
conversation: ChatConversation, conversation: ChatConversation,
event: React.MouseEvent, event?: React.MouseEvent,
) => { ) => {
event.preventDefault(); if (event) {
event.stopPropagation(); event.preventDefault();
event.stopPropagation();
}
setConversationToDelete(conversation); setConversationToDelete(conversation);
setDeleteModalOpen(true); setDeleteModalOpen(true);
}; };
const handleContextMenuAction = (
action: string,
conversation: ChatConversation,
) => {
switch (action) {
case "delete":
handleDeleteConversation(conversation);
break;
// Add more actions here in the future (rename, duplicate, etc.)
default:
break;
}
};
const confirmDeleteConversation = () => { const confirmDeleteConversation = () => {
if (conversationToDelete) { if (conversationToDelete) {
deleteSessionMutation.mutate({ deleteSessionMutation.mutate({
@ -409,7 +433,7 @@ export function Navigation({
<button <button
key={conversation.response_id} key={conversation.response_id}
type="button" type="button"
className={`w-full p-3 rounded-lg group relative text-left ${ className={`w-full px-3 pr-2 h-11 rounded-lg group relative text-left ${
loading loading
? "opacity-50 cursor-not-allowed" ? "opacity-50 cursor-not-allowed"
: "hover:bg-accent cursor-pointer" : "hover:bg-accent cursor-pointer"
@ -425,25 +449,49 @@ export function Navigation({
}} }}
disabled={loading} disabled={loading}
> >
<div className="flex items-start justify-between"> <div className="flex items-center justify-between">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="text-sm font-medium text-foreground truncate"> <div className="text-sm font-medium text-foreground truncate">
{conversation.title} {conversation.title}
</div> </div>
</div> </div>
<button <DropdownMenu>
type="button" <DropdownMenuTrigger asChild>
onClick={(e) => <button
handleDeleteConversation(conversation, e) type="button"
} className="opacity-0 group-hover:opacity-100 data-[state=open]:opacity-100 data-[state=open]:text-foreground transition-opacity p-1 hover:bg-accent rounded text-muted-foreground hover:text-foreground ml-2 flex-shrink-0"
className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-destructive/10 rounded text-muted-foreground hover:text-destructive ml-2 flex-shrink-0" title="More options"
title="Delete conversation" disabled={
disabled={ loading || deleteSessionMutation.isPending
loading || deleteSessionMutation.isPending }
} onClick={(e) => {
> e.stopPropagation();
<Trash2 className="h-3 w-3" /> }}
</button> >
<EllipsisVertical className="h-4 w-4" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent
side="bottom"
align="end"
className="w-48"
onClick={(e) => e.stopPropagation()}
>
<DropdownMenuItem
onClick={(e) => {
e.stopPropagation();
handleContextMenuAction(
"delete",
conversation,
);
}}
className="cursor-pointer text-destructive focus:text-destructive"
>
<Trash2 className="mr-2 h-4 w-4" />
Delete conversation
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div> </div>
</button> </button>
)) ))