file card ready

src/frontend/src/modals/chatModal/chatMessage/index.tsx

@@ -1,11 +1,10 @@
-import {
-	ChatBubbleOvalLeftEllipsisIcon,
-} from "@heroicons/react/24/outline";
+import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
 import { useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils";
-import AiIcon from  "../../../assets/Gooey Ring-5s-271px.svg"
+import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
 import { UserIcon } from "@heroicons/react/24/solid";
+import FileCard from "../fileComponent";
 var Convert = require("ansi-to-html");
 var convert = new Convert({ newline: true });
 
@@ -20,17 +19,16 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 		>
 			<div
 				className={classNames(
-					"rounded-full w-9 h-9 flex items-center my-3 justify-center",chat.isSend?"bg-gray-200":"bg-gray-200"
+					"rounded-full w-9 h-9 flex items-center my-3 justify-center",
+					chat.isSend ? "bg-gray-200" : "bg-gray-200"
 				)}
 			>
-				{!chat.isSend && <img className="scale-150" src={AiIcon}/>}
-				{chat.isSend && <UserIcon/>}
+				{!chat.isSend && <img className="scale-150" src={AiIcon} />}
+				{chat.isSend && <UserIcon />}
 			</div>
 			{!chat.isSend ? (
 				<div className="w-full text-start flex items-center">
-					<div
-						className=" relative text-start inline-block text-gray-600 text-sm font-normal"
-					>
+					<div className=" relative text-start inline-block text-gray-600 text-sm font-normal">
 						{hidden && chat.thought && chat.thought !== "" && (
 							<div
 								onClick={() => setHidden((prev) => !prev)}
@@ -42,17 +40,29 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 						{chat.thought && chat.thought !== "" && !hidden && (
 							<div
 								onClick={() => setHidden((prev) => !prev)}
-								className=" text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
+								className=" text-start inline-block rounded-md  h-full
+								bg-white w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
 								dangerouslySetInnerHTML={{
 									__html: convert.toHtml(chat.thought),
 								}}
 							></div>
 						)}
 						{chat.thought && chat.thought !== "" && !hidden && <br></br>}
-						<div
-							className="w-full rounded-b-md px-4 pb-3 pt-3 pr-8"
-						>
-							{chat.message}
+						<div className="w-full px-4 pb-3 pt-3 pr-8">
+							{chat.file ? (
+								<div></div>
+							) : (
+								<span>
+									{chat.message}
+									<div className="my-2 w-full">
+										<FileCard
+											fileName={"FileType"}
+											fileType={"jpeg"}
+											content={""}
+										/>
+									</div>
+								</span>
+							)}
 						</div>
 					</div>
 				</div>

src/frontend/src/modals/chatModal/fileComponent/index.tsx

@@ -0,0 +1,34 @@
+import { ArrowDownTrayIcon, CloudArrowDownIcon, DocumentIcon } from "@heroicons/react/24/outline";
+
+export default function FileCard({ fileName, content, fileType }) {
+	const handleDownload = () => {
+		const blob = new Blob([content], { type: "application/octet-stream" });
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = fileName;
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+		URL.revokeObjectURL(url);
+	};
+
+	return (
+		<button
+			onClick={handleDownload}
+			className="bg-gray-100 shadow rounded w-1/2 text-gray-700 hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-gray-300"
+		>
+			<div className="flex gap-2 text-current items-center w-full mr-2">
+				{" "}
+				<DocumentIcon className="w-8 h-8" />
+				<div className="flex flex-col items-start">
+					{" "}
+					<div className="truncate text-sm text-current">{fileName}</div>
+                    <div className="truncate text-xs  text-gray-500">{fileType}</div>
+
+				</div>
+				<CloudArrowDownIcon className="w-6 h-6 text-current ml-auto" />
+			</div>
+		</button>
+	);
+}

src/frontend/src/modals/chatModal/index.tsx

@@ -34,11 +34,15 @@ export default function ChatModal({
 	const addChatHistory = (
 		message: string,
 		isSend: boolean,
-		thought?: string
+		thought?: string,
+		file?:Blob
 	) => {
 		setChatHistory((old) => {
 			let newChat = _.cloneDeep(old);
-			if (thought) {
+			if(file){
+				newChat.push({ message, isSend,file });
+			}
+			else if (thought) {
 				newChat.push({ message, isSend, thought });
 			} else {
 				newChat.push({ message, isSend });
@@ -82,8 +86,11 @@ export default function ChatModal({
 				addChatHistory(data.message, false, data.intermediate_steps);
 				setLockChat(false)
 			}
+			if (data.type=="file"){
+			}
 			// Do something with the data received from the WebSocket
 		};
+		newWs.onclose=(e)=>{console.log(e.reason)}
 		setWs(newWs);
 
 		return () => {

src/frontend/src/types/chat/index.ts

@@ -2,4 +2,4 @@ import { ReactFlowInstance } from 'reactflow';
 import { FlowType } from "../flow";
 
 export type ChatType = {flow:FlowType,reactFlowInstance:ReactFlowInstance}
-export type ChatMessageType = { message: string; isSend: boolean, thought?:string }
+export type ChatMessageType = { message: string; isSend: boolean, thought?:string,file?:Blob }