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

clean chat area

Browse source
This commit is contained in:
anovazzi1 2023-04-24 20:03:05 -03:00
commit 8ed1ea92d4
4 changed files with 72 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -38,7 +38,7 @@ export default function GenericNode({
<div <div
className={classNames( className={classNames(
selected ? "border border-blue-500" : "border dark:border-gray-700", selected ? "border border-blue-500" : "border dark:border-gray-700",
"prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center" "prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center drop-shadow-[0_10px_10px_rgba(0,0,0,0.25)]"
)} )}
> >
<div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 "> <div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">

16
src/frontend/src/components/chatComponent/chatTrigger/index.tsx
View file

@ -1,8 +1,12 @@
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { Bars3CenterLeftIcon } from "@heroicons/react/24/outline"; import { Bars3CenterLeftIcon, ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
import { nodeColors } from "../../../utils"; import { nodeColors } from "../../../utils";
import { PopUpContext } from "../../../contexts/popUpContext";
import { useContext } from "react";
import ChatModal from "../../../modals/chatModal";
export default function ChatTrigger({open, setOpen}){ export default function ChatTrigger({open, setOpen}){
const {openPopUp} = useContext(PopUpContext)
return(<Transition return(<Transition
show={!open} show={!open}
appear={true} appear={true}
@ -13,19 +17,19 @@ export default function ChatTrigger({open, setOpen}){
leaveFrom="translate-y-0" leaveFrom="translate-y-0"
leaveTo="translate-y-96" leaveTo="translate-y-96"
> >
<div className="absolute bottom-0 right-1"> <div className="absolute bottom-2 right-3">
<div className="border flex justify-center align-center py-1 px-3 rounded-xl rounded-b-none bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-white shadow"> <div style={{backgroundColor:nodeColors['chat']}} className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full dark:bg-gray-800 dark:border-gray-600 dark:text-white">
<button <button
onClick={() => { onClick={() => {
setOpen(true); setOpen(true);
openPopUp(<ChatModal/>)
}} }}
> >
<div className="flex gap-3 items-center"> <div className="flex gap-3 items-center">
<Bars3CenterLeftIcon <ChatBubbleBottomCenterTextIcon
className="h-6 w-6 mt-1" className="h-6 w-6 mt-1"
style={{ color: nodeColors["chat"] }} style={{ color: "white" }}
/> />
Chat
</div> </div>
</button> </button>
</div> </div>

157
src/frontend/src/modals/chatModal/index.tsx
View file

@ -1,102 +1,65 @@
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { XMarkIcon, ClipboardDocumentListIcon } from "@heroicons/react/24/outline"; import {
XMarkIcon,
ClipboardDocumentListIcon,
} from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react"; import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
export default function TextAreaModal(){ export default function ChatModal() {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
function setModalOpen(x:boolean){ function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if(x === false){ if (x === false) {
setTimeout(() => {closePopUp()}, 300); setTimeout(() => {
} closePopUp();
} }, 300);
return ( }
<Transition.Root show={open} appear={true} as={Fragment}> }
<Dialog return (
as="div" <Transition.Root show={open} appear={true} as={Fragment}>
className="relative z-10" <Dialog
onClose={setModalOpen} as="div"
initialFocus={ref} className="relative z-10"
> onClose={setModalOpen}
<Transition.Child initialFocus={ref}
as={Fragment} >
enter="ease-out duration-300" <Transition.Child
enterFrom="opacity-0" as={Fragment}
enterTo="opacity-100" enter="ease-out duration-300"
leave="ease-in duration-200" enterFrom="opacity-0"
leaveFrom="opacity-100" enterTo="opacity-100"
leaveTo="opacity-0" leave="ease-in duration-200"
> leaveFrom="opacity-100"
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" /> leaveTo="opacity-0"
</Transition.Child> >
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100" enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]"> <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block"> <div className="h-full w-full flex flex-col justify-center items-center">
<button <div className="h-full w-full bg-white dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
type="button" </div>
className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" <div>input area</div>
onClick={() => { </div>
setModalOpen(false); </Dialog.Panel>
}} </Transition.Child>
> </div>
<span className="sr-only">Close</span> </div>
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> </Dialog>
</button> </Transition.Root>
</div> );
<div className="h-full w-full flex flex-col justify-center items-center"> }
<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
<ClipboardDocumentListIcon
className="h-6 w-6 text-blue-600"
aria-hidden="true"
/>
</div>
<div className="mt-4 text-center sm:ml-4 sm:text-left">
<Dialog.Title
as="h3"
className="text-lg font-medium dark:text-white leading-10 text-gray-900"
>
Edit text
</Dialog.Title>
</div>
</div>
<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
<div className="flex h-full w-full">
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
</div>
</div>
</div>
<div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
<button
type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => {
setModalOpen(false);
}}
>
Finish editing
</button>
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
)
}

2
src/frontend/src/utils.ts
View file

@ -78,7 +78,7 @@ export const nodeColors: {[char: string]: string} = {
tools: "#FF3434", tools: "#FF3434",
memories: "#F5B85A", memories: "#F5B85A",
advanced: "#000000", advanced: "#000000",
chat: "#454173", chat: "#198BF6",
thought:"#272541", thought:"#272541",
embeddings:"#42BAA7", embeddings:"#42BAA7",
documentloaders:"#7AAE42", documentloaders:"#7AAE42",