added the conversation download button (#800)

Author: kartikpersistent

frontend/src/components/ChatBot/Chatbot.tsx

@@ -37,7 +37,7 @@ import { buttonCaptions, chatModeLables } from '../../utils/Constants';
 import useSpeechSynthesis from '../../hooks/useSpeech';
 import ButtonWithToolTip from '../UI/ButtonWithToolTip';
 import FallBackDialog from '../UI/FallBackDialog';
-import { getDateTime } from '../../utils/Utils';
+import { downloadClickHandler, getDateTime } from '../../utils/Utils';
 import ChatModesSwitch from './ChatModesSwitch';
 import CommonActions from './CommonChatActions';
 const InfoModal = lazy(() => import('./ChatInfoModal'));
@@ -407,15 +407,6 @@ const Chatbot: FC<ChatbotProps> = (props) => {
     }
   }, []);
 
-  const downloadClickHandler = useCallback(function downloadClickHandler<Type>(JsonData: Type) {
-    const textFile = new Blob([JSON.stringify(JsonData)], { type: 'application/json' });
-    if (downloadLinkRef && downloadLinkRef.current) {
-      downloadLinkRef.current.href = URL.createObjectURL(textFile);
-      downloadLinkRef.current.download = 'graph-builder-chat-details.json';
-      downloadLinkRef.current.click();
-    }
-  }, []);
-
   return (
     <div className='n-bg-palette-neutral-bg-weak flex flex-col justify-between min-h-full max-h-full overflow-hidden'>
       <div className='flex overflow-y-auto pb-12 min-w-full chatBotContainer pl-3 pr-3'>
@@ -590,17 +581,21 @@ const Chatbot: FC<ChatbotProps> = (props) => {
               clean
               disabled={metricsLoading || infoLoading}
               onClick={() => {
-                downloadClickHandler({
-                  chatResponse: activeChat,
-                  chunks,
-                  metricDetails,
-                  communities,
-                  responseTime,
-                  entities: infoEntities,
-                  nodes,
-                  tokensUsed,
-                  model,
-                });
+                downloadClickHandler(
+                  {
+                    chatResponse: activeChat,
+                    chunks,
+                    metricDetails,
+                    communities,
+                    responseTime,
+                    entities: infoEntities,
+                    nodes,
+                    tokensUsed,
+                    model,
+                  },
+                  downloadLinkRef,
+                  'graph-builder-chat-details.json'
+                );
               }}
             >
               <ArrowDownTrayIconOutline />

frontend/src/components/Layout/SideNav.tsx

@@ -1,18 +1,19 @@
-import React, { useEffect, useState } from 'react';
-import { Dialog, SideNavigation, Tip, useMediaQuery } from '@neo4j-ndl/react';
+import React, { useEffect, useRef, useState } from 'react';
+import { Dialog, SideNavigation, TextLink, Tip, useMediaQuery } from '@neo4j-ndl/react';
 import {
   ArrowRightIconOutline,
   ArrowLeftIconOutline,
   TrashIconOutline,
   ArrowsPointingOutIconOutline,
   ChatBubbleOvalLeftEllipsisIconOutline,
   CloudArrowUpIconSolid,
+  ArrowDownTrayIconOutline,
 } from '@neo4j-ndl/react/icons';
 import { SideNavProps } from '../../types';
 import Chatbot from '../ChatBot/Chatbot';
 import { createPortal } from 'react-dom';
 import { useMessageContext } from '../../context/UserMessages';
-import { getIsLoading } from '../../utils/Utils';
+import { downloadClickHandler, getIsLoading } from '../../utils/Utils';
 import ExpandedChatButtonContainer from '../ChatBot/ExpandedChatButtonContainer';
 import { APP_SOURCES, tooltips } from '../../utils/Constants';
 import ChatModeToggle from '../ChatBot/ChatModeToggle';
@@ -46,6 +47,7 @@ const SideNav: React.FC<SideNavProps> = ({
   const [showChatMode, setshowChatMode] = useState<boolean>(false);
   const largedesktops = useMediaQuery(`(min-width:1440px )`);
   const { connectionStatus, isReadOnlyUser } = useCredentials();
+  const downloadLinkRef = useRef<HTMLAnchorElement>(null);
 
   const date = new Date();
   useEffect(() => {
@@ -93,6 +95,7 @@ const SideNav: React.FC<SideNavProps> = ({
       toggleDrawer();
     }
   };
+
   return (
     <div style={{ height: 'calc(100vh - 58px)', minHeight: '200px', display: 'flex' }}>
       <SideNavigation iconMenu={true} expanded={false} position={position}>
@@ -189,6 +192,30 @@ const SideNav: React.FC<SideNavProps> = ({
                   }
                 />
               </Tip>
+              <Tip allowedPlacements={['left']}>
+                <SideNavigation.Item
+                  onClick={() => {
+                    downloadClickHandler(
+                      { conversation: messages },
+                      downloadLinkRef,
+                      'graph-builder-conversation.json'
+                    );
+                  }}
+                  icon={
+                    <>
+                      <Tip.Trigger>
+                        <ArrowDownTrayIconOutline className='n-size-token-7' />
+                      </Tip.Trigger>
+                      <Tip.Content>
+                        Download Conversation
+                        <TextLink ref={downloadLinkRef} className='!hidden'>
+                          ""
+                        </TextLink>
+                      </Tip.Content>
+                    </>
+                  }
+                />
+              </Tip>
               {!isChatModalOpen && (
                 <SideNavigation.Item
                   onClick={(e) => {

frontend/src/utils/Utils.ts

@@ -498,3 +498,15 @@ export const graphTypeFromNodes = (allNodes: ExtendedNode[]) => {
   }
   return graphType;
 };
+export function downloadClickHandler<Type>(
+  JsonData: Type,
+  downloadLinkRef: React.RefObject<HTMLAnchorElement>,
+  filename: string
+) {
+  const textFile = new Blob([JSON.stringify(JsonData)], { type: 'application/json' });
+  if (downloadLinkRef && downloadLinkRef.current) {
+    downloadLinkRef.current.href = URL.createObjectURL(textFile);
+    downloadLinkRef.current.download = filename;
+    downloadLinkRef.current.click();
+  }
+}