Add download link in document library UI

lib/user-interface/react/src/components/document-library/DocumentLibraryComponent.tsx

@@ -15,7 +15,7 @@
  */
 
 import * as React from 'react';
-import { ReactElement } from 'react';
+import { ReactElement, useState } from 'react';
 import {
     ButtonDropdownProps,
     CollectionPreferences,
@@ -24,7 +24,11 @@ import {
     TextFilter,
 } from '@cloudscape-design/components';
 import SpaceBetween from '@cloudscape-design/components/space-between';
-import { useDeleteRagDocumentsMutation, useListRagDocumentsQuery } from '../../shared/reducers/rag.reducer';
+import {
+    useDeleteRagDocumentsMutation,
+    useLazyDownloadRagDocumentQuery,
+    useListRagDocumentsQuery,
+} from '../../shared/reducers/rag.reducer';
 import Table from '@cloudscape-design/components/table';
 import ButtonDropdown from '@cloudscape-design/components/button-dropdown';
 import { DEFAULT_PREFERENCES, PAGE_SIZE_OPTIONS, TABLE_DEFINITION, TABLE_PREFERENCES } from './DocumentLibraryConfig';
@@ -35,6 +39,7 @@ import { selectCurrentUserIsAdmin, selectCurrentUsername } from '../../shared/re
 import { RagDocument } from '../types';
 import { setConfirmationModal } from '../../shared/reducers/modal.reducer';
 import { useLocalStorage } from '../../shared/hooks/use-local-storage';
+import { downloadFile } from '../../shared/util/downloader';
 
 type DocumentLibraryComponentProps = {
     repositoryId?: string;
@@ -54,9 +59,8 @@ function disabledDeleteReason (selectedItems: ReadonlyArray<RagDocument>) {
 
 export function DocumentLibraryComponent ({ repositoryId }: DocumentLibraryComponentProps): ReactElement {
     const { data: allDocs, isFetching } = useListRagDocumentsQuery({ repositoryId }, { refetchOnMountOrArgChange: 5 });
-    const [deleteMutation, {
-        isLoading: isDeleteLoading,
-    }] = useDeleteRagDocumentsMutation();
+    const [deleteMutation, { isLoading: isDeleteLoading }] = useDeleteRagDocumentsMutation();
+
     const currentUser = useAppSelector(selectCurrentUsername);
     const isAdmin = useAppSelector(selectCurrentUserIsAdmin);
     const [preferences, setPreferences] = useLocalStorage('DocumentRagPreferences', DEFAULT_PREFERENCES);
@@ -84,13 +88,19 @@ export function DocumentLibraryComponent ({ repositoryId }: DocumentLibraryCompo
             selection: { trackBy: 'document_id' },
         },
     );
-
+    const [isDownloading, setIsDownloading] = useState<boolean>(false);
+    const [getDownloadUrl] = useLazyDownloadRagDocumentQuery();
     const actionItems: ButtonDropdownProps.Item[] = [
         {
             id: 'rm',
             text: 'Delete',
             disabled: !canDeleteAll(collectionProps.selectedItems, currentUser, isAdmin),
             disabledReason: disabledDeleteReason(collectionProps.selectedItems),
+        }, {
+            id: 'download',
+            text: 'Download',
+            disabled: collectionProps.selectedItems.length > 1,
+            disabledReason: 'Only one file can be downloaded at a time',
         },
     ];
     const handleAction = async (e: any) => {
@@ -109,6 +119,14 @@ export function DocumentLibraryComponent ({ repositoryId }: DocumentLibraryCompo
                 );
                 break;
             }
+            case 'download': {
+                setIsDownloading(true);
+                getDownloadUrl({ documentId: collectionProps.selectedItems[0].document_id, repositoryId })
+                    .then((resp) => downloadFile(resp.data, collectionProps.selectedItems[0].document_name))
+                    .catch((err) => console.error(err))
+                    .finally(() => setIsDownloading(false));
+                break;
+            }
             default:
                 console.error('Action not implemented', e.detail.id);
         }
@@ -150,8 +168,9 @@ export function DocumentLibraryComponent ({ repositoryId }: DocumentLibraryCompo
                         >
                             <ButtonDropdown
                                 items={actionItems}
-                                loading={isDeleteLoading}
-                                onItemClick={(e) => handleAction(e)}
+                                loading={isDeleteLoading || isDownloading}
+                                disabled={collectionProps.selectedItems.length === 0}
+                                onItemClick={async (e) => handleAction(e)}
                             >
                                 Actions
                             </ButtonDropdown>

lib/user-interface/react/src/pages/Home.tsx

@@ -58,8 +58,8 @@ export function Home ({ setNav }) {
             }
         >
             {visible && <Alert type='error'>You must sign in to access this page!</Alert>}
-            <Box float='center'>
-                <div align='center'>
+            <Box>
+                <div>
                     <figure>
                         <img
                             src={chatImg}

lib/user-interface/react/src/shared/reducers/rag.reducer.ts

@@ -135,6 +135,12 @@ export const ragApi = createApi({
             },
             invalidatesTags: ['Docs'],
         }),
+        downloadRagDocument: builder.query<string, { documentId: string, repositoryId: string }>({
+            query: ({ documentId, repositoryId }) => ({
+                url: `/repository/${repositoryId}/${documentId}/download`,
+                method: 'GET',
+            }),
+        }),
     }),
 });
 
@@ -145,5 +151,6 @@ export const {
     useIngestDocumentsMutation,
     useListRagDocumentsQuery,
     useDeleteRagDocumentsMutation,
-    useLazyGetRelevantDocumentsQuery
+    useLazyGetRelevantDocumentsQuery,
+    useLazyDownloadRagDocumentQuery,
 } = ragApi;

lib/user-interface/react/src/shared/util/downloader.ts

@@ -0,0 +1,31 @@
+/**
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+/**
+ * Download a file using hidden link
+ * @param url
+ * @param filename
+ */
+export function downloadFile (url: string, filename: string) {
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename || 'download';
+    link.hidden = true;
+
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}