Merge remote-tracking branch 'origin/dev' into login_improvements

src/backend/langflow/__main__.py

@@ -356,7 +356,7 @@ def superuser(
     with session_getter(db_manager) as session:
         from langflow.services.auth.utils import create_super_user
 
-        if create_super_user(session, username, password):
+        if create_super_user(db=session, username=username, password=password):
             # Verify that the superuser was created
             from langflow.services.database.models.user.user import User
 

src/backend/langflow/alembic/versions/260dbcc8b680_adds_tables.py

@@ -30,10 +30,10 @@ def upgrade() -> None:
     # and other related indices
     if "flowstyle" in existing_tables:
         op.drop_table("flowstyle")
-    if "ix_flowstyle_flow_id" in [
-        index["name"] for index in inspector.get_indexes("flowstyle")
-    ]:
-        op.drop_index("ix_flowstyle_flow_id", table_name="flowstyle")
+        if "ix_flowstyle_flow_id" in [
+            index["name"] for index in inspector.get_indexes("flowstyle")
+        ]:
+            op.drop_index("ix_flowstyle_flow_id", table_name="flowstyle")
 
     existing_indices_flow = []
     existing_fks_flow = []

src/backend/langflow/api/v1/base.py

@@ -21,8 +21,8 @@ class FrontendNodeRequest(FrontendNode):
 class ValidatePromptRequest(BaseModel):
     name: str
     template: str
-    #optional for tweak call
-    frontend_node: Optional[FrontendNodeRequest]
+    # optional for tweak call
+    frontend_node: Optional[FrontendNodeRequest] = None
 
 
 # Build ValidationResponse class for {"imports": {"errors": []}, "function": {"errors": []}}
@@ -41,8 +41,8 @@ class CodeValidationResponse(BaseModel):
 
 class PromptValidationResponse(BaseModel):
     input_variables: list
-    #object return for tweak call
-    frontend_node: FrontendNodeRequest | object
+    # object return for tweak call
+    frontend_node: Optional[FrontendNodeRequest] = None
 
 
 INVALID_CHARACTERS = {

src/backend/langflow/api/v1/chat.py

@@ -11,13 +11,14 @@ from fastapi.responses import StreamingResponse
 from langflow.api.utils import build_input_keys_response
 from langflow.api.v1.schemas import BuildStatus, BuiltResponse, InitResponse, StreamData
 
-from langflow.services import service_manager, ServiceType
 from langflow.graph.graph.base import Graph
 from langflow.services.auth.utils import get_current_active_user, get_current_user
-from langflow.services.utils import get_session
+from langflow.services.utils import get_chat_manager, get_session
 from langflow.utils.logger import logger
 from cachetools import LRUCache
 from sqlmodel import Session
+from langflow.services.chat.manager import ChatManager
+
 
 router = APIRouter(tags=["Chat"])
 
@@ -30,29 +31,48 @@ async def chat(
     websocket: WebSocket,
     token: str = Query(...),
     db: Session = Depends(get_session),
+    chat_manager: "ChatManager" = Depends(get_chat_manager),
 ):
     """Websocket endpoint for chat."""
     try:
+        await websocket.accept()
         user = await get_current_user(token, db)
+        if not user:
+            await websocket.close(
+                code=status.WS_1008_POLICY_VIOLATION, reason="Unauthorized"
+            )
         if not user.is_active:
-            raise HTTPException(status_code=401, detail="Invalid token")
-        chat_manager = service_manager.get(ServiceType.CHAT_MANAGER)
+            await websocket.close(
+                code=status.WS_1008_POLICY_VIOLATION, reason="Unauthorized"
+            )
+
         if client_id in chat_manager.in_memory_cache:
             await chat_manager.handle_websocket(client_id, websocket)
         else:
             # We accept the connection but close it immediately
             # if the flow is not built yet
-            await websocket.accept()
             message = "Please, build the flow before sending messages"
             await websocket.close(code=status.WS_1011_INTERNAL_ERROR, reason=message)
     except WebSocketException as exc:
         logger.error(f"Websocket error: {exc}")
         await websocket.close(code=status.WS_1011_INTERNAL_ERROR, reason=str(exc))
+    except Exception as exc:
+        logger.error(f"Error in chat websocket: {exc}")
+        messsage = exc.detail if isinstance(exc, HTTPException) else str(exc)
+        if "Could not validate credentials" in str(exc):
+            await websocket.close(
+                code=status.WS_1008_POLICY_VIOLATION, reason="Unauthorized"
+            )
+        else:
+            await websocket.close(code=status.WS_1011_INTERNAL_ERROR, reason=messsage)
 
 
 @router.post("/build/init/{flow_id}", response_model=InitResponse, status_code=201)
 async def init_build(
-    graph_data: dict, flow_id: str, current_user=Depends(get_current_active_user)
+    graph_data: dict,
+    flow_id: str,
+    current_user=Depends(get_current_active_user),
+    chat_manager: "ChatManager" = Depends(get_chat_manager),
 ):
     """Initialize the build by storing graph data and returning a unique session ID."""
 
@@ -67,7 +87,6 @@ async def init_build(
             return InitResponse(flowId=flow_id)
 
         # Delete from cache if already exists
-        chat_manager = service_manager.get(ServiceType.CHAT_MANAGER)
         if flow_id in chat_manager.in_memory_cache:
             with chat_manager.in_memory_cache._lock:
                 chat_manager.in_memory_cache.delete(flow_id)
@@ -103,7 +122,9 @@ async def build_status(flow_id: str):
 
 
 @router.get("/build/stream/{flow_id}", response_class=StreamingResponse)
-async def stream_build(flow_id: str):
+async def stream_build(
+    flow_id: str, chat_manager: "ChatManager" = Depends(get_chat_manager)
+):
     """Stream the build process based on stored flow data."""
 
     async def event_stream(flow_id):
@@ -182,7 +203,6 @@ async def stream_build(flow_id: str):
                     "handle_keys": [],
                 }
             yield str(StreamData(event="message", data=input_keys_response))
-            chat_manager = service_manager.get(ServiceType.CHAT_MANAGER)
             chat_manager.set_cache(flow_id, langchain_object)
             # We need to reset the chat history
             chat_manager.chat_history.empty_history(flow_id)

src/backend/langflow/api/v1/endpoints.py

@@ -34,14 +34,15 @@ from sqlmodel import Session
 router = APIRouter(tags=["Base"])
 
 
-@router.get("/all")
-def get_all(current_user: User = Depends(get_current_active_user)):
+@router.get("/all", dependencies=[Depends(get_current_active_user)])
+def get_all(
+    settings_manager=Depends(get_settings_manager),
+):
     logger.debug("Building langchain types dict")
     native_components = build_langchain_types_dict()
     # custom_components is a list of dicts
     # need to merge all the keys into one dict
     custom_components_from_file: dict[str, Any] = {}
-    settings_manager = get_settings_manager()
     if settings_manager.settings.COMPONENTS_PATH:
         logger.info(
             f"Building custom components from {settings_manager.settings.COMPONENTS_PATH}"

src/backend/langflow/api/v1/flows.py

@@ -83,6 +83,7 @@ def update_flow(
     flow_id: UUID,
     flow: FlowUpdate,
     current_user: User = Depends(get_current_active_user),
+    settings_manager=Depends(get_settings_manager),
 ):
     """Update a flow."""
 
@@ -90,7 +91,6 @@ def update_flow(
     if not db_flow:
         raise HTTPException(status_code=404, detail="Flow not found")
     flow_data = flow.dict(exclude_unset=True)
-    settings_manager = get_settings_manager()
     if settings_manager.settings.REMOVE_API_KEYS:
         flow_data = remove_api_keys(flow_data)
     for key, value in flow_data.items():

src/backend/langflow/api/v1/login.py

@@ -34,9 +34,9 @@ async def login_to_get_access_token(
 
 
 @router.get("/auto_login")
-async def auto_login(db: Session = Depends(get_session)):
-    settings_manager = get_settings_manager()
-
+async def auto_login(
+    db: Session = Depends(get_session), settings_manager=Depends(get_settings_manager)
+):
     if settings_manager.auth_settings.AUTO_LOGIN:
         return create_user_longterm_token(db)
 

src/backend/langflow/api/v1/users.py

@@ -29,7 +29,7 @@ router = APIRouter(tags=["Users"])
 @router.post("/user", response_model=UserRead, status_code=201)
 def add_user(
     user: UserCreate,
-    db: Session = Depends(get_session),
+    session: Session = Depends(get_session),
 ) -> User:
     """
     Add a new user to the database.
@@ -38,12 +38,14 @@ def add_user(
     try:
         new_user.password = get_password_hash(user.password)
 
-        db.add(new_user)
-        db.commit()
-        db.refresh(new_user)
+        session.add(new_user)
+        session.commit()
+        session.refresh(new_user)
     except IntegrityError as e:
-        db.rollback()
-        raise HTTPException(status_code=400, detail="This username is unavailable.") from e
+        session.rollback()
+        raise HTTPException(
+            status_code=400, detail="This username is unavailable."
+        ) from e
 
     return new_user
 
@@ -63,16 +65,16 @@ def read_all_users(
     skip: int = 0,
     limit: int = 10,
     current_user: Session = Depends(get_current_active_superuser),
-    db: Session = Depends(get_session),
+    session: Session = Depends(get_session),
 ) -> UsersResponse:
     """
     Retrieve a list of users from the database with pagination.
     """
     query = select(User).offset(skip).limit(limit)
-    users = db.execute(query).fetchall()
+    users = session.execute(query).fetchall()
 
     count_query = select(func.count()).select_from(User)  # type: ignore
-    total_count = db.execute(count_query).scalar()
+    total_count = session.execute(count_query).scalar()
 
     return UsersResponse(
         total_count=total_count,  # type: ignore
@@ -85,19 +87,19 @@ def patch_user(
     user_id: UUID,
     user: UserUpdate,
     _: Session = Depends(get_current_active_user),
-    db: Session = Depends(get_session),
+    session: Session = Depends(get_session),
 ) -> User:
     """
     Update an existing user's data.
     """
-    return update_user(user_id, user, db)
+    return update_user(user_id, user, session)
 
 
 @router.delete("/user/{user_id}")
 def delete_user(
     user_id: UUID,
     current_user: User = Depends(get_current_active_superuser),
-    db: Session = Depends(get_session),
+    session: Session = Depends(get_session),
 ) -> dict:
     """
     Delete a user from the database.
@@ -111,12 +113,12 @@ def delete_user(
             status_code=403, detail="You don't have the permission to delete this user"
         )
 
-    user_db = db.query(User).filter(User.id == user_id).first()
+    user_db = session.query(User).filter(User.id == user_id).first()
     if not user_db:
         raise HTTPException(status_code=404, detail="User not found")
 
-    db.delete(user_db)
-    db.commit()
+    session.delete(user_db)
+    session.commit()
 
     return {"detail": "User deleted"}
 
@@ -124,7 +126,7 @@ def delete_user(
 # TODO: REMOVE - Just for testing purposes
 @router.post("/super_user", response_model=User)
 def add_super_user_for_testing_purposes_delete_me_before_merge_into_dev(
-    db: Session = Depends(get_session),
+    session: Session = Depends(get_session),
 ) -> User:
     """
     Add a superuser for testing purposes.
@@ -139,11 +141,11 @@ def add_super_user_for_testing_purposes_delete_me_before_merge_into_dev(
     )
 
     try:
-        db.add(new_user)
-        db.commit()
-        db.refresh(new_user)
+        session.add(new_user)
+        session.commit()
+        session.refresh(new_user)
     except IntegrityError as e:
-        db.rollback()
+        session.rollback()
         raise HTTPException(status_code=400, detail="User exists") from e
 
     return new_user

src/backend/langflow/api/v1/validate.py

@@ -35,7 +35,7 @@ def post_validate_prompt(prompt_request: ValidatePromptRequest):
         if prompt_request.frontend_node is None:
             return PromptValidationResponse(
                 input_variables=input_variables,
-                frontend_node={},
+                frontend_node=None,
             )
         old_custom_fields = get_old_custom_fields(prompt_request)
 

src/backend/langflow/main.py

@@ -10,7 +10,7 @@ from langflow.api import router
 
 from langflow.interface.utils import setup_llm_caching
 from langflow.services.database.utils import initialize_database
-from langflow.services.manager import initialize_services
+from langflow.services.manager import initialize_services, teardown_services
 from langflow.utils.logger import configure
 
 
@@ -40,6 +40,7 @@ def create_app():
     app.on_event("startup")(initialize_services)
     app.on_event("startup")(initialize_database)
     app.on_event("startup")(setup_llm_caching)
+    app.on_event("shutdown")(teardown_services)
     return app
 
 

src/backend/langflow/services/auth/utils.py

@@ -37,7 +37,12 @@ async def api_key_security(
     result: Optional[Union[ApiKey, User]] = None
     if settings_manager.auth_settings.AUTO_LOGIN:
         # Get the first user
-        settings_manager.auth_settings.FIRST_SUPERUSER
+        if not settings_manager.auth_settings.FIRST_SUPERUSER:
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail="Missing first superuser credentials",
+            )
+
         result = get_user_by_username(
             db, settings_manager.auth_settings.FIRST_SUPERUSER
         )
@@ -80,6 +85,9 @@ async def get_current_user(
     if isinstance(token, Coroutine):
         token = await token
 
+    if settings_manager.auth_settings.SECRET_KEY is None:
+        raise credentials_exception
+
     try:
         payload = jwt.decode(
             token,
@@ -88,6 +96,11 @@ async def get_current_user(
         )
         user_id: UUID = payload.get("sub")  # type: ignore
         token_type: str = payload.get("type")  # type: ignore
+        if expires := payload.get("exp", None):
+            expires_datetime = datetime.fromtimestamp(expires, timezone.utc)
+            # TypeError: can't compare offset-naive and offset-aware datetimes
+            if datetime.now(timezone.utc) > expires_datetime:
+                raise credentials_exception
 
         if user_id is None or token_type:
             raise credentials_exception
@@ -145,22 +158,16 @@ def create_token(data: dict, expires_delta: timedelta):
 
 
 def create_super_user(
+    username: str,
+    password: str,
     db: Session = Depends(get_session),
-    username: Optional[str] = None,
-    password: Optional[str] = None,
 ) -> User:
-    settings_manager = get_settings_manager()
-
-    super_user = get_user_by_username(
-        db, username or settings_manager.auth_settings.FIRST_SUPERUSER
-    )
+    super_user = get_user_by_username(db, username)
 
     if not super_user:
         super_user = User(
-            username=username or settings_manager.auth_settings.FIRST_SUPERUSER,
-            password=get_password_hash(
-                password or settings_manager.auth_settings.FIRST_SUPERUSER_PASSWORD
-            ),
+            username=username,
+            password=get_password_hash(password),
             is_superuser=True,
             is_active=True,
             last_login_at=None,
@@ -174,7 +181,15 @@ def create_super_user(
 
 
 def create_user_longterm_token(db: Session = Depends(get_session)) -> dict:
-    super_user = create_super_user(db)
+    settings_manager = get_settings_manager()
+    username = settings_manager.auth_settings.FIRST_SUPERUSER
+    password = settings_manager.auth_settings.FIRST_SUPERUSER_PASSWORD
+    if not username or not password:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Missing first superuser credentials",
+        )
+    super_user = create_super_user(db=db, username=username, password=password)
 
     access_token_expires_longterm = timedelta(days=365)
     access_token = create_token(

src/backend/langflow/services/base.py

@@ -1,2 +1,8 @@
-class Service:
+from abc import ABC
+
+
+class Service(ABC):
     name: str
+
+    def teardown(self):
+        pass

src/backend/langflow/services/chat/manager.py

@@ -92,7 +92,6 @@ class ChatManager(Service):
             )
 
     async def connect(self, client_id: str, websocket: WebSocket):
-        await websocket.accept()
         self.active_connections[client_id] = websocket
 
     def disconnect(self, client_id: str):

src/backend/langflow/services/database/manager.py

@@ -1,6 +1,7 @@
 from pathlib import Path
 from typing import TYPE_CHECKING
 from langflow.services.base import Service
+from langflow.services.database.models.user.crud import get_user_by_username
 from langflow.services.database.utils import Result, TableResults
 from langflow.services.utils import get_settings_manager
 from sqlalchemy import inspect
@@ -159,3 +160,23 @@ class DatabaseManager(Service):
                 )
 
         logger.debug("Database and tables created successfully")
+
+    def teardown(self):
+        logger.debug("Tearing down database")
+        try:
+            settings_manager = get_settings_manager()
+            # remove the default superuser if auto_login is enabled
+            # using the FIRST_SUPERUSER to get the user
+            if settings_manager.auth_settings.AUTO_LOGIN:
+                logger.debug("Removing default superuser")
+                username = settings_manager.auth_settings.FIRST_SUPERUSER
+                with Session(self.engine) as session:
+                    user = get_user_by_username(session, username)
+                    session.delete(user)
+                    session.commit()
+                    logger.debug("Default superuser removed")
+
+        except Exception as exc:
+            logger.error(f"Error tearing down database: {exc}")
+
+        self.engine.dispose()

src/backend/langflow/services/manager.py

@@ -1,5 +1,6 @@
 from langflow.services.schema import ServiceType
 from typing import TYPE_CHECKING, List, Optional
+from langflow.utils.logger import logger
 
 if TYPE_CHECKING:
     from langflow.services.factory import ServiceFactory
@@ -42,6 +43,7 @@ class ServiceManager:
         """
         Create a new service given its name, handling dependencies.
         """
+        logger.debug(f"Create service {service_name}")
         self._validate_service_creation(service_name)
 
         # Create dependencies first
@@ -74,9 +76,21 @@ class ServiceManager:
         Update a service by its name.
         """
         if service_name in self.services:
+            logger.debug(f"Update service {service_name}")
             self.services.pop(service_name, None)
             self.get(service_name)
 
+    def teardown(self):
+        """
+        Teardown all the services.
+        """
+        for service in self.services.values():
+            logger.debug(f"Teardown service {service.name}")
+            service.teardown()
+        self.services = {}
+        self.factories = {}
+        self.dependencies = {}
+
 
 service_manager = ServiceManager()
 
@@ -121,7 +135,7 @@ def initialize_session_manager():
     """
     Initialize the session manager.
     """
-    from langflow.services.session import factory as session_manager_factory
+    from langflow.services.session import factory as session_manager_factory  # type: ignore
     from langflow.services.cache import factory as cache_factory
 
     initialize_settings_manager()
@@ -134,3 +148,10 @@ def initialize_session_manager():
         session_manager_factory.SessionManagerFactory(),
         dependencies=[ServiceType.CACHE_MANAGER],
     )
+
+
+def teardown_services():
+    """
+    Teardown all the services.
+    """
+    service_manager.teardown()

src/backend/langflow/services/settings/auth.py

@@ -1,13 +1,22 @@
+from pathlib import Path
 from typing import Optional
 import secrets
+from langflow.services.settings.utils import read_secret_from_file, write_secret_to_file
 
-from pydantic import BaseSettings
+from pydantic import BaseSettings, Field, validator
 from passlib.context import CryptContext
+from langflow.utils.logger import logger
 
 
 class AuthSettings(BaseSettings):
     # Login settings
-    SECRET_KEY: str = secrets.token_hex(32)
+    CONFIG_DIR: str
+    SECRET_KEY: str = Field(
+        default="",
+        description="Secret key for JWT. If not provided, a random one will be generated.",
+        env="LANGFLOW_SECRET_KEY",
+        allow_mutation=False,
+    )
     ALGORITHM: str = "HS256"
     ACCESS_TOKEN_EXPIRE_MINUTES: int = 60
     REFRESH_TOKEN_EXPIRE_MINUTES: int = 70
@@ -31,3 +40,33 @@ class AuthSettings(BaseSettings):
         validate_assignment = True
         extra = "ignore"
         env_prefix = "LANGFLOW_"
+
+    @validator("SECRET_KEY", pre=True)
+    def get_secret_key(cls, value, values):
+        config_dir = values.get("CONFIG_DIR")
+
+        if not config_dir:
+            logger.debug("No CONFIG_DIR provided, not saving secret key")
+            return value or secrets.token_urlsafe(32)
+
+        secret_key_path = Path(config_dir) / "secret_key"
+
+        if value:
+            logger.debug("Secret key provided")
+            write_secret_to_file(secret_key_path, value)
+        else:
+            logger.debug("No secret key provided, generating a random one")
+
+            if secret_key_path.exists():
+                value = read_secret_from_file(secret_key_path)
+                logger.debug("Loaded secret key")
+                if not value:
+                    value = secrets.token_urlsafe(32)
+                    write_secret_to_file(secret_key_path, value)
+                    logger.debug("Saved secret key")
+            else:
+                value = secrets.token_urlsafe(32)
+                write_secret_to_file(secret_key_path, value)
+                logger.debug("Saved secret key")
+
+        return value

src/backend/langflow/services/settings/manager.py

@@ -35,5 +35,10 @@ class SettingsManager(Service):
                 )
 
         settings = Settings(**settings_dict)
-        auth_settings = AuthSettings()
+        if not settings.CONFIG_DIR:
+            raise ValueError("CONFIG_DIR must be set in settings")
+
+        auth_settings = AuthSettings(
+            CONFIG_DIR=settings.CONFIG_DIR,
+        )
         return cls(settings, auth_settings)

src/backend/langflow/services/settings/utils.py

@@ -0,0 +1,47 @@
+import os
+from pathlib import Path
+import platform
+
+from langflow.utils.logger import logger
+
+
+def set_secure_permissions(file_path):
+    if platform.system() in ["Linux", "Darwin"]:  # Unix/Linux/Mac
+        os.chmod(file_path, 0o600)
+    elif platform.system() == "Windows":
+        import win32api
+        import win32con
+        import win32security
+
+        user, domain, _ = win32security.LookupAccountName("", win32api.GetUserName())
+        sd = win32security.GetFileSecurity(
+            file_path, win32security.DACL_SECURITY_INFORMATION
+        )
+        dacl = win32security.ACL()
+
+        # Set the new DACL for the file: read and write access for the owner, no access for everyone else
+        dacl.AddAccessAllowedAce(
+            win32security.ACL_REVISION,
+            win32con.GENERIC_READ | win32con.GENERIC_WRITE,
+            user,
+        )
+        sd.SetSecurityDescriptorDacl(1, dacl, 0)
+        win32security.SetFileSecurity(
+            file_path, win32security.DACL_SECURITY_INFORMATION, sd
+        )
+    else:
+        print("Unsupported OS")
+
+
+def write_secret_to_file(path: Path, value: str) -> None:
+    with path.open("wb") as f:
+        f.write(value.encode("utf-8"))
+    try:
+        set_secure_permissions(path)
+    except Exception:
+        logger.error("Failed to set secure permissions on secret key")
+
+
+def read_secret_from_file(path: Path) -> str:
+    with path.open("r") as f:
+        return f.read()

src/backend/langflow/services/utils.py

@@ -1,10 +1,12 @@
 from langflow.services import ServiceType, service_manager
-from typing import TYPE_CHECKING
+from typing import TYPE_CHECKING, Generator
 
 
 if TYPE_CHECKING:
     from langflow.services.database.manager import DatabaseManager
     from langflow.services.settings.manager import SettingsManager
+    from langflow.services.chat.manager import ChatManager
+    from sqlmodel import Session
 
 
 def get_settings_manager() -> "SettingsManager":
@@ -15,6 +17,10 @@ def get_db_manager() -> "DatabaseManager":
     return service_manager.get(ServiceType.DATABASE_MANAGER)
 
 
-def get_session():
+def get_session() -> Generator["Session", None, None]:
     db_manager = service_manager.get(ServiceType.DATABASE_MANAGER)
     yield from db_manager.get_session()
+
+
+def get_chat_manager() -> "ChatManager":
+    return service_manager.get(ServiceType.CHAT_MANAGER)

src/frontend/package-lock.json

@@ -8,11 +8,11 @@
       "name": "langflow",
       "version": "0.1.2",
       "dependencies": {
-        "@emotion/react": "^11.10.5",
-        "@emotion/styled": "^11.10.5",
-        "@headlessui/react": "^1.7.10",
-        "@heroicons/react": "^2.0.15",
-        "@mui/material": "^5.11.9",
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
+        "@headlessui/react": "^1.7.17",
+        "@heroicons/react": "^2.0.18",
+        "@mui/material": "^5.14.7",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-dialog": "^1.0.4",
@@ -29,20 +29,20 @@
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.6",
-        "@tabler/icons-react": "^2.18.0",
-        "@tailwindcss/forms": "^0.5.3",
+        "@tabler/icons-react": "^2.32.0",
+        "@tailwindcss/forms": "^0.5.6",
         "@tailwindcss/line-clamp": "^0.4.4",
         "@types/axios": "^0.14.0",
         "accordion": "^3.0.2",
-        "ace-builds": "^1.16.0",
+        "ace-builds": "^1.24.1",
         "add": "^2.0.6",
         "ansi-to-html": "^0.7.2",
-        "axios": "^1.3.2",
+        "axios": "^1.5.0",
         "base64-js": "^1.5.1",
-        "class-variance-authority": "^0.6.0",
+        "class-variance-authority": "^0.6.1",
         "clsx": "^1.2.1",
-        "dompurify": "^3.0.4",
-        "esbuild": "^0.17.18",
+        "dompurify": "^3.0.5",
+        "esbuild": "^0.17.19",
         "lodash": "^4.17.21",
         "lucide-react": "^0.233.0",
         "moment": "^2.29.4",
@@ -50,51 +50,51 @@
         "react-ace": "^10.1.0",
         "react-cookie": "^4.1.1",
         "react-dom": "^18.2.0",
-        "react-error-boundary": "^4.0.2",
-        "react-icons": "^4.8.0",
+        "react-error-boundary": "^4.0.11",
+        "react-icons": "^4.10.1",
         "react-laag": "^2.0.5",
         "react-markdown": "^8.0.7",
-        "react-router-dom": "^6.8.1",
+        "react-router-dom": "^6.15.0",
         "react-syntax-highlighter": "^15.5.0",
-        "react-tabs": "^6.0.0",
-        "react-tooltip": "^5.13.1",
+        "react-tabs": "^6.0.2",
+        "react-tooltip": "^5.21.1",
         "reactflow": "^11.8.3",
-        "rehype-mathjax": "^4.0.2",
+        "rehype-mathjax": "^4.0.3",
         "remark-gfm": "^3.0.1",
         "remark-math": "^5.1.1",
-        "shadcn-ui": "^0.2.2",
+        "shadcn-ui": "^0.2.3",
         "short-unique-id": "^4.4.4",
         "switch": "^0.0.0",
         "table": "^6.8.1",
-        "tailwind-merge": "^1.13.0",
-        "tailwindcss-animate": "^1.0.5",
+        "tailwind-merge": "^1.14.0",
+        "tailwindcss-animate": "^1.0.7",
         "uuid": "^9.0.0",
         "vite-plugin-svgr": "^3.2.0",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
         "@swc/cli": "^0.1.62",
-        "@swc/core": "^1.3.62",
+        "@swc/core": "^1.3.80",
         "@tailwindcss/typography": "^0.5.9",
-        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.5.2",
-        "@types/lodash": "^4.14.194",
-        "@types/node": "^16.18.12",
-        "@types/react": "^18.0.28",
-        "@types/react-dom": "^18.0.11",
-        "@types/uuid": "^9.0.1",
-        "@vitejs/plugin-react-swc": "^3.0.0",
-        "autoprefixer": "^10.4.14",
-        "daisyui": "^3.1.1",
-        "postcss": "^8.4.23",
+        "@types/lodash": "^4.14.197",
+        "@types/node": "^16.18.46",
+        "@types/react": "^18.2.21",
+        "@types/react-dom": "^18.2.7",
+        "@types/uuid": "^9.0.2",
+        "@vitejs/plugin-react-swc": "^3.3.2",
+        "autoprefixer": "^10.4.15",
+        "daisyui": "^3.6.3",
+        "postcss": "^8.4.29",
         "prettier": "^2.8.8",
-        "prettier-plugin-organize-imports": "^3.2.2",
+        "prettier-plugin-organize-imports": "^3.2.3",
         "prettier-plugin-tailwindcss": "^0.3.0",
-        "tailwindcss": "^3.3.2",
-        "typescript": "^5.0.2",
-        "vite": "^4.3.9"
+        "tailwindcss": "^3.3.3",
+        "typescript": "^5.2.2",
+        "vite": "^4.4.9"
       }
     },
     "node_modules/@adobe/css-tools": {

src/frontend/package.json

@@ -3,11 +3,11 @@
   "version": "0.1.2",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@headlessui/react": "^1.7.10",
-    "@heroicons/react": "^2.0.15",
-    "@mui/material": "^5.11.9",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
+    "@mui/material": "^5.14.7",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
@@ -24,20 +24,20 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
-    "@tabler/icons-react": "^2.18.0",
-    "@tailwindcss/forms": "^0.5.3",
+    "@tabler/icons-react": "^2.32.0",
+    "@tailwindcss/forms": "^0.5.6",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@types/axios": "^0.14.0",
     "accordion": "^3.0.2",
-    "ace-builds": "^1.16.0",
+    "ace-builds": "^1.24.1",
     "add": "^2.0.6",
     "ansi-to-html": "^0.7.2",
-    "axios": "^1.3.2",
+    "axios": "^1.5.0",
     "base64-js": "^1.5.1",
-    "class-variance-authority": "^0.6.0",
+    "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
-    "dompurify": "^3.0.4",
-    "esbuild": "^0.17.18",
+    "dompurify": "^3.0.5",
+    "esbuild": "^0.17.19",
     "lodash": "^4.17.21",
     "lucide-react": "^0.233.0",
     "moment": "^2.29.4",
@@ -45,24 +45,24 @@
     "react-ace": "^10.1.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.2",
-    "react-icons": "^4.8.0",
+    "react-error-boundary": "^4.0.11",
+    "react-icons": "^4.10.1",
     "react-laag": "^2.0.5",
     "react-markdown": "^8.0.7",
-    "react-router-dom": "^6.8.1",
+    "react-router-dom": "^6.15.0",
     "react-syntax-highlighter": "^15.5.0",
-    "react-tabs": "^6.0.0",
-    "react-tooltip": "^5.13.1",
+    "react-tabs": "^6.0.2",
+    "react-tooltip": "^5.21.1",
     "reactflow": "^11.8.3",
-    "rehype-mathjax": "^4.0.2",
+    "rehype-mathjax": "^4.0.3",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "shadcn-ui": "^0.2.2",
+    "shadcn-ui": "^0.2.3",
     "short-unique-id": "^4.4.4",
     "switch": "^0.0.0",
     "table": "^6.8.1",
-    "tailwind-merge": "^1.13.0",
-    "tailwindcss-animate": "^1.0.5",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
     "uuid": "^9.0.0",
     "vite-plugin-svgr": "^3.2.0",
     "web-vitals": "^2.1.4"
@@ -96,26 +96,26 @@
   "proxy": "http://127.0.0.1:7860",
   "devDependencies": {
     "@swc/cli": "^0.1.62",
-    "@swc/core": "^1.3.62",
+    "@swc/core": "^1.3.80",
     "@tailwindcss/typography": "^0.5.9",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
-    "@types/lodash": "^4.14.194",
-    "@types/node": "^16.18.12",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@types/uuid": "^9.0.1",
-    "@vitejs/plugin-react-swc": "^3.0.0",
-    "autoprefixer": "^10.4.14",
-    "daisyui": "^3.1.1",
-    "postcss": "^8.4.23",
+    "@types/lodash": "^4.14.197",
+    "@types/node": "^16.18.46",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@types/uuid": "^9.0.2",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.15",
+    "daisyui": "^3.6.3",
+    "postcss": "^8.4.29",
     "prettier": "^2.8.8",
-    "prettier-plugin-organize-imports": "^3.2.2",
+    "prettier-plugin-organize-imports": "^3.2.3",
     "prettier-plugin-tailwindcss": "^0.3.0",
-    "tailwindcss": "^3.3.2",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.9"
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
   }
 }

src/frontend/src/components/DropdownButtonComponent/index.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { dropdownButtonPropsType } from "../../types/components";
+import IconComponent from "../genericIconComponent";
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+
+export default function DropdownButton({
+  firstButtonName,
+  onFirstBtnClick,
+  options,
+}: dropdownButtonPropsType): JSX.Element {
+  const [showOptions, setShowOptions] = useState<boolean>(false);
+
+  return (
+    <div>
+      <DropdownMenu open={showOptions}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="primary"
+            className="relative pr-10"
+            onClick={(event) => {
+              event.stopPropagation();
+              event.preventDefault();
+              onFirstBtnClick();
+            }}
+          >
+            {firstButtonName}
+            <div
+              className="absolute right-2 items-center text-muted-foreground"
+              onClick={(event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                setShowOptions(!showOptions);
+              }}
+            >
+              {!showOptions ? (
+                <IconComponent name="ChevronDown" />
+              ) : (
+                <IconComponent name="ChevronUp" />
+              )}
+            </div>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          onPointerDownOutside={(event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            setShowOptions(!showOptions);
+          }}
+        >
+          {options.map(({ name, onBtnClick }, index) => (
+            <DropdownMenuItem onClick={onBtnClick} key={index}>
+              {name}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -28,7 +28,6 @@ import {
   TabsList,
   TabsTrigger,
 } from "../../components/ui/tabs";
-import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
 import { typesContext } from "../../contexts/typesContext";
 import { codeTabsPropsType } from "../../types/components";
@@ -57,7 +56,7 @@ export default function CodeTabsComponent({
   }, [flow]);
 
   useEffect(() => {
-    if(tweaks){
+    if (tweaks) {
       unselectAllNodes({
         data,
         updateNodes: (nodes) => {

src/frontend/src/components/headerComponent/index.tsx

@@ -7,8 +7,17 @@ import { alertContext } from "../../contexts/alertContext";
 import { AuthContext } from "../../contexts/authContext";
 import { darkContext } from "../../contexts/darkContext";
 import { TabsContext } from "../../contexts/tabsContext";
+import { gradients } from "../../utils/styleUtils";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
 import { Separator } from "../ui/separator";
 import MenuBar from "./components/menuBar";
 
@@ -17,7 +26,7 @@ export default function Header(): JSX.Element {
   const { dark, setDark } = useContext(darkContext);
   const { notificationCenter } = useContext(alertContext);
   const location = useLocation();
-  const { logout, autoLogin, isAdmin } = useContext(AuthContext);
+  const { logout, autoLogin, isAdmin, userData } = useContext(AuthContext);
   const { stars } = useContext(darkContext);
   const navigate = useNavigate();
 
@@ -31,31 +40,6 @@ export default function Header(): JSX.Element {
         {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
           <MenuBar flows={flows} tabId={tabId} />
         )}
-        {!autoLogin && location.pathname !== `/flow/${tabId}` && (
-          <Button
-          variant="outline"
-          onClick={() => {
-            logout();
-            navigate("/login");
-          }}
-          className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer mx-5"
-        >
-          Sign out
-        </Button>
-        )}
-
-        {isAdmin &&
-          !autoLogin &&
-          location.pathname !== "/admin" &&
-          location.pathname !== `/flow/${tabId}` && (
-            <Button
-            className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer"
-            variant="outline"
-            onClick={() => navigate("/admin")}
-          >
-            Admin page
-          </Button>
-          )}
       </div>
       <div className="round-button-div">
         <Link to="/">
@@ -147,6 +131,44 @@ export default function Header(): JSX.Element {
               />
             </button>
           )}
+          {!autoLogin && (
+            <>
+              <Separator orientation="vertical" />
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    className={
+                      "h-7 w-7 rounded-full focus-visible:outline-0 " +
+                      gradients[
+                        parseInt(userData?.id ?? "", 10) % gradients.length
+                      ]
+                    }
+                  />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  {isAdmin && (
+                    <DropdownMenuItem
+                      className="cursor-pointer"
+                      onClick={() => navigate("/admin")}
+                    >
+                      Admin Page
+                    </DropdownMenuItem>
+                  )}
+                  <DropdownMenuItem
+                    className="cursor-pointer"
+                    onClick={() => {
+                      logout();
+                      navigate("/login");
+                    }}
+                  >
+                    Sign Out
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </>
+          )}
         </div>
       </div>
     </div>

src/frontend/src/components/inputComponent/index.tsx

@@ -30,6 +30,7 @@ export default function InputComponent({
       {isForm ? (
         <Form.Control asChild>
           <Input
+            type={password && !pwdVisible ? "password" : "text"}
             value={value}
             disabled={disabled}
             required={required}
@@ -53,6 +54,7 @@ export default function InputComponent({
         </Form.Control>
       ) : (
         <Input
+          type={password && !pwdVisible ? "password" : "text"}
           value={value}
           disabled={disabled}
           required={required}
@@ -76,6 +78,8 @@ export default function InputComponent({
       )}
       {password && (
         <button
+          type="button"
+          tabIndex={-1}
           className={classNames(
             editNode
               ? "input-component-true-button"

src/frontend/src/components/skeletonCardComponent/index.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from "../ui/skeleton";
+
+export const SkeletonCardComponent = (): JSX.Element => {
+  return (
+    <div className="skeleton-card">
+      <div className="skeleton-card-wrapper">
+        <Skeleton className="h-8 w-8 rounded-full" />
+        <Skeleton className="h-4 w-[120px]" />
+      </div>
+      <div className="skeleton-card-text">
+        <Skeleton className="h-3 w-[250px]" />
+        <Skeleton className="h-3 w-[200px]" />
+      </div>
+    </div>
+  );
+};

src/frontend/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "../../utils/utils";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

src/frontend/src/contexts/alertContext.tsx

@@ -25,7 +25,7 @@ const initialValue: alertContextType = {
   notificationList: [],
   pushNotificationList: () => {},
   clearNotificationList: () => {},
-  removeFromNotificationList: () => {}
+  removeFromNotificationList: () => {},
 };
 
 export const alertContext = createContext<alertContextType>(initialValue);

src/frontend/src/contexts/tabsContext.tsx

@@ -39,6 +39,7 @@ const TabsContextInitialValue: TabsContextType = {
   save: () => {},
   tabId: "",
   setTabId: (index: string) => {},
+  isLoading: true,
   flows: [],
   removeFlow: (id: string) => {},
   addFlow: async (flowData?: any) => "",
@@ -47,7 +48,7 @@ const TabsContextInitialValue: TabsContextType = {
   downloadFlow: (flow: FlowType) => {},
   downloadFlows: () => {},
   uploadFlows: () => {},
-  uploadFlow: () => {},
+  uploadFlow: async () => "",
   isBuilt: false,
   setIsBuilt: (state: boolean) => {},
   hardReset: () => {},
@@ -72,10 +73,12 @@ export const TabsContext = createContext<TabsContextType>(
 export function TabsProvider({ children }: { children: ReactNode }) {
   const { setErrorData, setNoticeData, setSuccessData } =
     useContext(alertContext);
-  const { getAuthentication } = useContext(AuthContext);
+  const { getAuthentication, isAuthenticated } = useContext(AuthContext);
 
   const [tabId, setTabId] = useState("");
 
+  const [isLoading, setIsLoading] = useState(true);
+
   const [flows, setFlows] = useState<Array<FlowType>>([]);
   const [id, setId] = useState(uid());
   const { templates, reactFlowInstance } = useContext(typesContext);
@@ -86,6 +89,12 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   const [tabsState, setTabsState] = useState<TabsState>({});
   const [getTweak, setTweak] = useState<tweakType>([]);
 
+  useEffect(() => {
+    if (!isAuthenticated) {
+      hardReset();
+    }
+  }, [isAuthenticated]);
+
   const newNodeId = useRef(uid());
   function incrementNodeId() {
     newNodeId.current = uid();
@@ -116,11 +125,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   }
 
   function refreshFlows() {
+    setIsLoading(true);
     getTabsDataFromDB().then((DbData) => {
       if (DbData && Object.keys(templates).length > 0) {
         try {
           processDBData(DbData);
           updateStateWithDbData(DbData);
+          setIsLoading(false);
         } catch (e) {}
       }
     });
@@ -229,6 +240,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     setTabId("");
 
     setFlows([]);
+    setIsLoading(true);
     setId(uid());
   }
 
@@ -286,39 +298,40 @@ export function TabsProvider({ children }: { children: ReactNode }) {
    * If the file type is application/json, the file is read and parsed into a JSON object.
    * The resulting JSON object is passed to the addFlow function.
    */
-  function uploadFlow(newProject?: boolean, file?: File) {
+  async function uploadFlow(
+    newProject?: boolean,
+    file?: File
+  ): Promise<String | undefined> {
+    let id;
     if (file) {
-      file.text().then((text) => {
-        // parse the text into a JSON object
-        let flow: FlowType = JSON.parse(text);
+      let text = await file.text();
+      // parse the text into a JSON object
+      let flow: FlowType = JSON.parse(text);
 
-        addFlow(flow, newProject);
-      });
+      id = await addFlow(flow, newProject);
     } else {
       // create a file input
       const input = document.createElement("input");
       input.type = "file";
       input.accept = ".json";
       // add a change event listener to the file input
-      input.onchange = (e: Event) => {
-        // check if the file type is application/json
-        if (
-          (e.target as HTMLInputElement).files![0].type === "application/json"
-        ) {
-          // get the file from the file input
-          const currentfile = (e.target as HTMLInputElement).files![0];
-          // read the file as text
-          currentfile.text().then((text) => {
-            // parse the text into a JSON object
+      id = await new Promise((resolve) => {
+        input.onchange = async (e: Event) => {
+          if (
+            (e.target as HTMLInputElement).files![0].type === "application/json"
+          ) {
+            const currentfile = (e.target as HTMLInputElement).files![0];
+            let text = await currentfile.text();
             let flow: FlowType = JSON.parse(text);
-
-            addFlow(flow, newProject);
-          });
-        }
-      };
-      // trigger the file input click event to open the file dialog
-      input.click();
+            const flowId = await addFlow(flow, newProject);
+            resolve(flowId);
+          }
+        };
+        // trigger the file input click event to open the file dialog
+        input.click();
+      });
     }
+    return id;
   }
 
   function uploadFlows() {
@@ -641,6 +654,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
         paste,
         getTweak,
         setTweak,
+        isLoading,
       }}
     >
       {children}

src/frontend/src/controllers/API/api.tsx

@@ -33,7 +33,7 @@ function ApiInterceptor() {
             }
 
             const res = await renewAccessToken(refreshToken);
-            login(res.data.access_token, res.data.refresh_token);
+            login(res?.data?.access_token, res?.data?.refresh_token);
             try {
               if (error?.config?.headers) {
                 delete error.config.headers["Authorization"];

src/frontend/src/controllers/API/index.ts

@@ -312,7 +312,7 @@ export async function getHealth() {
  */
 export async function getBuildStatus(
   flowId: string
-): Promise<BuildStatusTypeAPI> {
+): Promise<AxiosResponse<BuildStatusTypeAPI>> {
   return await api.get(`${BASE_URL_API}build/${flowId}/status`);
 }
 
@@ -468,7 +468,7 @@ export async function updateUser(user_id: string, user: Users) {
 
 export async function getApiKey() {
   try {
-    const res = await api.get(`${BASE_URL_API}api_key`);
+    const res = await api.get(`${BASE_URL_API}api_key/`);
     if (res.status === 200) {
       return res.data;
     }
@@ -480,7 +480,7 @@ export async function getApiKey() {
 
 export async function createApiKey(name: string) {
   try {
-    const res = await api.post(`${BASE_URL_API}api_key`, { name });
+    const res = await api.post(`${BASE_URL_API}api_key/`, { name });
     if (res.status === 200) {
       return res.data;
     }

src/frontend/src/modals/formModal/index.tsx

@@ -25,6 +25,7 @@ import { Textarea } from "../../components/ui/textarea";
 import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import { TabsContext } from "../../contexts/tabsContext";
+import { getBuildStatus } from "../../controllers/API";
 import { TabsState } from "../../types/tabs";
 import { validateNodes } from "../../utils/reactflowUtils";
 
@@ -155,9 +156,23 @@ export default function FormModal({
 
   function handleOnClose(event: CloseEvent): void {
     if (isOpen.current) {
+      getBuildStatus(flow.id)
+        .then((response) => {
+          if (response.data.built) {
+            connectWS();
+          } else {
+            setErrorData({
+              title: "Please build the flow again before using the chat.",
+            });
+          }
+        })
+        .catch((error) => {
+          setErrorData({
+            title: error.data?.detail ? error.data.detail : error.message,
+          });
+        });
       setErrorData({ title: event.reason });
       setTimeout(() => {
-        connectWS();
         setLockChat(false);
       }, 1000);
     }
@@ -175,7 +190,7 @@ export default function FormModal({
 
     return `${
       isDevelopment ? "ws" : webSocketProtocol
-    }://${host}${chatEndpoint}?token=${accessToken}`;
+    }://${host}${chatEndpoint}?token=${encodeURIComponent(accessToken!)}`;
   }
 
   function handleWsMessage(data: any) {
@@ -260,7 +275,6 @@ export default function FormModal({
       };
       newWs.onmessage = (event) => {
         const data = JSON.parse(event.data);
-        console.log("Received data:", data);
         handleWsMessage(data);
         //get chat history
       };
@@ -268,7 +282,6 @@ export default function FormModal({
         handleOnClose(event);
       };
       newWs.onerror = (ev) => {
-        console.log(ev, "error");
         if (flow.id === "") {
           connectWS();
         } else {
@@ -294,7 +307,6 @@ export default function FormModal({
   useEffect(() => {
     connectWS();
     return () => {
-      console.log("unmount");
       console.log(ws);
       if (ws.current) {
         ws.current.close();

src/frontend/src/modals/genericModal/index.tsx

@@ -136,7 +136,11 @@ export default function GenericModal({
             setSuccessData({
               title: "Prompt is ready",
             });
-            if(JSON.stringify(apiReturn.data?.frontend_node)!==JSON.stringify({})) setNodeClass!(apiReturn.data?.frontend_node);
+            if (
+              JSON.stringify(apiReturn.data?.frontend_node) !==
+              JSON.stringify({})
+            )
+              setNodeClass!(apiReturn.data?.frontend_node);
             setModalOpen(closeModal);
             setValue(inputValue);
           }

src/frontend/src/pages/AdminPage/index.tsx

@@ -4,6 +4,7 @@ import { useContext, useEffect, useRef, useState } from "react";
 import PaginatorComponent from "../../components/PaginatorComponent";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import IconComponent from "../../components/genericIconComponent";
+import Header from "../../components/headerComponent";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { Input } from "../../components/ui/input";
@@ -25,9 +26,8 @@ import {
 } from "../../controllers/API";
 import ConfirmationModal from "../../modals/ConfirmationModal";
 import UserManagementModal from "../../modals/UserManagementModal";
-import { UserInputType } from "../../types/components";
-import Header from "../../components/headerComponent";
 import { Users } from "../../types/api";
+import { UserInputType } from "../../types/components";
 
 export default function AdminPage() {
   const [inputValue, setInputValue] = useState("");
@@ -89,7 +89,7 @@ export default function AdminPage() {
     if (input === "") {
       setFilterUserList(userList.current);
     } else {
-      const filteredList = userList.current.filter((user:Users) =>
+      const filteredList = userList.current.filter((user: Users) =>
         user.username.toLowerCase().includes(input.toLowerCase())
       );
       setFilterUserList(filteredList);
@@ -183,249 +183,254 @@ export default function AdminPage() {
 
   return (
     <>
-    <div className="flex flex-col">
-      <Header />
-      {userData && (
-        <div className="main-page-panel">
-          <div className="m-auto flex h-full flex-row justify-center">
-            <div className="basis-5/6">
-              <div className="m-auto flex h-full flex-col space-y-8 p-8 ">
-                <div className="flex items-center justify-between space-y-2">
-                  <div>
-                    <h2 className="text-2xl font-bold tracking-tight">
-                      Welcome back!
-                    </h2>
-                    <p className="text-muted-foreground">
-                      Navigate through this section to efficiently oversee all
-                      application users. From here, you can seamlessly manage
-                      user accounts.
-                    </p>
+      <div className="flex flex-col">
+        <Header />
+        {userData && (
+          <div className="main-page-panel">
+            <div className="m-auto flex h-full flex-row justify-center">
+              <div className="basis-5/6">
+                <div className="m-auto flex h-full flex-col space-y-8 p-8 ">
+                  <div className="flex items-center justify-between space-y-2">
+                    <div>
+                      <h2 className="text-2xl font-bold tracking-tight">
+                        Welcome back!
+                      </h2>
+                      <p className="text-muted-foreground">
+                        Navigate through this section to efficiently oversee all
+                        application users. From here, you can seamlessly manage
+                        user accounts.
+                      </p>
+                    </div>
+                    <div className="flex items-center space-x-2"></div>
                   </div>
-                  <div className="flex items-center space-x-2"></div>
-                </div>
 
-                {userList.current.length === 0 && !loadingUsers && (
+                  {userList.current.length === 0 && !loadingUsers && (
+                    <>
+                      <div className="flex items-center justify-between">
+                        <h2>There's no users registered :)</h2>
+                      </div>
+                    </>
+                  )}
                   <>
                     <div className="flex items-center justify-between">
-                      <h2>There's no users registered :)</h2>
-                    </div>
-                  </>
-                )}
-                <>
-                  <div className="flex items-center justify-between">
-                    <div className="flex flex-1 items-center space-x-2">
-                      <Input
-                        value={inputValue}
-                        placeholder="Filter users..."
-                        className="h-8 w-[150px] lg:w-[250px]"
-                        onChange={(e) => handleFilterUsers(e.target.value)}
-                      />
-                      {inputValue.length > 0 && (
-                        <Button
-                          onClick={() => {
-                            setInputValue("");
-                            setFilterUserList(userList.current);
+                      <div className="flex flex-1 items-center space-x-2">
+                        <Input
+                          value={inputValue}
+                          placeholder="Filter users..."
+                          className="h-8 w-[150px] lg:w-[250px]"
+                          onChange={(e) => handleFilterUsers(e.target.value)}
+                        />
+                        {inputValue.length > 0 && (
+                          <Button
+                            onClick={() => {
+                              setInputValue("");
+                              setFilterUserList(userList.current);
+                            }}
+                            variant="ghost"
+                            className="h-8 px-2 lg:px-3"
+                          >
+                            Reset
+                            <X className="ml-2 h-4 w-4" />
+                          </Button>
+                        )}
+                      </div>
+                      <div>
+                        <UserManagementModal
+                          title="New User"
+                          titleHeader={"Add a new user"}
+                          cancelText="Cancel"
+                          confirmationText="Save"
+                          icon={"UserPlus2"}
+                          onConfirm={(index, user) => {
+                            handleNewUser(user);
                           }}
-                          variant="ghost"
-                          className="h-8 px-2 lg:px-3"
                         >
-                          Reset
-                          <X className="ml-2 h-4 w-4" />
-                        </Button>
-                      )}
+                          <Button>New User</Button>
+                        </UserManagementModal>
+                      </div>
                     </div>
-                    <div>
-                      <UserManagementModal
-                        title="New User"
-                        titleHeader={"Add a new user"}
-                        cancelText="Cancel"
-                        confirmationText="Save"
-                        icon={"UserPlus2"}
-                        onConfirm={(index, user) => {
-                          handleNewUser(user);
-                        }}
-                      >
-                        <Button>New User</Button>
-                      </UserManagementModal>
-                    </div>
-                  </div>
-                  {loadingUsers && (
-                    <div>
-                      <strong>Loading...</strong>
-                    </div>
-                  )}
-                  <div
-                    className={
-                      "max-h-[26rem] min-h-[26rem] overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted custom-scroll" +
-                      (loadingUsers ? " border-0" : "")
-                    }
-                  >
-                    <Table className={"table-fixed bg-muted outline-1"}>
-                      <TableHeader
-                        className={
-                          loadingUsers
-                            ? "hidden"
-                            : "table-fixed bg-muted outline-1"
-                        }
-                      >
-                        <TableRow>
-                          <TableHead className="h-10">Id</TableHead>
-                          <TableHead className="h-10">Username</TableHead>
-                          <TableHead className="h-10">Active</TableHead>
-                          <TableHead className="h-10">Superuser</TableHead>
-                          <TableHead className="h-10">Created At</TableHead>
-                          <TableHead className="h-10">Updated At</TableHead>
-                          <TableHead className="h-10 w-[100px]  text-right"></TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      {!loadingUsers && (
-                        <TableBody>
-                          {filterUserList.map((user:UserInputType, index) => (
-                            <TableRow key={index}>
-                              <TableCell className="truncate py-2 font-medium">
-                                <ShadTooltip content={user.id}>
-                                  <span className="cursor-default">
-                                    {user.id}
-                                  </span>
-                                </ShadTooltip>
-                              </TableCell>
-                              <TableCell className="truncate py-2">
-                                <ShadTooltip content={user.username}>
-                                  <span className="cursor-default">
-                                    {user.username}
-                                  </span>
-                                </ShadTooltip>
-                              </TableCell>
-                              <TableCell className="relative left-5 truncate py-2 text-align-last-left">
-                                <ConfirmationModal
-                                  title="Edit"
-                                  titleHeader={`${user.username}`}
-                                  modalContentTitle="Attention!"
-                                  modalContent="Are you completely confident about the changes you are making to this user?"
-                                  cancelText="Cancel"
-                                  confirmationText="Confirm"
-                                  icon={"UserCog2"}
-                                  data={user}
-                                  index={index}
-                                  onConfirm={(index, user) => {
-                                    handleDisableUser(
-                                      user.is_active,
-                                      user.id,
-                                      user
-                                    );
-                                  }}
-                                >
-                                  <Checkbox
-                                    id="is_active"
-                                    checked={user.is_active}
-                                  />
-                                </ConfirmationModal>
-                              </TableCell>
-                              <TableCell className="relative left-5 truncate py-2 text-align-last-left">
-                                <ConfirmationModal
-                                  title="Edit"
-                                  titleHeader={`${user.username}`}
-                                  modalContentTitle="Attention!"
-                                  modalContent="Are you completely confident about the changes you are making to this user?"
-                                  cancelText="Cancel"
-                                  confirmationText="Confirm"
-                                  icon={"UserCog2"}
-                                  data={user}
-                                  index={index}
-                                  onConfirm={(index, user) => {
-                                    handleSuperUserEdit(
-                                      user.is_superuser,
-                                      user.id,
-                                      user
-                                    );
-                                  }}
-                                >
-                                  <Checkbox
-                                    id="is_superuser"
-                                    checked={user.is_superuser}
-                                  />
-                                </ConfirmationModal>
-                              </TableCell>
-                              <TableCell className="truncate py-2 ">
-                                {
-                                  new Date(user.create_at!)
-                                    .toISOString()
-                                    .split("T")[0]
-                                }
-                              </TableCell>
-                              <TableCell className="truncate py-2">
-                                {
-                                  new Date(user.updated_at!)
-                                    .toISOString()
-                                    .split("T")[0]
-                                }
-                              </TableCell>
-                              <TableCell className="flex w-[100px] py-2 text-right">
-                                <div className="flex">
-                                  <UserManagementModal
-                                    title="Edit"
-                                    titleHeader={`${user.id}`}
-                                    cancelText="Cancel"
-                                    confirmationText="Save"
-                                    icon={"UserPlus2"}
-                                    data={user}
-                                    index={index}
-                                    onConfirm={(index, editUser) => {
-                                      handleEditUser(user.id, editUser);
-                                    }}
-                                  >
-                                    <ShadTooltip content="Edit" side="top">
-                                      <IconComponent
-                                        name="Pencil"
-                                        className="h-4 w-4 cursor-pointer"
-                                      />
+                    {loadingUsers && (
+                      <div>
+                        <strong>Loading...</strong>
+                      </div>
+                    )}
+                    <div
+                      className={
+                        "max-h-[26rem] min-h-[26rem] overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted custom-scroll" +
+                        (loadingUsers ? " border-0" : "")
+                      }
+                    >
+                      <Table className={"table-fixed bg-muted outline-1"}>
+                        <TableHeader
+                          className={
+                            loadingUsers
+                              ? "hidden"
+                              : "table-fixed bg-muted outline-1"
+                          }
+                        >
+                          <TableRow>
+                            <TableHead className="h-10">Id</TableHead>
+                            <TableHead className="h-10">Username</TableHead>
+                            <TableHead className="h-10">Active</TableHead>
+                            <TableHead className="h-10">Superuser</TableHead>
+                            <TableHead className="h-10">Created At</TableHead>
+                            <TableHead className="h-10">Updated At</TableHead>
+                            <TableHead className="h-10 w-[100px]  text-right"></TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        {!loadingUsers && (
+                          <TableBody>
+                            {filterUserList.map(
+                              (user: UserInputType, index) => (
+                                <TableRow key={index}>
+                                  <TableCell className="truncate py-2 font-medium">
+                                    <ShadTooltip content={user.id}>
+                                      <span className="cursor-default">
+                                        {user.id}
+                                      </span>
                                     </ShadTooltip>
-                                  </UserManagementModal>
-
-                                  <ConfirmationModal
-                                    title="Delete"
-                                    titleHeader="Delete User"
-                                    modalContentTitle="Attention!"
-                                    modalContent="Are you sure you want to delete this user? This action cannot be undone."
-                                    cancelText="Cancel"
-                                    confirmationText="Delete"
-                                    icon={"UserMinus2"}
-                                    data={user}
-                                    index={index}
-                                    onConfirm={(index, user) => {
-                                      handleDeleteUser(user);
-                                    }}
-                                  >
-                                    <ShadTooltip content="Delete" side="top">
-                                      <IconComponent
-                                        name="Trash2"
-                                        className="ml-2 h-4 w-4 cursor-pointer"
-                                      />
+                                  </TableCell>
+                                  <TableCell className="truncate py-2">
+                                    <ShadTooltip content={user.username}>
+                                      <span className="cursor-default">
+                                        {user.username}
+                                      </span>
                                     </ShadTooltip>
-                                  </ConfirmationModal>
-                                </div>
-                              </TableCell>
-                            </TableRow>
-                          ))}
-                        </TableBody>
-                      )}
-                    </Table>
-                  </div>
+                                  </TableCell>
+                                  <TableCell className="relative left-5 truncate py-2 text-align-last-left">
+                                    <ConfirmationModal
+                                      title="Edit"
+                                      titleHeader={`${user.username}`}
+                                      modalContentTitle="Attention!"
+                                      modalContent="Are you completely confident about the changes you are making to this user?"
+                                      cancelText="Cancel"
+                                      confirmationText="Confirm"
+                                      icon={"UserCog2"}
+                                      data={user}
+                                      index={index}
+                                      onConfirm={(index, user) => {
+                                        handleDisableUser(
+                                          user.is_active,
+                                          user.id,
+                                          user
+                                        );
+                                      }}
+                                    >
+                                      <Checkbox
+                                        id="is_active"
+                                        checked={user.is_active}
+                                      />
+                                    </ConfirmationModal>
+                                  </TableCell>
+                                  <TableCell className="relative left-5 truncate py-2 text-align-last-left">
+                                    <ConfirmationModal
+                                      title="Edit"
+                                      titleHeader={`${user.username}`}
+                                      modalContentTitle="Attention!"
+                                      modalContent="Are you completely confident about the changes you are making to this user?"
+                                      cancelText="Cancel"
+                                      confirmationText="Confirm"
+                                      icon={"UserCog2"}
+                                      data={user}
+                                      index={index}
+                                      onConfirm={(index, user) => {
+                                        handleSuperUserEdit(
+                                          user.is_superuser,
+                                          user.id,
+                                          user
+                                        );
+                                      }}
+                                    >
+                                      <Checkbox
+                                        id="is_superuser"
+                                        checked={user.is_superuser}
+                                      />
+                                    </ConfirmationModal>
+                                  </TableCell>
+                                  <TableCell className="truncate py-2 ">
+                                    {
+                                      new Date(user.create_at!)
+                                        .toISOString()
+                                        .split("T")[0]
+                                    }
+                                  </TableCell>
+                                  <TableCell className="truncate py-2">
+                                    {
+                                      new Date(user.updated_at!)
+                                        .toISOString()
+                                        .split("T")[0]
+                                    }
+                                  </TableCell>
+                                  <TableCell className="flex w-[100px] py-2 text-right">
+                                    <div className="flex">
+                                      <UserManagementModal
+                                        title="Edit"
+                                        titleHeader={`${user.id}`}
+                                        cancelText="Cancel"
+                                        confirmationText="Save"
+                                        icon={"UserPlus2"}
+                                        data={user}
+                                        index={index}
+                                        onConfirm={(index, editUser) => {
+                                          handleEditUser(user.id, editUser);
+                                        }}
+                                      >
+                                        <ShadTooltip content="Edit" side="top">
+                                          <IconComponent
+                                            name="Pencil"
+                                            className="h-4 w-4 cursor-pointer"
+                                          />
+                                        </ShadTooltip>
+                                      </UserManagementModal>
 
-                  <PaginatorComponent
-                    pageIndex={index}
-                    pageSize={size}
-                    totalRowsCount={totalRowsCount}
-                    paginate={(pageIndex, pageSize) => {
-                      handleChangePagination(pageSize, pageIndex);
-                    }}
-                  ></PaginatorComponent>
-                </>
+                                      <ConfirmationModal
+                                        title="Delete"
+                                        titleHeader="Delete User"
+                                        modalContentTitle="Attention!"
+                                        modalContent="Are you sure you want to delete this user? This action cannot be undone."
+                                        cancelText="Cancel"
+                                        confirmationText="Delete"
+                                        icon={"UserMinus2"}
+                                        data={user}
+                                        index={index}
+                                        onConfirm={(index, user) => {
+                                          handleDeleteUser(user);
+                                        }}
+                                      >
+                                        <ShadTooltip
+                                          content="Delete"
+                                          side="top"
+                                        >
+                                          <IconComponent
+                                            name="Trash2"
+                                            className="ml-2 h-4 w-4 cursor-pointer"
+                                          />
+                                        </ShadTooltip>
+                                      </ConfirmationModal>
+                                    </div>
+                                  </TableCell>
+                                </TableRow>
+                              )
+                            )}
+                          </TableBody>
+                        )}
+                      </Table>
+                    </div>
+
+                    <PaginatorComponent
+                      pageIndex={index}
+                      pageSize={size}
+                      totalRowsCount={totalRowsCount}
+                      paginate={(pageIndex, pageSize) => {
+                        handleChangePagination(pageSize, pageIndex);
+                      }}
+                    ></PaginatorComponent>
+                  </>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      )}
+        )}
       </div>
     </>
   );

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -421,7 +421,7 @@ export default function Page({
                   zoomOnScroll={!view}
                   zoomOnPinch={!view}
                   panOnDrag={!view}
-                  proOptions={{hideAttribution: true}}
+                  proOptions={{ hideAttribution: true }}
                 >
                   <Background className="" />
                   {!view && (

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -21,8 +21,7 @@ export default function ExtraSidebar(): JSX.Element {
   const { data, templates } = useContext(typesContext);
   const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt } =
     useContext(TabsContext);
-  const { setSuccessData, setErrorData } =
-    useContext(alertContext);
+  const { setSuccessData, setErrorData } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);
   const [search, setSearch] = useState("");
   const isPending = tabsState[tabId]?.isPending;
@@ -101,9 +100,7 @@ export default function ExtraSidebar(): JSX.Element {
           <div className="side-bar-button">
             {flow && flow.data && (
               <ApiModal flow={flow} disable={!isBuilt}>
-                <div
-                  className={classNames("extra-side-bar-buttons")}
-                >
+                <div className={classNames("extra-side-bar-buttons")}>
                   <IconComponent
                     name="Code2"
                     className={

src/frontend/src/pages/MainPage/index.tsx

@@ -1,14 +1,33 @@
 import { useContext, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
+import DropdownButton from "../../components/DropdownButtonComponent";
 import { CardComponent } from "../../components/cardComponent";
 import IconComponent from "../../components/genericIconComponent";
 import Header from "../../components/headerComponent";
+import { SkeletonCardComponent } from "../../components/skeletonCardComponent";
 import { Button } from "../../components/ui/button";
 import { USER_PROJECTS_HEADER } from "../../constants/constants";
 import { TabsContext } from "../../contexts/tabsContext";
 export default function HomePage(): JSX.Element {
-  const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
-    useContext(TabsContext);
+  const {
+    flows,
+    setTabId,
+    downloadFlows,
+    uploadFlows,
+    addFlow,
+    removeFlow,
+    uploadFlow,
+    isLoading,
+  } = useContext(TabsContext);
+  const dropdownOptions = [
+    {
+      name: "Import from JSON",
+      onBtnClick: () =>
+        uploadFlow(true).then((id) => {
+          navigate("/flow/" + id);
+        }),
+    },
+  ];
 
   // Set a null id
   useEffect(() => {
@@ -16,6 +35,10 @@ export default function HomePage(): JSX.Element {
   }, []);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    console.log(isLoading);
+  }, [isLoading]);
+
   // Personal flows display
   return (
     <>
@@ -45,48 +68,55 @@ export default function HomePage(): JSX.Element {
               <IconComponent name="Upload" className="main-page-nav-button" />
               Upload Collection
             </Button>
-            <Button
-              variant="primary"
-              onClick={() => {
+            <DropdownButton
+              firstButtonName="New Project"
+              onFirstBtnClick={() => {
                 addFlow(null!, true).then((id) => {
                   navigate("/flow/" + id);
                 });
               }}
-            >
-              <IconComponent name="Plus" className="main-page-nav-button" />
-              New Project
-            </Button>
+              options={dropdownOptions}
+            />
           </div>
         </div>
         <span className="main-page-description-text">
           Manage your personal projects. Download or upload your collection.
         </span>
         <div className="main-page-flows-display">
-          {flows.map((flow, idx) => (
-            <CardComponent
-              key={idx}
-              flow={flow}
-              id={flow.id}
-              button={
-                <Link to={"/flow/" + flow.id}>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="whitespace-nowrap "
-                  >
-                    <IconComponent
-                      name="ExternalLink"
-                      className="main-page-nav-button"
-                    />
-                    Edit Flow
-                  </Button>
-                </Link>
-              }
-              onDelete={() => {
-                removeFlow(flow.id);
-              }}
-            />
-          ))}
+          {isLoading && flows.length == 0 ? (
+            <>
+              <SkeletonCardComponent />
+              <SkeletonCardComponent />
+              <SkeletonCardComponent />
+              <SkeletonCardComponent />
+            </>
+          ) : (
+            flows.map((flow, idx) => (
+              <CardComponent
+                key={idx}
+                flow={flow}
+                id={flow.id}
+                button={
+                  <Link to={"/flow/" + flow.id}>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="whitespace-nowrap "
+                    >
+                      <IconComponent
+                        name="ExternalLink"
+                        className="main-page-nav-button"
+                      />
+                      Edit Flow
+                    </Button>
+                  </Link>
+                }
+                onDelete={() => {
+                  removeFlow(flow.id);
+                }}
+              />
+            ))
+          )}
         </div>
       </div>
     </>

src/frontend/src/pages/loginPage/index.tsx

@@ -19,7 +19,8 @@ export default function LoginPage(): JSX.Element {
     useState<loginInputStateType>(CONTROL_LOGIN_STATE);
 
   const { password, username } = inputState;
-  const { login, getAuthentication, setUserData, setIsAdmin } = useContext(AuthContext);
+  const { login, getAuthentication, setUserData, setIsAdmin } =
+    useContext(AuthContext);
   const navigate = useNavigate();
   const { setErrorData } = useContext(alertContext);
 
@@ -89,6 +90,7 @@ export default function LoginPage(): JSX.Element {
 
               <Form.Control asChild>
                 <Input
+                  type="username"
                   onChange={({ target: { value } }) => {
                     handleInput({ target: { name: "username", value } });
                   }}
@@ -129,12 +131,14 @@ export default function LoginPage(): JSX.Element {
           </div>
           <div className="w-full">
             <Form.Submit asChild>
-              <Button className="mr-3 mt-6 w-full">Sign in</Button>
+              <Button className="mr-3 mt-6 w-full" type="submit">
+                Sign in
+              </Button>
             </Form.Submit>
           </div>
           <div className="w-full">
             <Link to="/signup">
-              <Button className="w-full" variant="outline">
+              <Button className="w-full" variant="outline" type="button">
                 Don't have an account?&nbsp;<b>Sign Up</b>
               </Button>
             </Link>

src/frontend/src/pages/signUpPage/index.tsx

@@ -84,6 +84,7 @@ export default function SignUp(): JSX.Element {
 
               <Form.Control asChild>
                 <Input
+                  type="username"
                   onChange={({ target: { value } }) => {
                     handleInput({ target: { name: "username", value } });
                   }}
@@ -157,6 +158,7 @@ export default function SignUp(): JSX.Element {
           <div className="w-full">
             <Form.Submit asChild>
               <Button
+                type="submit"
                 className="mr-3 mt-6 w-full"
                 onClick={() => {
                   handleSignup();

src/frontend/src/style/applies.css

@@ -126,6 +126,18 @@
     @apply form-input block w-full truncate rounded-md border-border bg-background px-3 text-left shadow-sm placeholder:text-muted-foreground focus:border-ring focus:placeholder-transparent focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm;
   }
 
+  .skeleton-card {
+    @apply bg-background h-48 p-4 border rounded-lg flex flex-col gap-6;
+  }
+
+  .skeleton-card-wrapper {
+    @apply flex items-center space-x-4;
+  }
+
+  .skeleton-card-text {
+    @apply flex flex-col gap-3;
+  }
+
   /* The same as primary-input but no-truncate */
   .textarea-primary {
     @apply form-input block w-full rounded-md border-border bg-background px-3 text-left shadow-sm placeholder:text-muted-foreground focus:border-ring focus:placeholder-transparent focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm;

src/frontend/src/style/classes.css

@@ -36,3 +36,18 @@ pre {
 .gradient-start {
   animation: gradient-motion-start 4s infinite forwards;
 }
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  -webkit-text-fill-color: black;
+  -webkit-box-shadow: 0 0 0px 1000px #fff6d0 inset;
+  box-shadow: 0 0 0px 1000px #fff6d0 inset;
+  color: black;
+}

src/frontend/src/types/components/index.ts

@@ -268,7 +268,7 @@ export type UserInputType = {
   is_superuser?: boolean;
   id?: string;
   create_at?: string;
-  updated_at?:string;
+  updated_at?: string;
 };
 
 export type ApiKeyType = {
@@ -544,3 +544,9 @@ export type fetchErrorComponentType = {
   message: string;
   description: string;
 };
+
+export type dropdownButtonPropsType = {
+  firstButtonName: string;
+  onFirstBtnClick: () => void;
+  options: Array<{ name: string; onBtnClick: () => void }>;
+};

src/frontend/src/types/tabs/index.ts

@@ -5,6 +5,7 @@ export type TabsContextType = {
   saveFlow: (flow: FlowType) => Promise<void>;
   save: () => void;
   tabId: string;
+  isLoading: boolean;
   setTabId: (index: string) => void;
   flows: Array<FlowType>;
   removeFlow: (id: string) => void;
@@ -23,7 +24,7 @@ export type TabsContextType = {
   uploadFlows: () => void;
   isBuilt: boolean;
   setIsBuilt: (state: boolean) => void;
-  uploadFlow: (newFlow?: boolean, file?: File) => void;
+  uploadFlow: (newFlow?: boolean, file?: File) => Promise<String | undefined>;
   hardReset: () => void;
   getNodeId: (nodeType: string) => string;
   tabsState: TabsState;

src/frontend/src/utils/styleUtils.ts

@@ -5,6 +5,7 @@ import {
   ChevronDown,
   ChevronLeft,
   ChevronRight,
+  ChevronUp,
   ChevronsLeft,
   ChevronsRight,
   ChevronsUpDown,
@@ -300,4 +301,5 @@ export const nodeIconsLucide: iconsType = {
   UserCog2,
   Key,
   Unplug,
+  ChevronUp,
 };