Merge pull request #260 from mehul-m-prajapati/export_data

Added export button to download conversation as csv

client/package.json

@@ -31,6 +31,7 @@
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
     "emoji-picker-react": "^4.12.0",
+    "export-from-json": "^1.7.4",
     "lucide-react": "^0.453.0",
     "moment": "^2.30.1",
     "next-themes": "^0.3.0",

client/src/pages/Chatbot.tsx

@@ -45,6 +45,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import useSpeech from "@/hooks/useSpeech";
 import EmojiPicker from "emoji-picker-react";
+import exportFromJSON from 'export-from-json'; // Correct import statement
 
 export default function ChatbotPage() {
   const { id } = useParams();
@@ -137,6 +138,23 @@ export default function ChatbotPage() {
     }
   }
 
+  const handleExport = () => {
+    if (!data) return;
+
+    const chats = data.chats.map(chat => ({
+      User: chat.user_query,
+      Response: chat.response,
+    }));
+
+    const dataToExport = {
+        data: chats,
+        fileName: 'chatbot_conversation',
+        exportType: exportFromJSON.types.csv,
+      };
+
+    exportFromJSON(dataToExport); // Use export-from-json to handle the export
+  };
+
   return (
     <div className="flex flex-col border-x-2 border-lighter dark:border-darker max-w-7xl mx-auto rounded-sm dark:bg-dark bg-light dark:text-dark h-screen">
       <div className="flex items-center justify-between m-3">
@@ -172,10 +190,13 @@ export default function ChatbotPage() {
           <DropdownMenuTrigger>
             <Menu />
           </DropdownMenuTrigger>
-          <DropdownMenuContent>
+          <DropdownMenuContent className="mr-8">
             <DropdownMenuItem onClick={() => settingsModal.onOpen()}>
               Settings
             </DropdownMenuItem>
+            <DropdownMenuItem onClick={handleExport}>
+              Export
+            </DropdownMenuItem>
             <DropdownMenuSeparator />
             <DropdownMenuItem
               className="text-destructive hover:text-destructive/90"