file download working

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}
+								{chat.files && (
+									<div className="my-2 w-full">
+										{chat.files.map((file) => {
+											return (
 												<div className="my-2 w-full">
 													<FileCard
-											fileName={"FileType"}
+														fileName={"File"}
-											fileType={"jpeg"}
+														fileType={file.type}
-											content={""}
+														content={file.data}
 													/>
 												</div>
-								</span>
+											);
+										})}
+									</div>
 								)}
+							</span>
 						</div>
 					</div>
 				</div>

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){
+			if (files) {
-				newChat.push({ message, isSend,file });
+				newChat.push({ message, isSend, files });
-			}
+			} else if (thought) {
-			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"){
+							if (chatItem.message) {
-								newChatHistory.push({
+								newChatHistory.push(
+									chatItem.files
+										? {
 												isSend: !chatItem.is_bot,
 												message: chatItem.message,
 												thought: chatItem.intermediate_steps,
-								});	
+												files: chatItem.files,
 										  }
-							newChatHistory.push({
+										: {
 												isSend: !chatItem.is_bot,
 												message: chatItem.message,
 												thought: chatItem.intermediate_steps,
-							});
+										  }
+								);
+							}
 						}
 					);
 					return newChatHistory;
 				});
 			}
 			if (data.type === "end") {
+				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"){
+				setLockChat(false);
-				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);

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}>;
 };