From 368db493a4f6033f2b1bd6b25b1cc400b22a5f90 Mon Sep 17 00:00:00 2001
From: Mehul <mehulprajapati2802@gmail.com>
Date: Sun, 3 Nov 2024 13:18:23 -0500
Subject: [PATCH 1/2] Added export button to download conversation as csv

---
 client/src/pages/Chatbot.tsx | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/Chatbot.tsx b/client/src/pages/Chatbot.tsx
index 64dea5f..755f6eb 100644
--- a/client/src/pages/Chatbot.tsx
+++ b/client/src/pages/Chatbot.tsx
@@ -137,6 +137,32 @@ export default function ChatbotPage() {
     }
   }
 
+  const handleExport = () => {
+    if (!data) return;
+
+    const chats = data.chats.map(chat => ({
+      User: chat.user_query,
+      Response: chat.response,
+    }));
+
+    const csvContent = [
+      ["User", "Response"], // header
+      ...chats.map(chat => [chat.User, chat.Response]), // data rows
+    ]
+      .map(e => e.join(",")) // join each row with commas
+      .join("\n"); // join rows with new lines
+
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.setAttribute("href", url);
+    link.setAttribute("download", "chatbot_conversation.csv");
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
   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 +198,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"

From 1b01155a4bc4b758d1dcf06ce96f4a06f21c0b92 Mon Sep 17 00:00:00 2001
From: Mehul <mehulprajapati2802@gmail.com>
Date: Sun, 3 Nov 2024 23:18:09 -0500
Subject: [PATCH 2/2] Using export-from-json package

---
 client/package.json          |  1 +
 client/src/pages/Chatbot.tsx | 22 +++++++---------------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/client/package.json b/client/package.json
index bdddee9..52400cf 100644
--- a/client/package.json
+++ b/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",
diff --git a/client/src/pages/Chatbot.tsx b/client/src/pages/Chatbot.tsx
index 755f6eb..ec4adb8 100644
--- a/client/src/pages/Chatbot.tsx
+++ b/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();
@@ -145,22 +146,13 @@ export default function ChatbotPage() {
       Response: chat.response,
     }));
 
-    const csvContent = [
-      ["User", "Response"], // header
-      ...chats.map(chat => [chat.User, chat.Response]), // data rows
-    ]
-      .map(e => e.join(",")) // join each row with commas
-      .join("\n"); // join rows with new lines
-
-    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-    const url = URL.createObjectURL(blob);
+    const dataToExport = {
+        data: chats,
+        fileName: 'chatbot_conversation',
+        exportType: exportFromJSON.types.csv,
+      };
 
-    const link = document.createElement("a");
-    link.setAttribute("href", url);
-    link.setAttribute("download", "chatbot_conversation.csv");
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+    exportFromJSON(dataToExport); // Use export-from-json to handle the export
   };
 
   return (