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

Merge branch 'form_io' into form_io_constants

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-07 23:57:41 -03:00
commit 58f6efca61
110 changed files with 1043 additions and 874 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/backend/langflow/api/v1/base.py
View file

@ -14,7 +14,7 @@ class Code(BaseModel):
class FrontendNodeRequest(FrontendNode): class FrontendNodeRequest(FrontendNode):
template: dict template: dict # type: ignore
class ValidatePromptRequest(BaseModel): class ValidatePromptRequest(BaseModel):

4
src/backend/langflow/chat/utils.py
View file

@ -21,6 +21,10 @@ async def process_graph(
# Generate result and thought # Generate result and thought
try: try:
if not chat_inputs.message:
logger.debug("No message provided")
raise ValueError("No message provided")
logger.debug("Generating result and thought") logger.debug("Generating result and thought")
result, intermediate_steps = await get_result_and_steps( result, intermediate_steps = await get_result_and_steps(
langchain_object, chat_inputs.message, websocket=websocket langchain_object, chat_inputs.message, websocket=websocket

4
src/backend/langflow/config.yaml
View file

@ -153,6 +153,7 @@ memories:
documentation: "https://python.langchain.com/docs/modules/memory/how_to/vectorstore_retriever_memory" documentation: "https://python.langchain.com/docs/modules/memory/how_to/vectorstore_retriever_memory"
MongoDBChatMessageHistory: MongoDBChatMessageHistory:
documentation: "https://python.langchain.com/docs/modules/memory/integrations/mongodb_chat_message_history" documentation: "https://python.langchain.com/docs/modules/memory/integrations/mongodb_chat_message_history"
prompts:
ChatMessagePromptTemplate: ChatMessagePromptTemplate:
documentation: "https://python.langchain.com/docs/modules/model_io/prompts/prompt_templates/msg_prompt_templates" documentation: "https://python.langchain.com/docs/modules/model_io/prompts/prompt_templates/msg_prompt_templates"
HumanMessagePromptTemplate: HumanMessagePromptTemplate:
@ -161,7 +162,6 @@ memories:
documentation: "https://python.langchain.com/docs/modules/model_io/models/chat/how_to/prompts" documentation: "https://python.langchain.com/docs/modules/model_io/models/chat/how_to/prompts"
ChatPromptTemplate: ChatPromptTemplate:
documentation: "https://python.langchain.com/docs/modules/model_io/models/chat/how_to/prompts" documentation: "https://python.langchain.com/docs/modules/model_io/models/chat/how_to/prompts"
prompts:
PromptTemplate: PromptTemplate:
documentation: "https://python.langchain.com/docs/modules/model_io/prompts/prompt_templates/" documentation: "https://python.langchain.com/docs/modules/model_io/prompts/prompt_templates/"
textsplitters: textsplitters:
@ -280,6 +280,8 @@ vectorstores:
wrappers: wrappers:
RequestsWrapper: RequestsWrapper:
documentation: "" documentation: ""
SQLDatabase:
documentation: ""
output_parsers: output_parsers:
StructuredOutputParser: StructuredOutputParser:
documentation: "https://python.langchain.com/docs/modules/model_io/output_parsers/structured" documentation: "https://python.langchain.com/docs/modules/model_io/output_parsers/structured"

1
src/backend/langflow/custom/customs.py
View file

@ -23,6 +23,7 @@ CUSTOM_NODES = {
}, },
"memories": { "memories": {
"PostgresChatMessageHistory": frontend_node.memories.PostgresChatMessageHistoryFrontendNode(), "PostgresChatMessageHistory": frontend_node.memories.PostgresChatMessageHistoryFrontendNode(),
"MongoDBChatMessageHistory": frontend_node.memories.MongoDBChatMessageHistoryFrontendNode(),
}, },
"chains": { "chains": {
"SeriesCharacterChain": frontend_node.chains.SeriesCharacterChainNode(), "SeriesCharacterChain": frontend_node.chains.SeriesCharacterChainNode(),

7
src/backend/langflow/interface/importing/utils.py
View file

@ -10,6 +10,7 @@ from langchain.chains.base import Chain
from langchain.chat_models.base import BaseChatModel from langchain.chat_models.base import BaseChatModel
from langchain.tools import BaseTool from langchain.tools import BaseTool
from langflow.utils import validate from langflow.utils import validate
from langflow.interface.wrappers.base import wrapper_creator
def import_module(module_path: str) -> Any: def import_module(module_path: str) -> Any:
@ -96,7 +97,11 @@ def import_prompt(prompt: str) -> Type[PromptTemplate]:
def import_wrapper(wrapper: str) -> Any: def import_wrapper(wrapper: str) -> Any:
"""Import wrapper from wrapper name""" """Import wrapper from wrapper name"""
return import_module(f"from langchain.requests import {wrapper}") if (
isinstance(wrapper_creator.type_dict, dict)
and wrapper in wrapper_creator.type_dict
):
return wrapper_creator.type_dict.get(wrapper)
def import_toolkit(toolkit: str) -> Any: def import_toolkit(toolkit: str) -> Any:

16
src/backend/langflow/interface/initialize/loading.py
View file

@ -20,6 +20,7 @@ from langflow.interface.toolkits.base import toolkits_creator
from langflow.interface.chains.base import chain_creator from langflow.interface.chains.base import chain_creator
from langflow.interface.output_parsers.base import output_parser_creator from langflow.interface.output_parsers.base import output_parser_creator
from langflow.interface.retrievers.base import retriever_creator from langflow.interface.retrievers.base import retriever_creator
from langflow.interface.wrappers.base import wrapper_creator
from langflow.interface.utils import load_file_into_dict from langflow.interface.utils import load_file_into_dict
from langflow.utils import validate from langflow.utils import validate
from langchain.chains.base import Chain from langchain.chains.base import Chain
@ -89,10 +90,21 @@ def instantiate_based_on_type(class_object, base_type, node_type, params):
return instantiate_retriever(node_type, class_object, params) return instantiate_retriever(node_type, class_object, params)
elif base_type == "memory": elif base_type == "memory":
return instantiate_memory(node_type, class_object, params) return instantiate_memory(node_type, class_object, params)
elif base_type == "wrappers":
return instantiate_wrapper(node_type, class_object, params)
else: else:
return class_object(**params) return class_object(**params)
def instantiate_wrapper(node_type, class_object, params):
if node_type in wrapper_creator.from_method_nodes:
method = wrapper_creator.from_method_nodes[node_type]
if class_method := getattr(class_object, method, None):
return class_method(**params)
raise ValueError(f"Method {method} not found in {class_object}")
return class_object(**params)
def instantiate_output_parser(node_type, class_object, params): def instantiate_output_parser(node_type, class_object, params):
if node_type in output_parser_creator.from_method_nodes: if node_type in output_parser_creator.from_method_nodes:
method = output_parser_creator.from_method_nodes[node_type] method = output_parser_creator.from_method_nodes[node_type]
@ -115,7 +127,7 @@ def instantiate_memory(node_type, class_object, params):
# process input_key and output_key to remove them if # process input_key and output_key to remove them if
# they are empty strings # they are empty strings
for key in ["input_key", "output_key"]: for key in ["input_key", "output_key"]:
if key in params and not params[key]: if key in params and (params[key] == "" or not params[key]):
params.pop(key) params.pop(key)
try: try:
@ -193,7 +205,7 @@ def instantiate_prompt(node_type, class_object, params: Dict):
prompt = class_object(**params) prompt = class_object(**params)
format_kwargs = {} format_kwargs: Dict[str, Any] = {}
for input_variable in prompt.input_variables: for input_variable in prompt.input_variables:
if input_variable in params: if input_variable in params:
variable = params[input_variable] variable = params[input_variable]

17
src/backend/langflow/interface/wrappers/base.py
View file

@ -1,25 +1,36 @@
from typing import Dict, List, Optional from typing import Dict, List, Optional
from langchain import requests from langchain import requests, sql_database
from langflow.interface.base import LangChainTypeCreator from langflow.interface.base import LangChainTypeCreator
from langflow.utils.logger import logger from langflow.utils.logger import logger
from langflow.utils.util import build_template_from_class from langflow.utils.util import build_template_from_class, build_template_from_method
class WrapperCreator(LangChainTypeCreator): class WrapperCreator(LangChainTypeCreator):
type_name: str = "wrappers" type_name: str = "wrappers"
from_method_nodes = {"SQLDatabase": "from_uri"}
@property @property
def type_to_loader_dict(self) -> Dict: def type_to_loader_dict(self) -> Dict:
if self.type_dict is None: if self.type_dict is None:
self.type_dict = { self.type_dict = {
wrapper.__name__: wrapper for wrapper in [requests.TextRequestsWrapper] wrapper.__name__: wrapper
for wrapper in [requests.TextRequestsWrapper, sql_database.SQLDatabase]
} }
return self.type_dict return self.type_dict
def get_signature(self, name: str) -> Optional[Dict]: def get_signature(self, name: str) -> Optional[Dict]:
try: try:
if name in self.from_method_nodes:
return build_template_from_method(
name,
type_to_cls_dict=self.type_to_loader_dict,
add_function=True,
method_name=self.from_method_nodes[name],
)
return build_template_from_class(name, self.type_to_loader_dict) return build_template_from_class(name, self.type_to_loader_dict)
except ValueError as exc: except ValueError as exc:
raise ValueError("Wrapper not found") from exc raise ValueError("Wrapper not found") from exc

3
src/backend/langflow/processing/base.py
View file

@ -1,3 +1,4 @@
from typing import Union
from langflow.api.v1.callback import ( from langflow.api.v1.callback import (
AsyncStreamingLLMCallbackHandler, AsyncStreamingLLMCallbackHandler,
StreamingLLMCallbackHandler, StreamingLLMCallbackHandler,
@ -6,7 +7,7 @@ from langflow.processing.process import fix_memory_inputs, format_actions
from langflow.utils.logger import logger from langflow.utils.logger import logger
async def get_result_and_steps(langchain_object, inputs: dict, **kwargs): async def get_result_and_steps(langchain_object, inputs: Union[dict, str], **kwargs):
"""Get result and thought from extracted json""" """Get result and thought from extracted json"""
try: try:

3
src/backend/langflow/template/frontend_node/agents.py
View file

@ -19,8 +19,7 @@ class AgentFrontendNode(FrontendNode):
if field.name in ["suffix", "prefix"]: if field.name in ["suffix", "prefix"]:
field.show = True field.show = True
if field.name == "Tools" and name == "ZeroShotAgent": if field.name == "Tools" and name == "ZeroShotAgent":
# field. field.field_type = "BaseTool"
field.type_name = "BaseTool"
field.is_list = True field.is_list = True

57
src/backend/langflow/template/frontend_node/memories.py
View file

@ -4,6 +4,10 @@ from langflow.template.field.base import TemplateField
from langflow.template.frontend_node.base import FrontendNode from langflow.template.frontend_node.base import FrontendNode
from langflow.template.template.base import Template from langflow.template.template.base import Template
from langchain.memory.chat_message_histories.postgres import DEFAULT_CONNECTION_STRING from langchain.memory.chat_message_histories.postgres import DEFAULT_CONNECTION_STRING
from langchain.memory.chat_message_histories.mongodb import (
DEFAULT_COLLECTION_NAME,
DEFAULT_DBNAME,
)
class MemoryFrontendNode(FrontendNode): class MemoryFrontendNode(FrontendNode):
@ -120,3 +124,56 @@ class PostgresChatMessageHistoryFrontendNode(MemoryFrontendNode):
) )
description: str = "Memory store with Postgres" description: str = "Memory store with Postgres"
base_classes: list[str] = ["PostgresChatMessageHistory", "BaseChatMessageHistory"] base_classes: list[str] = ["PostgresChatMessageHistory", "BaseChatMessageHistory"]
class MongoDBChatMessageHistoryFrontendNode(MemoryFrontendNode):
name: str = "MongoDBChatMessageHistory"
template: Template = Template(
# langchain/memory/chat_message_histories/mongodb.py
# connection_string: str,
# session_id: str,
# database_name: str = DEFAULT_DBNAME,
# collection_name: str = DEFAULT_COLLECTION_NAME,
type_name="MongoDBChatMessageHistory",
fields=[
TemplateField(
field_type="str",
required=True,
placeholder="",
is_list=False,
show=True,
multiline=False,
name="session_id",
),
TemplateField(
field_type="str",
required=True,
show=True,
name="connection_string",
value="",
info="MongoDB connection string (e.g mongodb://mongo_user:password123@mongo:27017)",
),
TemplateField(
field_type="str",
required=True,
placeholder="",
is_list=False,
show=True,
multiline=False,
value=DEFAULT_DBNAME,
name="database_name",
),
TemplateField(
field_type="str",
required=True,
placeholder="",
is_list=False,
show=True,
multiline=False,
value=DEFAULT_COLLECTION_NAME,
name="collection_name",
),
],
)
description: str = "Memory store with MongoDB"
base_classes: list[str] = ["MongoDBChatMessageHistory", "BaseChatMessageHistory"]

1
src/frontend/index.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<script src="node_modules/ace-builds/src-min-noconflict/ace.js" type="text/javascript"></script>
<title>Langflow</title> <title>Langflow</title>
</head> </head>
<body id='body' style="width: 100%; height:100%"> <body id='body' style="width: 100%; height:100%">

251
src/frontend/package-lock.json generated
View file

@ -85,6 +85,7 @@
"daisyui": "^3.1.1", "daisyui": "^3.1.1",
"postcss": "^8.4.23", "postcss": "^8.4.23",
"prettier": "^2.8.8", "prettier": "^2.8.8",
"prettier-plugin-organize-imports": "^3.2.2",
"prettier-plugin-tailwindcss": "^0.3.0", "prettier-plugin-tailwindcss": "^0.3.0",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.2",
"typescript": "^5.0.2", "typescript": "^5.0.2",
@ -146,33 +147,33 @@
} }
}, },
"node_modules/@babel/compat-data": { "node_modules/@babel/compat-data": {
"version": "7.22.5", "version": "7.22.6",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.6.tgz",
"integrity": "sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA==", "integrity": "sha512-29tfsWTq2Ftu7MXmimyC0C5FDZv5DYxOZkh3XD3+QW4V/BYuv/LyEsjj3c0hqedEaDt6DBfDvexMKU8YevdqFg==",
"engines": { "engines": {
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/@babel/core": { "node_modules/@babel/core": {
"version": "7.22.5", "version": "7.22.8",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.8.tgz",
"integrity": "sha512-SBuTAjg91A3eKOvD+bPEz3LlhHZRNu1nFOVts9lzDJTXshHTjII0BAtDS3Y2DAkdZdDKWVZGVwkDfc4Clxn1dg==", "integrity": "sha512-75+KxFB4CZqYRXjx4NlR4J7yGvKumBuZTmV4NV6v09dVXXkuYVYLT68N6HCzLvfJ+fWCxQsntNzKwwIXL4bHnw==",
"dependencies": { "dependencies": {
"@ampproject/remapping": "^2.2.0", "@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.22.5", "@babel/code-frame": "^7.22.5",
"@babel/generator": "^7.22.5", "@babel/generator": "^7.22.7",
"@babel/helper-compilation-targets": "^7.22.5", "@babel/helper-compilation-targets": "^7.22.6",
"@babel/helper-module-transforms": "^7.22.5", "@babel/helper-module-transforms": "^7.22.5",
"@babel/helpers": "^7.22.5", "@babel/helpers": "^7.22.6",
"@babel/parser": "^7.22.5", "@babel/parser": "^7.22.7",
"@babel/template": "^7.22.5", "@babel/template": "^7.22.5",
"@babel/traverse": "^7.22.5", "@babel/traverse": "^7.22.8",
"@babel/types": "^7.22.5", "@babel/types": "^7.22.5",
"@nicolo-ribaudo/semver-v6": "^6.3.3",
"convert-source-map": "^1.7.0", "convert-source-map": "^1.7.0",
"debug": "^4.1.0", "debug": "^4.1.0",
"gensync": "^1.0.0-beta.2", "gensync": "^1.0.0-beta.2",
"json5": "^2.2.2", "json5": "^2.2.2"
"semver": "^6.3.0"
}, },
"engines": { "engines": {
"node": ">=6.9.0" "node": ">=6.9.0"
@ -194,9 +195,9 @@
} }
}, },
"node_modules/@babel/generator": { "node_modules/@babel/generator": {
"version": "7.22.5", "version": "7.22.7",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.7.tgz",
"integrity": "sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==", "integrity": "sha512-p+jPjMG+SI8yvIaxGgeW24u7q9+5+TGpZh8/CuB7RhBKd7RCy8FayNEFNNKrNK/eUcY/4ExQqLmyrvBXKsIcwQ==",
"dependencies": { "dependencies": {
"@babel/types": "^7.22.5", "@babel/types": "^7.22.5",
"@jridgewell/gen-mapping": "^0.3.2", "@jridgewell/gen-mapping": "^0.3.2",
@ -208,15 +209,15 @@
} }
}, },
"node_modules/@babel/helper-compilation-targets": { "node_modules/@babel/helper-compilation-targets": {
"version": "7.22.5", "version": "7.22.6",
"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.6.tgz",
"integrity": "sha512-Ji+ywpHeuqxB8WDxraCiqR0xfhYjiDE/e6k7FuIaANnoOFxAHskHChz4vA1mJC9Lbm01s1PVAGhQY4FUKSkGZw==", "integrity": "sha512-534sYEqWD9VfUm3IPn2SLcH4Q3P86XL+QvqdC7ZsFrzyyPF3T4XGiVghF6PTYNdWg6pXuoqXxNQAhbYeEInTzA==",
"dependencies": { "dependencies": {
"@babel/compat-data": "^7.22.5", "@babel/compat-data": "^7.22.6",
"@babel/helper-validator-option": "^7.22.5", "@babel/helper-validator-option": "^7.22.5",
"browserslist": "^4.21.3", "@nicolo-ribaudo/semver-v6": "^6.3.3",
"lru-cache": "^5.1.1", "browserslist": "^4.21.9",
"semver": "^6.3.0" "lru-cache": "^5.1.1"
}, },
"engines": { "engines": {
"node": ">=6.9.0" "node": ">=6.9.0"
@ -297,9 +298,9 @@
} }
}, },
"node_modules/@babel/helper-split-export-declaration": { "node_modules/@babel/helper-split-export-declaration": {
"version": "7.22.5", "version": "7.22.6",
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
"integrity": "sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==", "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
"dependencies": { "dependencies": {
"@babel/types": "^7.22.5" "@babel/types": "^7.22.5"
}, },
@ -332,12 +333,12 @@
} }
}, },
"node_modules/@babel/helpers": { "node_modules/@babel/helpers": {
"version": "7.22.5", "version": "7.22.6",
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.6.tgz",
"integrity": "sha512-pSXRmfE1vzcUIDFQcSGA5Mr+GxBV9oiRKDuDxXvWQQBCh8HoIjs/2DlDB7H8smac1IVrB9/xdXj2N3Wol9Cr+Q==", "integrity": "sha512-YjDs6y/fVOYFV8hAf1rxd1QvR9wJe1pDBZ2AREKq/SDayfPzgk0PBnVuTCE5X1acEpMMNOVUqoe+OwiZGJ+OaA==",
"dependencies": { "dependencies": {
"@babel/template": "^7.22.5", "@babel/template": "^7.22.5",
"@babel/traverse": "^7.22.5", "@babel/traverse": "^7.22.6",
"@babel/types": "^7.22.5" "@babel/types": "^7.22.5"
}, },
"engines": { "engines": {
@ -358,9 +359,9 @@
} }
}, },
"node_modules/@babel/parser": { "node_modules/@babel/parser": {
"version": "7.22.5", "version": "7.22.7",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.7.tgz",
"integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==", "integrity": "sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==",
"bin": { "bin": {
"parser": "bin/babel-parser.js" "parser": "bin/babel-parser.js"
}, },
@ -404,17 +405,17 @@
} }
}, },
"node_modules/@babel/traverse": { "node_modules/@babel/traverse": {
"version": "7.22.5", "version": "7.22.8",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.8.tgz",
"integrity": "sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==", "integrity": "sha512-y6LPR+wpM2I3qJrsheCTwhIinzkETbplIgPBbwvqPKc+uljeA5gP+3nP8irdYt1mjQaDnlIcG+dw8OjAco4GXw==",
"dependencies": { "dependencies": {
"@babel/code-frame": "^7.22.5", "@babel/code-frame": "^7.22.5",
"@babel/generator": "^7.22.5", "@babel/generator": "^7.22.7",
"@babel/helper-environment-visitor": "^7.22.5", "@babel/helper-environment-visitor": "^7.22.5",
"@babel/helper-function-name": "^7.22.5", "@babel/helper-function-name": "^7.22.5",
"@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-hoist-variables": "^7.22.5",
"@babel/helper-split-export-declaration": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6",
"@babel/parser": "^7.22.5", "@babel/parser": "^7.22.7",
"@babel/types": "^7.22.5", "@babel/types": "^7.22.5",
"debug": "^4.1.0", "debug": "^4.1.0",
"globals": "^11.1.0" "globals": "^11.1.0"
@ -1337,6 +1338,14 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
}, },
"node_modules/@nicolo-ribaudo/semver-v6": {
"version": "6.3.3",
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
"integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==",
"bin": {
"semver": "bin/semver.js"
}
},
"node_modules/@nodelib/fs.scandir": { "node_modules/@nodelib/fs.scandir": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -2662,39 +2671,6 @@
"node": ">= 10" "node": ">= 10"
} }
}, },
"node_modules/@swc/cli/node_modules/lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
"dev": true,
"dependencies": {
"yallist": "^4.0.0"
},
"engines": {
"node": ">=10"
}
},
"node_modules/@swc/cli/node_modules/semver": {
"version": "7.5.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz",
"integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==",
"dev": true,
"dependencies": {
"lru-cache": "^6.0.0"
},
"bin": {
"semver": "bin/semver.js"
},
"engines": {
"node": ">=10"
}
},
"node_modules/@swc/cli/node_modules/yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"dev": true
},
"node_modules/@swc/core": { "node_modules/@swc/core": {
"version": "1.3.62", "version": "1.3.62",
"resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.62.tgz", "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.62.tgz",
@ -4124,14 +4100,14 @@
} }
}, },
"node_modules/bin-version-check": { "node_modules/bin-version-check": {
"version": "5.0.0", "version": "5.1.0",
"resolved": "https://registry.npmjs.org/bin-version-check/-/bin-version-check-5.0.0.tgz", "resolved": "https://registry.npmjs.org/bin-version-check/-/bin-version-check-5.1.0.tgz",
"integrity": "sha512-Q3FMQnS5eZmrBGqmDXLs4dbAn/f+52voP6ykJYmweSA60t6DyH4UTSwZhtbK5UH+LBoWvDljILUQMLRUtsynsA==", "integrity": "sha512-bYsvMqJ8yNGILLz1KP9zKLzQ6YpljV3ln1gqhuLkUtyfGi3qXKGuK2p+U4NAvjVFzDFiBBtOpCOSFNuYYEGZ5g==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"bin-version": "^6.0.0", "bin-version": "^6.0.0",
"semver": "^7.3.5", "semver": "^7.5.3",
"semver-truncate": "^2.0.0" "semver-truncate": "^3.0.0"
}, },
"engines": { "engines": {
"node": ">=12" "node": ">=12"
@ -4140,39 +4116,6 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/bin-version-check/node_modules/lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
"dev": true,
"dependencies": {
"yallist": "^4.0.0"
},
"engines": {
"node": ">=10"
}
},
"node_modules/bin-version-check/node_modules/semver": {
"version": "7.5.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz",
"integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==",
"dev": true,
"dependencies": {
"lru-cache": "^6.0.0"
},
"bin": {
"semver": "bin/semver.js"
},
"engines": {
"node": ">=10"
}
},
"node_modules/bin-version-check/node_modules/yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"dev": true
},
"node_modules/bin-version/node_modules/execa": { "node_modules/bin-version/node_modules/execa": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz", "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@ -4306,9 +4249,9 @@
"integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==" "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
}, },
"node_modules/browserslist": { "node_modules/browserslist": {
"version": "4.21.5", "version": "4.21.9",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.9.tgz",
"integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==", "integrity": "sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==",
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -4317,13 +4260,17 @@
{ {
"type": "tidelift", "type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/browserslist" "url": "https://tidelift.com/funding/github/npm/browserslist"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
} }
], ],
"dependencies": { "dependencies": {
"caniuse-lite": "^1.0.30001449", "caniuse-lite": "^1.0.30001503",
"electron-to-chromium": "^1.4.284", "electron-to-chromium": "^1.4.431",
"node-releases": "^2.0.8", "node-releases": "^2.0.12",
"update-browserslist-db": "^1.0.10" "update-browserslist-db": "^1.0.11"
}, },
"bin": { "bin": {
"browserslist": "cli.js" "browserslist": "cli.js"
@ -4438,9 +4385,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001486", "version": "1.0.30001513",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001513.tgz",
"integrity": "sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==", "integrity": "sha512-pnjGJo7SOOjAGytZZ203Em95MRM8Cr6jhCXNF/FAXTpCTRTECnqQWLpiTRqrFtdYcth8hf4WECUpkezuYsMVww==",
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -8616,6 +8563,26 @@
"url": "https://github.com/prettier/prettier?sponsor=1" "url": "https://github.com/prettier/prettier?sponsor=1"
} }
}, },
"node_modules/prettier-plugin-organize-imports": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.2.tgz",
"integrity": "sha512-e97lE6odGSiHonHJMTYC0q0iLXQyw0u5z/PJpvP/3vRy6/Zi9kLBwFAbEGjDzIowpjQv8b+J04PDamoUSQbzGA==",
"dev": true,
"peerDependencies": {
"@volar/vue-language-plugin-pug": "^1.0.4",
"@volar/vue-typescript": "^1.0.4",
"prettier": ">=2.0",
"typescript": ">=2.9"
},
"peerDependenciesMeta": {
"@volar/vue-language-plugin-pug": {
"optional": true
},
"@volar/vue-typescript": {
"optional": true
}
}
},
"node_modules/prettier-plugin-tailwindcss": { "node_modules/prettier-plugin-tailwindcss": {
"version": "0.3.0", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.3.0.tgz", "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.3.0.tgz",
@ -9507,11 +9474,18 @@
} }
}, },
"node_modules/semver": { "node_modules/semver": {
"version": "6.3.0", "version": "7.5.3",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
"dev": true,
"dependencies": {
"lru-cache": "^6.0.0"
},
"bin": { "bin": {
"semver": "bin/semver.js" "semver": "bin/semver.js"
},
"engines": {
"node": ">=10"
} }
}, },
"node_modules/semver-regex": { "node_modules/semver-regex": {
@ -9527,17 +9501,38 @@
} }
}, },
"node_modules/semver-truncate": { "node_modules/semver-truncate": {
"version": "2.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/semver-truncate/-/semver-truncate-2.0.0.tgz", "resolved": "https://registry.npmjs.org/semver-truncate/-/semver-truncate-3.0.0.tgz",
"integrity": "sha512-Rh266MLDYNeML5h90ttdMwfXe1+Nc4LAWd9X1KdJe8pPHP4kFmvLZALtsMNHNdvTyQygbEC0D59sIz47DIaq8w==", "integrity": "sha512-LJWA9kSvMolR51oDE6PN3kALBNaUdkxzAGcexw8gjMA8xr5zUqK0JiR3CgARSqanYF3Z1YHvsErb1KDgh+v7Rg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"semver": "^6.0.0" "semver": "^7.3.5"
}, },
"engines": { "engines": {
"node": ">=8" "node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/semver/node_modules/lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
"dev": true,
"dependencies": {
"yallist": "^4.0.0"
},
"engines": {
"node": ">=10"
}
},
"node_modules/semver/node_modules/yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"dev": true
},
"node_modules/shadcn-ui": { "node_modules/shadcn-ui": {
"version": "0.2.2", "version": "0.2.2",
"resolved": "https://registry.npmjs.org/shadcn-ui/-/shadcn-ui-0.2.2.tgz", "resolved": "https://registry.npmjs.org/shadcn-ui/-/shadcn-ui-0.2.2.tgz",

1
src/frontend/package.json
View file

@ -106,6 +106,7 @@
"daisyui": "^3.1.1", "daisyui": "^3.1.1",
"postcss": "^8.4.23", "postcss": "^8.4.23",
"prettier": "^2.8.8", "prettier": "^2.8.8",
"prettier-plugin-organize-imports": "^3.2.2",
"prettier-plugin-tailwindcss": "^0.3.0", "prettier-plugin-tailwindcss": "^0.3.0",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.2",
"typescript": "^5.0.2", "typescript": "^5.0.2",

15
src/frontend/src/App.tsx
View file

@ -1,20 +1,19 @@
import "reactflow/dist/style.css";
import { useState, useEffect, useContext } from "react";
import "./App.css";
import { useLocation } from "react-router-dom";
import _ from "lodash"; import _ from "lodash";
import { useContext, useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import "reactflow/dist/style.css";
import "./App.css";
import { ErrorBoundary } from "react-error-boundary";
import ErrorAlert from "./alerts/error"; import ErrorAlert from "./alerts/error";
import NoticeAlert from "./alerts/notice"; import NoticeAlert from "./alerts/notice";
import SuccessAlert from "./alerts/success"; import SuccessAlert from "./alerts/success";
import CrashErrorComponent from "./components/CrashErrorComponent";
import Header from "./components/headerComponent";
import { alertContext } from "./contexts/alertContext"; import { alertContext } from "./contexts/alertContext";
import { locationContext } from "./contexts/locationContext"; import { locationContext } from "./contexts/locationContext";
import { ErrorBoundary } from "react-error-boundary";
import CrashErrorComponent from "./components/CrashErrorComponent";
import { TabsContext } from "./contexts/tabsContext"; import { TabsContext } from "./contexts/tabsContext";
import { getVersion } from "./controllers/API";
import Router from "./routes"; import Router from "./routes";
import Header from "./components/headerComponent";
export default function App() { export default function App() {
let { setCurrent, setShowSideBar, setIsStackedOpen } = let { setCurrent, setShowSideBar, setIsStackedOpen } =

46
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -1,31 +1,30 @@
import { Info } from "lucide-react";
import React, { useContext, useEffect, useRef, useState } from "react";
import { Handle, Position, useUpdateNodeInternals } from "reactflow"; import { Handle, Position, useUpdateNodeInternals } from "reactflow";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
import CodeAreaComponent from "../../../../components/codeAreaComponent";
import Dropdown from "../../../../components/dropdownComponent";
import FloatComponent from "../../../../components/floatComponent";
import InputComponent from "../../../../components/inputComponent";
import InputFileComponent from "../../../../components/inputFileComponent";
import InputListComponent from "../../../../components/inputListComponent";
import IntComponent from "../../../../components/intComponent";
import PromptAreaComponent from "../../../../components/promptComponent";
import TextAreaComponent from "../../../../components/textAreaComponent";
import ToggleShadComponent from "../../../../components/toggleShadComponent";
import { PopUpContext } from "../../../../contexts/popUpContext";
import { TabsContext } from "../../../../contexts/tabsContext";
import { typesContext } from "../../../../contexts/typesContext";
import { ParameterComponentType } from "../../../../types/components";
import { import {
classNames, classNames,
getRandomKeyByssmm, getRandomKeyByssmm,
groupByFamily, groupByFamily,
isValidConnection, isValidConnection,
nodeColors,
nodeIconsLucide, nodeIconsLucide,
nodeNames,
} from "../../../../utils"; } from "../../../../utils";
import { useContext, useEffect, useRef, useState } from "react";
import InputComponent from "../../../../components/inputComponent";
import InputListComponent from "../../../../components/inputListComponent";
import TextAreaComponent from "../../../../components/textAreaComponent";
import { typesContext } from "../../../../contexts/typesContext";
import { ParameterComponentType } from "../../../../types/components";
import FloatComponent from "../../../../components/floatComponent";
import Dropdown from "../../../../components/dropdownComponent";
import CodeAreaComponent from "../../../../components/codeAreaComponent";
import InputFileComponent from "../../../../components/inputFileComponent";
import { TabsContext } from "../../../../contexts/tabsContext";
import IntComponent from "../../../../components/intComponent";
import PromptAreaComponent from "../../../../components/promptComponent";
import { nodeNames } from "../../../../utils";
import React from "react";
import { nodeColors } from "../../../../utils";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
import { PopUpContext } from "../../../../contexts/popUpContext";
import ToggleShadComponent from "../../../../components/toggleShadComponent";
import { Info } from "lucide-react";
export default function ParameterComponent({ export default function ParameterComponent({
left, left,
@ -59,10 +58,6 @@ export default function ParameterComponent({
updateNodeInternals(data.id); updateNodeInternals(data.id);
}, [data.id, position, updateNodeInternals]); }, [data.id, position, updateNodeInternals]);
const [enabled, setEnabled] = useState(
data.node.template[name]?.value ?? false
);
useEffect(() => {}, [closePopUp, data.node.template]); useEffect(() => {}, [closePopUp, data.node.template]);
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
@ -240,10 +235,9 @@ export default function ParameterComponent({
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<ToggleShadComponent <ToggleShadComponent
disabled={disabled} disabled={disabled}
enabled={enabled} enabled={data.node.template[name].value}
setEnabled={(t) => { setEnabled={(t) => {
handleOnNewValue(t); handleOnNewValue(t);
setEnabled(t);
}} }}
size="large" size="large"
/> />

29
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -1,3 +1,15 @@
import { Zap } from "lucide-react";
import { useContext, useEffect, useRef, useState } from "react";
import { NodeToolbar } from "reactflow";
import ShadTooltip from "../../components/ShadTooltipComponent";
import Tooltip from "../../components/TooltipComponent";
import { useSSE } from "../../contexts/SSEContext";
import { alertContext } from "../../contexts/alertContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { typesContext } from "../../contexts/typesContext";
import NodeModal from "../../modals/NodeModal";
import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
import { NodeDataType } from "../../types/flow";
import { import {
classNames, classNames,
nodeColors, nodeColors,
@ -5,18 +17,6 @@ import {
toTitleCase, toTitleCase,
} from "../../utils"; } from "../../utils";
import ParameterComponent from "./components/parameterComponent"; import ParameterComponent from "./components/parameterComponent";
import { typesContext } from "../../contexts/typesContext";
import { useContext, useState, useEffect, useRef } from "react";
import { NodeDataType } from "../../types/flow";
import { alertContext } from "../../contexts/alertContext";
import { PopUpContext } from "../../contexts/popUpContext";
import NodeModal from "../../modals/NodeModal";
import Tooltip from "../../components/TooltipComponent";
import { NodeToolbar } from "reactflow";
import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
import ShadTooltip from "../../components/ShadTooltipComponent";
import { useSSE } from "../../contexts/SSEContext";
import { Zap } from "lucide-react";
export default function GenericNode({ export default function GenericNode({
data, data,
@ -94,10 +94,7 @@ export default function GenericNode({
}} }}
/> />
<div className="generic-node-tooltip-div"> <div className="generic-node-tooltip-div">
<ShadTooltip <ShadTooltip content={data.node.display_name}>
delayDuration={1500}
content={data.node.display_name}
>
<div className="generic-node-tooltip-div text-primary"> <div className="generic-node-tooltip-div text-primary">
{data.node.display_name} {data.node.display_name}
</div> </div>

4
src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
View file

@ -1,8 +1,8 @@
import { Link } from "react-router-dom";
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { CheckCircle2, Info, X, XCircle } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { Link } from "react-router-dom";
import { SingleAlertComponentType } from "../../../../types/alerts"; import { SingleAlertComponentType } from "../../../../types/alerts";
import { X, CheckCircle2, Info, XCircle } from "lucide-react";
export default function SingleAlert({ export default function SingleAlert({
dropItem, dropItem,

8
src/frontend/src/alerts/alertDropDown/index.tsx
View file

@ -1,10 +1,10 @@
import { useContext, useEffect, useRef } from "react"; import { Trash2, X } from "lucide-react";
import { useContext, useRef } from "react";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import SingleAlert from "./components/singleAlertComponent";
import { AlertDropdownType } from "../../types/alerts";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { AlertDropdownType } from "../../types/alerts";
import { useOnClickOutside } from "../hooks/useOnClickOutside"; import { useOnClickOutside } from "../hooks/useOnClickOutside";
import { X, Trash2 } from "lucide-react"; import SingleAlert from "./components/singleAlertComponent";
export default function AlertDropdown({}: AlertDropdownType) { export default function AlertDropdown({}: AlertDropdownType) {
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);

2
src/frontend/src/alerts/error/index.tsx
View file

@ -1,7 +1,7 @@
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { XCircle } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { ErrorAlertType } from "../../types/alerts"; import { ErrorAlertType } from "../../types/alerts";
import { XCircle } from "lucide-react";
export default function ErrorAlert({ export default function ErrorAlert({
title, title,

2
src/frontend/src/alerts/notice/index.tsx
View file

@ -1,8 +1,8 @@
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { Info } from "lucide-react";
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"; import { NoticeAlertType } from "../../types/alerts";
import { Info } from "lucide-react";
export default function NoticeAlert({ export default function NoticeAlert({
title, title,

2
src/frontend/src/alerts/success/index.tsx
View file

@ -1,7 +1,7 @@
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { CheckCircle2 } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SuccessAlertType } from "../../types/alerts"; import { SuccessAlertType } from "../../types/alerts";
import { CheckCircle2 } from "lucide-react";
export default function SuccessAlert({ export default function SuccessAlert({
title, title,

BIN
src/frontend/src/assets/male-technologist.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
src/frontend/src/assets/robot.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 26 KiB

9
src/frontend/src/components/AccordionComponent/index.tsx
View file

@ -1,16 +1,11 @@
import { ReactElement, useContext, useEffect, useRef, useState } from "react"; import { useState } from "react";
import {
AccordionComponentType,
ProgressBarType,
} from "../../types/components";
import { Progress } from "../../components/ui/progress";
import { setInterval } from "timers/promises";
import { import {
Accordion, Accordion,
AccordionContent, AccordionContent,
AccordionItem, AccordionItem,
AccordionTrigger, AccordionTrigger,
} from "../../components/ui/accordion"; } from "../../components/ui/accordion";
import { AccordionComponentType } from "../../types/components";
export default function AccordionComponent({ export default function AccordionComponent({
trigger, trigger,

6
src/frontend/src/components/EditFlowSettingsComponent/index.tsx
View file

@ -1,7 +1,7 @@
import React, { useState, ChangeEvent } from "react"; import React, { ChangeEvent, useState } from "react";
import { Textarea } from "../../components/ui/textarea";
import { Label } from "../../components/ui/label";
import { Input } from "../../components/ui/input"; import { Input } from "../../components/ui/input";
import { Label } from "../../components/ui/label";
import { Textarea } from "../../components/ui/textarea";
type InputProps = { type InputProps = {
name: string | null; name: string | null;

2
src/frontend/src/components/ExtraSidebarComponent/index.tsx
View file

@ -1,8 +1,8 @@
import { Disclosure } from "@headlessui/react"; import { Disclosure } from "@headlessui/react";
import { useContext } from "react"; import { useContext } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { classNames } from "../../utils";
import { locationContext } from "../../contexts/locationContext"; import { locationContext } from "../../contexts/locationContext";
import { classNames } from "../../utils";
export default function ExtraSidebar() { export default function ExtraSidebar() {
const { const {

2
src/frontend/src/components/LightTooltipComponent/index.tsx
View file

@ -1,5 +1,5 @@
import { styled } from "@mui/material/styles";
import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip"; import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
import { styled } from "@mui/material/styles";
export const LightTooltip = styled(({ className, ...props }: TooltipProps) => ( export const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
<Tooltip {...props} classes={{ popper: className }} /> <Tooltip {...props} classes={{ popper: className }} />

3
src/frontend/src/components/LoadingSpinner/index.tsx
View file

@ -1,6 +1,3 @@
import { useContext, useEffect, useRef, useState } from "react";
import { RadialProgressType } from "../../types/components";
export default function LoadingSpinner({}) { export default function LoadingSpinner({}) {
return <></>; return <></>;
} }

1
src/frontend/src/components/RadialProgress/index.tsx
View file

@ -1,4 +1,3 @@
import { useContext, useEffect, useRef, useState } from "react";
import { RadialProgressType } from "../../types/components"; import { RadialProgressType } from "../../types/components";
export default function RadialProgressComponent({ export default function RadialProgressComponent({

31
src/frontend/src/components/ShadTooltipComponent/index.tsx
View file

@ -1,27 +1,26 @@
import { RadialProgressType, ShadToolTipType } from "../../types/components"; import { ShadToolTipType } from "../../types/components";
import { import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "../ui/tooltip";
export default function ShadTooltip({ export default function ShadTooltip({
content, content,
side, side,
asChild = true, asChild = true,
children, children,
delayDuration, style,
delayDuration = 500,
}: ShadToolTipType) { }: ShadToolTipType) {
return ( return (
<TooltipProvider> <Tooltip delayDuration={delayDuration}>
<Tooltip delayDuration={delayDuration}> <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
<TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
<TooltipContent side={side} avoidCollisions={false} sticky="always"> <TooltipContent
{content} className={style}
</TooltipContent> side={side}
</Tooltip> avoidCollisions={false}
</TooltipProvider> sticky="always"
>
{content}
</TooltipContent>
</Tooltip>
); );
} }

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

@ -1,6 +1,5 @@
import { ReactElement } from "react";
import { LightTooltip } from "../LightTooltipComponent";
import { TooltipComponentType } from "../../types/components"; import { TooltipComponentType } from "../../types/components";
import { LightTooltip } from "../LightTooltipComponent";
export default function Tooltip({ export default function Tooltip({
children, children,

44
src/frontend/src/components/cardComponent/index.tsx
View file

@ -1,26 +1,15 @@
import { Trash2, ExternalLink } from "lucide-react"; import { Trash2 } from "lucide-react";
import { useContext } from "react"; import { useContext } from "react";
import { Link } from "react-router-dom";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import { FlowType } from "../../types/flow"; import { FlowType } from "../../types/flow";
import { gradients } from "../../utils"; import { gradients } from "../../utils";
import { import {
CardTitle, Card,
CardDescription, CardDescription,
CardFooter, CardFooter,
Card,
CardHeader, CardHeader,
CardTitle,
} from "../ui/card"; } from "../ui/card";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../ui/dialog";
import { Button } from "@mui/material";
export const CardComponent = ({ export const CardComponent = ({
flow, flow,
@ -47,30 +36,9 @@ export const CardComponent = ({
></span> ></span>
<span className="card-component-title-size">{flow.name}</span> <span className="card-component-title-size">{flow.name}</span>
{onDelete && ( {onDelete && (
<Dialog> <button className="card-component-delete-button" onClick={onDelete}>
<DialogTrigger asChild> <Trash2 className="card-component-delete-icon" />
<button </button>
className="card-component-delete-button"
onClick={onDelete}
>
<Trash2 className="card-component-delete-icon" />
</button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you sure absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. Are you sure you want to
permanently delete this file from our servers?
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button type="submit" onClick={onDelete}>
Confirm
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)} )}
</CardTitle> </CardTitle>
<CardDescription className="card-component-desc"> <CardDescription className="card-component-desc">

10
src/frontend/src/components/chatComponent/buildTrigger/index.tsx
View file

@ -1,16 +1,16 @@
import { useContext, useState } from "react";
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { Zap } from "lucide-react"; import { Zap } from "lucide-react";
import { validateNodes } from "../../../utils"; import { useContext, useState } from "react";
import { FlowType } from "../../../types/flow";
import Loading from "../../../components/ui/loading"; import Loading from "../../../components/ui/loading";
import { useSSE } from "../../../contexts/SSEContext"; import { useSSE } from "../../../contexts/SSEContext";
import { typesContext } from "../../../contexts/typesContext";
import { alertContext } from "../../../contexts/alertContext"; import { alertContext } from "../../../contexts/alertContext";
import { typesContext } from "../../../contexts/typesContext";
import { postBuildInit } from "../../../controllers/API"; import { postBuildInit } from "../../../controllers/API";
import { FlowType } from "../../../types/flow";
import { validateNodes } from "../../../utils";
import RadialProgressComponent from "../../RadialProgress";
import { TabsContext } from "../../../contexts/tabsContext"; import { TabsContext } from "../../../contexts/tabsContext";
import RadialProgressComponent from "../../RadialProgress";
export default function BuildTrigger({ export default function BuildTrigger({
open, open,

2
src/frontend/src/components/chatComponent/chatTrigger/index.tsx
View file

@ -1,7 +1,6 @@
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { MessagesSquare } from "lucide-react"; import { MessagesSquare } from "lucide-react";
import { alertContext } from "../../../contexts/alertContext";
import { useContext } from "react"; import { useContext } from "react";
import { import {
CHAT_CANNOT_OPEN_DESCRIPTION, CHAT_CANNOT_OPEN_DESCRIPTION,
@ -9,6 +8,7 @@ import {
FLOW_NOT_BUILT_DESCRIPTION, FLOW_NOT_BUILT_DESCRIPTION,
FLOW_NOT_BUILT_TITLE, FLOW_NOT_BUILT_TITLE,
} from "../../../constants"; } from "../../../constants";
import { alertContext } from "../../../contexts/alertContext";
export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) { export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) {
const { setErrorData } = useContext(alertContext); const { setErrorData } = useContext(alertContext);

10
src/frontend/src/components/chatComponent/index.tsx
View file

@ -1,14 +1,14 @@
import { useContext, useEffect, useRef, useState } from "react"; import { useContext, useEffect, useRef, useState } from "react";
import { useNodes } from "reactflow"; import { useNodes } from "reactflow";
import { ChatType } from "../../types/chat"; import { ChatType } from "../../types/chat";
import ChatTrigger from "./chatTrigger";
import BuildTrigger from "./buildTrigger"; import BuildTrigger from "./buildTrigger";
import ChatTrigger from "./chatTrigger";
import { getBuildStatus } from "../../controllers/API";
import { NodeType } from "../../types/flow";
import FormModal from "../../modals/formModal";
import { TabsContext } from "../../contexts/tabsContext";
import * as _ from "lodash"; import * as _ from "lodash";
import { TabsContext } from "../../contexts/tabsContext";
import { getBuildStatus } from "../../controllers/API";
import FormModal from "../../modals/formModal";
import { NodeType } from "../../types/flow";
export default function Chat({ flow }: ChatType) { export default function Chat({ flow }: ChatType) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);

1
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -1,7 +1,6 @@
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import CodeAreaModal from "../../modals/codeAreaModal"; import CodeAreaModal from "../../modals/codeAreaModal";
import TextAreaModal from "../../modals/textAreaModal";
import { TextAreaComponentType } from "../../types/components"; import { TextAreaComponentType } from "../../types/components";
import { ExternalLink } from "lucide-react"; import { ExternalLink } from "lucide-react";

8
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -1,9 +1,9 @@
import { Listbox, Transition } from "@headlessui/react"; import { Listbox, Transition } from "@headlessui/react";
import { Check, ChevronsUpDown } from "lucide-react";
import { Fragment, useContext, useEffect, useState } from "react"; import { Fragment, useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import { DropDownComponentType } from "../../types/components"; import { DropDownComponentType } from "../../types/components";
import { classNames } from "../../utils"; import { classNames } from "../../utils";
import { ChevronsUpDown, Check } from "lucide-react";
import { PopUpContext } from "../../contexts/popUpContext";
export default function Dropdown({ export default function Dropdown({
value, value,
@ -63,8 +63,8 @@ export default function Dropdown({
<Listbox.Options <Listbox.Options
className={classNames( className={classNames(
editNode editNode
? "dropdown-component-true-options " ? "dropdown-component-true-options nowheel"
: "dropdown-component-false-options ", : "dropdown-component-false-options nowheel",
apiModal ? "mb-2 w-[250px]" : "absolute" apiModal ? "mb-2 w-[250px]" : "absolute"
)} )}
> >

4
src/frontend/src/components/floatComponent/index.tsx
View file

@ -1,7 +1,7 @@
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { FloatComponentType } from "../../types/components";
import { TabsContext } from "../../contexts/tabsContext";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext";
import { FloatComponentType } from "../../types/components";
export default function FloatComponent({ export default function FloatComponent({
value, value,

16
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -1,27 +1,25 @@
import { useContext } from "react";
import { TabsContext } from "../../../../contexts/tabsContext";
import { PopUpContext } from "../../../../contexts/popUpContext";
import { import {
Plus,
ChevronDown, ChevronDown,
ChevronLeft, ChevronLeft,
Undo, Plus,
Redo, Redo,
Settings2, Settings2,
Undo,
} from "lucide-react"; } from "lucide-react";
import { useContext } from "react";
import { PopUpContext } from "../../../../contexts/popUpContext";
import { TabsContext } from "../../../../contexts/tabsContext";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuLabel, DropdownMenuLabel,
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../../../ui/dropdown-menu"; } from "../../../ui/dropdown-menu";
import { alertContext } from "../../../../contexts/alertContext";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { alertContext } from "../../../../contexts/alertContext";
import { undoRedoContext } from "../../../../contexts/undoRedoContext"; import { undoRedoContext } from "../../../../contexts/undoRedoContext";
import FlowSettingsModal from "../../../../modals/flowSettingsModal"; import FlowSettingsModal from "../../../../modals/flowSettingsModal";
import { Button } from "../../../ui/button"; import { Button } from "../../../ui/button";

13
src/frontend/src/components/headerComponent/index.tsx
View file

@ -1,19 +1,18 @@
import { Home, MoonIcon, SunIcon, Users2 } from "lucide-react"; import { Bell, Home, MoonIcon, SunIcon, Users2 } from "lucide-react";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa"; import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
import { Button } from "../ui/button"; import { Link, useLocation, useParams } from "react-router-dom";
import { TabsContext } from "../../contexts/tabsContext";
import AlertDropdown from "../../alerts/alertDropDown"; import AlertDropdown from "../../alerts/alertDropDown";
import { USER_PROJECTS_HEADER } from "../../constants";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { darkContext } from "../../contexts/darkContext"; import { darkContext } from "../../contexts/darkContext";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import MenuBar from "./components/menuBar";
import { Link, useLocation, useParams } from "react-router-dom";
import { USER_PROJECTS_HEADER } from "../../constants";
import { getRepoStars } from "../../controllers/API"; import { getRepoStars } from "../../controllers/API";
import { Button } from "../ui/button";
import { Separator } from "../ui/separator"; import { Separator } from "../ui/separator";
import { Bell } from "lucide-react"; import MenuBar from "./components/menuBar";
export default function Header() { export default function Header() {
const { flows, addFlow, tabId } = useContext(TabsContext); const { flows, addFlow, tabId } = useContext(TabsContext);

12
src/frontend/src/components/inputComponent/index.tsx
View file

@ -1,8 +1,8 @@
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext";
import { InputComponentType } from "../../types/components"; import { InputComponentType } from "../../types/components";
import { classNames } from "../../utils"; import { classNames } from "../../utils";
import { TabsContext } from "../../contexts/tabsContext";
import { PopUpContext } from "../../contexts/popUpContext";
export default function InputComponent({ export default function InputComponent({
value, value,
@ -39,11 +39,13 @@ export default function InputComponent({
if (disableCopyPaste) setDisableCopyPaste(false); if (disableCopyPaste) setDisableCopyPaste(false);
}} }}
className={classNames( className={classNames(
" pr-12 ",
disabled ? " input-disable " : "", disabled ? " input-disable " : "",
password && !pwdVisible && myValue !== "" ? "password" : "", password && !pwdVisible && myValue !== ""
? " text-clip password "
: "",
editNode ? " input-edit-node " : " input-primary ", editNode ? " input-edit-node " : " input-primary ",
password && editNode ? "pr-8" : "pr-3" password && editNode ? "pr-8" : "",
password && !editNode ? "pr-10" : ""
)} )}
placeholder={password && editNode ? "Key" : "Type something..."} placeholder={password && editNode ? "Key" : "Type something..."}
onChange={(e) => { onChange={(e) => {

10
src/frontend/src/components/inputFileComponent/index.tsx
View file

@ -1,9 +1,9 @@
import { FileSearch2 } from "lucide-react";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { FileComponentType } from "../../types/components";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import { FileSearch2 } from "lucide-react";
import { uploadFile } from "../../controllers/API"; import { uploadFile } from "../../controllers/API";
import { FileComponentType } from "../../types/components";
export default function InputFileComponent({ export default function InputFileComponent({
value, value,
@ -98,8 +98,10 @@ export default function InputFileComponent({
onClick={handleButtonClick} onClick={handleButtonClick}
className={ className={
editNode editNode
? "input-edit-node " + "input-primary " ? " input-edit-node " + " input-dialog "
: "input-primary " + (disabled ? "input-disable " : "") : (disabled ? " input-disable " : "") +
" input-primary " +
" input-dialog "
} }
> >
{myValue !== "" ? myValue : "No file"} {myValue !== "" ? myValue : "No file"}

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

@ -1,9 +1,8 @@
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { InputListComponentType } from "../../types/components"; import { InputListComponentType } from "../../types/components";
import { TabsContext } from "../../contexts/tabsContext";
import _ from "lodash"; import _ from "lodash";
import { X, Plus } from "lucide-react"; import { Plus, X } from "lucide-react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
export default function InputListComponent({ export default function InputListComponent({

5
src/frontend/src/components/intComponent/index.tsx
View file

@ -1,8 +1,7 @@
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { FloatComponentType } from "../../types/components";
import { TabsContext } from "../../contexts/tabsContext";
import { classNames } from "../../utils";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext";
import { FloatComponentType } from "../../types/components";
export default function IntComponent({ export default function IntComponent({
value, value,

8
src/frontend/src/components/promptComponent/index.tsx
View file

@ -1,13 +1,13 @@
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { TextAreaComponentType } from "../../types/components";
import GenericModal from "../../modals/genericModal"; import GenericModal from "../../modals/genericModal";
import { TextAreaComponentType } from "../../types/components";
import { TypeModal } from "../../utils"; import { TypeModal } from "../../utils";
import { ExternalLink } from "lucide-react";
import { postValidatePrompt } from "../../controllers/API";
import { typesContext } from "../../contexts/typesContext";
import * as _ from "lodash"; import * as _ from "lodash";
import { ExternalLink } from "lucide-react";
import { typesContext } from "../../contexts/typesContext";
import { postValidatePrompt } from "../../controllers/API";
export default function PromptAreaComponent({ export default function PromptAreaComponent({
field_name, field_name,

4
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -1,8 +1,8 @@
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { TextAreaComponentType } from "../../types/components";
import GenericModal from "../../modals/genericModal"; import GenericModal from "../../modals/genericModal";
import { TypeModal, classNames } from "../../utils"; import { TextAreaComponentType } from "../../types/components";
import { TypeModal } from "../../utils";
import { ExternalLink } from "lucide-react"; import { ExternalLink } from "lucide-react";

2
src/frontend/src/components/toggleComponent/index.tsx
View file

@ -1,7 +1,7 @@
import { Switch } from "@headlessui/react"; import { Switch } from "@headlessui/react";
import { classNames } from "../../utils";
import { useEffect } from "react"; import { useEffect } from "react";
import { ToggleComponentType } from "../../types/components"; import { ToggleComponentType } from "../../types/components";
import { classNames } from "../../utils";
export default function ToggleComponent({ export default function ToggleComponent({
enabled, enabled,

1
src/frontend/src/components/toggleShadComponent/index.tsx
View file

@ -1,4 +1,3 @@
import { useEffect } from "react";
import { ToggleComponentType } from "../../types/components"; import { ToggleComponentType } from "../../types/components";
import { Switch } from "../ui/switch"; import { Switch } from "../ui/switch";

2
src/frontend/src/components/ui/accordion.tsx
View file

@ -1,8 +1,8 @@
"use client"; "use client";
import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion"; import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDownIcon } from "@radix-ui/react-icons"; import { ChevronDownIcon } from "@radix-ui/react-icons";
import * as React from "react";
import { cn } from "../../utils"; import { cn } from "../../utils";
const Accordion = AccordionPrimitive.Root; const Accordion = AccordionPrimitive.Root;

2
src/frontend/src/components/ui/badge.tsx
View file

@ -1,5 +1,5 @@
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority"; import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "../../utils"; import { cn } from "../../utils";
const badgeVariants = cva( const badgeVariants = cva(

2
src/frontend/src/components/ui/button.tsx
View file

@ -1,6 +1,6 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot"; import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority"; import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "../../utils"; import { cn } from "../../utils";
const buttonVariants = cva( const buttonVariants = cva(

2
src/frontend/src/components/ui/checkbox.tsx
View file

@ -1,8 +1,8 @@
"use client"; "use client";
import * as React from "react";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { Check } from "lucide-react"; import { Check } from "lucide-react";
import * as React from "react";
import { cn } from "../../utils"; import { cn } from "../../utils";
const Checkbox = React.forwardRef< const Checkbox = React.forwardRef<

2
src/frontend/src/components/ui/dialog.tsx
View file

@ -1,6 +1,6 @@
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog"; import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react"; import { X } from "lucide-react";
import * as React from "react";
import { cn } from "../../utils"; import { cn } from "../../utils";
const Dialog = DialogPrimitive.Root; const Dialog = DialogPrimitive.Root;

2
src/frontend/src/components/ui/dropdown-menu.tsx
View file

@ -1,8 +1,8 @@
"use client"; "use client";
import * as React from "react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"; import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { Check, ChevronRight, Circle } from "lucide-react"; import { Check, ChevronRight, Circle } from "lucide-react";
import * as React from "react";
import { cn } from "../../utils"; import { cn } from "../../utils";
const DropdownMenu = DropdownMenuPrimitive.Root; const DropdownMenu = DropdownMenuPrimitive.Root;

2
src/frontend/src/components/ui/label.tsx
View file

@ -1,8 +1,8 @@
"use client"; "use client";
import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label"; import * as LabelPrimitive from "@radix-ui/react-label";
import { cva, type VariantProps } from "class-variance-authority"; import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "../../utils"; import { cn } from "../../utils";
const labelVariants = cva( const labelVariants = cva(

2
src/frontend/src/components/ui/menubar.tsx
View file

@ -1,8 +1,8 @@
"use client"; "use client";
import * as React from "react";
import * as MenubarPrimitive from "@radix-ui/react-menubar"; import * as MenubarPrimitive from "@radix-ui/react-menubar";
import { Check, ChevronRight, Circle } from "lucide-react"; import { Check, ChevronRight, Circle } from "lucide-react";
import * as React from "react";
import { cn } from "../../utils"; import { cn } from "../../utils";

2
src/frontend/src/components/ui/progress.tsx
View file

@ -1,7 +1,7 @@
"use client"; "use client";
import * as React from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress"; import * as ProgressPrimitive from "@radix-ui/react-progress";
import * as React from "react";
import { cn } from "../../utils"; import { cn } from "../../utils";
const Progress = React.forwardRef< const Progress = React.forwardRef<

2
src/frontend/src/components/ui/rename-label.tsx
View file

@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from "react"; import { useEffect, useRef, useState } from "react";
import { cn } from "../../utils"; import { cn } from "../../utils";
export default function RenameLabel(props) { export default function RenameLabel(props) {

2
src/frontend/src/components/ui/separator.tsx
View file

@ -1,7 +1,7 @@
"use client"; "use client";
import * as React from "react";
import * as SeparatorPrimitive from "@radix-ui/react-separator"; import * as SeparatorPrimitive from "@radix-ui/react-separator";
import * as React from "react";
import { cn } from "../../utils"; import { cn } from "../../utils";
const Separator = React.forwardRef< const Separator = React.forwardRef<

2
src/frontend/src/components/ui/switch.tsx
View file

@ -1,7 +1,7 @@
"use client"; "use client";
import * as React from "react";
import * as SwitchPrimitives from "@radix-ui/react-switch"; import * as SwitchPrimitives from "@radix-ui/react-switch";
import * as React from "react";
import { cn } from "../../utils"; import { cn } from "../../utils";
const Switch = React.forwardRef< const Switch = React.forwardRef<

2
src/frontend/src/components/ui/table.tsx
View file

@ -5,7 +5,7 @@ const Table = React.forwardRef<
HTMLTableElement, HTMLTableElement,
React.HTMLAttributes<HTMLTableElement> React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<div className="w-full overflow-auto"> <div className="">
<table <table
ref={ref} ref={ref}
className={cn("w-full caption-bottom text-sm", className)} className={cn("w-full caption-bottom text-sm", className)}

2
src/frontend/src/components/ui/tabs.tsx
View file

@ -1,7 +1,7 @@
"use client"; "use client";
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs"; import * as TabsPrimitive from "@radix-ui/react-tabs";
import * as React from "react";
import { cn } from "../../utils"; import { cn } from "../../utils";
const Tabs = TabsPrimitive.Root; const Tabs = TabsPrimitive.Root;

2
src/frontend/src/components/ui/tooltip.tsx
View file

@ -1,7 +1,7 @@
"use client"; "use client";
import * as React from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip"; import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import * as React from "react";
import { cn } from "../../utils"; import { cn } from "../../utils";
const TooltipProvider = TooltipPrimitive.Provider; const TooltipProvider = TooltipPrimitive.Provider;

16
src/frontend/src/constants.tsx
View file

@ -1,5 +1,6 @@
// src/constants.tsx // src/constants.tsx
import { MessageSquare } from "lucide-react";
import { FlowType } from "./types/flow"; import { FlowType } from "./types/flow";
import { TabsState } from "./types/tabs"; import { TabsState } from "./types/tabs";
import { buildInputs, buildTweaks } from "./utils"; import { buildInputs, buildTweaks } from "./utils";
@ -57,6 +58,8 @@ export const CHAT_CANNOT_OPEN_DESCRIPTION = "This is not a chat flow.";
export const FLOW_NOT_BUILT_TITLE = "Flow not built"; export const FLOW_NOT_BUILT_TITLE = "Flow not built";
export const THOUGHTS_ICON = MessageSquare;
export const FLOW_NOT_BUILT_DESCRIPTION = export const FLOW_NOT_BUILT_DESCRIPTION =
"Please build the flow before chatting."; "Please build the flow before chatting.";
@ -85,6 +88,7 @@ export const getPythonApiCode = (
const tweaks = buildTweaks(flow); const tweaks = buildTweaks(flow);
const inputs = buildInputs(tabsState, flow.id); const inputs = buildInputs(tabsState, flow.id);
return `import requests return `import requests
from typing import Optional
BASE_API_URL = "${window.location.protocol}//${ BASE_API_URL = "${window.location.protocol}//${
window.location.host window.location.host
@ -98,7 +102,7 @@ TWEAKS = ${
: JSON.stringify(tweaks, null, 2) : JSON.stringify(tweaks, null, 2)
} }
def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict: def run_flow(inputs: dict, flow_id: str, tweaks: Optional[dict] = None) -> dict:
""" """
Run a flow with a given message and optional tweaks. Run a flow with a given message and optional tweaks.
@ -109,7 +113,7 @@ def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict:
""" """
api_url = f"{BASE_API_URL}/{flow_id}" api_url = f"{BASE_API_URL}/{flow_id}"
payload = {"inputs": ${inputs}} payload = {"inputs": inputs}
if tweaks: if tweaks:
payload["tweaks"] = tweaks payload["tweaks"] = tweaks
@ -118,8 +122,8 @@ def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict:
return response.json() return response.json()
# Setup any tweaks you want to apply to the flow # Setup any tweaks you want to apply to the flow
inputs = ${inputs}
print(run_flow("Your message", flow_id=FLOW_ID, tweaks=TWEAKS))`; print(run_flow(inputs, flow_id=FLOW_ID, tweaks=TWEAKS))`;
}; };
/** /**
* Function to get the curl code for the API * Function to get the curl code for the API
@ -134,6 +138,7 @@ export const getCurlCode = (
const flowId = flow.id; const flowId = flow.id;
const tweaks = buildTweaks(flow); const tweaks = buildTweaks(flow);
const inputs = buildInputs(tabsState, flow.id); const inputs = buildInputs(tabsState, flow.id);
return `curl -X POST \\ return `curl -X POST \\
${window.location.protocol}//${ ${window.location.protocol}//${
window.location.host window.location.host
@ -166,7 +171,8 @@ TWEAKS = ${
} }
flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS) flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS)
# Now you can use it like any chain # Now you can use it like any chain
flow(${inputs})`; inputs = ${inputs}
flow(inputs)`;
}; };
function buildTweakObject(tweak) { function buildTweakObject(tweak) {

8
src/frontend/src/contexts/SSEContext.tsx
View file

@ -1,10 +1,4 @@
import { import { createContext, useCallback, useContext, useState } from "react";
createContext,
useContext,
useState,
useEffect,
useCallback,
} from "react";
const initialValue = { const initialValue = {
updateSSEData: ({}) => {}, updateSSEData: ({}) => {},

41
src/frontend/src/contexts/index.tsx
View file

@ -1,35 +1,38 @@
import { ReactNode } from "react"; import { ReactNode } from "react";
import { ReactFlowProvider } from "reactflow";
import { TooltipProvider } from "../components/ui/tooltip";
import { SSEProvider } from "./SSEContext";
import { AlertProvider } from "./alertContext"; import { AlertProvider } from "./alertContext";
import { DarkProvider } from "./darkContext"; import { DarkProvider } from "./darkContext";
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";
import { ReactFlowProvider } from "reactflow";
import { UndoRedoProvider } from "./undoRedoContext"; import { UndoRedoProvider } from "./undoRedoContext";
import { SSEProvider } from "./SSEContext";
export default function ContextWrapper({ children }: { children: ReactNode }) { export default function ContextWrapper({ children }: { children: ReactNode }) {
//element to wrap all context //element to wrap all context
return ( return (
<> <>
<ReactFlowProvider> <TooltipProvider>
<DarkProvider> <ReactFlowProvider>
<TypesProvider> <DarkProvider>
<LocationProvider> <TypesProvider>
<AlertProvider> <LocationProvider>
<SSEProvider> <AlertProvider>
<TabsProvider> <SSEProvider>
<UndoRedoProvider> <TabsProvider>
<PopUpProvider>{children}</PopUpProvider> <UndoRedoProvider>
</UndoRedoProvider> <PopUpProvider>{children}</PopUpProvider>
</TabsProvider> </UndoRedoProvider>
</SSEProvider> </TabsProvider>
</AlertProvider> </SSEProvider>
</LocationProvider> </AlertProvider>
</TypesProvider> </LocationProvider>
</DarkProvider> </TypesProvider>
</ReactFlowProvider> </DarkProvider>
</ReactFlowProvider>
</TooltipProvider>
</> </>
); );
} }

3
src/frontend/src/contexts/popUpContext.tsx
View file

@ -1,5 +1,4 @@
import { createContext } from "react"; import React, { createContext, useState } from "react";
import React, { useState } from "react";
// context to set JSX element on the DOM // context to set JSX element on the DOM
export const PopUpContext = createContext({ export const PopUpContext = createContext({

36
src/frontend/src/contexts/tabsContext.tsx
View file

@ -1,33 +1,33 @@
import _ from "lodash";
import { import {
createContext,
useEffect,
useState,
useRef,
ReactNode, ReactNode,
createContext,
useContext, useContext,
useEffect,
useRef,
useState,
} from "react"; } from "react";
import { addEdge } from "reactflow";
import ShortUniqueId from "short-unique-id";
import {
deleteFlowFromDatabase,
downloadFlowsFromDatabase,
readFlowsFromDatabase,
saveFlowToDatabase,
updateFlowInDatabase,
uploadFlowsToDatabase,
} from "../controllers/API";
import { APIClassType, APITemplateType } from "../types/api";
import { FlowType, NodeType } from "../types/flow"; import { FlowType, NodeType } from "../types/flow";
import { TabsContextType, TabsState } from "../types/tabs"; import { TabsContextType, TabsState } from "../types/tabs";
import { import {
updateIds,
updateTemplate,
getRandomDescription, getRandomDescription,
getRandomName, getRandomName,
updateIds,
updateTemplate,
} from "../utils"; } from "../utils";
import { alertContext } from "./alertContext"; import { alertContext } from "./alertContext";
import { typesContext } from "./typesContext"; import { typesContext } from "./typesContext";
import { APIClassType, APITemplateType } from "../types/api";
import ShortUniqueId from "short-unique-id";
import { addEdge } from "reactflow";
import {
readFlowsFromDatabase,
deleteFlowFromDatabase,
saveFlowToDatabase,
downloadFlowsFromDatabase,
uploadFlowsToDatabase,
updateFlowInDatabase,
} from "../controllers/API";
import _ from "lodash";
const uid = new ShortUniqueId({ length: 5 }); const uid = new ShortUniqueId({ length: 5 });

2
src/frontend/src/contexts/typesContext.tsx
View file

@ -1,8 +1,8 @@
import { createContext, ReactNode, useEffect, useState } from "react"; import { createContext, ReactNode, useEffect, useState } from "react";
import { Node } from "reactflow"; import { Node } from "reactflow";
import { typesContextType } from "../types/typesContext";
import { getAll } from "../controllers/API"; import { getAll } from "../controllers/API";
import { APIKindType } from "../types/api"; import { APIKindType } from "../types/api";
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

2
src/frontend/src/contexts/undoRedoContext.tsx
View file

@ -1,3 +1,4 @@
import { cloneDeep } from "lodash";
import { import {
createContext, createContext,
useCallback, useCallback,
@ -6,7 +7,6 @@ import {
useState, useState,
} from "react"; } from "react";
import { Edge, Node, useReactFlow } from "reactflow"; import { Edge, Node, useReactFlow } from "reactflow";
import { cloneDeep } from "lodash";
import { TabsContext } from "./tabsContext"; import { TabsContext } from "./tabsContext";
type undoRedoContextType = { type undoRedoContextType = {

20
src/frontend/src/controllers/API/index.ts
View file

@ -1,15 +1,15 @@
import {
BuildStatusTypeAPI,
errorsTypeAPI,
InitTypeAPI,
UploadFileTypeAPI,
APIClassType,
PromptTypeAPI,
} from "./../../types/api/index";
import { APIObjectType, sendAllProps } from "../../types/api/index";
import axios, { AxiosResponse } from "axios"; import axios, { AxiosResponse } from "axios";
import { FlowStyleType, FlowType } from "../../types/flow";
import { ReactFlowJsonObject } from "reactflow"; import { ReactFlowJsonObject } from "reactflow";
import { APIObjectType, sendAllProps } from "../../types/api/index";
import { FlowStyleType, FlowType } from "../../types/flow";
import {
APIClassType,
BuildStatusTypeAPI,
InitTypeAPI,
PromptTypeAPI,
UploadFileTypeAPI,
errorsTypeAPI,
} from "./../../types/api/index";
/** /**
* Fetches all objects from the API endpoint. * Fetches all objects from the API endpoint.

19
src/frontend/src/index.css
View file

@ -173,7 +173,7 @@ The cursor: default; property value restores the browser's default cursor style
@apply w-full overflow-auto scrollbar-hide @apply w-full overflow-auto scrollbar-hide
} }
.search-icon { .search-icon {
@apply absolute inset-y-0 right-0 flex items-center py-1.5 pr-3 @apply absolute inset-y-0 right-0 flex items-center py-1.5 pr-5
} }
.extra-side-bar-save-disable { .extra-side-bar-save-disable {
@apply text-muted-foreground @apply text-muted-foreground
@ -938,13 +938,13 @@ The cursor: default; property value restores the browser's default cursor style
@apply flex-max-width px-2 py-6 pl-4 pr-9 @apply flex-max-width px-2 py-6 pl-4 pr-9
} }
.form-modal-chatbot-icon { .form-modal-chatbot-icon {
@apply mb-3 mr-3 mt-1 w-20 @apply mb-3 ml-3 mr-6 mt-1
} }
.form-modal-chat-image { .form-modal-chat-image {
@apply flex flex-col items-center gap-1 @apply flex flex-col items-center gap-1
} }
.form-modal-chat-img-box { .form-modal-chat-img-box {
@apply flex h-8 w-8 items-center justify-center overflow-hidden rounded-md p-5 text-2xl @apply relative flex h-8 w-8 items-center justify-center overflow-hidden rounded-md p-5 text-2xl
} }
.form-modal-chat-bot-icon { .form-modal-chat-bot-icon {
@apply form-modal-chat-img-box bg-[#afe6ef] @apply form-modal-chat-img-box bg-[#afe6ef]
@ -952,17 +952,20 @@ The cursor: default; property value restores the browser's default cursor style
.form-modal-chat-user-icon { .form-modal-chat-user-icon {
@apply form-modal-chat-img-box bg-[#aface9] @apply form-modal-chat-img-box bg-[#aface9]
} }
.form-modal-chat-icon-img {
@apply absolute scale-[60%]
}
.form-modal-chat-text-position { .form-modal-chat-text-position {
@apply flex w-full flex-1 items-center text-start @apply flex w-full flex-1 text-start
} }
.form-modal-chat-text { .form-modal-chat-text {
@apply relative inline-block w-full text-start text-sm font-normal text-muted-foreground @apply relative flex w-full flex-col text-start text-sm font-normal text-muted-foreground
} }
.form-modal-chat-icon-div { .form-modal-chat-icon-div {
@apply absolute -left-8 -top-5 cursor-pointer @apply absolute -left-6 -top-3 cursor-pointer
} }
.form-modal-chat-icon { .form-modal-chat-icon {
@apply h-5 w-5 animate-bounce dark:text-white @apply h-4 w-4 animate-bounce dark:text-white
} }
.form-modal-chat-thought-border { .form-modal-chat-thought-border {
@apply rounded-md border border-gray-300 @apply rounded-md border border-gray-300
@ -977,7 +980,7 @@ The cursor: default; property value restores the browser's default cursor style
@apply mt-1 animate-pulse cursor-default @apply mt-1 animate-pulse cursor-default
} }
.form-modal-initial-prompt-btn { .form-modal-initial-prompt-btn {
@apply mb-2 flex items-center gap-4 rounded-md border border-ring/60 bg-background px-4 py-3 text-base font-semibold @apply mb-2 flex items-center gap-4 rounded-md border border-ring/60 bg-background px-4 py-2 text-base font-semibold
} }
.form-modal-iv-box { .form-modal-iv-box {
@apply mt-2 flex-max-width h-[80vh] @apply mt-2 flex-max-width h-[80vh]

5
src/frontend/src/index.tsx
View file

@ -1,9 +1,8 @@
import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom"; import { BrowserRouter } from "react-router-dom";
import App from "./App";
import ContextWrapper from "./contexts"; import ContextWrapper from "./contexts";
import reportWebVitals from "./reportWebVitals";
import "./index.css"; import "./index.css";

76
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -1,42 +1,15 @@
import { useContext, useEffect, useRef, useState } from "react"; import "ace-builds/src-noconflict/ext-language_tools";
import { PopUpContext } from "../../contexts/popUpContext";
import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/theme-twilight"; import "ace-builds/src-noconflict/theme-twilight";
import "ace-builds/src-noconflict/ext-language_tools"; import { useContext, useEffect, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
// import "ace-builds/webpack-resolver"; // import "ace-builds/webpack-resolver";
import { darkContext } from "../../contexts/darkContext"; import { Check, Clipboard, Code2 } from "lucide-react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../../components/ui/dialog";
import { FlowType } from "../../types/flow/index";
import { getCurlCode, getPythonApiCode, getPythonCode } from "../../constants";
import { EXPORT_CODE_DIALOG } from "../../constants";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "../../components/ui/tabs";
import { Check, Clipboard, Code2 } from "lucide-react";
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "../../components/ui/table";
import { buildTweaks, classNames, limitScrollFieldsModal } from "../../utils";
import AccordionComponent from "../../components/AccordionComponent"; import AccordionComponent from "../../components/AccordionComponent";
import ShadTooltip from "../../components/ShadTooltipComponent";
import CodeAreaComponent from "../../components/codeAreaComponent"; import CodeAreaComponent from "../../components/codeAreaComponent";
import Dropdown from "../../components/dropdownComponent"; import Dropdown from "../../components/dropdownComponent";
import FloatComponent from "../../components/floatComponent"; import FloatComponent from "../../components/floatComponent";
@ -47,9 +20,38 @@ import IntComponent from "../../components/intComponent";
import PromptAreaComponent from "../../components/promptComponent"; import PromptAreaComponent from "../../components/promptComponent";
import TextAreaComponent from "../../components/textAreaComponent"; import TextAreaComponent from "../../components/textAreaComponent";
import ToggleShadComponent from "../../components/toggleShadComponent"; import ToggleShadComponent from "../../components/toggleShadComponent";
import ShadTooltip from "../../components/ShadTooltipComponent"; import {
import { cloneDeep, filter } from "lodash"; Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../../components/ui/dialog";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "../../components/ui/table";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "../../components/ui/tabs";
import {
EXPORT_CODE_DIALOG,
getCurlCode,
getPythonApiCode,
getPythonCode,
} from "../../constants";
import { darkContext } from "../../contexts/darkContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import { FlowType } from "../../types/flow/index";
import { buildTweaks, classNames } from "../../utils";
export default function ApiModal({ flow }: { flow: FlowType }) { export default function ApiModal({ flow }: { flow: FlowType }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
@ -420,7 +422,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
) : t.data.node.template[n] ) : t.data.node.template[n]
.multiline ? ( .multiline ? (
<ShadTooltip <ShadTooltip
delayDuration={1000}
content={buildContent( content={buildContent(
t.data.node.template[ t.data.node.template[
n n
@ -508,7 +509,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
) : t.data.node.template[n] ) : t.data.node.template[n]
.type === "file" ? ( .type === "file" ? (
<ShadTooltip <ShadTooltip
delayDuration={1000}
content={buildContent( content={buildContent(
getValue( getValue(
t.data.node.template[n] t.data.node.template[n]
@ -624,7 +624,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
) : t.data.node.template[n] ) : t.data.node.template[n]
.type === "prompt" ? ( .type === "prompt" ? (
<ShadTooltip <ShadTooltip
delayDuration={1000}
content={buildContent( content={buildContent(
getValue( getValue(
t.data.node.template[n] t.data.node.template[n]
@ -661,7 +660,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
) : t.data.node.template[n] ) : t.data.node.template[n]
.type === "code" ? ( .type === "code" ? (
<ShadTooltip <ShadTooltip
delayDuration={1000}
content={buildContent( content={buildContent(
getValue( getValue(
t.data.node.template[n] t.data.node.template[n]
@ -722,7 +720,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
</div> </div>
))} ))}
{/* {/*
<div className="flex flex-col gap-5 bg-muted"> <div className="flex flex-col gap-5 bg-muted">
<Table className="table-fixed bg-muted outline-1"> <Table className="table-fixed bg-muted outline-1">
<TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10"> <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">

101
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -1,26 +1,17 @@
import { useContext, useEffect, useRef, useState } from "react"; import { Variable } from "lucide-react";
import { PopUpContext } from "../../contexts/popUpContext"; import { useContext, useRef, useState } from "react";
import { NodeDataType } from "../../types/flow";
import { classNames, limitScrollFieldsModal } from "../../utils";
import { typesContext } from "../../contexts/typesContext";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "../../components/ui/table";
import ToggleShadComponent from "../../components/toggleShadComponent";
import InputListComponent from "../../components/inputListComponent";
import TextAreaComponent from "../../components/textAreaComponent";
import InputComponent from "../../components/inputComponent";
import FloatComponent from "../../components/floatComponent";
import Dropdown from "../../components/dropdownComponent";
import IntComponent from "../../components/intComponent";
import InputFileComponent from "../../components/inputFileComponent";
import PromptAreaComponent from "../../components/promptComponent";
import CodeAreaComponent from "../../components/codeAreaComponent"; import CodeAreaComponent from "../../components/codeAreaComponent";
import Dropdown from "../../components/dropdownComponent";
import FloatComponent from "../../components/floatComponent";
import InputComponent from "../../components/inputComponent";
import InputFileComponent from "../../components/inputFileComponent";
import InputListComponent from "../../components/inputListComponent";
import IntComponent from "../../components/intComponent";
import PromptAreaComponent from "../../components/promptComponent";
import TextAreaComponent from "../../components/textAreaComponent";
import ToggleShadComponent from "../../components/toggleShadComponent";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@ -30,9 +21,19 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { Button } from "../../components/ui/button"; import {
import { Badge } from "../../components/ui/badge"; Table,
import { Variable } from "lucide-react"; TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "../../components/ui/table";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext";
import { typesContext } from "../../contexts/typesContext";
import { NodeDataType } from "../../types/flow";
import { classNames, limitScrollFieldsModal } from "../../utils";
export default function EditNodeModal({ data }: { data: NodeDataType }) { export default function EditNodeModal({ data }: { data: NodeDataType }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
@ -54,7 +55,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const { types } = useContext(typesContext); const { types } = useContext(typesContext);
const ref = useRef(); const ref = useRef();
const [enabled, setEnabled] = useState(null); const { setTabsState, tabId, save } = useContext(TabsContext);
const { reactFlowInstance } = useContext(typesContext);
let disabled =
reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ??
false;
if (nodeLength == 0) { if (nodeLength == 0) {
closePopUp(); closePopUp();
} }
@ -66,8 +72,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
} }
} }
useEffect(() => {}, [closePopUp, data.node.template]);
function changeAdvanced(node): void { function changeAdvanced(node): void {
Object.keys(data.node.template).filter((n, i) => { Object.keys(data.node.template).filter((n, i) => {
if (n === node.name) { if (n === node.name) {
@ -78,6 +82,20 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
setNodeValue(!nodeValue); setNodeValue(!nodeValue);
} }
const handleOnNewValue = (newValue: any, name) => {
data.node.template[name].value = newValue;
// Set state to pending
setTabsState((prev) => {
return {
...prev,
[tabId]: {
...prev[tabId],
isPending: true,
},
};
});
};
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger asChild></DialogTrigger> <DialogTrigger asChild></DialogTrigger>
@ -153,7 +171,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
: data.node.template[n].value : data.node.template[n].value
} }
onChange={(t: string[]) => { onChange={(t: string[]) => {
data.node.template[n].value = t; handleOnNewValue(t, n);
}} }}
/> />
) : data.node.template[n].multiline ? ( ) : data.node.template[n].multiline ? (
@ -162,7 +180,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
editNode={true} editNode={true}
value={data.node.template[n].value ?? ""} value={data.node.template[n].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[n].value = t; handleOnNewValue(t, n);
}} }}
/> />
) : ( ) : (
@ -174,7 +192,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
} }
value={data.node.template[n].value ?? ""} value={data.node.template[n].value ?? ""}
onChange={(t) => { onChange={(t) => {
data.node.template[n].value = t; handleOnNewValue(t, n);
}} }}
/> />
)} )}
@ -183,13 +201,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
<div className="ml-auto"> <div className="ml-auto">
{" "} {" "}
<ToggleShadComponent <ToggleShadComponent
disabled={disabled}
enabled={data.node.template[n].value} enabled={data.node.template[n].value}
setEnabled={(e) => { setEnabled={(t) => {
data.node.template[n].value = e; handleOnNewValue(t, n);
setEnabled(e);
}} }}
size="small" size="small"
disabled={false}
/> />
</div> </div>
) : data.node.template[n].type === "float" ? ( ) : data.node.template[n].type === "float" ? (
@ -210,9 +227,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
numberOfOptions={nodeLength} numberOfOptions={nodeLength}
editNode={true} editNode={true}
options={data.node.template[n].options} options={data.node.template[n].options}
onSelect={(newValue) => onSelect={(t) => handleOnNewValue(t, n)}
(data.node.template[n].value = newValue)
}
value={ value={
data.node.template[n].value ?? data.node.template[n].value ??
"Choose an option" "Choose an option"
@ -226,7 +241,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
editNode={true} editNode={true}
value={data.node.template[n].value ?? ""} value={data.node.template[n].value ?? ""}
onChange={(t) => { onChange={(t) => {
data.node.template[n].value = t; handleOnNewValue(t, n);
}} }}
/> />
</div> </div>
@ -237,12 +252,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
disabled={false} disabled={false}
value={data.node.template[n].value ?? ""} value={data.node.template[n].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[n].value = t; handleOnNewValue(t, n);
}} }}
fileTypes={data.node.template[n].fileTypes} fileTypes={data.node.template[n].fileTypes}
suffixes={data.node.template[n].suffixes} suffixes={data.node.template[n].suffixes}
onFileChange={(t: string) => { onFileChange={(t: string) => {
data.node.template[n].content = t; handleOnNewValue(t, n);
}} }}
></InputFileComponent> ></InputFileComponent>
</div> </div>
@ -254,7 +269,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
disabled={false} disabled={false}
value={data.node.template[n].value ?? ""} value={data.node.template[n].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[n].value = t; handleOnNewValue(t, n);
}} }}
/> />
</div> </div>
@ -265,7 +280,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
editNode={true} editNode={true}
value={data.node.template[n].value ?? ""} value={data.node.template[n].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[n].value = t; handleOnNewValue(t, n);
}} }}
/> />
</div> </div>

18
src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
View file

@ -1,14 +1,14 @@
import { useState } from "react"; import { useState } from "react";
import InputListComponent from "../../../../components/inputListComponent";
import Dropdown from "../../../../components/dropdownComponent";
import TextAreaComponent from "../../../../components/textAreaComponent";
import InputComponent from "../../../../components/inputComponent";
import ToggleComponent from "../../../../components/toggleComponent";
import FloatComponent from "../../../../components/floatComponent";
import IntComponent from "../../../../components/intComponent";
import InputFileComponent from "../../../../components/inputFileComponent";
import PromptAreaComponent from "../../../../components/promptComponent";
import CodeAreaComponent from "../../../../components/codeAreaComponent"; import CodeAreaComponent from "../../../../components/codeAreaComponent";
import Dropdown from "../../../../components/dropdownComponent";
import FloatComponent from "../../../../components/floatComponent";
import InputComponent from "../../../../components/inputComponent";
import InputFileComponent from "../../../../components/inputFileComponent";
import InputListComponent from "../../../../components/inputListComponent";
import IntComponent from "../../../../components/intComponent";
import PromptAreaComponent from "../../../../components/promptComponent";
import TextAreaComponent from "../../../../components/textAreaComponent";
import ToggleComponent from "../../../../components/toggleComponent";
import { classNames } from "../../../../utils"; import { classNames } from "../../../../utils";
export default function ModalField({ export default function ModalField({

4
src/frontend/src/modals/NodeModal/index.tsx
View file

@ -1,6 +1,8 @@
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { X } from "lucide-react";
import { Fragment, useContext, useRef, useState } from "react"; import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { typesContext } from "../../contexts/typesContext";
import { NodeDataType } from "../../types/flow"; import { NodeDataType } from "../../types/flow";
import { import {
classNames, classNames,
@ -9,9 +11,7 @@ import {
nodeIconsLucide, nodeIconsLucide,
toTitleCase, toTitleCase,
} from "../../utils"; } from "../../utils";
import { typesContext } from "../../contexts/typesContext";
import ModalField from "./components/ModalField"; import ModalField from "./components/ModalField";
import { X } from "lucide-react";
export default function NodeModal({ data }: { data: NodeDataType }) { export default function NodeModal({ data }: { data: NodeDataType }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);

69
src/frontend/src/modals/baseModal/index.tsx Normal file
View file

@ -0,0 +1,69 @@
import { ReactNode, useContext } from "react";
import React from "react";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../../components/ui/dialog";
import { PopUpContext } from "../../contexts/popUpContext";
type ContentProps = { children: ReactNode };
type HeaderProps = { children: ReactNode; description: string };
const Content: React.FC<ContentProps> = ({ children }) => {
return <div className="h-full w-full">{children}</div>;
};
const Header: React.FC<{ children: ReactNode; description: string }> = ({
children,
description,
}) => {
return (
<DialogHeader>
<DialogTitle className="flex items-center">{children}</DialogTitle>
<DialogDescription>{description}</DialogDescription>
</DialogHeader>
);
};
interface BaseModalProps {
children: [React.ReactElement<ContentProps>, React.ReactElement<HeaderProps>];
open: boolean;
setOpen: (open: boolean) => void;
}
function BaseModal({ open, setOpen, children }: BaseModalProps) {
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
function setModalOpen(x: boolean) {
setOpen(x);
if (x === false) {
setTimeout(() => {
setCloseEdit("editcode");
closePopUp();
}, 300);
}
}
const headerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Header
);
const ContentChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Content
);
//UPDATE COLORS AND STYLE CLASSSES
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger className="hidden"></DialogTrigger>
<DialogContent className="min-w-[80vw]">
{headerChild}
<div className="mt-2 flex h-[80vh] w-full ">{ContentChild}</div>
</DialogContent>
</Dialog>
);
}
BaseModal.Content = Content;
BaseModal.Header = Header;
export default BaseModal;

18
src/frontend/src/modals/chatModal/chatMessage/index.tsx
View file

@ -1,17 +1,17 @@
import Convert from "ansi-to-html";
import DOMPurify from "dompurify";
import { MessageCircle, User2 } from "lucide-react";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { ChatMessageType } from "../../../types/chat";
import { classNames } from "../../../utils";
import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
import AiIconStill from "../../../assets/froze-flow.png";
import FileCard from "../fileComponent";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import rehypeMathjax from "rehype-mathjax"; import rehypeMathjax from "rehype-mathjax";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
import remarkMath from "remark-math"; import remarkMath from "remark-math";
import { CodeBlock } from "./codeBlock"; import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
import Convert from "ansi-to-html"; import AiIconStill from "../../../assets/froze-flow.png";
import { User2, MessageCircle } from "lucide-react"; import { ChatMessageType } from "../../../types/chat";
import DOMPurify from "dompurify"; import { classNames } from "../../../utils";
import { CodeBlock } from "../../formModal/chatMessage/codeBlock";
import FileCard from "../../formModal/fileComponent";
export default function ChatMessage({ export default function ChatMessage({
chat, chat,
lockChat, lockChat,

8
src/frontend/src/modals/chatModal/index.tsx
View file

@ -1,14 +1,14 @@
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { Eraser, MessagesSquare, X } from "lucide-react";
import { Fragment, useContext, useEffect, useRef, useState } from "react"; import { Fragment, useContext, useEffect, useRef, useState } from "react";
import { FlowType } from "../../types/flow";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { validateNodes } from "../../utils";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import ChatMessage from "./chatMessage";
import { X, MessagesSquare, Eraser } from "lucide-react";
import { sendAllProps } from "../../types/api"; import { sendAllProps } from "../../types/api";
import { ChatMessageType } from "../../types/chat"; import { ChatMessageType } from "../../types/chat";
import { FlowType } from "../../types/flow";
import { validateNodes } from "../../utils";
import ChatInput from "./chatInput"; import ChatInput from "./chatInput";
import ChatMessage from "./chatMessage";
import _ from "lodash"; import _ from "lodash";
import { getHealth } from "../../controllers/API"; import { getHealth } from "../../controllers/API";

140
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -1,27 +1,20 @@
import { useContext, useRef, useState } from "react"; import { DialogTitle } from "@radix-ui/react-dialog";
import { PopUpContext } from "../../contexts/popUpContext"; import "ace-builds/src-noconflict/ace";
import AceEditor from "react-ace"; import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/theme-twilight"; import "ace-builds/src-noconflict/theme-twilight";
import "ace-builds/src-noconflict/ext-language_tools"; import { TerminalSquare } from "lucide-react";
// import "ace-builds/webpack-resolver"; import { useContext, useEffect, useRef, useState } from "react";
import { darkContext } from "../../contexts/darkContext"; import AceEditor from "react-ace";
import { postValidateCode } from "../../controllers/API";
import { alertContext } from "../../contexts/alertContext";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../../components/ui/dialog";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants"; import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
import { TerminalSquare } from "lucide-react"; import { alertContext } from "../../contexts/alertContext";
import { darkContext } from "../../contexts/darkContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { postValidateCode } from "../../controllers/API";
import { APIClassType } from "../../types/api"; import { APIClassType } from "../../types/api";
import BaseModal from "../baseModal";
export default function CodeAreaModal({ export default function CodeAreaModal({
value, value,
@ -38,18 +31,15 @@ export default function CodeAreaModal({
const [code, setCode] = useState(value); const [code, setCode] = useState(value);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const { dark } = useContext(darkContext); const { dark } = useContext(darkContext);
const { closePopUp } = useContext(PopUpContext);
const { setErrorData, setSuccessData } = useContext(alertContext); const { setErrorData, setSuccessData } = useContext(alertContext);
const { closePopUp, setCloseEdit } = useContext(PopUpContext); const [error, setError] = useState<{
detail: { error: string; traceback: string };
}>(null);
const ref = useRef(); const ref = useRef();
function setModalOpen(x: boolean) { useEffect(() => {
setOpen(x); setValue(code);
if (x === false) { }, [code, setValue]);
setTimeout(() => {
setCloseEdit("editcode");
closePopUp();
}, 300);
}
}
function handleClick() { function handleClick() {
setLoading(true); setLoading(true);
@ -64,7 +54,7 @@ export default function CodeAreaModal({
title: "Code is ready to run", title: "Code is ready to run",
}); });
setValue(code); setValue(code);
setModalOpen(false); setOpen((old) => !old);
} else { } else {
if (funcErrors.length !== 0) { if (funcErrors.length !== 0) {
setErrorData({ setErrorData({
@ -94,46 +84,60 @@ export default function CodeAreaModal({
} }
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <BaseModal open={true} setOpen={setOpen}>
<DialogTrigger></DialogTrigger> <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
<DialogContent className="min-w-[80vw]"> <DialogTitle className="flex items-center">
<DialogHeader> <span className="pr-2">Edit Code</span>
<DialogTitle className="flex items-center"> <TerminalSquare
<span className="pr-2">Edit Code</span> strokeWidth={1.5}
<TerminalSquare className="h-6 w-6 pl-1 text-primary "
strokeWidth={1.5} aria-hidden="true"
className="h-6 w-6 pl-1 text-primary "
aria-hidden="true"
/>
</DialogTitle>
<DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader>
<div className="code-area-modal-editor-div">
<AceEditor
value={code}
mode="python"
highlightActiveLine={true}
showPrintMargin={false}
fontSize={14}
showGutter
enableLiveAutocompletion
theme={dark ? "twilight" : "github"}
name="CodeEditor"
onChange={(value) => {
setCode(value);
}}
className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
/> />
</DialogTitle>
</BaseModal.Header>
<BaseModal.Content>
<div className="flex h-full w-full flex-col transition-all">
<div className="h-full w-full">
<AceEditor
value={code}
mode="python"
highlightActiveLine={true}
showPrintMargin={false}
fontSize={14}
showGutter
enableLiveAutocompletion
theme={dark ? "twilight" : "github"}
name="CodeEditor"
onChange={(value) => {
setCode(value);
}}
className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
/>
</div>
<div
className={
"w-full transition-all delay-500 " +
(error?.detail.error !== undefined ? "h-2/6" : "h-0")
}
>
<div className="mt-1 h-full w-full overflow-x-clip overflow-y-scroll text-left custom-scroll">
<h1 className="text-lg text-destructive">
{error?.detail?.error}
</h1>
<div className="ml-2 w-full break-all text-sm text-status-red">
<pre className="w-full whitespace-pre-wrap break-all">
{error?.detail?.traceback}
</pre>
</div>
</div>
</div>
<div className="flex h-fit w-full justify-end">
<Button className="mt-3" onClick={handleClick} type="submit">
Check & Save
</Button>
</div>
</div> </div>
</BaseModal.Content>
<DialogFooter> </BaseModal>
<Button className="mt-3" onClick={handleClick} type="submit">
{/* {loading?(<Loading/>):'Check & Save'} */}
Check & Save
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
); );
} }

16
src/frontend/src/modals/exportModal/index.tsx
View file

@ -1,8 +1,8 @@
import { Download } from "lucide-react";
import { useContext, useRef, useState } from "react"; import { useContext, useRef, useState } from "react";
import { alertContext } from "../../contexts/alertContext"; import EditFlowSettings from "../../components/EditFlowSettingsComponent";
import { PopUpContext } from "../../contexts/popUpContext"; import { Button } from "../../components/ui/button";
import { TabsContext } from "../../contexts/tabsContext"; import { Checkbox } from "../../components/ui/checkbox";
import { removeApiKeys } from "../../utils";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@ -12,11 +12,11 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox";
import { EXPORT_DIALOG_SUBTITLE } from "../../constants"; import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
import { Download } from "lucide-react"; import { alertContext } from "../../contexts/alertContext";
import EditFlowSettings from "../../components/EditFlowSettingsComponent"; import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext";
import { removeApiKeys } from "../../utils";
export default function ExportModal() { export default function ExportModal() {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);

13
src/frontend/src/modals/flowSettingsModal/index.tsx
View file

@ -1,7 +1,7 @@
import { Settings2 } from "lucide-react";
import { useContext, useRef, useState } from "react"; import { useContext, useRef, useState } from "react";
import { alertContext } from "../../contexts/alertContext"; import EditFlowSettings from "../../components/EditFlowSettingsComponent";
import { PopUpContext } from "../../contexts/popUpContext"; import { Button } from "../../components/ui/button";
import { TabsContext } from "../../contexts/tabsContext";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@ -11,11 +11,10 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
import { SETTINGS_DIALOG_SUBTITLE } from "../../constants"; import { SETTINGS_DIALOG_SUBTITLE } from "../../constants";
import EditFlowSettings from "../../components/EditFlowSettingsComponent"; import { alertContext } from "../../contexts/alertContext";
import { Settings2 } from "lucide-react"; import { PopUpContext } from "../../contexts/popUpContext";
import { updateFlowInDatabase } from "../../controllers/API"; import { TabsContext } from "../../contexts/tabsContext";
export default function FlowSettingsModal() { export default function FlowSettingsModal() {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);

19
src/frontend/src/modals/formModal/chatInput/index.tsx
View file

@ -1,7 +1,6 @@
import { Lock, LucideSend } from "lucide-react";
import { useEffect } from "react";
import { classNames } from "../../../utils"; import { classNames } from "../../../utils";
import { useContext, useEffect, useRef, useState } from "react";
import { TabsContext } from "../../../contexts/tabsContext";
import { Eraser, Lock, LucideSend } from "lucide-react";
export default function ChatInput({ export default function ChatInput({
lockChat, lockChat,
@ -49,9 +48,7 @@ export default function ChatInput({
setChatValue(e.target.value); setChatValue(e.target.value);
}} }}
className={classNames( className={classNames(
lockChat lockChat ? " form-modal-lock-true" : " form-modal-lock-false",
? " form-modal-lock-true"
: " form-modal-lock-false",
"form-modal-lockchat" "form-modal-lockchat"
)} )}
placeholder={"Send a message..."} placeholder={"Send a message..."}
@ -66,15 +63,9 @@ export default function ChatInput({
onClick={() => sendMessage()} onClick={() => sendMessage()}
> >
{lockChat ? ( {lockChat ? (
<Lock <Lock className="form-modal-lock-icon" aria-hidden="true" />
className="form-modal-lock-icon"
aria-hidden="true"
/>
) : ( ) : (
<LucideSend <LucideSend className="form-modal-send-icon " aria-hidden="true" />
className="form-modal-send-icon "
aria-hidden="true"
/>
)} )}
</button> </button>
</div> </div>

37
src/frontend/src/modals/formModal/chatMessage/index.tsx
View file

@ -1,23 +1,17 @@
import { useEffect, useRef, useState } from "react"; import Convert from "ansi-to-html";
import { ChatMessageType } from "../../../types/chat"; import { ChevronDown } from "lucide-react";
import { classNames } from "../../../utils"; import { useState } from "react";
import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
import AiIconStill from "../../../assets/froze-flow.png";
import FileCard from "../fileComponent";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import rehypeMathjax from "rehype-mathjax"; import rehypeMathjax from "rehype-mathjax";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
import remarkMath from "remark-math"; import remarkMath from "remark-math";
import MaleTechnology from "../../../assets/male-technologist.png";
import Robot from "../../../assets/robot.png";
import { THOUGHTS_ICON } from "../../../constants";
import { ChatMessageType } from "../../../types/chat";
import { classNames } from "../../../utils";
import FileCard from "../fileComponent";
import { CodeBlock } from "./codeBlock"; import { CodeBlock } from "./codeBlock";
import Convert from "ansi-to-html";
import { User2, MessageSquare, ChevronDown } from "lucide-react";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "../../../components/ui/accordion";
import { Badge } from "../../../components/ui/badge";
export default function ChatMessage({ export default function ChatMessage({
chat, chat,
@ -34,25 +28,20 @@ export default function ChatMessage({
const [promptOpen, setPromptOpen] = useState(false); const [promptOpen, setPromptOpen] = useState(false);
return ( return (
<div <div
className={classNames( className={classNames("form-modal-chat-position", chat.isSend ? "" : " ")}
"form-modal-chat-position",
chat.isSend ? "" : " "
)}
> >
<div className={classNames("form-modal-chatbot-icon ")}> <div className={classNames("form-modal-chatbot-icon ")}>
{!chat.isSend ? ( {!chat.isSend ? (
<div className="form-modal-chat-image"> <div className="form-modal-chat-image">
<div className="form-modal-chat-bot-icon "> <div className="form-modal-chat-bot-icon ">
🤖 <img src={Robot} className="form-modal-chat-icon-img" />
</div> </div>
<span className="text-xs">Chatbot</span>
</div> </div>
) : ( ) : (
<div className="form-modal-chat-image"> <div className="form-modal-chat-image">
<div className="form-modal-chat-user-icon "> <div className="form-modal-chat-user-icon ">
👨‍💻 <img src={MaleTechnology} className="form-modal-chat-icon-img" />
</div> </div>
<span className="text-xs">User</span>
</div> </div>
)} )}
</div> </div>
@ -64,7 +53,7 @@ export default function ChatMessage({
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
className="form-modal-chat-icon-div" className="form-modal-chat-icon-div"
> >
<MessageSquare className="form-modal-chat-icon" /> <THOUGHTS_ICON className="form-modal-chat-icon" />
</div> </div>
)} )}
{chat.thought && chat.thought !== "" && !hidden && ( {chat.thought && chat.thought !== "" && !hidden && (

2
src/frontend/src/modals/formModal/fileComponent/index.tsx
View file

@ -1,6 +1,6 @@
import * as base64js from "base64-js"; import * as base64js from "base64-js";
import { useState } from "react";
import { DownloadCloud, File } from "lucide-react"; import { DownloadCloud, File } from "lucide-react";
import { useState } from "react";
export default function FileCard({ fileName, content, fileType }) { export default function FileCard({ fileName, content, fileType }) {
const handleDownload = () => { const handleDownload = () => {

35
src/frontend/src/modals/formModal/index.tsx
View file

@ -1,15 +1,23 @@
import { Eraser, TerminalSquare, Variable } from "lucide-react";
import { useContext, useEffect, useRef, useState } from "react"; import { useContext, useEffect, useRef, useState } from "react";
import { FlowType } from "../../types/flow";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { classNames, validateNodes } from "../../utils";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import ChatMessage from "./chatMessage";
import { TerminalSquare, MessageSquare, Variable, Eraser } from "lucide-react";
import { sendAllProps } from "../../types/api"; import { sendAllProps } from "../../types/api";
import { ChatMessageType } from "../../types/chat"; import { ChatMessageType } from "../../types/chat";
import { FlowType } from "../../types/flow";
import { classNames, validateNodes } from "../../utils";
import ChatInput from "./chatInput"; import ChatInput from "./chatInput";
import ChatMessage from "./chatMessage";
import _ from "lodash"; import _ from "lodash";
import ToggleShadComponent from "../../components/toggleShadComponent";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "../../components/ui/accordion";
import { Badge } from "../../components/ui/badge";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@ -18,17 +26,9 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants";
import { TabsContext } from "../../contexts/tabsContext";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "../../components/ui/accordion";
import { Textarea } from "../../components/ui/textarea"; import { Textarea } from "../../components/ui/textarea";
import { Badge } from "../../components/ui/badge"; import { CHAT_FORM_DIALOG_SUBTITLE, THOUGHTS_ICON } from "../../constants";
import ToggleShadComponent from "../../components/toggleShadComponent"; import { TabsContext } from "../../contexts/tabsContext";
export default function FormModal({ export default function FormModal({
flow, flow,
@ -509,10 +509,7 @@ export default function FormModal({
/> />
</button> </button>
</div> </div>
<div <div ref={messagesRef} className="chat-message-div">
ref={messagesRef}
className="chat-message-div"
>
{chatHistory.length > 0 ? ( {chatHistory.length > 0 ? (
chatHistory.map((c, i) => ( chatHistory.map((c, i) => (
<ChatMessage <ChatMessage
@ -535,7 +532,7 @@ export default function FormModal({
<span className="langflow-chat-desc-span"> <span className="langflow-chat-desc-span">
Start a conversation and click the agent's thoughts{" "} Start a conversation and click the agent's thoughts{" "}
<span> <span>
<MessageSquare className="mx-1 inline h-5 w-5 animate-bounce " /> <THOUGHTS_ICON className="mx-1 inline h-5 w-5 animate-bounce " />
</span>{" "} </span>{" "}
to inspect the chaining process. to inspect the chaining process.
</span> </span>

35
src/frontend/src/modals/genericModal/index.tsx
View file

@ -1,8 +1,9 @@
import { useContext, useRef, useState, useEffect } from "react"; import DOMPurify from "dompurify";
import { PopUpContext } from "../../contexts/popUpContext"; import { FileText, Variable } from "lucide-react";
import { darkContext } from "../../contexts/darkContext"; import { useContext, useEffect, useRef, useState } from "react";
import { postValidatePrompt } from "../../controllers/API"; import ShadTooltip from "../../components/ShadTooltipComponent";
import { alertContext } from "../../contexts/alertContext"; import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@ -12,14 +13,16 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
import { Textarea } from "../../components/ui/textarea"; import { Textarea } from "../../components/ui/textarea";
import { import {
HIGHLIGH_CSS, HIGHLIGH_CSS,
PROMPT_DIALOG_SUBTITLE, PROMPT_DIALOG_SUBTITLE,
TEXT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE,
} from "../../constants"; } from "../../constants";
import { FileText } from "lucide-react"; import { alertContext } from "../../contexts/alertContext";
import { darkContext } from "../../contexts/darkContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { postValidatePrompt } from "../../controllers/API";
import { APIClassType } from "../../types/api"; import { APIClassType } from "../../types/api";
import { import {
INVALID_CHARACTERS, INVALID_CHARACTERS,
@ -29,10 +32,6 @@ import {
regexHighlight, regexHighlight,
varHighlightHTML, varHighlightHTML,
} from "../../utils"; } from "../../utils";
import { Badge } from "../../components/ui/badge";
import ShadTooltip from "../../components/ShadTooltipComponent";
import DOMPurify from "dompurify";
import { Variable } from "lucide-react";
export default function GenericModal({ export default function GenericModal({
field_name = "", field_name = "",
@ -171,7 +170,7 @@ export default function GenericModal({
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger> <DialogTrigger></DialogTrigger>
<DialogContent className="min-w-[80vw]"> <DialogContent className="min-w-[80vw] gap-2">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">{myModalTitle}</span> <span className="pr-2">{myModalTitle}</span>
@ -200,7 +199,7 @@ export default function GenericModal({
<div <div
className={classNames( className={classNames(
!isEdit ? "rounded-lg border" : "", !isEdit ? "rounded-lg border" : "",
"flex h-[60vh] w-full" "flex h-[55vh] w-full"
)} )}
> >
{type == TypeModal.PROMPT && isEdit ? ( {type == TypeModal.PROMPT && isEdit ? (
@ -238,12 +237,11 @@ export default function GenericModal({
{type == TypeModal.PROMPT && ( {type == TypeModal.PROMPT && (
<> <>
<div className="h-[6vh] overflow-y-auto custom-scroll"> <div className="sm:6/6 mr-28 mt-3 h-[60px] overflow-y-auto custom-scroll">
<div className="flex flex-wrap items-center"> <div className="flex flex-wrap items-center">
<Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable> <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
<span className="text-md font-semibold text-primary"> <span className="text-md font-semibold text-primary">
Input Variables:{" "} Input Variables:
{wordsHighlight && wordsHighlight.length == 0 ? "-" : ""}
</span> </span>
{wordsHighlight.map((word, index) => ( {wordsHighlight.map((word, index) => (
@ -251,7 +249,6 @@ export default function GenericModal({
key={getRandomKeyByssmm() + index} key={getRandomKeyByssmm() + index}
content={word.replace(/[{}]/g, "")} content={word.replace(/[{}]/g, "")}
asChild={false} asChild={false}
delayDuration={1500}
> >
<Badge <Badge
key={index} key={index}
@ -284,7 +281,9 @@ export default function GenericModal({
setModalOpen(false); setModalOpen(false);
break; break;
case 2: case 2:
validatePrompt(false); !inputValue || inputValue == ""
? setModalOpen(false)
: validatePrompt(false);
break; break;
default: default:

2
src/frontend/src/modals/importModal/buttonBox/index.tsx
View file

@ -1,4 +1,4 @@
import React, { ReactNode } from "react"; import { ReactNode } from "react";
import { classNames } from "../../../utils"; import { classNames } from "../../../utils";
export default function ButtonBox({ export default function ButtonBox({

20
src/frontend/src/modals/importModal/index.tsx
View file

@ -1,18 +1,11 @@
import { import {
DocumentDuplicateIcon,
ComputerDesktopIcon,
ArrowUpTrayIcon,
ArrowLeftIcon, ArrowLeftIcon,
ArrowUpTrayIcon,
ComputerDesktopIcon,
DocumentDuplicateIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { useContext, useRef, useState } from "react"; import { useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext";
import ButtonBox from "./buttonBox";
import { getExamples } from "../../controllers/API";
import { alertContext } from "../../contexts/alertContext";
import LoadingComponent from "../../components/loadingComponent"; import LoadingComponent from "../../components/loadingComponent";
import { FlowType } from "../../types/flow";
import { classNames } from "../../utils";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@ -23,6 +16,13 @@ import {
DialogTrigger, DialogTrigger,
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { IMPORT_DIALOG_SUBTITLE } from "../../constants"; import { IMPORT_DIALOG_SUBTITLE } from "../../constants";
import { alertContext } from "../../contexts/alertContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext";
import { getExamples } from "../../controllers/API";
import { FlowType } from "../../types/flow";
import { classNames } from "../../utils";
import ButtonBox from "./buttonBox";
export default function ImportModal() { export default function ImportModal() {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);

8
src/frontend/src/modals/promptModal/index.tsx
View file

@ -1,10 +1,10 @@
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { XMarkIcon, DocumentTextIcon } from "@heroicons/react/24/outline"; import { DocumentTextIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react"; import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import { darkContext } from "../../contexts/darkContext";
import { checkPrompt } from "../../controllers/API";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { darkContext } from "../../contexts/darkContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { checkPrompt } from "../../controllers/API";
export default function PromptAreaModal({ export default function PromptAreaModal({
value, value,
setValue, setValue,

2
src/frontend/src/modals/textAreaModal/index.tsx
View file

@ -1,7 +1,7 @@
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { import {
XMarkIcon,
ClipboardDocumentListIcon, ClipboardDocumentListIcon,
XMarkIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react"; import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";

10
src/frontend/src/pages/CommunityPage/index.tsx
View file

@ -1,13 +1,13 @@
import { GitFork, GithubIcon, Users2 } from "lucide-react";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { GithubIcon, Users2, GitFork } from "lucide-react";
import { TabsContext } from "../../contexts/tabsContext";
import { alertContext } from "../../contexts/alertContext";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { alertContext } from "../../contexts/alertContext";
import { TabsContext } from "../../contexts/tabsContext";
import { useNavigate } from "react-router-dom";
import { CardComponent } from "../../components/cardComponent";
import { getExamples } from "../../controllers/API"; import { getExamples } from "../../controllers/API";
import { FlowType } from "../../types/flow"; import { FlowType } from "../../types/flow";
import { CardComponent } from "../../components/cardComponent";
import { useNavigate } from "react-router-dom";
export default function CommunityPage() { export default function CommunityPage() {
const { flows, setTabId, downloadFlows, uploadFlows, addFlow } = const { flows, setTabId, downloadFlows, uploadFlows, addFlow } =
useContext(TabsContext); useContext(TabsContext);

2
src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
View file

@ -1,6 +1,6 @@
import { Disclosure } from "@headlessui/react"; import { Disclosure } from "@headlessui/react";
import { DisclosureComponentType } from "../../../../types/components";
import { ChevronRight } from "lucide-react"; import { ChevronRight } from "lucide-react";
import { DisclosureComponentType } from "../../../../types/components";
export default function DisclosureComponent({ export default function DisclosureComponent({
button: { title, Icon, buttons = [] }, button: { title, Icon, buttons = [] },

30
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -1,21 +1,21 @@
import _, { set } from "lodash"; import _ from "lodash";
import { useContext, useRef, useState, useEffect, useCallback } from "react"; import { useCallback, useContext, useEffect, useRef, useState } from "react";
import ReactFlow, { import ReactFlow, {
OnSelectionChangeParams,
useNodesState,
useEdgesState,
useReactFlow,
EdgeChange,
Connection,
addEdge,
NodeDragHandler,
SelectionDragHandler,
OnEdgesDelete,
Edge,
updateEdge,
Background, Background,
Connection,
Controls, Controls,
Edge,
EdgeChange,
NodeChange, NodeChange,
NodeDragHandler,
OnEdgesDelete,
OnSelectionChangeParams,
SelectionDragHandler,
addEdge,
updateEdge,
useEdgesState,
useNodesState,
useReactFlow,
} from "reactflow"; } from "reactflow";
import GenericNode from "../../../../CustomNodes/GenericNode"; import GenericNode from "../../../../CustomNodes/GenericNode";
import Chat from "../../../../components/chatComponent"; import Chat from "../../../../components/chatComponent";
@ -23,12 +23,12 @@ import { alertContext } from "../../../../contexts/alertContext";
import { locationContext } from "../../../../contexts/locationContext"; import { locationContext } from "../../../../contexts/locationContext";
import { TabsContext } from "../../../../contexts/tabsContext"; import { TabsContext } from "../../../../contexts/tabsContext";
import { typesContext } from "../../../../contexts/typesContext"; import { typesContext } from "../../../../contexts/typesContext";
import { undoRedoContext } from "../../../../contexts/undoRedoContext";
import { APIClassType } from "../../../../types/api"; import { APIClassType } from "../../../../types/api";
import { FlowType, NodeType } from "../../../../types/flow"; import { FlowType, NodeType } from "../../../../types/flow";
import { isValidConnection } from "../../../../utils"; import { isValidConnection } from "../../../../utils";
import ConnectionLineComponent from "../ConnectionLineComponent"; import ConnectionLineComponent from "../ConnectionLineComponent";
import ExtraSidebar from "../extraSidebarComponent"; import ExtraSidebar from "../extraSidebarComponent";
import { undoRedoContext } from "../../../../contexts/undoRedoContext";
const nodeTypes = { const nodeTypes = {
genericNode: GenericNode, genericNode: GenericNode,

25
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -1,22 +1,21 @@
import DisclosureComponent from "../DisclosureComponent"; import { Code2, FileDown, FileUp, Menu, Save, Search } from "lucide-react";
import { useContext, useState } from "react";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
import { Separator } from "../../../../components/ui/separator";
import { alertContext } from "../../../../contexts/alertContext";
import { PopUpContext } from "../../../../contexts/popUpContext";
import { TabsContext } from "../../../../contexts/tabsContext";
import { typesContext } from "../../../../contexts/typesContext";
import ApiModal from "../../../../modals/ApiModal";
import ExportModal from "../../../../modals/exportModal";
import { APIClassType, APIObjectType } from "../../../../types/api";
import { import {
classNames, classNames,
nodeColors, nodeColors,
nodeIconsLucide, nodeIconsLucide,
nodeNames, nodeNames,
} from "../../../../utils"; } from "../../../../utils";
import { useContext, useState } from "react"; import DisclosureComponent from "../DisclosureComponent";
import { typesContext } from "../../../../contexts/typesContext";
import { APIClassType, APIObjectType } from "../../../../types/api";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
import { Code2, FileDown, FileUp, Save, Search } from "lucide-react";
import { PopUpContext } from "../../../../contexts/popUpContext";
import ExportModal from "../../../../modals/exportModal";
import ApiModal from "../../../../modals/ApiModal";
import { TabsContext } from "../../../../contexts/tabsContext";
import { alertContext } from "../../../../contexts/alertContext";
import { Separator } from "../../../../components/ui/separator";
import { Menu } from "lucide-react";
export default function ExtraSidebar() { export default function ExtraSidebar() {
const { data } = useContext(typesContext); const { data } = useContext(typesContext);

8
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -1,10 +1,10 @@
import { Copy, FileText, Settings2, Trash2 } from "lucide-react";
import { useContext, useState } from "react"; import { useContext, useState } from "react";
import { Settings2, Copy, Trash2, FileText } from "lucide-react";
import { classNames } from "../../../../utils";
import { TabsContext } from "../../../../contexts/tabsContext";
import { useReactFlow } from "reactflow"; import { useReactFlow } from "reactflow";
import EditNodeModal from "../../../../modals/EditNodeModal";
import ShadTooltip from "../../../../components/ShadTooltipComponent"; import ShadTooltip from "../../../../components/ShadTooltipComponent";
import { TabsContext } from "../../../../contexts/tabsContext";
import EditNodeModal from "../../../../modals/EditNodeModal";
import { classNames } from "../../../../utils";
const NodeToolbarComponent = (props) => { const NodeToolbarComponent = (props) => {
const [nodeLength, setNodeLength] = useState( const [nodeLength, setNodeLength] = useState(

4
src/frontend/src/pages/FlowPage/index.tsx
View file

@ -1,8 +1,8 @@
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import Page from "./components/PageComponent";
import { TabsContext } from "../../contexts/tabsContext";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { TabsContext } from "../../contexts/tabsContext";
import { getVersion } from "../../controllers/API"; import { getVersion } from "../../controllers/API";
import Page from "./components/PageComponent";
export default function FlowPage() { export default function FlowPage() {
const { flows, tabId, setTabId } = useContext(TabsContext); const { flows, tabId, setTabId } = useContext(TabsContext);

6
src/frontend/src/pages/MainPage/index.tsx
View file

@ -1,10 +1,10 @@
import { Download, ExternalLink, Home, Plus, Upload } from "lucide-react";
import { useContext, useEffect } from "react"; import { useContext, useEffect } from "react";
import { Download, Upload, Plus, Home, ExternalLink } from "lucide-react";
import { TabsContext } from "../../contexts/tabsContext";
import { Button } from "../../components/ui/button";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { CardComponent } from "../../components/cardComponent"; import { CardComponent } from "../../components/cardComponent";
import { Button } from "../../components/ui/button";
import { USER_PROJECTS_HEADER } from "../../constants"; import { USER_PROJECTS_HEADER } from "../../constants";
import { TabsContext } from "../../contexts/tabsContext";
export default function HomePage() { export default function HomePage() {
const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } = const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
useContext(TabsContext); useContext(TabsContext);

4
src/frontend/src/prettierrc.js Normal file
View file

@ -0,0 +1,4 @@
module.exports = {
// ...
organizeImportsSkipDestructiveCodeActions: true,
};

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