Add ability to duplicate chat in sidebar

stackblitz-labs · Nov 17, 2024 · 23d7182 · 23d7182
1 parent a0ae79a
commit 23d7182
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 8 deletions.
diff --git a/app/components/sidebar/HistoryItem.tsx b/app/components/sidebar/HistoryItem.tsx
@@ -5,9 +5,10 @@ import { type ChatHistoryItem } from '~/lib/persistence';
 interface HistoryItemProps {
   item: ChatHistoryItem;
   onDelete?: (event: React.UIEvent) => void;
+  onDuplicate?: (id: string) => void;
 }
 
-export function HistoryItem({ item, onDelete }: HistoryItemProps) {
+export function HistoryItem({ item, onDelete, onDuplicate }: HistoryItemProps) {
   const [hovering, setHovering] = useState(false);
   const hoverRef = useRef<HTMLDivElement>(null);
 
@@ -44,7 +45,14 @@ export function HistoryItem({ item, onDelete }: HistoryItemProps) {
         {item.description}
         <div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-bolt-elements-background-depth-2 group-hover:from-bolt-elements-background-depth-3 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-45%">
           {hovering && (
-            <div className="flex items-center p-1 text-bolt-elements-textSecondary hover:text-bolt-elements-item-contentDanger">
+            <div className="flex items-center p-1 text-bolt-elements-textSecondary">
+              {onDuplicate && (
+                <button
+                  className="i-ph:copy scale-110 mr-2"
+                  onClick={() => onDuplicate?.(item.id)}
+                  title="Duplicate chat"
+                />
+              )}
               <Dialog.Trigger asChild>
                 <button
                   className="i-ph:trash scale-110"

diff --git a/app/components/sidebar/Menu.client.tsx b/app/components/sidebar/Menu.client.tsx
@@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
 import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
 import { IconButton } from '~/components/ui/IconButton';
 import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
-import { db, deleteById, getAll, chatId, type ChatHistoryItem } from '~/lib/persistence';
+import { db, deleteById, getAll, chatId, type ChatHistoryItem, useChatHistory } from '~/lib/persistence';
 import { cubicEasingFn } from '~/utils/easings';
 import { logger } from '~/utils/logger';
 import { HistoryItem } from './HistoryItem';
@@ -34,6 +34,7 @@ const menuVariants = {
 type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
 
 export function Menu() {
+  const { duplicateCurrentChat } = useChatHistory();
   const menuRef = useRef<HTMLDivElement>(null);
   const [list, setList] = useState<ChatHistoryItem[]>([]);
   const [open, setOpen] = useState(false);
@@ -99,6 +100,17 @@ export function Menu() {
     };
   }, []);
 
+  const handleDeleteClick = (event: React.UIEvent, item: ChatHistoryItem) => {
+    event.preventDefault();
+
+    setDialogContent({ type: 'delete', item });
+  };
+
+  const handleDuplicate = async (id: string) => {
+    await duplicateCurrentChat(id);
+    loadEntries(); // Reload the list after duplication
+  };
+
   return (
     <motion.div
       ref={menuRef}
@@ -128,7 +140,12 @@ export function Menu() {
                   {category}
                 </div>
                 {items.map((item) => (
-                  <HistoryItem key={item.id} item={item} onDelete={() => setDialogContent({ type: 'delete', item })} />
+                  <HistoryItem
+                    key={item.id}
+                    item={item}
+                    onDelete={(event) => handleDeleteClick(event, item)}
+                    onDuplicate={() => handleDuplicate(item.id)}
+                  />
                 ))}
               </div>
             ))}

diff --git a/app/lib/persistence/db.ts b/app/lib/persistence/db.ts
@@ -158,3 +158,23 @@ async function getUrlIds(db: IDBDatabase): Promise<string[]> {
     };
   });
 }
+
+export async function duplicateChat(db: IDBDatabase, id: string): Promise<string> {
+  const chat = await getMessages(db, id);
+  if (!chat) {
+    throw new Error('Chat not found');
+  }
+
+  const newId = await getNextId(db);
+  const newUrlId = await getUrlId(db, newId); // Get a new urlId for the duplicated chat
+
+  await setMessages(
+    db,
+    newId,
+    chat.messages,
+    newUrlId, // Use the new urlId
+    `${chat.description || 'Chat'} (copy)`
+  );
+
+  return newUrlId; // Return the urlId instead of id for navigation
+}
diff --git a/app/lib/persistence/useChatHistory.ts b/app/lib/persistence/useChatHistory.ts
@@ -4,7 +4,7 @@ import { atom } from 'nanostores';
 import type { Message } from 'ai';
 import { toast } from 'react-toastify';
 import { workbenchStore } from '~/lib/stores/workbench';
-import { getMessages, getNextId, getUrlId, openDatabase, setMessages } from './db';
+import { getMessages, getNextId, getUrlId, openDatabase, setMessages, duplicateChat } from './db';
 
 export interface ChatHistoryItem {
   id: string;
@@ -46,11 +46,11 @@ export function useChatHistory() {
         .then((storedMessages) => {
           if (storedMessages && storedMessages.messages.length > 0) {
             const rewindId = searchParams.get('rewindId');
-            const filteredMessages = rewindId 
-              ? storedMessages.messages.slice(0, 
+            const filteredMessages = rewindId
+              ? storedMessages.messages.slice(0,
                   storedMessages.messages.findIndex(m => m.id === rewindId) + 1)
               : storedMessages.messages;
-            
+
             setInitialMessages(filteredMessages);
             setUrlId(storedMessages.urlId);
             description.set(storedMessages.description);
@@ -100,6 +100,19 @@ export function useChatHistory() {
 
       await setMessages(db, chatId.get() as string, messages, urlId, description.get());
     },
+    duplicateCurrentChat: async (listItemId:string) => {
+      if (!db || (!mixedId && !listItemId)) {
+        return;
+      }
+
+      try {
+        const newId = await duplicateChat(db, mixedId || listItemId);
+        navigate(`/chat/${newId}`);
+        toast.success('Chat duplicated successfully');
+      } catch (error) {
+        toast.error('Failed to duplicate chat');
+      }
+    }
   };
 }