Merge pull request #355 from lyjeileen/main

fix: send headers for file download

Author: lyjeileen

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@rustic-ai/ui-components",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "keywords": [
     "rustic-ai",
     "conversational-ui"

package.json

@@ -2,15 +2,13 @@ import '../../../index.css'
 import '../multipart/multipart.css'
 
 import Box from '@mui/material/Box'
-import IconButton from '@mui/material/IconButton'
-import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
 import React from 'react'
 
 import FilePreview from '../../filePreview/filePreview'
-import Icon from '../../icon'
 import MarkedMarkdown from '../../markdown'
 import type { ChatCompletionProps, Content } from '../../types'
+import DownloadButton from '../downloadButton'
 
 function getFileName(fileUrl: string): string {
   const url = new URL(fileUrl)
@@ -51,16 +49,11 @@ export default function ChatCompletion(props: ChatCompletionProps) {
             getAuthHeaders={props.getAuthHeaders}
           >
             {file.url && (
-              <Tooltip title="Download" className="rustic-shift-to-right-by-8">
-                <IconButton
-                  component="a"
-                  href={file.url}
-                  download={file.name}
-                  data-cy="download-button"
-                >
-                  <Icon name="download" />
-                </IconButton>
-              </Tooltip>
+              <DownloadButton
+                url={file.url}
+                fileName={file.name}
+                getAuthHeaders={props.getAuthHeaders}
+              />
             )}
           </FilePreview>
         )

src/components/multipart/chatCompletion/chatCompletion.tsx

@@ -0,0 +1,60 @@
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
+import React from 'react'
+
+import Icon from '../icon/icon'
+import type { GetAuthHeaders } from '../types'
+
+type DownloadButtonProps = {
+  url: string
+  fileName: string
+  getAuthHeaders?: GetAuthHeaders
+}
+
+export default function DownloadButton(props: DownloadButtonProps) {
+  function handleAuthenticatedDownload(getHeadersFn: GetAuthHeaders) {
+    getHeadersFn()
+      .then((headersObj) => {
+        return fetch(props.url, { ...headersObj })
+      })
+      .then((response) => {
+        return response.blob()
+      })
+      .then((blob) => {
+        const downloadUrl = window.URL.createObjectURL(blob)
+        const temporaryLink = document.createElement('a')
+        temporaryLink.href = downloadUrl
+        temporaryLink.download = props.fileName
+        document.body.appendChild(temporaryLink)
+        temporaryLink.click()
+
+        document.body.removeChild(temporaryLink)
+        window.URL.revokeObjectURL(downloadUrl)
+      })
+      .catch((error) => {
+        throw new Error('Error downloading file. ' + error.message)
+      })
+  }
+
+  return (
+    <Tooltip title="Download" className="rustic-shift-to-right-by-8">
+      {props.getAuthHeaders ? (
+        <IconButton
+          onClick={() => handleAuthenticatedDownload(props.getAuthHeaders!)}
+          data-cy="download-button"
+        >
+          <Icon name="download" />
+        </IconButton>
+      ) : (
+        <IconButton
+          component="a"
+          href={props.url}
+          download={props.fileName}
+          data-cy="download-button"
+        >
+          <Icon name="download" />
+        </IconButton>
+      )}
+    </Tooltip>
+  )
+}

src/components/multipart/downloadButton.tsx

@@ -1,16 +1,14 @@
 import '../../../index.css'
 import './multipart.css'
 
-import IconButton from '@mui/material/IconButton'
-import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
 import Box from '@mui/system/Box'
 import React from 'react'
 
 import FilePreview from '../../filePreview/filePreview'
-import Icon from '../../icon/icon'
 import MarkedMarkdown from '../../markdown'
 import type { MultipartProps } from '../../types'
+import DownloadButton from '../downloadButton'
 
 /** The `Multipart` component is a versatile message format designed to accommodate both textual content and file attachments within a single message interface. */
 export default function Multipart(props: MultipartProps) {
@@ -24,16 +22,11 @@ export default function Multipart(props: MultipartProps) {
           key={index}
         >
           {file.url && (
-            <Tooltip title="Download" className="rustic-shift-to-right-by-8">
-              <IconButton
-                component="a"
-                href={file.url}
-                download={file.name}
-                data-cy="download-button"
-              >
-                <Icon name="download" />
-              </IconButton>
-            </Tooltip>
+            <DownloadButton
+              url={file.url}
+              fileName={file.name}
+              getAuthHeaders={props.getAuthHeaders}
+            />
           )}
         </FilePreview>
       )