diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx index 8787b2513..0a545eb74 100644 --- a/space_flow/src/App.tsx +++ b/space_flow/src/App.tsx @@ -36,7 +36,7 @@ export default function App() { setSuccessOpen, } = useContext(alertContext); - const [alertsList, setAlertsList] = useState([]); + const [alertsList, setAlertsList] = useState,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
-
+
diff --git a/space_flow/src/CustomNodes/BooleanNode/index.tsx b/space_flow/src/CustomNodes/BooleanNode/index.tsx index 733d657f6..2e824c373 100644 --- a/space_flow/src/CustomNodes/BooleanNode/index.tsx +++ b/space_flow/src/CustomNodes/BooleanNode/index.tsx @@ -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 (
@@ -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]] }} > diff --git a/space_flow/src/CustomNodes/ChatInputNode/index.tsx b/space_flow/src/CustomNodes/ChatInputNode/index.tsx index db0852907..2b24b2c96 100644 --- a/space_flow/src/CustomNodes/ChatInputNode/index.tsx +++ b/space_flow/src/CustomNodes/ChatInputNode/index.tsx @@ -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 (
- isValidConnection(data, connection) + isValidConnection(connection,reactFlowInstance) } position={Position.Left} id={"str|Prefix|" + data.id} @@ -34,7 +33,7 @@ export default function ChatInputNode({ data }) { - isValidConnection(data, connection) + isValidConnection(connection,reactFlowInstance) } position={Position.Right} id={"str|str|" + data.id} diff --git a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx index b5445860d..3f05a8600 100644 --- a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx +++ b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx @@ -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 (
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" diff --git a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 6faf594f8..d90d8f270 100644 --- a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -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({ { + onChange={(t:string[]) => { data.node.template[name].value = t; }} /> @@ -79,7 +80,7 @@ export default function ParameterComponent({ { + onChange={(t:string) => { data.node.template[name].value = t; }} /> diff --git a/space_flow/src/CustomNodes/GenericNode/index.tsx b/space_flow/src/CustomNodes/GenericNode/index.tsx index c4490c0e2..aea6320e3 100644 --- a/space_flow/src/CustomNodes/GenericNode/index.tsx +++ b/space_flow/src/CustomNodes/GenericNode/index.tsx @@ -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) => (
{idx === 0 ? (
Inputs:
diff --git a/space_flow/src/CustomNodes/InputNode/index.tsx b/space_flow/src/CustomNodes/InputNode/index.tsx index a6aa084bd..8487880da 100644 --- a/space_flow/src/CustomNodes/InputNode/index.tsx +++ b/space_flow/src/CustomNodes/InputNode/index.tsx @@ -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 (
@@ -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]] }} > diff --git a/space_flow/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/space_flow/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx index f661de7f8..b627c5fa5 100644 --- a/space_flow/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx +++ b/space_flow/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx @@ -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 ( {type === "error"? -
+
{ - 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 }) {
:(type === "notice" ? -
+
{ - 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 }) {
: -
+
{ - 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" > diff --git a/space_flow/src/alerts/alertDropDown/index.tsx b/space_flow/src/alerts/alertDropDown/index.tsx index 87ecb5478..e05e4c665 100644 --- a/space_flow/src/alerts/alertDropDown/index.tsx +++ b/space_flow/src/alerts/alertDropDown/index.tsx @@ -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; - id: string; -}; -export default function AlertDropdown({closeFunction, open}: AlertDropdownProps) { +export default function AlertDropdown({closeFunction, open}: AlertDropdownType) { const { notificationList, clearNotificationList, diff --git a/space_flow/src/alerts/error/index.tsx b/space_flow/src/alerts/error/index.tsx index febcdd3a5..65a582be5 100644 --- a/space_flow/src/alerts/error/index.tsx +++ b/space_flow/src/alerts/error/index.tsx @@ -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){ diff --git a/space_flow/src/alerts/notice/index.tsx b/space_flow/src/alerts/notice/index.tsx index 83992597e..86e55c8e4 100644 --- a/space_flow/src/alerts/notice/index.tsx +++ b/space_flow/src/alerts/notice/index.tsx @@ -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){ diff --git a/space_flow/src/alerts/success/index.tsx b/space_flow/src/alerts/success/index.tsx index a713ed90b..07659c19e 100644 --- a/space_flow/src/alerts/success/index.tsx +++ b/space_flow/src/alerts/success/index.tsx @@ -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){ diff --git a/space_flow/src/components/ExtraSidebarComponent/index.tsx b/space_flow/src/components/ExtraSidebarComponent/index.tsx index 8f2220cd0..4070ff79e 100644 --- a/space_flow/src/components/ExtraSidebarComponent/index.tsx +++ b/space_flow/src/components/ExtraSidebarComponent/index.tsx @@ -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 */}
- {/*
- -
*/}
diff --git a/space_flow/src/components/HeaderComponent/index.tsx b/space_flow/src/components/HeaderComponent/index.tsx index fc6442161..1064b7e71 100644 --- a/space_flow/src/components/HeaderComponent/index.tsx +++ b/space_flow/src/components/HeaderComponent/index.tsx @@ -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}){
diff --git a/space_flow/src/components/SidebarComponent/sidebarButton/index.tsx b/space_flow/src/components/SidebarComponent/sidebarButton/index.tsx index 0540d1964..d98b95f9f 100644 --- a/space_flow/src/components/SidebarComponent/sidebarButton/index.tsx +++ b/space_flow/src/components/SidebarComponent/sidebarButton/index.tsx @@ -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 ( <> diff --git a/space_flow/src/components/TooltipComponent/index.tsx b/space_flow/src/components/TooltipComponent/index.tsx index 051062af1..a111d047b 100644 --- a/space_flow/src/components/TooltipComponent/index.tsx +++ b/space_flow/src/components/TooltipComponent/index.tsx @@ -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 {children}; } diff --git a/space_flow/src/components/breadcrumbComponent/index.tsx b/space_flow/src/components/breadcrumbComponent/index.tsx index 809a4f144..e79ea49b7 100644 --- a/space_flow/src/components/breadcrumbComponent/index.tsx +++ b/space_flow/src/components/breadcrumbComponent/index.tsx @@ -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('/'); diff --git a/space_flow/src/components/chatComponent/index.tsx b/space_flow/src/components/chatComponent/index.tsx index 6a31d6560..c01ae84f6 100644 --- a/space_flow/src/components/chatComponent/index.tsx +++ b/space_flow/src/components/chatComponent/index.tsx @@ -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()){ diff --git a/space_flow/src/components/dropdownComponent/index.tsx b/space_flow/src/components/dropdownComponent/index.tsx index 720c8ea6a..2eb821909 100644 --- a/space_flow/src/components/dropdownComponent/index.tsx +++ b/space_flow/src/components/dropdownComponent/index.tsx @@ -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 ( <> diff --git a/space_flow/src/components/inputComponent/index.tsx b/space_flow/src/components/inputComponent/index.tsx index 38bb559a0..09d050051 100644 --- a/space_flow/src/components/inputComponent/index.tsx +++ b/space_flow/src/components/inputComponent/index.tsx @@ -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){ diff --git a/space_flow/src/components/inputListComponent/index.tsx b/space_flow/src/components/inputListComponent/index.tsx index 6ab0fc184..ae583b1f6 100644 --- a/space_flow/src/components/inputListComponent/index.tsx +++ b/space_flow/src/components/inputListComponent/index.tsx @@ -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){ diff --git a/space_flow/src/components/textAreaComponent/index.tsx b/space_flow/src/components/textAreaComponent/index.tsx index 258054919..5ffaa6e60 100644 --- a/space_flow/src/components/textAreaComponent/index.tsx +++ b/space_flow/src/components/textAreaComponent/index.tsx @@ -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'} -
diff --git a/space_flow/src/components/toggleComponent/index.tsx b/space_flow/src/components/toggleComponent/index.tsx index 60def65e1..b6c310ace 100644 --- a/space_flow/src/components/toggleComponent/index.tsx +++ b/space_flow/src/components/toggleComponent/index.tsx @@ -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 }) {
{ + onChange={(x:boolean) => { setEnabled(x); }} className={classNames( diff --git a/space_flow/src/contexts/alertContext.tsx b/space_flow/src/contexts/alertContext.tsx index f749cef39..603b9d82d 100644 --- a/space_flow/src/contexts/alertContext.tsx +++ b/space_flow/src/contexts/alertContext.tsx @@ -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; - pushNotificationList: (Object) => void; + notificationList: Array; + 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(initialValue); -export function AlertProvider({ children }) { +export function AlertProvider({ children }:{children:ReactNode}) { const [errorData, setErrorDataState] = useState<{ title: string; list?: Array; @@ -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) ); diff --git a/space_flow/src/contexts/index.tsx b/space_flow/src/contexts/index.tsx index 8ad06ab0b..f09a207a9 100644 --- a/space_flow/src/contexts/index.tsx +++ b/space_flow/src/contexts/index.tsx @@ -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 ( <> diff --git a/space_flow/src/contexts/locationContext.tsx b/space_flow/src/contexts/locationContext.tsx index 3850f8a1c..dbefaa7c9 100644 --- a/space_flow/src/contexts/locationContext.tsx +++ b/space_flow/src/contexts/locationContext.tsx @@ -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(initialValue); -export function LocationProvider({ children }) { +export function LocationProvider({ children }:{children:ReactNode}) { const [current, setCurrent] = useState(initialValue.current); const [isStackedOpen, setIsStackedOpen] = useState( initialValue.isStackedOpen diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx index d67fba95e..1678a7c2c 100644 --- a/space_flow/src/contexts/tabsContext.tsx +++ b/space_flow/src/contexts/tabsContext.tsx @@ -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( let _ = require("lodash"); -export function TabsProvider({ children }) { +export function TabsProvider({ children }:{children:ReactNode}) { const [tabIndex, setTabIndex] = useState(0); - const [flows, setFlows] = useState>([]); + const [flows, setFlows] = useState>([]); 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); diff --git a/space_flow/src/contexts/typesContext.tsx b/space_flow/src/contexts/typesContext.tsx index 789c1a041..664a3dcf6 100644 --- a/space_flow/src/contexts/typesContext.tsx +++ b/space_flow/src/contexts/typesContext.tsx @@ -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(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 ( diff --git a/space_flow/src/controllers/NodesServices/index.ts b/space_flow/src/controllers/NodesServices/index.ts index 28403741f..7f1d0e310 100644 --- a/space_flow/src/controllers/NodesServices/index.ts +++ b/space_flow/src/controllers/NodesServices/index.ts @@ -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> { 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); } diff --git a/space_flow/src/controllers/UiGenerator/index.ts b/space_flow/src/controllers/UiGenerator/index.ts deleted file mode 100644 index 21a8bd4c1..000000000 --- a/space_flow/src/controllers/UiGenerator/index.ts +++ /dev/null @@ -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 -} diff --git a/space_flow/src/data_assets/agent.ts b/space_flow/src/data_assets/agent.ts deleted file mode 100644 index bafa729a8..000000000 --- a/space_flow/src/data_assets/agent.ts +++ /dev/null @@ -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" -} \ No newline at end of file diff --git a/space_flow/src/data_assets/example.ts b/space_flow/src/data_assets/example.ts deleted file mode 100644 index 2aa235076..000000000 --- a/space_flow/src/data_assets/example.ts +++ /dev/null @@ -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 - } -} \ No newline at end of file diff --git a/space_flow/src/data_assets/llm_chain.ts b/space_flow/src/data_assets/llm_chain.ts deleted file mode 100644 index ae16b8fdb..000000000 --- a/space_flow/src/data_assets/llm_chain.ts +++ /dev/null @@ -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" -} \ No newline at end of file diff --git a/space_flow/src/data_assets/prompt.ts b/space_flow/src/data_assets/prompt.ts deleted file mode 100644 index 5baff314a..000000000 --- a/space_flow/src/data_assets/prompt.ts +++ /dev/null @@ -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" -} \ No newline at end of file diff --git a/space_flow/src/modals/textAreaModal/index.tsx b/space_flow/src/modals/textAreaModal/index.tsx index 3a15c4647..b0a465bc4 100644 --- a/space_flow/src/modals/textAreaModal/index.tsx +++ b/space_flow/src/modals/textAreaModal/index.tsx @@ -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); diff --git a/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx index 3b7b37e20..0206ef101 100644 --- a/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx @@ -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 ( - - {({ open }) => ( - <> -
-
-
- - - {title} - -
-
- {buttons.map((x, index)=>( - - ))} - - - -
-
-
- - {children} - - - - )} - - ); + button: { title, Icon, buttons = [] }, + children, +}: DisclosureComponentType +) { + return ( + + {({ open }) => ( + <> +
+
+
+ + + {title} + +
+
+ {buttons.map((x, index) => ( + + ))} + + + +
+
+
+ + {children} + + + )} + + ); } diff --git a/space_flow/src/pages/FlowPage/components/connection/index.tsx b/space_flow/src/pages/FlowPage/components/connection/index.tsx index 7d5b15703..d45a534ac 100644 --- a/space_flow/src/pages/FlowPage/components/connection/index.tsx +++ b/space_flow/src/pages/FlowPage/components/connection/index.tsx @@ -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 ( { + 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, data) { + function onDragStart(event: React.DragEvent, data:{type:string,node?:APIClassType}) { event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("json", JSON.stringify(data)); } return (
- {Object.keys(data).map((d, i) => ( + {Object.keys(data).map((d:keyof APIObjectType, i) => (
- {Object.keys(data[d]).map((t, k) => ( + {Object.keys(data[d]).map((t: string, k) => (
{ diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx index 138d399b9..aa596810f 100644 --- a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx @@ -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(""); diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index 6aafdebe2..0a76e4829 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/space_flow/src/pages/FlowPage/index.tsx @@ -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" diff --git a/space_flow/src/types/alerts/index.ts b/space_flow/src/types/alerts/index.ts new file mode 100644 index 000000000..08dd3ffef --- /dev/null +++ b/space_flow/src/types/alerts/index.ts @@ -0,0 +1,15 @@ +export type ErrorAlertType = {title:string,list:Array,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; + id: string; + }; \ No newline at end of file diff --git a/space_flow/src/types/api/index.ts b/space_flow/src/types/api/index.ts new file mode 100644 index 000000000..aa36ac2fd --- /dev/null +++ b/space_flow/src/types/api/index.ts @@ -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,description:string,template:APITemplateType,[key:string]:Array|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}[] +}; \ No newline at end of file diff --git a/space_flow/src/types/chat/index.ts b/space_flow/src/types/chat/index.ts new file mode 100644 index 000000000..6ceb9dcf1 --- /dev/null +++ b/space_flow/src/types/chat/index.ts @@ -0,0 +1,4 @@ +import { ReactFlowInstance } from 'reactflow'; +import { FlowType } from "../flow"; + +export type ChatType = {flow:FlowType,reactFlowInstance:ReactFlowInstance} \ No newline at end of file diff --git a/space_flow/src/types/components/index.ts b/space_flow/src/types/components/index.ts new file mode 100644 index 000000000..ceb5d8fc3 --- /dev/null +++ b/space_flow/src/types/components/index.ts @@ -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>; + buttons?: { + Icon: ReactElement; + title: string; + onClick:(event?:React.MouseEvent)=>void; + }[]; + }}; \ No newline at end of file diff --git a/space_flow/src/types/entities/index.ts b/space_flow/src/types/entities/index.ts new file mode 100644 index 000000000..c0d591cfc --- /dev/null +++ b/space_flow/src/types/entities/index.ts @@ -0,0 +1,3 @@ +import { HomeIcon } from "@heroicons/react/24/outline"; + +export type sidebarNavigationItemType = { name: string, href: string, icon: React.ForwardRefExoticComponent>, current: boolean } diff --git a/space_flow/src/types/flow/index.ts b/space_flow/src/types/flow/index.ts index b8042ea3e..e0e8b11ac 100644 --- a/space_flow/src/types/flow/index.ts +++ b/space_flow/src/types/flow/index.ts @@ -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} \ No newline at end of file diff --git a/space_flow/src/types/tabs/index.ts b/space_flow/src/types/tabs/index.ts index d1e286b2e..85f70d93a 100644 --- a/space_flow/src/types/tabs/index.ts +++ b/space_flow/src/types/tabs/index.ts @@ -1,12 +1,12 @@ -import { flow } from "../flow"; +import { FlowType } from "../flow"; export type TabsContextType = { tabIndex: number; setTabIndex: (index: number) => void; - flows: Array; + flows: Array; removeFlow: (id: string) => void; addFlow: (flowData?: any) => void; - updateFlow: (newFlow: flow) => void; + updateFlow: (newFlow: FlowType) => void; incrementNodeId: () => number; downloadFlow: () => void; uploadFlow: () => void; diff --git a/space_flow/src/types/typesContext/index.ts b/space_flow/src/types/typesContext/index.ts new file mode 100644 index 000000000..e943dafe3 --- /dev/null +++ b/space_flow/src/types/typesContext/index.ts @@ -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; +}; \ No newline at end of file diff --git a/space_flow/src/utils.ts b/space_flow/src/utils.ts index 093742370..a054129be 100644 --- a/space_flow/src/utils.ts +++ b/space_flow/src/utils.ts @@ -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) { 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>} = { 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): Array { } 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]) ||