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

chat opening done

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-14 20:08:16 -03:00
commit 13b16b8b3a
1 changed files with 72 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

108
space_flow/src/components/chatComponent/index.tsx
View file

@ -1,55 +1,91 @@
import { Transition } from "@headlessui/react";
import { import {
ChatBubbleBottomCenterTextIcon, ChatBubbleBottomCenterTextIcon,
PaperAirplaneIcon, PaperAirplaneIcon,
XMarkIcon, XMarkIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { useState } from "react";
export default function Chat({}) { export default function Chat() {
const [open, setOpen] = useState(true);
return ( return (
<> <>
<div className="w-[400px] absolute bottom-0 right-6"> <Transition
<div className="border h-full rounded-xl rounded-b-none bg-white shadow"> show={open}
<div className="flex justify-between items-center px-5 py-3 border-b"> appear={true}
<div className="flex gap-3 text-xl font-medium items-center"> enter='transition ease-out duration-300'
<ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1 text-blue-600" /> enterFrom='translate-y-96'
Chat enterTo='translate-y-0'
leave='transition ease-in duration-300'
leaveFrom='translate-y-0'
leaveTo='translate-y-96'
>
<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>
<button onClick={() => {setOpen(false)}}>
<XMarkIcon className="h-6 w-6 text-gray-600" />
</button>
</div> </div>
<XMarkIcon className="h-6 w-6 text-gray-600" /> <div className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto flex-col bg-gray-50 p-3 py-5">
</div> <div className="w-full text-start">
<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="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">
<div className="w-full text-start"> Lorem Ipsum is simply dummy text of the printing and
<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"> typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting </div>
industry. </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> </div>
<div className="w-full text-end"> <div className="w-full bg-white border-t flex items-center justify-between p-3">
<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"> <div className="relative w-full mt-1 rounded-md shadow-sm">
Lorem Ipsum has been the industry's standard dummy text ever <input
since the 1500s type="text"
</div> className="form-input block w-full rounded-md border-gray-300 pr-10 sm:text-sm"
</div> placeholder="Send a message..."
</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 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>
</div> </div>
</div> </div>
</div> </Transition>
<Transition
show={!open}
appear={true}
enter='transition ease-out duration-300'
enterFrom='translate-y-96'
enterTo='translate-y-0'
leave='transition ease-in duration-300'
leaveFrom='translate-y-0'
leaveTo='translate-y-96'
>
<div className="absolute bottom-0 right-6">
<div className="border flex justify-center align-center py-2 px-4 rounded-xl rounded-b-none bg-white shadow">
<button onClick={()=>{setOpen(true)}}>
<div className="flex gap-3 text-lg font-medium items-center">
<ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1 text-blue-600" />
Chat
</div>
</button>
</div>
</div>
</Transition>
</> </>
); );
} }