jyapayne/langflow
Watch
1
0
Fork
You've already forked langflow
 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Merge branch 'types' into dev

Browse source
This commit is contained in:
Lucas Oliveira 2023-03-02 09:36:01 -03:00
commit 22ce22dace
48 changed files with 321 additions and 1033 deletions
Download patch file Download diff file Expand all files Collapse all files

22
space_flow/src/App.tsx
View file

@ -39,7 +39,7 @@ export default function App() {
setSuccessOpen,
} = useContext(alertContext);
const [alertsList, setAlertsList] = useState([]);
const [alertsList, setAlertsList] = useState<Array<{type:string,data:{title:string,list?:Array<string>,link?:string},id:string}>>([]);
useEffect(() => {
if (errorOpen && errorData) {
@ -72,33 +72,17 @@ export default function App() {
}
}, [errorData, errorOpen, noticeData, noticeOpen, successData, successOpen]);
const removeAlert = (id: number) => {
const removeAlert = (id: string) => {
setAlertsList((prevAlertsList) =>
prevAlertsList.filter((alert) => alert.id !== id)
);
};
const user = {
name: "Whitney Francis",
email: "whitney.francis@example.com",
imageUrl:
"https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
};
const userNavigation = [
{ name: "Your Projects", href: "/" },
// {
// name: "Account settings",
// href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser",
// },
{ name: "Sign out", href: "/" },
];
return (
//need parent component with width and height
<div className="h-full flex flex-col">
<div className="flex grow-0 shrink basis-auto">
<Header userNavigation={userNavigation} user={user}></Header>
<Header></Header>
</div>
<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
<Sidebar />

7
space_flow/src/CustomNodes/BooleanNode/index.tsx
View file

@ -5,10 +5,11 @@ import { isValidConnection, nodeColors } from "../../utils";
import ToggleComponent from "../../components/toggleComponent";
import { useContext, useEffect, useState } from "react";
import { typesContext } from "../../contexts/typesContext";
import { NodeDataType } from "../../types/flow";
export default function BooleanNode({ data }) {
export default function BooleanNode({ data }:{data:NodeDataType}) {
const [enabled, setEnabled] = useState(false);
const {types, deleteNode} = useContext(typesContext);
const {types, deleteNode, reactFlowInstance} = useContext(typesContext);
return (
<div className="prompt-node relative bg-white dark:bg-gray-900 rounded-lg solid border dark:border-gray-700 flex flex-col justify-center">
<div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 dark:bg-gray-800 dark:text-white dark:border-b-gray-700 border-b ">
@ -34,7 +35,7 @@ export default function BooleanNode({ data }) {
type="source"
position={Position.Right}
id={data.type}
isValidConnection={(connection) => isValidConnection(data,connection)}
isValidConnection={(connection) => isValidConnection(connection,reactFlowInstance)}
className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
style={{
borderColor: nodeColors[types[data.type]],

13
space_flow/src/CustomNodes/ChatInputNode/index.tsx
View file

@ -1,16 +1,15 @@
import {
Bars3CenterLeftIcon,
ChatBubbleBottomCenterTextIcon,
} from "@heroicons/react/24/outline";
import InputComponent from "../../components/inputComponent";
import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
import { isValidConnection, nodeColors } from "../../utils";
import { Handle, Position } from "reactflow";
import Tooltip from "../../components/TooltipComponent";
import { typesContext } from "../../contexts/typesContext";
import { useContext } from "react";
import { NodeDataType } from "../../types/flow";
export default function ChatInputNode({ data }) {
const { types } = useContext(typesContext);
export default function ChatInputNode({ data }:{data:NodeDataType}) {
const { types,reactFlowInstance } = useContext(typesContext);
return (
<div
className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-gray-800 dark:border-gray-700"
@ -20,7 +19,7 @@ export default function ChatInputNode({ data }) {
<Handle
type="target"
isValidConnection={(connection) =>
isValidConnection(data, connection)
isValidConnection(connection,reactFlowInstance)
}
position={Position.Left}
id={"str|Prefix|" + data.id}
@ -34,7 +33,7 @@ export default function ChatInputNode({ data }) {
<Handle
type="source"
isValidConnection={(connection) =>
isValidConnection(data, connection)
isValidConnection(connection,reactFlowInstance)
}
position={Position.Right}
id={"str|str|" + data.id}

7
space_flow/src/CustomNodes/ChatOutputNode/index.tsx
View file

@ -5,15 +5,16 @@ import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
import Tooltip from "../../components/TooltipComponent";
import { useContext } from "react";
import { typesContext } from "../../contexts/typesContext";
import { NodeDataType } from "../../types/flow";
export default function ChatOutputNode({ data }) {
const {types} = useContext(typesContext);
export default function ChatOutputNode({ data }:{data:NodeDataType}) {
const {types,reactFlowInstance} = useContext(typesContext);
return (
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-gray-800 dark:border-gray-700" style={{color: nodeColors[types[data.type]]}}>
<Tooltip title="Message: str">
<Handle
type="target"
isValidConnection={(connection) => isValidConnection(data,connection)}
isValidConnection={(connection) => isValidConnection(connection,reactFlowInstance)}
position={Position.Left}
id={"str|output|"+data.id}
className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"

7
space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -11,6 +11,7 @@ import ToggleComponent from "../../../../components/toggleComponent";
import InputListComponent from "../../../../components/inputListComponent";
import TextAreaComponent from "../../../../components/textAreaComponent";
import { typesContext } from "../../../../contexts/typesContext";
import { ParameterComponentType } from "../../../../types/components";
export default function ParameterComponent({
left,
@ -22,7 +23,7 @@ export default function ParameterComponent({
type,
name = "",
required = false,
}) {
}:ParameterComponentType) {
const ref = useRef(null);
const updateNodeInternals = useUpdateNodeInternals();
const [position, setPosition] = useState(0);
@ -70,7 +71,7 @@ export default function ParameterComponent({
<InputListComponent
disabled={disabled}
value={!data.node.template[name].value || data.node.template[name].value === "" ? [""] : data.node.template[name].value}
onChange={(t) => {
onChange={(t:string[]) => {
data.node.template[name].value = t;
}}
/>
@ -79,7 +80,7 @@ export default function ParameterComponent({
<TextAreaComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
onChange={(t) => {
onChange={(t:string) => {
data.node.template[name].value = t;
}}
/>

6
space_flow/src/CustomNodes/GenericNode/index.tsx
View file

@ -9,8 +9,10 @@ import {
import ParameterComponent from "./components/parameterComponent";
import { typesContext } from "../../contexts/typesContext";
import { useContext } from "react";
import { NodeDataType} from "../../types/flow";
import { APITemplateType, TemplateVariableType } from "../../types/api";
export default function GenericNode({ data }) {
export default function GenericNode({ data}:{data:NodeDataType}) {
const {types, deleteNode} = useContext(typesContext);
const Icon = nodeIcons[types[data.type]];
@ -38,7 +40,7 @@ export default function GenericNode({ data }) {
<>
{Object.keys(data.node.template)
.filter((t) => t.charAt(0) !== "_")
.map((t, idx) => (
.map((t:string, idx) => (
<div key={idx}>
{idx === 0 ? (
<div className="px-5 py-2 mt-2 dark:text-white text-center">Inputs:</div>

15
space_flow/src/CustomNodes/InputNode/index.tsx
View file

@ -3,17 +3,16 @@ import InputComponent from "../../components/inputComponent";
import {
isValidConnection,
nodeColors,
nodeIcons,
snakeToNormalCase,
} from "../../utils";
import { Handle, Position } from "reactflow";
import { useContext, useEffect } from "react";
import { useContext } from "react";
import Tooltip from "../../components/TooltipComponent";
import { typesContext } from "../../contexts/typesContext";
import TextAreaComponent from "../../components/textAreaComponent";
import { NodeDataType } from "../../types/flow";
export default function InputNode({ data }) {
const {types, deleteNode} = useContext(typesContext);
export default function InputNode({ data }:{data:NodeDataType}) {
console.log(data)
const {types, deleteNode,reactFlowInstance} = useContext(typesContext);
return (
<div className="prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg solid border dark:border-gray-700 flex flex-col justify-center">
<Tooltip title="Prefix: str">
@ -22,7 +21,7 @@ export default function InputNode({ data }) {
position={Position.Left}
id={"str|Prefix|" + data.id}
isValidConnection={(connection) =>
isValidConnection(data, connection)
isValidConnection(connection,reactFlowInstance)
}
className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
style={{
@ -61,7 +60,7 @@ export default function InputNode({ data }) {
type="source"
position={Position.Right}
id={data.type}
isValidConnection={(connection) => isValidConnection(data, connection)}
isValidConnection={(connection) => isValidConnection(connection,reactFlowInstance)}
className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"}
style={{
borderColor: nodeColors[types[data.type]],

16
space_flow/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
View file

@ -2,10 +2,12 @@ import { XCircleIcon, XMarkIcon, InformationCircleIcon, CheckCircleIcon } from "
import { Link } from "react-router-dom";
import { Transition } from "@headlessui/react";
import { useState } from "react";
import { SingleAlertComponentType } from "../../../../types/alerts";
export default function SingleAlert({ dropItem, removeAlert }) {
export default function SingleAlert({ dropItem, removeAlert}:SingleAlertComponentType) {
const [show, setShow] = useState(true);
const type = dropItem.type;
console.log(dropItem.id)
return (
<Transition
@ -20,7 +22,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
leaveTo={"transform translate-x-[-100%]"}
>
{type === "error"?
<div className="flex bg-red-50 rounded-md p-4 mb-2" key={dropItem.index}>
<div className="flex bg-red-50 rounded-md p-4 mb-2" key={dropItem.id}>
<div className="flex-shrink-0">
<XCircleIcon
className="h-5 w-5 text-red-400"
@ -48,7 +50,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
<button
type="button"
onClick={() => {
setShow(false); setTimeout(() => {removeAlert(dropItem.index);}, 500);
setShow(false); setTimeout(() => {removeAlert(dropItem.id);}, 500);
}}
className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500"
>
@ -59,7 +61,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
</div>
</div>
:(type === "notice" ?
<div className="flex rounded-md p-4 bg-blue-50 mb-2" key={dropItem.index}>
<div className="flex rounded-md p-4 bg-blue-50 mb-2" key={dropItem.id}>
<div className="flex-shrink-0">
<InformationCircleIcon
className="h-5 w-5 text-blue-400"
@ -86,7 +88,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
<button
type="button"
onClick={() => {
setShow(false); setTimeout(() => {removeAlert(dropItem.index);}, 500);
setShow(false); setTimeout(() => {removeAlert(dropItem.id);}, 500);
}}
className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500"
>
@ -97,7 +99,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
</div>
</div>
:
<div className="flex bg-green-50 p-4 mb-2" key={dropItem.index}>
<div className="flex bg-green-50 p-4 mb-2" key={dropItem.id}>
<div className="flex-shrink-0">
<CheckCircleIcon
className="h-5 w-5 text-green-400"
@ -114,7 +116,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
<button
type="button"
onClick={() => {
setShow(false); setTimeout(() => {removeAlert(dropItem.index);}, 500);
setShow(false); setTimeout(() => {removeAlert(dropItem.id);}, 500);
}}
className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500"
>

18
space_flow/src/alerts/alertDropDown/index.tsx
View file

@ -1,30 +1,16 @@
import { useContext } from "react";
import { alertContext } from "../../contexts/alertContext";
import {
CheckCircleIcon,
InformationCircleIcon,
XCircleIcon,
XMarkIcon,
} from "@heroicons/react/24/solid";
import { Link } from "react-router-dom";
import { Transition } from "@headlessui/react";
import { TrashIcon } from "@heroicons/react/24/outline";
import SingleAlert from "./components/singleAlertComponent";
import { AlertDropdownType } from "../../types/alerts";
type AlertDropdownProps = {
closeFunction: () => void;
open?: boolean;
};
export type alertDropdownItem = {
type: "notice" | "error" | "success";
title: string;
link?: string;
list?: Array<string>;
id: string;
};
export default function AlertDropdown({closeFunction, open}: AlertDropdownProps) {
export default function AlertDropdown({closeFunction, open}: AlertDropdownType) {
const {
notificationList,
clearNotificationList,

3
space_flow/src/alerts/error/index.tsx
View file

@ -1,8 +1,9 @@
import { Transition } from "@headlessui/react";
import { XCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react";
import { ErrorAlertType} from "../../types/alerts";
export default function ErrorAlert({ title, list = [], id, removeAlert }) {
export default function ErrorAlert({ title, list = [], id, removeAlert }:ErrorAlertType) {
const [show, setShow] = useState(true);
useEffect(() => {
if(show){

3
space_flow/src/alerts/notice/index.tsx
View file

@ -2,8 +2,9 @@ import { Transition } from "@headlessui/react";
import { InformationCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { NoticeAlertType } from "../../types/alerts";
export default function NoticeAlert({ title, link = "", id, removeAlert }) {
export default function NoticeAlert({ title, link = "", id, removeAlert }:NoticeAlertType) {
const [show, setShow] = useState(true);
useEffect(() => {
if(show){

3
space_flow/src/alerts/success/index.tsx
View file

@ -1,8 +1,9 @@
import { Transition } from "@headlessui/react";
import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react";
import { SuccessAlertType } from "../../types/alerts";
export default function SuccessAlert({ title, id, removeAlert }) {
export default function SuccessAlert({ title, id, removeAlert }:SuccessAlertType) {
const [show, setShow] = useState(true);
useEffect(() => {
if(show){

5
space_flow/src/components/ExtraSidebarComponent/index.tsx
View file

@ -7,7 +7,6 @@ import { locationContext } from "../../contexts/locationContext";
import { TabsContext } from "../../contexts/tabsContext";
export default function ExtraSidebar() {
const {uploadFlow} = useContext(TabsContext)
const {
current,
isStackedOpen,
@ -124,11 +123,7 @@ export default function ExtraSidebar() {
) : (
extraComponent
)}
{/* need to convert to multi stackbar logic */}
</div>
{/* <div className="w-full flex content-center justify-center mt-auto mb-8">
<button onClick={()=>uploadFlow()} className="flex content-center justify-center py-3 px-6 border rounded-lg border-blue-500 text-blue-500 hover:text-white hover:bg-blue-500"><span>import flow</span><ArrowUpTrayIcon className=" ml-2 w-5 h-5"/> </button>
</div> */}
</div>
</aside>
</>

56
space_flow/src/components/HeaderComponent/index.tsx
View file

@ -1,20 +1,16 @@
import { Fragment, useContext, useState } from 'react'
import { Menu, Transition } from '@headlessui/react'
import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
import { useContext, useState } from 'react'
import {
BellIcon,
MoonIcon,
SunIcon,
} from '@heroicons/react/24/outline'
import { classNames } from '../../utils'
import { Link } from 'react-router-dom'
import Breadcrumb from '../breadcrumbComponent'
import { alertContext } from '../../contexts/alertContext'
import { useLayer,Arrow } from 'react-laag'
import { useLayer } from 'react-laag'
import AlertDropdown from '../../alerts/alertDropDown'
import { darkContext } from '../../contexts/darkContext'
export default function Header({user, userNavigation}){
export default function Header(){
const {notificationCenter, setNotificationCenter} = useContext(alertContext)
const [isOpen,setIsOpen] = useState(false)
const {layerProps,renderLayer, triggerProps} = useLayer({
@ -65,52 +61,6 @@ export default function Header({user, userNavigation}){
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>{renderLayer(<div {...layerProps}><AlertDropdown closeFunction={()=>setIsOpen(false)} open={isOpen}></AlertDropdown></div>)}
</span>
{/* <Menu as="div" className="relative inline-block text-left">
<Menu.Button className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
<span className="sr-only">Open user menu</span>
<img className="h-8 w-8 rounded-full" src={user.imageUrl} alt="" />
</Menu.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1">
{userNavigation.map((item,index) => (
<Menu.Item key={index}>
{({ active }) => (
!item.href.includes("http://")?
<Link
to={item.href}
className={classNames(
active ? 'bg-gray-100' : '',
'block px-4 py-2 text-sm text-gray-700'
)}
>
{item.name}
</Link>:
<a
href={item.href}
className={classNames(
active ? 'bg-gray-100' : '',
'block px-4 py-2 text-sm text-gray-700'
)}>
{item.name}
</a>)}
</Menu.Item>
))
}
</div>
</Menu.Items>
</Transition>
</Menu> */}
</div>
</div>
</div>

3
space_flow/src/components/SidebarComponent/sidebarButton/index.tsx
View file

@ -2,8 +2,9 @@ import { classNames } from "../../../utils"
import { Link } from "react-router-dom"
import { useContext } from "react"
import { locationContext } from "../../../contexts/locationContext";
import { sidebarNavigationItemType } from "../../../types/entities";
export default function SidebarButton({item}){
export default function SidebarButton({item}:{item:sidebarNavigationItemType}){
let {current}= useContext(locationContext);
return (
<>

3
space_flow/src/components/TooltipComponent/index.tsx
View file

@ -1,5 +1,6 @@
import { ReactElement } from "react";
import { LightTooltip } from "../LightTooltipComponent";
export default function Tooltip({ children, title }) {
export default function Tooltip({ children, title }:{children:ReactElement,title:string}) {
return <LightTooltip title={title} arrow>{children}</LightTooltip>;
}

2
space_flow/src/components/breadcrumbComponent/index.tsx
View file

@ -11,7 +11,7 @@ const breadcrumbNameMap: { [key: string]: string } = {
};
function getPages(atual){
function getPages(atual:string[]){
let pages = [];
for(let i = 2; i <= atual.length; i++){
let to = '/' + atual.slice(1,i).join('/');

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

@ -1,7 +1,6 @@
import { Transition } from "@headlessui/react";
import {
Bars3CenterLeftIcon,
ChatBubbleBottomCenterTextIcon,
PaperAirplaneIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
@ -10,17 +9,18 @@ import { sendAll } from "../../controllers/NodesServices";
import { alertContext } from "../../contexts/alertContext";
import { nodeColors } from "../../utils";
import { TabsContext } from "../../contexts/tabsContext";
import { ChatType } from "../../types/chat";
const _ = require("lodash");
export default function Chat({flow, reactFlowInstance }) {
export default function Chat({flow, reactFlowInstance }:ChatType) {
const {updateFlow} = useContext(TabsContext)
const [saveChat,setSaveChat] = useState(false)
const [open, setOpen] = useState(true);
const [chatValue, setChatValue] = useState("");
const [chatHistory, setChatHistory] = useState(flow.chat);
const {setErrorData} = useContext(alertContext);
const addChatHistory = (message, isSend) => {
const addChatHistory = (message:string, isSend:boolean) => {
setChatHistory((old) => {
let newChat = _.cloneDeep(old);
newChat.push({ message, isSend });
@ -29,7 +29,6 @@ export default function Chat({flow, reactFlowInstance }) {
setSaveChat(chat=>!chat)
};
useEffect(()=>{
console.log("flow")
updateFlow({..._.cloneDeep(flow),chat:chatHistory})
},[saveChat])
useEffect(()=>{
@ -54,7 +53,6 @@ export default function Chat({flow, reactFlowInstance }) {
const ref = useRef(null);
function sendMessage(){
console.log(reactFlowInstance.toObject())
if(chatValue !== ""){
if(validateNodes()){
if(validateChatNodes()){

3
space_flow/src/components/dropdownComponent/index.tsx
View file

@ -1,9 +1,10 @@
import { Listbox, Transition } from "@headlessui/react";
import { ChevronUpDownIcon, CheckIcon } from "@heroicons/react/24/outline";
import { Fragment } from "react";
import { DropDownComponentType } from "../../types/components";
import { classNames } from "../../utils";
export default function Dropdown({title, value, options, onSelect}) {
export default function Dropdown({title, value, options, onSelect}:DropDownComponentType) {
return (
<>
<Listbox value={value} onChange={onSelect}>

3
space_flow/src/components/inputComponent/index.tsx
View file

@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import { InputComponentType } from "../../types/components";
export default function InputComponent({value, onChange, disabled}){
export default function InputComponent({value, onChange, disabled}: InputComponentType){
const [myValue, setMyValue] = useState(value ?? "");
useEffect(()=> {
if(disabled){

Some files were not shown because too many files have changed in this diff Show more