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, setSuccessOpen,
} = useContext(alertContext); } = useContext(alertContext);
const [alertsList, setAlertsList] = useState([]); const [alertsList, setAlertsList] = useState<Array<{type:string,data:{title:string,list?:Array<string>,link?:string},id:string}>>([]);
useEffect(() => { useEffect(() => {
if (errorOpen && errorData) { if (errorOpen && errorData) {
@ -69,33 +69,17 @@ export default function App() {
} }
}, [errorData, errorOpen, noticeData, noticeOpen, successData, successOpen]); }, [errorData, errorOpen, noticeData, noticeOpen, successData, successOpen]);
const removeAlert = (id: number) => { const removeAlert = (id: string) => {
setAlertsList((prevAlertsList) => setAlertsList((prevAlertsList) =>
prevAlertsList.filter((alert) => alert.id !== id) 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 ( return (
//need parent component with width and height //need parent component with width and height
<div className="h-full flex flex-col"> <div className="h-full flex flex-col">
<div className="flex grow-0 shrink basis-auto"> <div className="flex grow-0 shrink basis-auto">
<Header userNavigation={userNavigation} user={user}></Header> <Header></Header>
</div> </div>
<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden"> <div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
<Sidebar /> <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 ToggleComponent from "../../components/toggleComponent";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { typesContext } from "../../contexts/typesContext"; 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 [enabled, setEnabled] = useState(false);
const {types, deleteNode} = useContext(typesContext); const {types, deleteNode, reactFlowInstance} = useContext(typesContext);
return ( return (
<div className="prompt-node relative bg-white rounded-lg solid border flex flex-col justify-center"> <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 "> <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" type="source"
position={Position.Right} position={Position.Right}
id={data.type} 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" 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]] }} style={{ borderLeftColor: nodeColors[types[data.type]] }}
></Handle> ></Handle>

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

@ -1,16 +1,15 @@
import { import {
Bars3CenterLeftIcon, Bars3CenterLeftIcon,
ChatBubbleBottomCenterTextIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import InputComponent from "../../components/inputComponent"; import { isValidConnection, nodeColors } from "../../utils";
import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
import { Handle, Position } from "reactflow"; import { Handle, Position } from "reactflow";
import Tooltip from "../../components/TooltipComponent"; import Tooltip from "../../components/TooltipComponent";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import { useContext } from "react"; import { useContext } from "react";
import { NodeDataType } from "../../types/flow";
export default function ChatInputNode({ data }) { export default function ChatInputNode({ data }:{data:NodeDataType}) {
const { types } = useContext(typesContext); const { types,reactFlowInstance } = useContext(typesContext);
return ( return (
<div <div
className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" 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 <Handle
type="target" type="target"
isValidConnection={(connection) => isValidConnection={(connection) =>
isValidConnection(data, connection) isValidConnection(connection,reactFlowInstance)
} }
position={Position.Left} position={Position.Left}
id={"str|Prefix|" + data.id} id={"str|Prefix|" + data.id}
@ -34,7 +33,7 @@ export default function ChatInputNode({ data }) {
<Handle <Handle
type="source" type="source"
isValidConnection={(connection) => isValidConnection={(connection) =>
isValidConnection(data, connection) isValidConnection(connection,reactFlowInstance)
} }
position={Position.Right} position={Position.Right}
id={"str|str|" + data.id} 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 Tooltip from "../../components/TooltipComponent";
import { useContext } from "react"; import { useContext } from "react";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import { NodeDataType } from "../../types/flow";
export default function ChatOutputNode({ data }) { export default function ChatOutputNode({ data }:{data:NodeDataType}) {
const {types} = useContext(typesContext); const {types,reactFlowInstance} = useContext(typesContext);
return ( 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]]}}> <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"> <Tooltip title="Message: str">
<Handle <Handle
type="target" type="target"
isValidConnection={(connection) => isValidConnection(data,connection)} isValidConnection={(connection) => isValidConnection(connection,reactFlowInstance)}
position={Position.Left} position={Position.Left}
id={"str|output|"+data.id} id={"str|output|"+data.id}
className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white" 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 InputListComponent from "../../../../components/inputListComponent";
import TextAreaComponent from "../../../../components/textAreaComponent"; import TextAreaComponent from "../../../../components/textAreaComponent";
import { typesContext } from "../../../../contexts/typesContext"; import { typesContext } from "../../../../contexts/typesContext";
import { ParameterComponentType } from "../../../../types/components";
export default function ParameterComponent({ export default function ParameterComponent({
left, left,
@ -22,7 +23,7 @@ export default function ParameterComponent({
type, type,
name = "", name = "",
required = false, required = false,
}) { }:ParameterComponentType) {
const ref = useRef(null); const ref = useRef(null);
const updateNodeInternals = useUpdateNodeInternals(); const updateNodeInternals = useUpdateNodeInternals();
const [position, setPosition] = useState(0); const [position, setPosition] = useState(0);
@ -70,7 +71,7 @@ export default function ParameterComponent({
<InputListComponent <InputListComponent
disabled={disabled} disabled={disabled}
value={!data.node.template[name].value || data.node.template[name].value === "" ? [""] : data.node.template[name].value} 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; data.node.template[name].value = t;
}} }}
/> />
@ -79,7 +80,7 @@ export default function ParameterComponent({
<TextAreaComponent <TextAreaComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t) => { onChange={(t:string) => {
data.node.template[name].value = t; 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 ParameterComponent from "./components/parameterComponent";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import { useContext } from "react"; 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 {types, deleteNode} = useContext(typesContext);
const Icon = nodeIcons[types[data.type]]; const Icon = nodeIcons[types[data.type]];
@ -38,7 +40,7 @@ export default function GenericNode({ data }) {
<> <>
{Object.keys(data.node.template) {Object.keys(data.node.template)
.filter((t) => t.charAt(0) !== "_") .filter((t) => t.charAt(0) !== "_")
.map((t, idx) => ( .map((t:string, idx) => (
<div key={idx}> <div key={idx}>
{idx === 0 ? ( {idx === 0 ? (
<div className="px-5 py-2 mt-2 text-center">Inputs:</div> <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 { import {
isValidConnection, isValidConnection,
nodeColors, nodeColors,
nodeIcons,
snakeToNormalCase,
} from "../../utils"; } from "../../utils";
import { Handle, Position } from "reactflow"; import { Handle, Position } from "reactflow";
import { useContext, useEffect } from "react"; import { useContext } from "react";
import Tooltip from "../../components/TooltipComponent"; import Tooltip from "../../components/TooltipComponent";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import TextAreaComponent from "../../components/textAreaComponent"; import { NodeDataType } from "../../types/flow";
export default function InputNode({ data }) { export default function InputNode({ data }:{data:NodeDataType}) {
const {types, deleteNode} = useContext(typesContext); console.log(data)
const {types, deleteNode,reactFlowInstance} = useContext(typesContext);
return ( return (
<div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center"> <div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
<Tooltip title="Prefix: str"> <Tooltip title="Prefix: str">
@ -22,7 +21,7 @@ export default function InputNode({ data }) {
position={Position.Left} position={Position.Left}
id={"str|Prefix|" + data.id} id={"str|Prefix|" + data.id}
isValidConnection={(connection) => 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" 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]] }} style={{ borderLeftColor: nodeColors[types[data.type]] }}
@ -59,7 +58,7 @@ export default function InputNode({ data }) {
type="source" type="source"
position={Position.Right} position={Position.Right}
id={data.type} 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" 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]] }} style={{ borderLeftColor: nodeColors[types[data.type]] }}
></Handle> ></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 { Link } from "react-router-dom";
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { useState } from "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 [show, setShow] = useState(true);
const type = dropItem.type; const type = dropItem.type;
console.log(dropItem.id)
return ( return (
<Transition <Transition
@ -20,7 +22,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
leaveTo={"transform translate-x-[-100%]"} leaveTo={"transform translate-x-[-100%]"}
> >
{type === "error"? {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"> <div className="flex-shrink-0">
<XCircleIcon <XCircleIcon
className="h-5 w-5 text-red-400" className="h-5 w-5 text-red-400"
@ -48,7 +50,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
<button <button
type="button" type="button"
onClick={() => { 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" 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>
</div> </div>
:(type === "notice" ? :(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"> <div className="flex-shrink-0">
<InformationCircleIcon <InformationCircleIcon
className="h-5 w-5 text-blue-400" className="h-5 w-5 text-blue-400"
@ -86,7 +88,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
<button <button
type="button" type="button"
onClick={() => { 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" 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> </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"> <div className="flex-shrink-0">
<CheckCircleIcon <CheckCircleIcon
className="h-5 w-5 text-green-400" className="h-5 w-5 text-green-400"
@ -114,7 +116,7 @@ export default function SingleAlert({ dropItem, removeAlert }) {
<button <button
type="button" type="button"
onClick={() => { 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" 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 { useContext } from "react";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { import {
CheckCircleIcon,
InformationCircleIcon,
XCircleIcon,
XMarkIcon, XMarkIcon,
} from "@heroicons/react/24/solid"; } from "@heroicons/react/24/solid";
import { Link } from "react-router-dom";
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { TrashIcon } from "@heroicons/react/24/outline"; import { TrashIcon } from "@heroicons/react/24/outline";
import SingleAlert from "./components/singleAlertComponent"; 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 { const {
notificationList, notificationList,
clearNotificationList, clearNotificationList,

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

@ -1,8 +1,9 @@
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { XCircleIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { XCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react"; 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); const [show, setShow] = useState(true);
useEffect(() => { useEffect(() => {
if(show){ 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 { InformationCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link } from "react-router-dom"; 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); const [show, setShow] = useState(true);
useEffect(() => { useEffect(() => {
if(show){ if(show){

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

@ -1,8 +1,9 @@
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react"; 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); const [show, setShow] = useState(true);
useEffect(() => { useEffect(() => {
if(show){ 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"; import { TabsContext } from "../../contexts/tabsContext";
export default function ExtraSidebar() { export default function ExtraSidebar() {
const {uploadFlow} = useContext(TabsContext)
const { const {
current, current,
isStackedOpen, isStackedOpen,
@ -124,11 +123,7 @@ export default function ExtraSidebar() {
) : ( ) : (
extraComponent extraComponent
)} )}
{/* need to convert to multi stackbar logic */}
</div> </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> </div>
</aside> </aside>
</> </>

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

@ -1,18 +1,13 @@
import { Fragment, useContext, useState } from 'react' import { useContext, useState } from 'react'
import { Menu, Transition } from '@headlessui/react'
import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
import { import {
BellIcon, BellIcon,
MoonIcon,
} from '@heroicons/react/24/outline' } from '@heroicons/react/24/outline'
import { classNames } from '../../utils'
import { Link } from 'react-router-dom'
import Breadcrumb from '../breadcrumbComponent' import Breadcrumb from '../breadcrumbComponent'
import { alertContext } from '../../contexts/alertContext' import { alertContext } from '../../contexts/alertContext'
import { useLayer,Arrow } from 'react-laag' import { useLayer } from 'react-laag'
import AlertDropdown from '../../alerts/alertDropDown' import AlertDropdown from '../../alerts/alertDropDown'
export default function Header({user, userNavigation}){ export default function Header(){
const {notificationCenter, setNotificationCenter} = useContext(alertContext) const {notificationCenter, setNotificationCenter} = useContext(alertContext)
const [isOpen,setIsOpen] = useState(false) const [isOpen,setIsOpen] = useState(false)
const {layerProps,renderLayer, triggerProps} = useLayer({ const {layerProps,renderLayer, triggerProps} = useLayer({
@ -55,52 +50,6 @@ export default function Header({user, userNavigation}){
<BellIcon className="h-6 w-6" aria-hidden="true" /> <BellIcon className="h-6 w-6" aria-hidden="true" />
</button>{renderLayer(<div {...layerProps}><AlertDropdown closeFunction={()=>setIsOpen(false)} open={isOpen}></AlertDropdown></div>)} </button>{renderLayer(<div {...layerProps}><AlertDropdown closeFunction={()=>setIsOpen(false)} open={isOpen}></AlertDropdown></div>)}
</span> </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> </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 { Link } from "react-router-dom"
import { useContext } from "react" import { useContext } from "react"
import { locationContext } from "../../../contexts/locationContext"; 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); let {current}= useContext(locationContext);
return ( return (
<> <>

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

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

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

@ -1,9 +1,10 @@
import { Listbox, Transition } from "@headlessui/react"; import { Listbox, Transition } from "@headlessui/react";
import { ChevronUpDownIcon, CheckIcon } from "@heroicons/react/24/outline"; import { ChevronUpDownIcon, CheckIcon } from "@heroicons/react/24/outline";
import { Fragment } from "react"; import { Fragment } from "react";
import { DropDownComponentType } from "../../types/components";
import { classNames } from "../../utils"; import { classNames } from "../../utils";
export default function Dropdown({title, value, options, onSelect}) { export default function Dropdown({title, value, options, onSelect}:DropDownComponentType) {
return ( return (
<> <>
<Listbox value={value} onChange={onSelect}> <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 { 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 ?? ""); const [myValue, setMyValue] = useState(value ?? "");
useEffect(()=> { useEffect(()=> {
if(disabled){ 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 { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { InputListComponentType } from "../../types/components";
var _ = require("lodash"); var _ = require("lodash");
export default function InputListComponent({ value, onChange, disabled}) { export default function InputListComponent({ value, onChange, disabled}:InputListComponentType) {
const [inputList, setInputList] = useState(value ?? [""]); const [inputList, setInputList] = useState(value ?? [""]);
useEffect(()=> { useEffect(()=> {
if(disabled){ 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 { useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import TextAreaModal from "../../modals/textAreaModal"; 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 [myValue, setMyValue] = useState(value);
const { openPopUp } = useContext(PopUpContext); const { openPopUp } = useContext(PopUpContext);
useEffect(() => { useEffect(() => {
@ -23,7 +24,7 @@ export default function TextAreaComponent({ value, onChange, disabled }) {
> >
{myValue !== "" ? myValue : 'Text empty'} {myValue !== "" ? myValue : 'Text empty'}
</span> </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" /> <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
</button> </button>
</div> </div>

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

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

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

@ -1,5 +1,5 @@
import { createContext, useState } from "react"; import { createContext, ReactNode, useState } from "react";
import { alertDropdownItem } from "../alerts/alertDropDown"; import { AlertItemType } from "../types/alerts";
var _ = require("lodash"); var _ = require("lodash");
@ -19,14 +19,14 @@ type alertContextType = {
setSuccessOpen: (newState: boolean) => void; setSuccessOpen: (newState: boolean) => void;
notificationCenter: boolean; notificationCenter: boolean;
setNotificationCenter: (newState: boolean) => void; setNotificationCenter: (newState: boolean) => void;
notificationList: Array<alertDropdownItem>; notificationList: Array<AlertItemType>;
pushNotificationList: (Object) => void; pushNotificationList: (Object:AlertItemType) => void;
clearNotificationList: () => void; clearNotificationList: () => void;
removeFromNotificationList: (index: number) => void; removeFromNotificationList: (index: string) => void;
}; };
//initial values to alertContextType //initial values to alertContextType
const initialValue = { const initialValue:alertContextType = {
errorData: { title: "", list: [] }, errorData: { title: "", list: [] },
setErrorData: () => {}, setErrorData: () => {},
errorOpen: false, errorOpen: false,
@ -49,7 +49,7 @@ const initialValue = {
export const alertContext = createContext<alertContextType>(initialValue); export const alertContext = createContext<alertContextType>(initialValue);
export function AlertProvider({ children }) { export function AlertProvider({ children }:{children:ReactNode}) {
const [errorData, setErrorDataState] = useState<{ const [errorData, setErrorDataState] = useState<{
title: string; title: string;
list?: Array<string>; list?: Array<string>;
@ -66,7 +66,7 @@ export function AlertProvider({ children }) {
const [successOpen, setSuccessOpen] = useState(false); const [successOpen, setSuccessOpen] = useState(false);
const [notificationCenter, setNotificationCenter] = useState(false); const [notificationCenter, setNotificationCenter] = useState(false);
const [notificationList, setNotificationList] = useState([]); const [notificationList, setNotificationList] = useState([]);
const pushNotificationList = (notification: alertDropdownItem) => { const pushNotificationList = (notification: AlertItemType) => {
setNotificationList((old) => { setNotificationList((old) => {
let newNotificationList = _.cloneDeep(old); let newNotificationList = _.cloneDeep(old);
newNotificationList.unshift(notification); newNotificationList.unshift(notification);
@ -114,7 +114,7 @@ export function AlertProvider({ children }) {
function clearNotificationList() { function clearNotificationList() {
setNotificationList([]); setNotificationList([]);
} }
function removeFromNotificationList(index: number) { function removeFromNotificationList(index: string) {
setNotificationList((prevAlertsList) => setNotificationList((prevAlertsList) =>
prevAlertsList.filter((alert) => alert.id !== index) 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 { AlertProvider } from "./alertContext";
import { LocationProvider } from "./locationContext"; import { LocationProvider } from "./locationContext";
import PopUpProvider from "./popUpContext"; import PopUpProvider from "./popUpContext";
import { TabsProvider } from "./tabsContext"; import { TabsProvider } from "./tabsContext";
import { TypesProvider } from "./typesContext"; import { TypesProvider } from "./typesContext";
export default function ContextWrapper({ children }) { export default function ContextWrapper({ children }:{children:ReactNode}) {
//element to wrap all context //element to wrap all context
return ( 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 //types for location context
type locationContextType = { type locationContextType = {
@ -50,7 +50,7 @@ const initialValue = {
export const locationContext = createContext<locationContextType>(initialValue); export const locationContext = createContext<locationContextType>(initialValue);
export function LocationProvider({ children }) { export function LocationProvider({ children }:{children:ReactNode}) {
const [current, setCurrent] = useState(initialValue.current); const [current, setCurrent] = useState(initialValue.current);
const [isStackedOpen, setIsStackedOpen] = useState( const [isStackedOpen, setIsStackedOpen] = useState(
initialValue.isStackedOpen initialValue.isStackedOpen

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

@ -1,16 +1,16 @@
import { createContext, useEffect, useState, useRef } from "react"; import { createContext, useEffect, useState, useRef, ReactNode } from "react";
import {flow} from "../types/flow" import {FlowType} from "../types/flow"
import { TabsContextType } from "../types/tabs"; import { TabsContextType } from "../types/tabs";
const TabsContextInitialValue = { const TabsContextInitialValue:TabsContextType = {
tabIndex: 0, tabIndex: 0,
setTabIndex: (index: number) => {}, setTabIndex: (index: number) => {},
flows: [], flows: [],
removeFlow: (id: string) => {}, removeFlow: (id: string) => {},
addFlow: (flowData?: any) => {}, addFlow: (flowData?: any) => {},
updateFlow: (newFlow: flow) => {}, updateFlow: (newFlow: FlowType) => {},
incrementNodeId: () => 0, incrementNodeId: () => 0,
downloadFlow: () => {}, downloadFlow: () => {},
uploadFlow: () => {}, uploadFlow: () => {},
@ -22,9 +22,9 @@ export const TabsContext = createContext<TabsContextType>(
let _ = require("lodash"); let _ = require("lodash");
export function TabsProvider({ children }) { export function TabsProvider({ children }:{children:ReactNode}) {
const [tabIndex, setTabIndex] = useState(0); const [tabIndex, setTabIndex] = useState(0);
const [flows, setFlows] = useState<Array<flow>>([]); const [flows, setFlows] = useState<Array<FlowType>>([]);
const [id, setId] = useState(0); const [id, setId] = useState(0);
const newNodeId = useRef(0); const newNodeId = useRef(0);
@ -96,9 +96,9 @@ export function TabsProvider({ children }) {
return newFlows; return newFlows;
}); });
} }
function addFlow(flow?: flow) { function addFlow(flow?: FlowType) {
const data = flow?.data ? flow.data : null; const data = flow?.data ? flow.data : null;
let newFlow: flow = { let newFlow: FlowType = {
name: flow ? flow.name : "flow" + id, name: flow ? flow.name : "flow" + id,
id: id.toString(), id: id.toString(),
data, data,
@ -111,8 +111,7 @@ export function TabsProvider({ children }) {
}); });
setTabIndex(flows.length); setTabIndex(flows.length);
} }
function updateFlow(newFlow: flow) { function updateFlow(newFlow: FlowType) {
console.log(newFlow);
setFlows((prevState) => { setFlows((prevState) => {
const newFlows = [...prevState]; const newFlows = [...prevState];
const index = newFlows.findIndex((flow) => flow.id === newFlow.id); 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 { createContext, ReactNode, useState } from "react";
import { ReactFlowInstance } from "reactflow"; import { Node} from "reactflow";
import { typesContextType } from "../types/typesContext";
//context to share types adn functions from nodes to flow //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, reactFlowInstance: null,
setReactFlowInstance: () => {}, setReactFlowInstance: () => {},
deleteNode: () => {}, deleteNode: () => {},
@ -20,12 +14,12 @@ const initialValue = {
export const typesContext = createContext<typesContextType>(initialValue); export const typesContext = createContext<typesContextType>(initialValue);
export function TypesProvider({ children }) { export function TypesProvider({ children }:{children:ReactNode}) {
const [types, setTypes] = useState({}); const [types, setTypes] = useState({});
const [reactFlowInstance, setReactFlowInstance] = useState(null); const [reactFlowInstance, setReactFlowInstance] = useState(null);
function deleteNode(idx) { function deleteNode(idx:string) {
reactFlowInstance.setNodes( reactFlowInstance.setNodes(
reactFlowInstance.getNodes().filter((n) => n.id !== idx) reactFlowInstance.getNodes().filter((n:Node) => n.id !== idx)
); );
} }
return ( 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/"); return await axios.get("http://localhost:5003/");
} }
export async function sendAll(data) { export async function sendAll(data:sendAllProps) {
console.log(data); console.log(data);
return await axios.post("http://localhost:5003/predict", 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 { Dialog, Transition } from "@headlessui/react";
import { XMarkIcon, ClipboardDocumentListIcon, PlusIcon, ChevronDownIcon, TrashIcon } from "@heroicons/react/24/outline"; import { XMarkIcon, ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react"; import { Fragment, useContext, useRef, useState } from "react";
import { taskTypeMap, textColors, classNames, bgColors } from "../../utils";
import { PopUpContext } from "../../contexts/popUpContext"; 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 [open, setOpen] = useState(true);
const [myValue, setMyValue] = useState(value); const [myValue, setMyValue] = useState(value);
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
function setModalOpen(x){ function setModalOpen(x:boolean){
setOpen(x); setOpen(x);
if(x === false){ if(x === false){
setTimeout(() => {closePopUp()}, 300); setTimeout(() => {closePopUp()}, 300);

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

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

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

@ -1,17 +1,8 @@
import { CSSProperties, FC } from 'react'; import { CSSProperties, FC } from 'react';
import { Node } from 'reactflow'; 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 = ({ const ConnectionLineComponent = ({
fromX, fromX,
@ -21,9 +12,9 @@ const ConnectionLineComponent = ({
toY, toY,
toPosition, toPosition,
connectionLineType, connectionLineType,
fromNode={}, fromNode,
connectionLineStyle = {} // provide a default value for connectionLineStyle connectionLineStyle = {} // provide a default value for connectionLineStyle
}) => { }:ConnectionLineComponentProps) => {
return ( return (
<g> <g>
<path <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 DisclosureComponent from "../DisclosureComponent";
import { import {
nodeColors, nodeColors,
nodeIcons, nodeIcons,
nodeNames, nodeNames,
toFirstUpperCase,
} from "../../../../utils"; } from "../../../../utils";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { getAll } from "../../../../controllers/NodesServices"; import { getAll } from "../../../../controllers/NodesServices";
import { typesContext } from "../../../../contexts/typesContext"; import { typesContext } from "../../../../contexts/typesContext";
import { APIClassType, APIKindType, APIObjectType } from "../../../../types/api";
export default function ExtraSidebar() { export default function ExtraSidebar() {
const [data, setData] = useState({}); const [data, setData] = useState({});
const { setTypes} = useContext(typesContext); const { setTypes} = useContext(typesContext);
async function getTypes(){ async function getTypes():Promise<void>{
let d = await getAll(); const initialValue:{[char: string]: string} = {
setData(d.data); str: "advanced",
bool: "advanced",
chatOutput: "chat",
chatInput: "chat",
}
let result = await getAll();
setData(result.data);
setTypes( setTypes(
Object.keys(d.data).reduce( Object.keys(result.data).reduce(
(acc, curr) => { (acc, curr) => {
Object.keys(d.data[curr]).forEach((c) => { Object.keys(result.data[curr]).forEach((c:keyof APIKindType) => {
acc[c] = curr; acc[c] = curr;
d.data[curr][c].base_classes?.forEach((b) => { result.data[curr][c].base_classes?.forEach((b) => {
acc[b] = curr; acc[b] = curr;
}); });
}); });
return acc; return acc;
}, },
{ initialValue
str: "advanced",
bool: "advanced",
chatOutput: "chat",
chatInput: "chat",
}
) )
); );
} }
@ -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.effectAllowed = "move";
event.dataTransfer.setData("json", JSON.stringify(data)); event.dataTransfer.setData("json", JSON.stringify(data));
} }
return ( return (
<div className="mt-4 w-full"> <div className="mt-4 w-full">
{Object.keys(data).map((d, i) => ( {Object.keys(data).map((d:keyof APIObjectType, i) => (
<DisclosureComponent <DisclosureComponent
key={i} key={i}
button={{ title: nodeNames[d], Icon: nodeIcons[d] }} button={{ title: nodeNames[d], Icon: nodeIcons[d] }}
> >
<div className="p-2 flex flex-col gap-2"> <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 key={k}>
<div <div
draggable draggable

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

@ -3,9 +3,6 @@ import { ReactFlowProvider } from "reactflow";
import FlowPage from ".."; import FlowPage from "..";
import { TabsContext } from "../../../contexts/tabsContext"; import { TabsContext } from "../../../contexts/tabsContext";
import TabComponent from "./tabComponent"; import TabComponent from "./tabComponent";
import { example } from "../../../data_assets/example";
var _ = require("lodash");
export function TabsManager() { export function TabsManager() {
const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext); const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
useEffect(() => { 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 { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
import { useContext, useRef, useState } from "react"; import { useContext, useRef, useState } from "react";
import { TabsContext } from "../../../../contexts/tabsContext"; import { TabsContext } from "../../../../contexts/tabsContext";
import { FlowType } from "../../../../types/flow";
var _ = require("lodash"); var _ = require("lodash");
export default function TabComponent({ selected, flow, onClick }) { export default function TabComponent({ selected, flow, onClick }:{flow:FlowType,selected:boolean,onClick:()=>void}) {
const { removeFlow, updateFlow, flows, downloadFlow } = const { removeFlow, updateFlow, flows } =
useContext(TabsContext); useContext(TabsContext);
const [isRename, setIsRename] = useState(false); const [isRename, setIsRename] = useState(false);
const [value, setValue] = useState(""); const [value, setValue] = useState("");

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

@ -7,6 +7,8 @@ import ReactFlow, {
useNodesState, useNodesState,
useReactFlow, useReactFlow,
ControlButton, ControlButton,
EdgeChange,
Connection,
} from "reactflow"; } from "reactflow";
import { locationContext } from "../../contexts/locationContext"; import { locationContext } from "../../contexts/locationContext";
import ExtraSidebar from "./components/extraSidebarComponent"; import ExtraSidebar from "./components/extraSidebarComponent";
@ -24,6 +26,8 @@ import {
ArrowDownTrayIcon, ArrowDownTrayIcon,
ArrowUpTrayIcon, ArrowUpTrayIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { FlowType, NodeType } from "../../types/flow";
import { APIClassType } from "../../types/api";
const nodeTypes = { const nodeTypes = {
genericNode: GenericNode, genericNode: GenericNode,
@ -35,7 +39,7 @@ const nodeTypes = {
var _ = require("lodash"); var _ = require("lodash");
export default function FlowPage({ flow }) { export default function FlowPage({ flow }:{flow:FlowType}) {
let { updateFlow, incrementNodeId, downloadFlow, uploadFlow } = let { updateFlow, incrementNodeId, downloadFlow, uploadFlow } =
useContext(TabsContext); useContext(TabsContext);
const { types, reactFlowInstance, setReactFlowInstance } = const { types, reactFlowInstance, setReactFlowInstance } =
@ -78,7 +82,7 @@ export default function FlowPage({ flow }) {
}, [setExtraComponent, setExtraNavigation]); }, [setExtraComponent, setExtraNavigation]);
const onEdgesChangeMod = useCallback( const onEdgesChangeMod = useCallback(
(s) => { (s:EdgeChange[]) => {
onEdgesChange(s); onEdgesChange(s);
setNodes((x) => { setNodes((x) => {
let newX = _.cloneDeep(x); let newX = _.cloneDeep(x);
@ -89,7 +93,7 @@ export default function FlowPage({ flow }) {
); );
const onConnect = useCallback( const onConnect = useCallback(
(params) => { (params:Connection) => {
setEdges((eds) => setEdges((eds) =>
addEdge({ ...params, className: "animate-pulse" }, eds) addEdge({ ...params, className: "animate-pulse" }, eds)
); );
@ -101,17 +105,17 @@ export default function FlowPage({ flow }) {
[setEdges, setNodes] [setEdges, setNodes]
); );
const onDragOver = useCallback((event) => { const onDragOver = useCallback((event:React.DragEvent) => {
event.preventDefault(); event.preventDefault();
event.dataTransfer.dropEffect = "move"; event.dataTransfer.dropEffect = "move";
}, []); }, []);
const onDrop = useCallback( const onDrop = useCallback(
(event) => { (event:React.DragEvent) => {
event.preventDefault(); event.preventDefault();
const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect(); 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 ( if (
data.type !== "chatInput" || data.type !== "chatInput" ||
(data.type === "chatInput" && (data.type === "chatInput" &&
@ -123,7 +127,7 @@ export default function FlowPage({ flow }) {
}); });
let newId = getId(); let newId = getId();
const newNode = { const newNode:NodeType = {
id: newId, id: newId,
type: type:
data.type === "str" 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; name: string;
id: string; id: string;
data: any; data: ReactFlowJsonObject;
chat: Array<{ message: string; isSend: boolean }>; 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 = { export type TabsContextType = {
tabIndex: number; tabIndex: number;
setTabIndex: (index: number) => void; setTabIndex: (index: number) => void;
flows: Array<flow>; flows: Array<FlowType>;
removeFlow: (id: string) => void; removeFlow: (id: string) => void;
addFlow: (flowData?: any) => void; addFlow: (flowData?: any) => void;
updateFlow: (newFlow: flow) => void; updateFlow: (newFlow: FlowType) => void;
incrementNodeId: () => number; incrementNodeId: () => number;
downloadFlow: () => void; downloadFlow: () => void;
uploadFlow: () => 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, ComputerDesktopIcon,
Bars3CenterLeftIcon, Bars3CenterLeftIcon,
} from "@heroicons/react/24/outline"; } 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(" "); return classes.filter(Boolean).join(" ");
} }
@ -60,43 +60,7 @@ export const borderLColors = {
gray: "border-l-gray-500", gray: "border-l-gray-500",
}; };
/* export const nodeColors = { export const nodeColors: {[char: string]: string} = {
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 = {
prompts: "#4367BF", prompts: "#4367BF",
llms: "#6344BE", llms: "#6344BE",
chains: "#FE7500", chains: "#FE7500",
@ -107,7 +71,7 @@ export const nodeColors = {
chat: "#2563EB", chat: "#2563EB",
}; };
export const nodeNames = { export const nodeNames:{[char: string]: string} = {
prompts: "Prompts", prompts: "Prompts",
llms: "LLMs", llms: "LLMs",
chains: "Chains", chains: "Chains",
@ -119,7 +83,7 @@ export const nodeNames = {
}; };
export const nodeIcons = { export const nodeIcons:{[char: string]: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>} = {
agents: RocketLaunchIcon, agents: RocketLaunchIcon,
chains: LinkIcon, chains: LinkIcon,
memories: CpuChipIcon, memories: CpuChipIcon,
@ -220,7 +184,7 @@ export const taskTypeMap: { [key: string]: string } = {
MULTICLASS_CLASSIFICATION: "Multiclass Classification", MULTICLASS_CLASSIFICATION: "Multiclass Classification",
}; };
const charWidths = { const charWidths:{[char: string]: number} = {
" ": 0.2, " ": 0.2,
"!": 0.2, "!": 0.2,
'"': 0.3, '"': 0.3,
@ -262,7 +226,7 @@ for (let i = 97; i <= 122; i++) {
charWidths[String.fromCharCode(i)] = 0.5; charWidths[String.fromCharCode(i)] = 0.5;
} }
export function measureTextWidth(text: string, fontSize) { export function measureTextWidth(text: string, fontSize:number) {
let wordWidth = 0; let wordWidth = 0;
for (let j = 0; j < text.length; j++) { for (let j = 0; j < text.length; j++) {
let char = text[j]; let char = text[j];
@ -272,7 +236,7 @@ export function measureTextWidth(text: string, fontSize) {
return wordWidth; return wordWidth;
} }
export function measureTextHeight(text: string, width, fontSize) { export function measureTextHeight(text: string, width:number, fontSize:number) {
const charHeight = fontSize; const charHeight = fontSize;
const lineHeight = charHeight * 1.5; const lineHeight = charHeight * 1.5;
const words = text.split(" "); const words = text.split(" ");
@ -321,7 +285,7 @@ export function snakeToNormalCase(str: string) {
.join(" "); .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); 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( export function isValidConnection(
{ source, target, sourceHandle, targetHandle }, { source, target, sourceHandle, targetHandle }:Connection,
reactFlowInstance reactFlowInstance:ReactFlowInstance
) { ) {
console.log(target)
if ( if (
sourceHandle.split('|')[0] === targetHandle.split("|")[0] || sourceHandle.split('|')[0] === targetHandle.split("|")[0] ||
sourceHandle.split('|').slice(2).some((t) => t === targetHandle.split("|")[0]) || sourceHandle.split('|').slice(2).some((t) => t === targetHandle.split("|")[0]) ||