✨ Release: Chat and Cache Improvements, Websocket Integration, and Da…

…rk Mode Enhancements 🌙 (#220)

This release brings a series of new features and improvements,
including:
- 💬 Chat and Cache Improvements:
- Refactored cache-related functions and moved them to a new base.py
module
  - Simplified the Chat component and added chat history support
  - Implemented the ability to send file responses in chat
  - Real-time Node validation for improved user experience
- CacheManager was added to share data between tools and display them in
the chat.
- 🌐 Websocket Integration:
  - Implemented websocket connection for the chat (WIP)
- 🌙 Dark Mode Enhancements:
  - Fixed dark mode for dropdown components
  - Improved dark mode styling for the chat interface
  - Updated thought icon for dark mode
- 🚀 Other Improvements:
  - Migrated chat logic to chat modal
  - Implemented unique IDs for flow management
  - Sorted sidebar items for better organization
  - Removed unused imports and optimized codebase

This release enhances the overall user experience and streamlines chat
and cache functionalities, ensuring a smoother and more efficient
workflow. 🎉

.devcontainer/demo/README.md

@@ -0,0 +1,15 @@
+# LangFlow Demo Codespace Readme
+
+These instructions will walk you through the process of running a LangFlow demo via GitHub Codespaces.
+
+## Setup
+
+### Create a Codespace in GitHub
+
+To setup the demo, simply navigate to the Langflow repo, click the "+" button, and select "Create new Codespace". This will automatically create a new codespace in your browser, which you can use for the demo.
+
+### Wait for everything to install
+
+After the codespace is opened, you should see a new Terminal window in VS Code where langflow is installed. Once the install completes, `langflow` will launch the webserver and your application will be available via devcontainer port. 
+
+Note: VS Code should prompt you with a button to push once the port is available.

.devcontainer/demo/devcontainer.json

@@ -0,0 +1,32 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/universal
+{
+	"name": "LangChain Demo Container",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/python:3.10",
+	"features": {
+		"ghcr.io/devcontainers/features/aws-cli:1": {},
+		"ghcr.io/devcontainers/features/docker-in-docker": {},
+		"ghcr.io/devcontainers/features/node": {}
+	},
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"actboy168.tasks",
+				"GitHub.copilot",
+				"ms-python.python",
+				"eamodio.gitlens"
+			]
+		}
+	},
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "pipx install 'langflow>=0.0.33' && langflow --host 0.0.0.0"
+	// Configure tool-specific properties.
+	// "customizations": {},
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.devcontainer/devcontainer.json

@@ -1,11 +1,12 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/universal
 {
-	"name": "Default Linux Universal",
+	"name": "LangChain Dev Container",
 	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
 	"image": "mcr.microsoft.com/devcontainers/universal:2-linux",
 	"features": {
-		"ghcr.io/devcontainers/features/aws-cli:1": {}
+		"ghcr.io/devcontainers/features/aws-cli:1": {},
+		"ghcr.io/devcontainers/features/docker-in-docker": {}
 	},
 	"customizations": {
 		"vscode": {"extensions": [
@@ -15,7 +16,7 @@
 				"sourcery.sourcery",
 				"eamodio.gitlens"
 			]}
-	}
+	},
 
 	// Features to add to the dev container. More info: https://containers.dev/features.
 	// "features": {},
@@ -24,7 +25,7 @@
 	// "forwardPorts": [],
 
 	// Use 'postCreateCommand' to run commands after the container is created.
-	// "postCreateCommand": "uname -a",
+	"postCreateCommand": "poetry install"
 
 	// Configure tool-specific properties.
 	// "customizations": {},

Makefile

@@ -26,8 +26,15 @@ install_frontend:
 run_frontend:
 	cd src/frontend && npm start
 
-run_backend:
-	poetry run uvicorn langflow.main:app --port 5003 --reload
+frontend:
+	make install_frontend
+	make run_frontend
+
+install_backend:
+	poetry install
+
+backend:
+	poetry run uvicorn langflow.main:app --port 7860 --reload --log-level debug
 
 build_frontend:
 	cd src/frontend && CI='' npm run build

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow"
-version = "0.0.58"
+version = "0.0.61"
 description = "A Python package with a built-in web application"
 authors = ["Logspace <contact@logspace.ai>"]
 maintainers = [
@@ -29,7 +29,7 @@ google-search-results = "^2.4.1"
 google-api-python-client = "^2.79.0"
 typer = "^0.7.0"
 gunicorn = "^20.1.0"
-langchain = "^0.0.131"
+langchain = "~0.0.150"
 openai = "^0.27.2"
 types-pyyaml = "^6.0.12.8"
 dill = "^0.3.6"
@@ -47,6 +47,7 @@ fake-useragent = "^1.1.3"
 docstring-parser = "^0.15"
 psycopg2-binary = "^2.9.6"
 pyarrow = "^11.0.0"
+websockets = "^11.0.2"
 
 [tool.poetry.group.dev.dependencies]
 black = "^23.1.0"
@@ -57,6 +58,10 @@ httpx = "^0.23.3"
 pytest = "^7.2.2"
 types-requests = "^2.28.11"
 requests = "^2.28.0"
+pytest-cov = "^4.0.0"
+pandas-stubs = "^2.0.0.230412"
+types-pillow = "^9.5.0.2"
+
 
 [tool.ruff]
 line-length = 120

src/backend/langflow/__init__.py

@@ -1 +1,4 @@
-from langflow.interface.loading import load_flow_from_json  # noqa
+from langflow.interface.loading import load_flow_from_json
+from langflow.cache import cache_manager
+
+__all__ = ["load_flow_from_json", "cache_manager"]

src/backend/langflow/api/base.py

@@ -3,6 +3,10 @@
 from langflow.graph.utils import extract_input_variables_from_prompt
 
 
+class CacheResponse(BaseModel):
+    data: dict
+
+
 class Code(BaseModel):
     code: str
 

src/backend/langflow/api/callback.py

@@ -0,0 +1,16 @@
+from typing import Any
+from langchain.callbacks.base import AsyncCallbackHandler
+
+from langflow.api.schemas import ChatResponse
+
+
+# https://github.com/hwchase17/chat-langchain/blob/master/callback.py
+class StreamingLLMCallbackHandler(AsyncCallbackHandler):
+    """Callback handler for streaming LLM responses."""
+
+    def __init__(self, websocket):
+        self.websocket = websocket
+
+    async def on_llm_new_token(self, token: str, **kwargs: Any) -> None:
+        resp = ChatResponse(message=token, type="stream", intermediate_steps="")
+        await self.websocket.send_json(resp.dict())

src/backend/langflow/api/chat.py

@@ -0,0 +1,18 @@
+from fastapi import APIRouter, WebSocket
+
+from langflow.api.chat_manager import ChatManager
+from langflow.utils.logger import logger
+
+router = APIRouter()
+chat_manager = ChatManager()
+
+
+@router.websocket("/chat/{client_id}")
+async def websocket_endpoint(client_id: str, websocket: WebSocket):
+    """Websocket endpoint for chat."""
+    try:
+        await chat_manager.handle_websocket(client_id, websocket)
+    except Exception as e:
+        # Log stack trace
+        logger.exception(e)
+        raise e