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 {
ChatBubbleBottomCenterTextIcon,
PaperAirplaneIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import { useState } from "react";
export default function Chat({}) {
export default function Chat() {
const [open, setOpen] = useState(true);
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
<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="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>
<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 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 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"
<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..."
/>
</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>
</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>
</>
);
}