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

refactor and create type for functions and majority of variables

Browse source
This commit is contained in:
anovazzi1 2023-03-01 18:29:42 -03:00
commit 9d55bcd751
50 changed files with 302 additions and 1022 deletions
Download patch file Download diff file Expand all files Collapse all files

22
space_flow/src/App.tsx
View file

@ -36,7 +36,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) {
@ -69,33 +69,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 rounded-lg solid border flex flex-col justify-center">
<div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 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-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors[types[data.type]] }}
></Handle>

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"
@ -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" 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"

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 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 w-96 rounded-lg solid border 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-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors[types[data.type]] }}
@ -59,7 +58,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-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors[types[data.type]] }}
></Handle>

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>
</>

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

@ -1,18 +1,13 @@
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,
} 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'
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({
@ -55,52 +50,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){

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

@ -1,9 +1,10 @@
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react";
import { InputListComponentType } from "../../types/components";
var _ = require("lodash");
export default function InputListComponent({ value, onChange, disabled}) {
export default function InputListComponent({ value, onChange, disabled}:InputListComponentType) {
const [inputList, setInputList] = useState(value ?? [""]);
useEffect(()=> {
if(disabled){

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

@ -2,8 +2,9 @@ import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
import { useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import TextAreaModal from "../../modals/textAreaModal";
import { TextAreaComponentType } from "../../types/components";
export default function TextAreaComponent({ value, onChange, disabled }) {
export default function TextAreaComponent({ value, onChange, disabled }:TextAreaComponentType) {
const [myValue, setMyValue] = useState(value);
const { openPopUp } = useContext(PopUpContext);
useEffect(() => {
@ -23,7 +24,7 @@ export default function TextAreaComponent({ value, onChange, disabled }) {
>
{myValue !== "" ? myValue : 'Text empty'}
</span>
<button onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t) => {setMyValue(t); onChange(t);}}/>)}}>
<button onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}>
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
</button>
</div>

7
space_flow/src/components/toggleComponent/index.tsx
View file

@ -1,8 +1,9 @@
import { Switch } from "@headlessui/react";
import { classNames } from "../../utils";
import { useEffect, useState } from "react";
import { useEffect } from "react";
import { ToggleComponentType } from "../../types/components";
export default function ToggleComponent({ enabled, setEnabled, disabled }) {
export default function ToggleComponent({ enabled, setEnabled, disabled }:ToggleComponentType) {
useEffect(()=> {
if(disabled){
setEnabled(false);
@ -12,7 +13,7 @@ export default function ToggleComponent({ enabled, setEnabled, disabled }) {
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<Switch
checked={enabled}
onChange={(x) => {
onChange={(x:boolean) => {
setEnabled(x);
}}
className={classNames(

18
space_flow/src/contexts/alertContext.tsx
View file

@ -1,5 +1,5 @@
import { createContext, useState } from "react";
import { alertDropdownItem } from "../alerts/alertDropDown";
import { createContext, ReactNode, useState } from "react";
import { AlertItemType } from "../types/alerts";
var _ = require("lodash");
@ -19,14 +19,14 @@ type alertContextType = {
setSuccessOpen: (newState: boolean) => void;
notificationCenter: boolean;
setNotificationCenter: (newState: boolean) => void;
notificationList: Array<alertDropdownItem>;
pushNotificationList: (Object) => void;
notificationList: Array<AlertItemType>;
pushNotificationList: (Object:AlertItemType) => void;
clearNotificationList: () => void;
removeFromNotificationList: (index: number) => void;
removeFromNotificationList: (index: string) => void;
};
//initial values to alertContextType
const initialValue = {
const initialValue:alertContextType = {
errorData: { title: "", list: [] },
setErrorData: () => {},
errorOpen: false,
@ -49,7 +49,7 @@ const initialValue = {
export const alertContext = createContext<alertContextType>(initialValue);
export function AlertProvider({ children }) {
export function AlertProvider({ children }:{children:ReactNode}) {
const [errorData, setErrorDataState] = useState<{
title: string;
list?: Array<string>;
@ -66,7 +66,7 @@ export function AlertProvider({ children }) {
const [successOpen, setSuccessOpen] = useState(false);
const [notificationCenter, setNotificationCenter] = useState(false);
const [notificationList, setNotificationList] = useState([]);
const pushNotificationList = (notification: alertDropdownItem) => {
const pushNotificationList = (notification: AlertItemType) => {
setNotificationList((old) => {
let newNotificationList = _.cloneDeep(old);
newNotificationList.unshift(notification);
@ -114,7 +114,7 @@ export function AlertProvider({ children }) {
function clearNotificationList() {
setNotificationList([]);
}
function removeFromNotificationList(index: number) {
function removeFromNotificationList(index: string) {
setNotificationList((prevAlertsList) =>
prevAlertsList.filter((alert) => alert.id !== index)
);

3
space_flow/src/contexts/index.tsx
View file

@ -1,10 +1,11 @@
import { ReactNode } from "react";
import { AlertProvider } from "./alertContext";
import { LocationProvider } from "./locationContext";
import PopUpProvider from "./popUpContext";
import { TabsProvider } from "./tabsContext";
import { TypesProvider } from "./typesContext";
export default function ContextWrapper({ children }) {
export default function ContextWrapper({ children }:{children:ReactNode}) {
//element to wrap all context
return (
<>

4
space_flow/src/contexts/locationContext.tsx
View file

@ -1,4 +1,4 @@
import { createContext, useState } from "react";
import { createContext, ReactNode, useState } from "react";
//types for location context
type locationContextType = {
@ -50,7 +50,7 @@ const initialValue = {
export const locationContext = createContext<locationContextType>(initialValue);
export function LocationProvider({ children }) {
export function LocationProvider({ children }:{children:ReactNode}) {
const [current, setCurrent] = useState(initialValue.current);
const [isStackedOpen, setIsStackedOpen] = useState(
initialValue.isStackedOpen

19
space_flow/src/contexts/tabsContext.tsx
View file

@ -1,16 +1,16 @@
import { createContext, useEffect, useState, useRef } from "react";
import {flow} from "../types/flow"
import { createContext, useEffect, useState, useRef, ReactNode } from "react";
import {FlowType} from "../types/flow"
import { TabsContextType } from "../types/tabs";
const TabsContextInitialValue = {
const TabsContextInitialValue:TabsContextType = {
tabIndex: 0,
setTabIndex: (index: number) => {},
flows: [],
removeFlow: (id: string) => {},
addFlow: (flowData?: any) => {},
updateFlow: (newFlow: flow) => {},
updateFlow: (newFlow: FlowType) => {},
incrementNodeId: () => 0,
downloadFlow: () => {},
uploadFlow: () => {},
@ -22,9 +22,9 @@ export const TabsContext = createContext<TabsContextType>(
let _ = require("lodash");
export function TabsProvider({ children }) {
export function TabsProvider({ children }:{children:ReactNode}) {
const [tabIndex, setTabIndex] = useState(0);
const [flows, setFlows] = useState<Array<flow>>([]);
const [flows, setFlows] = useState<Array<FlowType>>([]);
const [id, setId] = useState(0);
const newNodeId = useRef(0);
@ -96,9 +96,9 @@ export function TabsProvider({ children }) {
return newFlows;
});
}
function addFlow(flow?: flow) {
function addFlow(flow?: FlowType) {
const data = flow?.data ? flow.data : null;
let newFlow: flow = {
let newFlow: FlowType = {
name: flow ? flow.name : "flow" + id,
id: id.toString(),
data,
@ -111,8 +111,7 @@ export function TabsProvider({ children }) {
});
setTabIndex(flows.length);
}
function updateFlow(newFlow: flow) {
console.log(newFlow);
function updateFlow(newFlow: FlowType) {
setFlows((prevState) => {
const newFlows = [...prevState];
const index = newFlows.findIndex((flow) => flow.id === newFlow.id);

20
space_flow/src/contexts/typesContext.tsx
View file

@ -1,16 +1,10 @@
import { createContext, useState } from "react";
import { ReactFlowInstance } from "reactflow";
import { createContext, ReactNode, useState } from "react";
import { Node} from "reactflow";
import { typesContextType } from "../types/typesContext";
//context to share types adn functions from nodes to flow
type typesContextType = {
reactFlowInstance: ReactFlowInstance;
setReactFlowInstance: any;
deleteNode: (idx: number) => void;
types: {};
setTypes: (newState: {}) => void;
};
const initialValue = {
const initialValue:typesContextType = {
reactFlowInstance: null,
setReactFlowInstance: () => {},
deleteNode: () => {},
@ -20,12 +14,12 @@ const initialValue = {
export const typesContext = createContext<typesContextType>(initialValue);
export function TypesProvider({ children }) {
export function TypesProvider({ children }:{children:ReactNode}) {
const [types, setTypes] = useState({});
const [reactFlowInstance, setReactFlowInstance] = useState(null);
function deleteNode(idx) {
function deleteNode(idx:string) {
reactFlowInstance.setNodes(
reactFlowInstance.getNodes().filter((n) => n.id !== idx)
reactFlowInstance.getNodes().filter((n:Node) => n.id !== idx)
);
}
return (

7
space_flow/src/controllers/NodesServices/index.ts
View file

@ -1,10 +1,11 @@
import axios from "axios";
import { APIObjectType, sendAllProps } from './../../types/api/index';
import axios, { AxiosResponse } from "axios";
export async function getAll() {
export async function getAll():Promise<AxiosResponse<APIObjectType>> {
return await axios.get("http://localhost:5003/");
}
export async function sendAll(data) {
export async function sendAll(data:sendAllProps) {
console.log(data);
return await axios.post("http://localhost:5003/predict", data);
}

11
space_flow/src/controllers/UiGenerator/index.ts
View file

@ -1,11 +0,0 @@
import axios from "axios";
export function generateUiNode(data: Object) {
const fields = [];
Object.keys(data).forEach((field) => {
if (data[field].required) {
fields.push(data[field])
}
});
return fields
}

36
space_flow/src/data_assets/agent.ts
View file

@ -1,36 +0,0 @@
export const agent = {
"llm_chain": {
"memory": null,
"verbose": false,
"prompt": {
"input_variables": [
"input",
"agent_scratchpad"
],
"output_parser": null,
"template": "You are an assistant that helps a company to find relevant news articles.\nAnswer the questions thoroughly and with as many details as you can and specially don't be afraid to say if you can't find the answer in the articles.\nYou have access to the following tools:\n\nCall Consultant: Ask the assistant to research the question\n\nUse the following format:\n\nQuestion: the input question you must answer\nThought: you should always think about what to do\nAction: the action to take, should be one of [Call Consultant]\nAction Input: the input to the action\nObservation: the result of the action\n... (this Thought/Action/Action Input/Observation can repeat N times)\nThought: I now know the final answer\nFinal Answer: the final answer to the original input question\n\nBegin! Remember to use the tools to help you.\n\nQuestion: {input}\n{agent_scratchpad}",
"template_format": "f-string",
"_type": "prompt"
},
"llm": {
"model_name": "text-davinci-003",
"temperature": 0.0,
"max_tokens": 256,
"top_p": 1,
"frequency_penalty": 0,
"presence_penalty": 0,
"n": 1,
"best_of": 1,
"request_timeout": null,
"logit_bias": {},
"_type": "openai"
},
"output_key": "text",
"_type": "llm_chain"
},
"allowed_tools": null,
"return_values": [
"output"
],
"_type": "zero-shot-react-description"
}

606
space_flow/src/data_assets/example.ts
View file

@ -1,606 +0,0 @@
export const example = {
"nodes": [
{
"width": 384,
"height": 271,
"id": "dndnode_}5",
"type": "genericNode",
"position": {
"x": -640.9237482084102,
"y": 117.60473769101873
},
"data": {
"type": "ConversationBufferMemory",
"node": {
"template": {
"_type": "conversation_buffer",
"human_prefix": {
"type": "str",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": "Human"
},
"ai_prefix": {
"type": "str",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": "AI"
},
"buffer": {
"type": "str",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": ""
},
"output_key": {
"type": "str",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": null
},
"input_key": {
"type": "str",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": null
},
"memory_key": {
"type": "str",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": "history"
}
},
"description": "Buffer for storing conversation memory.",
"base_classes": [
"Memory"
]
},
"id": "dndnode_}5",
"value": null
},
"selected": false,
"positionAbsolute": {
"x": -640.9237482084102,
"y": 117.60473769101873
},
"dragging": false
},
{
"width": 384,
"height": 447,
"id": "dndnode_}7",
"type": "genericNode",
"position": {
"x": -86,
"y": 522
},
"data": {
"type": "LLMChain",
"node": {
"template": {
"_type": "llm_chain",
"memory": {
"type": "Memory",
"required": false,
"placeholder": "",
"list": false,
"show": true,
"multline": false,
"value": null
},
"verbose": {
"type": "bool",
"required": false,
"placeholder": "",
"list": false,
"show": true,
"multline": false,
"value": false
},
"prompt": {
"type": "BasePromptTemplate",
"required": true,
"placeholder": "",
"list": false,
"show": true,
"multline": false
},
"llm": {
"type": "BaseLLM",
"required": true,
"placeholder": "",
"list": false,
"show": true,
"multline": false
},
"output_key": {
"type": "str",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": "text"
}
},
"description": "Chain to run queries against LLMs.",
"base_classes": [
"Chain"
]
},
"id": "dndnode_}7",
"value": null
},
"selected": false,
"positionAbsolute": {
"x": -86,
"y": 522
},
"dragging": false
},
{
"width": 384,
"height": 357,
"id": "dndnode_}8",
"type": "genericNode",
"position": {
"x": -633.4,
"y": 230
},
"data": {
"type": "PromptTemplate",
"node": {
"template": {
"_type": "prompt",
"input_variables": {
"type": "str",
"required": true,
"placeholder": "",
"list": true,
"show": false,
"multline": false
},
"output_parser": {
"type": "BaseOutputParser",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": null
},
"template": {
"type": "str",
"required": true,
"placeholder": "",
"list": false,
"show": true,
"multline": true,
"value": "aaaaa"
},
"template_format": {
"type": "str",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": "f-string"
},
"validate_template": {
"type": "bool",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": true
}
},
"description": "Schema to represent a prompt for an LLM.",
"base_classes": [
"BasePromptTemplate"
]
},
"id": "dndnode_}8",
"value": null
},
"selected": false,
"positionAbsolute": {
"x": -633.4,
"y": 230
},
"dragging": false
},
{
"width": 384,
"height": 453,
"id": "dndnode_}9",
"type": "genericNode",
"position": {
"x": -655.1999999999999,
"y": 615
},
"data": {
"type": "AI21",
"node": {
"template": {
"_type": "ai21",
"cache": {
"type": "bool",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": null
},
"verbose": {
"type": "bool",
"required": false,
"placeholder": "",
"list": false,
"show": true,
"multline": false,
"value": false
},
"model": {
"type": "str",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": "j1-jumbo"
},
"temperature": {
"type": "float",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": 0.7
},
"maxTokens": {
"type": "int",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": 256
},
"minTokens": {
"type": "int",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": 0
},
"topP": {
"type": "float",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": 1
},
"presencePenalty": {
"type": "AI21PenaltyData",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": {
"scale": 0,
"applyToWhitespaces": true,
"applyToPunctuations": true,
"applyToNumbers": true,
"applyToStopwords": true,
"applyToEmojis": true
}
},
"countPenalty": {
"type": "AI21PenaltyData",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": {
"scale": 0,
"applyToWhitespaces": true,
"applyToPunctuations": true,
"applyToNumbers": true,
"applyToStopwords": true,
"applyToEmojis": true
}
},
"frequencyPenalty": {
"type": "AI21PenaltyData",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": {
"scale": 0,
"applyToWhitespaces": true,
"applyToPunctuations": true,
"applyToNumbers": true,
"applyToStopwords": true,
"applyToEmojis": true
}
},
"numResults": {
"type": "int",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": 1
},
"logitBias": {
"type": "dict[str, float]",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": null
},
"ai21_api_key": {
"type": "str",
"required": false,
"placeholder": "",
"list": false,
"show": true,
"multline": false,
"value": "aaaa"
},
"base_url": {
"type": "str",
"required": false,
"placeholder": "",
"list": false,
"show": false,
"multline": false,
"value": null
}
},
"description": "Wrapper around AI21 large language models.To use, you should have the environment variable ``AI21_API_KEY``set with your API key.",
"base_classes": [
"LLM",
"BaseLLM"
]
},
"id": "dndnode_}9",
"value": null
},
"selected": false,
"positionAbsolute": {
"x": -655.1999999999999,
"y": 615
},
"dragging": false
},
{
"width": 384,
"height": 351,
"id": "dndnode_}11",
"type": "genericNode",
"position": {
"x": 638.4588569554073,
"y": 325.32407743706693
},
"data": {
"type": "ZeroShotAgent",
"node": {
"template": {
"_type": "zero-shot-react-description",
"llm_chain": {
"type": "LLMChain",
"required": true,
"placeholder": "",
"list": false,
"show": true,
"multline": false
},
"allowed_tools": {
"type": "Tool",
"required": false,
"placeholder": "",
"list": true,
"show": true,
"multline": false,
"value": null
},
"return_values": {
"type": "str",
"required": false,
"placeholder": "",
"list": true,
"show": false,
"multline": false,
"value": [
"output"
]
}
},
"description": "Agent for the MRKL chain.",
"base_classes": [
"Agent"
]
},
"id": "dndnode_}11",
"value": null
},
"positionAbsolute": {
"x": 638.4588569554073,
"y": 325.32407743706693
}
},
{
"width": 384,
"height": 283,
"id": "dndnode_}12",
"type": "genericNode",
"position": {
"x": -88.20259321315393,
"y": 992.0115499525607
},
"data": {
"type": "Requests",
"node": {
"template": {
"_type": "requests"
},
"name": "Requests",
"description": "A portal to the internet. Use this when you need to get specific content from a site. Input should be a specific url, and the output will be all the text on that page.",
"base_classes": [
"Tool"
]
},
"id": "dndnode_}12",
"value": null
},
"selected": false,
"positionAbsolute": {
"x": -88.20259321315393,
"y": 992.0115499525607
},
"dragging": false
},
{
"width": 155,
"height": 62,
"id": "dndnode_}13",
"type": "chatOutputNode",
"position": {
"x": 1187.9878614974666,
"y": 492.6933173991155
},
"data": {
"type": "chatOutput",
"id": "dndnode_}13",
"value": null
},
"selected": false,
"positionAbsolute": {
"x": 1187.9878614974666,
"y": 492.6933173991155
},
"dragging": false
},
{
"width": 139,
"height": 62,
"id": "dndnode_}14",
"type": "chatInputNode",
"position": {
"x": -1098.8338538506573,
"y": 562.4305007166358
},
"data": {
"type": "chatInput",
"id": "dndnode_}14",
"value": null
},
"selected": true,
"positionAbsolute": {
"x": -1098.8338538506573,
"y": 562.4305007166358
},
"dragging": false
}
],
"edges": [
{
"source": "dndnode_}2",
"sourceHandle": "PromptTemplate|example_prompt|dndnode_}2",
"target": "dndnode_}1",
"targetHandle": "PromptTemplate|dndnode_}1|BasePromptTemplate",
"className": "animate-pulse",
"id": "reactflow__edge-dndnode_}2PromptTemplate|example_prompt|dndnode_}2-dndnode_}1PromptTemplate|dndnode_}1|BasePromptTemplate"
},
{
"source": "dndnode_}7",
"sourceHandle": "BasePromptTemplate|prompt|dndnode_}7",
"target": "dndnode_}8",
"targetHandle": "PromptTemplate|dndnode_}8|BasePromptTemplate",
"className": "animate-pulse",
"id": "reactflow__edge-dndnode_}7BasePromptTemplate|prompt|dndnode_}7-dndnode_}8PromptTemplate|dndnode_}8|BasePromptTemplate"
},
{
"source": "dndnode_}7",
"sourceHandle": "BaseLLM|llm|dndnode_}7",
"target": "dndnode_}9",
"targetHandle": "AI21|dndnode_}9|LLM,|BaseLLM",
"className": "animate-pulse",
"id": "reactflow__edge-dndnode_}7BaseLLM|llm|dndnode_}7-dndnode_}9AI21|dndnode_}9|LLM,|BaseLLM"
},
{
"source": "dndnode_}7",
"sourceHandle": "Memory|memory|dndnode_}7",
"target": "dndnode_}5",
"targetHandle": "ConversationBufferMemory|dndnode_}5|Memory",
"className": "animate-pulse",
"id": "reactflow__edge-dndnode_}7Memory|memory|dndnode_}7-dndnode_}5ConversationBufferMemory|dndnode_}5|Memory"
},
{
"source": "dndnode_}11",
"sourceHandle": "LLMChain|llm_chain|dndnode_}11",
"target": "dndnode_}7",
"targetHandle": "LLMChain|dndnode_}7|Chain",
"className": "animate-pulse",
"id": "reactflow__edge-dndnode_}11LLMChain|llm_chain|dndnode_}11-dndnode_}7LLMChain|dndnode_}7|Chain"
},
{
"source": "dndnode_}11",
"sourceHandle": "Tool|allowed_tools|dndnode_}11",
"target": "dndnode_}12",
"targetHandle": "Requests|dndnode_}12|Tool",
"className": "animate-pulse",
"id": "reactflow__edge-dndnode_}11Tool|allowed_tools|dndnode_}11-dndnode_}12Requests|dndnode_}12|Tool"
},
{
"source": "dndnode_}13",
"sourceHandle": "str|output|dndnode_}13",
"target": "dndnode_}11",
"targetHandle": "ZeroShotAgent|dndnode_}11|Agent",
"className": "animate-pulse",
"id": "reactflow__edge-dndnode_}13str|output|dndnode_}13-dndnode_}11ZeroShotAgent|dndnode_}11|Agent",
"selected": false
}
],
"viewport": {
"x": 765.8392857133035,
"y": -83.25008407339476,
"zoom": 0.7169776240079136
}
}

29
space_flow/src/data_assets/llm_chain.ts
View file

@ -1,29 +0,0 @@
export const llm_chain = {
"memory": null,
"verbose": false,
"prompt": {
"input_variables": [
"input",
"agent_scratchpad"
],
"output_parser": null,
"template": "You are an assistant that helps a company to find relevant news articles.\nAnswer the questions thoroughly and with as many details as you can and specially don't be afraid to say if you can't find the answer in the articles.\nYou have access to the following tools:\n\nCall Consultant: Ask the assistant to research the question\n\nUse the following format:\n\nQuestion: the input question you must answer\nThought: you should always think about what to do\nAction: the action to take, should be one of [Call Consultant]\nAction Input: the input to the action\nObservation: the result of the action\n... (this Thought/Action/Action Input/Observation can repeat N times)\nThought: I now know the final answer\nFinal Answer: the final answer to the original input question\n\nBegin! Remember to use the tools to help you.\n\nQuestion: {input}\n{agent_scratchpad}",
"template_format": "f-string",
"_type": "prompt"
},
"llm": {
"model_name": "text-davinci-003",
"temperature": 0.0,
"max_tokens": 256,
"top_p": 1,
"frequency_penalty": 0,
"presence_penalty": 0,
"n": 1,
"best_of": 1,
"request_timeout": null,
"logit_bias": {},
"_type": "openai"
},
"output_key": "text",
"_type": "llm_chain"
}

10
space_flow/src/data_assets/prompt.ts
View file

@ -1,10 +0,0 @@
export const prompt={
"input_variables": [
"input",
"agent_scratchpad"
],
"output_parser": null,
"template": "You are an assistant that helps a company to find relevant news articles.\nAnswer the questions thoroughly and with as many details as you can and specially don't be afraid to say if you can't find the answer in the articles.\nYou have access to the following tools:\n\nCall Consultant: Ask the assistant to research the question\n\nUse the following format:\n\nQuestion: the input question you must answer\nThought: you should always think about what to do\nAction: the action to take, should be one of [Call Consultant]\nAction Input: the input to the action\nObservation: the result of the action\n... (this Thought/Action/Action Input/Observation can repeat N times)\nThought: I now know the final answer\nFinal Answer: the final answer to the original input question\n\nBegin! Remember to use the tools to help you.\n\nQuestion: {input}\n{agent_scratchpad}",
"template_format": "f-string",
"_type": "prompt"
}

9
space_flow/src/modals/textAreaModal/index.tsx
View file

@ -1,15 +1,14 @@
import { Dialog, Menu, Transition } from "@headlessui/react";
import { XMarkIcon, ClipboardDocumentListIcon, PlusIcon, ChevronDownIcon, TrashIcon } from "@heroicons/react/24/outline";
import { Dialog, Transition } from "@headlessui/react";
import { XMarkIcon, ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react";
import { taskTypeMap, textColors, classNames, bgColors } from "../../utils";
import { PopUpContext } from "../../contexts/popUpContext";
export default function TextAreaModal({value, setValue}){
export default function TextAreaModal({value, setValue}:{setValue:(value:string)=>void,value:string|string[]}){
const [open, setOpen] = useState(true);
const [myValue, setMyValue] = useState(value);
const { closePopUp } = useContext(PopUpContext);
const ref = useRef();
function setModalOpen(x){
function setModalOpen(x:boolean){
setOpen(x);
if(x === false){
setTimeout(() => {closePopUp()}, 300);

88
space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx
View file

@ -1,53 +1,47 @@
import {
CpuChipIcon,
PlusIcon,
ChevronRightIcon,
ArrowPathIcon,
BoltIcon,
ChevronDoubleRightIcon,
ChevronRightIcon,
} from "@heroicons/react/24/outline";
import { Disclosure } from "@headlessui/react";
import { useState } from "react";
import { borderLColors } from "../../../../utils";
import { DisclosureComponentType } from "../../../../types/components";
export default function DisclosureComponent({
button: { title, Icon, buttons = [] },
children,
}) {
return (
<Disclosure as="div" key={title}>
{({ open }) => (
<>
<div>
<div className="select-none bg-gray-50 w-full flex justify-between items-center -mt-px px-3 py-2 border border-gray-200">
<div className="flex gap-4">
<Icon className="w-6 text-gray-800" />
<span className="flex items-center text-sm text-gray-800 font-medium">
{title}
</span>
</div>
<div className="flex gap-2">
{buttons.map((x, index)=>(
<button key={index} onClick={x.onClick}>
{x.Icon}
</button>
))}
<Disclosure.Button as="button">
<ChevronRightIcon
className={`${
open ? "rotate-90 transform" : ""
} h-5 w-5 text-gray-800`}
/>
</Disclosure.Button>
</div>
</div>
</div>
<Disclosure.Panel as="div" className="-mt-px">
{children}
</Disclosure.Panel>
</>
)}
</Disclosure>
);
button: { title, Icon, buttons = [] },
children,
}: DisclosureComponentType
) {
return (
<Disclosure as="div" key={title}>
{({ open }) => (
<>
<div>
<div className="select-none bg-gray-50 w-full flex justify-between items-center -mt-px px-3 py-2 border border-gray-200">
<div className="flex gap-4">
<Icon className="w-6 text-gray-800" />
<span className="flex items-center text-sm text-gray-800 font-medium">
{title}
</span>
</div>
<div className="flex gap-2">
{buttons.map((x, index) => (
<button key={index} onClick={x.onClick}>
{x.Icon}
</button>
))}
<Disclosure.Button as="button">
<ChevronRightIcon
className={`${
open ? "rotate-90 transform" : ""
} h-5 w-5 text-gray-800`}
/>
</Disclosure.Button>
</div>
</div>
</div>
<Disclosure.Panel as="div" className="-mt-px">
{children}
</Disclosure.Panel>
</>
)}
</Disclosure>
);
}

17
space_flow/src/pages/FlowPage/components/connection/index.tsx
View file

@ -1,17 +1,8 @@
import { CSSProperties, FC } from 'react';
import { Node } from 'reactflow';
import { ConnectionLineComponentProps } from 'reactflow';
interface ConnectionLineComponentProps {
fromX: number;
fromY: number;
fromPosition: string;
toX: number;
toY: number;
fromNode:Node;
toPosition: string;
connectionLineType: string;
connectionLineStyle: CSSProperties;
}
const ConnectionLineComponent = ({
fromX,
@ -21,9 +12,9 @@ const ConnectionLineComponent = ({
toY,
toPosition,
connectionLineType,
fromNode={},
fromNode,
connectionLineStyle = {} // provide a default value for connectionLineStyle
}) => {
}:ConnectionLineComponentProps) => {
return (
<g>
<path

35
space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -1,39 +1,40 @@
import { Bars2Icon, ComputerDesktopIcon } from "@heroicons/react/24/outline";
import { Bars2Icon } from "@heroicons/react/24/outline";
import DisclosureComponent from "../DisclosureComponent";
import {
nodeColors,
nodeIcons,
nodeNames,
toFirstUpperCase,
} from "../../../../utils";
import { useContext, useEffect, useState } from "react";
import { getAll } from "../../../../controllers/NodesServices";
import { typesContext } from "../../../../contexts/typesContext";
import { APIClassType, APIKindType, APIObjectType } from "../../../../types/api";
export default function ExtraSidebar() {
const [data, setData] = useState({});
const { setTypes} = useContext(typesContext);
async function getTypes(){
let d = await getAll();
setData(d.data);
async function getTypes():Promise<void>{
const initialValue:{[char: string]: string} = {
str: "advanced",
bool: "advanced",
chatOutput: "chat",
chatInput: "chat",
}
let result = await getAll();
setData(result.data);
setTypes(
Object.keys(d.data).reduce(
Object.keys(result.data).reduce(
(acc, curr) => {
Object.keys(d.data[curr]).forEach((c) => {
Object.keys(result.data[curr]).forEach((c:keyof APIKindType) => {
acc[c] = curr;
d.data[curr][c].base_classes?.forEach((b) => {
result.data[curr][c].base_classes?.forEach((b) => {
acc[b] = curr;
});
});
return acc;
},
{
str: "advanced",
bool: "advanced",
chatOutput: "chat",
chatInput: "chat",
}
initialValue
)
);
}
@ -43,20 +44,20 @@ export default function ExtraSidebar() {
}, []);
function onDragStart(event: React.DragEvent<any>, data) {
function onDragStart(event: React.DragEvent<any>, data:{type:string,node?:APIClassType}) {
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("json", JSON.stringify(data));
}
return (
<div className="mt-4 w-full">
{Object.keys(data).map((d, i) => (
{Object.keys(data).map((d:keyof APIObjectType, i) => (
<DisclosureComponent
key={i}
button={{ title: nodeNames[d], Icon: nodeIcons[d] }}
>
<div className="p-2 flex flex-col gap-2">
{Object.keys(data[d]).map((t, k) => (
{Object.keys(data[d]).map((t: string, k) => (
<div key={k}>
<div
draggable

3
space_flow/src/pages/FlowPage/flowManager/index.tsx
View file

@ -3,9 +3,6 @@ import { ReactFlowProvider } from "reactflow";
import FlowPage from "..";
import { TabsContext } from "../../../contexts/tabsContext";
import TabComponent from "./tabComponent";
import { example } from "../../../data_assets/example";
var _ = require("lodash");
export function TabsManager() {
const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
useEffect(() => {

5
space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
View file

@ -2,11 +2,12 @@ import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
import { useContext, useRef, useState } from "react";
import { TabsContext } from "../../../../contexts/tabsContext";
import { FlowType } from "../../../../types/flow";
var _ = require("lodash");
export default function TabComponent({ selected, flow, onClick }) {
const { removeFlow, updateFlow, flows, downloadFlow } =
export default function TabComponent({ selected, flow, onClick }:{flow:FlowType,selected:boolean,onClick:()=>void}) {
const { removeFlow, updateFlow, flows } =
useContext(TabsContext);
const [isRename, setIsRename] = useState(false);
const [value, setValue] = useState("");

18
space_flow/src/pages/FlowPage/index.tsx
View file

@ -7,6 +7,8 @@ import ReactFlow, {
useNodesState,
useReactFlow,
ControlButton,
EdgeChange,
Connection,
} from "reactflow";
import { locationContext } from "../../contexts/locationContext";
import ExtraSidebar from "./components/extraSidebarComponent";
@ -24,6 +26,8 @@ import {
ArrowDownTrayIcon,
ArrowUpTrayIcon,
} from "@heroicons/react/24/outline";
import { FlowType, NodeType } from "../../types/flow";
import { APIClassType } from "../../types/api";
const nodeTypes = {
genericNode: GenericNode,
@ -35,7 +39,7 @@ const nodeTypes = {
var _ = require("lodash");
export default function FlowPage({ flow }) {
export default function FlowPage({ flow }:{flow:FlowType}) {
let { updateFlow, incrementNodeId, downloadFlow, uploadFlow } =
useContext(TabsContext);
const { types, reactFlowInstance, setReactFlowInstance } =
@ -78,7 +82,7 @@ export default function FlowPage({ flow }) {
}, [setExtraComponent, setExtraNavigation]);
const onEdgesChangeMod = useCallback(
(s) => {
(s:EdgeChange[]) => {
onEdgesChange(s);
setNodes((x) => {
let newX = _.cloneDeep(x);
@ -89,7 +93,7 @@ export default function FlowPage({ flow }) {
);
const onConnect = useCallback(
(params) => {
(params:Connection) => {
setEdges((eds) =>
addEdge({ ...params, className: "animate-pulse" }, eds)
);
@ -101,17 +105,17 @@ export default function FlowPage({ flow }) {
[setEdges, setNodes]
);
const onDragOver = useCallback((event) => {
const onDragOver = useCallback((event:React.DragEvent) => {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
}, []);
const onDrop = useCallback(
(event) => {
(event:React.DragEvent) => {
event.preventDefault();
const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
let data = JSON.parse(event.dataTransfer.getData("json"));
let data:{type:string,node?:APIClassType} = JSON.parse(event.dataTransfer.getData("json"));
if (
data.type !== "chatInput" ||
(data.type === "chatInput" &&
@ -123,7 +127,7 @@ export default function FlowPage({ flow }) {
});
let newId = getId();
const newNode = {
const newNode:NodeType = {
id: newId,
type:
data.type === "str"

15
space_flow/src/types/alerts/index.ts Normal file
View file

@ -0,0 +1,15 @@
export type ErrorAlertType = {title:string,list:Array<string>,id:string,removeAlert:(id:string)=>void}
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 = {
closeFunction: () => void;
open?: boolean;
};
export type AlertItemType = {
type: "notice" | "error" | "success";
title: string;
link?: string;
list?: Array<string>;
id: string;
};

15
space_flow/src/types/api/index.ts Normal file
View file

@ -0,0 +1,15 @@
import { Node,Edge,Viewport } from "reactflow"
//kind and class are just representative names to represent the actual structure of the object received by the API
export type APIObjectType = {kind:APIKindType,[key:string]:APIKindType}
export type APIKindType= {class:APIClassType,[key:string]:APIClassType}
export type APITemplateType = {variable:TemplateVariableType,[key:string]:TemplateVariableType}
export type APIClassType ={base_classes:Array<string>,description:string,template:APITemplateType,[key:string]:Array<string>|string|APITemplateType}
export type TemplateVariableType = {type:string,required:boolean,placeholder?:string,list:boolean,show:boolean,multiline?:boolean,value?:any,[key:string]:any}
export type sendAllProps={
nodes: Node[];
edges: Edge[];
viewport: Viewport;
message:string;
chatHistory:{message:string,isSend:boolean}[]
};

4
space_flow/src/types/chat/index.ts Normal file
View file

@ -0,0 +1,4 @@
import { ReactFlowInstance } from 'reactflow';
import { FlowType } from "../flow";
export type ChatType = {flow:FlowType,reactFlowInstance:ReactFlowInstance}

45
space_flow/src/types/components/index.ts Normal file
View file

@ -0,0 +1,45 @@
import { Disclosure } from '@headlessui/react';
import { ForwardRefExoticComponent, ReactElement, ReactNode } from 'react';
import { NodeDataType } from "./../flow/index";
export type InputComponentType = {
value: string;
disabled?: boolean;
onChange: (value: string) => void;
};
export type ToggleComponentType = {
enabled: boolean;
setEnabled: (state: boolean) => void;
disabled: boolean;
};
export type DropDownComponentType = {
title: string;
value: string;
options: string[];
onSelect: (value: string) => void;
};
export type ParameterComponentType = {
data: NodeDataType;
title: string;
id: string;
color: string;
left: boolean;
type: string;
required?: boolean;
name?: string;
tooltipTitle: string;
};
export type InputListComponentType = {value:string[],onChange:(value:string[])=>void,disabled:boolean}
export type TextAreaComponentType = {disabled:boolean,onChange:(value:string[]|string)=>void,value:string[]|string}
export type DisclosureComponentType = {
children: ReactNode;
button: {
title: string;
Icon: ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
buttons?: {
Icon: ReactElement;
title: string;
onClick:(event?:React.MouseEvent)=>void;
}[];
}};

3
space_flow/src/types/entities/index.ts Normal file
View file

@ -0,0 +1,3 @@
import { HomeIcon } from "@heroicons/react/24/outline";
export type sidebarNavigationItemType = { name: string, href: string, icon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>, current: boolean }

9
space_flow/src/types/flow/index.ts
View file

@ -1,6 +1,11 @@
export type flow = {
import { APIClassType } from './../api/index';
import { ReactFlowJsonObject, XYPosition } from "reactflow";
export type FlowType = {
name: string;
id: string;
data: any;
data: ReactFlowJsonObject;
chat: Array<{ message: string; isSend: boolean }>;
};
export type NodeType = {id:string,type:string,position:XYPosition,data:NodeDataType}
export type NodeDataType = {type:string,node?:APIClassType,id:string,value:any}

6
space_flow/src/types/tabs/index.ts
View file

@ -1,12 +1,12 @@
import { flow } from "../flow";
import { FlowType } from "../flow";
export type TabsContextType = {
tabIndex: number;
setTabIndex: (index: number) => void;
flows: Array<flow>;
flows: Array<FlowType>;
removeFlow: (id: string) => void;
addFlow: (flowData?: any) => void;
updateFlow: (newFlow: flow) => void;
updateFlow: (newFlow: FlowType) => void;
incrementNodeId: () => number;
downloadFlow: () => void;
uploadFlow: () => void;

11
space_flow/src/types/typesContext/index.ts Normal file
View file

@ -0,0 +1,11 @@
import { ReactFlowInstance } from "reactflow";
const types:{[char: string]: string}={}
export type typesContextType = {
reactFlowInstance: ReactFlowInstance|null;
setReactFlowInstance: any;
deleteNode: (idx: string) => void;
types: typeof types;
setTypes: (newState: {}) => void;
};

59
space_flow/src/utils.ts
View file

@ -8,9 +8,9 @@ import {
ComputerDesktopIcon,
Bars3CenterLeftIcon,
} from "@heroicons/react/24/outline";
import { Edge, Node } from "reactflow";
import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
export function classNames(...classes) {
export function classNames(...classes:Array<string>) {
return classes.filter(Boolean).join(" ");
}
@ -60,43 +60,7 @@ export const borderLColors = {
gray: "border-l-gray-500",
};
/* export const nodeColors = {
prompt: "#35ADAE",
model: "#4266BE",
chain: "#6344BE",
agent: "#903BBE",
tool: "#DB3392",
memory: "#FF3434",
} */
/* export const nodeColors = {
prompt: "#36D635",
model: "#4266BE",
chain: "#903BBE",
agent: "#FF3434",
tool: "#FEBB35",
memory: "#FFFF33",
} */
/* export const nodeColors = {
prompt: "#36D635",
model: "#35ADAE",
chain: "#903BBE",
agent: "#DB3392",
tool: "#FF9135",
memory: "#FFDC35",
} */
/* export const nodeColors = {
prompt: "#36D635",
model: "#35ADAE",
chain: "#903BBE",
agent: "#DB3392",
tool: "#FF3434",
memory: "#FF9135",
} */
export const nodeColors = {
export const nodeColors: {[char: string]: string} = {
prompts: "#4367BF",
llms: "#6344BE",
chains: "#FE7500",
@ -107,7 +71,7 @@ export const nodeColors = {
chat: "#2563EB",
};
export const nodeNames = {
export const nodeNames:{[char: string]: string} = {
prompts: "Prompts",
llms: "LLMs",
chains: "Chains",
@ -119,7 +83,7 @@ export const nodeNames = {
};
export const nodeIcons = {
export const nodeIcons:{[char: string]: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>} = {
agents: RocketLaunchIcon,
chains: LinkIcon,
memories: CpuChipIcon,
@ -220,7 +184,7 @@ export const taskTypeMap: { [key: string]: string } = {
MULTICLASS_CLASSIFICATION: "Multiclass Classification",
};
const charWidths = {
const charWidths:{[char: string]: number} = {
" ": 0.2,
"!": 0.2,
'"': 0.3,
@ -262,7 +226,7 @@ for (let i = 97; i <= 122; i++) {
charWidths[String.fromCharCode(i)] = 0.5;
}
export function measureTextWidth(text: string, fontSize) {
export function measureTextWidth(text: string, fontSize:number) {
let wordWidth = 0;
for (let j = 0; j < text.length; j++) {
let char = text[j];
@ -272,7 +236,7 @@ export function measureTextWidth(text: string, fontSize) {
return wordWidth;
}
export function measureTextHeight(text: string, width, fontSize) {
export function measureTextHeight(text: string, width:number, fontSize:number) {
const charHeight = fontSize;
const lineHeight = charHeight * 1.5;
const words = text.split(" ");
@ -321,7 +285,7 @@ export function snakeToNormalCase(str: string) {
.join(" ");
}
export function roundNumber(x, decimals) {
export function roundNumber(x:number, decimals:number) {
return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals);
}
@ -335,9 +299,10 @@ export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
}
export function isValidConnection(
{ source, target, sourceHandle, targetHandle },
reactFlowInstance
{ source, target, sourceHandle, targetHandle }:Connection,
reactFlowInstance:ReactFlowInstance
) {
console.log(target)
if (
sourceHandle.split('|')[0] === targetHandle.split("|")[0] ||
sourceHandle.split('|').slice(2).some((t) => t === targetHandle.split("|")[0]) ||