add duplicate to chat actions dropdown

Author: brendan-kellam

packages/web/src/app/[domain]/chat/components/chatActionsDropdown.tsx

@@ -1,18 +1,20 @@
 'use client';
 
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { PencilIcon, TrashIcon } from "lucide-react";
+import { CopyIcon, PencilIcon, TrashIcon } from "lucide-react";
 
 interface ChatActionsDropdownProps {
     children: React.ReactNode;
     onRenameClick: () => void;
+    onDuplicateClick: () => void;
     onDeleteClick: () => void;
     align?: "start" | "center" | "end";
 }
 
 export const ChatActionsDropdown = ({
     children,
     onRenameClick,
+    onDuplicateClick,
     onDeleteClick,
     align = "start",
 }: ChatActionsDropdownProps) => {
@@ -35,6 +37,16 @@ export const ChatActionsDropdown = ({
                     <PencilIcon className="w-4 h-4 mr-2" />
                     Rename
                 </DropdownMenuItem>
+                <DropdownMenuItem
+                    className="cursor-pointer"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onDuplicateClick();
+                    }}
+                >
+                    <CopyIcon className="w-4 h-4 mr-2" />
+                    Duplicate
+                </DropdownMenuItem>
                 <DropdownMenuItem
                     className="cursor-pointer text-destructive focus:text-destructive"
                     onClick={(e) => {

packages/web/src/app/[domain]/chat/components/chatName.tsx

@@ -2,13 +2,14 @@
 
 import { useToast } from "@/components/hooks/use-toast";
 import { Button } from "@/components/ui/button";
-import { deleteChat, updateChatName } from "@/features/chat/actions";
+import { deleteChat, duplicateChat, updateChatName } from "@/features/chat/actions";
 import { isServiceError } from "@/lib/utils";
 import { ChevronDown } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
 import { ChatActionsDropdown } from "./chatActionsDropdown";
 import { DeleteChatDialog } from "./deleteChatDialog";
+import { DuplicateChatDialog } from "./duplicateChatDialog";
 import { RenameChatDialog } from "./renameChatDialog";
 import { SINGLE_TENANT_ORG_DOMAIN } from "@/lib/constants";
 
@@ -20,9 +21,11 @@ interface ChatNameProps {
 
 export const ChatName = ({ name, id, isOwner = false }: ChatNameProps) => {
     const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+    const [isDuplicateDialogOpen, setIsDuplicateDialogOpen] = useState(false);
     const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
     const { toast } = useToast();
     const router = useRouter();
+    const params = useParams<{ domain: string }>();
 
     const onRenameChat = useCallback(async (newName: string): Promise<boolean> => {
         const response = await updateChatName({
@@ -62,6 +65,23 @@ export const ChatName = ({ name, id, isOwner = false }: ChatNameProps) => {
         }
     }, [id, toast, router]);
 
+    const onDuplicateChat = useCallback(async (newName: string): Promise<string | null> => {
+        const response = await duplicateChat({ chatId: id, newName });
+
+        if (isServiceError(response)) {
+            toast({
+                description: `❌ Failed to duplicate chat. Reason: ${response.message}`
+            });
+            return null;
+        } else {
+            toast({
+                description: `✅ Chat duplicated successfully`
+            });
+            router.push(`/${params.domain}/chat/${response.id}`);
+            return response.id;
+        }
+    }, [id, toast, router, params.domain]);
+
     return (
         <>
             <div className="flex flex-row gap-1 items-center">
@@ -71,6 +91,7 @@ export const ChatName = ({ name, id, isOwner = false }: ChatNameProps) => {
                 {isOwner && (
                     <ChatActionsDropdown
                         onRenameClick={() => setIsRenameDialogOpen(true)}
+                        onDuplicateClick={() => setIsDuplicateDialogOpen(true)}
                         onDeleteClick={() => setIsDeleteDialogOpen(true)}
                         align="center"
                     >
@@ -95,6 +116,12 @@ export const ChatName = ({ name, id, isOwner = false }: ChatNameProps) => {
                 onOpenChange={setIsDeleteDialogOpen}
                 onDelete={onDeleteChat}
             />
+            <DuplicateChatDialog
+                isOpen={isDuplicateDialogOpen}
+                onOpenChange={setIsDuplicateDialogOpen}
+                onDuplicate={onDuplicateChat}
+                currentName={name ?? ""}
+            />
         </>
     )
 }

packages/web/src/app/[domain]/chat/components/chatSidePanel.tsx

@@ -7,7 +7,7 @@ import { ResizablePanel } from "@/components/ui/resizable";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { deleteChat, updateChatName } from "@/features/chat/actions";
+import { deleteChat, duplicateChat, updateChatName } from "@/features/chat/actions";
 import { cn, isServiceError } from "@/lib/utils";
 import { CirclePlusIcon, EllipsisIcon } from "lucide-react";
 import { ChatActionsDropdown } from "./chatActionsDropdown";
@@ -21,6 +21,7 @@ import { ImperativePanelHandle } from "react-resizable-panels";
 import { useChatId } from "../useChatId";
 import { RenameChatDialog } from "./renameChatDialog";
 import { DeleteChatDialog } from "./deleteChatDialog";
+import { DuplicateChatDialog } from "./duplicateChatDialog";
 import Link from "next/link";
 import { SINGLE_TENANT_ORG_DOMAIN } from "@/lib/constants";
 
@@ -48,6 +49,8 @@ export const ChatSidePanel = ({
     const chatId = useChatId();
     const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
     const [chatIdToRename, setChatIdToRename] = useState<string | null>(null);
+    const [isDuplicateDialogOpen, setIsDuplicateDialogOpen] = useState(false);
+    const [chatIdToDuplicate, setChatIdToDuplicate] = useState<string | null>(null);
     const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
     const [chatIdToDelete, setChatIdToDelete] = useState<string | null>(null);
 
@@ -114,6 +117,27 @@ export const ChatSidePanel = ({
         }
     }, [chatId, router, toast]);
 
+    const onDuplicateChat = useCallback(async (newName: string, chatIdToDuplicate: string): Promise<string | null> => {
+        if (!chatIdToDuplicate) {
+            return null;
+        }
+
+        const response = await duplicateChat({ chatId: chatIdToDuplicate, newName });
+
+        if (isServiceError(response)) {
+            toast({
+                description: `❌ Failed to duplicate chat. Reason: ${response.message}`
+            });
+            return null;
+        } else {
+            toast({
+                description: `✅ Chat duplicated successfully`
+            });
+            router.push(`/${SINGLE_TENANT_ORG_DOMAIN}/chat/${response.id}`);
+            return response.id;
+        }
+    }, [router, toast]);
+
     return (
         <>
             <ResizablePanel
@@ -175,6 +199,10 @@ export const ChatSidePanel = ({
                                             setChatIdToRename(chat.id);
                                             setIsRenameDialogOpen(true);
                                         }}
+                                        onDuplicateClick={() => {
+                                            setChatIdToDuplicate(chat.id);
+                                            setIsDuplicateDialogOpen(true);
+                                        }}
                                         onDeleteClick={() => {
                                             setChatIdToDelete(chat.id);
                                             setIsDeleteDialogOpen(true);
@@ -244,6 +272,17 @@ export const ChatSidePanel = ({
                     return false;
                 }}
             />
+            <DuplicateChatDialog
+                isOpen={isDuplicateDialogOpen}
+                onOpenChange={setIsDuplicateDialogOpen}
+                onDuplicate={async (newName) => {
+                    if (chatIdToDuplicate) {
+                        return await onDuplicateChat(newName, chatIdToDuplicate);
+                    }
+                    return null;
+                }}
+                currentName={chatHistory?.find((chat) => chat.id === chatIdToDuplicate)?.name ?? ""}
+            />
         </>
     )
 }