Merge remote-tracking branch 'origin/dev' into zustand/io/migration

docs/docs/components/embeddings.mdx

@@ -98,9 +98,9 @@ Used to load [OpenAI’s](https://openai.com/) embedding models.
 
 Wrapper around [Google Vertex AI](https://cloud.google.com/vertex-ai) [Embeddings API](https://cloud.google.com/vertex-ai/docs/generative-ai/embeddings/get-text-embeddings).
 
-:::info
+<Admonition type="info">
 Vertex AI is a cloud computing platform offered by Google Cloud Platform (GCP). It provides access, management, and development of applications and services through global data centers. To use Vertex AI PaLM, you need to have the [google-cloud-aiplatform](https://pypi.org/project/google-cloud-aiplatform/) Python package installed and credentials configured for your environment.
-:::
+</Admonition>
 
 - **credentials:** The default custom credentials (google.auth.credentials.Credentials) to use.
 - **location:** The default location to use when making API calls – defaults to `us-central1`.

docs/docs/components/llms.mdx

@@ -40,9 +40,10 @@ Wrapper around Anthropic's large language model used for chat-based interactions
 
 The `CTransformers` component provides access to the Transformer models implemented in C/C++ using the [GGML](https://github.com/ggerganov/ggml) library.
 
-:::info
+<Admonition type="info">
+
 Make sure to have the `ctransformers` python package installed. Learn more about installation, supported models, and usage [here](https://github.com/marella/ctransformers).
-:::
+</Admonition>
 
 **config:** Configuration for the Transformer models. Check out [config](https://github.com/marella/ctransformers#config). Defaults to:
 
@@ -115,9 +116,9 @@ Wrapper around [Cohere's](https://cohere.com) large language models.
 
 Wrapper around [HuggingFace](https://www.huggingface.co/models) models.
 
-:::info
+<Admonition type="info">
 The HuggingFace Hub is an online platform that hosts over 120k models, 20k datasets, and 50k demo apps, all of which are open-source and publicly available. Discover more at [HuggingFace](http://www.huggingface.co).
-:::
+</Admonition>
 
 - **huggingfacehub_api_token:** Token needed to authenticate the API.
 - **model_kwargs:** Keyword arguments to pass to the model.
@@ -130,9 +131,9 @@ The HuggingFace Hub is an online platform that hosts over 120k models, 20k datas
 
 The `LlamaCpp` component provides access to the `llama.cpp` models.
 
-:::info
+<Admonition type="info">
 Make sure to have the `llama.cpp` python package installed. Learn more about installation, supported models, and usage [here](https://github.com/ggerganov/llama.cpp).
-:::
+</Admonition>
 
 - **echo:** Whether to echo the prompt – defaults to `False`.
 - **f16_kv:** Use half-precision for key/value cache – defaults to `True`.
@@ -181,9 +182,9 @@ Wrapper around [OpenAI's](https://openai.com) large language models.
 
 Wrapper around [Google Vertex AI](https://cloud.google.com/vertex-ai) large language models.
 
-:::info
+<Admonition type="info">
 Vertex AI is a cloud computing platform offered by Google Cloud Platform (GCP). It provides access, management, and development of applications and services through global data centers. To use Vertex AI PaLM, you need to have the [google-cloud-aiplatform](https://pypi.org/project/google-cloud-aiplatform/) Python package installed and credentials configured for your environment.
-:::
+</Admonition>
 
 - **credentials:** The default custom credentials (google.auth.credentials.Credentials) to use.
 - **location:** The default location to use when making API calls – defaults to `us-central1`.
@@ -203,9 +204,9 @@ Vertex AI is a cloud computing platform offered by Google Cloud Platform (GCP).
 
 Wrapper around [Google Vertex AI](https://cloud.google.com/vertex-ai) large language models.
 
-:::info
+<Admonition type="info">
 Vertex AI is a cloud computing platform offered by Google Cloud Platform (GCP). It provides access, management, and development of applications and services through global data centers. To use Vertex AI PaLM, you need to have the [google-cloud-aiplatform](https://pypi.org/project/google-cloud-aiplatform/) Python package installed and credentials configured for your environment.
-:::
+</Admonition>
 
 - **credentials:** The default custom credentials (google.auth.credentials.Credentials) to use.
 - **location:** The default location to use when making API calls – defaults to `us-central1`.

docs/docs/components/tools.mdx

@@ -9,6 +9,21 @@ import Admonition from '@theme/Admonition';
 </Admonition>
 
 
+### SearchApi
+
+Real-time search engine results API. Returns structured JSON data that includes answer box, knowledge graph, organic results, and more.
+
+**Parameters**
+
+- **Api Key:** A unique identifier for the SearchApi, necessary for authenticating requests to real-time search engines. This key can be retrieved from the [SearchApi dashboard](https://www.searchapi.io/).
+- **Engine:** Specifies the search engine. For instance: google, google_scholar, bing, youtube, and youtube_transcripts. A full list of supported engines is available in the [documentation](https://www.searchapi.io/docs/google).
+- **Parameters:** Allows the selection of any parameters recognized by SearchApi, with some being required and others optional. 
+
+**Output**
+
+- **Document:** The JSON response from the request as a Document.
+
+
 ### BingSearchRun
 
 Bing Search is a web search engine owned and operated by Microsoft. It provides search results for various types of content, including web pages, images, videos, and news articles. It uses a combination of algorithms and human editors to deliver search results to users.
@@ -60,4 +75,4 @@ Tool for getting metadata about a SQL database. The input to this tool is a comm
 
 **Params**
 
-- **Db:** SQLDatabase to query.
+- **Db:** SQLDatabase to query.

docs/docs/deployment/gcp-deployment.md

@@ -4,9 +4,8 @@
 
 This guide will help you set up a Langflow development VM in a Google Cloud Platform project using Google Cloud Shell.
 
-:::note
-When Cloud Shell opens, be sure to select **Trust repo**. Some `gcloud` commands might not run in an ephemeral Cloud Shell environment.
-:::
+> Note: When Cloud Shell opens, be sure to select **Trust repo**. Some `gcloud` commands might not run in an ephemeral Cloud Shell environment.
+
 
 
 ## Standard VM 

docs/docs/examples/buffer-memory.mdx

@@ -14,6 +14,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
   alt="Docusaurus themed image"
   sources={{
     light: "img/buffer-memory.png",
+    dark: "img/buffer-memory.png",
   }}
 />
 

docs/docs/examples/conversation-chain.mdx

@@ -20,6 +20,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
   alt="Docusaurus themed image"
   sources={{
     light: "img/basic-chat.png",
+    dark: "img/basic-chat.png",
   }}
 />
 

docs/docs/examples/csv-loader.mdx

@@ -32,6 +32,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
   alt="Docusaurus themed image"
   sources={{
     light: "img/csv-loader.png",
+    dark: "img/csv-loader.png",
   }}
 />
 
@@ -39,12 +40,12 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 
 <Admonition type="note" title="LangChain Components 🦜🔗">
 
-- [`CSVLoader`](https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/csv)
+- [`CSVLoader`](https://python.langchain.com/docs/integrations/document_loaders/csv)
 - [`CharacterTextSplitter`](https://python.langchain.com/docs/modules/data_connection/document_transformers/text_splitters/character_text_splitter)
-- [`OpenAIEmbedding`](https://python.langchain.com/docs/modules/data_connection/text_embedding/integrations/openai)
-- [`Chroma`](https://python.langchain.com/docs/modules/data_connection/vectorstores/integrations/chroma)
+- [`OpenAIEmbedding`](https://python.langchain.com/docs/integrations/text_embedding/openai)
+- [`Chroma`](https://python.langchain.com/docs/integrations/vectorstores/chroma)
 - [`VectorStoreInfo`](https://python.langchain.com/docs/modules/data_connection/vectorstores/)
 - [`OpenAI`](https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai)
-- [`VectorStoreAgent`](https://python.langchain.com/docs/modules/agents/toolkits/vectorstore)
+- [`VectorStoreAgent`](https://js.langchain.com/docs/modules/agents/tools/how_to/agents_with_vectorstores)
 
 </Admonition>

docs/docs/examples/flow-runner.mdx

@@ -14,6 +14,7 @@ The CustomComponent class allows us to create components that interact with Lang
   alt="Document Processor Component"
   sources={{
     light: "img/flow_runner.png",
+    dark: "img/flow_runner.png",
   }}
   style={{
     width: "30%",
@@ -339,6 +340,7 @@ Done! This is what our script and custom component looks like:
     alt="Document Processor Code"
     sources={{
         light: "img/flow_runner_code.png",
+        dark: "img/flow_runner_code.png",
     }}
     style={{
         maxWidth: "100%",
@@ -353,6 +355,7 @@ Done! This is what our script and custom component looks like:
     alt="Document Processor Component"
     sources={{
         light: "img/flow_runner.png",
+        dark: "img/flow_runner.png",
     }}
     style={{
         width: "40%",

docs/docs/examples/how-upload-examples.mdx

@@ -12,6 +12,7 @@ Langflow Examples is a repository on [GitHub](https://github.com/logspace-ai/lan
   alt="Docusaurus themed image"
   sources={{
     light: "img/community-examples.png",
+    dark: "img/community-examples.png",
   }}
   style={{ width: "100%" }}
 />

docs/docs/examples/midjourney-prompt-chain.mdx

@@ -32,6 +32,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
   alt="Docusaurus themed image"
   sources={{
     light: "img/midjourney-prompt-chain.png",
+    dark: "img/midjourney-prompt-chain.png",
   }}
 />
 
@@ -40,6 +41,6 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 <Admonition type="note" title="LangChain Components 🦜🔗">
 
 - [`OpenAI`](https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai)
-- [`ConversationSummaryMemory`](https://python.langchain.com/docs/modules/memory/how_to/summary)
+- [`ConversationSummaryMemory`](https://python.langchain.com/docs/modules/memory/types/summary)
 
 </Admonition>

docs/docs/examples/multiple-vectorstores.mdx

@@ -24,7 +24,7 @@ https://pt.wikipedia.org/wiki/Harry_Potter
 
 <Admonition type="info">
   Learn more about Multiple Vector Stores
-  [here](https://python.langchain.com/docs/modules/agents/toolkits/vectorstore?highlight=Multiple%20Vector%20Stores#multiple-vectorstores).
+  [here](https://python.langchain.com/docs/modules/data_connection/vectorstores/).
 </Admonition>
 
 ## ⛓️ Langflow Example
@@ -37,6 +37,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
   alt="Docusaurus themed image"
   sources={{
     light: "img/multiple-vectorstores.png",
+    dark: "img/multiple-vectorstores.png",
   }}
 />
 
@@ -44,14 +45,14 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 
 <Admonition type="note" title="LangChain Components 🦜🔗">
 
-- [`WebBaseLoader`](https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/web_base)
-- [`TextLoader`](https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/unstructured_file)
+- [`WebBaseLoader`](https://python.langchain.com/docs/integrations/document_loaders/web_base)
+- [`TextLoader`](https://python.langchain.com/docs/modules/data_connection/document_loaders/)
 - [`CharacterTextSplitter`](https://python.langchain.com/docs/modules/data_connection/document_transformers/text_splitters/character_text_splitter)
-- [`OpenAIEmbedding`](https://python.langchain.com/docs/modules/data_connection/text_embedding/integrations/openai)
-- [`Chroma`](https://python.langchain.com/docs/modules/data_connection/vectorstores/integrations/chroma)
+- [`OpenAIEmbedding`](https://python.langchain.com/docs/integrations/text_embedding/openai)
+- [`Chroma`](https://python.langchain.com/docs/integrations/vectorstores/chroma)
 - [`VectorStoreInfo`](https://python.langchain.com/docs/modules/data_connection/vectorstores/)
 - [`OpenAI`](https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai)
-- [`VectorStoreRouterToolkit`](https://python.langchain.com/docs/modules/agents/toolkits/vectorstore)
-- [`VectorStoreRouterAgent`](https://python.langchain.com/docs/modules/agents/toolkits/vectorstore)
+- [`VectorStoreRouterToolkit`](https://js.langchain.com/docs/modules/agents/tools/how_to/agents_with_vectorstores)
+- [`VectorStoreRouterAgent`](https://js.langchain.com/docs/modules/agents/tools/how_to/agents_with_vectorstores)
 
 </Admonition>

docs/docs/examples/python-function.mdx

@@ -28,7 +28,7 @@ The `AgentInitializer` component is a quick way to construct an agent from the m
 <Admonition type="info">
   The `PythonFunction` is a custom component that uses the LangChain 🦜🔗 tool
   decorator. Learn more about it
-  [here](https://python.langchain.com/docs/modules/agents/tools/how_to/custom_tools).
+  [here](https://python.langchain.com/docs/modules/agents/tools/custom_tools).
 </Admonition>
 
 ## ⛓️ Langflow Example
@@ -41,6 +41,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
   alt="Docusaurus themed image"
   sources={{
     light: "img/python-function.png",
+    dark: "img/python-function.png",
   }}
 />
 
@@ -48,7 +49,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 
 <Admonition type="note" title="LangChain Components 🦜🔗">
 
-- [`PythonFunctionTool`](https://python.langchain.com/docs/modules/agents/tools/how_to/custom_tools)
+- [`PythonFunctionTool`](https://python.langchain.com/docs/modules/agents/tools/custom_tools)
 - [`ChatOpenAI`](https://python.langchain.com/docs/modules/model_io/models/chat/integrations/openai)
 - [`AgentInitializer`](https://python.langchain.com/docs/modules/agents/)
 

docs/docs/examples/searchapi-tool.mdx

@@ -0,0 +1,52 @@
+import Admonition from "@theme/Admonition";
+
+# SearchApi Tool
+
+The [SearchApi](https://www.searchapi.io/) allows developers to retrieve results from search engines such as Google, Google Scholar, YouTube, YouTube transcripts, and more, and can be used as in Langflow through the `SearchApi` tool.
+
+<Admonition type="info">
+  To use the SearchApi, you must first obtain an API key by registering at [SearchApi's website](https://www.searchapi.io/).
+</Admonition>
+
+In the given example, we specify `engine` as `youtube_transcripts` and provide a `video_id`.
+
+<Admonition type="info">
+  All engines and parameters can be found in [SearchApi documentation](https://www.searchapi.io/docs/google).
+</Admonition>
+
+The `RetrievalQA` chain processes a `Document` along with a user's question to return an answer.
+
+<Admonition type="tip">
+  In this example, we used [`ChatOpenAI`](https://platform.openai.com/) as the
+  LLM, but feel free to experiment with other Language Models!
+</Admonition>
+
+The `RetrievalQA` takes `CombineDocsChain` and `SearchApi` tool as inputs, using the tool as a `Document` to answer questions.
+
+<Admonition type="info">
+  Learn more about the SearchApi
+  [here](https://python.langchain.com/docs/integrations/tools/searchapi).
+</Admonition>
+
+## ⛓️ Langflow Example
+
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/searchapi-tool.png",
+  }}
+/>
+
+#### <a target="\_blank" href="json_files/SearchApi_Tool.json" download>Download Flow</a>
+
+<Admonition type="note" title="LangChain Components 🦜🔗">
+
+- [`OpenAI`](https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai)
+- [`SearchApiAPIWrapper`](https://python.langchain.com/docs/integrations/providers/searchapi#wrappers)
+- [`ZeroShotAgent`](https://python.langchain.com/docs/modules/agents/how_to/custom_mrkl_agent)
+
+</Admonition>

docs/docs/examples/serp-api-tool.mdx

@@ -22,7 +22,7 @@ The `ZeroShotAgent` takes the `LLMChain` and the `Search` tool as inputs, using
 
 <Admonition type="info">
   Learn more about the Serp API
-  [here](https://python.langchain.com/docs/modules/agents/tools/integrations/serpapi).
+  [here](https://python.langchain.com/docs/integrations/providers/serpapi ).
 </Admonition>
 
 ## ⛓️ Langflow Example
@@ -35,6 +35,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
   alt="Docusaurus themed image"
   sources={{
     light: "img/serp-api-tool.png",
+    dark: "img/serp-api-tool.png",
   }}
 />
 
@@ -45,7 +46,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 - [`ZeroShotPrompt`](https://python.langchain.com/docs/modules/model_io/prompts/prompt_templates/)
 - [`OpenAI`](https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai)
 - [`LLMChain`](https://python.langchain.com/docs/modules/chains/foundational/llm_chain)
-- [`Search`](https://python.langchain.com/docs/modules/agents/tools/integrations/serpapi)
+- [`Search`](https://python.langchain.com/docs/integrations/providers/serpapi)
 - [`ZeroShotAgent`](https://python.langchain.com/docs/modules/agents/how_to/custom_mrkl_agent)
 
 </Admonition>

docs/docs/getting-started/creating-flows.mdx

@@ -13,6 +13,7 @@ Creating flows with Langflow is easy. Drag sidebar components onto the canvas an
   alt="Docusaurus themed image"
   sources={{
     light: "img/langflow_canvas.png",
+    dark: "img/langflow_canvas.png"
   }}
 />
 

docs/docs/getting-started/hugging-face-spaces.mdx

@@ -12,6 +12,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
   alt="Docusaurus themed image"
   sources={{
     light: "img/hugging-face.png",
+    dark: "img/hugging-face.png",
   }}
   style={{ width: "100%" }}
 />

docs/docs/guidelines/api.mdx

@@ -17,6 +17,7 @@ Langflow offers an API Key functionality that allows users to access their indiv
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/api-key.png"),
+    dark: useBaseUrl("img/api-key.png"),
   }}
   style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
 />

docs/docs/guidelines/chat-interface.mdx

@@ -13,6 +13,7 @@ Langflow’s chat interface provides a user-friendly experience and functionalit
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/chat_interface.png"),
+    dark: useBaseUrl("img/chat_interface.png"),
   }}
   style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
 />
@@ -25,6 +26,7 @@ Notice that editing variables in the chat interface take place temporarily and w
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/chat_interface2.png"),
+    dark: useBaseUrl("img/chat_interface2.png"),
   }}
   style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
 />
@@ -36,6 +38,7 @@ To view the complete prompt in its original, structured format, click the "Displ
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/chat_interface3.png"),
+    dark: useBaseUrl("img/chat_interface3.png"),
   }}
   style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
 />
@@ -47,6 +50,7 @@ In the chat interface, you can redefine which variable should be interpreted as
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/chat_interface4.png"),
+    dark: useBaseUrl("img/chat_interface4.png"),
   }}
   style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
 />

docs/docs/guidelines/chat-widget.mdx

@@ -38,6 +38,7 @@ import Admonition from "@theme/Admonition";
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/widget-sidebar.png"),
+    dark: useBaseUrl("img/widget-sidebar.png"),
   }}
   style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
 />
@@ -53,6 +54,7 @@ import Admonition from "@theme/Admonition";
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/widget-code.png"),
+    dark: useBaseUrl("img/widget-code.png"),
   }}
   style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
 />

docs/docs/guidelines/components.mdx

@@ -30,6 +30,7 @@ Components are the building blocks of the flows. They are made of inputs, output
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/single-compenent.png"),
+    dark: useBaseUrl("img/single-compenent.png"),
   }}
   style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
 />

docs/docs/guidelines/custom-component.mdx

@@ -63,6 +63,7 @@ class DocumentProcessor(CustomComponent):
     alt="Document Processor Component"
     sources={{
         light: "img/document_processor.png",
+        dark: "img/document_processor.png",
     }}
     style={{
         margin: "0 auto",
@@ -330,6 +331,7 @@ All done! This is what our script and brand-new custom component look like:
     alt="Document Processor Code"
     sources={{
         light: "img/document_processor_code.png",
+        dark: "img/document_processor_code.png",
     }}
     style={{
         maxWidth: "100%",
@@ -344,6 +346,7 @@ All done! This is what our script and brand-new custom component look like:
     alt="Document Processor Component"
     sources={{
         light: "img/document_processor.png",
+        dark: "img/document_processor.png",
     }}
     style={{
         width: "40%",

docs/docs/guidelines/features.mdx

@@ -18,6 +18,7 @@ import Admonition from "@theme/Admonition";
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/features.png"),
+    dark: useBaseUrl("img/features.png"),
   }}
   style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
 />

docs/docs/guidelines/login.mdx

@@ -86,6 +86,7 @@ With _`LANGFLOW_AUTO_LOGIN`_ set to _`False`_, Langflow requires users to sign u
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/sign-up.png"),
+    dark: useBaseUrl("img/sign-up.png"),
   }}
   style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
 />
@@ -102,6 +103,7 @@ Users can change their profile settings by clicking on the profile icon in the t
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/my-account.png"),
+    dark: useBaseUrl("img/my-account.png"),
   }}
   style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
 />
@@ -112,6 +114,7 @@ By clicking on **Profile Settings**, the user is taken to the profile settings p
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/profile-settings.png"),
+    dark: useBaseUrl("img/profile-settings.png"),
   }}
   style={{ maxWidth: "600px", margin: "0 auto" }}
 />
@@ -122,6 +125,7 @@ By clicking on **Admin Page**, the superuser is taken to the admin page, where t
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/admin-page.png"),
+    dark: useBaseUrl("img/admin-page.png"),
   }}
   style={{ maxWidth: "600px", margin: "0 auto" }}
 

docs/docs/guidelines/prompt-customization.mdx

@@ -13,6 +13,7 @@ The prompt template allows users to create prompts and define variables that pro
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/prompt_customization.png"),
+    dark: useBaseUrl("img/prompt_customization.png"),
   }}
   style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
 />
@@ -25,6 +26,7 @@ Variables can be used to define instructions, questions, context, inputs, or exa
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/prompt_customization2.png"),
+    dark: useBaseUrl("img/prompt_customization2.png"),
   }}
   style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
 />
@@ -37,6 +39,7 @@ Once inserted, these variables are immediately recognized as new fields in the p
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/prompt_customization3.png"),
+    dark: useBaseUrl("img/prompt_customization3.png"),
   }}
   style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
 />
@@ -49,6 +52,7 @@ You can also use documents or output parsers as prompt variables. By plugging th
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/prompt_customization4.png"),
+    dark: useBaseUrl("img/prompt_customization4.png"),
   }}
   style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
 />
@@ -63,6 +67,7 @@ If working with an interactive (chat-like) flow, remember to keep one of the inp
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/prompt_customization5.png"),
+    dark: useBaseUrl("img/prompt_customization5.png"),
   }}
   style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
 />

docs/docs/index.mdx

@@ -12,6 +12,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
   alt="Docusaurus themed image"
   sources={{
     light: "img/new_langflow_demo.gif",
+    dark: "img/new_langflow_demo.gif",
   }}
   style={{ width: "100%" }}
 />

docs/sidebars.js

@@ -82,6 +82,7 @@ module.exports = {
         "examples/buffer-memory",
         "examples/midjourney-prompt-chain",
         "examples/csv-loader",
+        "examples/searchapi-tool",
         "examples/serp-api-tool",
         "examples/multiple-vectorstores",
         "examples/python-function",