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

chat lock ready

Browse source
This commit is contained in:
anovazzi1 2023-03-06 20:51:52 -03:00
commit 8e10659b25
6 changed files with 43 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

1
langflow/frontend/src/App.tsx
View file

@ -8,7 +8,6 @@ import SuccessAlert from "./alerts/success";
import ExtraSidebar from "./components/ExtraSidebarComponent";
import { alertContext } from "./contexts/alertContext";
import { locationContext } from "./contexts/locationContext";
import Header from "./components/HeaderComponent";
import TabsManagerComponent from "./pages/FlowPage/components/tabsManagerComponent";
export default function App() {

4
langflow/frontend/src/alerts/alertDropDown/index.tsx
View file

@ -25,13 +25,13 @@ export default function AlertDropdown({}: AlertDropdownType) {
Notifications
<div className="flex gap-3 pr-2 ">
<button
className="hover:text-black"
className="hover:text-red-500"
onClick={() => {closePopUp(); setTimeout(clearNotificationList, 100)}}
>
<TrashIcon className="w-5 h-5" />
</button>
<button
className="hover:text-black"
className="hover:text-red-500"
onClick={closePopUp}
>
<XMarkIcon className="h-6 w-6" />

53
langflow/frontend/src/components/HeaderComponent/index.tsx
View file

@ -1,53 +0,0 @@
import { useContext, useState } from 'react'
import {
BellIcon,
MoonIcon,
SunIcon,
} from '@heroicons/react/24/outline'
import { alertContext } from '../../contexts/alertContext'
import { useLayer } from 'react-laag'
import AlertDropdown from '../../alerts/alertDropDown'
import { darkContext } from '../../contexts/darkContext'
export default function Header(){
const {notificationCenter, setNotificationCenter} = useContext(alertContext)
const [isOpen,setIsOpen] = useState(false)
const {layerProps,renderLayer, triggerProps} = useLayer({
isOpen,
placement: "left-start",
auto:true,
onOutsideClick:()=>setIsOpen(false),
preferX: "left",
triggerOffset: 10,
containerOffset: 12,
overflowContainer:false,
arrowOffset: 4,
})
const {dark, setDark} = useContext(darkContext);
return (
<header className="relative flex h-16 w-full shrink-0 items-center bg-white dark:bg-gray-800">
{/* Desktop nav area */}
<div className="flex min-w-0 flex-1 flex-row-reverse items-center justify-between">
<div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
<div className="flex items-center space-x-8">
<span className="inline-flex gap-6">
<button className="text-gray-400 hover:text-gray-500 " onClick={()=>{setDark(!dark)}}>
{dark ?
<SunIcon className="h-6 w-6" />
:
<MoonIcon className="h-6 w-6" />
}
</button>
<button type="button" {...triggerProps} className="-mx-1 rounded-full p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
<span className="sr-only">View notifications</span>
{notificationCenter&&<div className='absolute top-[2px] w-2 h-2 rounded-full bg-red-600 right-[7px]'></div>}
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>{renderLayer(<div {...layerProps}></div>)}
</span>
</div>
</div>
</div>
</header>
)
}

57
langflow/frontend/src/components/chatComponent/index.tsx
View file

@ -1,13 +1,14 @@
import { Transition } from "@headlessui/react";
import {
Bars3CenterLeftIcon,
LockClosedIcon,
PaperAirplaneIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import { useContext, useEffect, useRef, useState } from "react";
import { sendAll } from "../../controllers/NodesServices";
import { alertContext } from "../../contexts/alertContext";
import { nodeColors } from "../../utils";
import { classNames, nodeColors } from "../../utils";
import { TabsContext } from "../../contexts/tabsContext";
import { ChatType } from "../../types/chat";
@ -16,6 +17,7 @@ const _ = require("lodash");
export default function Chat({ flow, reactFlowInstance }: ChatType) {
const { updateFlow } = useContext(TabsContext);
const [saveChat, setSaveChat] = useState(false);
const [lockChat, setLockChat] = useState(false);
const [open, setOpen] = useState(true);
const [chatValue, setChatValue] = useState("");
const [chatHistory, setChatHistory] = useState(flow.chat);
@ -69,15 +71,22 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
function sendMessage() {
if (chatValue !== "") {
if (validateNodes()) {
setLockChat(true);
let message = chatValue;
setChatValue("");
addChatHistory(message, true);
console.log({ ...reactFlowInstance.toObject(), message, chatHistory });
sendAll({ ...reactFlowInstance.toObject(), message, chatHistory }).then(
(r) => {
sendAll({ ...reactFlowInstance.toObject(), message, chatHistory })
.then((r) => {
console.log(r.data);
addChatHistory(r.data.result, false);
}
);
setLockChat(false);
})
.catch((error) => {
setErrorData({ title: error.message ?? "unknow error" });
setLockChat(false);
});
} else {
setErrorData({
title: "Error sending message",
@ -106,9 +115,12 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
>
<div className="w-[340px] absolute bottom-0 right-6">
<div className="border dark:border-gray-700 h-full rounded-xl rounded-b-none bg-white dark:bg-gray-800 shadow">
<div onClick={() => {
setOpen(false);
}} className="flex justify-between cursor-pointer items-center px-5 py-2 border-b dark:border-b-gray-700">
<div
onClick={() => {
setOpen(false);
}}
className="flex justify-between cursor-pointer items-center px-5 py-2 border-b dark:border-b-gray-700"
>
<div className="flex gap-3 text-lg dark:text-white font-medium items-center">
<Bars3CenterLeftIcon
className="h-5 w-5 mt-1"
@ -144,24 +156,35 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
<div className="relative w-full mt-1 rounded-md shadow-sm">
<input
onKeyDown={(event) => {
if (event.key === "Enter") {
if (event.key === "Enter" && !lockChat) {
sendMessage();
}
}}
type="text"
disabled={lockChat}
value={chatValue}
onChange={(e) => {
setChatValue(e.target.value);
}}
className="form-input block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white pr-10 sm:text-sm"
className={classNames(
lockChat ? "bg-gray-500" : "dark:bg-gray-700",
"form-input block w-full rounded-md border-gray-300 dark:border-gray-600 dark:text-white pr-10 sm:text-sm"
)}
placeholder="Send a message..."
/>
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
<button onClick={() => sendMessage()}>
<PaperAirplaneIcon
className="h-5 w-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
aria-hidden="true"
/>
<button disabled={lockChat} onClick={() => sendMessage()}>
{lockChat ? (
<LockClosedIcon
className="h-5 w-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
aria-hidden="true"
/>
) : (
<PaperAirplaneIcon
className="h-5 w-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
aria-hidden="true"
/>
)}
</button>
</div>
</div>
@ -180,7 +203,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
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 dark:bg-gray-800 dark:border-gray-600 dark:text-white shadow">
<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">
<button
onClick={() => {
setOpen(true);
@ -188,7 +211,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
>
<div className="flex gap-3 text-lg font-medium items-center">
<Bars3CenterLeftIcon
className="h-8 w-8 mt-1"
className="h-6 w-6 mt-1"
style={{ color: nodeColors["chat"] }}
/>
Chat

1
langflow/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
View file

@ -14,7 +14,6 @@ export default function TabsManagerComponent() {
const { openPopUp } = useContext(PopUpContext);
const AlertWidth = 224
const { dark, setDark } = useContext(darkContext);
const [isOpen, setIsOpen] = useState(false);
const {notificationCenter, setNotificationCenter} = useContext(alertContext)
useEffect(() => {
//create the first flow

3
langflow/frontend/src/types/alerts/index.ts
View file

@ -2,8 +2,7 @@ export type ErrorAlertType = {title:string,list:Array<string>,id:string,removeAl
export type NoticeAlertType = {title:string,link:string,id:string,removeAlert:(id:string)=>void}
export type SuccessAlertType = {title:string,id:string, removeAlert:(id:string)=>void}
export type SingleAlertComponentType = {dropItem:AlertItemType,removeAlert:(index:string)=>void}
export type AlertDropdownType = {
};
export type AlertDropdownType = {};
export type AlertItemType = {
type: "notice" | "error" | "success";
title: string;