reroute after duplicate message

web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatMessageOptions.tsx

@@ -8,30 +8,53 @@ import {
   useGetChatMessage,
   useUpdateChatMessageFeedback
 } from '@/api/buster_rest/chats';
+import { useBusterNotifications } from '@/context/BusterNotifications';
+import { useMemoizedFn } from '@/hooks';
+import { timeout } from '@/lib';
+import { useAppLayoutContextSelector } from '@/context/BusterAppLayout';
+import { BusterRoutes } from '@/routes';
+import { useGetInitialChatFile } from '../../ChatContext/useGetInitialChatFile';
 
 export const ChatMessageOptions: React.FC<{
   messageId: string;
   chatId: string;
 }> = React.memo(({ messageId, chatId }) => {
+  const onChangePage = useAppLayoutContextSelector((x) => x.onChangePage);
   const { mutateAsync: duplicateChat, isPending: isCopying } = useDuplicateChat();
   const { mutateAsync: updateChatMessageFeedback } = useUpdateChatMessageFeedback();
   const { data: feedback } = useGetChatMessage(messageId, {
     select: ({ feedback }) => feedback
   });
 
+  const { openConfirmModal } = useBusterNotifications();
+
+  const warnBeforeDuplicate = useMemoizedFn(() => {
+    openConfirmModal({
+      title: 'Duplicate chat',
+      content:
+        'You are about to duplicate this chat from this message. This will create a new chat with the same messages. Do you want to continue?',
+      onOk: async () => {
+        const res = await duplicateChat({
+          id: chatId,
+          message_id: messageId
+        });
+        await timeout(100);
+        await onChangePage({
+          route: BusterRoutes.APP_CHAT_ID,
+          chatId: res.id
+        });
+      }
+    });
+  });
+
   return (
     <div className="flex items-center gap-1">
-      <AppTooltip title="Duplicate message">
+      <AppTooltip title="Duplicate chat from this message">
         <Button
           variant="ghost"
           prefix={<Copy />}
           loading={isCopying}
-          onClick={() =>
+          onClick={warnBeforeDuplicate}
-            duplicateChat({
-              id: chatId,
-              message_id: messageId
-            })
-          }
         />
       </AppTooltip>
       <AppTooltip title="Report message">