From 7ae1351e4151568657c17a98942b8deb373c1ffa Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 26 Apr 2023 00:14:18 -0300
Subject: [PATCH 1/3] key on map to avoid error on console

---
 src/frontend/src/modals/chatModal/chatInput/index.tsx   | 8 +++-----
 src/frontend/src/modals/chatModal/chatMessage/index.tsx | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index 0af622173..a05ef1ef3 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -24,16 +24,14 @@ export default function ChatInput({
 				}}
 				ref={inputRef}
 				disabled={lockChat}
-				style={{minHeight: "40px", maxHeight: "100px", resize: "none" }}
+				style={{resize: "none" }}
 				value={lockChat ? "Thinking..." : chatValue}
-				onChange={(e) => {
-					inputRef.current.style.height = "auto";
-					inputRef.current.style.height = inputRef.current.scrollHeight + "px";
+				onChange={(e) => {							
 					setChatValue(e.target.value);
 				}}
 				className={classNames(
 					lockChat ? "bg-gray-500 text-white" : "dark:bg-gray-700",
-					"form-input block w-full  custom-scroll rounded-md border-gray-300 dark:border-gray-600  dark:text-white pr-10 sm:text-sm"
+					"form-input block w-full  custom-scroll h-10 rounded-md border-gray-300 dark:border-gray-600  dark:text-white pr-10 sm:text-sm"
 				)}
 				placeholder={"Send a message..."}
 			/>
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 705f15de2..113c14f11 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -53,9 +53,9 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 								{chat.message}
 								{chat.files && (
 									<div className="my-2 w-full">
-										{chat.files.map((file) => {
+										{chat.files.map((file,index) => {
 											return (
-												<div className="my-2 w-full">
+												<div key={index} className="my-2 w-full">
 													<FileCard
 														fileName={"File"}
 														fileType={file.type}

From 395edf5d1786a5b819421f9f1f820812ffb8e865 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 26 Apr 2023 00:41:48 -0300
Subject: [PATCH 2/3] create message to display while chat is empty

---
 src/frontend/src/modals/chatModal/index.tsx | 55 ++++++++++++++-------
 1 file changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index cc054524c..a20095139 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -1,5 +1,9 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { LockClosedIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
+import {
+	ChatBubbleOvalLeftEllipsisIcon,
+	LockClosedIcon,
+	PaperAirplaneIcon,
+} from "@heroicons/react/24/outline";
 import { Fragment, useContext, useEffect, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { FlowType, NodeType } from "../../types/flow";
@@ -49,8 +53,8 @@ export default function ChatModal({
 			return newChat;
 		});
 	};
-	
-	function connectWS(){
+
+	function connectWS() {
 		const newWs = new WebSocket(`ws://127.0.0.1:5003/chat/${flow.id}`);
 		newWs.onopen = () => {
 			console.log("WebSocket connection established!");
@@ -111,30 +115,27 @@ export default function ChatModal({
 					console.log(data);
 				}
 			} catch (error) {
-				setErrorData({title:event.data})
-				if(newWs.readyState===newWs.CLOSED){
-					window.alert(error)
-					
+				setErrorData({ title: event.data });
+				if (newWs.readyState === newWs.CLOSED) {
+					window.alert(error);
 				}
 			}
-
 		};
 		newWs.onclose = (_) => {
-			if(open){
-			setLockChat(false);
-			setTimeout(() => {
-				connectWS()
-			  }, 100);
+			if (open) {
+				setLockChat(false);
+				setTimeout(() => {
+					connectWS();
+				}, 100);
 			}
 		};
 		setWs(newWs);
 
-		return newWs
-
+		return newWs;
 	}
 
 	useEffect(() => {
-		let newWs = connectWS()
+		let newWs = connectWS();
 		return () => {
 			newWs.close();
 		};
@@ -288,9 +289,25 @@ export default function ChatModal({
 									</button>
 								</div>
 								<div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide">
-									{chatHistory.map((c, i) => (
-										<ChatMessage chat={c} key={i} />
-									))}
+									{chatHistory.length > 0 ? (
+										chatHistory.map((c, i) => <ChatMessage chat={c} key={i} />)
+									) : (
+										<div className="flex flex-col h-full text-center justify-center w-full items-center align-middle ">
+											<span>
+												👋  <span className="text-gray-600 text-lg">LangFlow Chat</span>
+											</span>
+											<br />
+											<div className="bg-gray-100 rounded-md w-2/4 px-6 py-8 border border-gray-200">
+												<span className="text-base text-gray-500">
+													Start a conversation and click the agent’s thoughts{" "}
+													<span>
+														<ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
+													</span>{" "}
+													to inspect the chaining process.
+												</span>
+											</div>
+										</div>
+									)}
 									<div ref={ref}></div>
 								</div>
 								<div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">

From 38ec55db7726437309c4a66ecbc7540866aecf9f Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 26 Apr 2023 00:44:24 -0300
Subject: [PATCH 3/3] new file name

---
 src/frontend/src/modals/chatModal/chatMessage/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 113c14f11..48a30cca9 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -57,7 +57,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 											return (
 												<div key={index} className="my-2 w-full">
 													<FileCard
-														fileName={"File"}
+														fileName={"Generated File"}
 														fileType={file.type}
 														content={file.data}
 													/>