jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Chat UI done

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-14 16:32:12 -03:00
commit 6b0fbdb4b6
2 changed files with 57 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

55
space_flow/src/components/chatComponent/index.tsx Normal file
View file

@ -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>
</>
);
}

2
space_flow/src/pages/FlowPage/index.tsx
View file

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