Refactor state management to use Zustand, migrate components to CustomComponent and other fixes (#1403)

This release:

- Adds Components from the Community
- Changes the state management to Zustand which simplifies many parts of
Langflow's frontend
- Migrates many components to CustomComponent to eventually put all
components in the same framework
- Fixes migration problems

Author: ogabrielluiz

.gitignore

@@ -17,6 +17,9 @@ qdrant_storage
 .chroma
 .ruff_cache
 
+# PyCharm
+.idea/
+
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
@@ -256,4 +259,4 @@ langflow.db
 /tmp/*
 src/backend/langflow/frontend/
 .docker
-scratchpad*
+scratchpad*

Makefile

@@ -45,6 +45,13 @@ run_frontend:
 	@-kill -9 `lsof -t -i:3000`
 	cd src/frontend && npm start
 
+tests_frontend:
+ifeq ($(UI), true)
+		cd src/frontend && ./run-tests.sh --ui
+else
+		cd src/frontend && ./run-tests.sh
+endif
+
 run_cli:
 	poetry run langflow run --path src/frontend/build
 

README.md

@@ -133,7 +133,7 @@ Follow our step-by-step guide to deploy Langflow on Google Cloud Platform (GCP)
 
 Alternatively, click the **"Open in Cloud Shell"** button below to launch Google Cloud Shell, clone the Langflow repository, and start an **interactive tutorial** that will guide you through the process of setting up the necessary resources and deploying Langflow on your GCP project.
 
-[![Open in Cloud Shell](https://gstatic.com/cloudssh/images/open-btn.svg)](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/logspace-ai/langflow&working_dir=scripts&shellonly=true&tutorial=walkthroughtutorial_spot.md)
+[![Open in Cloud Shell](https://gstatic.com/cloudssh/images/open-btn.svg)](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/logspace-ai/langflow&working_dir=scripts/gcp&shellonly=true&tutorial=walkthroughtutorial_spot.md)
 
 ## Deploy on Railway
 

docs/docs/components/embeddings.mdx

@@ -1,11 +1,13 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";
 
 # Embeddings
 
 <Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
-    <p>
-        We appreciate your understanding as we polish our documentation – it may contain some rough edges. Share your feedback or report issues to help us improve! 🛠️📝
-    </p>
+  <p>
+    We appreciate your understanding as we polish our documentation – it may
+    contain some rough edges. Share your feedback or report issues to help us
+    improve! 🛠️📝
+  </p>
 </Admonition>
 
 Embeddings are vector representations of text that capture the semantic meaning of the text. They are created using text embedding models and allow us to think about the text in a vector space, enabling us to perform tasks like semantic search, where we look for pieces of text that are most similar in the vector space.
@@ -110,4 +112,12 @@ Vertex AI is a cloud computing platform offered by Google Cloud Platform (GCP).
 - **top_k:** How the model selects tokens for output, the next token is selected from – defaults to `40`.
 - **top_p:** Tokens are selected from most probable to least until the sum of their – defaults to `0.95`.
 - **tuned_model_name:** The name of a tuned model. If provided, model_name is ignored.
-- **verbose:** This parameter is used to control the level of detail in the output of the chain. When set to True, it will print out some internal states of the chain while it is being run, which can help debug and understand the chain's behavior. If set to False, it will suppress the verbose output – defaults to `False`.
+- **verbose:** This parameter is used to control the level of detail in the output of the chain. When set to True, it will print out some internal states of the chain while it is being run, which can help debug and understand the chain's behavior. If set to False, it will suppress the verbose output – defaults to `False`.
+
+### OllamaEmbeddings
+
+Used to load [Ollama’s](https://ollama.ai/) embedding models. Wrapper around LangChain's [Ollama API](https://python.langchain.com/docs/integrations/text_embedding/ollama).
+
+- **model** The name of the Ollama model to use – defaults to `llama2`.
+- **base_url** The base URL for the Ollama API – defaults to `http://localhost:11434`.
+- **temperature** Tunes the degree of randomness in text generations. Should be a non-negative value – defaults to `0`.

docs/docs/examples/buffer-memory.mdx

@@ -21,7 +21,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 
 <Admonition type="note" title="LangChain Components 🦜🔗">
 
-- [`ConversationBufferMemory`](https://python.langchain.com/docs/modules/memory/how_to/buffer)
+- [`ConversationBufferMemory`](https://python.langchain.com/docs/modules/memory/types/buffer)
 - [`ConversationChain`](https://python.langchain.com/docs/modules/chains/)
 - [`ChatOpenAI`](https://python.langchain.com/docs/modules/model_io/models/chat/integrations/openai)
 

docs/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "docusaurus",
+  "name": "langflow-docs",
   "version": "0.0.0",
   "private": true,
   "scripts": {
@@ -36,8 +36,8 @@
     "path-browserify": "^1.0.1",
     "postcss": "^8.4.31",
     "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-images": "^0.6.7",
     "react-medium-image-zoom": "^5.1.6",
     "react-player": "^2.12.0",