Feat: Render dialog list #3221 (#9249)

### What problem does this PR solve?

Feat: Render dialog list #3221

### Type of change


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

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

@@ -0,0 +1,64 @@
+import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useRemoveDialog } from '@/hooks/use-chat-request';
+import { IDialog } from '@/interfaces/database/chat';
+import { PenLine, Trash2 } from 'lucide-react';
+import { MouseEventHandler, PropsWithChildren, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useRenameChat } from './hooks/use-rename-chat';
+
+export function ChatDropdown({
+  children,
+  showChatRenameModal,
+  chat,
+}: PropsWithChildren &
+  Pick<ReturnType<typeof useRenameChat>, 'showChatRenameModal'> & {
+    chat: IDialog;
+  }) {
+  const { t } = useTranslation();
+  const { removeDialog } = useRemoveDialog();
+
+  const handleShowChatRenameModal: MouseEventHandler<HTMLDivElement> =
+    useCallback(
+      (e) => {
+        e.stopPropagation();
+        showChatRenameModal(chat);
+      },
+      [chat, showChatRenameModal],
+    );
+
+  const handleDelete: MouseEventHandler<HTMLDivElement> = useCallback(() => {
+    removeDialog([chat.id]);
+  }, [chat.id, removeDialog]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem onClick={handleShowChatRenameModal}>
+          {t('common.rename')} <PenLine />
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <ConfirmDeleteDialog onOk={handleDelete}>
+          <DropdownMenuItem
+            className="text-text-delete-red"
+            onSelect={(e) => {
+              e.preventDefault();
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            {t('common.delete')} <Trash2 />
+          </DropdownMenuItem>
+        </ConfirmDeleteDialog>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}