More suggestions addressed

ui/src/App.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import { Helmet } from 'react-helmet'
 import Routes from './components/routes/Routes'
-import Messages from './components/messages/Messages'
+import MessagesWithProvider from './components/messages/Messages'
 import { useTranslation } from 'react-i18next'
 import { loadTranslations } from './localization'
 import { useLocation } from 'react-router'
@@ -30,7 +30,7 @@ const App = () => {
         />
       </Helmet>
       <Routes />
-      <Messages />
+      <MessagesWithProvider />
     </>
   )
 }

ui/src/components/messages/Message.tsx

@@ -16,14 +16,16 @@ const Message = forwardRef(
     { onDismiss, header, children, content, negative, positive }: MessageProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
-    let backgroundColor = 'bg-white dark:bg-dark-bg2'
-    if (negative) backgroundColor = 'bg-red-100 dark:bg-red-900'
-    if (positive) backgroundColor = 'bg-green-100 dark:bg-green-900'
+    const backgroundColorClass = negative
+      ? 'bg-red-100 dark:bg-red-900'
+      : positive
+        ? 'bg-green-100 dark:bg-green-900'
+        : 'bg-white dark:bg-dark-bg2'
 
     return (
       <div
         ref={ref}
-        className={`${backgroundColor} shadow-md border rounded p-2 relative`}
+        className={`${backgroundColorClass} shadow-md border rounded p-2 relative`}
       >
         <button type="button" onClick={onDismiss} className="absolute top-3 right-2">
           <DismissIcon className="w-[10px] h-[10px] text-gray-700 dark:text-gray-200" />

ui/src/components/messages/MessageState.tsx

@@ -10,7 +10,7 @@ type MessageContextType = {
 
 const MessageContext = createContext<MessageContextType | undefined>(undefined)
 
-export const useMessageState = () => {
+export const useMessageState = (): MessageContextType => {
   const context = useContext(MessageContext)
   if (context === undefined) {
     throw new Error('useMessageState must be used within a MessageProvider')

ui/src/components/messages/Messages.test.tsx

@@ -4,9 +4,15 @@ import { NotificationType } from '../../__generated__/globalTypes'
 import { MessageProvider } from './MessageState'
 import MessagePlain from './Message'
 import MessageProgress from './MessageProgress'
+import { Message } from './SubscriptionsHook'
+
+interface MockSubscriptionsHookProps {
+  messages: Message[]
+  setMessages: React.Dispatch<React.SetStateAction<Message[]>>
+}
 
 // Define the mock for SubscriptionsHook before using it
-const MockSubscriptionsHook = ({ messages, setMessages }: any) => {
+const MockSubscriptionsHook = ({ messages, setMessages }: MockSubscriptionsHookProps) => {
   return (
     <div>
       <button

ui/src/components/sidebar/SidebarDownloadMedia.tsx

@@ -101,6 +101,7 @@ const downloadMediaShowProgress =
     const totalBytes = Number(response.headers.get('content-length'))
     const reader = response.body?.getReader()
     const data = new Uint8Array(totalBytes)
+    const DOWNLOAD_COMPLETE_NOTIFICATION_DURATION = 2000
 
     if (reader == null) {
       throw new Error('Download reader is null')
@@ -112,7 +113,7 @@ const downloadMediaShowProgress =
       reader.cancel('Download canceled by user')
     }
 
-    const notifyKey = Math.random().toString(26)
+    const notifyKey = `download-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`
     const { add, removeKey } = useMessageState()
 
     add({
@@ -168,7 +169,7 @@ const downloadMediaShowProgress =
 
     setTimeout(() => {
       removeKey(notifyKey)
-    }, 2000)
+    }, DOWNLOAD_COMPLETE_NOTIFICATION_DURATION)
 
     return new Blob([data.buffer], {
       type: response.headers.get('content-type') || 'application/octet-stream',