Feat: Delete or filter conversations #3221 (#9491)

### What problem does this PR solve?

Feat: Delete or filter conversations #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/next-chats/chat/conversation-dropdown.tsx

@@ -0,0 +1,48 @@
+import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useRemoveConversation } from '@/hooks/use-chat-request';
+import { IConversation } from '@/interfaces/database/chat';
+import { Trash2 } from 'lucide-react';
+import { MouseEventHandler, PropsWithChildren, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function ConversationDropdown({
+  children,
+  conversation,
+}: PropsWithChildren & {
+  conversation: IConversation;
+}) {
+  const { t } = useTranslation();
+
+  const { removeConversation } = useRemoveConversation();
+
+  const handleDelete: MouseEventHandler<HTMLDivElement> = useCallback(() => {
+    removeConversation([conversation.id]);
+  }, [conversation.id, removeConversation]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <ConfirmDeleteDialog onOk={handleDelete}>
+          <DropdownMenuItem
+            className="text-state-error"
+            onSelect={(e) => {
+              e.preventDefault();
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            {t('common.delete')} <Trash2 />
+          </DropdownMenuItem>
+        </ConfirmDeleteDialog>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}