(fix) type error, ui adjust

frontend/src/assets/alert.svg

@@ -1,3 +1,3 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.16669 11.5H9.83335V13.1666H8.16669V11.5ZM8.16669 4.83329H9.83335V9.83329H8.16669V4.83329ZM8.99169 0.666626C4.39169 0.666626 0.666687 4.39996 0.666687 8.99996C0.666687 13.6 4.39169 17.3333 8.99169 17.3333C13.6 17.3333 17.3334 13.6 17.3334 8.99996C17.3334 4.39996 13.6 0.666626 8.99169 0.666626ZM9.00002 15.6666C5.31669 15.6666 2.33335 12.6833 2.33335 8.99996C2.33335 5.31663 5.31669 2.33329 9.00002 2.33329C12.6834 2.33329 15.6667 5.31663 15.6667 8.99996C15.6667 12.6833 12.6834 15.6666 9.00002 15.6666Z" fill="#F44336"/>
+<path d="M8.16669 11.5H9.83335V13.1666H8.16669V11.5ZM8.16669 4.83329H9.83335V9.83329H8.16669V4.83329ZM8.99169 0.666626C4.39169 0.666626 0.666687 4.39996 0.666687 8.99996C0.666687 13.6 4.39169 17.3333 8.99169 17.3333C13.6 17.3333 17.3334 13.6 17.3334 8.99996C17.3334 4.39996 13.6 0.666626 8.99169 0.666626ZM9.00002 15.6666C5.31669 15.6666 2.33335 12.6833 2.33335 8.99996C2.33335 5.31663 5.31669 2.33329 9.00002 2.33329C12.6834 2.33329 15.6667 5.31663 15.6667 8.99996C15.6667 12.6833 12.6834 15.6666 9.00002 15.6666Z" fill="#ECECF1"/>
 </svg>

frontend/src/components/MessageInput.tsx

@@ -263,7 +263,7 @@ export default function MessageInput({
           {attachments.map((attachment, index) => (
             <div
               key={index}
-              className={`group relative flex items-center rounded-[24px] bg-[#EFF3F4] px-2 py-1 text-[12px] text-[#5D5D5D] dark:bg-[#393B3D] dark:text-bright-gray sm:px-3 sm:py-1.5 sm:text-[14px] ${
+              className={`group relative flex items-center rounded-xl bg-[#EFF3F4] px-2 py-1 text-[12px] text-[#5D5D5D] dark:bg-[#393B3D] dark:text-bright-gray sm:px-3 sm:py-1.5 sm:text-[14px] ${
                 attachment.status !== 'completed' ? 'opacity-70' : 'opacity-100'
               }`}
               title={attachment.fileName}
@@ -280,13 +280,8 @@ export default function MessageInput({
                 {attachment.status === 'failed' && (
                   <img
                     src={AlertIcon}
-                    alt="Upload failed"
+                    alt="Failed"
                     className="h-[15px] w-[15px] object-fill"
-                    style={{
-                      filter:
-                        'invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%)',
-                    }}
-                    title="Upload failed"
                   />
                 )}
 

frontend/src/conversation/ConversationBubble.tsx

@@ -107,13 +107,15 @@ const ConversationBubble = forwardRef<
       <div
         onMouseEnter={() => setIsQuestionHovered(true)}
         onMouseLeave={() => setIsQuestionHovered(false)}
+        className={className}
       >
         <div className="flex flex-col items-end">
           {filesAttached && filesAttached.length > 0 && (
-            <div className="mb-2 mr-12 flex flex-wrap justify-end gap-2">
+            <div className="mb-4 mr-12 flex flex-wrap justify-end gap-2">
               {filesAttached.map((file, index) => (
                 <div
                   key={index}
+                  title={file.fileName}
                   className="flex items-center rounded-xl bg-[#EFF3F4] p-2 text-[14px] text-[#5D5D5D] dark:bg-[#393B3D] dark:text-bright-gray"
                 >
                   <div className="mr-2 items-center justify-center rounded-lg bg-purple-30 p-[5.5px]">
@@ -132,7 +134,7 @@ const ConversationBubble = forwardRef<
           )}
           <div
             ref={ref}
-            className={`flex flex-row-reverse justify-items-start ${className}`}
+            className={`flex flex-row-reverse justify-items-start`}
           >
             <Avatar
               size="SMALL"

frontend/src/conversation/conversationHandlers.ts

@@ -279,12 +279,12 @@ export function handleSendFeedback(
     });
 }
 
-export function handleFetchSharedAnswerStreaming( //for shared conversations
+export function handleFetchSharedAnswerStreaming(
   question: string,
   signal: AbortSignal,
   apiKey: string,
   history: Array<any> = [],
-  attachments: string[] = [], // Add attachments parameter with default empty array
+  attachments: string[] = [],
   onEvent: (event: MessageEvent) => void,
 ): Promise<Answer> {
   history = history.map((item) => {
@@ -301,7 +301,7 @@ export function handleFetchSharedAnswerStreaming( //for shared conversations
       history: JSON.stringify(history),
       api_key: apiKey,
       save_conversation: false,
-      attachments: attachments.length > 0 ? attachments : undefined, // Add attachments to payload
+      attachments: attachments.length > 0 ? attachments : undefined,
     };
     conversationService
       .answerStream(payload, null, signal)
@@ -376,13 +376,10 @@ export function handleFetchSharedAnswer(
   const payload = {
     question: question,
     api_key: apiKey,
+    attachments:
+      attachments && attachments.length > 0 ? attachments : undefined,
   };
 
-  // Add attachments to payload if they exist
-  if (attachments && attachments.length > 0) {
-    payload.attachments = attachments;
-  }
-
   return conversationService
     .answer(payload, null, signal)
     .then((response) => {