From 6b0fbdb4b6c37607053685731120f0e16c328e2a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 14 Feb 2023 16:32:12 -0300
Subject: [PATCH] Chat UI done

---
 .../src/components/chatComponent/index.tsx    | 55 +++++++++++++++++++
 space_flow/src/pages/FlowPage/index.tsx       |  2 +
 2 files changed, 57 insertions(+)
 create mode 100644 space_flow/src/components/chatComponent/index.tsx

diff --git a/space_flow/src/components/chatComponent/index.tsx b/space_flow/src/components/chatComponent/index.tsx
new file mode 100644
index 000000000..53ee857f7
--- /dev/null
+++ b/space_flow/src/components/chatComponent/index.tsx
@@ -0,0 +1,55 @@
+import {
+  ChatBubbleBottomCenterTextIcon,
+  PaperAirplaneIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+
+export default function Chat({}) {
+  return (
+    <>
+      <div className="w-[400px] absolute bottom-0 right-6">
+        <div className="border h-full rounded-xl rounded-b-none bg-white shadow">
+          <div className="flex justify-between items-center px-5 py-3 border-b">
+            <div className="flex gap-3 text-xl font-medium items-center">
+              <ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1 text-blue-600" />
+              Chat
+            </div>
+            <XMarkIcon className="h-6 w-6 text-gray-600" />
+          </div>
+          <div className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto flex-col bg-gray-50 p-3 py-5">
+            <div className="w-full text-start">
+              <div className="text-start inline-block bg-gray-200 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tl-none">
+                Lorem Ipsum is simply dummy text of the printing and typesetting
+                industry.
+              </div>
+            </div>
+            <div className="w-full text-end">
+              <div className="text-start inline-block bg-blue-600 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tr-none">
+                Lorem Ipsum has been the industry's standard dummy text ever
+                since the 1500s
+              </div>
+            </div>
+          </div>
+          <div className="w-full bg-white border-t flex items-center justify-between p-3">
+            <div className="relative w-full mt-1 rounded-md shadow-sm">
+              <input
+                type="text"
+                className="form-input block w-full rounded-md border-gray-300 pr-10 sm:text-sm"
+                placeholder="Send a message..."
+              />
+              <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+                <button>
+                <PaperAirplaneIcon
+                  className="h-5 w-5 text-gray-400 hover:text-gray-600"
+                  aria-hidden="true"
+                />
+                </button>
+                
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx
index 00832f384..0b0a7a783 100644
--- a/space_flow/src/pages/FlowPage/index.tsx
+++ b/space_flow/src/pages/FlowPage/index.tsx
@@ -14,6 +14,7 @@ import AgentNode from "../../CustomNodes/AgentNode";
 import ChainNode from "../../CustomNodes/ChainNode";
 import ValidatorNode from "../../CustomNodes/ValidatorNode";
 import MemoryNode from "../../CustomNodes/MemoryNode";
+import Chat from "../../components/chatComponent";
 
 const nodeTypes = {
   promptNode: PromptNode,
@@ -99,6 +100,7 @@ export default function FlowPage() {
         <Background />
         <Controls></Controls>
       </ReactFlow>
+      <Chat />
     </div>
   );
 }