diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index e9d3a699a..705f15de2 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -49,20 +49,24 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 						)}
 						{chat.thought && chat.thought !== "" && !hidden && <br></br>}
 						<div className="w-full px-4 pb-3 pt-3 pr-8">
-							{chat.files ? (
-								<div></div>
-							) : (
-								<span>
-									{chat.message}
+							<span>
+								{chat.message}
+								{chat.files && (
 									<div className="my-2 w-full">
-										<FileCard
-											fileName={"FileType"}
-											fileType={"jpeg"}
-											content={""}
-										/>
+										{chat.files.map((file) => {
+											return (
+												<div className="my-2 w-full">
+													<FileCard
+														fileName={"File"}
+														fileType={file.type}
+														content={file.data}
+													/>
+												</div>
+											);
+										})}
 									</div>
-								</span>
-							)}
+								)}
+							</span>
 						</div>
 					</div>
 				</div>
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index c06ac0e47..a2d148ca0 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -35,14 +35,13 @@ export default function ChatModal({
 		message: string,
 		isSend: boolean,
 		thought?: string,
-		file?:Blob
+		files?: Array<any>
 	) => {
 		setChatHistory((old) => {
 			let newChat = _.cloneDeep(old);
-			if(file){
-				newChat.push({ message, isSend,file });
-			}
-			else if (thought) {
+			if (files) {
+				newChat.push({ message, isSend, files });
+			} else if (thought) {
 				newChat.push({ message, isSend, thought });
 			} else {
 				newChat.push({ message, isSend });
@@ -71,35 +70,51 @@ export default function ChatModal({
 							is_bot: boolean;
 							message: string;
 							type: string;
-							data?:string;
+							files?: Array<any>;
 						}) => {
-							if(chatItem.type==="end"){
-								newChatHistory.push({
-									isSend: !chatItem.is_bot,
-									message: chatItem.message,
-									thought: chatItem.intermediate_steps,
-								});	
+							if (chatItem.message) {
+								newChatHistory.push(
+									chatItem.files
+										? {
+												isSend: !chatItem.is_bot,
+												message: chatItem.message,
+												thought: chatItem.intermediate_steps,
+												files: chatItem.files,
+										  }
+										: {
+												isSend: !chatItem.is_bot,
+												message: chatItem.message,
+												thought: chatItem.intermediate_steps,
+										  }
+								);
 							}
-							newChatHistory.push({
-								isSend: !chatItem.is_bot,
-								message: chatItem.message,
-								thought: chatItem.intermediate_steps,
-							});
 						}
 					);
 					return newChatHistory;
 				});
 			}
 			if (data.type === "end") {
-				addChatHistory(data.message, false, data.intermediate_steps);
-				setLockChat(false)
+				if (data.files) {
+					addChatHistory(
+						data.message,
+						false,
+						data.intermediate_steps,
+						data.files
+					);
+				} else {
+					addChatHistory(data.message, false, data.intermediate_steps);
+				}
+				setLockChat(false);
 			}
-			if (data.type=="file"){
-				console.log(data)
+			if (data.type == "file") {
+				console.log(data);
 			}
 			// Do something with the data received from the WebSocket
 		};
-		newWs.onclose=(e)=>{console.log(e.reason);setLockChat(false)}
+		newWs.onclose = (e) => {
+			console.log(e.code);
+			setLockChat(false);
+		};
 		setWs(newWs);
 
 		return () => {
@@ -107,7 +122,6 @@ export default function ChatModal({
 		};
 	}, []);
 
-
 	async function sendAll(data: sendAllProps) {
 		if (ws) {
 			ws.send(JSON.stringify(data));
@@ -211,8 +225,7 @@ export default function ChatModal({
 	}
 	function clearChat() {
 		setChatHistory([]);
-		ws.send(JSON.stringify({clear_history:true}))
-
+		ws.send(JSON.stringify({ clear_history: true }));
 	}
 
 	const { closePopUp } = useContext(PopUpContext);
diff --git a/src/frontend/src/types/chat/index.ts b/src/frontend/src/types/chat/index.ts
index 0e3fe4ef6..6e388c88a 100644
--- a/src/frontend/src/types/chat/index.ts
+++ b/src/frontend/src/types/chat/index.ts
@@ -6,5 +6,5 @@ export type ChatMessageType = {
 	message: string;
 	isSend: boolean;
 	thought?: string;
-	files?: Array<{content:string,type:string}>;
+	files?: Array<{data:string,type:string}>;
 };